mesalogo
451b30d434
8.4 KiB
应用导航与系统工具入口 UI 设计
文档信息
| 项目 | 内容 |
|---|---|
| 状态 | 设计中 |
| 版本 | 0.2 |
| 日期 | 2026-09-08 |
| 关联 PRD | 应用导航与系统工具入口 PRD |
| 功能逻辑 | 功能逻辑设计 |
| 全局规范 | GoodBuddy 统一界面设计系统 |
本文定义入口、设置和轻量资源监控界面。文件、终端和浏览器的内容布局继续遵守助手工作栏 文档。
1. 侧栏信息架构
品牌
项目选择
新对话
搜索
当前对话
魔法笔记 3
知识库
智能心跳 1
运行记录
最近对话
...
────────────────────────
[文件] [终端] [浏览器] [资源] [设置]
“当前对话”和“运行记录”属于固定系统入口。三个内置应用位于二者之间。侧栏底部不再显示
“本地工作区”和 platform · arch；排障信息移至关于或诊断页面。
2. 底部系统工具栏
底部使用连续平整表面和顶部分隔线，不做成账户卡片或嵌套卡片。按钮顺序固定：
| 位置 | 图标 | 可见工具提示 | 点击结果 |
|---|---|---|---|
| 1 | FolderOpen |
文件 | 打开或聚焦工作区面板 |
| 2 | SquareTerminal |
终端 | 打开或聚焦当前执行空间终端 |
| 3 | Globe |
浏览器 | 打开或聚焦受控浏览器面板 |
| 4 | Activity |
资源监控 | 打开或聚焦本机资源监控面板 |
| 末位 | Settings |
设置 | 打开设置页面 |
图标使用项目现有 Lucide 库。每个按钮采用统一的 34px × 34px 点击区域，内部图标建议
16px。工具栏使用 8px 内边距和 4px 间隔；设置按钮通过自动空白靠右，不添加第二条
视觉分隔线。
2.1 状态
- 默认：透明背景，图标使用次级文字色。
- 悬停：使用弱表面色，不能强于当前选中状态。
- 选中：使用强调选中背景，并提高图标对比度。
- 键盘焦点：显示统一焦点环，不能被侧栏边缘裁切。
- 处理中：创建或激活请求未完成时暂时禁用对应按钮，保留尺寸并提供进行中名称。
- 徽标：只用于等待处理、错误或活动状态，不显示无意义的常驻绿色圆点。
选中状态表达“对应工作栏面板正在显示”，不表达功能已安装或权限已授予。
3. 主导航应用区
应用入口沿用现有 nav-item 行，不使用应用卡片。图标、名称和徽标保持单行：
[图标] 魔法笔记 3
[图标] 知识库
[图标] 智能心跳 1
隐藏某个应用后，其余应用向上补位。运行记录始终位于最后一个可见应用之后，不因应用显隐 改变样式或归类为工具。
设置页打开期间，主侧栏显示最后一次成功保存的导航状态。Switch 更新成功后导航立即变化， 失败时保持原导航。
4. 应用与工具设置
设置中心新增“应用与工具”分类，采用 standard PageShell：
应用与工具
管理主导航中的应用。系统工具由 GoodBuddy 提供并固定在侧栏底部。
应用
魔法笔记 笔记、待办和评论 [显示在侧边栏 开]
知识库 管理和检索知识 [显示在侧边栏 开]
智能心跳 查看计划、建议和运行历史 [显示在侧边栏 开]
系统工具
文件 打开当前工作区 内置
终端 进入当前执行空间 内置
浏览器 打开 GoodBuddy 受控浏览器 内置
资源监控 查看本机 CPU、内存和磁盘 IO 内置
系统入口
当前对话、运行记录和设置位置固定，不参与上述配置。
应用显隐使用共享 Switch，标签必须是“显示在侧边栏”，不能缩写为“启用”。切换时立即保存， 请求期间禁用三个应用显隐 Switch；失败后恢复原值，并在对应设置行显示可重试错误。系统工具 使用紧凑只读列表，不渲染禁用的卸载、停用或固定按钮。
功能已停用时，对应应用行显示“功能已停用”和设置入口，保留显隐偏好但暂时禁用 Switch。
若某应用自身支持业务启停，应在该应用原有设置中保留“启用功能”开关，并用说明区分：
- “显示在侧边栏”只控制入口。
- “启用功能”控制该功能是否运行。
5. 助手工作栏反馈
点击系统工具后，右侧工作栏按现有布局回流打开。主内容页面保持不变，侧栏不渲染工具内容。
- 文件：激活“工作区”Tab，焦点进入目录区域或错误修复入口。
- 终端：激活匹配终端，焦点进入终端输入区；新建期间保留按钮宽度和进度状态。
- 浏览器：激活“浏览器”Tab，焦点进入工具栏；没有会话时进入空状态主操作。
- 资源监控：激活“资源监控”Tab，焦点进入指标摘要；首个样本加载后开始绘制历史。
后台事件可以更新徽标，不能自动展开工作栏或切换当前 Tab。由用户点击快捷按钮触发的打开 属于显式操作，可以展开工作栏并切换 Tab。
5.1 资源监控面板
资源监控使用紧凑单列，不使用指标卡片墙：
资源监控 本机
CPU 18%
[最近 5 分钟折线图]
内存 9.6 / 32 GB
[使用量进度条]
磁盘 IO 读 12 MB/s · 写 3 MB/s
GoodBuddy
CPU 4% · 内存 620 MB · 桌面进程 7
更新于 14:32:08
- CPU 折线纵轴固定为
0%至100%，不能根据当前低负载动态放大波动。 - 内存同时显示使用量、总量和百分比；进度条不代替文字数值。
- 磁盘 IO 使用每秒读写字节并按统一单位格式化，不显示累计设备字节数。
- GoodBuddy 摘要只显示聚合值，不列 PID、命令行或环境变量。
- 首次加载或停止后恢复时，CPU 和磁盘 IO 显示“正在建立采样基线”，不先渲染
0%；内存 等瞬时指标可以立即显示。 - 部分可用时只在对应指标行显示“不可用”和简短原因；全部失败时显示重试入口。
- 图表不使用动效平移；
prefers-reduced-motion下行为不变。 - 面板失去活动状态、工作栏收起或窗口隐藏、最小化时停止更新；返回后重新建立区间指标基线， 不填补离开期间的历史。
6. 文案
固定使用以下名称：
| 对象 | 文案 |
|---|---|
| 设置分类 | 应用与工具 |
| 文件系统工具 | 文件 |
| 终端系统工具 | 终端 |
| 浏览器系统工具 | 浏览器 |
| 浏览器说明 | GoodBuddy 受控浏览器 |
| 资源系统工具 | 资源监控 |
| 资源范围 | 本机 |
| 指标缺失 | 不可用 |
| 应用显隐开关 | 显示在侧边栏 |
| 内置来源 | 内置 |
不再使用“本地工作区”作为侧栏底部身份名称。项目和默认工作区的路径继续由项目选择器、页面 范围或工作区面板显示。
7. 键盘和无障碍
- 底部按钮均为独立
button，不能嵌套在整行设置按钮中。 - Tab 顺序为文件、终端、浏览器、资源监控、设置。
- 图标按钮通过
aria-label提供名称，工具提示不能作为唯一可访问名称。 - 工作栏打开后按现有焦点策略聚焦目标面板；用户通过固定工作栏开关关闭时，焦点返回该开关。
- 选中按钮使用
aria-pressed或等价的可访问状态，不能只依靠背景色。 - 徽标的数量或状态合并进按钮可访问名称，例如“终端，1 个等待处理”。
- 应用显隐 Switch 支持 Space 切换，保存失败后恢复原值并保留焦点。
8. 响应式
- 侧栏宽度
220px至420px时，底部按钮尺寸不随宽度缩放。 - 窄窗口继续使用现有侧栏抽屉；工具栏不转为多行。
- 空间不足时缩小设置按钮前的弹性空白，不隐藏四个系统工具和设置。
- 工具提示不得超出窗口；靠近底边时显示在按钮上方。
- 粗指针设备不依赖悬停，按钮的可访问名称和选中反馈保持有效。
9. 未来插件入口
插件市场交付后另行定义插件区域、固定数量、溢出和权限界面。系统入口与四个系统工具的位置 保持保留，不向插件开放。