@qilitt-mickey/vue3-temp-skill 1.1.47 → 1.1.48

package/mapping/component/overlay.json

@@ -58,6 +58,22 @@
         "hover_color": "--el-pagination-hover-color"
       },
       "custom_style_map": {}
+    },
+    "component.tooltip.base": {
+      "type": "global_component",
+      "component": "ElTooltip（原生）/ v-tippy（指令）",
+      "style_scope": ":root",
+      "css_vars": {
+        "bg_color": "--el-tooltip-bg-color",
+        "text_color": "--el-tooltip-color"
+      },
+      "custom_style_map": {
+        "radius": "border-radius",
+        "padding": "padding",
+        "font_size": "font-size",
+        "max_width": "max-width"
+      },
+      "$note": "全局提示气泡。项目内提示有**两条来路**——Element Plus 原生 ElTooltip（继承 --el-tooltip-* 令牌，如 ReAvatars 的 el-tooltip）与 v-tippy 指令（ReTableBar / ReCollapsible / ReAnchor / lay-tag 等处使用，走 tippy 主题，**不自动继承 --el-* 令牌**）。本条目面向 ElTooltip；若设计要求覆盖 v-tippy 气泡，须先确认 tippy 主题变量与本节令牌的对应关系，未映射时按「补通道」补主题变量并在交付说明单列申报（**不得假设自动生效**）。本条目为补建通道——此前登记表标 pending。"
     }
   }
 }

package/mapping/scenes/admin/content.json

@@ -308,6 +308,62 @@
       },
       "$note": "设计意图（§11.108-11.109）：列宽 72px 居中，缩略盒 40×40 圆角 6px。落地手段：列 className=col-thumb + el-image 40×40"
     },
+    "admin.content.table.selection_column": {
+      "type": "element",
+      "selector": ".vts-table-area .el-table__cell.el-table-column--selection",
+      "file": "业务 views（el-table-column type=\"selection\"；Element Plus 给选择列表头与单元格自动加 el-table-column--selection 类，无需业务自定义类名）",
+      "style_scope": ".vts-page-card",
+      "css_vars": {
+        "checked_bg": "--el-checkbox-checked-bg-color",
+        "checked_border": "--el-checkbox-checked-input-border-color",
+        "hover_border": "--el-checkbox-input-border-color-hover"
+      },
+      "custom_style_map": {
+        "text_align": "text-align",
+        "padding": "padding"
+      },
+      "anchors": [
+        { "kind": "class", "layer": "host", "target": ".vts-table-area .el-table__cell.el-table-column--selection" },
+        { "kind": "class", "layer": "inner", "target": ".vts-table-area .el-table__cell.el-table-column--selection > .cell" },
+        { "kind": "css_var", "target": "--el-checkbox-checked-bg-color" }
+      ],
+      "preconditions": [
+        "选择列由 el-table-column type=\"selection\" 渲染，Element Plus 自动在表头与单元格上加 el-table-column--selection 类——列未声明 type=selection 时本条目永不命中（项目源码实证：views/table/base/index.vue 已用 <el-table-column type=\"selection\" reserve-selection />）。",
+        "列宽与其他业务列同属**业务层**（设计侧不声明列宽）；本条目只承载对齐与勾选态配色。"
+      ],
+      "priority": {
+        "strategy": "scope_qualified",
+        "reason": "选择列无行内样式竞争，作用域限定到 .vts-page-card 即可覆盖。"
+      },
+      "$note": "设计意图（list-page §11.44 选择列）：窄列、居中、勾选态用主题主色。本条目为**补建通道**——此前登记表标 pending（项目侧无承载点位），选择列样式无处可落；勾选色走 EP 原生 --el-checkbox-* 令牌，随主题切换。"
+    },
+    "admin.content.table.row_density": {
+      "type": "element",
+      "selector": ".vts-table-area .el-table .el-table__cell",
+      "file": "src/components/ReTableBar/src/bar.vue（密度下拉：宽松/默认/紧凑 → el-table size = large/default/small）+ src/styles/element-plus.scss（单元格 padding 承载行高）",
+      "style_scope": ".vts-page-card",
+      "forms": {
+        "density": ["loose", "default", "compact"]
+      },
+      "css_vars": {},
+      "custom_style_map": {
+        "row_height": "min-height",
+        "cell_padding_y": "padding-block"
+      },
+      "anchors": [
+        { "kind": "class", "layer": "host", "target": ".vts-table-area .el-table .el-table__cell" },
+        { "kind": "class", "layer": "inner", "target": ".vts-table-area .el-table .el-table__cell > .cell" }
+      ],
+      "preconditions": [
+        "行高由「单元格 padding + 内容行高」共同决定（见 admin.content.table.cell）——声明行高档位时必须同时给出 padding 取值，只改其一会得到非预期行高。",
+        "出厂密度档位由 ReTableBar 的 size（large/default/small，源码实证 bar.vue 的宽松/默认/紧凑三项）驱动；设计侧只声明档位意图（form.density），具体 padding 由本项目按常规取值落定，不得照抄效果图某实例数据的行高。"
+      ],
+      "priority": {
+        "strategy": "scope_qualified",
+        "reason": "单元格 padding 属全局样式，作用域限定到 .vts-page-card 即可覆盖。"
+      },
+      "$note": "设计意图（list-page §11.40 行密度）：表格行高三档取一（宽松/默认/紧凑）。本条目为**补建通道**——此前登记表标 pending；语义档位 loose/default/compact ↔ 出厂 size large/default/small，项目侧负责映射。"
+    },
     "admin.content.table.area": {
       "type": "component",
       "component": "ElTable（useTableSearch tableHeight 定高）",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qilitt-mickey/vue3-temp-skill",
-  "version": "1.1.47",
+  "version": "1.1.48",
   "type": "module",
   "description": "Vue 3 企业级中后台项目开发规范技能包 — core-kernel 架构、按需功能模块",
   "bin": {

package/parser/index.js

@@ -84,7 +84,7 @@ function main() {
     case "audit":
       return cmdAudit(args, dataset);
     case "verify":
-      return cmdVerify(args);
+      return cmdVerify(args, dataset);
     case "registry":
       return cmdRegistry(args, dataset);
     default:
@@ -104,6 +104,8 @@ function printHelp() {
   node parser/index.js audit --project <dir> [<cs.json…>] 挂载点存在性 + 死通道静态审计（需目标项目源码）
   node parser/index.js verify --oracle <o.json> --actual <a.json> [--sids a,b]
                                                           渲染态逐点验收：computed style 期望 vs 实测 diff
+  node parser/index.js verify --oracle <o.json> --resolve [--sids a,b]
+                                                          实测端定位计划：sid → 词典 selector（项目页不打 data-sid 时按此抽取）
   node parser/index.js verify … --from-theme 钴蓝 --to-theme 橘橙
                                                           同构异色复用：按语义槽位把效果图色值归一为本主题色值再比（配合 oracle.theme_mapping）
   node parser/index.js registry <registry.json> [--verbose]
@@ -844,7 +846,29 @@ function checkRegistryCoverage(changeset, plan, opts = {}) {
   }
   if (changeset.global && Object.keys(changeset.global).length > 0)
     declared.add(GLOBAL_PSEUDO_ID);
-  const mockupSids = new Set(Array.isArray(changeset.oracle?.sids) ? changeset.oracle.sids : []);
+  const declaredSids = new Set(Array.isArray(changeset.oracle?.sids) ? changeset.oracle.sids : []);
+
+  // 实物闭合：打开 oracle.mockup 这个 HTML，数真实存在的 data-sid（不只看设计侧自报的 oracle.sids）
+  const mockupRef = changeset.oracle?.mockup;
+  let physicalSids = null;
+  let mockupFile = null;
+  if (typeof mockupRef === "string" && mockupRef.trim()) {
+    const cands = [path.resolve(mockupRef), path.resolve(ROOT, mockupRef), path.resolve(process.cwd(), mockupRef)];
+    for (const c of cands) {
+      try {
+        const html = readFileSync(c, "utf-8");
+        // 先剥离 HTML 注释再数 data-sid：注释内的同形串是说明文字、不是点位。
+        // 不剥离 → 注释可「兜住」一个实际缺失的标注，闸门全绿而基线为空（详见 mockup-extraction-spec.md §7.1）。
+        const stripped = html.replace(/<!--[\s\S]*?-->/g, "");
+        physicalSids = new Set([...stripped.matchAll(/data-sid\s*=\s*["']([^"']+)["']/g)].map(m => m[1]));
+        mockupFile = c;
+        break;
+      }
+      catch { /* 该候选路径不可读，试下一个 */ }
+    }
+  }
+  // 比对基准：优先效果图实物；实物读不到时退化为自报清单（并在下方告警）
+  const mockupSids = physicalSids || declaredSids;
 
   const applicable = items.filter(it => it.always === true || registrySids(it).some(s => mockupSids.has(s)));
   const gaps = applicable.filter(it => !registrySids(it).every(s => declared.has(s)));
@@ -853,6 +877,23 @@ function checkRegistryCoverage(changeset, plan, opts = {}) {
   console.log(`  登记表：${registryPath}（登记项 R=${items.length}）`);
   console.log(`  适用 A=${applicable.length} / 已兑现 C=${applicable.length - gaps.length} / 缺口 ${gaps.length}`);
 
+  // 实物校验：标注缺口的权威来源是效果图 HTML 里的 data-sid，而不是自报的 oracle.sids
+  let physicalGap = false;
+  if (physicalSids) {
+    console.log(`  效果图实物：${mockupFile}（实测 data-sid ${physicalSids.size} 个）`);
+    const declaredNoPhysical = [...declaredSids].filter(s => !physicalSids.has(s));
+    const physicalNoDeclared = [...physicalSids].filter(s => !declaredSids.has(s));
+    if (declaredNoPhysical.length > 0) {
+      console.log(`  ⚠ oracle.sids 声明了 ${declaredNoPhysical.length} 个点位，但效果图实物里没有对应 data-sid（无基线）：${declaredNoPhysical.join("、")}`);
+      physicalGap = true;
+    }
+    if (physicalNoDeclared.length > 0)
+      console.log(`  ℹ 效果图实物另有 ${physicalNoDeclared.length} 个 data-sid 未列入 oracle.sids（自报清单不全，不阻塞）：${physicalNoDeclared.join("、")}`);
+  }
+  else {
+    console.log(`  ⚠ 未能打开效果图实物（oracle.mockup 不可读）→ 本轮退化为按自报 oracle.sids 校验，实物闭合未生效`);
+  }
+
   // 效果图标注完整性：恒存在的子项必须能在效果图上找到同名 data-sid，否则基线根本抽不出来
   const unannotated = items.filter(it => it.always === true && !registrySids(it).some(s => mockupSids.has(s)));
   if (unannotated.length > 0) {
@@ -863,13 +904,20 @@ function checkRegistryCoverage(changeset, plan, opts = {}) {
     }
     console.log(`  ⚠ 效果图标注缺口 ${unannotated.length} 条：这些子项恒存在，却无同名 data-sid → 基线抽取不全`);
     console.log(`     涉及点位：${[...bySid.entries()].map(([s, n]) => `${s}(${n})`).join("、")}`);
+    physicalGap = true;
   }
 
-  if (gaps.length === 0) {
-    console.log(`  ✔ 覆盖率通过：C = A，无子项被静默丢失`);
+  if (gaps.length === 0 && !physicalGap) {
+    console.log(`  ✔ 覆盖率通过：C = A，无子项被静默丢失；效果图实物标注闭合`);
     return 0;
   }
 
+  if (gaps.length === 0 && physicalGap) {
+    console.log(`\n✘ 效果图实物标注不闭合 → exit 1（oracle.sids 与效果图 HTML 的 data-sid 不一致 / 恒存在子项缺标注）`);
+    console.log(`  处置：给效果图对应元素补 data-sid，或把该登记项降级 source: spec（见 mockup-extraction-spec.md §7）`);
+    return 1;
+  }
+
   const byGroup = new Map();
   for (const it of gaps) {
     const g = it.group || "（未分组）";
@@ -1296,9 +1344,10 @@ function cmdAudit(args, dataset) {
  * 本命令不做抽取，只做归一化 + 逐点 diff + 三类归因。
  *
  * CLI：node parser/index.js verify --oracle <oracle.json> --actual <actual.json> [--sids a,b,c]
+ *      实测端定位计划：node parser/index.js verify --oracle <oracle.json> --resolve [--sids a,b,c]
  * 退出码：存在缺口 → 1；全部命中 → 0。
  */
-function cmdVerify(args) {
+function cmdVerify(args, dataset) {
   // 几何 / 盒模型属性：值对不上 = 语境错位（宿主盒 / 内层盒模型 / 层叠上下文不同）
   const GEOMETRY_PROPS = new Set([
     "display", "position", "top", "right", "bottom", "left", "box-sizing",
@@ -1322,8 +1371,10 @@ function cmdVerify(args) {
   };
   const oraclePath = get("--oracle");
   const actualPath = get("--actual");
-  if (!oraclePath || !actualPath) {
+  const resolveOnly = args.includes("--resolve");
+  if (!oraclePath || (!resolveOnly && !actualPath)) {
     console.error("✖ 缺少参数：node parser/index.js verify --oracle <oracle.json> --actual <actual.json> [--sids a,b,c]");
+    console.error("    或输出实测端定位计划：node parser/index.js verify --oracle <oracle.json> --resolve [--sids a,b,c]");
     process.exit(1);
   }
   const sidsArg = get("--sids");
@@ -1356,12 +1407,53 @@ function cmdVerify(args) {
   };
 
   const oracle = readDump(oraclePath, "效果图期望");
-  const actual = readDump(actualPath, "项目实测");
 
   let sids = Object.keys(oracle);
   if (sidFilter)
     sids = sids.filter(s => sidFilter.has(s));
 
+  // 实测端定位闭合：--resolve 输出「sid → 词典 selector」抽取计划。
+  // 效果图端用 data-sid（设计侧自控）；项目页端不要求打 data-sid —— 浏览器按本计划的 selector 抽取。
+  if (resolveOnly) {
+    const index = buildMergedIndex(dataset || {});
+    console.log(`\n=== 实测端定位计划（sid → 词典 selector）===`);
+    console.log(`用途：项目页不要求打 data-sid —— 浏览器抽取脚本按下列 selector 定位元素取 computed style 生成 actual.json`);
+    console.log(`selector 挂载点存在性由 audit 静态校验；本计划只回答「按什么定位」。\n`);
+    let missing = 0;
+    for (const sid of sids) {
+      const entry = index[sid];
+      if (!entry) {
+        console.log(`  ✘ ${sid} —— 词典无此条目（L3 新点位，先落地并回写临时映射）`);
+        missing++;
+        continue;
+      }
+      const sels = [];
+      if (Array.isArray(entry.anchors)) {
+        for (const a of entry.anchors) {
+          if (a && a.kind === "class" && a.target)
+            sels.push(`[${a.layer || "host"}] ${a.target}`);
+        }
+      }
+      if (sels.length === 0 && entry.selector)
+        sels.push(`[host] ${entry.selector}`);
+      if (sels.length === 0) {
+        console.log(`  ✘ ${sid} —— 词典条目无 selector / anchors，无法定位`);
+        missing++;
+        continue;
+      }
+      console.log(`  · ${sid}`);
+      for (const s of sels)
+        console.log(`      ${s}`);
+    }
+    console.log(`\n汇总：${sids.length} 点位，${missing} 个无法定位`);
+    console.log(`抽取属性白名单两端必须一致（padding / font-size / font-weight / text-align / color / background-color / border-radius / gap 等，见 mockup-extraction-spec §3）；同构异色复用再加 --from-theme/--to-theme 做色值归一。`);
+    if (missing > 0)
+      process.exitCode = 1;
+    return;
+  }
+
+  const actual = readDump(actualPath, "项目实测");
+
   const normProp = p => String(p).trim().toLowerCase().replace(/_/g, "-");
   const normValue = v => {
     let s = String(v == null ? "" : v).trim().toLowerCase().replace(/\s+/g, " ");

package/references/design-apply.md

@@ -103,11 +103,41 @@ parser match（确定性翻译）→ 施工坐标 → AI 按坐标改代码 →
 
 ## 执行流程（按序，禁止跳步）
 
-### 第 0 步 · 版本与场景检查
+### 第 0 步 · 版本与场景检查 · 对接匹配（适配前置）· 运行时清场
+
+**0.1 版本与场景检查**
 
 - 变更集 `schema` 版本不在支持范围 → 停止，向上游（用户/设计侧）报告版本不匹配，不降级猜测。
 - `scene` 在 `parser list` 场景清单中无对应域 → 报告并列出支持的场景，等待确认。
 
+**0.2 对接匹配（适配前置）——把散落的匹配收拢为一个前置阶段**
+
+在施工前，把「设计意图 ⇄ 模板能力」整体对一遍，输出匹配结论，供**生成前**决策（而不是落地时才发现对不上）。三步判定：
+
+| 级 | 判定 | 依据 |
+|---|---|---|
+| **布局级** | `layout_type` 命中标准枚举？ | 命中 → 切布局模板池（§5.2）；未命中 → 变体派生 / 定制生成骨架（§5.3 / §5.4） |
+| **点位级** | 逐 id 三级匹配 | 一级完整命中 / 二级父级命中 / 三级未命中（§4.1） |
+| **形态级** | `form` 在条目 `forms` 枚举内？`structure_ops` 所需 DOM 钩子是否存在？ | 词典 `forms` / 模板源码 / `audit` |
+
+**输出三类结论，处置全在项目侧**：
+
+| 结论 | 判据 | 处置 |
+|---|---|---|
+| 完全匹配 | L1 ∧ form 在枚举 ∧ 无需结构 | 直接施工 |
+| 可派生 | L2 / 变体布局 / form 可映射 | 派生骨架或继承父级后施工 |
+| 需适配 | L3 / 定制布局 / 缺通道 / 需新 DOM | **先补通道 / 结构增量 / 生成骨架，再生成**；交付说明单列申报 |
+
+> **总原则（红线）：设计为主，项目侧适配。** 设计效果是目标态，模板是待适配的一方。"设计 ↔ 模板对不上"的出口**永远在项目侧**——**不回流设计侧改设计**。只有「设计侧未给值 / 值非法」（**意图缺口**）才回流设计侧。严禁以「模板不支持」为由要求设计改图。
+
+**0.3 运行时主题清场（T 通道先于 D/S/C）**
+
+主色 / 主题走的是**运行时通道**：`setEpThemeColor()` 把 `--el-color-primary` 写成 `documentElement` 的**内联样式**并持久化到 localStorage（读取优先级 = 浏览器持久化 ?? `platform-config.json`）。**内联样式 + 运行时持久化 ⇒ 设计层 CSS 与词典 selector 都赢不了。**
+
+- 落地前先读 localStorage（键 `responsive-layout`）的 `theme` / `epThemeColor`，与本变更集主题**不一致时清 key 或显式重设**；
+- 清场动作与结果写入交付说明（可回溯）；
+- **不清场则颜色类差异全部失真**——归因前必须先确认起点已对齐，否则会把「环境残留」误判成「落地失败」。
+
 ### 第 1 步 · parser 确定性匹配
 
 ```bash
@@ -347,6 +377,7 @@ html .navbar .navbar-breadcrumb-wrap {
 
 ### 第 4 步 · L3 新模块处理（分级布局）
 
+- **验收对象闸（角色集合必须齐）**：验收页面的**角色集合**必须覆盖变更集声明的角色。缺角色的，按第 0.2 步「对接匹配 → 需适配」处置——**项目侧补齐该角色的骨架 / 结构**（走 `crud-pages` 样板 + L3 落地并申报），**不是要求设计侧换页面**。不得用出厂 demo 页充数：demo 页**结构上就没有**标题区 / 批量按钮 / 状态 Tag 这些角色 → 这类差异**无论怎么调 CSS 都消不掉**（不是样式问题，是角色集合不匹配）。
 - **列宽口径（业务层 / 设计层边界）**：表格**业务列宽度属业务层**，设计侧不声明、项目侧不按效果图硬套——效果图里的列宽只是其示例数据下的参考值。**唯一例外是操作列**：宽度由组件公式推算（`resolveOperateColumnWidth`，已含分割线占位），业务页禁止写死。**固定列自查（落完后必做，防「符合规范但不合常规」）**：操作列按钮不被裁、不换行、分割线居中可见；状态列标签完整；表头/单元格标题不被省略号截断——任何一项不满足即返工，禁止用「设计值就是对的」搪塞。
 
 - **L3 是施工指令，不是待办**：词典未命中的点位一律当场落地、交付说明申报「补映射」，不留待确认。新模块按「定制布局」三步走：① 基于全局规范生成结构（继承命名/作用域/组件规范）② 原子层字段（色彩/圆角/组件级）从 `basic/` + `component/` 词典借力 ③ 场景专属点位生成后**立即写入 mapping/ 对应场景域**（临时映射），累计复用 ≥3 次建议升级标准（由人工评审）。
@@ -398,8 +429,12 @@ html .navbar .navbar-breadcrumb-wrap {
 **链路（抽取由浏览器完成，diff 由 parser 完成）**：
 
 1. **抽取期望值**：在浏览器打开效果图（`oracle.mockup`，元素已带 `data-sid`），对 `oracle.sids` 中每个 sid 取其代表性元素的 computed style，导出为 `{ "<sid>": { "<css属性>": "<值>" } }` → `oracle.json`。
-2. **抽取实测值**：在浏览器打开已落地页面，对同名 `data-sid` 元素做同样抽取 → `actual.json`。
-   > 抽取脚本可用 Playwright / 浏览器控制台执行：`document.querySelectorAll('[data-sid]')` 遍历，读取 `getComputedStyle(el)` 的白名单属性（padding / font-size / font-weight / text-align / color / background-color / border-radius / gap 等）。两个页面的属性白名单必须一致，否则出现假缺口。
+2. **抽取实测值**：在浏览器打开已落地页面，**按词典 `selector` / `anchors.target` 定位元素**（**项目页不要求打 `data-sid`**）做抽取 → `actual.json`。
+   - 先跑 `node parser/index.js verify --oracle oracle.json --resolve` 得到「sid → 词典 selector」定位计划；
+   - 抽取脚本（Playwright / 浏览器控制台）按计划 selector 取 `getComputedStyle(el)` 的白名单属性（padding / font-size / font-weight / text-align / color / background-color / border-radius / gap 等）；
+   - **期望端（效果图）用 `data-sid`、实测端（项目页）用词典 selector——两侧定位方式不必对称**：效果图是设计侧自控产物，项目页是消费方、不感知设计坐标。selector 挂载点错位由 `audit` 先于 `verify` 报出，责任链回到词典；
+   - 期望值**优先直接消费设计侧交付的 `oracle.json` 抽取产物**（期望 / 实测同源同口径）；无产物时再从 `oracle.mockup` 现场抽取；
+   - 两个页面的属性白名单必须一致，否则出现假缺口。
 3. **逐点 diff**：
    ```bash
    node parser/index.js verify --oracle oracle.json --actual actual.json