@qilitt-mickey/vue3-temp-skill 1.1.63 → 1.1.64

package/SKILL.md

@@ -32,7 +32,7 @@ tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-qua
 
 1. **项目探查**：读取目标项目的 `package.json`、路由、页面、`Re*` 组件、Hooks、API 和样式；以源码事实为准。
 2. **能力路由**：运行 `scripts/match.py "需求" --json`，**仅**按输出中的 `load_files` 阅读 reference；禁止自行展开全部 `references/`。无 Python 时按下方能力组表手动匹配。
-3. **质量闸门**：代码完成后读取 `references/code-quality.md`，执行清单和项目命令。
+3. **质量闸门**：代码完成后读取 `references/code-quality.md`，执行清单和项目命令。设计变更集落地后追加**设计层闭环审计**：`node scripts/design-audit.mjs --project <落地项目> --container-width <内容区实际宽>`（ERROR 必须清零；无落地项目时自动跳过）。
 
 ## 能力组路由
 
@@ -51,7 +51,7 @@ tags: [vue3, typescript, element-plus, pinia, vite, unocss, crud, demo, code-qua
 | `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/` |
+| `design-apply` | 设计变更集落地：语义 ID 三级匹配、结构/形态/两层样式转换、锚点与结构施工、覆写提权、渲染态验收、合规闸门。**主入口 `design-apply.md`（红线+契约+步骤索引），各步骤明细见 `references/steps/`——做到哪一步读哪一份** | `design-apply.md`、`steps/`、`mapping/`、`parser/`、`scripts/design-audit.mjs` |
 
 ## 工作流
 

package/mapping/scenes/admin/content.json

@@ -152,7 +152,7 @@
       "data_channels": {
         "slot_width": "等宽槽宽度通道（动态优先）：**槽宽默认由组件按按钮文案动态自适应**（ReTableOperate 的 --re-op-slot-w 在 slotMinWidth 省略时走 resolveOperateSlotWidthPx 自动推算），变更集**不声明 slot_width、业务页不传 slot-min-width** ——设计只声明 divider 几何（width/height/margin_x），槽宽随内容走、divider_margin_x 对称由槽内居中兑现（若声明 60px 钉死槽宽则违反动态优先；若槽内用 flex-start，短文案按钮的残白会全堆到分割线前侧 → 线前 40px/线后 8px 视觉不等距）。仅当设计效果图确实要求**统一槽宽**（如所有操作列等宽对齐网格）时例外：变更集显式声明 slot_width → 施工落业务页 prop（结构通道），禁 CSS 仿冒；无此明确设计意图 = 保持动态。等宽槽本体是对齐机制（槽边界保证行间第 N 项对齐），机制本身禁 CSS 收口 width:auto"
       },
-      "$note": "操作列分割线为**条件通道**：出厂组件当前**没有**分割线元素——声明 divider_color / divider_gap 时，必须先按 structure_ops 在 ReTableOperate 模板按钮间 add_node `<span class=\"re-table-operate__divider\">`（中性元素，几何与颜色全走令牌：width/height/gap/color 分别挂 --re-op-divider-width/height/gap/color，出厂缺省 0 不可见），并同步给 resolveOperateColumnWidth 公式补分割线占位（(limit-1)×(width+2×gap)），否则最后按钮被裁——元素与公式缺一即申报补通道失败。列宽由组件公式推算，业务页禁止写死 width——列宽属业务层，设计侧不声明列宽（操作列除外）。",
+      "$note": "操作列分割线为**条件通道**：出厂组件当前**没有**分割线元素——声明 divider_color / divider_gap 时，必须先按 structure_ops 在 ReTableOperate 模板按钮间 add_node `<span class=\"re-table-operate__divider\">`（中性元素，几何与颜色全走令牌：width/height/gap/color 分别挂 --re-op-divider-width/height/gap/color，出厂缺省 0 不可见），并同步给 resolveOperateColumnWidth 公式补分割线占位（(limit-1)×(width+2×gap)），否则最后按钮被裁——元素与公式缺一即申报补通道失败。列宽由组件公式推算，业务页禁止写死 width；其余业务列（含选择列、序号列）逐列声明 width 或 min_width，见 admin.content.table.column_width（§11.132）。",
       "custom_style_map": {
         "align": "text-align",
         "min_width": "min-width",
@@ -279,7 +279,27 @@
         { "kind": "class", "layer": "host", "target": ".vts-table-area .el-table__cell.col-index" },
         { "kind": "class", "layer": "inner", "target": ".vts-table-area .el-table__cell.col-index > .cell" }
       ],
-      "$note": "序号列宽度属业务层（与选择列/操作列同为列宽业务归属）：本条目仅当设计明确固定序号列宽时，经 structure_ops 在列定义绑定 class-name=col-index 并设 width prop 落地（禁 CSS 收口 width）。默认宽度由业务列定义控制，避免「序号列过宽挤压内容列 / 类型列被压窄」这类列宽失衡。设计侧不声明列宽时项目侧保留出厂值。"
+      "$note": "序号列宽度由设计侧给出意图（§11.131）：固定 → structure_ops 在列定义绑定 class-name=col-index 并设 width prop；自适应 → 设 min-width prop。两种都必须显式声明，禁 CSS 收口 width（对表格列无效）。不声明 = 该列被相邻固定宽列挤压。"
+    },
+    "admin.content.table.column_width": {
+      "type": "element",
+      "selector": ".vts-table-area .el-table__cell",
+      "file": "业务 views（el-table-column 的 width / min-width prop；禁止写 CSS）",
+      "style_scope": ".vts-page-card",
+      "data_channels": {
+        "column_width": "固定宽通道：逐列映射到 el-table-column 的 width prop（该列不参与剩余空间分配）",
+        "min_width": "伸缩下限通道：逐列映射到 min-width prop（按比例吃剩余空间，容器不足时保住下限并触发横向滚动）",
+        "budget": "容器预算通道：Σ(width) + Σ(min-width) 与容器可用宽的比对结论（设计侧先算，项目侧据此决定是否启用横向滚动）"
+      },
+      "anchors": [
+        { "kind": "class", "layer": "host", "target": ".vts-table-area .el-table__cell" }
+      ],
+      "preconditions": [
+        "列宽必须落列定义（width / min-width prop），落 CSS 无效 —— 表格布局由列定义驱动，样式层写 width 对该列不产生效果。",
+        "每一列都必须给出宽度意图：既无 width 又无 min-width 的列，表格布局只能按出厂默认下限兜底，并被相邻固定宽列挤压。",
+        "伸缩列下限不得低于「表头文案宽 + 左右内边距」，否则表头文案会被压到换行或省略号截断。"
+      ],
+      "$note": "列宽契约（list-page §11.132）：逐列声明 width（固定）或 min_width（伸缩），二者必居其一；设计侧同时给出容器预算结论（Σ 列宽 vs 容器可用宽），预算不足时以横向滚动为唯一出口，禁止留给项目侧隐形压缩。"
     },
     "admin.content.table.cell_status": {
       "type": "element",
@@ -387,7 +407,7 @@
       ],
       "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 />）。",
-        "列宽与其他业务列同属**业务层**（设计侧不声明列宽）；本条目只承载对齐与勾选态配色。"
+        "列宽经 admin.content.table.column_width 逐列声明（§11.132，width 或 min_width 必居其一）；本条目只承载对齐与勾选态配色。"
       ],
       "priority": {
         "strategy": "scope_qualified",

package/mapping/scenes/admin/layout.json

@@ -106,7 +106,8 @@
       ],
       "preconditions": [
         "出厂菜单项盒模型是「无横向 margin（margin: 4px 0）+ 胶囊用 inset 内缩」；指示条几何必须以这个宿主盒为基准计算偏移。照搬外部效果图上「依赖菜单项横向 margin」的负偏移量会落进容器外并被 overflow 裁掉（这是指示条「映射了却没效果」的根因：值搬了、让该值成立的宿主盒模型没搬）。",
-        "--vts-theme-menu-active-before 出厂为透明且全项目无消费者；声明 indicator_* 形态必须成对落地「关胶囊令牌 + 新建消费者」，只改色值不建消费者 = 未施工。"
+        "--vts-theme-menu-active-before 出厂为透明且全项目无消费者；声明 indicator_* 形态必须成对落地「关胶囊令牌 + 新建消费者」，只改色值不建消费者 = 未施工。",
+        "激活态作用层级（active_scope，默认 leaf）：胶囊与指示条**只作用于叶子菜单项**（.el-menu-item.is-active）。可展开分组的标题（.el-sub-menu__title）在「其下有激活子项」时会被 EP 打上 is-active，**不得**继承胶囊与指示条——否则分组标题同时长出胶囊、竖条并与右侧展开箭头叠压。设计层写激活态时必须把选择器锚定叶子项，禁止把 .el-sub-menu.is-active > .el-sub-menu__title 与 .el-menu-item.is-active 并列写成同一组激活声明。"
       ],
       "priority": {
         "strategy": "deep_qualified",
@@ -223,11 +224,18 @@
       "style_scope": ".navbar",
       "forms": {
         "icon_only": "出厂现状：纯图标触发器（.language-trigger > .language-icon），下拉菜单选语言",
-        "inline_switch": "并排切换形态（下拉项平铺为触发器旁的切换组）"
+        "inline_switch": "并排切换形态：中 / EN 平铺在触发器内，点击即切换。**落地必须成套三件事**——① 显并排文字（.language-text 由隐藏改可见）；② 收口图标（suppress icon_only）；③ **收口下拉浮层**（suppress dropdown_popper：出厂 ElDropdown 的 popper 必须不再弹出，否则点触发器会从下方展开 English/中文 浮层遮挡页签栏）。缺③ = 形态未落地（只加了文字、交互仍是下拉）"
       },
       "suppress_rules": {
-        "inline_switch": ["icon_only"]
+        "inline_switch": ["icon_only", "dropdown_popper"]
       },
+      "structure_ops_required": {
+        "inline_switch": ["收口 ElDropdown 触发（改 trigger 为不可弹出 / 移除 dropdown 插槽消费 / 用保形 v-if 切换为直选按钮任一），使点击不再产生浮层"]
+      },
+      "preconditions": [
+        "语言切换的形态由 form 决定，且 form 是「加法 + 减法」成对语义：inline_switch 不仅要新增并排文字，还必须收口出厂的下拉浮层与图标形态。只加不减时，浮层仍会弹出（触发器与浮层二者并存），视觉上从触发器下方展开的浮层会压住页签栏。",
+        "浮层属 teleport 到 body 的 popper，样式层无法收口（.language-trigger 上的规则管不到 popper）；必须从结构层收口 ElDropdown 的触发行为。"
+      ],
       "css_vars": {
         "icon_color": "--el-text-color-regular",
         "hover_bg": "--el-fill-color-light"
@@ -242,7 +250,7 @@
         "text_font_size": "font-size",
         "text_color": "color"
       },
-      "$note": "inline_switch 并排切换形态：下拉项平铺为触发器旁切换组，按 v-if 保形切换增量插入，不删原代码"
+      "$note": "inline_switch 并排切换形态：下拉项平铺为触发器旁切换组，按 v-if 保形切换增量插入，不删原代码；同时收口图标形态与下拉浮层（浮层属 teleport popper，样式层管不到，必须结构收口）。"
     },
     "admin.layout.header.collapse_trigger": {
       "type": "element",
@@ -414,7 +422,7 @@
       "file": "src/layout/components/lay-tag/index.vue（首页页签 = multiTags 首项；真实 DOM 无 .home-item 类）",
       "style_scope": ".tags-view",
       "forms": {
-        "icon_only": "出厂默认：首位渲染 home 图标（meta.icon 缺省回退 'home'），无标题文字",
+        "icon_only": "出厂默认：首位渲染 home 图标（meta.icon 缺省回退 'home'），无标题文字。**落地必须成对：显图标 + 隐标题**——项宽固定 40px，图标与标题共存时标题会被挤成截断（如「工作台」→「工…」）。隐标题经 text_visible 字段（display）落 .card-tab 标题元素；只显图标不收标题 = 形态未落地",
         "text": "纯文字首位页签（隐藏图标且不占位）"
       },
       "$comment": "真实 DOM：.scroll-item（首项）> .card-tab，图标经 resolveCardTabIcon 渲染 svg-icon.card-tab-icon。出厂解析规则是数据驱动的：index===0 回退 'home'，其余按 meta.icon 有无渲染（空则不渲染不占位）——因此「有无图标」是-menu 数据/变更集可动态决定的，不是源码常量。尺寸类意图（如 40×40）由变更集 style 字段给出，词典不预设具体设计值。",
@@ -422,12 +430,17 @@
         "width": "--vts-tag-card-height",
         "height": "--vts-tag-card-height"
       },
+  "sub_selectors": {
+    "icon": ".card-tab .card-tab-icon",
+    "title": ".card-tab .tag-title"
+  },
       "custom_style_map": {
         "icon_size": "font-size",
         "icon_color": "color",
-        "divider_color": "border-left-color"
+        "divider_color": "border-left-color",
+        "text_visible": "display"
       },
-      "$note": "divider（首页页签与首个业务页签间的 1px 竖线分割）属子元素结构样式，设计侧通过 divider_color 表达视觉意图。落地口径：首页页签项宽=高=--vts-tag-card-height(40px) 居中，经 .tags-view .scroll-item:nth-child(1) 覆写 padding 实现正方形图标钮"
+      "$note": "divider（首页页签与首个业务页签间的 1px 竖线分割）属子元素结构样式，设计侧通过 divider_color 表达视觉意图。落地口径：首页页签项宽=高=--vts-tag-card-height(40px) 居中，经 .tags-view .scroll-item:nth-child(1) 覆写 padding 实现正方形图标钮；icon_only 形态必须同时把标题收口（text_visible=none），否则 40px 内图标+标题并存、标题被截断。"
     },
     "admin.layout.tabs.item": {
       "type": "element",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qilitt-mickey/vue3-temp-skill",
-  "version": "1.1.63",
+  "version": "1.1.64",
   "type": "module",
   "description": "Vue 3 企业级中后台项目开发规范技能包 — core-kernel 架构、按需功能模块",
   "bin": {
@@ -30,6 +30,7 @@
     "check": "node scripts/check.mjs",
     "prepack": "node scripts/check.mjs",
     "validate": "node scripts/validate.mjs",
+    "audit": "node scripts/design-audit.mjs",
     "match": "python scripts/match.py",
     "match:batch": "python scripts/match.py --batch",
     "mapping:build": "node parser/index.js build",

package/references/steps/step5-gates.md

@@ -37,7 +37,19 @@
 - [ ] **结构施工兑现检查（structure_ops 逐条对账，与红线同级）**：变更集 `structure_ops[]` 的**每一条 op** 都必须在交付说明给出「op → 落在哪个文件 / 哪个节点 / 怎么落的」；`add_node` 必须真的新增了元素或渲染分支（模板 diff 可验），`bind_source` 必须真的改了绑定（`class-name` / `align` / `formatter`）。出现「声明了 op、代码里找不到对应改动」= 交付不完整，禁止只改 CSS 冒充结构施工
 - [ ] **同权重失效检查（ · 专查「写了不生效」）**：逐条核对设计层新增规则是否真能取胜——① 对手是组件 `<style scoped>` 时，本条特异度必须**严格高于**它（**平手即错**，因为组件样式在全局之后注入）；② 对手带 `!important` 时本条必须同样 `!important`，或改走通道变量。**判定方法（必须真数，不许目测）**：对每条新规则与其对手分别写出特异度三元组 `(a,b,c)` 并**逐位比较（先 b 后 c）**，本条的 `b` 不大于对手即判为「失效」；`html` / `body` 只加 `c` 位，**对手 `b` 更高时加 `html body` 无效**，必须靠**加类**（祖先链补稳定语义类，如 `.el-menu`）把 `b` 抬到相等。同 `b` 时，`c` 更高者胜。③ **出厂用语义令牌间接设置该属性时（`var(--vts-theme-*)`），必须先走「令牌重映射」而不是抢属性**——在令牌宿主作用域重声明令牌即生效、零权重战争；只有无令牌或令牌语义不符时才抢属性。典型失效例：面包屑 `display:none`（与组件 scoped 同为 0,2,0）→ 照旧显示；页签关闭钮 `opacity`（同为 0,5,0）→ 仍要 hover 才显；页签项 `padding`（对手带 `!important`）→ 无论怎么抬特异度都改不动；**侧栏菜单 `color`（`b=2` 输给出厂 `b=3` + `!important`）→ 整栏菜单文字用浅色主题的黑色落在深色侧栏上、字全部消失**
 - [ ] **oracle 基线可用性检查**：变更集带 `oracle` 时——① `oracle.mockup` 必须与**本次主题、本次页面**一致；**同构异色复用除外**：变更集声明 `oracle.theme_mapping: { "from": "<效果图主题>", "to": "<本次主题>" }`（同场景 / 同页面 / 同角色集合、仅主题色板不同）时，允许复用 from 主题效果图，verify 必须带 `--from-theme/--to-theme` 做色值归一，**不得因换主题色就判死闭环**；结构 / 形态有差异时禁止复用；② `oracle.sids` 与 `changes[]` **双向闭合**：效果图里有、changes[] 未声明 = **欠声明**（该点位永远不可能被还原）；changes[] 已声明、效果图无 sid = **无基线**——**仅 `visible:false` 的隐藏点位豁免**（效果图上无可见元素可标 `data-sid`，parser 已自动豁免并打印清单）。其余两类出现即回流设计侧补齐，**不得直接开工**（`parser match` 已自动报出）；③ **状态性期望与孤儿对账（G14/G15，抽取产物层）**：效果图上有可见状态性表现的点位（禁用置灰 / 激活 / 选中）→ `oracle.json.states` 必须有对应 `<sid>@<state>` 期望（缺失 = 状态维度放弃验收）；交付前核对项目页渲染的每个区块都在 oracle 全集（sids ∪ absent ∪ residual ∪ states）内——孤儿点位 verify 当场 exit 1，提前自查可省一轮返工
-- [ ] **dark.scss 暗色同步**：新增视觉规则在 `html.dark` 有对应覆盖
+- [ ] **设计层闭环审计闸（机器断言，ERROR 必须清零）**：施工完成后跑 `node scripts/design-audit.mjs --project <落地项目> --container-width <内容区实际宽>`，或 `VUE3_AUDIT_PROJECT=<落地项目> npm run check`。本闸把「声明了 ≠ 生效」拆成逐条静态断言，替代肉眼目视，任一 ERROR 即视为未交付。**与 `parser/index.js audit` 的分工**：parser audit 管「通道与挂载点」（selector 有没有挂载点、变量有没有消费者），本闸管「生效性与形态」（层路由、层叠胜负、列宽预算、收口断言、形态成对）；E1/E4 是两者的故意重叠项，用作交叉校验：
+  - E1 变量悬空 → 使用了项目内无定义且无 `var()` 回退的自有变量，整条声明失效
+  - E2 层错位 → 内层盒属性族（`white-space` / `text-overflow` / `overflow` / `text-align` / `line-height` / `vertical-align` / `word-break`）写在表格宿主盒 `th/td.el-table__cell` 上而非 `> .cell`，会被 Element Plus 内层 `.cell` 覆盖
+  - E3 **层叠败北** → 本条声明的作用元素上的特异度 ≤ 组件 scoped 竞争者的实际特异度（scoped 编译会给末位选择器追加 `[data-v]`，等价 +1 类级；平手判负，因为组件样式晚于全局注入）
+  - E4 选择器挂空 → 设计层使用的项目类名在 `src/` 无挂载点（锚点必须锚「实际在」）
+  - E5 **列宽预算** → 存在既无 `width` 又无 `min-width` 的业务列；或 `min-width` 小于该列表头文案的最小占宽；或列宽合计溢出容器而未见滚动策略
+  - E6 收口断言 → 变更集 `visible:false` 的点位必须在设计层找到「命中该锚点且 `display:none !important`」的落点
+  - E7 激活态越层 → 激活胶囊/指示条写到了可展开分组的标题上（`.el-sub-menu__title` 须显式排除）
+  - E8 浮层残留 → 声明收口下拉浮层的 form，组件却仍保留 `ElDropdown` / `#dropdown` 消费（teleport 浮层样式层收不掉，必须结构收口）
+  - E9 形态收口缺件 → `icon_only` 只落了「显图标」而没有**在同一作用域内**收口文案（作用域外的兄弟变体收口不算成对）
+  - E10 scoped 挂空 → 组件 scoped 规则依赖运行时并不存在的类（结构重构后残留，永不命中）
+- [ ] **列宽由表头文案反推（E5 落地口径）**：每个业务列（含选择列、序号列）都要显式声明 `width` 或 `min-width`，取值 ≥ 该列表头文案宽度 + 左右各 16px 内边距（CJK 按 1em、ASCII 按 0.6em 估）。无宽列只能拿出厂兜底宽度参与布局，会被相邻固定宽列挤压——**表头换行与省略号截断的唯一根因就在这里**，不接受「跑起来看着还行」
+
 - [ ] **缺口清单只含意图缺口**：清单每一项都必须是「设计侧未给值 / 值非法」且已注明「回流设计侧补齐」；能力缺口（词典缺 ID / 缺字段枚举 / 缺 form）不得出现在清单里——出现即把可落地项搁置
 - [ ] **台账逐行兑现对账（对账闸门）**：把设计侧交付的提取台账逐行过一遍，每行必须有落地结论——已落地（写明落在哪个文件/选择器）或已入缺口清单（写明缺失字段）。存在「台账有行、落地无结论」的行 = 交付不完整，与红线同级
 - [ ] **登记表覆盖率对账（子项级细闸，）**：带登记表交付时必须跑 `match --registry`——`C = A` 且无缺口才可交付；同时确认无「效果图标注缺口」（`always:true` 子项在效果图上都有同名 `data-sid`）。**禁止采信设计侧自报的 `coverage` 数字**（parser 会当场重算，自报数不参与）；缺口逐条点名回流设计侧

package/references/steps/step6-verify.md

@@ -71,5 +71,7 @@ node parser/index.js verify --oracle oracle.json --actual actual.json --baseline
 **夹具与设计资产的边界（职责单侧沉淀红线）**：`「页面名-主题」`命名法（如 `运单管理-钴蓝.html`）是设计侧效果图库的专属资产命名——**项目侧（含 parser/fixtures 回归夹具）禁止出现与设计侧资产同名的文件**。回归需要 mockup 实物时，一律用「回归夹具-」前缀合成名（如 `回归夹具-列表页-钴蓝.html`），点集为回归机制定制、与真基线**不同且不可互替**；真实效果图基线唯一沉淀在设计侧 `page-specs/styles/<方案>/scenes/<场景>/mockups/`，项目侧 `oracle.mockup` 指向它靠 `resolveFirstExisting` 跨库解析（变更集同目录 → cwd → 技能根 → 设计侧兄弟目录），不做本地拷贝。
 
 - 验收结果写入最终回复（命中 N / 缺口 M / 归因分布 / 修正）与 `code-quality` 结果块；**不得只报「已完成」**。
+- **入场前置：闭环审计闸必须已清零**。`node scripts/design-audit.mjs --project <落地项目> --container-width <内容区实际宽>` 存在 ERROR 时不得进入渲染态验收——层错位 / 层叠败北 / 无宽列这类失效会让 verify 侧出现「期望值取不到」或「值对但不生效」的假缺口，先修闸门再比对，否则每轮都在给同一个根因换皮。
 - 变更集无 `oracle` 时输出 `N/A`（无基线），并在交付说明注明「无验收基线」——这是设计侧应补的项，回流设计侧。
 - 静态审计（audit）与渲染态验收（verify）**互补**：audit 查「通道是否存在」，verify 查「渲染结果是否一致」，两者都过才算闭环。
+- **三闸自洽口径（无 oracle 时也不放行）**：`mapping coverage` 全绿只证明「点位被覆盖」，`parser audit` 全绿只证明「通道与挂载点存在」，`design-audit` 全绿只证明「声明具备生效条件」——三者都不证明「渲染结果与效果图一致」。缺 `oracle` 的批次必须显式声明「本轮无渲染态基线」，不得用前两闸的绿灯冒充闭环。

package/scripts/check.mjs

@@ -10,6 +10,7 @@
  */
 
 import { execFileSync } from "child_process";
+import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 
@@ -19,6 +20,15 @@ const NODE = process.execPath;
 const PYTHON = process.env.VUE3_SKILL_PYTHON || (process.platform === "win32" ? "py" : "python3");
 const PYTHON_ARGS = process.platform === "win32" && !process.env.VUE3_SKILL_PYTHON ? ["-3"] : [];
 
+/** 设计层闭环审计的目标项目：默认当前目录，可用 VUE3_AUDIT_PROJECT 指向落地项目 */
+function resolveAuditProject() {
+  const dir = process.env.VUE3_AUDIT_PROJECT || process.cwd();
+  const designDir = path.join(dir, ".codebuddy", "design");
+  if (!fs.existsSync(designDir)) return null;
+  const has = fs.readdirSync(designDir).some((f) => /^changeset.*\.json$/i.test(f));
+  return has ? dir : null;
+}
+
 const checks = [
   {
     name: "结构校验",
@@ -30,6 +40,19 @@ const checks = [
     desc: "高频 Demo 场景能力组命中验证",
     cmd: () => run("python", "scripts/match.py", ["--batch"]),
   },
+  {
+    name: "设计层闭环审计",
+    desc: "变量悬空/层错位/层叠胜负/锚点挂空/列宽预算/收口断言（无落地项目则跳过）",
+    cmd: () => {
+      const project = resolveAuditProject();
+      if (!project) return "SKIPPED 未发现落地项目（.codebuddy/design/changeset*.json）；用 VUE3_AUDIT_PROJECT=<落地项目> 指定后复跑";
+      const args = ["--project", project];
+      if (process.env.VUE3_AUDIT_CONTAINER_WIDTH) {
+        args.push("--container-width", process.env.VUE3_AUDIT_CONTAINER_WIDTH);
+      }
+      return run(NODE, "scripts/design-audit.mjs", args);
+    },
+  },
 ];
 
 function run(runner, script, args = []) {

package/scripts/design-audit.mjs

@@ -0,0 +1,878 @@
+#!/usr/bin/env node
+
+/**
+ * 设计层闭环审计 — 「样式逻辑 → 效果」的生效性断言。
+ *
+ * 发布闸（scripts/validate.mjs）校验的是技能包自身结构；本脚本校验的是
+ * **一次落地是否真的把变更集落成了有效样式**：声明了不等于生效，生效了不等于对。
+ * 它只做静态分析，不依赖浏览器与开发服务器。
+ *
+ * 用法：
+ *   node scripts/design-audit.mjs                        # 审计当前目录（落地项目根）
+ *   node scripts/design-audit.mjs --project <dir>         # 指定落地项目
+ *   node scripts/design-audit.mjs --json                  # 机器可读输出
+ *   node scripts/design-audit.mjs --container-width 1624  # 表格容器可用宽（列宽预算用）
+ *   node scripts/design-audit.mjs --report <file.md>      # 另存 Markdown 报告（可选，便于交付留档）
+ *
+ * 退出码：0 = 无 ERROR；1 = 存在 ERROR。
+ *
+ * 审计项：
+ *   E1 变量悬空      设计层 var(--x) 项目内无定义且无回退
+ *   E2 层错位        内层盒属性族写在表格宿主盒上（会被 EP 内层 .cell 覆盖）
+ *   E3 层叠败北      设计层声明特指度低于组件 scoped 同名类规则（含 [data-v] 加成）→ 不生效
+ *   E4 选择器挂空    设计层使用的项目类名在 src 中不存在（假锚点）
+ *   E5 列宽预算      存在无宽列（既无 width 又无 min-width）；Σ列宽超出容器
+ *   E6 收口断言      visible:false 的 sid 必须有 display:none（+提权）落点
+ *   E7 激活态越层    分组标题被写入叶子项的激活态（胶囊/指示条）
+ *   E8 浮层残留      form 要求收口下拉浮层，但组件仍消费 #dropdown
+ *   E9 形态收口缺件  form=icon_only 只显图标、未在同一作用域内收口文案（且不被兄弟变体规则骗过）
+ *   E10 scoped 挂空  组件 scoped 规则依赖运行时并不存在的类（重构残留，永不命中）
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SKILL_ROOT = path.resolve(__dirname, "..");
+
+const argv = process.argv.slice(2);
+const argValue = (name, def) => {
+  const i = argv.indexOf(name);
+  return i >= 0 && argv[i + 1] ? argv[i + 1] : def;
+};
+const PROJECT = path.resolve(argValue("--project", process.cwd()));
+const AS_JSON = argv.includes("--json");
+const CONTAINER_EXPLICIT = argv.includes("--container-width");
+const CONTAINER_WIDTH = Number(argValue("--container-width", "1200")) || 1200;
+
+const DESIGN_LAYER_GLOBS = [
+  "src/styles/design-shell.scss",
+  "src/styles/design-tokens.scss",
+  "src/styles/dark.scss",
+];
+const SRC_DIRS = ["src"];
+const IGNORES = new Set(["node_modules", ".git", "dist", "build", ".vite", "public"]);
+const SRC_EXT = new Set([".vue", ".ts", ".tsx", ".js", ".mjs", ".scss", ".css", ".html"]);
+const JSON_EXT = new Set([".json"]);
+
+/** 内层盒属性族：必须落 EP 内层 .cell，落宿主 th/td 会被 .cell 覆盖 */
+const INNER_ONLY_PROPS = new Set([
+  "white-space",
+  "text-overflow",
+  "overflow",
+  "word-break",
+  "text-align",
+  "line-height",
+  "vertical-align",
+  "text-align-last",
+]);
+
+/** 项目自有变量前缀（--el-* 为出厂，不参与悬空判定） */
+const OWNED_VAR_PREFIXES = ["--ds-", "--vts-", "--re-", "--brand-", "--table-", "--pagination-", "--filter-", "--page-", "--action-bar-", "--empty-", "--menu-", "--sidebar-"];
+
+/** 项目自有类名前缀（用于选择器挂空判定） */
+const OWNED_CLASS_PREFIXES = ["vts-", "re-", "col-", "navbar-", "header-", "sider-", "sidebar-", "menu-", "card-tab", "tab-", "language-", "app-", "list-"];
+
+const errors = [];
+const warnings = [];
+const infos = [];
+
+const err = (id, msg) => errors.push({ id, msg });
+const warn = (id, msg) => warnings.push({ id, msg });
+const info = (id, msg) => infos.push({ id, msg });
+
+// ── 文件工具 ────────────────────────────────────────────────
+function walk(dir, out = [], exts = SRC_EXT) {
+  if (!fs.existsSync(dir)) return out;
+  for (const name of fs.readdirSync(dir)) {
+    if (IGNORES.has(name)) continue;
+    const full = path.join(dir, name);
+    let st;
+    try {
+      st = fs.statSync(full);
+    } catch {
+      continue;
+    }
+    if (st.isDirectory()) walk(full, out, exts);
+    else if (exts.has(path.extname(name))) out.push(full);
+  }
+  return out;
+}
+
+const readIf = (p) => (fs.existsSync(p) ? fs.readFileSync(p, "utf-8") : null);
+
+// ── 迷你 CSS/SCSS 展平器 ────────────────────────────────────
+function stripComments(css) {
+  return css
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/(^|[\s;}])[/]{2}[^\n]*/g, "$1");
+}
+
+function addDecls(decls, chunk) {
+  const text = String(chunk);
+  if (!text.trim()) return;
+  for (const piece of text.split(";")) {
+    const t = piece.trim();
+    if (!t || t.startsWith("$") || t.startsWith("@")) continue;
+    const idx = t.indexOf(":");
+    if (idx <= 0) continue;
+    const prop = t.slice(0, idx).trim().toLowerCase();
+    const value = t.slice(idx + 1).trim();
+    if (!prop || /[{}]/.test(prop)) continue;
+    decls[prop] = value;
+  }
+}
+
+const splitList = (s) => String(s).split(",").map((x) => x.trim()).filter(Boolean);
+
+function joinSelector(parent, child) {
+  const parts = splitList(child);
+  if (!parent) return parts.join(", ");
+  const parents = splitList(parent);
+  const out = [];
+  for (const part of parts) {
+    if (part.includes("&")) {
+      for (const p of parents) out.push(part.replace(/&/g, p));
+    } else {
+      for (const p of parents) out.push(`${p} ${part}`);
+    }
+  }
+  return out.join(", ");
+}
+
+/**
+ * 把一段 SCSS 正文拆成「本层声明」与「子块」。
+ * 关键：声明与子块是交错的，必须逐字符按 `;` / `{}` 切分，
+ * 否则「先声明后嵌套」的规则会把声明粘到下一个子选择器上（错位出幽灵规则）。
+ */
+function parseRule(body) {
+  const blocks = [];
+  let declText = "";
+  let buf = "";
+  let i = 0;
+  while (i < body.length) {
+    const ch = body[i];
+    if (ch === '"' || ch === "'") {
+      let j = i + 1;
+      while (j < body.length && body[j] !== ch) j += body[j] === "\\" ? 2 : 1;
+      buf += body.slice(i, j + 1);
+      i = j + 1;
+    } else if (ch === "{" && buf.endsWith("#")) {
+      buf += ch; // SCSS 插值 #{}，不是块
+      i++;
+    } else if (ch === "{") {
+      const sel = buf.trim();
+      buf = "";
+      let depth = 1;
+      let j = i + 1;
+      let inner = "";
+      while (j < body.length && depth > 0) {
+        const c = body[j];
+        if (c === "{") depth++;
+        else if (c === "}") {
+          depth--;
+          if (depth === 0) break;
+        }
+        inner += c;
+        j++;
+      }
+      if (sel) blocks.push({ sel, body: inner });
+      i = j + 1;
+    } else if (ch === ";") {
+      declText += buf + ";";
+      buf = "";
+      i++;
+    } else if (ch === "}") {
+      i++;
+    } else {
+      buf += ch;
+      i++;
+    }
+  }
+  declText += buf;
+  return { declText, blocks };
+}
+
+const AT_SKIP = /^@(keyframes|-webkit-keyframes|-moz-keyframes|-o-keyframes|font-face|import|use|forward|charset|tailwind|apply|extend)/i;
+
+function flattenCss(css, parentSel = "", acc = []) {
+  const { declText, blocks } = parseRule(stripComments(css));
+  if (parentSel && declText.trim()) {
+    const decls = {};
+    addDecls(decls, declText);
+    if (Object.keys(decls).length) acc.push({ selector: parentSel, decls });
+  }
+  for (const b of blocks) {
+    const sel = b.sel.trim();
+    if (!sel || AT_SKIP.test(sel)) continue;
+    if (sel.startsWith("@")) {
+      flattenCss(b.body, parentSel, acc);
+      continue;
+    }
+    flattenCss(b.body, joinSelector(parentSel, sel), acc);
+  }
+  return acc;
+}
+
+const classTokens = (selector) => [...selector.matchAll(/\.(-?[A-Za-z_][\w-]*)/g)].map((m) => m[1]);
+/** 去掉伪元素后的「末位复合选择器」——它才是这条规则真正作用的那一层元素 */
+const lastCompound = (sel) => {
+  const parts = String(sel)
+    .replace(/::[a-z-]+(\([^)]*\))?/gi, "")
+    .split(/[\s>+~]+/)
+    .filter(Boolean);
+  return parts[parts.length - 1] || "";
+};
+const allVars = (text) => [...text.matchAll(/var\(\s*(--[\w-]+)\s*(,)?/g)].map((m) => ({ name: m[1], hasFallback: !!m[2] }));
+
+// ── 采集：设计层 / 项目源 / 变更集 / 词典 ────────────────────
+const designFiles = DESIGN_LAYER_GLOBS.map((g) => path.join(PROJECT, g)).filter((p) => fs.existsSync(p));
+const extraDesign = walk(path.join(PROJECT, "src", "styles")).filter((p) => /design-.*\.(scss|css)$/i.test(path.basename(p)));
+const DESIGN_FILES = [...new Set([...designFiles, ...extraDesign])];
+
+const srcFiles = SRC_DIRS.flatMap((d) => walk(path.join(PROJECT, d)));
+const srcTextByFile = new Map();
+for (const f of srcFiles) srcTextByFile.set(f, readIf(f) ?? "");
+
+const designSet = new Set(DESIGN_FILES.map((p) => path.resolve(p)));
+const projectText = [...srcTextByFile.entries()]
+  .filter(([f]) => !designSet.has(path.resolve(f)))
+  .map(([, t]) => t)
+  .join("\n");
+
+const designCss = DESIGN_FILES.map((f) => srcTextByFile.get(f) ?? readIf(f) ?? "").join("\n");
+// 每条规则带上来源文件：用于区分「本次落地的设计层」与「历史遗留层」的告警级别
+const designRules = DESIGN_FILES.flatMap((f) =>
+  flattenCss(srcTextByFile.get(f) ?? readIf(f) ?? "").map((r) => ({ ...r, file: f })),
+);
+const PRIMARY_LAYER = path.resolve(PROJECT, argValue("--design-layer", "src/styles/design-shell.scss"));
+const isPrimary = (file) => path.resolve(file) === PRIMARY_LAYER;
+
+// 变更集（取 .codebuddy/design 下第一个 changeset-*.json）
+const designDir = path.join(PROJECT, ".codebuddy", "design");
+let changeset = null;
+let changesetFile = null;
+if (fs.existsSync(designDir)) {
+  const cand = fs.readdirSync(designDir).filter((f) => /^changeset.*\.json$/i.test(f)).sort();
+  if (cand.length) {
+    changesetFile = path.join(designDir, cand[0]);
+    try {
+      changeset = JSON.parse(fs.readFileSync(changesetFile, "utf-8"));
+    } catch (e) {
+      err("E0", `变更集解析失败：${changesetFile} — ${e.message}`);
+    }
+  }
+}
+
+// 词典（技能包自带 mapping/）
+const dictSidMap = new Map();
+const dictEntries = [];
+(function loadMapping() {
+  const roots = ["mapping/scenes", "mapping/component", "mapping/layout", "mapping/basic"].map((r) => path.join(SKILL_ROOT, r));
+  const files = roots.flatMap((r) => walk(r, [], JSON_EXT));
+  for (const f of files) {
+    try {
+      const json = JSON.parse(fs.readFileSync(f, "utf-8"));
+      for (const [sid, entry] of Object.entries(json.mappings || {})) {
+        if (!entry || typeof entry !== "object") continue;
+        dictSidMap.set(sid, { ...entry, __file: f });
+        dictEntries.push({ sid, entry });
+      }
+    } catch {
+      /* 忽略无法解析的映射文件 */
+    }
+  }
+})();
+
+// ── E1 变量悬空 ─────────────────────────────────────────────
+(function checkE1() {
+  if (!designCss) return;
+  const defined = new Set();
+  for (const t of [designCss, projectText].filter(Boolean)) {
+    for (const m of t.matchAll(/(--[\w-]+)\s*:/g)) defined.add(m[1]);
+  }
+  if (changeset) {
+    // 令牌名可能只在变更集里出现（由项目侧再映射），一并视为已声明
+    for (const m of JSON.stringify(changeset).matchAll(/--[\w-]+/g)) defined.add(m[0]);
+  }
+  const missing = new Map();
+  for (const { name, hasFallback } of allVars(designCss)) {
+    if (hasFallback || defined.has(name)) continue;
+    if (!OWNED_VAR_PREFIXES.some((p) => name.startsWith(p))) continue;
+    missing.set(name, (missing.get(name) || 0) + 1);
+  }
+  for (const [name, count] of missing) {
+    err("E1", `变量悬空：设计层使用了 ${name}（${count} 处），但项目内无定义、也无 var() 回退 —— 该声明整条失效。`);
+  }
+  if (!missing.size) info("E1", `变量悬空：0 处（受检前缀 ${OWNED_VAR_PREFIXES.join(" ")}）`);
+})();
+
+// ── E2 层错位 ───────────────────────────────────────────────
+(function checkE2() {
+  const hits = [];
+  for (const rule of designRules) {
+    const sel = rule.selector;
+    if (!/el-table|(^|[\s,>])(th|td)(\.|[\s,:{]|$)/.test(sel)) continue;
+    if (/\.cell\b/.test(sel)) continue; // 已锚定内层文本盒
+    const offenders = Object.keys(rule.decls).filter((p) => INNER_ONLY_PROPS.has(p));
+    if (offenders.length) hits.push({ sel, offenders });
+  }
+  for (const h of hits.slice(0, 12)) {
+    err("E2", `层错位：${h.sel} 声明了内层盒属性族 [${h.offenders.join(", ")}]，但未锚定 > .cell —— 会被 Element Plus 内层 .cell 覆盖，等于没写。`);
+  }
+  if (hits.length > 12) err("E2", `层错位：另有 ${hits.length - 12} 处未列出。`);
+  if (!hits.length) info("E2", "层错位：0 处");
+})();
+
+// ── E3 层叠胜负 / E10 scoped 挂空 ───────────────────────────
+// 组件 scoped 规则编译后末位选择器会追加 [data-v-xxx] 属性选择器，等价 +1 个类级特指度。
+// 因此「设计层声明是否真的生效」必须算特指度，不能只看有没有同名类。
+const SCOPED_ATTR = 1000;
+const STATE_PSEUDO = /:(hover|focus|active|visited|disabled|checked|focus-within|focus-visible|first-child|last-child|nth-[\w-]+)/i;
+
+const pseudoElOf = (sel) => (sel.match(/::([a-z-]+)/i) || [])[1] || "";
+
+function specOf(selector) {
+  const s = selector
+    .replace(/::[a-z-]+(\([^)]*\))?/gi, " ")
+    .replace(/:not\(([^)]*)\)/g, ":not");
+  const ids = (s.match(/#[\w-]+/g) || []).length;
+  const classes =
+    (s.match(/\.[\w-]+/g) || []).length +
+    (s.match(/\[[^\]]*\]/g) || []).length +
+    (s.match(/:(?!:)[\w-]+(\([^)]*\))?/g) || []).length;
+  const elems = (s.match(/(?:^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
+  return ids * 1e6 + classes * 1e3 + elems;
+}
+
+/** 状态类 / 第三方类不属于「项目自有挂载点」，挂空判定不参与 */
+const isOwnedClass = (c) =>
+  OWNED_CLASS_PREFIXES.some((p) => c.startsWith(p)) && !/^(is|has|van|el|n)-/.test(c);
+const IGNORE_DEAD = new Set(["language-text", "language-text__item"]);
+
+// 模板/脚本源码（剔掉 style 块，避免样式里的类名自证「已挂载」）
+const markupText = [...srcTextByFile.entries()]
+  .filter(([f]) => f.endsWith(".vue"))
+  .map(([, t]) => t.replace(/<style[\s\S]*?<\/style>/g, ""))
+  .join("\n");
+
+// 收集组件 scoped 规则，并标记「挂空」的（选择器链条上存在运行时不存在的类）
+const scopedRules = [];
+const scopedDead = [];
+for (const [f, t] of srcTextByFile) {
+  if (!f.endsWith(".vue")) continue;
+  for (const m of t.matchAll(/<style[^>]*scoped[^>]*>([\s\S]*?)<\/style>/g)) {
+    for (const r of flattenCss(m[1])) {
+      const cls = [...new Set(classTokens(r.selector))];
+      if (!cls.length) continue;
+      if (/:deep\(|::v-deep|:global\(/.test(r.selector)) continue;
+      const owned = cls.filter(isOwnedClass);
+      const missing = owned.filter((c) => !markupText.includes(c));
+      const dead = missing.length > 0;
+      scopedRules.push({ ...r, file: f, dead });
+      if (dead) scopedDead.push({ sel: r.selector, file: f, missing });
+    }
+  }
+}
+
+// 竞争者索引：只登记「与目标同一元素（同末位复合选择器）」且非挂空的规则
+const scopedIdx = new Map();
+for (const r of scopedRules) {
+  if (r.dead) continue; // 挂空的规则永不命中，不能算作竞争者
+  if (STATE_PSEUDO.test(r.selector)) continue; // 状态态不参与基态竞争
+  const pe = pseudoElOf(r.selector);
+  const spec = specOf(r.selector) + SCOPED_ATTR;
+  for (const cls of new Set(classTokens(lastCompound(r.selector)))) {
+    for (const prop of Object.keys(r.decls)) {
+      const key = `${cls}|${prop}|${pe}`;
+      const cur = scopedIdx.get(key);
+      if (!cur || spec > cur.spec) scopedIdx.set(key, { spec, selector: r.selector, file: r.file });
+    }
+  }
+}
+
+(function checkE3() {
+  if (!scopedIdx.size) {
+    info("E3", "层叠胜负：无同属性竞争的组件 scoped 规则");
+    return;
+  }
+  const hits = [];
+  const seen = new Set();
+  for (const r of designRules) {
+    const pe = pseudoElOf(r.selector);
+    for (const part of splitList(r.selector)) {
+      const last = lastCompound(part);
+      const clsList = [...new Set(classTokens(last))];
+      if (!clsList.length) continue;
+      const mine = specOf(part);
+      for (const prop of Object.keys(r.decls)) {
+        for (const cls of clsList) {
+          const comp = scopedIdx.get(`${cls}|${prop}|${pe}`);
+          if (!comp || mine > comp.spec) continue;
+          const key = `${part}|${prop}`;
+          if (seen.has(key)) continue;
+          seen.add(key);
+          hits.push({ sel: part, prop, cls, mine, comp });
+        }
+      }
+    }
+  }
+  const shown = hits.slice(0, 12);
+  for (const h of shown) {
+    const rel = path.relative(PROJECT, h.comp.file).replace(/\\/g, "/");
+    err(
+      "E3",
+      `层叠败北：${h.sel} 的 ${h.prop} 特指度 ${h.mine} ≤ 组件 scoped 竞争者 ${h.comp.selector}（${rel}）的 ${h.comp.spec}（scoped 追加 [data-v] 属性选择器，等价 +1 类级）—— 该声明不会生效：收口类提权加 !important，形态类须提高锚定层级（补上 .is-active / .card-item 等对方使用的限定类）。`,
+    );
+  }
+  if (hits.length > shown.length) {
+    const byFile = new Map();
+    for (const h of hits.slice(shown.length)) {
+      const rel = path.relative(PROJECT, h.comp.file).replace(/\\/g, "/");
+      byFile.set(rel, (byFile.get(rel) || 0) + 1);
+    }
+    const detail = [...byFile.entries()].sort((a, b) => b[1] - a[1]).map(([f, n]) => `${f}(${n})`).join("、");
+    err("E3", `层叠败北：另有 ${hits.length - shown.length} 处未列出，集中在 ${detail} —— 同一文件成片败北说明该区域的锚定层级整体偏低，应按文件批量提权。`);
+  }
+  if (!hits.length) info("E3", `层叠胜负：0 处败北（竞争者 ${scopedIdx.size} 组）`);
+})();
+
+// ── E10 组件 scoped 规则挂空（重构残留） ────────────────────
+(function checkE10() {
+  const dead = scopedDead.filter((d) => d.missing.some((c) => !IGNORE_DEAD.has(c)));
+  if (!dead.length) {
+    info("E10", "组件 scoped 挂空：0 处");
+    return;
+  }
+  for (const d of dead.slice(0, 15)) {
+    const rel = path.relative(PROJECT, d.file).replace(/\\/g, "/");
+    warn(
+      "E10",
+      `scoped 规则挂空：${rel} 的 ${d.sel} 依赖运行时并不存在的类 [${d.missing.join(", ")}] —— 整条规则永不命中（多在结构重构后残留），既不会生效也会误导后续收口判断。`,
+    );
+  }
+  if (dead.length > 15) warn("E10", `scoped 规则挂空：另有 ${dead.length - 15} 处未列出。`);
+})();
+
+// ── E4 选择器挂空 ───────────────────────────────────────────
+(function checkE4() {
+  const used = new Map(); // 类名 → 声明它的设计层文件集合
+  for (const rule of designRules) {
+    for (const c of classTokens(rule.selector)) {
+      if (!OWNED_CLASS_PREFIXES.some((p) => c.startsWith(p))) continue;
+      if (!used.has(c)) used.set(c, new Set());
+      used.get(c).add(rule.file);
+    }
+  }
+  const phantom = [...used.keys()].filter((c) => !projectText.includes(c));
+  const hard = phantom.filter((c) => [...used.get(c)].some(isPrimary));
+  const soft = phantom.filter((c) => !hard.includes(c));
+  for (const c of hard.slice(0, 15)) {
+    err("E4", `选择器挂空：设计层选择器使用了 .${c}，但 src/ 全量源码里没有该类的挂载点 —— 规则命中不到任何元素（锚点必须锚「实际在」，不能锚「应该在」）。`);
+  }
+  if (hard.length > 15) err("E4", `选择器挂空：另有 ${hard.length - 15} 个未列出。`);
+  for (const c of soft.slice(0, 10)) {
+    const files = [...used.get(c)].map((f) => path.basename(f)).join(", ");
+    warn("E4", `选择器挂空（历史层）：.${c} 只出现在 ${files}，项目内无挂载点 —— 静态遗留，非本次落地引入，但同样永不命中。`);
+  }
+  if (soft.length > 10) warn("E4", `选择器挂空（历史层）：另有 ${soft.length - 10} 个未列出。`);
+  if (!phantom.length) info("E4", `选择器挂空：0 个（受检类名 ${used.size} 个）`);
+})();
+
+// ── E5 列宽预算 ─────────────────────────────────────────────
+function extractObjectLiterals(arrSrc) {
+  const out = [];
+  let depth = 0;
+  let start = -1;
+  for (let i = 0; i < arrSrc.length; i++) {
+    const ch = arrSrc[i];
+    if (ch === "{") {
+      if (depth === 0) start = i;
+      depth++;
+    } else if (ch === "}") {
+      depth--;
+      if (depth === 0 && start >= 0) {
+        out.push(arrSrc.slice(start, i + 1));
+        start = -1;
+      }
+    }
+  }
+  return out;
+}
+
+function matchArrayLiteral(text, anchorRe) {
+  const m = anchorRe.exec(text);
+  if (!m) return null;
+  const open = text.indexOf("[", m.index);
+  if (open < 0) return null;
+  let depth = 0;
+  for (let i = open; i < text.length; i++) {
+    if (text[i] === "[") depth++;
+    else if (text[i] === "]") {
+      depth--;
+      if (depth === 0) return text.slice(open + 1, i);
+    }
+  }
+  return null;
+}
+
+(function checkE5() {
+  const tableFiles = [...srcTextByFile.entries()].filter(([, t]) => t.includes("el-table-column"));
+  if (!tableFiles.length) {
+    info("E5", "列宽预算：未在 src 中发现 el-table-column");
+    return;
+  }
+  const pxOf = (s) => {
+    const m = String(s).match(/(\d+(?:\.\d+)?)\s*(px)?/);
+    return m ? Number(m[1]) : null;
+  };
+  // 表头文案最小占宽：CJK ≈ 1em，ASCII ≈ 0.6em；两侧各留 16px 宿主内边距
+  const HEADER_FS = 14;
+  const CELL_PAD = 16;
+  const textWidth = (label) => {
+    let w = 0;
+    for (const ch of String(label)) w += /[\u2e80-\u9fff\uff00-\uffef]/.test(ch) ? HEADER_FS : HEADER_FS * 0.6;
+    return Math.ceil(w);
+  };
+  const minFit = (label) => textWidth(label) + CELL_PAD * 2;
+  // 列名可能是 $t('类型') 这类 i18n 调用，需取出引号内的真实文案
+  const cleanLabel = (raw) => {
+    const s = String(raw).trim();
+    const q = s.match(/[`'"]([^`'"]+)[`'"]/);
+    return ((q ? q[1] : s).trim() || "?");
+  };
+  const labelOf = (src) => {
+    const m =
+      src.match(/label:\s*([^,\n}]+)/) || src.match(/\blabel="([^"]*)"/) || src.match(/\blabel='([^']*)'/);
+    return m ? cleanLabel(m[1]) : "?";
+  };
+  const OPS = ["operate", "operation", "actions"];
+
+  for (const [file, text] of tableFiles) {
+    const rel = path.relative(PROJECT, file).replace(/\\/g, "/");
+    const declared = [];
+    const noWidth = [];
+
+    // 1) 列定义数组（模板常用动态列）
+    const arr = matchArrayLiteral(text, /(?:const|let|var)\s+\w*[Cc]olumn\w*\s*(?::[^=]+)?=\s*\[/);
+    if (arr) {
+      for (const objSrc of extractObjectLiterals(arr)) {
+        const label = labelOf(objSrc);
+        const prop = (objSrc.match(/prop:\s*[`'"]([^`'"]+)/) || [])[1] || "?";
+        const w = objSrc.match(/\bwidth:\s*[`'"]?([\d.]+)/);
+        const mw = objSrc.match(/\bminWidth:\s*[`'"]?([\d.]+)/);
+        if (w) declared.push({ label, prop, w: pxOf(w[1]) });
+        else if (mw) declared.push({ label, prop, mw: pxOf(mw[1]) });
+        else noWidth.push({ label, prop });
+      }
+    }
+
+    // 2) 内联列（selection / index / 手工列）
+    for (const tag of text.matchAll(/<el-table-column\b[\s\S]*?(?:\/>|>)/g)) {
+      const src = tag[0];
+      const type = (src.match(/:?type="['"]([^'"]+)/) || [])[1] || "";
+      const label = (src.match(/:?label="([^"]*)"/) || src.match(/:?label='([^']*)'/) || [])[1];
+      const labelText = label ? cleanLabel(label) : type || "?";
+      const hasW = /(^|\s):?width=/.test(src) || /\bwidth=/.test(src);
+      const hasMw = /:?min-width=/.test(src) || /:?minWidth=/.test(src);
+      if (hasW || hasMw) continue;
+      if (type === "selection" || type === "index") {
+        warn("E5", `${rel}：${type === "selection" ? "选择列" : "序号列"}（${labelText}）未声明 width / min-width，只能按出厂兜底宽度参与布局（§11.132 要求逐列声明意图）。`);
+      } else if (type) {
+        noWidth.push({ label: labelText, prop: type });
+      }
+    }
+
+    const realNoWidth = noWidth.filter((c) => !OPS.includes(c.prop));
+    for (const c of realNoWidth) {
+      err(
+        "E5",
+        `${rel}：列「${c.label}」(prop=${c.prop}) 既无 width 也无 min-width —— 无宽列由出厂兜底宽度参与布局，会被相邻固定宽列挤压；本列表头文案需 ≥ ${minFit(c.label)}px（文案 ${textWidth(c.label)}px + 内边距 ${CELL_PAD * 2}px），请按此反推 width / min-width（换行与省略号截断都源于此）。`,
+      );
+    }
+
+    // 3) 已声明 min-width 的列：min-width 必须容得下自己的表头文案
+    for (const c of declared) {
+      if (c.mw == null) continue;
+      const need = minFit(c.label);
+      if (c.mw < need) {
+        err(
+          "E5",
+          `${rel}：列「${c.label}」min-width=${c.mw}px < 表头文案最小占宽 ${need}px —— 布局算法压缩到 min-width 时表头必然换行或截断（「${c.label}」→「${c.label.slice(0, 2)}…」）。`,
+        );
+      }
+    }
+
+    const total = declared.reduce((s, c) => s + (c.w ?? 0), 0);
+    const minTotal = declared.reduce((s, c) => s + (c.mw ?? 0), 0);
+    const fixedCount = declared.filter((c) => c.w).length;
+    const flexCount = declared.filter((c) => c.mw).length;
+    const budget = total + minTotal;
+    const noWidthNeed = realNoWidth.reduce((s, c) => s + minFit(c.label), 0);
+    const line = `${rel}：固定宽 ${fixedCount} 列(${total}px) / 伸缩列 ${flexCount} 列(${minTotal}px) / 无宽列 ${realNoWidth.length} 列(需 ${noWidthNeed}px)`;
+    if (CONTAINER_EXPLICIT && budget + noWidthNeed > CONTAINER_WIDTH) {
+      err(
+        "E5",
+        `${line} —— 合计 ${budget + noWidthNeed}px > 容器可用宽 ${CONTAINER_WIDTH}px：列宽预算溢出，必须在设计侧收敛（减少列 / 降 min-width / 显式声明横向滚动），不允许靠静默压缩消化。`,
+      );
+    } else if (!CONTAINER_EXPLICIT && budget + noWidthNeed > CONTAINER_WIDTH) {
+      warn(
+        "E5",
+        `${line} —— 合计 ${budget + noWidthNeed}px 超出假定容器宽 ${CONTAINER_WIDTH}px。容器宽为估值，请用 --container-width <px> 传入实际内容区宽度后复跑，据以判定是否溢出。`,
+      );
+    } else {
+      info("E5", `${line}，合计 ${budget + noWidthNeed}px ≤ ${CONTAINER_WIDTH}px`);
+    }
+  }
+})();
+
+// ── E6 visible:false 收口断言 ──────────────────────────────
+(function checkE6() {
+  if (!changeset) {
+    info("E6", "未发现变更集（.codebuddy/design/changeset*.json），跳过收口断言");
+    return;
+  }
+  const changes = changeset.changes || [];
+  const closable = changes.filter((c) => c.visible === false || c.style?.visible === false);
+  if (!closable.length) {
+    info("E6", "收口断言：变更集无 visible:false 项");
+    return;
+  }
+  for (const change of closable) {
+    const entry = dictSidMap.get(change.id);
+    const selector = entry?.selector;
+    if (!selector) {
+      warn("E6", `${change.id} 声明 visible:false，但词典无 selector，无法断言收口落点。`);
+      continue;
+    }
+    const target = classTokens(selector).slice(-1)[0];
+    if (!target) {
+      warn("E6", `${change.id} 的词典 selector「${selector}」不含类名，无法断言收口落点。`);
+      continue;
+    }
+    const rule = designRules.find(
+      (r) => r.selector.includes(`.${target}`) && /none/i.test(r.decls.display || ""),
+    );
+    if (!rule) {
+      err("E6", `${change.id} 声明 visible:false，但设计层没有任何「命中 .${target} 且 display:none」的收口规则 —— 元素会照旧显示。`);
+    } else if (!/!important/i.test(rule.decls.display)) {
+      warn("E6", `${change.id} 的收口规则 ${rule.selector} 的 display:none 未加 !important，存在被组件 scoped 同权重反压的风险。`);
+    } else {
+      info("E6", `${change.id} → ${rule.selector} display:none !important ✓`);
+    }
+  }
+})();
+
+// ── E7 激活态越层 ───────────────────────────────────────────
+(function checkE7() {
+  const hits = designRules.filter((r) => {
+    const sel = r.selector;
+    const onGroup = /el-sub-menu|__title/.test(sel);
+    const active = /is-active|\.active\b|\[aria-current|\.is-opened/.test(sel);
+    if (!onGroup || !active) return false; // 必须同时命中「分组标题」与「激活态」才是越层
+    const setsSurface = Object.keys(r.decls).some(
+      (p) => p === "background" || p.startsWith("background") || p === "box-shadow" || p === "border-inline-start",
+    );
+    const pseudoBar = /::?(before|after)/.test(sel);
+    return setsSurface || pseudoBar;
+  });
+  for (const r of hits.slice(0, 10)) {
+    err("E7", `激活态越层：${r.selector} 把激活态（胶囊/指示条）写到了可展开分组的标题上 —— 分组标题会同时长出胶囊与竖向指示条，并与右侧展开箭头叠压（§6.15/§6.16 要求激活态只作用叶子项，分组标题须以 :not(.el-sub-menu__title) 排除）。`);
+  }
+  if (!hits.length) info("E7", "激活态越层：0 处");
+})();
+
+// ── E8 浮层残留 ─────────────────────────────────────────────
+(function checkE8() {
+  if (!changeset) {
+    info("E8", "未发现变更集，跳过浮层残留检查");
+    return;
+  }
+  for (const change of changeset.changes || []) {
+    const form = change.form;
+    if (!form) continue;
+    const entry = dictSidMap.get(change.id);
+    if (!entry) continue;
+    const required = entry.suppress_rules?.[form] || [];
+    const structural = [...required, ...(entry.structure_ops_required?.[form] || [])].join(" ");
+    if (!/popper|dropdown|浮层/i.test(structural)) continue;
+    const compFile = entry.file && typeof entry.file === "string" ? entry.file.match(/(src\/[\w./-]+\.vue)/) : null;
+    if (!compFile) continue;
+    const p = path.join(PROJECT, compFile[1]);
+    const t = readIf(p);
+    if (!t) continue;
+    if (/#dropdown|ElDropdown|el-dropdown/.test(t)) {
+      err("E8", `${change.id} 的 form=${form} 要求收口下拉浮层，但 ${compFile[1]} 仍保留 ElDropdown / #dropdown 消费 —— 点击触发器仍会弹出浮层（浮层属 teleport popper，样式层收不掉）。`);
+    } else {
+      info("E8", `${change.id} 浮层收口 ✓`);
+    }
+  }
+})();
+
+// ── E9 形态收口缺件 ─────────────────────────────────────────
+// 形态类 form（如 icon_only）落地必须「成对」：显图标 + 隐文案，且收口要落回该语义元素
+// 自己的作用域内。只按「全局有没有 .tag-title{display:none}」判断会被兄弟变体规则骗过。
+const normSel = (s) => String(s).replace(/\s+/g, " ").trim();
+const lastClassOutsideNot = (sel) => {
+  const cleaned = String(sel).replace(/:not\([^)]*\)/g, "");
+  const parts = splitList(cleaned);
+  const last = parts.length ? lastCompound(parts[parts.length - 1]) : "";
+  const cls = classTokens(last);
+  if (cls.length) return cls[cls.length - 1];
+  const all = classTokens(cleaned);
+  return all.length ? all[all.length - 1] : null;
+};
+
+(function checkE9() {
+  if (!changeset) {
+    info("E9", "未发现变更集，跳过形态收口检查");
+    return;
+  }
+  for (const change of changeset.changes || []) {
+    if (!/^(icon_only|icon)$/.test(change.form || "")) continue;
+    const entry = dictSidMap.get(change.id);
+    if (!entry) {
+      warn("E9", `${change.id} 的 form=${change.form} 在词典里找不到条目，无法断言形态收口。`);
+      continue;
+    }
+    const scope = normSel(entry.selector || "");
+    const subs = entry.sub_selectors || {};
+    const textSub = subs.title || subs.text;
+    const iconSub = subs.icon || subs.leading_icon;
+    if (!scope || !textSub) {
+      warn("E9", `${change.id} 的词典缺少 selector 或 sub_selectors.title，无法断言「显图标 + 隐文案」是否成对。`);
+      continue;
+    }
+    const textTarget = lastClassOutsideNot(textSub);
+    const iconTarget = iconSub ? lastClassOutsideNot(iconSub) : null;
+    const inScope = (r) => {
+      const s = normSel(r.selector);
+      return s.includes(scope);
+    };
+    const closed = designRules.filter(
+      (r) => inScope(r) && /none/i.test(r.decls.display || "") && (!textTarget || normSel(r.selector).includes(`.${textTarget}`)),
+    );
+    const shown =
+      (iconTarget &&
+        designRules.find((r) => inScope(r) && normSel(r.selector).includes(`.${iconTarget}`) && /(block|inline-flex|flex|inline-block)/i.test(r.decls.display || ""))) ||
+      null;
+    const closedIcon = designRules.find((r) => inScope(r) && /\.card-tab-icon|\.tag-icon|icon/i.test(normSel(r.selector)) && /none/i.test(r.decls.display || ""));
+    // 图标与文案至少要有一边在本作用域内被显式声明，否则说明该形态未在本层落地
+    const landed = shown || closedIcon || closed.length;
+    if (!landed) continue;
+    if (!closed.length) {
+      err(
+        "E9",
+        `${change.id} 的 form=${change.form} 只落了「显图标」，没有在同一作用域 ${scope} 内收口文案（需要 .${textTarget} 的 display:none，锚定 ${scope}）—— 图标与文案并存会把固定窄宽挤爆，文案被截断（如「工作台」→「工…」）。注意：作用域外的兄弟变体收口（如 :not(:nth-child(1))）不算成对。`,
+      );
+      continue;
+    }
+    if (!/!important/i.test(closed[0].decls.display || "")) {
+      warn("E9", `${change.id} 的文案收口 ${closed[0].selector} 未加 !important，存在被组件 scoped 同权反压的风险。`);
+    } else {
+      info("E9", `${change.id} 图标/文案收口成对 ✓（${closed[0].selector}）`);
+    }
+  }
+})();
+
+// ── @sid 标记覆盖率（可选增强） ─────────────────────────────
+(function checkSidCoverage() {
+  const marked = new Set([...designCss.matchAll(/@sid\s*:\s*([\w.$-]+)/g)].map((m) => m[1]));
+  if (!marked.size) {
+    info("SID", "设计层未使用 @sid 标记；建议每条设计层规则上方标注 /* @sid: <语义ID> */，即可启用「变更集 ↔ 设计层」逐条覆盖对账。");
+    return;
+  }
+  const declared = new Set((changeset?.changes || []).map((c) => c.id));
+  const missing = [...declared].filter((sid) => !marked.has(sid));
+  for (const sid of missing) {
+    warn("SID", `变更集声明了 ${sid}，但设计层没有对应 @sid 标记 —— 无法证明该条已落到样式/结构。`);
+  }
+  info("SID", `@sid 覆盖率：${declared.size - missing.length}/${declared.size}`);
+})();
+
+// ── 输出 ────────────────────────────────────────────────────
+const result = { project: PROJECT, errors, warnings, infos };
+
+const CHECK_TITLES = {
+  E1: "变量悬空",
+  E2: "层错位",
+  E3: "层叠败北",
+  E4: "选择器挂空",
+  E5: "列宽预算",
+  E6: "visible:false 收口断言",
+  E7: "激活态越层",
+  E8: "浮层残留",
+  E9: "形态收口缺件",
+  E10: "scoped 规则挂空",
+  SID: "@sid 覆盖率",
+};
+
+const REPORT_PATH = argValue("--report", null);
+if (REPORT_PATH) {
+  const rel = (p) => path.relative(PROJECT, p).replace(/\\/g, "/");
+  const rows = Object.keys(CHECK_TITLES)
+    .map((id) => {
+      const e = errors.filter((x) => x.id === id).length;
+      const w = warnings.filter((x) => x.id === id).length;
+      return { id, title: CHECK_TITLES[id], e, w };
+    })
+    .filter((r) => r.e || r.w);
+
+  const lines = [
+    "# 设计层闭环审计报告",
+    "",
+    `- 项目：\`${PROJECT}\``,
+    `- 设计层文件：${DESIGN_FILES.map(rel).join("、") || "(未发现)"}`,
+    `- 变更集：${changesetFile ? rel(changesetFile) : "(未发现)"}`,
+    `- 词典条目：${dictEntries.length} ｜ 设计层规则：${designRules.length} ｜ 容器可用宽：${CONTAINER_WIDTH}px${CONTAINER_EXPLICIT ? "" : "（估值，用 --container-width 校准）"}`,
+    `- 结论：**ERROR ${errors.length} ｜ WARN ${warnings.length}**`,
+    "",
+    "## 命中分布",
+    "",
+    "| 检查项 | 含义 | ERROR | WARN |",
+    "|---|---|---|---|",
+    ...rows.map((r) => `| ${r.id} | ${r.title} | ${r.e} | ${r.w} |`),
+    "",
+    "## 待修项（ERROR）",
+    "",
+    ...(errors.length ? errors.map((e, i) => `${i + 1}. **[${e.id}] ${CHECK_TITLES[e.id] || ""}** — ${e.msg}`) : ["（无）"]),
+    "",
+    "## 提示项（WARN）",
+    "",
+    ...(warnings.length ? warnings.map((w, i) => `${i + 1}. **[${w.id}] ${CHECK_TITLES[w.id] || ""}** — ${w.msg}`) : ["（无）"]),
+    "",
+    "## 已通过项",
+    "",
+    ...(infos.length ? infos.map((i) => `- [${i.id}] ${i.msg}`) : ["（无）"]),
+    "",
+    `> 复跑：\`node scripts/design-audit.mjs --project "${PROJECT}" --container-width ${CONTAINER_WIDTH}\``,
+    "",
+  ];
+  const out = path.resolve(REPORT_PATH);
+  fs.mkdirSync(path.dirname(out), { recursive: true });
+  fs.writeFileSync(out, lines.join("\n"), "utf-8");
+  console.log(`\n审计报告已写入：${out}`);
+}
+
+if (AS_JSON) {
+  console.log(JSON.stringify(result, null, 2));
+} else {
+  console.log("\n设计层闭环审计\n");
+  console.log(`项目: ${PROJECT}`);
+  console.log(`设计层文件: ${DESIGN_FILES.map((f) => path.relative(PROJECT, f).replace(/\\/g, "/")).join(", ") || "(未发现)"}`);
+  console.log(`变更集: ${changesetFile ? path.relative(PROJECT, changesetFile) : "(未发现)"}`);
+  console.log(`词典条目: ${dictEntries.length} | 设计层规则: ${designRules.length}\n`);
+  for (const i of infos) console.log(`  · [${i.id}] ${i.msg}`);
+  for (const w of warnings) console.log(`  ! [${w.id}] ${w.msg}`);
+  for (const e of errors) console.log(`  \u2717 [${e.id}] ${e.msg}`);
+  console.log(`\n${"=".repeat(50)}`);
+  console.log(`闭环审计：ERROR ${errors.length} | WARN ${warnings.length}`);
+  if (errors.length) {
+    console.log("\n\u2717 设计层存在「声明了却不会生效 / 形态未落地」的问题，修复后重跑。\n");
+  } else {
+    console.log("\n\u2713 设计层闭环审计通过（样式声明均已具备生效条件）。\n");
+  }
+}
+
+process.exit(errors.length ? 1 : 0);