Files

T

jiang 617ba4d87c feat(ui): refine gem-blue acrylic palette and focus borders

Derive the gem-blue palette with OKLCH tonal and complementary-color
rules while preserving acrylic opacity, blur and surface hierarchy.

Darker focus tokens exposed stacked field rings, fallback outlines and
persistent basemap selection rings. Keep fallback focus styles in the
base layer and use one themed field boundary or inset card stroke.
Preserve keyboard focus, invalid states and native input semantics.

Add browser regression coverage for pointer and keyboard focus, all
basemap presentations, narrow layouts and rendered contrast.

Validation in an isolated checkout: pnpm lint, pnpm typecheck,
pnpm test (393 tests), focused browser suites and pnpm build.

2026-10-09 10:57:06 +08:00

6.9 KiB

Raw Blame History

新增业务组件设计规范

本规范覆盖调查任务、运行控制、人工复核、外围样板、日期时间与共享表单组件。地图仍是主工作区，侧栏负责定位当前任务、显示状态、给出下一步操作和按需展开证据。

1. 视觉主题

方向为宝石蓝操作、银灰亚克力、少量香槟重点的浅色专业调度台。界面保持高信息密度，使用稳定的标题、状态、操作、证据顺序。沿用既有字体、布局、圆角和 acrylic 材质，以透底、色调和轻微背景色差区分导航、面板、分组与阅读区。

2. 色彩角色

采用同色相色阶与低彩度互补色规则。宝石蓝 #4263C7 转换为 OKLCH 后约为 L=0.529317, C=0.160186, h=267.059148°；中性材质和文字保持该色相，香槟辅助色使用 (h + 180°) mod 360°。色阶先计算后转换为 sRGB HEX，均处于 sRGB 色域。透明度不参与色板生成。

角色	L	C	h	HEX
宝石蓝主色	0.529317	0.160186	267.06°	`#4263C7`
银霜材质	0.935	0.012	267.06°	`#E6E9F2`
冷瓷阅读面	0.975	0.005	267.06°	`#F5F7FA`
香槟辅助色	0.820	0.065	87.06°	`#D6C294`
深墨文字	0.280	0.025	267.06°	`#232935`

完整色板见宝石蓝配色。

--surface-navigation：宝石蓝 8% 与银霜在 OKLab 空间混合的导航色调。浅色混色使用 OKLab，避免低彩度颜色在色相插值时偏色。
--surface-panel：银霜色调；--surface-well 为其半透明次级面。
--surface-subtle：L=0.950, C=0.010, h=267.06°，得到 #EBEEF5，供桌面 dock、分组和普通控件使用。
--surface-reading：冷瓷正文、表单和报告阅读面，保持较高遮蔽度。
--action-selection-soft：L=0.920, C=0.035, h=267.06°，得到 #DAE5FD，文字使用深宝石蓝。
--action-blue：主操作 #4263C7；hover 将 L 降低 0.055、C 乘 0.95，得到 #3653B0；pressed 将 L 降低 0.105、C 乘 0.90，得到 #2B469C。
--surface-border / --surface-divider：保持同色相，分别使用 (L=0.815, C=0.015) 和 (L=0.885, C=0.012)，得到银灰边界 #BEC2CD / #D5D9E1。
--action-focus-ring：深宝石蓝焦点环；--ink-muted：L=0.450, C=0.030, h=267.06°，得到辅助文字 #4E5566。
cyan-700：外围样板入口及其来源标识。
emerald：已完成、已通过。
--status-warning-soft：香槟色 25% 与冷瓷混合的确认、暂停和结果未知提示底色；同互补色相的文字使用 (L=0.430, C=0.070)，得到 #604D1D；状态标记使用 (L=0.600, C=0.090)，得到 #977D3C。
rose：失败、冲突或破坏性操作。

宝石蓝用于操作和选中状态，银灰用于材质层级。香槟色只用于确认、警告与 Agent 欢迎标记的小面积点缀，不作为普通面板的整块底色。成功、失败、地图业务图层和数据曲线保留各自语义色。

3. 排版规则

沿用 Noto Sans SC。侧栏标题使用 14px，业务区标题使用 13px，正文和表单标签使用 12px，辅助信息使用 11px。编号、修订号、时间和数量使用等宽数字。标签左对齐，数值列右对齐。

4. 组件规则

WorkbenchSection 统一业务区标题、说明、状态和操作，不在内部再次堆叠同级标题卡。
WorkbenchNotice 使用左侧状态线传达信息、警告与错误，避免大面积色块。
WorkbenchEmptyState 只说明当前为空和下一步，不占用过高空间。
表单控件高度为 40px，按钮使用现有 8px 或 12px 圆角体系。
主操作每个业务区最多一个。其余操作使用 outline 或 ghost。

5. 布局原则

每个业务区按“定位、状态、下一步、证据”排列。侧栏内容使用 12px 至 14px 的紧凑间距。复杂原始对象、请求参数、历史和测试资源按需展开。移动端保持单列，不用横向滚动承载业务字段。

6. 层级与深度

保持既有亚克力半透明材质，在透底、模糊、噪点和边缘高光上调整色调。桌面 Agent dock 延续既有实底布局，使用银灰色调。

材质	浅色底图 alpha	影像底图 alpha
导航	0.64	0.80
浮动业务面板	0.56	0.72
地图控件	0.74	0.86
Agent 移动抽屉和历史	0.82	0.88
Agent 浮动输入区和运行摘要	0.86	0.90
正文阅读面	0.96	0.985

分组标题及次级数据使用银灰色差，不叠加投影。模糊仍为面板 24px、控件及 Agent 浮层 18px。地图和影像中的底色应能透过外层材质；报告正文保留更高遮蔽度，保证阅读。

7. 使用约束

必须优先显示当前状态和可执行的下一步。
调查计划由 Agent 动态发布。默认呈现本次选中的路线和当前待办，未选路线及旧修订按需展开；条件、并行和审核状态只读取明确的结构化字段。
必须明确 synthetic、只读、结果未知和未配置状态。
必须保留完整请求号、对象修订和证据来源的可读入口。
不用颜色代替文字状态。
不在一个业务区内放置多个同等醒目的主按钮。
不用大块空卡显示一句空状态。
不引入第二套字体、主题或 CSS 方案。

8. 响应式与无障碍

支持 1280px 桌面和 320px、375px 窄屏。所有交互控件保留可见焦点，触控目标至少 40px。弹层受视口高度和宽度限制。hover 仅在支持 hover 的设备启用，按压使用轻微缩放，并尊重 reduced motion。

表单字段使用共享 .form-field 规则：聚焦时只改变原有 1px 边框的颜色，不叠加外环或浏览器默认轮廓。组合输入由最外层字段容器承担焦点边界，内部输入保持无边框；无边框的亚克力输入区使用 1px 内描边，保持材质与布局不变。无效字段保留错误色，按钮与选择控件保留单独的键盘焦点提示。全局焦点样式仅作为基础层兜底，不能覆盖组件自身规则。

底图选择卡片的选中态使用 1px 主题边框和勾选标记，不附加常驻外环。键盘聚焦使用共享的 1px 内描边；鼠标选中、聚焦与按压均保持卡片尺寸及半透明表面不变。图层面板、独立底图面板与浮动底图控件使用同一规则。

普通文字与实际背景对比度至少 4.5:1，焦点和必要的非文字状态标记至少 3:1。透明区域按合成背景计算。不支持模糊或降低透明度时保留不透明的银霜、冷瓷层级；强制颜色模式使用系统颜色。主题由现有 Tailwind 与 CSS 变量统一提供，不新增切换入口。

9. 交互提示

任务面板先显示任务状态和下一步，再提供计划、目标、运行与证据。运行暂停时突出检查点校验或恢复中的一个主操作。外围面板先显示连接状态、历史回放和待提交来源，测试资源与原始请求回执默认按需展开。

6.9 KiB Raw Blame History Unescape Escape