# MCN 短视频整合营销工作台 · DESIGN.md

> 项目 slug：`mcn-shortvideo-agent`　｜　③段（界面交互）第 3a 子步产出
> 落点：`执行会话/目标-根据1a需求文档生成MCN短视频整合营销-d85687/ui/DESIGN.md`（本目标目录内；⛔ 未写域外 `docs/pm/`）
> 判据源：`product-planning/references/stage-delivery/SKILL.md`（含 §供给 / Gate-1）＋ 同目录 `references/execution-runbook.md` §2 ＋ `references/layouts-tooling.md` §5.5
> 本份是原型的绑定规范：原型只许引本份登记的 token。

---

## 〇、开工声明（声明制，四字段）

| 字段 | 内容 |
|---|---|
| 当前段与子步 | ③段 / 3a 视觉规范（D0 锚需求 → D1 定调 → Gate-1） |
| 主干与挡位 | 供给＝`oil-ui-pro`（**基础层**：视觉与体验的底线判据）＋ 叠加层（本段自带样式库 `design-system-tiaoyue` 定调与令牌 ＋ 本段自有判据；只许更严、更具体，⛔ 不许放宽基础层）/ 挡位 **标准** |
| 依据文件 | `stage-delivery/SKILL.md` §供给 ＋ §3a；`references/execution-runbook.md` §2.0–§2.4；`references/layouts-tooling.md` §0/§1/§5/§5.5 |
| 产出落点 | `ui/DESIGN.md`（本份）、`ui/mcn-workbench.html`（3b） |

### 供给核对（runbook §2.0 · 步 −1，每轮必做）

| 步 | 动作 | 结果 |
|---|---|---|
| −1 | 确认 §供给 三处在位：定调与令牌（自带样式库）、版式骨架（`references/layouts-tooling.md`）、工艺数值判据（`references/execution-runbook.md` §3.4 ＋ `layouts-tooling.md` §5.5） | ✅ 三处都在位。自带样式库现存 **1 套**：`assets/design-systems/design-system-tiaoyue/` |
| −1b | 套名与本项目记录比对 | ✅ 本目标无前次记录（③段首次开工，本目录此前只有 `research/` 与 `prd/`）⇒ 视作首次选定，不触发变更清单 |
| −1c | 可选档是否动用 | ⛔ **未动用** `assets/open-design/`（随段携带的可选件）。因此它独有的那几项（反 AI 味 / 无障碍 / 表单校验 / 动效纪律）**本次无供给来源** —— 见 §五 已明示，⛔ 没有凭感觉编一套顶上 |

### 页型判定（硬前置，SKILL.md §3b）

**本产品全部 8 页都是工具型页面，不是营销页。** 依据：用户是天天来干活的 MCN 团队，每一页都有人在里面完成一件事（决定先处理哪件 / 挑一条选题 / 存一条拆解 / 推一个环节 / 确认一次发布 / 改一份画像 / 写一条归因 / 核销一条记录）；没有一页是为了让人「看一眼就下决心」。此判定与②段 `2b-界面布局.md` §一 一致。

⇒ 本份 D0 里**零 `.eyebrow`、零 `.lead`、零 `.hero`**（token 与类名都不设这三个）。

---

## 一、设计契约（十二个字段）

### 1.1 项目级字段

**① 主用户**：MCN 机构的内容负责人（矩阵级决策）、编导与文案（选题与创作）、剪辑与投放（版本与发布）。三者同处一个矩阵，职责不同、看的页不同。依据 ①段 `1c-用户画像.md`（零访谈画像，骨架来自 1a §四 三行角色描述 —— 该局限已如实登记，见 §四 缺口）。

**② 主操作**：**逐页唯一**（全页级）。六页的主操作由②段给定，逐页列在 1.2；本段未改一个。

**③ 必要内容（核对面）**：逐页核对②段分档表，见 1.2。核对面只做**落位核对**（常驻的零点击可见、可点入的一次点击可达），⛔ 本段不以它为由增删②段已定的信息档位。

**④ 重复项的信息量**：本产品的四个主列表（账号矩阵 / 对标内容 / 资产条目 / 发布记录）都是**满宽表格**（表头一排 ＋ 每行一个短值），每行除「主标识 ＋ 动作」外都带次级信息，逐页列在 1.2。

**⑤ 结构骨架（翻译面）**：

- **骨架档：主区 ＋ 侧区**（选它的理由：一级导航有八个并列目的地、宽屏 ≥1024；tiaoyue 的实测外壳本身就是「左侧栏 `app-sidebar` ＋ 顶栏 `layout-header`」的应用型外壳，两者同构）。
- **导航层级：只有一层 —— 八个功能项**（2026-10-08 用户两次定案：先「左侧功能导航 只有大板块的导航 只有一层」，再「看看 gpt 的板块或功能命名，再看看你的」）。侧栏一列八项、一项一页，⛔ 没有第二层：总览 ／ 找选题 ／ 资产库 ／ 创作 ／ 发布 ／ 账号画像 ／ 复盘 ／ 记录与对账（两三个字的短名；页头与面包屑仍写②段的页面全名，两个名字各司其职）。
- **侧栏形态：照 tiaoyue 的 `app-sidebar` 做 64px 药丸浮栏**（2026-10-08 用户定案「左侧导航参考 tiaoyue 的导航」；第七轮回源站 `https://www.tiaoyue.com/` 逐值量过，实测表在 `3d` §十三）。实测真值：栏 **64px 宽 ＋ 内衬 3px ＋ 圆角 100px**（药丸）＋ 淡色底 ＋ 1px 淡描边，⛔ **没有右边线**（分界靠药丸自己的底与描边）；项是 **56×78 的药丸**（圆角 54px、内衬 16px、段间距 6px），**图标 24px 在上、名字 12px/500 在下，两者都常驻**；当前项＝中性填充 ＋ 满墨字。⚠️ 这跟上一版「纯图标栏、名字只走悬停提示」的口径**是反的** —— 那是照组件清单猜的（清单里没有文字标签族），回源站一看名字是一贯显示的。名字**一律 2 个字**：项宽 56 − 内衬 16×2 ＝ **24px 内容宽**，只放得下 2 个 12px 汉字，这是参照物定的长度上限。悬停提示是 viewport 级浮层（`nav-tips-layer`），内容＝**这一页是干什么的一句话说明**（⛔ 不重播名字，名字已经常驻）。**≤640 的窄屏** ⇒ 药丸整段让位给**一条带名字的横滚标签条**（见 §1.1 ⑨）。
- **主页面的收口形态（八页统一，2026-10-08 用户定案「每个板块的首页 样式参考 MCN工作台首页」）**：每一页都＝【页头 → **该页统计条**（`.home-stats`＋`.stat-item`，3–4 个数）→ **功能入口卡一行**（`.sect-nav`，指向②段 §三 从本页出发的流转目标；**⛔ 不带「功能入口」小标** —— 参照物也没有，且小标占的 24.6px 要还给密度契约，见 §五 第 7 条）→ **满宽表格组成的主数据块** → **一处左右两栏** `.grid-main-side` → 尾块（P1 还多一块「全局检索与随手记」）】。⛔ 统计条与功能入口卡都不是 `.block`（无 `.block-head`），**不进②段骨架的板块计数**；八页主数据块已逐页由行式列表改成满宽表格（编辑型板块——环节工作区、画像六维、版本逐版编辑、对账核对区——保持原形态，因为它们的任务不是「扫一行行」）。
- **板块落位**：把②段每页的板块按它给的「从上到下」顺序放进主区，每块一个文字标题。⛔ 未新增 / 移动 / 删除 / 合并任何板块（逐页对照见 §三）。
- **密度目标：密集（8–32）**。理由：8 页全是一屏要放多行记录的工具型页面，②段 P1 的信息分档要求矩阵列表与今日待办**同时**常驻，宽松档放不下。**同一页面只取这一档**。
- 块间距 ≥ 块内间距的 2 倍：块间 32px、块内 8/12/16px ⇒ 比值 2.0–4.0 ✅（数值登记在 §二）。

**⑥ 交互清单**：见 §二 表 2.4（逐元素四列）。**它是唯一的交互真相源** —— 3b 实测、3c 会诊、3d 终检都引这一张，⛔ 不另建一份。

**⑦ 状态覆盖六项**：见 1.3，逐页逐项有结论。

**⑧ 组件来源**：优先沿用选定套的既有组件族，其次才是自创。⛔ 未参考 `teamOnly: true` 的族（`onboarding-divider` / `onboarding-feature` / `team-scope-content` / `team-onboarding-card`）。清单见 §二 表 2.5。

**⑨ 响应式行为**：

| 断点 | 布局怎么变 |
|---|---|
| `>1024` | 侧栏 **64px 药丸浮栏**常驻（照 tiaoyue `app-sidebar` 的 `w-16`，⛔ 宽度不随断点变）＋ 主区 `minmax(0,1fr)`；列表列宽按 1:1 分配 |
| `1001–1024` | 侧栏仍 64px；两栏分栏与满宽表格**都保持不变**；另：`.grid-cards` 落两列、顶栏间距收到 `8px`。**顶栏不随断点折行**（只剩「产品名 ＋ 随手记」） |
| `901–1000` | 同上，另：功能入口卡**只留标题**（隐描述）、**卡最小宽 200 → 160px**（这一条 2026-10-08 第八轮加的；不加的话 768 会让三张卡折成两行） |
| `821–900` | 上述两项继续；另：两栏分栏 `.grid-main-side` → 单列（右栏被挤到 300px 以下就会折行） |
| `641–820` | 上述三项继续；另：**统计条最小宽 132 → 96px**（4 格不折行 —— 700px 下 132px 会让 4 格折成两行、统计条高度翻倍）。这一条也是第八轮加的 |
| `≤640` | 侧栏**变成页头下方一条可横向滚动的标签条**（⛔ 不隐藏）。这一档把药丸浮栏那一整套（圆角 100px／描边／淡底／垂直居中／项 56×78）**整段还原成通栏横条**：项横排、高 `36px`、内衬 `0/12`、圆角 `999px`、图标 `16px` ＋ 短名，当前项滚进视野；主区单列 |

**滚动容器（2026-10-08 修，见 §五 第 10 条）**：整页不滚、**只有主区 `.view` 滚**。高度链必须写成 `.app{height:100vh}` ＋ `.main{min-height:0;overflow:hidden}` ＋ `.view{flex:1 1 auto;min-height:0;overflow:auto}` —— 只写 `min-height` 会让 `.app` 跟着内容长高、滚动落到 `<body>`，而 body 是 `overflow:hidden`，折叠线以下的内容就永远拿不到（原型真踩过）。

⚠️ 实测覆盖：**1440 ／ 1280 ／ 1024 ／ 1000 ／ 960 ／ 920 ／ 901 ／ 900 ／ 840 ／ 820 ／ 768 ／ 641 ／ 640 ×900，以及 500×844** 逐个跑过自检，横向溢出全为 0；纵向由判据「滚动只由主区承担」逐个核过。窄视口实测到 500×844 为止（原因见 §五 第 6 条）。**密度契约（一屏 ≥6 行）的收线随侧栏收窄一起下移：≥768px 全绿**（侧栏从 240px 收到 64px，主区宽了 176px，表格不再折行）；**≤640px 时 P1 掉到 5 行／−1 行（不达标）**。逐视口实测值与成因见 §五 第 7 条。

**⑩ 明确拒绝的模式**（≥3 条，每条可判定）：

1、⛔ 不出现「眉标 ／ 大标题 ／ 灰色副标题」三段式标题区（判据：DOM 里 `.eyebrow` / `.lead` / `.hero` 三个类名出现次数为 0）。
2、⛔ 不用围合边框假装分组（判据：非控件元素里 `border` ＋ `border-radius` 同时出现的次数，在同一「分组」用途上 ≥3 次即判不过；结构性容器一律靠底色差 ＋ 多层阴影分层）。
3、⛔ 不给列表行套框、不给状态上整行底色（判据：行间只用 `border-top`；状态只出现在 `tag` 内）。
4、⛔ 不做**逐区块**入场编排（判据：`@keyframes` 至多 1 处 —— 只许一次协调出场；过渡只用 `transition`，⛔ 不用 `linear`/`ease`）。
5、⛔ 不可点的东西不长成可点样子（判据：页面里所有 `button` / `[role=button]` / `.btn*` 集合，与 §二 表 2.4 的元素列做双向差集，差集为空）。
6、⛔ **不用内联样式表达「选中态」或覆盖「字号」**（判据：八页里 `[style*=border-color]`、`[style*=color]`、`[style*=font-size]` 的出现次数**都为 0**）。**选中态全站只有一套画法**：`.is-on` / `.is-active`（整块浅紫底 ＋ `--accent-text` ＋ 字重 600，⛔ 不用单侧色条、⛔ 不用「描边变黑」）；**字号只许走 `--fs-*` 档**（七档定值，见 §2.3）。⚠️ 只查这三样、不查全部内联样式 —— `margin-*` / `flex` / `justify-content` 这类一次性布局微调允许内联，硬按「内联为 0」判会把正常布局一起判红。

**⑪ 验收标准（可观察可判定）**：

- 八页各自可达（`#/p/p1`…`#/p/p8` 直接打开都渲染出该页内容，不是空壳）。
- 表 2.4 每一行的「触发 → 反馈」都真发生过，无死按钮。
- 六态在每一页都能被看到（正常 / 加载 / 空 / 错误 / 禁用 / 无权限）。
- 宽视口 1440×900 与窄视口各留一张截图，横向溢出为 0。⚠️ 窄视口**实测到 500×844 为止**：本机只有无头 Chrome + 命令行开关这一条通道，窗口宽下限被卡在 516px，拿不到 390 —— 见 §五 第 6 条，⛔ 不写成「已测 390×844」。
- 页面上每个可点元素都能在表 2.4 里查到；表里没有的可点元素为 0。

**⑫ 明确拒绝的「编造」**（本项目追加一条，源自①②段的纪律）：界面上不出现「示例」「示意图」「未接入」「待核实」这类制作说明；也不把机器结论说成人已认可（如把「疑似原因」写成「已确认原因」）。

### 1.2 逐页字段（页面职责 / 主操作 / 必要内容落位 / 重复项信息量）

| 页 | 页面职责（让谁 / 多久 / 完成什么） | 主操作（唯一） | 必要内容的落位核对 | 重复项的信息量（每行的次级信息） |
|---|---|---|---|---|
| P1 矩阵总览 | 让内容负责人在 1 分钟内决定**今天先处理哪一件事** | 挑一件待办并进到那一件事 | 账号矩阵列表与今日待办＝零点击可见；异常值、本月最好、检索与随手记＝一次点击可达 | 账号行＝账号名（主标识）＋ 今日该发/已发/效果（3 条次级）＋ 异常徽章 |
| P2 选题雷达 | 让编导在 3 分钟内**找到一条能做的选题** | 把一条选题推进下一步 | 监控概览四数、对标内容列表、选题库＝零点击可见；评论区洞察、灵感速记＝一次点击可达 | 对标行＝标题（主标识）＋ 账号 ＋ 倍数 ＋ 时间；选题行＝选题（主标识）＋ 来源 ＋ 状态 |
| P3 资产库 | 让编导在 2 分钟内**存一条拆解结果、或引用一条已存的** | 入库一条 / 引用一条 | 分区切换、条目列表＝零点击可见；单条详情、引用入口＝一次点击可达 | 条目行＝条目摘要（主标识）＋ 出处 ＋ 草稿/已入库 ＋ 采集时间 |
| P4 创作台 | 让编导在一条内容上**把当前环节推到下一环节** | 推进到下一环节 | 环节进度、当前环节工作区、当前内容标识＝零点击可见；资产引用区、版本列表＝一次点击可达 | 版本行＝vN（主标识）＋ 语义名 ＋ 时间 ＋ 当前标记 |
| P5 发布中心 | 让投放**确认发出这一批版本** | 确认发布 | 检查结果、各版本预览与逐版编辑、确认发布＝零点击可见；目标选择、发布记录入口＝一次点击可达 | 版本行＝账号/平台（主标识）＋ 字数 ＋ 检查结论；记录行同 P8 |
| P6 账号画像 | 让内容负责人**改好并保存一个账号的画像** | 保存这一份画像 | 画像六维、账号列表＝零点击可见；记忆条目、关联内容＝一次点击可达 | 账号行＝账号名（主标识）＋ 平台 ＋ 内容数；记忆行＝日期（主标识）＋ 来源 ＋ 一句话 |
| P7 复盘台 | 让内容负责人**确认归因并写回这个账号** | 确认归因并回写 | 表现数据、归因结论区、待复盘列表、回写目标提示＝零点击可见；历史复盘＝一次点击可达 | 待复盘行＝内容（主标识）＋ 发布账号 ＋ 发布日 ＋ 数据到没到 |
| P8 记录与对账 | 让投放**核销一条发布记录** | 核销一条记录 | 发布记录列表、对账核对区＝零点击可见；单条溯源、商单与收支＝一次点击可达 | 记录行＝内容（主标识）＋ 确认人 ＋ 时间 ＋ 版本 ＋ 状态 |

### 1.3 状态覆盖六项（逐页给结论）

判据源：`SKILL.md` 铁律 2 给出的六态清单（loading / empty / error / success / disabled / 无权限）。⚠️ 逐项**数值判据**出自供给可选档的 `craft/state-coverage.md`，本轮未动用可选档 ⇒ **该项本次无供给来源**，故此处只给「有没有、长什么样」的结论，不编阈值。

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

> 口径：`disabled` 与 `无权限` 是两件事 —— 前者是「当前条件不满足」（自己能解开），后者是「角色不允许」（自己解不开）。界面文案必须分开写，⛔ 不拿「不可用」一句话糊过去。

---

## 二、令牌表

### 2.1 三层结构（`primitive → semantic → component`）

组件层只引语义层，语义层只引 primitive；⛔ 无孤立 token。

| 层 | 前缀 | 例子 | 规则 |
|---|---|---|---|
| primitive | `--t-*`／`--raw-*` | `--t-accent`、`--raw-fs-12` | 只有原始值，⛔ 别的层不许直接引它以外的东西；本层不许被组件层直接引用 |
| semantic | `--`（无前缀语义名） | `--surface`、`--ink`、`--fs-14` | 只引 primitive |
| component | `--c-*` | `--c-card-radius`、`--c-btn-h` | 只引 semantic |

### 2.2 色值（来源＝选定套 `design-system-tiaoyue` 的 `assets/tokens.css` 亮色基线 · 9 页 clipper 实测）

| 语义 token | 值 | 用途 |
|---|---|---|
| `--paper` | `#faf9f5` | 页面底（暖白纸感） |
| `--surface` | `#ffffff` | 面板 / 卡片底 |
| `--surface-soft` | `#f7f6f1` | 次级面（表头、只读块、侧栏选中底） |
| `--ink` | `#1a1a18` | 主文字 |
| `--ink-mute` | `#57564f` | 次级文字 |
| `--ink-faint` | `#8a887f` | 三级文字 / 占位（⛔ 只用于非正文：占位、图标、禁用态） |
| `--line` | `#e7e5dc` | 分隔线（行间 `border-top`） |
| `--line-soft` | `#efeee7` | 更弱的分隔（块内） |
| `--accent` | `#9E4CFF` | 主强调色（品牌紫） |
| `--accent-text` | `#963dff` | accent 当**文字**时用这一档（`#9E4CFF` 直接当文字不达标） |
| `--on-accent` | `#FFFFFF` | 主色上的文字 |
| `--ok` | `#3d7a4f` | 成功态 |
| `--err` | `#b4453a` | 错误态 |
| `--warn` | `#8a5a00` | 提醒 / 异常值 / 软劝 ⚠️ **本项目追加**：选定套亮色基线**没有 warn 档**，而②段 P5 要求「硬的拦住、软的只提醒」必须有两种可见区分 ⇒ 新增一档并在次行登记来源与对比度实测 |

**强调色允许位置（反 slop 要求写明）**：只允许出现在 ① 主按钮的填充底；② 侧栏当前项的**整块浅底**（`color-mix(in srgb, var(--accent) 10%, var(--paper))`，⛔ 不用单侧色条/左侧指示条）；③ 链接文字（用 `--accent-text`）；④ 焦点环。⛔ 不允许出现在：页面大背景、卡片底、图标填充（除主按钮内图标）、任何渐变。全屏面积 ≤5%。

**禁止**：⛔ 无紫→粉渐变；⛔ 无装饰性发光；⛔ 状态色只用这红/绿/黄三系，不做装饰。

### 2.3 几何 · 字体 · 间距 · 字阶 · 高度层级 · 脚手架

| 项 | 值 | 来源 / 说明 |
|---|---|---|
| 字体 | `"PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif` | 选定套实测：源站 `@font-face` 为 0 条，走系统字体栈。⛔ 未手改 |
| 标题字体 | **展示体**：`"Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif`（正文仍走上面的黑体栈）；字重 ≤600 | 2026-10-08 方案 A：选定套源站只给一套系统黑体栈，标题没有自己的性格（基础层 `oil-ui-pro` 把「全页一种无衬线、标题没性格」列为模型默认）。宋体标题 ＋ 黑体正文＝「展示 ＋ 正文」两族，符合「字族 ≤2–3」。⛔ 未用 Inter / Roboto / Arial / `system-ui` 关键字 |
| 等宽数字 | `font-variant-numeric: tabular-nums` | 所有数字列，防刷新抖动 |
| 圆角 | 大容器 `24px`（`--t-card-radius`）／面板 `16px`／行与小件 `14px`／输入框 `9px`／按钮 `26px`（药丸） | 全部取自选定套 `<`—— `--card-radius: 24px`、`--ui-radius: 16px`、`--radius: 14px`、`--inp-radius: 9px`、`--btn-radius: 26px` |
| 间距 · 主刻度 | `4 / 8 / 16 / 24 / 32 / 64` | 供布局。块间用 32（同行组间 24），块内用 8/12/16 |
| 间距 · 微网格 | `2 / 4 / 6 / 8 / 12` | **仅供**按钮内衬、徽章内衬、图标间隙 |
| 块间距 / 块内间距 | 32 / 8–16 ⇒ 比值 2.0–4.0 | 判据要求 ≥2 ✅ |
| 字阶定值表（七档，各一个 px） | `--fs-12` 12 ／ `--fs-14` 14 ／ `--fs-16` 16 ／ `--fs-18` 18 ／ `--fs-20` 20 ／ `--fs-24` 24 ／ `--fs-30` 30 | 相邻档差 2/2/2/2/4/6，全部 ≥2 ✅；每档只一个定值，⛔ 不是区间。正文档 `--fs-14`（多数正文）与 `--fs-16`（表单值），落在 14–16 ✅ |
| 高度层级（每层多层叠层） | L1（行/内嵌）：`0 1px 1px rgba(26,26,24,.03), 0 2px 6px -2px rgba(26,26,24,.06)`<br>L2（面板）：`0 1px 2px rgba(26,26,24,.04), 0 8px 20px -12px rgba(26,26,24,.14), 0 18px 40px -18px rgba(26,26,24,.10)`<br>L3（浮层）：`0 2px 4px rgba(26,26,24,.05), 0 14px 32px -12px rgba(26,26,24,.18), 0 32px 64px -24px rgba(26,26,24,.16)` | 每层 ≥2 层叠层 ✅；同层级同值。⛔ 无单层死黑重阴影 |
| 布局脚手架 | 侧栏 **64px 药丸浮栏**（照 tiaoyue `app-sidebar` 的 `w-16`＝4rem，⛔ 定值、不随断点收窄；列宽 64px 里放一个随内容高、垂直居中的药丸）＋ 主区 `minmax(0,1fr)`；主数据块走**满宽表格**（`.ds-table.tbl-dense`），两栏分栏处用 `1.35fr : .9fr`；窄屏折行交给 ≤640 的横滚标签条 | 骨架档＝主区＋侧区，已落到具体列宽 |
| 容器与对齐锚点 | 主区左右内衬 32px；表格与块标题左锚点同一条线；数字列右对齐且右锚点对齐块右内衬 | 判据要求「对齐锚点」写明 |
| 浮层 | 居中面板，宽 `min(560px, calc(100vw - 32px))`，内衬 24px；**只有一个可见关闭出口**（右上 ×）；遮罩与 `Esc` 也可关，但不计为可见出口 | 满足 Gate-3 的「可见关闭出口唯一」 |

### 2.4 交互清单（唯一交互真相源 · 四列）

**通用规则**（适用于下面所有浮层）：每个浮层**只有一个可见关闭出口**（右上 ×，ID 记为 `X-close`）；遮罩点击（ID 记为 `X-mask`）与 `Esc` 也能关，但**不视为可见出口**；关闭后焦点回到触发它的那个按钮，Tab 只在层内循环。这三条逐浮层过了一遍，结论在 `3d-审查报告.md` 的浮层表里。下表不再逐浮层重复这三条。

| ID | 元素 | 触发 | 反馈 | 何时不可点 |
|---|---|---|---|---|
| G-05 | 侧栏八个功能项（药丸浮栏，八项一页）＋ 各页「功能入口」卡 | 点击 | 切到该页（hash 变、主区重绘）；侧栏当前项转中性填充 ＋ 满墨字（照参照物 `is-active`） | 从不可点 |
| G-06 | 顶栏「随手记」 | 点击 | 打开随手记浮层，焦点进输入框 | 从不可点 |
| G-08 | 两处「假设」徽章（P1 页头 / P8「商单与收支」块头） | 点击 | 打开假设浮层（逐条给复核人 / 复核时机 / 结论落点） | 从不可点 |
| G-10 | P1「全局检索与随手记」块里的「全局检索」 | 点击 | 打开检索浮层，焦点进输入框 | 从不可点 |
| X-close | 各浮层右上 × | 点击 | 关闭浮层；焦点回触发它的按钮 | 从不可点 |
| X-mask | 浮层遮罩（层外空白区） | 点击 | 关闭浮层；焦点回触发它的按钮 | 没有浮层时不渲染 |
| STATE-NORMAL | 状态面板 · 「回到正常内容」 | 点击 | 该页回 `ok` 态，主操作恢复 | 仅在非 `ok` 态出现 |
| STATE-RETRY | 出错态 · 「重试一次」 | 点击 | 提示已重试（示意）；不改数据 | 仅在 `error` 态出现 |
| STATE-GO | 空态 · 「去〈某页〉」 | 点击 | 跳到该页；浮层关 | 仅在 `empty` 态、且该页定义了去处时出现 |
| R-01 | 随手记浮层 · 输入框 | 输入 | 内容非空时「保存」由禁用转可用 | 从不可点（可输入） |
| R-02 | 随手记浮层 · 保存 | 点击 | 写入选题库「待做」；提示 1.5s 后消失；浮层关闭 | 输入为空时 `:disabled` |
| R-03 | 随手记浮层 · 取消 | 点击 | 关闭，不写入；焦点回触发按钮 | 从不可点 |
| S-01 | 检索浮层 · 输入框 | 输入 | 结果列表按关键字过滤；无结果显示空态行 | 从不可点（可输入） |
| S-02 | 检索浮层 · 结果项 | 点击 | 跳到该结果所属的页；浮层关闭 | 无结果时列表为空（不渲染可点项） |
| A-01 | 假设浮层 · 两处假设条目 | 展示 | 只读，逐条给复核人 / 时机 / 落点 | 不适用（只读，非控件） |
| P1-01 | 今日待办项（每条） | 点击 | 跳到该待办所属的页（选题类→P2、在写→P4、待审→P5、待复盘→P7、待核销→P8） | 该条为「已超期未处理」时仍可点，但带提醒标 |
| P1-02 | 账号矩阵行 | 点击 | 跳到 P6 并选中该账号 | 从不可点 |
| P1-03 | 账号矩阵行 · 「看复盘」 | 点击 | 跳到 P7 并选中该账号的待复盘内容 | 该账号没有可复盘内容时禁用 |
| P1-04 | 异常值提示条目 | 点击 | 跳到 P2 并定位到该对标内容 | 无异常值时整块显示空态（不渲染可点项） |
| P1-05 | 本月最好的一条 | 点击 | 跳到 P7 的该条复盘 | 无数据时禁用 |
| P2-01 | 监控概览 · 「低粉爆款」数 | 点击 | 筛选对标内容列表（只看爆款） | 数为 0 时禁用 |
| P2-02 | 监控概览 · 「异常值」数 | 点击 | 筛选对标内容列表（只看异常） | 数为 0 时禁用 |
| P2-03 | 对标内容行 · 「发起拆解」 | 点击 | 跳到 P3 并带着这条素材（预填原文与出处） | 从不可点 |
| P2-04 | 评论区洞察子区 · 展开／收起 | 点击 | 展开子区并开始抓取（显示抓取中） | 从不可点 |
| P2-05 | 评论区洞察 · 「抓取评论」 | 点击 | 进入抓取中 → 出候选选题列表 | 抓取中时禁用 |
| P2-06 | 候选选题 · 「采纳」 | 点击 | 该条进选题库「待做」；候选行标为已采纳 | 该条已采纳时禁用 |
| P2-07 | 候选选题 · 「忽略」 | 点击 | 候选行标为已忽略（可恢复） | 该条已忽略时禁用 |
| P2-08 | 选题库 · 分组 tab（待做／在写／已用） | 点击 | 列表切换成该组 | 从不可点 |
| P2-09 | 选题行 · 「转入创作」 | 点击 | 建当前内容并跳到 P4；选题转「在写」 | 未选账号时禁用（并在行内说明） |
| P2-10 | 选题行 · 「拆解」 | 点击 | 跳到 P3 并把该选题当成素材 | 从不可点 |
| P3-01 | 分区切换 tab（角度／结构／开场白／标题） | 点击 | 条目列表换成该分区 | 从不可点 |
| P3-02 | 条目行 | 点击 | 右区显示单条详情（原文 / 出处 / 草稿标记） | 从不可点 |
| P3-03 | 待入库区 · 「入库」 | 点击 | 无出处的条目被门禁挡住并说明原因；有出处的转「已入库」 | **无出处或原文缺失时禁用**（门禁） |
| P3-04 | 单条详情 · 「引用到创作台」 | 点击 | 跳到 P4 并把该条目加进资产引用区 | 从不可点 |
| P4-01 | 环节进度 · 七个环节（逐项） | 点击 | 切到该环节；只许回退到已完成的环节 | 未到达的后续环节禁用 |
| P4-02 | 当前环节工作区 · 内容输入框 | 输入 | 「开始这一步」由禁用转可用 | 从不可点（可输入） |
| P4-03 | 当前环节工作区 · 「开始这一步」 | 点击 | 生成中 → 产出内容（写进本环节） | 输入为空时禁用 |
| P4-04 | 资产引用区 · 「从资产库拿一条」 | 点击 | 展开选择器；选中后收进引用区并显示来源 | 资产库为空时禁用并说明 |
| PICK-ASSET | 资产选择器 · 单条 | 点击 | 收进引用区并显示来源；浮层关 | 已引用过的不渲染可点项 |
| P4-05 | 资产引用区 · 「移除引用」 | 点击 | 从引用区移除该条 | 引用区为空时不渲染 |
| P4-06 | 「推进到下一环节」 | 点击 | 当前环节 +1；进度条与工作区跟着变 | 文案与封面缺一，进检查态时禁用（封面缺只提示） |
| P4-07 | 版本列表 · 展开／收起 | 点击 | 展开版本列表浮层 | 从不可点 |
| P4-08 | 版本行 · 「切为当前版」 | 点击 | 该版标为当前版；当前内容标识的版本号跟着变 | 该版已是当前版时禁用 |
| P5-01 | 目标选择 · 展开／收起 | 点击 | 展开账号与平台多选 | 从不可点 |
| P5-02 | 目标选择 · 账号项 | 点击 | 勾选／取消；版本列表跟着增删一版 | 从不可点 |
| P5-03 | 目标选择 · 平台项 | 点击 | 勾选／取消；同上 | 从不可点 |
| P5-04 | 版本预览 tab（逐版） | 点击 | 右区换成该版内容 | 从不可点 |
| P5-05 | 版本内容编辑框 | 输入 | 保存按钮由禁用转可用；标为「已改」 | 从不可点（可输入） |
| P5-06 | 版本内容 · 「保存本版」 | 点击 | 该版内容更新；检查结果跟着重算（回到未检） | 无改动时禁用 |
| P5-07 | 检查结果 · 「复检」 | 点击 | 检查中 → 出结论（硬拦 / 软劝 / 通过） | 检查中时禁用 |
| P5-08 | 「确认发布」 | 点击 | 打开二次确认浮层 | **有硬拦项时禁用**；无版本时禁用 |
| P5-09 | 二次确认 · 「确认发出」 | 点击 | 写发布记录（P8 出现一条）；提示成功 | 从不可点 |
| P5-10 | 二次确认 · 「取消」 | 点击 | 关闭浮层，不发；焦点回触发按钮 | 从不可点 |
| P5-11 | 发布记录入口 | 点击 | 跳到 P8 | 从不可点 |
| P6-01 | 账号列表项 | 点击 | 切换右区画像 | 从不可点 |
| P6-02 | 画像六维字段（6 个输入） | 输入 | 「保存画像」由禁用转可用 | 非本人负责账号时禁用（改由角色判定） |
| P6-03 | 「保存画像」 | 点击 | 保存成功提示；未保存时离开给提示 | 无改动时禁用 |
| P6-04 | 记忆条目 · 展开／收起 | 点击 | 展开记忆列表（只追加，不可编辑） | 从不可点 |
| P6-05 | 关联内容行 | 点击 | 跳到 P4 的该条内容 | 无关联内容时整块空态 |
| P7-01 | 待复盘列表项 | 点击 | 右区换成该条的表现数据 | 从不可点 |
| P7-02 | 表现数据 · 「手工录入」 | 点击 | 数据读不到时的降级入口，展开输入 | 数据已读到时不渲染 |
| P7-03 | 归因结论区 · 文本 | 输入 | 「确认归因并回写」由禁用转可用 | 从不可点（可输入） |
| P7-04 | 「确认归因并回写」 | 点击 | 回写到当前账号画像：记忆 +1；显示回写目标 | 归因为空、或未选账号时禁用 |
| P7-05 | 历史复盘 · 展开／收起 | 点击 | 展开历史复盘结论 | 从不可点 |
| P8-01 | 发布记录行 | 点击 | 右区换成该条的对账详情 | 从不可点 |
| P8-02 | 「单条溯源」（可点入） | 点击 | 展开溯源：从记录回到内容与版本 | 从不可点 |
| P8-03 | 对账核对区 · 「核销」 | 点击 | 二次确认 → 该条标「已核销」 | 未选记录时禁用；记录未「已发布」时禁用 |
| CHECKOUT-OK | 核销二次确认 · 「确认核销」 | 点击 | 该条标「已核销」；提示成功；浮层关 | 从不可点 |
| CHECKOUT-CANCEL | 核销二次确认 · 「取消」 | 点击 | 关闭浮层，不核销；焦点回触发按钮 | 从不可点 |
| P8-04 | 「商单与收支」展开／收起 | 点击 | 展开收支条目 🔴 **本块是假设**（见 §三） | 从不可点 |

⚠️ **「可见关闭出口」与「决策型关闭」是两件事，⛔ 不许混成一个数**：每个浮层的中性关闭出口只有一颗 ×（`X-close`），恰好 1 个；**「取消」这类带决策语义的按钮也能关层，但它不是「找出口」用的**，单独登记（`R-03` / `P5-10` / `CHECKOUT-CANCEL`）。这条口径是补出来的 —— 原先自检只数 `.layer-close` 这个类名，于是两颗可见的「取消」完全没进计数，两个二次确认层其实各有两个看得见的关闭控件，判据却报「出口 ＝ 1」。逐浮层的核对结论与触发路径在 `3d-审查报告.md` §六。

**表外可点元素必须为 0** —— 3b 自检里有一条逐集合做双向差集的检查（`#/selftest` 路由自动跑，结果落 `3b-实测记录.md`）。

⚠️ **已撤销的 7 个 ID（不在表内，⛔ 不许再出现在 DOM 里）**：`G-01…G-04`（侧栏分板块后的「一级组」，扁平后没有这一层）、`G-07` 顶栏账号切换器、`G-09` 顶栏演示状态开关、`G-11` 收起侧栏。后三个是 2026-10-08 用户口径「**页面顶上弄这么多乱七八糟的东西**」的直接处置对象 —— 逐样来源排查与处置写在 `3d-审查报告.md` §十。⛔ 撤销一个 ID 时必须**同时把它的 DOM 删掉**，否则判据「页面上每个 data-act 都在清单里」会报红（本轮实测过）。

⚠️ **`A-01` 不是控件**：它是假设浮层里的只读展示行，本表把它列出来是为了让「假设有两处、逐条给复核人 / 时机 / 落点」这件事在清单里看得见。⇒ 它**不进实现清单**（原型里的 `IMPL` 表），自检也不该拿它去点。本表的控件 ID 与 `IMPL` 的键必须**互为子集且相等**，这条由 `_tools/mutate_test.py` 里的 M2/M3 两处变异盯着（漏登记 / 悬空声明各一种）。

### 2.5 组件规格（来源：选定套既有组件族）

| 组件 | 规格（具体值） | 来源 |
|---|---|---|
| 按钮 · 主档 | 高 `40px`，内衬 `12/20`，字号 `16px`，字重 `600`，圆角 `26px`（药丸），底 `--accent`，字 `--on-accent` | 选定套 `--btn-radius/--btn-px/--btn-py`；字号 16 + 字重 600 是**必须的**（见下注） |
| 按钮 · 次档 | 高 `40px`，内衬 `12/20`，字号 `14px`，字重 `500`，圆角 `26px`，底 `--surface`，描边 1px `--line`，字 `--ink` | 同族 |
| 按钮 · 弱档（文字） | 高 `32px`，内衬 `6/12`，字号 `14px`，圆角 `26px`，无底无描边，字 `--accent-text` | 同族 |
| 卡片 · 密卡 | 内衬 `16px`，圆角 `16px`，底 `--surface`，L1 阴影 | 同族 |
| 卡片 · 宽松卡 | 内衬 `24px`，圆角 `24px`，底 `--surface`，L2 阴影 | 同族 `--card-radius/--card-pad` |
| 输入框 | 高 `36px`，内衬 `12/10`，圆角 `9px`，字号 `14px`，底 `--surface`，描边 1px `--line` | 同族 `--inp-*` |
| 徽章 / 状态标 | 高 `22px`，内衬 `2/8`，字号 `12px`，圆角 `999px`，无描边，底为对应状态色 8% 叠加 | 同族 `is-*` 修饰族 |
| 侧栏（`.sidebar`） | **药丸浮栏**：宽 `64px`、内衬 `3px`、圆角 `100px`、底色 `color-mix(in srgb, var(--ink) 5%, transparent)`、描边 `1px color-mix(in srgb, var(--ink) 12%, transparent)`；⛔ 无右边线。高度随内容、`align-self:center` 在 64px 列里垂直居中（⛔ 不拉满整屏） | tiaoyue `.app-sidebar` 实测（`w-16`＝64 ／ `p-[3px]` ／ `rounded-[100px]` ／ `bg rgba(100,112,160,.08)` ／ `border 1px rgba(100,112,160,.14)`），色值换我方 `--ink` 派生；差异：参照物是真浮在页面上（`left:16px`，主区不缩进），我方仍占一列，见 `3d` §十三 |
| 侧栏导航项（`.nav-item` · 只有这一层） | **56 × 78 药丸**：圆角 `54px`、内衬 `16px`、段间距 `6px`、纵向居中；**图标 `24×24` 在上 ＋ 名字 `12px/500/行高 16px` 在下，两者都常驻**（56 − 16×2 ＝ 24px 内容宽 ⇒ 名字只能 2 字）；项间**无 gap**；hover/当前态**只换颜色**（`--tfast`），⛔ 不移位、⛔ 不加阴影。非当前项字色 `--ink-faint`；当前项＝填充 `color-mix(in srgb, var(--ink) 6%, transparent)` ＋ 满墨 `--ink`（⛔ 不用品牌紫底）。78 ＝ 内衬 32 ＋ 图标 24 ＋ 段间距 6 ＋ 名字行高 16，**四个数动一个就破** | tiaoyue `.nav-item` 实测（`h-[78px] w-14` ／ `p-4` ／ `rounded-[54px]` ／ `gap-1.5` ／ `text-xs font-medium leading-4` ／ `is-active` bg `rgba(31,35,41,.06)` ＋ 满墨 ／ `is-inactive` 字 `rgba(31,35,41,.55)`）。⚠️ 它的图标是**填充字形**（`fill` 走 `currentColor`），我方仍是 mcn-work-shop 那套线性描边图标 —— 换字形等于换一套图标，⛔ 本轮不换 |
| 导航提示（`.nav-tips-layer` / `.nav-tip`） | viewport 级浮层（`position:fixed; inset:0; pointer-events:none`）；提示本体深底浅字（`--ink` 底 ＋ `--surface` 字）、字号 `12px`、内衬 `6/8`、圆角 `8px`；跟着当前项的**右缘向右展开**，贴到窗口右缘时反向兜底。**内容＝该页的一句话说明**（`NAV[].desc`） | tiaoyue `nav-tips-layer` / `nav-tips-viewport` / `is-expand-right`；它的提示行内容也是**说明文字**（实测「发现灵感与精选内容」）、⛔ 不是名字。⛔ 不做项内 `absolute`：`.sidebar` 是 `overflow-y:auto`，会被剪掉 |
| 页面统计条（`.home-stats` / `.stat-item`） | `grid auto-fit minmax(132px,1fr)`、间距 `16px`、**下边距 `6px`**（照参照物 `.home-stats{margin:0 0 6px}`，2026-10-08 第二轮由内联 `8px` 收进基类）；每格白底 ＋ 1px `--line` 描边 ＋ 圆角 `16px` ＋ 内衬 `12/16`；值 `20px/600` ＋ `tabular-nums`，标签 `12px` `--ink-mute`。可点的格（P2 低粉爆款 / 异常值）**用同一套外观**，只有 hover 描边转 `--accent` | 照 P1 首页那一套；用户口径「每个板块的首页 样式参考 MCN工作台首页」 |
| 满宽表格（`.ds-table.tbl-dense`） | 容器 `.panel` ＋ `.table-wrap`（`overflow-x:auto`）；表头 `12px/600` `--ink-mute` ＋ 下边框 1px `--line`；行内衬 `4/8`、行间 `border-top` 发丝线、单元格 `vertical-align:middle` ＋ `nowrap`；实测行高 **31px** | 密度契约（一屏 ≥6 行）逼出来的紧凑档；形态照 3c 参照物 P1 的满宽表 |
| 栏内表（`.ds-table.tbl-side`） | 两栏**栏内**的列表：内衬同上，但 ⛔ **不套 `nowrap`** —— 窄栏里 nowrap 会把表推成横向滚动 | 同上，只在窄栏里用 |
| 行级微按钮（`.btn-micro`） | 高 `22px`、内衬 `0/8`、字号 `12px`、圆角 `999px`、无底、字色 `--accent-text`、`:disabled` 时透明度 `.45`。⛔ 表格行里不许用 32px 的 `.btn-sm`：实测会把整行撑到 45px，直接吃掉密度契约 | 同上 |
| 分段控件（`.seg` / `.seg-item`） | 容器 `gap 4px` ＋ 可换行；项高 `32px`（`--c-btn-h-sm`）、内衬 `0/12`、圆角 `999px`、描边 1px `--line`、白底；**选中项 `.is-on` ＝ 整块浅紫底 ＋ `--accent-text` ＋ 字重 600 ＋ 描边转 `--accent`**；`:disabled` 透明度 `.45`。⛔ 不许再用「描边变黑」那套 | 2026-10-08 统一：P2 分组 / P3 分区 / P5 账号多选 / P5 平台多选 / P5 版本 tab **五处**原来一律是 `.btn btn-sm` ＋**内联** `style="border-color:var(--ink);font-weight:600"` |
| 表单字段（`.field`） | 字段块（标签 ＋ 控件）之间的间距由 `.field + .field{ margin-top:16px }` 出；`.field > .seg{ margin-top:8px }` | 同上：P6 画像六维与 P5 目标选择原来靠内联 `margin-bottom` 一格一格铺 |
| 表格当前行（`.cell-name.is-on`） | 当前行的行名转 `--accent-text`。⚠️ 它是「选中态只有一套」在表格里的落法；⛔ 不许写成内联 `style="color:…"` | 2026-10-08 统一：P3/P6/P7/P8 四张表原来各自用内联 `color` 标当前行 |
| 两栏分栏（`.grid-main-side`） | 宽比 **1.35fr : .9fr**（照外部参考版的 `.grid.cols2`）；左＝上下文／列表，右＝产出／动作／详情；主数据块仍满宽。`≤900px` 落单列 | 用户口径「哪里左右布局的功能照着抄」 |
| 图标（唯一出口 `navSvg(page,size)`） | `viewBox 24` / `fill:none` / `stroke:currentColor` / **`stroke-width:2`** / `stroke-linecap:round` / `stroke-linejoin:round`；尺寸只有三个用法：**侧栏 20px、功能入口卡 22px、`≤640px` 的卡 16px**；颜色只有一处：`--accent-text`（品牌紫的文字档） | 规格**照参照物 mcn-work-shop 的 `svgIcon()` 学**（`public/app.js:201-207`：同样 24 / stroke 2 / 圆头圆角，尺寸卡 22、按钮 16）。⚠️ 参照物给图标配了 **8 个色相**（`ICON_COLORS`），⛔ 不学 —— 与基础层「同一层级保持一致重量、避免每张普通卡片用不同强调色」冲突；⚠️ 我方**只有 8 个图标**（八页各一），因为功能入口卡的图标＝**目标页自己的图标**（同一目标在侧栏与卡片上是同一个），⛔ 不另造一套图标库 |
| 功能入口卡（`.data-card`） | **三段纵向**：白底 ＋ 1px `--line` 描边 ＋ 圆角 `16px`（tiaoyue）＋ **阴影 `--sh-L1`** ＋ 内衬 `16/16`、段间距 `6px`；卡内三行 —— **图标 `22px`（独占一行）／ 标题 `18px/600`（行高写死 1.35）／ 描述 `14px` `--ink-mute`（行高写死 1.35）**；网格 `.data-cards` `auto-fit minmax(200px,1fr)`、gap `16px`；hover ＝ 描边转 `--accent`（⛔ 不做参照物的 `translateY(-2px)` 位移）。**实测卡高 111px**（参照物同宽下 113px）。`≤1000px` 隐描述；`≤640px` 紧凑档（内衬 `6/8`、图标 `16px`、标题 `16px`、网格最小宽 `160px`） | 2026-10-08 **第二轮**：用户看完第一版仍说「**功能入口的高度还是没有 参考 MCN 的首页的功能入口 按钮的样式和布局**」⇒ 回参照物 `style.css:387-392` ＋ `app.js:332-336` 逐值量。高差 65px 的**主因是排布**（第一版把「图标＋标题」并成 `.dc-line` 一行 ⇒ 少一段 ＋ 少两次 `6px` 段间距），次因是内衬 `12/16`→`16/16` 与字号 `16/12`→`18/14`；另补一处原来完全没有的**卡阴影**。差值与「刻意不学」的 3 条（圆角 `12px`／`translateY` 位移／「一个功能一个色」）逐条记在 `3d-审查报告.md` §十二 |
| 功能入口那一行（`.sect-nav`） | **没有小标** —— 统计条之后直接排卡；下边距 `8px`（与后面 `.block` 的 `margin-top:32px` **折叠**，实际间距由 `.block` 决定） | 2026-10-08 第二轮删掉原来的 `<p>功能入口</p>`。两条理由缺一不可：①**参照物就没有**（`.home-stats` 直接接 `.data-cards`）；②**密度契约逼的** —— 卡按参照物长高 43px，这 43px 得从别处还回去，而「小标 ＋ 它与卡之间的 6px」合计 **24.6px（实测）**，是这一带最不值钱的高度（卡片自己写着去哪儿） |
| 问答区（`.qa-block` / `.qa-row`） | `.qa-block`：`border-top:1px dashed var(--line)` ＋ `padding-top:8px` ＋ `margin-top:16px`；`.qa-row`：内衬 `6/8`、字号 `14px`、行高 `1.55`；问 `--accent-text` + 500、答 `--ink-mute` 缩进 `1.2em` | 照参照物 `.func-card .qa{border-top:1px dashed}`（`style.css:78`）学的虚线分隔；⚠️ 它的「可复制行 hover 出 📋」**未学**（本项目还没有复制交互） |

> 同屏主档按钮 ≤1（多步流程每步 ≤1）：P1 无主档、P2/P3/P4/P5/P6/P7/P8 各 1 个 ✅
> 实底底色 ≥2 种：主档 `--accent`、次档 `--surface`、状态标（ok/err/warn 三色 8% 叠加）✅
> ⚠️ **主档按钮的 16px + 600 不是随手定的**：选定套记录 `#FFFFFF` 压 `#9e4cff` 只有 **4.26:1**（两形态一致，是品牌紫的固有属性），走**大字线 3:1** 才达标 ⇒ 主档按钮文字必须 ≥16px 且加粗；⛔ 小字（<16px 常规字重）压主色在本规范里没有合规解，故不允许出现。

---

## 三、两处假设的显式标注（⛔ 不当已确认需求用）

②段 `2b-界面布局.md` §四 标了两处骨架受限。本轮**尚无用户结论**，按②段给的默认读法做，并在本份与原型里显式标注：

| # | 受影响处 | 假设内容 | 本轮默认读法（按 2b §四） | 复核人 | 复核时机 | 结论落点 |
|---|---|---|---|---|---|---|
| 假设 1 | **P1 的形态**（横幅：`2b` §二 P1 末段） | 矩阵级视图是否真需要（1a 待复核第 5 条 ＋ A1） | **按「需要矩阵级视图」做**：P1 ＝ 矩阵总览，5 个板块全在。若复核为「不需要」，P1 降为「单账号今日」，只留第 1、4 板块，矩阵列表下移到账号切换 | 主会话转用户 | ②段收口时一次性过；③段已按默认读法做，结论到了改这一处 | `2b` §四 ＋ §二 P1；本轮落 `ui/DESIGN.md` 本节 ＋ 原型 P1 标题行的「假设」徽章 |
| 假设 2 | **P8 的第 4 板块**「商单与收支」 | 商单对账进不进第一版、收支口径是否内容级（1a 待复核第 6 条 ＋ A3） | **按「进第一版但属 P2、可整块缺」做**：第 4 板块**渲染出来但标「可点入 ＋ 假设」**，并在展开后给一句「本块依赖未复核项」。第 1、2、3 板块不受影响 | 主会话转用户 | 同上 | `2b` §四 ＋ §二 P8；本轮落 `ui/DESIGN.md` 本节 ＋ 原型 P8 第 4 板块标题行的「假设」徽章 |

**原型的兑现方式**（不占标题区、不写成注脚）：两处各在自己的**板块标题同行右侧**挂一个「假设」徽章，**徽章本身可点**（`G-08`）—— 点开的那一份浮层逐条给出复核人 / 时机 / 落点。⛔ 2026-10-08 之前这个入口挂在顶栏（「假设 2 项」），已按用户口径「页面顶上弄这么多乱七八糟的东西」**改挂回徽章自己身上**：假设在哪，详情就在哪。⛔ 假设既没有被当已确认需求写死，也没有被编出答案。

---

## 四、Gate-1 方向门自检（硬闸，结果写在本份末尾）

| # | 检查项 | 结论 | 依据 |
|---|---|---|---|
| 1 | 设计契约十二字段 | ✅ 过 | §一 十二字段全填，无空、无「待定」；重复项逐页列了次级信息；交互清单四列齐全且表外可点元素为 0（3b 实测复核） |
| 1b | 页型判定 | ✅ 过 | 全文工具型；D0 零 `.eyebrow` / 零 `.lead` / 零 `.hero`（原型里这三个类名出现 0 次，`#/selftest` 复核） |
| 2 | 结构骨架（翻译面） | ✅ 过 | 骨架档＝主区＋侧区（给了理由）；板块落位照②段顺序、每块有文字标题；②段分档表每条信息都有落位（§1.2 逐页核对） |
| 2b | 骨架未漂 | ✅ 过 | 八页与板块逐条对得上 `2b`，本段未增删移动（见下表） |
| 3 | 状态覆盖 | ✅ 过 | §1.3 六态逐页有结论；`disabled` 与 `无权限` 分开写 |
| 4 | 令牌表 | ✅ 过 | §2.2/§2.3 色值、字体、间距两档（适用面已分开）、圆角、阴影全为具体值 |
| 4b | 字阶定值表 | ✅ 过 | 七档各一个 px（12/14/16/18/20/24/30），相邻差 2/2/2/2/4/6 ≥2 |
| 4c | 高度层级 | ✅ 过 | L1/L2/L3 每层 ≥2 层叠层，同层级同值 |
| 4d | 布局脚手架 | ✅ 过 | 侧栏 240/200px ＋ 主区 `minmax(0,1fr)`；窄屏变化写具体（标签栏化） |
| 5 | 组件规格 | ✅ 过 | 按钮三档＋卡片两档＋输入框＋徽章均为具体值；同屏主档 ≤1；实底 ≥2 种 |
| 6 | 反 slop | ✅ 过 | 无紫→粉渐变；标题用**展示体**（§2.3「标题字体」，2026-10-08 方案 A 补，⛔ 不用 `system-ui` 关键字）；强调色允许位置已写明（§2.2） |
| 7 | 拒绝清单 | ✅ 过 | §1.1 ⑩ 共 **6** 条，每条带可判定判据（≥3 ✅） |
| 8 | token 引用完整性 | ✅ 过 | 三层结构；组件层只引语义层、语义层只引 primitive；无孤立 token |
| 9 | 分档兑现 | ✅ 过 | §1.2 逐页落位；常驻＝零点击可见、可点入＝一次点击可达；档位未被本段改动 |
| 10 | 供给核对 | ✅ 过 | §〇 已核；选定套 `design-system-tiaoyue`，与本目标记录一致（首次选定） |

**骨架未漂逐页对照**（⛔ 本段未新增 / 移动 / 删除 / 合并）：

| 页 | ②段板块（照抄） | 原型落位 | 一致 |
|---|---|---|---|
| P1 | 今日待处理／账号矩阵列表／异常值提示／本月表现最好的一条／全局检索与随手记入口 | 同序 5 块（前两块**满宽顺排**） | ✅ |
| P2 | 对标监控概览／对标内容列表／评论区洞察区／选题库／灵感速记入口 | 同序 5 块 | ✅ |
| P3 | 分区切换／条目列表／单条详情／引用入口 | 同序 4 块 | ✅ |
| P4 | 当前内容标识／环节进度／当前环节工作区／资产引用区／版本列表 | 同序 5 块 | ✅ |
| P5 | 目标选择／各版本预览与逐版编辑／检查结果／确认发布／发布记录入口 | 同序 5 块 | ✅ |
| P6 | 账号列表／画像六维／记忆条目／关联内容 | 同序 4 块 | ✅ |
| P7 | 待复盘列表／这一条的表现数据／归因结论区／回写目标提示／历史复盘 | 同序 5 块 | ✅ |
| P8 | 发布记录列表／单条溯源／对账核对区／商单与收支 | 同序 4 块 | ✅ |

> 板块的**排布位置**：每页的**主数据块**（该页吃密度契约的那张列表）一律做成**满宽表格**、单独成块；余下的块里有「列表／上下文 ＋ 详情／动作」关系的，按 `layouts-tooling.md` §0 判为**侧区型**，在**块内**用左右两栏落实（P3 单条详情｜引用入口、P5 各版本预览｜检查结果、P6 记忆条目｜关联内容、P7 表现数据＋归因＋改判｜回写目标、P8 单条溯源｜对账核对区）；⛔ 这不是增删板块，是同一批板块在骨架档里的摆法（块内怎么摆归③段）。编辑型板块（P4 环节工作区、P6 画像六维、P5 版本逐版编辑、P8 对账核对区）保持原形态 —— 它们的任务是「填 / 改」，不是「扫一行行」。
>
> **P1 的前两块是满宽顺排**（2026-10-08 第三轮定案）：②段把「今日待处理」和「账号矩阵列表」列为第 1、2 块，本段按用户口径「gpt 给的布局……照着抄」把两块都做成**满宽表格、上下顺排**（参照物 P1 就是这两张顺排的满宽表）。⛔ 上一轮这里是「左右并排」——那一版的理由是密度判据（并排放得下 10 行、单列只放得下 5 行）；本轮把行高从 67px 压到 **31px**（每格一个短值 ＋ 22px 的 `.btn-micro`）之后，**顺排也够 6 行**（实测首行顶 708px），于是「照抄参照物」与「守住密度契约」不再冲突。实测过程记在 `3b-实测记录.md` §五。
> 若复核认为并排也算动了骨架，回退办法只有一条：把密度判据在 1440×900 下放宽到 ≥5 行 —— **两件事必须挑一件，不能都不做**（原判据下，单列连 6 行都够不着）。

---

## 五、缺口与证据边界（⛔ 不假装支持）

1. **反 AI 味 / 无障碍 / 表单校验 / 动效纪律的逐项数值判据本次无供给来源** —— 这四项出自 §供给·工艺数值判据 的**可选档**（`assets/open-design/craft/` 13 份），本轮未动用可选档 ⇒ ⛔ 不凭感觉编一套顶上。本段实际应用的是**默认档**判据：`execution-runbook.md` §3.3/§3.4 ＋ `layouts-tooling.md` §5.5（五条反「实习生审美」硬判据）。四条已按默认档能做到的部分执行（如 focus-visible 三态、tabular-nums、防溢出三件套、间距只用登记刻度）。
2. **暗色主题本轮不做** —— 选定套的暗色与亮色是两套独立基线，规则是「要暗色就整套切」（`known-conflicts.md` C-01），且暗色实测只覆盖 1 个页面（`/team/onboarding`），而该页正是选定套 §〇 明令生成时避开的页；哪一套亮色才是主线**尚未裁决**。⇒ 本轮只做亮色基线（9 页 clipper 实测），⛔ 不与暗色混搭。要做暗色需先裁决 C-01，属技能侧动作。
3. **`--warn` 是本项目追加的第 14 个语义色** —— 选定套亮色基线只有 ok/err，无 warn；而②段 P5 要求「硬的拦住、软的只提醒」必须有可见区分。追加值与其对比度实测记在 §六。
4. **`1c-用户画像.md` 是零访谈画像** —— 主用户的画像骨架来自 1a §四 三行角色描述，无问卷、无访谈、无行为数据。界面里凡涉及「角色能看什么」的判据都基于它，**不得对外说成基于用户调研**。
5. **3c GPT 会诊本轮未取得外部审查** —— 见 `3c-GPT会诊.md`。未取得 ≠ 已通过。
6. **窄视口 390×844 现已可测（2026-10-08 第七轮解除）** —— 旧写法 `chrome.exe --headless --window-size` 被 Chrome 的窗口宽下限卡在 516px（只能拿到 500px 视口），所以此前契约里凡写 390 的地方一律按 **500×844 实测** 记。现在 `_tools/cap.py` 改走 CDP 的 `Emulation.setDeviceMetricsOverride`，**视口是声明式的、要多少是多少**：已实测 **390×844**（PNG 尺寸当场比对通过）⇒ 这条限制作废。⚠️ 但 390 的**密度**还没纳入逐视口表，⛔ 不许把「能测」当成「达标」写。
7. **密度判据（一屏 ≥6 行）现在只剩 500×844 一个视口不达标**（2026-10-08 第八轮，用户拍板「A 方案」）。⛔ 判据一个字没改 —— 判据原文（`layouts-tooling.md` §1）是「一屏可见行数 ≥ 6（900px 高时）」，**不带宽度条件**。**2026-10-08 第八轮整表重测**（A 方案 ＋ 移动档滚动条修复之后）：

| 视口 | P1 账号矩阵（A 方案前 → 后） | P2 对标列表 | 页面外壳 |
|---|---|---|---|
| 1440 / 1024 / 900 / 820 ×900 | 701 → 701px，**6–7 行** ✅（一格未动） | 13–14 行 | 顶栏 49px、侧栏 64px |
| 1280 / 1000 / 960 / 920 / 901 / 840 ×900 | 676–701 → 676–701px ✅（一格未动） | 13–14 行 | 顶栏 49px、侧栏 64px |
| **768 ×900** | 779 → **676px**，**3 → 7 行** ✅ | 14 行 | 顶栏 49px、侧栏 64px |
| **700 ×900** | 872 → **676px**，**0 → 7 行** ✅ | 11 行 | 顶栏 49px、侧栏 64px |
| **640 ×900** | 700 → **685px**，**6 行** ✅ | 13 行 | 顶栏 57px、侧栏转横滚标签条 |
| **560 ×900** | 808 → **700px**，**2 → 6 行** ✅ | 10 行 | 顶栏 57px、侧栏转横滚标签条 |
| 500 ×844 | 882 → **773px**，**−2 → 2 行** ❌ | 8 行 | 顶栏 57px、侧栏转横滚标签条 |

> 🔴 **本表 2026-10-08 第八轮整表重测替换（用户拍板「A 方案」）。** 四处转绿：768（3→7 行）、700（0→7 行）、560（2→6 行）、640（首行顶再降 15px）；500×844 由 −2 行回到 2 行，**仍是唯一不达标的一个**。其余 10 个视口**一格未动**。
>
> **A 方案做了两件事**（都在 `≤1000 / ≤820` 两档生效，`auto-fit` **只在真装不下时才缩** ⇒ 宽屏一个像素不动）：
> ① 功能入口卡最小宽 `200 → 160px`（768 / 700 的卡由两行折行回到一行）；② 统计条最小宽 `132 → 96px`（700 的 4 格由两行回到一行）。
> 外加一处**真缺陷**：移动档标签条里 16px 高的横向滚动条（压进 52px 高的条子里 ⇒ 三成高度是灰杠，还白吃 16px 主区）已藏轨 —— 这是 560 由 5 行到 6 行的那 1 行的来源。
>
> ⚠️ **上一版的错数已改正**：上一版把 **768×900 记成 7 行**，在**改前的版本上**实测是 **5 行 ❌**（首行顶 741px）⇒ 那条数字是错的；错因是旧取证通道的视口宽度歧义（768 恰好卡在卡片「3 列／2 列」阈值上，只差 7px），换成 CDP 声明式视口后不再有这个问题。
>
> 这张表本轮是当**对照**用的：同一台机器、同一套判据，跑了「改前（`_scratch/base.html`）」与「改后」两版各 11 个视口，**PASS/FAIL 逐格完全一致** —— 绿：1440 / 1024 / 1000 / 901 / 900 / 820 / 640；红：768 / 700 / 560 / 500。⇒ 卡长高 43px 这件事是**从别处把高度还回去**做到的，⛔ 不是拿密度换的。
>
> 还法（实测 P1 首行顶 740 → **701**，共 −39px）：①删掉「功能入口」小标（−24.6）②统计条下边距 `8 → 6`（−2）③块标题与内容之间的间距 `.block-head` `12 → 8`（P1 上方有三处，−12）。`≤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 是已知缺口。⛔ 本轮没有顺手改它们，免得把「本轮改了什么」和「本来就有什么」搅在一起。
>
> ⚠️ 中途出过一次**窄屏回归**，值得记：加图标那一轮只量了 1440（697px，6 行 ✅）就以为完事，回头跑逐视口表才发现 **640 由 5 行掉到 3 行** —— 原因是卡片变高又加上网格最小宽 180→200，608px 的主区装不下三张卡，折成两行、卡块高度翻倍。**只量契约视口、不回量窄屏，是会漏的。**（第七轮又犯了一次同类错：改完只量 1440，是逐视口表再次把它抓出来。）

成因仍是**页面外壳吃掉首屏**，不是行变肥：行高 31px、各行差 0px、块内分隔 1px，这三条在任何视口都 PASS。三条出路：①把支持宽度下限写成 ≥640px（依据：`1a §七` 已明确第一版不做移动端 App）；②压掉每行的次级信息（那是②段定的档位，③段不许改 ⇒ 得回②段改）；③动 500px 档的页面外壳。**这三条都要用户拍板，本段一条都没选。** 详见 `3d-审查报告.md` §三 B-15。

> **2026-10-08 第三轮实测：照搬外部参考版那版排版，到底要付什么代价。** 用户看过的外部参考版（`3c-GPT参考版.md`）P1 是**满宽表格顺排**：指标条 → 今日待处理表 → 账号矩阵表。上一轮试过「只改顺排、别的都不动」：**账号矩阵首行顶 724px、行距 67px ⇒ 一屏只装得下 2 行**。本轮把这一版**真的照搬了**（用户口径「gpt 给的布局……照着抄」），同时把每格压成一个短值、行级动作降到 22px 的 `.btn-micro`、行内衬收到 `4/8` ⇒ **行高 31px，首行顶 708px，一屏 6 行（达标）**。⇒ 结论是：**满宽表格顺排与「一屏 ≥6 行」可以兼得，但代价是行高必须压到 31px 上下**（参照物那版行高约 50px，照 50px 来只能装 3 行）。行里的次级信息按「一格一个短值」拆列保留（②段的档位一条没砍），截断掉的只是省略号，完整原文挂在 `title` 上。
8. **截图通道与 DOM 通道的视口口径不同（已修，记账）** —— 同一台机器、同一个 `--window-size`，`--dump-dom` 给的是「窗口 − 16×95」，`--screenshot` 给的就是窗口本身。本轮之前所有截图都因此比标称大 16×95（「1440×900」实际 1456×995）。现已按模式分开算，并要求每次截图后从 PNG 的 IHDR 读真实像素跟目标比，不等即报红。详见 `3b-实测记录.md` §五。
9. **3c 那次独立评审不是「外部 GPT 会诊」** —— 本会话没有对外模型通道，改用了隔离上下文的独立评审执行者（不看源码、不继承制作对话）。它符合 `visual-review.md` 对「隔离执行者」的要求，但与 `SKILL.md` §3c 的异厂商外部审查**不是同一条通道**。**未取得外部审查 ≠ 已通过。** 见 `3c-GPT会诊.md` §〇。
10. **外壳「整页不滚」曾等于「整页不能滚」（2026-10-08 已修，记账）** —— 只抄了 `html,body{height:100%;overflow:hidden}` 而没约束高度链，`.app` 跟着内容长高（1440×900 下 P1 实测 1543px）、`.view` 自己不滚，真正的滚动落在 `<body>` 上，而 body 是 hidden ⇒ **折叠线以下的内容永远拿不到，滚动条也没有**（异常值提示 / 本月表现最好 / 全局检索三块在真机里看不到）。修法：`.app{height:100vh}` ＋ `.main{min-height:0;overflow:hidden}` ＋ `.view{flex:1 1 auto;min-height:0;overflow:auto}`；新增判据「纵向滚动只由主区承担」（自检项数 81 → 82），并配变异 **M14** 证明它不是恒绿。同一处还牵出一个更坏的：自检在窄视口量到的密度**是假数**（守卫只复位了 `window`，实际滚的是 `<body>`）⇒ 旧版「≤767px 才不达标」的结论作废，真边界是 ≤900px。详见 `3b-实测记录.md` §六 第 16、17 条与 §五。

---

## 六、数值取证登记（3d 回填处）

下表「实测值」全部由原型自带的 `#/selftest` 算出来（DOM 取值 ＋ 真实像素计算），⛔ 不是目测。取值口径写在「取法」列；复跑命令见 `3b-实测记录.md`。

| 项 | 契约值 | 实测值 | 取法 |
|---|---|---|---|
| 强调色填充面积占比 | ≤5% | **0.52%**（八页最高一页：创作台；1 个填充块） | DOM 取值：逐个元素比 `backgroundColor` ≡ `--accent`，与视口求交后累加 ÷ 视口面积；不含 选中项浅底（`color-mix` 调出的不算填充）/ 描边 / 文字色 |
| `--warn` `#8a5a00` 对 `--surface` 对比度 | ≥4.5:1 | **5.93:1** | 真实像素计算：WCAG 相对亮度 |
| `--accent-text` `#963dff` 对 `--surface` 对比度 | ≥4.5:1 | **4.76:1** | 同上 |
| `--ink-faint` `#8a887f` 对 `--surface` 对比度 | ≥3:1（仅非正文） | **3.55:1** | 同上 |
| 一屏可容纳记录行数（P1 账号矩阵） | ≥6 @900px 高（⛔ 原文不分档） | **6 行** @契约视口 1440×900（首行顶 697px、行距 31px） | DOM 取值：首屏可用高度 ÷ 行距。⚠️ 判据是「装得下几行」，不是「实际渲染几行」—— 示意数据只有 5 条，实际永远是 5 行（数据用尽，非被截断）。⛔ 逐视口的完整实测表只写在 §五 第 7 条一处，这里不重复 |
| 一屏可容纳记录行数（P2 对标列表） | ≥6 @900px 高 | **13 行** @1440×900（首行顶 471px、行距 31px） | 同上。⚠️ 该块本轮已由行式列表改成满宽表格 ⇒ 容量从 6 行跳到 14 行，**任何视口都达标** |
| P1 行高齐（本段追加判据） | 各行差 ≤2px | **31–31px，差 0px**（十三个视口一致） | DOM 取值：逐行 `getBoundingClientRect().height` |
| 视觉层间距 / 块内相邻行分隔 比值 | ≥2 | **32px ／ 1px ＝ 32**（4 个视觉层） | DOM 取值。⚠️ 表格行的分隔线画在 `td` 的 `border-top` 上（不是 `.list-row` 自己的），取值要跳过首行、取各行的最大值；⚠️ 除数为 0 时判据作废，已加 0 守卫 |
| 实际在用字号档数（P1） | 4–6 | **6 档**：12 / 14 / 16 / 18 / 20 / 24 px（相邻差 2/2/2/2/4） | DOM 取值：叶子节点 computedStyle |
| 块间距 / 块内间距 比值 | ≥2 | **32 / 8–16 ⇒ 2.0–4.0** | 令牌登记值 ＋ DOM 复核（`gap` 全部落在登记刻度内，9 个刻度） |
| 横向溢出 | 0 | **0**（十三个视口，八页逐页亦为 0） | DOM 取值：`scrollWidth − clientWidth` |
| 内联样式越权（本段追加判据） | 选中态 0 处 ／ 字号 0 处 | **八页全为 0** | DOM 取值：逐页数 `[style*=border-color]` ＋ `[style*=color]` ＋ `[style*=font-size]` |
| 浮层中性关闭出口 | 恰好 1 | **7 / 7 个浮层均为 1**（另有决策型关闭 0–1 个，单列报数，⛔ 不混进这个数） | DOM 取值：可见的 `[data-act="X-close"]` 计数 |
| 同屏主档按钮 | ≤1 | **逐页 1 个**；P1 无主档（本页只用弱档） | DOM 取值：逐页统计实底按钮 |
| 顶栏高度 | 未写死（只看有没有折行） | **49px**（单行；只放「产品名 ＋ 随手记」两项，**任何宽度都不折行**）。⚠️ 旧值 69px / 93px 都是演示下拉还在的时候 | DOM 取值 |

**同轮实测的其它数值**（一并登记，供 3d 复核）：

- P1 账号矩阵：首行顶 697px、行距 31px；块落位 今日待处理@333+249 ／ 账号矩阵列表@614+249（上下顺排）／ 异常值提示@895+201 ／ 全局检索与随手记@1128+231。
- P2：对标监控概览@143+121 ／ 对标内容列表@389+249 ／ 评论区洞察@670+316 ／ 灵感速记@1018+99；对标列表首行顶 471px、容量 13 行。
- P1 按钮高度集合 32px（本页主档不用实底；表格行内的动作走 22px 的 `.btn-micro`，⛔ 不进「按钮高度层级」这一档）。
- 控制台报错 **0 条**；量尺寸时四个滚动容器（window ／ html ／ body ／ `.view`）全在零点（两页均核）。
- 强调色填充块数只有 1 个 —— 工具型页面按要求把实底压到最少，主档按钮才用它。
- 侧栏实测（**第七轮**）：栏 **64px** 宽、药丸盒高 **664px**（品牌 32 ＋ 8 项 × 78 ＋ 内衬 6 ＋ 描边 2）垂直居中；导航项 **8 个**、每项 **56×78**、图标 `24×24`（`stroke-width 2`）、名字 `12px/500`；`#nav` 直接子元素**全是 `.nav-item`**（第二层 0 个）。`≤640` 转通栏横条后项高 **36px**。
- 功能入口卡实测（**第七轮重测**）：**17 张**（八页各 2–3 张），每张＝三段纵向「22px 图标／18px·600 标题／14px 描述」；网格 `minmax(200px,1fr)`、gap `16px`；**卡高 111px**（同视口 1249 下，参照物 113px —— 差 2px 来自「描述一行 vs 两行」的取舍，逐值对照见 `3d-审查报告.md` §十二）。
- 界面总宽度 1440 时（实测）：`.view` clientWidth **1361**（内容宽 1297）；统计条 4 格 × **312.25**（高 77.59）；功能入口卡 3 张 × **421.66**（高 **111.19**：内衬 32 ＋ 描边 2 ＋ 图标 22 ＋ 段间距 6 ＋ 标题 24.3 ＋ 段间距 6 ＋ 描述 18.89）；`.block-head` 与内容间距 **8px**、统计条下边距 **6px**；P1 十行数据行高 **30.5–31px**（差 ≤0.5px，扫表节奏齐）。
- 顶栏实测 **49px**，内容只有两项（产品名 ＋ 随手记）；主区 clientH 851px ／ scrollH 1356px。

> 契约里写了数字的，3d 已逐条实测回填，「契约值 / 实测值」并排列进 `3d-审查报告.md` §六。⛔ 不目测。

---

## 七、修订记录（收口后回填）

| 轮次 | 改了什么 | 为什么 |
|---|---|---|
| 3a 初版 | 契约、令牌、交互清单、假设标注、Gate-1 自检 | 本份首出 |
| 3d 收口 | ①§1.1 ⑨ 的实测覆盖从 4 个视口改成 7 个；②交互清单补 `CHECKOUT-CANCEL`、`STATE-NORMAL` 按钮文案改「回到正常内容」，并新写「中性出口 / 决策型关闭」的口径说明；③§四 里 P1 并排的反事实数按实测重填（604px→530px、3 行→5 行、209px→214px）；④§五 第 7 条整条重写（撤掉自设分档，改成如实登记 ≤767px 的不达标），新增第 8、9 条；⑤§六 表内 8 处旧值按实测回填，并裁掉与 §五 重复的逐视口数 | 收口时逐条实测回填；同时把「同一事实只写一处」落实到密度这项上 |
| 按新技能口径重生成（2026-10-08） | ①§〇 供给口径改成「`oil-ui-pro` **基础层** ＋ 其余**叠加层**」；②§1.1 第 4 条入场编排判据改成「⛔ 不做**逐区块**编排、`@keyframes` ≤1」；③§2.2 强调色允许位置去掉「左侧 3px 指示条」，改**整块浅底**；④§2.5 侧栏导航项改成整块浅紫底 ＋ 字重 600；⑤§六「实际在用字号档数」判据 `≥3` → `4–6`；⑥§六 强调色取值口径去掉「3px 左侧标条」 | 全局技能包同日改了三处口径（左色条禁令、入场编排对齐基础层、在用字号档 4–6 档），本份是按旧口径出的 ⇒ 按新口径重生成 |
| 方案 A 补标题字体（2026-10-08） | §2.3 新增「标题字体」＝**展示体**（宋体系）；产物加 `--font-display` 令牌并应用到 `h1` / `h2` / `.brand`；§四 Gate-1 第 6 项（反 slop）同步 | 用户拍板方案 A：选定套只给一套系统黑体栈，标题没有自己的性格 —— 与基础层 `oil-ui-pro`「标题要有自己的性格」有距离，也不符「字族 2–3」的对照意图 |
| 外壳分板块 ＋ P1 功能入口卡挪位（2026-10-08） | ①§1① ⑤ 补三条：导航层级（大功能板块 ＋ 每板块一个主页面）、每块主页面的收口形态、P1 只落一处；②§2.3 组件表补「侧栏板块 / 主页标记 / 板块功能入口卡」三行；③§2.4 交互清单 G-01…G-05 注明「＝该块主页面入口」「含四个主页面」；④§五 第 7 条下补一段实测（照搬外部参考版的满宽表格顺排 ⇒ 一屏 2 行，压到单行仍 4 行）；⑤产物：`#nav` 补基础样式 ＋ 板块间发丝线，导航项加「主页」小标，P1 的功能入口卡从统计条下面移到「今日待处理 ＋ 账号矩阵」之后并排 | 用户 2026-10-08 口径「左侧导航分大功能板块，每个板块一个主页面」＋「功能入口还是卡片的形式，并排放到数据下面」 |
| 导航收一层 ＋ 照抄参考版左右布局（2026-10-08） | ①§1① ⑤「导航层级」改成**只有一层＝四个大板块**；②同处「主页面的收口形态」改成**四个主页面全铺**；③§1 ⑨ 断点表加 `901–1000` 行、`640–900` 行补 `.grid-main-side`；④§2.3 组件表换成「侧栏板块项（只有这一层）／两栏分栏「.grid-main-side」／功能入口卡」；⑤§2.4 G-05 由「二级页项 P1–P8」改成「各主页面上的功能入口卡」；⑥§五 第 7 条整表重测替换（边界仍是 901px） | 用户 2026-10-08 口径「左侧功能导航 只有大板块的导航 只有一层」＋「好好看看 gpt 的原型设计，哪里左右布局的功能照着抄」。产物侧：导航改一层；P1 异常值提示｜本月最好、P2 评论区洞察｜选题库、P4 工作区｜产出＋资产引用＋版本、P6 记忆条目｜关联内容、P7 左（待复盘项＋表现数据）｜右（归因＋确认改判＋回写）、P8 对账核对区｜商单与收支 全部改两栏；宽比 1:1 → 3:2 |
| 外壳高度链 ＋ 密度重测（2026-10-08） | ①§1 ⑨ 断点表加一行 `901–1024`，并新增「滚动容器」一段（高度链三件套）；②§1 ⑨ 与 §五 第 7 条的密度表**整表重测替换**，边界由「768px」改成「901px」；③§五 新增第 10 条（整页不能滚的缺陷 ＋ 窄视口密度是假数）；④§五 第 7 条的三条出路里，①的门槛同步改成 ≥901px | 修外壳时牵出两个真缺陷：整页滚不动（内容拿不到）、自检在窄视口量密度是假数（假绿）。见 `3b-实测记录.md` §六 第 16、17 条 |
| 导航改 tiaoyue 图标栏 ＋ 八页统一 P1 页壳 ＋ 主列表表格化（2026-10-08 第三轮） | ①§1① ⑤ 重写：导航层级＝**一层八个功能项**；新增「侧栏形态＝照 tiaoyue `app-sidebar` 的 64px 图标栏（`nav-item`/`nav-icon`/`nav-tip`，悬停向右浮出名字）」；「主页面的收口形态」改成**八页统一**（页头 → 统计条 → 功能入口卡 → 满宽表格主数据块 → 一处两栏 → 尾块）；②§1.1 ④ 四个列表由「行式列表」改「满宽表格」；③§1 ⑨ 断点表整表重写（侧栏 64px 定值、≤640 转带名字的横滚标签条）；④§2.3 布局脚手架行改成 64px ＋ 满宽表格；⑤§2.5 组件表把「侧栏导航项 / 侧栏板块项」两行换成「侧栏导航项（图标栏）／导航提示（`.nav-tips-layer`）／页面统计条／满宽表格／栏内表／行级微按钮」六行；⑥§2.4 G-05 改成「侧栏八个功能项 ＋ 各页功能入口卡」；⑦§五 第 7 条密度表**第三轮整表重测替换**（边界 901px → **768px**，并记下「主区越窄反而越差」的反直觉实测）；⑧§五 第 7 条下那段「照搬参考版要付什么代价」重写（已照搬，行高 31px 即可兼得）；⑨§六 五处旧值按实测回填（10 行→6 行、67-68px→31-31px、5 档→6 档） | 用户 2026-10-08 两条口径：「左侧导航参考 tiaoyue 的导航」＋「每个板块的首页 样式参考 MCN工作台首页」。产物侧：`NAV` 改图标栏（8 个内联 SVG ＋ 视口级提示浮层）、`--nav-w` 240→64、八页各补统计条与功能入口卡、P2/P3/P5/P6/P7/P8 的主列表改满宽表格；配套修掉两处**假变异**（M2/M8 注入点跟着形态重指） |
| 顶栏清杂项（2026-10-08 第四轮） | ①§2.4 删掉 `G-07`／`G-09`／`G-11` 三行，`G-08` 改成「两处「假设」徽章」，`G-10` 改成「P1 内那一处」；表下新增「已撤销的 7 个 ID」说明；②§三 假设的兑现方式改成「徽章本身可点」（不再提顶栏入口）；③§1 ⑨ 断点表删掉两处顶栏补丁，改成「顶栏不随断点变化」；④§五 第 7 条密度表**第四轮整表重测**（顶栏 49px 全宽度恒定；并**修正 P2 一列的旧数**：P2 已表格化 ⇒ 14 行，不是 6/7 行）；⑤§六 三处旧值回填（顶栏 69px→49px、P1 首行顶 708→688、P2 6 行→14 行） | 用户 2026-10-08 口径「**页面顶上弄这么多乱七八糟的东西 是那个技能那个规则引起的 需要详细排查 定位 删除**」。逐样来源排查落在 `3d-审查报告.md` §十：六样里**没有一样是技能要求的** —— 收起侧栏与面包屑来自本项目参照物笔记、两个演示下拉是我造的、全局检索与②段 P1 页内重复、假设入口是我自己挂在顶栏的第二处；唯一被②段硬要求的是**随手记**（`2b` §286「任意页面一次点击内」）⇒ 留。产物侧：顶栏收成「产品名 ＋ 随手记」两项，内衬 16→8 ⇒ 49px |
| 组件口径统一 ＋ 新判据（2026-10-08 第五轮） | ①§1.1 ⑩ 新增第 6 条「⛔ 不用内联样式表达选中态或覆盖字号」，§四 Gate-1 第 7 项由「共 5 条」改「共 6 条」；②§2.5 新增四行组件：**分段控件（`.seg`/`.seg-item`）／表单字段（`.field`）／表格当前行（`.cell-name.is-on`）／两栏分栏**；③§六 新增一行实测「内联样式越权：八页全为 0」；④产物：`<style>` 里加 `.seg` / `.seg-item` / `.field` / `.cell-name.is-on` 四个组件；把**五处**分段控件（P2 分组 / P3 分区 / P5 账号多选 / P5 平台多选 / P5 版本 tab）从「`.btn btn-sm` ＋ 内联 `border-color`」换成 `.seg-item.is-on`；把**四处**表格当前行从内联 `color` 换成 `.cell-name.is-on`；P7 三个数从 `.grid-cards` ＋ 内联字号换成 `.home-stats`/`.stat-item`；P8 对账核对区表从宽松档 `.ds-table` 换成 `.tbl-side`；P6 与 P5 的表单字段从内联 `margin-bottom` 换成 `.field`；行级动作统一 `.btn-micro`（P2-06/07、P4-05/08、P2-09/10） | 用户 2026-10-08 口径「**参考 MCN 工作台的首页各个组件的样式，优化各功能页面首页组件样式**」。起因：全站选中态原有**三套画法**（侧栏浅紫底 ／ 分段控件内联描边变黑 ／ 表格当前行内联 accent 文字），字号也有内联覆盖 —— 都是「同一件事多个判定标准」，与用户长期口径冲突。新增的判据配了变异 **M15**（把 P2 分组改回内联写法 ⇒ 自检报红），证明它不是恒绿 |
| 学参照物的组件细节 ＋ 语法门禁（2026-10-08 第六轮） | ①§2.5 新增两行组件（**图标（唯一出口 `navSvg`）／问答区 `.qa-block`**），并把「功能入口卡」那一行重写（补 **22px 图标 ＋ 网格 200px ＋ hover 阴影**）；②产物：①**功能入口卡补图标** —— 17 张卡全部改成「22px 图标 ＋ 标题」一行（图标＝目标页自己的图标，复用侧栏那 8 个），图标线宽由 1.7 **改 2**（侧栏同步），网格最小宽 180→**200**，hover 补轻阴影；②P1 问答区加**虚线分隔**（`.qa-block`）；③`≤640px` 补功能入口卡的紧凑档（内衬 `8/12`、图标 `18px`、最小宽 `160px`、隐小标）；④**新增第 5 个门禁 `_tools/check_js.py`**（抠 `<script>` 跑 `node --check` ＋ 多行扫描模板里 HTML 注释中的反引号） | 用户 2026-10-08 口径「**MCN 工作台里面每个组件的样式 高度 ICON 都是需要学习的，比如功能入口，感觉没有学到细节**」。逐件量的原值与我方差距（含**刻意不学**的 3 条与理由）落在 `3d-审查报告.md` §十一。⚠️ 新增门禁的起因：**「模板里的 HTML 注释带反引号」这个坑踩了第 4 次**（每次都在浏览器里才炸、`node --check` 整份 html 报不出来），已做成脚本并做了变异对照（注入反引号 ⇒ 报 FAIL 2 项、退出码 1） |
| 功能入口卡按参照物改三段纵向 ＋ 密度还账 ＋ 取证通道改造（2026-10-08 第七轮） | ①§2.5「功能入口卡」那一行重写（**三段纵向**：图标独占一行／内衬 `16/16`／段间距 `6px`／标题 `18px`／描述 `14px`／卡阴影 L1，卡高 66 → **111px**），新增「功能入口那一行（`.sect-nav`）」一行（**无小标**）；②§2.5 统计条那行补 `margin-bottom:6px`、图标那行补 `≤640` 的 16px；③§1① ⑤ 收口形态注明「⛔ 不带小标」；④§五 第 6 条**作废**（390×844 已可测，见下）、第 7 条**第七轮整表替换**（11 个视口，并改正上一版把 768 记成 7 行的错数）；⑤§六 功能入口卡与整页尺寸全部按 1440 实测回填；⑥产物：①`.data-card` 改三段纵向 ＋ `.dc-line` 整块删除；②删掉八页的「功能入口」小标；③`.home-stats` 下边距 `8→6` 并**去掉七处内联 `margin-bottom`**（收进基类）、`.sect-nav` 七处内联同样收进基类、`.block-head` 下边距 `12→8`；④`≤640` 紧凑档收紧（内衬 `6/8`、图标 16、标题 16、`.block` 上边距 24）；⑤**`_tools/cap.py` 改走 CDP `Emulation.setDeviceMetricsOverride`** —— 不再自起 headless Chrome，改连 9223 上已有的常驻实例，视口由声明式给定（顺带解除 500px 宽度下限，390×844 现已可测）；⑥新增 `_tools/measure.py`（几何真值），⚠️ 写完后按其所属规则**已删除**（它自己起 Chrome，与⑤冲突） | 用户 2026-10-08 口径「**功能入口的高度还是没有 参考 MCN 的首页的功能入口 按钮的样式和布局**」＋ 反过来点破取证方式「**为什么要重新开浏览器，先检查之前是否开过浏览能否复用**」，并要求把这条写进 `browser-harness` 技能（已写入其「🔴 本机（用户明令）」段）。⚠️ 这一轮最该记的是**顺序**：先按参照物把卡改到位，再逐视口跑判据、发现 1440 由 6 行掉到 5 行，然后回参照物**逐值量**（`style.css:387-392` ＋ `app.js:332-336`）确认卡高 133px vs 我方 68px、差在主因「排布」；还账时**先跑改前基线（`_scratch/base.html`）**，确认 768/700/560/500 那四处红是改前就有的，再逐条还、逐条量 |
| 左侧导航样式对齐 tiaoyue 源站（2026-10-08 第七轮追加） | ①§1① ⑤「侧栏形态」由「64px 图标栏、名字只走悬停」**改成实测口径**「64px 药丸浮栏 ＋ 项 56×78 ＋ 图标 24 在上、2 字短名在下且常驻」；②§1.1 ⑨ 的 `≤640` 行重写（药丸那一套整段还原成通栏横条）；③§2.3 断点行与布局脚手架行「图标栏」→「药丸浮栏」；④§2.4 G-05 当前项由「浅紫底」改「中性填充 ＋ 满墨」；⑤§2.5 把「侧栏导航项」一行拆成「侧栏（`.sidebar`）／侧栏导航项（`.nav-item`）」两行并逐值写清，导航提示那行的**内容**由「名字」改「该页说明」；⑥§六 侧栏实测值回填（药丸盒高 664px、项 56×78、图标 24）；⑦产物：`.sidebar` 改药丸浮栏、`.nav-item` 改 56×78 药丸（内衬 16／段间距 6／圆角 54／图标 24／名字常驻／中性状态）、`NAV` 短名一律收到 2 字并新增 `desc`、提示改读 `desc`、`≤640` 档补还原规则；⑧全篇「图标栏」改「药丸浮栏」（⛔ 历史修订行里的旧称保留） | 用户 2026-10-08 口径「**左侧导航 样式可以参考 tiaoyue的左侧导航**」。⚠️ 这条**当时没做完**：第三轮只做了形态，而且是照 `library.json` 的**计数**猜的（包里既没有导航几何、`design-system.html` 里也 `app-sidebar` 0 处）⇒ 猜出来的「纯图标栏、名字只走提示」与源站实测**正好相反**。本轮回源站量为：栏 64px 药丸（圆角 100／内衬 3／淡底＋淡描边／⛔ 无右边线）、项 56×78 药丸、**图标 24 ＋ 2 字短名都常驻**、当前项＝中性填充＋满墨、项间无 gap。逐条对照表在 `3d` §十三 |
| A 方案收密度 ＋ 规则侧整改（2026-10-08 第八轮） | ①§1.1 ⑨ 断点表**整表校正**（原表 `901–1024` 与 `901–1000` **区间重叠**，已按代码实际断点拆成 `>1024` ／ `1001–1024` ／ `901–1000` ／ `821–900` ／ `641–820` ／ `≤640` 六档不重叠），并补上第八轮新加的两条：`≤1000` 卡最小宽 160px、`≤820` 统计条最小宽 96px；②§五 第 7 条密度表**第八轮整表替换**（768／700／560 三处转绿，只剩 500×844）；③§2.5 统计条与功能入口卡两行补最小宽分档；④产物：`≤1000` 卡最小宽 `200→160px`、`≤820` 统计条最小宽 `132→96px`、移动档标签条**藏掉 16px 横向滚动轨**（真缺陷）；⑤**规则侧**（`layouts-tooling.md`／`stage-delivery/SKILL.md`／`execution-runbook.md` 三份，见 `复盘-为什么第一版做得很差.md` §七）：§5.5.2 判据由「栏宽 240–280px」改成「名字常驻可读」的实质判据、新增 §4.9 导航栏一档、§1 密度契约补适用范围与优先级、新增 §5.6 两条元规则、供给块补「定调与令牌的能力边界」与「craft 无供给时怎么办」、Gate-3 与完成标准补「视觉评分必须落盘」「人工项必须给机检或写死无机检」 | 用户 2026-10-08 三条口径：「1、不光是保持现状，要增加 agent 主导航规则，或优化现有规则」「2、A 方案」「不光是复盘，起反作用的规则要优化或清理」。⚠️ 顺带修掉全局技能包里**三条既有 FAIL**（不是本轮引入）：停线规则的**权威写成了 `None`**（＝连权威处也不许写，与本条自己的 `why` 矛盾）⇒ 改成 `SKILL.md` 并把规则补进「执行规则」；`stage-proto-doc` 与 `usage-scenario` 两处仍写①段**已废的 `strategy/` 路径** ⇒ 改成 `research/1d-产品策略.md` / `research/1e-使用场景.md` |

---

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

| 维度 | 分 | 说明 |
|---|---|---|
| 直接性 | 9 | 每节开口就是结论或数值，没有铺垫段 |
| 节奏 | 8 | 以表格与短断言为主，句式偏单一 —— ⚠️ 这是本份的弱项 |
| 信任度 | 9 | 不下「已通过」这种模糊话，未清零的直接写未清零 |
| 真实性 | 10 | 通篇是具体数（161px→53px、530px/5 行）、具体文件、具体命令，没有一句万金油 |
| 精炼度 | 9 | 已按「同一事实只写一处」裁过一轮（密度逐视口表只在 §五 第 7 条出现） |
| **总分** | **45 / 50** | 门槛 ≥45，压线过。扣分点如实写在第 2、5 行，⛔ 不报「已过」了事 |

*（本份是原型的绑定规范：原型只许引本份登记的 token。）*