feat(ui): add failover toggle and improve proxy controls

- Add FailoverToggle component with slide animation - Simplify ProxyToggle style to match FailoverToggle - Add usage statistics button when proxy is active - Fix i18n parameter passing for failover messages - Add missing failover translation keys (inQueue, addQueue, priority) - Replace AboutSection icon with app logo
2026-06-16 13:34:04 +08:00 · 2026-01-15 21:54:05 +08:00
parent 22c0e7bb5c
commit a8ea99c3fe
12 changed files with 388 additions and 73 deletions
@@ -75,6 +75,7 @@ pub async fn get_auto_failover_enabled(
 /// 注意：关闭故障转移时不会清除队列，队列内容会保留供下次开启时使用
 #[tauri::command]
 pub async fn set_auto_failover_enabled(
+    app: tauri::AppHandle,
    state: tauri::State<'_, AppState>,
    app_type: String,
    enabled: bool,
@@ -98,5 +99,14 @@ pub async fn set_auto_failover_enabled(
        .db
        .update_proxy_config_for_app(config)
        .await
-        .map_err(|e| e.to_string())
+        .map_err(|e| e.to_string())?;
+
+    // 刷新托盘菜单，确保状态同步
+    if let Ok(new_menu) = crate::tray::create_tray_menu(&app, &state) {
+        if let Some(tray) = app.tray_by_id("main") {
+            let _ = tray.set_menu(Some(new_menu));
+        }
+    }
+
+    Ok(())
 }
@@ -614,4 +614,51 @@ impl Database {
        log::info!("已删除所有 Live 配置备份");
        Ok(())
    }
+
+    // ==================== Sync Methods for Tray Menu ====================
+
+    /// 同步获取应用的 proxy 启用状态和自动故障转移状态
+    ///
+    /// 用于托盘菜单构建等同步场景
+    /// 返回 (enabled, auto_failover_enabled)
+    pub fn get_proxy_flags_sync(&self, app_type: &str) -> (bool, bool) {
+        let conn = match self.conn.lock() {
+            Ok(c) => c,
+            Err(_) => return (false, false),
+        };
+
+        conn.query_row(
+            "SELECT enabled, auto_failover_enabled FROM proxy_config WHERE app_type = ?1",
+            [app_type],
+            |row| Ok((row.get::<_, i32>(0)? != 0, row.get::<_, i32>(1)? != 0)),
+        )
+        .unwrap_or((false, false))
+    }
+
+    /// 同步设置应用的 proxy 启用状态和自动故障转移状态
+    ///
+    /// 用于托盘菜单点击等同步场景
+    pub fn set_proxy_flags_sync(
+        &self,
+        app_type: &str,
+        enabled: bool,
+        auto_failover_enabled: bool,
+    ) -> Result<(), AppError> {
+        let conn = self
+            .conn
+            .lock()
+            .map_err(|e| AppError::Database(format!("Mutex lock failed: {e}")))?;
+
+        conn.execute(
+            "UPDATE proxy_config SET enabled = ?2, auto_failover_enabled = ?3, updated_at = datetime('now') WHERE app_type = ?1",
+            rusqlite::params![
+                app_type,
+                if enabled { 1 } else { 0 },
+                if auto_failover_enabled { 1 } else { 0 },
+            ],
+        )
+        .map_err(|e| AppError::Database(e.to_string()))?;
+
+        Ok(())
+    }
 }
@@ -15,6 +15,7 @@ pub struct TrayTexts {
    pub show_main: &'static str,
    pub no_provider_hint: &'static str,
    pub quit: &'static str,
+    pub auto_label: &'static str,
 }

 impl TrayTexts {
@@ -24,17 +25,20 @@ impl TrayTexts {
                show_main: "Open main window",
                no_provider_hint: "  (No providers yet, please add them from the main window)",
                quit: "Quit",
+                auto_label: "Auto (Failover)",
            },
            "ja" => Self {
                show_main: "メインウィンドウを開く",
                no_provider_hint:
                    "  (プロバイダーがまだありません。メイン画面から追加してください)",
                quit: "終了",
+                auto_label: "自動 (フェイルオーバー)",
            },
            _ => Self {
                show_main: "打开主界面",
                no_provider_hint: "  (无供应商，请在主界面添加)",
                quit: "退出",
+                auto_label: "自动 (故障转移)",
            },
        }
    }
@@ -50,6 +54,9 @@ pub struct TrayAppSection {
    pub log_name: &'static str,
 }

+/// Auto 菜单项后缀
+pub const AUTO_SUFFIX: &str = "auto";
+
 pub const TRAY_SECTIONS: [TrayAppSection; 3] = [
    TrayAppSection {
        app_type: AppType::Claude,
@@ -84,6 +91,7 @@ fn append_provider_section<'a>(
    manager: Option<&crate::provider::ProviderManager>,
    section: &TrayAppSection,
    tray_texts: &TrayTexts,
+    app_state: &AppState,
 ) -> Result<MenuBuilder<'a, tauri::Wry, tauri::AppHandle<tauri::Wry>>, AppError> {
    let Some(manager) = manager else {
        return Ok(menu_builder);
@@ -111,6 +119,23 @@ fn append_provider_section<'a>(
        return Ok(menu_builder.item(&empty_hint));
    }

+    // 获取 proxy 状态，决定 Auto 是否选中
+    let (proxy_enabled, auto_failover) =
+        app_state.db.get_proxy_flags_sync(section.app_type.as_str());
+    let auto_mode = proxy_enabled && auto_failover;
+
+    // 添加 Auto 菜单项（始终显示在供应商列表前）
+    let auto_item = CheckMenuItem::with_id(
+        app,
+        format!("{}{}", section.prefix, AUTO_SUFFIX),
+        tray_texts.auto_label,
+        true,
+        auto_mode,
+        None::<&str>,
+    )
+    .map_err(|e| AppError::Message(format!("创建{}Auto菜单项失败: {e}", section.log_name)))?;
+    menu_builder = menu_builder.item(&auto_item);
+
    let mut sorted_providers: Vec<_> = manager.providers.iter().collect();
    sorted_providers.sort_by(|(_, a), (_, b)| {
        match (a.sort_index, b.sort_index) {
@@ -131,7 +156,8 @@ fn append_provider_section<'a>(
    });

    for (id, provider) in sorted_providers {
-        let is_current = manager.current == *id;
+        // Auto 模式下所有供应商都不选中
+        let is_current = !auto_mode && manager.current == *id;
        let item = CheckMenuItem::with_id(
            app,
            format!("{}{}", section.prefix, id),
@@ -150,13 +176,27 @@ fn append_provider_section<'a>(
 /// 处理供应商托盘事件
 pub fn handle_provider_tray_event(app: &tauri::AppHandle, event_id: &str) -> bool {
    for section in TRAY_SECTIONS.iter() {
-        if let Some(provider_id) = event_id.strip_prefix(section.prefix) {
-            log::info!("切换到{}供应商: {provider_id}", section.log_name);
+        if let Some(suffix) = event_id.strip_prefix(section.prefix) {
+            // 处理 Auto 点击
+            if suffix == AUTO_SUFFIX {
+                log::info!("切换到{} Auto模式", section.log_name);
+                let app_handle = app.clone();
+                let app_type = section.app_type.clone();
+                tauri::async_runtime::spawn_blocking(move || {
+                    if let Err(e) = handle_auto_click(&app_handle, &app_type) {
+                        log::error!("切换{}Auto模式失败: {e}", section.log_name);
+                    }
+                });
+                return true;
+            }
+
+            // 处理供应商点击
+            log::info!("切换到{}供应商: {suffix}", section.log_name);
            let app_handle = app.clone();
-            let provider_id = provider_id.to_string();
+            let provider_id = suffix.to_string();
            let app_type = section.app_type.clone();
            tauri::async_runtime::spawn_blocking(move || {
-                if let Err(e) = switch_provider_internal(&app_handle, app_type, provider_id) {
+                if let Err(e) = handle_provider_click(&app_handle, &app_type, &provider_id) {
                    log::error!("切换{}供应商失败: {e}", section.log_name);
                }
            });
@@ -166,6 +206,80 @@ pub fn handle_provider_tray_event(app: &tauri::AppHandle, event_id: &str) -> boo
    false
 }

+/// 处理 Auto 点击：启用 proxy 和 auto_failover
+fn handle_auto_click(app: &tauri::AppHandle, app_type: &AppType) -> Result<(), AppError> {
+    if let Some(app_state) = app.try_state::<AppState>() {
+        let app_type_str = app_type.as_str();
+
+        // 启用 proxy 和 auto_failover
+        app_state
+            .db
+            .set_proxy_flags_sync(app_type_str, true, true)?;
+
+        // 更新托盘菜单
+        if let Ok(new_menu) = create_tray_menu(app, app_state.inner()) {
+            if let Some(tray) = app.tray_by_id("main") {
+                let _ = tray.set_menu(Some(new_menu));
+            }
+        }
+
+        // 发射事件到前端
+        let event_data = serde_json::json!({
+            "appType": app_type_str,
+            "proxyEnabled": true,
+            "autoFailoverEnabled": true
+        });
+        if let Err(e) = app.emit("proxy-flags-changed", event_data) {
+            log::error!("发射 proxy-flags-changed 事件失败: {e}");
+        }
+    }
+    Ok(())
+}
+
+/// 处理供应商点击：关闭 auto_failover + 切换供应商
+fn handle_provider_click(
+    app: &tauri::AppHandle,
+    app_type: &AppType,
+    provider_id: &str,
+) -> Result<(), AppError> {
+    if let Some(app_state) = app.try_state::<AppState>() {
+        let app_type_str = app_type.as_str();
+
+        // 获取当前 proxy 状态，保持 enabled 不变，只关闭 auto_failover
+        let (proxy_enabled, _) = app_state.db.get_proxy_flags_sync(app_type_str);
+        app_state
+            .db
+            .set_proxy_flags_sync(app_type_str, proxy_enabled, false)?;
+
+        // 切换供应商
+        crate::commands::switch_provider(
+            app_state.clone(),
+            app_type_str.to_string(),
+            provider_id.to_string(),
+        )
+        .map_err(AppError::Message)?;
+
+        // 更新托盘菜单
+        if let Ok(new_menu) = create_tray_menu(app, app_state.inner()) {
+            if let Some(tray) = app.tray_by_id("main") {
+                let _ = tray.set_menu(Some(new_menu));
+            }
+        }
+
+        // 发射事件到前端
+        let event_data = serde_json::json!({
+            "appType": app_type_str,
+            "proxyEnabled": proxy_enabled,
+            "autoFailoverEnabled": false,
+            "providerId": provider_id
+        });
+        if let Err(e) = app.emit("proxy-flags-changed", event_data) {
+            log::error!("发射 proxy-flags-changed 事件失败: {e}");
+        }
+    }
+    Ok(())
+}
+
 /// 创建动态托盘菜单
 pub fn create_tray_menu(
    app: &tauri::AppHandle,
@@ -197,8 +311,14 @@ pub fn create_tray_menu(
            current: current_id,
        };

-        menu_builder =
-            append_provider_section(app, menu_builder, Some(&manager), section, &tray_texts)?;
+        menu_builder = append_provider_section(
+            app,
+            menu_builder,
+            Some(&manager),
+            section,
+            &tray_texts,
+            app_state,
+        )?;
    }

    // 分隔符和退出菜单
@@ -263,38 +383,3 @@ pub fn handle_tray_menu_event(app: &tauri::AppHandle, event_id: &str) {
        }
    }
 }
-
-/// 内部切换供应商函数
-pub fn switch_provider_internal(
-    app: &tauri::AppHandle,
-    app_type: AppType,
-    provider_id: String,
-) -> Result<(), AppError> {
-    if let Some(app_state) = app.try_state::<AppState>() {
-        // 在使用前先保存需要的值
-        let app_type_str = app_type.as_str().to_string();
-        let provider_id_clone = provider_id.clone();
-
-        crate::commands::switch_provider(app_state.clone(), app_type_str.clone(), provider_id)
-            .map_err(AppError::Message)?;
-
-        // 切换成功后重新创建托盘菜单
-        if let Ok(new_menu) = create_tray_menu(app, app_state.inner()) {
-            if let Some(tray) = app.tray_by_id("main") {
-                if let Err(e) = tray.set_menu(Some(new_menu)) {
-                    log::error!("更新托盘菜单失败: {e}");
-                }
-            }
-        }
-
-        // 发射事件到前端，通知供应商已切换
-        let event_data = serde_json::json!({
-            "appType": app_type_str,
-            "providerId": provider_id_clone
-        });
-        if let Err(e) = app.emit("provider-switched", event_data) {
-            log::error!("发射供应商切换事件失败: {e}");
-        }
-    }
-    Ok(())
-}
@@ -15,6 +15,7 @@ import {
  RefreshCw,
  Search,
  Download,
+  BarChart2,
 } from "lucide-react";
 import type { Provider } from "@/types";
 import type { EnvConflict } from "@/types/env";
@@ -41,6 +42,7 @@ import { SettingsPage } from "@/components/settings/SettingsPage";
 import { UpdateBadge } from "@/components/UpdateBadge";
 import { EnvWarningBanner } from "@/components/env/EnvWarningBanner";
 import { ProxyToggle } from "@/components/proxy/ProxyToggle";
+import { FailoverToggle } from "@/components/proxy/FailoverToggle";
 import UsageScriptModal from "@/components/UsageScriptModal";
 import UnifiedMcpPanel from "@/components/mcp/UnifiedMcpPanel";
 import PromptPanel from "@/components/prompts/PromptPanel";
@@ -707,6 +709,22 @@ function App() {
                >
                  <Settings className="w-4 h-4" />
                </Button>
+                {isCurrentAppTakeoverActive && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      setSettingsDefaultTab("usage");
+                      setCurrentView("settings");
+                    }}
+                    title={t("settings.usage.title", {
+                      defaultValue: "使用统计",
+                    })}
+                    className="hover:bg-black/5 dark:hover:bg-white/5"
+                  >
+                    <BarChart2 className="w-4 h-4" />
+                  </Button>
+                )}
              </div>
            )}
          </div>
@@ -795,7 +813,19 @@ function App() {
            {currentView === "providers" && (
              <>
                {activeApp !== "opencode" && (
-                  <ProxyToggle activeApp={activeApp} />
+                  <>
+                    <ProxyToggle activeApp={activeApp} />
+                    <div
+                      className={cn(
+                        "transition-all duration-300 ease-in-out overflow-hidden",
+                        isCurrentAppTakeoverActive
+                          ? "opacity-100 max-w-[100px] scale-100"
+                          : "opacity-0 max-w-0 scale-75 pointer-events-none",
+                      )}
+                    >
+                      <FailoverToggle activeApp={activeApp} />
+                    </div>
+                  </>
                )}

                <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
@@ -0,0 +1,76 @@
+/**
+ * 故障转移切换开关组件
+ *
+ * 放置在主界面头部，用于一键启用/关闭自动故障转移
+ */
+
+import { Shuffle, Loader2 } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import {
+  useAutoFailoverEnabled,
+  useSetAutoFailoverEnabled,
+} from "@/lib/query/failover";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+import type { AppId } from "@/lib/api";
+
+interface FailoverToggleProps {
+  className?: string;
+  activeApp: AppId;
+}
+
+export function FailoverToggle({ className, activeApp }: FailoverToggleProps) {
+  const { t } = useTranslation();
+  const { data: isEnabled = false, isLoading } =
+    useAutoFailoverEnabled(activeApp);
+  const setEnabled = useSetAutoFailoverEnabled();
+
+  const handleToggle = (checked: boolean) => {
+    setEnabled.mutate({ appType: activeApp, enabled: checked });
+  };
+
+  const appLabel =
+    activeApp === "claude"
+      ? "Claude"
+      : activeApp === "codex"
+        ? "Codex"
+        : "Gemini";
+
+  const tooltipText = isEnabled
+    ? t("failover.tooltip.enabled", {
+        app: appLabel,
+        defaultValue: `${appLabel} 故障转移已启用\n自动切换到下一个可用供应商`,
+      })
+    : t("failover.tooltip.disabled", {
+        app: appLabel,
+        defaultValue: `启用 ${appLabel} 故障转移\n当当前供应商失败时自动切换`,
+      });
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1 px-1.5 h-8 rounded-lg bg-muted/50 transition-all",
+        className,
+      )}
+      title={tooltipText}
+    >
+      {setEnabled.isPending || isLoading ? (
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+      ) : (
+        <Shuffle
+          className={cn(
+            "h-4 w-4 transition-colors",
+            isEnabled
+              ? "text-emerald-500 animate-pulse"
+              : "text-muted-foreground",
+          )}
+        />
+      )}
+      <Switch
+        checked={isEnabled}
+        onCheckedChange={handleToggle}
+        disabled={setEnabled.isPending || isLoading}
+      />
+    </div>
+  );
+}
@@ -55,39 +55,29 @@ export function ProxyToggle({ className, activeApp }: ProxyToggleProps) {

  return (
    <div
-      className={cn("p-1 rounded-xl transition-all", className)}
+      className={cn(
+        "flex items-center gap-1 px-1.5 h-8 rounded-lg bg-muted/50 transition-all",
+        className,
+      )}
      title={tooltipText}
    >
-      <div className="flex items-center gap-2 px-2 h-8 rounded-md cursor-default">
-        {isPending ? (
-          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-        ) : (
-          <Radio
-            className={cn(
-              "h-4 w-4 transition-colors",
-              takeoverEnabled
-                ? "text-emerald-500 animate-pulse"
-                : "text-muted-foreground",
-            )}
-          />
-        )}
-        <span
+      {isPending ? (
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+      ) : (
+        <Radio
          className={cn(
-            "text-sm font-medium transition-colors select-none",
+            "h-4 w-4 transition-colors",
            takeoverEnabled
-              ? "text-emerald-600 dark:text-emerald-400"
+              ? "text-emerald-500 animate-pulse"
              : "text-muted-foreground",
          )}
-        >
-          Proxy
-        </span>
-        <Switch
-          checked={takeoverEnabled}
-          onCheckedChange={handleToggle}
-          disabled={isPending}
-          className="ml-1"
        />
-      </div>
+      )}
+      <Switch
+        checked={takeoverEnabled}
+        onCheckedChange={handleToggle}
+        disabled={isPending}
+      />
    </div>
  );
 }
@@ -9,7 +9,6 @@ import {
  Terminal,
  CheckCircle2,
  AlertCircle,
-  Sparkles,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useTranslation } from "react-i18next";
@@ -20,6 +19,7 @@ import { useUpdate } from "@/contexts/UpdateContext";
 import { relaunchApp } from "@/lib/updater";
 import { Badge } from "@/components/ui/badge";
 import { motion } from "framer-motion";
+import appIcon from "@/assets/icons/app-icon.png";

 interface AboutSectionProps {
  isPortable: boolean;
@@ -204,7 +204,7 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
-              <Sparkles className="h-5 w-5 text-primary" />
+              <img src={appIcon} alt="CC Switch" className="h-5 w-5" />
              <h4 className="text-lg font-semibold text-foreground">
                CC Switch
              </h4>
@@ -1088,6 +1088,20 @@
    "circuitOpen": "Circuit Open",
    "consecutiveFailures": "{{count}} consecutive failures"
  },
+  "failover": {
+    "enabled": "{{app}} failover enabled",
+    "disabled": "{{app}} failover disabled",
+    "toggleFailed": "Operation failed: {{detail}}",
+    "inQueue": "In queue",
+    "addQueue": "Add",
+    "priority": {
+      "tooltip": "Failover priority {{priority}}"
+    },
+    "tooltip": {
+      "enabled": "{{app}} failover enabled\nAutomatically switch to next available provider",
+      "disabled": "Enable {{app}} failover\nAutomatically switch when current provider fails"
+    }
+  },
  "proxy": {
    "panel": {
      "serviceAddress": "Service Address",
@@ -1088,6 +1088,20 @@
    "circuitOpen": "サーキットオープン",
    "consecutiveFailures": "{{count}} 回連続失敗"
  },
+  "failover": {
+    "enabled": "{{app}} フェイルオーバーが有効になりました",
+    "disabled": "{{app}} フェイルオーバーが無効になりました",
+    "toggleFailed": "操作に失敗しました: {{detail}}",
+    "inQueue": "キュー内",
+    "addQueue": "追加",
+    "priority": {
+      "tooltip": "フェイルオーバー優先度 {{priority}}"
+    },
+    "tooltip": {
+      "enabled": "{{app}} フェイルオーバーが有効\n次の利用可能なプロバイダーに自動切り替え",
+      "disabled": "{{app}} フェイルオーバーを有効にする\n現在のプロバイダーが失敗した場合に自動切り替え"
+    }
+  },
  "proxy": {
    "panel": {
      "serviceAddress": "サービスアドレス",
@@ -1088,6 +1088,20 @@
    "circuitOpen": "熔断",
    "consecutiveFailures": "连续失败 {{count}} 次"
  },
+  "failover": {
+    "enabled": "{{app}} 故障转移已启用",
+    "disabled": "{{app}} 故障转移已关闭",
+    "toggleFailed": "操作失败: {{detail}}",
+    "inQueue": "已加入",
+    "addQueue": "加入",
+    "priority": {
+      "tooltip": "故障转移优先级 {{priority}}"
+    },
+    "tooltip": {
+      "enabled": "{{app}} 故障转移已启用\n自动切换到下一个可用供应商",
+      "disabled": "启用 {{app}} 故障转移\n当当前供应商失败时自动切换"
+    }
+  },
  "proxy": {
    "panel": {
      "serviceAddress": "服务地址",
@@ -1,5 +1,8 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { failoverApi } from "@/lib/api/failover";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { extractErrorMessage } from "@/utils/errorUtils";

 // ========== 熔断器 Hooks ==========

@@ -197,6 +200,7 @@ export function useAutoFailoverEnabled(appType: string) {
 */
 export function useSetAutoFailoverEnabled() {
  const queryClient = useQueryClient();
+  const { t } = useTranslation();

  return useMutation({
    mutationFn: ({ appType, enabled }: { appType: string; enabled: boolean }) =>
@@ -217,14 +221,45 @@ export function useSetAutoFailoverEnabled() {
      return { previousValue, appType };
    },

+    onSuccess: (_data, variables) => {
+      const appLabel =
+        variables.appType === "claude"
+          ? "Claude"
+          : variables.appType === "codex"
+            ? "Codex"
+            : "Gemini";
+
+      toast.success(
+        variables.enabled
+          ? t("failover.enabled", {
+              app: appLabel,
+              defaultValue: `${appLabel} 故障转移已启用`,
+            })
+          : t("failover.disabled", {
+              app: appLabel,
+              defaultValue: `${appLabel} 故障转移已关闭`,
+            }),
+        { closeButton: true },
+      );
+    },
+
    // 错误时回滚
-    onError: (_error, _variables, context) => {
+    onError: (error: Error, _variables, context) => {
      if (context?.previousValue !== undefined) {
        queryClient.setQueryData(
          ["autoFailoverEnabled", context.appType],
          context.previousValue,
        );
      }
+
+      const detail =
+        extractErrorMessage(error) ||
+        t("common.unknown", { defaultValue: "未知错误" });
+      toast.error(
+        t("failover.toggleFailed", {
+          defaultValue: `操作失败: ${detail}`,
+        }),
+      );
    },

    // 无论成功失败，都重新获取