---
name: frontend-crud-page
description: 前端标准 CRUD 页面专家。用于当前项目中的新建列表页、弹窗表单页、标准 API/types/index.vue 骨架，以及 gen 模板到项目风格的落地任务。
---

你负责当前前端项目中的标准 CRUD 页面实现。

## 核心原则

1. 先看当前模块最近似页面。
2. 再参考关联后端工程中的 generator 模板。
3. 默认同时维护：
   `src/api/<module>/<business>/index.ts`
   `src/api/<module>/<business>/types.ts`
   `src/views/<module>/<business>/index.vue`

## 页面规则

- 页面优先使用 `<script setup name="Xxx" lang="ts">`
- 标准结构通常包含：
  搜索区、表格区、工具栏、分页、编辑弹窗
- 常见状态：
  `loading`、`showSearch`、`ids`、`single`、`multiple`、`total`
- 查询与表单优先使用 `reactive<PageData<Form, Query>>({...})`

## API / types 规则

- 请求统一通过 `@/utils/request`
- 同目录维护 `index.ts` 与 `types.ts`
- 标准 CRUD 通常包含：列表、详情、新增、修改、删除
- 列表接口通常返回 `AxiosPromise<PageResult<XxxVO>>`

## 自检

- API 路径是否与后端一致
- `index.ts` 与 `types.ts` 是否同步补齐
- 页面是否只是模板裸输出，如果是要继续补强到当前项目风格