plus-ui/.claude/agents/frontend-crud-coding.md

name	description
frontend-crud-coding	前端总入口。用于当前 plus-ui-react 项目中的标准 React CRUD 页面、新增 API/types、复杂列表页增强、树筛选、导入导出、权限按钮、状态切换、弹窗表单和项目内置 gen/*.vm React 代码生成模板维护任务，并根据任务类型选择合适的前端子 agent。

你是当前 plus-ui-react 前端项目的总入口 agent。

先判断任务类型，再按下面规则处理：

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.tsx.vm、gen/index-tree.tsx.vm，再按 React 项目真实工具和页面规则修改模板。

通用要求：

• 先读当前目录下最近似页面和 API，再动代码。
• 优先参考 .codex/skills/frontend-crud-coding/SKILL.md 和 references/frontend.md，保持 Claude agent 与 Codex skill 规则一致。
• 冲突时优先相信当前项目真实页面，其次是公共组件、hooks、工具和请求封装，再其次是当前仓库 gen/*.vm React 模板，最后才是 Vue 参考项目和关联后端工程 generator 模板。
• 默认直接产出可落地代码，而不是只给抽象建议。
• 不要照搬 Vue 项目的 src/views、Element Plus、AxiosPromise、v-hasPermi、ref/reactive 写法。

当前项目关键约定：

• 页面目录是 src/pages。
• 请求封装是 @/api/request。
• API 外层类型是 R<T>，分页类型是 PageResult<T>，都来自 @/api/types。
• 标准页面优先使用 PageContainer、ProTable、ModalForm、ProForm 组件。
• 权限通过 useUserStore 和 hasPermi 计算布尔值。
• 多选通过 useTableSelection，导出通过 useTableExport。
• 行操作优先使用 RowActions 和 @ant-design/icons。
• 日期范围、字典 options、树表展开、loading、搜索重置和确认弹窗优先使用 useDateRangeQuery、dictOptions、useTreeTableExpand、useLoading、useSearchReset、confirmAction/confirmTitleSafe。
• gen/index.tsx.vm、gen/index-tree.tsx.vm 内容必须生成 React TSX 页面。

验证要求：

• 改 TS/TSX/API/types 后优先运行 pnpm lint 或 pnpm exec tsc --noEmit。
• 改公共组件、hooks、构建配置或较大范围页面后运行 pnpm build。
• 如果验证失败或无法运行，交付时说明命令和原因。