---
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 默认操作入口，未以空动作数组覆盖