| name | vue-crud |
| description | 生成 Vue3 + Element Plus 标准 CRUD 模块代码。此技能应在用户主动要求使用 company-crud-maker，或需要规范化/重构现有 Vue 代码时触发。 |
Company CRUD Maker
基于标准骨架模板和原子化规则，生成 Vue 3 + Element Plus CRUD 模块代码。
核心原则
需要什么功能，就按对应骨架模板生成对应文件。不将多个功能合并到一个文件中。
- 每个文件严格按照对应骨架模板的结构、class、代码规范生成
- 使用模板定义的标准 class，不自创 class 名称
- 生成代码前阅读对应的规则文件
按需生成规则
重要：根据用户指定的页面和按钮智能推断需要生成的内容。
页面推断规则
- 显式指定优先：用户在
需要生成的页面 中明确指定的页面必须生成
- 按钮自动推断：根据用户定义的按钮自动推断需要的页面
| 按钮类型 | 自动推断需要的页面 |
|---|
| 添加、新增 | DataUpdate |
| 编辑、修改 | DataUpdate |
| 详情、查看 | DataShow |
| 导入 | DataImport |
示例：
用户需求：
需要生成的页面: index, DataTable
顶部按钮: 添加（50%抽屉）
推断结果：
- ✅ 生成 index.vue、DataTable.vue、DataUpdate.vue
- ✅ index.vue 包含编辑抽屉和 handleAdd 函数
- ❌ 不生成 DataShow.vue（用户未指定，也没有"详情/查看"按钮）
- ❌ index.vue 不包含详情抽屉
index.vue 动态裁剪规则
根据推断结果，index.vue 只包含需要的代码：
| 推断需要的页面 | index.vue 包含的代码 |
|---|
| DataTable | 组件导入、ref、基本事件 |
| DataUpdate | 编辑抽屉、handleAdd、handleUpdate、updateVisible |
| DataShow | 详情抽屉、handleShow、showVisible |
| DataImport | 导入抽屉、handleImport、importVisible |
触发场景
- "帮我生成一个用户管理的 CRUD 模块"
- "按照公司规范重构这个 Vue 页面"
- "使用 company-crud-maker 创建订单列表页"
使用流程
- 确定页面类型 → 选择对应的骨架模板
- 阅读骨架模板 → 从 assets/ 获取基础框架
- 阅读规范清单 → 确认代码符合所有规范
- 生成代码 → 确保代码符合所有规则
骨架模板
规范清单
生成代码前阅读相关规范。
必须遵守
代码规范
布局规范
API 相关
表格相关
表单相关
权限控制
工具函数
交互规范
组件规范
