cc-switch 供应商列表管理实战:拖拽排序、复制与删除的完整操作与源码解析

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 用户手册中的「排序与复制」章节展开讲解如何在供应商列表中通过拖拽调整显示顺序、基于现有供应商快速创建配置副本以及安全删除供应商。读完本文你不仅能掌握这三项操作的具体步骤还能从源码层面理解排序权重sortIndex的落库机制、复制时配置深克隆与唯一标识生成策略以及删除按钮在不同应用Claude、Codex、OpenCode、Hermes 等下的启用条件。拖拽排序操作步骤cc-switch 支持通过拖拽调整供应商的显示顺序将鼠标移到供应商卡片左侧的≡拖拽手柄按住鼠标左键上下拖动到目标位置松开鼠标完成排序排序用途常用优先将常用的供应商放在列表顶部减少切换时的查找成本故障转移顺序排序会影响故障转移Failover队列的默认顺序。当 Proxy 路由开启自动故障转移时队列顺序直接继承自供应商列表的排序源码层面的排序实现排序功能的实现集中在 useDragSort.ts它基于dnd-kit/core完成拖拽交互触发阈值PointerSensor配置了activationConstraint: { distance: 8 }即指针移动超过 8 像素才激活拖拽避免普通点击误触发拖拽逻辑见 useDragSort.ts键盘可访问同时注册了KeyboardSensor并配合sortableKeyboardCoordinates键盘用户也可以完成排序排序权重的三级回退sortedProviders的排序规则依次为sortIndex用户拖拽后持久化的位置、createdAt创建时间、名称按当前界面语言做localeCompare排序支持 zh-CN、zh-TW、en-US 三种 locale见 useDragSort.ts拖拽结束后的落库流程在handleDragEnd中完成用arrayMove计算新的完整顺序为列表中所有供应商生成{ id, sortIndex }更新项批量调用providersApi.updateSortOrder(updates, appId)持久化失效[providers, appId]查询缓存刷新界面若当前是路由类应用isProxyAppId(appId)为真额外失效failoverQueue查询——源码注释明确写道 “Routing apps derive failover order from sort_index”这正是「排序影响故障转移队列」结论的代码依据调用providersApi.updateTrayMenu()同步系统托盘菜单该步骤失败只记录日志、不影响排序本身。整个流程见 useDragSort.ts。复制供应商适用场景快速创建供应商的副本适用于基于现有配置创建变体备份当前配置创建测试用配置自 v3.15.0 起统一供应商Universal Provider列表也提供复制按钮可以直接从现有统一供应商创建副本后再调整同步应用和模型。操作步骤鼠标悬停在供应商卡片上显示操作按钮复制按钮为卡片右侧的 Copy 图标见上文截图红框标注处点击「复制」按钮自动创建副本名称添加copy后缀编辑副本修改配置复制内容的具体行为文档给出「复制会创建完整副本」的结论源码 App.tsx 中的handleDuplicateProvider给出了精确的字段清单内容是否复制源码细节名称✅ 复制追加copy后缀新名称为${provider.name} copy配置✅ 完整复制settingsConfig通过deepClone深克隆副本与原配置互不影响备注 / 元数据✅ 复制meta同样deepClone网站链接✅ 复制websiteUrl原样复制图标✅ 复制icon与iconColor均复制排序位置✅ 插入到原供应商下方新副本sortIndex 原 sortIndex 1同时把原位置上所有后续供应商的sortIndex整体 1再调用updateSortOrder批量落库若这一步失败复制流程会中止不会出现顺序错乱源码补充不同应用下的额外约束在 OpenCode、OpenClaw、Hermes、Pi 这类“累加模式”additive应用中供应商除了本地记录外还可能存在于应用自身的 live 配置中。复制逻辑会先读取 live 配置里已存在的供应商标识再通过generateUniqueProviderCopyKey生成唯一键基础键为${原id}-copy若冲突则依次尝试-copy-2、-copy-3……见 App.tsx。同时副本会被标记addToLive false即只创建本地供应商记录不会自动写入应用的 live 配置需要你确认后再决定是否为副本启用/加入配置——这避免了复制操作意外改变应用当前指向的服务商。对于统一供应商复制逻辑在 UniversalProviderPanel.tsx 的handleDuplicate中对原供应商做整体deepClone分配新的crypto.randomUUID()作为 id名称追加copy后缀随后依次执行upsert保存副本和sync同步副本到其关联的应用成功后提示「统一供应商已复制并同步」。这也对应文档中「v3.15.0 起可直接复制统一供应商后再调整同步应用和模型」的说法。复制按钮的界面渲染位于 ProviderActions.tsx其title文案来自 i18n 键provider.duplicate中文为「复制」。复制后编辑复制完成后通常需要修改名称改为有意义的名称默认原名 copy仅适合临时区分API Key如果副本对应不同的账号端点如果副本指向不同的服务删除供应商操作步骤鼠标悬停在供应商卡片上显示操作按钮点击「删除」按钮卡片最右侧的垃圾桶图标确认删除删除确认删除前会弹出确认对话框显示供应商名称确认文案由 i18n 键confirm.deleteProviderMessage生成会代入confirmAction.provider.name删除后无法恢复的提示确认消息的构造见 App.tsx 的confirmActionMessage。删除限制文档给出的两条限制与源码中的启用逻辑一致ProviderActions.tsx 的canDelete决定了删除按钮何时可点击当前启用的供应商在 Claude 等单选类应用中正在使用的供应商删除按钮会被禁用!isCurrent条件文档建议先切换到其他供应商再删除统一供应商删除统一供应商后其关联的应用配置也会被删除从源码结构看还有两类额外约束Hermes v12 管理的只读供应商isReadOnly不显示删除能力需在其 Web UI 中操作OpenCode / OpenClaw / Hermes 等累加模式应用删除始终可用其语义是“从配置中移除该供应商”而非删除本地记录删除的兜底机制删除本身通过 useProviderActions.ts 中的deleteProvider底层为useDeleteProviderMutation执行。对于复制出的副本建议遵循“先复制验证、再删原件”的顺序先复制一份用于备份确认副本可用后再删除原件即使误删也有本地配置可恢复。小结cc-switch 的供应商列表管理围绕一个核心字段sortIndex展开拖拽排序通过dnd-kit收集新顺序后批量持久化并联动故障转移队列与托盘菜单复制操作深克隆配置、在原位置下方插入副本、在累加应用中生成唯一键且默认不写入 live 配置删除操作受当前启用状态与应用类型的双重约束并配有确认对话框。三项操作对应的关键实现可分别在 useDragSort.ts、App.tsx 与 ProviderActions.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),仅供参考