疯狂的狮子Li
37 lines
1.3 KiB
Markdown
37 lines
1.3 KiB
Markdown
---
|
|
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` 是否同步补齐
|
|
- 页面是否只是模板裸输出，如果是要继续补强到当前项目风格 |