生成代码
根据用户需求生成列表页或表单页代码。
何时使用
- •当用户需要生成页面代码时
- •当用户输入 "生成页面"、"生成列表"、"生成表单" 等意图时
- •当需要快速创建 CRUD 页面时
能力
此 Skill 可以：
- •分析需求，判断生成列表页还是表单页
- •读取模板文件
- •替换占位符，配置字段和 API
- •创建文件到目标位置
页面类型
列表页 (list)
文件位置: apps/naive-admin/src/views/{module}/{page}/index.vue
核心结构:
- •SearchPanel 搜索面板
- •useTablePage 分页管理
- •NDataTable 数据表格
- •操作按钮（新增、编辑、删除）
关键 Hooks:
- •
useTablePage- 表格分页管理 - •
useEnums- 枚举数据缓存 - •
usePageLoading- 页面加载状态
表单页 (form)
文件位置: apps/naive-admin/src/views/{module}/{page}/index.vue
核心结构:
- •NCard 卡片容器
- •FormRoot 表单组件
- •提交和取消操作
FormConfig 配置:
- •
comp- 组件类型 (n-input, n-select, n-switch 等) - •
valueKey- 数据字段名 - •
label- 标签文本 - •
required- 是否必填 - •
props- 组件属性
实现步骤
- •需求分析 - 判断生成列表页(list)还是表单页(form)
- •读取模板 - 根据类型读取对应模板文件
- •生成代码 - 替换占位符，配置字段和 API
- •创建文件 - 写入目标位置
- •后续提示 - 提示路由配置或组件引入
规范要点
- •命名: kebab-case 文件名，camelCase 变量
- •类型: 从
@/shared/*导入 - •样式: 使用 Tailwind CSS 类
- •列表:
useTablePage+ 自定义表格列 - •表单:
FormRoot+formConfigs配置