Menu
生成 Vue3 + Element Plus 标准 CRUD 模块代码。此技能应在用户主动要求使用 company-crud-maker，或需要规范化/重构现有 Vue 代码时触发。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Complete PRD template with AI-friendly markers. Use for product requirement docs: includes overview, requirements, processes, data, interfaces, acceptance. AI can quickly identify [AI] marked sections for implementation.
Provides API documentation template and standards for RESTful API, gRPC, and other interfaces. Includes request/response format, parameter definitions, error codes, and Markdown documentation structure. Invoke when generating API documentation or interface specifications.
Provides database design templates and documentation structure. Invoke when designing database schemas, creating database design documents, or generating SQL scripts.
Provides common Java coding standards including hutool tool usage and Lombok annotations. Invoke when generating Java code (DO, VO, Service, Controller) or applying coding standards.
Provides Java Controller layer standards including RESTful API design, request mapping, parameter validation, and response handling. Invoke when generating Controller files or RESTful API endpoints.
Provides Java DAO layer standards including interface specifications, MyBatis XML templates, method naming, parameter annotations, and CRUD operation patterns. Invoke when generating DAO files or MyBatis mappers.
| name | vue-crud |
| description | 生成 Vue3 + Element Plus 标准 CRUD 模块代码。此技能应在用户主动要求使用 company-crud-maker，或需要规范化/重构现有 Vue 代码时触发。 |
基于标准骨架模板和原子化规则，生成 Vue 3 + Element Plus CRUD 模块代码。
需要什么功能，就按对应骨架模板生成对应文件。不将多个功能合并到一个文件中。
重要：根据用户指定的页面和按钮智能推断需要生成的内容。
需要生成的页面 中明确指定的页面必须生成| 按钮类型 | 自动推断需要的页面 |
|---|---|
| 添加、新增 | DataUpdate |
| 编辑、修改 | DataUpdate |
| 详情、查看 | DataShow |
| 导入 | DataImport |
示例：
用户需求：
需要生成的页面: index, DataTable
顶部按钮: 添加（50%抽屉）
推断结果：
根据推断结果，index.vue 只包含需要的代码：
| 推断需要的页面 | index.vue 包含的代码 |
|---|---|
| DataTable | 组件导入、ref、基本事件 |
| DataUpdate | 编辑抽屉、handleAdd、handleUpdate、updateVisible |
| DataShow | 详情抽屉、handleShow、showVisible |
| DataImport | 导入抽屉、handleImport、importVisible |
| 页面类型 | 模板文件 | 输出文件 |
|---|---|---|
| 模块入口 | 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 |
| 规范 | 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 |