goose Desktop 侧边栏导航自定义指南外观、位置、模式与底层实现原理【免费下载链接】goosean open source, extensible AI agent that goes beyond code suggestions - install, execute, edit, and test with any LLM项目地址: https://gitcode.com/GitHub_Trending/goose3/goosegoose 是一款开源、可扩展的 AI Agent桌面端称为 goose Desktop侧边栏Sidebar是你在 Home、Recipes、Apps、Scheduler、Extensions、Settings 等页面之间切换的核心导航入口。本文以官方指南 desktop-navigation.md 为主线系统讲解侧边栏的样式、位置、模式、条目自定义与开关方式并结合仓库中的 NavigationContext.tsx、NavigationPanel.tsx 等源码说明其底层实现与状态记忆机制。读完本文你将能按照自己的工作习惯把 goose Desktop 的导航栏调整到最顺手的状态。适用范围说明侧边栏的自定义能力仅在 goose Desktop 桌面客户端中提供CLI / SDK / 其他接入方式不涉及本主题。如何进入导航设置所有导航相关配置都集中在Settings → App → Navigation区域。完整路径如下点击窗口左上角的侧边栏开关按钮PanelLeft 图标打开侧边栏在侧边栏底部点击Settings切换到App标签页向下滚动到Navigation分区。该分区下的配置分为 Style样式、Position位置、Mode模式与 Customize Items自定义条目四组。在源码层面App 标签页的入口承载在 AppSettingsSection.tsx其中 Appearance外观等设置卡片也在同一标签页中滚动即可看到导航配置块。认识侧边栏的导航条目结构在动手自定义之前先了解侧边栏由哪些条目构成。从 useNavigationItems.ts 的NAV_ITEMS定义可以看到顶层条目清单条目路由路径图标lucide说明New Chat新聊天/MessageSquarePlus主页 / 新建会话Recipes/recipesFileText配方库Skills/skillsZap技能Apps/appsAppWindow应用动态显示见下文Scheduler/schedulesClock定时任务Extensions/extensionsPuzzle扩展管理Session History/sessionsHistory会话历史其中Settings并不在上面的主列表中——它由SETTINGS_NAV_ITEM单独定义并在 NavigationPanel.tsx 中通过border-t分隔线被固定钉在侧边栏底部因此无论你如何滚动或重排设置入口始终可见。值得注意的细节/appsApps条目并非恒常出现。NavigationPanel.tsx 中会先检查扩展列表里是否存在名为apps且处于启用状态的扩展只有满足条件时该条目才会渲染出来。Style选择条目呈现方式Style决定侧边栏里导航条目的显示形态Style说明Tile默认大图标配文字标签、按网格排列适合快速视觉扫描一眼定位目标页面List紧凑的单列列表占用空间更小一屏能容纳更多条目官方指南特别注明当使用 List 样式且窗口宽度小于 700px 时侧边栏会自动折叠为仅显示图标。这一阈值并非凭空设定——在 NavigationContext.tsx 中定义了NARROW_WINDOW_THRESHOLD 700其内部 resize 监听逻辑会在窗口宽度从 700px 以上回落穿过阈值时自动收起侧边栏width NARROW_WINDOW_THRESHOLD lastWidth NARROW_WINDOW_THRESHOLD以避免窄窗口下内容被过度挤压。Position把侧边栏放到任意边缘Position允许把侧边栏移动到窗口的任意一条边缘共四个方向Position说明Left默认窗口左侧的纵向侧边栏Right窗口右侧的纵向侧边栏Top窗口顶部的横向工具栏Bottom窗口底部的横向工具栏对需要大画幅 Chat 区域、或习惯把导航放在右侧的开发者而言这组选项可以显著改变工作流观感。切换后侧边栏会立即按新方向重新排布无需重启应用。Mode决定侧边栏与内容的叠放关系Mode控制侧边栏打开时主内容区域如何处理空间Mode说明Push默认侧边栏占据固定空间内容区自动让位移位侧边栏保持常驻可见适合边导航边工作的场景Overlay侧边栏以浮层形式盖在内容之上不改变内容布局点击浮层外区域或导航离开即可关闭它需要注意的组合约束当选择 Overlay 模式时Style 与 Position 两组设置不可用——此时侧边栏固定以全屏 Tile 覆层的形态展示。这一设计保证了浮层在任意方向上都能清晰可读。与窗口尺寸相关的自适应行为同样值得留意无论是 Push 还是 Overlay窗口变窄到 700px 以下时侧边栏都会自动折叠为纯图标态用户仍可通过左上角菜单按钮手动展开且只有在宽度再次自上而下穿过阈值时才触发下一次自动折叠参见 NavigationContext.tsx 中的宽度跟踪注释避免与你手动展开的操作互相“打架”。Customize Items重排与隐藏条目导航设置的Customize Items分区提供对条目本身的管理能力拖拽条目可以调整它们在侧边栏中的排列顺序点击条目的眼睛图标可单独显示或隐藏某个条目隐藏后该条目不再出现在侧边栏中点击Reset to defaults可一键恢复默认的顺序与可见性。借助这一能力你可以把最常用的 Recipes / Scheduler 提到顶部把不常用的 Session History 隐藏从而形成个人化的导航入口集。注意它与“固定钉在底部的 Settings”不冲突——Settings 不参与拖拽排序。Toggle Sidebar随时开关侧边栏在不开 Settings 的情况下还有两条快捷路径可以即时显示/隐藏侧边栏菜单栏方式点击菜单栏View → Toggle Navigation切换导航即可开关侧边栏键盘快捷键该菜单项旁边会显示当前绑定的快捷键且快捷键可在SettingsKeyboard键盘快捷键设置页中自定义。从主进程源码 main.ts 可以看到其实现链路Electron 主进程读取用户自定义的shortcuts.toggleNavigation作为菜单加速键accelerator在菜单栏的 View 子菜单中追加“Toggle Navigation”菜单项点击后通过focusedWindow.webContents.send(toggle-navigation)向渲染进程广播事件渲染进程侧 NavigationContext.tsx 监听该 IPC 事件并翻转isNavExpanded状态。开关状态与会话记忆侧边栏的打开/收起状态会跨会话被记住。实现上 NavigationContext.tsx 以localStorage键navigation_expanded持久化展开状态初始化时读取该键非false即视为展开每次切换都会写回。同理拖拽调整的侧边栏宽度也通过navigation_width键持久化并带边界约束默认宽度240px见 constants.ts 中的NAV_WIDTH允许范围最小 160px、最大 400pxMIN_NAV_WIDTH/MAX_NAV_WIDTH见 NavigationContext.tsx越界的持久化值会在读取时被丢弃并回退默认值。侧边栏的宽度拖拽手柄实现在 AppLayout.tsx 的handleResizeMouseDown逻辑中拖动过程会实时钳制在 [160, 400] 区间内再写入存储。源码视角侧边栏会话区与状态指示在自定义之外了解侧边栏下半部分的会话列表有助于理解整体导航能力。NavigationPanel.tsx 在导航条目下方还渲染了Chats会话区会话支持按项目分组展示recentSessionsByProject分组标题可点击折叠/展开每个会话条目右侧有状态指示器SessionIndicators可标识Streaming生成中、有未读活动与Error出错三种状态并把“Streaming → Idle”的切换识别为一次“未读活动”见SESSION_STATUS_UPDATE事件处理会话条目悬停时可通过 Tooltip 查看模型、工作目录、创建/更新时间等元信息并支持在列表中直接内联重命名会话。这些能力共同构成了 goose Desktop 以“会话”为中心的导航体验与上方 Style/Position/Mode 等外观配置相辅相成。小结goose Desktop 的侧边栏自定义围绕四个维度展开StyleTile/List决定形态PositionLeft/Right/Top/Bottom决定方位ModePush/Overlay决定与内容的叠放关系Customize Items决定条目的顺序与显隐。配合View → Toggle Navigation菜单与可自定义的快捷键你可以快速在沉浸式聊天与密集导航之间切换而展开状态、宽度乃至窄窗口700px自动折叠等行为均通过localStorage与主进程 IPC 协同记忆配置一次即可长期生效。若想进一步了解实现细节可深入阅读 NavigationContext.tsx、NavigationPanel.tsx 与 main.ts 三个核心文件。【免费下载链接】goosean open source, extensible AI agent that goes beyond code suggestions - install, execute, edit, and test with any LLM项目地址: https://gitcode.com/GitHub_Trending/goose3/goose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考