7f9592ad16
- 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>
102 lines
14 KiB
HTML
102 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>标博士 UI demo</title>
|
||
<link rel="icon" href="../logo/favicon.svg">
|
||
<link rel="stylesheet" href="../system/tokens.css">
|
||
<link rel="stylesheet" href="../system/fonts-local.css">
|
||
<link rel="stylesheet" href="../system/components.css">
|
||
<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);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: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 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 && python3 -m http.server 8767
|
||
# 打开 http://127.0.0.1:8767/design/ui-demo/ （设计基准 1440 宽，最小 1280）</pre>
|
||
</div>
|
||
|
||
<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="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">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>—</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 · 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" 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>结论</th><th>规范</th></tr></thead>
|
||
<tbody>
|
||
<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>
|
||
</main>
|
||
<script src="demo.js"></script>
|
||
<script>Demo.demoTop("index.html");</script>
|
||
</body>
|
||
</html>
|