Skills

Fa Crud Page Generator

为 Fantastic-admin 框架生成完整的 CRUD 业务模块,遵循框架标准模块结构和内建 Fa* 组件体系,使用 FaForm/FaFormItem...

Install

npx skills add fantastic-admin/basic --skill fa-crud-page-generator -g -a claude-code -y
Repository
fantastic-admin/basic3.4k
Category
Engineering
Updated
13d ago
License
MIT
Context cost
Lightabout 1,062 tokens
Runs scripts
No, instructions only

What it does

为 Fantastic-admin 框架生成完整的 CRUD 业务模块,遵循框架标准模块结构和内建 Fa* 组件体系,使用 FaForm/FaFormItem 生成新增/编辑表单,产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说:'帮我做一个商品管理页面'、'搭一个用户列表,能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/CRUD 页面' 时,即使没有明确说 CRUD,也应触发此技能。

CRUD 页面生成器

在 Fantastic-admin 框架中生成标准 CRUD 业务模块。生成时遵循框架当前标准模块结构: 列表页、独立详情页、DetailForm 表单组件、API 模块、fake mock、可选路由和 route i18n 要一次性配套生成。

优先复刻框架现有写法,而不是重新发明页面结构:列表页用 FaSearchBar + FaTable + FaPagination,详情表单抽成 components/DetailForm/index.vue,独立详情页用 FaFixedBar 固定顶部标题和底部提交区。

生成文件清单:

  • apps/<app>/src/views/{path}/{module}/list.vue, 列表页
  • apps/<app>/src/views/{path}/{module}/detail.vue, 独立详情页,仅 router 模式需要
  • apps/<app>/src/views/{path}/{module}/components/DetailForm/index.vue, 新增/编辑表单
  • apps/<app>/src/api/modules/{fileName}.ts, API 模块
  • apps/<app>/src/api/fake_modules/{fileName}.fake.ts, fake mock 数据,可选
  • apps/<app>/src/router/modules/{routeFileName}.ts, 前端路由,可选
  • apps/<app>/src/locales/lang/route/{locale}.json, 路由标题 i18n,可选

先确认应用

本项目是 pnpm monorepo。开始写文件前先确认目标应用:

  1. 如果用户已经明确写了 apps/<app>、admin 应用、pro 应用 等目标应用,直接使用该应用。
  2. 如果没有明确目标应用,先执行 ls apps/ 查看可用应用,然后询问用户要生成到哪个应用,并等待回复。
  3. 后续所有路径都以 apps/<app>/src/ 为根。

不要默认猜测应用;生成到错误应用的返工成本很高。


信息收集

尽量一次性收集会影响文件结构的信息:

  • 模块名:英文,用于目录、API 文件和路由,如 product、order、systemUser
  • 模块中文名:用于标题和提示,如 商品、订单、用户
  • 存放路径:位于 src/views/ 下的子路径,如 mall、system/user,可为空
  • 字段清单:字段名、中文标签、类型、是否列表显示、是否搜索、是否表单显示、是否必填
  • 详情展示模式:router、modal、drawer,默认 router
  • 是否启用批量删除:默认启用
  • 是否支持列表高度自适应:默认生成 tableAutoHeight 代码
  • 是否生成 fake mock:开发阶段默认推荐生成
  • 是否生成路由和 route i18n:仅当前端路由由本地配置维护时生成

如果用户只给出模块名和很少字段,使用一个最小可运行字段: title(标题,string,列表/搜索/表单显示,必填),并在完成后提醒用户继续替换业务字段。


命名规范

给定模块名 name 和路径 path(相对于 apps/<app>/src/views/):

Read the whole SKILL.md on GitHub

More in Engineering