npm package: @hnxccy/xc-components-package
Description: A comprehensive Vue.js components package for recruitment management, compatible with Vue 2 and Vue 3
Author: Your Name
Latest version: 7.0.0

# XC Components Package

A comprehensive Vue.js components package for recruitment management, compatible with Vue 2 and Vue 3.

## Features

- 🚀 **Vue2 & Vue3 Compatible**: Works seamlessly with both Vue 2 and Vue 3
- 📦 **Multi-Component Package**: Includes multiple reusable components
- 🎨 **Element UI/Plus Ready**: Built with Element UI and Element Plus in mind
- 📱 **Responsive Design**: Mobile-friendly components
- 🔧 **TypeScript Support**: Full TypeScript definitions included
- 📚 **Comprehensive Documentation**: Detailed examples and API reference

## Components

### Main Components

- **PositionForm**: Complete job posting form with all fields
- **CompanySelector**: Company selection component
- **SalaryInput**: Salary input with range/fixed options
- **AddressSelector**: Address selection with province/city/area

## Installation

### For Vue 2

```bash
npm install @hnxccy/xc-components-package element-ui
# 或者
yarn add @hnxccy/xc-components-package element-ui
```

**注意**: Vue 2 项目需要安装 `element-ui` 作为依赖。

### For Vue 3

```bash
npm install @hnxccy/xc-components-package element-plus
# 或者
yarn add @hnxccy/xc-components-package element-plus
```

**注意**: Vue 3 项目需要安装 `element-plus` 作为依赖。

### 依赖说明

本包使用 `peerDependencies` 来管理 UI 库依赖，这意味着：

- **Vue**: 必须安装，支持 Vue 2.6+ 和 Vue 3.0+
- **Element UI/Plus**: 可选依赖，根据你的 Vue 版本选择安装
  - Vue 2 → 安装 `element-ui`
  - Vue 3 → 安装 `element-plus`

### 解决依赖冲突

如果遇到依赖冲突，可以使用以下命令：

```bash
# 使用 --legacy-peer-deps 标志
npm install @hnxccy/xc-components-package --legacy-peer-deps

# 或者使用 --force 标志
npm install @hnxccy/xc-components-package --force

# 对于 yarn
yarn add @hnxccy/xc-components-package --ignore-peer-dependencies
```

## Usage

### Full Package Usage

```javascript
import Vue from 'vue'
import XCComponents from 'xc-components-package'

Vue.use(XCComponents)
```

### Individual Component Usage

```javascript
import { PositionForm, CompanySelector, SalaryInput, AddressSelector } from 'xc-components-package'

// Use individual components
Vue.component('PositionForm', PositionForm)
Vue.component('CompanySelector', CompanySelector)
Vue.component('SalaryInput', SalaryInput)
Vue.component('AddressSelector', AddressSelector)
```

### 在组件中使用

#### 使用完整表单

```vue
<template>
  <div>
    <PositionForm
      :edit-id="editId"
      :is-copy="isCopy"
      :initial-data="formData"
      @submit="handleSubmit"
      @search-company="handleSearchCompany"
      @get-city="handleGetCity"
      @get-area="handleGetArea"
      @reference-click="handleReferenceClick"
      @set-operate="handleSetOperate"
    />
  </div>
</template>
```

#### 使用单个组件

```vue
<template>
  <div>
    <!-- 企业选择器 -->
    <CompanySelector
      v-model="companyId"
      :companies="companies"
      @change="handleCompanyChange"
      @search="handleCompanySearch"
    />
    
    <!-- 薪资输入 -->
    <SalaryInput
      v-model="salaryData"
      :salary-unit-options="salaryUnits"
      @change="handleSalaryChange"
    />
    
    <!-- 地址选择器 -->
    <AddressSelector
      v-model="addressData"
      :province-options="provinces"
      :city-options="cities"
      :area-options="areas"
      @get-city="handleGetCity"
      @get-area="handleGetArea"
    />
  </div>
</template>
```

<script>
export default {
  data() {
    return {
      editId: '',
      isCopy: false,
      formData: {}
    }
  },
  methods: {
    handleSubmit(formData) {
      console.log('表单提交:', formData)
      // 处理表单提交
    },
    handleSearchCompany(query) {
      // 处理企业搜索
      console.log('搜索企业:', query)
    },
    handleGetCity(val, type) {
      // 处理城市选择
      console.log('选择城市:', val, type)
    },
    handleGetArea(val, type) {
      // 处理区域选择
      console.log('选择区域:', val, type)
    },
    handleReferenceClick() {
      // 处理参考模板点击
      console.log('点击参考模板')
    },
    handleSetOperate(data) {
      // 处理平台自营设置
      console.log('设置平台自营:', data)
    }
  }
}
</script>

## Props

### PositionForm

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| editId | String/Number | '' | 编辑ID，用于编辑模式 |
| isCopy | Boolean | false | 是否为复制模式 |
| initialData | Object | {} | 初始表单数据 |

### CompanySelector

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| value | String/Number | '' | 选中的企业ID |
| disabled | Boolean | false | 是否禁用 |
| companies | Array | [] | 企业列表数据 |

### SalaryInput

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| value | Object | {} | 薪资数据对象 |
| salaryUnitOptions | Array | [] | 薪资单位选项 |

### AddressSelector

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| value | Object | {} | 地址数据对象 |
| provinceOptions | Array | [] | 省份选项 |
| cityOptions | Array | [] | 城市选项 |
| areaOptions | Array | [] | 区域选项 |
| showArbitraryOption | Boolean | true | 是否显示任意地点选项 |

## Events

### PositionForm

| 事件名 | 参数 | 说明 |
|--------|------|------|
| submit | formData | 表单提交事件 |
| search-company | query | 企业搜索事件 |
| get-city | val, type | 城市选择事件 |
| get-area | val, type | 区域选择事件 |
| reference-click | - | 参考模板点击事件 |
| set-operate | data | 平台自营设置事件 |

### CompanySelector

| 事件名 | 参数 | 说明 |
|--------|------|------|
| input | companyId | 企业ID变化事件 |
| change | companyId | 企业选择变化事件 |
| company-click | company | 企业点击事件 |
| search | query | 企业搜索事件 |

### SalaryInput

| 事件名 | 参数 | 说明 |
|--------|------|------|
| input | salaryData | 薪资数据变化事件 |
| change | salaryData | 薪资数据变化事件 |

### AddressSelector

| 事件名 | 参数 | 说明 |
|--------|------|------|
| input | addressData | 地址数据变化事件 |
| change | addressData | 地址数据变化事件 |
| address-limit-change | status | 地址限制变化事件 |
| get-city | provinceId, type | 获取城市事件 |
| get-area | cityId, type | 获取区域事件 |

## 表单字段

### 基本信息
- 企业名称 (companyid)
- 职位标题 (positionname)
- 职位描述 (detail)
- 工作地址 (address_status, top_areaid, second_areaid, areaid)

### 薪资信息
- 薪资类型 (salary_type)
- 最低薪资 (minsalary)
- 最高薪资 (maxsalary)
- 固定薪资 (salary)
- 薪资单位 (salary_unit)

### 招聘要求
- 招聘类型 (positiontype)
- 招聘人数 (recruitment, peopleneed)
- 年龄要求 (min_age, max_age)
- 性别要求 (sextype)

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建Vue2版本
npm run build:vue2

# 构建Vue3版本
npm run build:vue3

# 构建所有版本
npm run build
```

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details.

## 🔧 开发

### 本地开发

```bash
# 克隆项目
git clone <repository-url>
cd xc-componet-package

# 安装依赖
npm install

# 开发模式（监听文件变化）
npm run dev

# 构建项目
npm run build
```

### 项目结构

```
src/
├── components/           # Vue 组件
│   ├── PositionForm.vue     # 主表单组件
│   ├── CompanySelector.vue  # 企业选择器
│   ├── SalaryInput.vue      # 薪资输入
│   ├── AddressSelector.vue  # 地址选择器
│   └── index.js             # 组件导出
├── utils/               # 工具函数
│   └── index.js
├── index.js             # 主入口文件
└── types.d.ts           # TypeScript 类型定义

dist/                    # 构建输出
├── index.js             # CommonJS 格式
├── index.esm.js         # ES Module 格式
├── vue2.js              # Vue2 版本
└── vue3.js              # Vue3 版本
```

### 构建配置

- **Rollup**: 模块打包工具
- **Babel**: JavaScript 转译
- **Vue Compiler**: Vue 单文件组件编译
- **TypeScript**: 类型检查和声明文件生成

## 📚 相关资源

- [Vue.js 官方文档](https://vuejs.org/)
- [Element UI 文档](https://element.eleme.io/)
- [Element Plus 文档](https://element-plus.org/)
- [Rollup 文档](https://rollupjs.org/)
- [npm 组织管理](https://docs.npmjs.com/organizations)