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

- 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

View File

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