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

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

文档信息

项目	内容
状态	应用中心与本机推理监控已接入源码，整体验收待完成
版本	0.4
日期	2026-09-17
关联 PRD	应用导航与系统工具入口 PRD
功能逻辑	功能逻辑设计
全局规范	GoodBuddy 统一界面设计系统

本文定义已接入的应用中心、共同设置和本机推理监控界面，以及待实现的右侧资源监控界面。 行为以功能逻辑为准，需求保留 FR-1 至 FR-16 与既有 US 编号。 根 UI 规范已同步应用中心与工具入口规则；共享控件、主题、设置 Modal 与工作栏布局遵守根规范。

1. 侧栏信息架构

品牌
项目选择
项目活动汇总（仅有活动时显示）
新对话
搜索

当前对话
应用（按保存顺序；知识库、智能心跳始终显示，可选应用仅显示启用且常驻项）
运行记录

最近对话
...

────────────────────────
[应用中心]                       [设置]

“当前对话”和“运行记录”属于固定系统入口，常驻应用位于二者之间。首期应用清单为魔法笔记、 知识库、智能心跳及本轮追加的本机推理监控，应用中心与设置始终可见。侧栏底部不再显示“本地工作区”和 platform · arch； 排障信息移至关于或诊断页面。左侧不再提供文件、终端、浏览器、资源监控的重复入口。

2. 底部应用中心入口

底部使用连续平整表面和顶部分隔线，应用中心在前，固定设置靠右，二者为独立按钮：

位置	图标	可见工具提示	点击结果
1	Grid2X2	应用中心	向上展开已启用应用菜单，底部“管理应用”进入管理 Modal
末位	Settings	设置	在当前工作区上打开设置 Modal

图标使用项目现有 Lucide 库。应用中心保留文字，设置图标采用统一的 34px × 34px 点击区域。 底部使用共享间距和焦点样式，设置通过弹性空白靠右；不得把整个容器做成设置按钮。

2.1 状态

• 默认：透明背景，图标使用次级文字色。
• 悬停：使用弱表面色，不能强于当前选中状态。
• 展开：应用中心按钮显示展开反馈，不能当作当前应用的选中状态。
• 键盘焦点：显示统一焦点环，不能被侧栏边缘裁切。
• 加载：读取应用配置时保留入口，中心内显示加载状态；失败提供重试，不用默认值冒充已保存配置。

应用中心入口不承载工具运行徽标。全部可选应用关闭时菜单仍显示知识库、智能心跳及“管理应用”，可进入 Modal 重新开启可选应用。

3. 主导航应用区

应用入口沿用现有 nav-item 行，不使用应用卡片。图标、名称和徽标保持单行：

[图标] 知识库
[图标] 智能心跳                         1
[图标] 魔法笔记                         3
[图标] 本机推理监控

取消常驻或关闭可选应用后不留下空白。知识库、智能心跳始终启用并显示，位置遵守共享应用顺序。运行记录始终位于应用区之后。 四个应用均在管理卡片上通过拖动及“上移”“下移”按钮排序；首尾无目标时禁用对应按钮。两种方式提交完整应用顺序，保存成功后更新，重启保留。当前对话、运行记录和底部系统入口不参与排序。

取消常驻不关闭当前页面或本机推理监控 Modal。重新常驻按已保存顺序恢复，关闭应用保留常驻与顺序偏好。 主侧栏始终读取最后确认配置，不展示尚未保存成功的排序或开关目标值。

4. 应用中心与共同设置

底部点击打开轻量菜单，锚定按钮向上展开，无模态遮罩、背景隔离或焦点循环。菜单按共享保存顺序列出已启用应用，不按打开历史或常驻状态过滤。点击应用行关闭菜单，本机推理监控打开独立 Modal，知识库、智能心跳和魔法笔记在主内容区打开页面。分隔线下的“管理应用”关闭菜单并打开既有管理 Modal。

菜单通过共享 AnchoredMenu 挂载到 body，宽度最多 280px，距窗口边缘至少 16px，与按钮上缘间隔 8px；短窗口限制高度并内部滚动，滚动、窗口和内容尺寸变化时重算位置。原生浏览器相交遮挡复用共享机制。

管理 Modal 沿用设置 Modal 的表面、遮罩和焦点规则，提供全部内置应用的名称及用途搜索、打开，以及可选应用的常驻和设置：

应用管理采用 auto-fit/minmax 网格，卡片最小宽度 260px，不足时收缩为容器宽度；按 Modal 可用宽度排列三列及以上、双列或单列。Modal 最大宽度保持 960px，当前最大宽度可容纳三列， 高度随内容增长并受窗口限制。卡片显示图标、名称、状态和用途，底部放置操作；名称旁区分 “始终显示”（英文 Always shown）和“可选 · 已启用／已关闭”。长名称可换行，正文与控件均不可横向溢出。

应用中心
[搜索内置应用]
知识库     始终显示         [打开] [上移] [下移]
智能心跳   始终显示         [打开] [上移] [下移]
魔法笔记   可选 · 已启用    [打开] [设置] [上移] [下移]
本机推理监控   可选 · 已启用    [打开] [设置] [上移] [下移]

已启用但未常驻的应用可以直接打开，打开不自动常驻。关闭的应用仍能被搜索和配置， 保留禁用的“打开”按钮，可通过“设置”重新开启。启用、常驻放在设置详情中；每张卡片底部提供成组的上下箭头，与打开、设置操作按空间换行。箭头使用共享图标按钮，名称和提示包含方向及应用名；目标取完整保存顺序中的相邻应用，仅首尾无目标或修改锁定时禁用对应箭头。无搜索词且未锁定修改时，所有卡片均支持拖动排序，包括关闭或未常驻的应用；搜索时禁用拖动，箭头仍按完整保存顺序操作，未命中的应用保留在顺序中。无搜索结果显示清除搜索入口。 首期不展示商店页签、推荐、安装按钮、市场 URL 或 YAML 操作，系统工具也不在此列出。

4.1 共同应用设置页

魔法笔记、本机推理监控的通用应用设置统一从应用中心卡片的“设置”进入；应用页面不再提供重复快捷入口。本机推理监控保留“模型与连接设置”。知识库和智能心跳在管理 Modal 中提供“打开”和排序，不提供启用、常驻开关或通用空设置；原工作区实际配置入口保留。 共同页遵守设置中心 UI 规范，不为每个入口建立一套设置。 全局设置移除魔法笔记页签及跳转入口。旧“显示魔法笔记入口”绑定业务启用值，迁为“启用应用”并保留原值； “常驻左侧菜单”使用独立配置，只有已发布的独立显隐偏好才映射到常驻。

控件	表达含义
启用应用	控制业务可用性及主导航、会话等业务入口
常驻左侧菜单	仅控制主导航捷径，关闭应用时保留该偏好，并说明开启后才显示
显示未完成待办数量	仅控制魔法笔记导航徽标
AI 评论方式	即时／保存后自动／保存后手动，单选
AI 评论形式	长评 + 要点／长评／要点，单选

二元配置使用共享 Switch 和 role="switch"；评论选项使用共享单选控件。本机推理监控 默认启用但不常驻，其余未配置布尔项默认开启；评论默认值沿用既有值，已有保存的选择保留。启用与常驻不可合并。 设置详情最大宽度 640px，紧凑标题栏包含返回图标、应用名称、用途及关闭按钮。进入详情和 返回卡片时正文滚动位置重置到顶部；进入详情聚焦关闭按钮，返回后聚焦搜索框。 共同设置表单使用共享 Switch，相关字段分组，组间使用弱分隔线；说明沿用正文字号。 评论分段控件按内容占宽，窄窗口中标签与选项上下排列；详情不提供排序控件。 智能心跳单条计划 CRUD 及 enabled 仍由其业务页面负责，没有应用级心跳启用开关。

所有入口共享保存中状态。串行保存期间禁用相关启用、常驻、排序及笔记配置控件，保留 最后确认值；持久化成功后的设置事件同步中心、侧栏、会话、应用页及其他设置入口，包括工具配置写入。重开中心刷新期间锁定修改，迟到的旧读取不能覆盖更新快照。失败在发起操作 附近显示可重试错误并保留焦点；结果未知时显示“正在确认保存结果”，重读成功后再开放修改。

4.2 关闭后的页面与会话

关闭当前可选应用成功后，原页面或本机推理监控 Modal 显示“应用已关闭”，重新启用通过应用中心卡片设置完成；本机推理监控需先关闭 Modal。保留草稿和内容状态， 暂停该页面的新业务操作。重新开启后恢复可用性，不自动跳到已离开的应用页或重放任务。

知识库和智能心跳不显示应用关闭状态；会话知识控件、历史引用、工作区配置及心跳计划遵守原功能规则。可选应用的已有请求和后台任务继续按功能生命周期展示，详细边界见关闭应用与恢复。

5. 助手工作栏反馈

系统工具仅从右侧工作栏已有 Tab 或“+”目录进入，工作栏按现有布局回流，主内容页面保持不变。

• 文件：激活默认存在且不可关闭的“工作区”Tab，焦点进入目录区域或错误修复入口。
• 终端：选择已有 Tab 激活该确切终端并保留目标与历史状态；“+”每次创建额外终端，按当前 项目选择本机或托管 SSH，无项目时使用本机 Home。新建期间显示进度，失败保留诊断。
• 浏览器：选择已有 Tab 保留其 Conversation、页面及导航状态；“+”每次创建额外浏览器， 无活动 Conversation 时新建待绑定空实例。不会按当前会话改选其他 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-haspopup="menu"、aria-expanded 和控制关系；菜单使用 menu／menuitem，打开后聚焦首个可用项，上下方向键循环选择，Home、End 到首尾，Enter、Space 激活。
• Escape 关闭菜单并恢复入口焦点；Tab 关闭后继续正常焦点顺序，点击外部、焦点离开或再次点击入口也关闭。菜单不隔离背景，不增加遮罩。
• “管理应用”打开的 Modal 使用共享 Portal、整窗遮罩、原生浏览器遮挡、背景隔离和焦点循环，初始焦点进入搜索。卡片操作与详情控件按正常 Tab 顺序访问，不伪装成单个菜单项；详情切换焦点见共同应用设置页。
• 工作栏使用 tablist、tab、tabpanel、aria-selected、游标焦点和方向键、Home、End。 “+”使用普通按钮语义，同类型 Tab 仍按实例独立标记。
• 徽标数量或状态合并进可访问名称；Switch 支持 Space，失败保留焦点。排序按钮名称包含 应用名，操作结果通过 polite 状态区播报；拖动不是唯一排序方式。

8. 响应式

• 侧栏宽度 220px 至 420px 时，应用中心与设置均可操作，不随宽度缩小点击区域。
• 窄窗口继续使用现有侧栏抽屉，底部入口不重叠；应用菜单向上展开并限制窗口边界、内部滚动。管理 Modal 的长名称可换行，搜索、设置与重新开启入口始终可达。
• 右侧 Tab 单行横向滚动，“+”持续可见；工作栏保持停靠回流，不遮罩主页面。
• 工具提示不得超出窗口；靠近底边时显示在按钮上方。
• 粗指针设备不依赖悬停，按钮的可访问名称和选中反馈保持有效。

会话置顶与操作菜单

会话行的“更多会话操作”提供“置顶会话／取消置顶”，本地与消息通道会话均可使用。 置顶会话显示带“已置顶”可访问名称的图标；当前项目和搜索过滤仍生效，过滤后的列表先显示 置顶会话，两组内各按更新时间倒序。取消置顶恢复时间排序，不改变会话更新时间。 置顶状态重启后保留；保存成功后更新图标和顺序，失败保留原状态并显示应用错误通知。 存储尚未就绪或置顶请求进行中时禁用置顶操作。

操作菜单通过 body Portal 浮在会话列表上方，不撑开会话行。菜单锚定更多按钮，默认位于 按钮下方，随滚动、窗口及菜单尺寸变化重新定位，距窗口边缘至少 8px；空间不足时限制 宽高并允许菜单内部滚动。使用共享表面色、边框、圆角与浮层阴影。

入口提供 aria-haspopup="menu"、展开状态和控制关系；菜单使用 menu／menuitem。 打开后聚焦首个可用按钮，上下方向键循环移动，Home／End 到首尾；Escape 关闭并返回 触发按钮，点击外部或焦点离开时关闭。本地会话继续提供分支、重命名和删除确认，复制与 导出也适用于消息通道会话。持久化与刷新规则见 会话置顶存储。

9. 未来插件入口

FR-15、US-F1／US-F2 的市场 URL、YAML 导入导出及 ShareServer 分发在后续设计中定义。 首期中心只浏览本地内置清单，不显示未来市场的空壳界面。

9.1 本机推理管理

FR-16 的 local-inference 入口已纳入本轮应用清单，可常驻主导航。从常驻入口、应用菜单和管理 Modal 的“打开”均进入同一本机推理监控 Modal，关闭来源菜单或管理 Modal，保留底层工作区、项目、会话和草稿。其他内置应用仍打开主内容区页面。 Modal 与真实执行模块已接入；支持清单及验证范围分别见技术设计和实施进度。 复用 custom-task-dialog 的整窗 body Portal、遮罩、背景隔离及浏览器遮挡机制。主 Modal 最大宽度 960px，高度随内容增长，最大高度为 min(720px, 100dvh - 2 × --space-6)；紧凑标题栏和关闭按钮固定在顶部，正文独立滚动。直接显示服务列表，没有页签或任务历史。工具栏显示“每 5 秒刷新 · CPU 100% = 一个逻辑核心”、模型与连接设置、刷新状态，窄屏可换行。服务行显示“服务进程 PID … · CPU …% · 工作集 … MiB”，预热时显示“正在建立采样基线”；共享进程的 worker 在该行显示无法独立统计的原因。 初始焦点进入“关闭本机推理监控”，Tab／Shift+Tab 在当前 Modal 内循环。没有影响确认且没有操作提交时，关闭按钮或 Escape 关闭 Modal；点击遮罩不关闭。关闭后优先恢复仍可用的原触发元素，入口已移除时回到应用中心，窄侧栏已隐藏时回到侧栏开关。 服务采用弱分隔列表；名称使用区块标题字号，状态及引擎元数据使用 辅助字号，状态与名称同组并与操作区分开，原因与操作说明使用正文字号。桌面操作独立位于右侧； 窗口宽度不超过 720px 时移到正文下方并左对齐，保留完整状态和原因。

• US-F3 每行显示服务名、简短状态、引擎、模型及错误。ASR 可用时显示“按需运行（状态未知）”；OCR 和向量使用执行模块的状态。TTS 显示不可用，外部连接不列入本机服务。
• US-F4 不再提供单任务取消入口；活动任务仅在服务操作的影响确认中出现。
• US-F5 服务行右侧保留实际支持的启动、停止、重启或模型加载、释放。
• 停止、重启、释放前打开最大宽度 480px 的紧凑嵌套确认，列出正在使用的任务与影响；无已登记任务时说明执行前再次核对。初始焦点进入“保留运行状态”，最终危险按钮写明“确认停止服务／重启服务／释放模型”；取消保留运行状态。 确认使用独立 body Portal，隔离底层管理 Modal，Tab／Shift+Tab 只在确认中循环；Escape 只关闭确认，关闭后恢复原服务操作按钮，按钮不可用时回到管理 Modal。确认存在时禁用主 Modal 关闭按钮；提交期间禁用确认和取消按钮，两层 Escape 均不能关闭，也不能重复执行。失败关闭旧确认，在服务列表显示错误并刷新；再次操作须重新确认当前影响。成功只关闭确认。 操作失败呈现实际状态和可重试错误，无法确认则显示未知。服务恢复不自动重放任务。 关闭 Modal、关闭管理应用或取消常驻不停止服务，模型文件卸载另行操作。

服务列表提供首次加载、无服务、加载失败重试及保留旧快照的刷新失败状态；刷新期间或失败时禁用服务操作。 OCR 忙碌或模型不可用时禁用加载与释放，并在执行模块再次检查。 页面不显示无来源的进度条或资源数值。US-B6 至 US-B9 的应用中心、顺序、启用联动、笔记共同设置映射见 需求对应。

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，短窗口进一步限制 高度并独立滚动。成功完成但尚未查看的会话继续保留；所有活动行移除后，关闭已打开菜单并隐藏摘要。