59 lines
3.4 KiB
Markdown
59 lines
3.4 KiB
Markdown
# 新增业务组件设计规范
|
|
|
|
本规范覆盖调查任务、运行控制、人工复核、外围样板、日期时间与共享表单组件。地图仍是主工作区，侧栏负责定位当前任务、显示状态、给出下一步操作和按需展开证据。
|
|
|
|
## 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. 交互提示
|
|
|
|
任务面板先显示任务状态和下一步，再提供计划、目标、运行与证据。运行暂停时突出检查点校验或恢复中的一个主操作。外围面板先显示连接状态、历史回放和待提交来源，测试资源与原始请求回执默认按需展开。
|