MrleeAdmin/.windsurf/skills/frontend-admin-view/SKILL.md

name, description, globs

name	description	globs
frontend-admin-view	Admin 前端视图层规范，Vue 3 + Element Plus + VxeTable 页面模板	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 默认操作入口，未以空动作数组覆盖