Files

467 lines
84 KiB
Markdown
Raw Normal View History

# 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。)*