标博士 · 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 · U3Lucide 路径内联，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 · U596px 墨色渐变侧栏（上图标下文字、底部点阵、头像 + 套餐）；透明顶栏，滚动后毛玻璃；内容区左上角 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分页.paginationQ4当前页 --c-n100 实底 + 加粗，与筛选一致
B10轻提示.toasts .toast§7.124 秒消失、悬停暂停、可撤销、堆叠
B11对话框.scrim .dialog .wide§7.14 · Q12480 / 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、?
B16AI 产出块 · 署名行.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
Q2AI 产出的正文颜色正文始终墨色；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