标博士 · UI demo（2026-11-03）

用已确定的界面风格（方向 A「校样」、设计规范 v0.1）把常见控件和它们组合成的页面摆出来，用来决定 UI 精修的方向。颜色、字号、间距只用 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
①控件总览

按钮（类型 × 6 种状态、尺寸、扣点说明）、输入框 / 文本域 / 下拉选择 / 日期选择 / 复选 / 单选 / 开关、级别标签、AI 标识与署名、出处 5 种形态、页内提醒、轻提示、对话框、标签页、分段、分页、空状态、骨架屏、进度、提示气泡、下拉菜单、快捷键。

 ②表单

新建项目（离开时校验 + 提交汇总 + 提交中整表禁用）、同一字段的正常 / 聚焦 / 错误 / 禁用 / 提交中对照、资质录入（错误与「到期提醒」的区别）、忽略并注明原因、致命问题的「确认无误」说明（U4）。

 ③卡片

项目卡（致命 / 临近截止 / 今天截止 / 已递交 / 加载中 / 新建）、统计格、额度卡（正常 / 80% / 用完）、任务进度卡（进行中 / 失败退回 / 完成 / 排队）、AI 摘要卡（确认前后）、关键日期卡。

 ④列表与表格

项目列表（筛选、搜索、表头排序、空结果）、清单列表（分类、★ 筛选、筛选标签、J / K）、问题列表（级别筛选、只对「提示」批量、J / K + 1 / 2 / 3、已处理折叠）、额度流水、参数对照表、两种空结果。

 ⑤组合页 · 工作台

侧边栏 + 顶栏框架；截止提醒、统计格、项目表格、待处理的致命问题，右侧任务进度、额度、最近处理。看「列表」布局的密度。

 ⑥组合页 · 读标

项目页头 + 页签、清单状态与确认、分类导航、清单（待确认区、补遗更新、搜索）、原文查看器并排高亮。可以用 J / K 逐条看原文。看「对照」布局的密度。

资质库、额度页属于和工作台相同的「列表」布局，控件已在 ②③④ 覆盖，没有单独做组合页。

02

新增组件清单

都在 demo.css 的 B 部分；精修定稿后并入 system/components.css
编号组件类名依据说明
B1图标.ic§6 · U3Lucide 路径内联，1.5px 描边，16 / 20 / 32
B2页面框架.sidebar .top .crumbs .quota-chip .content .page-title .proj-head§5.3从原型 app.css 搬过来，去掉裸色值
B3按钮补充状态.btn.swap .is-loading .icon-btn .btn-group§7.1按下态、加载中定宽换字、只有图标的按钮、按钮组
B4输入框补充.input:focus/[disabled]/[readonly] .input-unit .search .form .form-sec .err-sum§7.13聚焦 / 禁用 / 只读、带单位、搜索、两列表单、错误汇总、字数
B5下拉选择 · 下拉菜单.select .menu .popAR10选中项加粗 + ✓，不可选项写原因；正式实现用 Reka UI Select / DropdownMenu
B6日期选择.cal .dt-pair .date-trigger§9.3 · AR10周一开始、Barlow 数字、今天描边、选中墨底、关键日期圆点、不可选删除线
B7复选 · 单选 · 单选卡片 · 开关.ck .choice .choice-card .switch§8.2墨色勾选、半选；开关是方形滑块 + 开 / 关文字
B8分段控件 · 标签页.seg .tabs [role=tab]§5.3 · §7.5← → 切换、不可用页签
B9分页.pagination—规范未定义；当前页墨色描边
B10轻提示.toasts .toast§7.124 秒消失、悬停暂停、可撤销、堆叠
B11对话框.scrim .dialog .wide§7.14480 / 640，焦点锁定，Esc 关闭，焦点回到触发处
B12提醒补充.alert .act .sub .errno§7.12 · §7.15右侧操作、副说明、错误编号
B13提示气泡[data-tip]§6墨底白字；正式实现用 Reka UI Tooltip
B14空状态 · 骨架屏 · 进度.empty .skel .skel-row .progress .steps .fail§7.11 · §7.15骨架缓慢明暗变化，减少动态效果时静止
B15杂项.kbd .kv .chip .drop .file-row .flowline§8.2快捷键、键值表、可移除的筛选标签、上传区、文件行、状态流
B16AI 产出块.ai-block .ai-label .sign.ign .more-cites§3.3 · §7.16左侧虚线 → 确认后墨色实线；「已忽略」灰色署名
B17卡片.card-h .card-foot .pcard .stats .stat .quota .dates§7.9 · §7.10项目卡、统计格、额度卡、关键日期
B18表格补充.toolbar .th-sort .batchbar .list-box .filters-on§7.7 · §8.2排序、勾选、选中行、批量栏、空结果行、问题行勾选
B19对照布局.split .cats .viewer-body§5.3 · §7.8分类导航 + 列表 + 原文查看器
03

做的过程中发现的规范缺口 · 待拍板

UI 精修阶段逐条确认
#问题demo 现在的做法需要决定
Q1额度流水的「+」用了定稿绿沿用 components.css 的 .flow td.plus（绿）§3.4 说绿色只表示「有人确认过」。建议改成墨色「+」，靠符号区分
Q2AI 产出的正文是什么颜色正文始终墨色，只用「AI」标签 + 左侧虚线区分§7.16 写「确认后文字变为墨色」，暗示确认前不是墨色；大段蓝字阅读负担重，建议明确「正文始终墨色」
Q3「选中」用什么颜色读标清单选中 = 蓝铅笔浅底（和原文高亮对应）；表格勾选 = 凹陷灰 + 墨色竖线蓝色只属于系统和出处（§3.4）。读标选中是否保留蓝色，需统一
Q4开关、分页、下拉、日期选择的视觉开关做成方形滑块 + 开 / 关文字；分页当前页描边；下拉选中加粗 + ✓；不可选日期加删除线规范第 7 节没有这几个组件，确认后补进规范
Q5参数对照表加「级别」列多了一列级别标签，判断词颜色有形状兜底§7.7 的表没有这一列；只靠判断词颜色对色弱不够
Q6悬停、按下、遮罩缺颜色变量用 color-mix() 从墨色算；components.css 的 #34404D、原文页的 #222 #888 是裸色值建议 tokens.css 增加 --c-ink-hover、--scrim 等语义变量
Q7字阶外的字号Barlow 数字用了 13 / 15px（components.css 已有）§4.2 字阶里没有，建议加 --fs-figure-sm 等变量
Q8骨架屏动不动1.6 秒缓慢明暗变化；减少动态效果时静止和「不闪烁」原则是否冲突
Q9顶栏额度 80% 后是否变色顶栏额度描边变赭色§7.10 只写了额度条，没写顶栏
Q10日期的输入格式界面显示「11月20日 09:30」，输入框用「2026-11-20」§9.3 只规定了显示格式
Q11项目卡片视图做了项目卡，工作台仍用表格§7.9 只定义了项目行；要不要提供卡片视图
Q12卡片 / 页面里同时出现多个主按钮组合页每屏一个主按钮；demo 陈列页为了对比会出现多个表单页、对话框里的「保存」是否也算「一屏一个」