jiang
ec23d44b02
Use the dedicated TJWATER_AGENT_URL and Responses stream protocol. Keep running turns active while users steer or queue follow-ups and edit pending delivery. Refresh the model catalog before generation and preserve approval mode selection. Integrate scoped investigation messaging/presentation, geographic place selection, current Agent composer styles and supporting workbench contracts. Validation: 77 focused Vitest checks, 21 browser cases, lint, typecheck and production build. Preserve direct Server/Agent routing and project authentication.
97 lines
9.0 KiB
Markdown
97 lines
9.0 KiB
Markdown
# 新增业务组件设计规范
|
||
|
||
本规范覆盖调查任务、运行控制、人工复核、外围样板、日期时间与共享表单组件。地图仍是主工作区，侧栏负责定位当前任务、显示状态、给出下一步操作和按需展开证据。
|
||
|
||
## 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` |
|
||
|
||
完整色板见 [宝石蓝配色](gem-blue-palette.svg)。
|
||
|
||
- `--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 对话区使用独立的低饱和雾蓝灰层次：工作面 `#E8ECF3`、阅读面 `#F8F9FC`、用户消息 `#DDE4F1`，主操作使用岩蓝 `#465F91`。岩蓝与工作台品牌色保持同一视觉语言，同时降低亮度和饱和度，避免输入区显得刺眼。这组颜色按阅读层级和对比度选择，不要求遵循固定的相似色公式，也不扩散到地图和顶部工作台。香槟色只用于确认、警告与 Agent 欢迎标记的小面积点缀，不作为普通面板的整块底色。成功、失败、地图业务图层和数据曲线保留各自语义色。
|
||
|
||
## 3. 排版规则
|
||
|
||
沿用 Noto Sans SC。侧栏标题使用 14px，业务区标题使用 13px，正文和表单标签使用 12px，辅助信息使用 11px。编号、修订号、时间和数量使用等宽数字。标签左对齐，数值列右对齐。
|
||
|
||
## 4. 组件规则
|
||
|
||
- `WorkbenchSection` 统一业务区标题、说明、状态和操作，不在内部再次堆叠同级标题卡。
|
||
- `WorkbenchNotice` 使用左侧状态线传达信息、警告与错误，避免大面积色块。
|
||
- `WorkbenchEmptyState` 只说明当前为空和下一步，不占用过高空间。
|
||
- 表单控件高度为 40px，按钮使用现有 8px 或 12px 圆角体系。
|
||
- 主操作每个业务区最多一个。其余操作使用 outline 或 ghost。
|
||
|
||
## 5. 布局原则
|
||
|
||
每个业务区按“定位、状态、下一步、证据”排列。侧栏内容使用 12px 至 14px 的紧凑间距。复杂原始对象、请求参数、历史和测试资源按需展开。移动端保持单列，不用横向滚动承载业务字段。
|
||
|
||
地图背景延伸到顶部导航背后，地图控件和分析正文仍预留 56px 导航高度。独立浮层使用完整亚克力材质，阅读面和控件内部的填色不额外叠加模糊；任务堆叠保留完整圆角和每层 7px 的错位。时间轴容器不足 640px 时省略统计摘要，优先保证日期、图例和操作按钮互不重叠。
|
||
|
||
## 6. 层级与深度
|
||
|
||
保持既有亚克力半透明材质，在透底、模糊、噪点和边缘高光上调整色调。桌面 Agent dock 使用雾蓝灰实体底板，导航、历史和底部操作区保留同色调的局部亚克力；正文和文字输入区使用冷白实体阅读面，岩蓝只用于主操作、焦点和交互反馈。文字输入与权限、模型、语音和发送操作栏分开承担材质，聚焦边框仅围绕文字输入区。对话内容直接进入消息流，不在顶部重复展示分析摘要。每个功能区只保留一层模糊，历史展开内容与导航共用材质层。
|
||
|
||
桌面普通空会话使用浅雾蓝灰工作面和冷白文字输入区，居中输入组件距面板两侧至少 12px，最大宽度 600px，文字输入区初始高度 160px、字号 16px；多行输入的高度按可用视口限制，保持操作栏和推荐问题可见。模型根据当前用户与项目的近期任务、告警、分析成果和普通会话生成最多三条问题，在输入组件下方独立显示来源与时间，点击直接发送；首次开始对话时，同一个表单以 280ms 位移和尺寸过渡回到底部，随后使用 48px 的紧凑文字区和 40px 操作控件，减少动态效果偏好下则立即切换。移动端保留紧凑输入布局，生成的问题仍使用独立悬浮胶囊。推荐异步加载，不阻塞输入；打开空会话、切换模型或新建空会话时触发，普通重渲染和宽度变化不重新生成，模型失败时不以固定问题冒充生成结果。
|
||
|
||
| 材质 | 浅色底图 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. 交互提示
|
||
|
||
任务面板先显示任务状态和下一步，再提供计划、目标、运行与证据。运行暂停时突出检查点校验或恢复中的一个主操作。外围面板先显示连接状态、历史回放和待提交来源，测试资源与原始请求回执默认按需展开。
|