@qilitt-mickey/vue3-temp-skill 1.2.5 → 1.2.7

package/adapters/vue-element-plus.json

@@ -0,0 +1,634 @@
+{
+  "schema": "ui.adapter/1.0",
+  "adapter": "vue-element-plus",
+  "stack": "vue3 + element-plus",
+  "$comment": "adapter 的机器可读部分：generate-css.mjs 与 verify-render.mjs 消费本文件。Markdown 文档（references/adapters/vue-element-plus.md）给人读，本文件给机器读——两者内容同源，改一处必须同步另一处。",
+
+  "output": {
+    "dir": "src/styles",
+    "files": ["ui-tokens.css", "ui-roles.css", "ui-layout.css"],
+    "entryImport": "src/main.ts",
+    "importOrder": ["ui-tokens.css", "ui-roles.css", "ui-layout.css"],
+    "importNote": "三份 CSS 必须作为 TS import 在 element-plus/dist/index.css 之后引入（main.ts 中 EP css 注释标明『一定要放在index.scss后』——EP 全量 css 是独立 <style> 标签且位于 index.scss 之后，@import 进 index.scss 会被 EP 盖住）。"
+  },
+
+  "innerTargets": {
+    "$comment": "契约 inner[] → 全局 CSS 后代选择器目标（ui-roles.css 是非 scoped 全局文件，禁止 :deep()）。default = 角色类自身。",
+    "shell-sidebar-logo": "span, .sidebar-title",
+    "shell-sidebar-menu": "default",
+    "shell-sidebar-group": ".el-sub-menu__title span",
+    "shell-sidebar-item": "span",
+    "shell-sidebar-item-active": "span",
+    "shell-header": "default",
+    "shell-header-collapse": "default",
+    "shell-header-icon": "default",
+    "shell-header-user": "default",
+    "shell-tabs": "default",
+    "shell-tabs-item": "default",
+    "shell-tabs-item-active": "default",
+    "shell-tabs-close": "default",
+    "shell-content": "default",
+    "page-card": "default",
+    "page-header": "default",
+    "page-header-title": "default",
+    "filter-section": "default",
+    "filter-item": "default",
+    "filter-label": "default",
+    "filter-actions": "default",
+    "filter-input": ".el-input__wrapper",
+    "filter-select": ".el-select__wrapper",
+    "filter-date-range": ".el-input__wrapper",
+    "toolbar-bar": "default",
+    "table-wrapper": "default",
+    "table-header-cell": ".cell",
+    "table-cell": ".cell",
+    "table-cell-index": ".cell",
+    "table-cell-selection": "default",
+    "table-cell-amount": ".cell",
+    "table-cell-status": ".cell",
+    "table-cell-action": ".cell",
+    "pagination-bar": "default",
+    "button-primary": "default",
+    "button-secondary": "default",
+    "button-danger": "default",
+    "button-text": "default",
+    "tag-status": "default"
+  },
+
+  "stateChannels": {
+    "$comment": "契约 states.<态> → CSS 选择器片段（追加在角色类后）。{self}=角色类自身。EP 真实态类名在此统一，生成器不猜。",
+    "hover": ":hover",
+    "disabled": ".is-disabled, :disabled",
+    "active": ".is-active",
+    "focus": ".is-focus, :focus-within",
+    "checked": ".is-checked"
+  },
+
+  "extraRules": {
+    "$comment": "EP DOM 结构等价转换：契约声明落在 A 元素，但 EP 把视觉承载在 B 元素/用 C 机制表达。规则由 generate-css 在对应角色段后自动追加。selector 中 {role}=角色类名，{tokens}=ui-tokens.css 变量。",
+    "filter-input": [
+      {
+        "when": "host contains border",
+        "emit": [
+          ".role-filter-input { border: none; padding: 0; }",
+          ".role-filter-input:focus-within { box-shadow: none; border-color: transparent; }",
+          ".role-filter-input .el-input__wrapper { box-shadow: 0 0 0 1px var(--color-border-strong) inset; border: none; background-color: var(--color-surface); border-radius: var(--radius-md); padding: 0 11px; height: var(--size-control-height); }"
+        ],
+        "reason": "EP 输入框边框是 wrapper 的 box-shadow inset：契约 border/padding 声明从根元素取消（否则根+wrapper 双边框），等价转移到 wrapper"
+      },
+      {
+        "when": "states.hover.host contains border-color",
+        "emit": ".role-filter-input:hover .el-input__wrapper { box-shadow: 0 0 0 1px var(--color-brand-strong) inset; }",
+        "reason": "hover 边框色落到 wrapper box-shadow"
+      },
+      {
+        "when": "states.focus.host contains border-color",
+        "emit": ".role-filter-input .el-input__wrapper.is-focus { box-shadow: 0 0 0 1px var(--color-brand) inset, 0 0 0 2px var(--color-brand-subtle) !important; }",
+        "reason": "focus 主色 + 2px 浅阶光晕；EP is-focus 带自身 box-shadow 需提权"
+      }
+    ],
+    "filter-select": [
+      {
+        "when": "host contains border",
+        "emit": [
+          ".role-filter-select { border: none; padding: 0; }",
+          ".role-filter-select:focus-within { box-shadow: none; border-color: transparent; }",
+          ".role-filter-select .el-select__wrapper { box-shadow: 0 0 0 1px var(--color-border-strong) inset; border: none; background-color: var(--color-surface); border-radius: var(--radius-md); min-height: var(--size-control-height); padding: 0 11px; }"
+        ],
+        "reason": "EP 新版 select wrapper 同样 box-shadow 模拟边框；根元素 border/padding 取消"
+      },
+      {
+        "when": "states.hover.host contains border-color",
+        "emit": ".role-filter-select:hover .el-select__wrapper { box-shadow: 0 0 0 1px var(--color-brand-strong) inset; }"
+      },
+      {
+        "when": "states.focus.host contains border-color",
+        "emit": ".role-filter-select .el-select__wrapper.is-focus { box-shadow: 0 0 0 1px var(--color-brand) inset, 0 0 0 2px var(--color-brand-subtle) !important; }"
+      }
+    ],
+    "filter-date-range": [
+      {
+        "when": "host contains border",
+        "emit": [
+          ".role-filter-date-range { border: none; padding: 0; }",
+          ".role-filter-date-range:focus-within { box-shadow: none; border-color: transparent; }",
+          ".el-input__wrapper.role-filter-date-range { box-shadow: 0 0 0 1px var(--color-border-strong) inset; border: none; background-color: var(--color-surface); border-radius: var(--radius-md); height: var(--size-control-height); padding: 0 11px; gap: 8px; }",
+          ".el-input__wrapper.role-filter-date-range:hover { box-shadow: 0 0 0 1px var(--color-brand-strong) inset; }",
+          ".el-input__wrapper.role-filter-date-range.is-focus { box-shadow: 0 0 0 1px var(--color-brand) inset, 0 0 0 2px var(--color-brand-subtle) !important; }",
+          ".role-filter-date-range .el-range-input { font-size: var(--font-size-md); }",
+          ".role-filter-date-range .el-range-separator { color: var(--color-text-tertiary); font-size: var(--font-size-md); line-height: 1; }"
+        ],
+        "reason": "EP daterange 根元素自身就是 .el-input__wrapper（同元素复合选择器，非后代）"
+      }
+    ],
+    "table-header-cell": [
+      {
+        "when": "host contains height",
+        "emit": [
+          ".el-table th.role-table-header-cell { height: 48px; padding: 0 !important; background-color: #FAFAFA !important; border-bottom: 1px solid var(--color-border-base) !important; position: sticky !important; top: 0; z-index: 2; }",
+          ".el-table th.role-table-header-cell .cell { padding: 0 16px; font-weight: var(--font-weight-medium) !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; color: var(--color-text-primary) !important; }",
+          ".el-table th.role-table-header-cell--index .cell, .el-table td.role-table-cell-index .cell { padding: 0 12px; justify-content: center; }",
+          ".el-table th.role-table-header-cell--selection .cell, .el-table td.role-table-cell-selection .cell { padding: 0; display: flex; align-items: center; justify-content: center; }"
+        ],
+        "reason": "element-plus.scss .el-table thead th{border-bottom:2px !imp} 是 (0,1,2)+!imp；本侧 .el-table th.role-… (0,2,1)+!imp 才赢；EP th.el-table__cell position:relative 也需 !imp 压"
+      }
+    ],
+    "table-cell": [
+      {
+        "when": "host contains height",
+        "emit": "td.role-table-cell { height: 55px; padding: 0 !important; }",
+        "reason": "同表头：td 上下 padding 归零"
+      },
+      {
+        "when": "host contains padding",
+        "emit": "td.role-table-cell .cell { padding: 0 16px; }"
+      },
+      {
+        "when": "variants density",
+        "emit": [
+          ".density-loose td.role-table-cell { height: 55px; }",
+          ".density-normal td.role-table-cell { height: 47px; }",
+          ".density-compact td.role-table-cell { height: 39px; }"
+        ],
+        "reason": "密度三档整份替换，由表格根容器 density-* 类驱动"
+      },
+      {
+        "when": "linkedStates rowHover",
+        "emit": ".el-table__body tr:hover > td.el-table__cell { background-color: #FAFAFA; }",
+        "reason": "行 hover 底色 #FAFAFA（EP hover 变量已桥接，此为兜底）"
+      },
+      {
+        "when": "linkedStates rowSelected",
+        "emit": ".el-table__body tr.row-selected > td.el-table__cell { background-color: var(--color-brand-subtle) !important; }",
+        "reason": "选中行底色 brand.subtle，含吸附列联动"
+      }
+    ],
+    "table-cell-action": [
+      {
+        "when": "sticky right",
+        "emit": [
+          ".el-table td.role-table-cell-action { text-align: center !important; }",
+          ".el-table td.role-table-cell-action .cell { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; overflow: visible; }",
+          ".el-table th.role-table-header-cell--action { text-align: center !important; }",
+          ".el-table th.role-table-header-cell--action .cell { text-align: center; justify-content: center; }",
+          ".el-table td.role-table-cell-amount .cell { text-align: right; justify-content: flex-end; }",
+          ".role-table-cell-action .re-table-operate { justify-content: center; }",
+          ".role-table-cell-action .re-table-operate__slot { width: auto !important; min-width: 0 !important; }",
+          ".role-table-cell-action .re-table-operate__slot + .re-table-operate__slot::before { content: \"\"; display: inline-block; width: 1px; height: 14px; background: var(--color-border-base); margin: 0 8px; vertical-align: middle; }",
+          ".role-table-cell-action .el-button + .el-button { margin-left: 0; }",
+          ".el-table td.role-table-cell-action.el-table-fixed-column--right { background-color: var(--color-surface); z-index: 10 !important; box-shadow: -2px 0 4px rgba(0,0,0,0.06); }"
+        ],
+        "reason": "EP .el-table__cell 默认 text-align:left、fixed 列 z-index:2，需 .el-table 复合提权。操作列几何按基线 .op-btn-group 流式：槽宽 auto（压 ReTableOperate 等宽槽）、分割线 ::before margin 0 8px（基线 .list-table-action-divider）、.cell padding 0 16px（基线 td padding 16px 双层等价）"
+      },
+      {
+        "when": "linkedStates rowHover",
+        "emit": ".el-table__body tr:hover > td.role-table-cell-action.el-table-fixed-column--right { background-color: #FAFAFA; }"
+      },
+      {
+        "when": "linkedStates rowSelected",
+        "emit": ".el-table__body tr.row-selected > td.role-table-cell-action.el-table-fixed-column--right { background-color: var(--color-brand-subtle) !important; }"
+      }
+    ],
+    "table-cell-index": [
+      { "when": "box width", "emit": ".el-table td.role-table-cell-index { width: 56px; min-width: 56px; text-align: center !important; }" }
+    ],
+    "table-cell-selection": [
+      { "when": "box width", "emit": ".el-table td.role-table-cell-selection { width: 48px; min-width: 48px; text-align: center !important; }" },
+      { "when": "childRoles checkbox", "emit": ".role-table-cell-selection .el-checkbox__inner { width: 16px; height: 16px; border-radius: 4px; }" }
+    ],
+    "table-cell-status": [
+      { "when": "host padding 0", "emit": "td.role-table-cell-status .cell { padding: 0 16px; }" }
+    ],
+    "pagination-bar": [
+      {
+        "when": "childRoles pagerBtn",
+        "emit": [
+          ".role-pagination-bar .el-pager li { min-width: 32px; height: 32px; line-height: 30px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background-color: var(--color-surface); font-size: var(--font-size-md); color: var(--color-text-primary); margin: 0 4px; }",
+          ".role-pagination-bar .el-pager li.is-active { background-color: var(--color-brand); color: var(--color-text-inverse); border-color: var(--color-brand); }",
+          ".role-pagination-bar .el-pager li.is-disabled { color: var(--color-text-tertiary); background-color: #F5F5F5; cursor: not-allowed; }",
+          ".role-pagination-bar button { min-width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background-color: var(--color-surface); }",
+          ".role-pagination-bar button:disabled { color: var(--color-text-tertiary); background-color: #F5F5F5; cursor: not-allowed; }"
+        ],
+        "reason": "EP 分页按钮/页码/激活/禁用落到真实 DOM"
+      },
+      {
+        "when": "childRoles size",
+        "emit": ".role-pagination-bar .el-pagination__sizes .el-select__wrapper { min-height: 32px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-border-strong) inset; }"
+      },
+      {
+        "when": "childRoles jumpInput",
+        "emit": ".role-pagination-bar .el-pagination__jump .el-input__wrapper { min-height: 32px; width: 48px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-border-strong) inset; }"
+      }
+    ],
+    "button-primary": [
+      {
+        "when": "host",
+        "emit": [
+          "button.el-button.role-button-primary { display: inline-flex !important; font-weight: var(--font-weight-normal) !important; background-color: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); border-radius: var(--radius-md); height: var(--size-control-height); padding: 0 15px; margin-left: 0 !important; }",
+          "button.el-button.role-button-primary:hover { background-color: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--color-text-inverse); }",
+          "button.el-button.role-button-primary.is-disabled, button.el-button.role-button-primary:disabled { background-color: var(--color-brand-subtle); border-color: var(--color-brand-subtle); color: var(--color-text-inverse); cursor: not-allowed; opacity: 1; }"
+        ],
+        "reason": "EP 按钮默认色由 --el-button-* 变量驱动，角色类提权覆盖；display inline-flex 与 font-weight 400 对抗 EP .el-button{display:inline-flex→被 scoped 覆盖为 flex} 与项目按钮 500 字重；disabled 需压掉 EP 的 opacity 方案"
+      }
+    ],
+    "button-secondary": [
+      {
+        "when": "host",
+        "emit": [
+          "button.el-button.role-button-secondary { display: inline-flex !important; font-weight: var(--font-weight-normal) !important; background-color: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-primary); border-radius: var(--radius-md); height: var(--size-control-height); padding: 0 15px; margin-left: 0 !important; }",
+          "button.el-button.role-button-secondary:hover { background-color: var(--color-surface); border-color: var(--color-brand); color: var(--color-brand); }",
+          "button.el-button.role-button-secondary.is-disabled, button.el-button.role-button-secondary:disabled { background-color: var(--color-surface); border-color: var(--color-border-base); color: var(--color-text-tertiary); opacity: 1; }"
+        ],
+        "reason": "契约 notes：hover 仅变边框色与文字色，背景不变（覆盖 EP 默认 hover 变底）"
+      }
+    ],
+    "button-danger": [
+      {
+        "when": "host",
+        "emit": [
+          "button.el-button.role-button-danger { display: inline-flex !important; font-weight: var(--font-weight-normal) !important; background-color: var(--color-state-error); border: none; color: var(--color-text-inverse); border-radius: var(--radius-md); height: var(--size-control-height); padding: 0 12px; margin-left: 0 !important; }",
+          "button.el-button.role-button-danger:hover { background-color: var(--color-state-error-hover); color: var(--color-text-inverse); }",
+          "button.el-button.role-button-danger.is-disabled, button.el-button.role-button-danger:disabled { background-color: var(--color-state-error-bg); color: var(--color-state-error); opacity: 1; cursor: not-allowed; }"
+        ]
+      }
+    ],
+    "button-text": [
+      {
+        "when": "host",
+        "emit": [
+          "button.el-button.role-button-text { display: inline-flex !important; font-weight: var(--font-weight-normal) !important; background: transparent; border: none; padding: 0; height: auto; color: var(--color-brand); }",
+          "button.el-button.role-button-text:hover { background: transparent; color: var(--color-brand-strong); }",
+          "button.el-button.role-button-text--danger { color: var(--color-state-error); }",
+          "button.el-button.role-button-text--danger:hover { color: var(--color-state-error-hover); }"
+        ],
+        "reason": "纯文字形态：无背景无边框无圆角；danger 变体类名后缀"
+      }
+    ],
+    "tag-status": [
+      {
+        "when": "variants",
+        "emit": [
+          ".role-tag-status { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1; white-space: nowrap; flex-shrink: 0; }",
+          ".role-tag-status .el-icon, .role-tag-status svg { width: 14px; height: 14px; font-size: 14px; }",
+          ".role-tag-status--success { background-color: var(--color-state-success-bg); border-color: var(--tag-success-border); color: var(--color-state-success); }",
+          ".role-tag-status--processing { background-color: var(--color-brand-subtle); border-color: var(--color-brand-border); color: var(--color-brand); }",
+          ".role-tag-status--warning { background-color: var(--color-state-warning-bg); border-color: var(--tag-warning-border); color: var(--color-state-warning); }",
+          ".role-tag-status--error { background-color: var(--color-state-error-bg); border-color: var(--tag-error-border); color: var(--color-state-error); }",
+          ".role-tag-status--outlined { background-color: transparent; border-color: var(--color-brand-border); color: var(--color-brand); }",
+          ".role-tag-status--default { background-color: var(--tag-default-bg); border-color: var(--color-border-base); color: var(--color-text-secondary); }"
+        ],
+        "reason": "标签用纯 span 实现（不用 el-tag，零 EP 干扰）；六变体整份替换"
+      }
+    ],
+    "shell-header": [
+      {
+        "when": "host padding + flatten shadow",
+        "emit": [
+          ".ui-region-header, .role-shell-header { padding: 0 var(--space-6) 0 0 !important; box-shadow: none !important; }"
+        ],
+        "reason": "lay-navbar scoped .navbar-shell 有 padding-inline（data-v 属性选择器特异性 0,2,0）与 UnoCSS shadow-sm，需提权对抗"
+      }
+    ],
+    "shell-sidebar-item-active": [
+      {
+        "when": "host",
+        "emit": [
+          "body .sidebar-container .el-menu--vertical .el-menu-item.is-active.role-shell-sidebar-item-active, body .sidebar-container .el-menu--vertical .el-menu-item.role-shell-sidebar-item-active { background-color: var(--color-brand) !important; color: var(--color-text-inverse) !important; }",
+          "body .sidebar-container .el-menu--vertical .el-menu-item.is-active.role-shell-sidebar-item-active span, body .sidebar-container .el-menu--vertical .el-menu-item.role-shell-sidebar-item-active span { color: var(--color-text-inverse) !important; }"
+        ],
+        "reason": "sidebar.scss 的 body[layout=vertical] .sidebar-container .el-menu-item{transparent !imp} 是 (0,3,1)+!imp；本侧加 .sidebar-container 复合到 (0,4,0)+!imp 才赢（!important 对决比特异性）"
+      }
+    ],
+    "shell-sidebar-item": [
+      {
+        "when": "host",
+        "emit": [
+          "body .sidebar-container .el-menu-item.role-shell-sidebar-item { height: 40px; line-height: 40px; padding: 0 20px !important; margin: 0 8px; border-radius: var(--radius-md); background-color: transparent; color: rgba(255,255,255,0.65) !important; box-sizing: border-box; position: relative; white-space: nowrap; }",
+          "body .sidebar-container .el-menu-item.role-shell-sidebar-item span, body .sidebar-container .el-menu-item.role-shell-sidebar-item .el-text { color: inherit !important; }",
+          "body .sidebar-container .el-menu-item.role-shell-sidebar-item:hover { background-color: rgba(255,255,255,0.08) !important; color: var(--color-text-inverse) !important; }",
+          ".sidebar-container .el-menu-item.role-shell-sidebar-item-active::before { content: \"\"; position: absolute; inset: auto; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; margin: 0; background: var(--color-brand) !important; border-radius: var(--radius-md); }",
+          ".sidebar-container .el-menu-item.role-shell-sidebar-item-active::after { content: \"\"; position: absolute; left: -8px; top: 25%; bottom: 25%; width: 3px; border-radius: 0 2px 2px 0; background-color: var(--color-brand); z-index: 2; }"
+        ],
+        "reason": "EP 菜单项 padding 由 --el-menu-item-padding 驱动，!important 提权；激活竖条 = pill 变体的 ::before 伪元素（契约 notes 明示由项目侧补足）；hover 对抗 sidebar.scss .el-menu-item:hover !imp"
+      }
+    ],
+    "shell-sidebar-group": [
+      {
+        "when": "host",
+        "emit": [
+          "li.el-sub-menu.role-shell-sidebar-group > .el-sub-menu__title { height: auto; padding: 8px 20px !important; white-space: nowrap; background-color: transparent; }",
+          "li.el-sub-menu.role-shell-sidebar-group > .el-sub-menu__title span { font-size: 12px; color: rgba(255,255,255,0.35) !important; text-transform: uppercase; letter-spacing: 0.5px; }",
+          "li.el-sub-menu.role-shell-sidebar-group > .el-sub-menu__title .el-sub-menu__icon-arrow { display: none; }",
+          "li.el-sub-menu.role-shell-sidebar-group > .el-sub-menu__title:hover { background-color: transparent; }",
+          "li.el-sub-menu.role-shell-sidebar-group > .el-sub-menu__title .sub-menu-icon { display: none; }"
+        ],
+        "reason": "分组标题：class 落在 el-sub-menu 根 li 上；隐藏展开箭头与图标（基线分组标题无图标无箭头）"
+      }
+    ],
+    "shell-sidebar-menu": [
+      {
+        "when": "host",
+        "emit": ".el-menu.role-shell-sidebar-menu { background-color: transparent; padding: 8px 0; border-right: none; }"
+      }
+    ],
+    "shell-sidebar-logo": [
+      {
+        "when": "childRoles icon",
+        "emit": [
+          ".role-shell-sidebar-logo .logo-badge { width: 28px; height: 28px; border-radius: 6px; background-color: var(--color-brand); color: var(--color-text-inverse); font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }",
+          ".role-shell-sidebar-logo .sidebar-title, .role-shell-sidebar-logo span:not(.logo-badge) { font-size: 16px; font-weight: var(--font-weight-medium); color: var(--color-text-inverse); }"
+        ]
+      }
+    ],
+    "shell-header-collapse": [
+      {
+        "when": "host",
+        "emit": [
+          ".role-shell-header-collapse { width: var(--size-control-width-s); height: var(--size-control-width-s); border-radius: var(--radius-md); background-color: transparent; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }",
+          ".role-shell-header-collapse .el-icon, .role-shell-header-collapse svg { font-size: 18px; color: var(--color-text-secondary); }",
+          ".role-shell-header-collapse:hover { background-color: transparent; }",
+          ".role-shell-header-collapse:hover .el-icon, .role-shell-header-collapse:hover svg { color: var(--color-text-primary); }"
+        ]
+      }
+    ],
+    "shell-header-icon": [
+      {
+        "when": "host",
+        "emit": [
+          ".role-shell-header-icon { width: 32px !important; height: 32px !important; border-radius: var(--radius-md); display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; }",
+          ".role-shell-header-icon .el-icon, .role-shell-header-icon svg, .role-shell-header-icon [class*='i-ep'] { font-size: 16px; width: 16px; height: 16px; color: var(--color-text-secondary); }",
+          ".role-shell-header-icon:hover { background-color: #FAFAFA; }",
+          ".role-shell-header-icon:hover .el-icon, .role-shell-header-icon:hover svg { color: var(--color-text-primary); }"
+        ],
+        "reason": "对抗 SidebarFullScreen scoped .fullscreen-icon 38px×54px 与 set-icon w-36/h-bar：!important 提权"
+      },
+      {
+        "when": "variants with_text",
+        "emit": [
+          ".role-shell-header-icon--with_text { width: auto !important; padding: 0 8px; gap: 2px; font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }",
+          ".role-shell-header-icon--with_text .lang-seg.is-active { color: var(--color-brand); }"
+        ]
+      }
+    ],
+    "shell-header-user": [
+      {
+        "when": "childRoles",
+        "emit": [
+          ".role-shell-header-user { padding: 0 8px 0 12px; gap: var(--space-2); border-radius: var(--radius-md); display: flex; align-items: center; cursor: pointer; height: var(--size-control-width-s); }",
+          ".role-shell-header-user:hover { background-color: #FAFAFA; }",
+          ".role-shell-header-user .user-meta { display: flex; flex-direction: column; gap: 4px; }",
+          ".role-shell-header-user .user-greeting { font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: 1; }",
+          ".role-shell-header-user .user-name { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1; }",
+          ".role-shell-header-user .user-avatar { width: 28px; height: 28px; border-radius: 9999px; background-color: var(--color-brand-subtle); color: var(--color-brand); font-size: 13px; font-weight: var(--font-weight-medium); border: 1px solid var(--color-border-base); display: inline-flex; align-items: center; justify-content: center; }",
+          ".role-shell-header-user:hover .user-avatar { border-color: var(--color-brand); }"
+        ]
+      }
+    ],
+    "shell-tabs": [
+      {
+        "when": "host",
+        "emit": [
+          ".tags-view.role-shell-tabs { height: var(--tabs-height); background-color: var(--color-surface) !important; border-bottom: 1px solid var(--color-border-base); box-shadow: none !important; padding: 0; }",
+          ".tags-view .chrome-tab__bg { display: none; }",
+          ".tags-view .chrome-tab-divider { width: 1px !important; height: 100% !important; background-color: var(--color-border-base) !important; margin: 0 !important; }",
+          ".tags-view .scroll-item { margin-right: 0 !important; padding-right: 0 !important; }"
+        ],
+        "reason": "chrome 梯形装饰隐藏；divider 重设为基线 1px 分隔线；压平 scoped margin/padding"
+      }
+    ],
+    "shell-tabs-item": [
+      {
+        "when": "host",
+        "emit": [
+          ".tags-view .scroll-item.role-shell-tabs-item { height: 40px !important; line-height: normal !important; padding: 0 12px !important; background-color: transparent !important; gap: 6px; display: flex !important; align-items: center; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; color: var(--color-text-secondary) !important; }",
+          ".tags-view .scroll-item.role-shell-tabs-item:focus, .tags-view .scroll-item.role-shell-tabs-item a:focus { outline: none !important; }",
+          ".tags-view .scroll-item.role-shell-tabs-item .tag-title { font-size: var(--font-size-md); color: var(--color-text-secondary) !important; }",
+          ".tags-view .scroll-item.role-shell-tabs-item:hover { background-color: rgba(0,0,0,0.03) !important; }",
+          ".tags-view .scroll-item.role-shell-tabs-item:hover .tag-title { color: var(--color-text-primary) !important; }",
+          ".tags-view .scroll-item.role-shell-tabs-item-active, .tags-view .scroll-item.role-shell-tabs-item-active:hover { background-color: transparent !important; box-shadow: none !important; border: none !important; color: var(--color-brand) !important; }",
+          ".tags-view .scroll-item.role-shell-tabs-item-active .tag-title, .tags-view .scroll-item.role-shell-tabs-item-active:hover .tag-title { color: var(--color-brand) !important; font-weight: var(--font-weight-medium); }"
+        ],
+        "reason": "chrome-item scoped height calc(40-4)=36px、display inline-block、is-active 白字均带 data-v 特异性，全部 !important 压平"
+      }
+    ],
+    "shell-tabs-close": [
+      {
+        "when": "host",
+        "emit": [
+          ".tags-view .tag-close-btn.role-shell-tabs-close, .tags-view .el-icon-close.role-shell-tabs-close { width: 12px !important; height: 12px !important; opacity: 0.45; border-radius: var(--radius-sm) !important; color: #000000 !important; font-size: 12px !important; display: inline-flex !important; align-items: center; justify-content: center; }",
+          ".tags-view .tag-close-btn.role-shell-tabs-close .i-ep\\:close, .tags-view .tag-close-btn.role-shell-tabs-close [class*='close'] { font-size: 12px !important; width: 12px !important; height: 12px !important; }",
+          ".tags-view .tag-close-btn.role-shell-tabs-close:hover, .tags-view .el-icon-close.role-shell-tabs-close:hover { background-color: var(--color-state-error-bg) !important; color: var(--color-state-error) !important; opacity: 1; }"
+        ],
+        "reason": "scoped .tag-close-btn 16px/50%/brand 带 data-v，全部提权"
+      }
+    ],
+    "page-card": [
+      {
+        "when": "host",
+        "emit": ".role-page-card { background-color: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: none; overflow: hidden; padding: 0; }"
+      }
+    ],
+    "page-header": [
+      { "when": "host", "emit": ".role-page-header { padding: var(--space-5); border-bottom: 1px solid var(--color-border-base); display: flex; align-items: center; justify-content: space-between; }" },
+      { "when": "host+childRoles", "emit": ".role-page-header .role-page-header-actions { display: flex; align-items: center; gap: 8px; }", "reason": "页头动作组流式排列：admin 基线 page.header.title.actions gap space.2=8px（契约 roles 未单列该容器角色，由 adapter 结构等价承载）" }
+    ],
+    "page-header-title": [
+      {
+        "when": "host+inner+childRoles",
+        "emit": [
+          ".role-page-header-title { display: flex; flex-direction: column; }",
+          ".role-page-header-title .title-text { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 28px; }",
+          ".role-page-header-title .subtitle-text { font-size: var(--font-size-md); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); line-height: 22px; margin-top: 2px; }"
+        ]
+      }
+    ],
+    "filter-section": [
+      { "when": "host", "emit": ".role-filter-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); align-items: center; padding: var(--space-5); border-bottom: 1px solid var(--color-border-base); }" }
+    ],
+    "filter-item": [
+      { "when": "host+span", "emit": ".role-filter-item { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }" }
+    ],
+    "filter-label": [
+      { "when": "host+inner", "emit": ".role-filter-label { width: 64px; text-align: right; font-size: var(--font-size-md); color: var(--color-text-secondary); flex-shrink: 0; }" }
+    ],
+    "filter-actions": [
+      { "when": "host", "emit": ".role-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; justify-self: end; margin-left: auto; }" }
+    ],
+    "toolbar-bar": [
+      { "when": "host+childRoles", "emit": [
+        ".role-toolbar-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-5) var(--space-2); gap: var(--space-2); }",
+        ".role-toolbar-bar .toolbar-group { display: flex; align-items: center; gap: 8px; }",
+        ".role-toolbar-bar .selection-count { font-size: var(--font-size-md); color: var(--color-text-secondary); }"
+      ] }
+    ],
+    "table-wrapper": [
+      { "when": "host", "emit": ".role-table-wrapper { padding: 0 var(--space-5); background-color: transparent; }" }
+    ],
+    "table-cell-amount": [
+      { "when": "host+inner", "emit": ".el-table td.role-table-cell-amount { text-align: right; } .el-table td.role-table-cell-amount .cell { text-align: right; font-variant-numeric: tabular-nums; }" }
+    ],
+    "shell-content": [
+      { "when": "host", "emit": ".role-shell-content { background-color: var(--color-page-bg); padding: 0; gap: var(--space-4); }" }
+    ]
+  },
+
+  "visualSanity": {
+    "$comment": "第二遍通用断言（UX 合理性，不是契约值比对）：verify-render.mjs 消费。规则与场景/页型无关——任何 EP 项目落地后都跑这套。失败修复定向：adapter.extraRules 提权 / 契约值，禁止手改生成物。",
+    "noWrap": {
+      "selectors": [
+        ".role-table-header-cell .cell",
+        ".role-tag-status",
+        "button.el-button",
+        ".role-shell-tabs-item .tag-title"
+      ],
+      "rule": "scrollWidth <= clientWidth + 1 且（.cell 类 white-space 为 nowrap）；换行/溢出即 FAIL"
+    },
+    "noEllipsis": {
+      "selectors": [
+        ".role-table-header-cell .cell",
+        ".role-table-cell-action .cell",
+        ".role-page-header-title .title-text",
+        ".role-filter-label"
+      ],
+      "rule": "getComputedStyle(textOverflow)!=='ellipsis' 或虽为 ellipsis 但 scrollWidth<=clientWidth+1（未实际截断）；截断即 FAIL"
+    },
+    "fullVisibility": {
+      "selectors": [
+        ".role-shell-header-collapse",
+        ".role-shell-header-icon",
+        ".role-shell-header-user",
+        ".role-filter-actions",
+        ".role-toolbar-bar .toolbar-group",
+        ".role-table-cell-action .cell .el-button, .role-table-cell-action .cell button",
+        ".role-pagination-bar .el-pagination"
+      ],
+      "rule": "每个选择器至少一个实例：display!==none && visibility!==hidden && rect.width>0 && rect.height>0；缺失/隐藏即 FAIL（折叠钮消失、操作列按钮被裁即此类）。工具栏右组（刷新/密度/列）由 ReTableBar 业务组件承载，不在此断言。"
+    },
+    "paddingSanity": {
+      "selectors": [
+        ".role-table-wrapper",
+        ".role-page-header",
+        ".role-filter-section"
+      ],
+      "rule": "左右 padding 均 >= 4px（内容不贴卡片边）；为 0 即 WARN（除非契约 region 显式 padding 0）。toolbar/pagination 由 ReTableBar/RePagination 委托内边距，不在此断言。"
+    },
+    "rowHeightSanity": {
+      "selectors": [".role-table-cell"],
+      "rule": "数据 td 实际 rect.height 与契约 table.cell 密度档 height 差 <= 2px；被撑高即 FAIL（实证：48→57 事故）"
+    },
+    "chipHeight": {
+      "selectors": [".role-tag-status", ".role-shell-tabs-close"],
+      "rule": "定高小件（标签/关闭钮）rect.height 与契约声明 height 差 <= 2px——换行会把高度撑大，而宽度不溢出，no-wrap 抓不到（实证：类型标签两行换行事故）"
+    },
+    "tabFlat": {
+      "selectors": [".role-shell-tabs-item", ".role-shell-tabs-item-active"],
+      "rule": "平面页签形态：borderTopWidth<=0 且 outlineStyle===none 且 boxShadow===none；出现边框/描边/阴影即 FAIL（实证：chrome 残留框事故）"
+    },
+    "wrapperPadding": {
+      "selectors": [".role-table-wrapper"],
+      "expectPx": 20,
+      "rule": "表格容器左右 padding 与契约 table.wrapper 声明值（0 20px）比对，容差 2px（实证：表格左右边距偏差事故）"
+    },
+    "gapGeometry": {
+      "groups": [
+        {
+        "name": "action-divider",
+        "container": ".role-table-cell-action .cell",
+        "itemSel": ".el-button",
+        "expectGap": 8,
+        "tol": 2,
+        "basis": "契约 table.cell.action gap 8px（adapter 已把 .cell flex 化承载 gap，分割线形态由 cell-action-divider 兜底）"
+      },
+        { "name": "toolbar-left", "container": ".role-toolbar-bar .toolbar-group:first-child", "itemSel": "> *", "expectGap": 8, "tol": 2, "basis": "契约 toolbar.bar group.left gap 8px" },
+        { "name": "header-actions", "container": ".role-page-header .role-page-header-actions", "itemSel": "> *", "expectGap": 8, "tol": 2, "basis": "契约 page.header.title.actions gap space.2=8px" }
+      ],
+      "rule": "相邻兄弟元素 rect 间距与基线/契约声明值比对——等宽槽/组件库 margin 会破坏流式间距（实证：操作列三钮间距偏差事故）"
+    },
+    "headerAlign": [
+      { "name": "action-center", "sel": ".el-table th.role-table-header-cell--action .cell", "expect": "center", "basis": "基线 thead .col-actions text-align:center" },
+      { "name": "amount-right", "sel": ".el-table td.role-table-cell-amount .cell", "expect": "right", "basis": "契约 table.cell.amount text-align:right" }
+    ]
+  },
+
+  "variableBridges": {
+    "$comment": "ui-tokens.css 桥接段：契约令牌 → 项目既有变量消费链（design-tokens.scss / element-plus.scss / sidebar.scss / index.scss）。generate-css 自动追加，手写会漏。",
+    "brand": [
+      { "var": "--brand-primary", "from": "--color-brand", "important": true },
+      { "var": "--brand-hover", "from": "--color-brand-hover", "important": true },
+      { "var": "--brand-active", "from": "--color-brand-strong", "important": true },
+      { "var": "--primary-color", "from": "--color-brand" },
+      { "var": "--primary-5", "from": "--color-brand" }
+    ],
+    "elPrimary": [
+      { "var": "--el-color-primary", "from": "--color-brand", "important": true },
+      { "var": "--el-color-primary-light-3", "from": "--color-brand-strong" },
+      { "var": "--el-color-primary-light-5", "value": "#92ADFF" },
+      { "var": "--el-color-primary-light-7", "value": "#BDCEFF" },
+      { "var": "--el-color-primary-light-8", "value": "#D3DEFF" },
+      { "var": "--el-color-primary-light-9", "value": "#E9EFFF" },
+      { "var": "--el-color-primary-dark-2", "value": "#1D49CC" }
+    ],
+    "geometry": [
+      { "var": "--header-height", "from": "layout:header.height", "important": true },
+      { "var": "--tabs-height", "from": "layout:tabs.height", "important": true },
+      { "var": "--sidebar-width", "from": "layout:sidebar.width", "important": true },
+      { "var": "--sidebar-collapsed-width", "from": "layout:sidebar.collapsedWidth", "important": true },
+      { "var": "--layout-content-padding", "from": "layout:content.padding", "important": true },
+      { "var": "--layout-header-offset", "value": "calc(var(--header-height) + var(--tabs-height))", "important": true },
+      { "var": "--vts-theme-menu-bg", "from": "--color-shell-bg", "important": true },
+      { "var": "--vts-tags-height", "value": "var(--tabs-height)" },
+      { "var": "--vts-bar-height", "value": "var(--header-height)" },
+      { "var": "--vts-tabs-height", "value": "var(--tabs-height)" },
+      { "var": "--vts-layout-header-offset", "value": "var(--layout-header-offset)" },
+      { "var": "--vts-margin", "value": "var(--layout-content-padding)" }
+    ],
+    "table": [
+      { "var": "--el-fill-color-light", "value": "#FAFAFA" },
+      { "var": "--el-table-header-bg-color", "value": "#FAFAFA" },
+      { "var": "--el-table-border-color", "from": "--color-border-base" },
+      { "var": "--el-table-row-hover-bg-color", "value": "#FAFAFA" }
+    ],
+    "text": [
+      { "var": "--el-text-color-primary", "from": "--color-text-primary" },
+      { "var": "--el-text-color-regular", "from": "--color-text-secondary" },
+      { "var": "--el-text-color-secondary", "from": "--color-text-tertiary" },
+      { "var": "--el-text-color-placeholder", "value": "#00000040" },
+      { "var": "--el-text-color-disabled", "value": "#00000040" }
+    ],
+    "border": [
+      { "var": "--el-border-color", "from": "--color-border-strong" },
+      { "var": "--el-border-color-light", "from": "--color-border-base" },
+      { "var": "--el-border-color-lighter", "from": "--color-border-base" }
+    ],
+    "bg": [
+      { "var": "--el-bg-color-page", "from": "--color-page-bg" },
+      { "var": "--el-fill-color-blank", "from": "--color-surface" }
+    ]
+  },
+
+  "roleSupplementVars": {
+    "$comment": "契约 role 声明中出现但 tokens 未定义的辅助变量（如 tag 变体边框色），generate-css 落进 ui-tokens.css 辅助段。",
+    "--tag-success-border": "#D9F7BE",
+    "--tag-warning-border": "#FFE58F",
+    "--tag-error-border": "#FFCCC2",
+    "--tag-default-bg": "rgba(0, 0, 0, 0.04)"
+  },
+
+  "layoutBridge": {
+    "$comment": "ui-layout.css 生成策略：项目壳层为「侧栏 fixed + 顶栏/页签 fixed-header + 内容 padding 偏移」，不是纯 grid。定位几何由 sidebar.scss（--sidebar-width 驱动）与 lay-header 承担，本文件只翻译区域视觉值。",
+    "shellClass": [".ui-page", ".role-shell-shell"],
+    "regionClasses": {
+      "sidebar": [".ui-region-sidebar", ".role-shell-sidebar"],
+      "header": [".ui-region-header", ".role-shell-header"],
+      "tabs": [".ui-region-tabs", ".role-shell-tabs"],
+      "content": [".ui-region-content", ".role-shell-content"]
+    },
+    "skipGeometry": {
+      "sidebar": ["width", "collapsedWidth", "position", "offset", "zIndex"],
+      "header": ["position", "offset", "zIndex"],
+      "tabs": ["position", "offset", "zIndex", "bleed"],
+      "content": ["padding", "gap", "display", "flex-direction", "position"]
+    },
+    "skipNote": "sidebar 宽度走 --sidebar-width 桥接；header/tabs 定位走 fixed-header；content padding 走 --vts-margin（.main-content 承担）——重复设会打架。"
+  }
+}