Files
WorkBuddy eee042c855 ③段第八轮收口:功能入口卡按参照物对齐 + 导航按 tiaoyue 源站重建 + 密度 A 方案
原型(执行会话/目标-…-d85687/ui/mcn-workbench.html)
- 功能入口卡改三段纵向(图标/标题/描述各一行),68 → 111.19px,对齐 mcn-work-shop
  参考卡(同视口 1249×1277 实测 133px),补 --sh-L1 投影;主因是排布不是字号
- 左侧导航重建:由「纯图标 + 悬停提示」改为 64px 药丸浮栏,图标 24 在上、名字常驻在下
  (名字一律 2 字,说明走 data-tip);真值取自 tiaoyue 源站实测
  (栏 64/内衬 3/圆角 100/项 56×78/字 12px-500-行高 16)
- 密度 A 方案:≤1000 卡最小宽 200→160、≤820 统计条最小宽 132→96
  (两处 auto-fit 只在真装不下时才缩)⇒ 768/700/560 三处转绿,其余 10 个视口未动
- 移动档隐藏导航条横向滚动轨(16px 轨道曾吃掉 52px 条高的三成,还白吃 16px 主区)

取证通道
- _tools/cap.py 改为「只连不起」:只连 9223 常驻实例,视口走 Emulation.setDeviceMetricsOverride,
  不再自起 headless Chrome(顺带解除 500px 视口下限,390×844 可测)
- _tools/check_js.py 新增第 5 道门禁(node --check + 模板内注释反引号扫描)

文档
- 复盘-为什么第一版做得很差.md(新建):13 轮时间轴/四类反作用/三重归因/已修与仍欠
- 3d-审查报告.md:更正 §九 那条假 ✓(把「§5.5 五条逐条过完」记成机核,实际零覆盖,
  正是「五道闸门全绿却难看」的开关),补 §十二 功能入口卡高差、§十三 tiaoyue 导航逐条对照
- 3b-实测记录.md/DESIGN.md/3c-GPT 参考版与会诊/布局排版参考 ×2

机制与记忆
- .workbuddy/collab/collabctl.py:off --ws 不再全机扫描(原先一次杀掉他区+看板共 5 个进程)
- .workbuddy/memory/:本轮纪律与实测真值
- .gitignore:补排运行时噪音(ui/_scratch/__pycache__/浏览器取证临时目录/*.bak-*/一次性脚本)

闸门:语法全过/骨架八页 39 板块/变异对照 15-15/逐视口 14 绿(500×844 唯一红,缺口待拍板)/命名 2060-0-27
2026-10-08 22:21:42 +08:00

468 lines
84 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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。)*