eric/bid-doctor
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs(design): 按 v0.2 重刷全部 UI demo，确认 Q1–Q13 与 U 键规则

Browse Source 
- ui-demo：控件、表单、卡片、列表、工作台、读标六页按 v0.2 重刷；侧栏与顶栏框架、项目行、署名行、可键入日期输入、对照布局等收回 demo.css / demo.js 共用
- system：tokens 补悬停 / 按下 / 遮罩色、数字字阶与原文排版变量；components.css 按 v0.2 改写并清除裸色值
- design-system.md：写入 Q1–Q13 答案，新增开关、分页、下拉、日期选择等组件规则，类别标签、待确认区、选中态、对照布局按 v0.2 修订
- Q13：额度流水记录 0 点的「免扣」行，FR-M6-03 与领域模型同步；U 键改为撤销当前条
- decisions.md 记录 Q1–Q12、Q13 与 U 键；AGENTS.md 同步进度

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
YANG JIANKUAN
2026-11-03 16:07:15 +08:00
parent 067cad2120
commit 7f9592ad16
16 changed files with 2625 additions and 1252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
docs/design/system/components.css
View File

@@ -1,183 +1,244 @@
/* 标博士 · 组件样式 v0.1
/* 标博士 · 组件样式 v0.2 · 2026-11-03
* 依赖 tokens.css。规范见 docs/design/design-system.md §7；组件预览 components.html 和原型 docs/prototype/ 共用本文件。
* 原型阶段的参考实现：技术架构选定组件库后，按这里的视觉去配置组件库主题，不必照搬选择器。 */
* 原型阶段的参考实现：前端不用带样式的 UI 框架（AR10），正式实现按这里的视觉写组件样式，不必照搬选择器。
* v0.2（决策 U5，定稿样张 ui-demo/explore/workbench-d5.html）：
* - 只有一种容器：白卡片，1px 发丝线，圆角 12，无阴影；卡片里不再套面板；
* - 表头无底色、无粗线，12px 辅助灰列名；行间发丝线；行悬停 --c-n50；
* - 圆角三档：标签 6、控件 8、卡片 / 对话框 12；按钮高 36 / 32 / 40；
* - 中性标签只有一种：--c-n100 实底、无描边；问题级别标签形状不变（致命实心、重要描边、提示无框）；
* - Q1–Q12（2026-11-03 已确认）：流水「+」用墨色（Q1）；AI 正文始终墨色（Q2）；选中 = --c-n50 底 + 左侧 3px 墨色竖条（Q3）；
* 不写裸色值（Q6）；数字字号三档（Q7）。
* - 收尾（2026-11-03）：.fig 默认字号进共用层；致命问题行不再加红竖线（级别只靠实心「致命」标签）；
* 原文纸面用 --font-doc / --fs-doc / --lh-doc，原句高亮改为「蓝铅笔浅底 + 蓝色底边」。 */
/* ---- 基础 ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--fs-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.card{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-5) var(--sp-6)}
[hidden]{display:none!important}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.fig{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:600}
.fig{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);font-size:var(--fs-figure-sm)}
/* 数字字号（Q7）：正文里独立出现的数字默认 15（--fs-figure-sm）；12px 小字里 13（--fs-figure-xs）；统计大数字用 .big（--fs-figure 28） */
:is(small,.cap,.note,.cost,.flag,.sev,.tag,.chip,.msg,.cite-src,.proj-sub,.psub) .fig,table.data th .fig,table.data a .fig{font-size:var(--fs-figure-xs)}
.note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);margin:var(--sp-3) 0 0}
/* ---- 卡片：全页唯一的容器 ----
* 整块卡片：.card（自带内边距）。
* 分区卡片：.card.flush 不带内边距，里面用 .card-h（标题行）/ .card-b（正文）/ .card-f（底栏，带发丝线），左右边距统一 --card-x。 */
.card{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--card-y) var(--card-x)}
.card.flush{padding:0}
.card.flush > .card-h{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--card-h-min);margin:0;padding:var(--sp-3) var(--card-x)}
.card-h h2,.card-h h3{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
.card-b{padding:var(--sp-1) var(--card-x) var(--sp-4)}
.card-f{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--card-x);border-top:var(--line) solid var(--border-subtle)}
/* ---- 级别标签 ---- */
.sev{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-sm);font:var(--fw-bold) var(--fs-caption)/1 var(--font-sans);white-space:nowrap}
.sev .fig{margin-left:4px;font-size:13px}
/* ---- 级别标签与中性标签 ---- */
.sev{display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--tag-h);padding:0 var(--sp-2);border-radius:var(--radius-tag);font:var(--fw-bold) var(--fs-caption)/1 var(--font-sans);white-space:nowrap}
.sev .fig{font-size:var(--fs-figure-xs)}
.sev.fatal{background:var(--sev-fatal);color:var(--text-on-dark)}
.sev.major{border:var(--line-sev) solid var(--sev-major);color:var(--sev-major-text)}
.sev.hint{background:var(--sev-hint-soft);color:var(--sev-hint)}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap}
.tag.status{border-color:var(--border-control);color:var(--text-primary)}
.tag.ai{border-color:var(--ai);color:var(--ai)}
/* 中性标签（状态、类别、包）：只有这一种，--c-n100 实底、无描边、墨色字 */
.tag{display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--tag-h);padding:0 var(--sp-2);border-radius:var(--radius-tag);background:var(--c-n100);font-size:var(--fs-caption);line-height:1;color:var(--text-primary);white-space:nowrap}
.tag.status{background:var(--c-n100)}
/* AI 标识（Q2）：蓝铅笔 1px 描边 + 蓝铅笔字；AI 产出的正文本身仍是墨色 */
.tag.ai{background:none;box-shadow:inset 0 0 0 1px var(--ai);color:var(--ai)}
.flag{font-size:var(--fs-caption);color:var(--text-secondary)}
/* ---- 按钮 ---- */
.btn{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-primary);font:var(--fs-body)/1 var(--font-sans);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
/* ---- 链接 ---- */
a.plain,.lnk{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;transition:text-decoration-color var(--dur-fast) var(--ease)}
a.plain:hover,.lnk:hover{text-decoration-color:var(--c-ink)}
/* 有悬停说明的文字（如「就绪」）：虚线下划线 */
.hint-u{text-decoration:underline dashed;text-decoration-color:var(--hint-underline);text-underline-offset:4px;cursor:help}
/* ---- 按钮 ----
* 主按钮墨底白字（页面级一屏一个，对话框里可以有自己的主按钮，Q12）；次按钮白底 + 控件边框；文字按钮悬停出 --c-n100。 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-h);padding:0 var(--btn-px);border-radius:var(--radius-ctl);border:var(--line) solid var(--border-control);background:var(--bg-surface);color:var(--text-primary);font:var(--fs-body)/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
a.btn{text-decoration:none}
[hidden]{display:none!important}
.btn:hover{background:var(--bg-hover)}
.btn.primary{background:var(--c-ink);border-color:var(--c-ink);color:var(--text-on-dark)}
.btn.primary:hover{background:#34404D}
.btn.text{border-color:transparent;background:none}
.btn.text:hover{background:var(--bg-hover)}
.btn.sm{height:var(--control-h-sm);padding:0 8px}
.btn.lg{height:var(--control-h-lg);padding:0 16px}
.btn[disabled]{color:var(--text-disabled);background:var(--bg-sunken);border-color:var(--bg-sunken);cursor:not-allowed}
.cost{font-size:var(--fs-caption);color:var(--text-secondary)}
.cost .fig{font-weight:500;font-size:13px}
a.plain{color:var(--text-primary);text-underline-offset:3px}
.btn:hover{background:var(--c-n50);border-color:var(--c-ink)}
.btn:active{background:var(--c-n100)}
.btn.primary{background:var(--c-ink);border-color:var(--c-ink);color:var(--text-on-dark);font-weight:var(--fw-bold)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.primary:active{background:var(--primary-active);border-color:var(--primary-active)}
.btn.text{border-color:transparent;background:none;padding:0 var(--sp-3)}
.btn.text:hover{background:var(--c-n100);border-color:transparent}
.btn.sm{height:var(--control-h-sm);padding:0 var(--btn-px-sm)}
.btn.text.sm{padding:0 10px}
.btn.lg{height:var(--control-h-lg);padding:0 var(--btn-px-lg)}
.btn[disabled],.btn[disabled]:hover{color:var(--text-disabled);background:var(--c-n100);border-color:var(--c-n100);cursor:not-allowed;font-weight:var(--fw-regular)}
.btn.text[disabled]{background:none;border-color:transparent}
.cost{font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap}
.cost .fig{font-size:var(--fs-figure-xs);color:var(--text-primary)}
/* ---- 问题行 + 页边批注 ---- */
.results{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.results-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border-subtle)}
.results{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden}
.results-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);padding:var(--sp-5) var(--card-x);border-bottom:var(--line) solid var(--border-subtle)}
.results-head h3{font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-serif);margin:0}
.results-head .proj{color:var(--text-secondary)}
.results-head .counts{margin-left:auto;display:flex;gap:var(--sp-2)}
.finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--margin-note-w);gap:var(--sp-8);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border-subtle)}
.finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--margin-note-w);gap:var(--sp-8);padding:var(--sp-5) var(--card-x);border-top:var(--line) solid var(--border-subtle)}
.finding:first-of-type{border-top:0}
.finding.is-fatal::before{content:"";position:absolute;left:0;top:var(--sp-5);bottom:var(--sp-5);width:3px;background:var(--sev-fatal)}
/* v0.2 收尾：「致命」行不再加左侧红竖线，级别只靠实心「致命」标签（与工作台一致）；左侧 3px 竖条只表示「当前条」（墨色，§7.18） */
.f-head{display:flex;align-items:center;gap:var(--sp-2)}
.f-title{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
.f-head .flag{margin-left:var(--sp-1);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 5px;line-height:18px}
.f-head .flag{margin-left:var(--sp-1);border-radius:var(--radius-tag);background:var(--c-n100);padding:0 6px;line-height:var(--tag-h)}
.f-text{margin:var(--sp-2) 0 0;color:var(--text-primary)}
.f-text + .f-text{margin-top:0}
.f-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3)}
.f-actions .feedback{margin-left:auto;font-size:var(--fs-caption)}
/* 人工确认署名（§3.3、Q2）：绿 ✓ + 姓名 + 时间 + 动作 */
.sign{margin-top:var(--sp-3);font-size:var(--fs-body);color:var(--confirmed);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.sign b{font-weight:var(--fw-bold)}
.sign .fig{font-weight:500}
.sign .fig{font-weight:var(--fw-medium)}
.sign .undo{color:var(--text-secondary);font-size:var(--fs-caption);margin-left:var(--sp-2)}
/* 出处（§7.3）：左侧 2px 蓝铅笔竖线 + 原句 */
.cite{position:relative;border-left:2px solid var(--ai);padding:2px 0 2px var(--sp-3)}
.cite + .cite{margin-top:var(--sp-3)}
.finding .cite:first-child::before{content:"";position:absolute;left:calc(-1 * var(--sp-8) - 2px);top:11px;width:calc(var(--sp-8) - 4px);border-top:1.5px dashed var(--ai)}
.cite-src{display:block;color:var(--ai);font-size:var(--fs-caption);line-height:var(--lh-caption);text-decoration:none}
.cite-src:hover{color:var(--ai-strong);text-decoration:underline;text-underline-offset:3px}
.cite-src .fig{font-size:13px;font-weight:600}
a.cite-src:hover{color:var(--ai-strong);text-decoration:underline;text-underline-offset:3px}
.cite-src .fig{font-size:var(--fs-figure-xs)}
.cite q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;quotes:none;margin-top:2px;line-height:var(--lh-read);color:var(--text-primary)}
.cite.on{border-left-width:4px;padding-left:calc(var(--sp-3) - 2px)}
.cite q mark{background:var(--ai-soft);color:inherit;padding:0 1px}
.cite.missing{border-left-style:dashed}
.cite.missing p{margin:2px 0 0;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.ocr{font:600 11px/1 var(--font-figures);color:var(--text-secondary);border:1px solid var(--border-subtle);padding:1px 3px;border-radius:2px;margin-left:4px;vertical-align:1px}
.folded{padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--border-subtle);background:var(--bg-sunken);color:var(--text-secondary);font-size:var(--fs-body)}
/* 行内出处链接（d5）：蓝铅笔字，悬停出蓝铅笔浅底；用在列表行右侧 */
.cite-link{display:inline-flex;align-items:center;gap:var(--sp-1);margin:-2px -6px;padding:2px 6px;border-radius:var(--radius-ctl);color:var(--ai);font-size:var(--fs-body);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease)}
.cite-link:hover{background:var(--ai-soft);color:var(--ai-strong)}
.cite-link .fig{font-size:var(--fs-figure-sm)}
.ocr{font:var(--fw-bold) 11px/1 var(--font-figures);color:var(--text-secondary);background:var(--c-n100);padding:2px 4px;border-radius:var(--radius-xs);margin-left:4px;vertical-align:1px}
.folded{padding:var(--sp-3) var(--card-x);border-top:var(--line) solid var(--border-subtle);color:var(--text-secondary);font-size:var(--fs-body)}
/* ---- 清单与待确认 ---- */
.pending{border:1.5px dashed var(--ai);border-radius:var(--radius-sm);background:var(--bg-surface);padding:var(--sp-4) var(--sp-5)}
/* ---- 清单与待确认 ----
* .pending（虚线蓝框）是 v0.1 的待确认区，只剩原型在用；v0.2 起待确认是清单顶部的分组（ui-demo/demo.css 的 .grp-h.ai，§7.6），原型重刷时替换 */
.pending{border:1.5px dashed var(--ai);border-radius:var(--radius-card);background:var(--bg-surface);padding:var(--card-y) var(--card-x)}
.pending h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);color:var(--ai)}
.pending > p{margin:var(--sp-1) 0 var(--sp-3);color:var(--text-secondary)}
.item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle);align-items:start}
.item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:var(--line) solid var(--border-subtle);align-items:start}
.item:first-of-type{border-top:0}
.imp{font-size:var(--fs-title);line-height:var(--lh-body);text-align:center}
.item .t{font-weight:var(--fw-bold)}
.item .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.item .side{text-align:right;font-size:var(--fs-caption);line-height:var(--lh-caption)}
/* 选中（Q3）：--c-n50 底 + 左侧 3px 墨色竖条；蓝色只留给原文高亮和出处 */
.item.sel{background:var(--c-n50);box-shadow:inset 3px 0 0 var(--c-ink)}
.src-ai{color:var(--ai)}
.old{text-decoration:line-through;color:var(--text-secondary)}
.list-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.list-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.list-head h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
/* ---- 参数对照表 ---- */
table.data{width:100%;border-collapse:collapse;background:var(--bg-surface);border:1px solid var(--border-subtle)}
table.data th{background:var(--bg-sunken);text-align:left;font-weight:var(--fw-bold);font-size:var(--fs-caption);color:var(--text-secondary);padding:var(--sp-2) var(--sp-3);border-bottom:2px solid var(--border-strong);white-space:nowrap}
/* ---- 表格（参数对照表、流水、项目列表）----
* v0.2：表头无底色、无粗线，12px 辅助灰列名；行间发丝线；首尾列与卡片左右边距对齐。
* 单独摆放时自带卡片外框；放进 .card.flush 时去掉外框。 */
table.data{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card)}
.card table.data,.results table.data{border:0;border-radius:0;background:none}
table.data th{text-align:left;font-weight:var(--fw-regular);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);padding:var(--sp-3) var(--sp-3) var(--sp-2);white-space:nowrap;background:none}
table.data td{padding:10px var(--sp-3);border-top:var(--line) solid var(--border-subtle);vertical-align:top;height:44px}
table.data th:first-child,table.data td:first-child{padding-left:var(--card-x)}
table.data th:last-child,table.data td:last-child{padding-right:var(--card-x)}
.card:not(.flush) table.data th:first-child,.card:not(.flush) table.data td:first-child{padding-left:0}
.card:not(.flush) table.data th:last-child,.card:not(.flush) table.data td:last-child{padding-right:0}
table.data td:first-child{white-space:nowrap}
table.data td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-subtle);vertical-align:top;height:40px}
table.data tr:last-child td{border-bottom:0}
table.data .num{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;white-space:nowrap}
table.data tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-card)}
table.data tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-card)}
table.data .num{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);font-size:var(--fs-figure-sm);white-space:nowrap}
table.data .r{text-align:right}
table.data a{color:var(--ai);text-decoration:none;font-size:var(--fs-caption);white-space:nowrap}
table.data a .fig{font-size:13px}
table.data a:not(.btn):not(.plain):not(.lnk){color:var(--ai);text-decoration:none;font-size:var(--fs-caption);white-space:nowrap}
table.data a:not(.btn):not(.plain):not(.lnk):hover{color:var(--ai-strong);text-decoration:underline;text-underline-offset:3px}
table.data a .fig{font-size:var(--fs-figure-xs)}
table.data.hover tbody tr{cursor:pointer}
table.data.hover tbody tr td{transition:background-color var(--dur-fast) var(--ease)}
table.data.hover tbody tr:hover td{background:var(--bg-hover)}
/* 选中行（Q3）：与读标清单一致 */
table.data tbody tr.sel td{background:var(--c-n50)}
table.data tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--c-ink)}
/* 参数对照表「判断」列（§7.7）：只用四个词；同一行另有「级别」列（Q5） */
.verdict{font-weight:var(--fw-bold);white-space:nowrap}
.verdict.fatal{color:var(--sev-fatal)}
.verdict.major{color:var(--sev-major-text)}
.verdict.manual{color:var(--text-secondary);font-weight:var(--fw-regular)}
/* ---- 原文查看器 ---- */
.viewer{background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;flex-direction:column}
.viewer-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);font-size:var(--fs-caption)}
.viewer-bar b{font-size:var(--fs-body)}
.viewer-bar .pager{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
.sheet{margin:var(--sp-4) auto;width:86%;background:#fff;box-shadow:0 1px 2px rgba(29,39,51,.12);padding:28px 32px;font:13px/1.9 "Songti SC","SimSun",var(--font-serif);color:#222}
.viewer{background:var(--c-n100);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);display:flex;flex-direction:column;overflow:hidden}
.viewer-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);background:var(--bg-surface);border-bottom:var(--line) solid var(--border-subtle);font-size:var(--fs-caption)}
.viewer-bar b{font-size:var(--fs-body);white-space:nowrap}
.viewer-bar > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-bar .pager{margin-left:auto;display:flex;flex:none;gap:var(--sp-2);align-items:center;white-space:nowrap}
.sheet{margin:var(--sp-4) auto;width:86%;background:var(--c-white);box-shadow:var(--shadow-sheet);padding:28px 32px;font:var(--fs-doc)/var(--lh-doc) var(--font-doc);color:var(--text-primary)}
.sheet p{margin:0 0 6px}
.sheet .hl{background:var(--ai-soft);outline:1px solid var(--ai);outline-offset:1px}
.sheet .hl.on{outline-width:2px}
.sheet .faint{color:#888}
/* 原句高亮（§7.8）：蓝铅笔浅底 + 蓝色底边；跨行时每一行都带底边，换行处不断开（box-decoration-break）。当前出处底边加粗为 2px */
.sheet .hl{background:var(--ai-soft);box-shadow:inset 0 -1px 0 var(--ai);padding:1px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sheet .hl.on{box-shadow:inset 0 -2px 0 var(--ai)}
.sheet .faint{color:var(--text-secondary)}
/* ---- 工作台 ---- */
.proj-name{font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
.proj-sub{font-size:var(--fs-caption);color:var(--text-secondary)}
.proj-sub{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.due-soon{color:var(--warn-text)}
.due-today{color:var(--warn-text);font-weight:var(--fw-bold)}
.due-past{color:var(--text-secondary)}
.ready{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* ---- 额度 ---- */
.quota .big{font:600 var(--fs-figure)/var(--lh-figure) var(--font-figures);font-variant-numeric:tabular-nums}
.quota .unit{color:var(--text-secondary);margin-left:4px}
.bar{height:6px;background:var(--bg-sunken);border-radius:1px;overflow:hidden;margin:var(--sp-2) 0}
.bar i{display:block;height:100%;background:var(--c-ink)}
.quota .big{font:var(--fw-bold) var(--fs-figure)/var(--lh-figure) var(--font-figures);font-variant-numeric:tabular-nums}
.quota .unit{color:var(--text-secondary);margin-left:4px;font-family:var(--font-figures);font-variant-numeric:tabular-nums}
.bar{height:6px;background:var(--c-n100);border-radius:3px;overflow:hidden;margin:var(--sp-2) 0}
.bar i{display:block;height:100%;background:var(--c-ink);border-radius:3px}
.bar.warn i{background:var(--warn)}
.flow td.plus{color:var(--confirmed)}
/* 流水「+ / −」（Q1）：都用墨色，靠符号区分；绿色只表示人工确认 */
.flow td.plus,.flow td.minus{color:var(--text-primary)}
/* ---- 提醒 ---- */
.alert{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--c-ink);background:var(--bg-surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* ---- 提醒（§7.12）----
* v0.2：和卡片同规格的白条（圆角 12、发丝线），不用彩色浅底和左边线；颜色只在图标和关键字上。 */
.alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:14px var(--card-x);background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card)}
.alert + .alert{margin-top:var(--sp-3)}
.alert.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.alert.warn b{color:var(--warn-text)}
.alert.done{border-left-color:var(--confirmed)}
.alert.warn b,.alert .when{color:var(--warn-text);font-weight:var(--fw-bold)}
.alert p{margin:0}
.ico{flex:none;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font:700 12px/1 var(--font-sans);margin-top:2px}
.alert > .ic{flex:none;margin-top:2px}
.alert.warn > .ic{color:var(--warn)}
.alert.done > .ic{color:var(--confirmed)}
.ico{flex:none;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font:var(--fw-bold) var(--fs-caption)/1 var(--font-sans);margin-top:2px}
.ico.i{border:1.5px solid var(--c-ink)}
.ico.w{border:1.5px solid var(--warn);color:var(--warn-text)}
.ico.ok{background:var(--confirmed);color:#fff}
.ico.ok{background:var(--confirmed);color:var(--c-white)}
/* ---- 表单 ---- */
.field{display:flex;flex-direction:column;gap:6px;max-width:360px}
.field + .field{margin-top:var(--sp-4)}
.field label{font-weight:var(--fw-bold)}
.field label small{font-weight:var(--fw-regular);color:var(--text-secondary)}
.input{height:var(--control-h);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:0 10px;font:var(--fs-body) var(--font-sans);color:var(--text-primary);background:var(--bg-surface)}
.input{height:var(--control-h);border:var(--line) solid var(--border-control);border-radius:var(--radius-ctl);padding:0 var(--sp-3);font:var(--fs-body) var(--font-sans);color:var(--text-primary);background:var(--bg-surface)}
.input::placeholder{color:var(--text-secondary)}
.field.err .input{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.field .msg{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.field.err .msg{color:var(--warn-text);display:flex;gap:6px;align-items:center}
.field.err .msg .ico{width:14px;height:14px;font-size:10px;margin:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips .btn{height:24px;padding:0 8px;font-size:var(--fs-caption)}
.chips .btn{height:26px;padding:0 var(--sp-2);font-size:var(--fs-caption);border-radius:var(--radius-tag)}
/* ---- 进度 ---- */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:var(--sp-3);align-items:center;padding:6px 0}
.steps .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-control);flex:none;display:grid;place-items:center;font-size:11px}
.steps .done .dot{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.steps .done .dot{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-white)}
.steps .now .dot{border-color:var(--c-ink);border-width:2px}
.steps .now{font-weight:var(--fw-bold)}
.steps .todo{color:var(--text-secondary)}
/* ---- 报告页眉 ---- */
.report{background:#fff;border:1px solid var(--border-subtle);max-width:620px;padding:28px 36px;font-size:13px;line-height:1.6}
.report-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-ink);padding-bottom:10px}
/* ---- 报告页眉（模拟 PDF，字号按纸面，不跟界面字阶） ---- */
.report{background:var(--c-white);border:var(--line) solid var(--border-subtle);max-width:620px;padding:28px 36px;font-size:13px;line-height:1.6}
.report-head{display:flex;justify-content:space-between;align-items:center;border-bottom:var(--line) solid var(--c-ink);padding-bottom:10px}
.report-head img{height:26px}
.report-head span{font-size:11px;color:var(--text-secondary)}
.report h3{font:600 22px/1.4 var(--font-serif);margin:22px 0 4px}
.report h3{font:var(--fw-bold) 22px/1.4 var(--font-serif);margin:22px 0 4px}
.report dl{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;margin:14px 0}
.report dt{color:var(--text-secondary)}
.report dd{margin:0}
.scope{border:1px solid var(--border-subtle);padding:10px 14px;margin-top:10px}
.scope{border:var(--line) solid var(--border-subtle);padding:10px 14px;margin-top:10px}
.scope b{display:block;margin-bottom:2px}
.report-foot{margin-top:18px;padding-top:8px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}
.report-foot{margin-top:18px;padding-top:8px;border-top:var(--line) solid var(--border-subtle);display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}
@media (max-width:1100px){

53
docs/design/system/tokens.css
View File

@@ -4,6 +4,8 @@
* 对比度一律按 WCAG 2.x 公式计算。v0.1 的注释数值以校样纸 #F5F6F3 为底，括号内为白底；
* v0.2 起页面底色改为 --c-n50 #F8F8F9（比校样纸更亮），对比度介于两者之间。
* v0.2（决策 U5）：页面改为白色主调 + 墨色派生的中性浅灰；圆角三档；控件高 36；墨色渐变窄侧栏。
* v0.2 补充（2026-11-03，Q6 / Q7 已确认）：悬停 / 按下 / 遮罩等语义色、数字字号三档、卡片与页面内边距。
* 组件里不再写裸色值（#34404D、#222、#888 之类），一律用这里的变量。
*/
:root {
/* ---------- 基础色板：校样色系 ---------- */
@@ -30,6 +32,12 @@
--c-n50: #F8F8F9; /* 墨 3%：页面底色、行 / 格悬停 */
--c-n100: #F1F2F3; /* 墨 6%：中性标签底、文字按钮悬停、进度槽 */
--c-nline: #E6E7E9; /* 墨 11%：卡片边框、发丝分隔线 */
--c-n300: #BBBEC2; /* 墨 30%（v0.2）：普通链接的下划线（悬停时变墨色） */
--c-n400: #A5A9AD; /* 墨 40%（v0.2）：带悬停说明的文字的虚线下划线（如「就绪」） */
/* 墨色的交互态（v0.2，Q6）：主按钮、选中日期等墨底元素 */
--c-ink-hover: #38414B; /* 墨 88% 混白：悬停变浅 */
--c-ink-active: #171F29; /* 墨 80% 混黑：按下变深 */
/* 侧栏（v0.2）：墨色竖向渐变，下端混 18% 蓝铅笔得到深墨蓝；只作底色，不承担 AI 语义 */
--side-top: var(--c-ink);
@@ -40,6 +48,9 @@
--side-hover: rgba(255, 255, 255, .07);
--side-active: rgba(255, 255, 255, .14);
--side-line: rgba(255, 255, 255, .12);
--side-dots: rgba(255, 255, 255, .14); /* 底部点阵（v0.2） */
--side-avatar-bg: rgba(255, 255, 255, .16); /* 44px 头像底（v0.2） */
--side-avatar-ring: rgba(255, 255, 255, .22); /* 头像 1px 外圈（v0.2） */
/* 套餐标签（v0.2）：只用于账户区的套餐标签，从赭色派生的金色阶梯；靠深浅区分档次 */
--plan-free-bg: rgba(255, 255, 255, .12);
@@ -76,12 +87,21 @@
--sev-major-text: var(--c-ochre-ink);
--sev-major-soft: var(--c-ochre-soft);
--sev-hint: var(--c-sub);
--sev-hint-soft: var(--c-sunken);
--sev-hint-soft: var(--c-n100); /* v0.2：原为 --c-sunken */
--warn: var(--c-ochre); /* 系统提醒、表单错误、额度预警：不用红 */
--warn-text: var(--c-ochre-ink);
--warn-soft: var(--c-ochre-soft);
/* 交互与浮层（v0.2，Q6） */
--link-underline: var(--c-n300); /* 普通链接：墨色字 + 浅下划线，悬停下划线变墨 */
--hint-underline: var(--c-n400); /* 有悬停说明的文字：虚线下划线 */
--primary-hover: var(--c-ink-hover);
--primary-active: var(--c-ink-active);
--scrim: rgba(29, 39, 51, .32); /* 对话框遮罩：墨 32% */
--topbar-glass: rgba(255, 255, 255, .82); /* 顶栏滚动后：半透明白 + 毛玻璃 */
--on-dark-line: rgba(255, 255, 255, .24); /* 墨底浮层（轻提示）里的分隔线 */
/* ---------- 字体 ---------- */
--font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
--font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
@@ -94,7 +114,13 @@
--fs-title: 16px; --lh-title: 24px; /* 问题标题、卡片标题、区块标题 */
--fs-h2: 20px; --lh-h2: 28px; /* 页面标题（宋体） */
--fs-h1: 24px; --lh-h1: 32px; /* 工作台、报告标题（宋体） */
--fs-figure: 30px; --lh-figure: 36px; /* 统计数字（Barlow） */
--fs-figure: 28px; --lh-figure: 36px; /* 统计数字、额度剩余（Barlow 600）。v0.2：原 30 */
--fs-figure-sm: 15px; --lh-figure-sm: 22px; /* 正文行里独立出现的数字：表格数值、日期、页码、筛选计数（v0.2，Q7） */
--fs-figure-xs: 13px; --lh-figure-xs: 20px; /* 12px 小字行里的数字：标签计数、出处页码、扣点说明（v0.2，Q7） */
/* .fig 默认用 --fs-figure-sm；12px 小字里自动换成 --fs-figure-xs；统计大数字（.big）用 --fs-figure（见 components.css） */
/* 原文排版（v0.2）：原文查看器里的「纸页」模拟招标文件的打印效果，用宋体，不跟界面字阶 */
--font-doc: "Songti SC", "SimSun", var(--font-serif);
--fs-doc: 13px; --lh-doc: 24px;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 600;
@@ -104,31 +130,50 @@
--sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
/* ---------- 圆角、线、阴影 ---------- */
--radius-tag: 6px; /* 标签、问题级别标签（v0.2） */
--radius-xs: 4px; /* 复选框、开关滑钮、套餐标签等 ≤ 16px 的小件（v0.2，Q4） */
--radius-tag: 6px; /* 标签、问题级别标签、开关轨道（v0.2） */
--radius-ctl: 8px; /* 按钮、输入框、菜单项、下拉（v0.2） */
--radius-card: 12px; /* 卡片、对话框、浮层、内容区左上角（v0.2） */
--radius-sm: var(--radius-ctl); /* 兼容 v0.1 的写法，新代码用上面三个 */
--radius-md: var(--radius-card);
--line: 1px;
--line-sev: 1.5px; /* 「重要」标签描边 */
--shadow-overlay: 0 4px 16px rgba(29, 39, 51, .14), 0 1px 3px rgba(29, 39, 51, .10);
--shadow-overlay: 0 4px 16px rgba(29, 39, 51, .14), 0 1px 3px rgba(29, 39, 51, .10); /* 只给浮层：下拉、对话框、提示、轻提示 */
--shadow-sheet: 0 1px 2px rgba(29, 39, 51, .12); /* 原文查看器里的「纸页」 */
/* ---------- 尺寸 ---------- */
--control-h: 36px; /* 默认按钮、输入框（v0.2：原 32） */
--control-h-sm: 32px; /* 表格行内、筛选标签（v0.2：原 28） */
--control-h-lg: 40px; /* 登录、空状态主操作 */
--btn-px: 14px; /* 按钮左右内边距：36 / 32 / 40 对应 14 / 12 / 16（v0.2，以 d5 为准） */
--btn-px-sm: 12px;
--btn-px-lg: 16px;
--tag-h: 22px; /* 中性标签、问题级别标签的高度（v0.2，以 d5 为准） */
--row-h: 64px; /* 列表行最小高度：两行文字（名称 + 辅助灰小字）的项目行（v0.2） */
--rail-w: 96px; /* 侧栏（v0.2）：单一状态，上图标下文字，不折叠 */
--topbar-h: 56px; /* 顶栏：透明，滚动后半透明白 + 毛玻璃 */
--sidebar-w: 216px; /* v0.1 宽侧栏，仅旧原型使用，重刷后删除 */
--margin-note-w: 280px; /* 页边批注栏 */
--content-max: 1200px;
/* 页面与卡片的节奏（v0.2，以 d5 为准）：全页一个间距 */
--pad-page: 32px; /* 内容区左右内边距；1400 以下 24 */
--gap-card: 16px; /* 卡片之间、主列与右栏之间 */
--card-x: 20px; /* 卡片内左右边距：所有卡片统一 */
--card-y: 16px; /* 卡片内上下边距（不分区的整块卡片） */
--card-h-min: 56px; /* 卡片头（标题行）最小高度 */
--aside-w: 296px; /* 工作台右侧信息栏；1400 以下 256 */
/* ---------- 动效 ---------- */
--dur-fast: 120ms;
--dur-base: 200ms;
--ease: cubic-bezier(.2, 0, 0, 1);
}
@media (max-width: 1399px) {
:root { --pad-page: 24px; --aside-w: 256px; }
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-fast: 0ms; --dur-base: 0ms; }
}