# 3d · 审查报告（③段界面交互收口）

> 落点：`执行会话/目标-根据1a需求文档生成MCN短视频整合营销-d85687/ui/3d-审查报告.md`
> 模板：`SKILL.md` §3d ＋ `references/execution-runbook.md` §5.4/§5.5、§七（固定七节）
> 交付物：`ui/mcn-workbench.html`（原型）＋ `ui/DESIGN.md`（规范）＋ `ui/3b-实测记录.md`（实测）＋ `ui/3c-GPT参考版.md`（外部参考版对照；早期那份 `3c-GPT会诊.md` 保留作历史）

---

## 一、范围

| 项 | 内容 |
|---|---|
| 段与子步 | ③段界面交互 · 3d（D3 收口 ＋ D4 动效 ＋ D5 终检 ＋ Gate-2 / Gate-3） |
| 被审对象 | `ui/mcn-workbench.html`（单文件自包含原型，八页 ＋ 七浮层）＋ `ui/DESIGN.md`（设计契约与令牌） |
| 覆盖页 | P1 矩阵总览 / P2 选题雷达 / P3 资产库 / P4 创作台 / P5 发布中心 / P6 账号画像 / P7 复盘台 / P8 记录与对账（**八页全审，无抽样**） |
| 覆盖状态 | 正常 / 加载 / 空 / 出错 / 禁用 / 无权限 —— 逐页 × 逐态 ＝ 48 组合 |
| 不在范围 | ④段（原型说明区与演示引导）；②段的板块清单与信息档位（已冻结，本段不动）；暗色主题（见 `DESIGN.md` §五 第 2 条） |
| 证据留档 | `_gate_shots/` **23 张视口帧**（全部经 PNG 像素尺寸校验）；`ui/_tools/` 三个可复跑脚本 |

**本轮是否跑了脚本**：**跑了**。三条，全部可复跑，命令见 `3b-实测记录.md` §一：

```text
自检（#/selftest 路由，原型自带）      → PASS 81 ／ FAIL 0   @1440×900
变异对照（_tools/mutate_test.py）      → 13 / 13 通过
骨架冻结闸门（_tools/check_skeleton.py）→ PASS  八页 37 个板块与②段逐页逐位一致
```

> 🔴 **2026-10-08 复核（用户新口径落地后重跑）** —— 上面这一段的三个数和下面几处数值**已作废**，以本块为准：
>
> ```text
> 自检（#/selftest 路由，原型自带）      → PASS 82 ／ FAIL 0   @1440×900   （判据多了一条「滚动只由主区承担」）
> 变异对照（_tools/mutate_test.py）      → 14 / 14 通过                   （新增 M14；M9 的注入点重指）
> 骨架冻结闸门（_tools/check_skeleton.py）→ PASS  八页 39 个板块与②段逐页逐位一致
> ```
>
> 三处数值随之改动，逐条列明 **旧值 → 新值**，⛔ 不是悄悄换掉：
>
> | 处 | 旧值（作废） | 新值 | 为什么会变 |
> |---|---|---|---|
> | 本文 §六「一屏可容纳记录行数」 | 10 行 @1440×900（首行顶 214px） | **8 行 @1440×900（首行顶 332px）** | 旧值是**假数**：量之前只复位了 `window`，实际被滚的是 `<body>`（`body.scrollTop 435`）。同时 P1 的功能入口卡按用户口径从统计条下面挪到数据下面，首行顶也跟着变 |
> | 本文 §三 B-15「≤767px 宽时一屏装不满 6 行」＋ §八 结论 | 边界 **768px**；641/640 实测 5 行、500×844 实测 4 行 | 边界 **901px**；900 实测 3 行、768 实测 2 行、641 实测 1 行、640 实测 3 行、500×844 实测 0 行 | 同上一行：旧边界建立在假数上。真边界＝两栏带 `.band` 的收线（`max-width:900px`）。**这不叫「放宽判据」，是把假绿修成真红** |
> | 本文 §六「横向溢出」视口清单 | 1440 / 1280 / 1024 / 768 / 641 / 640 / 500 | ＋1000 / 960 / 920 / 901（全部 0） | 这一轮为定位边界补测了四个视口 |
>
> 另新增两条真缺陷（详见 `3b-实测记录.md` §六 第 16、17 条、`DESIGN.md` §五 第 10 条）：
> ① **整页「滚不动」**——1440×900 下 P1 有 1543px 内容，只有前 900px 可达（异常值提示 / 本月表现最好 / 全局检索三块永远看不到），根因是外壳只抄了 `overflow:hidden` 而没约束高度链；已修 ＋ 配判据与变异 M14。
> ② **自检在窄视口量出的密度是假数**（假绿），根因是滚动复位只盯着 `window`；已修（三个容器逐个核）＋ M9 重指。
>
> 用户本轮的口径（「左侧导航分大功能板块，每个板块一个主页面」＋「功能入口还是卡片的形式，并排放到数据下面」）已落地，落点见 `DESIGN.md` §1① ⑤ 与 §七 修订记录。
>
> 🔴 **2026-10-08 第二轮（导航收一层 ＋ 照抄参考版左右布局）再复核** —— 数字又变了，同样逐条列明：
> ```text
> 自检 → PASS 83 ／ FAIL 0 @1440×900（多出的那条＝「侧栏只有一层」与「八页一次点击可达」两条新判据）
> 变异对照 → 14 / 14 通过
> 骨架冻结 → PASS 八页 39 个板块
> ```
> | 处 | 旧值（作废） | 新值 | 为什么 |
> |---|---|---|---|
> | §八 结论「侧栏 8 项」 | 侧栏八个二级页项 | **侧栏只有一层＝四个板块项**；P3／P5／P7／P8 改由主页面上的「功能入口」卡接住 | 用户口径「只有大板块的导航 只有一层」 |
> | §六「一屏可容纳记录行数」 | 8 行 @1440×900（首行顶 332px） | **6 行 @1440×900（首行顶 440px）** | 功能入口卡按用户口径从「数据下面」挪到「数据统计下面」，多占约 100px；P2 也由 7 行变 6 行 |
> | §三 B-15 边界 | 901px | **仍是 901px**（901／920／960／1000／1024／1280／1440 全绿；900 起 P1 掉到 2 行） | 靠三处收高把密度换回来：卡内衬 16→12/16、≤1000px 隐卡片描述、≤1024 顶栏内衬 16→8 |
> | 八页形态 | 只有 P1／P3／P5／P6／P7 有左右两栏 | **八页都有**（P2／P4／P8 补上；P7 改成「左上下文｜右动作」；宽比统一 3:2） | 用户口径「哪里左右布局的功能照着抄」 |

> 🔴 **2026-10-08 第三轮（导航改 tiaoyue 图标栏 ＋ 八页统一 P1 页壳 ＋ 主列表表格化）再复核** —— 数字又变了，同样逐条列明，⛔ 不是悄悄换掉：
> ```text
> 自检 → PASS 83 ／ FAIL 0 @1440×900
> 变异对照 → 14 / 14 通过（M2 / M8 的注入点本轮重指，都是「形态改了导致注入点失效」的假对照）
> 骨架冻结 → PASS 八页 39 个板块
> 命名一致性 → 通过 2060 ｜ 失败 0 ｜ 提示 25
> ```
> | 处 | 旧值（作废） | 新值 | 为什么 |
> |---|---|---|---|
> | §八 结论「侧栏」 | 侧栏只有一层＝四个板块项（带文字） | **侧栏一层八项，照 tiaoyue `app-sidebar` 做成 64px 图标栏**（`nav-item`/`nav-icon`/`nav-tip`，悬停向右浮出名字；≤640 转带名字的横滚标签条） | 用户口径「左侧导航参考 tiaoyue 的导航」 |
> | §六「一屏可容纳记录行数」 | 6 行 @1440×900（首行顶 440px、行距 67px） | **6 行 @1440×900（首行顶 708px、行距 31px）** | P1 两块由并排改成**满宽表格顺排**（用户口径「照着抄」）；行高从 67px 压到 31px 才守住 6 行 |
> | §六「页内行高齐」 | 67–68px，差 1px | **31–31px，差 0px** | 同上 |
> | §六「实际在用字号档数」 | 5 档（12/14/16/18/24） | **6 档（12/14/16/18/20/24，相邻差 2/2/2/2/4）** | 统计条把 `--fs-20` 带进 P1 |
> | §三 B-15 边界 | 901px | **768px**（≥768 全绿；640 起 P1 掉到 5 行、500×844 掉到 −1 行） | 侧栏 240px → 64px，主区宽了 176px。**⛔ 不是判据放宽**：判据原文一字未改，`needRows=6` 写死，两个窄视口的 FAIL 原样留在自检输出里 |
> | 八页形态 | P1 两块并排；主列表为行式列表 | **P1 两块满宽顺排；八页主列表全部满宽表格**（编辑型板块保持原形态） | 用户口径「每个板块的首页 样式参考 MCN工作台首页」 |
> | 每页页壳 | 只有 P1/P2/P4/P6 有统计条与功能入口卡 | **八页统一**（页头 → 统计条 → 功能入口卡 → 满宽表格主数据块 → 一处两栏 → 尾块） | 同上 |
>
> 本轮改动中被自检当场抓住的一处回归：P3-03「入库」被搬进表格行尾后，P3 场景里那条行不在当前分区 ⇒ 判「声明了但页面上没有」。**已把动作搬回「单条详情」**（门禁说明本来长在那里），并记进 `3b-实测记录.md` §六 第 21 条。
>
> ⚠️ 与前两轮不同：本轮的旧值**已直接在同文件内同步改掉**（§三 B-15、§六 6.1/6.2/6.3、§八 三处数字），⛔ 不再让同一份报告里新旧两个数并存 —— 上两轮那样做，读的人得自己在两个块之间对账，正是「同一事实两处打架」。下表保留旧值只为留改动痕迹。

> 🔴 **2026-10-08 第四轮（顶栏清杂项）再复核** —— 数字又变了，逐条列明：
> ```text
> 自检 → PASS 83 ／ FAIL 0 @1440×900（判据条数不变，被驱动的对象少了 3 个）
> 变异对照 → 14 / 14 通过
> 骨架冻结 → PASS 八页 39 个板块
> 命名一致性 → 通过 2060 ｜ 失败 0 ｜ 提示 25
> ```
> | 处 | 旧值（作废） | 新值 | 为什么 |
> |---|---|---|---|
> | 交互 ID 数 | 79 个（真驱动 75 个） | **76 个（真驱动 72 个）** | 撤销 `G-07`／`G-09`／`G-11`（顶栏那三件） |
> | `data-act` 出现次数 | 750 次 | **638 次** | 同上（下拉的实例也一起走了） |
> | §六 顶栏高度 | 69px（901–1000 段 93px，折两行） | **49px，任何宽度都不折行** | 顶栏只剩「产品名 ＋ 随手记」，内衬 16→8 |
> | §六 P1 首行顶 | 708px | **688px** | 顶栏省下的 20px 直接还给首屏 |
> | §六 P2 一行 | 6 行（482px、行距 67px） | **14 行（462px、行距 31px）** | ⚠️ 这是**上一轮就改了形态、但数字没跟着改**的旧账：P2 列表第三轮已表格化 |
> | §三 B-15 的影响面 | P1 与 P2 在 500×844 都不达标 | **只有 P1 不达标**（P2 任何视口 ≥8 行） | 同上 |
>
> 逐样的来源定位（哪一项来自哪份文件、为什么判删）见 **§十**。

> 🔴 **2026-10-08 第五轮（组件口径统一 ＋ 新判据）再复核** —— 这一轮的性质与前四轮不同：**判据本身多了一条**。
> ```text
> 自检 → PASS 84 ／ FAIL 0 @1440×900（83 → 84：新增「组件口径」一条）
> 变异对照 → 15 / 15 通过（14 → 15：新增 M15，专为第 84 条判据配的对照）
> 骨架冻结 → PASS 八页 39 个板块
> 命名一致性 → 通过 2060 ｜ 失败 0 ｜ 提示 25
> ```
> | 处 | 旧值（作废） | 新值 | 为什么 |
> |---|---|---|---|
> | 自检条数 | 83 | **84** | 新增「组件口径：八页都没有用内联 style 表达选中态或覆盖字号」 |
> | 变异条数 | 14 | **15** | 新增 M15（把 P2 分组改回内联 `border-color` ⇒ 必须报红） |
> | 选中态画法 | **三套**（侧栏浅紫底 ／ 分段控件内联描边变黑 五处 ／ 表格当前行内联 accent 文字 四处） | **一套**：`.is-on` / `.is-active` | 用户口径「参考 P1 各组件样式，优化各页组件样式」 |
> | 字号覆盖 | 内联 `font-size` 两处（P7 三个数、P4 的「/7」） | **0 处**，一律走 `--fs-*` 档 | 同上 |
> | 表格档 | `.ds-table` 宽松档还用在 P8 对账核对区 | 全站只剩 `.tbl-dense`（满宽主数据）与 `.tbl-side`（栏内）两种 | 同上 |
> | 行级动作 | P2/P4 的列表行内用 32px 的 `.btn btn-sm` | 统一 **22px 的 `.btn-micro`** | 同上（也顺带把行高压回紧凑档） |
>
> ⚠️ 新增第 84 条判据时**同步做了变异对照**（M15）—— 一条恒绿的判据等于没有判据，这是本项目已经踩过 4 次的坑（M7／M10／M2／M8 全是「形态改了、注入点没跟着改」造成的假绿）。

> 🔴 **2026-10-08 第六轮（学参照物的组件细节 ＋ 第 5 个门禁）再复核**
> ```text
> 自检 → PASS 84 ／ FAIL 0 @1440×900（条数与 ID 数都不变：84 项 ／ 76 个 ID ／ 72 个真驱动）
> 变异对照 → 15 / 15 通过
> 骨架冻结 → PASS 八页 39 个板块
> 命名一致性 → 通过 2060 ｜ 失败 0 ｜ 提示 25
> 语法门禁（新） → 全过（<script> 段 node --check ＋ 模板注释里的反引号 0 处）
> ```
> | 处 | 旧值（作废） | 新值 | 为什么 |
> |---|---|---|---|
> | §六 P1 首行顶 | 688px | **697px** | 功能入口卡补了 22px 图标（图标与标题同行，卡高只涨 9px） |
> | §六 P2 首行顶 / 容量 | 471px ／ 14 行 | **471px ／ 13 行** | 同上（P2 的功能入口卡同样长高了） |
> | §三 B-15 的影响面 | ≤640px 的三个视口（641／640／500） | **只剩 500×844 一个** | `≤640px` 给功能入口卡补了紧凑档，640 转绿 |
> | 门禁条数 | 4 个脚本 | **5 个** | 新增 `_tools/check_js.py`（语法 ＋ 模板反引号） |
> | 图标规格 | 侧栏 20px / `stroke-width 1.7`；**卡片无图标** | 侧栏 20px、卡片 22px、**`stroke-width 2`** | 照参照物 `svgIcon()` 学 |
> | §四 S-12 的另一半 | — | 保留 | — |
>
> ⚠️ 本轮出过一次**窄屏回归**（640 由 5 行掉到 3 行），已收回并单记在 `3b-实测记录.md` §六 第 26 条。逐件量到的参照物组件原值（含**刻意不学**的 3 条与理由）见 **§十一**。

**结构核对表的每一个数，都来自上面这三条脚本的输出或 DOM 取值，⛔ 无一处是目测截图。**

---

## 二、挡位

**标准档**（本段未升未降）。理由：这是新产品的第一版原型，不是发版前的精修；`SKILL.md` §供给·方法主线 给的默认主线就是 `oil-ui-pro`，挡位按 runbook 默认的**标准**执行 —— 三条门（Gate-1 / 2 / 3）全过，但不上「多方向比选」与「严格档」的额外轮次。

---

## 三、阻断项表

口径：`阻断` ＝ 不清零就不能交。**本轮共 15 条，14 条已清零，1 条未清零并留档。**

| # | 阻断项 | 观察（现象） | 根因 | 处置 | 现状 |
|---|---|---|---|---|---|
| B-01 | 整份设计系统在屏幕上失效 | 原型打开后令牌全不生效 | 样式表顶部注释里 `--t-*/--raw-*` 的 `*/` 提前闭掉注释，吞掉整个 `:root` 令牌块 | 改写注释文字 | ✅ 清零 |
| B-02 | 全表行分隔线一直没画出来 | 列表行之间没有任何分隔线 | `.list-row:first-child{border-top:0}` —— 每行都包在 `<li>` 里，于是每行都是自己 `<li>` 的 first-child | 改为 `li:first-child > .list-row` | ✅ 清零（＋变异 M10） |
| B-03 | 判据除数为 0 时恒 PASS | 上面那条真缺陷没有任何门禁报它 | `gap>=2*bw` 在 `bw=0` 时恒成立、比值算成 `Infinity` | 除数为 0 一律判红 | ✅ 清零 |
| B-04 | 浮层不浮 | 浮层渲染在文档流末尾，得滚到页尾才看得见 | `#layer-root` 与 `.layer` 都没有定位样式 | 遮罩 `fixed inset:0` ＋ 层本体 `fixed` 居中 | ✅ 清零 |
| B-05 | 行高随文字长短乱跳 | 同一张表量出 66 / 82 / 100px 三种行高 | 状态标放在操作列把 `auto` 列撑宽，只有那一行折行 | 状态标移到名称旁 ＋ 行内每段不许换行 ＋ 新增「行高齐」判据 | ✅ 清零（＋变异 M7） |
| B-06 | 自检在窄视口给出假 PASS | 报「一屏装得下 10 行」，实际 5 行 | 驱动几百次点击后浏览器自动滚动，`rect.top` 变负，容量公式虚高 | 加「量尺寸前页面在滚动零点」守卫 | ✅ 清零（＋变异 M9） |
| B-07 | 手机导航「既不是一条、也没滚动」 | 导航条占 161px 高，4 个分组竖着堆 | 导航分组挂在 `<nav id="nav">` 里，而 `#nav` **一条样式都没有** ⇒ 仍是块级容器 | 补 `#nav{display:flex;flex-flow:row nowrap}` ＋ 整条链 `flex:0 0 auto` | ✅ 清零（161px → 53px） |
| B-08 | 顶栏标签折行 | 「演示 · 账号」折成两行，顶栏被顶到 70px | `.topbar-label` 没有 `white-space:nowrap` | 补 nowrap | ✅ 清零（→ 69px） |
| B-09 | 两个二次确认浮层其实有两个可见关闭控件，判据却报「出口 ＝ 1」 | 核销层与发布层各有一颗「取消」 | 判据只数 `.layer-close` 这个类名，把可见的「取消」从眼皮底下藏掉了；核销层的「取消」还复用了 `X-close` | 判据改成「中性出口只认 `X-close`」＋「决策型关闭单列报数」；核销取消拆出 `CHECKOUT-CANCEL` | ✅ 清零（＋变异 M13） |
| B-10 | 截图尺寸全部比标称大 16×95 | 「1440×900」的帧实际是 1456×995，同一份报告里 dump-dom 又按 640 说话 | Chrome 两条通道对 `--window-size` 的解释不同（截图＝视口，dump-dom＝视口＋16/95），而脚本对两者用了同一个偏移量 | 按模式分开算 ＋ 每次截图后从 PNG 的 IHDR 读真实像素比对目标视口 | ✅ 清零（23 张帧全部 ✓） |
| B-11 | 制作黑话写在界面上 | 状态面板上贴着「这里是 X 的 empty 态。」 | 给做原型的人看的说明被写进了界面，而 `STATE_COPY` 已经铺好用户向文案 | 删掉那句话；按钮改「回到正常内容」 | ✅ 清零 |
| B-12 | 主列表可读性 | 「今日该发：待发：3 分钟快手菜」冒号连用，独立评审读成错字 | 示意数据 `today` 字段的值里自带冒号，被拼进「今日该发：…」 | 5 行数据改为空格分隔 | ✅ 清零 |
| B-13 | 窄屏看不出当前在哪一页 | 横滚标签栏里当前项滚在视野之外 | 没有把当前项带进视野的逻辑 | 只调 `.sidebar` 自己的 `scrollLeft`（⛔ 不碰 `window`，否则误触 B-06 的守卫） | ✅ 清零 |
| B-14 | `--full`（整页长图）静默失效 | 带该参数产出的还是视口帧 | 无头 CLI 这条通道只能截视口 | 删掉该参数与 `_full/` 目录，不留撒谎的开关 | ✅ 清零 |
| **B-15** | **500×844 时一屏装不满 6 行（只有这一个视口；640 起已转绿）** | 640×900 P1 实测 **6 行 ✅**（本轮由 5 行转绿）；500×844 P1 实测 **−1 行**（P2 8 行 ✅） | 页面外壳吃掉首屏：≤640px 顶栏折成两行（57px）、侧栏转成横滚标签条。**行本身没变肥** —— 行高 31px、行高差 0px、块内分隔 1px 在任何视口都 PASS | 未在本段修 | ❌ **未清零，留档待裁定** |

### B-15 为什么没在本段修，以及留给用户的两条路

判据原文（`layouts-tooling.md` §1）是「一屏可见行数 **≥ 6（900px 高时）**」，**不带宽度条件**。**2026-10-08 第六轮实测出来的边界是 640px 宽**：≥640px 时侧栏 64px 图标栏 ＋ 满宽表格，容量 6–7 行；**只有 500×844 掉到 −1 行**（首行顶 845px 已越过 844px 的折叠线）。⚠️ **P2 不在这条里**：它的「对标内容列表」已改成满宽表格（行距 31px），任何视口都有 8 行以上。三条路，**两件事必须挑一件**：

| 选择 | 代价 |
|---|---|
| A. 把支持宽度下限写成 **≥640px**，手机形态只承诺「可用」（布局折行、零横向溢出、全路径可点通），不承诺 6 行密度 | 要在契约里**明文加一条本段自定的宽度条件**；依据是 `1a §七` 已明确第一版不做移动端 App |
| B. 压掉每行的次级信息，把行高从 31px 再往下压 | 31px 已经是「一行一个短值 ＋ 22px 微按钮」的底；再压只能删列 —— 那几列是②段定的档位，③段不许改 ⇒ 得回②段改档 |
| C. 动页面外壳（顶栏控件精简、侧栏在窄屏折叠） | 顶栏那几个控件都登记在交互清单里（`G-06`/`G-08`/`G-10`），删或搬家等于改交互清单 |

⛔ 本段**没有**选任何一条就宣布通过：判据一个字没改，`needRows=6` 写死，三个窄视口的 FAIL 原样留在自检输出里。

---

## 四、建议项表

口径：每条要么**修掉**，要么**显式写「已知不修 ＋ 原因」**。⛔ 不接受「基本没问题」。

| # | 建议项 | 结论 |
|---|---|---|
| S-01 | 密度只有同类工具的 40–50%（评审：Linear 行高 32px，本原型 67px） | **已知不修**：判据是「≥6 行 @900px 高」，1440/1280 实测 10 行、1024/768 实测 6 行，达标。再压只有砍次级信息一条路 ⇒ 属②段档位，见 B-15 选择 B |
| S-02 | 处处 24px 圆角大卡，列表本该是「表格行 ＋ 发丝线」 | **部分已修**：列表**行**本来就是无框行 ＋ `border-top` 发丝线（B-02 修的就是它真的画出来）；剩的是承载列表那层**面板**仍是圆角卡，改为无框会让 37 个板块散在底纸上失去分层。已知不修 |
| S-03 | 「左标题右说明」分栏里，右侧小字像给评审看的注释 | **已修**：逐条过了一遍板块头右侧的小字 —— 读出「这是在解释口径」的那几条已改写或删除（B-11、P4 输入提示、空引用文案）。剩下的多是②段要求的计数与口径（「5 项 · 按截止时间排」），保留 |
| S-04 | P2 KPI 标签下有下划线，像链接却不可点 | **未能复核**：代码里 `.stat` / `.stat-label` 都没有 `border-bottom` / `text-decoration`；4 个 KPI 里 2 个是真按钮（`P2-01`/`P2-02`）。⛔ 不做无依据的改动，如实记为未复核 |
| S-05 | 每个分组标题下都压一条通栏线（重复线框） | **不采纳**：`layouts-tooling.md` §1 原文「边框只上不围 —— 行间用 `border-top`」；`visual-review.md` 自己也写「承担风格和结构的线不算问题」。删掉它板块头与内容就分不开 |
| S-06 | 同一状态两种画法（当前导航项，P4 看着是深色实心） | **不采纳（评审判读）**：侧栏当前项八页同一套样式（整块浅紫底 ＋ 字重 600，见 `DESIGN.md` §2.5）。自检逐页核过：8 项导航里 `is-active` 只有一个。评审把侧栏当前项与**步骤条里的当前步**看混了 —— 后者按设计就该更重 |
| S-07 | 侧栏 `账号画像（跑图）` 与 `账号画像` 重复 | **不采纳（评审判读）**：那三个字是「跨组」不是「跑图」；字样直接来自②段 `2b §一` 的一级导航表「（跨组）账号画像」，③段不许改②段定的导航名。由此暴露的「括号夹在词中间不好读」记为已知取舍 |
| S-08 | 导航计数只给了一半（创作台 / 账号画像 无数字） | **已采纳·本段不改**：计数＝「这页有几件事等你做」，没数字的两页当前确实没有待办。但「一半有半数无」读起来像掉数据，这条提得对 —— 改动落点在交互清单 `G-05` 的反馈列，本轮不动 |
| S-09 | 窄屏正文被省略号硬截断 | **已知不修**：这是上一轮为「行高齐」付的代价 —— 行内每段不许换行 ＋ 省略号，是行高能恒为 67px 的唯一办法（放开换行行高跳到 66/82/100px，变异 M7 盯着）。完整原文挂在行上的 `title` 里 |
| S-10 | 每行右侧指标左边缘没对齐成列 | **已知不修**：右栏是「标签 ＋ 值」两行、整块右对齐到块右内衬；改成逐字对齐会把长短差异大的值拉成锯齿 |
| S-11 | 浮层右上「×」套着淡紫圆圈，像常驻焦点环 | **不采纳**：那是 `:focus-visible` 焦点环（`--accent`），出现是因为浮层打开后焦点按设计落在层内第一个可聚焦件上，而它正好是 ×。⛔ 不能改成 hover 才出现 —— 改掉就把键盘用户的定位点弄丢了。已记为「截图里带焦点环」的已知现象 |
| S-12 | 顶栏演示控件、`假设 2 项`、页面编号 `P1…P8` 可以删 | **改判（2026-10-08 第四轮）：顶栏那三样已删** | 上一轮判「不采纳」的理由是「删了评审就看不到六态」——本轮查清：**六态由路由驱动（`#/p/p4/empty`），不依赖顶栏下拉**，六态帧与自检 48 组都不受影响（详 §十 第 4 条）。⇒ 顶栏演示控件（`G-07`/`G-09`）＋ 假设入口 ＋ 收起侧栏一并撤掉。⚠️ 页面编号 `P1…P8` 保留：它是页头标题的一部分（②段页面全名），不是控件 |
| S-13 | 「空面板」（P2 评论区洞察、P4 资产引用区、P5 检查结果）稀释首屏 | **已知不修**：三块都是②段冻结的板块，⛔ 不许折叠或删除。看着空是因为示意数据只填了主路径；每块的空态文案都在（`STATE_COPY` 逐页不同） |
| S-14 | 动作甩到最右边、离对象半屏远 | **不采纳**：操作列右对齐成列是刻意的（`layouts-tooling.md` §5.5 要求同类动作在同一轴上对齐）；两栏也不是等宽（`minmax(0,400px) minmax(0,1fr)`） |
| S-15 | P1 两栏平权、没有主次 | **不采纳**：并排是密度判据逼出来的，有反事实实测 —— 落回单列时账号矩阵首行顶 530px、一屏只装得下 5 行（<6）。见 B-15 选择 A |
| S-16 | 记不住 —— 建议把 P1「账号矩阵列表」做成真正的矩阵 ＋ 异常分布 | **已知不修·往上提**：块名与位置受②段冻结，「矩阵视图」是**信息呈现**变更，超出③段权限。**本轮最值得往上提的一条**，交主会话转用户 |
| S-17 | 评审看不到的：点击/悬停/焦点行为、动效、检索结果、遮罩键盘可达性、另外四页 | **已补**：这些正是 3b 自检覆盖的 —— 71 个 ID 逐个真驱动（0 死控件）、六态 × 八页 48 组合、7 浮层 × 6 项。P3/P6/P7/P8 截图已补拍，本轮交接已改为八页全给 |

---

## 五、状态覆盖核对表（六项逐页）

判据源：`SKILL.md` 铁律 2 的六态清单。⚠️ 逐项**数值**判据出自供给可选档的 `craft/state-coverage.md`，**本轮未动用可选档 ⇒ 该项无供给来源**（`DESIGN.md` §五 第 1 条），故只核「有没有、长什么样」，不编阈值。

机检结论：**六态 × 八页 ＝ 48 个组合，全部渲染出内容**（自检第 10 行）。

| 页 | loading | empty | error | success | disabled | 无权限 |
|---|---|---|---|---|---|---|
| P1 矩阵总览 | ✅ 骨架行 ＋「正在取矩阵数据」 | ✅「还没接入账号」＋ 去处按钮（→P6） | ✅ 显时间戳 ＋ 重试 | ✅ 默认态 | ✅ 无待办时待办区禁用并说明 | ✅ 非管理员看利润列的遮罩说明 |
| P2 选题雷达 | ✅「正在拉对标更新」 | ✅「监控名单是空的」＋ 录对标号 | ✅ 拉取失败（退路＝手工录入） | ✅ 默认态 | ✅ 未选账号时「转入创作」禁用 | — 不适用（本页对所有角色开放） |
| P3 资产库 | ✅「条目加载中」 | ✅「这个分区还没有条目」＋ 去处（→P2） | ✅ 读取失败（重试） | ✅ 默认态 | ✅ 无出处的条目「入库」禁用（门禁） | — 不适用 |
| P4 创作台 | ✅「正在跑这一步」（带已跑秒数） | ✅「这一步还没有产出」 | ✅ 本步失败（保留已产出 ＋ 重试该步） | ✅ 默认态 | ✅ 文案与封面缺一，进检查态禁用 | — 不适用 |
| P5 发布中心 | ✅「检查中」 | ✅「还没有可发布的版本」＋ 回 P4 | ✅ 检查自身失败 ⇒ **按不过处理**（fail-closed） | ✅ 无硬拦、可发 | ✅ 有硬拦项时「确认发布」禁用 | ✅ 未授权账号的版本标「无发布权限」并禁用该版 |
| P6 账号画像 | ✅「画像加载中」 | ✅「还没有画像」＋ 建画像 | ✅ 保存失败（保留编辑内容） | ✅ 保存成功提示 | ✅ 只读角色时字段禁用 | ✅ 非本人负责账号：可看不可改 |
| P7 复盘台 | ✅「正在读这条的数据」 | ✅「还没有能复盘的内容」 | ✅ 数据读不到 ⇒ 转手工录入 | ✅ 回写成功提示 | ✅ 未写归因时「回写」禁用 | — 不适用 |
| P8 记录与对账 | ✅「记录加载中」 | ✅「还没有发布记录」 | ✅ 读取失败（重试） | ✅ 核销成功 | ✅ 未选中记录时「核销」禁用 | ✅ 利润列对非管理员隐藏（列级遮罩） |

> 口径：`disabled` 与 `无权限` 是两件事 —— 前者「当前条件不满足」（自己能解开），后者「角色不允许」（自己解不开）。界面文案分开写，⛔ 不拿「不可用」一句话糊过去。
> 留档截图：`p1-empty-1440.png`、`p4-noperm-1440.png`、`p5-error-1440.png`；其余 45 组由自检逐组渲染核过。

---

## 六、结构核对表（契约值 / 实测值 并排，数字抄自脚本输出）

### 6.1 契约里写了数字的项

| 项 | 契约值 | 实测值 | 取法 |
|---|---|---|---|
| 强调色填充面积占比 | ≤5% | **0.52%**（八页最高：创作台，1 个填充块） | DOM：逐个元素比 `backgroundColor` ≡ `--accent`，与视口求交累加 ÷ 视口面积 |
| `--warn` 对 `--surface` 对比度 | ≥4.5:1 | **5.93:1** | 真实像素计算（WCAG 相对亮度） |
| `--accent-text` 对 `--surface` 对比度 | ≥4.5:1 | **4.76:1** | 同上 |
| `--ink-faint` 对 `--surface` 对比度 | ≥3:1（仅非正文） | **3.55:1** | 同上 |
| 一屏可容纳记录行数（P1 账号矩阵） | ≥6 @900px 高 | **6 行** @1440×900（首行顶 688px、行距 31px） | DOM：首屏可用高度 ÷ 行距。⚠️ 是「装得下几行」不是「画了几行」—— 示意数据 5 条，实际永远 ≤5 行（数据用尽，非被截断） |
| 一屏可容纳记录行数（P2 对标列表） | ≥6 @900px 高 | **14 行** @1440×900（首行顶 462px、行距 31px） | 同上。该块已由行式列表改成满宽表格 ⇒ 容量从 6 行跳到 14 行，任何视口都达标 |
| 页内行高齐 | ≤2px 差（本段追加判据） | **31–31px，差 0px** | DOM：逐行 `getBoundingClientRect().height` |
| 视觉层间距 / 块内相邻行分隔 | ≥2 | **32px ／ 1px ＝ 32**（4 个视觉层） | DOM：页面级容器归并视觉层后相减；分隔取各行 `borderTopWidth` 最大值（表格行的线画在 `td` 上，不是 `.list-row` 自己） |
| 实际在用字号档数（P1） | 4–6 | **6 档**：12 / 14 / 16 / 18 / 20 / 24px，相邻差 2/2/2/2/4 | DOM：叶子节点 `fontSize` 去重 |
| 块间距 / 块内间距 | ≥2 | **32 / 8–16 ⇒ 2.0–4.0** | 令牌登记值 ＋ DOM 复核（`gap` 全部落在登记刻度内，9 个刻度） |
| 横向溢出 | 0 | **0**（1440 / 1280 / 1024 / 1000 / 960 / 920 / 901 / 900 / 840 / 820 / 768 / 640 / 500，八页逐页亦 0） | DOM：`scrollWidth − clientWidth` |
| 浮层中性关闭出口 | 恰好 1 | **7 / 7 个浮层均为 1**（另有决策型关闭 0–1 个，已单列报数） | DOM：可见的 `[data-act="X-close"]` 计数 |
| 同屏主档按钮 | ≤1 | **逐页 1 个**（P1 无主档：本页只用弱档，按钮高度集合 {32px}） | DOM：逐页统计实底按钮 |
| 顶栏高度 | 未写死（只看有没有折行） | **49px**（单行；只放「产品名 ＋ 随手记」两项，任何宽度都不折行） | DOM：`.topbar` 高度 ＋ 诊断行 |

### 6.2 契约未写数字、本轮补登记的证据（⛔ 不留「无法判定」）

| 项 | 实测值 | 说明 |
|---|---|---|
| P1 各块落位（顶 / 高） | 今日待处理 @324+249 · 账号矩阵列表 @605+249 · 异常值提示 @886+201 · 全局检索与随手记 @1119+222 | 前两块**满宽顺排**（视口高 900）；异常值提示与本月表现最好的一条在同一个两栏块里 |
| P2 各块落位（顶 / 高） | 对标监控概览 @143+121 · 对标内容列表 @380+249 · 评论区洞察 @661+316 · 灵感速记 @1009+99 | — |
| 反事实：P1 前两块改成并排 | 第一轮记的是「落回单列⇒5 行」；本轮反过来：**顺排 ＋ 行高 31px ⇒ 6 行**（首行顶 688px） | 说明「满宽顺排 vs 密度」这一对矛盾已由行高解决，⛔ 不再需要靠并排换行数 |
| 控制台报错 | **0 条** | 自检全程监听 `console.error` |
| 量尺寸时的滚动零点 | 四个容器全为 0（`window` ／ `html` ／ `body` ／ `.view`，P1 / P2 两处均核） | rect 取到的是相对视口的真值（第一轮只核了 `window`，是假绿 —— 见 `3b` §六 第 17 条） |

### 6.3 Gate-3 八项肉眼过（真实渲染，非只看代码）

| # | 项 | 结论 |
|---|---|---|
| 1 | 裁切 | ✅ 无一页出现被裁掉的内容（23 张视口帧逐张看过） |
| 2 | 重叠 | ✅ 无元素互相压盖 |
| 3 | 失真 | ✅ 无变形拉伸；正文命中系统黑体栈、标题命中展示体栈，无回退异常 |
| 4 | 失效控件 | ✅ 0 个死控件（72 个 ID 在 24 个场景里逐个真驱动过） |
| 5 | 缺状态 | ✅ 48 组（六态 × 八页）全部渲染出内容 |
| 6 | 响应式破损 | ✅ 十三个视口横向溢出全 0；≤640px 侧栏转横滚标签条、两栏分栏落回单列（B-15 的密度缺口另计） |
| 7 | 控制台报错 | ✅ **0 条** |
| 8 | 字体回退异常 | ✅ 两条字体栈（正文黑体 / 标题展示体）都命中系统字体；`@font-face` 数量 0 |

---

## 七、Gate 结论

### Gate-2（原型门）

**通过。** 依据：`DESIGN.md` 的十二字段契约与令牌表落盘（Gate-1 十项全过，见 `DESIGN.md` §四）；八页 39 个板块与②段 `2b` 逐页逐位一致（骨架闸门正向 PASS ＋ 反向变异两条都报红）；六态 × 八页 48 组合全渲染；72 个 ID 逐个真驱动、0 死控件；对 §二 的令牌与 §二 表 2.4 交互清单做双向差集，表外可点元素为 **0**。命名一致性闸门 **通过 2060 ｜ 失败 0 ｜ 提示 25**。

### Gate-3（交付门）

**桌面 / 平板档通过；手机档不通过，且已逐条留痕 —— 总判：有条件通过。**

- **通过的部分**：契约视口 1440×900 自检 **PASS 84 ／ FAIL 0**；1280 / 1024 / 1000 / 960 / 920 / 901 / 900 / 840 / 820 / 768 亦为 **PASS 84 ／ FAIL 0**；§六 里契约写了数字的项全部实测回填、无一项越界；Gate-3 八项肉眼检查全过；控制台报错 0。
- **不通过的部分**：**B-15** —— 500×844 一屏装不满 6 行（实测 −1 行）。⚠️ 本轮 **640×900 已转绿**（6 行），不达标的视口由一个缩到**一个**。**自检在这一个视口上就是红的（PASS 83／1），⛔ 没有靠改判据把它变绿。**
- **条件**：B-15 的三条路（见 §三）得由用户挑一条；挑之前这一项挂在账上。
- **另需明示**：3c 那次独立评审**不是** SKILL.md §3c 要求的「外部 GPT 会诊」（本会话没有对外模型通道，见 `3c-GPT会诊.md` §〇）。**未取得外部审查 ≠ 已通过。**

---

## 八、偏离单（本段收尾必附）

| # | 原要求（文件:小节） | 实际做法 | 原因 | 影响 | 处置 |
|---|---|---|---|---|---|
| D1 | 3b 实测走 `browser-harness`（`SKILL.md` §3b） | 原型自带自检 83 项 ＋ 变异对照 14/14 ＋ 无头 Chrome 视口帧 ＋ 逐条 DOM 取值 | 该通道绑定实时浏览器入口，本会话驱动不了 | 证据链全部可复跑；⛔ 但**没有「真人真点」这一层** | 持续偏离，待裁定是否补一次人工走查 |
| D2 | D5 终检要 `1440x900` 与 `390x844` 两帧（`runbook` §5.3、§七） | 实测到 **500×844** 为止 | Chrome 窗口宽下限 516 ⇒ 视口最小 500；要 390 得走 CDP `setDeviceMetricsOverride` | 手机帧比要求宽 110px | 持续偏离；⛔ 报告一律写「500×844」 |
| D3 | 对外只留视口帧，长图仅自检（`runbook` §七） | 未产出长图 | `--full` 在本机通道做不到，只能截视口 | 无 | ✅ 已修（参数与目录一并删掉） |
| D4 | 3c 要「外部 GPT 会诊」（`SKILL.md` §3c） | 隔离上下文的独立评审执行者 | 无对外模型通道 | 与「异厂商外部审查」不是同一条通道 | 持续偏离，已明示 |
| D5 | 逐页截图应八页齐备 | 首次交接只给了评审 4 页 ＋ 2 个状态 ＋ 2 个浮层 | 交接时按「主路径优先」挑了 8 张 | 评审自己指出 P3/P6/P7/P8 未覆盖 | ✅ 已补（`_gate_shots/p3-1440.png` … `p8-1440.png` 已存在） |

## 九、收口清单（对照 `runbook` §七 逐条）

| 检查项 | 结论 |
|---|---|
| 声明制走完（开工 / 每子步 / 每处偏离） | ✅ |
| 供给核对做过（三处在位、选定套与记录一致） | ✅ `DESIGN.md` §〇 |
| `DESIGN.md` 含十二字段 ＋ 三层令牌 ＋ 组件规格 ＋ 字阶定值表 ＋ 高度层级 ＋ 布局脚手架 ＋ 浮层单出口 | ✅ |
| 骨架未漂（与②段逐页逐位对得上） | ✅ 机检 PASS ＋ 双向变异报红 |
| 分档已兑现、档位未被本段改动 | ✅ `DESIGN.md` §1.2 |
| 页型已判；工具型三零 ＋ §5.5 五条逐条过完 | 🔴 **2026-10-08 更正：本条原先记的是「✅ 自检机核」，那是假的 —— 自检 84 项里 §5.5 五条零覆盖**（grep 原型：`标题区`0 ／`从属`0 ／`注脚`0 ／`主次`0 ／`主角`0 ／`假装分组`0）。实情：**工具型三零**（第 12 条）与**无假控件**（第 6/7/8 条）确有覆盖；**§5.5.1／§5.5.3／§5.5.4 三条零覆盖；§5.5.2「导航默认带标签」被反向违反**（第三轮把导航做成纯图标栏、标签设成 `display:none`）。⇒ 这一格是本次「五道闸门全绿却难看」的开关，归因复盘见 `复盘-为什么第一版做得很差.md`。 |
| Gate-1 自检项结果写在 `DESIGN.md` 末尾，无一项不过 | ✅ |
| 原型单文件自包含、双击可开 | ✅ 无外链、无 `unpkg`、无外部 jsx |
| 状态穷举六项逐条有结论 | ✅ §五 |
| 每个按钮每个跳转真点过（含四态） | ✅ 自检 72 个 ID × 24 场景；⚠️ 通道换成自检而非 `browser-harness`（D1） |
| `3c-GPT会诊.md` 含提问原文 / 回答原文 / 四列处置表，未取到已明示 | ✅ ⚠️ 通道为独立评审执行者（D4） |
| D3 收口按三处判据人工过完，阻断项清零 | ⚠️ 15 条中 14 条清零，**B-15 未清零且留痕**（本轮另修掉 2 条过程中的回归：`3b` §六 第 21、22 条） |
| D5 终检真渲染，两视口各截一张，无「无法判定」项 | ⚠️ 1440×900 ✅；390×844 实测到 **500×844**（D2） |
| 每个浮层手工数过出口 ＋ Esc / 遮罩 / 焦点锁 / 焦点归还，结论落报告 | ✅ 7 浮层 × 6 项，含触发路径；另修掉「出口计数把取消藏起来」的真缺陷（B-09） |
| 对外截图只用视口帧，长图未作评审输入 | ✅（长图通道本机做不到，已删） |
| 契约里每个数字实测回填，「契约值 / 实测值」并排 | ✅ §六 |
| Gate-2 与 Gate-3 均有书面结论 | ✅ §七 |
| 重大改版：旧版在磁盘上 ＋ 给出新旧差异 | 不适用（本段首次交付，无旧版） |
| 偏离单已附，且无静默偏离 | ✅ §八 共 5 条 |

---

## 十、顶栏杂项来源排查（2026-10-08 用户口径「页面顶上弄这么多乱七八糟的东西 是那个技能那个规则引起的 需要详细排查 定位 删除」）

**结论先说**：顶栏原有 **7 项，没有一项是技能规则要求的**。唯一被②段硬要求的是「随手记」，其余六项分别是「本项目参照物笔记的遗留 2 项＋我自己造的原型件 3 项＋与②段页内板块重复的 1 项」。已删 5 项、改挂 1 项、留 1 项。

下面逐样定位到**文件与行**，⛔ 不是凭印象。

**1、`收起侧栏`（`G-11`）—— 无技能规则，来源是本项目参照物笔记**

- 翻遍 `product-planning` 全包，没有任何一条要求「侧栏可收起」。
- 它的真实来源是**我自己写的那份参照物笔记** `ui/布局排版参考-mcn-work-shop.md`：§一「侧栏只在需要时出现」＋ §五 落地清单第 1 条「外壳改顶栏＋面包屑＋主区，侧栏**按需出现**」。
- 我把它「折中为可收起」，并当成了偏离项留痕 —— 折中本身没错，但它把一件参照物产品的外壳习惯搬进了我们的顶栏。
- 侧栏这时已经是 64px 图标栏，收起一个 64px 的栏几乎没有收益。

**2、面包屑 —— 无技能规则，同上来源，且与页头 h1 重复**

- 唯一提到面包屑的技能原文是 `layouts-tooling.md` §1：「✅ 正解：**< 4 项**改用页头横向导航或面包屑 ＋ 返回，把宽度还给内容。」——它说的是「导航项**少于 4 项**时的替代方案」；我们有 **8 项**，不适用。
- 真实来源同样是 `布局排版参考-mcn-work-shop.md` §一「导航靠面包屑，不靠固定侧栏」。⚠️ 这一条**在我们的场景里是反的**：我们侧栏常驻，面包屑没有承担导航。
- 而且它和页头 `h1`（「P1 矩阵总览」）说的是同一件事 ⇒ 纯重复。

**3、`演示 · 账号` 下拉（`G-07`）—— 无任何来源，我造的原型件**

- ②段 `2b-界面布局.md` 只在「待复核第 5 条」里提过「账号切换」，而那是**假设不成立时的降级方案**（「若第 5 条复核为『不需要』…矩阵列表下移到账号切换」），不是现在的要求。
- 技能包无一条要求顶栏账号切换器。
- ⇒ 它是我为了演示「切账号看上下文」自己加的，登记进交互清单后就留了下来。

**4、`演示 · 状态` 下拉（`G-09`）—— 规则只说「路由 ＋ 演示开关」，路由那条已完整覆盖**

- 规则原文两处，措辞都是并列：
  - `stage-delivery/SKILL.md` §3d：「本项目的状态由**路由与演示开关**驱动，不用 `?state=`」
  - `execution-runbook.md` §3.4：「原型里的状态由**路由 ＋ 演示开关**驱动，不是 `?state=` URL 参数」
- ⇒ 要守的是「**不用 `?state=`**」和「状态可见」，⛔ 没有一条要求开关**必须做成顶栏可见的下拉**。
- 路由那条已完整覆盖：`#/p/p4/empty` 直接打开任意页的任意态，六态帧（`p1-empty` / `p5-error` / `p4-noperm`）就是这么出的，自检也逐组渲染 48 个组合。
- ⇒ 开关可去。

**5、`全局检索`（`G-10`，顶栏那一颗）—— 与②段 P1 的页内板块重复**

- ②段 `2b` P1 的板块清单第 5 条是「**全局检索与随手记入口**」——它是 **P1 的一个板块**，⛔ 不是全局外壳件。
- ②段 §286 只把**随手记**定为「全局可达」（原文：「随手记出现在任意页面一次点击内（F2 是 P0，不能埋在两层下）」），**没有**给全局检索同样的待遇。
- ⇒ 顶栏那一颗是重复：P1 页内已经有一处（同一 `G-10`，走的是同一个检索浮层）⇒ 删顶栏那颗，ID 与能力都还在。

**6、`假设 2 项`（`G-08`，顶栏那一颗）—— 来源是我自己写的契约，而且是第二处**

- ③段技能没有要求任何「假设入口」。它的来源是本份交付里的 `DESIGN.md` §三，我自己写的兑现方式：「两处各在自己的板块标题同行右侧挂一个「假设」徽章；**顶栏另有**「假设 2 项」入口」。
- ⇒ 徽章才是主兑现（假设在哪就在哪标），顶栏那颗是我额外加的**第二处**。
- 处置选的是**改挂**而不是纯删：入口挂到那两处徽章自己身上（徽章变成可点，`G-08` 仍活着）。这样顶栏干净了，而「复核人 / 时机 / 落点」这份内容一个都没丢，位置还更对。

**7、`随手记`（`G-06`）—— 唯一被②段硬要求的一项，留**

- ②段 `2b` §59：「随手记入口｜可点入｜判据答「做得成」。⚠️ 但它是 F2 的入口，以**全局可达**的方式出现：任意页面一次点击内能碰到，**不占 P1 的主屏常驻位**」
- ②段 `2b` §286：「**全局可达**：随手记出现在任意页面一次点击内（F2 是 P0，不能埋在两层下）」
- ⇒ 「任意页面」＝它必须挂在**全局外壳**上，顶栏正是那个位置。⛔ 这一项不能跟着一起删。

**处置后的顶栏**

- 只剩两项：**左「MCN 短视频整合营销工作台」**（产品名；侧栏品牌位收成 32px 方标后，全名只有这里挂得住）＋ **右「随手记」**。
- 内衬一并从 16px 收到 8px ⇒ 实测顶栏 **49px**，且**任何宽度都不折行**（旧值 69px／折行后 93px）。
- 连带清掉的代码：`.crumbs` 全套、`.app.side-collapsed`、`.demo` ＋ `≤1000` 的 `.demo{display:none}` ＋ `≤1024` 的两条顶栏补丁、`.topbar-label`、`.switch`、`#account-pick` / `#state-pick` 的填充逻辑、`change` 监听、`S.sideCollapsed`、`renderCrumbs()`。
- 自检门禁随之变化：交互 ID 由 **79 → 76 个**、真驱动由 **75 → 72 个**、`data-act` 出现次数由 **750 → 638 次**；`PASS 83 ／ FAIL 0` 保持。

⛔ **两条留在这里的纪律**：①别再把「参照物产品的习惯」当需求搬进外壳 —— 本轮 6 项里有一半是这么来的（参照物笔记 `ui/布局排版参考-mcn-work-shop.md` 不是规则文件，它是素材）；②撤销一个交互 ID 必须**同时删掉它的 DOM**，否则「页面上每个 data-act 都在清单里」会报红（本轮实测过）。

⚠️ §三 B-15（≤640px 的 P1 密度缺口）的三条出路仍待拍板。

---

## 十一、参照物组件细节对照（mcn-work-shop · 逐件量的值，2026-10-08）

用户口径：「**MCN 工作台里面每个组件的样式 高度 ICON 都是需要学习的，比如功能入口，感觉没有学到细节**」。

⇒ 这不是「有没有这个组件」的问题，是**规格有没有量到位**的问题。所以本节把参照物的组件**逐个量出原值**，再列我方现值与差距。

**取证方式**：直接读源站文件（只读，⛔ 未改对方任何文件）——
`E:/ProgramData/AIProject/mcn-short-video/project/短视频脚本创作/V1.0/mcn-work-shop/public/`
的 `style.css`（56 KB）与 `app.js`（54 KB）。下面每一条都带**文件:行号**，⛔ 无一处是目测。

### 11.1 功能入口卡（`.data-card`，参照物 `style.css:387-392` ＋ `app.js:332-336`）

用户点名的就是这个组件 —— 巧的是**我们与它同名**（名字是从参照物笔记里照抄的），但细节差得远。
下表是**第七轮改完之后**的现值。「65px 高差当初是怎么差的、这轮又怎么把高度还回去的」逐条记在 §十二。

| 细节项 | 参照物实测值 | 我方现值 | 判定 |
|---|---|---|---|
| **卡内布局** | `display:flex; flex-direction:column; align-items:flex-start; gap:**6px**` ⇒ **图标 ／ 标题 ／ 描述 三段纵向** | 同：三段纵向 ＋ `gap:6px` | ✅ 第七轮学过来。⚠️ 第一版是「图标＋标题」并成一行（两段）—— **这是 65px 高差的主因** |
| **图标** | `svgIcon(icon, **22**)`；`color: var(--primary)`（它自己的主色） | `navSvg(page, **22**)`；`color: --accent-text` | ✅ 尺寸学过来。⚠️ 色**刻意不学** —— 它给首页 4 张卡配了 4 个色相（`ICON_COLORS`），我方统一走品牌紫文字档 |
| 图标线宽 | `stroke-width:**2**` ＋ 圆头圆角 ＋ `viewBox 24` ＋ `fill:none` | 同 | ✅ 第六轮学过来（原 1.7） |
| 卡内衬 | `padding: **16px 18px**` | `padding: **16px**`（四边） | ⚠️ 横向差 2px —— 18 不在本项目间距刻度（2/4/6/8/12/16/24/32）⇒ 走 `--sp-16` |
| 段间距 | `gap: 6px` | `gap: 6px`（`--mg-6`） | ✅ 第七轮学过来（原 4px） |
| 标题 | `.data-card-title` `17px / 600`，行高 `normal`（实测 **25px**） | `18px / 600`（`--fs-18`），行高**写死 1.35**（实测 24.3px） | ⚠️ 差 1px —— 17px 不在本项目字阶（12/14/16/18/20/24/30）⇒ 取 18（取 16 会跟描述只差 2px，层次就没了）。**行高必须写死**：`normal` 在不同中文字体下 1.31–1.47 都在飘，而卡下面紧贴着那张吃密度契约的表 |
| 描述 | `.data-card-desc` `14px` | `14px`（`--fs-14`），行高写死 1.35 | ✅ 第七轮学过来（原 12px） |
| **卡片阴影** | `box-shadow: 0 1px 3px rgba(0,0,0,.08)` | `box-shadow: var(--sh-L1)` | ✅ 第七轮学过来。**原来我方这张卡是平的** —— 这也是它看起来「薄」的一部分 |
| 卡圆角 | `border-radius: 12px` | `16px`（`--raw-radius-panel`） | ✅ 刻意不学 —— 圆角归我方样式库（tiaoyue 16px） |
| 网格 | `.data-cards` `minmax(**200px**,1fr)`、`gap: 14px`、`margin: 18px 0 24px` | `minmax(200px,1fr)`、`gap: 16px` | ✅ 最小宽学过来（第六轮，原 180px）；⚠️ gap 差 2px（14 不在刻度） |
| **hover** | `border-color: 主色` ＋ **`transform: translateY(-2px)`** ＋ `box-shadow: 0 4px 12px rgba(主色,.15)` | 只有 `border-color: --accent` | ⛔ 刻意不学位移 —— 本项目动效纪律禁位移。它那个 hover 阴影是**配着位移一起用**的（抬起来才需要落影），位移一去、阴影独留只会显得僵 |
| **实测卡高** | 同视口 1249 下 **133px**（描述折两行）／同宽下 113px（描述一行） | **111.19px**（1440 下，卡宽 421.66、描述一行） | ✅ 差 2px，来自「描述一行 vs 两行」＋ 内衬横向 2px |

⇒ 两轮下来共补进去：**图标（尺寸 ＋ 线宽 ＋ 唯一出口）／三段纵向排布 ＋ 段间距 6px／内衬 16／标题与描述的字号与行高／卡片阴影／网格最小宽 200px**。
⛔ 三处**刻意不学**：圆角 12px（归我方样式库）、`translateY(-2px)` 位移（动效纪律）、「一个功能一个色」（定调归我方样式库）。

### 11.2 其余组件（同样逐件量）

| 组件 | 参照物实测值 | 我方现值 | 判定与理由 |
|---|---|---|---|
| **统计条** | `.home-stat-item`：`flex:1; padding:2px 12px; border-right:1px solid rgba(主色,.16)` ⇒ **无框、靠竖分隔线分格**；`.home-stat-value` `**26px / 700** / 主色`；`.home-stat-label` 13px dim；gap 5px（`style.css:383-386`） | 白底卡 ＋ 1px 描边 ＋ 16px 圆角；值 `20px / 600 / --ink`；标签 12px | ⚠️ **形态刻意不学**（它的竖线无框条 vs 我方 tiaoyue 的面板卡，这是风格层）；但**「数字要大、要重、要上色」这条我没做到** —— 参照物 26/700/主色，我方 20/600/正文字色。⚠️ 要改成 24px（本项目字阶里最接近 26 的档）＋ 主色，需重测密度 ⇒ 列入**待拍板**（见回复） |
| **问答行** | `.qa-row{padding:6px 8px; font-size:15px; line-height:1.55}`；可复制的行 `hover` 变浅底并出现 📋 图标；`.func-card .qa{**border-top:1px dashed**; padding-top:8px}`（`style.css:78-84`） | 有 `.qa-row`（问 accent / 答 dim）；**没有虚线分隔、没有 hover 复制** | ✅ 本轮补上**虚线分隔**（`.qa-block`）；⚠️ 复制图标那条**未学** —— 本项目的复制交互还没做，记在差异里 |
| **图标系统** | `svgIcon(name,size=16,color)`：`viewBox 24` / `fill:none` / `stroke:currentColor` / `stroke-width 2` / 圆头圆角；颜色走 `ICON_COLORS`（**8 个图标 8 个色相**：橙/蓝/粉/天蓝/黄/青/玫红/灰）；尺寸用法：卡 22、功能卡标题 18、按钮 16（`app.js:196-207`） | 侧栏 8 个自写图标、1.7 线宽、单色 | ⚠️ 学一半 —— 线宽改 **2**、尺寸口径明确（卡 22 / 侧栏 20）；⛔ **8 色相不学**：与基础层「同一层级保持一致重量、避免每张普通卡片用不同强调色」冲突，我方统一走 `--accent-text` |
| **顶栏** | `.topbar{padding:**10px 20px**; gap:20px}`（`style.css:25-32`）⇒ 高约 52px | `padding:8px 32px` ⇒ 49px | ✅ 已对齐（我方的 49px 与它的 52px 同档） |
| **次级按钮** | `.ghost`：`padding:6px 14px; border-radius:8px; font-size:15px; display:inline-flex; gap:6px`（可放图标）（`style.css:48-54`） | `.btn-sm`：高 32px / 内衬 0 12 / 药丸 | ⚠️ 高度同档（32px ✅）；圆角走 tiaoyue 药丸（26px），⛔ 不学它的 8px |
| **面板** | `.panel{padding:**24px**; height:100%; overflow:auto}`（`style.css:62`） | `.panel` 内衬 12px（`--c-card-pad-dense`） | ⚠️ 差值 —— 我方为了密度收到 12px，⛔ 不回到 24（会吃掉 6 行里的一半） |

**这一节的方法论**：参照物的**结构细节**（图标、尺寸档、线宽、网格最小宽、hover 通道、虚线分隔）能学就学；**品牌层**（颜色、圆角体系、字体）走我方的 tiaoyue，⛔ 不串。每一条「不学」都写了理由与代价，⛔ 没有一条是漏掉的。

---

## 十二、功能入口卡的 65px 高差是怎么差的、又怎么还的（2026-10-08 第七轮）

用户第二轮口径：「**功能入口的高度还是没有 参考 MCN 的首页的功能入口 按钮的样式和布局**」。

### 12.1 先量，别猜

同视口（**1249 × 1277**，同一个浏览器实例）并排量参照物与原型；原始读数在 `_scratch/ref-measure.txt`（参照物）与 `_scratch/proto-measure.txt`（原型）。

| 项 | 参照物 | 我方第一版 | 差 |
|---|---|---|---|
| 卡高 | **133px** | **68px** | **−65px** |
| 排布 | 图标 ／ 标题 ／ 描述 **三段纵向** | 「图标＋标题」一行 ＋ 描述 **两段** | 少一段 ＋ 少两次段间距 |
| 内衬 | `16px 18px` | `12px 16px` | −4 ／ −2 |
| 段间距 | `6px` | `4px` | −2 |
| 标题 | `17px / 600`（行高 25px） | `16px / 600`（行高 21px） | −1 ／ −4 |
| 描述 | `14px` | `12px` | −2 |
| 卡片阴影 | `0 1px 3px rgba(0,0,0,.08)` | 无 | 少了 |

高差 65px 的**主因是排布**（少一段 22px 的图标行 ＋ 两次 6px 段间距），次因是内衬与字号。

### 12.2 改完立刻发现代价：密度掉了

改完再跑逐视口表：**1440×900 的 P1 由 6 行掉到 5 行**（首行顶 697 → 740px）。原因很直白 —— P1 的「统计条 ＋ 功能入口卡」这一摞压在两张 5 行表上，本来只剩 **17px** 余量（697px 距 714px 那条六行线），卡一长高 43px 就被吃光。

⇒ **卡的高度该学，但账得从别处还，⛔ 不是拿密度换。**

### 12.3 还账之前先做对照：证明「哪些红是我造成的」

动手之前先把本轮两处改动**回退成一份副本**（`_scratch/base.html`），对同一套判据跑 15 个视口，拿到**改前基线**：

| | 视口 |
|---|---|
| 绿 | 1440 ／ 1280 ／ 1024 ／ 1000 ／ 960 ／ 920 ／ 901 ／ 900 ／ 840 ／ 820 ／ 640 |
| 红 | 768 ／ 700 ／ 560 ／ 500 |

改后（收口完成）再跑一遍：**绿、红两批逐格完全一致**。这句对照是本轮的**全部正当性** —— 卡长高 43px，而分界一格没动（全表见 `3b` §五）。

⚠️ 顺带查出一件必须记的事：**768 ／ 700 ／ 560 ／ 500 那四处红是改前就有的**，与本轮无关（768／700 的根因是功能入口卡在 768 折成两行、统计条在 700 折成两行）。⇒ 本轮⛔ 没有顺手改它们，免得把「本轮改了什么」和「本来就有什么」搅在一起。

### 12.4 还的三处（合 −39px，实测首行顶 740 → 701）

| # | 做法 | 省下 | 凭什么 |
|---|---|---|---|
| ① | 删掉「功能入口」小标（八页各一处） | −24.6px | 参照物是 `.home-stats` **直接接** `.data-cards`，中间空无一物 —— 删它反而**更像参照物**；且「功能入口」四个字对扫读零增量（卡自己写着去哪儿） |
| ② | 统计条下边距 `8 → 6` | −2px | 照参照物 `.home-stats{margin:0 0 6px}`，同样是更贴近 |
| ③ | `.block-head` 下边距 `12 → 8` | −12px | P1 上方有三处块标题；参照物 `.func-card h3{margin-bottom:10px}`，8 比 12 更近 |

`≤640` 一档另追加一条（实测 724 → 700）：卡内衬 `8/12 → 6/8`、图标 `18 → 16`、标题 `18 → 16`、`.block` 上边距 `32 → 24`。

### 12.5 三条纪律（本轮现挂的）

1. **「改完只量主视口」这个毛病犯了两次**（第六轮 640、本轮 1440），两次都是逐视口表兜住的 ⇒ 已写进 `DESIGN.md` §五 第 7 条当纪律。
2. **改一个组件的高度之前，先跑一次「改前基线」** —— 否则分不清哪条红是自己造成的，很容易把旧洞也算进本轮账上（或者反过来，把新洞漏掉）。
3. **要学参照物，就量到数值**；量不准的值宁可写成「刻意不学 ＋ 理由」，⛔ 不要停在「大概差不多」—— 上一版的 65px 高差就是这么来的。

---

## 十三、tiaoyue 左侧导航样式对照（2026-10-08 第七轮追加）

用户 2026-10-08 口径：「**左侧导航 样式可以参考 tiaoyue的左侧导航**」。
⚠️ 这条当时**没做完就岔开了** —— 第三轮只做到「形态」（64px 栏、`nav-item`/`nav-icon`/`nav-tip` 三项各 9 个），而且是**照组件清单猜的**；用户要的「样式」一直没量到底。

### 13.1 先在包里找，找不到就回源站

- `assets/tokens.css`（43 个令牌）：**只有色值 / 圆角 / 按钮 / 输入框 / 卡片，没有一条导航几何**。
- `references/library.json`：`nav-item` 81 ／ `nav-icon` 81 ／ `nav-tip` 81 ／ `nav-tips` 9 ＋ `nav-tips__row` 81 ／ `app-sidebar` 9 ／ `sidebar-shell` 9（9 页 × 9 项）—— **只有计数，没有尺寸**。`summary.tailwind: 659` ⇒ 源站是 Tailwind 站，几何写在**类名**里，不在 CSS 规则里。
- `references/design-system.html`（1.4 MB）：clipper 生成的**样例页**，`app-sidebar` **0 处** ⇒ 不含源站侧栏。
- `capture-notes.md` 写明源站是 `https://www.tiaoyue.com/`，当时抓到的是**登录后的亮色形态**。

⇒ 包里没有这个事实，就**回源站量**（只连已有浏览器实例；量完即关，⛔ 不留标签页）。

### 13.2 实测真值（源站 `https://www.tiaoyue.com/`，强制亮色形态）

| 项 | tiaoyue 实测 | 我方（改前） | 本轮 |
|---|---|---|---|
| 栏宽 | `w-16` ⇒ **64px** | 64px | 不变 ✅ |
| 栏形态 | `rounded-[100px]` ＋ `p-[3px]` ＋ `bg rgba(100,112,160,.08)` ＋ `border 1px rgba(100,112,160,.14)`，`flex-col items-center`，**⛔ 无右边线** | 通栏满高面板 ＋ `border-right:1px var(--line-soft)`，无圆角／底色／描边 | 改 **药丸浮栏** ✅ |
| 栏高 | 随内容 **710px**，`left:16` **浮在页面上**（主区不缩进） | 拉满整屏 | 随内容 ＋ 列内垂直居中（⚠️ 仍占一列，⛔ 没改成真浮层，见 13.3） |
| 项尺寸 | `h-[78px] w-14` ⇒ **56 × 78** | 撑满栏宽 × **44px** | 改 **56×78** ✅ |
| 项圆角 | `rounded-[54px]` ⇒ **54px** | 14px（`--raw-radius-row`） | 改 **54px** ✅ |
| 项内衬 | `p-4` ⇒ **16px** | 0 | 改 **16px** ✅ |
| 项段间距 | `gap-1.5` ⇒ **6px** | 2px | 改 **6px** ✅ |
| 项内文字 | **常驻**：`text-xs font-medium leading-4` ⇒ **12px / 500 / 行高 16px**，图标在上、名字在下 | **名字常驻隐藏**，只走悬停提示 | 改 **常驻** ✅ |
| 名字长度 | 全部 **2 字**（首页／影视／短视频／转绘／画布／剧本／资产／空间／团队），最长 3 字已是溢出到内衬的极限 | 总览／找选题／资产库／创作／发布／**账号画像**／**记录与对账** | 收到**一律 2 字**：总览／选题／资产／创作／发布／画像／复盘／对账 |
| 图标 | `size-6` ⇒ **24×24**（字形在 24 盒里 `translate(1 1)`），**填充字形**（`fill` 走 `currentColor`） | **20px**，线性描边 `stroke-width:2` | 尺寸改 **24** ✅；⛔ 字形不换（见 13.3） |
| 当前项 | `is-active`：bg `rgba(31,35,41,.06)` ＋ 字/图标**满墨** `rgb(31,35,41)` | 品牌紫底 `color-mix(accent 10%, paper)` ＋ `--accent-text` ＋ 字重 600 | 改 **中性填充 ＋ 满墨** ✅ |
| 非当前项 | `is-inactive`：透明底 ＋ 字 `rgba(31,35,41,.55)` | `--ink-mute` | 改 `--ink-faint`（≈3.4:1，过本项目「淡字 ≥3:1」那条） |
| 项间距 | **无 gap**（78px 紧贴） | `4px` | 改 **0** ✅ |
| hover | `transition-colors` **只换颜色 0.15s**，⛔ 无位移、⛔ 无阴影 | 底色 ＋ 字色 | 同（保持无位移）✅ |
| 悬停辅助 | 栏右侧一列 `nav-tips__row`（**158 × 78**，与左侧项逐项对齐），内容是**说明**（实测文案「发现灵感与精选内容」） | viewport 级提示浮层，内容是**名字重播** | 保留浮层，内容改**该页说明** ✅ |

### 13.3 三处刻意不学 / 一处没做

- ⛔ **不换图标字形**：参照物是**填充字形**，我方是 mcn-work-shop 那套**线性描边**图标（用户上一轮点名要学的正是那套）。换字形等于换一整套图标，两个参照物会打架 ⇒ 只把尺寸从 20 提到 24。
- ⛔ **不做「真浮层」**：参照物的栏 `left:16px` 浮在页面上、主区**不缩进**；我方仍是 `.app` 两列里的一列。改成真浮层要动外壳骨架（`.app` 的 grid 与 `.main` 的缩进），收益只有「主区多 16px」⇒ 本轮不换，差异记在这里。
- ⛔ **不给导航上彩色**：参照物的导航图标本来就是「满墨 / 淡墨」两档，跟随文字色，没有第二套色。
- ⚠️ **没做**：`nav-tips__row` 那种「贴着栏右侧、逐项对齐的一整列说明」。我方是**单条跟随当前项**的浮层。两者功能等价（都在回答「这一项是干什么的」），形态不同；要做成一整列说明，得给 8 页各写一行文案并新增一层布局 ⇒ 本轮没做，留在这儿备查。

### 13.4 改完的验收

- 五道闸门全过：自检 **PASS 84 ／ FAIL 0**（1440×900）、**逐视口 15 个绿／红分界与改前逐格一致**（绿 1440/1280/1024/1000/960/920/901/900/840/820/640；红 768/700/560/500）、变异 **15 / 15**、骨架 **39 板块**、命名 **2060 ／ 0 ／ 25**、语法门禁全过。
- ⚠️ **这次改动对密度是中性的**：栏宽仍是 64px 定值，项从 44 长到 78 只让**药丸变高**，⛔ 不影响主区可用高度（实测 15 个视口首行顶一格未动）⇒ 这是本项目少见的「只改外观、不动布局」的一次，所以**不需要还账**。