Company CRUD Maker
基于标准骨架模板和原子化规则，生成 Vue 3 + Element Plus CRUD 模块代码。
核心原则
需要什么功能，就按对应骨架模板生成对应文件。不将多个功能合并到一个文件中。
- •每个文件严格按照对应骨架模板的结构、class、代码规范生成
- •使用模板定义的标准 class，不自创 class 名称
- •生成代码前阅读对应的规则文件
按需生成规则
重要：根据用户指定的页面和按钮智能推断需要生成的内容。
页面推断规则
- •显式指定优先：用户在
需要生成的页面中明确指定的页面必须生成 - •按钮自动推断：根据用户定义的按钮自动推断需要的页面
| 按钮类型 | 自动推断需要的页面 |
|---|---|
| 添加、新增 | DataUpdate |
| 编辑、修改 | DataUpdate |
| 详情、查看 | DataShow |
| 导入 | DataImport |
示例：
用户需求：
code
需要生成的页面: 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/ 获取基础框架
- •阅读规范清单 → 确认代码符合所有规范
- •生成代码 → 确保代码符合所有规则
骨架模板
| 页面类型 | 模板文件 | 输出文件 |
|---|---|---|
| 模块入口 | skeleton-index | index.vue |
| 列表页 | skeleton-data-table | DataTable.vue |
| 表单页 | skeleton-data-update | DataUpdate.vue |
| 详情页 | skeleton-data-show | DataShow.vue |
| 导入页 | skeleton-data-import | DataImport.vue |
| 日志表格 | skeleton-data-log-table | DataLogTable.vue |
规范清单
生成代码前阅读相关规范。
必须遵守
| 规范 | Impact | 位置 |
|---|---|---|
| 不使用 .then() 链式调用 | HIGH | api-request-pattern |
| ElMessageBox 使用 async/await | HIGH | dialog-message-box |
| 不使用 style 属性 | HIGH | css-class-standard |
| 列宽使用 $tableItemWidthCalculation(n) | HIGH | table-column-width |
| 不手动调用 ElMessage | HIGH | action-success-no-message |
| Vue 组件代码组织顺序 | HIGH | code-organization-order |
代码规范
| 规范 | Impact | 位置 |
|---|---|---|
| 父子组件通信命名规范 | HIGH | code-naming-convention |
| 函数注释规范 | MEDIUM | code-function-comment |
布局规范
| 规范 | Impact | 位置 |
|---|---|---|
| 详情页/编辑页小标题 | HIGH | page-subfield-title |
API 相关
| 规范 | Impact | 位置 |
|---|---|---|
| 分页参数规范 (offset/rows) | HIGH | api-pagination-params |
表格相关
| 规范 | Impact | 位置 |
|---|---|---|
| 操作列按钮规范 (>3个用dropdown) | HIGH | table-operation-column |
| 筛选区标准样式 | LOW | table-filter-area |
表单相关
| 规范 | Impact | 位置 |
|---|---|---|
| el-select/el-date-picker 空值处理 | HIGH | form-reset-null-prevention |
| 输入框属性规范 | MEDIUM | form-input-text |
| 选择器属性规范 | MEDIUM | form-select |
权限控制
| 规范 | Impact | 位置 |
|---|---|---|
| 表头按钮权限控制 | HIGH | permission-table-header-button |
| 行内按钮权限控制 | HIGH | permission-table-row-button |
| v-if 与 v-show 使用规范 | MEDIUM | permission-v-if-not-v-show |
工具函数
| 规范 | Impact | 位置 |
|---|---|---|
| 日期格式化 (formatDateString) | HIGH | util-format-date |
| 敏感信息脱敏 | HIGH | util-format-sensitive |
| 金额格式化 | LOW | util-format-amount |
交互规范
| 规范 | Impact | 位置 |
|---|---|---|
| 删除操作确认弹窗 | HIGH | action-delete-confirm |
组件规范
| 规范 | Impact | 位置 |
|---|---|---|
| BaseShowFileList 附件列表展示 | HIGH | component-base-show-file-list |
| BaseNoData 空状态占位 | HIGH | component-base-no-data |
| BaseUploadAttachment 附件上传 | HIGH | component-base-upload-attachment |
| BaseShowImageList 图片列表展示 | HIGH | component-base-show-image-list |
| BaseUploadCropImage 图片裁剪上传 | HIGH | component-base-upload-crop-image |
| BaseTagSelect 标签选择器 | LOW | component-base-tag-select |
| BaseLocationShow 位置信息展示 | LOW | component-base-location-show |