From d7eca3db857946fd4a9f2fe4c1c6873df75ccba6 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: Mon, 6 Jul 2026 16:15:41 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=20=E9=80=82?= =?UTF-8?q?=E9=85=8D=E5=A4=9A=E5=89=8D=E7=AB=AF=20skill=20=E5=86=85?= =?UTF-8?q?=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/agents/backend-crud.md | 2 +- .claude/agents/backend-engineering.md | 4 +- .codex/skills/ruoyi-plus-ai-coding/SKILL.md | 10 ++-- .../references/examples.md | 4 +- .../references/frontend.md | 46 ++++++++++++++----- 5 files changed, 44 insertions(+), 22 deletions(-) diff --git a/.claude/agents/backend-crud.md b/.claude/agents/backend-crud.md index 8d4dd08aa..87565ea67 100644 --- a/.claude/agents/backend-crud.md +++ b/.claude/agents/backend-crud.md @@ -61,4 +61,4 @@ description: 标准后端 CRUD 专家。用于当前项目中的新增单表 CRU - BO / VO / Entity 是否职责分离 - 导出、分页、删除前校验是否齐全 - 是否只是 generator 裸产物，如果是要继续补齐项目约定 -- 前端 `api/types/index.vue` 如需同步，接口路径、返回结构、日期范围参数要与后端一致 +- 前端 `api/types` 和 Vue `index.vue` 或 React `index.tsx` 如需同步，接口路径、返回结构、日期范围参数要与后端一致 diff --git a/.claude/agents/backend-engineering.md b/.claude/agents/backend-engineering.md index ac3198a6f..d442a7be3 100644 --- a/.claude/agents/backend-engineering.md +++ b/.claude/agents/backend-engineering.md @@ -12,12 +12,12 @@ description: 后端工程总入口。用于在当前 RuoYi-Vue-Plus 项目中识 3. 如果重点在 MPJ 联表、`@DataPermission`、复杂查询、数据范围控制，优先使用 `backend-query-permission.md` 的规则。 4. 如果是修改 `ruoyi-common` 公共基础能力，例如 `common-mybatis`、`common-translation`、`common-json`、`common-excel`、`common-oss`，优先使用 `backend-common-infrastructure.md` 的规则。 5. 如果只要求补充或修正 JavaDoc 注释，优先使用 `backend-javadoc.md` 的规则。 -6. 如果同时要求同步前端接口或前端页面骨架，保持后端路由与 generator 风格稳定，便于前端 agent 对接。 +6. 如果同时要求同步前端接口或前端页面骨架，先确认目标前端是 Vue 还是 React，保持后端路由与 generator 风格稳定，便于前端 agent 对接。 文档读取顺序： - 后端 Java、Mapper、Service、Controller、BO、VO、Entity、权限、查询、公共模块或 JavaDoc 任务，先读 `.codex/skills/ruoyi-plus-ai-coding/references/backend.md`。 -- 同步前端 Vue、TypeScript、api、types 或页面骨架时，再读 `.codex/skills/ruoyi-plus-ai-coding/references/frontend.md`。 +- 同步前端 Vue、React、TypeScript、api、types 或页面骨架时，再读 `.codex/skills/ruoyi-plus-ai-coding/references/frontend.md`。 - 任务边界不清晰或需要标准场景示例时，再读 `.codex/skills/ruoyi-plus-ai-coding/references/examples.md`。 - 只读取当前任务相关的 reference，不一次性展开全部文档。 - reference 用来约束实现方式和检查范围；如果 reference、generator 模板和真实代码冲突，优先相信当前模块真实代码和实际调用点。 diff --git a/.codex/skills/ruoyi-plus-ai-coding/SKILL.md b/.codex/skills/ruoyi-plus-ai-coding/SKILL.md index 33ed52780..488da20ee 100644 --- a/.codex/skills/ruoyi-plus-ai-coding/SKILL.md +++ b/.codex/skills/ruoyi-plus-ai-coding/SKILL.md @@ -1,6 +1,6 @@ --- name: ruoyi-plus-ai-coding -description: 在仓库内按代码生成器模板、项目 reference 文档和既有约定生成或修改代码。用于新增或修改 CRUD 模块、controller/service/mapper/BO/VO/entity、MyBatis-Plus/MPJ 查询、数据权限、缓存、翻译/JSON 增强、公共 common 模块能力、JavaDoc 注释，以及与后端接口配套的 Vue 3 + TypeScript 页面、types 和 api 文件；触发后应先按任务类型读取对应 references，再阅读目标模块真实代码和 generator 模板。 +description: 在仓库内按代码生成器模板、项目 reference 文档和既有约定生成或修改代码。用于新增或修改 CRUD 模块、controller/service/mapper/BO/VO/entity、MyBatis-Plus/MPJ 查询、数据权限、缓存、翻译/JSON 增强、公共 common 模块能力、JavaDoc 注释，以及与后端接口配套的 Vue 或 React 前端页面、types 和 api 文件；触发后应先按任务类型读取对应 references，再阅读目标模块真实代码和 generator 模板。 --- # RuoYi Plus AI 编码规范 @@ -17,7 +17,7 @@ description: 在仓库内按代码生成器模板、项目 reference 文档和 - 修改 `ruoyi-common` 公共能力，例如 mybatis 查询构造器、translation、json enhance、excel、oss、redis、web 配置。 - 补充或修正 JavaDoc 注释，尤其是公共 API、接口、BO/VO/Entity 字段、Mapper 默认方法、Service/Controller 方法。 - 在系统、监控、工作流、demo 等模块内按现有约定扩展业务代码。 -- 为后端新增接口同步补前端 `api/types/index.vue` 骨架。 +- 为后端新增接口同步补前端 `api/types` 和 Vue `index.vue` 或 React `index.tsx` 页面骨架。 ## 不适用场景 @@ -45,7 +45,7 @@ description: 在仓库内按代码生成器模板、项目 reference 文档和 使用本 skill 时，先按任务类型读取适用 reference，不一次性展开所有文档： - 后端 Java、Mapper、Service、Controller、BO、VO、Entity、权限、查询、公共模块或 JavaDoc 任务，先读 [references/backend.md](references/backend.md)。 -- 前端 Vue、TypeScript、api、types 或页面任务，先读 [references/frontend.md](references/frontend.md)。 +- 前端 Vue、React、TypeScript、api、types 或页面任务，先读 [references/frontend.md](references/frontend.md)。 - 不确定任务边界、需要标准调用方式或需要对照典型场景时，再读 [references/examples.md](references/examples.md)。 reference 用来约束实现方式和自检范围；发生冲突时，仍以当前模块真实代码和实际调用点为准。 @@ -71,7 +71,7 @@ Java、MyBatis-Plus、BO/VO/entity、controller、mapper、service 的具体规 ## 前端规则 -Vue 3、TypeScript API 文件、生成式列表页、表单状态、字典和日期范围约定见 [references/frontend.md](references/frontend.md)。 +Vue 3、React、TypeScript API 文件、生成式列表页、表单状态、字典和日期范围约定见 [references/frontend.md](references/frontend.md)。 ## 使用案例 @@ -163,7 +163,7 @@ Vue 3、TypeScript API 文件、生成式列表页、表单状态、字典和日 - BO 使用 `@AutoMapper(target = Entity.class, reverseConvertGenerate = false)`。 - VO 使用 `@AutoMapper(target = Entity.class)`。 - 前端 API 路径与后端路由完全对应。 -- 前端列表页继续使用仓库里的 `proxy?.addDateRange`、`proxy?.$modal`、`proxy?.download`、`useDict`、`pagination` 等工具。 +- 前端列表页继续使用对应前端工程已有工具：Vue 侧如 `proxy?.addDateRange`、`proxy?.$modal`、`proxy?.download`、`useDict`、`pagination`；React 侧如 `ProTable`、`ModalForm`、`useTableSelection`、`useDateRangeQuery`、`useTableExport`。 ## 推荐提问方式 diff --git a/.codex/skills/ruoyi-plus-ai-coding/references/examples.md b/.codex/skills/ruoyi-plus-ai-coding/references/examples.md index b1bc0d22f..91b7d8fa5 100644 --- a/.codex/skills/ruoyi-plus-ai-coding/references/examples.md +++ b/.codex/skills/ruoyi-plus-ai-coding/references/examples.md @@ -62,13 +62,13 @@ ### 用户提问示例 ```text -使用 $ruoyi-plus-ai-coding 为 monitor/cache 新增一个导出接口，并同步补齐前端 api/types 调用骨架。 +使用 $ruoyi-plus-ai-coding 为 monitor/cache 新增一个导出接口，并同步补齐 Vue 或 React 前端 api/types 调用骨架。 ``` ### 期望执行方式 - 先补后端 `controller/service`。 -- 再根据后端路由补前端 `src/api` 或 generator 风格的前端骨架。 +- 再根据后端路由和目标前端类型补 `src/api` 或 generator 风格的前端骨架。 - 保证导出接口路径和前端下载调用一致。 ## 案例 6：推荐的高质量任务描述 diff --git a/.codex/skills/ruoyi-plus-ai-coding/references/frontend.md b/.codex/skills/ruoyi-plus-ai-coding/references/frontend.md index 87f8caf8d..1a3a4379c 100644 --- a/.codex/skills/ruoyi-plus-ai-coding/references/frontend.md +++ b/.codex/skills/ruoyi-plus-ai-coding/references/frontend.md @@ -6,7 +6,10 @@ - 默认 Vue 模板在 `fm/vue`，React 模板在 `fm/react` - 前端工程中与目标模块最接近的现有页面 -当前 boot4 仓库通常只含后端与 generator 前端模板；如果前端工程不在当前 root，先以 generator 模板约定为准，再对照用户提供的前端目录或相邻仓库。 +当前 boot4 仓库通常只含后端与 generator 前端模板；如果前端工程不在当前仓库根目录，先以 generator 模板约定为准，再对照用户提供的前端工程或官方前端分支： + +- Vue 前端：`https://gitee.com/JavaLionLi/plus-ui/tree/6.X-Vue` +- React 前端：`https://gitee.com/JavaLionLi/plus-ui/tree/6.X-React` ## 前端模板选择规则 @@ -17,11 +20,10 @@ ## API 文件规则 -- 从 `@/utils/request` 引入 `request`。 -- 从 `@/utils/api-types` 引入 `AxiosPromise`。 -- 从 `@/api/types` 引入 `PageResult`。 -- 从 `@/api///types` 引入本模块类型。 -- 列表接口通常返回 `AxiosPromise>`。 +- Vue 模板从 `@/utils/request` 引入 `request`，从 `@/utils/api-types` 引入 `AxiosPromise`，从 `@/api/types` 引入 `PageResult`。 +- React 模板从 `@/api/request` 引入 `request`，从 `@/api/types` 引入 `R`、`PageResult`。 +- 本模块类型：Vue 模板从 `@/api///types` 引入，React 模板从 `./types` 引入。 +- Vue 列表接口通常返回 `AxiosPromise>`；React 列表接口通常返回 `request>>(...)`。 - 常规接口命名和路由保持： `listXxx` -> `GET ///list` `getXxx` -> `GET ///{id}` @@ -38,7 +40,7 @@ - Java 数值类型通常映射为 `number`。 - Boolean 映射为 `boolean`。 - 其他生成字段默认多为 `string`。 -- 存在日期范围查询时保留 `params?: any`。 +- 存在日期范围查询时保留 `params`：Vue 模板通常是 `params?: any`，React 模板通常是 `params?: Record`。 ## Vue 页面规则 @@ -51,7 +53,19 @@ - 弹窗状态优先由 `useFormDialog` 返回的 `dialog`、`openDialog`、`showDialog`、`closeDialog` 管理。 - 表单引用通常命名为 `queryFormRef` 和 `FormRef`。 -## 页面行为规则 +## React 页面规则 + +- 使用 `index.tsx`，组件默认导出 `Page`。 +- 页面主体优先沿用 Ant Design Pro：`PageContainer`、`ProTable`、`ModalForm`、`ProColumns`、`ActionType`。 +- 表单优先使用 `Form.useForm
()`，弹窗开关优先使用 `ahooks` 的 `useBoolean`。 +- 权限通过 `useUserStore` 取 `userInfo`，再用 `hasPermi(userInfo, ['module:business:action'])` 生成 `canAdd`、`canEdit`、`canRemove`、`canExport`。 +- 表格选择使用 `useTableSelection(row => row.id)`；表格刷新使用 `actionRef.current?.reload()` 或 `reloadAndRest?.()`。 +- 字典使用 `useDict` 和 `dictOptions`，展示使用 `DictTag`。 +- 日期范围使用 `useDateRangeQuery`，在 `ProTable` 的 `request` 中由 `toPageQuery(params)` 转查询参数后再应用范围字段。 +- 导出使用 `useTableExport`，路径保持 `///export`。 +- 文件、图片、富文本组件使用 React 工程已有的 `FileUpload`、`ImageUpload`、`ImagePreview`、`RichTextEditor`。 + +## Vue 页面行为规则 - `getList` 负责通过 `withLoading` 设置 loading、处理日期范围参数、调用列表接口、回填 `rows` 和 `total`。 - `handleQuery` 通常先把 `pageNum` 重置为 `1`，再重新查询。 @@ -63,13 +77,20 @@ - `handleDelete` 使用 `modal.confirm(...)` 确认，再调用删除接口并刷新。 - `handleExport` 使用 `download as requestDownload` 从 `@/utils/request` 导出的下载方法。 +## React 页面行为规则 + +- React `ProTable` 页面通过 `request` 回调加载列表并返回 `toTableData(res)`；新增、修改、删除成功后调用 `actionRef` 刷新。 +- React 弹窗提交函数根据主键判断调用新增还是更新，成功后 `message.success('操作成功')` 并重置表单。 + ## 模板结构规则 -- 优先保持生成器的页面布局结构：搜索区卡片、表格区卡片、工具栏、分页、弹窗表单。 -- 保留 `v-hasPermi="['module:business:add']"` 这类权限指令。 -- 继续使用仓库已有组件：`right-toolbar`、`pagination`、`dict-tag`、`image-preview`、`image-upload`、`file-upload`、`editor`。 +- 优先保持生成器的页面布局结构，不在 Vue 和 React 之间互相移植组件体系。 +- Vue 保留 `v-hasPermi="['module:business:add']"` 这类权限指令。 +- Vue 继续使用仓库已有组件：`right-toolbar`、`pagination`、`dict-tag`、`image-preview`、`image-upload`、`file-upload`、`editor`。 +- React 继续使用仓库已有组件：`RowActions`、`DictTag`、`ImagePreview`、`ImageUpload`、`FileUpload`、`RichTextEditor`。 - 已有页面对时间列使用 `parseTime` 时，新页面保持一致。 -- BETWEEN 日期查询继续使用 `el-date-picker`，脚本侧通过 `useDateRangeQuery` 生成 `dateRangeXxx`、`applyXxxDateRange`、`resetXxxDateRange`。 +- Vue BETWEEN 日期查询继续使用 `el-date-picker`，脚本侧通过 `useDateRangeQuery` 生成 `dateRangeXxx`、`applyXxxDateRange`、`resetXxxDateRange`。 +- React BETWEEN 日期查询继续使用 `ProTable` 的 `dateTimeRange` 搜索列，查询侧通过 `useDateRangeQuery` 写入 `params`。 ## 避免事项 @@ -77,3 +98,4 @@ - 模块已使用字典时，不要把选项文案硬编码到页面里。 - 不要让 API 函数名和路由段偏离后端约定。 - 后端 BO/service 依赖 begin/end 参数时，不要从查询对象里删掉 `params` 和日期范围处理。 +- 不要把 Vue 的 `proxy`、`v-hasPermi`、Element Plus 组件写进 React 页面，也不要把 React 的 `ProTable`、`ModalForm`、Ant Design 权限判断写进 Vue 页面。