@qilitt-mickey/vue3-temp-skill 1.1.25 → 1.1.27

package/SKILL.md

@@ -7,7 +7,25 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 
 # Vue 3 项目开发规范技能包
 
-执行顺序：命中模块 → 读 `core-kernel` → 读命中 `references/<模块>.md` → 生成 → 执行 `code-quality` → 回复含审查结果块。
+执行顺序：运行 `python scripts/match.py "<需求>"` 获取精确匹配 → 按 `load_files` 读参考文件 → 生成 → 按 `quality_gates` 检查 → 执行 `code-quality` → 回复含审查结果块。
+
+> **模块路由优先用脚本**：`python scripts/match.py "需求描述"` 输出 JSON，含命中模块、同批加载、闸门项、加载文件清单。AI 按此结果加载文件，不自行推理匹配。无 Python 环境时回退至下方路由表手动匹配。
+
+### 脚本工具
+
+| 命令 | 用途 |
+|------|------|
+| `python scripts/match.py "<需求>"` | **运行时匹配器**（AI 调用）：输出命中模块、同批加载、闸门项、文件清单 |
+| `python scripts/match.py --batch` | 批量测试 15 个典型场景 |
+| `npm run check` | **发布前全量检查**（5 项任一失败即中断） |
+| `npm run validate` | 结构校验：frontmatter、路由表一致性、孤立模块、交叉引用 |
+| `npm run audit` | 命中精度审计：关键词重叠、盲区、模块评分、边界冲突 |
+| `npm run content` | 内容可用性审计：样板完整性、Must-do 清单 |
+| `npm run deps` | 依赖图分析：断链、循环依赖、引用热度 |
+| `npm run match:batch` | 批量测试（npm 封装） |
+| `node scripts/cli.mjs --list` | 列出所有可用命令 |
+
+> `npm run release` 会自动先执行全量检查，通过后才升版本、提交、发布。
 
 ## 术语约定
 
@@ -29,7 +47,8 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 - **精简出厂**：模板 `views/` 仅保留登录/首页等壳页面；**业务标准样板**在本包 `references/`（如 `crud-pages`、`detail-page`）
 - **依赖分层**：`package.json` 仅 **core**；**addon** 默认不装；缺包时装依赖后须按 `addon-enable.md` **逐文件恢复配置**（非自动）
 - 壳层行为（顶部 tag / 侧栏 / keep-alive / `useDetail`）以**当前项目**已有实现为准
-- **双轨**：无设计 handoff → 保持模版出厂；有设计落地 → 读 `design-handoff.md` 逐文件修改清单 + 设计 Skill `project-implementation-protocol.md`
+- **双轨**：无设计 handoff → 保持模版出厂；有设计落地 → 读 `design-handoff.md` 逐文件修改清单（含 1:1 还原要求 F1-F14 / P1-P7）
+- **设计优先级**：当设计技能产出（`design-handoff/v1` JSON）存在时，视觉层面（布局/间距/圆角/阴影/色彩/组件结构）以设计技能产出为准，本技能出厂默认值按设计产出替换。详见下方「设计优先级与 handoff 强制执行」段
 
 ## 使用方式
 
@@ -55,6 +74,10 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 3. **Hook ≠ 壳层自动**：`toDetail` 写 tag；侧栏高亮 / keepAlive 靠路由 meta；`http` 加解密靠环境开关，不靠单请求配置
 4. **大范围交付仍须逐模块核对硬失败表**，禁止以 lint 通过代替硬失败表逐项核对
 
+## 设计落地（handoff）
+
+当会话中存在 `design-handoff/v1` JSON 时，**强制加载** `references/design-handoff.md`，按 C/T/F/S/P 五步全流程执行（配置→令牌→框架→样式→页面），**任一步跳过 = 硬失败**。设计产出优先级高于本技能出厂默认值，页面保留业务逻辑、重写视觉结构。完整规则与逐项清单见 `design-handoff.md`。
+
 ## 模块路由表
 
 ### 始终加载
@@ -71,51 +94,53 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 | **启用精简模板已删的 addon（装包 + 改配置）** | `references/addon-enable.md`（与功能模块同读） |
 | 写完代码后（闸门，非功能命中） | `references/code-quality.md` |
 | 设计交接块 / **design-handoff/v1 JSON** / 上游令牌产出落地 | `references/design-handoff.md`（逐文件修改清单）+ `design-system.md`（项目设计系统说明） |
-| **设计模式**（设计 Skill 产出存在时触发） | `crud-pages.md` 设计模式样板 + 设计 Skill `project-implementation-protocol.md`（1:1 还原协议） |
+| **设计模式**（设计 Skill 产出存在时触发） | `crud-pages.md` 设计模式样板 + `design-handoff.md` 1:1 还原要求（F1-F14 / P1-P7） |
 
 ### 标准业务面
 
 | 模块 | 关键词 |
 |------|--------|
-| **http-api** | 接口、http、加密、API |
-| **crud-pages** | 列表、表格、查询、管理、CRUD、新增编辑、操作列、行操作 |
-| **detail-page** | 详情、编辑页、查看页、新开路由、toDetail、activePath、showLink、顶部 tag |
-| **data-writeback** | 回显、回填、useFormCheck |
-| **permission-auth** | 权限、v-auth、roles、ReAuth |
-| **layout-theme** | 布局、主题、暗黑、`--vts-*`、UnoCSS |
+| **http-api** | 接口、http、加密、API、请求、响应、axios |
+| **crud-pages** | 列表、表格、查询、管理、CRUD、新增、行编辑、操作列、行操作、分页、筛选、批量、排序 |
+| **detail-page** | 详情、编辑页、查看页、新开路由、toDetail、activePath、showLink、顶部 tag、跳转 |
+| **data-writeback** | 回显、回填、回写、useFormCheck、编辑数据 |
+| **permission-auth** | 权限、v-auth、roles、ReAuth、按钮权限、页面权限、角色可见 |
+| **layout-theme** | 布局、主题、暗黑、`--vts-*`、UnoCSS、夜间模式、换肤、侧栏、标签页、面包屑 |
 | **design-system** | 设计规范、UI 规范、按 XX 规范适配、design-tokens、主题色系、令牌体系、暗色模式 |
-| **icons** | 图标、svg-icon、Iconify、ReIconPicker、菜单图标 |
-| **feedback-loading** | message、loading、确认框 |
-| **base-code-dict** | 字典、baseCode、码表 |
-| **api-check** | 联调、mock、契约、对接后端 |
+| **icons** | 图标、svg-icon、Iconify、ReIconPicker、菜单图标、icon |
+| **feedback-loading** | message、loading、确认框、提示、加载、操作反馈、骨架屏 |
+| **base-code-dict** | 字典、baseCode、码表、下拉字典、数据字典 |
+| **api-check** | 联调、mock、契约、对接后端、接口核对 |
+| **i18n-localization** | 国际化、多语言、i18n、vue-i18n、locale、语言切换、语言包、useI18n、ReLanguageSwitch |
+| **auth-pages** | 登录、注册、忘记密码、重置密码、认证、auth、login、register、signup、forgot-password、找回密码（**设计自由，仅规范流程**） |
 | **ui-components** | 新建 Re*、type.ts、组件目录；**用法见各功能模块**（本文件仅索引） |
 
 ### 专项能力包
 
 | 模块 | 关键词 |
 |------|--------|
-| **tree-table** | 树表、ReTreeLine、handleTree |
-| **table-vxe** | vxe、高性能表格 |
-| **form-advanced** | 弹窗、ReDialog、ReDialogResize、锚点、卡片选择、地址解析、ReSelectQuery、级联 |
-| **data-compare** | v-compare、变更汇总 |
-| **file-management** | 附件、ReAttachment、ReFileViewer、预览、上传 |
-| **download-export** | 导出、excel、blob、下载文件 |
-| **rich-text** | 富文本、wangeditor、ReRichText |
-| **chart-echarts** | echarts、图表、ReEchart |
-| **data-screen** | 大屏、dataScreen |
-| **graph-relation** | 图谱、relation-graph |
-| **workflow-bpmn** | bpmn、流程审批 |
-| **flowchart-g6** | g6、流程图 |
-| **data-mapping** | jsplumb、字段映射 |
-| **websocket-realtime** | websocket、ws、实时 |
-| **mobile-h5** | 移动端、H5、vant、vconsole |
-| **wechat-js** | 微信、weixin、wechat |
-| **verify-captcha** | 验证码、滑块、短信 |
-| **qrcode-barcode** | 二维码、条形码 |
-| **feedback-ui** | 通知栏、水印、时间轴、打字机 |
-| **seamless-scroll** | 无缝滚动、跑马灯 |
-| **particles** | 粒子、tsparticles、登录背景粒子 |
-| **directives-advanced** | 一键复制、标题字号自适应 → `v-copy` / `v-auto-font` |
+| **tree-table** | 树表、ReTreeLine、handleTree、树形、树状、层级表格、组织架构、部门树 |
+| **table-vxe** | vxe、高性能表格、虚拟滚动、虚拟表格、大数据表格、单元格编辑 |
+| **form-advanced** | 弹窗、对话框、抽屉、ReDialog、ReDialogResize、锚点、卡片选择、地址解析、ReSelectQuery、级联、远程搜索、下拉选择、高级表单、步骤条、折叠面板、穿梭框、分步表单、联动、动态表单、日历、时间选择、日期选择、拖动、拖拽排序 |
+| **data-compare** | v-compare、变更汇总、变更对比、数据对比、字段对比、高亮变更 |
+| **file-management** | 附件、ReAttachment、ReFileViewer、预览、上传、文件上传、图片上传、断点续传、分片上传、打印、截图、视频播放、音频 |
+| **download-export** | 导出、excel、blob、下载文件、下载、导出Excel |
+| **rich-text** | 富文本、wangeditor、ReRichText、编辑器、Markdown |
+| **chart-echarts** | echarts、图表、ReEchart、折线图、柱状图、饼图、统计图、雷达图、散点图、热力图、趋势图、地图、甘特图 |
+| **data-screen** | 大屏、dataScreen、数据大屏、看板、数据看板、仪表盘、全屏可视化 |
+| **graph-relation** | 图谱、relation-graph、关系图、知识图谱、关系网络 |
+| **workflow-bpmn** | bpmn、流程审批、审批流、工作流、审批流程 |
+| **flowchart-g6** | g6、流程图、拓扑图、antv、自定义流程图、流程设计 |
+| **data-mapping** | jsplumb、字段映射、连线映射、数据映射 |
+| **websocket-realtime** | websocket、ws、实时、消息推送、实时推送、在线状态 |
+| **mobile-h5** | 移动端、H5、vant、vconsole、手机 |
+| **wechat-js** | 微信、weixin、wechat、js-sdk |
+| **verify-captcha** | 验证码、滑块、短信验证、拖拽验证、图片验证码 |
+| **qrcode-barcode** | 二维码、条形码、扫码 |
+| **feedback-ui** | 通知栏、水印、时间轴、打字机、展示组件、空状态 |
+| **seamless-scroll** | 无缝滚动、跑马灯、marquee、滚动公告 |
+| **particles** | 粒子、tsparticles、登录背景粒子、粒子动画 |
+| **directives-advanced** | 一键复制、复制、标题字号自适应、字号自适应 → `v-copy` / `v-auto-font` |
 
 ### 匹配规则
 
@@ -125,16 +150,36 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 4. 默认不改 `vite.config.ts` / `build/**`；**例外**：按 `addon-enable.md` 恢复 FileViewer / VantResolver / Vconsole 等占位插件时允许改 `build/plugins/*`
 5. 效果匹配：
    - 启用 echarts / vant / file-viewer / 富文本等已删 addon → 功能模块 + **`addon-enable`**
-   - 弹窗 → `form-advanced`
+   - 弹窗、对话框、抽屉 → `form-advanced`
+   - 远程搜索下拉、级联选择 → `form-advanced`
+   - 步骤条、分步表单、穿梭框、折叠面板、动态表单 → `form-advanced`
+   - 日历、时间选择、日期选择、联动 → `form-advanced`
    - 点一下复制 → `directives-advanced`（`v-copy`）
    - 标题字跟着宽度变小 → `directives-advanced`（`v-auto-font`）
-   - 角色可见 → `permission-auth`
-   - 变更汇总 → `data-compare`
-   - 导出 Excel → `download-export`
+   - 角色可见、按钮权限 → `permission-auth`
+   - 变更对比、数据对比 → `data-compare`
+   - 导出、下载文件 → `download-export`
    - 菜单/本地图标 → `icons`
    - 粒子背景 → `particles`
-   - 按 XX / UI 规范适配、设计交接块、整站风格重构 → `design-system`（项目设计系统说明）+ `layout-theme`；有令牌/交接产出时加读 `design-handoff.md`（逐文件修改清单）+ 设计 Skill `project-implementation-protocol.md`
+   - 树形列表、层级表格、组织架构、部门树 → `tree-table`
+   - 虚拟滚动、大数据表格 → `table-vxe`
+   - 骨架屏 → `feedback-loading`
+   - 空状态 → `feedback-ui`
+   - 标签页、面包屑 → `layout-theme`
+   - 批量操作、表格排序 → `crud-pages`
+   - 趋势图、地图、甘特图 → `chart-echarts`
+   - 附件上传、断点续传 → `file-management`
+   - 按 XX / UI 规范适配、设计交接块、整站风格重构 → `design-system`（项目设计系统说明）+ `layout-theme`；有令牌/交接产出时加读 `design-handoff.md`（逐文件修改清单，含 1:1 还原 F1-F14 / P1-P7）
    - 列表→独立详情/编辑页 → `crud-pages` + `detail-page`
+   - 图表（折线/柱状/饼图） → `chart-echarts`
+   - 数据大屏、看板 → `data-screen`
+   - 实时推送、在线状态 → `websocket-realtime`
+   - BPMN 流程、审批、工作流 → `workflow-bpmn`
+   - 自定义流程图、流程设计、拓扑 → `flowchart-g6`
+   - 国际化、多语言、i18n、语言切换 → `i18n-localization`
+   - 注册、忘记密码、重置密码、认证 → `auth-pages`（设计自由，仅规范流程；含验证码 → `verify-captcha`）
+   - 打印、截图 → `file-management`（ReFileViewer）
+   - 视频播放、音频 → `file-management`（ReFileViewer 文件预览）
 6. 独立详情路由：跳转与 meta 见 `detail-page`（`toDetail` / `showLink` / `activePath` / `initToDetail`）
 
 ## 速查约定（细则见对应模块）
@@ -148,11 +193,11 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 ## 工作流
 
 1. **需求分析**：列出功能模块 ID（不含 `code-quality`）
-2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；设计规范/交接产出时加读 `design-handoff`（逐文件修改清单）+ 设计 Skill `project-implementation-protocol.md`
+2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；**检测 design-handoff/v1 JSON 是否存在** — 若存在，强制加载 `design-handoff`（逐文件修改清单，含 C/T/F/S/P 全流程）+ `design-system.md`，并按设计产出优先级执行
 3. **依赖**：缺包按 inventory 第九节精确版本，确认后安装；**再按 `addon-enable` 对应章节改配置**
 4. **探查**：复用仓库 `Re*` / Hook / utils
-5. **生成**：可运行代码落盘
-6. **code-quality**：按 `references/code-quality.md` 执行
+5. **生成**：可运行代码落盘；**有 handoff JSON 时，页面结构以设计输出为准，保留业务逻辑**
+6. **code-quality**：按 `references/code-quality.md` 执行；**有 handoff JSON 时，额外执行 handoff 落地完整性校验**（见 `design-handoff.md` 末尾）
 7. **输出**：变更说明（含已改配置文件列表）+ 待确认项
 
 ### 最终回复结构
@@ -165,11 +210,13 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 - 闸门：已执行 code-quality（生成后）
 - 清单：选型 / 类型 / 组件 / API / 安全 / 业务 / 列表→详情(如适用) / 列表布局(如适用) / 风格 / addon启用(如适用) → 通过 | 已修正：…
 - 硬失败：无 | 已拦截并修正：…
+- handoff 落地（如有 JSON）：C/T/F/S/P 全流程已执行 → 通过 | 未完成项：…（硬失败）
 - 命令：`pnpm lint:fix` → …；`pnpm type-check` → …
 - 待确认：…
 
 ## 变更说明
 - …
+- 移除/新增元素（如有 handoff）：按设计输出移除了…/新增了…（供用户确认）
 ```
 
 ## 文件索引

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qilitt-mickey/vue3-temp-skill",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "description": "Vue 3 企业级中后台项目开发规范技能包 — core-kernel 架构、按需功能模块",
   "bin": {
     "vue3-temp-skill": "./bin/cli.js"
@@ -12,6 +12,7 @@
   "files": [
     "bin/",
     "references/",
+    "scripts/",
     "SKILL.md",
     "README.md"
   ],
@@ -22,6 +23,19 @@
     "release": "node release.js",
     "release:minor": "node release.js minor",
     "release:major": "node release.js major",
+    "check": "scripts\\check.cmd",
+    "prepack": "scripts\\check.cmd",
+    "validate": "node scripts/validate.mjs",
+    "audit": "node scripts/ai-match-audit.mjs",
+    "content": "node scripts/ai-content-audit.mjs",
+    "deps": "node scripts/analyze-deps.mjs",
+    "deps:hot": "node scripts/analyze-deps.mjs --hot",
+    "deps:mermaid": "node scripts/analyze-deps.mjs --mermaid",
+    "match": "python scripts/match.py",
+    "match:batch": "python scripts/match.py --batch",
+    "gen:index": "node scripts/generate-index.mjs",
+    "gen:index:write": "node scripts/generate-index.mjs --write",
+    "scaffold": "node scripts/scaffold-module.mjs",
     "postpublish": "echo 'Published @qilitt-mickey/vue3-temp-skill to npmjs.org'"
   },
   "keywords": [

package/references/auth-pages.md

@@ -0,0 +1,217 @@
+---
+skill: auth-pages
+description: 登录/注册/忘记密码认证流程、API 模式、userStore 集成、路由配置
+scope: project
+tags: [登录, 注册, 忘记密码, 重置密码, 认证, auth, login, register, signup, forgot-password, 找回密码]
+---
+
+# 认证流程规范（登录 / 注册 / 忘记密码）
+
+> **页面设计自由**：认证页面的视觉布局、交互形式、背景效果均由设计主导，本模块仅规范**认证流程、API 模式、Store 集成、路由配置**。勿将此处代码片段当作页面样板整段抄录，仅提取流程模式。
+>
+> **验证码/滑块组件**：见 `verify-captcha` 模块（ReVerify 滑块拼图、ReDragVerify 拖拽验证、ReImageVerify 图片验证码、ReSmsCode 短信倒计时）。本模块不重复其用法。
+
+## 涉及文件
+
+```
+src/
+├── api/login/index.ts          # 认证 API（按后端实际接口调整字段）
+├── store/modules/user.ts       # useUserStore：login()、logOut()、token 管理
+├── views/login/                # 登录页（设计自由，仅流程受规范）
+├── utils/rule.ts               # 表单校验规则
+└── router/                     # 认证页路由（showLink:false）
+```
+
+## API 模式
+
+> 字段名和接口路径按后端实际定义，以下仅展示结构模式。**勿将字段当作硬约束**。
+
+```typescript
+// src/api/login/index.ts
+import { http } from '@/utils/http'
+
+// 接口参数类型 — 字段按后端实际定义
+interface LoginParams {
+  [key: string]: any  // 常见：账号、密码、验证码等，字段名不固定
+}
+
+// 登录返回 — 结构按后端实际返回
+interface LoginResult {
+  [key: string]: any  // 常见：token、用户信息等，字段名不固定
+}
+
+/** 登录 */
+export const getLogin = (data: LoginParams) => {
+  return http.request<Result<LoginResult>>('post', '/auth/login', { data })
+}
+
+/** 发送短信验证码 */
+export const sendSmsCode = (params: Record<string, any>) => {
+  return http.request<Result<null>>('post', '/auth/sms-code', { data: params })
+}
+
+// 注册/忘记密码 API 按需新增，遵循同一模式：
+// 1. 参数类型用 interface 声明，字段按后端定义
+// 2. 返回值用 Result<T> 包裹
+// 3. 方法名语义化（getRegister、sendResetLink、resetPassword）
+```
+
+## 认证流程模式
+
+> 无论页面长什么样，认证流程必须遵循以下链路。
+
+```
+用户输入 → 表单校验 → [验证码校验] → 调用 API → useUserStore 处理 token → initRouter → 跳转首页
+```
+
+### 1. Store 集成
+
+```typescript
+// store/modules/user.ts — 认证状态管理
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    token: '',
+    userInfo: null as any,
+  }),
+  actions: {
+    // 登录：调用 API → 存 token → 返回结果
+    async login(data: Record<string, any>) {
+      const res = await getLogin(data)
+      if (res.status === 200 && res.data) {
+        // token 存储方式按项目实际（localStorage / cookie / pinia 持久化）
+        this.token = res.data.accessToken ?? ''
+        // 用户信息按后端返回结构存储
+        this.userInfo = res.data
+      }
+      return res
+    },
+    // 退出
+    logOut() {
+      this.token = ''
+      this.userInfo = null
+      // 清除存储、跳转登录
+    },
+  },
+})
+```
+
+### 2. 登录流程
+
+```typescript
+// 登录页脚本 — 仅展示流程，页面模板设计自由
+import { useUserStoreHook } from '@/store/modules/user'
+import { getTopMenu, initRouter } from '@/utils/router'
+
+const useUserStore = useUserStoreHook()
+const router = useRouter()
+const loading = ref(false)
+
+async function handleLogin(formData: Record<string, any>) {
+  loading.value = true
+  try {
+    const res = await useUserStore.login(formData)
+    if (res.status === 200) {
+      // 初始化路由（动态路由/权限路由）
+      await initRouter(router)
+      // 跳转到首页或来源页
+      router.push(getTopMenu().path)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+```
+
+### 3. 注册流程
+
+```typescript
+// 注册页脚本 — 仅展示流程
+import { getRegister } from '@/api/login'
+
+async function handleRegister(formData: Record<string, any>) {
+  loading.value = true
+  try {
+    const res = await getRegister(formData)
+    if (res.status === 200) {
+      // 注册成功 → 跳转登录或自动登录
+      router.push('/login')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+```
+
+### 4. 忘记密码流程
+
+```typescript
+// 忘记密码 — 分步流程，页面交互设计自由
+const step = ref(1) // 步骤数按实际流程定
+
+// 步骤 1：验证身份 → 发送重置凭证
+async function handleSendReset(account: string) { /* 调用 API */ }
+
+// 步骤 2：重置密码
+async function handleReset(formData: Record<string, any>) { /* 调用 API */ }
+
+// 步骤 3：完成 → 跳转登录
+function handleDone() {
+  router.push('/login')
+}
+```
+
+## 路由配置
+
+```typescript
+// 认证页路由统一约定
+{
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+    showLink: false,       // 不在菜单显示
+    activePath: '/login',  // 高亮路径
+  },
+}
+// 注册/忘记密码页同理：showLink: false + activePath
+```
+
+## 表单校验模式
+
+> 校验规则按业务实际调整，以下为常见模式。
+
+```typescript
+import { loginRules } from '@/utils/rule'
+
+// 必填校验
+const rules = {
+  // 字段名按表单实际定义，不固定
+  account: [{ required: true, message: $t('请输入账号'), trigger: 'blur' }],
+  password: [{ required: true, message: $t('请输入密码'), trigger: 'blur' }],
+}
+
+// 密码确认校验（注册/重置密码场景）
+const confirmPasswordRule = {
+  validator: (rule: any, value: string, callback: any) => {
+    if (value !== formData.password) {
+      callback(new Error($t('两次密码不一致')))
+    } else {
+      callback()
+    }
+  },
+  trigger: 'blur',
+}
+```
+
+## Must-do 清单
+
+1. **认证流程链路**：`API → useUserStore.login() → initRouter() → 跳转`，勿另起流程
+2. **页面设计自由**：布局、背景、交互形式由设计主导，本模块不约束视觉
+3. **API 字段动态**：参数和返回值字段按后端实际定义，勿硬编码字段名
+4. **验证码组件**：见 `verify-captcha` 模块，不在本模块重复
+5. **路由约定**：认证页 `showLink: false` 不在菜单显示，`activePath` 指向自身
+6. **路由白名单**：登录/注册/忘记密码页在路由守卫白名单中，无需 token
+7. **国际化**：所有提示文案用 `$t()` 包裹
+8. **密码确认**：注册和重置密码须有确认密码字段 + 自定义校验
+9. **loading 状态**：提交期间禁用按钮，防止重复提交

package/references/base-code-dict.md

@@ -1,3 +1,10 @@
+---
+skill: base-code-dict
+description: 基础代码字典获取、缓存、useApp().baseCodeGet、filterValue
+scope: project
+tags: [字典, baseCode, 码表, 下拉字典, 数据字典]
+---
+
 # 基础代码（字典）
 
 > 按本文件示例编写，复用 `useApp().baseCodeGet` / `filterValue` 等已有码表能力，勿另起一套字典请求与缓存。

package/references/chart-echarts.md

@@ -2,7 +2,7 @@
 skill: chart-echarts
 description: ECharts 图表与 ReEchart 封装。词云等扩展按项目依赖。
 scope: project
-tags: [echarts, ReEchart, chart, wordcloud]
+tags: [echarts, ReEchart, chart, wordcloud, 折线图, 柱状图, 饼图, 统计图, 雷达图, 散点图, 热力图, 趋势图, 地图, 甘特图, K线图]
 ---
 
 # 图表（ECharts）

package/references/crud-pages.md

@@ -2,7 +2,7 @@
 skill: crud-pages
 description: 查询列表页、表单页、标准 CRUD。含 useTableSearch、列表标准样板、表单约定。
 scope: project
-tags: [vue3, crud, list, form, detail, table, useTableSearch, page, layout]
+tags: [vue3, crud, list, form, detail, table, useTableSearch, page, layout, 批量, 排序, 批量操作]
 ---
 
 # CRUD 页面开发规范

package/references/data-compare.md

@@ -1,3 +1,10 @@
+---
+skill: data-compare
+description: 编辑页数据变更对比：v-compare、compareStore、ChangeSummaryService
+scope: project
+tags: [v-compare, 变更汇总, 变更对比, 数据对比, 字段对比, 高亮变更]
+---
+
 # 数据变更对比
 
 > 按本文件示例编写，复用 `v-compare` / `compareStore` / `ChangeSummaryService` 等已有能力，勿另起一套对比实现。

package/references/data-mapping.md

@@ -1,3 +1,10 @@
+---
+skill: data-mapping
+description: jsplumb 数据映射页面结构和连线初始化
+scope: project
+tags: [jsplumb, 字段映射, 连线映射, 数据映射]
+---
+
 # JsPlumb 数据映射
 
 > 按本文件示例编写；必须使用选型表中的 `jsplumb`（见 project-inventory），勿改用同类其他连线库；新依赖须待确认。

package/references/data-screen.md

@@ -1,3 +1,10 @@
+---
+skill: data-screen
+description: 大屏等比缩放、1920x1080 设计稿、transform: scale()、grid-layout-plus
+scope: project
+tags: [大屏, dataScreen, 数据大屏, 看板, 数据看板, 仪表盘, 全屏可视化]
+---
+
 # 数据大屏
 
 > 按本文件示例编写，复用项目已有布局与图表封装；缩放/适配按本规范实现，勿另起一套大屏方案。

package/references/data-writeback.md

@@ -1,3 +1,10 @@
+---
+skill: data-writeback
+description: 编辑回显用 Object.assign(formData, res.data) 避免破坏响应式
+scope: project
+tags: [回显, 回填, 回写, useFormCheck, Object.assign, 编辑数据]
+---
+
 # 数据回写与编辑
 
 > 按本文件示例编写，复用项目已有回显/回填约定与选择器回写方式，勿另起一套表单赋值实现。

package/references/design-handoff.md

@@ -11,7 +11,7 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 > 每一项标注：JSON 来源 → 项目文件 → 修改内容 → 验证点。
 > 模板源码保持出厂状态，所有修改在 AI 生成/修改代码时完成。
 >
-> 1:1 还原要求见设计 Skill 的 `project-implementation-protocol.md`。
+> 1:1 还原要求见下方 F1-F14（框架组件）和 P1-P7（页面代码）步骤。
 
 ## 双轨
 
@@ -20,6 +20,27 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 | **未调用设计 / 无 handoff** | 保持模板出厂（主色 `#409EFF`、`Theme: light`=白侧栏、`ShowModel: chrome`、margin 8） |
 | **有 design-handoff/v1 JSON** | 按本清单 5 步 51 项逐项执行；只改主色不改 Theme/Version = **落地失败** |
 
+## 两种调用场景
+
+> 以下「设计技能」泛指任何能输出 `design-handoff/v1` JSON 的设计类技能，不限定具体技能名称。
+
+| 场景 | 触发时机 | 执行范围 | 关键规则 |
+|------|---------|---------|---------|
+| **先开发 → 后调设计** | 业务页面已用 vue3-temp-skill 开发完成，用户不满意效果，调设计技能输出 handoff JSON | C/T/F/S/P **全 5 步** | 页面组件保留业务逻辑（API/路由/状态/事件），**重写 `<template>` 和样式**，使页面结构与设计输出一致 |
+| **先设计 → 后开发** | 新项目先调设计技能输出 handoff JSON，再调 vue3-temp-skill | 先执行 C/T/F/S（配置/令牌/框架/样式），后续业务开发时 P 步骤随页面生成同步落地 | 后续每个新页面开发都须遵循已落地设计规范，不以出厂样板覆盖设计输出 |
+
+**两种场景均须执行完整 C/T/F/S/P 流程，不可跳步。**
+
+## 设计为准原则
+
+> 设计输出是页面结构和功能元素的**唯一视觉基准**，不是仅调整配色。
+
+1. **设计输出中未体现的元素 → 隐藏或移除**（如模板有设置按钮但设计中没有 → 去掉）
+2. **设计输出中有但模板没有的元素 → 新增**（如设计有页面标题区但模板没有 → 补上）
+3. **设计输出覆盖的区域 → 严格按设计结构重写**，布局/元素/交互以设计为准
+4. **设计输出未覆盖的区域 → 保持项目已有实现**，仅同步令牌（色彩/字体/圆角等）
+5. **隐藏/移除功能性元素时**：在回复中明确列出被移除的元素，供用户确认是否需要补回
+
 ## 触发
 
 - 会话 / 附件 / 仓库中有 `design-handoff/v1` JSON（`$schema` 字段识别）
@@ -52,7 +73,7 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 | C3 | `shell.darkMode` | `platform-config.json` → `DarkMode` | `true`/`false` | 暗色模式开关 |
 | C4 | `shell.contentMode` | `platform-config.json` → `OverallStyle` | `vertical`/`horizontal`/`mix` | 布局模式 |
 | C5 | `shell.contentMargin` | `platform-config.json` → `contentMargin` | 数值（如 24） | 内容区间距 |
-| C6 | `tokens.brandPrimary` | `platform-config.json` → `EpThemeColor` | HEX 值 | 主色全局生效 |
+| C6 | `tokens.brandPrimary` + `tokens.primaryScale` | `platform-config.json` → `EpThemeColor` + `PrimaryScale` | HEX 值 + 10 级色阶数组 | 主色全局生效；运行时优先用 PrimaryScale 精确色阶，不再走 chroma 计算 |
 | C7 | `shell.dataTheme` | `platform-config.json` → `dataTheme` | 主题标识（如 `default`） | 侧栏主题色 |
 | C8 | — | `platform-config.json` → `Version` | **必须自增**（如 `0.0.5` → `0.0.6`） | 否则 localStorage 缓存不刷新 |
 
@@ -207,4 +228,50 @@ tags: [handoff, design-tokens, upstream, artifacts, json, modification-checklist
 | 语言切换为下拉框（非内联文字） | 硬失败：改为内联文字 |
 | 菜单激活态无品牌色底+强调条 | 硬失败：按 `interactionSpecs.menuActive` 补充 |
 | 页面无标题区 / 筛选区无容器感 | 硬失败：按 `structureRequirements.moduleComposition` 补充 |
-| `structureRequirements` 或 `interactionSpecs` 段未实现 | 硬失败：按 `project-implementation-protocol.md` 补充 |
+| `structureRequirements` 或 `interactionSpecs` 段未实现 | 硬失败：按 `design-handoff.md` F1-F14 / P1-P7 补充 |
+
+---
+
+## 七、落地完整性校验（code-quality 额外执行）
+
+> 当 `design-handoff/v1` JSON 存在时，`code-quality` 必须额外执行以下校验。
+> 任一项未通过 = 硬失败，必须修正后重新生成。
+
+### 配置层
+
+- [ ] `platform-config.json` 的 `EpThemeColor` 与 JSON `tokens.brandPrimary` 一致
+- [ ] `Theme` 与 `shell.sidebar` 对应（`dark-gradient` → `default`）
+- [ ] `ShowModel` 与 `shell.showModel` 一致
+- [ ] `Version` 已自增
+
+### 令牌层
+
+- [ ] `design-tokens.scss` 的 `--primary-0` ~ `--primary-9` 全部写入
+- [ ] `--primary-5` === `--brand-primary` === `brandPrimary`
+- [ ] `--header-height` / `--tabs-height` / `--sidebar-width` / `--layout-content-padding` 与 JSON `geometry` 一致
+- [ ] `--control-height*` 与 JSON `componentSize` 一致
+- [ ] 无硬编码 hex 值出现在令牌以外的位置
+
+### 框架层
+
+- [ ] navbar 顶栏组成与 `structureRequirements.frameworkShell.header` 一致
+- [ ] 语言切换为内联文字（非下拉框）
+- [ ] sidebar Logo 区为品牌色方块 + 白字
+- [ ] 菜单激活态有品牌色极浅底 + 右侧 3px 强调条
+- [ ] 页签风格与 `shell.showModel` 一致
+- [ ] 内容区内边距与 `geometry.contentPadding` 一致
+
+### 样式层
+
+- [ ] `element-plus.scss` 视觉规则段（S1-S10）值与 JSON `visual` / `interactionSpecs` 一致
+- [ ] `dark.scss` 对以上视觉规则有暗色覆盖
+
+### 页面层
+
+- [ ] 业务页面区域结构与 JSON `pageStructure.regions` 一致
+- [ ] 页面有标题区（`.vts-page-header`）：标题 + 描述 + 操作按钮
+- [ ] 筛选区有容器感（`.vts-filter-area`）：背景 + 圆角 + 底部分隔线
+- [ ] 表格区有包裹感（`.vts-table-area`）：圆角 + 边框
+- [ ] 页面内交互行为按 `interactionSpecs` 实现
+- [ ] 所有样式值引用 CSS 变量，无裸值
+- [ ] **未用出厂 CRUD 样板结构覆盖设计输出的页面结构**