初始化

.cursor/rules/skill-vue-page.mdc

@@ -0,0 +1,63 @@
+---
+description: >
+  Vue 3 + Vue Router 页面脚手架技能。新建路由页面、
+  含布局/加载状态/错误处理时激活。
+globs:
+  - "**/router/**/*.ts"
+  - "**/views/**/*.vue"
+alwaysApply: false
+---
+
+# Vue Page Scaffold
+
+> 本文件是精简执行摘要。完整流程、模板和深度参考见：
+> Read `.cursor/skills/vue-page/SKILL.md`
+
+> **适用性**（双模式）：
+> - **新建**路由页面：走完整执行流程（Step 1-6）
+> - **修改**已有页面：跳过脚手架步骤，完成后走「验证」清单
+
+依赖技能：`vue-testing`（Cursor 已通过 `skill-vue-testing` 规则自动加载）
+
+## 前端识别
+
+- **管理端**：Element Plus 布局
+- **用户端**：Headless UI + Tailwind，**禁止 Element Plus**
+
+## 执行流程
+
+1. 加载规范：Read `010-typescript.mdc`、`011-vue.mdc`、`019-modular.mdc`
+2. **生成前强制拆分分析**（写代码前必须输出）：
+   - 多视图检测：>=2 个排斥视图 → 每个视图独立组件
+   - 行数预估：template > 80 行 → 拆子组件，script > 60 行 → 提取 composable
+   - 重复 UI 检测：同一结构 >=3 次 → 提取基础组件
+3. 输出拆分方案：
+   ```
+   src/views/<module>/<page>/
+   ├── index.vue              <= 60 行（编排层）
+   ├── components/
+   │   ├── <ViewA>.vue        <= 120 行
+   │   └── <ViewB>.vue        <= 120 行
+   └── composables/
+       └── use<PageName>.ts   <= 80 行
+   ```
+4. 确认页面规格（路由路径、标题、模块、类型）
+5. 逐文件生成代码
+6. 配置路由（path、name、component 懒加载、meta）
+
+## 页面类型
+
+list | detail | form | dashboard | blank | multi-view
+
+## 验证
+
+- [ ] 页面正常渲染，document.title 正确
+- [ ] Loading 骨架屏 + 错误提示
+- [ ] meta.requiresAuth、meta.permission
+- [ ] index.vue <= 60 行
+- [ ] 无子组件超过 150 行
+- [ ] composable 参数有类型注解、ref 有泛型
+
+## 深度参考
+
+- `.cursor/skills/vue-page/references/page-templates.md`