@qilitt-mickey/vue3-temp-skill 1.1.24 → 1.1.26

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,7 @@ 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` **原子步骤**（`Theme`/`Version`/令牌整组，禁止只改主色）
+- **双轨**：无设计 handoff → 保持模版出厂；有设计落地 → 读 `design-handoff.md` 逐文件修改清单 + 设计 Skill `project-implementation-protocol.md`
 
 ## 使用方式
 
@@ -70,52 +88,54 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 | addon / 查 Re* 名 / 装依赖 | `references/project-inventory.md` |
 | **启用精简模板已删的 addon（装包 + 改配置）** | `references/addon-enable.md`（与功能模块同读） |
 | 写完代码后（闸门，非功能命中） | `references/code-quality.md` |
-| 设计交接块 / **design-handoff/v1 JSON** / 上游令牌产出落地 | `references/design-handoff.md`（+ `design-system`） |
-| **设计模式**（设计 Skill 产出存在时触发） | `crud-pages.md` 设计模式样板 + `design-system.md` Step 3.5 |
+| 设计交接块 / **design-handoff/v1 JSON** / 上游令牌产出落地 | `references/design-handoff.md`（逐文件修改清单）+ `design-system.md`（项目设计系统说明） |
+| **设计模式**（设计 Skill 产出存在时触发） | `crud-pages.md` 设计模式样板 + 设计 Skill `project-implementation-protocol.md`（1:1 还原协议） |
 
 ### 标准业务面
 
 | 模块 | 关键词 |
 |------|--------|
-| **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 |
-| **design-system** | 设计规范、UI 规范、按 XX 规范适配、design-tokens、主题色系、设计交接块 |
-| **icons** | 图标、svg-icon、Iconify、ReIconPicker、菜单图标 |
-| **feedback-loading** | message、loading、确认框 |
-| **base-code-dict** | 字典、baseCode、码表 |
-| **api-check** | 联调、mock、契约、对接后端 |
+| **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、菜单图标、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 +145,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`
+   - 树形列表、层级表格、组织架构、部门树 → `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`（逐文件修改清单）+ 设计 Skill `project-implementation-protocol.md`
    - 列表→独立详情/编辑页 → `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,7 +188,7 @@ 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`
+2. **加载**：`core-kernel` + 命中模块；addon/缺包时加读 `project-inventory` + **`addon-enable`**；设计规范/交接产出时加读 `design-handoff`（逐文件修改清单）+ 设计 Skill `project-implementation-protocol.md`
 3. **依赖**：缺包按 inventory 第九节精确版本，确认后安装；**再按 `addon-enable` 对应章节改配置**
 4. **探查**：复用仓库 `Re*` / Hook / utils
 5. **生成**：可运行代码落盘

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qilitt-mickey/vue3-temp-skill",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "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/code-quality.md

@@ -46,20 +46,20 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
 | 新菜单路由 | 父级无 `icon` 或业务页二次挂 `Layout` | `icons` + `core-kernel` |
 | 列表查询区 `el-form` / 查询按钮 | 写了 `size="small"`（紧凑主题用户未要求） | 不写 size，用 default=`--control-height` |
 | 本轮新增 addon 并引用对应 `Re*` / Vant / 微信 | 已装包但 `tsconfig exclude` 仍含该路径，或 `addon-enable` 要求的 build/src 未改 | 按 **`addon-enable.md`** 对应章节恢复后重跑 type-check |
-| `design-visual.scss` / `design-layout.scss` 存在 | `index.scss` 未 `@use` 加载，或加载顺序不在 `element-plus` 之前 | `design-tokens` → `design-visual` → `design-layout` → `element-plus` |
-| `design-visual.scss` 规则体内出现硬编码值 | 非令牌引用的裸 hex / px / rgba 值 | 全部改为 `var()` 引用令牌 |
-| 视觉层 / 构图层新增规则 | `dark.scss` 缺少对应暗色覆盖 | 每条新规则在 `html.dark` 内有对应覆盖 |
+| `element-plus.scss` 内视觉规则（shadow/hover/transition） | 出现非令牌引用的裸 hex / px / rgba 值 | 全部改为 `var()` 引用令牌 |
+| 视觉规则新增 | `dark.scss` 缺少对应暗色覆盖 | 每条新规则在 `html.dark` 内有对应覆盖 |
 
 ### 设计模式专项检查（设计 Skill 产出存在时）
 
+设计还原的完整检查清单见设计 Skill 的 `project-implementation-protocol.md`。本闸门只检查项目侧落地结果：
+
 | 检查项 | 失败条件 | 修复 |
 |--------|---------|------|
-| 列表页页面标题区 | 设计模式下列表页无 `.vts-page-header`（标题+描述+操作） | 按 `crud-pages.md` 设计模式样板 D2 补充 |
-| 列表页筛选区 | 设计模式下仍用 `bg-bg_color p-5` 而非 `.vts-filter-area` | 升级为 `.vts-filter-area` |
-| 列表页表格区 | 设计模式下表格区无 `.vts-table-area` 包裹 | 外包 `.vts-table-area` |
-| 设计模式值引用 | 页面代码中 CSS 钩子类对应的值非令牌引用 | 值来自 `design-tokens.scss` 令牌变量 |
-
-> **放松说明**：设计模式下，允许页面级结构 CSS（`.vts-page-header` 等布局类）。项目 Skill 的禁止项（"禁止另建独立重写层文件"等）在**设计模式**下不适用于页面代码中的布局结构实现，仅对全局样式文件生效。
+| 页面区域结构 | JSON `structureRequirements.pageRegions` 指定的区域在页面中缺失 | 按 `crud-pages.md` 设计模式样板 D1-D8 补充 |
+| 框架壳层 | JSON `structureRequirements.frameworkShell` 指定的壳层配置未落地 | 按 `design-handoff.md` 配置文件修改清单 C1-C8 执行 |
+| 交互行为 | JSON `interactionSpecs` 指定的交互未实现 | 按 `project-implementation-protocol.md` 交互保真要求实现 |
+| 令牌引用 | 页面代码中 CSS 钩子类对应的值非令牌引用 | 值来自 `design-tokens.scss` 令牌变量 |
+| 逐文件修改清单 | `design-handoff.md` 清单中有未执行项 | 补齐遗漏项 |
 
 ## 选型与硬约束
 
@@ -115,12 +115,11 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
 
 ### design-system（命中时）
 
-- [ ] 规范识别回执；令牌 / `platform-config.json` / 侧栏主题一致
-- [ ] 已建 `design-tokens.scss`；`index.scss` 中其 `@use` 最前
-- [ ] 冲突清单已逐条处理（见 `design-system`）
-- [ ] 有上游设计产出时已读 `design-handoff`：JSON 优先；**原子步骤**含 `Theme=default`（深色侧栏）+ `--sidebar-*` + **`Version++`** + 主色阶；禁止只改 EpThemeColor；错误色 `#F5222D`
+- [ ] 有设计 Skill 产出时已读 `design-handoff.md` 逐文件修改清单并执行
+- [ ] 设计还原检查对照设计 Skill 的 `project-implementation-protocol.md` 检查清单
+- [ ] 令牌 / `platform-config.json` / 侧栏主题三处一致
 - [ ] **无**设计落地时未改出厂主色 / ShowModel / 壳层 / 弹窗几何默认
-- [ ] 组件尺寸三档已落地并桥接 `--el-component-size*`；缺档回退至 default；未全局强制 `size="small"`；**查询区不写 size**（三档对照表 ≠ 查询区要用 small）
+- [ ] 组件尺寸三档已落地并桥接 `--el-component-size*`；缺档回退至 default；查询区不写 size
 
 ## 业务
 

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 页面开发规范
@@ -253,15 +253,18 @@ function handleSizeChange(size: number) {
 
 ## 列表设计模式样板（设计 Skill 产出存在时使用）
 
-> **触发条件**：存在 `design-handoff/v1` JSON、用户指定设计规范、或命中 `design-system` 模块且设计 Skill 产出可用。
+> **触发条件**：存在 `design-handoff/v1` JSON（含 `structureRequirements` + `pageStructure` 段）、用户指定设计规范、或命中 `design-system` 模块且设计 Skill 产出可用。
 >
-> **与出厂模式的区别**：出厂模式（上文 L1-L9）直接堆 `el-card` + 查询区 + 表格，无页面标题区。设计模式按设计 Skill 的 `list-page.md` 区域拆分，包含完整的页面标题区、筛选区容器、操作栏、表格区。
+> **1:1 还原要求**：页面区域结构必须按 JSON `structureRequirements.pageRegions` 实现，框架壳层按 `structureRequirements.frameworkShell` 实现。详见设计 Skill 的 `project-implementation-protocol.md`。
 >
-> **结构变化**：
-> - 新增 `.vts-page-header`（标题 + 描述 + 标题区操作按钮）
-> - 查询区从 `bg-bg_color p-5` 升级为 `.vts-filter-area`（有容器感 + 分隔线）
-> - 表格区外包 `.vts-table-area`（有圆角边框包裹）
+> **与出厂模式的区别**：出厂模式（上文 L1-L9）直接堆 `el-card` + 查询区 + 表格，无页面标题区。设计模式按 JSON `pageStructure` 区域拆分，包含完整的页面标题区、筛选区容器、操作栏、表格区。
+>
+> **结构变化**（以 JSON `structureRequirements.pageRegions` 为准，下方为默认区域）：
+> - 新增 `.vts-page-header`（标题 + 描述 + 标题区操作按钮）— 对应 JSON `pageStructure.regions.header`
+> - 查询区从 `bg-bg_color p-5` 升级为 `.vts-filter-area`（有容器感 + 分隔线）— 对应 `pageStructure.regions.filter`
+> - 表格区外包 `.vts-table-area`（有圆角边框包裹）— 对应 `pageStructure.regions.table`
 > - 主操作按钮（新增/导入）从 `ReTableBar #buttons` 移到 `.vts-page-header__actions`
+> - 若 JSON 指定额外区域（如统计区、页签切换区），按 `pageStructure.regions` 顺序在 `otherRef` 位或独立区域中实现
 
 | # | 必须 |
 |---|------|
@@ -270,8 +273,8 @@ function handleSizeChange(size: number) {
 | D3 | `.vts-filter-area`：筛选区容器（独立背景 + 圆角 + 底部分隔线） |
 | D4 | `.vts-action-bar`：表格上方操作栏（批量删除等 + 右侧刷新/列设置） |
 | D5 | `.vts-table-area`：表格区包裹（圆角 + 边框） |
-| D6 | 表头：品牌色浅底 + 字重 600 + 底部强调线（由 `design-visual.scss` 全局提供） |
-| D7 | 行 hover：品牌色极浅底 + 过渡（由 `design-visual.scss` 全局提供） |
+| D6 | 表头：品牌色浅底 + 字重 600 + 底部强调线（由 `element-plus.scss` 全局提供） |
+| D7 | 行 hover：品牌色极浅底 + 过渡（由 `element-plus.scss` 全局提供） |
 | D8 | 其余同 L4-L9（ReGrid / ReTableBar / RePagination / ReTableOperate） |
 
 ```vue
@@ -491,14 +494,15 @@ function handleSizeChange(size: number) {
 
 **设计模式与出厂模式的关键差异**：
 
-| 差异点 | 出厂模式 | 设计模式 |
-|--------|---------|---------|
-| 页面标题 | 无 | `.vts-page-header` 含标题+描述+操作 |
-| 筛选区 | `bg-bg_color p-5` | `.vts-filter-area`（容器感+分隔线） |
-| 主操作按钮位置 | `ReTableBar #buttons` | `.vts-page-header__actions` |
-| 表格区 | 无包裹 | `.vts-table-area`（圆角边框） |
-| 表头底色 | EP 默认浅灰 | 由 `design-visual.scss` 全局提供品牌色浅底+强调线 |
-| 行 hover | EP 默认灰色 | 由 `design-visual.scss` 全局提供品牌色极浅底 |
+| 差异点 | 出厂模式 | 设计模式 | JSON 来源 |
+|--------|---------|---------|-----------|
+| 页面标题 | 无 | `.vts-page-header` 含标题+描述+操作 | `structureRequirements.pageRegions.header` |
+| 筛选区 | `bg-bg_color p-5` | `.vts-filter-area`（容器感+分隔线） | `structureRequirements.pageRegions.filter` |
+| 主操作按钮位置 | `ReTableBar #buttons` | `.vts-page-header__actions` | `structureRequirements.pageRegions.header.actions` |
+| 表格区 | 无包裹 | `.vts-table-area`（圆角边框） | `structureRequirements.pageRegions.table` |
+| 表头底色 | EP 默认浅灰 | 由 `element-plus.scss` 全局提供品牌色浅底+强调线 | `visual.tableHeader` |
+| 行 hover | EP 默认灰色 | 由 `element-plus.scss` 全局提供品牌色极浅底 | `visual.rowHover` |
+| 交互行为 | EP 默认 | 按 JSON `interactionSpecs` 实现 | `interactionSpecs` |
 
 ## 操作列按钮过多（ReTableOperate · 强制）
 

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, 编辑数据]
+---
+
 # 数据回写与编辑
 
 > 按本文件示例编写，复用项目已有回显/回填约定与选择器回写方式，勿另起一套表单赋值实现。