10 KiB
name, colors, rounded, spacing, components
| name | colors | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ARTEMIS 控制台 |
|
|
|
|
ARTEMIS 设计与交互约定
Overview
ARTEMIS 面向使用自然语言执行、探索和复跑测试的人。当前产品包含 Flash、Pro、探索三种入口，按需调用安卓设备和电脑插件，提供批次、精选任务、历史、报告及证据。用户应能看懂当前在做什么、何时需要回答、哪些结果已有证据。
本文记录主程序的职责边界及 apps/showcase_ui 的现有视觉与交互规则，不提出新的主题改版。远程 SDK 的协议边界见局部设计；独立插件仓库维护适配器设计和构建规则。阶段性进度见开发快照，发行状态见2.0.0 说明。
System architecture
| 层 | 职责与源码入口 |
|---|---|
| 网页、MCP、远程 SDK | 请求建模、交互与结果读取。apps/showcase_ui、mcp_server、packages/artemis-client 共同使用后台服务；MCP 和薄 SDK 不另启完整后台 |
| HTTP 与业务服务 | apps/admin_console 管理配置、统一队列、批次、收藏、历史、人工复验和导出；TaskQueueService 及现有资源锁负责执行准入与互斥 |
| 任务与模型 | artemis/agents、artemis/runtime 执行 Flash/Pro；artemis/exploration 管理交流、预算、示范与用例版本；artemis/llm、artemis/services/llm.py 统一 Responses 请求 |
| 插件与证据 | artemis/plugins 管理安装、会话、版本固定、来源、截图、录像和附件；插件执行工具动作，宿主管理任务生命周期和最终验收 |
| 配置与交付 | artemis/config、两份 artemis.jsonc 和环境配置提供默认值；scripts 负责启动、镜像、独立升级和源码打包 |
请求重试、业务执行与最终验收分别处理。提交使用稳定标识；创建批次或探索草稿不自动执行，查询不产生设备动作。执行准入和恢复遵守现有资源锁，任务固定所用插件版本，不能通过另建队列绕开互斥。
最终验收有独立总预算，按请求超时、重试和剩余任务时间协调，保留取证结果；完整有效的结构化结论才更新正式裁定。completed、工具成功、探索通过、用例提炼和复跑通过各自表达自己的状态。
示范来源保存在元数据中，贯穿分析、提问、规划、执行、验收和用例生成。补充网址不会隐式把电脑示范改到安卓；用户明确改端或提出跨端步骤时按其要求执行。证据必须对应真实来源、窗口、采集时间与操作。
录像使用用户选择的范围。人工示范的窗口模式跟随前台窗口，仅保留一路，无有效窗口时保留缺口；普通录屏在只读验收前停止。恢复操作再追加片段，时间映射以实际录像为准，不借用另一来源或时间的画面。
收藏保存独立模板与执行配置，用例复跑固定版本；删除原任务不破坏已保存模板。历史与导出的有效结论合并人工复验，不能用新裁定改写旧证据。
普通任务新安装默认 gpt-6-luna / high，探索单独使用 gpt-6.1-sol / high，保留已有配置。上下文参照上限 300k、默认历史压缩预算 80k，均不表示整条任务累计 token 限额。优化稳定前缀时保留关键文件回执、路径、校验和来源；费用收益依实际网关用量及计价判断。
Colors
整体使用浅灰画布、白色内容面和深色正文。首页主要操作使用蓝色，探索发送及相关主操作保留现有靛色；绿色、琥珀色、红色用于结果与需要处理的状态。新控件复用所在区域的语义色。
| 用途 | 值与来源 |
|---|---|
| 画布 / 正文 | #f8f9fa / #1e293b，来自全局样式 |
| 首页操作 / 悬停 | #1a73e8 / #1557b0，来自首页样式 |
| 探索操作 / 浅色状态面 | #4f46e5 / #eef2ff，来自探索面板 |
| 正文层级 / 边框 | 强调 #0f172a、次级 #475569、辅助 #64748b；常规边框 #e2e8f0 |
| 成功、等待、错误 | 深色状态文字配对应浅色面；同时给出文字、图标或说明，结论不只依靠颜色 |
加载、空状态、断开、未验证与失败使用明确文案。执行完成可以有完成标识，测试裁定仍需独立展示；不能让绿色完成态替代测试通过结论。
Typography
沿用全局字体栈：Google Sans、Google Sans Text、Inter、系统无衬线字体；中文使用系统可用字形。代码、路径及请求诊断使用现有等宽样式，保留换行与复制能力。
模型控件正文为 13px，探索输入正文为 14px，用例标题为 18px；辅助信息依现有组件使用 11–12px。保留字号、字重、留白形成的层次，不通过大段加粗堆叠状态。Markdown、表格、长链接和中文长标题应换行，不撑破容器。
图标沿用 Material Symbols Outlined，常规全局尺寸 20px；组件局部按原有尺寸调整。图标与相邻文字垂直居中，独立图标按钮提供可访问名称。
Layout
- 首页负责创建任务与访问精选模板；工作区主区域展示当前任务的交流、执行步骤和结果，底部输入框始终服务当前任务。
- 编辑、模型设置和复跑参数按需展开，默认保持任务时间线可读。精选卡片在收起状态下等高，长标题、不同状态和展开内容不会遮挡操作入口。
- 通常以 4、6、8、12、16、24px 组织内部间距；沿用组件现有网格和断点。子容器允许收缩，长内容使用
min-width: 0及合适换行。 - 探索面板在 600px 以下收紧外边距并允许操作换行；模型选择控件宽度跟随容器。窄屏仍可辨认状态、选择来源和发送指导。
- 列表后台刷新保留滚动、选择和折叠状态；首次加载与静默更新分开，避免周期性加载提示挤动内容。实时连接复用现有页面可见性管理。
Elevation
卡片使用细边框和克制的阴影区分区域。首页现有玻璃效果、渐变和按钮悬停保留在原有区域，正文、报告、表单和选项保持清晰背景及文字对比。
探索输入区沿用 0 6px 24px #0f172a08 的阴影；焦点反馈沿用所在控件的轮廓和浅色描边。全局 CDK overlay 层级为 1200，新增弹层先使用既有 overlay 机制，不任意叠加更大的层级。
Shapes
模型输入与选择框圆角 10px；紧凑控件常用 8px，内容卡片按组件使用 12–16px，探索输入区为 22px。保留现有徽标、标签与胶囊形控件的局部形状；这些值不要求把全部历史控件改成同一圆角。
Components
| 组件或状态 | 必须维持的交互与尺寸 | 实现依据 |
|---|---|---|
| 模型选择 | 预设选择加自定义输入；主模型、兜底和精选任务复用同一组件。最小高度 40px、内边距 10px 12px、圆角 10px，保留焦点与禁用态 | model-selector |
| 人工示范控件 | 来源标签与控件水平对齐，选择框及开始按钮均为 36px 高、垂直居中；窄屏可换行。准备、录制、分析分别显示 | exploration-panel |
| 探索建议 | 推荐内容为用户口吻的可编辑回复；点击只填草稿，用户发送后才继续任务 | 探索组件 |
| 历史标题与星标 | 星标只占标题，第二行状态与编号正常左对齐；状态徽标沿用 20px 高及统一内边距 | task-history |
| 验收状态 | 展示准备证据、核对、生成与校验等阶段及可用的耗时、预算、重试诊断；未完成的流式文字不变为正式通过标签 | agent-stream |
| 截图、录像与文件 | 显示真实来源和缺口；按时间定位并保留跳转前的播放/暂停状态，文件成功以真实保存回执为准 | 工作区说明 |
| 保存和错误反馈 | 配置加载、保存、空值、失败与密钥已配置状态有明确提示；空密钥保留已有值，连接测试与保存分开 | 模型配置 |
这些规则对应已接受的现有行为。改动后结合实际层叠样式、渲染尺寸和相关状态检查，不能只核对一处声明。
Do's and Don'ts
- 复用现有组件、API 类型、中文文案和状态语义。新增状态先说明它与执行、验收或人工操作的关系。
- 保持实际来源与证据一致，缺失时说明原因；不使用手机画面替代电脑操作，也不把工具成功当作业务通过。
- 保留可见焦点、禁用反馈和减少动画偏好；录制红点表示实际录制，等待或执行中使用各自文案。
- 源码已更新而页面仍旧时，先核对服务目录、构建与缓存；不通过反复增加样式覆盖掩盖旧构建问题。
- 视觉变化验证代表性宽度、长标题、加载、等待回答、错误与展开状态；文档格式检查不等于渲染验证。开发检查按前端指南执行。