# 新增业务组件设计规范 本规范覆盖调查任务、运行控制、人工复核、外围样板、日期时间与共享表单组件。地图仍是主工作区,侧栏负责定位当前任务、显示状态、给出下一步操作和按需展开证据。 ## 1. 视觉主题 方向为浅色专业调度台。界面保持高信息密度,但使用稳定的标题、状态、操作、证据顺序,减少连续嵌套的彩色卡片。视觉参考取 Linear 的状态聚焦、Grafana 的数据对齐,以及 ArcGIS Experience Builder 的地图优先侧栏。 ## 2. 色彩角色 - `--surface-reading`:主要阅读面。 - `slate-50`:同一业务区内的次级数据面。 - `--action-blue`:主操作、焦点和调查任务状态。 - `cyan-700`:外围样板入口及其来源标识。 - `emerald`:已完成、已通过。 - `amber`:需要确认、暂停、结果未知。 - `rose`:失败、冲突或破坏性操作。 彩色区域只表达语义。普通分组使用白色阅读面、灰色边界和轻微背景层级。 ## 3. 排版规则 沿用 Noto Sans SC。侧栏标题使用 14px,业务区标题使用 13px,正文和表单标签使用 12px,辅助信息使用 11px。编号、修订号、时间和数量使用等宽数字。标签左对齐,数值列右对齐。 ## 4. 组件规则 - `WorkbenchSection` 统一业务区标题、说明、状态和操作,不在内部再次堆叠同级标题卡。 - `WorkbenchNotice` 使用左侧状态线传达信息、警告与错误,避免大面积色块。 - `WorkbenchEmptyState` 只说明当前为空和下一步,不占用过高空间。 - 表单控件高度为 40px,按钮使用现有 8px 或 12px 圆角体系。 - 主操作每个业务区最多一个。其余操作使用 outline 或 ghost。 ## 5. 布局原则 每个业务区按“定位、状态、下一步、证据”排列。侧栏内容使用 12px 至 14px 的紧凑间距。复杂原始对象、请求参数、历史和测试资源按需展开。移动端保持单列,不用横向滚动承载业务字段。 ## 6. 层级与深度 侧栏使用既有 acrylic 容器。一级业务区使用不透明阅读面和 1px 边界。区内次级数据使用背景色差,不叠加投影。弹层可使用较强投影,普通卡片只保留极轻的 1px 投影。 ## 7. 使用约束 - 必须优先显示当前状态和可执行的下一步。 - 调查计划由 Agent 动态发布。默认呈现本次选中的路线和当前待办,未选路线及旧修订按需展开;条件、并行和审核状态只读取明确的结构化字段。 - 必须明确 synthetic、只读、结果未知和未配置状态。 - 必须保留完整请求号、对象修订和证据来源的可读入口。 - 不用颜色代替文字状态。 - 不在一个业务区内放置多个同等醒目的主按钮。 - 不用大块空卡显示一句空状态。 - 不引入第二套字体、主题或 CSS 方案。 ## 8. 响应式与无障碍 支持 1280px 桌面和 320px、375px 窄屏。所有交互控件保留可见焦点,触控目标至少 40px。弹层受视口高度和宽度限制。hover 仅在支持 hover 的设备启用,按压使用轻微缩放,并尊重 reduced motion。 ## 9. 交互提示 任务面板先显示任务状态和下一步,再提供计划、目标、运行与证据。运行暂停时突出检查点校验或恢复中的一个主操作。外围面板先显示连接状态、历史回放和待提交来源,测试资源与原始请求回执默认按需展开。