标博士 · UI demo v0.2（2026-11-03）
按设计规范 v0.2（决策 U5）重刷：白色主调、墨色派生的浅灰、只有一种白卡片容器、圆角三档、96px 墨色渐变侧栏、透明顶栏。v0.2 风格定稿样张见 explore/workbench-d5.html，各页的侧栏、顶栏、卡片、表头、标签、按钮、筛选、行悬停都以它为准。颜色、字号、间距只用 system/tokens.css 的变量；已有组件在 system/components.css，规范里有描述但还没并入组件库的放在本目录的 demo.css。不用任何 UI 框架和 CDN（AR10），图标是 Lucide 风格的内联 SVG（U3）。
cd docs && python3 -m http.server 8767 # 打开 http://127.0.0.1:8767/design/ui-demo/ （设计基准 1440 宽，最小 1280）
01
页面
示意数据：政府采购 · IT 集成，复用原型 prototype/assets/data.js
⑤组合页 · 工作台
v0.2 框架（侧栏、透明顶栏、搜索、额度、通知）；截止提醒、一卡四格统计（可点筛选）、项目列表（下一步 / 更多）、待处理的致命问题，右侧任务、额度、最近处理。
⑥组合页 · 读标项目页头 + 页签、清单状态与确认、分类导航、清单（待确认区、补遗更新、搜索）、原文查看器并排高亮。J / K 逐条看原文。
★风格探索工作台的六轮方案（a–f、d2–d5），d5 为 v0.2 定稿样张。
①控件总览按钮（类型 × 状态、尺寸、扣点说明）、输入框 / 下拉 / 日期 / 复选 / 单选 / 开关、级别标签、AI 标识与署名、出处、提醒、轻提示、对话框、标签页、筛选、分页、空状态、骨架屏、进度、提示气泡、菜单、快捷键。
②表单新建项目（离开时校验、提交汇总、提交中整表禁用）、字段的正常 / 聚焦 / 错误 / 禁用对照、资质录入、忽略并注明原因、致命问题的「确认无误」说明（U4）。
③卡片统计、额度卡（正常 / 80% / 用完）、任务进度卡、AI 摘要卡（确认前后）、关键日期卡。MVP 不做项目卡片视图（Q11）。
④列表与表格项目列表、清单列表（分类、★ 筛选、J / K）、问题列表（级别筛选、只对「提示」批量、1 / 2 / 3）、额度流水、参数对照表（含级别列）、空结果。
资质库、额度页属于和工作台相同的「列表」布局，控件已在 ②③④ 覆盖，没有单独做组合页。
02
新增组件清单
B 部分在 demo.css；精修定稿后并入 system/components.css| 编号 | 组件 | 类名 | 依据 | 说明 |
|---|---|---|---|---|
| — | 卡片 · 中性标签 · 链接 · 出处链接 · 数字 | .card .card.flush .card-h .card-b .card-f .tag .tag.ai .lnk .hint-u .cite-link .fig .sheet .hl | §4.2 · §5.1 · §7.8 · §7.16 | 在 components.css。全页只有一种白卡片；中性标签 --c-n100 实底；.fig 默认 15、12px 小字里 13、统计大数字用 .big（28）；原文纸面用 --font-doc --fs-doc --lh-doc，原句高亮 = 蓝铅笔浅底 + 蓝色底边；致命问题行不加红竖线 |
| B1 | 图标 | .ic .vh | §6 · U3 | Lucide 路径内联，1.5px 描边，16 / 20 / 32；侧栏菜单 22 |
| B2 | 页面框架 | Demo.shell() · .sidebar .me .plan .main .top .crumbs .top-search .quota-chip .content .page-title .proj-head | §5.3 · U5 | 96px 墨色渐变侧栏（上图标下文字、底部点阵、头像 + 套餐）；透明顶栏，滚动后毛玻璃；内容区左上角 12 圆角 |
| B3 | 按钮补充状态 | .btn.swap .is-loading .icon-btn .btn-group | §7.1 | 按下变深（--c-ink-active）、加载中定宽换字、只有图标的按钮 36 / 32、按钮组 |
| B4 | 输入框补充 | .input:focus/[disabled]/[readonly] .input-unit .search .form .form-sec .err-sum | §7.13 | 聚焦 = 墨色边框 + 1px 内圈；带单位、搜索、两列表单、错误汇总、字数 |
| B5 | 下拉选择 · 下拉菜单 · 浮动菜单 | .select .menu .pop .menu.float .menu .two · Demo.floatMenu() Demo.menuHTML() | Q4 · AR10 | 选中项加粗 + 右侧墨色 ✓；两行菜单项写扣点说明；禁用项（disabled: "原因"）变禁用灰、右侧写原因；正式实现用 Reka UI Select / DropdownMenu |
| B6 | 日期输入 · 日期选择 | .dt[data-dt] .cal · Demo.dateInput() Demo.parseDT() Demo.fieldError() | §7.22 · §9.3 · Q4 · Q10 | 可键入「2026-11-20 09:30」及常见写法，离开时整理；选择器带 24 小时时间；下方显示「11月20日 09:30 · 剩 N 天」。日历非本月格子留空，不可选日期禁用灰、无悬停 |
| B7 | 复选 · 单选 · 单选卡片 · 开关 | .ck .choice .choice-card .switch | §8.2 · Q4 | 复选框圆角 4；开关 = 圆角 6 矩形轨道 + 圆角 4 方块滑钮 + 「开 / 关」字 |
| B8 | 筛选 · 标签页 | .seg .tabs [role=tab] | §5.3 · §7.5 | 筛选是一排文字按钮，按下 = --c-n100 实底 + 加粗；页签 ← → 切换 |
| B9 | 分页 | .pagination | Q4 | 当前页 --c-n100 实底 + 加粗，与筛选一致 |
| B10 | 轻提示 | .toasts .toast | §7.12 | 4 秒消失、悬停暂停、可撤销、堆叠 |
| B11 | 对话框 | .scrim .dialog .wide | §7.14 · Q12 | 480 / 640，圆角 12，遮罩 --scrim；对话框不裁剪浮层（内容过高时遮罩滚动）；焦点锁定、Esc 先收起浮层再关闭；对话框里可以有自己的主按钮 |
| B12 | 提醒补充 | .alert .act .sub .errno | §7.12 · §7.15 | 白卡片式提醒，颜色只在图标和关键字；右侧操作、副说明、错误编号 |
| B13 | 提示气泡 | [data-tip] .tip-below .tip-start .tip-left | §6 | 墨底白字、圆角 8；正式实现用 Reka UI Tooltip |
| B14 | 空状态 · 骨架屏 · 进度 | .empty .skel .skel-row .progress .steps .fail | §7.11 · §7.15 · Q8 | 骨架屏静止，不做明暗起伏 |
| B15 | 杂项 · 快捷键说明 | .kbd .kv .chip .drop .file-row .flowline .av · Demo.keysDialog(Demo.KEYS.reading / .check) Demo.keysTable() | §8.2 | 快捷键说明按页面传入：读标 J / K、Enter、?；查标 J / K、O、1 / 2 / 3、X、U、? |
| B16 | AI 产出块 · 署名行 | .ai-block .ai-label .sign .sign.sm .sign.ign .sign .undo .sign-note .more-cites | §7.4 · §7.16 · Q2 | 正文始终墨色；确认前「AI」标签 + 左侧 2px 蓝铅笔虚线，确认后去掉虚线、出署名行（绿 ✓ + 姓名 + 时间 + 动作 + 撤销），原因 / 说明写在 .sign-note |
| B17 | 卡片件 | .card-h .card-foot .stats .stat .quota .dates | §7.9 · §7.10 · Q11 | 一卡四格统计（格子可做筛选按钮）、额度卡、关键日期；项目卡已删除（Q11） |
| B18 | 表格补充 · 当前条 · 行内说明 | .toolbar .th-sort .batchbar .filters-on tr.sel .item.sel .finding.sel .kb-on .u4 | §7.4 · §7.7 · §7.18 · §8.2 · U4 | 当前条 = --c-n50 底 + 左侧 3px 墨色竖条，键盘再加 2px 内框；勾选只看复选框；忽略原因、致命的确认说明在行内展开（无底色） |
| B19 | 对照布局 | .cmp[data-cmp] .cmp-list .cats .lst .rsz .grp-h .grp-h.ai .viewer-body · Demo.cmp() | §5.3 · §7.6 · §7.8 | 分类导航 176（1400 以下 152）+ 列表（最小 560）+ 原文查看器（默认 45%、最小 400，可拖动或 ← →）；待确认是清单顶部的蓝色标题分组 |
| B20 | 项目行 | .prow-head .prows .prow .pname .psub .nx .more-cell .srt | §7.9 | 工作台和列表页共用：下一步左对齐、行悬停箭头右移 3px；更多单独一列常驻；致命列居中 |
03
Q1–Q13 的答案（2026-11-03 已确认）
Q1–Q12 已写进 design-system.md 对应章节| # | 问题 | 结论 | 规范 |
|---|---|---|---|
| Q1 | 额度流水的「+」 | 改为墨色，靠「+ / −」符号区分，不用绿色 | §3.4 · §7.10 |
| Q2 | AI 产出的正文颜色 | 正文始终墨色；AI 身份靠「AI」小标签和左侧 2px 蓝铅笔虚线；确认后去掉虚线，换成署名行（绿 ✓ + 姓名 + 时间） | §7.16 |
| Q3 | 「选中」用什么颜色 | 统一为 --c-n50 底 + 左侧 3px 墨色竖条（读标清单、表格选中都一样）；蓝色只留给原文高亮和出处链接 | §7.18 |
| Q4 | 开关、分页、下拉、日期选择 | 开关：圆角 6 矩形轨道 + 圆角 4 方块滑钮，开为墨色，旁边写「开 / 关」。分页：当前页 --c-n100 实底加粗。下拉：选中项加粗、右侧墨色 ✓。日期：不可选只变禁用灰，不加删除线 | §7.19–7.22 |
| Q5 | 参数对照表的「级别」列 | 保留 | §7.7 |
| Q6 | 悬停、按下、遮罩的颜色 | 用 tokens.css 的 --c-ink-hover --c-ink-active --scrim 等变量，清掉 #34404D #222 #888 这类裸色值 | §3.1 |
| Q7 | 字阶外的数字字号 | --fs-figure 28、--fs-figure-sm 15、--fs-figure-xs 13 | §4.2 |
| Q8 | 骨架屏动不动 | 静止，不做明暗起伏 | §7.15 |
| Q9 | 顶栏额度 80% 后 | 用到 ≥ 80% 时该项数字变赭色（--warn-text）加粗；用完时悬停说明续费方式；不用红 | §7.10 |
| Q10 | 日期的输入格式 | 输入框「2026-11-20 09:30」（24 小时制，配日期选择器）；显示「11月20日 09:30」 | §9.3 |
| Q11 | 项目卡片视图 | MVP 不做，工作台只用列表；cards 页的「项目卡」改作他用或删掉 | §7.9 |
| Q12 | 「一屏一个主按钮」怎么算 | 按上下文算：页面级一个；对话框里可以有自己的主按钮；陈列页不受限 | §7.1 |
| Q13 | 流水是否记录 0 点的免扣行 | 记。24 小时内复查不扣点时，流水记一行「免扣（24 小时内复查）」、数量 0（见 ④ 列表与表格 04），让用户能核对复查确实没扣点（红线 9「可查」）。FR-M6-03 已补「免扣」类型 | §7.10 · FR-M6-03 |