contentm_agent/执行会话/目标-根据1a需求文档生成MCN短视频整合营销-d85687/ui/3b-实测记录.md

3b · 实测记录（③段界面交互）

落点：执行会话/目标-根据1a需求文档生成MCN短视频整合营销-d85687/ui/3b-实测记录.md 判据源：stage-delivery/SKILL.md §3b/§供给；references/execution-runbook.md §3.5、§5.3、§六；references/layouts-tooling.md §1、§5.5 交付物：ui/mcn-workbench.html（单文件自包含原型）＋ ui/DESIGN.md（规范）

〇、声明制（四字段）

字段	内容
当前段与子步	③段 / 3b 原型构建 ＋ 3b 实测（实测未过不进 3c）
主干与挡位	供给＝oil-ui-pro（基础层：视觉与体验的底线判据）＋ 叠加层（本段自带样式库 design-system-tiaoyue 定调与令牌 ＋ 本段自有判据；只许更严、更具体，⛔ 不许放宽基础层）/ 挡位 标准
依据文件	DESIGN.md（本段契约）、prd/2b-界面布局.md（冻结骨架）、prd/2a-产品功能.md（F1–F14）
产出落点	ui/mcn-workbench.html、ui/_tools/（三个可复跑脚本）、ui/_gate_shots/（23 张视口帧）

一、怎么复跑（四条命令，全部只读原型）

PY="E:/ProgramData/.workbuddy/binaries/python/versions/3.13.12/python.exe"
cd "…/ui"
$PY _tools/cap.py --mode dom  --route selftest --viewport 1440x900 --out _scratch/st.html   # 取自检输出
$PY _tools/mutate_test.py                                                                  # 变异对照
$PY _tools/check_skeleton.py                                                               # 骨架冻结闸门
$PY _tools/check_js.py                                                                     # JS 语法 ＋ 模板里的反引号（第 5 个门禁，第六轮新增）

cap.py 对外只收 --viewport，视口是声明式给的（内部走 CDP Emulation.setDeviceMetricsOverride，见 §五 的通道口径一节）—— 不再有 --window-size 的偏移量口径，也不再自己起浏览器。

🔴 复跑前先确认浏览器实例在跑：本机明令「先探测、能复用就复用」（skills/browser-harness/SKILL.md）。

netstat -ano | grep -E "127\.0\.0\.1:9223 .*LISTENING"   # 有 pid ＝ 实例在跑

实例没起来时 cap.py 会直接报错退出，⛔ 不会偷偷拉起一个（拉起谁、拉几个，是人的决定）。

_scratch/ 是跑出来的中间件、目录不存在时脚本会自建，看完随手删掉不影响任何结论；交付目录里只留脚本、截图与四份文档。

二、自检 84 项（1440×900 主视口，PASS 84 ／ FAIL 0）

自检是原型自带的：#/selftest 路由会在真实场景里逐个点过每个可点元素。全文落盘如下，⛔ 不是摘要。 ⚠️ 2026-10-08 第六轮重跑（学参照物的组件细节：功能入口卡补 22px 图标、图标线宽 1.7→2、网格最小宽 180→200、hover 补轻阴影、问答区加虚线分隔）。这一轮判据条数与 ID 数都没变（84 项 ／ 76 个 ID ／ 72 个真驱动），变的是几何：P1 首行顶 688 → 697px、P2 471px。下面这段是按改动后的原型重新落盘的。

自检结果：PASS 84 ／ FAIL 0

PASS  路由 #/p/p1 渲染出 7 个顶层节点
PASS  路由 #/p/p2 渲染出 6 个顶层节点
PASS  路由 #/p/p3 渲染出 6 个顶层节点
PASS  路由 #/p/p4 渲染出 6 个顶层节点
PASS  路由 #/p/p5 渲染出 7 个顶层节点
PASS  路由 #/p/p6 渲染出 6 个顶层节点
PASS  路由 #/p/p7 渲染出 6 个顶层节点
PASS  路由 #/p/p8 渲染出 6 个顶层节点
PASS  六态 × 八页 ＝ 48 个组合，全部渲染出内容
PASS  侧栏只有一层：8 个功能项（总览 / 选题 / 资产 / 创作 / 发布 / 画像 / 复盘 / 对账）排成一列药丸浮栏（图标＋2 字短名），一项一页，第二层 0 个
PASS  八页一次点击可达：侧栏八个功能项直达 ＋ 各页「功能入口」卡另给上下文入口（卡片共 8 个落点、无缺口）
PASS  清单里每个 ID 都在页面上出现过（76 个，无悬空声明）
PASS  页面上每个 data-act 都在清单里（共 638 次出现，无未登记的可点元素）
PASS  清单里 72 个 ID 都真驱动过并给出可见反馈，0 个死控件（24 个场景，每个实例各重置一次）
PASS  当刻被禁用的控件 4 个（有 disabled 属性：按契约在特定条件下不可点）：P4-03, P5-06, P6-03, R-02
PASS  清单里每个 ID 都至少被驱动过一次（无「从未跑过」的条目）
PASS  侧栏 8 个功能项逐个点过，每一项都落到了自己那一页
PASS  五处「输入后才可用」的联动都通：其中 4 处在空输入时确实是禁用的 → 输入后转可用 → 点了有反应
PASS  工具型纪律：零 .eyebrow / 零 .lead / 零 .hero
PASS  入场编排不做逐区块：@keyframes 共 0 处（工具型至多一处协调出场）
PASS  骨架冻结：八页 39 个板块的数量与顺序与 ②段 2b「板块清单」逐位一致，⛔ 未增删挪
PASS  结构 ①：八页各一个 h1，标题逐级不跳；每个板块都有文字标题
PASS  结构 ②：字号 12/14/16/18/20/24px 共 6 档，相邻差 2/2/2/2/4，正文档 14–16 在用
PASS  结构 ④：逐页查过，首屏同屏主档按钮 ≤1 个；本页实底按钮 1 种
PASS  组件口径：八页都没有用内联 style 表达选中态或覆盖字号（选中态走 .is-on / .is-active，字号走 --fs-* 档）
PASS  交互态与可读性：:hover / :focus-visible 都在且没被 outline:none 抹掉；tabular-nums、prefers-reduced-motion、防溢出三件套齐全
PASS  阴影：面板/卡片都用多层叠层，无单层死黑重阴影
PASS  间距：flex/grid 的 gap 取值全部落在登记刻度内（9 个刻度）
PASS  浮层「随手记」中性关闭出口 ＝ 1（右上 ×）｜另有决策型关闭 1 个（R-03）；遮罩是「点层外」通道，不计作出口
PASS  浮层「随手记」打开后焦点在层内（当前＝X-close）
PASS  浮层「随手记」连按 8 次 Tab，焦点始终锁在层内
PASS  浮层「随手记」Esc 能关
PASS  浮层「随手记」关掉后焦点回到触发件 G-06
PASS  浮层「随手记」点遮罩（层外空白）能关
PASS  浮层「全局检索」中性关闭出口 ＝ 1（右上 ×）｜另有决策型关闭 0 个；遮罩是「点层外」通道，不计作出口
PASS  浮层「全局检索」打开后焦点在层内（当前＝X-close）
PASS  浮层「全局检索」连按 8 次 Tab，焦点始终锁在层内
PASS  浮层「全局检索」Esc 能关
PASS  浮层「全局检索」关掉后焦点回到触发件 G-10
PASS  浮层「全局检索」点遮罩（层外空白）能关
PASS  浮层「两处假设说明」中性关闭出口 ＝ 1（右上 ×）｜另有决策型关闭 0 个；遮罩是「点层外」通道，不计作出口
PASS  浮层「两处假设说明」打开后焦点在层内（当前＝X-close）
PASS  浮层「两处假设说明」连按 8 次 Tab，焦点始终锁在层内
PASS  浮层「两处假设说明」Esc 能关
PASS  浮层「两处假设说明」关掉后焦点回到触发件 G-08
PASS  浮层「两处假设说明」点遮罩（层外空白）能关
PASS  浮层「资产选择器」中性关闭出口 ＝ 1（右上 ×）｜另有决策型关闭 0 个；遮罩是「点层外」通道，不计作出口
PASS  浮层「资产选择器」打开后焦点在层内（当前＝X-close）
PASS  浮层「资产选择器」连按 8 次 Tab，焦点始终锁在层内
PASS  浮层「资产选择器」Esc 能关
PASS  浮层「资产选择器」关掉后焦点回到触发件 P4-04
PASS  浮层「资产选择器」点遮罩（层外空白）能关
PASS  浮层「版本列表」中性关闭出口 ＝ 1（右上 ×）｜另有决策型关闭 0 个；遮罩是「点层外」通道，不计作出口
PASS  浮层「版本列表」打开后焦点在层内（当前＝X-close）
PASS  浮层「版本列表」连按 8 次 Tab，焦点始终锁在层内
PASS  浮层「版本列表」Esc 能关
PASS  浮层「版本列表」关掉后焦点回到触发件 P4-07
PASS  浮层「版本列表」点遮罩（层外空白）能关
PASS  浮层「发布二次确认」中性关闭出口 ＝ 1（右上 ×）｜另有决策型关闭 1 个（P5-10）；遮罩是「点层外」通道，不计作出口
PASS  浮层「发布二次确认」打开后焦点在层内（当前＝X-close）
PASS  浮层「发布二次确认」连按 8 次 Tab，焦点始终锁在层内
PASS  浮层「发布二次确认」Esc 能关
PASS  浮层「发布二次确认」关掉后焦点回到触发件 P5-08
PASS  浮层「发布二次确认」点遮罩（层外空白）能关
PASS  浮层「核销二次确认」中性关闭出口 ＝ 1（右上 ×）｜另有决策型关闭 1 个（CHECKOUT-CANCEL）；遮罩是「点层外」通道，不计作出口
PASS  浮层「核销二次确认」打开后焦点在层内（当前＝X-close）
PASS  浮层「核销二次确认」连按 8 次 Tab，焦点始终锁在层内
PASS  浮层「核销二次确认」Esc 能关
PASS  浮层「核销二次确认」关掉后焦点回到触发件 P8-03
PASS  浮层「核销二次确认」点遮罩（层外空白）能关
--- 数值取证（布局视口 1440 × 900 ；window.innerWidth 1440）---
PASS  对比度 --warn 对 --surface ＝ 5.93:1（契约 ≥4.5:1）
PASS  对比度 --accent-text 对 --surface ＝ 4.76:1（契约 ≥4.5:1）
PASS  对比度 --ink-faint 对 --surface ＝ 3.55:1（契约 ≥3:1）
PASS  强调色填充面积占比：八页最高 创作台 ＝ 0.52%（1 个填充块，契约 ≤5%；不含 3px 左侧标条 / 描边 / 文字色）
量尺寸时滚动零点（P1）：window 0 ／ html 0 ／ body 0 ／ .view 0
PASS  量尺寸前三个滚动容器都停在零点（P1）：rect 取到的是相对视口的真值
PASS  P1 账号矩阵：首屏从 697px 起，行距 31px，一屏装得下 6 行（契约 ≥6 行／900px 高，实测宽 1440）｜示意数据 5 条 ⇒ 实际可见 5 行（数据用尽，非被截断）
PASS  P1 账号矩阵行高齐：31–31px，差 ≤2px（没有哪一行被状态标或长文字撑高）
PASS  P1 实际在用字号档 6 档：12px / 14px / 16px / 18px / 20px / 24px（契约 ≥3）
PASS  视觉层间距 32px ／ 块内相邻行分隔 1px（发丝线，行本身不套框）⇒ 比值 32 ≥2（4 个视觉层）
P1 各块落位（顶 / 高）：今日待处理@333+249 · 账号矩阵列表@614+249 · 异常值提示@895+201 · 全局检索与随手记@1128+231（视口高 900；并排的两块顶相同）
量尺寸时滚动零点（P2）：window 0 ／ html 0 ／ body 0 ／ .view 0
PASS  量尺寸前三个滚动容器都停在零点（P2）：rect 取到的是相对视口的真值
PASS  P2 对标内容列表：首屏从 471px 起，行距 31px，一屏装得下 13 行（契约 ≥6 行／900px 高，实测宽 1440）｜示意数据 5 条 ⇒ 实际可见 5 行（数据用尽，非被截断）
P2 各块落位（顶 / 高）：对标监控概览@143+121 · 对标内容列表@389+249 · 评论区洞察@670+316 · 灵感速记@1018+99
PASS  横向溢出 ＝ 0（scrollWidth 1440 ＝ clientWidth 1440）
PASS  八页逐页查横向溢出：全为 0（最差 p1）
PASS  纵向滚动只由主区承担：.app 高 900px ＝ 视口 900px；body 未承担滚动（scrollTop 0）；主区 overflow-y auto，clientH 851px ／ scrollH 1374px（内容更高 ⇒ 主区可滚，折叠线以下的块拿得到）
（附）P1 行高 31/31/31/31/31px · P1 按钮高度集合 32px · 量时 scrollY=0 · 顶栏高 49px · 导航占 900px（column）· 主区内衬上 24px · innerWidth 1440 − clientWidth 1440 ＝ 0px（窗口滚动条宽度）
控制台报错：0 条

截图：_gate_shots/selftest-1440.png。

三、变异对照 15 / 15（证明上面那串 PASS 不是恒绿）

一个永远 PASS 的自检等于没有自检。做法：复制原型 → 注入一处已知的假病 → 再跑一次自检 → 要求它报红、且红在预期那一条上。

基线（未注入）：PASS 84 ／ FAIL 0
✅ M1  ⇒ PASS 83／FAIL 1 ｜ 报红且红在预期处
✅ M2  ⇒ PASS 82／FAIL 2 ｜ 报红且红在预期处
✅ M3  ⇒ PASS 82／FAIL 2 ｜ 报红且红在预期处
✅ M4  ⇒ PASS 83／FAIL 1 ｜ 报红且红在预期处
✅ M5  ⇒ PASS 83／FAIL 1 ｜ 报红且红在预期处
✅ M6  ⇒ PASS 82／FAIL 2 ｜ 报红且红在预期处
✅ M7  ⇒ PASS 82／FAIL 2 ｜ 报红且红在预期处
✅ M8  ⇒ PASS 82／FAIL 2 ｜ 报红且红在预期处
✅ M9  ⇒ PASS 83／FAIL 1 ｜ 报红且红在预期处
✅ M10  ⇒ PASS 83／FAIL 1 ｜ 报红且红在预期处
✅ M11  ⇒ PASS 75／FAIL 9 ｜ 报红且红在预期处
✅ M12  ⇒ PASS 77／FAIL 7 ｜ 报红且红在预期处
✅ M13  ⇒ PASS 77／FAIL 7 ｜ 报红且红在预期处
✅ M14  ⇒ PASS 83／FAIL 1 ｜ 报红且红在预期处
✅ M15  ⇒ PASS 83／FAIL 1 ｜ 报红且红在预期处

变异对照：15 / 15 通过
⇒ 15 处假病全部被自检抓住，且基线回绿：这套判据不是恒绿的。

⚠️ M2 与 M8 这两个注入点本轮换过（第三轮）。形态一改，注入点就必须跟着改，否则变异脚本会「找不到注入点、跳过」或者「注进去了但打不到判据」——这两种都属于假对照，比没有变异更坏（它会让人以为这条判据有人看着）：

• M2（未登记的可点元素）：P2 的「对标内容列表」由行式列表改成满宽表格后，原注入点 .action-cell 里的 P2-03 在文件里已经不存在 ⇒ 本轮实测时脚本直接判「跳过」。已把注入点换到表格那一行（<td class="cell-act">）。
• M8（密度退化）：密度判据本轮量的已是 P1 那张满宽表格（.tbl-dense 的 td 内衬），原注入点 12px → 36px 的 .list-row 内衬对表格无效 ⇒ 实测 PASS 83／FAIL 0（没报红）。已把注入点换成表格 td 的内衬。
• 上一轮同样处理过 M7 / M10（.list-row → 表格 td）。⇒ 一条经验：判据形态改了，必须逐个复核每个变异的注入点还在不在，mutate_test.py 已经把「找不到注入点」显式报成 ⚠️ 而不是静默跳过（本轮就是靠它抓到的）。

⚠️ M9 换过两次。第一版是「拿掉 applyScene 末尾的滚动复位」，实测观测不到差别（重绘 #view 时浏览器把滚动自然夹回 0）⇒ 假变异。第二版改成 window.scrollTo(0,300)，2026-10-08 又发现它同样抓不到东西：外壳修完之后滚动容器是 .view，window 根本滚不动，拿 window 注入等于没注入。现在注入点是 document.querySelector('.view').scrollTop=300，也就是这条守卫真正声称要拦的那件事。

⚠️ M14 是这一轮新加的：它注入的就是 §六 第 16 条那个真缺陷的原样（.app 退回 min-height:100vh）。加它的目的只有一个 —— 证明新判据「纵向滚动只由主区承担」不是恒绿。

四、骨架冻结闸门（正向 ＋ 双向变异）

把②段 prd/2b-界面布局.md §二 当权威读，与原型 FROZEN 表逐页逐位比（数量相等、顺序相等、名字互为前缀）。

正向：PASS  骨架冻结：八页 39 个板块，②段 2b-界面布局.md §二 与原型 FROZEN 表逐页逐位一致
反向变异 1（改原型 p3 多一块）：p3 板块数 ②段 4 ≠ 原型 5
反向变异 2（改②段副本 p1 第 2 块名）：p1 第 2 块 ②段「账号矩阵一览」≠ 原型「账号矩阵列表」

两条反向变异改的都是副本（_probe/2b-mut.md），权威件 prd/2b-界面布局.md 全程只读。为了事后能复核这件事，这里钉一条指纹：

prd/2b-界面布局.md   md5 ＝ 61129a3c7944b7d0455d9530d7d373f7   15688 字节  mtime 2026-10-08 09:01
（上一版指纹 1dcc69f9…／15036 字节／02:30 已作废：②段在 09:01 自己动过一次 —— 那时 ②段 的 2b 定稿又改过一轮，③段手里那条指纹就旧了。⛔ 指纹只对「记下来的那一刻」负责。）

✅ 复核方式：md5sum ../prd/2b-界面布局.md，与上面比。一致 ⇒ ③段确实没动过冻结骨架。 （这条指纹是删 _probe/ 之前补登的 —— 备份删掉后，只剩这一个数能证明骨架没被污染，所以先写进正文再清临时件。）

五、多视口密度核对（契约：一屏可见行数 ≥6 ／ 900px 高，layouts-tooling.md §1 原文，⛔ 不分档）

🔴 2026-10-08 第七轮整表重测替换（功能入口卡按参照物改成三段纵向之后）。这张表的用法本轮变了：不再只报「现在几行」，而是同一台机器、同一套判据，跑改前／改后两版逐格对照 —— 本轮改动的正当性就建立在这张对照上：卡长高 43px，但绿色的视口一个没少。 两版：_scratch/base.html（改前，＝把本轮两处改动回退后的副本）／mcn-workbench.html（改后）；各跑 15 个视口，全部走 CDP 声明式视口（见本节末「通道口径」）。

视口	自检	P1 账号矩阵（改前 → 改后）	P2 对标列表	顶栏	侧栏
1440×900	PASS 84／0	697 → 701px，6 行 ✅	13 行	49px	64px 药丸浮栏
1280×900	PASS 84／0	697 → 701px，6 行 ✅	13 行	49px	64px 药丸浮栏
1024×900	PASS 84／0	697 → 701px，6 行 ✅	13 行	49px	64px 药丸浮栏
1000×900	PASS 84／0	677 → 676px，7 行 ✅	14 行	49px	64px 药丸浮栏
960×900	PASS 84／0	677 → 676px，7 行 ✅	14 行	49px	64px 药丸浮栏
920×900	PASS 84／0	677 → 676px，7 行 ✅	14 行	49px	64px 药丸浮栏
901×900	PASS 84／0	677 → 676px，7 行 ✅	14 行	49px	64px 药丸浮栏
900×900	PASS 84／0	677 → 676px，7 行 ✅	14 行	49px	64px 药丸浮栏
840×900	PASS 84／0	677 → 676px，7 行 ✅	14 行	49px	64px 药丸浮栏
820×900	PASS 84／0	677 → 676px，7 行 ✅	14 行	49px	64px 药丸浮栏
768×900	PASS 83／1	741 → 779px，5 → 3 行 ❌	14 行	49px	64px 药丸浮栏
700×900	PASS 83／1	834 → 872px，2 → 0 行 ❌	11 行	57px	64px 药丸浮栏
640×900	PASS 84／0	711 → 700px，6 行 ✅	13 行	57px	横滚标签条
560×900	PASS 83／1	820 → 808px，2 行 ❌	10 行	57px	横滚标签条
500×844	PASS 83／1	875 → 882px，−1 → −2 行 ❌	8 行	57px	横滚标签条

结论：绿／红的分界逐格完全一致 —— 绿：1440 ／ 1280 ／ 1024 ／ 1000 ／ 960 ／ 920 ／ 901 ／ 900 ／ 840 ／ 820 ／ 640；红：768 ／ 700 ／ 560 ／ 500。行本身没变肥（行高 30.5–31px、各行差 ≤0.5px、块内分隔 1px），在所有视口都 PASS。

🔴 必须改正上一版的一处错数。 上一版把 768×900 记成「首行 677px、7 行 ✅」，于是得出「≥640px 宽时 P1 与 P2 都达标」。本轮在改前的版本上重测是 741px、5 行 ❌（改后 779px、3 行）⇒ 那句结论是错的，真实分界是 640 与 ≥820 绿；768 与 700 红；560 与 500 红。

这处错数的根因恰好就是本轮修掉的那件事：旧取证通道用 chrome.exe --window-size 定视口，而窗口尺寸不等于 CSS 视口（两条通道对同一尺寸的解释还不同，见本节末）。768 恰好卡在功能入口卡「3 列／2 列」的阈值上（主区内容宽 632px），只差 7px ⇒ 旧通道多给十几像素视口，卡就从两行变一行、首行顶差 64px。换成 CDP 声明式视口后这个歧义不存在了。

本轮把高度还回去的三处（实测 P1 首行顶 740 → 701，−39px）：① 删掉「功能入口」小标（−24.6px，八页各一处）；② 统计条下边距 8 → 6（−2px）；③ 块标题与内容之间的间距 .block-head 12 → 8（P1 上方有三处，−12px）。≤640 一档另追加一条：卡内衬 8/12 → 6/8、图标 18 → 16、标题 18 → 16、.block 上边距 32 → 24（实测 724 → 700，−24px）。

⚠️ 归属必须说清：本轮修的只有我自己刚造成的回归（改卡前 697／6 ✅ → 改完 740／5 ❌）。768 ／ 700 ／ 560 ／ 500 这四处红是改前就有的，与本轮无关 —— 768／700 的根因是功能入口卡在 768 折成两行、统计条在 700 折成两行；500 是已知缺口。⛔ 本轮没有顺手改它们，免得把「本轮改了什么」和「本来就有什么」搅在一起。

⚠️ 「改完只量主视口」这个毛病犯了两次，两次都是逐视口表兜住的。 第一次（第六轮）：加 22px 图标那轮只量了 1440（697px／6 行 ✅）就往下走，回头才发现 640 由 5 行掉到 3 行（卡变高 ＋ 网格最小宽 180→200 ⇒ 608px 主区装不下三张卡、折成两行、卡块高度翻倍）。第二次（本轮）：改完卡只量 1440（701／6 ✅，看着没事），是这张表把「改后 768／700／560／500 全红、1440 也从 6 行掉到 5 行」抓出来的。⇒ 只量契约视口、不回量窄屏，是会漏的；这条已经进 DESIGN.md §五 第 7 条。

上一轮（第四轮）修掉的两处旧错仍成立： ①顶栏列：旧表在 901–1000 段写「93px（折两行）」、其他段写 69/53px —— 那是演示下拉还在的时候。顶栏收成「产品名 ＋ 随手记」并把内衬 16→8 之后，全宽度恒为 49px（640 以下 57px）。 ②P2 列：旧表写「6 行／7 行」，是没跟着形态改的旧数。P2 的「对标内容列表」第三轮已由行式列表改成满宽表格 ⇒ 行距 31px、容量 14 行，任何视口都达标（500×844 也有 8 行）。⇒ 现在只有 P1 这一列在窄屏／窄中屏不达标。

⚠️ 另一条反直觉的实测（第三轮记的，首行顶数字已按本轮实测更正）：同一个 768px 视口，侧栏 240px 时 P1 首行顶 816px ⇒ 2 行，收到 64px 后 741px ⇒ 5 行。主区越窄，密度反而越差（功能入口卡会被挤成两行）。

还有一条被第三轮推翻的旧结论：第三轮记过「照搬 3c-GPT参考版.md 那版的满宽表格顺排 ⇒ 一屏只装得下 2 行」。真的照搬了之后是 6 行（行高 67px→31px）⇒ 正确表述是「满宽顺排与『一屏 ≥6 行』可以兼得，代价是行高必须压到 31px 上下」。

通道口径（2026-10-08 第七轮改写：整个通道换掉了）

旧通道（已废） 是 chrome.exe --headless=new --window-size=… --dump-dom / --screenshot。它有两个坑，第二个是这轮才彻底看清的：

坑一：两条模式对同一个 --window-size 的解释不一样。

--window-size=656,995 ─┬─ --dump-dom   ⇒ 视口 640 × 900  （mq<=640 true）
                       └─ --screenshot ⇒ 视口 656 × 995  （mq<=640 false）

⇒ 当时只能在调用侧按模式补偏移量（dom 补 +16 / +95，shot 原样）。而一旦补错，报告里就会出现「同一个 1440×900，一份证据当成 1440 说话、另一份当成 640 说话」这种自相矛盾 —— 本轮之前的截图全部比标称大 16×95（「1440×900」其实是 1456×995）。

坑二：窗口尺寸本来就不保证等于 CSS 视口。 这正是 §五 那处 768 错数的来源（差十几像素就跨过功能入口卡 3 列／2 列的阈值）。旧通道还有个硬上限：Chrome 窗口宽最小 516px ⇒ 视口宽量不到 500 以下，所以此前契约里凡写 390 的地方一律按 500×844 记。

新通道：_tools/cap.py 改走浏览器实例的 CDP，用 Emulation.setDeviceMetricsOverride 声明式定视口。三个后果：

1. 要多少是多少：「1440×900」就是 1440×900（dump 里会印实际 innerWidth/innerHeight，不符直接断言失败）。
2. 偏移量那套口径整段作废，--window-size 不再出现。
3. 500px 下限解除 —— 已实测 390×844（PNG 尺寸当场比对通过）。

同时保留原来的守卫：每次截图后直接从 PNG 的 IHDR 读真实像素跟目标视口比，不等就报红。

⚠️ 还有一条同样重要的：新通道只连已有实例，⛔ 不自己起浏览器（本机明令，见 skills/browser-harness/SKILL.md 开头的「先探测、能复用就复用」）。实例没起来时 cap.py 直接报错退出，不会偷偷拉起一个。

第八轮（A 方案 ＋ 滚动条修复）

🔴 本块替换上一块的数据行。 用户 2026-10-08 拍板「A 方案」。做法与结果：

视口	改前 首行顶/cap	改后 首行顶/cap
1440 / 1280 / 1024 ×900	701 / 6	701 / 6	一格未动
1000 / 960 / 920 / 901 / 900 / 840 / 820 ×900	676 / 7	676 / 7	一格未动
768 ×900	779 / 3	676 / 7	✅ 转绿
700 ×900	872 / 0	676 / 7	✅ 转绿
640 ×900	700 / 6	685 / 6	✅ 余量更大
560 ×900	808 / 2	700 / 6	✅ 转绿
500 ×844	882 / −2	773 / 2	❌ 唯一不达标

做了两件事 ＋ 修了一个真缺陷： ① 功能入口卡最小宽 200 → 160px（≤1000 档）—— 768 下主区内容宽 625px，200px 只能放 2 列 ⇒ 三张卡折成两行、卡块高度翻倍； ② 统计条最小宽 132 → 96px（≤820 档）—— 700 下 132px 只能放 3 列 ⇒ 4 格折成两行、统计条由 77.59 翻到 171.19； ③ 移动档标签条藏掉 16px 横向滚动轨（见 §六 第 32 条）。 ⚠️ 两处 auto-fit 都只在真装不下时才缩 ⇒ 上面 10 个视口一格未动，这是"不是拿宽屏换窄屏"的直接证据。

六、本轮修掉的真缺陷（每条：现象 → 根因 → 证据）

#	现象	根因	证据
1	整份设计系统在屏幕上失效	样式表顶部注释里 --t-*/--raw-* 的 */ 提前闭掉注释，吞掉整个 :root 令牌块	修复后对比度取证才量得出来
2	全表行分隔线一直没画出来	.list-row:first-child{border-top:0}：每行都包在 <li> 里，于是每行都是自己 <li> 的 first-child，borderTopStyle 全是 none	变异 M10；另修了判据除数为 0 时恒 PASS（比值 Infinity）
3	浮层不浮	#layer-root 与 .layer 都没有定位样式，浮层渲染在文档流末尾，得滚到页尾才看得见	改为遮罩 fixed inset:0 ＋ 层本体 fixed 居中
4	行高随文字长短乱跳（66／82／100px）	状态标放在操作列把 auto 列撑宽，只有那一行折行	状态标移到名称旁；再加「行内每段不许换行 ＋ 省略号」；判据新增「行高齐」
5	自检在窄视口给出假 PASS「装得下 10 行」	驱动几百次点击后浏览器为聚焦元素自动滚动，rect.top 变负，容量公式虚高	加「量尺寸时页面在滚动零点」守卫 ＋ 变异 M9
6	手机导航「既不是一条、也没滚动」，占 161px	.sidebar 只给了 flex-direction:row，可导航分组挂在 <nav id="nav"> 里，而 #nav 一条样式都没有 ⇒ 仍是块级容器，4 个分组照旧竖堆	补 #nav{display:flex;flex-flow:row nowrap} ＋ 整条链 flex:0 0 auto；161px → 53px
7	顶栏「演示 · 账号」折成两行，顶栏被顶到 70px	.topbar-label 没有 white-space:nowrap	独立评审第一眼点出；补 nowrap 后顶栏 69px
8	截图尺寸全部比标称大 16×95	cap.py 对两条通道用了同一个偏移量	§五「通道口径」；已加 PNG 尺寸守卫
9	两个二次确认浮层其实各有两个可见关闭控件，判据却报「出口 ＝ 1」	判据只数 .layer-close 这个类名，把可见的「取消」从眼皮底下藏掉了；核销层的「取消」还复用了 X-close	判据改为「中性出口只认 X-close」＋「决策型关闭单列报数」；核销取消拆出 CHECKOUT-CANCEL；加变异 M13
10	「今日该发：待发：3 分钟快手菜」冒号连用，评审读成错字	示意数据 today 字段的值里自带冒号，被拼进「今日该发：…」	数据改为空格分隔
11	制作黑话写在界面上（「这里是 X 的 empty 态」）	状态面板上另贴了一句给做原型的人看的说明，而 STATE_COPY 已铺好用户向文案	删掉那句话；按钮改「回到正常内容」
12	手机形态看不出当前在哪一页	横滚标签栏里当前项滚在视野外	只调 .sidebar 自己的 scrollLeft 把当前项带进视野（⛔ 不碰 window，否则会误触滚动守卫）
13	layerTrigger 放进状态快照 S	点任何元素都会改 S ⇒ 状态快照跟着变 ⇒ 没有一个控件会被判死，死控件判据整条失效	移出 S；变异 M1/M6 当场回归报红
14	浮层焦点与可见性判据全部失效	offsetParent 对 position:fixed 元素恒为 null	改用 getClientRects().length
15	--full（整页长图）静默失效，产出的还是视口帧	无头 CLI 这条通道只能截视口	参数已删除，_full/ 目录一并清掉，不留一个撒谎的开关
16	整页「滚不动」（不是「不滚」）：1440×900 下 P1 有 1543px 内容，只有前 900px 可达 —— 异常值提示 / 本月表现最好 / 全局检索三块在真机里永远看不到，而且滚动条也没了（用户连「滚一下」都提不起来）	外壳只抄了 html,body{height:100%;overflow:hidden}，没把高度链约束住：.app 用 min-height:100vh ⇒ 跟着内容长到 1543px，.main 1543、.view clientHeight ＝ 1474 ＝ scrollHeight（自己不滚），真正的滚动落到 <body> 上，而 body 是 hidden	探针实测：.app 高 1543px ＝ 内容高、view.scrollable=false、body.scrollTop=435 而 window.scrollY=0。修法：.app{height:100vh} ＋ .main{min-height:0;overflow:hidden} ＋ .view{flex:1 1 auto;min-height:0}；新增判据「纵向滚动只由主区承担」＋ 变异 M14
17	自检在窄视口量出的密度是假数（假绿）：500×844 曾报「一屏装得下 7 行」，真值连 1 行都不到；1024×768 的「4 行」同样是假的	「量尺寸前回零点」只复位了 window，而实际被滚的是 <body>（body.scrollTop 435 ／ window.scrollY 恒为 0）⇒ 首行 top 被截短、容量虚高。这是本条最要紧的一处：假绿比红更坏	守卫改为三个容器逐个核（window ／ html ／ body ／ .view），applyScene 一并复位；变异 M9 的注入点从 window.scrollTo 改到 .view.scrollTop（原来那条已经抓不到东西，是假变异）
18	两栏带 .band 在 1024 就落回单列，白丢 4 行密度	原注释写「1024px 劈两半后矩阵列表只剩不到 300px」，2026-10-08 复测实得 336px（列宽 167 ／ 121 ／ auto），三列都不折行	收线由 max-width:1024px 挪到 max-width:900px；1024×900 实测由 4 行 → 8 行（契约 ≥6 ✅）
19	P2「对标内容列表」被新加的功能入口卡压到一屏 5 行（首行顶 503px，契约 ≥6）	功能入口卡按用户口径紧贴在「数据统计」下面，它的高度直接转嫁给下面那张吃密度契约的列表	收两处：卡内衬 16 → 12/16；≤1000px 宽隐掉卡片描述。实测 960px：517px → 497px ⇒ 6 行
20	窄视口顶栏折两行白吃 40px	≤1024 的顶栏只收了间距与标签文字，上下内衬仍按 16px	≤1024 内衬收成 8px；实测顶栏 109px → 93px，901–1000 段两个列表都由 5 行回到 6 行
21	P3-03「入库」被自检判成悬空声明（声明了但页面上没有）	改版时把「入库」从「单条详情」搬进了资产表格的行尾，而表格只渲染当前分区的行 —— 自检的 P3 场景把 assetSel 设成 as3（结构分区）却没改 assetZone（仍是角度分区），于是那行根本不在表里	把动作搬回「单条详情」（门禁说明「补上出处才能入库」本来就长在那里，动作与说明不该拆开）；表格只做展示、不放行级动作。⇒ 自检 83／0 回绿。教训：形态改版顺手挪动作位置，会把「动作 + 它的门禁说明」拆到两个地方 —— 这类搬家不属于「照抄布局」的授权范围
22	两条变异（M2 / M8）悄悄失效：一条「找不到注入点、跳过」，一条注进去了却不报红	判据的形态改了（P2 列表 → 表格、密度量的是表格内衬），而变异的注入点还指在旧的 .list-row / .action-cell 上 ⇒ 假对照（比没有变异更坏：它让人以为这条判据有人看着）	注入点跟着形态重指（M2 指到表格 <td class="cell-act">、M8 指到 .tbl-dense 的 td 内衬）；mutate_test.py 把「找不到注入点」显式报成 ⚠️ 而不是静默跳过。⇒ 14/14 回绿
23	顶栏堆了 7 项杂件（收起侧栏／面包屑／演示·账号／演示·状态／全局检索／随手记／假设 2 项），≤1024 折成两行、顶栏 93px	没有一项是技能规则要求的：2 项来自本项目参照物笔记（ui/布局排版参考-mcn-work-shop.md）、3 项是我自己造的原型件、1 项与②段 P1 的页内板块重复、1 项（假设入口）是我自己挂在顶栏的第二处；唯一被②段硬要求的是随手记（2b §286「任意页面一次点击内」）	删 5 项（收起侧栏／面包屑／两个演示下拉／顶栏全局检索）、改挂 1 项（假设入口 → 两处「假设」徽章，G-08 仍活）、留 1 项（随手记）。内衬 16→8 ⇒ 顶栏 69px → 49px 且任何宽度都不折行。逐样来源定位见 3d-审查报告.md §十
25	「模板里的 HTML 注释带反引号」同一个坑踩了第 4 次 —— 页面在浏览器里才炸（白屏 ／ xxx is not defined ／ Unexpected identifier），而 node --check 整份 html 报不出来	原型把页面结构写在 JS 模板字面量里（反引号包起来）；模板里的 HTML 注释只要出现一个反引号，模板就被提前闭合，后面那段被当 JS 解析	①当场修掉；②做成第 5 个门禁 _tools/check_js.py：抠 <script> 段跑 node --check ＋ 多行扫描 script 区内每个 <!-- … --> 块里的反引号（⚠️ 必须多行扫 —— 反引号常在注释的续行上，单行 grep 抓不到）；③做了变异对照：往一条注释里注一个反引号 ⇒ 报 FAIL 2 项、退出码 1（证明它不恒绿）
26	加图标那一轮的窄屏回归：640×900 的 P1 由 5 行掉到 3 行	功能入口卡补了 22px 图标、内衬由 8/12 提到 12/16，同时网格最小宽 180→200 —— 608px 的主区装不下三张卡，折成两行，卡块高度翻倍。根因是那一轮只量了契约视口 1440，没回量窄屏	补 ≤640px 紧凑档（内衬 8/12、图标 18px、最小宽 160px、隐「功能入口」小标）⇒ 640 回到 6 行、自检转全绿；500×844 由 −2 回到 −1（与原状态一致）。⇒ 记住：几何一改，逐视口表必须整表重跑
24	同一个「选中态」有三套画法（侧栏当前项浅紫底 ／ 分段控件用 .btn btn-sm ＋ 内联 border-color:var(--ink) 五处 ／ 表格当前行用内联 color:var(--accent-text) 四处）；字号也有 内联覆盖 两处（P7 三个数硬顶 --fs-20、P4 统计条的「/7」）	五处分段控件与四处表格当前行都是早期赶进度时用内联样式铺的，既没进令牌也没进组件表；判据当时只查「gap 是否落在登记刻度」，内联样式不在任何判据的视野里 ⇒ 没人拦	①<style> 里补四个组件：.seg/.seg-item（选中项 .is-on）、.field（字段间距）、.cell-name.is-on（表格当前行）；②五处分段控件换成 .seg-item.is-on、四处表格当前行换成 .cell-name.is-on、P7 三个数换成 .home-stats/.stat-item、P4 统计条去掉 /7 的内联字号；③P8 对账核对区表由宽松档 .ds-table 换 .tbl-side；④行级动作统一 .btn-micro（P2-06/07/09/10、P4-05/08）；⑤新增自检第 84 项「组件口径」（八页里 [style*=border-color]／[style*=color]／[style*=font-size] 出现次数都为 0）＋ 变异 M15 证明它不恒绿
27	功能入口卡按参照物改成三段纵向后，1440×900 的 P1 由 6 行掉到 5 行（首行顶 697 → 740px）	卡高 68 → 111px（+43px），而 P1「统计条 ＋ 功能入口卡」这一摞压在两张 5 行表上、本来只剩 17px 余量（697px 距 714px 的六行线）⇒ 余量被一口吃光	逐值量参照物（mcn-work-shop/public/style.css:387-392 ＋ app.js:332-336）确认卡高本来就该是 133px（同宽 113px），差的主因是排布（第一版把「图标＋标题」并成一行 ⇒ 少一段 ＋ 少两次 6px 段间距）；然后从三处还回 39px ⇒ 701px／6 行。两版 15 视口逐格对照见 §五
28	文档里 768×900 的行数是错的（上一版记「677px／7 行 ✅」）	旧取证通道用 chrome.exe --window-size 定视口，而窗口尺寸不保证等于 CSS 视口。768 恰好卡在功能入口卡「3 列／2 列」的阈值上（主区内容宽 632px）只差 7px ⇒ 旧通道多给十几像素，卡就从两行变一行、首行顶差 64px	在**改前的版本（_scratch/base.html）**上用声明式视口重测：768 → 741px／5 行 ❌。⇒ 连带作废上一版「≥640px 全绿」的结论，真实分界是 640 与 ≥820 绿、768 与 700 红、560 与 500 红（§五 全表）
29	_tools/cap.py 自己起 headless Chrome，且视口靠 --window-size 猜	违反本机明令（browser-harness 是唯一允许的浏览器工具），并且带来第 28 条那种「差十几像素就跨过断点」的不确定性；还有 500px 的宽度硬下限	改走 CDP Emulation.setDeviceMetricsOverride：只连 9223 上已有实例、不起新的，视口要多少是多少。已实测 390×844（PNG 尺寸当场比对通过）⇒ 500px 下限解除，契约里「390 一律按 500 记」那条例外作废
30	本轮一度新建了 _tools/measure.py（量元素几何真值），但它自己起 Chrome	与第 29 条同一个毛病；本机的正解是让 harness 常驻、临时脚本只连不起	写完即删（_tools/ 现在只剩 cap／check_js／check_skeleton／mutate_test 四个）。量几何真值这件事本身仍然留下了证据 —— 用的是 harness 直连，脚本放在 _scratch/（中间件，不进交付）
32	移动档的导航标签条里压着一根 16px 高的横向滚动条	标签条自身 scrollWidth 724 > 可见宽（560px），overflow-x:auto 自动画出轨道；条子本体只有 52px 高 ⇒ 三成高度是灰杠	实测（560×900）：.sidebar offsetHeight 68 / clientHeight 52 ⇒ 滚动条 16px；藏轨后首行顶 714.66 → 700px（P1 由 5 行到 6 行）。修法 scrollbar-width:none ＋ ::-webkit-scrollbar{height:0} —— ⛔ 不是删滚动能力，是不画那根轨
33	全局技能包 check_naming.py 有 3 条既有 FAIL（不是本轮引入）	①「停线规则」这条 AUTHORITY 的 authority 写成了 None ⇒ 检查器把它当成"全包禁写、连权威处也不许写"，与本条自己的 why（「口径只在本包 SKILL.md 的「执行规则」」）自相矛盾；而 SKILL.md 里根本没有这条规则 ⇒ 规则的内容一处都没落；②③ stage-proto-doc/SKILL.md:22 与 usage-scenario.md:103 仍写①段已废的 strategy/ 路径	复跑命令：check_naming.py --root . --ws <工作区>（改前 通过 2057 ／ 失败 3 ／ 提示 29）。已修：authority 改 SKILL.md 并把规则补进「执行规则」；两处路径改 research/1d-产品策略.md ／ research/1e-使用场景.md ⇒ 通过 2060 ／ 失败 0 ／ 提示 27
31	导航的样式一直没量到 —— 第三轮只照组件清单猜了个「形态」	当时从 references/library.json 只读到计数（nav-item 81 ／ nav-icon 81 ／ nav-tip 81 …）就下了结论「一项一图标一提示、⛔ 项内不放常驻文字」；而 tokens.css 里没有一条导航几何、design-system.html 里 app-sidebar 0 处 ⇒ 包里根本没有那个事实，猜出来的形态与源站实测正好相反	回源站 https://www.tiaoyue.com/ 实测（亮色形态强制 data-theme=light）：栏是 64px 药丸（圆角 100px／内衬 3px／淡底＋淡描边／⛔ 无右边线），项是 56×78 药丸、图标 24 在上、名字 12px/500 在下、两者都常驻；名字一律 2 字（内容宽 56−16×2＝24px）。逐条对照表在 3d §十三。⚠️ 这次改动不动布局（栏宽仍是 64px 定值、只让药丸变高）⇒ 15 个视口首行顶一格没动，⛔ 不需要还账

七、已记录的偏离（⛔ 不许静默）

#	原要求	实际做法	原因	影响	处置
D1	3b 实测走 browser-harness	✅ 2026-10-08 第七轮已合规：自检 84 项 ＋ 变异对照 15/15 ＋ 视口帧 ＋ 逐条 DOM 取值，全部经 9223 上那个常驻实例（_tools/cap.py 走 CDP，只连不起）	此前用的是 chrome.exe --headless 另起实例 —— 既违本机明令，又带来视口歧义（§六 第 28／29 条）	证据链可复跑；⛔ 仍没有「真人真点」这一层，交互结论全部来自脚本驱动	已修（第七轮）。人工走查仍待用户裁定
D2	D5 终检要 1440x900 与 390x844 两个视口帧（runbook §5.3、§七）	✅ 2026-10-08 第七轮起两个视口都能出（390×844 已实测，PNG 尺寸当场比对通过）	旧通道（--window-size）受 Chrome 窗口宽下限 516 ⇒ 视口最小 500	无	已修（第七轮）。⚠️ 390 的密度还没纳入逐视口表，⛔ 不许把「能测」当成「达标」
D3	对外只留视口帧；_full/ 长图仅自检（runbook §七）	未产出长图	--full 在本机通道上做不到（只能截视口），已把该参数删掉	无	已修
D4	3c 要「外部 GPT 会诊」	见 3c-GPT会诊.md：本会话无对外模型通道，改用隔离上下文的独立评审执行者	没有外部通道可用	与「异厂商外部审查」不是同一条通道	持续偏离，已明示

八、这一步的门槛结论

• 3a 已过 Gate-1（见 DESIGN.md §四）。
• 3b 实测：契约视口 1440×900 全绿（PASS 84／FAIL 0）。
• 密度分界（2026-10-08 第八轮实测，15 个视口）：绿 ＝ 1440 ／ 1280 ／ 1024 ／ 1000 ／ 960 ／ 920 ／ 901 ／ 900 ／ 840 ／ 820 ／ 768 ／ 700 ／ 640 ／ 560；红 ＝ 500×844（唯一一个，P1 账号矩阵 2 行）。⇒ 比上一轮多转绿三个（A 方案 ＋ 滚动条修复）。
• 🔴 口径更正：上一版写的「宽 ≥640px 全绿／边界 768px」是错的（768 的真值是 5 行 ❌，见 §五 与 §六 第 28 条）。现在能说的是「≥820px 全绿；768 与 700 是窄中屏的两个洞；≤560 与 500 是窄屏两个洞」。
• 🔴 本轮的正当性靠对照支撑：改前／改后各跑 15 个视口，PASS／FAIL 逐格完全一致（§五 表）。功能入口卡长高 43px 这件事是从别处把高度还回去做到的，⛔ 不是拿密度换的；同时修掉的只有本轮自己造成的回归，768／700／560／500 那四处红改前就存在。
• ⚠️ 一处已解除的限制：窄视口此前只能测到 500×844（Chrome 窗口宽下限），现在走 CDP 声明式视口，390×844 已可测（§六 第 29 条）。⚠️ 但 390 的密度还没纳入逐视口表，⛔ 不许把「能测」当成「达标」。
• 顺带记四件事：①外壳「整页不滚」曾等于「整页不能滚」（§六 第 16 条），已修并由判据 ＋ M14 看住；②改版首跑时自检在窄视口量出的是假数（§六 第 17 条），已修并由 M9 看住；③「模板里的 HTML 注释带反引号」这个坑踩了 4 次，已做成第 5 个门禁 check_js.py 并由变异证明不是恒绿（§六 第 25 条）；④**「改完只量主视口」这个毛病犯了两次**（第六轮 640、本轮 1440），两次都是逐视口表兜住的 —— 已写进 DESIGN.md §五 第 7 条当纪律。
• ✅ 导航样式已按源站实测对齐（2026-10-08 第七轮追加）：栏 → 64px 药丸浮栏、项 → 56×78 药丸（图标 24 ＋ 2 字短名常驻）、当前项 → 中性填充 ＋ 满墨、提示 → 该页说明。五道闸门复跑全过，且对密度中性（15 个视口首行顶一格未动）。
• 可以进 3c。

---

九、说人话自评（判据源 humanizer-zh，五维各 10 分）

维度	分	说明
直接性	9	开头就是复跑命令，没有「本次工作取得进展」这类开场
节奏	8	表格 ＋ 短断言为主，句式偏单一，⚠️ 弱项
信任度	10	把改坏的、没测到的、换了通道的都写出来了，没有藏
真实性	9	每条缺陷都带现象、根因与证据（脚本名 / 变异编号 / 实测数）
精炼度	9	15 条缺陷各一行，不重复叙述；自检全文照录是留证需要，不是凑字
总分	45 / 50	门槛 ≥45，压线过；扣分点写在第 2 行