某市政务服务中心智慧大厅建设项目
某市政务服务管理办公室 · 政府采购 · 公开招标
-
- 投标截止11月20日 09:30
剩 17 天
- 剩 17 天
所投包采购包 1
- 就绪未就绪
- 致命3重要3提示2第 2 次检查 · 11月2日
-
-
③ 卡片
-卡片是白底 + 1px 分隔线 + 2px 圆角，不加阴影（层次靠分隔线和底色）。卡片里的按钮一律用次按钮或文字按钮，把主按钮留给页面级操作。
- +只有一种容器：白卡片，1px 发丝线，圆角 12，无阴影，卡片里不再套面板。工作台只用列表，不做项目卡片视图（Q11）。
+01
- 项目卡
规范 §7.9 · 卡片视图（表格视图见 ④）
-
-
-
-
- 已检查
-
-
- 编制中
-
-
- 已检查
某区智慧社区平台运维服务
某区民政局 · 政府采购 · 竞争性磋商
-
- 响应截止剩 2 天 5 小时
- 所投包全部
- 就绪就绪
- 致命 —重要1第 3 次检查 · 11月3日
-
-
某县数据中心机房改造项目
某县大数据管理局 · 招标投标
-
- 投标截止今天 17:00 截止
- 所投标段标段 1
- 清单草稿 v1
- 跟进中编制中已检查已递交
- 待确认 2 条
-
-
- 已递交
-
-
-
-
-
-
-
-
- 某区智慧校园一期
某区教育局 · 政府采购 · 公开招标
-
- 投标截止已截止
- 所投包全部
- 递交10月28日
- ✓王敏10月28日 09:12标记已递交
-
-
↑ 加载中（骨架屏）
-- 致命项目卡左侧加 3px 致命红竖线（与问题行一致），方便在卡片墙里扫读；状态用中性描边标签，不用彩色。
- 术语跟着体系走：磋商项目写「响应截止」「响应文件」，招标投标体系写「标段」（§9.1）。
02
-
- 统计格
规范 §4.2 Figure 30/36- 统计数字一律墨色，即使是「致命问题 3」也不染红：红色留给标签，避免一屏红色太多。
01
+ 可点筛选（工作台）：按下后标题加粗、底边出墨色线
+ 统计卡
规范 §4.2 · §9.5本期解析13/ 50 次
+ 本期检查8/ 20 次
+ 本期退回2次
+ - 只写标题和数字，不加说明小字（§9.5）。数字 Barlow 28（
--fs-figure），单位辅助灰。 - 致命数用致命红、7 天内截止用赭色，其余墨色。
03
- 额度卡
规范 §7.10 · §8.3 · 红线 9
-
-
-
-
本期额度
专业版 · 至 2027-10-31
-
+
+
+
+
+
-
+
+ 顶栏额度（白底只为陈列；真实顶栏见 工作台 · 80% / 用完）
+
+ 解析剩余37/ 50
- 已用 13 次
检查剩余12/ 20
+ 已用 8 次
02
+
-
-
+
+
+ 额度卡
规范 §7.10 · §8.3 · 红线 9检查额度
已用 80%
+ 检查剩余4/ 20
+
+
+
+ 同一项目 24 小时内复查不扣额度。
+检查额度
已用完
+ 检查剩余0/ 20
+
+
+
+ 本期检查额度已用完，可在额度页提交续费申请，或等下期发放。
+- 已用部分墨色；用到 80% 起额度条、剩余数和顶栏数字变赭色（加粗），并出现一行提醒；用完时说明续费方式：在额度页提交续费申请（专业版：在线申请 → 对公转账 → 运营开通，决策 G8）。全程不用红（Q9）。
04
+ 任务进度卡
规范 §7.1103
任务进度卡
规范 §7.11
-
-
-
- 正在解析招标文件
已用时 1 分 40 秒ZC-2026-0418 采购文件.pdf · 186 页
--
-
- ✓识别文件格式 -
- ✓提取文字186 页 -
- ✓识别分包2 个包 -
- 提取清单62% -
- 核对出处 -
62%
- 可以离开本页，完成后会发站内通知。
-取消后退回 1 次解析额度
-
-
-
- 解析失败
11月2日 14:31关于 ZC-2026-0418 的更正公告.pdf
--
-
- ✓识别文件格式 -
- !提取文字 -
- 识别分包 -
- 提取清单 -
!
- 文件已加密，无法读取文字。已退回 1 次解析额度。
请上传未加密的版本，或在 PDF 阅读器里另存一份。E-20261102-3M8A
-
-
-
-
+
+
-
+
-
解析完成
用时 3 分 12 秒-
-
- 提取要求
- 26 条 · 其中 ★ 4 条 -
- 待确认
- 2 条没有可靠出处 -
- 分包
- 2 个采购包 -
已扣 1 次解析
+ 正在解析招标文件
已用时 1 分 40 秒
+
- ZC-2026-0418 采购文件.pdf · 186 页
+-
+
- ✓识别文件格式 +
- ✓提取文字186 页 +
- ✓识别分包2 个包 +
- 提取清单 +
- 核对出处 +
62%
+ 可以离开本页，完成后会发站内通知。
-
+
+
+
+
+
+ 检查排队中
前面还有 2 个任务 · 约 4 分钟取消后退回 1 次解析
+
+
+ 解析失败
11月2日 14:31
+
+ 关于 ZC-2026-0418 的更正公告.pdf
+-
+
- ✓识别文件格式 +
- !提取文字 +
- 识别分包 +
- 提取清单 +
文件已加密，无法读取文字。已退回 1 次解析额度。请上传未加密的版本。
E-20261102-3M8A
+
+
+
+
+
+
解析完成
用时 3 分 12 秒
+
+ -
+
- 提取要求
- 26 条 · 其中 ★ 4 条 +
- 待确认
- 2 条（没有可靠出处） +
- 分包
- 2 个采购包 +
去读标已扣 1 次解析
+ 检查排队中前面 2 个任务 · 约 4 分钟
+ - 阶段：✓ 完成（墨色实心）、当前（加粗）、未开始（辅助灰）；失败用赭色「!」并说明原因和退回额度，不用红。
05
- AI 摘要卡
规范 §7.16 · §8.1 · 红线 1、2
-
-
-
AI 摘要
- 项目要点
未确认 · 每一条都可以点出处核对
-
-
+
+
+
+
@@ -233,8 +310,33 @@
diff --git a/docs/design/ui-demo/controls.html b/docs/design/ui-demo/controls.html
index 065eaf9..8439ceb 100644
--- a/docs/design/ui-demo/controls.html
+++ b/docs/design/ui-demo/controls.html
@@ -1,4 +1,10 @@
+
@@ -9,15 +15,37 @@
+
@@ -31,20 +59,19 @@
主按钮 次按钮 文字按钮 （不用） 文字按钮 不用
- -
-
- 法律体系
- 政府采购 · 公开招标（按「投标无效」口径检查） -
- 预算 / 限价
- 采购包 1：286.00 万元（最高限价同预算）第 2 页 -
- 评标方法
- 综合评分法：价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8第 31 页 -
- 联合体
- 不接受第 2 页 -
- 保证金
- 不收取第 21 页 -
- 样品
- 未找到要求 · 已查找：第二章、第三章、第六章 -
04
+ AI 摘要卡
规范 §7.16 · §8.1 · 红线 1、2
+
+
+
- 项目要点
AI 摘要
+
-
-
-
-
- 项目要点
✓王敏11月2日 14:20确认无误
-
+
+
+ -
-
- 法律体系
- 政府采购 · 公开招标（按「投标无效」口径检查） -
- 预算 / 限价
- 采购包 1：286.00 万元（最高限价同预算）第 2 页 -
- 评标方法
- 综合评分法：价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8第 31 页 -
- 联合体
- 不接受 已修改 · 查看记录第 2 页 -
- 保证金
- 不收取第 21 页 -
- 样品
- 未找到要求 · 已查找：第二章、第三章、第六章 -
项目要点
+
-
-
+
- 确认前：「AI 摘要」蓝铅笔标签 + 左侧虚线；确认后：标签换成绿色署名，虚线变墨色实线，正文本来就是墨色。
- 找不到的项写「未找到 · 已查找：…」，不猜测、不留空。胜率之类的数据不足时不展示（红线 5）。
- 正文始终墨色。确认前：标题旁「AI 摘要」标签 + 左侧 2px 蓝铅笔虚线；确认后：两者去掉，正文下方出署名行（绿 ✓ + 姓名 + 时间 + 动作），正文位置不动（Q2）。左卡可点「确认无误」试一下。
- 出处蓝色，可点开原文核对；找不到的写「未找到 · 已查找：…」，不猜测、不留空（红线 2、5）。
06
+ 关键日期卡
规范 §7.9 倒计时 · §9.305
关键日期卡
规范 §7.9 倒计时 · §9.3
-
+
+
+
+
+
+
-
-
- 关键日期
以补遗 1 更正后的时间为准-
-
- 10-28采购文件公告发布 -
- 11-09询问、质疑截止公告期满后 7 个工作日 · 剩 6 天第 6 页 -
- 11-20 09:30投标截止 / 开标剩 17 天 · 已被补遗 1 更新，原为
11-18 09:30补遗 1 · 第 1 页
- - 2027-02-18投标有效期至截止日起 90 天第 21 页 -
MVP 只在站内显示倒计时，不发截止提醒。
-
-
-
+ 7 天内截止
全部项目-
-
- 今天 17:00某县数据中心机房改造项目剩 6 小时 · 编制中标段 1 -
- 11-05 14:30某区智慧社区平台运维服务剩 2 天 5 小时 · 就绪全部 -
- > 72 小时：墨色「11月20日 09:30 · 剩 17 天」；≤ 72 小时：赭色小字；≤ 24 小时：赭色加粗；已过：辅助灰「已截止」。
- 截止临近不用红色、不闪烁。
关键日期
已按补遗 1 更新
+
+ -
+
- 10月28日采购文件公告发布 +
- 11月9日询问、质疑截止剩 6 天第 6 页 +
- 11月20日 09:30投标截止 / 开标剩 17 天 · 补遗 1 更新，原为 11月18日 09:30补遗 1 · 第 1 页 +
- 2027年2月18日投标有效期至截止日起 90 天第 21 页 +
7 天内截止
全部项目
+
+ -
+
- 今天 17:00某县数据中心机房改造项目剩 6 小时 · 编制中标段 1 +
- 11月5日 16:00某区智慧社区平台运维服务剩 2 天 5 小时 · 已检查全部 +
- 日期 Barlow 15（
--fs-figure-sm），跨年带年份。倒计时：> 72 小时墨色；≤ 72 小时赭色小字；≤ 24 小时赭色加粗；已过辅助灰。不用红、不闪烁。
06
+ 项目信息卡
规范 §7.9 · §9.1
+
+
+
+
+
+
+
+
+
+
+ 项目信息
+
+ -
+
- 采购人
- 某市政务服务管理办公室 +
- 项目编号
- ZC-2026-0418 +
- 体系
- 政府采购 · 公开招标 +
- 所投包
- 采购包 1 +
- 投标截止
- 11月20日 09:30 · 剩 17 天 +
- 状态
- 已检查未就绪 +
跟进中编制中已检查已递交
+ 项目信息
+
+ -
+
- 招标人
- 某县大数据管理局 +
- 项目编号
- JS-2026-1107 +
- 体系
- 招标投标 · 公开招标 +
- 所投标段
- 标段 1 +
- 投标截止
- 今天 17:00 截止 +
- 状态
- 编制中 +
跟进中编制中已检查已递交
+ 项目信息
+
+
+ 加载中：骨架屏静止，不做明暗起伏（Q8）
+- 只在项目概览页右栏用；工作台不做项目卡片，只用列表（见 ⑤ 工作台）。
- 术语跟着体系走：政府采购写「采购人」「采购包」，招标投标写「招标人」「标段」（§9.1）。
① 控件总览
-每个控件按「默认 → 悬停 → 按下 → 聚焦 → 禁用 → 加载中 / 错误」陈列。灰色小字是状态名；标「可以点」的是可交互的。示意数据取自原型的「某市政务服务中心智慧大厅建设项目」。
+按状态陈列。灰色小字是状态名，标「可以点」的可以交互。
-
-
- 一屏只有一个主按钮。没有红色的危险按钮：删除用次按钮 + 确认对话框。 -
- 加载中把文字换成「正在…」，两段文字叠在同一格里，按较宽的定宽，切换时按钮不跳动；不加转圈图标。 -
- 主按钮悬停变浅 8%（用 color-mix 计算，不新增颜色变量）；按下回到墨色并加一道内阴影。 +
- 没有红色的危险按钮：删除用次按钮 + 确认对话框。 +
- 加载中把文字换成「正在…」，按钮宽度不变，不加转圈。
+
+ 尺寸
- -- 28：表格行内 · 32：默认 · 40：登录页、空状态
- 32 表格行内 · 36 默认 · 40 登录页、空状态
带图标 · 只有图标
@@ -52,18 +79,28 @@ - +
-
- 图标必须和文字一起出现；只有图标时要有 aria-label 和悬停提示。
- 只有图标时要有 aria-label 和悬停提示。
会扣点的按钮 可以点
-扣 1 次检查 · 剩 12 次
+ 扣 1 次检查 · 剩 12 次
24 小时内复查，不扣额度
- 剩 0 次 · 按钮仍可点
+ 剩 0 次 · 仍可点
+
@@ -71,17 +108,17 @@
一屏一个主按钮，按上下文算
+
+
+ 页面级：只有一个，放在页头右侧
+
+ 智慧大厅建设项目扣 1 次检查 · 剩 12 次
对话框：独立上下文，可以有自己的主按钮
+
+ 确认清单 v3？
- 本页和组件预览是陈列页，为了对比会同时出现多个主按钮，不受此限。
02
输入框与文本域
规范 §7.13
-
默认（占位符用辅助灰）
+ 默认
悬停
- 聚焦（2px 墨色焦点环 + 2px 间隙）
+ 聚焦
已填写
错误（赭色，不用红）
!手机号应为 11 位数字
禁用
- 只读（系统识别结果，可复制）
- 带说明文字
+ 天
从投标截止日起算，招标文件第 21 页只读
+ 带单位 · 说明
天
招标文件第 21 页
+
-
-
+
-
-
@@ -237,51 +296,53 @@
-
-
-
-
-
-
+
-
-
+
-
- 文本域 · 字数 可以输入
@@ -95,75 +132,91 @@
-
- 搜索框的放大镜只做辅助，占位符写清楚能搜什么。
- 输入框高 32，左右内边距 10；数值输入用 Barlow 等宽数字。
- 高 36，圆角 8；聚焦时边框变墨并加 1px 墨色内圈。占位符写清楚能搜什么。
03
+ 下拉选择
AR10 · Reka UI Select 打底03
下拉选择
规范 §7.21
-
未选择
+
未选择 · 可以点
已选择 · 可以点
-
-
-
展开（浮层：4px 圆角 + 阴影）
+
+
+
展开
+
-
错误
- !请选择资质类型，查标时按类型核对
+ !请选择资质类型禁用
- 由招标文件识别，在项目设置里修改
表格行内（28 高）
+
- 表格行内（高 32）
- 键盘：↑ ↓ 移动、Enter 选中、Esc 收起。选中项加粗并在右侧打 ✓（形状 + 字重，不只靠颜色）。
- 不可选的项用禁用灰，并在右侧写原因。
- 选中项加粗，右侧墨色 ✓；不用蓝色，也不用底色。悬停和键盘移动出浅灰底。
- 不可选的项变禁用灰，右侧写原因。键盘：↑ ↓ 移动、Enter 选中、Esc 收起。
04
+ 日期选择
规范 §9.3 · AR1004
日期选择
规范 §7.22 · §9.3
-
收起 · 可以点
-
-
- 以补遗 1 的更正为准 · 剩 17 天
-
-
-
-
- !发证日期晚于有效期，请核对证书
+ 输入框 可以输入、可以点
+
+
+
+
+
+
+
+
+ 24 小时制
+
+
+
+
+
+
+
+
+ 可以键入「2027/5/14」
+
+
+
+ !发证日期晚于有效期，请核对证书
+
-
展开
+展开 · 带时间
-
- 一周从周一开始；数字用 Barlow 等宽。
- 今天：控件灰描边；选中：墨底白字；关键日期：下方小圆点。
- 周一开始，非本月的格子留空。今天：控件灰描边；选中：墨底白字；关键日期：下方小圆点。
- 时间 24 小时制。
有不可选的日期
-
- 不可选的日期加删除线（不只靠变灰）。
- 界面显示「11月20日 09:30」，输入框里用「2026-11-20」便于核对和粘贴。
- 不可选的日期只变禁用灰，没有悬停，不加删除线。
- 输入框写「2026-11-20 09:30」，可以直接键入「2026/11/20 9:30」等写法，离开时整理；下方显示「11月20日 09:30 · 剩 17 天」，跨年时带年份。
05
+ 复选 · 单选 · 开关
规范 §8.2 批量勾选05
复选 · 单选 · 开关
规范 §7.19 · §8.2复选框
未选
已选
- 半选（表头全选）
+ 半选
聚焦
禁用
禁用 · 已选
@@ -190,46 +243,52 @@
开关 可以点
-
关
- 开
- 禁用 · 关
- 禁用 · 开
+ 关
+ 开
+ 禁用 · 关
+ 禁用 · 开
-
-
+
- 额度用到 80% 时站内提醒每期提醒一次
+ 资质到期前 30 天提醒
- 规范没有定义开关。这里沿用 2px 圆角做成方形滑块（不用胶囊形），旁边写「开 / 关」，不只靠颜色。
- 矩形轨道 + 方块滑钮，不用胶囊形；开为墨色，旁边写「开 / 关」。
- 只用于立即生效的设置；要提交的表单项用复选框。
06
+ 级别标签 · 状态标签 · AI 标识 · 署名
规范 §3.3 · §7.2 · §7.5 · §7.1606
级别标签 · 中性标签 · AI 标识 · 署名
规范 §3.3 · §7.2 · §7.16问题级别（实心 / 描边 / 无框）
致命重要提示计数致命3重要3提示3
参数判断疑似不满足疑似不满足满足需人工判断未找到响应
- 项目状态 · 就绪 · 复查标记
-跟进中编制中已检查已递交已归档
- 未就绪就绪新增沿用本次已解决
- 清单状态草稿 v3已确认 v2✓王敏11月2日 15:12确认
- 分类资格条件无效条款技术参数采购包 1通用
+ 中性标签（浅灰实底，无描边）
+状态跟进中编制中已检查已递交已归档
+ 就绪已检查就绪已检查未就绪
+ 分类资格条件无效条款技术参数采购包 1
+ 复查新增沿用本次已解决清单草稿 v3已确认 v2
-
AI 产出 → 人工确认（颜色说明谁说的）
- +AI 产出 → 人工确认
+AI 摘要AI 初稿AI 提取来源AI人工添加补遗 1
-
+ AI 产出：蓝铅笔标签 + 左侧虚线
-
- AI 摘要未确认预算 418.00 万元，分 2 个采购包；采购包 1 最高限价 286.00 万元。招标文件 · 第 2 页
人工确认后：墨色正文 + 实线 + 绿色署名
+
确认前：「AI」标签 + 左侧 2px 蓝铅笔虚线，正文墨色 · 可以点
+
+ 确认后：去掉虚线，换成署名行（绿 ✓ + 姓名 + 时间）
+ 预算 418.00 万元，分 2 个采购包；采购包 1 最高限价 286.00 万元。招标文件 · 第 2 页
-
✓王敏11月2日 14:20确认无误
王敏11月2日 14:20确认无误
王敏11月2日 14:20已修改
+ 王敏11月2日 14:26已忽略
+ 原因：招标文件允许
07
+ 出处
规范 §7.3 · 最重要的组件07
出处
规范 §7.3招标原文 → 投标原文
招标文件 · 第 41 页
★ 2U机架式服务器，CPU：配置≥2颗海光架构32C 2.7GHz，内存: ≥512G DDR4，系统盘: 2块≥480G SSD……
技术册 · 第 12 页
- 第 12 行 内存：256G DDR4 无偏离
- 页码用 Barlow；原句照录，不加空格、不改标点。
- 原句照录，不加空格、不改标点；页码用 Barlow。
「未找到」也是出处
招标文件 · 第 44 页
- ★ 支持硬件BFD，最小报文发送间隔≤50ms，提供相关证明材料（包含但不限于产品官网公开参数截图证明等）。
投标文件 · 未找到
- 证明材料未找到 · 已查找：技术册（全部章节）、商务册（附件）
- 竖线改虚线，写明找过哪些分册、哪些章节。
投标文件 · 未找到
+ 已查找：技术册（全部章节）、商务册（附件）
- 竖线改虚线，写明找过哪些分册。
-
OCR · 截断 · 当前选中
-商务册 · 第 3 页OCR
+ 投标人（电子签章）：南京某信息技术有限公司 日期：2026年11月25日
OCR · 截断 · 当前
+商务册 · 第 3 页OCR
投标人（电子签章）：南京某信息技术有限公司 日期：2026年11月25日
招标文件 · 第 23 页
- 2.财务状况报告，至少提供：（1）本项目开标时间前6个月内任一时间截点的资产负债表的扫描件1份；（2）本项目开标时间前6个月内任何1月（不含开标当月）利润表月报表的扫描件1份。3.本项目开标时间前6个月内任何1月的依法缴纳税收和社会保障资金的相关材料的扫描件。
- 选中的出处竖线加粗到 4px。超过 3 行截断，「展开原文」看全句。
- 当前打开的出处竖线加粗到 4px；超过 3 行截断。
08
+ 提醒（页内 Alert）
规范 §7.12 · §7.1508
提醒
规范 §7.12 · §7.15
-
+
+
i
-
- 清单未确认，检查结果以当前清单为准。
!
+ 投标截止还剩 2 天 5 小时。还有 3 项致命问题待处理。
截止临近用赭色，不用红色；只提醒，不拦截。清单未确认，检查结果以当前清单为准。
某县数据中心机房改造项目 今天 17:00 截止，还有 3 项致命问题待处理。
本期检查额度 已用 80%，剩 4 次。
查看额度
-
+
+
!
- 解析失败：文件已加密。已退回 1 次解析额度。请上传未加密的版本。
关于 ZC-2026-0418 的更正公告.pdfi
- 出了点问题，请稍后重试。本次操作未扣额度。
错误编号 E-20261103-7Q4K · 联系客服时请提供✓
+ 报告已导出：智慧大厅建设项目-辅助检查报告-第 2 次.pdf
解析失败：文件已加密。已退回 1 次解析额度。
关于 ZC-2026-0418 的更正公告.pdf出了点问题，请稍后重试。本次操作未扣额度。
错误编号 E-20261103-7Q4K报告已导出：智慧大厅建设项目-辅助检查报告-第 2 次.pdf
- 提醒放在相关内容上方，不自动消失。系统错误不用红色，用中性提醒 + 错误编号。
- 和卡片同规格的白条，颜色只在图标和关键字上：信息墨色、提醒赭色、完成绿色。截止临近、额度、解析失败都用赭色，不用红。
- 放在相关内容上方，不自动消失；系统错误用中性提醒 + 错误编号。
09
+ 轻提示（Toast）
规范 §7.1209
轻提示
规范 §7.12样式
@@ -294,38 +355,38 @@触发 可以点
-- 只用于操作结果；4 秒后消失，鼠标悬停时暂停计时。
- 可撤销的操作在轻提示里给「撤销」；失败不用轻提示，用页内提醒说清原因。
- 多条从下往上堆叠，屏幕阅读器会播报。
- 只用于操作结果，4 秒消失，悬停暂停。可撤销的操作给「撤销」。
- 失败不用轻提示，用页内提醒说清原因。
10
+ 对话框
规范 §7.14 · 只用于不可撤销的操作10
对话框
规范 §7.14 · 不可撤销的操作和表单删除项目「某区智慧社区平台运维服务」？
-
项目下的招标文件、清单、检查结果和报告会一起删除。删除后 30 天内可以在回收站恢复，之后彻底删除。
+项目下的招标文件、清单、检查结果和报告会一起删除。30 天内可以在回收站恢复。
-
打开真实对话框 可以点
+打开对话框 可以点
-
+
- - 宽 480（确认）/ 640（表单），圆角 4。
- 标题写要做的事，正文写后果；主操作在右，按钮写动作「删除项目」，不写「确定」。
- 删除没有红色：靠输入项目名确认。Esc 关闭，焦点回到触发按钮。
- 宽 480（确认）/ 640（表单），圆角 12，遮罩墨色 32%。对话框不裁剪下拉和日期浮层。
- 标题写要做的事，正文写后果；主按钮在右，写动作，不写「确定」。对话框可以有自己的主按钮。
- 删除不用红色，靠输入项目名确认。Esc 关闭，焦点回到触发按钮。
11
+ 标签页 · 分段控件 · 分页
规范 §5.311
标签页 · 筛选 · 分页 · 选中
规范 §5.3 · §7.18 · §7.20标签页 可以点，← → 切换
@@ -336,20 +397,42 @@项目要点、关键日期、文件和检查记录。
项目检查清单：26 条，其中待确认 2 条。
项目检查清单 26 条，待确认 2 条。
第 2 次检查：致命 3、重要 3、提示 3。
-
分段控件（筛选） 可以点
+筛选 可以点
+
+
分页 可以点
-- 当前页用墨色描边 + 加粗（不填色，避免和主按钮抢）。每页条数固定 20 / 50，不做无限滚动，方便「第几页第几条」沟通。
- 当前页浅灰实底 + 加粗，和筛选的按下态一样；只在超过一页时显示。
+
+
+
+
+
+
+
+
+
+
+ 当前条 · 清单项
可以点，↑ ↓ 移动当前条 · 勾选 · 表格行
点行定位，点复选框勾选| 资质 | 类型 | 有效期至 | |
|---|---|---|---|
| ISO/IEC 27001 信息安全管理体系 | 体系认证 | 2027年5月14日 | |
| 信息系统建设和服务能力等级 CS3 | 资质证书 | 2028年1月9日 | |
| 智慧大厅综合管理平台 V2.0 | 软件著作权 | 长期 |
- 当前条（清单项、表格行、问题）：最浅的灰底 + 左侧 3px 墨色竖条；键盘焦点另加 2px 墨色内框。竖条只表示「当前」，和问题级别无关，致命行不加红竖线。
- 勾选（批量处理）只有复选框是选中状态，不加底色和竖条，和当前条可以同时出现。
- 筛选、分页、分类导航的「当前项」用浅灰实底 + 加粗。蓝色只留给原文高亮和出处。
还没有招标文件
上传后，标博士会逐条提取要求，每条都附原文出处。
扣 1 次解析 · 剩 37 次
-
-
骨架屏（加载清单）
+骨架屏
- 不用转圈占满屏。骨架做缓慢的明暗变化（1.6 秒），系统开了「减少动态效果」时静止。
- 静止的浅灰块，不做明暗起伏或扫光；不用转圈占满屏。
分阶段进度
@@ -383,43 +466,33 @@可以离开本页，完成后会发站内通知。
-
-
-
-
-
@@ -440,8 +513,50 @@ $$("[data-count-field]").forEach((f) => {
$$("[data-expand]").forEach((b) => b.onclick = () => { const q = b.previousElementSibling; const on = q.classList.toggle("clamp"); q.style.webkitLineClamp = on ? "" : "unset"; b.textContent = on ? "展开原文" : "收起"; });
/* 额度不足：按钮仍可点，点了说明原因 */
-$("[data-nomore]").onclick = () => dialog({ title: "本期检查额度已用完", ok: "联系客服加额度", cancel: "关闭",
- body: "
+ 
+
+
+ `);
+ const top = $(".top", main), gq = $("[data-gq]", main);
+ const onScroll = () => top.classList.toggle("scrolled", (main.scrollTop || window.scrollY) > 4);
+ addEventListener("scroll", onScroll, { passive: true }); main.addEventListener("scroll", onScroll, { passive: true }); onScroll();
+ $("[data-gsearch]", main).addEventListener("submit", (e) => { e.preventDefault(); if (!(opt.search && opt.search.onInput)) toast("（演示）全局搜索：这里只做了样式", { ok: false }); });
+ if (opt.search && opt.search.onInput) gq.addEventListener("input", () => opt.search.onInput(gq.value.trim()));
+ document.addEventListener("keydown", (e) => {
+ if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") { e.preventDefault(); gq.focus(); }
+ else if (e.key === "Escape" && document.activeElement === gq) gq.blur();
+ });
+ document.addEventListener("click", (e) => { if (e.target.closest("[data-demo-nav]")) { e.preventDefault(); toast("（演示）这一页没有做", { ok: false }); } });
$("[data-notice]").onclick = () => toast("解析完成：补遗 1 已并入清单（新增 2 条，更新 1 条）。");
- $("[data-keys]").onclick = keysDialog;
}
- function keysDialog() {
- dialog({ title: "快捷键", cancel: null, ok: "知道了",
- body: `
-
` });
+
+ /* ---------- 浮动菜单：列表行的「更多」等（role=menu，↑ ↓ 移动，Esc 关闭，焦点回到触发按钮） ----------
+ * items：[{ label, sub, act, disabled }] 或 "-"（分隔线）
+ * sub：第二行说明，可以是 HTML（如扣点说明）；
+ * disabled：不可用的原因（如「递交后可用」），该项变禁用灰、右侧写原因，点了不触发；
+ * onPick(act, item)。Demo.menuHTML(items) 生成同样的菜单项，供陈列页静态展示。 */
+ function menuHTML(items) {
+ return items.map((it, i) => it === "-" ? "
" : ``).join(""); + } + let fm = null; + function closeFloatMenu(focusBack) { + if (!fm) return; + fm.el.remove(); fm.btn.setAttribute("aria-expanded", "false"); + if (focusBack) fm.btn.focus(); + fm = null; + } + function floatMenu(btn, items, onPick) { + if (fm && fm.btn === btn) return closeFloatMenu(); + closeFloatMenu(); + const el = document.createElement("div"); + el.className = "menu float"; el.setAttribute("role", "menu"); + el.innerHTML = menuHTML(items); + document.body.appendChild(el); + const r = btn.getBoundingClientRect(); + const below = r.bottom + 4 + el.offsetHeight < innerHeight; + el.style.top = `${below ? r.bottom + 4 : r.top - 4 - el.offsetHeight}px`; + el.style.left = `${Math.max(8, r.right - el.offsetWidth)}px`; + btn.setAttribute("aria-expanded", "true"); + fm = { el, btn }; + el.addEventListener("click", (e) => { const b = e.target.closest("[data-i]"); if (!b) return; e.stopPropagation(); const it = items[+b.dataset.i]; if (it.disabled) return; closeFloatMenu(true); if (onPick) onPick(it.act || it.label, it); }); + el.addEventListener("keydown", (e) => { + const its = $$("[role=menuitem]", el), k = its.indexOf(document.activeElement); + if (e.key === "ArrowDown") { e.preventDefault(); its[(k + 1) % its.length].focus(); } + if (e.key === "ArrowUp") { e.preventDefault(); its[(k - 1 + its.length) % its.length].focus(); } + if (e.key === "Escape") { e.stopPropagation(); closeFloatMenu(true); } + if (e.key === "Tab") closeFloatMenu(); + }); + $("[role=menuitem]", el).focus(); + } + document.addEventListener("click", (e) => { if (fm && !fm.el.contains(e.target) && !fm.btn.contains(e.target)) closeFloatMenu(); }); + addEventListener("scroll", () => closeFloatMenu(), { passive: true, capture: true }); + addEventListener("resize", () => closeFloatMenu()); + + /* ---------- 快捷键说明（§8.2）：按页面传入，只列本页能用的键 ---------- + * Demo.keysDialog(Demo.KEYS.reading) 读标：J / K、Enter、? + * Demo.keysDialog(Demo.KEYS.check) 查标（问题列表）：J / K、O / Enter、1 / 2 / 3、X、U、? + * 也可以传自己的 [[键的 HTML, 说明], …]；Demo.keysTable(list) 生成同样的表格供静态展示。 */ + const kb = (k) => `${k}`; + const KEY = { + jk: [`${kb("J")} / ${kb("K")}`, "下一条 / 上一条"], + enter: [kb("Enter"), "在原文查看器里打开当前条的出处"], + open: [`${kb("O")} 或 ${kb("Enter")}`, "在原文查看器里打开当前出处"], + act: [`${kb("1")} ${kb("2")} ${kb("3")}`, "确认无误 / 已修改 / 忽略（忽略、致命的确认无误在行内写说明）"], + x: [kb("X"), "勾选当前条（只限「提示」）"], + undo: [kb("U"), "撤销刚才的处理"], + help: [kb("?"), "显示本说明"] + }; + const KEYS = { reading: [KEY.jk, KEY.enter, KEY.help], check: [KEY.jk, KEY.open, KEY.act, KEY.x, KEY.undo, KEY.help] }; + const keysTable = (list) => `${list.map(([k, t]) => `
`;
+ function keysDialog(list = KEYS.check) {
+ dialog({ title: "快捷键", cancel: null, ok: "知道了", body: keysTable(list) });
}
/* ---------- 轻提示：4 秒消失，悬停暂停 ---------- */
@@ -119,7 +210,12 @@
document.body.style.overflow = "hidden";
const close = () => { s.remove(); document.body.style.overflow = ""; document.removeEventListener("keydown", onKey, true); if (back && back.focus) back.focus(); };
const onKey = (e) => {
- if (e.key === "Escape") { e.stopPropagation(); close(); }
+ if (e.key === "Escape") {
+ e.stopPropagation();
+ const op = $(".pop.open", s); // 先收起对话框里展开的下拉 / 日期选择器
+ if (op) { closePops(); ($("input, .select", op) || op).focus(); return; }
+ close();
+ }
if (e.key === "Tab") { // 焦点锁定在对话框内
const f = $$("button:not([disabled]), input:not([disabled]), textarea, select, a[href]", s);
if (!f.length) return;
@@ -172,54 +268,199 @@
menu.addEventListener("click", (e) => { const o = e.target.closest('[role=option], [role=menuitem]'); if (o && o.getAttribute("aria-disabled") !== "true") { e.stopPropagation(); pick(o); } });
}
- /* ---------- 日期选择 ---------- */
+ /* ---------- 日期选择（§7.22） ----------
+ * 周一开始；非本月的格子留空；不可选日期（opt.min 之前）禁用灰、无悬停；今天描边；关键日期（opt.marks）下方小圆点。
+ * 日期键统一写成不补零的「2026-11-3」。 */
const WD = ["一", "二", "三", "四", "五", "六", "日"];
+ const TODAY = new Date(2026, 10, 3), TODAY_KEY = "2026-11-3"; // 演示里的「今天」
+ const pad2 = (n) => String(n).padStart(2, "0");
+ const fig = (v) => `${v}`;
+ const keyOf = (d) => `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
function calHTML(y, m, sel, opt = {}) {
- const first = new Date(y, m, 1), start = (first.getDay() + 6) % 7, days = new Date(y, m + 1, 0).getDate();
- const prevDays = new Date(y, m, 0).getDate();
+ const start = (new Date(y, m, 1).getDay() + 6) % 7, days = new Date(y, m + 1, 0).getDate();
let cells = "";
- for (let i = 0; i < 42; i++) {
+ for (let i = 0, n = Math.ceil((start + days) / 7) * 7; i < n; i++) {
const d = i - start + 1;
- let dd, out = false, mm = m;
- if (d < 1) { dd = prevDays + d; out = true; mm = m - 1; } else if (d > days) { dd = d - days; out = true; mm = m + 1; } else dd = d;
- const date = new Date(y, mm, dd), key = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
- const cls = [out ? "out" : "", key === opt.today ? "today" : "", (opt.marks || []).includes(key) ? "mark" : ""].join(" ");
- cells += ``;
- if (i === 34 && d >= days) break;
+ if (d < 1 || d > days) { cells += ''; continue; }
+ const date = new Date(y, m, d), key = keyOf(date);
+ const cls = [key === (opt.today || TODAY_KEY) ? "today" : "", (opt.marks || []).includes(key) ? "mark" : ""].join(" ").trim();
+ cells += ``;
}
+ const note = opt.note !== undefined ? opt.note : (opt.marks || []).length ? "圆点是本项目的关键日期" : "";
return `
-
检查剩余 · 正常12/ 20 次
- 已用 8 次
检查剩余 · 已用 80%4/ 20 次
- 已用 80%，剩 4 次
检查剩余 · 已用完0/ 20 次
+ 本期检查额度已用完，续费或下期发放后可继续
+
检查剩余12/ 20 次
+ 已用 8 次
检查剩余 · 已用 80%4/ 20 次
+ 已用 80%，剩 4 次
检查剩余 · 已用完0/ 20 次
本期检查额度已用完，可在额度页提交续费申请
13
+ 提示气泡 · 下拉菜单 · 快捷键
规范 §6 · §8.213
提示气泡 · 操作菜单 · 快捷键
规范 §6 · §7.21 · §8.2提示气泡
-就绪
+ 就绪
- - 处理三按钮的悬停提示写清含义（§7.4）。墨底白字，4px 圆角。
- 墨底白字，圆角 8。解释性的话放在这里，不写在界面上。
-
下拉菜单（行内更多操作） 可以点
-
-
-
-
-
+
操作菜单 可以点
+列表行的「更多」
+
+
- 会扣点的项第二行写扣多少、还剩多少；不可用的项变禁用灰，右侧写原因。
快捷键
-| J / K | 下一条 / 上一条 |
| O · Enter | 打开当前出处 |
| 1 2 3 | 确认无误 / 已修改 / 忽略 |
| U | 撤销当前条 |
| ? | 快捷键说明 |
在「④ 列表与表格」和「⑥ 读标」页可以实际用 J / K。
+ +按页面只列能用的键：这是查标（问题列表）的一组；读标只有 J / K、Enter、?。「④ 列表与表格」和「⑥ 读标」页可以实际用。
这次检查需要 1 次检查额度，本期已用完 20 次。续费或下期（2027-11-01）发放后可以继续。
24 小时内对同一项目的复查不扣额度，不受影响。
" }); +$("[data-nomore]").onclick = () => dialog({ title: "本期检查额度已用完", ok: "提交续费申请", cancel: "关闭", + body: "这次检查需要 1 次检查额度，本期 20 次已用完。可以在额度页提交续费申请（对公转账后由运营开通），或等下期（2027-11-01）发放。
24 小时内对同一项目的复查不扣额度。
", + onOk: () => toast("（演示）打开额度页的续费申请", { ok: false }) }); + +/* 开关：立即生效，给轻提示 */ +$$("[data-sw-toast]").forEach((s) => s.addEventListener("click", () => toast(`${s.dataset.swToast}已${s.getAttribute("aria-checked") === "true" ? "打开" : "关闭"}`))); + +/* AI 产出 → 确认（Q2）：去掉虚线，换成署名行 */ +(function () { + const b = $("[data-ai]"); + const set = (done, act) => { b.classList.toggle("done", done); if (act) $("[data-ai-act]", b).textContent = act; }; + $("[data-ai-ok]", b).onclick = () => { set(true, "确认无误"); toast("已确认", { undo: () => set(false) }); }; + $("[data-ai-edit]", b).onclick = () => toast("（演示）修改后同样换成署名行，动作写「已修改」", { ok: false }); + $("[data-ai-undo]", b).onclick = (e) => { e.preventDefault(); set(false); $("[data-ai-ok]", b).focus(); }; +})(); + +/* 日期输入（Q10）：共用组件 Demo.dateInput()，.dt[data-dt] 自动初始化，这里不用写脚本 */ + +/* 当前条（§7.18）：清单项 */ +(function () { + const box = $("[data-sel-list]"), its = $$(".item", box); + const sel = (it, focus) => { its.forEach((x) => { const on = x === it; x.classList.toggle("sel", on); x.setAttribute("aria-selected", on); x.tabIndex = on ? 0 : -1; }); if (focus) it.focus(); }; + its.forEach((it) => { + it.addEventListener("click", (e) => { if (!e.target.closest("a")) sel(it); }); + it.addEventListener("focus", () => it.classList.toggle("focus", it.matches(":focus-visible"))); + it.addEventListener("blur", () => it.classList.remove("focus")); + }); + box.addEventListener("keydown", (e) => { + const k = its.indexOf(document.activeElement); if (k < 0) return; + const d = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0; if (!d) return; + e.preventDefault(); sel(its[(k + d + its.length) % its.length], true); + }); + $$(".cite-src", box).forEach((a) => a.addEventListener("click", (e) => { e.preventDefault(); toast("（演示）在原文查看器里打开，原句用蓝铅笔浅底高亮", { ok: false }); })); +})(); +/* 表格行：点行 = 当前条（tr.sel）；复选框 = 勾选，只改复选框本身（§7.18） */ +(function () { + const t = $("[data-sel-table]"), all = $("[data-all]", t), cks = $$("tbody .ck", t); + const sync = () => { const n = cks.filter((c) => c.checked).length; all.checked = n === cks.length; all.indeterminate = n > 0 && n < cks.length; }; + cks.forEach((c) => c.addEventListener("change", sync)); + all.addEventListener("change", () => { cks.forEach((c) => { c.checked = all.checked; }); sync(); }); + $$("tbody tr", t).forEach((tr) => tr.addEventListener("click", (e) => { if (e.target.closest("input")) return; $$("tbody tr", t).forEach((x) => x.classList.toggle("sel", x === tr)); })); + sync(); +})(); +$$("[data-undo-demo]").forEach((b) => b.onclick = () => toast("（演示）撤销后回到处理按钮", { ok: false })); /* 轻提示 */ $("[data-t1]").onclick = () => toast("已保存「ISO/IEC 27001 信息安全管理体系」"); @@ -449,27 +564,46 @@ $("[data-t2]").onclick = () => toast("已将 3 项「提示」标记为确认无 $("[data-t3]").onclick = () => { toast("清单 v3 已确认"); setTimeout(() => toast("已核对补遗更新"), 300); setTimeout(() => toast("报告已导出"), 600); }; /* 对话框 */ -$("[data-d1]").onclick = () => dialog({ +const openD1 = () => dialog({ title: "删除项目「某区智慧社区平台运维服务」？", ok: "删除项目", - body: `项目下的招标文件、清单、检查结果和报告会一起删除。删除后 30 天内可以在回收站恢复，之后彻底删除。
+ body: `项目下的招标文件、清单、检查结果和报告会一起删除。30 天内可以在回收站恢复。
`, onOpen: (s) => { const ok = $("[data-ok]", s), i = $("#dn", s); ok.disabled = true; i.addEventListener("input", () => { ok.disabled = i.value.trim() !== "某区智慧社区平台运维服务"; }); }, - onOk: () => toast("已删除，可在回收站恢复（30 天内）") + onOk: () => toast("已删除，30 天内可在回收站恢复") }); -$("[data-d2]").onclick = () => dialog({ +const openD2 = () => dialog({ title: "标记「某市政务服务中心智慧大厅建设项目」为已递交？", ok: "标记已递交", - body: `!
- 还有 3 项致命问题待处理。标记已递交不受影响，处理记录会如实保留。
标记后项目进入「已递交」，不能再发起检查；清单和检查结果保留，可以导出报告。
`, + body: `还有 3 项致命问题未处理。标记不受影响，处理记录会如实保留。
标记后不能再发起检查；清单和检查结果保留，可以导出报告。
`, onOk: () => toast("已标记为已递交") }); -$("[data-d3]").onclick = () => dialog({ - title: "忽略并注明原因", wide: true, ok: "忽略这一项", +const openD3 = () => dialog({ // 表单对话框（640）：反馈判断有误。忽略原因不用对话框，在问题行内展开（§7.4） + title: "反馈：判断有误", wide: true, ok: "提交反馈", body: `重要 开标一览表与分项价格表合计不一致
-
-
- 「已忽略」不等于确认无误，报告里单独列出。
`,
- onOpen: (s) => { $$("[data-chip]", s).forEach((c) => c.onclick = () => { $("#ir", s).value = c.textContent; $("#ir", s).focus(); }); },
- onOk: (s) => { const v = $("#ir", s).value.trim(); const f = $("#ir", s).closest(".field"); if (v.length < 5) { f.classList.add("err"); $(".msg", f).innerHTML = '!至少写 5 个字，说明为什么不处理'; return false; } toast("已忽略 · 原因已记录", { undo: () => toast("已撤销", { ok: false }) }); }
+
+
+
`,
+ onOk: (s) => { const t = $("#fb-t", s); if (!t.value.trim()) { Demo.fieldError(t.closest(".field"), "请写一句哪里不对"); t.focus(); return false; } toast("已收到反馈"); }
+});
+$("[data-d1]").onclick = openD1;
+$("[data-d2]").onclick = openD2;
+$("[data-d3]").onclick = openD3;
+
+/* 操作菜单：列表行「更多」，和工作台同一个浮动菜单（Demo.floatMenu）；静态展开的那份用 Demo.menuHTML 生成同样的项 */
+const MORE = [
+ { label: "处理记录" }, { label: "复制为新项目" }, { label: "追加补遗 / 澄清", sub: '扣 1 次解析 · 剩 37 次' }, "-",
+ { label: "标记已递交" }, { label: "归档", disabled: "递交后可用" }, { label: "删除项目" }
+];
+$("[data-menu-static]").innerHTML = Demo.menuHTML(MORE.map((it, i) => i === 1 ? { ...it, active: true } : it));
+$("[data-menu-static]").addEventListener("click", (e) => { const b = e.target.closest("[data-i]"); if (b && !b.hasAttribute("aria-disabled")) toast(`（演示）${b.firstChild.textContent}`, { ok: false }); });
+$("[data-keys]").innerHTML = Demo.keysTable(Demo.KEYS.check);
+$("[data-more]").addEventListener("click", (e) => {
+ e.stopPropagation();
+ Demo.floatMenu(e.currentTarget, MORE, (act) => { if (act === "删除项目") openD1(); else if (act === "标记已递交") openD2(); else toast(`（演示）${act}`, { ok: false }); });
});
/* 分页 */
@@ -477,7 +611,7 @@ $("[data-d3]").onclick = () => dialog({
const el = $("[data-pager]"); let cur = 1; const total = 86, per = 20, pages = Math.ceil(total / per);
const render = () => {
const nums = []; for (let i = 1; i <= pages; i++) nums.push(i);
- el.innerHTML = `共 ${total} 条 · 每页 ${per} 条
+ el.innerHTML = `共 ${total} 条
${nums.map((n) => ``).join("")}
@@ -487,6 +621,16 @@ $("[data-d3]").onclick = () => dialog({
el.addEventListener("change", (e) => { const v = +e.target.value; if (v >= 1 && v <= pages) cur = v; render(); });
render();
})();
+
+/* ?open=select | date | menu | d1 | d2 | d3：直接打开浮层（截图用） */
+addEventListener("load", () => {
+ const o = new URLSearchParams(location.search).get("open");
+ const at = (sel, fn) => { const el = document.querySelector(sel); if (el.getBoundingClientRect().bottom > innerHeight) el.scrollIntoView({ block: "start" }); setTimeout(fn, 50); };
+ if (o === "select") at("#s-select", () => $("#sel-demo .select").click());
+ if (o === "date") at("#s-date", () => $("#dt-demo .icon-btn").click());
+ if (o === "menu") at("#s-tip", () => $("[data-more]").click());
+ if ({ d1: 1, d2: 1, d3: 1 }[o]) ({ d1: openD1, d2: openD2, d3: openD3 })[o]();
+});
diff --git a/docs/design/ui-demo/demo.css b/docs/design/ui-demo/demo.css
index 00a78bd..ee6ae84 100644
--- a/docs/design/ui-demo/demo.css
+++ b/docs/design/ui-demo/demo.css
@@ -1,47 +1,50 @@
-/* 标博士 · UI demo 样式（2026-11-03）
- * 依赖 ../system/tokens.css 和 ../system/components.css，只用 tokens.css 的变量，不写裸色值。
+/* 标博士 · UI demo 样式 v0.2（2026-11-03）
+ * 依赖 ../system/tokens.css 和 ../system/components.css，只用 tokens.css 的变量，不写裸色值（Q6）。
+ * 视觉以定稿样张 explore/workbench-d5.html 为准（决策 U5），Q1–Q12 已于 2026-11-03 确认。
* 分两部分：
- * A. 演示页排版：只属于 demo 页面（章节标题、状态陈列格），不进组件库；
+ * A. 演示页排版：只属于 demo 页面（章节标题、状态陈列格、目录卡），不进组件库；
* B. 新增组件：design-system.md 有描述、但 components.css 里还没有的组件。UI 精修定稿后再并入 components.css。
- * 新增组件清单见 index.html。 */
+ * 新增组件清单见 index.html。类名和 demo.js 的接口沿用 v0.1，页面不用改调用方式。
+ * 收尾（2026-11-03）：各页重刷时的页内绕过已收回这里——项目行（B20）、署名行（B16）、日期输入（B6）、
+ * 对照布局（B19）、当前条 / 勾选条（B18）、行内说明（B18 .u4）；对话框不再裁剪浮层（B11）。 */
/* =====================================================================
* A. 演示页排版
* ===================================================================== */
body.demo{min-width:1280px}
-.d-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--sp-8);height:52px;padding:0 var(--sp-8);background:var(--bg-page);border-bottom:1px solid var(--border-subtle)}
+.d-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--sp-6);height:var(--topbar-h);padding:0 var(--pad-page);background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:var(--line) solid var(--border-subtle)}
.d-top .brand img{height:26px;display:block}
-.d-top .tag{margin-left:calc(-1 * var(--sp-5))}
-.d-nav{display:flex;gap:var(--sp-1);margin-left:auto}
-.d-nav a{display:flex;align-items:center;height:52px;padding:0 var(--sp-3);color:var(--text-secondary);text-decoration:none;white-space:nowrap}
-.d-nav a:hover{color:var(--text-primary)}
-.d-nav a.on{color:var(--text-primary);font-weight:var(--fw-bold);box-shadow:inset 0 -2px 0 var(--c-ink)}
-.d-page{max-width:calc(var(--content-max) + 2 * var(--sp-8));margin:0 auto;padding:var(--sp-10) var(--sp-8) var(--sp-16)}
+.d-top .tag{margin-left:calc(-1 * var(--sp-3))}
+.d-nav{display:flex;gap:2px;margin-left:auto}
+.d-nav a{display:flex;align-items:center;height:var(--control-h-sm);padding:0 10px;border-radius:var(--radius-ctl);color:var(--text-secondary);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease)}
+.d-nav a:hover{background:var(--c-n100);color:var(--text-primary)}
+.d-nav a.on{background:var(--c-n100);color:var(--text-primary);font-weight:var(--fw-bold)}
+.d-page{max-width:calc(var(--content-max) + 2 * var(--pad-page));margin:0 auto;padding:var(--sp-10) var(--pad-page) var(--sp-16)}
.d-head h1{font:var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-serif);margin:0}
.d-head p{color:var(--text-secondary);margin:var(--sp-2) 0 0;max-width:60em}
.d-toc{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-4);font-size:var(--fs-caption)}
-.d-toc a{color:var(--text-secondary);text-underline-offset:3px}
+.d-toc a{color:var(--text-secondary);text-decoration-color:var(--link-underline);text-underline-offset:3px}
.d-toc a:hover{color:var(--text-primary)}
.d-sec{margin-top:var(--sp-12);scroll-margin-top:72px}
-.d-sec-h{display:flex;align-items:baseline;gap:var(--sp-3);border-bottom:2px solid var(--border-strong);padding-bottom:var(--sp-2);margin-bottom:var(--sp-5)}
+.d-sec-h{display:flex;align-items:baseline;gap:var(--sp-3);border-bottom:var(--line) solid var(--border-subtle);padding-bottom:var(--sp-3);margin-bottom:var(--sp-5)}
.d-sec-h h2{font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-serif);margin:0}
.d-sec-h .no{font:var(--fw-bold) var(--fs-title)/1 var(--font-figures);color:var(--text-secondary)}
.d-sec-h .ref{margin-left:auto;font-size:var(--fs-caption);color:var(--text-secondary)}
-.d-grid{display:grid;gap:var(--sp-6);align-items:start}
+.d-grid{display:grid;gap:var(--gap-card);align-items:start}
.d-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.d-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.d-grid.eq{align-items:stretch}
.d-grid.c-side{grid-template-columns:minmax(0,1fr) 360px}
-.d-box{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-5) var(--sp-6)}
+.d-box{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-5) var(--card-x)}
.d-box > h3{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);margin:0 0 var(--sp-4);display:flex;gap:var(--sp-2);align-items:baseline}
.d-box > h3 small{font-weight:var(--fw-regular);font-size:var(--fs-caption);color:var(--text-secondary)}
.d-box.flat{background:none;border-style:dashed;border-color:var(--border-control)}
-.d-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-5) var(--sp-5)}
+.d-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-5)}
.d-states.wide{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.d-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0}
.d-state > small,.d-cap{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.d-state .field{width:100%}
-.d-rules{margin:var(--sp-4) 0 0;padding:var(--sp-3) 0 0 1.2em;border-top:1px solid var(--border-subtle);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
+.d-rules{margin:var(--sp-4) 0 0;padding:var(--sp-3) 0 0 1.2em;border-top:var(--line) solid var(--border-subtle);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.d-rules li + li{margin-top:2px}
.d-label{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);margin-bottom:var(--sp-2)}
.d-stack > * + *{margin-top:var(--sp-4)}
@@ -52,12 +55,18 @@ body.demo{min-width:1280px}
.d-matrix td{padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;vertical-align:middle}
.d-matrix td:first-child{font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap;width:72px}
.d-open{position:relative;padding-bottom:var(--sp-2)} /* 静态展开的浮层，占位用 */
+/* 陈列盒、对话框里的表格：不再带自己的外框（卡片里不套面板），首尾列贴齐容器内边距；没有表头时第一行不画上边线 */
+:is(.d-box,.dialog) table.data{border:0;border-radius:0;background:none}
+:is(.d-box,.dialog) table.data :is(th,td):first-child{padding-left:0}
+:is(.d-box,.dialog) table.data :is(th,td):last-child{padding-right:0}
+:is(.d-box,.dialog) table.data:not(:has(thead)) tbody tr:first-child td{border-top:0}
+table.data.keys td:first-child{width:1%;padding-right:var(--sp-6)} /* 快捷键表（Demo.keysTable） */
.d-open .menu,.d-open .cal{position:static;margin-top:var(--sp-1)}
/* 目录页 */
-.d-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
-.d-link{display:block;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-4) var(--sp-5);color:var(--text-primary);text-decoration:none}
-.d-link:hover{border-color:var(--border-control)}
+.d-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card)}
+.d-link{display:block;background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-4) var(--card-x);color:var(--text-primary);text-decoration:none;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
+.d-link:hover{background:var(--c-n50);border-color:var(--border-control)}
.d-link b{display:flex;gap:var(--sp-2);align-items:baseline;font-size:var(--fs-title);line-height:var(--lh-title)}
.d-link b .fig{color:var(--text-secondary);font-size:var(--fs-title)}
.d-link p{margin:var(--sp-2) 0 0;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
@@ -66,45 +75,78 @@ body.demo{min-width:1280px}
* B. 新增组件
* ===================================================================== */
-/* ---- B1 图标（Lucide 线性，1.5px 描边，16 / 20px，§6） ---- */
+/* ---- B1 图标（Lucide 线性，1.5px 描边，16 / 20px，§6；侧栏菜单 22px） ---- */
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic.lg{width:20px;height:20px}
.ic.xl{width:32px;height:32px;stroke-width:1.25}
+.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
-/* ---- B2 页面框架：侧边栏 + 顶栏（§5.3） ---- */
-body.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;min-width:1280px}
-.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--border-subtle);background:var(--bg-page);padding:var(--sp-5) var(--sp-3)}
-.sidebar .brand{display:block;padding:0 var(--sp-2) var(--sp-6)}
-.sidebar .brand img{height:30px;display:block}
-.nav{display:flex;flex-direction:column;gap:2px}
-.nav a{display:flex;align-items:center;gap:var(--sp-3);height:36px;padding:0 var(--sp-3);border-radius:var(--radius-sm);color:var(--text-primary);text-decoration:none}
-.nav a:hover{background:var(--bg-hover)}
-.nav a.on{background:var(--bg-surface);box-shadow:inset 2px 0 0 var(--c-ink);font-weight:var(--fw-bold)}
-.nav a .fig{margin-left:auto;font-weight:var(--fw-medium);color:var(--text-secondary)}
-.nav .sub{margin:var(--sp-5) var(--sp-3) var(--sp-2);font-size:var(--fs-caption);color:var(--text-secondary)}
-.sidebar-foot{margin-top:auto;padding:var(--sp-3);border-top:1px solid var(--border-subtle);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
-.sidebar-foot b{display:block;color:var(--text-primary);font-size:var(--fs-body)}
-.main{min-width:0;display:flex;flex-direction:column}
-.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-4);height:52px;padding:0 var(--sp-8);background:var(--bg-page);border-bottom:1px solid var(--border-subtle)}
-.crumbs{display:flex;gap:var(--sp-2);color:var(--text-secondary);min-width:0;white-space:nowrap;overflow:hidden}
+/* ---- B2 页面框架 v0.2（§5.3）：96px 墨色渐变侧栏 + 透明顶栏 + 内容区左上角圆角 ----
+ * 结构由 demo.js 的 Demo.shell() 生成：body.app > aside.sidebar + main.main > header.top + 页面内容 */
+body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed}
+.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 0 var(--sp-4) 10px;color:var(--side-fg);min-width:0}
+.sidebar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;pointer-events:none;background-image:radial-gradient(var(--side-dots) 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask-image:linear-gradient(to top,black,transparent);mask-image:linear-gradient(to top,black,transparent)}
+.sidebar > *{position:relative;z-index:1}
+.sidebar .brand{display:flex;justify-content:center;padding:var(--sp-5) 10px var(--sp-5) 0;border-radius:var(--radius-ctl)}
+.sidebar .brand img{width:60px;height:auto;display:block}
+.sidebar .nav{display:flex;flex-direction:column;gap:var(--sp-1)}
+.sidebar .nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);height:62px;margin-right:10px;border-radius:var(--radius-card);font-size:var(--fs-caption);line-height:16px;color:var(--side-fg);text-align:center;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
+.sidebar .nav a .ic{width:22px;height:22px}
+.sidebar .nav a:hover{background:var(--side-hover);color:var(--side-fg-strong)}
+.sidebar .nav a[aria-current]{background:var(--side-active);color:var(--side-fg-strong);font-weight:var(--fw-bold)}
+.sidebar .nav .sep{display:block;height:1px;margin:10px 22px 10px 12px;background:var(--side-line)}
+.sidebar a:focus-visible{outline:2px solid var(--side-fg-strong);outline-offset:-2px}
+.sidebar .me{display:flex;flex-direction:column;align-items:center;margin-top:auto;padding:var(--sp-4) 10px var(--sp-1) 0;color:var(--side-muted);text-align:center}
+.sidebar .avatar{display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:var(--sp-2);border-radius:50%;background:var(--side-avatar-bg);box-shadow:0 0 0 1px var(--side-avatar-ring);color:var(--side-fg-strong);font-size:var(--fs-title);font-weight:var(--fw-bold)}
+.sidebar .uname{color:var(--side-fg-strong);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-bold)}
+/* 套餐标签（§3.1）：只在账户区使用；免费版中性、专业版浅金、企业版金色实底 */
+.plan{display:inline-block;margin-top:var(--sp-1);padding:0 var(--sp-2);border-radius:var(--radius-xs);font-size:var(--fs-caption);line-height:20px;font-weight:var(--fw-bold);white-space:nowrap}
+.plan[data-plan="free"]{background:var(--plan-free-bg);color:var(--side-fg)}
+.plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)}
+.plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)}
+
+.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page);border-top-left-radius:var(--radius-card)}
+.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;border-top-left-radius:var(--radius-card);transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
+.top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)}
+/* 左侧「公司 / 页面」 */
+.crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}
+.crumbs > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.crumbs > span{flex:none}
+.crumbs .org{flex:none;color:var(--text-primary);font-weight:var(--fw-bold)}
.crumbs a{color:var(--text-secondary);text-decoration:none}
-.crumbs a:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
-.crumbs b{color:var(--text-primary);font-weight:var(--fw-regular);overflow:hidden;text-overflow:ellipsis}
-.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
-.quota-chip{display:flex;gap:var(--sp-3);align-items:center;height:28px;padding:0 var(--sp-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-size:var(--fs-caption);background:var(--bg-surface)}
-.quota-chip.warn{border-color:var(--warn);color:var(--warn-text)}
-.quota-chip .fig{color:var(--text-primary);font-size:var(--fs-body);margin-left:3px}
-.content{padding:var(--sp-6) var(--sp-8) var(--sp-16);max-width:calc(var(--content-max) + 2 * var(--sp-8));width:100%}
-.page-title{display:flex;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-5)}
+.crumbs a:hover{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px}
+.crumbs b{font-weight:var(--fw-regular)}
+/* 右侧：搜索、额度、通知 */
+.top-search{position:relative;display:flex;align-items:center;flex:none;width:280px;height:var(--control-h);margin-left:auto;border:var(--line) solid var(--border-control);border-radius:var(--radius-ctl);background:var(--bg-surface);transition:width var(--dur-base) var(--ease),border-color var(--dur-fast) var(--ease)}
+.top-search:hover{border-color:var(--c-ink)}
+.top-search:focus-within{width:360px;border-color:var(--c-ink);box-shadow:0 0 0 1px var(--c-ink)}
+.top-search > .ic{position:absolute;left:11px;color:var(--text-secondary);pointer-events:none}
+.top-search input{flex:1;min-width:0;height:100%;padding:0 var(--sp-2) 0 34px;border:0;background:transparent;font:inherit;color:var(--text-primary);outline:0}
+.top-search input::placeholder{color:var(--text-secondary)}
+.top-search input::-webkit-search-cancel-button{display:none}
+.top-search .kbd{margin-right:6px}
+.top .vsep{flex:none;width:1px;height:20px;margin:0 var(--sp-1);background:var(--border-subtle)}
+.top-right{display:flex;align-items:center;gap:var(--sp-1);flex:none}
+/* 顶栏额度（§7.10、Q9）：用到 ≥ 80% 时该项数字变赭色加粗（.warn）；不用红 */
+.quota-chip{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 10px;border-radius:var(--radius-ctl);color:var(--text-secondary);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease)}
+.quota-chip:hover{background:var(--c-n100)}
+.quota-chip .q{display:inline-flex;align-items:baseline;gap:6px}
+.quota-chip .fig{color:var(--text-primary);font-size:var(--fs-figure-sm)}
+.quota-chip .q.warn .fig,.quota-chip.warn .fig{color:var(--warn-text);font-weight:var(--fw-bold)}
+.quota-chip .sep{width:1px;height:12px;margin:0 var(--sp-1);background:var(--border-subtle)}
+.content{width:100%;padding:20px var(--pad-page) var(--sp-12)}
+/* 页头：标题 + 一句话；右侧放页面级主按钮（Q12：页面级一个） */
+.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:20px}
.page-title h1{font:var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-serif);margin:0}
-.page-title p{margin:var(--sp-1) 0 0;color:var(--text-secondary)}
-.page-title .actions{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
+.page-title p{margin:2px 0 0;color:var(--text-secondary)}
+.page-title .actions{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center}
.section-h{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-8) 0 var(--sp-3)}
.section-h h2{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);margin:0}
.section-h .more{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
+.stack > * + *{margin-top:var(--gap-card)}
/* 项目页头 */
-.proj-head{padding:var(--sp-5) var(--sp-8) 0;border-bottom:1px solid var(--border-subtle);background:var(--bg-page)}
+.proj-head{padding:var(--sp-4) var(--pad-page) 0;border-bottom:var(--line) solid var(--border-subtle)}
.proj-head .line1{display:flex;align-items:flex-start;gap:var(--sp-4)}
.proj-head h1{font:var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-serif);margin:0}
.proj-head .meta{margin-top:var(--sp-1);color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
@@ -112,11 +154,12 @@ body.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-h
.proj-head .facts small{display:block;font-size:var(--fs-caption);color:var(--text-secondary)}
/* ---- B3 按钮补充状态（§7.1） ---- */
-.btn:active,.btn.is-active{background:var(--bg-sunken);border-color:var(--c-ink)}
-.btn.is-hover{background:var(--bg-hover)}
-.btn.primary.is-hover{background:color-mix(in srgb,var(--c-ink) 92%,var(--c-white))}
-.btn.primary:active,.btn.primary.is-active{background:var(--c-ink);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--c-white) 18%,transparent)}
-.btn.text:active,.btn.text.is-active{background:var(--bg-sunken);border-color:transparent}
+.btn.is-hover{background:var(--c-n50);border-color:var(--c-ink)}
+.btn.is-active{background:var(--c-n100);border-color:var(--c-ink)}
+.btn.primary.is-hover{background:var(--primary-hover);border-color:var(--primary-hover)}
+.btn.primary.is-active{background:var(--primary-active);border-color:var(--primary-active)}
+.btn.text.is-hover{background:var(--c-n100);border-color:transparent}
+.btn.text:active,.btn.text.is-active{background:var(--c-n100);border-color:transparent}
.btn.is-focus{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn .ic{margin:0 -2px}
/* 加载中：两个文字叠在同一格，按宽的那个定宽，切换时宽度不变 */
@@ -125,114 +168,134 @@ body.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-h
.btn.swap > .busy,.btn.swap.is-loading > .idle{visibility:hidden}
.btn.swap.is-loading > .busy{visibility:visible}
.btn.is-loading{cursor:progress}
-.btn.primary.is-loading{background:color-mix(in srgb,var(--c-ink) 80%,var(--c-white));border-color:transparent}
+.btn.primary.is-loading{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.is-loading:not(.primary){color:var(--text-secondary)}
-.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-primary);background:none;border:1px solid transparent;cursor:pointer;position:relative;flex:none}
-.icon-btn:hover{background:var(--bg-hover)}
+/* 只有图标的按钮：36 / 32，悬停出 --c-n100；必须有 aria-label 和悬停提示（§6） */
+.icon-btn{position:relative;flex:none;display:inline-grid;place-items:center;width:var(--control-h);height:var(--control-h);padding:0;border:var(--line) solid transparent;border-radius:var(--radius-ctl);background:none;color:var(--text-primary);cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
+.icon-btn:hover{background:var(--c-n100)}
.icon-btn.bordered{border-color:var(--border-control);background:var(--bg-surface)}
-.icon-btn.sm{width:28px;height:28px}
-.icon-btn .dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--c-ink)}
+.icon-btn.bordered:hover{border-color:var(--c-ink);background:var(--c-n50)}
+.icon-btn.sm{width:var(--control-h-sm);height:var(--control-h-sm)}
+.icon-btn.muted{color:var(--text-secondary)}
+.icon-btn .dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--c-ink);box-shadow:0 0 0 2px var(--c-white)}
.icon-btn[disabled]{color:var(--text-disabled);cursor:not-allowed;background:none}
.btn-group{display:inline-flex}
.btn-group .btn + .btn{margin-left:-1px}
.btn-group .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.btn-group .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
+.btn-group .btn:hover{position:relative;z-index:1}
-/* ---- B4 输入框、文本域、带单位、搜索（§7.13） ---- */
+/* ---- B4 输入框、文本域、带单位、搜索（§7.13） ----
+ * 聚焦：边框变墨 + 1px 墨色内圈（合计 2px，与顶栏搜索一致）；错误：赭色边框 + 赭色内圈 */
.input{width:100%;transition:border-color var(--dur-fast) var(--ease)}
-.input:hover{border-color:var(--c-ink)}
-.input:focus,.input.is-focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--c-ink)}
-.input.is-hover{border-color:var(--c-ink)}
-.input[disabled],.input.is-disabled{background:var(--bg-sunken);border-color:var(--bg-sunken);color:var(--text-disabled);cursor:not-allowed}
+.input:hover,.input.is-hover{border-color:var(--c-ink)}
+.input:focus,.input.is-focus{outline:0;border-color:var(--c-ink);box-shadow:0 0 0 1px var(--c-ink)}
+.field.err .input:focus{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
+.input[disabled],.input.is-disabled{background:var(--c-n100);border-color:var(--c-n100);color:var(--text-disabled);cursor:not-allowed}
.input[disabled]::placeholder{color:var(--text-disabled)}
-.input[readonly]{background:var(--bg-sunken);border-color:var(--border-subtle)}
-.input[readonly]:focus{outline-color:var(--border-control)}
-textarea.input{height:auto;min-height:80px;padding:var(--sp-2) 10px;resize:vertical;line-height:var(--lh-body)}
-select.input{appearance:none;padding-right:28px;cursor:pointer}
+.input[readonly]{background:var(--c-n50);border-color:var(--border-subtle)}
+.input[readonly]:focus{box-shadow:none;border-color:var(--border-control)}
+textarea.input{height:auto;min-height:80px;padding:var(--sp-2) var(--sp-3);resize:vertical;line-height:var(--lh-body)}
+select.input{appearance:none;padding-right:32px;cursor:pointer}
.sel-wrap{position:relative;display:block}
-.sel-wrap > .ic{position:absolute;right:8px;top:8px;pointer-events:none;color:var(--text-secondary)}
+.sel-wrap > .ic{position:absolute;right:10px;top:10px;pointer-events:none;color:var(--text-secondary)}
.field label{display:flex;gap:var(--sp-1);align-items:baseline}
.field label small{margin-left:2px}
.field .msg-row{display:flex;gap:var(--sp-3);align-items:baseline}
.field .msg-row .msg{flex:1}
-.field .count{font:var(--fw-medium) var(--fs-caption)/var(--lh-caption) var(--font-figures);font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
+.field .count{font:var(--fw-medium) var(--fs-figure-xs)/var(--lh-caption) var(--font-figures);font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
.field.err .count{color:var(--warn-text)}
.field.err textarea.input,.field.err .select{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.field.dis label{color:var(--text-disabled)}
.field.fill{max-width:none}
.field + .field{margin-top:0}
.input-unit{display:flex}
-.input-unit .input{border-top-right-radius:0;border-bottom-right-radius:0;font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-size:15px}
-.input-unit .unit{display:flex;align-items:center;padding:0 10px;border:1px solid var(--border-control);border-left:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--bg-sunken);color:var(--text-secondary);white-space:nowrap}
+.input-unit .input{border-top-right-radius:0;border-bottom-right-radius:0;font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-size:var(--fs-figure-sm)}
+.input-unit .unit{display:flex;align-items:center;padding:0 var(--sp-3);border:var(--line) solid var(--border-control);border-left:0;border-radius:0 var(--radius-ctl) var(--radius-ctl) 0;background:var(--c-n50);color:var(--text-secondary);white-space:nowrap}
.search{position:relative;display:block}
-.search > .ic{position:absolute;left:10px;top:8px;color:var(--text-secondary);pointer-events:none}
-.search .input{padding-left:32px}
-.search .kbd{position:absolute;right:8px;top:6px}
+.search > .ic{position:absolute;left:11px;top:10px;color:var(--text-secondary);pointer-events:none}
+.search .input{padding-left:34px}
+.search .kbd{position:absolute;right:7px;top:7px}
/* 表单布局 */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-6)}
.form .span2{grid-column:1 / -1}
.form .field{max-width:none}
.form-sec{margin:0;padding:0;border:0;min-width:0}
-.form-sec + .form-sec{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--border-subtle)}
+.form-sec + .form-sec{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:var(--line) solid var(--border-subtle)}
.form-sec > legend{float:left;width:100%;padding:0;margin:0 0 var(--sp-4);font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
.form-sec > legend small{font-weight:var(--fw-regular);font-size:var(--fs-caption);color:var(--text-secondary);margin-left:var(--sp-2)}
.form-sec > legend + *{clear:both}
-.form-foot{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--border-subtle)}
+.form-foot{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:var(--line) solid var(--border-subtle)}
.form-foot .cost{margin-right:auto}
.err-sum{margin-bottom:var(--sp-5)}
.err-sum ul{margin:var(--sp-1) 0 0;padding-left:1.2em}
.err-sum a{color:var(--warn-text);text-underline-offset:3px}
-/* ---- B5 下拉选择 / 下拉菜单（浮层，§5.1 只有浮层有阴影） ---- */
+/* ---- B5 下拉选择 / 下拉菜单（Q4：选中项加粗，右侧墨色 ✓；浮层圆角 12，只有浮层有阴影） ---- */
.pop{position:relative;display:block}
.pop.inline{display:inline-block}
-.select{display:flex;align-items:center;gap:var(--sp-2);width:100%;height:var(--control-h);padding:0 8px 0 10px;border:1px solid var(--border-control);border-radius:var(--radius-sm);background:var(--bg-surface);font:var(--fs-body) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer}
+.select{display:flex;align-items:center;gap:var(--sp-2);width:100%;height:var(--control-h);padding:0 10px 0 var(--sp-3);border:var(--line) solid var(--border-control);border-radius:var(--radius-ctl);background:var(--bg-surface);font:var(--fs-body) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
.select:hover{border-color:var(--c-ink)}
-.select[aria-expanded="true"],.select.is-focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--c-ink)}
+.select[aria-expanded="true"],.select.is-focus{outline:0;border-color:var(--c-ink);box-shadow:0 0 0 1px var(--c-ink)}
.select .val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select .ph{color:var(--text-secondary)}
.select > .ic{color:var(--text-secondary);transition:transform var(--dur-fast) var(--ease)}
.select[aria-expanded="true"] > .ic{transform:rotate(180deg)}
-.select[disabled]{background:var(--bg-sunken);border-color:var(--bg-sunken);color:var(--text-disabled);cursor:not-allowed}
+.select[disabled]{background:var(--c-n100);border-color:var(--c-n100);color:var(--text-disabled);cursor:not-allowed}
.select.sm{height:var(--control-h-sm)}
-.menu{position:absolute;z-index:45;top:calc(100% + 4px);left:0;min-width:100%;max-height:280px;overflow:auto;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);padding:var(--sp-1) 0;margin:0;list-style:none}
+.menu{position:absolute;z-index:45;top:calc(100% + 4px);left:0;min-width:100%;max-height:300px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay)}
.menu.right{left:auto;right:0}
-.menu [role=option],.menu [role=menuitem]{display:flex;align-items:center;gap:var(--sp-2);min-height:32px;padding:5px var(--sp-3);cursor:pointer;white-space:nowrap}
-.menu [role=option]:hover,.menu [role=menuitem]:hover,.menu .is-active{background:var(--bg-hover)}
+.menu.float{position:fixed;top:auto;left:auto;min-width:248px} /* 由脚本按触发按钮定位，如列表行的「更多」 */
+.menu [role=option],.menu [role=menuitem]{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:34px;padding:6px 10px;border:0;border-radius:var(--radius-tag);background:none;font:var(--fs-body)/var(--lh-body) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;white-space:nowrap}
+.menu [role=option]:hover,.menu [role=menuitem]:hover,.menu .is-active,.menu [role=menuitem]:focus-visible{background:var(--c-n100);outline:0}
.menu [aria-selected="true"]{font-weight:var(--fw-bold)}
-.menu [aria-selected="true"]::after{content:"✓";margin-left:auto;padding-left:var(--sp-4)}
-.menu [aria-disabled="true"]{color:var(--text-disabled);cursor:not-allowed;background:none}
-.menu .grp{padding:var(--sp-2) var(--sp-3) 2px;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
-.menu hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--sp-1) 0}
+.menu [aria-selected="true"]::after{content:"✓";margin-left:auto;padding-left:var(--sp-4);color:var(--c-ink);font-weight:var(--fw-bold)}
+.menu [aria-disabled="true"],.menu [aria-disabled="true"]:hover{color:var(--text-disabled);cursor:not-allowed;background:none}
+.menu [aria-disabled="true"]:focus-visible{background:var(--c-n50)}
+.menu .grp{padding:var(--sp-2) 10px 2px;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
+.menu hr{border:0;border-top:var(--line) solid var(--border-subtle);margin:6px 0}
.menu small{color:var(--text-secondary);font-size:var(--fs-caption);margin-left:auto;padding-left:var(--sp-4)}
+.menu small .fig{color:var(--text-primary);font-size:var(--fs-figure-xs)}
+/* 两行菜单项：动作 + 说明（扣点说明写在这里，§8.3） */
+.menu .two{flex-direction:column;align-items:flex-start;gap:0}
+.menu .two small{display:block;margin:0;padding:0;line-height:var(--lh-caption)}
.menu .ic{color:var(--text-secondary)}
-/* ---- B6 日期选择（§9.3 日期格式） ---- */
-.date-trigger{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-size:15px}
-.date-trigger .ph{font-family:var(--font-sans);font-size:var(--fs-body)}
-.cal{position:absolute;z-index:45;top:calc(100% + 4px);left:0;width:280px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);padding:var(--sp-3)}
+/* ---- B6 日期输入与日期选择（§7.22、§9.3；Q4：不可选日期只变禁用灰；Q10：输入「2026-11-20 09:30」） ----
+ * 日期输入 .dt[data-dt]：可直接键入（接受 2026/11/20 9:30 等常见写法，离开时整理成标准格式），右侧按钮打开日期选择器；
+ * 带时间的字段（data-time）在选择器底部填时间，24 小时制；下方 [data-dt-msg] 显示「11月20日 09:30 · 剩 N 天」（data-left）。
+ * 交互见 demo.js 的 Demo.dateInput()，页面里不用再写脚本。 */
+.dt{position:relative;display:block}
+.dt > .input{padding-right:40px;font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-size:var(--fs-figure-sm)}
+.dt > .input::placeholder{font-family:var(--font-sans);font-size:var(--fs-body)}
+.dt > .icon-btn{position:absolute;top:2px;right:2px;color:var(--text-secondary)}
+.dt > .icon-btn:hover,.dt > .icon-btn[aria-expanded="true"]{color:var(--text-primary)}
+.dt.up > .cal{top:auto;bottom:calc(100% + 4px)}
+.dt.d-open > .cal{position:static;margin-top:var(--sp-1)}
+.cal{position:absolute;z-index:45;top:calc(100% + 4px);left:0;width:288px;padding:var(--sp-3);background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay)}
.cal-h{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2)}
.cal-h b{flex:1;text-align:center;font-weight:var(--fw-bold)}
-.cal-h b .fig{font-size:15px}
+.cal-h b .fig{font-size:var(--fs-figure-sm)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-grid .wd{font-size:var(--fs-caption);line-height:28px;color:var(--text-secondary)}
-.cal-grid button{position:relative;height:32px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;font:var(--fw-medium) 15px/1 var(--font-figures);font-variant-numeric:tabular-nums;color:var(--text-primary);cursor:pointer}
-.cal-grid button:hover{background:var(--bg-hover)}
-.cal-grid button.out{color:var(--text-disabled)}
-.cal-grid button.today{border-color:var(--border-control)}
-.cal-grid button.mark::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--c-ink)}
-.cal-grid button[aria-selected="true"]{background:var(--c-ink);color:var(--text-on-dark);border-color:var(--c-ink)}
+.cal-grid button{position:relative;height:34px;border:0;border-radius:var(--radius-ctl);background:none;font:var(--fw-medium) var(--fs-figure-sm)/1 var(--font-figures);font-variant-numeric:tabular-nums;color:var(--text-primary);cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
+.cal-grid button:not([disabled]):hover{background:var(--c-n100)}
+/* 非本月的格子留空（不显示日期），和不可选日期（禁用灰、无悬停）不再混淆 */
+.cal-grid .pad{height:34px}
+.cal-grid button.today{box-shadow:inset 0 0 0 1px var(--border-control)}
+.cal-grid button.mark::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--c-ink)}
+.cal-grid button[aria-selected="true"]{background:var(--c-ink);color:var(--text-on-dark);box-shadow:none}
+.cal-grid button[aria-selected="true"]:hover{background:var(--primary-hover)}
.cal-grid button[aria-selected="true"].mark::after{background:var(--c-white)}
-.cal-grid button[disabled]{color:var(--text-disabled);cursor:not-allowed;background:none;text-decoration:line-through}
-.cal-f{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--border-subtle);font-size:var(--fs-caption);color:var(--text-secondary)}
+.cal-grid button[disabled]{color:var(--text-disabled);cursor:not-allowed;background:none;font-weight:var(--fw-regular)}
+.cal-grid button[disabled].mark::after{background:var(--text-disabled)}
+.cal-f{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:var(--line) solid var(--border-subtle);font-size:var(--fs-caption);color:var(--text-secondary)}
.cal-f .btn{margin-left:auto}
-.cal-f .time{width:72px;height:var(--control-h-sm);font-family:var(--font-figures);font-size:15px;text-align:center}
-.dt-pair{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--sp-2)}
-.field.err .dt-pair > .input:not([aria-invalid]){border-color:var(--border-control);box-shadow:none}
+.cal-f .time{width:72px;height:var(--control-h-sm);font-family:var(--font-figures);font-size:var(--fs-figure-sm);text-align:center}
-/* ---- B7 复选框、单选、开关（§8.2 批量勾选） ---- */
-.ck{appearance:none;flex:none;display:inline-grid;place-content:center;width:16px;height:16px;margin:0;border:1px solid var(--border-control);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;vertical-align:-3px}
+/* ---- B7 复选框、单选、开关（§8.2 批量勾选；Q4 开关） ---- */
+.ck{appearance:none;flex:none;display:inline-grid;place-content:center;width:16px;height:16px;margin:0;border:var(--line) solid var(--border-control);border-radius:var(--radius-xs);background:var(--bg-surface);cursor:pointer;vertical-align:-3px}
.ck:hover{border-color:var(--c-ink)}
.ck::after{content:"";display:none}
.ck:checked,.ck[type=checkbox]:indeterminate{background:var(--c-ink);border-color:var(--c-ink)}
@@ -241,9 +304,9 @@ select.input{appearance:none;padding-right:28px;cursor:pointer}
.ck[type=radio]{border-radius:50%}
.ck[type=radio]:checked{background:var(--bg-surface);border-color:var(--c-ink)}
.ck[type=radio]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--c-ink);transform:none}
-.ck:disabled{background:var(--bg-sunken);border-color:var(--c-rule);cursor:not-allowed}
+.ck:disabled{background:var(--c-n100);border-color:var(--border-subtle);cursor:not-allowed}
.ck:disabled:checked{background:var(--c-muted);border-color:var(--c-muted)}
-.ck[type=radio]:disabled:checked{background:var(--bg-sunken)}
+.ck[type=radio]:disabled:checked{background:var(--c-n100)}
.ck[type=radio]:disabled:checked::after{background:var(--c-muted)}
.ck.is-focus{outline:2px solid var(--focus-ring);outline-offset:2px}
.choice{display:inline-flex;gap:var(--sp-2);align-items:flex-start;cursor:pointer;line-height:var(--lh-body)}
@@ -253,132 +316,146 @@ select.input{appearance:none;padding-right:28px;cursor:pointer}
.choice.dis small{color:var(--text-disabled)}
.choices{display:flex;flex-direction:column;gap:var(--sp-2)}
.choices.h{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}
-.choice-card{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border-control);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer}
+.choice-card{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border:var(--line) solid var(--border-control);border-radius:var(--radius-ctl);background:var(--bg-surface);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
+.choice-card:hover{background:var(--c-n50)}
.choice-card:has(:checked){border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.choice-card .ck{margin-top:3px}
.choice-card b{display:block}
.choice-card small{display:block;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
-/* 开关：沿用 2px 圆角，不做胶囊形（§5.1） */
+/* 开关（Q4）：圆角 6 的矩形轨道 + 圆角 4 的方块滑钮；开为墨色；旁边写「开 / 关」；不用胶囊形 */
.switch{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;font:var(--fs-body) var(--font-sans);color:var(--text-primary);cursor:pointer}
-.switch .track{position:relative;width:32px;height:18px;border:1px solid var(--border-control);border-radius:var(--radius-sm);background:var(--bg-surface);transition:background var(--dur-fast) var(--ease)}
-.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:1px;background:var(--c-muted);transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
+.switch .track{position:relative;flex:none;width:34px;height:20px;border:var(--line) solid var(--border-control);border-radius:var(--radius-tag);background:var(--bg-surface);transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
+.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--radius-xs);background:var(--c-muted);transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
+.switch:hover .track{border-color:var(--c-ink)}
.switch[aria-checked="true"] .track{background:var(--c-ink);border-color:var(--c-ink)}
.switch[aria-checked="true"] .track::after{transform:translateX(14px);background:var(--c-white)}
-.switch .st{font-size:var(--fs-caption);color:var(--text-secondary);min-width:2em}
+.switch .st{min-width:2em;font-size:var(--fs-caption);color:var(--text-secondary)}
+.switch[aria-checked="true"] .st{color:var(--text-primary)}
.switch[disabled]{color:var(--text-disabled);cursor:not-allowed}
-.switch[disabled] .track{background:var(--bg-sunken);border-color:var(--c-rule)}
-.switch[disabled] .track::after{background:var(--c-rule)}
+.switch[disabled] .track{background:var(--c-n100);border-color:var(--border-subtle)}
+.switch[disabled] .track::after{background:var(--border-subtle)}
.switch[disabled][aria-checked="true"] .track{background:var(--c-muted);border-color:var(--c-muted)}
+.switch[disabled][aria-checked="true"] .track::after{background:var(--c-n100)}
+.switch[disabled] .st{color:var(--text-disabled)}
-/* ---- B8 分段控件、标签页（§5.3 页签、§7.5 分类） ---- */
-.seg{display:inline-flex;border:1px solid var(--border-control);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface)}
-.seg button{height:28px;padding:0 10px;border:0;background:none;font:var(--fs-body) var(--font-sans);color:var(--text-primary);cursor:pointer;display:flex;gap:6px;align-items:center;white-space:nowrap}
-.seg button:hover{background:var(--bg-hover)}
-.seg button + button{border-left:1px solid var(--border-subtle)}
-.seg button[aria-pressed="true"]{background:var(--c-ink);color:var(--text-on-dark)}
-.seg button[aria-pressed="true"] .fig{color:var(--text-on-dark)}
-.seg button[aria-pressed="true"] .sev.hint,.seg button[aria-pressed="true"] .sev.major{background:var(--c-white)}
-.seg .fig{font-weight:var(--fw-medium);color:var(--text-secondary)}
-.seg .sev .fig{color:inherit}
-.tabs{display:flex;gap:var(--sp-6);border-bottom:1px solid var(--border-subtle)}
+/* ---- B8 筛选（分段）、标签页（§5.3 页签、§7.5 分类） ----
+ * v0.2 筛选：文字按钮一排，按下 = --c-n100 实底 + 加粗（与工作台项目卡片头一致），不再用墨底反白。 */
+.seg{display:inline-flex;align-items:center;gap:2px}
+.seg button{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 10px;border:0;border-radius:var(--radius-ctl);background:none;font:var(--fs-body) var(--font-sans);color:var(--text-secondary);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
+.seg button:hover{background:var(--c-n100);color:var(--text-primary)}
+.seg button[aria-pressed="true"]{background:var(--c-n100);color:var(--text-primary);font-weight:var(--fw-bold)}
+.seg .fig{font-size:var(--fs-figure-sm);color:inherit}
+.seg .sev .fig{font-size:var(--fs-figure-xs)}
+.tabs{display:flex;gap:var(--sp-6);border-bottom:var(--line) solid var(--border-subtle)}
.tabs.flush{border-bottom:0}
.tabs [role=tab]{display:flex;gap:6px;align-items:center;margin-bottom:-1px;padding:var(--sp-2) 0 10px;border:0;border-bottom:2px solid transparent;background:none;font:var(--fs-body) var(--font-sans);color:var(--text-secondary);cursor:pointer;text-decoration:none;white-space:nowrap}
.tabs [role=tab]:hover{color:var(--text-primary)}
.tabs [role=tab][aria-selected="true"]{color:var(--text-primary);font-weight:var(--fw-bold);border-bottom-color:var(--c-ink)}
.tabs [role=tab][aria-disabled="true"]{color:var(--text-disabled);cursor:not-allowed}
-.tabs [role=tab] > .fig{font-weight:var(--fw-medium)}
+.tabs [role=tab] > .fig{font-size:var(--fs-figure-sm)}
+
.tabpanel{padding-top:var(--sp-4)}
-/* ---- B9 分页 ---- */
-.pagination{display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-3);font-size:var(--fs-caption);color:var(--text-secondary)}
+/* ---- B9 分页（Q4：当前页 --c-n100 实底 + 加粗，与筛选一致） ---- */
+.pagination{display:flex;align-items:center;gap:2px;margin-top:var(--sp-3);font-size:var(--fs-caption);color:var(--text-secondary)}
.pagination .total{margin-right:auto}
-.pagination .fig{font-weight:var(--fw-medium)}
-.pagination button.pg{min-width:28px;height:28px;padding:0 6px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;font:var(--fw-medium) 15px/1 var(--font-figures);font-variant-numeric:tabular-nums;color:var(--text-primary);cursor:pointer}
-.pagination button.pg:hover{background:var(--bg-hover)}
-.pagination button.pg[aria-current="page"]{border-color:var(--c-ink);font-weight:var(--fw-bold);background:var(--bg-surface)}
+.pagination .fig{font-size:var(--fs-figure-xs)}
+.pagination button.pg{min-width:var(--control-h-sm);height:var(--control-h-sm);padding:0 var(--sp-2);border:0;border-radius:var(--radius-ctl);background:none;font:var(--fw-medium) var(--fs-figure-sm)/1 var(--font-figures);font-variant-numeric:tabular-nums;color:var(--text-primary);cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
+.pagination button.pg:hover{background:var(--c-n100)}
+.pagination button.pg[aria-current="page"]{background:var(--c-n100);font-weight:var(--fw-bold)}
.pagination button.pg[disabled]{color:var(--text-disabled);cursor:not-allowed;background:none}
.pagination .gap{width:20px;text-align:center}
.pagination .jump{display:flex;align-items:center;gap:6px;margin-left:var(--sp-4)}
-.pagination .jump .input{width:52px;height:28px;text-align:center;font-family:var(--font-figures);font-size:15px}
+.pagination .jump .input{width:52px;height:var(--control-h-sm);text-align:center;font-family:var(--font-figures);font-size:var(--fs-figure-sm)}
/* ---- B10 轻提示 Toast（§7.12：只用于操作结果，4 秒消失，悬停暂停） ---- */
-.toasts{position:fixed;left:50%;bottom:var(--sp-8);transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;pointer-events:none}
-.toast{display:flex;gap:var(--sp-3);align-items:center;min-height:40px;padding:var(--sp-2) var(--sp-4);background:var(--c-ink);color:var(--text-on-dark);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);pointer-events:auto;white-space:nowrap}
+.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;pointer-events:none}
+.toast{display:flex;gap:var(--sp-3);align-items:center;min-height:40px;padding:var(--sp-2) var(--sp-4);background:var(--c-ink);color:var(--text-on-dark);border-radius:var(--radius-ctl);box-shadow:var(--shadow-overlay);pointer-events:auto;white-space:nowrap}
.toast .ok{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--c-green);color:var(--c-white);font-size:11px;line-height:1}
.toast a,.toast button.lnk{color:var(--text-on-dark);text-decoration:underline;text-underline-offset:3px;background:none;border:0;font:inherit;cursor:pointer;padding:0}
-.toast .sep{width:1px;align-self:stretch;margin:2px 0;background:color-mix(in srgb,var(--c-white) 24%,transparent)}
+.toast .sep{width:1px;align-self:stretch;margin:2px 0;background:var(--on-dark-line)}
.toast.static{position:static}
-/* ---- B11 对话框（§7.14） ---- */
-.scrim{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:color-mix(in srgb,var(--c-ink) 32%,transparent)}
-.dialog{position:relative;width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);overflow:auto;background:var(--bg-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);padding:var(--sp-6)}
+/* ---- B11 对话框（§7.14：480 / 640，圆角 12；对话框里可以有自己的主按钮，Q12） ---- */
+/* 对话框本身不滚动、不裁剪（overflow 可见），里面的下拉、日期浮层可以伸出对话框；内容比窗口高时由遮罩滚动 */
+.scrim{position:fixed;inset:0;z-index:50;display:grid;overflow:auto;padding:var(--sp-8) var(--sp-4);background:var(--scrim)}
+.dialog{position:relative;margin:auto;width:480px;max-width:100%;padding:var(--sp-6);background:var(--bg-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay)}
.dialog.wide{width:640px}
-.dialog.static{position:static;max-width:none;box-shadow:var(--shadow-overlay)}
+.dialog.static{margin:0;max-width:none} /* 陈列用：直接摆在页面里 */
.dialog h2{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);margin:0 var(--sp-8) var(--sp-3) 0}
.dialog .x{position:absolute;top:var(--sp-4);right:var(--sp-4)}
.dialog .body > p{margin:0 0 var(--sp-3)}
.dialog .body > .field{margin-top:var(--sp-4)}
.dialog .foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6)}
.dialog .foot .left{margin-right:auto}
+.dialog table.data td{height:auto}
-/* ---- B12 提醒补充（§7.12、§7.15） ---- */
-.alert{align-items:flex-start}
+/* ---- B12 提醒补充（§7.12、§7.15）：右侧操作、副说明、错误编号 ---- */
+.alert:has(> .btn,> .act){align-items:center}
+.alert:has(> .btn,> .act) > .ic{margin-top:0}
.alert > div{flex:1;min-width:0}
-.alert .act{margin-left:auto;flex:none;display:flex;gap:var(--sp-2);align-items:center}
+.alert > p{flex:1}
+.alert .act{margin-left:auto;flex:none;align-self:center;display:flex;gap:var(--sp-2);align-items:center}
+.alert > .btn{flex:none;align-self:center}
.alert .sub{display:block;margin-top:2px;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.alert .fig{font-weight:var(--fw-medium)}
-.errno{font:var(--fw-medium) var(--fs-caption)/1 var(--font-figures);color:var(--text-secondary);letter-spacing:.02em}
+.errno{font:var(--fw-medium) var(--fs-figure-xs)/1 var(--font-figures);color:var(--text-secondary);letter-spacing:.02em}
/* ---- B13 提示气泡（悬停 / 聚焦显示，§6 只有图标的按钮要有悬停提示） ---- */
[data-tip]{position:relative}
-[data-tip]:hover::after,[data-tip]:focus-visible::after,[data-tip].tip-on::after{content:attr(data-tip);position:absolute;z-index:55;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);max-width:280px;width:max-content;padding:5px var(--sp-2);border-radius:var(--radius-md);background:var(--c-ink);color:var(--text-on-dark);font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans);white-space:normal;text-align:left;box-shadow:var(--shadow-overlay);pointer-events:none}
-[data-tip].tip-below:hover::after,[data-tip].tip-below.tip-on::after{bottom:auto;top:calc(100% + 6px)}
-[data-tip].tip-start:hover::after,[data-tip].tip-start.tip-on::after{left:0;transform:none}
-[data-tip].tip-left:hover::after,[data-tip].tip-left.tip-on::after{left:auto;right:0;transform:none}
+[data-tip]:hover::after,[data-tip]:focus-visible::after,[data-tip].tip-on::after{content:attr(data-tip);position:absolute;z-index:55;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:280px;padding:6px 10px;border-radius:var(--radius-ctl);background:var(--c-ink);color:var(--text-on-dark);font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans);white-space:normal;text-align:left;pointer-events:none}
+[data-tip].tip-below:hover::after,[data-tip].tip-below:focus-visible::after,[data-tip].tip-below.tip-on::after{bottom:auto;top:calc(100% + 8px)}
+[data-tip].tip-start:hover::after,[data-tip].tip-start:focus-visible::after,[data-tip].tip-start.tip-on::after{left:0;transform:none}
+[data-tip].tip-left:hover::after,[data-tip].tip-left:focus-visible::after,[data-tip].tip-left.tip-on::after{left:auto;right:0;transform:none}
-/* ---- B14 空状态、骨架屏、进度（§7.11、§7.15） ---- */
+/* ---- B14 空状态、骨架屏、进度（§7.11、§7.15；Q8 骨架屏静止，不做明暗起伏） ---- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-12) var(--sp-6)}
.empty > .ic{color:var(--text-secondary);margin-bottom:var(--sp-3)}
.empty b{font-size:var(--fs-title);line-height:var(--lh-title)}
.empty p{margin:var(--sp-1) 0 var(--sp-5);color:var(--text-secondary);max-width:30em}
.empty.sm{padding:var(--sp-8) var(--sp-4)}
-.empty.sm p{margin-bottom:var(--sp-3)}
-.skel{display:block;height:12px;border-radius:var(--radius-sm);background:var(--bg-sunken);animation:skel 1.6s var(--ease) infinite alternate}
+.empty.sm b{font-size:var(--fs-body);line-height:var(--lh-body)}
+.empty.sm p{margin-bottom:0}
+.empty.sm > .btn{margin-top:var(--sp-4)}
+.skel{display:block;height:12px;border-radius:var(--radius-xs);background:var(--c-n100)}
.skel.t{height:16px;width:40%}
.skel.w60{width:60%} .skel.w80{width:80%} .skel.w30{width:30%} .skel.w20{width:20%}
.skel + .skel{margin-top:var(--sp-2)}
-.skel-row{display:grid;grid-template-columns:24px minmax(0,1fr) 120px;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle)}
+.skel-row{display:grid;grid-template-columns:24px minmax(0,1fr) 120px;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:var(--line) solid var(--border-subtle)}
.skel-row:first-child{border-top:0}
-@keyframes skel{from{opacity:1}to{opacity:.45}}
-@media (prefers-reduced-motion:reduce){.skel{animation:none}}
-.progress{display:flex;align-items:center;gap:var(--sp-3)}
+.progress{display:flex;align-items:center;gap:10px}
.progress .bar{flex:1;margin:0}
-.progress .fig{font-weight:var(--fw-medium);min-width:3em;text-align:right}
+.progress .fig{min-width:3em;text-align:right}
.steps .fig{font-weight:var(--fw-medium);color:var(--text-secondary);margin-left:auto}
.steps li > span:nth-child(2){flex:1}
.steps .fail .dot{border-color:var(--warn);color:var(--warn-text);font-weight:var(--fw-bold)}
.steps .fail{color:var(--warn-text)}
/* ---- B15 杂项小件 ---- */
-.kbd{display:inline-block;min-width:20px;padding:0 5px;border:1px solid var(--border-control);border-bottom-width:2px;border-radius:3px;font:var(--fw-medium) var(--fs-caption)/18px var(--font-figures);text-align:center;background:var(--bg-surface);color:var(--text-primary)}
+.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-tag);background:var(--c-n100);font:var(--fw-bold) var(--fs-caption)/1 var(--font-figures);color:var(--text-secondary);white-space:nowrap}
.muted{color:var(--text-secondary)}
.nw{white-space:nowrap}
.cap{font-size:var(--fs-caption);line-height:var(--lh-caption)}
.fig.m{font-weight:var(--fw-medium)}
+.fig.sm{font-size:var(--fs-figure-sm)}
+.fig.xs{font-size:var(--fs-figure-xs)}
+/* 数字默认字号见 components.css（.fig = 15，小字里 13）；这里补上 demo 层的 12px 小字容器 */
+:is(.d-cap,.d-label,.d-rules,.filters-on,.ai-label,.hint-warn,.sign.sm,.sign-note,.dates .left,.stat p,.quota p,.lb-h) .fig{font-size:var(--fs-figure-xs)}
.kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--sp-2) var(--sp-4);margin:0}
.kv dt{color:var(--text-secondary)}
.kv dd{margin:0}
-.chip{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 4px 0 8px;border:1px solid var(--border-control);border-radius:var(--radius-sm);background:var(--bg-surface);font-size:var(--fs-caption);white-space:nowrap}
-.chip button{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-secondary);cursor:pointer}
-.chip button:hover{background:var(--bg-hover);color:var(--text-primary)}
-.drop{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);border:1.5px dashed var(--border-control);border-radius:var(--radius-sm);background:var(--bg-surface);padding:var(--sp-8) var(--sp-6);text-align:center;cursor:pointer}
-.drop:hover,.drop.is-over{border-color:var(--c-ink);background:var(--bg-hover)}
+/* 可移除的筛选标签：中性实底 */
+.chip{display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--tag-h);padding:0 3px 0 var(--sp-2);border-radius:var(--radius-tag);background:var(--c-n100);font-size:var(--fs-caption);white-space:nowrap}
+.chip button{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--radius-xs);background:none;color:var(--text-secondary);cursor:pointer}
+.chip button:hover{background:var(--border-subtle);color:var(--text-primary)}
+.drop{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);border:1.5px dashed var(--border-control);border-radius:var(--radius-card);background:var(--bg-surface);padding:var(--sp-8) var(--sp-6);text-align:center;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
+.drop:hover,.drop.is-over{border-color:var(--c-ink);background:var(--c-n50)}
.drop > .ic{color:var(--text-secondary)}
.drop b{font-size:var(--fs-title);line-height:var(--lh-title)}
.drop span{color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
-.file-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
+.file-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card)}
.file-row + .file-row{margin-top:var(--sp-2)}
-.file-row .ext{font:var(--fw-bold) 11px/1 var(--font-figures);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:4px 0;text-align:center}
+.file-row .ext{font:var(--fw-bold) 11px/1 var(--font-figures);background:var(--c-n100);border-radius:var(--radius-xs);padding:5px 0;text-align:center}
.file-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .acts{display:flex;gap:var(--sp-1);align-items:center}
.flowline{display:flex;align-items:center}
@@ -392,55 +469,74 @@ select.input{appearance:none;padding-right:28px;cursor:pointer}
.flowline.sm{font-size:var(--fs-caption)}
.flowline.sm .st i{width:8px;height:8px}
.flowline.sm .st.now i{border-width:2.5px}
+/* 头像（列表、记录里的小头像） */
+.av{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--c-n100);color:var(--text-primary);font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:1}
-/* ---- B16 AI 产出块（§3.3 左侧虚线竖线、§7.16） ---- */
-.ai-block{border-left:1.5px dashed var(--ai);padding:var(--sp-1) 0 var(--sp-1) var(--sp-3)}
-.ai-block.done{border-left:2px solid var(--c-ink)}
+/* ---- B16 AI 产出块（§3.3、§7.16；Q2） ----
+ * 确认前：「AI」小标签 + 左侧 2px 蓝铅笔虚线；正文始终墨色。
+ * 确认后（.done）：虚线去掉，下方出署名行（.sign：绿 ✓ + 姓名 + 时间）。左内边距保留，正文不跳动。 */
+.ai-block{border-left:2px dashed var(--ai);padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);color:var(--text-primary)}
+.ai-block.done{border-left-color:transparent}
.ai-label{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-2);font-size:var(--fs-caption);color:var(--text-secondary)}
-.flag.box{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 5px;line-height:18px}
+.flag.box{background:var(--c-n100);border-radius:var(--radius-tag);padding:0 6px;line-height:var(--tag-h)}
.cite-src.inline{display:inline;margin-left:6px;white-space:nowrap}
+/* 署名行（§7.4、§7.16、Q2）：确认后的人工签名，绿 ✓ + 姓名 + 时间 + 动作，可撤销。
+ *
+
+
+
/ 120 页
反馈只用于改进检查，不改变这一条的处理状态。
+ 王敏11月3日 14:30确认无误
+ * 下方说明（忽略原因、确认说明）用 ；「已忽略」不是确认：.sign.ign 用辅助灰和「–」。 */ +.sign .fig{font-weight:var(--fw-medium)} +.sign .undo{margin-left:var(--sp-1);padding:0;border:0;background:none;font:var(--fs-caption)/var(--lh-caption) var(--font-sans);color:var(--text-secondary);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;cursor:pointer} +.sign .undo:hover{color:var(--text-primary);text-decoration-color:var(--c-ink)} .sign.ign{color:var(--text-secondary)} -.sign.sm{font-size:var(--fs-caption);margin-top:var(--sp-2)} +.sign.sm{font-size:var(--fs-caption);line-height:var(--lh-caption);margin-top:var(--sp-2)} +.sign-note{margin:2px 0 0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)} .more-cites{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-caption);color:var(--ai);background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans)} -.more-cites:hover{text-decoration:underline;text-underline-offset:3px} +.more-cites:hover{color:var(--ai-strong);text-decoration:underline;text-underline-offset:3px} .cite q.clamp{-webkit-line-clamp:3} .cite .expand{font-size:var(--fs-caption);color:var(--ai);background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans)} -/* ---- B17 卡片 ---- */ -.card-h{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)} -.card-h h3{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)} -.card-h .more{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center} -.card.tight{padding:var(--sp-4) var(--sp-5)} -.card-foot{display:flex;gap:var(--sp-2);align-items:center;margin:var(--sp-4) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5));padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--border-subtle)} -.card.tight .card-foot{margin:var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4));padding:var(--sp-3) var(--sp-5)} +/* ---- B17 卡片：卡片头、卡片底、统计、额度、关键日期（§7.9、§7.10） ---- + * 整块卡片 .card：头用 .card-h，底用 .card-foot（贴边、带发丝线）； + * 分区卡片 .card.flush：.card-h / .card-b / .card-f 见 components.css。 */ +.card-h{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)} +.card-h .more{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center} +.card.tight{padding:var(--sp-3) var(--card-x)} +.card-foot{display:flex;gap:var(--sp-4);align-items:center;margin:var(--sp-4) calc(-1 * var(--card-x)) calc(-1 * var(--card-y));padding:var(--sp-3) var(--card-x);border-top:var(--line) solid var(--border-subtle)} +.card.tight .card-foot{margin-bottom:calc(-1 * var(--sp-3))} .card-foot .r{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center} -/* 项目卡 */ -.pcard{display:flex;flex-direction:column;gap:var(--sp-3);position:relative} -.pcard.is-fatal::before{content:"";position:absolute;left:-1px;top:var(--sp-5);bottom:var(--sp-5);width:3px;background:var(--sev-fatal)} -.pcard .pc-top{display:flex;gap:var(--sp-3);align-items:flex-start} -.pcard .pc-top > div{flex:1;min-width:0} -.pcard .card-foot{margin-top:auto} -.pcard .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)} -.pcard .facts small{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)} -.pcard .facts > div{min-width:0} -/* 统计格 */ -.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)} -.stat{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-4) var(--sp-5)} -.stat small{display:block;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)} +/* 项目卡已删除（Q11：MVP 不做项目卡片视图） */ +/* 统计（d5）：一张卡片四格，竖向发丝线分隔；格子可以是 button（点击筛选，aria-pressed 时底部 2px 墨色边条） */ +.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden} +.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))} +.stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:var(--sp-4) var(--card-x);border:0;border-left:var(--line) solid var(--border-subtle);background:none;font:inherit;color:inherit;text-align:left} +.stat:first-child{border-left:0} +button.stat{cursor:pointer;transition:background-color var(--dur-fast) var(--ease)} +button.stat:hover{background:var(--c-n50)} +button.stat:focus-visible{outline-offset:-2px;border-radius:0} +.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-ink);transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur-fast) var(--ease)} +.stat[aria-pressed="true"]::after{transform:scaleY(1)} +.stat[aria-pressed="true"] small{color:var(--text-primary);font-weight:var(--fw-bold)} +.stat small{display:block;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary)} .stat .big{font:var(--fw-bold) var(--fs-figure)/var(--lh-figure) var(--font-figures);font-variant-numeric:tabular-nums} -.stat .unit{color:var(--text-secondary);margin-left:4px} -.stat p{margin:var(--sp-1) 0 0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)} +.stat .big.fatal{color:var(--sev-fatal)} +.stat .big.due{color:var(--warn-text)} +.stat .unit{color:var(--text-secondary);margin-left:4px;font-family:var(--font-figures)} +.stat > .ic{position:absolute;top:18px;right:var(--card-x);color:var(--text-secondary);opacity:0;transition:opacity var(--dur-fast) var(--ease)} +.stat:hover > .ic,.stat:focus-visible > .ic,.stat[aria-pressed="true"] > .ic{opacity:1} +.stat[aria-pressed="true"] > .ic{color:var(--text-primary)} +.stat p{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)} .stat p.due-soon,.stat p.due-today{color:var(--warn-text)} /* 额度卡 */ .quota small{display:block;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)} .quota .q2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)} +.quota .q2 .bar{margin:6px 0 0} +.quota .big.warn{color:var(--warn-text)} .quota p{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)} .quota p.warn{color:var(--warn-text)} /* 关键日期 */ .dates{list-style:none;margin:0;padding:0} -.dates li{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:var(--sp-3);align-items:baseline;padding:var(--sp-2) 0;border-top:1px solid var(--border-subtle)} +.dates li{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:var(--sp-3);align-items:baseline;padding:var(--sp-2) 0;border-top:var(--line) solid var(--border-subtle)} .dates li:first-child{border-top:0} -.dates li > .fig{font-weight:var(--fw-medium);font-size:15px} +.dates li > .fig{font-weight:var(--fw-medium);font-size:var(--fs-figure-sm)} .dates li.past{color:var(--text-secondary)} .dates li.key > span:nth-child(2) > b{font-weight:var(--fw-bold)} .dates .left{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)} @@ -454,71 +550,151 @@ select.input{appearance:none;padding-right:28px;cursor:pointer} .toolbar .pop .select{width:auto;min-width:132px} .filters-on{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin:calc(-1 * var(--sp-1)) 0 var(--sp-3);font-size:var(--fs-caption);color:var(--text-secondary)} table.data th.sortable{padding:0} -.th-sort{display:flex;align-items:center;gap:4px;width:100%;padding:var(--sp-2) var(--sp-3);border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;white-space:nowrap} +.th-sort{display:flex;align-items:center;gap:4px;width:100%;padding:var(--sp-3) var(--sp-3) var(--sp-2);border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;white-space:nowrap} +table.data th.sortable:first-child .th-sort{padding-left:var(--card-x)} +table.data th.sortable:last-child .th-sort{padding-right:var(--card-x)} .th-sort:hover{color:var(--text-primary)} .th-sort .ic{width:14px;height:14px;color:var(--text-disabled)} th[aria-sort] .th-sort{color:var(--text-primary)} th[aria-sort] .th-sort .ic{color:var(--text-primary)} table.data th.r .th-sort{justify-content:flex-end} table.data .ckc{width:40px;padding-right:0} -table.data.hover tbody tr{cursor:pointer} -table.data.hover tbody tr:hover td{background:var(--bg-hover)} -table.data tbody tr.sel td{background:var(--bg-sunken)} -table.data tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--c-ink)} table.data td.empty-cell{height:auto;padding:0} table.data td .cap{color:var(--text-secondary)} table.data .acts{white-space:nowrap;text-align:right} table.data td.mid{vertical-align:middle} -table.data tr.is-fatal td:first-child{box-shadow:inset 3px 0 0 var(--sev-fatal)} -.batchbar{position:sticky;top:calc(52px + var(--sp-2));z-index:10;display:flex;align-items:center;gap:var(--sp-3);height:44px;padding:0 var(--sp-4);margin-bottom:var(--sp-2);background:var(--bg-surface);border:1px solid var(--c-ink);border-radius:var(--radius-sm)} +.batchbar{position:sticky;top:calc(var(--topbar-h) + var(--sp-2));z-index:10;display:flex;align-items:center;gap:var(--sp-3);height:48px;padding:0 var(--sp-2) 0 var(--card-x);margin-bottom:var(--sp-2);background:var(--bg-surface);border:var(--line) solid var(--c-ink);border-radius:var(--radius-card)} .batchbar b .fig{font-weight:var(--fw-bold)} .batchbar .r{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center} -.list-box{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)} -.list-box > .lb-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-4);border-bottom:1px solid var(--border-subtle);background:var(--bg-sunken);font-size:var(--fs-caption);color:var(--text-secondary)} +.list-box{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden} +.list-box > .lb-h{display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding:var(--sp-1) var(--card-x);border-bottom:var(--line) solid var(--border-subtle);font-size:var(--fs-caption);color:var(--text-secondary)} .list-box > .lb-h .r{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center} -.list-box .item{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border-subtle)} +.list-box .item{padding:var(--sp-3) var(--card-x);border-top:var(--line) solid var(--border-subtle)} .list-box .item:first-of-type{border-top:0} .list-box .item.has-ck{grid-template-columns:20px 24px minmax(0,1fr) auto} .list-box .item .ck{margin-top:3px} -.item.sel{background:var(--ai-soft);box-shadow:inset 3px 0 0 var(--ai)} -.item.focus{box-shadow:inset 0 0 0 2px var(--c-ink)} -.item[tabindex]{cursor:pointer;outline:none} -.item[tabindex]:hover{background:var(--bg-hover)} -.item.sel:hover{background:var(--ai-soft)} +/* 当前条与勾选条（§7.18，v0.2 收尾）： + * 当前条（键盘 J / K、点击定位到的那一条）= --c-n50 底 + 左侧 3px 墨色竖条：.item.sel / .finding.sel / tr.sel； + * 键盘操作时再加 2px 墨色内框：条目自身 :focus-visible、加 .focus，或列表容器 .kb-on / :focus-visible； + * 勾选条（批量处理的复选框）只有复选框是选中状态，不加底色和竖条； + * 致命行不加红竖线，竖条只表示「当前」，和级别无关。 */ +.finding.sel{background:var(--c-n50);box-shadow:inset 3px 0 0 var(--c-ink)} +.finding{transition:background-color var(--dur-fast) var(--ease)} +:is(.item,.finding).focus,.item[tabindex]:focus-visible{box-shadow:inset 0 0 0 2px var(--focus-ring)} +:is(.item,.finding).sel.focus,.item.sel[tabindex]:focus-visible,:is(.kb-on,:focus-visible) > :is(.item,.finding).sel{box-shadow:inset 3px 0 0 var(--c-ink),inset 0 0 0 2px var(--focus-ring)} +table.data tbody tr.sel.focus td{box-shadow:inset 0 2px 0 var(--focus-ring),inset 0 -2px 0 var(--focus-ring)} +.item[tabindex]{cursor:pointer;outline:none;transition:background-color var(--dur-fast) var(--ease)} +.item[tabindex]:hover{background:var(--c-n50)} .item .upd{margin-top:6px;display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-caption)} -.item .upd .btn{height:24px;font-size:var(--fs-caption)} +.item .upd .btn{height:24px;padding:0 var(--sp-2);font-size:var(--fs-caption);border-radius:var(--radius-tag)} -/* 问题行的紧凑版本（列表页） */ -.finding .ckw{position:absolute;left:var(--sp-2);top:calc(var(--sp-5) + 2px)} -.finding.has-ck{padding-left:var(--sp-8)} -.finding.focus{box-shadow:inset 0 0 0 2px var(--c-ink)} -.u4{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--bg-sunken);border-radius:var(--radius-sm)} -.u4 .field{max-width:none} -.u4 .row{margin-top:var(--sp-2)} -.group-h{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-3) var(--sp-6);border:0;border-top:1px solid var(--border-subtle);background:var(--bg-sunken);color:var(--text-secondary);font:var(--fs-body) var(--font-sans);cursor:pointer;text-align:left} -.group-h:hover{color:var(--text-primary)} +/* 问题行带复选框（列表页批量处理只给「提示」） */ +.finding .ckw{position:absolute;left:14px;top:calc(var(--sp-5) + 2px)} +.finding.has-ck{padding-left:calc(var(--card-x) + 24px)} +/* 行内说明（§7.4、U4）：忽略原因、致命问题「确认无误」的说明，在问题行内展开，替换处理按钮；无底色，不在卡片里再套面板 */ +.u4{margin-top:var(--sp-3)} +.u4 .field{max-width:560px} +.u4 .chips .btn{height:26px} +.u4 .row{margin-top:var(--sp-3);gap:var(--sp-2)} +.group-h{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-3) var(--card-x);border:0;border-top:var(--line) solid var(--border-subtle);background:none;color:var(--text-secondary);font:var(--fs-body) var(--font-sans);cursor:pointer;text-align:left;transition:background-color var(--dur-fast) var(--ease)} +.group-h:hover{background:var(--c-n50);color:var(--text-primary)} .verdict.hint{color:var(--sev-hint)} -/* ---- B19 对照布局：分类导航 + 列表 + 原文查看器（§5.3、§7.8） ---- */ -.split{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(420px,45%);flex:1;min-height:0} -.cats{border-right:1px solid var(--border-subtle);padding:var(--sp-4) var(--sp-3);overflow:auto} -.cats button{display:flex;width:100%;align-items:center;justify-content:space-between;height:34px;padding:0 var(--sp-3);border:0;background:none;border-radius:var(--radius-sm);font:var(--fs-body) var(--font-sans);color:var(--text-primary);cursor:pointer;text-align:left} -.cats button:hover{background:var(--bg-hover)} -.cats button[aria-current="true"]{background:var(--bg-surface);box-shadow:inset 2px 0 0 var(--c-ink);font-weight:var(--fw-bold)} -.cats button .fig{font-weight:var(--fw-medium);color:var(--text-secondary)} +/* ---- B19 对照布局：分类导航 + 列表 + 原文查看器（§5.3、§7.8；v0.2 收尾，原 .split） ---- + *
+ * …
+ *
+ * 尺寸：分类导航 176（1400 以下 152）；列表最小 560；查看器默认 45%，最小 400，拖动或 ← → 调整（Demo.cmp）。
+ * 1280 宽时：列表 ≥ 560、查看器 ≤ 560，不横向滚动。整屏布局：.cmp 撑满剩余高度，三栏各自滚动。 */
+.cmp{--cats-w:176px;--list-min:560px;--viewer-min:400px;flex:1;min-height:0;display:grid;grid-template-columns:minmax(var(--list-min),1fr) var(--gap-card) var(--vw,45%);padding:0 var(--pad-page) var(--sp-4)}
+@media (max-width:1399px){.cmp{--cats-w:152px}}
+.cmp-list{display:grid;grid-template-columns:var(--cats-w) minmax(0,1fr);min-height:0;overflow:hidden}
+.cmp-list > .lst{position:relative;min-height:0;overflow:auto}
+.cmp > .viewer{min-width:0}
+/* 拖动条：平时不可见，悬停 / 拖动时出一条浅灰细线，键盘聚焦时墨色 */
+.rsz{position:relative;cursor:col-resize;outline:0;touch-action:none}
+.rsz::after{content:"";position:absolute;top:var(--sp-3);bottom:var(--sp-3);left:50%;width:2px;margin-left:-1px;border-radius:1px;background:transparent;transition:background-color var(--dur-fast) var(--ease)}
+.rsz:hover::after,.rsz.on::after{background:var(--c-n300)}
+.rsz:focus-visible::after{background:var(--focus-ring)}
+body.dragging{cursor:col-resize;user-select:none}
+/* 分类导航：在列表卡片左侧；当前分类 = --c-n100 实底 + 加粗（导航的「当前」，不是列表项的「当前条」） */
+.cats{display:flex;flex-direction:column;gap:2px;border-right:var(--line) solid var(--border-subtle);padding:var(--sp-3) var(--sp-2);overflow:auto}
+.cats button{display:flex;flex:none;width:100%;align-items:center;justify-content:space-between;height:var(--control-h-sm);padding:0 10px;border:0;background:none;border-radius:var(--radius-ctl);font:var(--fs-body) var(--font-sans);color:var(--text-primary);cursor:pointer;text-align:left;transition:background-color var(--dur-fast) var(--ease)}
+.cats button:hover{background:var(--c-n100)}
+/* 当前分类：和筛选一样用 --c-n100 实底 + 加粗（导航的「当前」，不是列表项的「选中」） */
+.cats button[aria-current="true"]{background:var(--c-n100);font-weight:var(--fw-bold)}
+.cats button .fig{font-size:var(--fs-figure-sm);font-weight:var(--fw-medium);color:var(--text-secondary)}
.cats button.ai,.cats button.ai .fig{color:var(--ai)}
-.cats hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--sp-3) 0}
-.cats .hint{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);padding:0 var(--sp-3);margin:0}
+.cats hr{width:calc(100% - 20px);border:0;border-top:var(--line) solid var(--border-subtle);margin:var(--sp-2) 10px}
+.cats .hint{margin:auto 0 0;padding:var(--sp-3) 10px 0;font-size:var(--fs-caption);line-height:26px;color:var(--text-secondary)}
+.cats .hint .kbd{margin-right:2px}
+/* 列表里的分组标题；.ai 是清单顶部的「待确认」分组（§7.6 v0.2：蓝色标题，不再用虚线框） */
+.grp-h{display:flex;align-items:baseline;gap:var(--sp-2);padding:var(--sp-5) var(--card-x) var(--sp-2)}
+.grp-h b{font-weight:var(--fw-bold)}
+.grp-h .fig{font-weight:var(--fw-medium);color:var(--text-secondary)}
+.grp-h.ai b,.grp-h.ai .fig{color:var(--ai)}
+.grp-h p{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.viewer{min-height:0}
-.viewer-bar{flex-wrap:wrap;min-height:44px}
-.viewer-bar .doc-name{display:flex;gap:var(--sp-2);align-items:baseline;min-width:0}
+.viewer-bar{flex-wrap:nowrap;min-height:48px}
+.viewer-bar .doc-name{flex:1;display:flex;gap:var(--sp-2);align-items:baseline;min-width:0}
+.viewer-bar .pager{gap:var(--sp-1)}
+.viewer-bar .pager > .fig{margin-right:var(--sp-2);font-size:var(--fs-figure-xs);color:var(--text-secondary)}
.viewer-bar .doc-file{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.viewer-body{flex:1;overflow:auto;padding:var(--sp-4) 0}
-.viewer .sheet{min-height:560px;margin:0 auto;width:calc(100% - 48px);max-width:640px;position:relative;background:var(--c-white);color:var(--text-primary)}
+.viewer .sheet{min-height:560px;margin:0 auto;width:calc(100% - 48px);max-width:640px;position:relative;background:var(--bg-surface);color:var(--text-primary)}
.sheet .pno{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:var(--fs-caption) var(--font-figures);color:var(--text-secondary)}
.sheet .h{font-weight:var(--fw-bold);margin:4px 0 10px}
.sheet .faint{color:var(--text-secondary)}
-.sheet .stub{height:9px;background:var(--bg-sunken);margin:12px 0;border-radius:1px}
+.sheet .stub{height:9px;background:var(--c-n100);margin:12px 0;border-radius:var(--radius-xs)}
.sheet .stub.s{width:60%}
.viewer-note{font-size:var(--fs-caption);color:var(--text-secondary);padding:var(--sp-2) var(--sp-6) 0;margin:0;text-align:center}
+
+/* ---- B20 项目行（§7.9，v0.2 收尾：工作台和列表页共用） ----
+ * 栅格对齐的列表（不是 table），整行可点：
+ * …
项目 · 投标截止 · 状态 · 致命 · 下一步 · （空）
+ * - + * …… + * 剩 17 天11月20日 09:30 + * 已检查未就绪 + * 致命标签或 — + * + *
+
+ 王敏${PLAN[plan]}
`);
const main = $("main");
main.classList.add("main");
- main.insertAdjacentHTML("afterbegin", `${crumbs}
+ main.insertAdjacentHTML("afterbegin", `${ORG}${crumbs}
+
+
| J / K | 下一条 / 上一条 |
| O 或 Enter | 在原文查看器里打开当前出处 |
| 1 2 3 | 确认无误 / 已修改 / 忽略（3 会打开原因输入框） |
| U | 撤销当前条的处理 |
| ? | 显示本说明 |
" : ``).join(""); + } + let fm = null; + function closeFloatMenu(focusBack) { + if (!fm) return; + fm.el.remove(); fm.btn.setAttribute("aria-expanded", "false"); + if (focusBack) fm.btn.focus(); + fm = null; + } + function floatMenu(btn, items, onPick) { + if (fm && fm.btn === btn) return closeFloatMenu(); + closeFloatMenu(); + const el = document.createElement("div"); + el.className = "menu float"; el.setAttribute("role", "menu"); + el.innerHTML = menuHTML(items); + document.body.appendChild(el); + const r = btn.getBoundingClientRect(); + const below = r.bottom + 4 + el.offsetHeight < innerHeight; + el.style.top = `${below ? r.bottom + 4 : r.top - 4 - el.offsetHeight}px`; + el.style.left = `${Math.max(8, r.right - el.offsetWidth)}px`; + btn.setAttribute("aria-expanded", "true"); + fm = { el, btn }; + el.addEventListener("click", (e) => { const b = e.target.closest("[data-i]"); if (!b) return; e.stopPropagation(); const it = items[+b.dataset.i]; if (it.disabled) return; closeFloatMenu(true); if (onPick) onPick(it.act || it.label, it); }); + el.addEventListener("keydown", (e) => { + const its = $$("[role=menuitem]", el), k = its.indexOf(document.activeElement); + if (e.key === "ArrowDown") { e.preventDefault(); its[(k + 1) % its.length].focus(); } + if (e.key === "ArrowUp") { e.preventDefault(); its[(k - 1 + its.length) % its.length].focus(); } + if (e.key === "Escape") { e.stopPropagation(); closeFloatMenu(true); } + if (e.key === "Tab") closeFloatMenu(); + }); + $("[role=menuitem]", el).focus(); + } + document.addEventListener("click", (e) => { if (fm && !fm.el.contains(e.target) && !fm.btn.contains(e.target)) closeFloatMenu(); }); + addEventListener("scroll", () => closeFloatMenu(), { passive: true, capture: true }); + addEventListener("resize", () => closeFloatMenu()); + + /* ---------- 快捷键说明（§8.2）：按页面传入，只列本页能用的键 ---------- + * Demo.keysDialog(Demo.KEYS.reading) 读标：J / K、Enter、? + * Demo.keysDialog(Demo.KEYS.check) 查标（问题列表）：J / K、O / Enter、1 / 2 / 3、X、U、? + * 也可以传自己的 [[键的 HTML, 说明], …]；Demo.keysTable(list) 生成同样的表格供静态展示。 */ + const kb = (k) => `${k}`; + const KEY = { + jk: [`${kb("J")} / ${kb("K")}`, "下一条 / 上一条"], + enter: [kb("Enter"), "在原文查看器里打开当前条的出处"], + open: [`${kb("O")} 或 ${kb("Enter")}`, "在原文查看器里打开当前出处"], + act: [`${kb("1")} ${kb("2")} ${kb("3")}`, "确认无误 / 已修改 / 忽略（忽略、致命的确认无误在行内写说明）"], + x: [kb("X"), "勾选当前条（只限「提示」）"], + undo: [kb("U"), "撤销刚才的处理"], + help: [kb("?"), "显示本说明"] + }; + const KEYS = { reading: [KEY.jk, KEY.enter, KEY.help], check: [KEY.jk, KEY.open, KEY.act, KEY.x, KEY.undo, KEY.help] }; + const keysTable = (list) => `
| ${k} | ${t} |
${y} 年 ${m + 1} 月
${WD.map((w) => `${w}`).join("")}${cells}
- ${opt.time ? `时间 ` : '点圆点的日期是本项目的关键日期'}
`;
+ ${opt.time ? `时间 ` : `${note}`}
`;
}
+ /* 只有日历、没有输入框的陈列（.pop.d-open[data-date]） */
function initDate(p) {
if (p.dataset.ready) return;
p.dataset.ready = 1;
- const trg = $(".select", p), cal = $(".cal", p);
- let [y, m] = (p.dataset.month || "2026-11").split("-").map(Number); m -= 1;
- let sel = p.dataset.value || "";
- const opt = { today: "2026-11-3", marks: (p.dataset.marks || "").split(",").filter(Boolean), time: p.dataset.time, min: p.dataset.min ? new Date(...p.dataset.min.split("-").map((v, i) => i === 1 ? v - 1 : +v)) : null };
+ const cal = $(".cal", p);
+ let [y, m] = (p.dataset.month || p.dataset.value || "2026-11").split("-").map(Number); m -= 1;
+ let sel = p.dataset.value ? keyOf(parseDT(p.dataset.value, false).dt) : "";
+ const opt = { marks: (p.dataset.marks || "").split(",").filter(Boolean).map((k) => keyOf(parseDT(k, false).dt)), time: p.dataset.time, min: p.dataset.min ? parseDT(p.dataset.min, false).dt : null };
const render = () => { cal.innerHTML = calHTML(y, m, sel, opt); };
- const fmt = (k) => { const [a, b, c] = k.split("-"); return `${a}-${String(b).padStart(2, "0")}-${String(c).padStart(2, "0")}`; };
render();
- if (!p.classList.contains("d-open")) cal.hidden = true;
- trg?.addEventListener("click", (e) => { e.stopPropagation(); const o = !p.classList.contains("open"); closePops(p); p.classList.toggle("open", o); cal.hidden = !o; trg.setAttribute("aria-expanded", o); });
cal.addEventListener("click", (e) => {
e.stopPropagation();
const b = e.target.closest("button"); if (!b) return;
if (b.dataset.cm) { m += +b.dataset.cm; if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; } render(); return; }
- if (b.dataset.today) { y = 2026; m = 10; sel = opt.today; }
+ if (b.dataset.today) { y = 2026; m = 10; sel = TODAY_KEY; }
else if (b.dataset.d) sel = b.dataset.d;
else return;
render();
- if (trg) { $(".val", trg).innerHTML = fmt(sel); p.closest(".field")?.classList.remove("err"); if (!p.classList.contains("d-open")) { p.classList.remove("open"); cal.hidden = true; trg.setAttribute("aria-expanded", "false"); trg.focus(); } }
- p.dispatchEvent(new CustomEvent("change", { detail: fmt(sel) }));
});
}
+ /* ---------- 日期输入（Q10）：.dt[data-dt] ----------
+ *
+ *
+ * data-time：带时间（24 小时制，选择器底部填时间）；data-left：下方写「· 剩 N 天」；data-req：必填，空着时的错误说明；
+ * data-marks / data-min / data-note：关键日期圆点 / 最早可选日期 / 选择器底部的圆点说明；类名加 d-open：选择器常开（陈列用）。
+ * 可直接键入，接受「2026/11/20 9:30」「2026.11.20 9：30」「2026年11月20日」等写法，离开时整理成「2026-11-20 09:30」，
+ * 下方 [data-dt-msg] 显示界面写法「11月20日 09:30 · 剩 17 天」。没碰过的字段离开时不报错；报错之后边输入边复查。
+ * 每次整理后在 .dt 上派发 dt-change（detail：{ ok, empty, val, dt, days }）；p.dt.commit({ required }) 供提交时调用。 */
+ function parseDT(raw, withTime) {
+ const s = String(raw || "").trim().replace(/[\/.年月]/g, "-").replace(/日/g, "").replace(/：/g, ":").replace(/\s+/g, " ");
+ const eg = withTime ? "2026-11-20 09:30" : "2026-11-20";
+ const m = s.match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?: ?(\d{1,2}):(\d{1,2}))?$/);
+ if (!m) return { msg: `请按「${eg}」的格式填写` };
+ const [, y, mo, d, hh, mi] = m.map((v) => v === undefined ? v : +v);
+ const dt = new Date(y, mo - 1, d);
+ if (dt.getMonth() !== mo - 1 || dt.getDate() !== d) return { msg: `${y} 年 ${mo} 月没有 ${d} 日，请核对日期` };
+ if (withTime && hh === undefined) return { msg: `请补上时间，例如「${y}-${pad2(mo)}-${pad2(d)} 09:30」` };
+ if (withTime && hh > 23) return { msg: "时间用 24 小时制，小时在 00–23 之间" };
+ if (withTime && mi > 59) return { msg: "分钟在 00–59 之间" };
+ const time = withTime ? `${pad2(hh)}:${pad2(mi)}` : "";
+ const val = `${y}-${pad2(mo)}-${pad2(d)}` + (withTime ? ` ${time}` : "");
+ const days = Math.round((dt - TODAY) / 864e5);
+ const disp = `${y !== TODAY.getFullYear() ? fig(y) + "年" : ""}${fig(mo)}月${fig(d)}日` + (withTime ? ` ${fig(time)}` : "");
+ return { val, dt, days, disp, key: keyOf(dt), time };
+ }
+ /* 字段错误（§7.13）：赭色边框 + 下方「!」说明；其他说明和提醒暂时隐藏。msg 为空时清除。返回是否无错 */
+ let uid = 0;
+ function fieldError(f, msg) {
+ if (!f) return !msg;
+ f.classList.toggle("err", !!msg);
+ const inp = $("input:not([type=checkbox]):not([type=radio]), textarea", f); if (inp) inp.toggleAttribute("aria-invalid", !!msg);
+ let m = $(":scope > .msg.e", f);
+ if (msg) {
+ if (!m) { m = document.createElement("span"); m.className = "msg e"; m.id = (f.id || "fld" + ++uid) + "-err"; f.appendChild(m); }
+ m.innerHTML = `${msg}`;
+ $$(":scope > .msg:not(.e), :scope > .hint-warn", f).forEach((x) => { x.hidden = true; });
+ if (inp) inp.setAttribute("aria-describedby", m.id);
+ } else {
+ if (m) m.remove();
+ $$(":scope > .msg, :scope > .hint-warn:not([data-off])", f).forEach((x) => { x.hidden = false; });
+ const d = $(":scope > .msg[id]", f); if (inp) { if (d) inp.setAttribute("aria-describedby", d.id); else inp.removeAttribute("aria-describedby"); }
+ }
+ return !msg;
+ }
+ function dateInput(p) {
+ if (p.dataset.ready) return;
+ p.dataset.ready = 1; p.classList.add("pop");
+ const inp = $("input", p), btn = $(":scope > .icon-btn", p), cal = $(".cal", p), f = p.closest(".field");
+ const msg = f && $("[data-dt-msg]", f), def = msg ? msg.innerHTML : "";
+ if (msg && !msg.id) msg.id = (inp.id || "dt" + ++uid) + "-msg";
+ if (msg) inp.setAttribute("aria-describedby", msg.id);
+ const withTime = p.dataset.time !== undefined, still = p.classList.contains("d-open");
+ const opt = { marks: (p.dataset.marks || "").split(",").filter(Boolean).map((k) => keyOf(parseDT(k, false).dt)), min: p.dataset.min ? parseDT(p.dataset.min, false).dt : null, note: p.dataset.note };
+ let y = TODAY.getFullYear(), m = TODAY.getMonth(), sel = "", time = p.dataset.time || "09:00", dirty = false;
+ const left = (r) => p.dataset.left === undefined ? "" : r.days > 0 ? ` · 剩 ${fig(r.days)} 天` : r.days === 0 ? " · 今天截止" : " · 已截止";
+ const sync = () => { const r = parseDT(inp.value, withTime); if (r.val) { sel = r.key; y = r.dt.getFullYear(); m = r.dt.getMonth(); if (r.time) time = r.time; } };
+ const render = () => { cal.innerHTML = calHTML(y, m, sel, { ...opt, time: withTime ? time : undefined }); };
+ function commit(o = {}) {
+ if (inp.disabled) { fieldError(f, ""); return true; }
+ const v = inp.value.trim(), r = v ? parseDT(v, withTime) : {};
+ let err = "";
+ if (!v) { err = o.required && p.dataset.req ? p.dataset.req : ""; if (msg) msg.innerHTML = def; }
+ else if (r.msg) err = r.msg;
+ else { inp.value = r.val; if (msg) msg.innerHTML = r.disp + left(r); }
+ fieldError(f, err);
+ p.dispatchEvent(new CustomEvent("dt-change", { bubbles: true, detail: { ok: !err, empty: !v, ...r } }));
+ return !err;
+ }
+ p.dt = { commit, parse: () => parseDT(inp.value, withTime) };
+ const close = (focus) => { p.classList.remove("open", "up"); cal.hidden = true; btn.setAttribute("aria-expanded", "false"); if (focus) inp.focus(); };
+ const open = () => {
+ closePops(p); closeFloatMenu();
+ sync(); render(); p.classList.add("open"); cal.hidden = false; btn.setAttribute("aria-expanded", "true");
+ const r = p.getBoundingClientRect();
+ p.classList.toggle("up", r.bottom + cal.offsetHeight + 8 > innerHeight && r.top > cal.offsetHeight + 8);
+ ($("[aria-selected=true]", cal) || $(".today", cal) || $(".cal-grid button:not([disabled])", cal)).focus();
+ };
+ const write = () => { if (!sel) return; const [a, b, c] = sel.split("-"); inp.value = `${a}-${pad2(b)}-${pad2(c)}` + (withTime ? ` ${time}` : ""); dirty = true; commit(); };
+ if (still) { sync(); render(); } else cal.hidden = true;
+ if (inp.value.trim()) commit();
+ btn.addEventListener("click", (e) => { e.stopPropagation(); if (still) return; p.classList.contains("open") ? close(true) : open(); });
+ cal.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const b = e.target.closest("button"); if (!b || b.disabled) return;
+ if (b.dataset.cm) { m += +b.dataset.cm; if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; } render(); return; }
+ if (b.dataset.today) { y = TODAY.getFullYear(); m = TODAY.getMonth(); sel = TODAY_KEY; }
+ else if (b.dataset.d) sel = b.dataset.d; else return;
+ render(); write();
+ if (!still && !withTime) close(true);
+ else ($(`[data-d="${sel}"]`, cal) || b).focus();
+ });
+ cal.addEventListener("input", (e) => {
+ if (!e.target.classList.contains("time")) return;
+ const t = e.target.value.trim().replace("：", ":").match(/^(\d{1,2}):(\d{2})$/);
+ if (t && +t[1] < 24 && +t[2] < 60) { time = `${pad2(t[1])}:${t[2]}`; write(); }
+ });
+ cal.addEventListener("keydown", (e) => {
+ if (e.key === "Escape" && !still) { e.stopPropagation(); close(true); return; }
+ if (e.key === "Enter" && e.target.classList.contains("time")) { e.preventDefault(); if (!still) close(true); return; }
+ const cells = $$(".cal-grid button:not([disabled])", cal), i = cells.indexOf(document.activeElement);
+ const d = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key];
+ if (i >= 0 && d) { e.preventDefault(); (cells[i + d] || cells[i]).focus(); }
+ });
+ inp.addEventListener("keydown", (e) => { if (e.key === "ArrowDown" && e.altKey) { e.preventDefault(); open(); } });
+ inp.addEventListener("input", () => {
+ dirty = true;
+ if (f && f.classList.contains("err")) { const v = inp.value.trim(); if (v ? !parseDT(v, withTime).msg : !p.dataset.req) fieldError(f, ""); }
+ });
+ inp.addEventListener("blur", (e) => {
+ if (e.relatedTarget && p.contains(e.relatedTarget)) return; // 焦点进了日期选择器
+ if (dirty || (f && f.classList.contains("err"))) commit({ required: true });
+ });
+ }
+
+ /* ---------- 对照布局（§5.3）：拖动或用 ← → 调整原文查看器宽度；清单不窄于 --list-min，查看器不窄于 --viewer-min ---------- */
+ function cmp(el) {
+ if (el.dataset.ready) return;
+ el.dataset.ready = 1;
+ const r = $(":scope > .rsz", el); if (!r) return;
+ const num = (v) => parseFloat(getComputedStyle(el).getPropertyValue(v)) || 0;
+ const box = () => { const b = el.getBoundingClientRect(), cs = getComputedStyle(el); return { right: b.right - parseFloat(cs.paddingRight), w: b.width - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight), gap: r.offsetWidth }; };
+ const cur = () => $(":scope > .viewer", el).offsetWidth;
+ function setW(px) {
+ const { w, gap } = box(), max = w - gap - num("--list-min");
+ px = Math.round(Math.max(num("--viewer-min"), Math.min(max, px)));
+ el.style.setProperty("--vw", px + "px");
+ r.setAttribute("aria-valuenow", px);
+ }
+ r.setAttribute("aria-valuemin", num("--viewer-min"));
+ r.addEventListener("pointerdown", (e) => {
+ e.preventDefault(); r.setPointerCapture(e.pointerId); r.classList.add("on"); document.body.classList.add("dragging");
+ const mv = (ev) => { const { right, gap } = box(); setW(right - ev.clientX - gap / 2); };
+ const up = () => { r.classList.remove("on"); document.body.classList.remove("dragging"); r.removeEventListener("pointermove", mv); r.removeEventListener("pointerup", up); };
+ r.addEventListener("pointermove", mv); r.addEventListener("pointerup", up);
+ });
+ r.addEventListener("keydown", (e) => { if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); setW(cur() + (e.key === "ArrowLeft" ? 32 : -32)); } });
+ addEventListener("resize", () => { if (el.style.getPropertyValue("--vw")) setW(cur()); });
+ }
+
/* ---------- 开关、分段、标签页、半选、排序、加载按钮 ---------- */
function init(root = document) {
$$(".pop[data-select], .pop[data-menu]", root).forEach(initSelect);
$$(".pop[data-date]", root).forEach(initDate);
+ $$(".dt[data-dt]", root).forEach(dateInput);
+ $$(".cmp[data-cmp]", root).forEach(cmp);
$$(".switch:not([data-ready])", root).forEach((s) => {
s.dataset.ready = 1;
const upd = () => { const st = $(".st", s); if (st) st.textContent = s.getAttribute("aria-checked") === "true" ? "开" : "关"; };
@@ -270,6 +511,6 @@
});
}
- window.Demo = { $, $$, esc, icon, hydrate, demoTop, shell, toast, dialog, init, sortable, keysDialog, calHTML };
+ window.Demo = { $, $$, esc, icon, hydrate, demoTop, shell, toast, dialog, init, sortable, keysDialog, keysTable, KEYS, calHTML, parseDT, fieldError, dateInput, cmp, floatMenu, closeFloatMenu, menuHTML };
document.addEventListener("DOMContentLoaded", () => { hydrate(); init(); });
})();
diff --git a/docs/design/ui-demo/forms.html b/docs/design/ui-demo/forms.html
index df54ee9..6ef316f 100644
--- a/docs/design/ui-demo/forms.html
+++ b/docs/design/ui-demo/forms.html
@@ -1,4 +1,12 @@
+
@@ -10,11 +18,24 @@
@@ -22,50 +43,56 @@
+ *
+ *
+ *
+ * 24 小时制② 表单
-三张真实业务表单：新建项目、资质录入、处理问题时的「忽略并注明原因」。标签在上，必填写「（必填）」，错误用赭色边框 + 下方赭色小字 + 「!」图标，离开输入框时校验、提交时汇总。
- +必填写「（必填）」，错误用赭色；离开输入框时校验，提交时汇总。日期输入「2026-11-20 09:30」，显示「11月20日 09:30」。
+01
+ 新建项目
规范 §7.13 · §8.3 · FR-M2-0101
新建项目
§7.13 · §8.3 · §9.3 · Q10 · Q12
-