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:
@@ -20,6 +20,10 @@
|
||||
> - 第 9.5 节:文案精简。
|
||||
>
|
||||
> 颜色语义、字体、问题级别的形状规则、产品红线都**没有变**。其余 demo 页和原型还是 v0.1 的样式,待按本版重刷。
|
||||
>
|
||||
> **v0.2 补充(2026-11-03,Q1–Q12 已确认)**:UI demo 做的过程中发现的 12 个规范缺口,答案写进了对应章节,每处标「(v0.2,Q?,已确认 2026-11-03)」:§3.1(交互色变量,Q6)、§3.4(绿色,Q1)、§4.2(数字字号,Q7)、§7.1(主按钮,Q12)、§7.7(级别列,Q5)、§7.9(不做卡片视图,Q11)、§7.10(顶栏额度,Q9)、§7.15(骨架屏,Q8)、§7.16(AI 标识,Q2)、§7.18–7.22(选中态 Q3;开关、分页、下拉选择、日期选择 Q4)、§9.3(日期输入格式,Q10)。`tokens.css`、`components.css` 和 `ui-demo/demo.css` 已按本版改写;汇总表见 `ui-demo/index.html` 第 03 节。
|
||||
>
|
||||
> **v0.2 收尾(2026-11-03)**:UI demo 六个页面重刷完后,把各页的临时做法收回共用层,并补写以下规则,每处标「(v0.2)」:§4.2(`.fig` 默认字号)、§5.3(对照布局尺寸)、§7.4(致命行不加红竖线、说明在行内展开)、§7.5(中性实底标签)、§7.6(待确认分组)、§7.8(原句高亮、原文排版变量)、§7.9(统计数字颜色)、§7.10(续费文案)、§7.18(当前条与勾选条)、§7.22(日历留空)、§8.2(快捷键按页列出)、§10(高亮的非颜色提示)。流水「免扣」行是否保留待确认(Q13,见 `ui-demo/index.html` 第 03 节)。
|
||||
|
||||
---
|
||||
|
||||
@@ -72,9 +76,18 @@
|
||||
| 赭 | `--c-ochre` | #A66300 | 「重要」级边框和图标、系统提醒、表单错误、截止临近 |
|
||||
| 赭(小字) | `--c-ochre-ink` | #8A5200 | 18px 以下的赭色文字 |
|
||||
| 定稿绿 | `--c-green` | #2E6B4F | 人工确认的署名和 ✓ |
|
||||
| 墨 · 悬停 | `--c-ink-hover` | #38414B | 主按钮等墨底元素的悬停(墨 88% 混白)(v0.2,Q6,已确认 2026-11-03) |
|
||||
| 墨 · 按下 | `--c-ink-active` | #171F29 | 墨底元素按下(墨 80% 混黑)(v0.2,Q6,已确认 2026-11-03) |
|
||||
| 中性浅灰 300 / 400 | `--c-n300` / `--c-n400` | #BBBEC2 / #A5A9AD | 普通链接的下划线 / 带悬停说明文字的虚线下划线(墨 30% / 40%)(v0.2,Q6,已确认 2026-11-03) |
|
||||
|
||||
每个功能色都有一个浅色底(`-soft`),只用作背景,文字仍用对应的深色。
|
||||
|
||||
**交互与浮层的语义变量**(v0.2,Q6,已确认 2026-11-03):组件里**不写裸色值**,悬停、按下、遮罩一律用 `tokens.css` 的语义变量:
|
||||
- `--primary-hover` / `--primary-active`(指向上表的墨 · 悬停 / 按下);
|
||||
- `--link-underline` / `--hint-underline`(普通链接 / 有悬停说明的文字);
|
||||
- `--scrim`(对话框遮罩,墨 32%)、`--topbar-glass`(滚动后的顶栏)、`--on-dark-line`(墨底浮层里的分隔线)、`--shadow-sheet`(原文查看器的纸页)。
|
||||
- 原来的 `#34404D`(主按钮悬停)、原文页的 `#222` `#888` `#999` `#EEE` 都已换成变量。
|
||||
|
||||
**v0.2 的浅灰都从墨色派生**:原来的校样纸、凹陷灰、分隔线偏绿,页面整体显得发灰发闷;改为墨色按比例混白,更亮、更中性。
|
||||
|
||||
**侧栏的颜色**(v0.2,`--side-*`):
|
||||
@@ -118,6 +131,7 @@
|
||||
|
||||
- 不用红色做按钮(包括删除按钮)、表单错误、系统错误、倒计时、额度用完提示。删除这类操作靠二次确认,不靠颜色吓人。
|
||||
- 不用定稿绿表示「通过 / 合格」。绿色只表示「有人确认过」,不表示结论好。
|
||||
- 额度流水的「+」(发放、退回)也不用绿色:和「−」一样用墨色,靠符号区分(v0.2,Q1,已确认 2026-11-03)。
|
||||
- 不用蓝铅笔做普通导航链接、主按钮。蓝色只属于系统说的话和出处。普通链接用墨色加下划线。
|
||||
- 不用渐变、不用大面积彩色底。一屏之内彩色面积越少,致命红越显眼。**唯一的例外**是侧栏的墨色竖向渐变(v0.2):只在墨色和深墨蓝之间过渡,不出现在内容区。
|
||||
|
||||
@@ -147,9 +161,13 @@
|
||||
| Body | 14 / 22 | 黑体 400 | 界面正文、表格 |
|
||||
| Read | 14 / 24 | 黑体 400 | 招标原文、投标原文的引用 |
|
||||
| Caption | 12 / 20 | 黑体 400 | 时间戳、脚注、表单说明;**最小字号**,正文不用 |
|
||||
| Figure | 30 / 36 | Barlow 600 | 工作台统计数字、额度剩余 |
|
||||
| Figure | 28 / 36 | Barlow 600 | 工作台统计数字、额度剩余(`--fs-figure`,v0.2 由 30 改为 28) |
|
||||
| Figure S | 15 / 22 | Barlow 500 / 600 | 正文行里独立出现的数字:表格数值、日期、页码、筛选计数、顶栏额度(`--fs-figure-sm`)(v0.2,Q7,已确认 2026-11-03) |
|
||||
| Figure XS | 13 / 20 | Barlow 500 / 600 | 12px 小字行里的数字:标签计数、出处页码、扣点说明、时间戳(`--fs-figure-xs`)(v0.2,Q7,已确认 2026-11-03) |
|
||||
|
||||
- 字重只用 400 和 600 两档(黑体在 Windows 上 500 和 400 几乎看不出区别)。
|
||||
- 字重只用 400 和 600 两档(黑体在 Windows 上 500 和 400 几乎看不出区别)。Barlow 数字例外,可用 500。
|
||||
- Barlow 的字面比黑体小一号,所以和 14px 正文同行时用 15px、和 12px 小字同行时用 13px,看上去才一样大;这两档只给数字用,不算进「同一屏不超过 5 个字号」。
|
||||
- 默认值做进共用层(v0.2):`.fig` 默认 15(`--fs-figure-sm`);放在 12px 小字里(标签、扣点说明、出处、表头、说明文字等)自动变 13(`--fs-figure-xs`);统计大数字用 `.big`(`--fs-figure` 28)。页面里不必再逐处写字号。
|
||||
- 强调用加粗,不用斜体(中文没有真斜体)、不用彩色。
|
||||
|
||||
### 4.3 数字与中英文混排
|
||||
@@ -217,11 +235,18 @@
|
||||
| 布局 | 页面 | 结构 |
|
||||
|---|---|---|
|
||||
| 列表 | 工作台、资质库、额度流水 | 页头 + 统计 + 白卡片里的列表;工作台右侧另有 296px 信息栏 |
|
||||
| 对照 | 读标(清单)、查标(问题列表) | 左:分类导航 200px;中:列表;右:**原文查看器**,宽度可拖动(默认 45%) |
|
||||
| 对照 | 读标(清单)、查标(问题列表) | 左:分类导航和列表在同一张白卡片里;右:**原文查看器**,宽度可拖动(尺寸见下) |
|
||||
| 批注 | 查标结果的默认视图 | 问题列表 + 右侧 280px 页边批注栏(出处);窄于 1440 时批注收进问题下方 |
|
||||
|
||||
点出处时,对照布局的右栏直接翻到对应页并高亮;批注布局下从右侧滑出原文查看器,不跳页面。
|
||||
|
||||
**对照布局的尺寸**(v0.2):
|
||||
- 分类导航 176px(1400 以下 152px),当前分类用 `--c-n100` 实底 + 加粗;
|
||||
- 列表最小 560px,其余宽度都给列表;
|
||||
- 原文查看器默认占内容区宽度的 45%,最小 400px;中间 16px 是拖动条(平时不可见,悬停出浅灰细线),可以拖动或聚焦后用 ← → 调整,列表始终不窄于 560px;
|
||||
- 1280 宽时(内容区约 1136px):列表 ≥ 560、查看器 ≤ 560,不横向滚动;
|
||||
- 对照布局撑满顶栏和页头以下的高度,分类导航、列表、查看器各自滚动。
|
||||
|
||||
---
|
||||
|
||||
## 6. 图标
|
||||
@@ -245,14 +270,18 @@
|
||||
|
||||
| 类型 | 样式 | 用于 |
|
||||
|---|---|---|
|
||||
| 主按钮 | 墨底白字 | 一屏只有一个:「发起检查」「导出报告」「确认清单」 |
|
||||
| 主按钮 | 墨底白字,加粗 | 一屏只有一个(怎么算见下):「发起检查」「导出报告」「确认清单」 |
|
||||
| 次按钮 | 白底墨字,控件边框 | 其他操作,包括问题处理三按钮 |
|
||||
| 文字按钮 | 墨字,无边框,悬停出底色 | 表格行内、次要操作 |
|
||||
|
||||
- 高度 36(默认)/ 32(表格行内、筛选标签)/ 40(登录页、空状态),圆角 8(v0.2)。左右内边距 14 / 10 / 16。
|
||||
- **没有红色的危险按钮**。删除项目、删除文件用次按钮 + 确认对话框;删除项目要输入项目名才能确认。
|
||||
- 会扣点的按钮,旁边直接写扣多少、还剩多少(见 8.3),不放在弹窗里才说。
|
||||
- 状态:悬停(主按钮变浅 8%,次按钮出 `--bg-hover`)、按下、禁用(禁用灰字、无边框底色)、加载中(文字换成「正在…」,按钮宽度不变)。
|
||||
- 状态:悬停(主按钮变为 `--c-ink-hover`,次按钮出 `--bg-hover`、边框变墨)、按下(主按钮 `--c-ink-active`,次按钮 `--c-n100`)、禁用(禁用灰字、`--c-n100` 底、无边框)、加载中(文字换成「正在…」,按钮宽度不变)(v0.2,Q6,已确认 2026-11-03)。
|
||||
- **「一屏一个主按钮」按上下文算**(v0.2,Q12,已确认 2026-11-03):
|
||||
- 页面级只有一个主按钮(通常在页头右侧);
|
||||
- 对话框是独立的上下文,可以有自己的主按钮(「删除项目」「确认无误」),不和页面的主按钮冲突;
|
||||
- 组件陈列页(UI demo、组件预览)为了对比会同时出现多个,不受此限。
|
||||
- 按钮文字是动词短语,和结果状态用同一个词(品牌策略第 4 节)。
|
||||
|
||||
### 7.2 问题级别标签
|
||||
@@ -260,10 +289,10 @@
|
||||
```
|
||||
[致命] 实心,白字压致命红
|
||||
[重要] 1.5px 赭色描边,赭色小字
|
||||
[提示] 无边框,凹陷灰底,辅助灰字
|
||||
[提示] 无边框,--c-n100 浅灰底,辅助灰字
|
||||
```
|
||||
|
||||
- 字号 12,字重 600,高 20,左右内边距 6,圆角 6(v0.2)。
|
||||
- 字号 12,字重 600,高 22,左右内边距 8,圆角 6(v0.2,与中性标签同高,以 d5 为准)。
|
||||
- 级别由规则决定(FR-M3-03 的级别表),用户不能改级别;不同意可以「反馈:判断有误」。
|
||||
- 计数徽标也用同一套形状:「致命 2」实心、「重要 5」描边、「提示 11」无框。
|
||||
|
||||
@@ -298,10 +327,13 @@
|
||||
- 标题写结论,不写规则名:「报价超过采购包 2 的最高限价」,不写「报价限价规则命中」。
|
||||
- 复查标记放在标题行右侧:「新增」「沿用」「本次已解决」(FR-M3-08),用辅助灰小字,不用颜色。
|
||||
- 处理后:按钮收起,换成署名行「✓ 王敏 11月2日 14:20 已修改」(绿),可「撤销」。「已忽略」不是确认,署名行用辅助灰和「–」,后面带原因。
|
||||
- 「致命」行左侧加 3px 致命红竖线,方便在长列表里扫读;「重要」「提示」不加。
|
||||
- ~~「致命」行左侧加 3px 致命红竖线~~(v0.2 取消):和工作台一致,级别只靠实心「致命」标签扫读;行左侧的 3px 竖条只表示「当前条」(墨色,§7.18),和级别无关,两者不再冲突。
|
||||
- 已处理的问题默认折叠到列表底部「已处理(N)」,避免干扰。
|
||||
- 每行都有「判断有误?」文字链接,打开反馈表单(FR-M3-07 / J5)。
|
||||
- 「致命」级点「确认无误」时,展开一个必填的说明输入框(U4),说明同时作为误报反馈提交。
|
||||
- 说明框**在问题行内展开**,替换处理按钮,不用对话框(v0.2);「忽略并注明原因」也一样在行内展开(原因可以不处理也能撤销,按 §7.12 不用对话框打断)。
|
||||
- 行内区域无底色,不在卡片里再套面板;至少 5 个字,有字数计数,Esc 取消。
|
||||
- 提交后收起,换成署名行;说明 / 原因写在署名行下方的辅助灰小字里。
|
||||
|
||||
**三个处理动作的含义**(按钮下方悬停提示要写清楚,避免误解):
|
||||
|
||||
@@ -313,35 +345,39 @@
|
||||
|
||||
### 7.5 清单项(读标)
|
||||
|
||||
- 一行:重要性符号(★ / ▲ / 空)→ 标题 → 类别标签(可多个,灰色描边小标签)→ 所属包 → 来源 → 出处。
|
||||
- 来源标注:「AI 提取」(蓝铅笔)、「人工添加」(墨)、「补遗 2」(墨)。
|
||||
- 一行:重要性符号(★ / ▲ / 空)→ 标题 → 类别标签(可多个)→ 所属包 → 来源 → 出处。
|
||||
- 类别、包、来源都用**中性实底标签**(`--c-n100` 底、无描边、墨色字,与状态标签同一种)(v0.2)。
|
||||
- 来源标注:AI 提取的用「AI」标识(蓝铅笔描边小标签,§7.16);「人工添加」「补遗 2」用中性实底标签(v0.2)。
|
||||
- 被用户改过的条目显示「已修改 · 查看记录」,打开修改历史(谁、何时、改前、改后)。
|
||||
- 「已被补遗 N 更新」的旧值加删除线,新值旁边写来源,用户确认后去掉提示(FR-M2-10)。
|
||||
- 清单整体状态显示在页头:「草稿」(辅助灰描边)/「已确认 · 王敏 11月2日」(绿色署名)。
|
||||
- 清单整体状态显示在页头:「草稿 v3」(中性实底标签,v0.2)/「已确认 v3」标签 + 绿色署名「✓ 王敏 11月2日 14:20」。
|
||||
|
||||
### 7.6 待确认区
|
||||
|
||||
- 虚线蓝铅笔边框的独立区块,标题「待确认(N)」,说明一句:「这些结果没有找到可靠出处,或系统把握不大。确认之前,不参与检查。」
|
||||
- 每条三个动作:「补上出处后采纳」「修改后采纳」「丢弃」。没有出处也要采纳时,标注「人工确认、无出处」。
|
||||
- 待确认区不和正式清单混排,放在清单顶部,有条目时默认展开。
|
||||
- 是清单顶部的一个**分组**,和「资格条件」等分组同样排版,标题用蓝铅笔色「待确认 N」,后面一句辅助灰说明:「没找到可靠出处,或把握不大。确认前不参与检查。」**不再用虚线框**(v0.2,避免卡片里再套框)。
|
||||
- 条目是未确认的 AI 产出:「AI」标识 + 左侧 2px 蓝铅笔虚线(§7.16)。
|
||||
- 每条三个动作:「补上出处后采纳」「修改后采纳」「丢弃」(有可靠出处时第一个动作是「采纳」)。没有出处也要采纳时,标注「人工确认、无出处」。
|
||||
- 不和正式清单混排,放在清单顶部,有条目时默认展开;分类导航里另有「待确认」一项(蓝铅笔色)可以单独查看。
|
||||
|
||||
### 7.7 参数对照表
|
||||
|
||||
技术参数的检查结果用表格(借鉴方向 C「检验单」的写法):
|
||||
|
||||
| 参数项 | 要求 | 投标响应 | 判断 | 出处 |
|
||||
|---|---|---|---|---|
|
||||
| ★ 内存 | ≥ 512G DDR4 | 256G DDR4 | **疑似不满足** | 第 41 页 ↔ 技术册 第 12 页 |
|
||||
| 参数项 | 要求 | 投标响应 | 判断 | 级别 | 出处 |
|
||||
|---|---|---|---|---|---|
|
||||
| ★ 内存 | ≥ 512G DDR4 | 256G DDR4 | **疑似不满足** | [致命] | 第 41 页 ↔ 技术册 第 12 页 |
|
||||
|
||||
- 要求和响应列用 Barlow + `tabular-nums`,数值左对齐(参数是「数 + 单位 + 说明」,右对齐反而难读)。
|
||||
- 「判断」列只用四个词:**满足 / 疑似不满足 / 未找到响应 / 需人工判断**。不用「合格 / 不合格 / 通过」。
|
||||
- 「疑似不满足」用所在行的问题级别标签颜色;「满足」用墨色普通字,不用绿色(绿色只表示人工确认)。
|
||||
- 表头凹陷灰底、2px 墨色底线;行间 1px 分隔线;行高 40。
|
||||
- **保留「级别」列**(v0.2,Q5,已确认 2026-11-03):判断词的颜色对色弱不够,级别标签有实心 / 描边 / 无框的形状兜底;「满足」「需人工判断」的行级别列写「—」。
|
||||
- 表头无底色、无粗线,12px 辅助灰列名;行间发丝线;行高 44;放在白卡片里,首尾列与卡片左右边距(20)对齐(v0.2,同 §5.1)。
|
||||
|
||||
### 7.8 原文查看器
|
||||
|
||||
- 白色页面,按规范化 PDF 显示(出处页码以它为准)。
|
||||
- 高亮:原句用蓝铅笔浅底 + 1px 蓝铅笔描边框;当前选中的出处描边加粗为 2px,并自动滚动到可见区域。
|
||||
- 高亮:原句用蓝铅笔浅底 + 1px 蓝铅笔底边;当前出处的底边加粗为 2px,并自动滚动到可见区域(v0.2:不再用描边框——描边框在换行处断开,底边线跨行时每一行都有,读起来连续)。
|
||||
- 纸面字体模拟招标文件的打印效果:`--font-doc`(宋体)、`--fs-doc` 13px、`--lh-doc` 24px,不跟界面字阶(v0.2)。
|
||||
- 顶部:文件名、文件类型(招标文件 / 补遗 N / 投标分册)、页码跳转「第 41 / 186 页」、上一处 / 下一处高亮。
|
||||
- OCR 页面显示「扫描页 · 文字由 OCR 识别」,高亮按 OCR 坐标。
|
||||
- 原文只读,不允许在查看器里改文字。
|
||||
@@ -368,13 +404,20 @@
|
||||
| ≤ 24 小时 | 「今天 09:30 截止」/「剩 6 小时」 | 赭小字,加粗 |
|
||||
| 已过 | 「已截止」 | 辅助灰 |
|
||||
|
||||
**就绪状态**:「未就绪」(墨色普通字,致命数量看「致命」列)/「就绪」(墨色描边标签)。项目详情页的页头合在一起写:「未就绪 · 2 项致命问题待处理」。「就绪」悬停说明:「只表示致命问题都已处理,不代表投标文件没有问题。」
|
||||
**就绪状态**:「未就绪」(墨色普通字,致命数量看「致命」列)/「就绪」(墨色普通字 + 虚线下划线,v0.2 以 d5 为准);两者都写在状态标签后面,不单独占一列。项目详情页的页头合在一起写:「未就绪 · 2 项致命问题待处理」。「就绪」悬停说明:「只表示致命问题都已处理,不代表投标文件没有问题。」
|
||||
|
||||
**统计卡的数字颜色**(v0.2):「待处理的致命问题」用致命红,「7 天内截止」用赭(`--warn-text`),其余(进行中、待确认的清单条目等)用墨色。数字 Barlow 28,只写标题和数字(§9.5)。
|
||||
|
||||
**不做项目卡片视图**(v0.2,Q11,已确认 2026-11-03):MVP 的工作台只用列表(项目行)。投标专员要按截止时间扫读、比对多个项目,列表密度更合适;不提供列表 / 卡片切换。
|
||||
|
||||
### 7.10 额度
|
||||
|
||||
- 顶栏常驻:「解析 37 · 检查 12」(Barlow),点开额度页。
|
||||
- 额度条:已用部分墨色,80% 起变赭色并出现一行提醒,100% 时提醒「本期检查额度已用完,续费或下期发放后可继续」。**不用红色**。
|
||||
- 流水表:时间、类型(发放 / 预扣 / 结算 / 退回 / 过期 / 人工调整)、数量(+ / −,Barlow 等宽)、关联项目和任务、原因。退回的记录和对应的预扣记录相邻显示。
|
||||
- 顶栏常驻:「解析 37 · 检查 12」(Barlow 15),点开额度页;悬停说明本期剩余 / 总数。
|
||||
- 某项用到 ≥ 80% 时,该项数字变赭色(`--warn-text`)加粗;用完时悬停说明续费方式(「本期检查额度已用完,可在额度页提交续费申请,或等下期发放」,v0.2)。**不用红**(v0.2,Q9,已确认 2026-11-03)。
|
||||
- 额度条:已用部分墨色,80% 起变赭色并出现一行提醒,100% 时提醒「本期检查额度已用完,可在额度页提交续费申请,或等下期发放」,并给「提交续费申请」按钮。**不用红色**。
|
||||
- 续费按决策 G8:专业版在线申请 → 对公转账 → 运营开通;文案写「在额度页提交续费申请」,**不写「联系客服」**(v0.2)。
|
||||
- 流水表:时间、类型(发放 / 预扣 / 结算 / 退回 / 过期 / 人工调整 / 免扣),其中「免扣(24 小时内复查)」数量记 0(v0.2,Q13);数量(+ / −,Barlow 等宽)、关联项目和任务、原因。退回的记录和对应的预扣记录相邻显示。
|
||||
- 「+」和「−」都用墨色,只靠符号区分,不用绿色(v0.2,Q1,已确认 2026-11-03)。
|
||||
|
||||
### 7.11 异步任务进度(解析 / 检查)
|
||||
|
||||
@@ -386,9 +429,11 @@
|
||||
|
||||
| 类型 | 样式 | 例子 |
|
||||
|---|---|---|
|
||||
| 信息 | 白底,墨色左边线 | 「清单未确认,检查结果以当前清单为准。」 |
|
||||
| 提醒 | 赭浅底,赭色左边线,赭小字标题 | 额度 80%、截止 ≤ 72 小时、解析失败、上传文件超限 |
|
||||
| 完成 | 白底,绿色 ✓ | 「报告已导出」 |
|
||||
| 信息 | 白卡片,墨色图标 | 「清单未确认,检查结果以当前清单为准。」 |
|
||||
| 提醒 | 白卡片,赭色图标 + 赭小字关键字(如截止时间) | 额度 80%、截止 ≤ 72 小时、解析失败、上传文件超限 |
|
||||
| 完成 | 白卡片,绿色 ✓ | 「报告已导出」 |
|
||||
|
||||
- v0.2(U5,以 d5 为准):页内提醒和卡片同规格(白底、1px 发丝线、圆角 12),不再用彩色浅底和左边线;颜色只出现在图标和关键字上。
|
||||
|
||||
- 页内提醒(Alert)放在相关内容上方,不自动消失;轻提示(Toast)只用于操作结果,4 秒后消失,可悬停暂停。
|
||||
- 不用弹窗打断。只有不可撤销的操作(删除、标记已递交)才用确认对话框。
|
||||
@@ -402,7 +447,7 @@
|
||||
|
||||
### 7.14 对话框
|
||||
|
||||
- 宽 480(确认)/ 640(表单),圆角 4,浮层阴影。
|
||||
- 宽 480(确认)/ 640(表单),圆角 12(v0.2,同 §5.1),浮层阴影,遮罩 `--scrim`。
|
||||
- 标题写要做的事:「删除项目「智慧规划资源 2025 标段三」?」;正文写后果;按钮「删除项目」「取消」,主操作在右。
|
||||
- 删除项目要输入项目名才能点删除;说明删除后 30 天内可在回收站恢复(以 G10 定稿为准)。
|
||||
|
||||
@@ -410,12 +455,16 @@
|
||||
|
||||
- 空状态写下一步做什么,带一个主按钮:「还没有招标文件。上传后,标博士会逐条提取要求。」
|
||||
- 加载用骨架屏,不用转圈占满屏。
|
||||
- 骨架屏**静止**:`--c-n100` 浅灰块,不做明暗起伏或扫光(符合「不闪烁」原则)(v0.2,Q8,已确认 2026-11-03)。
|
||||
- 系统错误:「出了点问题,请稍后重试。本次操作未扣额度。」带错误编号,便于客服查询。
|
||||
|
||||
### 7.16 AI 标识
|
||||
|
||||
- 系统生成的文字(摘要、说明、初稿)前面加「AI 摘要」「AI 初稿」标签:蓝铅笔 1px 描边、蓝铅笔字。
|
||||
- 人修改或确认后,标签换成署名行,文字变为墨色。
|
||||
- **AI 产出的正文始终是墨色**(v0.2,Q2,已确认 2026-11-03):大段蓝字阅读负担重。AI 身份只靠两样东西表示:
|
||||
- 「AI」小标签;
|
||||
- 正文左侧 2px 蓝铅笔虚线。
|
||||
- 人修改或确认后:去掉虚线(左内边距保留,正文不跳动),标签换成署名行(绿 ✓ + 姓名 + 时间 + 动作)。
|
||||
|
||||
### 7.17 检查报告 PDF
|
||||
|
||||
@@ -426,9 +475,48 @@
|
||||
- 页脚:页码「3 / 12」+「本报告为辅助检查结果,不构成对投标结果的保证」。
|
||||
- 全文不出现「通过」「合格」「保证」。
|
||||
|
||||
---
|
||||
### 7.18 选中态(v0.2,Q3,已确认 2026-11-03)
|
||||
|
||||
- 列表项、表格行被选中(读标清单的当前条、勾选的表格行、问题列表的当前问题):`--c-n50` 底 + 左侧 3px 墨色竖条。读标清单和表格一样,不再用蓝色浅底。
|
||||
- 键盘焦点另加 2px 墨色内框,和选中可以同时出现。
|
||||
- **当前条与勾选条要区分**(v0.2):
|
||||
- 当前条(点击或 J / K 定位到的那一条,原文查看器跟着它走)= `--c-n50` 底 + 3px 墨色竖条;同一列表只有一条;
|
||||
- 勾选条(批量处理的复选框)只有复选框是选中状态,**不加底色和竖条**;可以有多条,也可以和当前条重合;
|
||||
- 上面「勾选的表格行」按此修正:勾选不再出底色和竖条。
|
||||
- **竖条和级别的关系**(v0.2):竖条只表示「当前」,永远是墨色;问题级别只看实心 / 描边 / 无框的级别标签,「致命」行不再另加红竖线(§7.4),所以选中致命行时不会出现红、墨两条竖线。
|
||||
- 蓝色只留给原文高亮和出处链接:清单选中某条时,右侧原文查看器里对应的原句用蓝铅笔浅底高亮(§7.8),两边靠位置对应,不靠同色。
|
||||
- 导航和筛选的「当前项」(分类导航、筛选按钮、分页当前页)不是选中,用 `--c-n100` 实底 + 加粗。
|
||||
|
||||
### 7.19 开关(v0.2,Q4,已确认 2026-11-03)
|
||||
|
||||
- 矩形轨道(34 × 20,圆角 6)+ 方块滑钮(14 × 14,圆角 4),**不用胶囊形**(§5.1)。
|
||||
- 关:白底、控件边框、禁用灰滑钮;开:墨色轨道、白色滑钮。
|
||||
- 旁边写「开 / 关」(12px),不只靠滑钮位置表示状态。
|
||||
- 只用于立即生效的设置(如「到期前 30 天提醒」);需要提交的表单项用复选框。
|
||||
|
||||
### 7.20 分页(v0.2,Q4,已确认 2026-11-03)
|
||||
|
||||
- 左侧「共 N 条」,右侧页码 + 上一页 / 下一页 + 跳转输入框;页码用 Barlow 15。
|
||||
- 当前页:`--c-n100` 实底 + 加粗,无描边,和筛选按钮的按下态一致;悬停也出 `--c-n100`。
|
||||
- 高 32,圆角 8。只在超过一页时显示。
|
||||
|
||||
### 7.21 下拉选择与菜单(v0.2,Q4,已确认 2026-11-03)
|
||||
|
||||
- 触发框和输入框同规格(高 36、圆角 8、控件边框),右侧 chevron,展开时旋转。
|
||||
- 浮层:白底、1px 发丝线、圆角 12、浮层阴影,内边距 6;选项高 34、圆角 6,悬停 / 键盘移动出 `--c-n100`。
|
||||
- **选中项加粗,右侧墨色 ✓**;不用蓝色、不用背景色表示选中。
|
||||
- 不可选的项用禁用灰,并写明原因(如「不适用于本项目的采购方式」)。
|
||||
- 操作菜单(列表行的「更多」)同样式;会扣点的项在第二行写「扣 1 次检查 · 剩 12 次」(§8.3)。
|
||||
|
||||
### 7.22 日期选择(v0.2,Q4,已确认 2026-11-03)
|
||||
|
||||
- 周一开始;日期数字用 Barlow 15。
|
||||
- 今天:1px 控件边框;选中:墨底白字;本项目的关键日期:下方墨色小圆点。
|
||||
- **不可选的日期只变禁用灰,不加删除线**;不可选的格子没有悬停效果(v0.2)。
|
||||
- 非本月的日期**不显示**,格子留空(v0.2):否则上下月的灰色日期和不可选日期很难区分。
|
||||
- 日期输入框:可以直接键入,接受「2026/11/20 9:30」「2026.11.20 9:30」「2026年11月20日」等常见写法,离开输入框时整理成「2026-11-20 09:30」;下方小字显示界面写法「11月20日 09:30 · 剩 17 天」(v0.2)。
|
||||
- 带时间的字段(如投标截止):日期选择器底部有时间输入框,24 小时制;输入框格式见 §9.3。
|
||||
|
||||
## 8. 交互模式
|
||||
|
||||
### 8.1 AI 产出 → 人工确认 → 留痕
|
||||
|
||||
@@ -448,10 +536,12 @@
|
||||
| J / K | 下一条 / 上一条 |
|
||||
| O 或 Enter | 在原文查看器里打开当前出处 |
|
||||
| 1 / 2 / 3 | 确认无误 / 已修改 / 忽略(3 会打开原因输入框) |
|
||||
| U | 撤销当前条的处理 |
|
||||
| U | 撤销当前条的处理。本次处理过的问题留在原位,显示署名行,可以用 J / K 回到它再按 U;页面加载前已处理的折叠在「已处理」里(v0.2) |
|
||||
| ? | 显示快捷键说明 |
|
||||
|
||||
批量处理只开放给「提示」级(FR-M3-07):勾选后「批量确认无误」。
|
||||
批量处理只开放给「提示」级(FR-M3-07):勾选后「批量确认无误」;键盘 X 勾选当前条。
|
||||
|
||||
快捷键说明(? 打开)**按页面只列能用的键**(v0.2):读标页是 J / K、Enter、?;查标的问题列表是 J / K、O / Enter、1 / 2 / 3、X、U、?。
|
||||
|
||||
### 8.3 扣点前先告知
|
||||
|
||||
@@ -497,6 +587,7 @@
|
||||
| 页码 | 「第 41 页」;带文件时「招标文件 · 第 41 页」「技术册 · 第 12 页」 |
|
||||
| 金额 | 沿用招标文件的单位,保留两位小数:「132.00 万元」;不换算单位 |
|
||||
| 日期时间 | 界面:「11月2日 14:20」(跨年时带年份);报告和留痕:「2026-11-02 14:20」 |
|
||||
| 日期输入 | 输入框里写「2026-11-20 09:30」(年-月-日 + 24 小时制时间),配日期选择器(§7.22),也可以直接键入;提交后在界面上显示为「11月20日 09:30」(v0.2,Q10,已确认 2026-11-03) |
|
||||
| 数量 | 「致命 2 项」「共 186 页」 |
|
||||
| 标点 | 中文用全角标点,引用原文照录 |
|
||||
|
||||
@@ -530,7 +621,7 @@
|
||||
- [ ] 级别、状态不只靠颜色 —— 见 3.3
|
||||
- [ ] 所有操作可用键盘完成;焦点环 2px 墨色 + 2px 间隙,任何背景上都看得见
|
||||
- [ ] 只有图标的按钮有 `aria-label`
|
||||
- [ ] 原文高亮除颜色外还有描边框
|
||||
- [ ] 原文高亮除颜色外还有底边线(v0.2,原为描边框)
|
||||
- [ ] 尊重「减少动态效果」系统设置;动效时长 120–200ms,不闪烁
|
||||
- [ ] 浏览器缩放到 200% 时内容不丢失(可以横向滚动)
|
||||
|
||||
@@ -571,6 +662,8 @@
|
||||
|
||||
详见 `docs/decisions.md` U5。
|
||||
|
||||
**Q1–Q12(2026-11-03)**:UI demo 发现的规范缺口,全部按建议确认,已写进第 3、4、7、9 节(见文件头的 v0.2 补充),汇总表在 `ui-demo/index.html` 第 03 节。
|
||||
|
||||
前端不用带样式的 UI 框架(AR10):组件样式直接引用 `tokens.css`,复杂交互用无样式组件库 Reka UI 打底。
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user