docs(design): 按 v0.2 重刷全部 UI demo，确认 Q1–Q13 与 U 键规则
- ui-demo：控件、表单、卡片、列表、工作台、读标六页按 v0.2 重刷；侧栏与顶栏框架、项目行、署名行、可键入日期输入、对照布局等收回 demo.css / demo.js 共用 - system：tokens 补悬停 / 按下 / 遮罩色、数字字阶与原文排版变量；components.css 按 v0.2 改写并清除裸色值 - design-system.md：写入 Q1–Q13 答案，新增开关、分页、下拉、日期选择等组件规则，类别标签、待确认区、选中态、对照布局按 v0.2 修订 - Q13：额度流水记录 0 点的「免扣」行，FR-M6-03 与领域模型同步；U 键改为撤销当前条 - decisions.md 记录 Q1–Q12、Q13 与 U 键；AGENTS.md 同步进度 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
YANG JIANKUAN
@@ -4,6 +4,8 @@
|
||||
* 对比度一律按 WCAG 2.x 公式计算。v0.1 的注释数值以校样纸 #F5F6F3 为底，括号内为白底；
|
||||
* v0.2 起页面底色改为 --c-n50 #F8F8F9（比校样纸更亮），对比度介于两者之间。
|
||||
* v0.2（决策 U5）：页面改为白色主调 + 墨色派生的中性浅灰；圆角三档；控件高 36；墨色渐变窄侧栏。
|
||||
* v0.2 补充（2026-11-03，Q6 / Q7 已确认）：悬停 / 按下 / 遮罩等语义色、数字字号三档、卡片与页面内边距。
|
||||
* 组件里不再写裸色值（#34404D、#222、#888 之类），一律用这里的变量。
|
||||
*/
|
||||
:root {
|
||||
/* ---------- 基础色板：校样色系 ---------- */
|
||||
@@ -30,6 +32,12 @@
|
||||
--c-n50: #F8F8F9; /* 墨 3%：页面底色、行 / 格悬停 */
|
||||
--c-n100: #F1F2F3; /* 墨 6%：中性标签底、文字按钮悬停、进度槽 */
|
||||
--c-nline: #E6E7E9; /* 墨 11%：卡片边框、发丝分隔线 */
|
||||
--c-n300: #BBBEC2; /* 墨 30%（v0.2）：普通链接的下划线（悬停时变墨色） */
|
||||
--c-n400: #A5A9AD; /* 墨 40%（v0.2）：带悬停说明的文字的虚线下划线（如「就绪」） */
|
||||
|
||||
/* 墨色的交互态（v0.2，Q6）：主按钮、选中日期等墨底元素 */
|
||||
--c-ink-hover: #38414B; /* 墨 88% 混白：悬停变浅 */
|
||||
--c-ink-active: #171F29; /* 墨 80% 混黑：按下变深 */
|
||||
|
||||
/* 侧栏（v0.2）：墨色竖向渐变，下端混 18% 蓝铅笔得到深墨蓝；只作底色，不承担 AI 语义 */
|
||||
--side-top: var(--c-ink);
|
||||
@@ -40,6 +48,9 @@
|
||||
--side-hover: rgba(255, 255, 255, .07);
|
||||
--side-active: rgba(255, 255, 255, .14);
|
||||
--side-line: rgba(255, 255, 255, .12);
|
||||
--side-dots: rgba(255, 255, 255, .14); /* 底部点阵（v0.2） */
|
||||
--side-avatar-bg: rgba(255, 255, 255, .16); /* 44px 头像底（v0.2） */
|
||||
--side-avatar-ring: rgba(255, 255, 255, .22); /* 头像 1px 外圈（v0.2） */
|
||||
|
||||
/* 套餐标签（v0.2）：只用于账户区的套餐标签，从赭色派生的金色阶梯；靠深浅区分档次 */
|
||||
--plan-free-bg: rgba(255, 255, 255, .12);
|
||||
@@ -76,12 +87,21 @@
|
||||
--sev-major-text: var(--c-ochre-ink);
|
||||
--sev-major-soft: var(--c-ochre-soft);
|
||||
--sev-hint: var(--c-sub);
|
||||
--sev-hint-soft: var(--c-sunken);
|
||||
--sev-hint-soft: var(--c-n100); /* v0.2：原为 --c-sunken */
|
||||
|
||||
--warn: var(--c-ochre); /* 系统提醒、表单错误、额度预警：不用红 */
|
||||
--warn-text: var(--c-ochre-ink);
|
||||
--warn-soft: var(--c-ochre-soft);
|
||||
|
||||
/* 交互与浮层（v0.2，Q6） */
|
||||
--link-underline: var(--c-n300); /* 普通链接：墨色字 + 浅下划线，悬停下划线变墨 */
|
||||
--hint-underline: var(--c-n400); /* 有悬停说明的文字：虚线下划线 */
|
||||
--primary-hover: var(--c-ink-hover);
|
||||
--primary-active: var(--c-ink-active);
|
||||
--scrim: rgba(29, 39, 51, .32); /* 对话框遮罩：墨 32% */
|
||||
--topbar-glass: rgba(255, 255, 255, .82); /* 顶栏滚动后：半透明白 + 毛玻璃 */
|
||||
--on-dark-line: rgba(255, 255, 255, .24); /* 墨底浮层（轻提示）里的分隔线 */
|
||||
|
||||
/* ---------- 字体 ---------- */
|
||||
--font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
|
||||
--font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
|
||||
@@ -94,7 +114,13 @@
|
||||
--fs-title: 16px; --lh-title: 24px; /* 问题标题、卡片标题、区块标题 */
|
||||
--fs-h2: 20px; --lh-h2: 28px; /* 页面标题（宋体） */
|
||||
--fs-h1: 24px; --lh-h1: 32px; /* 工作台、报告标题（宋体） */
|
||||
--fs-figure: 30px; --lh-figure: 36px; /* 统计数字（Barlow） */
|
||||
--fs-figure: 28px; --lh-figure: 36px; /* 统计数字、额度剩余（Barlow 600）。v0.2：原 30 */
|
||||
--fs-figure-sm: 15px; --lh-figure-sm: 22px; /* 正文行里独立出现的数字：表格数值、日期、页码、筛选计数（v0.2，Q7） */
|
||||
--fs-figure-xs: 13px; --lh-figure-xs: 20px; /* 12px 小字行里的数字：标签计数、出处页码、扣点说明（v0.2，Q7） */
|
||||
/* .fig 默认用 --fs-figure-sm；12px 小字里自动换成 --fs-figure-xs；统计大数字（.big）用 --fs-figure（见 components.css） */
|
||||
/* 原文排版（v0.2）：原文查看器里的「纸页」模拟招标文件的打印效果，用宋体，不跟界面字阶 */
|
||||
--font-doc: "Songti SC", "SimSun", var(--font-serif);
|
||||
--fs-doc: 13px; --lh-doc: 24px;
|
||||
--fw-regular: 400;
|
||||
--fw-medium: 500;
|
||||
--fw-bold: 600;
|
||||
@@ -104,31 +130,50 @@
|
||||
--sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
|
||||
|
||||
/* ---------- 圆角、线、阴影 ---------- */
|
||||
--radius-tag: 6px; /* 标签、问题级别标签（v0.2） */
|
||||
--radius-xs: 4px; /* 复选框、开关滑钮、套餐标签等 ≤ 16px 的小件（v0.2，Q4） */
|
||||
--radius-tag: 6px; /* 标签、问题级别标签、开关轨道（v0.2） */
|
||||
--radius-ctl: 8px; /* 按钮、输入框、菜单项、下拉（v0.2） */
|
||||
--radius-card: 12px; /* 卡片、对话框、浮层、内容区左上角（v0.2） */
|
||||
--radius-sm: var(--radius-ctl); /* 兼容 v0.1 的写法，新代码用上面三个 */
|
||||
--radius-md: var(--radius-card);
|
||||
--line: 1px;
|
||||
--line-sev: 1.5px; /* 「重要」标签描边 */
|
||||
--shadow-overlay: 0 4px 16px rgba(29, 39, 51, .14), 0 1px 3px rgba(29, 39, 51, .10);
|
||||
--shadow-overlay: 0 4px 16px rgba(29, 39, 51, .14), 0 1px 3px rgba(29, 39, 51, .10); /* 只给浮层：下拉、对话框、提示、轻提示 */
|
||||
--shadow-sheet: 0 1px 2px rgba(29, 39, 51, .12); /* 原文查看器里的「纸页」 */
|
||||
|
||||
/* ---------- 尺寸 ---------- */
|
||||
--control-h: 36px; /* 默认按钮、输入框（v0.2：原 32） */
|
||||
--control-h-sm: 32px; /* 表格行内、筛选标签（v0.2：原 28） */
|
||||
--control-h-lg: 40px; /* 登录、空状态主操作 */
|
||||
--btn-px: 14px; /* 按钮左右内边距：36 / 32 / 40 对应 14 / 12 / 16（v0.2，以 d5 为准） */
|
||||
--btn-px-sm: 12px;
|
||||
--btn-px-lg: 16px;
|
||||
--tag-h: 22px; /* 中性标签、问题级别标签的高度（v0.2，以 d5 为准） */
|
||||
--row-h: 64px; /* 列表行最小高度：两行文字（名称 + 辅助灰小字）的项目行（v0.2） */
|
||||
--rail-w: 96px; /* 侧栏（v0.2）：单一状态，上图标下文字，不折叠 */
|
||||
--topbar-h: 56px; /* 顶栏：透明，滚动后半透明白 + 毛玻璃 */
|
||||
--sidebar-w: 216px; /* v0.1 宽侧栏，仅旧原型使用，重刷后删除 */
|
||||
--margin-note-w: 280px; /* 页边批注栏 */
|
||||
--content-max: 1200px;
|
||||
|
||||
/* 页面与卡片的节奏（v0.2，以 d5 为准）：全页一个间距 */
|
||||
--pad-page: 32px; /* 内容区左右内边距；1400 以下 24 */
|
||||
--gap-card: 16px; /* 卡片之间、主列与右栏之间 */
|
||||
--card-x: 20px; /* 卡片内左右边距：所有卡片统一 */
|
||||
--card-y: 16px; /* 卡片内上下边距（不分区的整块卡片） */
|
||||
--card-h-min: 56px; /* 卡片头（标题行）最小高度 */
|
||||
--aside-w: 296px; /* 工作台右侧信息栏；1400 以下 256 */
|
||||
|
||||
/* ---------- 动效 ---------- */
|
||||
--dur-fast: 120ms;
|
||||
--dur-base: 200ms;
|
||||
--ease: cubic-bezier(.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
@media (max-width: 1399px) {
|
||||
:root { --pad-page: 24px; --aside-w: 256px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root { --dur-fast: 0ms; --dur-base: 0ms; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user