cy-element-ui 1.1.23 → 1.1.26

package/README.md

@@ -1,494 +1,629 @@
-# cy-element-ui 组件开发指南
-
-## 概述
-
-本文档详细介绍如何在 cy-element-ui 项目中创建新组件，并将其打包发布到 npm 仓库。
-
----
-
-## 一、创建新组件
-
-### 1. 自动创建组件模板
-
-使用项目提供的脚本自动生成组件基础结构：
-
-```bash
-npm run new:cy <component-name>
-```
-
-**示例：**
-```bash
-npm run new:cy test
-```
-
-**执行结果：**
-- 创建 `packages/cy-test/` 目录
-- 创建 `packages/cy-test/index.js` - 组件导出文件
-- 创建 `packages/cy-test/src/main.vue` - 组件实现文件
-
-### 2. 手动创建组件（可选）
-
-如果需要自定义结构，可以手动创建以下文件：
-
-**文件结构：**
-```
-packages/
-└── cy-test/
-    ├── index.js          # 组件导出
-    └── src/
-        └── main.vue      # 组件实现
-```
-
-**`packages/cy-test/index.js` 内容：**
-```javascript
-import CyTest from './src/main';
-
-CyTest.install = function(Vue) {
-  Vue.component(CyTest.name, CyTest);
-};
-
-export default CyTest;
-```
-
-**`packages/cy-test/src/main.vue` 内容：**
-```vue
-<template>
-  <div class="cy-test">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CyTest',
-  props: {
-    // 定义组件属性
-  }
-};
-</script>
-```
-
----
-
-## 二、添加组件样式
-
-### 1. 创建样式文件
-
-在主题样式目录中创建组件样式：
-
-```bash
-touch packages/theme-chalk/src/cy-test.scss
-```
-
-**`packages/theme-chalk/src/cy-test.scss` 内容示例：**
-```scss
-.cy-test {
-  display: inline-block;
-  padding: 20px 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 8px;
-  transition: all 0.3s ease;
-}
-```
-
-### 2. 导入样式到主题入口
-
-修改 `packages/theme-chalk/src/index.scss`，添加样式导入：
-
-```scss
-// 在文件末尾添加
-@import "./cy-test.scss";
-```
-
-### 3. 产研组件样式组织（cy 模块）
-
-产研自定义组件（treeSelect、tabDialog、subTitle）的样式统一存放在 `packages/theme-chalk/src/cy/` 目录下：
-
-**目录结构：**
-```
-packages/theme-chalk/src/
-└── cy/
-    ├── index.scss             # cy 模块入口
-    ├── base.scss              # 基础样式
-    ├── treeSelect.scss        # 树形选择器样式
-    ├── tabDialog.scss         # 标签对话框样式
-    ├── subTitle.scss          # 副标题样式
-    └── selectDisplayInput.scss # 选择显示输入框样式
-```
-
-**`packages/theme-chalk/src/cy/index.scss` 内容：**
-```scss
-@import "./base.scss";
-@import "./treeSelect.scss";
-@import "./tabDialog.scss";
-@import "./subTitle.scss";
-@import "./selectDisplayInput.scss";
-```
-
-**主入口引入：**
-
-修改 `packages/theme-chalk/src/index.scss`，添加：
-```scss
-@import "./cy/index.scss";
-```
-
----
-
-## 三、注册组件到组件库
-
-### 1. 更新组件配置文件
-
-修改 `components.json`，添加新组件：
-
-```json
-{
-  "cy-test": "./packages/cy-test/index.js"
-}
-```
-
-### 2. 重新生成入口文件
-
-运行以下命令自动更新 `src/index.js`：
-
-```bash
-npm run build:file
-```
-
-**验证：**
-检查 `src/index.js` 是否包含：
-```javascript
-import CyTest from '../packages/cy-test/index.js';
-```
-
----
-
-## 四、添加组件文档（可选）
-
-### 1. 创建示例页面
-
-在示例目录中创建组件展示页面：
-
-```
-examples/
-└── pages/
-    ├── zh-CN/
-    │   └── cy-test.md      # 中文文档
-    └── en-US/
-        └── cy-test.md      # 英文文档
-```
-
-### 2. 配置导航
-
-修改 `examples/nav.config.json`，添加导航项：
-
-```json
-{
-  "chanyan": {
-    "name": "产研模块",
-    "children": [
-      {
-        "path": "/cy-test",
-        "name": "CyTest 测试组件"
-      }
-    ]
-  }
-}
-```
-
----
-
-## 五、打包构建
-
-### 1. 完整构建
-
-运行完整构建命令，生成 `lib/` 目录：
-
-```bash
-npm run dist
-```
-
-**构建内容：**
-- `lib/index.js` - 主入口文件（包含所有组件）
-- `lib/theme-chalk/` - 主题样式文件
-
-### 2. 单独构建主题样式（可选）
-
-如果只修改了样式，可以单独构建主题：
-
-```bash
-npm run build:theme
-```
-
-### 3. 验证打包结果
-
-检查 `lib/index.js` 是否包含新组件：
-
-```bash
-grep "CyTest" lib/index.js
-```
-
----
-
-## 六、发布到 npm
-
-### 1. 更新版本号
-
-修改 `package.json` 中的版本号：
-
-```json
-{
-  "version": "1.1.4"
-}
-```
-
-**版本号规则：**
-- `MAJOR.MINOR.PATCH`
-- 修复bug：增加 PATCH
-- 新增功能：增加 MINOR
-- 重大变更：增加 MAJOR
-
-### 2. 登录 npm
-
-确保已登录 npm 账号：
-
-```bash
-npm login
-```
-
-### 3. 发布到 npm
-
-执行发布命令：
-
-```bash
-npm publish
-```
-
-**注意事项：**
-- 确保版本号未被使用过
-- 确保 `lib/` 目录已正确生成
-- 确保 `package.json` 中的 `main` 字段指向正确
-
----
-
-## 七、在项目中使用
-
-### 1. 安装依赖
-
-```bash
-npm install cy-element-ui --save
-```
-
-### 2. 全局引入
-
-```javascript
-// main.js
-import Vue from 'vue'
-import CyElementUI from 'cy-element-ui'
-import 'cy-element-ui/lib/theme-chalk/index.css'
-
-Vue.use(CyElementUI)
-```
-
-### 3. 使用组件
-
-```vue
-<template>
-  <cy-test title="测试">
-    这是测试内容
-  </cy-test>
-</template>
-```
-
----
-
-## 八、文件变更汇总
-
-### 创建的文件
-
-| 文件路径 | 说明 |
-|---------|------|
-| `packages/cy-test/index.js` | 组件导出文件 |
-| `packages/cy-test/src/main.vue` | 组件实现文件 |
-| `packages/theme-chalk/src/cy-test.scss` | 组件样式文件 |
-| `packages/theme-chalk/src/cy/` | 产研组件样式目录 |
-| `packages/theme-chalk/src/cy/index.scss` | cy 模块样式入口 |
-| `packages/theme-chalk/src/cy/base.scss` | cy 基础样式 |
-| `packages/theme-chalk/src/cy/treeSelect.scss` | 树形选择器样式 |
-| `packages/theme-chalk/src/cy/tabDialog.scss` | 标签对话框样式 |
-| `packages/theme-chalk/src/cy/subTitle.scss` | 副标题样式 |
-| `packages/selectDisplayInput/index.js` | 选择显示输入框组件导出 |
-| `packages/selectDisplayInput/src/main.vue` | 选择显示输入框组件实现 |
-| `packages/theme-chalk/src/cy/selectDisplayInput.scss` | 选择显示输入框样式 |
-| `examples/docs/zh-cn/chanyan/selectDisplayInput.md` | 选择显示输入框中文文档 |
-| `examples/docs/en-us/chanyan/selectDisplayInput.md` | 选择显示输入框英文文档 |
-
-### 修改的文件
-
-| 文件路径 | 修改内容 |
-|---------|---------|
-| `components.json` | 添加组件配置 |
-| `packages/theme-chalk/src/index.scss` | 导入组件样式和 cy 模块 |
-| `src/index.js` | 自动生成组件注册 |
-| `package.json` | 更新版本号和构建脚本 |
-
-### 生成的文件（构建后）
-
-| 文件路径 | 说明 |
-|---------|------|
-| `lib/index.js` | 打包后的主入口 |
-| `lib/theme-chalk/cy-test.css` | 组件样式 |
-| `lib/theme-chalk/index.css` | 完整主题样式 |
-| `lib/treeSelect.js` | 树形选择器组件 |
-| `lib/tabDialog.js` | 标签对话框组件 |
-| `lib/subTitle.js` | 副标题组件 |
-| `lib/selectDisplayInput.js` | 选择显示输入框组件 |
-
----
-
-## 九、常见问题
-
-### Q1: 组件未被打包进 lib/index.js
-
-**原因：** `components.json` 未添加组件配置
-
-**解决：**
-```bash
-npm run build:file
-```
-
-### Q2: 样式未生效
-
-**原因：** 样式未导入到主题入口
-
-**解决：**
-检查 `packages/theme-chalk/src/index.scss` 是否包含：
-```scss
-@import "./cy-test.scss";
-```
-
-### Q3: 发布时版本冲突
-
-**原因：** 版本号已存在
-
-**解决：**
-更新 `package.json` 中的版本号
-
-### Q4: npm 发布失败
-
-**原因：** 未登录或权限不足
-
-**解决：**
-```bash
-npm login
-```
-
-### Q5: 打包过程卡住或时间过长
-
-**原因1：** `components.json` 中缺少组件注册，导致 webpack 构建时无法找到组件入口
-
-**解决：**
-```bash
-# 检查 components.json 是否包含组件
-cat components.json
-
-# 如果缺少，手动添加
-# 例如："tabDialog": "./packages/tabDialog/index.js"
-
-# 重新生成入口文件
-npm run build:file
-```
-
-**原因2：** webpack 批量打包组件时内存不足
-
-**解决：**
-```bash
-# 增加 Node.js 内存限制
-node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --config build/webpack.component.js
-```
-
-**或者修改 package.json 中的构建脚本：**
-```json
-{
-  "scripts": {
-    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"
-  }
-}
-```
-
-### Q6: 自定义指令未注册
-
-**原因：** 组件使用了自定义指令（如 `v-dialog-drag`），但未在主入口文件中注册
-
-**解决：**
-```javascript
-// src/index.js
-import dragDirective from '../packages/tabDialog/src/dialog/drag';
-import dragHeightDirective from '../packages/tabDialog/src/dialog/dragHeight';
-
-const install = function(Vue) {
-  // 注册组件
-  components.forEach(component => {
-    Vue.component(component.name, component);
-  });
-  
-  // 注册指令
-  Vue.directive('dialog-drag', dragDirective);
-  Vue.directive('dialog-drag-height', dragHeightDirective);
-};
-```
-
-### Q7: npm 安装新版本失败
-
-**原因：** 使用了淘宝镜像，新版本尚未同步
-
-**解决：**
-```bash
-# 临时切换到官方源
-npm config set registry https://registry.npmjs.org
-
-# 安装依赖
-npm install
-
-# 验证安装版本
-npm list cy-element-ui
-```
-
-### Q8: 组件文档无法加载，报错 "Cannot find module './zh-CN/xxx.md'"
-
-**原因：** 文档文件放置路径不正确。自定义组件文档应放在 `examples/docs/zh-cn/chanyan/` 目录下，而不是 `examples/docs/zh-CN/` 根目录。
-
-**解决：**
-```bash
-# 正确的文档路径
-examples/docs/zh-cn/chanyan/selectDisplayInput.md
-examples/docs/en-us/chanyan/selectDisplayInput.md
-
-# 导航配置示例（examples/nav.config.json）
-{
-  "path": "/chanyan/selectDisplayInput",
-  "title": "SelectDisplayInput 选择显示输入框"
-}
-```
-
-**注意：**
-- 导航配置中的 `path` 应与文档文件路径对应
-- 英文文档需放在 `examples/docs/en-us/chanyan/` 目录下
-- 目录名称使用小写 `zh-cn` 和 `en-us`
-
----
-
-## 十、开发流程建议
-
-1. **创建组件** → `npm run new:cy <name>`
-2. **编写代码** → 修改 `packages/<name>/src/main.vue`
-3. **添加样式** → 创建 `packages/theme-chalk/src/<name>.scss`
-4. **注册组件** → `npm run build:file`
-5. **测试预览** → `npm run dev`
-6. **打包构建** → `npm run dist`
-7. **发布 npm** → `npm version patch && npm publish`
-
----
-
-## License
-
-MIT
+# cy-element-ui 组件开发指南
+
+## 一、在项目中安装使用
+
+### 1.1 安装依赖
+
+```bash
+# 使用 npm
+npm install cy-element-ui --save
+
+# 使用 yarn
+yarn add cy-element-ui
+
+# 使用淘宝镜像
+npm install cy-element-ui --save --registry=https://registry.npmmirror.com
+```
+
+### 1.2 全局引入
+
+```javascript
+// main.js
+import Vue from 'vue';
+import CyElementUI from 'cy-element-ui';
+import 'cy-element-ui/lib/theme-chalk/index.css';
+
+Vue.use(CyElementUI);
+```
+
+### 1.3 按需引入
+
+#### 方法一：手动引入
+
+```javascript
+import Vue from 'vue';
+import { CyTreeSelect, CyTabDialog, ElButton } from 'cy-element-ui';
+import 'cy-element-ui/lib/theme-chalk/cy/treeSelect.css';
+import 'cy-element-ui/lib/theme-chalk/cy/tabDialog.css';
+import 'cy-element-ui/lib/theme-chalk/button.css';
+
+Vue.use(CyTreeSelect);
+Vue.use(CyTabDialog);
+Vue.use(ElButton);
+```
+
+#### 方法二：使用 babel-plugin-component
+
+**安装插件：**
+
+```bash
+npm install babel-plugin-component --save-dev
+```
+
+**配置 `.babelrc`：**
+
+```json
+{
+  "plugins": [
+    ["component", {
+      "libraryName": "cy-element-ui",
+      "styleLibraryName": "theme-chalk"
+    }]
+  ]
+}
+```
+
+**使用：**
+
+```javascript
+import Vue from 'vue';
+import { CyTreeSelect, CyTabDialog, ElButton } from 'cy-element-ui';
+
+Vue.use(CyTreeSelect);
+Vue.use(CyTabDialog);
+Vue.use(ElButton);
+```
+
+### 1.4 使用示例
+
+```vue
+<template>
+	<div class="app-container">
+		<!-- 使用 Element UI 组件 -->
+		<el-button type="primary">Element Button</el-button>
+		
+		<!-- 使用产研自定义组件 -->
+		<cy-tree-select
+			v-model="selectedIds"
+			:data="treeData"
+			placeholder="请选择"
+		></cy-tree-select>
+		
+		<cy-tab-dialog
+			title="标签对话框"
+			:visible="dialogVisible"
+			@close="dialogVisible = false"
+		>
+			<div slot="tab1">标签1内容</div>
+			<div slot="tab2">标签2内容</div>
+		</cy-tab-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'App',
+	data() {
+		return {
+			selectedIds: [],
+			dialogVisible: false,
+			treeData: [
+				{
+					id: '1',
+					label: '一级节点',
+					children: [
+						{ id: '1-1', label: '二级节点' }
+					]
+				}
+			]
+		};
+	}
+};
+</script>
+```
+
+---
+
+## 二、项目架构
+
+### 2.1 整体架构
+
+```
+element-dev/                              # 项目根目录
+├── build/                                # 构建工具目录
+│   ├── bin/                              # 脚本命令
+│   │   ├── build-entry.js                # 生成入口文件脚本
+│   │   ├── gen-cy-types.js               # 生成cy组件类型定义
+│   │   ├── new.js                        # 创建el组件脚本
+│   │   └── new-cy.js                     # 创建cy组件脚本
+│   ├── webpack.conf.js                   # UMD构建配置
+│   ├── webpack.common.js                 # CommonJS构建配置
+│   ├── webpack.component.js              # 组件单独构建配置
+│   └── webpack.demo.js                   # 示例站点构建配置
+├── examples/                             # 示例文档站点
+│   ├── docs/                             # 文档内容
+│   │   └── zh-CN/                        # 中文文档
+│   │       └── cy/                       # 产研组件文档
+│   ├── nav.config.json                   # 导航配置
+│   └── route.config.js                   # 路由配置
+├── packages/                             # 组件源码目录
+│   ├── cy/                               # 产研自定义组件
+│   │   ├── treeSelect/                   # 树形选择器
+│   │   ├── tabDialog/                    # 标签对话框
+│   │   ├── subTitle/                     # 副标题
+│   │   └── selectDisplayInput/           # 选择显示输入框
+│   └── theme-chalk/                      # 主题样式源码
+│       └── src/                          # SCSS源码
+│           └── cy/                       # cy组件样式
+├── src/                                  # 核心源码
+│   └── index.js                          # 组件库主入口（自动生成）
+├── types/                                # 类型定义
+│   └── cy/                               # cy组件类型定义
+├── components.json                       # 组件配置清单
+└── Makefile                              # 命令脚本
+```
+
+### 2.2 目录职责说明
+
+| 目录层级 | 目录路径 | 职责 | 详细说明 |
+|----------|----------|------|----------|
+| 一级 | `build/` | 构建工具 | 包含所有构建脚本和webpack配置文件 |
+| 二级 | `build/bin/` | 命令脚本 | new.js创建el组件，new-cy.js创建cy组件 |
+| 一级 | `examples/` | 示例站点 | 组件展示文档和示例代码 |
+| 二级 | `examples/docs/zh-CN/cy/` | 产研组件文档 | cy组件的中文文档目录 |
+| 一级 | `packages/` | 组件源码 | 所有el和cy组件的源代码 |
+| 二级 | `packages/cy/` | 产研组件 | 自定义的cy-*组件，独立目录管理 |
+| 三级 | `packages/cy/treeSelect/` | 树形选择器 | CyTreeSelect组件源码 |
+| 二级 | `packages/theme-chalk/src/cy/` | cy样式 | 产研组件的SCSS样式文件 |
+| 一级 | `src/` | 核心入口 | 自动生成的组件注册入口文件 |
+| 一级 | `types/cy/` | 类型定义 | cy组件的TypeScript类型定义 |
+
+### 2.3 组件结构规范
+
+**产研自定义组件结构（cy组件）：**
+
+```
+packages/
+└── cy/                        # cy组件根目录
+    ├── treeSelect/            # 组件目录（驼峰式）
+    │   ├── index.js           # 组件导出文件
+    │   └── src/               # 源码目录
+    │       └── main.vue       # 主组件文件（必须）
+    ├── tabDialog/
+    ├── subTitle/
+    └── selectDisplayInput/
+```
+
+**组件目录命名规则：**
+- cy组件：驼峰式（如 `treeSelect`）
+
+---
+
+## 三、创建新组件
+
+### 3.1 创建 cy 组件（产研自定义）
+
+使用 Makefile 命令创建组件：
+
+```bash
+make new-cy <component-name> [中文名]
+```
+
+**示例：**
+
+```bash
+make new-cy advancedSelect 高级选择器
+```
+
+**执行该命令后自动完成以下操作：**
+
+#### 3.1.1 自动创建的文件
+
+| 文件路径 | 说明 | 是否必须修改 |
+|----------|------|-------------|
+| `packages/cy/advancedSelect/index.js` | 组件导出文件 | 否（自动生成） |
+| `packages/cy/advancedSelect/src/main.vue` | 组件实现文件 | 是（必须编写逻辑） |
+| `examples/docs/zh-CN/cy/advancedSelect.md` | 中文文档文件 | 是（必须编写文档） |
+| `packages/theme-chalk/src/cy/advancedSelect.scss` | 组件样式文件 | 是（必须编写样式） |
+| `examples/demo-styles/cy/advancedSelect.scss` | 示例页面样式文件 | 否（可选） |
+| `types/cy/advancedSelect.d.ts` | 类型定义文件（不带 cy- 前缀） | 否（自动生成） |
+
+#### 3.1.2 自动修改的文件
+
+| 文件路径 | 修改内容 | 说明 |
+|----------|---------|------|
+| `packages/theme-chalk/src/cy/index.scss` | 添加 `@import "./advancedSelect.scss";` | 引入组件样式到主题 |
+| `examples/demo-styles/cy/index.scss` | 添加 `@import "./advancedSelect.scss";` | 引入组件样式到示例 |
+| `components.json` | 添加组件配置项 | 注册组件到构建系统 |
+| `examples/nav.config.json` | 添加导航菜单项 | 注册组件到文档导航 |
+
+#### 3.1.3 开发人员需要完成的工作
+
+| 步骤 | 工作内容 | 文件 | 优先级 |
+|------|---------|------|--------|
+| 1 | 编写组件逻辑和模板 | `packages/cy/advancedSelect/src/main.vue` | 高 |
+| 2 | 编写组件样式 | `packages/theme-chalk/src/cy/advancedSelect.scss` | 高 |
+| 3 | 编写组件文档 | `examples/docs/zh-CN/cy/advancedSelect.md` | 高 |
+| 4 | 重新生成入口 | `npm run build:file` | 必须 |
+
+#### 3.1.4 生成的文件内容示例
+
+**`packages/cy/advancedSelect/index.js`：**
+
+```javascript
+import CyAdvancedSelect from './src/main';
+
+/* istanbul ignore next */
+CyAdvancedSelect.install = function(Vue) {
+	Vue.component(CyAdvancedSelect.name, CyAdvancedSelect);
+};
+
+export default CyAdvancedSelect;
+```
+
+**`packages/cy/advancedSelect/src/main.vue`：**
+
+```vue
+<template>
+	<div class="cy-advanced-select"></div>
+</template>
+
+<script>
+export default {
+	name: 'CyAdvancedSelect'
+};
+</script>
+```
+
+### 3.2 创建 el 组件（Element UI 风格）
+
+使用 Makefile 命令创建组件：
+
+```bash
+make new <component-name> [中文名]
+```
+
+**示例：**
+
+```bash
+make new custom-button 自定义按钮
+```
+
+**执行该命令后自动完成以下操作：**
+
+#### 3.2.1 自动创建的文件
+
+| 文件路径 | 说明 | 是否必须修改 |
+|----------|------|-------------|
+| `packages/custom-button/index.js` | 组件导出文件 | 否（自动生成） |
+| `packages/custom-button/src/main.vue` | 组件实现文件 | 是（必须编写逻辑） |
+| `examples/docs/zh-CN/custom-button.md` | 中文文档文件 | 是（必须编写文档） |
+| `packages/theme-chalk/src/custom-button.scss` | 组件样式文件 | 是（必须编写样式） |
+| `examples/demo-styles/custom-button.scss` | 示例页面样式文件 | 否（可选） |
+
+#### 3.2.2 自动修改的文件
+
+| 文件路径 | 修改内容 | 说明 |
+|----------|---------|------|
+| `packages/theme-chalk/src/index.scss` | 添加 `@import "./custom-button.scss";` | 引入组件样式到主题 |
+| `examples/demo-styles/index.scss` | 添加 `@import "./custom-button.scss";` | 引入组件样式到示例 |
+| `components.json` | 添加组件配置项 | 注册组件到构建系统 |
+
+#### 3.2.3 开发人员需要完成的工作
+
+| 步骤 | 工作内容 | 文件 | 优先级 |
+|------|---------|------|--------|
+| 1 | 编写组件逻辑和模板 | `packages/custom-button/src/main.vue` | 高 |
+| 2 | 编写组件样式 | `packages/theme-chalk/src/custom-button.scss` | 高 |
+| 3 | 编写组件文档 | `examples/docs/zh-CN/custom-button.md` | 高 |
+| 4 | 添加导航配置 | `examples/nav.config.json` | 高 |
+| 5 | 重新生成入口 | `npm run build:file` | 必须 |
+
+### 3.3 组件配置文件详解
+
+#### components.json
+
+组件配置清单，定义所有需要打包的组件：
+
+```json
+[
+  { "name": "CyTreeSelect", "path": "./packages/cy/treeSelect/index.js" },
+  { "name": "CyTabDialog", "path": "./packages/cy/tabDialog/index.js" },
+  { "name": "CySubTitle", "path": "./packages/cy/subTitle/index.js" },
+  { "name": "CySelectDisplayInput", "path": "./packages/cy/selectDisplayInput/index.js" },
+  { "name": "Button", "path": "./packages/button/index.js" },
+  { "name": "Input", "path": "./packages/input/index.js" }
+]
+```
+
+**字段说明：**
+- `name`：组件名称（使用 PascalCase，cy组件以Cy开头，el组件首字母大写）
+- `path`：组件导出文件路径（相对于项目根目录）
+
+#### 自动生成入口文件
+
+运行 `npm run build:file` 自动生成 `src/index.js`，包含：
+
+1. 所有组件的 import 语句
+2. 组件数组定义（components）
+3. install 函数（注册所有组件、指令、原型方法）
+4. 默认导出对象（包含版本号、install方法、所有组件）
+
+### 3.4 组件命名规范
+
+| 类型 | 前缀 | 命名方式 | 示例 |
+|------|------|---------|------|
+| Element UI 组件 | `El` | PascalCase | `ElButton`, `ElInput` |
+| 产研自定义组件 | `Cy` | PascalCase | `CyTreeSelect`, `CyTabDialog` |
+| 组件目录（el） | - | 小写连字符 | `custom-button` |
+| 组件目录（cy） | - | 驼峰式 | `treeSelect` |
+| 样式文件 | - | 小写连字符 | `button.scss`, `tree-select.scss` |
+| 文档文件 | - | 驼峰式 | `treeSelect.md` |
+
+---
+
+## 四、修改现有组件
+
+### 4.1 修改组件代码
+
+**步骤 1：定位组件文件**
+
+```bash
+# 修改 cy 组件
+vi packages/cy/treeSelect/src/main.vue
+
+# 修改 el 组件
+vi packages/button/src/button.vue
+```
+
+**步骤 2：修改组件逻辑**
+
+```vue
+<script>
+export default {
+	name: 'CyTreeSelect',
+	props: {
+		// 添加或修改属性
+		allowClear: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		// 添加或修改方法
+		clearSelection() {
+			if (this.allowClear) {
+				this.selectedValues = [];
+				this.$emit('input', []);
+			}
+		}
+	}
+};
+</script>
+```
+
+### 4.2 修改组件样式
+
+```scss
+// packages/theme-chalk/src/cy/treeSelect.scss
+.cy-tree-select {
+	// 添加新样式
+	&__clear-btn {
+		position: absolute;
+		right: 30px;
+		top: 50%;
+		transform: translateY(-50%);
+		cursor: pointer;
+		color: #909399;
+	}
+}
+```
+
+### 4.3 更新组件文档
+
+同步更新对应的文档文件，添加新属性和方法的说明。
+
+---
+
+## 五、编写组件文档
+
+### 5.1 创建文档文件
+
+**中文文档路径：**
+
+```
+examples/docs/zh-CN/cy/<component-name>.md
+```
+
+**文档内容结构：**
+
+```markdown
+## CyAdvancedSelect 高级选择器
+
+### 介绍
+
+高级选择器组件，支持多选、搜索过滤、标签展示等功能。
+
+### 基本用法
+
+```html
+<cy-advanced-select
+  v-model="selectedValues"
+  :options="options"
+  placeholder="请选择"
+></cy-advanced-select>
+```
+
+```javascript
+export default {
+	data() {
+		return {
+			selectedValues: [],
+			options: [
+				{ value: '1', label: '选项1' },
+				{ value: '2', label: '选项2' },
+				{ value: '3', label: '选项3' }
+			]
+		};
+	}
+};
+```
+
+### 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| value / v-model | 选中值数组 | Array | [] |
+| options | 选项列表 | Array | [] |
+| placeholder | 占位提示 | String | '请选择' |
+
+### 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| input | 选中值变化时触发 | 选中的值数组 |
+| change | 选中值变化时触发 | 选中的选项对象数组 |
+```
+
+### 5.2 配置导航
+
+修改 `examples/nav.config.json`：
+
+```json
+{
+  "zh-CN": {
+    "title": "组件",
+    "children": [
+      {
+        "path": "/chanyan",
+        "title": "产研组件",
+        "children": [
+          {
+            "path": "/chanyan/treeSelect",
+            "title": "TreeSelect 树形选择器"
+          },
+          {
+            "path": "/chanyan/advancedSelect",
+            "title": "AdvancedSelect 高级选择器"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 六、打包构建
+
+### 6.1 完整构建
+
+```bash
+npm run dist
+```
+
+**构建内容：**
+
+| 文件路径 | 说明 |
+|----------|------|
+| `lib/index.js` | UMD格式主入口 |
+| `lib/element-ui.common.js` | CommonJS格式入口 |
+| `lib/theme-chalk/` | 主题样式目录 |
+| `lib/[component].js` | 各组件单独打包文件 |
+
+### 6.2 分步构建
+
+```bash
+# 清理构建目录
+npm run clean
+
+# 生成入口文件
+npm run build:file
+
+# 构建 UMD 版本
+npx webpack --config build/webpack.conf.js
+
+# 构建 CommonJS 版本
+npx webpack --config build/webpack.common.js
+
+# 构建组件单独文件
+npx webpack --config build/webpack.component.js
+
+# 构建工具函数
+npm run build:utils
+
+# 构建主题样式
+npm run build:theme
+```
+
+### 6.3 内存不足问题处理
+
+如果构建时出现内存不足错误（退出码 `-1073741510`），可以增加 Node.js 内存限制：
+
+```bash
+# 方式一：临时设置环境变量
+$env:NODE_OPTIONS="--max-old-space-size=8192"
+npm run dist
+
+# 方式二：直接使用 node 命令
+node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --config build/webpack.component.js
+```
+
+---
+
+## 七、发布到 npm
+
+### 7.1 更新版本号
+
+```bash
+# 升级补丁版本（1.1.3 → 1.1.4）
+npm version patch
+
+# 升级次要版本（1.1.3 → 1.2.0）
+npm version minor
+
+# 升级主要版本（1.1.3 → 2.0.0）
+npm version major
+```
+
+### 7.2 登录 npm
+
+```bash
+npm login
+```
+
+### 7.3 发布
+
+```bash
+npm publish
+```
+
+---
+
+## 八、开发流程最佳实践
+
+### 8.1 开发流程
+
+```
+1. 创建组件    → make new-cy <name> [中文名]
+2. 编写代码    → 修改 packages/cy/<name>/src/main.vue
+3. 编写样式    → 修改 packages/theme-chalk/src/cy/<name>.scss
+4. 编写文档    → 修改 examples/docs/zh-CN/cy/<name>.md
+5. 生成入口    → npm run build:file
+6. 启动开发    → npm run dev
+7. 完整构建    → npm run dist
+8. 发布 npm    → npm publish
+```
+
+### 8.2 注意事项
+
+1. **不使用单元测试**：本项目不编写单元测试，所有组件通过示例站点验证
+2. **类型定义**：cy组件的类型定义文件不带 `cy-` 前缀，使用连字符命名（如 `tree-select.d.ts`）
+3. **样式命名**：使用 BEM 命名规范，cy组件样式类名以 `cy-` 开头
+4. **文档语言**：仅提供中文文档，不提供其他语言版本
+
+---
+
+**版本**: v1.0
+**最后更新**: 2024年