@qilitt-mickey/vue3-temp-skill 1.1.72 → 1.1.74

package/SKILL.md

@@ -1,137 +1,137 @@
----
-name: "vue3-temp-skill"
-description: "Vue 3 企业级项目开发技能。面向 vue3-web-temp 及其派生项目，帮助产品经理和前端快速把点子做成可演示、可验证、可继续演进的 Demo；同时约束真实模板复用和代码质量。"
-scope: project
-agent_created: true
-tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-quality]
----
-
-# Vue 3 项目开发技能
-
-> **体系版本：1.0.0**（双 Skill 唯一版本声明点之一；设计侧 project-ui-design 同版）。版本恒定策略：双侧始终同版，不随内容修改递增，仅协议破坏性变更时双侧同步升版。mapping/*.json 的 `meta.version` 与变更集校验均恒为 `1.0.0`，不单独演进。
-
-## 目标
-
-把产品点子快速落到真实 Vue 3 项目中，先形成客户可看的完整 Demo，再保留后续正式开发所需的代码边界。页面可以使用 mock 和最小数据，但不得使用模板演示噪音、虚构项目能力或堆叠无法维护的代码。
-
-## 触发方式
-
-```text
-/vue3-temp-skill <自然语言需求>
-```
-
-典型需求：
-
-- 开发客户管理列表，支持搜索、分页、编辑和详情
-- 做一个订单仪表盘，含统计卡片和趋势图
-- 给现有 Demo 增加附件上传、导出或审批流
-- 把一个页面从 mock 改成真实 API
-- 「按这份设计方案改造全系统」/ 落地设计技能产出的设计文件（用户可能是小白，只会给文件路径或拖入文件；见 §3b）
-
-## 运行时只保留三件事
-
-1. **项目探查**：读取目标项目的 `package.json`、路由、页面、`Re*` 组件、Hooks、API 和样式；以源码事实为准。
-2. **能力路由**：运行 `scripts/match.py "需求" --json`，**仅**按输出中的 `load_files` 阅读 reference；禁止自行展开全部 `references/`。无 Python 时按下方能力组表手动匹配。
-3. **质量闸门**：代码完成后读取 `references/code-quality.md`，执行清单和项目命令。设计变更集落地后追加**设计层闭环审计**：`node scripts/design-audit.mjs --project <落地项目> --container-width <内容区实际宽>`（ERROR 必须清零；无落地项目时自动跳过）。**会话结束前必须跑通终态凭证闸**：`node scripts/apply-final-gate.mjs --project <落地项目> --container-width <内容区实际宽>`（串联 changeset-selfcheck → parser match → parser audit → design-audit 四闸，`FINAL-GATE: PASS` 才算交付完成，凭证写入 `.design/ledger.json`）。
-
-## 能力组路由
-
-| 能力组 | 覆盖内容 | 主要参考文件 |
-|---|---|---|
-| `page-crud` | 常规列表、筛选、分页、表格操作 | `crud-pages.md` |
-| `page-detail` | 独立详情/编辑页、顶部标签、路由 meta | `detail-page.md` |
-| `data-service` | HTTP、API、类型、mock、联调 | `http-api.md`、`api-check.md` |
-| `forms` | 表单、弹窗、远程选择、回显、字典、反馈 | `form-advanced.md`、`data-writeback.md`、`base-code-dict.md`、`feedback-loading.md` |
-| `access` | 权限、认证页面 | `permission-auth.md`、`auth-pages.md` |
-| `theme-layout` | 布局、主题色、暗黑模式、侧栏配色、令牌 | `layout-theme.md` |
-| `shared-ui` | Re*、图标、通用展示和指令 | `ui-components.md`、`icons.md`、`feedback-ui.md`、`directives-advanced.md` |
-| `table-advanced` | 树表、VXE 表格 | `tree-table.md`、`table-vxe.md` |
-| `visualization` | 图表、大屏、关系图谱 | `chart-echarts.md`、`data-screen.md`、`graph-relation.md` |
-| `workflow` | BPMN、G6 流程图、字段映射 | `workflow-bpmn.md`、`flowchart-g6.md`、`data-mapping.md` |
-| `files-and-editors` | 附件、预览、下载、富文本、二维码 | `file-management.md`、`download-export.md`、`rich-text.md`、`qrcode-barcode.md` |
-| `realtime-and-mobile` | WebSocket、移动端、微信、验证码、动效 | 对应专项 reference |
-| `data-compare` | 编辑页变更对比和汇总 | `data-compare.md` |
-| `design-apply` | 设计变更集落地：语义 ID 三级匹配、结构/形态/两层样式转换、锚点与结构施工、覆写提权、渲染态验收、合规闸门。**主入口 `design-apply.md`（红线+契约+步骤索引），各步骤明细见 `references/steps/`——做到哪一步读哪一份** | `design-apply.md`、`steps/`、`mapping/`、`parser/`、`scripts/design-audit.mjs`、`scripts/apply-final-gate.mjs` |
-
-## 工作流
-
-### 1. 识别目标和范围
-
-- 确认目标项目根目录；没有明确目标时先询问，不在技能仓库里写业务代码。
-- 判断是 Demo 验证、功能增量还是正式业务开发。
-- 保留目标项目当前初始化视觉，不让开发技能自行设计。
-
-### 2. 读取事实
-
-- 先读 `references/core-kernel.md`。
-- 运行 `scripts/match.py "需求" --json`，按 `load_files` 阅读。
-- 读取目标项目当前 `package.json` 和锁文件；不要根据“core/addon”标签猜依赖是否存在。
-- 扫描已有 `Re*`、Hooks、`src/api`、路由和相关页面；已有封装优先于技能示例。
-
-### 3. 实现闭环
-
-- 页面、路由、API、类型、mock 和共享组件按一个业务闭环实现。
-- 列表使用 `useTableSearch`、`ReTableBar`、`RePagination`；有独立详情时同步完成 `useDetail` 与路由 meta。
-- HTTP 只经过 `@/utils/http`，响应按项目实际 `Result<T>` 约定处理。
-- Demo 可以最小化数据和接口，但目录、类型、命名和组件边界要能承接后续开发。
-- 新依赖先检查目标项目；缺失时说明精确版本、原因和构建接线，确认后再安装。
-- 只有目标项目确实存在排除项、占位插件或缺失接线时，才读取 `addon-enable.md` 恢复配置。
-- **输入为设计文件时**：用户给出设计技能（project-ui-design）产出的 JSON 文件（无论叫"设计方案/设计文件/变更集"）→ 不走常规闭环，改走 `design-apply.md` 协议——先跑 `node parser/index.js audit` 复核锚点（挂载点/死通道），再按「结构先行（`structure_ops`）、样式两层转换、必要时覆写提权（`priority`）」落地，最后过变更集合规闸门。变更集新增三类声明维度：`apply_via`（落点通道）/ `layer`（`host` 宿主盒 / `inner` 内层文本盒）/ `structure_ops`（数据·结构驱动点位的结构操作）；词典条目对应新增 `anchors` / `preconditions` / `priority`。
-
-### 3b. 小白用户执行纪律（design-apply 场景）
-
-使用者默认**不懂设计也不懂代码**，交互遵守四条：
-
-1. **全自动默认**：识别为设计文件落地后**直接开始执行 parser match → 结构 → 样式 → 闸门全流程**，不等用户逐步确认，不询问"是否继续"；唯一停顿点是文件缺失/版本不匹配/parser 报错——此时用大白话报告并给选择题。
-   **禁止以「待确认」搁置可落地项**：词典缺 ID / 缺字段枚举 / 缺 form 属**能力缺口**，当场补临时映射并落地（出厂文件仅在补通道时可动，交付说明单列申报）；只有「设计侧没给值」才是**意图缺口**，去向是回流设计侧补齐，不是问用户要不要做。
-2. **术语不对用户出现**：对用户不说"变更集/语义 ID/三级匹配/pending/令牌"——说"设计方案/设计点位/自动适配/新增点位/全局样式"。这些词只出现在内部文档与交付说明里。
-3. **无文件时的引导**：用户说"全系统改成 XX 风格"但没给设计文件 → 提示一句话："请先在设计助手（project-ui-design 技能）里说『我要 XX 风格的全系统设计』拿到设计文件，再回来发给我"。如果本机同时装有设计技能，可直接引导用户回到设计会话完成设计，再回本项目落地。
-4. **交付话术**：完成后用大白话总结（改了哪些页面/哪些地方变了/怎么验收），不输出施工坐标等技术细节；验收引导统一为"运行 `pnpm dev` 打开页面对照看效果，哪里不满意直接说"。
-
-### 4. 验证与交付
-
-- 对照 `references/code-quality.md` 检查类型、组件复用、API、路由、权限、安全、异常反馈、响应式和可演进性。
-- 在目标项目执行 `pnpm lint:fix`、`pnpm type-check`；改动构建配置时再执行 `pnpm build`。**本轮产出或修改设计变更集时，这两条不含还原度检查——必须按 code-quality 协议 3 同链追加终态闸 `apply-final-gate`（串联 selfcheck → match → audit → design-audit，取得 FINAL-GATE: PASS），禁止只跑 lint 链就报「全部质量闸门通过」。**
-- **设计文件落地时追加渲染态验收**：变更集含 `oracle`（或效果图带 `data-sid`）时，跑 `node parser/index.js verify`——抽取项目同名 `data-sid` 元素的 computed style，与效果图期望值逐点 diff；缺口按四类归因（选择器落空 / 权重被压 / 语境错位 / **存在性缺口 G12**：`oracle.absent` 点位仍可见）修正，禁止用 `!important` 掩盖。多轮迭代场景每轮动工前先 `--snapshot` 导快照、交付前 `--baseline` 比对——上轮命中本轮退步 = 基线漂移，先回归上轮修法。申报过的固有残差（`oracle.residual_accepted`）不计缺口。
-- **设计文件落地时核对登记表覆盖率**：变更集带登记表（`coverage.registry` 或 `--registry`）时，跑 `node parser/index.js match <cs.json> --registry <restore-registry.json>`——`C = A` 且无缺口才可交付；parser **当场以登记表为权威重算**，设计侧自报的 `coverage` 数字不参与。单独核验登记表对词典的通道就绪度用 `node parser/index.js registry <restore-registry.json>`（硬缺口 exit 1、通道缺口列出待补字段）。
-- 最终说明：命中能力组、修改文件、功能验证、命令结果、未解决问题和下一步。
-
-## 出厂中性 · 变更集驱动（design-apply 架构红线）
-
-目标项目源码 = **中性初始化**，只提供能力通道（CSS 变量的消费者挂载点、form 枚举、DOM/属性钩子、正确的层叠优先级），**不预置任何具体设计的结论**（某个颜色、某句问候语、某个方位的指示条、某个硬编码尺寸）。
-
-- 一切设计决策由设计变更集驱动，经 `design-apply` 动态落到「设计层文件 `src/styles/design-shell.scss` / 页面级 scoped 样式 / DOM 属性与配置」，不落到出厂样式文件与出厂组件里。
-- **效果图页面 = 设计角色坐标系，不是页面增量（G13 页面绑定闸）**：效果图页面（如「运单管理」）是设计侧为承载设计语言虚构的演示标题，**默认映射到项目已有页面**——落地动作恒为「在已有页面上同步结构与样式」，**禁止因效果图新增页面 / 路由 / 菜单项**；唯一例外是变更集 `page_bindings` 显式声明 `target:"new"` 且在 `notes` 申报。判据：换一张效果图不需要改项目的页面/路由/菜单清单 ⇒ 架构正确；需要新增页面才能换 ⇒ 设计演示页被误当业务增量，必须回退。
-- **演示占位内容 = 效果的角色承载，不是还原目标（演示内容等价）**：项目演示页上为展示"此处可放控件"而写的占位说明文字 / 演示按钮，既不是效果图的角色、也不是设计意图。落地时必须把落在效果图对应角色上的演示占位**替换为设计对应内容**，或对效果图没有该位置的点位**收口隐藏**——**还原后的页面不得残留模板演示说明性文字与占位按钮**。判据：残留演示文案说明「效果 vs 内容」混淆——把模板演示内容当成设计还原，必须回退（详见 design-apply 第 2 步「出厂演示占位内容等价」）。
-- 判据：换一张效果图只需换变更集、不必改源码 ⇒ 架构正确；需要改源码才能换 ⇒ 设计结论被烧进源码，必须回退为通道。
-- 出厂文件仅在「通道缺失」时可动（补变量消费者 / 补 form 枚举 / 修层叠优先级），且必须在交付说明中单列「补通道」条目写明缺失点。
-
-## 项目事实优先级
-
-`目标项目当前源码` > `目标项目 package.json / 锁文件` > `本 Skill reference` > `通用 Vue 习惯`。
-
-## 默认禁止
-
-- 不在页面内直接使用 `axios` / `fetch`，不虚构 API 前缀。
-- 不二次挂载 `Layout`，不把模板演示页原样当业务页面。
-- 不使用裸 `v-if` 代替权限指令，不使用不可信 `v-html`。
-- 不为了视觉效果引入未经确认的新 UI 框架或图表库。
-- 不把 lint 通过当成业务闭环完成。
-
-## 最终回复格式
-
-```markdown
-## 命中能力组
-- page-crud / data-service / ...
-
-## 变更说明
-- `src/...`：...
-
-## 验证结果
-- 功能：...
-- `pnpm lint:fix`：通过 | 失败（原因）
-- `pnpm type-check`：通过 | 失败（原因）
-- 设计闸（本轮有设计变更集时必填，无则 N/A）：`apply-final-gate` → FINAL-GATE: PASS ✅（凭证已写入 ledger.json）
-- 设计验收：无 oracle 时 N/A | 逐点 diff 结果（命中 N / 缺口 M，归因与修正）
-- 缺口回流：无 | 仅限「设计侧未给值」的维度（列出维度名，注明已回流设计侧补齐）
-```
+---
+name: "vue3-temp-skill"
+description: "Vue 3 企业级项目开发技能。面向 vue3-web-temp 及其派生项目，帮助产品经理和前端快速把点子做成可演示、可验证、可继续演进的 Demo；同时约束真实模板复用和代码质量。"
+scope: project
+agent_created: true
+tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-quality]
+---
+
+# Vue 3 项目开发技能
+
+> **体系版本：1.0.0**（双 Skill 唯一版本声明点之一；设计侧 project-ui-design 同版）。版本恒定策略：双侧始终同版，不随内容修改递增，仅协议破坏性变更时双侧同步升版。mapping/*.json 的 `meta.version` 与变更集校验均恒为 `1.0.0`，不单独演进。
+
+## 目标
+
+把产品点子快速落到真实 Vue 3 项目中，先形成客户可看的完整 Demo，再保留后续正式开发所需的代码边界。页面可以使用 mock 和最小数据，但不得使用模板演示噪音、虚构项目能力或堆叠无法维护的代码。
+
+## 触发方式
+
+```text
+/vue3-temp-skill <自然语言需求>
+```
+
+典型需求：
+
+- 开发客户管理列表，支持搜索、分页、编辑和详情
+- 做一个订单仪表盘，含统计卡片和趋势图
+- 给现有 Demo 增加附件上传、导出或审批流
+- 把一个页面从 mock 改成真实 API
+- 「按这份设计方案改造全系统」/ 落地设计技能产出的设计文件（用户可能是小白，只会给文件路径或拖入文件；见 §3b）
+
+## 运行时只保留三件事
+
+1. **项目探查**：读取目标项目的 `package.json`、路由、页面、`Re*` 组件、Hooks、API 和样式；以源码事实为准。
+2. **能力路由**：运行 `scripts/match.py "需求" --json`，**仅**按输出中的 `load_files` 阅读 reference；禁止自行展开全部 `references/`。无 Python 时按下方能力组表手动匹配。
+3. **质量闸门**：代码完成后读取 `references/code-quality.md`，执行清单和项目命令。设计变更集落地后追加**设计层闭环审计**：`node scripts/design-audit.mjs --project <落地项目> --container-width <内容区实际宽>`（ERROR 必须清零；无落地项目时自动跳过）。**会话结束前必须跑通终态凭证闸**：`node scripts/apply-final-gate.mjs --project <落地项目> --container-width <内容区实际宽>`（串联 changeset-selfcheck → parser match → parser audit → design-audit 四闸，`FINAL-GATE: PASS` 才算交付完成，凭证写入 `.design/ledger.json`）。
+
+## 能力组路由
+
+| 能力组 | 覆盖内容 | 主要参考文件 |
+|---|---|---|
+| `page-crud` | 常规列表、筛选、分页、表格操作 | `crud-pages.md` |
+| `page-detail` | 独立详情/编辑页、顶部标签、路由 meta | `detail-page.md` |
+| `data-service` | HTTP、API、类型、mock、联调 | `http-api.md`、`api-check.md` |
+| `forms` | 表单、弹窗、远程选择、回显、字典、反馈 | `form-advanced.md`、`data-writeback.md`、`base-code-dict.md`、`feedback-loading.md` |
+| `access` | 权限、认证页面 | `permission-auth.md`、`auth-pages.md` |
+| `theme-layout` | 布局、主题色、暗黑模式、侧栏配色、令牌 | `layout-theme.md` |
+| `shared-ui` | Re*、图标、通用展示和指令 | `ui-components.md`、`icons.md`、`feedback-ui.md`、`directives-advanced.md` |
+| `table-advanced` | 树表、VXE 表格 | `tree-table.md`、`table-vxe.md` |
+| `visualization` | 图表、大屏、关系图谱 | `chart-echarts.md`、`data-screen.md`、`graph-relation.md` |
+| `workflow` | BPMN、G6 流程图、字段映射 | `workflow-bpmn.md`、`flowchart-g6.md`、`data-mapping.md` |
+| `files-and-editors` | 附件、预览、下载、富文本、二维码 | `file-management.md`、`download-export.md`、`rich-text.md`、`qrcode-barcode.md` |
+| `realtime-and-mobile` | WebSocket、移动端、微信、验证码、动效 | 对应专项 reference |
+| `data-compare` | 编辑页变更对比和汇总 | `data-compare.md` |
+| `design-apply` | 设计变更集落地：语义 ID 三级匹配、结构/形态/两层样式转换、锚点与结构施工、覆写提权、渲染态验收、合规闸门。**主入口 `design-apply.md`（红线+契约+步骤索引），各步骤明细见 `references/steps/`——做到哪一步读哪一份** | `design-apply.md`、`steps/`、`mapping/`、`parser/`、`scripts/design-audit.mjs`、`scripts/apply-final-gate.mjs` |
+
+## 工作流
+
+### 1. 识别目标和范围
+
+- 确认目标项目根目录；没有明确目标时先询问，不在技能仓库里写业务代码。
+- 判断是 Demo 验证、功能增量还是正式业务开发。
+- 保留目标项目当前初始化视觉，不让开发技能自行设计。
+
+### 2. 读取事实
+
+- 先读 `references/core-kernel.md`。
+- 运行 `scripts/match.py "需求" --json`，按 `load_files` 阅读。
+- 读取目标项目当前 `package.json` 和锁文件；不要根据“core/addon”标签猜依赖是否存在。
+- 扫描已有 `Re*`、Hooks、`src/api`、路由和相关页面；已有封装优先于技能示例。
+
+### 3. 实现闭环
+
+- 页面、路由、API、类型、mock 和共享组件按一个业务闭环实现。
+- 列表使用 `useTableSearch`、`ReTableBar`、`RePagination`；有独立详情时同步完成 `useDetail` 与路由 meta。
+- HTTP 只经过 `@/utils/http`，响应按项目实际 `Result<T>` 约定处理。
+- Demo 可以最小化数据和接口，但目录、类型、命名和组件边界要能承接后续开发。
+- 新依赖先检查目标项目；缺失时说明精确版本、原因和构建接线，确认后再安装。
+- 只有目标项目确实存在排除项、占位插件或缺失接线时，才读取 `addon-enable.md` 恢复配置。
+- **输入为设计文件时**：用户给出设计技能（project-ui-design）产出的 JSON 文件（无论叫"设计方案/设计文件/变更集"）→ 不走常规闭环，改走 `design-apply.md` 协议——先跑 `node parser/index.js audit` 复核锚点（挂载点/死通道），再按「结构先行（`structure_ops`）、样式两层转换、必要时覆写提权（`priority`）」落地，最后过变更集合规闸门。变更集新增三类声明维度：`apply_via`（落点通道）/ `layer`（`host` 宿主盒 / `inner` 内层文本盒）/ `structure_ops`（数据·结构驱动点位的结构操作）；词典条目对应新增 `anchors` / `preconditions` / `priority`。
+
+### 3b. 小白用户执行纪律（design-apply 场景）
+
+使用者默认**不懂设计也不懂代码**，交互遵守四条：
+
+1. **全自动默认**：识别为设计文件落地后**直接开始执行 parser match → 结构 → 样式 → 闸门全流程**，不等用户逐步确认，不询问"是否继续"；唯一停顿点是文件缺失/版本不匹配/parser 报错——此时用大白话报告并给选择题。
+   **禁止以「待确认」搁置可落地项**：词典缺 ID / 缺字段枚举 / 缺 form 属**能力缺口**，当场补临时映射并落地（出厂文件仅在补通道时可动，交付说明单列申报）；只有「设计侧没给值」才是**意图缺口**，去向是回流设计侧补齐，不是问用户要不要做。
+2. **术语不对用户出现**：对用户不说"变更集/语义 ID/三级匹配/pending/令牌"——说"设计方案/设计点位/自动适配/新增点位/全局样式"。这些词只出现在内部文档与交付说明里。
+3. **无文件时的引导**：用户说"全系统改成 XX 风格"但没给设计文件 → 提示一句话："请先在设计助手（project-ui-design 技能）里说『我要 XX 风格的全系统设计』拿到设计文件，再回来发给我"。如果本机同时装有设计技能，可直接引导用户回到设计会话完成设计，再回本项目落地。
+4. **交付话术**：完成后用大白话总结（改了哪些页面/哪些地方变了/怎么验收），不输出施工坐标等技术细节；验收引导统一为"运行 `pnpm dev` 打开页面对照看效果，哪里不满意直接说"。
+
+### 4. 验证与交付
+
+- 对照 `references/code-quality.md` 检查类型、组件复用、API、路由、权限、安全、异常反馈、响应式和可演进性。
+- 在目标项目执行 `pnpm lint:fix`、`pnpm type-check`；改动构建配置时再执行 `pnpm build`。**本轮产出或修改设计变更集时，这两条不含还原度检查——必须按 code-quality 协议 3 同链追加终态闸 `apply-final-gate`（串联 selfcheck → match → audit → design-audit，取得 FINAL-GATE: PASS），禁止只跑 lint 链就报「全部质量闸门通过」。**
+- **设计文件落地时追加渲染态验收**：变更集含 `oracle`（或效果图带 `data-sid`）时，跑 `node parser/index.js verify`——抽取项目同名 `data-sid` 元素的 computed style，与效果图期望值逐点 diff；缺口按四类归因（选择器落空 / 权重被压 / 语境错位 / **存在性缺口 G12**：`oracle.absent` 点位仍可见）修正，禁止用 `!important` 掩盖。多轮迭代场景每轮动工前先 `--snapshot` 导快照、交付前 `--baseline` 比对——上轮命中本轮退步 = 基线漂移，先回归上轮修法。申报过的固有残差（`oracle.residual_accepted`）不计缺口。
+- **设计文件落地时核对登记表覆盖率**：变更集带登记表（`coverage.registry` 或 `--registry`）时，跑 `node parser/index.js match <cs.json> --registry <restore-registry.json>`——`C = A` 且无缺口才可交付；parser **当场以登记表为权威重算**，设计侧自报的 `coverage` 数字不参与。单独核验登记表对词典的通道就绪度用 `node parser/index.js registry <restore-registry.json>`（硬缺口 exit 1、通道缺口列出待补字段）。
+- 最终说明：命中能力组、修改文件、功能验证、命令结果、未解决问题和下一步。
+
+## 出厂中性 · 变更集驱动（design-apply 架构红线）
+
+目标项目源码 = **中性初始化**，只提供能力通道（CSS 变量的消费者挂载点、form 枚举、DOM/属性钩子、正确的层叠优先级），**不预置任何具体设计的结论**（某个颜色、某句问候语、某个方位的指示条、某个硬编码尺寸）。
+
+- 一切设计决策由设计变更集驱动，经 `design-apply` 动态落到「设计层文件 `src/styles/design-shell.scss` / 页面级 scoped 样式 / DOM 属性与配置」，不落到出厂样式文件与出厂组件里。
+- **效果图页面 = 设计角色坐标系，不是页面增量（G13 页面绑定闸）**：效果图页面（如「运单管理」）是设计侧为承载设计语言虚构的演示标题，**默认映射到项目已有页面**——落地动作恒为「在已有页面上同步结构与样式」，**禁止因效果图新增页面 / 路由 / 菜单项**；唯一例外是变更集 `page_bindings` 显式声明 `target:"new"` 且在 `notes` 申报。判据：换一张效果图不需要改项目的页面/路由/菜单清单 ⇒ 架构正确；需要新增页面才能换 ⇒ 设计演示页被误当业务增量，必须回退。
+- **演示占位内容 = 效果的角色承载，不是还原目标（演示内容等价）**：项目演示页上为展示"此处可放控件"而写的占位说明文字 / 演示按钮，既不是效果图的角色、也不是设计意图。落地时必须把落在效果图对应角色上的演示占位**替换为设计对应内容**，或对效果图没有该位置的点位**收口隐藏**——**还原后的页面不得残留模板演示说明性文字与占位按钮**。判据：残留演示文案说明「效果 vs 内容」混淆——把模板演示内容当成设计还原，必须回退（详见 design-apply 第 2 步「出厂演示占位内容等价」）。
+- 判据：换一张效果图只需换变更集、不必改源码 ⇒ 架构正确；需要改源码才能换 ⇒ 设计结论被烧进源码，必须回退为通道。
+- 出厂文件仅在「通道缺失」时可动（补变量消费者 / 补 form 枚举 / 修层叠优先级），且必须在交付说明中单列「补通道」条目写明缺失点。
+
+## 项目事实优先级
+
+`目标项目当前源码` > `目标项目 package.json / 锁文件` > `本 Skill reference` > `通用 Vue 习惯`。
+
+## 默认禁止
+
+- 不在页面内直接使用 `axios` / `fetch`，不虚构 API 前缀。
+- 不二次挂载 `Layout`，不把模板演示页原样当业务页面。
+- 不使用裸 `v-if` 代替权限指令，不使用不可信 `v-html`。
+- 不为了视觉效果引入未经确认的新 UI 框架或图表库。
+- 不把 lint 通过当成业务闭环完成。
+
+## 最终回复格式
+
+```markdown
+## 命中能力组
+- page-crud / data-service / ...
+
+## 变更说明
+- `src/...`：...
+
+## 验证结果
+- 功能：...
+- `pnpm lint:fix`：通过 | 失败（原因）
+- `pnpm type-check`：通过 | 失败（原因）
+- 设计闸（本轮有设计变更集时必填，无则 N/A）：`apply-final-gate` → FINAL-GATE: PASS ✅（凭证已写入 ledger.json）
+- 设计验收：无 oracle 时 N/A | 逐点 diff 结果（命中 N / 缺口 M，归因与修正）
+- 缺口回流：无 | 仅限「设计侧未给值」的维度（列出维度名，注明已回流设计侧补齐）
+```

package/bin/cli.js

@@ -34,7 +34,7 @@ const TRACK_FILE = path.join(HOME, ".vue3-temp-skill.json");
 // design-audit.mjs / check.mjs / apply-final-gate.mjs 必须随包分发：E11 交付完整性 / E12 设计层
 // 累积性（ledger 台账）/ 终态机读凭证（四闸串联，FINAL-GATE: PASS）是落地会话的运行时闸——
 // 缺了它们「只挑主题令牌落地 + 覆盖历史成果 + 以自述结束会话」无法被静态拦截
-// （实证：2026-09-24 孔雀绿轮，运行时副本无审计闸，残缺口变更集一路绿灯）。
+// （失效模式：运行时副本缺审计闸时，残缺口变更集会一路绿灯）。
 const RUNTIME_SCRIPT_FILES = ["match.py", "modules.json", "design-audit.mjs", "check.mjs", "apply-final-gate.mjs"];
 const PKG_VERSION = JSON.parse(fs.readFileSync(path.join(SKILL_DIR, "package.json"), "utf-8")).version;
 

package/dist/theme-vars.js

@@ -1,5 +1,5 @@
 // AUTO-GENERATED by vue3-temp-skill parser/generator.js — DO NOT EDIT
-// 链路 A 运行时入口：themeVars + overrideMapping（业务级覆写，V3.1 §3.4.4.3）
+// 链路 A 运行时入口：themeVars + overrideMapping（业务级覆写）
 // 用法：import { themeVars, overrideMapping } from '@qilitt-mickey/vue3-temp-skill/dist/theme-vars.js';
 //       const custom = overrideMapping(themeVars, { color: { brandPrimary: '#ff6600' } });
 export const themeVars = {

package/dist/theme.css

@@ -1,5 +1,5 @@
 /* AUTO-GENERATED by vue3-temp-skill parser/generator.js — DO NOT EDIT */
-/* 链路 A（基线注入）产物：全局令牌变量基线（V3.1 §4.5.3）。
+/* 链路 A（基线注入）产物：全局令牌变量基线。
  * 仅空白新项目从零接入 Skill 主题体系时在样式入口引入一次；
  * 成熟模板项目（自有 design-tokens.scss 权威令牌源）不得引入，避免双令牌源冲突。 */
 :root {

package/mapping/basic/color.json

@@ -1,35 +1,35 @@
-{
-  "$comment": "全局原子层 · 基础色彩令牌映射。abstract_field 为设计侧抽象样式字段名（纯视觉语义）；token 为项目侧实现令牌（design-tokens.scss :root 或 EP 官方变量）；design_range 为设计侧可选值域说明。由 vue3-temp-skill mapping 体系维护，禁止业务项目修改。",
-  "meta": {
-    "layer": "basic",
-    "domain": "color",
-    "version": "1.0.0",
-    "scene": "global",
-    "tech_stack": "vue3 + element-plus + vue3-web-temp"
-  },
-  "tokens": {
-    "brand_primary": { "token": "--brand-primary", "type": "color", "desc": "品牌主色" },
-    "brand_hover": { "token": "--brand-hover", "type": "color", "desc": "品牌悬停色" },
-    "brand_active": { "token": "--brand-active", "type": "color", "desc": "品牌激活色" },
-    "sidebar_bg": { "token": "--sidebar-bg", "type": "color", "desc": "侧栏底色（经 theme.scss data-theme=default → --vts-theme-menu-bg 链生效；浅色侧栏主题勿用此字段）" },
-    "success_color": { "token": "--success-color", "type": "color", "desc": "成功功能色" },
-    "warning_color": { "token": "--warning-color", "type": "color", "desc": "警告功能色" },
-    "error_color": { "token": "--error-color", "type": "color", "desc": "错误功能色" },
-    "text_primary": { "token": "--text-primary", "type": "color", "desc": "主文字色" },
-    "text_secondary": { "token": "--text-secondary", "type": "color", "desc": "次文字色" },
-    "text_tertiary": { "token": "--text-tertiary", "type": "color", "desc": "三级文字色" },
-    "text_disabled": { "token": "--text-disabled", "type": "color", "desc": "禁用文字色" },
-    "border_color": { "token": "--border-color", "type": "color", "desc": "主边框色" },
-    "border_color_secondary": { "token": "--border-color-secondary", "type": "color", "desc": "次边框色" },
-    "component_bg": { "token": "--component-bg", "type": "color", "desc": "组件面background（卡片/弹层底色）" },
-    "layout_bg": { "token": "--layout-bg", "type": "color", "desc": "页面布局背景" },
-    "primary_bg": { "token": "--primary-bg", "type": "color", "desc": "主色浅底（自动 color-mix 派生，一般不直改）" }
-  },
-  "el_bridge": {
-    "$comment": "EP 官方变量桥接关系（只读说明）：--brand-primary 等经 design-tokens.scss 自动桥接至 --el-color-primary/--el-bg-color/--el-text-color-* 等，设计侧无需输出 --el-* 字段。",
-    "brand_primary_to_el": "--el-color-primary",
-    "component_bg_to_el": "--el-bg-color",
-    "layout_bg_to_el": "--el-bg-color-page",
-    "text_primary_to_el": "--el-text-color-primary"
-  }
-}
+{
+  "$comment": "全局原子层 · 基础色彩令牌映射。abstract_field 为设计侧抽象样式字段名（纯视觉语义）；token 为项目侧实现令牌（design-tokens.scss :root 或 EP 官方变量）；design_range 为设计侧可选值域说明。由 vue3-temp-skill mapping 体系维护，禁止业务项目修改。",
+  "meta": {
+    "layer": "basic",
+    "domain": "color",
+    "version": "1.0.0",
+    "scene": "global",
+    "tech_stack": "vue3 + element-plus + vue3-web-temp"
+  },
+  "tokens": {
+    "brand_primary": { "token": "--brand-primary", "type": "color", "desc": "品牌主色" },
+    "brand_hover": { "token": "--brand-hover", "type": "color", "desc": "品牌悬停色" },
+    "brand_active": { "token": "--brand-active", "type": "color", "desc": "品牌激活色" },
+    "sidebar_bg": { "token": "--sidebar-bg", "type": "color", "desc": "侧栏底色（经 theme.scss data-theme=default → --vts-theme-menu-bg 链生效；浅色侧栏主题勿用此字段）" },
+    "success_color": { "token": "--success-color", "type": "color", "desc": "成功功能色" },
+    "warning_color": { "token": "--warning-color", "type": "color", "desc": "警告功能色" },
+    "error_color": { "token": "--error-color", "type": "color", "desc": "错误功能色" },
+    "text_primary": { "token": "--text-primary", "type": "color", "desc": "主文字色" },
+    "text_secondary": { "token": "--text-secondary", "type": "color", "desc": "次文字色" },
+    "text_tertiary": { "token": "--text-tertiary", "type": "color", "desc": "三级文字色" },
+    "text_disabled": { "token": "--text-disabled", "type": "color", "desc": "禁用文字色" },
+    "border_color": { "token": "--border-color", "type": "color", "desc": "主边框色" },
+    "border_color_secondary": { "token": "--border-color-secondary", "type": "color", "desc": "次边框色" },
+    "component_bg": { "token": "--component-bg", "type": "color", "desc": "组件面background（卡片/弹层底色）" },
+    "layout_bg": { "token": "--layout-bg", "type": "color", "desc": "页面布局背景" },
+    "primary_bg": { "token": "--primary-bg", "type": "color", "desc": "主色浅底（自动 color-mix 派生，一般不直改）" }
+  },
+  "el_bridge": {
+    "$comment": "EP 官方变量桥接关系（只读说明）：--brand-primary 等经 design-tokens.scss 自动桥接至 --el-color-primary/--el-bg-color/--el-text-color-* 等，设计侧无需输出 --el-* 字段。",
+    "brand_primary_to_el": "--el-color-primary",
+    "component_bg_to_el": "--el-bg-color",
+    "layout_bg_to_el": "--el-bg-color-page",
+    "text_primary_to_el": "--el-text-color-primary"
+  }
+}

package/mapping/basic/radius.json

@@ -1,17 +1,17 @@
-{
-  "$comment": "全局原子层 · 圆角令牌映射。radius 为设计侧抽象字段；token 为项目实现令牌（design-tokens.scss :root，并桥接 EP --el-border-radius-*）。",
-  "meta": {
-    "layer": "basic",
-    "domain": "radius",
-    "version": "1.0.0",
-    "scene": "global",
-    "tech_stack": "vue3 + element-plus + vue3-web-temp"
-  },
-  "tokens": {
-    "radius_sm": { "token": "--radius-sm → --border-radius-sm", "type": "size", "default": "4px", "desc": "小控件圆角（Tag/小按钮）", "el_bridge": "--el-border-radius-small" },
-    "radius_base": { "token": "--radius-base → --border-radius-base", "type": "size", "default": "6px", "desc": "标准控件圆角（按钮/输入框）", "el_bridge": "--el-border-radius-base" },
-    "radius_lg": { "token": "--radius-lg → --border-radius-lg", "type": "size", "default": "8px", "desc": "卡片级圆角", "el_bridge": null },
-    "dialog_radius": { "token": "--dialog-border-radius", "type": "size", "default": "10px", "desc": "弹窗圆角（出厂 ReDialog 观感）", "el_bridge": null },
-    "switch_radius": { "token": "--switch-border-radius", "type": "size", "default": "10px", "desc": "开关圆角", "el_bridge": null }
-  }
-}
+{
+  "$comment": "全局原子层 · 圆角令牌映射。radius 为设计侧抽象字段；token 为项目实现令牌（design-tokens.scss :root，并桥接 EP --el-border-radius-*）。",
+  "meta": {
+    "layer": "basic",
+    "domain": "radius",
+    "version": "1.0.0",
+    "scene": "global",
+    "tech_stack": "vue3 + element-plus + vue3-web-temp"
+  },
+  "tokens": {
+    "radius_sm": { "token": "--radius-sm → --border-radius-sm", "type": "size", "default": "4px", "desc": "小控件圆角（Tag/小按钮）", "el_bridge": "--el-border-radius-small" },
+    "radius_base": { "token": "--radius-base → --border-radius-base", "type": "size", "default": "6px", "desc": "标准控件圆角（按钮/输入框）", "el_bridge": "--el-border-radius-base" },
+    "radius_lg": { "token": "--radius-lg → --border-radius-lg", "type": "size", "default": "8px", "desc": "卡片级圆角", "el_bridge": null },
+    "dialog_radius": { "token": "--dialog-border-radius", "type": "size", "default": "10px", "desc": "弹窗圆角（出厂 ReDialog 观感）", "el_bridge": null },
+    "switch_radius": { "token": "--switch-border-radius", "type": "size", "default": "10px", "desc": "开关圆角", "el_bridge": null }
+  }
+}

package/mapping/basic/semantic-values.json

@@ -1,72 +1,72 @@
-{
-  "$comment": "全局原子层 · 语义值译表（设计侧语义值 → 精确值）。设计侧 style/global 的值用语义名（如 钴蓝-5）时，parser 与 AI 施工按本表翻译为精确值。aliases 同时收录中文名（规范输出）与英文 token 名（cobalt-5，兼容拼写），两种写法等价。数据源：设计侧 skill page-specs/design-tokens.md §2-§5b（v1.0 对齐）。功能色五套主题同值，各主题各列一份便于按主题整体切换。",
-  "meta": {
-    "layer": "basic",
-    "domain": "semantic_values",
-    "version": "1.0.0",
-    "scene": "global",
-    "tech_stack": "vue3 + element-plus + vue3-web-temp"
-  },
-  "themes": {
-    "$comment": "每套主题的语义值全集。level 1-10 为主色渐变（5 = 品牌主色）。",
-    "cobalt": {
-      "label": "钴蓝",
-      "values": {
-        "钴蓝-1": "#E8F0FF", "钴蓝-2": "#C5D5FF", "钴蓝-3": "#8FB0FF", "钴蓝-4": "#407BFF",
-        "钴蓝-5": "#245BFF", "钴蓝-6": "#1546E0", "钴蓝-7": "#1546C9", "钴蓝-8": "#1239A8",
-        "钴蓝-9": "#0D2A7F", "钴蓝-10": "#081952",
-        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#245BFF", "链接色": "#245BFF"
-      }
-    },
-    "emerald": {
-      "label": "翠蓝",
-      "values": {
-        "翠蓝-1": "#E6FFFC", "翠蓝-2": "#B3F5EF", "翠蓝-3": "#7FE8E0", "翠蓝-4": "#33CFCE",
-        "翠蓝-5": "#00A8B5", "翠蓝-6": "#008F9C", "翠蓝-7": "#007A89", "翠蓝-8": "#005A6E",
-        "翠蓝-9": "#003F55", "翠蓝-10": "#002838",
-        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#00A8B5", "链接色": "#00A8B5"
-      }
-    },
-    "peacock": {
-      "label": "孔雀绿",
-      "values": {
-        "孔雀绿-1": "#E6FFF8", "孔雀绿-2": "#B3F5E3", "孔雀绿-3": "#7FE8CC", "孔雀绿-4": "#33D4A8",
-        "孔雀绿-5": "#009A7A", "孔雀绿-6": "#008566", "孔雀绿-7": "#006E55", "孔雀绿-8": "#005240",
-        "孔雀绿-9": "#003A2E", "孔雀绿-10": "#00261E",
-        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#009A7A", "链接色": "#009A7A"
-      }
-    },
-    "tangerine": {
-      "label": "橘橙",
-      "values": {
-        "橘橙-1": "#FFF3E6", "橘橙-2": "#FFDFC0", "橘橙-3": "#FFC080", "橘橙-4": "#FF9333",
-        "橘橙-5": "#FF6A00", "橘橙-6": "#E55A00", "橘橙-7": "#C44E00", "橘橙-8": "#9A3D00",
-        "橘橙-9": "#7A3000", "橘橙-10": "#522000",
-        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#FF6A00", "链接色": "#FF6A00"
-      }
-    },
-    "dawn": {
-      "label": "拂晓蓝",
-      "values": {
-        "拂晓蓝-1": "#E6F7FF", "拂晓蓝-2": "#BAE7FF", "拂晓蓝-3": "#91D5FF", "拂晓蓝-4": "#69C0FF",
-        "拂晓蓝-5": "#40A9FF", "拂晓蓝-6": "#1890FF", "拂晓蓝-7": "#096DD9", "拂晓蓝-8": "#0050B3",
-        "拂晓蓝-9": "#003A8C", "拂晓蓝-10": "#002766",
-        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#1890FF", "链接色": "#1890FF"
-      },
-      "$note": "拂晓蓝品牌主色为 L6 #1890FF（Ant Design 原生），与其他主题 L5=主色不同；输出 拂晓蓝-6 或 品牌主色 均可命中"
-    }
-  },
-  "neutral_aliases": {
-    "$comment": "主题无关的通用语义值（不属任何一套主题，任意主题下等值）。",
-    "values": {
-      "品牌主色": "$theme.5",
-      "品牌悬停色": "$theme.4",
-      "品牌点击色": "$theme.6"
-    },
-    "$note": "$theme.N 为占位：多套主题混用时 parser 无法消歧——AI 施工前须确认当次变更集的主題（global.brand_primary 或 notes 申报）；单主题变更集按其主题取 N 级值（拂晓蓝取 N+1，主色在 6）"
-  },
-  "usage": {
-    "parser": "match 时对 style/global 值做查表：命中本表 → 输出精确值；hex（#开头）→ 透传；未命中且非 hex → 记入字段级待补充并提示「非法定义语义值」",
-    "design_side": "官方 5 套主题一律语义值（中文名规范，如 钴蓝-5；英文 cobalt-5 兼容）；库外颜色走临时主题 hex + notes 申报"
-  }
-}
+{
+  "$comment": "全局原子层 · 语义值译表（设计侧语义值 → 精确值）。设计侧 style/global 的值用语义名（如 钴蓝-5）时，parser 与 AI 施工按本表翻译为精确值。aliases 同时收录中文名（规范输出）与英文 token 名（cobalt-5，兼容拼写），两种写法等价。数据源：设计侧 skill page-specs/design-tokens.md §2-§5b（v1.0 对齐）。功能色五套主题同值，各主题各列一份便于按主题整体切换。",
+  "meta": {
+    "layer": "basic",
+    "domain": "semantic_values",
+    "version": "1.0.0",
+    "scene": "global",
+    "tech_stack": "vue3 + element-plus + vue3-web-temp"
+  },
+  "themes": {
+    "$comment": "每套主题的语义值全集。level 1-10 为主色渐变（5 = 品牌主色）。",
+    "cobalt": {
+      "label": "钴蓝",
+      "values": {
+        "钴蓝-1": "#E8F0FF", "钴蓝-2": "#C5D5FF", "钴蓝-3": "#8FB0FF", "钴蓝-4": "#407BFF",
+        "钴蓝-5": "#245BFF", "钴蓝-6": "#1546E0", "钴蓝-7": "#1546C9", "钴蓝-8": "#1239A8",
+        "钴蓝-9": "#0D2A7F", "钴蓝-10": "#081952",
+        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#245BFF", "链接色": "#245BFF"
+      }
+    },
+    "emerald": {
+      "label": "翠蓝",
+      "values": {
+        "翠蓝-1": "#E6FFFC", "翠蓝-2": "#B3F5EF", "翠蓝-3": "#7FE8E0", "翠蓝-4": "#33CFCE",
+        "翠蓝-5": "#00A8B5", "翠蓝-6": "#008F9C", "翠蓝-7": "#007A89", "翠蓝-8": "#005A6E",
+        "翠蓝-9": "#003F55", "翠蓝-10": "#002838",
+        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#00A8B5", "链接色": "#00A8B5"
+      }
+    },
+    "peacock": {
+      "label": "孔雀绿",
+      "values": {
+        "孔雀绿-1": "#E6FFF8", "孔雀绿-2": "#B3F5E3", "孔雀绿-3": "#7FE8CC", "孔雀绿-4": "#33D4A8",
+        "孔雀绿-5": "#009A7A", "孔雀绿-6": "#008566", "孔雀绿-7": "#006E55", "孔雀绿-8": "#005240",
+        "孔雀绿-9": "#003A2E", "孔雀绿-10": "#00261E",
+        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#009A7A", "链接色": "#009A7A"
+      }
+    },
+    "tangerine": {
+      "label": "橘橙",
+      "values": {
+        "橘橙-1": "#FFF3E6", "橘橙-2": "#FFDFC0", "橘橙-3": "#FFC080", "橘橙-4": "#FF9333",
+        "橘橙-5": "#FF6A00", "橘橙-6": "#E55A00", "橘橙-7": "#C44E00", "橘橙-8": "#9A3D00",
+        "橘橙-9": "#7A3000", "橘橙-10": "#522000",
+        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#FF6A00", "链接色": "#FF6A00"
+      }
+    },
+    "dawn": {
+      "label": "拂晓蓝",
+      "values": {
+        "拂晓蓝-1": "#E6F7FF", "拂晓蓝-2": "#BAE7FF", "拂晓蓝-3": "#91D5FF", "拂晓蓝-4": "#69C0FF",
+        "拂晓蓝-5": "#40A9FF", "拂晓蓝-6": "#1890FF", "拂晓蓝-7": "#096DD9", "拂晓蓝-8": "#0050B3",
+        "拂晓蓝-9": "#003A8C", "拂晓蓝-10": "#002766",
+        "成功色": "#52C41A", "错误色": "#FF4D4F", "警告色": "#FAAD14", "信息色": "#1890FF", "链接色": "#1890FF"
+      },
+      "$note": "拂晓蓝品牌主色为 L6 #1890FF（Ant Design 原生），与其他主题 L5=主色不同；输出 拂晓蓝-6 或 品牌主色 均可命中"
+    }
+  },
+  "neutral_aliases": {
+    "$comment": "主题无关的通用语义值（不属任何一套主题，任意主题下等值）。",
+    "values": {
+      "品牌主色": "$theme.5",
+      "品牌悬停色": "$theme.4",
+      "品牌点击色": "$theme.6"
+    },
+    "$note": "$theme.N 为占位：多套主题混用时 parser 无法消歧——AI 施工前须确认当次变更集的主題（global.brand_primary 或 notes 申报）；单主题变更集按其主题取 N 级值（拂晓蓝取 N+1，主色在 6）"
+  },
+  "usage": {
+    "parser": "match 时对 style/global 值做查表：命中本表 → 输出精确值；hex（#开头）→ 透传；未命中且非 hex → 记入字段级待补充并提示「非法定义语义值」",
+    "design_side": "官方 5 套主题一律语义值（中文名规范，如 钴蓝-5；英文 cobalt-5 兼容）；库外颜色走临时主题 hex + notes 申报"
+  }
+}