메뉴
为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵循框架标准模块结构和内建 Fa* 组件体系，使用 FaForm/FaFormItem 生成新增/编辑表单，产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/CRUD 页面' 时，即使没有明确说 CRUD，也应触发此技能。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | fa-crud-page-generator |
| description | 为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵循框架标准模块结构和内建 Fa* 组件体系，使用 FaForm/FaFormItem 生成新增/编辑表单，产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/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。开始写文件前先确认目标应用：
apps/<app>、admin 应用、pro 应用 等目标应用，直接使用该应用。ls apps/ 查看可用应用，然后询问用户要生成到哪个应用，并等待回复。apps/<app>/src/ 为根。不要默认猜测应用；生成到错误应用的返工成本很高。
尽量一次性收集会影响文件结构的信息：
product、order、systemUser商品、订单、用户src/views/ 下的子路径，如 mall、system/user，可为空router、modal、drawer，默认 routertableAutoHeight 代码如果用户只给出模块名和很少字段，使用一个最小可运行字段：
title（标题，string，列表/搜索/表单显示，必填），并在完成后提醒用户继续替换业务字段。
给定模块名 name 和路径 path（相对于 apps/<app>/src/views/）：
| 用途 | 规则 | 示例（path 为空，name=product） |
|---|---|---|
| 视图目录 | src/views/{path}/{snake_case(name)}/ | src/views/product/ |
| API 文件名 | path 参与业务命名时使用 camelCase；普通模块用 camelCase(name) | product |
| fake 文件名 | 与 API 文件名一致，放到 src/api/fake_modules/ | product.fake.ts |
| 列表组件名 | PascalCase({path}-{name}-list) | ProductList |
| 详情组件名 | PascalCase({path}-{name}-detail) | ProductDetail |
| 路由 name | camelCase(name)List / camelCase(name)Detail | productList |
| API URL 前缀 | snake_case(path/name)，无前导斜杠 | product |
snake_case 用下划线连接多个单词，如 productCategory -> product_category。
详细模板见 references/templates.md。生成时按这些规则填充模板：
list.vue 使用 <script setup lang="ts">，导入 type { TableColumn } from '@fantastic-admin/components'。computed<TableColumn<Item>[]>(...) 定义，页面模板使用 FaTable 的 :columns 与 #cell-xxx 插槽。FaSearchBar + FaLabel，按钮保持“重置 / 筛选 / 展开收起”的顺序。FaTable 的 #toolbar 插槽放“新增”和批量操作。FaButton size="icon-sm" 编辑按钮和 FaDropdown 删除菜单。useFaModal().confirm，提示成功统一使用 useFaToast().success。router 模式在列表页通过 eventBus.on('get-data-list') 接收详情页提交后的刷新事件；卸载时 eventBus.off('get-data-list')。modal / drawer 模式通过 useFaModal().create 或 useFaDrawer().create 渲染 DetailForm，confirm 时调用表单暴露的 submit()；仅当返回 true 时刷新列表并关闭。DetailForm 使用 FaForm/FaFormItem，表单对象使用 const model = ref<...>({...})，通过 useTemplateRef<FormExpose>('formRef') 获取表单引用，并只 defineExpose({ submit }) 给外部调用。submit() 必须返回 Promise<boolean>：校验失败返回 false，新增/编辑成功后提示并返回 true。父级页面、modal、drawer 都必须检查返回值，避免校验失败时关闭页面或弹窗。apps/<app>/src/api/fake_modules/，不是 api/modules/。fake: true；不生成 fake 时去掉 fake: true。如果用户选择生成路由，优先调用或参考 fa-route-generator，并遵循最新标准模块路由模式：
Layout，meta.title 使用 $t('route.<module>.root')，设置合适图标。path: ''，name: '<module>List'，组件指向 list.vue。meta.menu: false 和 breadcrumb: false；业务模块如需列表作为独立菜单项，可按用户需求保留菜单。router 模式详情路由为 detail/:id?，meta.menu: false，activeMenu 指向列表/父菜单路径。keepAlive: '<module>Detail'，详情路由设置 keepAlive: true 与 noKeepAlive: '<module>List'。zh-cn、zh-tw、en 三份 src/locales/lang/route/*.json。写文件前展示将生成/修改的文件列表，确认不会覆盖用户已有业务文件。若目标文件已存在，先读取并说明将如何合并。
完成后简要说明：
fa-route-generator 添加；fake: true；不要修改 packages/components/ 内建组件；确实需要改内建组件时先征得用户确认。
为 Fantastic-admin 框架生成独立的表单页面，使用 FaForm/FaFormItem + vee-validate + zod 验证，表单 model 使用 ref，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。
管理和配置 Fantastic-admin 框架设置。当用户提到以下任何需求时必须使用此技能：开启/关闭水印、锁屏、错误日志、更新检查、哀悼模式、移动端访问；切换暗色/亮色/跟随系统主题；修改菜单模式（侧边栏/顶部/精简/面板）；配置标签栏风格（fashion/card/square）；启用/禁用工具栏功能（收藏夹、面包屑、搜索、通知、国际化、全屏、刷新）；设置版权信息；配置认证/权限/登录过期；调整页面切换动画；配置居中布局；修改路由模式；以及任何涉及 src/settings/index.ts 的修改。
优化 Vue 页面，用 Fantastic-admin 框架内建组件（packages/components/）替换自定义实现和原生 HTML。当用户说：'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用 FaCard/FaModal/FaButton 重构一下'、'这个页面太乱了'、'统一一下 UI 风格'、'用内建组件替换自定义弹窗/分页/加载'，即使用户只是说'看看这个页面能不能改进'也应触发此技能。
管理 Vue Router 路由配置，用于 Fantastic-admin 框架。当用户提到以下任何需求时必须使用此技能：新建页面需要加路由、详情页不想显示在菜单里、新增页和编辑页老是开两个标签、从列表跳详情返回后状态丢失、给菜单项加 NEW 标签或红点、路由需要权限控制、配置页面保活、修改路由 meta、添加面包屑配置。即使用户只是说"加个路由"或"新建了一个页面"，也应触发此技能。
为 Fantastic-admin 框架生成 Pinia Store 模块。当用户提到以下任何需求时必须使用此技能：多个页面需要共享数据、全局状态管理、数据需要持久化（刷新后还在）、登录状态/用户信息需要缓存、购物车/通知/权限等全局数据、需要在组件外访问状态。即使用户只是说"这个数据要全局共享"或"刷新后数据不能丢"，也应触发此技能。触发关键词：创建 store、全局状态、状态管理、pinia、持久化、共享数据。
为 Fantastic-admin 框架创建和定制主题配色方案，始终同时生成明色（light）和暗色（dark）两套主题。当用户提到以下任何需求时必须使用此技能：换主题颜色、换配色、做一个 XX 风格的主题、主题太单调了、品牌色是 XXX 帮我生成主题、把 tweakcn 配色转成框架主题、想要暗色/冷色/暖色调、根据设计稿颜色生成主题。即使用户只是描述一种感觉（"清新"、"沉稳"、"科技感"）或提供一个颜色值（"#2563EB"），也应触发此技能。支持"吉卜力"、"赛博朋克"、"莫兰迪"、"北欧极简"等专业设计风格关键词。