goodbuddy/docs/features/application-tool-navigation/ui-design.md

应用导航与系统工具入口 UI 设计

文档信息

项目	内容
状态	设计中
版本	0.2
日期	2026-09-08
关联 PRD	应用导航与系统工具入口 PRD
功能逻辑	功能逻辑设计
全局规范	GoodBuddy 统一界面设计系统

本文定义入口、设置和轻量资源监控界面。文件、终端和浏览器的内容布局继续遵守助手工作栏 文档。

1. 侧栏信息架构

品牌
项目选择
项目活动汇总（常驻，空闲显示“暂无活动”）
新对话
搜索

当前对话
魔法笔记               3
知识库
智能心跳               1
运行记录

最近对话
...

────────────────────────
[文件] [终端] [浏览器] [资源]      [设置]

“当前对话”和“运行记录”属于固定系统入口。三个内置应用位于二者之间。侧栏底部不再显示 “本地工作区”和 platform · arch；排障信息移至关于或诊断页面。

2. 底部系统工具栏

底部使用连续平整表面和顶部分隔线，不做成账户卡片或嵌套卡片。按钮顺序固定：

位置	图标	可见工具提示	点击结果
1	FolderOpen	文件	聚焦不可关闭的工作区面板
2	SquareTerminal	终端	打开或聚焦当前执行空间终端
3	Globe	浏览器	聚焦当前 Conversation 的匹配浏览器实例
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，焦点进入目录区域或错误修复入口。
• 终端：激活匹配终端，焦点进入终端输入区；新建期间保留按钮宽度和进度状态。
• 浏览器：激活绑定当前 Conversation 的最近使用“浏览器”Tab；没有匹配实例时创建一个， 没有 Conversation 时按产品规则复用最近实例或进入待绑定空状态。
• 资源监控：激活“资源监控”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. 未来插件入口

插件市场交付后另行定义插件区域、固定数量、溢出和权限界面。系统入口与四个系统工具的位置 保持保留，不向插件开放。

10. 项目活动汇总

对应 FR-14，状态与计数遵守 活动逻辑。

• 全局汇总按钮常驻项目选择器下方，紧凑显示待处理与运行中数量，空闲显示“暂无活动”， 右侧显示展开箭头，与下方新建会话保留 8px 间距。可访问名称明确数量属于“全项目活动”。
• 项目菜单在项目行显示同口径数量，保留“本地项目 / 远程项目 / 远程通道”分组和 SSH Host 层级，不因活动状态重排项目。数量为零时不显示标记，连接状态仍独立显示。 项目名独占一行，状态数量排列在名称下方，避免窄侧栏中数量挤占名称宽度。
• 点击汇总在按钮下方打开项目菜单，只列有活动会话的项目，每项显示项目名和同口径计数。 桌面鼠标悬停或点击项目展开右侧会话菜单，右侧空间不足且左侧可容纳时向左展开。两个面板 相接，指针离开项目行进入会话层时不收起。展开项目不切换当前会话。
• 会话层顶部显示项目名，每行显示完整可换行的会话标题与明确状态文字，待处理会话排在 运行中会话之前。项目行保留子菜单箭头，会话行不显示箭头。不展开 Task、Job 或 Run 列表。
• 点击会话先关闭菜单并恢复入口焦点，再请求进入该条会话；允许离开当前页面后， 选择所属项目、清除搜索和该会话未读标记、清除任务选择与会话操作菜单，窄窗口同时关闭侧栏。 设置页沿用未保存修改的离开检查，取消离开时保留原页面。
• 菜单挂载到 body，使用 menu、menuitem、aria-haspopup、aria-expanded 与控制关系， 不隔离背景、不增加遮罩。原生浏览器相交遮挡沿用共享机制。
• 打开后焦点进入首个项目；上下方向键循环选择当前层项目或会话，Home、End 到首尾， Enter、Space 激活，右方向键进入会话层。左方向键或 Escape 返回项目层并恢复对应项目 焦点；顶层 Escape 关闭并恢复汇总焦点，不继续关闭窄侧栏。Tab 关闭菜单后继续正常焦点 顺序；点击外部、焦点离开、再次点击入口或隐藏侧栏也关闭菜单。
• 单面板宽度为 264px，窗口小于 620px 时就地进入会话层并显示“返回项目列表”， 触控无需悬停。浮层距窗口边缘至少 16px，每层最大高度为 480px，短窗口进一步限制 高度并独立滚动。活动全部结束时，已打开菜单显示“暂无运行中或待处理会话。”。