bid-doctor/docs/design/design-system.md

# 标博士 · 产品界面设计规范（v0.2 · 2026-11-03）

> 范围：MVP 的 Web 界面（读标 M2、查标 M3、项目工作台与额度 M6）和检查报告 PDF。
> 依据：视觉方向 A「校样」（决策 B1）、VI 手册 v1.1、品牌策略的语气规则、`docs/analysis/03-functional-requirements.md`。
> 配套文件：
> - `system/tokens.css`：设计变量（颜色、字体、字阶、间距、圆角、尺寸），原型和前端都直接引用；
> - `system/components.css`：组件样式的参考实现，预览页和原型（`docs/prototype/`）共用；
> - `system/fonts-local.css`：本地预览用的字体加载（从 `logo/.work/fonts` 读，不进 git）；
> - `system/components.html`：组件预览页，用真实样本条款演示（起本地服务后打开，见第 13 节）。
>
> 第 12 节的 U1–U4 已于 2026-11-02 全部按建议确认（`docs/decisions.md`）。
>
> **v0.2（2026-11-03，决策 U5）**：UI 精修时，用户认为 v0.1 风格过于陈旧（处处描边框、2px 圆角、灰色凹陷表头）。经过六轮工作台方案，定稿为 `ui-demo/explore/workbench-d5.html`，并据此修订：
> - 第 3.1 节：页面底色；
> - 第 3.4 节：渐变；
> - 第 5 节：圆角、层次、页面框架；
> - 第 6 节：图标；
> - 第 7.1 节：按钮；
> - 第 7.9 节：项目行；
> - 第 9.5 节：文案精简。
>
> 颜色语义、字体、问题级别的形状规则、产品红线都**没有变**。其余 demo 页和原型还是 v0.1 的样式，待按本版重刷。
>
> **v0.2 补充（2026-11-03，Q1–Q12 已确认）**：UI demo 做的过程中发现的 12 个规范缺口，答案写进了对应章节，每处标「（v0.2，Q?，已确认 2026-11-03）」：§3.1（交互色变量，Q6）、§3.4（绿色，Q1）、§4.2（数字字号，Q7）、§7.1（主按钮，Q12）、§7.7（级别列，Q5）、§7.9（不做卡片视图，Q11）、§7.10（顶栏额度，Q9）、§7.15（骨架屏，Q8）、§7.16（AI 标识，Q2）、§7.18–7.22（选中态 Q3；开关、分页、下拉选择、日期选择 Q4）、§9.3（日期输入格式，Q10）。`tokens.css`、`components.css` 和 `ui-demo/demo.css` 已按本版改写；汇总表见 `ui-demo/index.html` 第 03 节。
>
> **v0.2 收尾（2026-11-03）**：UI demo 六个页面重刷完后，把各页的临时做法收回共用层，并补写以下规则，每处标「（v0.2）」：§4.2（`.fig` 默认字号）、§5.3（对照布局尺寸）、§7.4（致命行不加红竖线、说明在行内展开）、§7.5（中性实底标签）、§7.6（待确认分组）、§7.8（原句高亮、原文排版变量）、§7.9（统计数字颜色）、§7.10（续费文案）、§7.18（当前条与勾选条）、§7.22（日历留空）、§8.2（快捷键按页列出）、§10（高亮的非颜色提示）。流水「免扣」行是否保留待确认（Q13，见 `ui-demo/index.html` 第 03 节）。

---

## 1. 设计原则

| 原则 | 意思 | 落到界面上 |
|---|---|---|
| **出处看得见** | 每条结论都能回到原文，这是产品原则（B5） | 出处是问题和清单项的固定组成部分，默认展开，不藏在「详情」里 |
| **颜色说明谁说的** | 蓝铅笔 = 系统（AI）说的，墨 = 人确认过的，绿 = 确认署名 | AI 产出一律带蓝色标记；人确认后变成墨色正文 + 绿色署名 |
| **红色只给致命问题** | 界面上看到红色，就意味着有可能导致投标无效的问题 | 表单错误、系统故障、额度用完、截止临近都**不用红**，用赭色 |
| **沉着，不阻断** | 截止前不添乱；决定权在用户 | 不闪烁、不弹窗打断、不用惊叹号；致命问题没处理完也能导出 |
| **密度优先** | 投标专员一次要过几十上百条 | 正文 14px，列表行紧凑，支持键盘逐条处理和批量处理 |

---

## 2. 调研依据（为什么这样定）

| 问题 | 依据 | 结论 |
|---|---|---|
| 正文字号 | 国内 B 端设计体系的通行值：TDesign `font-body-medium` 14/22，Ant Design 主字号 14、行高 22，字阶控制在 3–5 种 | 正文 14/22；同一屏不超过 5 个字号 |
| 中文成段阅读的行高 | 中文字面满格，行高比西文需要更大；招标原文引用是成段阅读 | 引用原文用 14/24（约 1.7 倍） |
| 宋体能用多小 | 思源宋体横画细，Windows 下 ClearType 渲染小字号时横画发虚；投标人大多用 Windows | 宋体只用于 ≥20px 的标题，界面正文一律黑体 |
| 字体从哪加载 | Google Fonts 在国内访问不稳定；数据不出境（T1）的要求也延伸到前端资源 | 字体全部**自托管**；中文宋体用 Fontsource 的 `@fontsource/noto-serif-sc`（OFL，按 unicode-range 切片，页面只下载用到的字）；正文黑体用系统字体，不下载 |
| 数字对齐 | 实测 Barlow Semi Condensed 的数字**默认是比例宽度**（「1」宽 309、「0」宽 507 字体单位），字体带 `tnum` 特性 | 表格、金额、页码列必须开 `font-variant-numeric: tabular-nums` |
| 对比度 | WCAG 2.x：正文 ≥ 4.5:1，大字（≥18px，或 ≥14px 粗体）≥ 3:1，控件边框等识别所需的图形 ≥ 3:1（1.4.11） | 见第 3.2 节的实测值。赭色 #A66300 在校样纸上只有 4.4:1，小字改用深一级的 #8A5200；装饰分隔线可以浅，输入框边框必须 ≥ 3:1 |
| 色弱 | 用 Machado 2009 模型模拟后算色差（ΔE，CIELAB）：红色弱下「致命红 / 定稿绿」只差 11.4，绿色弱下「致命红 / 赭」只差 15.9，都接近分不出来 | **问题级别和确认状态不能只靠颜色区分**，必须同时用文字和形状（实心 / 描边 / 无框、✓ 符号），见 3.3 |
| 打印 | 检查报告会被打印给主管或老板看，常常是黑白打印 | 报告里的级别标签在灰度下也要能分辨（同样靠形状和文字） |

---

## 3. 颜色

### 3.1 色板

| 名称 | 变量 | HEX | 用途 |
|---|---|---|---|
| 校样纸 | `--c-paper` | #F5F6F3 | 品牌色板保留（VI、报告用）；**v0.2 起不再作页面底色** |
| 白 | `--c-white` | #FFFFFF | 卡片、表格、输入框、原文页面 |
| 凹陷灰 | `--c-sunken` | #ECEEEA | v0.1 的表头、「提示」级底色；v0.2 起界面改用 `--c-n100` |
| 墨 | `--c-ink` | #1D2733 | 正文、标题、主按钮、人工确认后的内容、焦点环 |
| 辅助灰 | `--c-sub` | #5C6670 | 次要文字、说明、「提示」级 |
| 禁用灰 | `--c-muted` | #7A838C | **只用于**禁用文字和控件边框 |
| 分隔线 | `--c-rule` | #D9DDD8 | v0.1 的分隔线；v0.2 起界面改用 `--c-nline` |
| 中性浅灰 50 | `--c-n50` | #F8F8F9 | **页面底色**、行 / 格悬停（墨 3% 混白） |
| 中性浅灰 100 | `--c-n100` | #F1F2F3 | 中性标签底、文字按钮悬停、进度槽（墨 6%） |
| 发丝线 | `--c-nline` | #E6E7E9 | 卡片边框、行间分隔线（墨 11%） |
| 蓝铅笔 | `--c-pencil` | #2F5BD3 | AI 标注、出处、跳转原文的链接 |
| 蓝铅笔浅 | `--c-pencil-soft` | #E7EDFB | 原句高亮 |
| 致命红 | `--c-fatal` | #C4122F | **只用于「致命」级问题** |
| 赭 | `--c-ochre` | #A66300 | 「重要」级边框和图标、系统提醒、表单错误、截止临近 |
| 赭（小字） | `--c-ochre-ink` | #8A5200 | 18px 以下的赭色文字 |
| 定稿绿 | `--c-green` | #2E6B4F | 人工确认的署名和 ✓ |
| 墨 · 悬停 | `--c-ink-hover` | #38414B | 主按钮等墨底元素的悬停（墨 88% 混白）（v0.2，Q6，已确认 2026-11-03） |
| 墨 · 按下 | `--c-ink-active` | #171F29 | 墨底元素按下（墨 80% 混黑）（v0.2，Q6，已确认 2026-11-03） |
| 中性浅灰 300 / 400 | `--c-n300` / `--c-n400` | #BBBEC2 / #A5A9AD | 普通链接的下划线 / 带悬停说明文字的虚线下划线（墨 30% / 40%）（v0.2，Q6，已确认 2026-11-03） |

每个功能色都有一个浅色底（`-soft`），只用作背景，文字仍用对应的深色。

**交互与浮层的语义变量**（v0.2，Q6，已确认 2026-11-03）：组件里**不写裸色值**，悬停、按下、遮罩一律用 `tokens.css` 的语义变量：
- `--primary-hover` / `--primary-active`（指向上表的墨 · 悬停 / 按下）；
- `--link-underline` / `--hint-underline`（普通链接 / 有悬停说明的文字）；
- `--scrim`（对话框遮罩，墨 32%）、`--topbar-glass`（滚动后的顶栏）、`--on-dark-line`（墨底浮层里的分隔线）、`--shadow-sheet`（原文查看器的纸页）。
- 原来的 `#34404D`（主按钮悬停）、原文页的 `#222` `#888` `#999` `#EEE` 都已换成变量。

**v0.2 的浅灰都从墨色派生**：原来的校样纸、凹陷灰、分隔线偏绿，页面整体显得发灰发闷；改为墨色按比例混白，更亮、更中性。

**侧栏的颜色**（v0.2，`--side-*`）：
- 底色：墨色竖向渐变，下端是墨混 18% 蓝铅笔得到的深墨蓝 #203050。蓝铅笔混在深色里看上去是藏青，只作底色，不承担「AI」语义。
- 文字和选中态：都用白色按比例叠加。

**套餐标签的颜色**（v0.2，`--plan-*`，例外）：
- 只用于账户区的套餐标签：免费版是中性灰，专业版是浅金色底加金边，企业版是金色实底加墨色字。
- 金色从赭色派生，靠深浅区分档次。
- 不得用在其他地方，以免和表示提醒的赭色混淆。

**不进界面的颜色**：印章红 #D9291C 和藏青 #1C2554 只属于 logo（VI 手册第 03 章）。

### 3.2 对比度实测

| 文字色 | 校样纸 | 白 | 用法限制 |
|---|---|---|---|
| 墨 #1D2733 | 13.9 | 15.1 | 无 |
| 辅助灰 #5C6670 | 5.4 | 5.9 | 无 |
| 蓝铅笔 #2F5BD3 | 5.4 | 5.9 | 在高亮底 #E7EDFB 上 5.0，仍达标 |
| 致命红 #C4122F | 5.6 | 6.0 | 白字压红底 6.0 |
| 定稿绿 #2E6B4F | 5.8 | 6.3 | — |
| 赭 #A66300 | **4.4** | 4.8 | 校样纸上只能用于 ≥18px 的字、边框、图标 |
| 赭小字 #8A5200 | 5.9 | 6.4 | 18px 以下的赭色文字都用它 |
| 禁用灰 #7A838C | 3.6 | 3.9 | 只用于禁用状态和控件边框，**不能用于正文和占位符**（占位符用辅助灰） |

分隔线 #D9DDD8 只有 1.3:1，所以它只能做装饰性分隔；需要用户看清边界的控件（输入框、复选框、次按钮）用 `--border-control`（#7A838C，3.6:1）。

### 3.3 不能只靠颜色

| 要区分的东西 | 颜色 | 形状 / 文字（必须同时有） |
|---|---|---|
| 致命 | 致命红 | **实心**标签，白字「致命」 |
| 重要 | 赭 | **描边**标签（1.5px），赭色字「重要」 |
| 提示 | 辅助灰 | **无边框**，灰底灰字「提示」 |
| AI 产出 | 蓝铅笔 | 「AI」小标签或「AI 摘要 / AI 初稿」字样，左侧虚线竖线 |
| 人工确认 | 墨 + 定稿绿 | ✓ 符号 + 「王敏 11月2日 14:20 确认无误」署名行 |
| 待确认区 | 蓝铅笔 | 虚线框 + 区块标题「待确认」 |

### 3.4 颜色禁忌

- 不用红色做按钮（包括删除按钮）、表单错误、系统错误、倒计时、额度用完提示。删除这类操作靠二次确认，不靠颜色吓人。
- 不用定稿绿表示「通过 / 合格」。绿色只表示「有人确认过」，不表示结论好。
  - 额度流水的「+」（发放、退回）也不用绿色：和「−」一样用墨色，靠符号区分（v0.2，Q1，已确认 2026-11-03）。
- 不用蓝铅笔做普通导航链接、主按钮。蓝色只属于系统说的话和出处。普通链接用墨色加下划线。
- 不用渐变、不用大面积彩色底。一屏之内彩色面积越少，致命红越显眼。**唯一的例外**是侧栏的墨色竖向渐变（v0.2）：只在墨色和深墨蓝之间过渡，不出现在内容区。

---

## 4. 字体

### 4.1 字体栈与加载

| 用途 | 变量 | 字体 | 加载方式 |
|---|---|---|---|
| 界面正文 | `--font-sans` | 苹方 → 微软雅黑 → 思源黑体（Noto Sans SC） | 系统字体，不下载 |
| 标题 | `--font-serif` | 思源宋体 SemiBold（Noto Serif SC 600） | 自托管 `@fontsource/noto-serif-sc`，只引 600 字重 |
| 数字 | `--font-figures` | Barlow Semi Condensed 500 / 600 | 自托管 `@fontsource/barlow-semi-condensed` |

- 不用 Google Fonts 等境外 CDN；字体文件随前端一起部署。
- 检查报告 PDF 在服务端生成，**嵌入**思源黑体和思源宋体，保证不同电脑打开效果一致。
- 三套字体都是 SIL OFL 1.1，许可证文件在 `logo/licenses/`。

### 4.2 字阶

| 级别 | 字号 / 行高 | 字体与字重 | 用在 |
|---|---|---|---|
| H1 | 24 / 32 | 宋体 600 | 工作台标题、项目名、报告标题 |
| H2 | 20 / 28 | 宋体 600 | 页面标题（「采购包 2 的检查结果」） |
| Title | 16 / 24 | 黑体 600 | 问题标题、区块标题、对话框标题 |
| Body | 14 / 22 | 黑体 400 | 界面正文、表格 |
| Read | 14 / 24 | 黑体 400 | 招标原文、投标原文的引用 |
| Caption | 12 / 20 | 黑体 400 | 时间戳、脚注、表单说明；**最小字号**，正文不用 |
| Figure | 28 / 36 | Barlow 600 | 工作台统计数字、额度剩余（`--fs-figure`，v0.2 由 30 改为 28） |
| Figure S | 15 / 22 | Barlow 500 / 600 | 正文行里独立出现的数字：表格数值、日期、页码、筛选计数、顶栏额度（`--fs-figure-sm`）（v0.2，Q7，已确认 2026-11-03） |
| Figure XS | 13 / 20 | Barlow 500 / 600 | 12px 小字行里的数字：标签计数、出处页码、扣点说明、时间戳（`--fs-figure-xs`）（v0.2，Q7，已确认 2026-11-03） |

- 字重只用 400 和 600 两档（黑体在 Windows 上 500 和 400 几乎看不出区别）。Barlow 数字例外，可用 500。
- Barlow 的字面比黑体小一号，所以和 14px 正文同行时用 15px、和 12px 小字同行时用 13px，看上去才一样大；这两档只给数字用，不算进「同一屏不超过 5 个字号」。
- 默认值做进共用层（v0.2）：`.fig` 默认 15（`--fs-figure-sm`）；放在 12px 小字里（标签、扣点说明、出处、表头、说明文字等）自动变 13（`--fs-figure-xs`）；统计大数字用 `.big`（`--fs-figure` 28）。页面里不必再逐处写字号。
- 强调用加粗，不用斜体（中文没有真斜体）、不用彩色。

### 4.3 数字与中英文混排

- **独立出现的数字**用 Barlow：表格里的金额 / 参数值、页码「第 41 页」、倒计时、统计数字、额度。表格列加 `tabular-nums`，金额右对齐。
- **句子里的数字**跟着正文黑体走，不换 Barlow，避免一句话里字形忽宽忽窄。
- 中文与数字、英文之间加一个半角空格：「第 41 页」「≥ 512G」「采购包 2」。比较符号与数值之间也加空格。
- 招标原文引用**照录原文**，不加空格、不改标点、不改 ★ ▲ 等符号。

---

## 5. 间距、圆角与布局

### 5.1 基础

- 间距以 4px 为基准：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64（`--sp-*`）。
- 组件内部用 4–12，组件之间 16–24，区块之间 32–48。
- **圆角三档**（v0.2）：
  - 标签 6px（`--radius-tag`）；
  - 按钮、输入框、菜单项 8px（`--radius-ctl`）；
  - 卡片、对话框、浮层、内容区左上角 12px（`--radius-card`）。
  - 不用胶囊形；圆形只用于头像和状态小圆点。
- **层次**（v0.2）：浅灰页面上放白卡片，卡片是 1px 发丝线边框，**全页只有这一种容器**，卡片里不再套面板。
  - 表头不用底色和粗线，只用 12px 辅助灰列名；行与行之间用发丝线分隔。
  - 阴影只用于浮层（下拉、对话框、提示），以及滚动后的顶栏。
- **整齐**：一种中性标签样式；卡片间距统一 16px；卡片内左右边距统一 20px。

### 5.2 平台与尺寸

- **MVP 只做桌面 Web**，设计基准宽度 1440，最小支持 1280（1366×768 笔记本在国内政企仍常见）。小于 1280 时页面横向滚动，不做手机适配（见 U2）。
- 浏览器：Chrome、Edge 和国产双核浏览器的极速模式（Chromium 内核）。不支持 IE 和兼容模式，检测到时提示切换。
- 不做暗色模式（U2）；变量按语义分层，以后加暗色只需重新赋值语义变量。

### 5.3 页面框架

```
┌──────┬────────────────────────────────────────────────────┐
│ 侧栏  │ 顶栏（透明）：公司 / 页面            搜索 │ 额度 · 通知 │
│ 96px ├────────────────────────────────────────────────────┤
│ logo │╭ 内容区（浅灰底，左上角 12px 圆角压在侧栏深色上）       │
│ 菜单  ││                                                   │
│ …    ││   页面内容（三种主布局见下）                          │
│ 头像  ││                                                   │
└──────┴────────────────────────────────────────────────────┘
```

**侧栏**（v0.2）：
- 宽度固定 96px，只有一种状态，**不折叠**。
- 底色是墨色竖向渐变，底部有一片淡点阵，向上渐隐。
- 顶部是竖版反白 logo（上印章、下字标），在侧栏内居中，宽约 60px。
- 菜单项上图标、下文字：图标 22px，文字 12px，项高 62px。
- 当前项：圆角矩形的半透明浅色底，白色加粗文字。悬停用同一形状，底色更淡。
- 分组之间只用一条细分隔线，不写分组标题。
- 底部：44px 头像、姓名，以及套餐标签（见 3.1）。

**顶栏**（v0.2）：
- 高 56px。左侧是「公司 / 页面」；右侧依次是搜索框（宽 280px，聚焦时变宽，Ctrl K 聚焦）、额度、通知。
- 页面在顶部时，顶栏透明，和内容区底色连成一片；滚动后变为半透明白，加毛玻璃和一条发丝线。
- 顶栏不用深色，避免和侧栏连成一个「门」字形边框。

**内容区**：
- 浅灰底 `--bg-page`，左上角 12px 圆角，压在侧栏的深色上。
- 页面左右内边距 32px，1400px 以下为 24px。

| 布局 | 页面 | 结构 |
|---|---|---|
| 列表 | 工作台、资质库、额度流水 | 页头 + 统计 + 白卡片里的列表；工作台右侧另有 296px 信息栏 |
| 对照 | 读标（清单）、查标（问题列表） | 左：分类导航和列表在同一张白卡片里；右：**原文查看器**，宽度可拖动（尺寸见下） |
| 批注 | 查标结果的默认视图 | 问题列表 + 右侧 280px 页边批注栏（出处）；窄于 1440 时批注收进问题下方 |

点出处时，对照布局的右栏直接翻到对应页并高亮；批注布局下从右侧滑出原文查看器，不跳页面。

**对照布局的尺寸**（v0.2）：
- 分类导航 176px（1400 以下 152px），当前分类用 `--c-n100` 实底 + 加粗；
- 列表最小 560px，其余宽度都给列表；
- 原文查看器默认占内容区宽度的 45%，最小 400px；中间 16px 是拖动条（平时不可见，悬停出浅灰细线），可以拖动或聚焦后用 ← → 调整，列表始终不窄于 560px；
- 1280 宽时（内容区约 1136px）：列表 ≥ 560、查看器 ≤ 560，不横向滚动；
- 对照布局撑满顶栏和页头以下的高度，分类导航、列表、查看器各自滚动。

---

## 6. 图标

- 用 **Lucide**（ISC 许可，可商用）线性图标，描边 1.5px，尺寸 16 / 20px，颜色跟随文字色。
- 图标只做辅助，必须和文字一起出现；只有图标的按钮要有 `aria-label` 和悬停提示。
- ★ ▲ 是招标文件里的标注符号，按文字显示，不换成图标。
- 不用笑脸、奖杯、盾牌对勾这类暗示「保证」的图形。
- **只用功能图标，不用装饰图标**（v0.2，用户试过后否决）：
  - 统计卡、区块标题、列表行首都不加图标；
  - 图标只出现在导航、按钮、出处、提醒、搜索、通知这类有操作含义的地方。
- 侧栏菜单图标：工作台 `house`、资质库 `award`、额度 `wallet`。

---

## 7. 组件

每个组件写明：用途、结构、状态、规则。示意见 `system/components.html`。

### 7.1 按钮

| 类型 | 样式 | 用于 |
|---|---|---|
| 主按钮 | 墨底白字，加粗 | 一屏只有一个（怎么算见下）：「发起检查」「导出报告」「确认清单」 |
| 次按钮 | 白底墨字，控件边框 | 其他操作，包括问题处理三按钮 |
| 文字按钮 | 墨字，无边框，悬停出底色 | 表格行内、次要操作 |

- 高度 36（默认）/ 32（表格行内、筛选标签）/ 40（登录页、空状态），圆角 8（v0.2）。左右内边距 14 / 10 / 16。
- **没有红色的危险按钮**。删除项目、删除文件用次按钮 + 确认对话框；删除项目要输入项目名才能确认。
- 会扣点的按钮，旁边直接写扣多少、还剩多少（见 8.3），不放在弹窗里才说。
- 状态：悬停（主按钮变为 `--c-ink-hover`，次按钮出 `--bg-hover`、边框变墨）、按下（主按钮 `--c-ink-active`，次按钮 `--c-n100`）、禁用（禁用灰字、`--c-n100` 底、无边框）、加载中（文字换成「正在…」，按钮宽度不变）（v0.2，Q6，已确认 2026-11-03）。
- **「一屏一个主按钮」按上下文算**（v0.2，Q12，已确认 2026-11-03）：
  - 页面级只有一个主按钮（通常在页头右侧）；
  - 对话框是独立的上下文，可以有自己的主按钮（「删除项目」「确认无误」），不和页面的主按钮冲突；
  - 组件陈列页（UI demo、组件预览）为了对比会同时出现多个，不受此限。
- 按钮文字是动词短语，和结果状态用同一个词（品牌策略第 4 节）。

### 7.2 问题级别标签

```
[致命]  实心，白字压致命红
[重要]  1.5px 赭色描边，赭色小字
[提示]  无边框，--c-n100 浅灰底，辅助灰字
```

- 字号 12，字重 600，高 22，左右内边距 8，圆角 6（v0.2，与中性标签同高，以 d5 为准）。
- 级别由规则决定（FR-M3-03 的级别表），用户不能改级别；不同意可以「反馈：判断有误」。
- 计数徽标也用同一套形状：「致命 2」实心、「重要 5」描边、「提示 11」无框。

### 7.3 出处（页边批注）

出处是标博士最重要的组件。

```
│ 招标文件 · 第 41 页                   ← 蓝铅笔，Barlow 页码，可点击
│ ★ 2U 机架式服务器，CPU：配置≥2颗…      ← 原句照录，14/24，墨色字 + 蓝铅笔浅高亮
│ 投标文件 技术册 · 第 12 页             ← 第二个出处（投标方）
│ 内存：256G DDR4
```

- 左侧 2px 蓝铅笔竖线；在批注布局里，用一条虚线连到对应的问题。
- 一条结论可以有多个出处，按「招标原文 → 投标原文」排序，最多默认展开 2 条，其余「另有 N 处」。
- **「未找到」也是一种出处**：写明找过哪些分册、哪些章节，例如「已查找：商务册、技术册（全部章节）、资格证明册；未找到对应响应」。
- 引用超过 3 行时截断，「展开原文」显示全句；原句必须完整可见，不能只给页码。
- 出处无法定位的结果不进正式清单，进「待确认」区（FR-M2-06/07）；界面上**不出现没有出处的结论**。
- 扫描件 OCR 识别出的原句，前面加「OCR」小字，提醒用户核对原图。

### 7.4 问题行（查标）

```
[致命]  报价超过采购包 2 的最高限价                         新增
开标一览表报价 133.60 万元，最高限价 132.00 万元，超出 1.60 万元。
这一项会导致投标无效。请核对开标一览表的报价。
[确认无误] [已修改] [忽略并注明原因]                判断有误？
```

- 结构：级别标签 → 标题（结论）→ 说明（事实 + 后果 + 改法）→ 处理按钮 → 出处（右侧或下方）。
- 标题写结论，不写规则名：「报价超过采购包 2 的最高限价」，不写「报价限价规则命中」。
- 复查标记放在标题行右侧：「新增」「沿用」「本次已解决」（FR-M3-08），用辅助灰小字，不用颜色。
- 处理后：按钮收起，换成署名行「✓ 王敏 11月2日 14:20 已修改」（绿），可「撤销」。「已忽略」不是确认，署名行用辅助灰和「–」，后面带原因。
- ~~「致命」行左侧加 3px 致命红竖线~~（v0.2 取消）：和工作台一致，级别只靠实心「致命」标签扫读；行左侧的 3px 竖条只表示「当前条」（墨色，§7.18），和级别无关，两者不再冲突。
- 已处理的问题默认折叠到列表底部「已处理（N）」，避免干扰。
- 每行都有「判断有误？」文字链接，打开反馈表单（FR-M3-07 / J5）。
- 「致命」级点「确认无误」时，展开一个必填的说明输入框（U4），说明同时作为误报反馈提交。
  - 说明框**在问题行内展开**，替换处理按钮，不用对话框（v0.2）；「忽略并注明原因」也一样在行内展开（原因可以不处理也能撤销，按 §7.12 不用对话框打断）。
  - 行内区域无底色，不在卡片里再套面板；至少 5 个字，有字数计数，Esc 取消。
  - 提交后收起，换成署名行；说明 / 原因写在署名行下方的辅助灰小字里。

**三个处理动作的含义**（按钮下方悬停提示要写清楚，避免误解）：

| 按钮 | 含义 | 结果状态 |
|---|---|---|
| 确认无误 | 我核对过，投标文件这里没问题（例如响应写在别处） | 已确认无误 |
| 已修改 | 我已经在投标文件里改了，复查时会再查 | 已修改 |
| 忽略并注明原因 | 我知道这个问题，决定不处理（必须填原因） | 已忽略 |

### 7.5 清单项（读标）

- 一行：重要性符号（★ / ▲ / 空）→ 标题 → 类别标签（可多个）→ 所属包 → 来源 → 出处。
- 类别、包、来源都用**中性实底标签**（`--c-n100` 底、无描边、墨色字，与状态标签同一种）（v0.2）。
- 来源标注：AI 提取的用「AI」标识（蓝铅笔描边小标签，§7.16）；「人工添加」「补遗 2」用中性实底标签（v0.2）。
- 被用户改过的条目显示「已修改 · 查看记录」，打开修改历史（谁、何时、改前、改后）。
- 「已被补遗 N 更新」的旧值加删除线，新值旁边写来源，用户确认后去掉提示（FR-M2-10）。
- 清单整体状态显示在页头：「草稿 v3」（中性实底标签，v0.2）/「已确认 v3」标签 + 绿色署名「✓ 王敏 11月2日 14:20」。

### 7.6 待确认区

- 是清单顶部的一个**分组**，和「资格条件」等分组同样排版，标题用蓝铅笔色「待确认 N」，后面一句辅助灰说明：「没找到可靠出处，或把握不大。确认前不参与检查。」**不再用虚线框**（v0.2，避免卡片里再套框）。
- 条目是未确认的 AI 产出：「AI」标识 + 左侧 2px 蓝铅笔虚线（§7.16）。
- 每条三个动作：「补上出处后采纳」「修改后采纳」「丢弃」（有可靠出处时第一个动作是「采纳」）。没有出处也要采纳时，标注「人工确认、无出处」。
- 不和正式清单混排，放在清单顶部，有条目时默认展开；分类导航里另有「待确认」一项（蓝铅笔色）可以单独查看。

### 7.7 参数对照表

技术参数的检查结果用表格（借鉴方向 C「检验单」的写法）：

| 参数项 | 要求 | 投标响应 | 判断 | 级别 | 出处 |
|---|---|---|---|---|---|
| ★ 内存 | ≥ 512G DDR4 | 256G DDR4 | **疑似不满足** | [致命] | 第 41 页 ↔ 技术册 第 12 页 |

- 要求和响应列用 Barlow + `tabular-nums`，数值左对齐（参数是「数 + 单位 + 说明」，右对齐反而难读）。
- 「判断」列只用四个词：**满足 / 疑似不满足 / 未找到响应 / 需人工判断**。不用「合格 / 不合格 / 通过」。
- 「疑似不满足」用所在行的问题级别标签颜色；「满足」用墨色普通字，不用绿色（绿色只表示人工确认）。
- **保留「级别」列**（v0.2，Q5，已确认 2026-11-03）：判断词的颜色对色弱不够，级别标签有实心 / 描边 / 无框的形状兜底；「满足」「需人工判断」的行级别列写「—」。
- 表头无底色、无粗线，12px 辅助灰列名；行间发丝线；行高 44；放在白卡片里，首尾列与卡片左右边距（20）对齐（v0.2，同 §5.1）。

### 7.8 原文查看器

- 白色页面，按规范化 PDF 显示（出处页码以它为准）。
- 高亮：原句用蓝铅笔浅底 + 1px 蓝铅笔底边；当前出处的底边加粗为 2px，并自动滚动到可见区域（v0.2：不再用描边框——描边框在换行处断开，底边线跨行时每一行都有，读起来连续）。
- 纸面字体模拟招标文件的打印效果：`--font-doc`（宋体）、`--fs-doc` 13px、`--lh-doc` 24px，不跟界面字阶（v0.2）。
- 顶部：文件名、文件类型（招标文件 / 补遗 N / 投标分册）、页码跳转「第 41 / 186 页」、上一处 / 下一处高亮。
- OCR 页面显示「扫描页 · 文字由 OCR 识别」，高亮按 OCR 坐标。
- 原文只读，不允许在查看器里改文字。

### 7.9 项目行（工作台）

| 列 | 内容 | 规则 |
|---|---|---|
| 项目 | 项目名（16/24 600）+ 采购人（辅助灰） | |
| 所投包 | 「采购包 2」或「全部」 | |
| 截止 | 倒计时 | 见下 |
| 状态 | 跟进中 / 编制中 / 已检查 / 已递交 / 已归档 | 中性标签：浅灰实底（`--c-n100`），无描边，不用彩色（v0.2） |
| 就绪 | 只在「已检查」显示 | 见下 |
| 致命 | 待处理的致命问题数 | 实心标签「致命 2」；为 0 时显示「—」；本列居中 |
| 下一步 | 当前最该做的一个动作（确认清单、导出检查报告、处理致命问题……） | 文字链加 ›，表头和内容**左对齐**；行悬停时箭头右移 3px，不加边框和底色 |
| 更多 | 「⋯」按钮 | 单独一列 32px，不设表头；常驻显示，平时是辅助灰，行悬停时变墨色。会扣点的操作在菜单里写明扣多少、还剩多少 |

**倒计时**（以投标截止时间为准）：

| 剩余时间 | 显示 | 颜色 |
|---|---|---|
| > 72 小时 | 「11月20日 09:30 · 剩 17 天」 | 墨 |
| ≤ 72 小时 | 「剩 2 天 5 小时」 | 赭小字 |
| ≤ 24 小时 | 「今天 09:30 截止」/「剩 6 小时」 | 赭小字，加粗 |
| 已过 | 「已截止」 | 辅助灰 |

**就绪状态**：「未就绪」（墨色普通字，致命数量看「致命」列）/「就绪」（墨色普通字 + 虚线下划线，v0.2 以 d5 为准）；两者都写在状态标签后面，不单独占一列。项目详情页的页头合在一起写：「未就绪 · 2 项致命问题待处理」。「就绪」悬停说明：「只表示致命问题都已处理，不代表投标文件没有问题。」

**统计卡的数字颜色**（v0.2）：「待处理的致命问题」用致命红，「7 天内截止」用赭（`--warn-text`），其余（进行中、待确认的清单条目等）用墨色。数字 Barlow 28，只写标题和数字（§9.5）。

**不做项目卡片视图**（v0.2，Q11，已确认 2026-11-03）：MVP 的工作台只用列表（项目行）。投标专员要按截止时间扫读、比对多个项目，列表密度更合适；不提供列表 / 卡片切换。

### 7.10 额度

- 顶栏常驻：「解析 37 · 检查 12」（Barlow 15），点开额度页；悬停说明本期剩余 / 总数。
  - 某项用到 ≥ 80% 时，该项数字变赭色（`--warn-text`）加粗；用完时悬停说明续费方式（「本期检查额度已用完，可在额度页提交续费申请，或等下期发放」，v0.2）。**不用红**（v0.2，Q9，已确认 2026-11-03）。
- 额度条：已用部分墨色，80% 起变赭色并出现一行提醒，100% 时提醒「本期检查额度已用完，可在额度页提交续费申请，或等下期发放」，并给「提交续费申请」按钮。**不用红色**。
  - 续费按决策 G8：专业版在线申请 → 对公转账 → 运营开通；文案写「在额度页提交续费申请」，**不写「联系客服」**（v0.2）。
- 流水表：时间、类型（发放 / 预扣 / 结算 / 退回 / 过期 / 人工调整 / 免扣），其中「免扣（24 小时内复查）」数量记 0（v0.2，Q13）；数量（+ / −，Barlow 等宽）、关联项目和任务、原因。退回的记录和对应的预扣记录相邻显示。
  - 「+」和「−」都用墨色，只靠符号区分，不用绿色（v0.2，Q1，已确认 2026-11-03）。

### 7.11 异步任务进度（解析 / 检查）

- 分阶段列表：「识别文件格式 → 提取文字 → 识别分包 → 提取清单 → 核对出处」，当前阶段有进度，已完成的打 ✓。
- 明确告诉用户可以离开：「可以离开本页，完成后会发站内通知。」
- 失败时说清楚原因和扣点情况：「解析失败：文件已加密。已退回 1 次解析额度。」赭色提醒，不用红。

### 7.12 提醒与通知

| 类型 | 样式 | 例子 |
|---|---|---|
| 信息 | 白卡片，墨色图标 | 「清单未确认，检查结果以当前清单为准。」 |
| 提醒 | 白卡片，赭色图标 + 赭小字关键字（如截止时间） | 额度 80%、截止 ≤ 72 小时、解析失败、上传文件超限 |
| 完成 | 白卡片，绿色 ✓ | 「报告已导出」 |

- v0.2（U5，以 d5 为准）：页内提醒和卡片同规格（白底、1px 发丝线、圆角 12），不再用彩色浅底和左边线；颜色只出现在图标和关键字上。

- 页内提醒（Alert）放在相关内容上方，不自动消失；轻提示（Toast）只用于操作结果，4 秒后消失，可悬停暂停。
- 不用弹窗打断。只有不可撤销的操作（删除、标记已递交）才用确认对话框。

### 7.13 表单

- 标签在输入框上方，必填项在标签后写「（必填）」，不用红色星号。
- 错误提示：输入框边框变赭色 + 下方赭小字说明 + 「!」图标。说明写清楚怎么改：「手机号应为 11 位数字」。
- 校验时机：离开输入框时校验，提交时汇总。
- 「忽略并注明原因」的原因输入框：至少 5 个字，给 3 个常用原因快捷选项（「招标文件允许」「已在其他分册响应」「与本项目无关」）。

### 7.14 对话框

- 宽 480（确认）/ 640（表单），圆角 12（v0.2，同 §5.1），浮层阴影，遮罩 `--scrim`。
- 标题写要做的事：「删除项目「智慧规划资源 2025 标段三」？」；正文写后果；按钮「删除项目」「取消」，主操作在右。
- 删除项目要输入项目名才能点删除；说明删除后 30 天内可在回收站恢复（以 G10 定稿为准）。

### 7.15 空状态、加载与错误

- 空状态写下一步做什么，带一个主按钮：「还没有招标文件。上传后，标博士会逐条提取要求。」
- 加载用骨架屏，不用转圈占满屏。
  - 骨架屏**静止**：`--c-n100` 浅灰块，不做明暗起伏或扫光（符合「不闪烁」原则）（v0.2，Q8，已确认 2026-11-03）。
- 系统错误：「出了点问题，请稍后重试。本次操作未扣额度。」带错误编号，便于客服查询。

### 7.16 AI 标识

- 系统生成的文字（摘要、说明、初稿）前面加「AI 摘要」「AI 初稿」标签：蓝铅笔 1px 描边、蓝铅笔字。
- **AI 产出的正文始终是墨色**（v0.2，Q2，已确认 2026-11-03）：大段蓝字阅读负担重。AI 身份只靠两样东西表示：
  - 「AI」小标签；
  - 正文左侧 2px 蓝铅笔虚线。
- 人修改或确认后：去掉虚线（左内边距保留，正文不跳动），标签换成署名行（绿 ✓ + 姓名 + 时间 + 动作）。

### 7.17 检查报告 PDF

- A4 竖版，页边距 20mm，思源黑体正文 10.5pt / 行距 1.6，标题思源宋体。
- 页眉：左侧小号横版 logo（干净版），右侧「投标文件辅助检查报告」。**logo 只出现在页眉**，不放在任何结论、汇总数字或签名旁边（红线：logo 不能当「通过」章）。
- 首页：项目信息、投标文件版本、检查时间、规则版本、**检查覆盖范围**（查了什么 / 没查什么）、免责声明。
- 免责声明（v0.2）：写明报告是辅助检查结果、检查范围以首页「检查覆盖范围」为准、结果可能有遗漏或误判、不代表资格审查 / 符合性审查 / 评标的结论、是否递交和如何修改由投标人自行决定。参考写法见原型 `report.html`。
- 页脚（v0.2）：「本报告为辅助检查结果，仅供投标前自查参考」+ 页码「3 / 12」。
- 全文（含免责声明和页脚）不出现「通过」「合格」「保证」。免责的意思用「仅供……参考」「不代表……结论」「由投标人自行决定」来说，不写「不构成保证」「不保证」。引用招标文件原文时照录原文，不在此列。

### 7.18 选中态（v0.2，Q3，已确认 2026-11-03）

- 列表项、表格行被选中（读标清单的当前条、勾选的表格行、问题列表的当前问题）：`--c-n50` 底 + 左侧 3px 墨色竖条。读标清单和表格一样，不再用蓝色浅底。
- 键盘焦点另加 2px 墨色内框，和选中可以同时出现。
- **当前条与勾选条要区分**（v0.2）：
  - 当前条（点击或 J / K 定位到的那一条，原文查看器跟着它走）= `--c-n50` 底 + 3px 墨色竖条；同一列表只有一条；
  - 勾选条（批量处理的复选框）只有复选框是选中状态，**不加底色和竖条**；可以有多条，也可以和当前条重合；
  - 上面「勾选的表格行」按此修正：勾选不再出底色和竖条。
- **竖条和级别的关系**（v0.2）：竖条只表示「当前」，永远是墨色；问题级别只看实心 / 描边 / 无框的级别标签，「致命」行不再另加红竖线（§7.4），所以选中致命行时不会出现红、墨两条竖线。
- 蓝色只留给原文高亮和出处链接：清单选中某条时，右侧原文查看器里对应的原句用蓝铅笔浅底高亮（§7.8），两边靠位置对应，不靠同色。
- 导航和筛选的「当前项」（分类导航、筛选按钮、分页当前页）不是选中，用 `--c-n100` 实底 + 加粗。

### 7.19 开关（v0.2，Q4，已确认 2026-11-03）

- 矩形轨道（34 × 20，圆角 6）+ 方块滑钮（14 × 14，圆角 4），**不用胶囊形**（§5.1）。
- 关：白底、控件边框、禁用灰滑钮；开：墨色轨道、白色滑钮。
- 旁边写「开 / 关」（12px），不只靠滑钮位置表示状态。
- 只用于立即生效的设置（如「到期前 30 天提醒」）；需要提交的表单项用复选框。

### 7.20 分页（v0.2，Q4，已确认 2026-11-03）

- 左侧「共 N 条」，右侧页码 + 上一页 / 下一页 + 跳转输入框；页码用 Barlow 15。
- 当前页：`--c-n100` 实底 + 加粗，无描边，和筛选按钮的按下态一致；悬停也出 `--c-n100`。
- 高 32，圆角 8。只在超过一页时显示。

### 7.21 下拉选择与菜单（v0.2，Q4，已确认 2026-11-03）

- 触发框和输入框同规格（高 36、圆角 8、控件边框），右侧 chevron，展开时旋转。
- 浮层：白底、1px 发丝线、圆角 12、浮层阴影，内边距 6；选项高 34、圆角 6，悬停 / 键盘移动出 `--c-n100`。
- **选中项加粗，右侧墨色 ✓**；不用蓝色、不用背景色表示选中。
- 不可选的项用禁用灰，并写明原因（如「不适用于本项目的采购方式」）。
- 操作菜单（列表行的「更多」）同样式；会扣点的项在第二行写「扣 1 次检查 · 剩 12 次」（§8.3）。

### 7.22 日期选择（v0.2，Q4，已确认 2026-11-03）

- 周一开始；日期数字用 Barlow 15。
- 今天：1px 控件边框；选中：墨底白字；本项目的关键日期：下方墨色小圆点。
- **不可选的日期只变禁用灰，不加删除线**；不可选的格子没有悬停效果（v0.2）。
- 非本月的日期**不显示**，格子留空（v0.2）：否则上下月的灰色日期和不可选日期很难区分。
- 日期输入框：可以直接键入，接受「2026/11/20 9:30」「2026.11.20 9：30」「2026年11月20日」等常见写法，离开输入框时整理成「2026-11-20 09:30」；下方小字显示界面写法「11月20日 09:30 · 剩 17 天」（v0.2）。
- 带时间的字段（如投标截止）：日期选择器底部有时间输入框，24 小时制；输入框格式见 §9.3。


### 8.1 AI 产出 → 人工确认 → 留痕

所有 AI 产出都走同一个流程，视觉上一以贯之：

1. **AI 产出**：蓝铅笔标记（「AI 提取」「AI 摘要」、出处蓝色）。
2. **人处理**：三个动作之一，忽略要填原因。
3. **署名**：绿色 ✓ + 姓名 + 时间 + 动作，文字变墨色。
4. **留痕**：每条都能打开「处理记录」，看到全部历史。

### 8.2 键盘逐条处理

问题列表和清单支持键盘，方便一次过几十条：

| 键 | 动作 |
|---|---|
| J / K | 下一条 / 上一条 |
| O 或 Enter | 在原文查看器里打开当前出处 |
| 1 / 2 / 3 | 确认无误 / 已修改 / 忽略（3 会打开原因输入框） |
| U | 撤销当前条的处理。本次处理过的问题留在原位，显示署名行，可以用 J / K 回到它再按 U；页面加载前已处理的折叠在「已处理」里（v0.2） |
| ? | 显示快捷键说明 |

批量处理只开放给「提示」级（FR-M3-07）：勾选后「批量确认无误」；键盘 X 勾选当前条。

快捷键说明（? 打开）**按页面只列能用的键**（v0.2）：读标页是 J / K、Enter、?；查标的问题列表是 J / K、O / Enter、1 / 2 / 3、X、U、?。

### 8.3 扣点前先告知

- 会扣点的按钮旁边写：「扣 1 次检查 · 剩 12 次」。24 小时内复查不扣点时写：「24 小时内复查，不扣额度」。
- 失败、超时、取消的任务，在结果里写明「已退回」。
- 额度不足时按钮仍可点，点击后说明不足并给续费入口，不提前把按钮置灰（用户需要知道原因）。

### 8.4 不阻断

- 致命问题没处理完时，「导出报告」仍可用；导出前在按钮旁提示「还有 2 项致命问题待处理，报告会如实列出」。
- 「标记已递交」同理，只提示，不拦截。

---

## 9. 文案规范

### 9.1 术语跟着法律体系和采购方式走

| 概念 | 政府采购 · 公开招标 | 政府采购 · 竞争性磋商 / 谈判 | 招标投标体系 |
|---|---|---|---|
| 用户提交的文件 | 投标文件 | 响应文件 | 投标文件 |
| 被判无效 | 投标无效 | 无效响应 | 否决投标 |
| 招标方文件 | 招标文件 | 磋商文件 / 谈判文件 | 招标文件 |
| 分组 | 采购包 | 采购包 | 标段 |

界面文案用变量写（如 `{投标文件}`），按项目识别出的体系和采购方式替换，不在代码里写死。

### 9.2 禁用词

| 不用 | 原因 | 改为 |
|---|---|---|
| 保证、确保、零废标、100%、万无一失 | 产品红线 3 | 辅助检查、风险提示 |
| 通过、合格、审核通过、检查通过 | 暗示结论担保 | 已处理、就绪（附说明）、满足（仅参数对比） |
| 智能引擎、规则命中、要素、实体 | 不是投标人的话 | 用具体的业务词 |
| 建议报价、报价区间、合理报价 | 产品红线 6 | （不出现） |
| 真伪、伪造、有效印章 | 产品红线 7 | 「有无签章」「签章位置」 |
| ！（惊叹号）、「请注意」「警告」开头 | 品牌性格「沉着」 | 直接写事实和后果 |

### 9.3 格式

| 内容 | 写法 |
|---|---|
| 页码 | 「第 41 页」；带文件时「招标文件 · 第 41 页」「技术册 · 第 12 页」 |
| 金额 | 沿用招标文件的单位，保留两位小数：「132.00 万元」；不换算单位 |
| 日期时间 | 界面：「11月2日 14:20」（跨年时带年份）；报告和留痕：「2026-11-02 14:20」 |
| 日期输入 | 输入框里写「2026-11-20 09:30」（年-月-日 + 24 小时制时间），配日期选择器（§7.22），也可以直接键入；提交后在界面上显示为「11月20日 09:30」（v0.2，Q10，已确认 2026-11-03） |
| 数量 | 「致命 2 项」「共 186 页」 |
| 标点 | 中文用全角标点，引用原文照录 |

### 9.4 常用句式

| 场景 | 写法 |
|---|---|
| 未找到响应 | 「未找到对 ★ 条款的响应。已查找：商务册、技术册、资格证明册。」 |
| 疑似不满足 | 「技术偏离表第 12 行响应「内存 256G」，要求「≥512G」。」 |
| 后果 | 「这一项会导致投标无效。」（体系为招标投标时：「这一项会导致投标被否决。」） |
| 改法 | 「请在技术偏离表第 12 行补充响应。」 |
| 签章 | 「投标函第 2 页的签章位置未发现盖章。本检查只看有无，不鉴定真伪。」 |

### 9.5 少写说明（v0.2）

用户反馈：「文案多了反而会增加 AI 感。」界面上只留做决定需要的信息：

- 统计卡只写标题和数字，不加「在 2 个项目里」这类小字。
- 不重复：页头、提醒条、统计卡说的是同一件事时，只留一处。
- 解释性的话放进悬停提示，例如「就绪」的说明。
- 产品红线要求明示的不能删：
  - 扣点按钮旁的「扣 1 次 · 剩 37 次」（8.3）；
  - 签章的「只看有无，不鉴定真伪」（红线 7）；
  - 报告首页的检查范围和免责声明。

---

## 10. 无障碍检查清单

- [ ] 文字对比度 ≥ 4.5:1（大字 ≥ 3:1），控件边框 ≥ 3:1 —— 见 3.2
- [ ] 级别、状态不只靠颜色 —— 见 3.3
- [ ] 所有操作可用键盘完成；焦点环 2px 墨色 + 2px 间隙，任何背景上都看得见
- [ ] 只有图标的按钮有 `aria-label`
- [ ] 原文高亮除颜色外还有底边线（v0.2，原为描边框）
- [ ] 尊重「减少动态效果」系统设置；动效时长 120–200ms，不闪烁
- [ ] 浏览器缩放到 200% 时内容不丢失（可以横向滚动）

---

## 11. 产品红线自查（对应 AGENTS.md）

| 红线 | 本规范怎么落实 |
|---|---|
| 1 辅助定位四件套 | AI 标识（7.16）、清单（7.5）、处理按钮与署名（7.4、8.1）、处理记录（7.5、8.1） |
| 2 可复核 | 出处组件是固定组成部分（7.3）；无出处进待确认区（7.6） |
| 3 禁用绝对化表述 | 禁用词表（9.2）；报告首页覆盖范围与免责声明（7.17） |
| 4 不阻断用户 | 8.4；就绪状态只提示（7.9） |
| 5 不编造 | 资质只来自资质库；缺失时显示占位「待补录」，不生成 |
| 6 不生成报价 | 参数表与报价检查只显示投标文件读出的数字；禁用词表 |
| 7 签章只看有无 | 签章句式（9.4） |
| 9 额度即货币 | 扣点前告知、退回可见（7.10、8.3） |
| logo 不当「通过」章 | 报告 logo 只在页眉（7.17）；绿色不表示「通过」（3.4） |

---

## 12. 已确认的事项（U1–U4，2026-11-02）

| 编号 | 事项 | 结论 | 理由 |
|---|---|---|---|
| U1 | 表单错误、系统错误、额度用完、截止临近都不用红色，统一用赭色 | 采纳 | 让红色只代表「可能导致投标无效」；色弱测试显示红 / 赭本来就靠形状区分，错误提示照样有文字和图标 |
| U2 | MVP 只做桌面 Web（最小 1280 宽），不做手机适配和暗色模式 | 采纳 | 读标和查标需要原文并排，手机屏放不下；变量已按语义分层，以后可加 |
| U3 | 图标用 Lucide（ISC 许可） | 采纳 | 线性风格和校样方向一致，图标全，可商用 |
| U4 | 「致命」级问题点「确认无误」时，也要求写一句说明（目前需求只要求「忽略」填原因） | 采纳 | 对致命问题说「没问题」，等于认为系统判断错了：留下说明既便于审计，也是最有价值的误报反馈。会改动 FR-M3-07 |

**U5（2026-11-03）**：UI 风格定稿为 `ui-demo/explore/workbench-d5.html`。要点：
- 白色主调，浅灰从墨色派生；
- 圆角三档；
- 墨色渐变窄侧栏，上图标、下文字，不折叠；
- 透明顶栏；
- 只用功能图标；
- 少写说明。

详见 `docs/decisions.md` U5。

**Q1–Q12（2026-11-03）**：UI demo 发现的规范缺口，全部按建议确认，已写进第 3、4、7、9 节（见文件头的 v0.2 补充），汇总表在 `ui-demo/index.html` 第 03 节。

前端不用带样式的 UI 框架（AR10）：组件样式直接引用 `tokens.css`，复杂交互用无样式组件库 Reka UI 打底。

---

## 13. 预览与维护

- 预览组件页（字体从 `logo/.work/fonts` 加载，没有该目录时会退回系统字体）：

  ```bash
  cd docs/design && python3 -m http.server 8765
  # 浏览器打开 http://127.0.0.1:8765/system/components.html
  ```

- 改颜色、字号、间距：只改 `system/tokens.css`，再同步本文的表格。
- 改组件样式：改 `system/components.css`，预览页和原型会一起变。
- 新增组件：先在本文第 7 节写用途、结构、状态、规则，再加到 `components.css` 和预览页。
- 本规范变化影响 VI 手册（颜色、字体）时，同步更新 `vi/vi-manual.html` 并重出 PDF。