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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@qilitt-mickey/vue3-temp-skill",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
-  "description": "Vue 3 企业级中后台项目开发规范技能包 — core-kernel 架构、按需功能模块、视觉契约落地",
+  "description": "vue3-web-temp 项目工程技能：按需功能开发、保留业务的设计还原与视觉及功能双重验证",
   "bin": {
     "vue3-temp-skill": "./bin/cli.js"
   },
@@ -15,6 +15,8 @@
     "adapters/",
     "references/",
     "scripts/",
+    "!scripts/*.test.mjs",
+    "!scripts/__pycache__/",
     "mapping/",
     "SKILL.md",
     "README.md"
@@ -23,6 +25,7 @@
     "node": ">=22.12.0"
   },
   "scripts": {
+    "test": "node --test scripts/*.test.mjs",
     "release": "node release.js",
     "release:minor": "node release.js minor",
     "release:major": "node release.js major",

package/references/adapters/_new-adapter.md

@@ -1,88 +1,23 @@
----
-adapter: _new-adapter
-description: 新增 Vue 组件库适配的书写模板。照此填写即可接入一个未内置的 Vue 组件库，不接触契约。
----
+# 新增 Vue 组件库适配
 
-# 新增 adapter · 书写模板
+## 1. 核实项目
 
-项目用了本技能尚未覆盖的 **Vue 组件库**时，照此填写一份 adapter。**不改契约、不改核心编排、不改其他 adapter。**
+- 读取实际安装版本、主题配置、公开 API、自有封装和运行 DOM。
+- 确定绘制盒、文字盒、图标、状态类及弹层挂载点；同一控件的不同形态分别记录。
+- 完成条件：至少一个实际页面已渲染，候选落点与当前版本一致。
 
-## 先确认三件事
+## 2. 编写按需适配文件
 
-| 问题 | 为什么重要 |
-|---|---|
-| 深度选择器用什么语法？ | Vue 下都是 `:deep()`，但要写清是 SFC scoped 还是全局文件 |
-| 组件库类名前缀是什么？ | 决定 `inner[]` 的穿透目标怎么写 |
-| 三份 CSS 放哪、怎么全局引入？ | 决定样式接入方式 |
+- 在本目录创建 `<标识>.md`，依次编写：适用依赖及版本、真实 DOM 检查表、主题与样式接入、状态及 Teleport、布局与自有封装约束、验收步骤。
+- 区分 scoped `:deep(...)` 与全局后代选择器；逗号选择器每一项保留作用域。
+- 按实际工程选择样式文件和加载顺序，不强制固定三份 CSS。
+- 原稿控制颜色、间距、尺寸、结构和状态外观；适配只决定目标落点和实现方式，不写固定设计默认值。
+- 允许修改项目自有组件表现层，保持公开 Props、Emits、Slots 和业务行为；不修改依赖包源码。
+- 完成条件：每项映射有实际 DOM 依据，未知能力明确记录，交接仍不含框架或目标项目信息。
 
-答不出这三问，说明该组件库还没在项目里用起来——**先在项目里跑通再写 adapter**。
+## 3. 验证与接入
 
-## 填写模板
-
-```markdown
----
-adapter: <组件库标识>
-description: <一句话说明>
----
-
-# adapter · Vue 3 + <组件库名称>
-
-## 深度选择器语法
-| 场景 | 语法 |
-|---|---|
-| SFC `<style scoped>` | `:deep(.<前缀>-xxx)` |
-| 全局样式文件 | `.<前缀>-xxx` 直接写 |
-
-`ui-roles.css` 写成 <全局文件 / scoped>。
-
-## 内层穿透语法
-| 角色 | 穿透目标 |
-|---|---|
-| table.headerCell | <选择器> |
-| table.cell | <选择器> |
-
-规则：`host[]` 挂组件根元素；`inner[]` 定位内部文本盒。
-
-## 组件库前缀速查
-| 组件 | 前缀 | 角色类挂载位置 |
-|---|---|---|
-| <组件> | .<前缀> | <位置> |
-
-## 提权通道（唯一允许处）
-| 情况 | 处置 |
-|---|---|
-| 组件库行内 style 注入 | 该属性加 `!important`，仅此一处允许 |
-
-## 三份 CSS 的落点
-| 文件 | 落点 | 引入时机 |
-|---|---|---|
-| src/styles/ui-tokens.css | <目录> | <时机> |
-| src/styles/ui-roles.css | <目录> | <时机> |
-| src/styles/ui-layout.css | <目录> | <时机> |
-
-## 布局占位容器
-<如何让项目布局组件退化为插槽容器，给一段可粘贴的 Vue 模板>
-
-## 与内置 adapter 的差异
-<哪些角色的 inner 落点不同，为什么>
-```
-
-## adapter 的边界
-
-| 承载 | 禁止 |
-|---|---|
-| 深度选择器语法 | 定义设计意图 |
-| 组件库穿透前缀 | 定义风格 |
-| 提权通道的唯一出口 | 改写契约值 |
-| 三份 CSS 的落点与引入 | 修改契约结构 |
-| 布局占位挂载点 | 增加新字段 |
-
-**判据**：写完 adapter 后，同一份契约应能不改一行内容地落到用该组件库的项目。若需要改契约，说明 adapter 越界了。
-
-## 登记
-
-写完在 `design-apply.md` 的 adapter 选择表加一行：
-
-| 项目依赖 | adapter |
-|---|---|
-| `<组件库名>` | `adapters/<标识>.md` |
+- 使用同一份通用视觉交接完成一个真实组件区域，核对所有实例和交互状态。
+- 验证滚动、尺寸、响应式、共享调用处及业务行为，按 `../visual-verification.md` 保存证据。
+- 在 `../design-apply.md` 的适配读取步骤中登记新依赖与文件指针。
+- 完成条件：适配不要求修改原稿或通用交接，视觉对照与受影响行为已验证，未决差异已记录。

package/references/adapters/vue-antdv.md

@@ -1,110 +1,24 @@
----
-adapter: vue-antdv
-description: Vue 3 + Ant Design Vue 适配。提供深度选择器语法、组件库穿透前缀、三份 CSS 的落点与引入方式。
----
+# Vue 3 + Ant Design Vue 适配
 
-# adapter · Vue 3 + Ant Design Vue
+1. 仅在目标项目实际使用 Ant Design Vue 时读取本文件；核对安装版本、公开 API、自有封装及运行 DOM。保留项目当前组件库，不为还原视觉更换技术栈。
+2. 从原稿及交接取得视觉值；从目标源码确定文件和组件映射。旧角色名和默认样式只作参考，不覆盖原稿或限制新区域。
+3. 分开测量绘制层和文本层，核对下列候选落点；以当前版本实际 DOM 为准。
 
-## 深度选择器语法
-
-| 场景 | 语法 |
-|---|---|
-| SFC `<style scoped>` | `:deep(.ant-xxx)` |
-| 全局样式文件（非 scoped） | `.ant-xxx` 直接写 |
-
-`ui-roles.css` 写成**全局样式文件**（不 scoped）。
-
-## 内层穿透语法
-
-| 角色 | 穿透目标 |
-|---|---|
-| `table.headerCell` | `:deep(.ant-table-cell)` |
-| `table.cell` | `:deep(.ant-table-cell)` |
-| `filter.input` | `:deep(.ant-input)` / `:deep(input)` |
-| `shell.sidebar.item` | `:deep(.ant-menu-title-content)` |
-| `tag.status` | 根元素即可 |
-
-**规则**：`host[]` 挂组件根元素；`inner[]` 穿透到内部文本盒——目标由组件库 DOM 结构决定。
-
-## 组件库前缀速查
-
-| 组件 | 前缀 | 角色类挂载位置 |
-|---|---|---|
-| Button | `.ant-btn` | 根元素 |
-| Input | `.ant-input` / `.ant-input-affix-wrapper` | 根元素 / wrapper |
-| Select | `.ant-select` | `.ant-select-selector` |
-| Table | `.ant-table` | 根元素 |
-| Table Cell | `.ant-table-cell` | `th` / `td` |
-| Tag | `.ant-tag` | 根元素 |
-| Pagination | `.ant-pagination` | 根元素 |
-| Card | `.ant-card` | `.ant-card-body`（内边距在 body） |
-| Modal | `.ant-modal` | `.ant-modal-content` |
-| Menu | `.ant-menu` | `.ant-menu-item` |
-| Tabs | `.ant-tabs` | `.ant-tabs-tab` |
-| DatePicker | `.ant-picker` | `.ant-picker-input input` |
-| Form | `.ant-form` | `.ant-form-item` |
-
-## 角色类挂载方式（视觉不生效的头号原因）
-
-**CSS 生成了不等于视觉会变**——必须把角色类挂到组件上。
-
-| 契约角色 | 挂载写法 |
+| 控件 | 检查落点 |
 |---|---|
-| `button.*` | `<a-button :class="[...]">` |
-| `shell.sidebar.item` | `<a-menu-item :class="[...]">` |
-| `shell.tabs.item` | `<a-tab-pane :class="[...]">` |
-| `input.base` / `filter.input` | `<a-input :class="[...]">`，`inner` 用 `:deep(.ant-input)` |
-| `select.base` | `<a-select :class="[...]">`，`inner` 用 `:deep(.ant-select-selector)` |
-| `filter.dateRange` | `<a-range-picker :class="[...]">` |
-| `tag.status` | `<a-tag :class="[...]">` |
-| `card.base` | `<a-card :class="[...]">`，`inner` 用 `:deep(.ant-card-body)` |
-| `table.wrapper` | `<a-table :class="[...]">` |
-| `table.headerCell` / `table.cell` | **用 `#headerCell` / `#bodyCell` 插槽**：`#bodyCell="{ column, record }"` 内给单元格外层元素加类 |
-| `table.cell.amount` | 同上 + `align: 'right'` |
-| `pagination.bar` | `<a-pagination :class="[...]">` |
-
-**Table 的特殊性**：`a-table` 的单元格同样由组件内部生成。推荐用 `#bodyCell` 插槽批量挂载：
-
-```vue
-<a-table :data-source="rows" :columns="columns" class="role-table-wrapper">
-  <template #headerCell="{ column }">
-    <div :class="column.dataIndex === 'name' ? 'role-table-header-cell' : 'role-table-header-cell'">
-      {{ column.title }}
-    </div>
-  </template>
-  <template #bodyCell="{ column, record }">
-    <div :class="cellRole(column, record)">{{ record[column.dataIndex] }}</div>
-  </template>
-</a-table>
-```
-
-### 批量挂载的做法
-
-一个页面有 20+ 角色时**逐个手写 class 会漏**。做法：把契约角色名转成类名清单，交给页面统一挂载，并在第 0 步自检里确认覆盖率 100%。
-
-**类名转换规则**：`table.headerCell` → `.role-table-header-cell`（点号与驼峰都转小写连字符）。
-
-## 提权通道（唯一允许处）
-
-| 情况 | 处置 |
-|---|---|
-| 组件库用行内 style 注入 | 该属性上加 `!important`——**仅此一处允许** |
-| 组件库 `!important` 覆盖角色类 | 同上 |
-
-**只加在具体属性上，不整条加。**
-
-## 三份 CSS 的落点
-
-| 文件 | 落点 | 引入时机 |
-|---|---|---|
-| `src/styles/ui-tokens.css` | 项目样式目录 | 样式入口全局引入一次 |
-| `src/styles/ui-roles.css` | 项目样式目录 | 同上，必须是全局文件 |
-| `src/styles/ui-layout.css` | 项目样式目录 | 同上 |
-
-## 布局占位容器
-
-布局组件退化为占位容器（只提供插槽，不参与布局决策），结构同 Element Plus 的写法。
-
-## 与 Element Plus 的差异
-
-Ant Design Vue 的 `card` 内边距在 `.ant-card-body`（Element Plus 在根元素），`table` 单元格文本盒是 `.ant-table-cell` 本身（Element Plus 有额外 `.cell` 层）。**这是唯一需要在 adapter 里区分的地方**——契约本身不变。
+| Button | `.ant-btn` 的盒模型、文本和图标子节点 |
+| Input | 原生 input 与 `.ant-input-affix-wrapper` 的边框、背景、间距 |
+| Select | `.ant-select-selector`、选中文本、箭头和弹层 |
+| Table | 实际 `th` / `td` 及其中的文本、操作控件；保留排序、选择和事件 |
+| Card | `.ant-card` 与 `.ant-card-body` 分别测量 |
+| Menu / Tabs | 真实条目、激活指示及内部文本；不假设 pane 的 class 会落到 tab 按钮 |
+| Pagination | 总数、页码、页容量及跳转控件 |
+| Modal / Popover | 实际 Teleport 挂载容器、遮罩和内容 |
+
+4. 使用当前版本支持的单元格自定义属性或列配置定位真实 `th` / `td`；文本插槽的内部 div 不代替单元格盒模型。保留原有渲染函数、formatter、业务列及权限。
+5. 在 scoped SFC 中使用有作用域的 `:deep(...)`；在全局样式中使用普通后代选择器。逗号分隔的每个选择器都保留目标作用域，弹层用组件支持的容器类名隔离。
+6. 按实际工程选择主题变量、布局样式、页面 scoped 样式或组件公开定制 API。允许调整壳层及自有封装表现层；保持 Props、Emits、Slots 和项目行为，不要求固定三份 CSS。
+7. 先核对主题变量、加载顺序和选择器权重；确有行内样式或库级 `!important` 冲突时，只对已证实的具体属性定向覆盖并记录原因。
+8. 对所有受影响实例、状态、弹层、窄屏和共享调用处运行 `../visual-verification.md` 的验收。缺元素、隐藏或零尺寸记为失败，不用 class 命中数替代视觉对照。
+
+完成条件：实际绘制层与原稿的对应区域已复核，组件行为与项目业务不变，差异和未验证项已记录。

package/references/adapters/vue-element-plus.md

@@ -1,183 +1,40 @@
----
-adapter: vue-element-plus
-description: Vue 3 + Element Plus 适配。提供深度选择器语法、组件库穿透前缀、三份 CSS 的落点与引入方式。
----
+# Element Plus 视觉适配
 
-# adapter · Vue 3 + Element Plus
+## 1. 检查实际结构
 
-## 深度选择器语法
+- 从项目锁文件确认 Element Plus 版本，读取受影响 Re* 封装及其调用处，再检查运行 DOM。
+- 为每个设计区域确定组件根、实际绘制层和文字层；将目标选择器记录在项目侧实施映射，不写回通用设计交接。
+- 将下表作为定位起点，实测不一致时使用当前 DOM，不按固定选择器强行覆盖。
 
-| 场景 | 语法 |
+| 控件 | 核查落点 |
 |---|---|
-| SFC `<style scoped>` | `:deep(.el-xxx)` |
-| 全局样式文件（非 scoped） | `.el-xxx` 直接写，不需要穿透 |
-| SCSS | 同上 |
-
-**本项目建议**：`ui-roles.css` 写成**全局样式文件**（不 scoped），避免每个页面重复引入。
-
-## 内层穿透语法（双通道，选错 = 规则整条静默失效）
-
-契约的 `inner[]` 落到组件内部文本盒时，需要穿透到组件库内部元素。**先看样式落点文件的类型，再选语法通道**：
-
-| 落点文件 | 语法通道 | 示例 |
-|---|---|---|
-| 全局 CSS（`ui-roles.css`，本项目默认） | **普通后代/子代选择器**——禁止 `:deep()` | `.role-table-header-cell .cell { … }` |
-| SFC `<style scoped>` | `:deep()` | `.role-table-header-cell :deep(.cell) { … }` |
-
-**角色 → 内层目标对照**（目标由组件库 DOM 结构决定，不由契约决定）：
-
-| 角色 | 全局文件写法 | scoped 写法 |
-|---|---|---|
-| `table.headerCell` / `table.cell` | `.role-… .cell`（EP 单元格内层文本盒） | `:deep(.cell)` |
-| `shell.sidebar.item` | `.role-… span` | `:deep(span)` |
-| `filter.input` / `input.base` | `.role-… .el-input__wrapper`（EP 视觉盒，边框在 box-shadow 上） | `:deep(.el-input__wrapper)` |
-| `select.base` | `.role-… .el-select__wrapper` | `:deep(.el-select__wrapper)` |
-| `shell.tabs.item` | 直接作用在文本节点（无需穿透） | 同左 |
-
-**规则**：`host[]` 作用在组件根元素（加角色类即可）；`inner[]` 作用在根元素内部——按上表目标写选择器。**全局文件里出现 `:deep()`，浏览器静默丢弃整条规则且无任何报错**——这是「只有主题色对、其余全不对」事故的根源（见实证坑 1）。
-
-## 组件库前缀速查
-
-| 组件 | 前缀 | 角色类挂载位置 |
-|---|---|---|
-| Button | `.el-button` | 组件根元素 |
-| Input | `.el-input` | `.el-input__wrapper` 或根元素 |
-| Select | `.el-select` | `.el-select__wrapper` |
-| Table | `.el-table` | 根元素 |
-| Table Header Cell | `.el-table__cell` | `.th.el-table__cell`（`th` 上的 `.cell` 是内层） |
-| Table Cell | `.el-table__cell` | `td.el-table__cell` |
-| Tag | `.el-tag` | 根元素 |
-| Pagination | `.el-pagination` | 根元素 |
-| Card | `.el-card` | `.el-card__body`（内边距在 body 上） |
-| Dialog | `.el-dialog` | `.el-dialog__body` |
-| Menu | `.el-menu` | `.el-menu-item` |
-| Tabs | `.el-tabs` | `.el-tabs__item` |
-| DatePicker | `.el-date-editor` | `.el-range-input` |
-
-## 角色类挂载方式（视觉不生效的头号原因）
-
-**CSS 生成了不等于视觉会变**——必须把角色类挂到组件上。Element Plus 各组件的挂法不同：
-
-| 契约角色 | 挂载写法 | 说明 |
-|---|---|---|
-| `shell.sidebar.item` / `.active` | `<el-menu-item :class="[...]">` | 直接作用在组件根元素 |
-| `shell.header.icon` | `<el-button :class="[...]">` | 同上 |
-| `button.primary` / `.secondary` / `.danger` | `<el-button :class="[...]">` | 同上 |
-| `card.base` | `<el-card :class="[...]">` | 内边距在 `.el-card__body`：全局文件写后代规则 `.role-page-card > .el-card__body`；项目样式层对其 padding 带 `!important` 时同属性提权（实证坑 3） |
-| `table.wrapper` | `<el-table :class="[...]">` | 表格**根元素**挂 wrapper |
-| `table.headerCell` | `:header-cell-class-name="() => 'role-table-header-cell'"` | EP 的 `th` 不能直接加类；`<template #header><th class>` **无效**（加不进 EP 生成的 `th`） |
-| `table.cell` | 列级 `class-name="role-table-cell"` 或 `:cell-class-name` 回调 | `<el-table-column :class>` **无效**（类落在列组件上，不落到 td） |
-| `table.cell.amount` | `:cell-class-name` 回调按列派发 `.role-table-cell-amount` | 右对齐写在该角色类的 `.cell` 层（`text-align: right`） |
-| `tag.status` | `<el-tag :class="[...]">` | 直接作用 |
-| `input.base` / `filter.input` | `<el-input :class="[...]">` | `inner` 用后代规则 `.role-… .el-input__wrapper`（scoped 内才用 `:deep()`） |
-| `select.base` | `<el-select :class="[...]">` | `inner` 用后代规则 `.role-… .el-select__wrapper` |
-| `filter.dateRange` | `<el-date-picker :class="[...]">` | — |
-| `pagination.bar` | `<el-pagination :class="[...]">` | 直接作用 |
-| `shell.tabs.item` | 自绘或 `<el-tab-pane>` | 激活态另由 `item.active` 角色承载 |
-
-**Table 的特殊性**：`el-table` 的 `th` / `td` 由组件内部生成，**不能在 `<el-table>` 或 `<el-table-column>` 上直接加类来影响单元格**。正确通道是 EP 提供的三个回调/属性：
-
-```vue
-<el-table
-  :data="rows"
-  class="role-table-wrapper"
-  :header-cell-class-name="() => 'role-table-header-cell'"
-  :cell-class-name="cellClassName"
->
-  <!-- 列级：能按列名静态指定的，直接用 class-name -->
-  <el-table-column type="selection" class-name="role-table-cell-selection" />
-  <el-table-column type="index"    class-name="role-table-cell-index" />
-  <el-table-column prop="no"   label="运单号" class-name="role-table-cell" />
-  <el-table-column prop="fee"  label="运费"   class-name="role-table-cell-amount" />
-  <el-table-column prop="ops"  label="操作"   class-name="role-table-cell-action" />
-
-  <!-- 单元格内部内容（状态标签）走 default 插槽 -->
-  <el-table-column prop="status" label="运单状态" class-name="role-table-cell-status">
-    <template #default="{ row }">
-      <el-tag class="role-tag-status">{{ row.status }}</el-tag>
-    </template>
-  </el-table-column>
-</el-table>
-
-<script setup lang="ts">
-// 需要按行/列动态判断的，用回调按列派发
-const cellClassName = ({ row, column, columnIndex }: any) => {
-  if (column.property === 'fee') return 'role-table-cell-amount';
-  if (column.property === 'status') return 'role-table-cell-status';
-  return 'role-table-cell';
-};
-</script>
-```
-
-**三个无效写法（实测事故）**：`<template #header><th class="role-…">`（加不进 EP 生成的 th）、`<el-table-column :class>`（类不落到 td）、在 `<el-table>` 上加单元格类（只影响根元素）。
-
-### 批量挂载的做法
-
-一个页面有 20+ 角色时**逐个手写 class 会漏**。做法：把契约的角色名转成类名清单，交给页面统一挂载，并在第 0 步自检里确认覆盖率 100%。
-
-**类名转换规则**：`table.headerCell` → `.role-table-header-cell`（点号与驼峰都转小写连字符）。
-
-## 结构等价转换（契约值 → EP DOM 结构）
-
-契约声明的是**设计意图值**；EP 的 DOM 结构有时要求把值**换一种 CSS 机制落到对应元素**——这是翻译的一部分，不是改契约。生成前逐条对照本表：
-
-| 契约声明 | EP DOM 事实 | 生成规则 |
-|---|---|---|
-| `border: 1px solid X`（输入类控件） | EP 输入框边框是 `.el-input__wrapper` 的 `box-shadow: 0 0 0 1px #DCDFE6 inset` | 生成 `box-shadow: 0 0 0 1px X inset`（整条覆盖 EP 默认 box-shadow，勿只写 border-color） |
-| 表头 `height: 48px` + `padding`（左右间距） | 表头双层：`th.el-table__cell > .cell` | **拆解**：th 的上下 padding 归零（高度才精确等于 48px），左右间距放内层 `.cell`（`padding: 0 16px`） |
-| 单元格 `height: 55px` + `padding` | td 同为双层 | 同上拆解；density 变体只改 height 与竖向 padding |
-| 分页激活页 `background` | EP 激活页 `.el-pager li.is-active` 默认只有字色 | 背景色落到 `.role-pagination-bar .el-pager li.is-active`（后代规则） |
-| 侧栏激活项「左侧竖条」变体 | `.el-menu-item.is-active` 自带底色 | 竖条用 `::before` 伪元素（`position:absolute; left:-8px; width:3px`），菜单项保持 `position: relative` |
-| 卡片 `padding: 0` | 内边距在 `.el-card__body`，项目样式层对其带 `!important` | 写 `.role-page-card > .el-card__body { padding: 0 !important; }`（实证坑 3 的唯一提权例） |
-| 表格行 hover / 选中底色 | 行状态类由 EP 挂在 `tr` 上（`el-table__row-hover` 等） | 用 `.el-table` 状态类 + 角色类的后代规则实现（`when` 联动），不手写 JS 监听 |
-
-**判断顺序**：先查本表 → 表里没有的结构差异，查「角色类挂对元素没」（上一节挂载表）→ 都不是，才回查契约值本身。
-
-## 实证坑（踩过的事故，生成时必须规避）
-
-1. **`:deep()` 在全局 CSS 文件中是非法语法**：浏览器会**静默丢弃整条规则**（不报错），导致 inner 层样式全部失效、只剩主题色生效。全局文件穿透一律用普通后代选择器（`.role-x .el-y__wrapper`）。
-2. **角色类不得覆盖宿主容器的布局模式**：若角色类挂在项目既有 flex/grid 容器上（如 `.vts-table-area` 是 flex column），CSS 里只写视觉属性（padding/border/颜色），**禁止写 `display`/`flex-direction`/`justify-content`**，否则内部子元素被横向挤压裁切。
-3. **Element Plus 对 `.el-card__body` 的 padding 带 `!important`**（项目 element-plus.scss）：角色类要归零卡片内边距，必须同属性加 `!important` 提权，否则不生效。
-4. **表格行高精确控制**：`th/td` 的上下 padding 必须归零、左右间距放到内部 `.cell` 上（`padding: 0 16px`），否则 height 会被 padding 撑大（48px 变 57px 事故）。
-
-## 提权通道（唯一允许处）
-
-角色类是独立命名空间（`role-` 前缀）+ 独立文件，**通常不需要提权**。仅两种情况需要：
-
-| 情况 | 处置 |
-|---|---|
-| 组件库用行内 style 注入（如 `:header-cell-style`） | 在角色类上对该属性加 `!important`——**仅此一处允许** |
-| 组件库 `!important` 覆盖了角色类 | 同上 |
-
-**提权只加在具体属性上，不整条加**。整条加会让后续所有变体都带上高权重。
-
-## 三份 CSS 的落点
-
-| 文件 | 落点 | 引入时机 |
-|---|---|---|
-| `src/styles/ui-tokens.css` | 项目样式目录 | 样式入口全局引入一次 |
-| `src/styles/ui-roles.css` | 项目样式目录 | 同上，**必须是不 scoped 的全局文件** |
-| `src/styles/ui-layout.css` | 项目样式目录 | 同上 |
-
-## 布局占位容器
-
-项目的 `lay-admin` 等布局组件退化为占位容器：
-
-```vue
-<template>
-  <div class="ui-page">
-    <aside class="ui-region-sidebar"><slot name="sidebar" /></aside>
-    <header class="ui-region-header"><slot name="header" /></header>
-    <nav class="ui-region-tabs"><slot name="tabs" /></nav>
-    <main class="ui-region-content"><slot name="content" /></main>
-  </div>
-</template>
-```
-
-**布局组件只提供插槽，不参与布局决策**——网格由 `ui-layout.css` 决定。改造范围限定在布局组件的模板与样式层，不动业务代码。
-
-## 不做
-
-- 不改组件库源码
-- 不在业务页面写角色类以外的设计样式
-- 不把契约值硬编码进布局组件（布局取值来自 `ui-layout.css`）
+| 输入框 | `.el-input` 的宽度与 `.el-input__wrapper` 的背景、box-shadow 边框；文字检查 input |
+| 下拉框 | `.el-select__wrapper` 与输入文字；选项浮层另查 Teleport 后的实际宿主 |
+| 表格 | th/td 外部盒与内部 `.cell` 分开；边框、padding、行高同时实测 |
+| 表头/单元格类 | 使用 header-cell-class-name、cell-class-name 或列 class-name，并保留原回调行为 |
+| 卡片 | 区分根节点和 `.el-card__body` 的 padding、填满链及滚动 |
+| 菜单 | 区分 menu、item、sub-menu title 及激活/折叠/伪元素；数据仍来自项目路由 |
+| 分页 | 检查激活页、前后页按钮、总数、选择器、跳转输入及 RePagination 的外层 |
+| 弹窗 | 检查挂载到 body 的实际层、遮罩、标题、内容、页脚和原有关闭行为 |
+| ReTableBar | 区分工具栏行与「工具栏+表格+分页」复合根；只对目标层调整排列 |
+
+- 完成条件：每个区域的真实节点和组件通道已定位，已有回调/Slots/事件保持。
+
+## 2. 落样式
+
+- SFC scoped 使用 `:deep(...)`，全局 CSS/SCSS 使用普通后代选择器；每个逗号分支均带目标作用域。
+- 优先映射已有 CSS 变量；设计提供的颜色、间距、高度与边框全部取原稿，不从 adapter 的旧默认值补成强制样式。
+- 对输入边框等不同绘制机制做等效映射，使用原稿边框宽度、颜色和圆角；检查是否形成根与 wrapper 双边框。
+- 对表格行高同时核对 th/td 与 `.cell` 的 padding、line-height 和 box-sizing；保留密度切换、列宽计算及固定列滚动反馈。
+- 对同一视觉角色的不同实例使用独立作用域或变体；不以通用角色类将所有页面强制变成同一布局。
+- 布局允许调整 display、方向和层次；调整前明确节点职责，调整后检查子节点、引用及高度链。不要把只应作用在工具栏的横向布局挂到复合根。
+- 核查变量宿主、选择器特异性、组件 scoped 注入顺序和行内样式；后置 import 后仍需实测。必要时在最小范围对单属性提权并说明原因。
+- 完成条件：每条新增视觉规则在真实页面命中预期节点，未污染其他页面或状态。
+
+## 3. 保留项目结构与能力
+
+- 复用现有 Layout、路由和 Store，不创建替代静态外壳；保留菜单权限、折叠、页签、缓存和响应式。
+- 原有 fixed/margin/padding 布局与目标不符时调整相关模板和样式；改用 grid/flex 时同步移除被替代的偏移机制，避免双重几何。
+- 项目自有 Re* 可调整表现层或增加兼容视觉参数；第三方包源码保持不变，公开事件和数据契约保持兼容。
+- 原有 `adapters/vue-element-plus.json` 只供历史生成链排查，不将其中固定值或 skipGeometry 当成当前设计约束。
+- 完成条件：执行 `../visual-verification.md` 并通过相关页面、主题、密度、交互及业务回归。