---
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`