diff --git a/.claude/agents/frontend-crud-coding.md b/.claude/agents/frontend-crud-coding.md index bf836627..2fe9723f 100644 --- a/.claude/agents/frontend-crud-coding.md +++ b/.claude/agents/frontend-crud-coding.md @@ -10,7 +10,7 @@ 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 项目真实工具和页面规则修改模板。 +4. 如果是维护代码生成模板，优先读取当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.tsx.vm`、`gen/index-tree.tsx.vm`，再按 React 项目真实工具和页面规则修改模板。 通用要求： @@ -30,7 +30,7 @@ description: 前端总入口。用于当前 plus-ui-react 项目中的标准 Rea - 多选通过 `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 页面。 +- `gen/index.tsx.vm`、`gen/index-tree.tsx.vm` 内容必须生成 React TSX 页面。 验证要求： diff --git a/.claude/agents/frontend-crud-page.md b/.claude/agents/frontend-crud-page.md index 8c2aae06..0d1ca386 100644 --- a/.claude/agents/frontend-crud-page.md +++ b/.claude/agents/frontend-crud-page.md @@ -9,7 +9,7 @@ description: 前端标准 React CRUD 页面专家。用于当前 plus-ui-react 1. 先看当前模块最近似页面。 2. 再参考 `.codex/skills/frontend-crud-coding/references/frontend.md`。 -3. 维护或新增生成能力时，优先参考当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。 +3. 维护或新增生成能力时，优先参考当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.tsx.vm`、`gen/index-tree.tsx.vm`。 4. 必要时参考关联后端工程 generator 模板确认接口、字段、权限和导出能力。 5. 默认同时维护： `src/api///index.ts` @@ -58,7 +58,7 @@ description: 前端标准 React CRUD 页面专家。用于当前 plus-ui-react ## gen 模板规则 -- `gen/index.vue.vm`、`gen/index-tree.vue.vm` 文件名保持不变，但内容生成 React TSX。 +- `gen/index.tsx.vm`、`gen/index-tree.tsx.vm` 内容生成 React TSX。 - 保持 Velocity 变量、宏和后端 generator 可识别结构，不为了格式美化破坏模板语法。 - 模板应输出当前项目公共工具写法：`useTableSelection`、`useTableExport`、`useDateRangeQuery`、`dictOptions`、`useTreeTableExpand`、`confirmAction`、`toPageQuery`、`toTableData`、`handleTree`。 - 不把 Vue `src/views`、Element Plus、`AxiosPromise`、`v-hasPermi` 写入模板。 diff --git a/.codex/skills/frontend-crud-coding/SKILL.md b/.codex/skills/frontend-crud-coding/SKILL.md index 7751e836..eb82df51 100644 --- a/.codex/skills/frontend-crud-coding/SKILL.md +++ b/.codex/skills/frontend-crud-coding/SKILL.md @@ -1,6 +1,6 @@ --- name: frontend-crud-coding -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 模板。 +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.tsx.vm、gen/index-tree.tsx.vm；触发后应先读取适用 references，再阅读目标模块真实代码和项目内置 gen 模板。 --- # 前端编码规范 @@ -16,7 +16,7 @@ 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. 新增或维护代码生成能力时，优先阅读当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。这些是 React 版内置生成模板，即使文件名保留 `.vue.vm`，内容也应是当前项目 React/TSX 风格。 +4. 新增或维护代码生成能力时，优先阅读当前仓库 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.tsx.vm`、`gen/index-tree.tsx.vm`。这些是 React 版内置生成模板，页面模板必须输出当前项目 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`。 @@ -112,8 +112,8 @@ workflow 目录优先参考 `src/pages/workflow/*`。流程定义、流程实例 - `gen/api.ts.vm` - `gen/types.ts.vm` -- `gen/index.vue.vm` -- `gen/index-tree.vue.vm` +- `gen/index.tsx.vm` +- `gen/index-tree.tsx.vm` 模板内容必须生成当前 React 项目代码，并优先使用已有公共工具：`useDateRangeQuery`、`dictOptions`、`useTreeTableExpand`、`useTableSelection`、`useTableExport`、`confirmAction`、`toPageQuery`、`toTableData`、`handleTree`、`formatDateTimeFields`、`toDayjsFields`。不要把 Vue 模板、Element Plus 组件或 `src/views` 路径写入这些模板。 diff --git a/.codex/skills/frontend-crud-coding/references/examples.md b/.codex/skills/frontend-crud-coding/references/examples.md index 23d0de24..e64b21c9 100644 --- a/.codex/skills/frontend-crud-coding/references/examples.md +++ b/.codex/skills/frontend-crud-coding/references/examples.md @@ -14,7 +14,7 @@ - 先看 `src/api/system/client/*` 和 `src/pages/system/client/index.tsx` 是否已存在。 - 再看 `src/pages/demo/demo/index.tsx` 的标准 React CRUD 骨架。 -- 新增标准生成能力时优先对照当前仓库 `gen/index.vue.vm`、`gen/api.ts.vm`、`gen/types.ts.vm`；boot4 generator 只用于核对字段、权限和接口。 +- 新增标准生成能力时优先对照当前仓库 `gen/index.tsx.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` 等项目工具。 @@ -46,7 +46,7 @@ ### 期望执行方式 -- 读取 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。 +- 读取 `gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.tsx.vm`、`gen/index-tree.tsx.vm`。 - 保持 Velocity 变量、宏和文件名不变。 - 普通表模板继续使用 `useTableSelection`、`useTableExport`、`useDateRangeQuery`、`dictOptions`、`confirmAction`。 - 树表模板继续使用 `handleTree`、`filterTree`、`useTreeTableExpand`、`dictOptions`。 diff --git a/.codex/skills/frontend-crud-coding/references/frontend.md b/.codex/skills/frontend-crud-coding/references/frontend.md index e5f48f8d..061cf133 100644 --- a/.codex/skills/frontend-crud-coding/references/frontend.md +++ b/.codex/skills/frontend-crud-coding/references/frontend.md @@ -3,7 +3,7 @@ ## 优先参考的代码来源 - 当前目标目录下最近似页面、API、types。 -- 当前仓库内置 React 生成模板：`gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.vue.vm`、`gen/index-tree.vue.vm`。 +- 当前仓库内置 React 生成模板：`gen/api.ts.vm`、`gen/types.ts.vm`、`gen/index.tsx.vm`、`gen/index-tree.tsx.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`。 @@ -128,7 +128,7 @@ ## 与 gen 模板、Vue 参考项目和后端生成器的关系 - 当前仓库 `gen/*.vm` 是 React 版内置代码生成模板，是维护生成能力时的第一参考。 -- `gen/index.vue.vm`、`gen/index-tree.vue.vm` 文件名为兼容后端 generator 保持不变，但内容必须生成 React TSX 页面。 +- `gen/index.tsx.vm`、`gen/index-tree.tsx.vm` 内容必须生成 React TSX 页面。 - 修改公共 hooks/工具后，如果它们能简化标准生成页，要同步评估 `gen/*.vm` 是否需要更新。 - Vue skill 和 `.claude/agents` 提供的是任务分型、优先级、增量修改、自检方式，不是 React 实现模板。 - boot4 后端 generator 模板可用于确认字段、权限、导出、状态切换、排序、日期范围等，但不是最终答案。 diff --git a/gen/index-tree.vue.vm b/gen/index-tree.tsx.vm similarity index 100% rename from gen/index-tree.vue.vm rename to gen/index-tree.tsx.vm diff --git a/gen/index.vue.vm b/gen/index.tsx.vm similarity index 100% rename from gen/index.vue.vm rename to gen/index.tsx.vm