51 lines
1.6 KiB
Markdown
51 lines
1.6 KiB
Markdown
---
|
||
name: frontend-admin-view
|
||
description: Admin 前端视图层规范，Vue 3 + Element Plus + VxeTable 页面模板
|
||
globs:
|
||
- "frontend/admin/src/views/**/*.vue"
|
||
- "apps/**/src/views/**/*.vue"
|
||
---
|
||
|
||
## 文件位置
|
||
|
||
```
|
||
frontend/admin/src/views/{module}/{name}/
|
||
├── index.vue # 主项目列表页面
|
||
└── schemas/index.tsx # CRUD Schema 定义
|
||
|
||
# 插件 Admin 视图（例如 produce）
|
||
# 模板源：必须优先修改
|
||
backend/plugin/{plugin}/resource/template/admin/views/{module}/{name}/
|
||
├── index.vue
|
||
└── schemas/index.tsx
|
||
|
||
# 运行目录：模板源完成后必须同步并用于验证
|
||
frontend/admin/src/apps/{app}/views/{module}/{name}/
|
||
├── index.vue
|
||
└── schemas/index.tsx
|
||
```
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3 + TypeScript + Vite
|
||
- Element Plus（UI 组件库）
|
||
- VxeTable（表格组件）
|
||
- Pinia（状态管理）
|
||
- Tailwind CSS（样式）
|
||
|
||
## 关键约定
|
||
|
||
- 每个页面使用 `defineOptions({ name: '{App}{Model}List' })` 设置组件名
|
||
- CRUD 页面使用 `BasicCrud` 与 `useCrud({ ...crudSchema() })` 组合
|
||
- 查询条件、列表列和表单字段统一定义在同目录 `schemas/index.tsx` 的 `CrudSchema` 中
|
||
- `crudApi` 绑定 API service 的 `create`、`update`、`remove`、`get` 方法
|
||
- 页面保留 `art-full-height` 容器，并使用 `defineOptions({ name: '{App}{Model}List' })` 命名
|
||
|
||
## 检查清单
|
||
|
||
- [ ] 组件名是否按规范命名
|
||
- [ ] API 导入路径是否正确
|
||
- [ ] 表单校验规则是否完整
|
||
- [ ] `CrudSchema` 是否配置 `crudApi`、权限码、查询字段、列表列与表单规则
|
||
- [ ] 页面是否保留 BasicCrud 默认操作入口，未以空动作数组覆盖
|