e1a9017cd1
- docs/design/ui-demo/：控件总览、表单、卡片、列表与表格，以及工作台、读标两个组合页 - 只用设计规范的变量和组件；新增组件样式放在 demo.css，清单见 index - index 列出 UI 精修待定问题 Q1–Q12 - design/README 与 AGENTS.md 进度同步 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
96 lines
12 KiB
HTML
96 lines
12 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)}
|
||
.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}
|
||
</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>
|
||
<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="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>
|
||
</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>
|
||
<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>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>
|
||
</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>
|
||
<table class="data qs">
|
||
<thead><tr><th>#</th><th>问题</th><th>demo 现在的做法</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>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
</main>
|
||
<script src="demo.js"></script>
|
||
<script>Demo.demoTop("index.html");</script>
|
||
</body>
|
||
</html>
|