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

name, description, globs

name	description	globs
frontend-web-view	Web 前台页面规范（Nuxt 4），页面文件组织与组件使用	frontend/web/app/pages/**/*.vue frontend/web/app/apps/**/pages/**/*.vue

文件位置

主站页面：

frontend/web/app/pages/{module}/
├── index.vue          # 列表/首页
├── [id].vue           # 详情页
└── create.vue         # 创建页

插件页面：

backend/plugin/{plugin}/resource/template/web/pages/{module}/{name}/
frontend/web/app/apps/{plugin}/pages/{module}/{name}/

插件开发必须先修改模板源，再同步到前端运行目录，并核对两者实现一致。

技术栈

• Vue 3 + Nuxt 4
• Element Plus
• Pinia
• UnoCSS

关键约定

• 页面使用 Nuxt 文件路由（pages/ 目录自动生成路由）
• 动态路由使用 [param].vue 命名
• 布局文件使用 layouts/ 目录
• 组件使用 components/ 目录，自动全局注册

检查清单

• 页面文件命名是否符合 Nuxt 文件路由规范
• 是否使用了正确的布局
• API 调用是否通过 composable 封装