south-admin-react: Skill for Claude Code

demo-create

Description

基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板，快速生成后台管理系统的标准 CRUD 页面代码。根据用户提供的业务模块信息（模块名称、API路径、字段配置等），自动生成完整的页面文件（Page）、数据模型文件（Model）和 API 接口文件（Api），支持弹窗模式（demoPage）和独立页面模式（demoOptionPage）两种。

Instructions

1. 收集必要信息

在生成代码前，向用户确认以下信息（未提供则主动询问，一个一个询问）：

• moduleName：模块名称（英文 PascalCase），如 User、Article
• apiPath：API 路径前缀，如 /system/user
• permissionPrefix：权限前缀路径，如 /system/user
• pageMode：modal（弹窗模式）或 page（独立页面模式）
• enableI18n：是否开启国际化（true/false），开启时使用 t() 函数包裹标签文本
• fatherPath：父路径（仅 page 模式），如 /system/user
• zhTitle / enTitle：中英文标题（仅 page 模式），如 用户 / User
• fields：业务字段列表，每个字段包含：
  • dataIndex（字段名）
  • label（标签）
  • component（组件类型：Input/InputNumber/Select/DatePicker/RangePicker/TextArea/Switch/Upload）
  • search（是否搜索项）
  • table（是否表格列）
  • form（是否表单字段）
  • required（是否必填）
  • width（表格列宽度，默认200）

2. 生成文件结构

Modal 模式

src/pages/{modulePath}/
├── index.tsx # 主页面（demoPage 模板）
└── model.ts # 数据模型（demoModel 模板）
src/servers/{modulePath}.ts # API 接口（demoApi 模板）

Page 模式

src/pages/{modulePath}/
├── index.tsx # 列表页（demoPage 模板，新增/编辑改为路由跳转）
├── model.ts # 数据模型（demoModel 模板）
└── option.tsx # 操作页（demoOptionPage 模板）
src/servers/{modulePath}.ts # API 接口（demoApi 模板）

3. 代码生成规则

3.1 通用替换规则

所有模板中进行以下替换：

• getXXXPage → get{ModuleName}Page
• getXXXById → get{ModuleName}ById
• createXXX → create{ModuleName}
• updateXXX → update{ModuleName}
• deleteXXX → delete{ModuleName}
• batchDeleteXXX → batchDelete{ModuleName}
• API.URL = '/xxx' → 实际 apiPath
• @/servers/xxx → @/servers/{实际模块路径}
• permissionPrefix = '/xxx' → 实际权限前缀
• fatherPath = '/xxx' → 实际父路径（page 模式）

3.2 API 文件（基于 south.code-snippets 中 demoApi 模板）

参照 .vscode/south.code-snippets 中 demoApi 的 body 内容生成，替换所有 XXX/xxx 为对应模块名称和路径。保持所有函数签名、类型定义和注释不变。

3.3 Model 文件（基于 south.code-snippets 中 demoModel 模板）

参照 .vscode/south.code-snippets 中 demoModel 的 body 内容生成：

• searchList：仅包含 search: true 的字段，wrapperWidth 默认 200
  • enableI18n = true：label 使用 t('moduleName.fieldName') 格式
  • enableI18n = false：label 使用中文字符串
• tableColumns：仅包含 table: true 的字段，始终保留 operate 操作列，width 默认 200
  • enableI18n = true：title 使用 t('moduleName.fieldName') 格式，保留 createdAt/updatedAt 使用 t('public.creationTime')/t('public.updateTime')
  • enableI18n = false：title 使用中文字符串
• createList：仅包含 form: true 的字段，必填字段添加 rules: FORM_REQUIRED
  • enableI18n = true：label 使用 t('moduleName.fieldName') 格式
  • enableI18n = false：label 使用中文字符串