CC Switch 界面总览：顶部导航、供应商卡片、系统托盘与轻量模式实战指南

CC Switch 界面总览顶部导航、供应商卡片、系统托盘与轻量模式实战指南【免费下载链接】cc-switchA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build Hermes Agent. Only official website: ccswitch.io项目地址: https://gitcode.com/GitHub_Trending/cc/cc-switch本篇基于 CC Switch 官方用户手册中的「界面总览Interface Overview」一章系统讲解主界面布局、顶部导航栏六大元素、供应商卡片的状态与按钮语义、系统托盘菜单及轻量模式的工作原理并补充前端组件与 Rust 后端的源码级实现证据。读完后你将能够独立识别界面上每个按钮与边框颜色所代表的状态掌握不打开主窗口即可切换供应商的托盘操作方式以及Cmd/Ctrl F搜索等快捷键的实际触发逻辑。主界面布局与顶部导航栏CC Switch 主界面自上而下分为顶部导航栏和功能内容区供应商卡片列表。顶部导航栏共包含六个核心元素#元素说明1Logo点击访问 GitHub 项目页2设置按钮打开设置页快捷键Cmd/Ctrl ,3代理开关启动/停止本地代理服务4应用切换器在 Claude / Claude Desktop / Codex / Gemini / OpenCode / OpenClaw / Hermes 之间切换5功能区各应用专属的功能入口6添加按钮添加新的供应商应用切换器App Switcher点击下拉菜单可切换当前正在管理的应用手册中列出的应用及其职责为Claude—— 管理 Claude Code 配置Claude Desktop—— 管理 Claude Desktop 第三方供应商与官方模式Codex—— 管理 Codex 配置Gemini—— 管理 Gemini CLI 配置OpenCode—— 管理 OpenCode 配置OpenClaw—— 管理 OpenClaw 配置Hermes—— 管理 Hermes Agent 供应商与 Memory。切换之后供应商列表即显示所选应用的配置。从源码结构看切换器实现在 AppSwitcher.tsx其中有两处值得注意的细节记住上次选择每次切换都会把目标应用写入localStorage键名为cc-switch-last-app见 AppSwitcher.tsx#L28 与 L99-L103下次打开主窗口时恢复上次管理的应用自适应溢出收纳组件通过ResizeObserver监听父级弹性槽宽度当可见空间不足时把多出来的应用收进「更多」PopoverL116-L149、L184-L223并保证「当前激活的应用」始终占据一个可见位L152-L155。组件还会按visibleApps过滤应用列表L106-L109这正是设置页中「应用可见性App Visibility」配置项的落地位置。另外从 AppSwitcher.tsx#L42-L52 的显示名映射可以看到代码层面还登记了 Grok Build、Pi 等应用实际界面显示哪些应用取决于可见性配置。功能区按钮顶部导航栏的功能区为各应用提供专属功能入口其可见范围随所选应用变化按钮功能可见应用Skills技能扩展管理Claude / Codex / Gemini / OpenCode / HermesPrompts系统提示词管理Claude / Codex / Gemini / OpenCodeMCPMCP 服务器管理Claude / Codex / Gemini / OpenCode / Hermes供应商卡片Provider Cards每个供应商以一张卡片呈现。卡片从左到右依次包含以下元素#元素图标说明1拖拽手柄≡按住上下拖动以调整供应商顺序2供应商图标-显示供应商品牌图标支持自定义颜色3供应商信息-名称、备注/端点 URL点击可打开网站4用量信息-显示剩余额度多套餐时显示套餐数量5启用按钮-切换到该供应商6编辑按钮-编辑供应商配置7复制按钮-复制供应商创建副本8测速按钮-测试模型可用性与响应速度9用量查询-配置用量查询脚本10删除按钮-删除供应商当前激活时禁用提示操作按钮区5–10在鼠标悬停时才出现默认隐藏以保持界面整洁。自 v3.15.0 起部分 Claude Code 与 Codex 供应商卡片还会显示Local Routing 支持徽章便于快速识别哪些供应商可经由本地路由提供服务相关说明可参考 v3.15.0 发布说明。按钮状态与行为细节按钮状态变化说明启用激活时显示对勾并禁用故障转移模式下文案变为「加入/已加入」编辑始终可用打开编辑面板修改配置复制始终可用创建带copy后缀的副本测速测试时显示加载动画仅当代理服务运行时可用用量查询始终可用配置自定义用量查询脚本删除激活时半透明/禁用必须先切换到其他供应商卡片状态与边框颜色卡片边框颜色是判断「当前到底在用谁」的最快方式状态边框颜色说明当前激活蓝色边框普通模式下的当前供应商代理激活绿色边框代理接管proxy takeover模式下实际被使用的供应商普通默认边框未激活的供应商故障转移中显示优先级徽章如 P1、P2表示故障转移优先级这一点可以在 ProviderCard.tsx#L377-L383 中得到印证组件先用shouldUseGreen/shouldUseBlue判定状态绿色仅当isProxyTakeover isActiveProvider见 L360-L367再分别套上border-emerald-500/60绿与border-blue-500/60蓝及对应阴影。拖拽手柄则是GripVertical图标按钮挂载 dnd 的dragHandleProps拖动时卡片会放大并提升层级L396-L410。故障转移优先级徽章由 FailoverPriorityBadge.tsx 渲染文案形如P1、P2优先级 1 对应 P1见 L13-L31鼠标悬停可提示「故障转移优先级 N」。健康状态徽章在代理模式下故障转移队列中的供应商会显示健康状态用于观测自动故障转移的实时状况徽章颜色说明Healthy绿色连续失败 0 次Warning黄色连续失败 1–2 次Unhealthy红色连续失败 3 次及以上可能触发熔断器对应实现为 ProviderHealthBadge.tsx其中健康状态的徽标底色为bg-green-500L29-L31与上表语义一致。系统托盘System TrayCC Switch 在系统托盘显示常驻图标提供无需打开主窗口的快捷操作。托盘菜单功能菜单项功能打开主界面显示并聚焦主窗口应用子菜单按 Claude/Codex/Gemini 分组的可折叠子菜单如「Claude · PackyCode」在可用时附带当前供应商与缓存的用量摘要供应商列表位于各子菜单内部点击切换当前激活项显示对勾轻量模式复选框进入/退出仅驻留托盘的模式退出完全退出应用注意每个托盘子菜单标题会显示当前供应商名称如「Claude · PackyCode」。没有配置任何供应商的应用显示为禁用的「(no providers)」项。托盘目前聚焦于 Claude / Codex / Gemini——即支持代理路由与用量摘要的应用主窗口内应用的可见性仍由「应用可见性」设置控制。从源码结构看托盘菜单由 tray.rs 构建TrayTexts结构体集中管理菜单文案L52-L62后端还维护了每个应用分区的子菜单句柄缓存TRAY_SECTION_SUBMENUSL45-L49用量数据更新时就地改 label 而不是整菜单重建避免托盘菜单闪烁。代码中还定义了 h/w/m/c/p/f/l 等多档订阅额度分组常量L14-L43用于在托盘里紧凑呈现不同窗口周期5 小时/周/月/credits 等的额度摘要。多语言支持托盘菜单支持四种语言并随设置自动切换语言打开主界面退出简体中文打开主界面退出繁体中文開啟主介面退出英文Open main windowQuit日文メインウィンドウを開く終了语言判定逻辑在 tray.rs#L70-L89 的map_locale_to_tray_language中优先读取设置里的语言首次安装settings.language尚未写入时回退到系统区域判定——繁中区域zh-TW/HK/MO/Hant映射为zh-TW其余zh前缀映射为zh日文为ja英文为en未知区域回退zh。该注释明确说明其判定顺序镜像了前端i18n/getInitialLanguage确保首次安装时托盘语言与界面语言一致。轻量模式Lightweight Mode托盘菜单内置Lightweight Mode复选框开启后主窗口被关闭以释放资源应用仅驻留系统托盘继续运行仍可通过托盘子菜单切换供应商macOS 上 Dock 图标也会一并隐藏。退出轻量模式的方式是取消勾选或点击「打开主界面」主窗口会被重建并显示。后端实现位于 lightweight.rs行为与文档描述完全吻合且可以看清跨平台细节进入enter_lightweight_modeL7-L31Windows 上先set_skip_taskbar(true)隐藏任务栏图标macOS 上调用tray::apply_tray_policy调整 Dock 策略随后先保存窗口状态再destroy()主窗口置原子标志LIGHTWEIGHT_MODE并刷新托盘菜单退出exit_lightweight_modeL33-L96若窗口仍存在则恢复显示并聚焦若窗口已被销毁真正进入过轻量模式则从应用配置中取出 main 窗口配置用WebviewWindowBuilder重新构建Linux 下还会执行linux_fix::nudge_main_window修正窗口位置L40-L43。典型使用场景通过托盘菜单切换供应商无需打开主窗口适合以下场景频繁切换供应商主窗口最小化时的快速操作应用后台运行期间管理配置以轻量模式运行以获得最小资源占用。设置页设置页分为多个标签页设置页组件见 SettingsPage.tsxGeneral常规标签语言设置简体中文/繁体中文/英文/日文主题设置系统/浅色/深色窗口行为开机自启、关闭行为。Advanced高级标签配置目录设置代理服务配置故障转移设置定价配置数据导入/导出。Usage用量标签请求统计概览趋势图表请求日志供应商/模型统计。About关于标签版本信息更新检查开源许可证。键盘快捷键与供应商搜索快捷键功能Cmd/Ctrl ,打开设置Cmd/Ctrl F搜索供应商Esc关闭对话框/搜索搜索的实现细节按下Cmd/Ctrl F打开搜索栏后支持按名称、备注或 URL 搜索实时过滤供应商列表Esc关闭。这一行为可以在 ProviderList.tsx 中逐行验证全局keydown监听里metaKey/ctrlKey f时先判断焦点是否位于文本可编辑区域isTextEditableTarget是则不抢占该组合键否则preventDefault()并打开搜索框L276-L297搜索打开后用requestAnimationFrame将焦点移回输入框并全选已有文本L299-L307过滤逻辑对name、notes、websiteUrl三个字段做小写包含匹配L309-L318。另外供应商添加/编辑表单内的预设选择器ProviderPresetSelector.tsx也绑定了Ctrl/Cmd F但它使用捕获阶段监听并调用stopPropagation()L192-L209以避免误触发背后 ProviderList 的同名快捷键——两处快捷键在同一键盘事件链上互不干扰这正是上文「输入框中不抢占 CtrlF」与「表单内搜索优先」两条规则的来源。小结顶部导航栏的六个元素覆盖了「管理哪个应用 管理什么」的完整入口应用切换器带记忆与自适应收纳供应商卡片以蓝/绿边框区分「普通激活」与「代理接管激活」以 P1/P2 徽章表达故障转移优先级健康徽章绿/黄/红量化连续失败次数系统托盘以「应用 · 当前供应商」为标题组织子菜单支持四语言轻量模式通过销毁/重建主窗口实现纯托盘驻留Cmd/Ctrl F搜索与Esc的触发边界可编辑区域、表单内预设选择器均由前端事件监听规则明确界定。如需进一步深入了解可继续查看 主界面截图所在的用户手册、托盘实现 tray.rs、轻量模式实现 lightweight.rs 与卡片组件 ProviderCard.tsx。【免费下载链接】cc-switchA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build Hermes Agent. Only official website: ccswitch.io项目地址: https://gitcode.com/GitHub_Trending/cc/cc-switch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考