From bbf508e12305fa67ed65a4c54f98efbd727f5b22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=96=AF=E7=8B=82=E7=9A=84=E7=8B=AE=E5=AD=90Li?= <15040126243@163.com> Date: Wed, 3 Jun 2026 15:20:07 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=86=85=E7=BD=AE=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=94=9F=E6=88=90=E6=A8=A1=E6=9D=BF=20=E4=BC=98=E5=8C=96skill?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/agents/frontend-api-types.md | 9 + .claude/agents/frontend-crud-coding.md | 7 +- .claude/agents/frontend-crud-page.md | 21 +- .claude/agents/frontend-page-enhancement.md | 9 +- .codex/skills/frontend-crud-coding/SKILL.md | 45 +- .../frontend-crud-coding/agents/openai.yaml | 4 +- .../references/examples.md | 25 +- .../references/frontend.md | 26 +- gen/api.ts.vm | 94 ++++ gen/index-tree.vue.vm | 472 ++++++++++++++++++ gen/index.vue.vm | 460 +++++++++++++++++ gen/types.ts.vm | 56 +++ 12 files changed, 1194 insertions(+), 34 deletions(-) create mode 100644 gen/api.ts.vm create mode 100644 gen/index-tree.vue.vm create mode 100644 gen/index.vue.vm create mode 100644 gen/types.ts.vm diff --git a/.claude/agents/frontend-api-types.md b/.claude/agents/frontend-api-types.md index ed7b5eb8..21662e65 100644 --- a/.claude/agents/frontend-api-types.md +++ b/.claude/agents/frontend-api-types.md @@ -12,6 +12,7 @@ description: 前端 API 与类型定义专家。用于当前 plus-ui-react 项 3. 能明确写出类型时，不要偷懒用 `any`。 4. 如果当前模块已有特殊返回结构或聚合导出，继续保持一致。 5. 不创建页面，不改路由，除非用户明确要求。 +6. 如果用户要求维护代码生成模板，优先同步当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`，必要时再看 boot4 后端 generator 字段定义。 ## API 规则 @@ -42,10 +43,18 @@ description: 前端 API 与类型定义专家。用于当前 plus-ui-react 项 - 日期范围查询保留 `params?: Record` 或跟随相邻模块，不要无故删除。 - 列表对象、表单对象、查询对象职责分开；字段不一致时不要强行复用一个接口。 +## gen 模板规则 + +- `gen/api.ts.vm` 和 `gen/types.ts.vm` 是当前 React 项目内置模板，优先于外部后端模板。 +- 保持 Velocity 变量、宏和输出路径约定，不要破坏后端 generator 可替换变量。 +- 输出类型应继续使用 `R`、`PageResult`、`PageQuery`、`BaseEntity` from `@/api/types` 和 `request` from `@/api/request`。 +- 不输出 Vue 版 `AxiosPromise`、`@/utils/request` 或 `src/views` 约定。 + ## 自检 - API 路径是否与后端一致。 - 类型是否覆盖接口真实结构。 - 是否不必要地把类型写宽了。 - 是否保留了当前模块的命名和导出风格。 +- 是否同步维护了当前项目内置 `gen/*.vm` 模板中对应 API/types 输出。 - 是否误用了 Vue 版 `AxiosPromise`、`@/utils/request` 或 `src/views` 约定。 diff --git a/.claude/agents/frontend-crud-coding.md b/.claude/agents/frontend-crud-coding.md index 58197900..bf836627 100644 --- a/.claude/agents/frontend-crud-coding.md +++ b/.claude/agents/frontend-crud-coding.md @@ -1,6 +1,6 @@ --- name: frontend-crud-coding -description: 前端总入口。用于当前 plus-ui-react 项目中的标准 React CRUD 页面、新增 API/types、复杂列表页增强、树筛选、导入导出、权限按钮、状态切换与弹窗表单等任务，并根据任务类型选择合适的前端子 agent。 +description: 前端总入口。用于当前 plus-ui-react 项目中的标准 React CRUD 页面、新增 API/types、复杂列表页增强、树筛选、导入导出、权限按钮、状态切换、弹窗表单和项目内置 gen/*.vm React 代码生成模板维护任务，并根据任务类型选择合适的前端子 agent。 --- 你是当前 plus-ui-react 前端项目的总入口 agent。 @@ -10,12 +10,13 @@ description: 前端总入口。用于当前 plus-ui-react 项目中的标准 Rea 1. 如果是新增标准 CRUD 页面、补 `src/api`、`types.ts`、`index.tsx`，优先使用 `frontend-crud-page.md`。 2. 如果是修改已有列表页、增强导入导出、树筛选、详情抽屉、更多操作、状态切换，优先使用 `frontend-page-enhancement.md`。 3. 如果只改接口层和类型定义，优先使用 `frontend-api-types.md`。 +4. 如果是维护代码生成模板，优先读取当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`，再按 React 项目真实工具和页面规则修改模板。 通用要求： - 先读当前目录下最近似页面和 API，再动代码。 - 优先参考 `.codex/skills/frontend-crud-coding/SKILL.md` 和 `references/frontend.md`，保持 Claude agent 与 Codex skill 规则一致。 -- 冲突时优先相信当前项目真实页面，其次是公共组件、hooks、工具和请求封装，再其次才是 Vue 参考项目和关联后端工程 generator 模板。 +- 冲突时优先相信当前项目真实页面，其次是公共组件、hooks、工具和请求封装，再其次是当前仓库 `gen/*.vm` React 模板，最后才是 Vue 参考项目和关联后端工程 generator 模板。 - 默认直接产出可落地代码，而不是只给抽象建议。 - 不要照搬 Vue 项目的 `src/views`、Element Plus、`AxiosPromise`、`v-hasPermi`、`ref/reactive` 写法。 @@ -28,6 +29,8 @@ description: 前端总入口。用于当前 plus-ui-react 项目中的标准 Rea - 权限通过 `useUserStore` 和 `hasPermi` 计算布尔值。 - 多选通过 `useTableSelection`，导出通过 `useTableExport`。 - 行操作优先使用 `RowActions` 和 `@ant-design/icons`。 +- 日期范围、字典 options、树表展开、loading、搜索重置和确认弹窗优先使用 `useDateRangeQuery`、`dictOptions`、`useTreeTableExpand`、`useLoading`、`useSearchReset`、`confirmAction`/`confirmTitleSafe`。 +- `gen/index.vue.vm`、`gen/index-tree.vue.vm` 文件名保持不变，但内容必须生成 React TSX 页面。 验证要求： diff --git a/.claude/agents/frontend-crud-page.md b/.claude/agents/frontend-crud-page.md index 82a40492..8c2aae06 100644 --- a/.claude/agents/frontend-crud-page.md +++ b/.claude/agents/frontend-crud-page.md @@ -1,6 +1,6 @@ --- name: frontend-crud-page -description: 前端标准 React CRUD 页面专家。用于当前 plus-ui-react 项目中的新建列表页、弹窗表单页、标准 API/types/index.tsx 骨架，以及后端 generator 字段到 React + ProTable 项目风格的落地任务。 +description: 前端标准 React CRUD 页面专家。用于当前 plus-ui-react 项目中的新建列表页、弹窗表单页、标准 API/types/index.tsx 骨架、项目内置 gen/*.vm React 模板维护，以及后端 generator 字段到 React + ProTable 项目风格的落地任务。 --- 你负责当前 plus-ui-react 项目中的标准 CRUD 页面实现。 @@ -9,8 +9,9 @@ description: 前端标准 React CRUD 页面专家。用于当前 plus-ui-react 1. 先看当前模块最近似页面。 2. 再参考 `.codex/skills/frontend-crud-coding/references/frontend.md`。 -3. 必要时参考关联后端工程 generator 模板确认接口、字段、权限和导出能力。 -4. 默认同时维护： +3. 维护或新增生成能力时，优先参考当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。 +4. 必要时参考关联后端工程 generator 模板确认接口、字段、权限和导出能力。 +5. 默认同时维护： `src/api///index.ts` `src/api///types.ts` `src/pages///index.tsx` @@ -34,6 +35,9 @@ description: 前端标准 React CRUD 页面专家。用于当前 plus-ui-react - 导出使用 `useTableExport()` 和 `exportFile('/module/business/export', () => 'business_timestamp.xlsx')`。 - 行操作使用 `RowActions`，行内删除确认放在 `confirm`。 - 新增/编辑弹窗使用 `ModalForm`，字段优先使用 ProForm 组件。 +- 日期范围使用 `useDateRangeQuery`，字典 options 使用 `dictOptions`。 +- 状态切换等 Promise 式确认使用 `confirmAction` 或 `confirmTitleSafe`。 +- 异步 loading 优先使用 `useLoading`，带额外筛选状态的重置优先使用 `useSearchReset`。 ## API / types 规则 @@ -48,13 +52,22 @@ description: 前端标准 React CRUD 页面专家。用于当前 plus-ui-react - 判断树表后不要生成分页 `PageResult` 页面。 - `Query` 通常不继承 `PageQuery`。 -- 使用 `handleTree`、`pagination={false}`、`expandedRowKeys`、`ProFormTreeSelect`。 +- 使用 `handleTree`、`pagination={false}`、`useTreeTableExpand`、`ProFormTreeSelect`。 +- 树表展开/折叠优先使用 `useTreeTableExpand`，不要在页面或模板里重复手写收集 key 的状态逻辑。 - 新增子节点时从当前行带入 `parentId`。 +## gen 模板规则 + +- `gen/index.vue.vm`、`gen/index-tree.vue.vm` 文件名保持不变，但内容生成 React TSX。 +- 保持 Velocity 变量、宏和后端 generator 可识别结构，不为了格式美化破坏模板语法。 +- 模板应输出当前项目公共工具写法：`useTableSelection`、`useTableExport`、`useDateRangeQuery`、`dictOptions`、`useTreeTableExpand`、`confirmAction`、`toPageQuery`、`toTableData`、`handleTree`。 +- 不把 Vue `src/views`、Element Plus、`AxiosPromise`、`v-hasPermi` 写入模板。 + ## 自检 - API 路径是否与后端一致。 - `index.ts` 与 `types.ts` 是否同步补齐。 - 页面是否使用 React 项目的 ProTable/ModalForm 骨架。 - 权限标识是否与后端和相邻页面一致。 +- 是否同步使用当前项目公共 hooks/工具，避免生成重复代码。 - 是否误用了 Vue/Element Plus/`src/views` 规则。 diff --git a/.claude/agents/frontend-page-enhancement.md b/.claude/agents/frontend-page-enhancement.md index 45519ae3..64901ac0 100644 --- a/.claude/agents/frontend-page-enhancement.md +++ b/.claude/agents/frontend-page-enhancement.md @@ -29,9 +29,14 @@ description: 复杂前端页面增强专家。用于修改当前 plus-ui-react - 复杂系统页可包含 `TreePanel`、子组件弹窗、抽屉、授权路由跳转。 - 权限通过 `useUserStore` + `hasPermi` 计算，不使用 Vue 指令。 - 字典通过 `useDict` 加载，按现有页面映射为 Ant Design options。 +- 字典 options 优先使用 `dictOptions` from `@/utils/dict`。 - 导出通过 `useTableExport`，不要另写下载封装。 - 多选通过 `useTableSelection`，不要手写一套重复状态。 -- 日期范围参考 `system/user`，使用 `formatDateTimeRange` + `addDateRange`。 +- 日期范围优先使用 `useDateRangeQuery`，底层保持 `addDateRange` 参数格式。 +- 树表展开优先使用 `useTreeTableExpand`。 +- 异步 loading 优先使用 `useLoading`。 +- 额外筛选状态的重置优先使用 `useSearchReset`。 +- Promise 式确认框优先使用 `confirmAction` 或 `confirmTitleSafe`。 - 状态切换失败时回滚或刷新，参考 `system/user`。 ## 增量修改规则 @@ -41,6 +46,7 @@ description: 复杂前端页面增强专家。用于修改当前 plus-ui-react - 如果页面已有导出参数缓存，继续通过 `updateExportParams` 更新。 - 如果页面已有树筛选状态，查询参数要合并该状态，不要覆盖掉。 - 如果页面已有特殊禁用规则、超级管理员保护或业务状态判断，必须保留。 +- 如果增强的是标准 CRUD 能力或公共工具约定，要评估当前仓库 `gen/*.vm` 是否也应同步更新。 ## 自检 @@ -48,4 +54,5 @@ description: 复杂前端页面增强专家。用于修改当前 plus-ui-react - 是否误删了已有权限控制或交互能力。 - 是否保留了树筛选、导入导出、抽屉、路由跳转等复杂能力。 - 是否应该拆成子组件而不是继续堆主页面。 +- 是否使用了当前项目已有工具，避免重复手写日期范围、字典 options、树展开、loading、确认框。 - 是否误用了 Vue/Element Plus/generator 的简化逻辑。 diff --git a/.codex/skills/frontend-crud-coding/SKILL.md b/.codex/skills/frontend-crud-coding/SKILL.md index 5bef94b7..7751e836 100644 --- a/.codex/skills/frontend-crud-coding/SKILL.md +++ b/.codex/skills/frontend-crud-coding/SKILL.md @@ -1,11 +1,11 @@ --- name: frontend-crud-coding -description: 在当前 plus-ui-react 前端项目中按真实 React + TypeScript + Umi Max + Ant Design ProComponents + oxlint/oxfmt 代码风格生成或修改页面、API、types、hooks 接入和样式。用于新增或修改标准 CRUD 列表页、树表页、系统管理页、监控页、workflow 页面、demo 页面，补齐与 RuoYi-Vue-Plus boot4 后端接口对应的 src/api、types 和 src/pages 代码；触发后应先读取适用 references，再阅读目标模块真实代码和必要的 Vue 参考 skill/后端 generator 模板。 +description: 在当前 plus-ui-react 前端项目中按真实 React + TypeScript + Umi Max + Ant Design ProComponents + oxlint/oxfmt 代码风格生成或修改页面、API、types、hooks 接入、样式和项目内置 gen/*.vm 代码生成模板。用于新增或修改标准 CRUD 列表页、树表页、系统管理页、监控页、workflow 页面、demo 页面，补齐与 RuoYi-Vue-Plus boot4 后端接口对应的 src/api、types 和 src/pages 代码，或维护 gen/api.ts.vm、gen/types.ts.vm、gen/index.vue.vm、gen/index-tree.vue.vm；触发后应先读取适用 references，再阅读目标模块真实代码和项目内置 gen 模板。 --- # 前端编码规范 -先对齐当前 React 项目里的真实实现，再参考 Vue 版本 skill 和关联后端工程的代码生成器模板。不要直接套 Vue 3、Element Plus、AxiosPromise 或 `src/views` 规则；要落成当前仓库的 `src/pages`、`src/api`、ProTable、ModalForm、权限和导出方式。 +先对齐当前 React 项目里的真实实现，再参考项目内置 `gen/` 代码生成模板。Vue 版本 skill 和关联后端工程的代码生成器模板只用于理解字段、权限、任务分型和迁移意图。不要直接套 Vue 3、Element Plus、AxiosPromise 或 `src/views` 规则；要落成当前仓库的 `src/pages`、`src/api`、ProTable、ModalForm、权限、导出和公共工具方式。 ## 执行流程 @@ -16,11 +16,12 @@ description: 在当前 plus-ui-react 前端项目中按真实 React + TypeScript - 树表优先看 `src/pages/demo/tree/index.tsx`、`src/pages/workflow/category/index.tsx`。 - 系统复杂页优先看 `src/pages/system/user/index.tsx`、`system/role`、`system/post`、`system/config`。 - workflow 业务页优先看 `src/pages/workflow/*` 与 `src/api/workflow/*` 同类页面。 -4. 需要从 Vue 版本迁移经验时，参考 `D:\git-sources\Plus相关\plus-ui-new\.codex\skills\frontend-crud-coding` 和 `.claude\agents`，只吸收任务分型、增量修改和自检原则。 -5. 新增标准页面前，可以对照后端工程 `D:\git-sources\Plus相关\RuoYi-Vue-Plus-boot4\ruoyi-modules\ruoyi-gen\src\main\resources\vm` 确认接口、字段、权限和导出能力，但输出必须改成 React 项目风格。 -6. 新增代码时通常同步维护 `src/api///index.ts`、`types.ts`、`src/pages///index.tsx`。 -7. 增强已有页面时只做增量修改，保留原页面的树筛选、导入导出、列显隐、权限、字典、弹窗、抽屉和路由跳转能力。 -8. 修改完成后按影响范围运行验证：优先 `pnpm exec tsc --noEmit` 或 `pnpm lint`；大范围页面、公共组件、构建配置变更再跑 `pnpm build`。 +4. 新增或维护代码生成能力时，优先阅读当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。这些是 React 版内置生成模板，即使文件名保留 `.vue.vm`，内容也应是当前项目 React/TSX 风格。 +5. 需要从 Vue 版本迁移经验时，参考 `D:\git-sources\Plus相关\plus-ui-new\.codex\skills\frontend-crud-coding` 和 `.claude\agents`，只吸收任务分型、增量修改和自检原则。 +6. 新增标准页面前，可以对照后端工程 `D:\git-sources\Plus相关\RuoYi-Vue-Plus-boot4\ruoyi-modules\ruoyi-gen\src\main\resources\vm` 确认字段、权限和导出能力，但输出和 `gen/` 模板必须保持 React 项目风格。 +7. 新增代码时通常同步维护 `src/api///index.ts`、`types.ts`、`src/pages///index.tsx`；如果是生成模板优化，同步维护 `gen/` 对应 `.vm`。 +8. 增强已有页面时只做增量修改，保留原页面的树筛选、导入导出、列显隐、权限、字典、弹窗、抽屉和路由跳转能力。 +9. 修改完成后按影响范围运行验证：优先 `pnpm exec tsc --noEmit` 或 `pnpm lint`；大范围页面、公共组件、构建配置变更再跑 `pnpm build`。 ## 文档读取规则 @@ -34,9 +35,10 @@ description: 在当前 plus-ui-react 前端项目中按真实 React + TypeScript 1. 目标目录下最近似页面、API、types 的真实实现。 2. 当前项目公共 hooks、组件、工具、样式和请求封装约定。 -3. Vue 参考项目 `.codex` / `.claude` 中的任务分型和工作流。 -4. 关联后端工程 generator 模板。 -5. 通用 React / Ant Design ProComponents 习惯。 +3. 当前项目内置 `gen/*.vm` React 代码生成模板。 +4. Vue 参考项目 `.codex` / `.claude` 中的任务分型和工作流。 +5. 关联后端工程 generator 模板。 +6. 通用 React / Ant Design ProComponents 习惯。 也就是说： @@ -54,6 +56,7 @@ description: 在当前 plus-ui-react 前端项目中按真实 React + TypeScript - 请求统一通过 `src/api/request.ts`，API 返回类型使用 `Promise>`，不要从 `axios` 或 Vue 项目引入 `AxiosPromise`。 - 分页结果使用 `PageResult` from `@/api/types`，接口外层使用 `R` from `@/api/types`。 - 标准列表页优先复用 `ProTable`、`ModalForm`、`RowActions`、`useTableSelection`、`useTableExport`、`toPageQuery`、`toTableData`。 +- 查询、字典、树表、loading、重置和确认弹窗优先复用 `useDateRangeQuery`、`dictOptions`、`useTreeTableExpand`、`useLoading`、`useSearchReset`、`confirmAction`/`confirmTitleSafe`。 - 权限用 `const userInfo = useUserStore(state => state.userInfo)` 和 `hasPermi(userInfo, ['module:business:action'])` 计算布尔值。 - 新页面不要无故引入另一套状态管理、请求封装、表格封装、样式体系或权限写法。 @@ -89,7 +92,7 @@ description: 在当前 plus-ui-react 前端项目中按真实 React + TypeScript ### 2. 树表 CRUD -以 `src/pages/demo/tree/index.tsx`、`src/pages/workflow/category/index.tsx` 为主要起点。列表接口通常返回数组，不使用分页 `PageResult`；页面使用 `handleTree`、`expandedRowKeys`、`ProFormTreeSelect`。 +以 `src/pages/demo/tree/index.tsx`、`src/pages/workflow/category/index.tsx` 为主要起点。列表接口通常返回数组，不使用分页 `PageResult`；页面使用 `handleTree`、`useTreeTableExpand`、`ProFormTreeSelect`。 ### 3. 强业务页面 @@ -103,6 +106,17 @@ workflow 目录优先参考 `src/pages/workflow/*`。流程定义、流程实例 只维护 `src/api///index.ts` 与 `types.ts`，但仍要与后端路由、返回结构、当前模块导入方式和类型入口一致。 +### 6. 维护 React 生成模板 + +模板只放在当前仓库 `gen/` 下，除非用户明确要求写入 boot4 后端工程。维护时保持 Velocity 变量和文件名不变： + +- `gen/api.ts.vm` +- `gen/types.ts.vm` +- `gen/index.vue.vm` +- `gen/index-tree.vue.vm` + +模板内容必须生成当前 React 项目代码，并优先使用已有公共工具：`useDateRangeQuery`、`dictOptions`、`useTreeTableExpand`、`useTableSelection`、`useTableExport`、`confirmAction`、`toPageQuery`、`toTableData`、`handleTree`、`formatDateTimeFields`、`toDayjsFields`。不要把 Vue 模板、Element Plus 组件或 `src/views` 路径写入这些模板。 + ## 输出要求 使用本 skill 时，默认期望产出应满足： @@ -112,6 +126,7 @@ workflow 目录优先参考 `src/pages/workflow/*`。流程定义、流程实例 - 标准页查询、重置、分页、弹窗、提交、删除、导出流程闭环完整。 - 复杂页面保留原有交互能力和业务约束。 - 代码体现当前项目 hooks、页面壳和下载方式，而不是 Vue 版本或 generator 裸输出。 +- 生成模板变更要同步反映当前项目公共 hooks/工具，避免生成的新页面重复手写日期范围、字典 options、树展开、loading、搜索重置和确认框逻辑。 - 交付前说明运行过的验证命令；如果无法验证，说明原因。 ## 快速检查清单 @@ -124,8 +139,12 @@ workflow 目录优先参考 `src/pages/workflow/*`。流程定义、流程实例 - 多选是否通过 `useTableSelection(row => row.id)`。 - 行操作是否优先使用 `RowActions` 和 Ant Design 图标。 - 权限是否通过 `useUserStore` + `hasPermi` 计算，不要写 Vue 指令。 -- 日期范围是否通过 `formatDateTimeRange` + `addDateRange` 或附近页面现有方式处理。 -- 树表是否使用 `handleTree`、`pagination={false}`、`expandedRowKeys`、`ProFormTreeSelect`。 +- 日期范围是否通过 `useDateRangeQuery` 或 `addDateRange` 相关工具处理。 +- 字典 options 是否通过 `dictOptions`。 +- 树表是否使用 `handleTree`、`pagination={false}`、`useTreeTableExpand`、`ProFormTreeSelect`。 +- loading 是否优先使用 `useLoading`，搜索重置是否优先使用 `useSearchReset`。 +- 需要 Promise 式确认时是否使用 `confirmAction` 或 `confirmTitleSafe`。 +- 代码生成模板是否仍输出 React TSX 项目风格。 ## 推荐提问方式 diff --git a/.codex/skills/frontend-crud-coding/agents/openai.yaml b/.codex/skills/frontend-crud-coding/agents/openai.yaml index ff48ad9a..e80b9322 100644 --- a/.codex/skills/frontend-crud-coding/agents/openai.yaml +++ b/.codex/skills/frontend-crud-coding/agents/openai.yaml @@ -1,7 +1,7 @@ interface: display_name: "前端编码" - short_description: "按 plus-ui-react 真实代码编写 React CRUD" - default_prompt: "使用 $frontend-crud-coding 先读取适用 reference，再按 plus-ui-react 真实页面、API/types、ProTable、ModalForm、权限和导出约定实现前端修改。" + short_description: "按 plus-ui-react 真实代码和 gen 模板编写 React CRUD" + default_prompt: "使用 $frontend-crud-coding 先读取适用 reference，再按 plus-ui-react 真实页面、项目内置 gen 模板、API/types、ProTable、ModalForm、权限、导出和公共工具约定实现前端修改。" policy: allow_implicit_invocation: true diff --git a/.codex/skills/frontend-crud-coding/references/examples.md b/.codex/skills/frontend-crud-coding/references/examples.md index edb2fb2f..23d0de24 100644 --- a/.codex/skills/frontend-crud-coding/references/examples.md +++ b/.codex/skills/frontend-crud-coding/references/examples.md @@ -14,9 +14,10 @@ - 先看 `src/api/system/client/*` 和 `src/pages/system/client/index.tsx` 是否已存在。 - 再看 `src/pages/demo/demo/index.tsx` 的标准 React CRUD 骨架。 -- 必要时对照 boot4 generator 模板确认字段、权限和接口。 +- 新增标准生成能力时优先对照当前仓库 `gen/index.vue.vm`、`gen/api.ts.vm`、`gen/types.ts.vm`；boot4 generator 只用于核对字段、权限和接口。 - 生成或修改 `api/index.ts`、`types.ts`、`pages/.../index.tsx`。 - 使用 `request>>`、`ProTable`、`ModalForm`、`RowActions`、`useTableSelection`、`useTableExport`。 +- 日期范围、字典 options、确认框、loading 等优先使用 `useDateRangeQuery`、`dictOptions`、`confirmAction`、`useLoading` 等项目工具。 ## 案例 2：新增树表页面 @@ -32,9 +33,25 @@ - 判断这是树表，不生成分页 `PageResult` 页面。 - API 列表返回 `R`。 - `Query` 不继承 `PageQuery`。 -- 页面使用 `handleTree`、`pagination={false}`、`expandedRowKeys`、`ProFormTreeSelect`。 +- 页面使用 `handleTree`、`pagination={false}`、`useTreeTableExpand`、`ProFormTreeSelect`。 - 新增子节点时从当前行带入 `parentId`。 +## 案例 2.1：优化 React 代码生成模板 + +### 用户提问示例 + +```text +使用 $frontend-crud-coding 优化当前项目 gen 目录下的 React 代码生成模板，让生成页面继续使用新加的工具。 +``` + +### 期望执行方式 + +- 读取 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。 +- 保持 Velocity 变量、宏和文件名不变。 +- 普通表模板继续使用 `useTableSelection`、`useTableExport`、`useDateRangeQuery`、`dictOptions`、`confirmAction`。 +- 树表模板继续使用 `handleTree`、`filterTree`、`useTreeTableExpand`、`dictOptions`。 +- 输出仍是 React TSX 项目代码，不写 Vue `src/views`、Element Plus 或 `AxiosPromise`。 + ## 案例 3：修改已有复杂列表页 ### 用户提问示例 @@ -66,7 +83,7 @@ - 优先看 `src/pages/workflow/category/index.tsx` 和 `src/api/workflow/category/*`。 - 判断是否需要后端新增导出接口；前端导出路径保持 `/workflow/category/export`。 - 不迁移 system/user 的用户专属逻辑。 -- 保留树表、`expandedRowKeys`、`handleTree` 和分类弹窗逻辑。 +- 保留树表、`useTreeTableExpand`、`handleTree` 和分类弹窗逻辑。 ## 案例 5：只补 API 和 types @@ -107,7 +124,7 @@ 2. 新增状态筛选和导出 3. API 路径沿用后端接口 4. 参考 system/config 的工具栏与导出交互 -5. 参考 boot4 generator 模板补齐缺失 types +5. 参考当前项目 gen 模板和 boot4 generator 字段补齐缺失 types ``` ## 不推荐的任务描述 diff --git a/.codex/skills/frontend-crud-coding/references/frontend.md b/.codex/skills/frontend-crud-coding/references/frontend.md index a506a068..e5f48f8d 100644 --- a/.codex/skills/frontend-crud-coding/references/frontend.md +++ b/.codex/skills/frontend-crud-coding/references/frontend.md @@ -3,14 +3,15 @@ ## 优先参考的代码来源 - 当前目标目录下最近似页面、API、types。 +- 当前仓库内置 React 生成模板：`gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。 - 标准单表：`src/pages/demo/demo/index.tsx`、`src/api/demo/demo/index.ts`、`src/api/demo/demo/types.ts`。 - 树表：`src/pages/demo/tree/index.tsx`、`src/pages/workflow/category/index.tsx`。 - 复杂系统页：`src/pages/system/user/index.tsx`、`src/pages/system/role/index.tsx`、`src/pages/system/post/index.tsx`、`src/pages/system/config/index.tsx`。 - workflow 页：`src/pages/workflow/*`、`src/api/workflow/*`。 - 监控页：`src/pages/monitor/*`、`src/api/monitor/*`。 -- 公共 hooks：`src/hooks/useTableSelection.ts`、`src/hooks/useTableExport.ts`、`src/hooks/useDict.ts`。 +- 公共 hooks：`src/hooks/useTableSelection.ts`、`src/hooks/useTableExport.ts`、`src/hooks/useDict.ts`、`src/hooks/useDateRangeQuery.ts`、`src/hooks/useTreeTableExpand.ts`、`src/hooks/useLoading.ts`、`src/hooks/useSearchReset.ts`。 - 公共组件：`src/components/common/RowActions.tsx`、`TreePanel.tsx`、`RightToolbar.tsx`、`DictTag.tsx`、上传/预览组件。 -- 工具函数：`src/utils/ruoyi.ts`、`src/utils/permission.ts`、`src/utils/download.ts`。 +- 工具函数：`src/utils/ruoyi.ts`、`src/utils/permission.ts`、`src/utils/download.ts`、`src/utils/dict.ts`、`src/utils/modal.ts`。 ## 基础栈与格式 @@ -82,13 +83,14 @@ - `remove` 或 `handleDelete` 支持行删除和批量删除，成功后 `message.success('删除成功')`、`clearSelection()`、`reloadAndRest` 或 `reload`。 - 批量按钮通常用 `Popconfirm`，行操作确认优先放在 `RowActions` 的 `confirm`。 - 状态切换失败时要回滚或刷新，参考 `src/pages/system/user/index.tsx`。 -- 日期范围查询使用 `formatDateTimeRange` 和 `addDateRange`，参考 `system/user`。 +- 日期范围查询优先使用 `useDateRangeQuery`，底层通过 `addDateRange` 写入 `params.beginXxx/endXxx`。 +- 字典 options 优先使用 `dictOptions(dicts.xxx)`。 - 导入上传参考 `system/user/components/UserImportModal.tsx` 或流程定义导入弹窗，保留 `globalHeaders()` 和 `appEnv.baseApi` 相关方式。 ## 字典、权限与公共工具 - 字典使用 `const dicts = useDict('sys_normal_disable', 'sys_user_gender')`。 -- 字典 options 可按 `system/user` 中的 `dictOptions` 函数映射为 `{ label, value }`。 +- 字典 options 使用 `dictOptions` from `@/utils/dict` 映射为 `{ label, value }`。 - 权限使用： `const userInfo = useUserStore(state => state.userInfo);` `const canAdd = hasPermi(userInfo, ['system:user:add']);` @@ -96,6 +98,8 @@ - 常用工具： `hasPermi` from `@/utils/permission` `handleTree`、`parseStrEmpty`、`toPageQuery`、`toTableData`、`addDateRange`、`formatDateTimeRange` from `@/utils/ruoyi` + `dictOptions` from `@/utils/dict` + `confirmAction`、`confirmTitleSafe` from `@/utils/modal` `download` via `useTableExport` ## 组件与样式规则 @@ -104,6 +108,9 @@ - 树筛选优先复用 `TreePanel`，参考 `system/user`。 - 导出优先复用 `useTableExport`。 - 多选优先复用 `useTableSelection`。 +- 异步 loading 优先复用 `useLoading`，不要重复手写 `setLoading(true)` + `finally setLoading(false)`。 +- ProTable 重置后还要清空额外筛选状态时，优先复用 `useSearchReset`。 +- Promise 式确认框优先复用 `confirmAction` 或 `confirmTitleSafe`。 - 标准页面尽量使用 `PageContainer`、`ProTable`、ProComponents 页面壳，不堆大量内联样式。 - 需要自定义布局时先查 `src/assets/styles` 是否已有 `.tree-table-page`、`.table-panel`、`.page-surface` 等类。 - 不要为了单页需求修改全局组件样式。 @@ -112,22 +119,25 @@ - 树表列表接口通常返回数组，页面通过 `handleTree(res.data || [], 'id', 'parentId')` 组树。 - `ProTable` 使用 `pagination={false}`。 -- 使用 `expandedRowKeys` 和 `onExpandedRowsChange` 控制展开。 +- 使用 `useTreeTableExpand` 控制 `expandedRowKeys`、`onExpandedRowsChange`、`syncExpandedRows`、`toggleExpandAll`。 - 展开/折叠按钮参考 `demo/tree` 和 `workflow/category`，用 `SortAscendingOutlined`。 - 表单中上级节点使用 `ProFormTreeSelect`。 - 新增子节点时从当前行回填 `parentId`。 - 删除确认文案优先使用业务名称，而不是批量 ID 文案。 -## 与 Vue 参考项目和生成器模板的关系 +## 与 gen 模板、Vue 参考项目和后端生成器的关系 +- 当前仓库 `gen/*.vm` 是 React 版内置代码生成模板，是维护生成能力时的第一参考。 +- `gen/index.vue.vm`、`gen/index-tree.vue.vm` 文件名为兼容后端 generator 保持不变，但内容必须生成 React TSX 页面。 +- 修改公共 hooks/工具后，如果它们能简化标准生成页，要同步评估 `gen/*.vm` 是否需要更新。 - Vue skill 和 `.claude/agents` 提供的是任务分型、优先级、增量修改、自检方式，不是 React 实现模板。 -- generator 模板可用于确认字段、权限、导出、状态切换、排序、日期范围等，但不是最终答案。 +- boot4 后端 generator 模板可用于确认字段、权限、导出、状态切换、排序、日期范围等，但不是最终答案。 - 当前 React 项目的核心骨架是 `ProTable`、`ModalForm`、`RowActions`、`useTableSelection`、`useTableExport`。 - 修改已有页面时，不要把现有强业务逻辑替换回 generator 的简化逻辑。 ## 验证规则 -- 只改文档或 skill：运行 skill 基础校验。 +- 只改文档、skill 或 `gen/*.vm` 模板：至少运行 skill 基础校验或 `git diff --check`；如果模板改动依赖项目工具，优先再跑 `pnpm lint`。 - 改前端 TS/TSX/API/types：优先运行 `pnpm exec tsc --noEmit` 或 `pnpm lint`。 - 改页面、import、权限或较多文件：运行 `pnpm lint`。 - 改公共 hooks、组件、构建相关或大范围页面：再运行 `pnpm build`。 diff --git a/gen/api.ts.vm b/gen/api.ts.vm new file mode 100644 index 00000000..0ff896bd --- /dev/null +++ b/gen/api.ts.vm @@ -0,0 +1,94 @@ +import type { #if(!$table.tree)PageResult, #end R } from '@/api/types'; +import request from '@/api/request'; +import type { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from './types'; + +/** + * 查询${functionName}列表 + */ +export function list${BusinessName}(query?: ${BusinessName}Query) { + return request#end>>({ + url: '/${moduleName}/${businessName}/list', + method: 'get', + params: query + }); +} + +/** + * 查询${functionName}详细 + */ +export function get${BusinessName}(${pkColumn.javaField}: string | number) { + return request>({ + url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField}, + method: 'get' + }); +} + +/** + * 新增${functionName} + */ +export function add${BusinessName}(data: ${BusinessName}Form) { + return request({ + url: '/${moduleName}/${businessName}', + method: 'post', + data + }); +} + +/** + * 修改${functionName} + */ +export function update${BusinessName}(data: ${BusinessName}Form) { + return request({ + url: '/${moduleName}/${businessName}', + method: 'put', + data + }); +} + +#if($enableStatus) +/** + * 修改${functionName}状态 + */ +export function change${BusinessName}Status( + ${pkColumn.javaField}: string | number, + ${statusField}: #if($statusColumn.javaType == 'Boolean')boolean#elseif($statusColumn.javaType == 'Integer' || $statusColumn.javaType == 'Long')number#else string#end +) { + return request({ + url: '/${moduleName}/${businessName}/changeStatus', + method: 'put', + data: { + ${pkColumn.javaField}, + ${statusField} + } + }); +} + +#end +#if($enableSort) +/** + * 调整${functionName}排序 + */ +export function update${BusinessName}Sort( + ${pkColumn.javaField}: string | number, + ${sortField}: #if($sortColumn.javaType == 'LocalDateTime' || $sortColumn.javaType == 'String')string#else number#end +) { + return request({ + url: '/${moduleName}/${businessName}/updateSort', + method: 'put', + data: { + ${pkColumn.javaField}, + ${sortField} + } + }); +} + +#end +/** + * 删除${functionName} + */ +export function del${BusinessName}(${pkColumn.javaField}: string | number | Array) { + return request({ + url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField}, + method: 'delete' + }); +} diff --git a/gen/index-tree.vue.vm b/gen/index-tree.vue.vm new file mode 100644 index 00000000..c3952c82 --- /dev/null +++ b/gen/index-tree.vue.vm @@ -0,0 +1,472 @@ +#set($needDict = $dicts != '') +#set($needImagePreview = false) +#set($needImageUpload = false) +#set($needFileUpload = false) +#set($needEditor = false) +#set($needCheckbox = false) +#set($needSelect = false) +#set($needTextArea = false) +#set($needDigit = false) +#set($needDateField = false) +#set($needSwitchField = false) +#foreach($column in $columns) +#if($column.list && $column.htmlType == "imageUpload") +#set($needImagePreview = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "imageUpload") +#set($needImageUpload = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "fileUpload") +#set($needFileUpload = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "editor") +#set($needEditor = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "checkbox") +#set($needCheckbox = true) +#end +#if(($column.insert || $column.edit || $column.query) && ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "switch")) +#set($needSelect = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "textarea") +#set($needTextArea = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "inputNumber") +#set($needDigit = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "datetime") +#set($needDateField = true) +#end +#if(($column.insert || $column.edit || $column.list) && $column.htmlType == "switch") +#set($needSwitchField = true) +#end +#end +#macro(comment $column)#set($idx=$column.columnComment.indexOf("（"))#if($idx != -1)$column.columnComment.substring(0, $idx)#else$column.columnComment#end#end +import { DeleteOutlined#if($enableExport), DownloadOutlined#end, EditOutlined, PlusOutlined, SortAscendingOutlined } from '@ant-design/icons'; +import { + ModalForm, + PageContainer, +#if($needCheckbox) + ProFormCheckbox, +#end +#if($needDateField) + ProFormDateTimePicker, +#end +#if($needDigit) + ProFormDigit, +#end +#if($needSelect) + ProFormSelect, +#end +#if($needTextArea) + ProFormTextArea, +#end + ProFormText, + ProFormTreeSelect, + ProTable, + type ActionType, + type ProColumns +} from '@ant-design/pro-components'; +import { useBoolean } from 'ahooks'; +import { Button, Form, message#if($enableStatus || $needSwitchField), Switch#end#if($enableSort), InputNumber#end } from 'antd'; +import { useMemo, useRef, useState } from 'react'; +import type { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types'; +import { + add${BusinessName}, +#if($enableStatus) + change${BusinessName}Status, +#end + del${BusinessName}, + get${BusinessName}, + list${BusinessName}, +#if($enableSort) + update${BusinessName}Sort, +#end + update${BusinessName} +} from '@/api/${moduleName}/${businessName}'; +#if($needDict) +import DictTag from '@/components/common/DictTag'; +#end +#if($needFileUpload) +import FileUpload from '@/components/common/FileUpload'; +#end +#if($needImagePreview) +import ImagePreview from '@/components/common/ImagePreview'; +#end +#if($needImageUpload) +import ImageUpload from '@/components/common/ImageUpload'; +#end +#if($needEditor) +import RichTextEditor from '@/components/common/RichTextEditor'; +#end +import RowActions from '@/components/common/RowActions'; +#if($needDict) +import { useDict } from '@/hooks/useDict'; +#end +#if($enableExport) +import { useTableExport } from '@/hooks/useTableExport'; +#end +import { useTreeTableExpand } from '@/hooks/useTreeTableExpand'; +import { useUserStore } from '@/stores/userStore'; +#if($needDict) +import { dictOptions } from '@/utils/dict'; +#end +#if($enableStatus) +import { confirmAction } from '@/utils/modal'; +#end +import { hasPermi } from '@/utils/permission'; +import { filterTree#if($needDateField), formatDateTimeFields#end, handleTree#if($needDateField), toDayjsFields#end } from '@/utils/ruoyi'; + +const default${BusinessName}Form: ${BusinessName}Form = { + ${treeParentCode}: ${treeRootValueTsLiteral}, +#foreach($column in $columns) +#if(($column.insert || $column.edit) && !$column.pk && $column.htmlType == "checkbox") + ${column.javaField}: [], +#end +#end +}; + +interface ${BusinessName}SelectNode { + title: string; + value: string | number; + children?: ${BusinessName}SelectNode[]; +} + +function toTreeSelectData(nodes: ${BusinessName}VO[]): ${BusinessName}SelectNode[] { + return nodes.map(node => ({ + title: String(node.${treeName} || ''), + value: node.${treeCode}, + children: node.children ? toTreeSelectData(node.children) : undefined + })); +} + +#macro(switchActiveValue $column)#if($column.javaType == "Boolean")true#elseif($column.javaType == "Integer" || $column.javaType == "Long")0#else'0'#end#end +#macro(switchInactiveValue $column)#if($column.javaType == "Boolean")false#elseif($column.javaType == "Integer" || $column.javaType == "Long")1#else'1'#end#end +#if($enableStatus) +const ${statusField}ActiveValue = #if($statusColumn.javaType == "Boolean")true#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")0#else'0'#end; +const ${statusField}InactiveValue = #if($statusColumn.javaType == "Boolean")false#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")1#else'1'#end; + +#end +export default function ${BusinessName}Page() { + const actionRef = useRef(undefined); + const [form] = Form.useForm<${BusinessName}Form>(); + const userInfo = useUserStore(state => state.userInfo); +#if($needDict) + const dicts = useDict(${dicts}); +#end + const [treeOptions, setTreeOptions] = useState<${BusinessName}VO[]>([]); + const [tableRows, setTableRows] = useState<${BusinessName}VO[]>([]); + const { expandAll, expandedRowKeys, onExpandedRowsChange, syncExpandedRows, toggleExpandAll } = + useTreeTableExpand<${BusinessName}VO>(row => row.${treeCode}); + const [modalOpen, { setTrue: openModal, setFalse: closeModal }] = useBoolean(false); + const [modalTitle, setModalTitle] = useState(''); +#if($enableExport) + const { updateExportParams, exportFile } = useTableExport(); +#end + + const canAdd = hasPermi(userInfo, ['${permissionPrefix}:add']); + const canEdit = hasPermi(userInfo, ['${permissionPrefix}:edit']); + const canRemove = hasPermi(userInfo, ['${permissionPrefix}:remove']); +#if($enableExport) + const canExport = hasPermi(userInfo, ['${permissionPrefix}:export']); +#end + const treeSelectData = useMemo( + () => [{ title: '顶级节点', value: ${treeRootValueTsLiteral}, children: toTreeSelectData(treeOptions) }], + [treeOptions] + ); + + const loadTreeOptions = async (excludeId?: string | number) => { + const res = await list${BusinessName}(); + const rows = handleTree<${BusinessName}VO>(res.data || [], '${treeCode}', '${treeParentCode}'); + setTreeOptions(excludeId ? filterTree(rows, node => node.${treeCode} !== excludeId) : rows); + }; + + const openAdd = async (row?: ${BusinessName}VO) => { + await loadTreeOptions(); + form.resetFields(); + form.setFieldsValue({ ...default${BusinessName}Form, ${treeParentCode}: row?.${treeCode} || ${treeRootValueTsLiteral} }); + setModalTitle('添加${functionName}'); + openModal(); + }; + + const openEdit = async (row: ${BusinessName}VO) => { + await loadTreeOptions(row.${treeCode}); + const res = await get${BusinessName}(row.${pkColumn.javaField}); + const data = #if($needDateField)toDayjsFields({ ...res.data }, [ +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "datetime") + '${column.javaField}', +#end +#end + ])#else{ ...res.data }#end; +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "checkbox") + if (typeof data.${column.javaField} === 'string') { + data.${column.javaField} = data.${column.javaField}.split(','); + } +#end +#end + form.resetFields(); + form.setFieldsValue(data); + setModalTitle('修改${functionName}'); + openModal(); + }; + + const submitForm = async (values: ${BusinessName}Form) => { + const submitValues = #if($needDateField)formatDateTimeFields({ ...values }, [ +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "datetime") + '${column.javaField}', +#end +#end + ])#else{ ...values }#end; +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "checkbox") + if (Array.isArray(submitValues.${column.javaField})) { + submitValues.${column.javaField} = submitValues.${column.javaField}.join(','); + } +#end +#end + submitValues.${pkColumn.javaField} ? await update${BusinessName}(submitValues) : await add${BusinessName}(submitValues); + message.success('操作成功'); + form.resetFields(); + actionRef.current?.reload(); + return true; + }; + + const remove = async (row: ${BusinessName}VO) => { + await del${BusinessName}(row.${pkColumn.javaField}); + message.success('删除成功'); + actionRef.current?.reload(); + }; + +#if($enableStatus) + const handleStatusChange = async (row: ${BusinessName}VO, checked: boolean) => { + const previousStatus = row.${statusField}; + const status = checked ? ${statusField}ActiveValue : ${statusField}InactiveValue; + const text = checked ? '启用' : '停用'; + try { + await confirmAction(`确认要"${text}"吗?`); + await change${BusinessName}Status(row.${pkColumn.javaField}, status); + message.success(`${text}成功`); + actionRef.current?.reload(); + } catch { + row.${statusField} = previousStatus; + actionRef.current?.reload(); + } + }; + +#end +#if($enableSort) + const handleSortChange = async (row: ${BusinessName}VO, value?: number | null) => { + await update${BusinessName}Sort(row.${pkColumn.javaField}, value || 0); + message.success('排序更新成功'); + actionRef.current?.reload(); + }; + +#end + const columns: ProColumns<${BusinessName}VO>[] = [ +#foreach($column in $columns) +#set($javaField=$column.javaField) +#set($dictType=$column.dictType) +#if($column.list && !$column.pk) +#if($enableStatus && $statusField == $javaField) + { + title: '#comment($column)', + dataIndex: '${javaField}', + valueType: 'select', + width: 100, +#if("" != $dictType) + fieldProps: { options: dictOptions(dicts.${dictType}) }, +#end + render: (_, row) => ( + handleStatusChange(row, checked)} + /> + ) + }, +#elseif($enableSort && $sortField == $javaField) + { + title: '#comment($column)', + dataIndex: '${javaField}', + search: false, + width: 130, + render: (_, row) => handleSortChange(row, value)} /> + }, +#elseif($column.htmlType == "datetime") + { title: '#comment($column)', dataIndex: '${javaField}', valueType: 'dateTime', search: #if($column.query)true#else false#end, width: 170 }, +#elseif($column.htmlType == "imageUpload") + { + title: '#comment($column)', + dataIndex: '${javaField}Url', + search: false, + width: 100, + render: (_, row) => + }, +#elseif($column.dictColumn) + { + title: '#comment($column)', + dataIndex: '${javaField}', + valueType: 'select', + fieldProps: { options: dictOptions(dicts.${dictType}) }, + render: (_, row) => + }, +#elseif($column.htmlType == "switch") + { + title: '#comment($column)', + dataIndex: '${javaField}', + valueType: 'select', + width: 100, + render: (_, row) => + }, +#else + { title: '#comment($column)', dataIndex: '${javaField}'#if(!$column.query), search: false#end }, +#end +#end +#end + { + title: '操作', + valueType: 'option', + width: 130, + fixed: 'right', + render: (_, row) => ( + , onClick: () => openEdit(row) }, + canAdd && { key: 'add', label: '新增', icon: , onClick: () => openAdd(row) }, + canRemove && { + key: 'delete', + label: '删除', + icon: , + danger: true, + confirm: `是否确认删除${functionName}编号为"#[[${row.]]#${pkColumn.javaField}#[[}]]#"的数据项？`, + onClick: () => remove(row) + } + ]} + /> + ) + } + ]; + + return ( + + + actionRef={actionRef} + rowKey="${treeCode}" + columns={columns} + scroll={{ x: 1000 }} + pagination={false} + search={{ labelWidth: 90 }} + expandable={{ + expandedRowKeys, + onExpandedRowsChange + }} + request={async params => { + const res = await list${BusinessName}(params); + const rows = handleTree<${BusinessName}VO>(res.data || [], '${treeCode}', '${treeParentCode}'); + setTableRows(rows); + syncExpandedRows(rows, expandAll); +#if($enableExport) + updateExportParams(params); +#end + return { data: rows, total: rows.length, success: true }; + }} + toolbar={{ title: '${functionName}列表' }} + toolBarRender={() => [ + canAdd && ( + + ), + #if($enableExport), + canExport && ( + + )#end + ]} + /> + + + title={modalTitle} + open={modalOpen} + width={560} + form={form} + layout="vertical" + initialValues={default${BusinessName}Form} + modalProps={{ destroyOnHidden: true, onCancel: closeModal }} + onOpenChange={open => !open && closeModal()} + onFinish={submitForm} + > + + ); +} diff --git a/gen/index.vue.vm b/gen/index.vue.vm new file mode 100644 index 00000000..eddfbfe7 --- /dev/null +++ b/gen/index.vue.vm @@ -0,0 +1,460 @@ +#set($needDict = $dicts != '') +#set($needDateRange = false) +#set($needImagePreview = false) +#set($needImageUpload = false) +#set($needFileUpload = false) +#set($needEditor = false) +#set($needCheckbox = false) +#set($needSelect = false) +#set($needTextArea = false) +#set($needDigit = false) +#set($needDateField = false) +#set($needSwitchField = false) +#foreach($column in $columns) +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") +#set($needDateRange = true) +#end +#if($column.list && $column.htmlType == "imageUpload") +#set($needImagePreview = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "imageUpload") +#set($needImageUpload = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "fileUpload") +#set($needFileUpload = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "editor") +#set($needEditor = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "checkbox") +#set($needCheckbox = true) +#end +#if(($column.insert || $column.edit || $column.query) && ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "switch")) +#set($needSelect = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "textarea") +#set($needTextArea = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "inputNumber") +#set($needDigit = true) +#end +#if(($column.insert || $column.edit) && $column.htmlType == "datetime") +#set($needDateField = true) +#end +#if(($column.insert || $column.edit || $column.list) && $column.htmlType == "switch") +#set($needSwitchField = true) +#end +#end +#macro(comment $column)#set($idx=$column.columnComment.indexOf("（"))#if($idx != -1)$column.columnComment.substring(0, $idx)#else$column.columnComment#end#end +import { DeleteOutlined#if($enableExport), DownloadOutlined#end, EditOutlined, PlusOutlined } from '@ant-design/icons'; +import { + ModalForm, + PageContainer, +#if($needCheckbox) + ProFormCheckbox, +#end +#if($needDateField) + ProFormDateTimePicker, +#end +#if($needDigit) + ProFormDigit, +#end +#if($needSelect) + ProFormSelect, +#end +#if($needTextArea) + ProFormTextArea, +#end + ProFormText, + ProTable, + type ActionType, + type ProColumns +} from '@ant-design/pro-components'; +import { useBoolean } from 'ahooks'; +import { Button, Form, message, Popconfirm#if($enableStatus || $needSwitchField), Switch#end#if($enableSort), InputNumber#end } from 'antd'; +import { useRef, useState } from 'react'; +import type { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types'; +import { + add${BusinessName}, +#if($enableStatus) + change${BusinessName}Status, +#end + del${BusinessName}, + get${BusinessName}, + list${BusinessName}, +#if($enableSort) + update${BusinessName}Sort, +#end + update${BusinessName} +} from '@/api/${moduleName}/${businessName}'; +#if($needDict) +import DictTag from '@/components/common/DictTag'; +#end +#if($needFileUpload) +import FileUpload from '@/components/common/FileUpload'; +#end +#if($needImagePreview) +import ImagePreview from '@/components/common/ImagePreview'; +#end +#if($needImageUpload) +import ImageUpload from '@/components/common/ImageUpload'; +#end +#if($needEditor) +import RichTextEditor from '@/components/common/RichTextEditor'; +#end +import RowActions from '@/components/common/RowActions'; +#if($needDict) +import { useDict } from '@/hooks/useDict'; +#end +#if($needDateRange) +import { useDateRangeQuery } from '@/hooks/useDateRangeQuery'; +#end +#if($enableExport) +import { useTableExport } from '@/hooks/useTableExport'; +#end +import { useTableSelection } from '@/hooks/useTableSelection'; +import { useUserStore } from '@/stores/userStore'; +#if($needDict) +import { dictOptions } from '@/utils/dict'; +#end +#if($enableStatus) +import { confirmAction } from '@/utils/modal'; +#end +import { hasPermi } from '@/utils/permission'; +import { #if($needDateField)formatDateTimeFields, toDayjsFields, #end toPageQuery, toTableData } from '@/utils/ruoyi'; + +const default${BusinessName}Form: ${BusinessName}Form = { +#foreach($column in $columns) +#if(($column.insert || $column.edit) && !$column.pk && $column.htmlType == "checkbox") + ${column.javaField}: [], +#end +#end +}; + +#macro(switchActiveValue $column)#if($column.javaType == "Boolean")true#elseif($column.javaType == "Integer" || $column.javaType == "Long")0#else'0'#end#end +#macro(switchInactiveValue $column)#if($column.javaType == "Boolean")false#elseif($column.javaType == "Integer" || $column.javaType == "Long")1#else'1'#end#end +#if($enableStatus) +const ${statusField}ActiveValue = #if($statusColumn.javaType == "Boolean")true#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")0#else'0'#end; +const ${statusField}InactiveValue = #if($statusColumn.javaType == "Boolean")false#elseif($statusColumn.javaType == "Integer" || $statusColumn.javaType == "Long")1#else'1'#end; + +#end +export default function ${BusinessName}Page() { + const actionRef = useRef(undefined); + const [form] = Form.useForm<${BusinessName}Form>(); + const userInfo = useUserStore(state => state.userInfo); +#if($needDict) + const dicts = useDict(${dicts}); +#end + const { ids, selectedOne, handleSelectionChange, clearSelection } = useTableSelection<${BusinessName}VO>( + row => row.${pkColumn.javaField} + ); + const [modalOpen, { setTrue: openModal, setFalse: closeModal }] = useBoolean(false); + const [modalTitle, setModalTitle] = useState(''); +#if($enableExport) + const { updateExportParams, exportFile } = useTableExport(); +#end +#foreach($column in $columns) +#if($column.query && $column.htmlType == "datetime" && $column.queryType == "BETWEEN") +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) + const { applyDateRange: apply${AttrName}DateRange } = useDateRangeQuery('${AttrName}'); +#end +#end + + const canAdd = hasPermi(userInfo, ['${permissionPrefix}:add']); + const canEdit = hasPermi(userInfo, ['${permissionPrefix}:edit']); + const canRemove = hasPermi(userInfo, ['${permissionPrefix}:remove']); +#if($enableExport) + const canExport = hasPermi(userInfo, ['${permissionPrefix}:export']); +#end + + const openAdd = () => { + form.resetFields(); + form.setFieldsValue(default${BusinessName}Form); + setModalTitle('添加${functionName}'); + openModal(); + }; + + const openEdit = async (row?: ${BusinessName}VO) => { + const target = row || selectedOne; + if (!target?.${pkColumn.javaField}) return; + const res = await get${BusinessName}(target.${pkColumn.javaField}); + const data = #if($needDateField)toDayjsFields({ ...res.data }, [ +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "datetime") + '${column.javaField}', +#end +#end + ])#else{ ...res.data }#end; +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "checkbox") + if (typeof data.${column.javaField} === 'string') { + data.${column.javaField} = data.${column.javaField}.split(','); + } +#end +#end + form.resetFields(); + form.setFieldsValue(data); + setModalTitle('修改${functionName}'); + openModal(); + }; + + const submitForm = async (values: ${BusinessName}Form) => { + const submitValues = #if($needDateField)formatDateTimeFields({ ...values }, [ +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "datetime") + '${column.javaField}', +#end +#end + ])#else{ ...values }#end; +#foreach($column in $columns) +#if(($column.insert || $column.edit) && $column.htmlType == "checkbox") + if (Array.isArray(submitValues.${column.javaField})) { + submitValues.${column.javaField} = submitValues.${column.javaField}.join(','); + } +#end +#end + submitValues.${pkColumn.javaField} ? await update${BusinessName}(submitValues) : await add${BusinessName}(submitValues); + message.success('操作成功'); + form.resetFields(); + actionRef.current?.reload(); + return true; + }; + + const remove = async (row?: ${BusinessName}VO) => { + await del${BusinessName}(row?.${pkColumn.javaField} || ids); + message.success('删除成功'); + clearSelection(); + actionRef.current?.reloadAndRest?.(); + }; + +#if($enableStatus) + const handleStatusChange = async (row: ${BusinessName}VO, checked: boolean) => { + const previousStatus = row.${statusField}; + const status = checked ? ${statusField}ActiveValue : ${statusField}InactiveValue; + const text = checked ? '启用' : '停用'; + try { + await confirmAction(`确认要"${text}"吗?`); + await change${BusinessName}Status(row.${pkColumn.javaField}, status); + message.success(`${text}成功`); + actionRef.current?.reload(); + } catch { + row.${statusField} = previousStatus; + actionRef.current?.reload(); + } + }; + +#end +#if($enableSort) + const handleSortChange = async (row: ${BusinessName}VO, value?: number | null) => { + await update${BusinessName}Sort(row.${pkColumn.javaField}, value || 0); + message.success('排序更新成功'); + actionRef.current?.reload(); + }; + +#end + const columns: ProColumns<${BusinessName}VO>[] = [ +#foreach($column in $columns) +#set($javaField=$column.javaField) +#set($dictType=$column.dictType) +#if($column.list) +#if($enableStatus && $statusField == $javaField) + { + title: '#comment($column)', + dataIndex: '${javaField}', + valueType: 'select', + width: 100, +#if("" != $dictType) + fieldProps: { options: dictOptions(dicts.${dictType}) }, +#end + render: (_, row) => ( + handleStatusChange(row, checked)} + /> + ) + }, +#elseif($enableSort && $sortField == $javaField) + { + title: '#comment($column)', + dataIndex: '${javaField}', + search: false, + width: 130, + render: (_, row) => handleSortChange(row, value)} /> + }, +#elseif($column.htmlType == "datetime") + { title: '#comment($column)', dataIndex: '${javaField}', valueType: 'dateTime', search: #if($column.query && $column.queryType != "BETWEEN")true#else false#end, width: 170 }, +#elseif($column.htmlType == "imageUpload") + { + title: '#comment($column)', + dataIndex: '${javaField}Url', + search: false, + width: 100, + render: (_, row) => + }, +#elseif($column.dictColumn) + { + title: '#comment($column)', + dataIndex: '${javaField}', + valueType: 'select', + fieldProps: { options: dictOptions(dicts.${dictType}) }, + render: (_, row) => + }, +#elseif($column.htmlType == "switch") + { + title: '#comment($column)', + dataIndex: '${javaField}', + valueType: 'select', + width: 100, + render: (_, row) => + }, +#else + { title: '#comment($column)', dataIndex: '${javaField}'#if(!$column.query), search: false#end }, +#end +#end +#if($column.query && $column.htmlType == "datetime" && $column.queryType == "BETWEEN") + { title: '#comment($column)', dataIndex: '${javaField}Range', valueType: 'dateTimeRange', hideInTable: true }, +#end +#end + { + title: '操作', + valueType: 'option', + width: 92, + fixed: 'right', + render: (_, row) => ( + , onClick: () => openEdit(row) }, + canRemove && { + key: 'delete', + label: '删除', + icon: , + danger: true, + confirm: `是否确认删除${functionName}编号为"#[[${row.]]#${pkColumn.javaField}#[[}]]#"的数据项？`, + onClick: () => remove(row) + } + ]} + /> + ) + } + ]; + + return ( + + #end> + actionRef={actionRef} + rowKey="${pkColumn.javaField}" + columns={columns} + scroll={{ x: 1000 }} + search={{ labelWidth: 90 }} + pagination={{ defaultPageSize: 10, showSizeChanger: true }} + rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }} + request={async params => { +#if($needDateRange) + let query = toPageQuery(params); +#foreach($column in $columns) +#if($column.query && $column.htmlType == "datetime" && $column.queryType == "BETWEEN") +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) + query = apply${AttrName}DateRange(query, params.${column.javaField}Range as [string, string] | undefined); + delete query.${column.javaField}Range; +#end +#end +#else + const query = toPageQuery(params); +#end +#if($enableExport) + updateExportParams(query); +#end + const res = await list${BusinessName}(query); + return toTableData(res); + }} + toolbar={{ title: '${functionName}列表' }} + toolBarRender={() => [ + canAdd && ( + + ), + canEdit && ( + + ), + canRemove && ( + remove()}> + + + )#if($enableExport), + canExport && ( + + )#end + ]} + /> + + + title={modalTitle} + open={modalOpen} + width={560} + form={form} + layout="vertical" + initialValues={default${BusinessName}Form} + modalProps={{ destroyOnHidden: true, onCancel: closeModal }} + onOpenChange={open => !open && closeModal()} + onFinish={submitForm} + > + + ); +} diff --git a/gen/types.ts.vm b/gen/types.ts.vm new file mode 100644 index 00000000..39b7df2a --- /dev/null +++ b/gen/types.ts.vm @@ -0,0 +1,56 @@ +import type { BaseEntity#if(!$table.tree), PageQuery#end } from '@/api/types'; + +#macro(tsType $column)#if($column.javaField.indexOf("id") != -1 || $column.javaField.indexOf("Id") != -1)string | number#elseif($column.javaType == 'Long' || $column.javaType == 'Integer' || $column.javaType == 'Double' || $column.javaType == 'Float' || $column.javaType == 'BigDecimal')number#elseif($column.javaType == 'Boolean')boolean#else string#end#end + +export interface ${BusinessName}VO { +#foreach ($column in $columns) +#if($column.list || $column.pk) + /** + * $column.columnComment + */ + $column.javaField: #tsType($column); +#if($column.htmlType == "imageUpload") + /** + * ${column.columnComment}Url + */ + ${column.javaField}Url?: string; +#end +#end +#end +#if($table.tree) + /** + * 子对象 + */ + children?: ${BusinessName}VO[]; +#end +} + +export interface ${BusinessName}Form extends BaseEntity { +#foreach ($column in $columns) +#if($column.insert || $column.edit || $column.pk) + /** + * $column.columnComment + */ +#if($column.htmlType == "checkbox") + $column.javaField?: string | string[]; +#else + $column.javaField?: #tsType($column); +#end +#end +#end +} + +export interface ${BusinessName}Query#if(!$table.tree) extends PageQuery#end { +#foreach ($column in $columns) +#if($column.query) + /** + * $column.columnComment + */ + $column.javaField?: #tsType($column); +#end +#end + /** + * 日期范围参数 + */ + params?: Record; +}