vue-vben-crud

Vue Vben CRUD 生成器

强制执行流程（不可跳过任何步骤）

1. 收集需求（必须先询问，不可跳过）

在生成任何代码之前，如果用户未提供以下信息，请逐项询问，并等待确认后再继续第 2 步。 不要根据上下文猜测并直接生成：

• 模块名称（英文，例如 user、product）
• 字段列表和类型（名称、类型、是否必填、校验规则）
• 是否需要多标签页
• 特殊功能需求（导入/导出、批量操作等）
• 默认不启用 i18n，除非用户明确提出需要多语言支持

2. 阅读参考文档（生成前必须阅读）

优先阅读默认 CRUD 模板：assets/crud-template.md

生成任何组件之前，必须先阅读相应文档。切勿凭记忆生成。

使用 useVbenModal、useVbenDrawer、useVbenVxeGrid 之前，先在项目中搜索并找到实际的导入路径。切勿猜测。

组件类型	先阅读此文档	然后参考此模板
表单	references/vben-form.md	assets/form-template.md
表格	references/vben-table.md	assets/table-usage-template.md
模态框	references/vben-modal.md	assets/modal-template.md
抽屉	references/vben-drawer.md	assets/drawer-template.md
页面	无	assets/page-template.md
数字动画	references/vben-count-animator.md	assets/count-to-template.md
省略文本	references/vben-ellipsis-text.md	assets/ellipsis-text-template.md
警告	references/vben-alert.md	assets/alert-template.md

3. 生成文件结构

必须生成以下所有文件。即使用户已提供相关信息，也不能跳过任何一个文件：

src/
├── api/
│   └── [module]/
│       ├── types.ts              # Type definitions, must generate
│       └── index.ts              # API interfaces, must generate
├── router/
│   └── routes/
│       └── modules/
│           └── [module].ts       # Route config, must generate
└── views/
    └── [module]/                 # e.g. push/
        ├── index.vue             # Main page, must generate
        └── modules/              # Sub-component directory
            ├── form.vue          # Form component, must generate
            └── data.ts           # Data config, must generate

重要：index.vue 和 data.ts 位于 [module]/ 根目录。form.vue、drawer.vue 和其他组件位于 [module]/modules/。不要再嵌套一层 [module] 子目录。

文件职责：

• types.ts：定义请求/响应类型和实体类型
• index.ts：封装 CRUD API 方法（创建、读取、更新、删除）
• [module].ts：路由配置，定义菜单和页面路由
• form.vue：使用 useVbenModal 或 useVbenDrawer 的表单组件
• data.ts：表格列配置和搜索表单架构
• index.vue：使用 useVbenVxeGrid 集成表格的主页面

4. 代码质量检查（输出总结前必须完成，不可跳过）

4.1 自动化脚本检查（先运行）

bash .claude/skills/vue-vben-crud/scripts/check.sh <api-path> <views-path>
# Example: bash .claude/skills/vue-vben-crud/scripts/check.sh src/api/system/push src/views/system/push

如果脚本输出 exit 1，请修复错误并重新运行。 仅当脚本输出“🎉 All checks passed”后，才可继续进行 4.2。

4.2 手动文档检查（脚本通过后运行）

脚本无法验证组件 API 的用法。你必须根据文档手动检查：

• 阅读 references/vben-form.md，验证 form.vue 中的表单 API 用法
• 阅读 references/vben-table.md，验证 data.ts 中的表格列配置
• 阅读 references/vben-modal.md 或 vben-drawer.md，验证模态框/抽屉的用法
• 验证 types.ts 中的类型定义与 form.vue、data.ts 和 index.ts 中的用法一致
• 验证 API 方法参数与 types.ts 中定义的请求类型一致

修复发现的任何不一致。只有通过所有检查后，才能输出最终总结。

---

输出格式

生成完成后，按以下确切格式输出总结：

✅ [Module Name] CRUD Module Generation Complete

📁 Generated Files:
- src/api/[module]/types.ts
- src/api/[module]/index.ts
- src/router/routes/modules/[module].ts
- src/views/[module]/index.vue
- src/views/[module]/modules/form.vue
- src/views/[module]/data.ts

🎯 Next Steps:
1. Adjust API endpoint URLs to match actual backend paths
2. Add route configuration
3. Adjust field validation and display logic based on business requirements

---

核心原则

• 所有代码必须符合 TypeScript 严格模式
• 遵循 Vben Admin 最佳实践和代码风格
• 仅使用框架提供的组件和工具，不要创建自定义实现
• 保持代码简洁，避免过度设计
• 确保类型安全，以减少运行时错误