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一款面向 Claude Code、Codex、OpenCode、OpenClaw、Grok Build 与 Hermes Agent 的跨平台桌面助手用户手册中的「排序与复制」章节展开系统讲解供应商Provider的拖拽重排、快速复制与删除三大日常操作。读完本文你不仅能在界面上熟练完成这三类操作还能结合 cc-switch 的 React 前端与 RustTauri后端源码理解排序索引sort_index的持久化机制、复制操作如何生成不冲突的供应商标识以及删除保护与故障转移队列之间的联动关系。一、拖拽排序调整供应商的展示与故障转移顺序cc-switch 允许通过拖拽调整供应商列表的显示顺序核心交互依赖卡片左侧的拖拽手柄将鼠标移到供应商卡片左侧的≡拖拽手柄上按住鼠标左键上下拖拽到目标位置松开鼠标完成重排。排序主要有两个实际用途常用置顶把高频使用的供应商拖到列表顶部减少切换时的查找成本故障转移顺序排序结果会影响故障转移队列failover queue的默认顺序——在启用自动故障转移的路由类应用中列表靠前的供应商拥有更高的接管优先级。源码解析排序如何持久化前端排序逻辑集中在 useDragSort Hook 中可以从中确认几个关键实现细节1. 列表顺序的三级判定规则。sortedProviders的计算逻辑见 useDragSort.ts按以下优先级排序// 1) 有 sortIndex 的供应商按 sortIndex 升序 // 2) 只有 sortIndex 的一方排在前面 // 3) 都没有 sortIndex 时按 createdAt 创建时间升序 // 4) 时间戳相同则按名称 localeCompare随界面语言切换 zh-CN / zh-TW / en-US。也就是说从未手动拖拽过的供应商按创建时间排列一旦拖拽过一次sortIndex即成为唯一顺序依据。2. 拖拽事件绑定。Hook 使用dnd-kit/core同时注册了PointerSensor与KeyboardSensor其中PointerSensor配置了activationConstraint: { distance: 8 }见 useDragSort.ts——鼠标按下后位移超过 8 像素才触发拖拽避免普通点击被误判为拖拽同时支持键盘方向键排序sortableKeyboardCoordinates。3. 落点处理与联动刷新。拖拽结束的handleDragEnd处理见 useDragSort.ts依次执行用arrayMove重排数组后为每一个供应商生成新的sortIndex即落点位置通过providersApi.updateSortOrder(updates, appId)一次性批量持久化到后端失效[providers, appId]查询缓存触发列表重渲染若当前应用是路由类应用isProxyAppId(appId)额外失效[failoverQueue, appId]缓存——源码注释明确写道 “Routing apps derive failover order from sort_index”这正对应文档中「排序影响故障转移队列默认顺序」的说法最后调用providersApi.updateTrayMenu()同步刷新系统托盘菜单托盘更新失败仅记录日志不影响排序本身的成功。4. 后端与队列读取。排序结果以sort_index字段存入 SQLite。数据库查询层直接使用ORDER BY COALESCE(sort_index, 999999), created_at ASC, id ASC读取列表见 providers.rs而故障转移队列的读取同样按sort_index排序见 failover.rs两者共用同一顺序源保证「所见顺序即故障接管顺序」。二、复制供应商基于现有配置快速派生新配置复制功能用于在已有配置基础上快速派生变体典型场景包括基于现有配置创建变体如不同 API Key、不同接入点为当前配置做备份建立独立的测试配置避免污染正式配置。自 v3.15.0 起统一供应商Universal Provider也提供复制操作见 v3.15.0-en.md可以先复制再调整启用的应用与模型。操作步骤鼠标悬停供应商卡片显隐动作按钮组点击「复制Duplicate」按钮系统自动创建一份带copy名称后缀的副本编辑副本按需修改配置。复制了哪些内容复制会创建一份完整拷贝具体覆盖范围如下内容是否复制名称是追加copy后缀配置settingsConfig完整深拷贝备注Notes是网站链接Website Link是图标Icon / iconColor是端点列表Endpoint List配置的一部分是排序位置插入在原供应商正下方源码解析副本的生成细节普通供应商的复制入口是 ProviderActions 中的复制图标按钮onDuplicate回调存在时才渲染实际逻辑在 App.tsx 的 handleDuplicateProviderconst duplicatedProvider { name: ${provider.name} copy, settingsConfig: deepClone(provider.settingsConfig), // 深拷贝避免共享引用 websiteUrl: provider.websiteUrl, category: provider.category, sortIndex: provider.sortIndex 1, // 副本插入原供应商正下方 meta: provider.meta ? deepClone(provider.meta) : undefined, icon: provider.icon, iconColor: provider.iconColor, };可以看到配置采用deepClone深拷贝后续修改副本不会反向影响原配置sortIndex取原值加 1并在持久化前把原供应商之后所有供应商的sortIndex各加 1批量调用providersApi.updateSortOrder确保副本严格落在原供应商正下方与上表「插入在原供应商下方」一致若排序调整失败函数会直接中止添加流程return保证列表顺序与数据落库的一致性。针对 OpenCode、OpenClaw、Hermes、Pi 这几类会向目标应用原生配置写入供应商的应用复制逻辑还额外做了标识去重generateUniqueProviderCopyKey见 App.tsx会基于原供应商 ID 生成原id-copy形式的providerKey并与现有供应商 ID、原生配置中已启用的 live provider ID 做并集去重若冲突则依次尝试-copy-2、-copy-3……同时设置addToLive false即副本默认不会立即写入目标应用的原生配置避免复制动作直接改动正在使用的配置。统一供应商的复制实现更轻量位于 UniversalProviderPaneldeepClone原对象后更换新的idcrypto.randomUUID()、名称加copy后缀、刷新createdAt随后依次执行upsert落库与sync同步到已启用的应用。复制之后通常要改什么复制完成后建议至少检查三处名称改成有业务含义的名字避免多个copy后缀造成混淆API Key如果副本要指向另一个账户务必替换密钥接入端点Endpoint如果副本要指向另一家服务替换 Base URL。三、删除供应商确认对话框与删除限制删除步骤悬停供应商卡片显隐动作按钮点击「删除」按钮在确认对话框中确认删除。确认对话框会显示待删除供应商的名称「删除不可撤销」的警示。删除的限制与注意点当前激活供应商可以被删除但推荐先切换到其他供应商再删除避免当前应用的配置出现空档统一供应商删除时会一并移除其已关联到各应用的原生配置。后端删除入口是 Tauri 命令 delete_provider它按app_type定位应用类型后委托ProviderService::delete完成数据库记录与相关状态清理对于 OpenCode、OpenClaw 这类累加型应用另有 remove_provider_from_live_config 命令只把供应商从原生配置中摘除而保留数据库记录两者语义不同删除操作按应用场景走对应路径。前端对删除按钮本身也有保护逻辑ProviderActions 中的canDelete判定会禁用只读供应商例如由 Hermes 管理、需在 Hermes Web UI 中编辑的条目的删除按钮并通过title提示禁用原因防止误删托管配置。四、小结供应商列表的排序、复制、删除三者共同构成 cc-switch 日常配置管理的基础操作拖拽排序以sort_index为持久化依据同时驱动列表展示、故障转移队列顺序与托盘菜单一次操作三处生效复制操作对配置做深拷贝并自动完成排序插入与标识去重副本默认不侵入目标应用的原生配置适合快速搭建多变体方案删除操作以确认对话框兜底并结合应用类型区分「彻底删除」与「从原生配置移除」两种语义。如需进一步了解供应商的创建与编辑流程可继续阅读 添加供应商 与 编辑供应商 两篇手册章节排序与故障转移的联动细节也可结合 proxy-guide 深入理解。【免费下载链接】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），仅供参考 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一款面向 Claude Code、Codex、OpenCode、OpenClaw、Grok Build 与 Hermes Agent 的跨平台桌面助手用户手册中的「排序与复制」章节展开系统讲解供应商Provider的拖拽重排、快速复制与删除三大日常操作。读完本文你不仅能在界面上熟练完成这三类操作还能结合 cc-switch 的 React 前端与 RustTauri后端源码理解排序索引sort_index的持久化机制、复制操作如何生成不冲突的供应商标识以及删除保护与故障转移队列之间的联动关系。一、拖拽排序调整供应商的展示与故障转移顺序cc-switch 允许通过拖拽调整供应商列表的显示顺序核心交互依赖卡片左侧的拖拽手柄将鼠标移到供应商卡片左侧的≡拖拽手柄上按住鼠标左键上下拖拽到目标位置松开鼠标完成重排。排序主要有两个实际用途常用置顶把高频使用的供应商拖到列表顶部减少切换时的查找成本故障转移顺序排序结果会影响故障转移队列failover queue的默认顺序——在启用自动故障转移的路由类应用中列表靠前的供应商拥有更高的接管优先级。源码解析排序如何持久化前端排序逻辑集中在 useDragSort Hook 中可以从中确认几个关键实现细节1. 列表顺序的三级判定规则。sortedProviders的计算逻辑见 useDragSort.ts按以下优先级排序// 1) 有 sortIndex 的供应商按 sortIndex 升序 // 2) 只有 sortIndex 的一方排在前面 // 3) 都没有 sortIndex 时按 createdAt 创建时间升序 // 4) 时间戳相同则按名称 localeCompare随界面语言切换 zh-CN / zh-TW / en-US。也就是说从未手动拖拽过的供应商按创建时间排列一旦拖拽过一次sortIndex即成为唯一顺序依据。2. 拖拽事件绑定。Hook 使用dnd-kit/core同时注册了PointerSensor与KeyboardSensor其中PointerSensor配置了activationConstraint: { distance: 8 }见 useDragSort.ts——鼠标按下后位移超过 8 像素才触发拖拽避免普通点击被误判为拖拽同时支持键盘方向键排序sortableKeyboardCoordinates。3. 落点处理与联动刷新。拖拽结束的handleDragEnd处理见 useDragSort.ts依次执行用arrayMove重排数组后为每一个供应商生成新的sortIndex即落点位置通过providersApi.updateSortOrder(updates, appId)一次性批量持久化到后端失效[providers, appId]查询缓存触发列表重渲染若当前应用是路由类应用isProxyAppId(appId)额外失效[failoverQueue, appId]缓存——源码注释明确写道 “Routing apps derive failover order from sort_index”这正对应文档中「排序影响故障转移队列默认顺序」的说法最后调用providersApi.updateTrayMenu()同步刷新系统托盘菜单托盘更新失败仅记录日志不影响排序本身的成功。4. 后端与队列读取。排序结果以sort_index字段存入 SQLite。数据库查询层直接使用ORDER BY COALESCE(sort_index, 999999), created_at ASC, id ASC读取列表见 providers.rs而故障转移队列的读取同样按sort_index排序见 failover.rs两者共用同一顺序源保证「所见顺序即故障接管顺序」。二、复制供应商基于现有配置快速派生新配置复制功能用于在已有配置基础上快速派生变体典型场景包括基于现有配置创建变体如不同 API Key、不同接入点为当前配置做备份建立独立的测试配置避免污染正式配置。自 v3.15.0 起统一供应商Universal Provider也提供复制操作见 v3.15.0-en.md可以先复制再调整启用的应用与模型。操作步骤鼠标悬停供应商卡片显隐动作按钮组点击「复制Duplicate」按钮系统自动创建一份带copy名称后缀的副本编辑副本按需修改配置。复制了哪些内容复制会创建一份完整拷贝具体覆盖范围如下内容是否复制名称是追加copy后缀配置settingsConfig完整深拷贝备注Notes是网站链接Website Link是图标Icon / iconColor是端点列表Endpoint List配置的一部分是排序位置插入在原供应商正下方源码解析副本的生成细节普通供应商的复制入口是 ProviderActions 中的复制图标按钮onDuplicate回调存在时才渲染实际逻辑在 App.tsx 的 handleDuplicateProviderconst duplicatedProvider { name: ${provider.name} copy, settingsConfig: deepClone(provider.settingsConfig), // 深拷贝避免共享引用 websiteUrl: provider.websiteUrl, category: provider.category, sortIndex: provider.sortIndex 1, // 副本插入原供应商正下方 meta: provider.meta ? deepClone(provider.meta) : undefined, icon: provider.icon, iconColor: provider.iconColor, };可以看到配置采用deepClone深拷贝后续修改副本不会反向影响原配置sortIndex取原值加 1并在持久化前把原供应商之后所有供应商的sortIndex各加 1批量调用providersApi.updateSortOrder确保副本严格落在原供应商正下方与上表「插入在原供应商下方」一致若排序调整失败函数会直接中止添加流程return保证列表顺序与数据落库的一致性。针对 OpenCode、OpenClaw、Hermes、Pi 这几类会向目标应用原生配置写入供应商的应用复制逻辑还额外做了标识去重generateUniqueProviderCopyKey见 App.tsx会基于原供应商 ID 生成原id-copy形式的providerKey并与现有供应商 ID、原生配置中已启用的 live provider ID 做并集去重若冲突则依次尝试-copy-2、-copy-3……同时设置addToLive false即副本默认不会立即写入目标应用的原生配置避免复制动作直接改动正在使用的配置。统一供应商的复制实现更轻量位于 UniversalProviderPaneldeepClone原对象后更换新的idcrypto.randomUUID()、名称加copy后缀、刷新createdAt随后依次执行upsert落库与sync同步到已启用的应用。复制之后通常要改什么复制完成后建议至少检查三处名称改成有业务含义的名字避免多个copy后缀造成混淆API Key如果副本要指向另一个账户务必替换密钥接入端点Endpoint如果副本要指向另一家服务替换 Base URL。三、删除供应商确认对话框与删除限制删除步骤悬停供应商卡片显隐动作按钮点击「删除」按钮在确认对话框中确认删除。确认对话框会显示待删除供应商的名称「删除不可撤销」的警示。删除的限制与注意点当前激活供应商可以被删除但推荐先切换到其他供应商再删除避免当前应用的配置出现空档统一供应商删除时会一并移除其已关联到各应用的原生配置。后端删除入口是 Tauri 命令 delete_provider它按app_type定位应用类型后委托ProviderService::delete完成数据库记录与相关状态清理对于 OpenCode、OpenClaw 这类累加型应用另有 remove_provider_from_live_config 命令只把供应商从原生配置中摘除而保留数据库记录两者语义不同删除操作按应用场景走对应路径。前端对删除按钮本身也有保护逻辑ProviderActions 中的canDelete判定会禁用只读供应商例如由 Hermes 管理、需在 Hermes Web UI 中编辑的条目的删除按钮并通过title提示禁用原因防止误删托管配置。四、小结供应商列表的排序、复制、删除三者共同构成 cc-switch 日常配置管理的基础操作拖拽排序以sort_index为持久化依据同时驱动列表展示、故障转移队列顺序与托盘菜单一次操作三处生效复制操作对配置做深拷贝并自动完成排序插入与标识去重副本默认不侵入目标应用的原生配置适合快速搭建多变体方案删除操作以确认对话框兜底并结合应用类型区分「彻底删除」与「从原生配置移除」两种语义。如需进一步了解供应商的创建与编辑流程可继续阅读 添加供应商 与 编辑供应商 两篇手册章节排序与故障转移的联动细节也可结合 proxy-guide 深入理解。【免费下载链接】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），仅供参考