Feat/auto failover switch (#440)

* feat(failover): add auto-failover master switch with proxy integration - Add persistent auto_failover_enabled setting in database - Add get/set_auto_failover_enabled commands - Provider router respects master switch state - Proxy shutdown automatically disables failover - Enabling failover auto-starts proxy server - Optimistic updates for failover queue toggle * feat(proxy): persist proxy takeover state across app restarts - Add proxy_takeover_{app_type} settings for per-app state tracking - Restore proxy takeover state automatically on app startup - Preserve state on normal exit, clear on manual stop - Add stop_with_restore_keep_state method for graceful shutdown * fix(proxy): set takeover state for all apps in start_with_takeover * fix(windows): hide console window when checking CLI versions Add CREATE_NO_WINDOW flag to prevent command prompt from flashing when detecting claude/codex/gemini CLI versions on Windows. * refactor(failover): make auto-failover toggle per-app independent - Change setting key from 'auto_failover_enabled' to 'auto_failover_enabled_{app_type}' - Update provider_router to check per-app failover setting - When failover disabled, use current provider only; when enabled, use queue order - Add unit tests for failover enabled/disabled behavior * feat(failover): auto-switch to higher priority provider on recovery - After circuit breaker reset, check if recovered provider has higher priority - Automatically switch back if queue_order is lower (higher priority) - Stream health check now resets circuit breaker on success/degraded * chore: remove unused start_proxy_with_takeover command - Remove command registration from lib.rs - Add comment clarifying failover queue is preserved on proxy stop * feat(ui): integrate failover controls into provider cards - Add failover toggle button to provider card actions - Show priority badge (P1, P2, ...) for queued providers - Highlight active provider with green border in failover mode - Sync drag-drop order with failover queue - Move per-app failover toggle to FailoverQueueManager - Simplify SettingsPage failover section * test(providers): add mocks for failover hooks in ProviderList tests * refactor(failover): merge failover_queue table into providers - Add in_failover_queue field to providers table - Remove standalone failover_queue table and related indexes - Simplify queue ordering by reusing sort_index field - Remove reorder_failover_queue and set_failover_item_enabled commands - Update frontend to use simplified FailoverQueueItem type * fix(database): ensure in_failover_queue column exists for v2 databases Add column check in create_tables to handle existing v2 databases that were created before the failover queue refactor. * fix(ui): differentiate active provider border color by proxy mode - Use green border/gradient when proxy takeover is active - Use blue border/gradient in normal mode (no proxy) - Improves visual distinction between proxy and non-proxy states * fix(database): clear provider health record when removing from failover queue When a provider is removed from the failover queue, its health monitoring is no longer needed. This change ensures the health record is also deleted from the database to prevent stale data. * fix(failover): improve cache cleanup for provider health and circuit breaker - Use removeQueries instead of invalidateQueries when stopping proxy to completely clear health and circuit breaker caches - Clear provider health and circuit breaker caches when removing from failover queue - Refresh failover queue after drag-sort since queue order depends on sort_index - Only show health badge when provider is in failover queue * style: apply prettier formatting to App.tsx and ProviderList.tsx * fix(proxy): handle missing health records and clear health on proxy stop - Return default healthy state when provider health record not found - Add clear_provider_health_for_app to clear health for specific app - Clear app health records when stopping proxy takeover * fix(proxy): track actual provider used in forwarding for accurate logging Introduce ForwardResult and ForwardError structs to return the actual provider that handled the request. This ensures usage statistics and error logs reflect the correct provider after failover.
2026-07-25 13:45:03 +08:00 · 2025-12-23 12:37:36 +08:00
parent bf570b6d2a
commit 1586451862
38 changed files with 972 additions and 810 deletions
@@ -72,9 +72,20 @@ function App() {
    "bg-orange-500 hover:bg-orange-600 dark:bg-orange-500 dark:hover:bg-orange-600 text-white shadow-lg shadow-orange-500/30 dark:shadow-orange-500/40 rounded-full w-8 h-8";

  // 获取代理服务状态
-  const { isRunning: isProxyRunning, takeoverStatus } = useProxyStatus();
+  const {
+    isRunning: isProxyRunning,
+    takeoverStatus,
+    status: proxyStatus,
+  } = useProxyStatus();
  // 当前应用的代理是否开启
  const isCurrentAppTakeoverActive = takeoverStatus?.[activeApp] || false;
+  // 当前应用代理实际使用的供应商 ID（从 active_targets 中获取）
+  const activeProviderId = useMemo(() => {
+    const target = proxyStatus?.active_targets?.find(
+      (t) => t.app_type === activeApp,
+    );
+    return target?.provider_id;
+  }, [proxyStatus?.active_targets, activeApp]);

  // 获取供应商列表，当代理服务运行时自动刷新
  const { data, isLoading, refetch } = useProvidersQuery(activeApp, {
@@ -105,7 +116,7 @@ function App() {
            if (event.appType === activeApp) {
              await refetch();
            }
-          }
+          },
        );
      } catch (error) {
        console.error("[App] Failed to subscribe provider switch event", error);
@@ -135,7 +146,7 @@ function App() {
      } catch (error) {
        console.error(
          "[App] Failed to check environment conflicts on startup:",
-          error
+          error,
        );
      }
    };
@@ -151,7 +162,7 @@ function App() {
        if (migrated) {
          toast.success(
            t("migration.success", { defaultValue: "配置迁移成功" }),
-            { closeButton: true }
+            { closeButton: true },
          );
        }
      } catch (error) {
@@ -172,10 +183,10 @@ function App() {
          // 合并新检测到的冲突
          setEnvConflicts((prev) => {
            const existingKeys = new Set(
-              prev.map((c) => `${c.varName}:${c.sourcePath}`)
+              prev.map((c) => `${c.varName}:${c.sourcePath}`),
            );
            const newConflicts = conflicts.filter(
-              (c) => !existingKeys.has(`${c.varName}:${c.sourcePath}`)
+              (c) => !existingKeys.has(`${c.varName}:${c.sourcePath}`),
            );
            return [...prev, ...newConflicts];
          });
@@ -187,7 +198,7 @@ function App() {
      } catch (error) {
        console.error(
          "[App] Failed to check environment conflicts on app switch:",
-          error
+          error,
        );
      }
    };
@@ -248,7 +259,7 @@ function App() {
          (p) =>
            p.sortIndex !== undefined &&
            p.sortIndex >= newSortIndex! &&
-            p.id !== provider.id
+            p.id !== provider.id,
        )
        .map((p) => ({
          id: p.id,
@@ -264,7 +275,7 @@ function App() {
          toast.error(
            t("provider.sortUpdateFailed", {
              defaultValue: "排序更新失败",
-            })
+            }),
          );
          return; // 如果排序更新失败，不继续添加
        }
@@ -334,7 +345,9 @@ function App() {
            />
          );
        case "agents":
-          return <AgentsPanel onOpenChange={() => setCurrentView("providers")} />;
+          return (
+            <AgentsPanel onOpenChange={() => setCurrentView("providers")} />
+          );
        default:
          return (
            <div className="mx-auto max-w-[56rem] px-5 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
@@ -355,7 +368,10 @@ function App() {
                      appId={activeApp}
                      isLoading={isLoading}
                      isProxyRunning={isProxyRunning}
-                      isProxyTakeover={isProxyRunning && isCurrentAppTakeoverActive}
+                      isProxyTakeover={
+                        isProxyRunning && isCurrentAppTakeoverActive
+                      }
+                      activeProviderId={activeProviderId}
                      onSwitch={switchProvider}
                      onEdit={setEditingProvider}
                      onDelete={setConfirmDelete}
@@ -418,7 +434,7 @@ function App() {
            } catch (error) {
              console.error(
                "[App] Failed to re-check conflicts after deletion:",
-                error
+                error,
              );
            }
          }}
@@ -475,7 +491,7 @@ function App() {
                      "text-xl font-semibold transition-colors",
                      isProxyRunning && isCurrentAppTakeoverActive
                        ? "text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-300"
-                        : "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
+                        : "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300",
                    )}
                  >
                    CC Switch
@@ -557,7 +573,7 @@ function App() {
                      "transition-all duration-200 ease-in-out overflow-hidden",
                      hasSkillsSupport
                        ? "opacity-100 w-8 scale-100 px-2"
-                        : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1"
+                        : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
                    )}
                    title={t("skills.manage")}
                  >
@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+interface FailoverPriorityBadgeProps {
+  priority: number; // 1, 2, 3, ...
+  className?: string;
+}
+
+/**
+ * 故障转移优先级徽章
+ * 显示供应商在故障转移队列中的优先级顺序
+ */
+export function FailoverPriorityBadge({
+  priority,
+  className,
+}: FailoverPriorityBadgeProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold",
+        "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+        className,
+      )}
+      title={t("failover.priority.tooltip", {
+        priority,
+        defaultValue: `故障转移优先级 ${priority}`,
+      })}
+    >
+      P{priority}
+    </div>
+  );
+}
@@ -5,6 +5,7 @@ import {
  Edit,
  Loader2,
  Play,
+  Plus,
  TestTube2,
  Trash2,
 } from "lucide-react";
@@ -22,6 +23,10 @@ interface ProviderActionsProps {
  onTest?: () => void;
  onConfigureUsage: () => void;
  onDelete: () => void;
+  // 故障转移相关
+  isAutoFailoverEnabled?: boolean;
+  isInFailoverQueue?: boolean;
+  onToggleFailover?: (enabled: boolean) => void;
 }

 export function ProviderActions({
@@ -34,38 +39,88 @@ export function ProviderActions({
  onTest,
  onConfigureUsage,
  onDelete,
+  // 故障转移相关
+  isAutoFailoverEnabled = false,
+  isInFailoverQueue = false,
+  onToggleFailover,
 }: ProviderActionsProps) {
  const { t } = useTranslation();
  const iconButtonClass = "h-8 w-8 p-1";

+  // 故障转移模式下的按钮逻辑
+  const isFailoverMode = isAutoFailoverEnabled && onToggleFailover;
+
+  // 处理主按钮点击
+  const handleMainButtonClick = () => {
+    if (isFailoverMode) {
+      // 故障转移模式：切换队列状态
+      onToggleFailover(!isInFailoverQueue);
+    } else {
+      // 普通模式：切换供应商
+      onSwitch();
+    }
+  };
+
+  // 主按钮的状态和样式
+  const getMainButtonState = () => {
+    if (isFailoverMode) {
+      // 故障转移模式
+      if (isInFailoverQueue) {
+        return {
+          disabled: false,
+          variant: "secondary" as const,
+          className:
+            "bg-blue-100 text-blue-600 hover:bg-blue-200 dark:bg-blue-900/50 dark:text-blue-400 dark:hover:bg-blue-900/70",
+          icon: <Check className="h-4 w-4" />,
+          text: t("failover.inQueue", { defaultValue: "已加入" }),
+        };
+      }
+      return {
+        disabled: false,
+        variant: "default" as const,
+        className:
+          "bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+        icon: <Plus className="h-4 w-4" />,
+        text: t("failover.addQueue", { defaultValue: "加入" }),
+      };
+    }
+
+    // 普通模式
+    if (isCurrent) {
+      return {
+        disabled: true,
+        variant: "secondary" as const,
+        className:
+          "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
+        icon: <Check className="h-4 w-4" />,
+        text: t("provider.inUse"),
+      };
+    }
+
+    return {
+      disabled: false,
+      variant: "default" as const,
+      className: isProxyTakeover
+        ? "bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
+        : "",
+      icon: <Play className="h-4 w-4" />,
+      text: t("provider.enable"),
+    };
+  };
+
+  const buttonState = getMainButtonState();
+
  return (
    <div className="flex items-center gap-1.5">
      <Button
        size="sm"
-        variant={isCurrent ? "secondary" : "default"}
-        onClick={onSwitch}
-        disabled={isCurrent}
-        className={cn(
-          "w-[4.5rem] px-2.5",
-          isCurrent &&
-            "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
-          // 代理接管模式下启用按钮使用绿色
-          !isCurrent &&
-            isProxyTakeover &&
-            "bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
-        )}
+        variant={buttonState.variant}
+        onClick={handleMainButtonClick}
+        disabled={buttonState.disabled}
+        className={cn("w-[4.5rem] px-2.5", buttonState.className)}
      >
-        {isCurrent ? (
-          <>
-            <Check className="h-4 w-4" />
-            {t("provider.inUse")}
-          </>
-        ) : (
-          <>
-            <Play className="h-4 w-4" />
-            {t("provider.enable")}
-          </>
-        )}
+        {buttonState.icon}
+        {buttonState.text}
      </Button>

      <div className="flex items-center gap-1">
@@ -12,6 +12,7 @@ import { ProviderActions } from "@/components/providers/ProviderActions";
 import { ProviderIcon } from "@/components/ProviderIcon";
 import UsageFooter from "@/components/UsageFooter";
 import { ProviderHealthBadge } from "@/components/providers/ProviderHealthBadge";
+import { FailoverPriorityBadge } from "@/components/providers/FailoverPriorityBadge";
 import { useProviderHealth } from "@/lib/query/failover";
 import { useUsageQuery } from "@/lib/query/queries";

@@ -36,6 +37,12 @@ interface ProviderCardProps {
  isProxyRunning: boolean;
  isProxyTakeover?: boolean; // 代理接管模式（Live配置已被接管，切换为热切换）
  dragHandleProps?: DragHandleProps;
+  // 故障转移相关
+  isAutoFailoverEnabled?: boolean; // 是否开启自动故障转移
+  failoverPriority?: number; // 故障转移优先级（1 = P1, 2 = P2, ...）
+  isInFailoverQueue?: boolean; // 是否在故障转移队列中
+  onToggleFailover?: (enabled: boolean) => void; // 切换故障转移队列
+  activeProviderId?: string; // 代理当前实际使用的供应商 ID（用于故障转移模式下标注绿色边框）
 }

 const extractApiUrl = (provider: Provider, fallbackText: string) => {
@@ -88,6 +95,12 @@ export function ProviderCard({
  isProxyRunning,
  isProxyTakeover = false,
  dragHandleProps,
+  // 故障转移相关
+  isAutoFailoverEnabled = false,
+  failoverPriority,
+  isInFailoverQueue = false,
+  onToggleFailover,
+  activeProviderId,
 }: ProviderCardProps) {
  const { t } = useTranslation();

@@ -148,21 +161,32 @@ export function ProviderCard({
    onOpenWebsite(displayUrl);
  };

+  // 判断是否是"当前使用中"的供应商
+  // - 故障转移模式：代理实际使用的供应商（activeProviderId）
+  // - 代理接管模式（非故障转移）：isCurrent
+  // - 普通模式：isCurrent
+  const isActiveProvider = isAutoFailoverEnabled
+    ? activeProviderId === provider.id
+    : isCurrent;
+
+  // 判断是否使用绿色（代理接管模式）还是蓝色（普通模式）
+  const shouldUseGreen = isProxyTakeover && isActiveProvider;
+  const shouldUseBlue = !isProxyTakeover && isActiveProvider;
+
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-xl border border-border p-4 transition-all duration-300",
        "bg-card text-card-foreground group",
-        // 代理接管模式下 hover 使用绿色边框，否则使用蓝色
-        isProxyTakeover
+        // hover 时的边框效果
+        isAutoFailoverEnabled || isProxyTakeover
          ? "hover:border-emerald-500/50"
          : "hover:border-border-active",
-        // 代理接管模式下当前供应商使用绿色边框
-        isProxyTakeover && isCurrent
-          ? "border-emerald-500/60 shadow-sm shadow-emerald-500/10"
-          : isCurrent
-            ? "border-primary/50 shadow-sm"
-            : "hover:shadow-sm",
+        // 当前激活的供应商边框样式
+        shouldUseGreen &&
+          "border-emerald-500/60 shadow-sm shadow-emerald-500/10",
+        shouldUseBlue && "border-blue-500/60 shadow-sm shadow-blue-500/10",
+        !isActiveProvider && "hover:shadow-sm",
        dragHandleProps?.isDragging &&
          "cursor-grabbing border-primary shadow-lg scale-105 z-10",
      )}
@@ -170,11 +194,11 @@ export function ProviderCard({
      <div
        className={cn(
          "absolute inset-0 bg-gradient-to-r to-transparent transition-opacity duration-500 pointer-events-none",
-          // 代理接管模式下使用绿色渐变，否则使用蓝色主色调
-          isProxyTakeover && isCurrent
-            ? "from-emerald-500/10"
-            : "from-primary/10",
-          isCurrent ? "opacity-100" : "opacity-0",
+          // 代理接管模式使用绿色渐变，普通模式使用蓝色渐变
+          shouldUseGreen && "from-emerald-500/10",
+          shouldUseBlue && "from-blue-500/10",
+          !isActiveProvider && "from-primary/10",
+          isActiveProvider ? "opacity-100" : "opacity-0",
        )}
      />
      <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -209,13 +233,20 @@ export function ProviderCard({
                {provider.name}
              </h3>

-              {/* 健康状态徽章和优先级 */}
-              {isProxyRunning && health && (
+              {/* 健康状态徽章 */}
+              {isProxyRunning && isInFailoverQueue && health && (
                <ProviderHealthBadge
                  consecutiveFailures={health.consecutive_failures}
                />
              )}

+              {/* 故障转移优先级徽章 */}
+              {isAutoFailoverEnabled &&
+                isInFailoverQueue &&
+                failoverPriority && (
+                  <FailoverPriorityBadge priority={failoverPriority} />
+                )}
+
              {provider.category === "third_party" &&
                provider.meta?.isPartner && (
                  <span
@@ -308,6 +339,10 @@ export function ProviderCard({
              onTest={onTest ? () => onTest(provider) : undefined}
              onConfigureUsage={() => onConfigureUsage(provider)}
              onDelete={() => onDelete(provider)}
+              // 故障转移相关
+              isAutoFailoverEnabled={isAutoFailoverEnabled}
+              isInFailoverQueue={isInFailoverQueue}
+              onToggleFailover={onToggleFailover}
            />
          </div>
        </div>
@@ -21,6 +21,13 @@ import { useDragSort } from "@/hooks/useDragSort";
 import { useStreamCheck } from "@/hooks/useStreamCheck";
 import { ProviderCard } from "@/components/providers/ProviderCard";
 import { ProviderEmptyState } from "@/components/providers/ProviderEmptyState";
+import {
+  useAutoFailoverEnabled,
+  useFailoverQueue,
+  useAddToFailoverQueue,
+  useRemoveFromFailoverQueue,
+} from "@/lib/query/failover";
+import { useCallback } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";

@@ -38,6 +45,7 @@ interface ProviderListProps {
  isLoading?: boolean;
  isProxyRunning?: boolean; // 代理服务运行状态
  isProxyTakeover?: boolean; // 代理接管模式（Live配置已被接管）
+  activeProviderId?: string; // 代理当前实际使用的供应商 ID（用于故障转移模式下标注绿色边框）
 }

 export function ProviderList({
@@ -52,18 +60,62 @@ export function ProviderList({
  onOpenWebsite,
  onCreate,
  isLoading = false,
-  isProxyRunning = false, // 默认值为 false
-  isProxyTakeover = false, // 默认值为 false
+  isProxyRunning = false,
+  isProxyTakeover = false,
+  activeProviderId,
 }: ProviderListProps) {
  const { t } = useTranslation();
  const { sortedProviders, sensors, handleDragEnd } = useDragSort(
    providers,
-    appId
+    appId,
  );

  // 流式健康检查
  const { checkProvider, isChecking } = useStreamCheck(appId);

+  // 故障转移相关
+  const { data: isAutoFailoverEnabled } = useAutoFailoverEnabled(appId);
+  const { data: failoverQueue } = useFailoverQueue(appId);
+  const addToQueue = useAddToFailoverQueue();
+  const removeFromQueue = useRemoveFromFailoverQueue();
+
+  // 联动状态：只有当前应用开启代理接管且故障转移开启时才启用故障转移模式
+  const isFailoverModeActive =
+    isProxyTakeover === true && isAutoFailoverEnabled === true;
+
+  // 计算供应商在故障转移队列中的优先级（基于 sortIndex 排序）
+  const getFailoverPriority = useCallback(
+    (providerId: string): number | undefined => {
+      if (!isFailoverModeActive || !failoverQueue) return undefined;
+      const index = failoverQueue.findIndex(
+        (item) => item.providerId === providerId,
+      );
+      return index >= 0 ? index + 1 : undefined;
+    },
+    [isFailoverModeActive, failoverQueue],
+  );
+
+  // 判断供应商是否在故障转移队列中
+  const isInFailoverQueue = useCallback(
+    (providerId: string): boolean => {
+      if (!isFailoverModeActive || !failoverQueue) return false;
+      return failoverQueue.some((item) => item.providerId === providerId);
+    },
+    [isFailoverModeActive, failoverQueue],
+  );
+
+  // 切换供应商的故障转移队列状态
+  const handleToggleFailover = useCallback(
+    (providerId: string, enabled: boolean) => {
+      if (enabled) {
+        addToQueue.mutate({ appType: appId, providerId });
+      } else {
+        removeFromQueue.mutate({ appType: appId, providerId });
+      }
+    },
+    [appId, addToQueue, removeFromQueue],
+  );
+
  const handleTest = (provider: Provider) => {
    checkProvider(provider.id, provider.name);
  };
@@ -106,7 +158,7 @@ export function ProviderList({
    return sortedProviders.filter((provider) => {
      const fields = [provider.name, provider.notes, provider.websiteUrl];
      return fields.some((field) =>
-        field?.toString().toLowerCase().includes(keyword)
+        field?.toString().toLowerCase().includes(keyword),
      );
    });
  }, [searchTerm, sortedProviders]);
@@ -155,6 +207,14 @@ export function ProviderList({
              isTesting={isChecking(provider.id)}
              isProxyRunning={isProxyRunning}
              isProxyTakeover={isProxyTakeover}
+              // 故障转移相关：联动状态
+              isAutoFailoverEnabled={isFailoverModeActive}
+              failoverPriority={getFailoverPriority(provider.id)}
+              isInFailoverQueue={isInFailoverQueue(provider.id)}
+              onToggleFailover={(enabled) =>
+                handleToggleFailover(provider.id, enabled)
+              }
+              activeProviderId={activeProviderId}
            />
          ))}
        </div>
@@ -255,6 +315,12 @@ interface SortableProviderCardProps {
  isTesting: boolean;
  isProxyRunning: boolean;
  isProxyTakeover: boolean;
+  // 故障转移相关
+  isAutoFailoverEnabled: boolean;
+  failoverPriority?: number;
+  isInFailoverQueue: boolean;
+  onToggleFailover: (enabled: boolean) => void;
+  activeProviderId?: string;
 }

 function SortableProviderCard({
@@ -271,6 +337,11 @@ function SortableProviderCard({
  isTesting,
  isProxyRunning,
  isProxyTakeover,
+  isAutoFailoverEnabled,
+  failoverPriority,
+  isInFailoverQueue,
+  onToggleFailover,
+  activeProviderId,
 }: SortableProviderCardProps) {
  const {
    setNodeRef,
@@ -309,6 +380,12 @@ function SortableProviderCard({
          listeners,
          isDragging,
        }}
+        // 故障转移相关
+        isAutoFailoverEnabled={isAutoFailoverEnabled}
+        failoverPriority={failoverPriority}
+        isInFailoverQueue={isInFailoverQueue}
+        onToggleFailover={onToggleFailover}
+        activeProviderId={activeProviderId}
      />
    </div>
  );
@@ -12,14 +12,14 @@ import {
 } from "@/lib/query/failover";

 export interface AutoFailoverConfigPanelProps {
-  enabled: boolean;
-  onEnabledChange: (enabled: boolean) => void;
+  enabled?: boolean;
+  onEnabledChange?: (enabled: boolean) => void;
 }

 export function AutoFailoverConfigPanel({
-  enabled,
+  enabled = true,
  onEnabledChange: _onEnabledChange,
-}: AutoFailoverConfigPanelProps) {
+}: AutoFailoverConfigPanelProps = {}) {
  // Note: onEnabledChange is currently unused but kept in the interface
  // for potential future use by parent components
  void _onEnabledChange;
@@ -2,37 +2,14 @@
 * 故障转移队列管理组件
 *
 * 允许用户管理代理模式下的故障转移队列，支持：
- * - 拖拽排序
 * - 添加/移除供应商
- * - 启用/禁用队列项
+ * - 队列顺序基于首页供应商列表的 sort_index
 */

-import { useState, useCallback, useMemo } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { CSS } from "@dnd-kit/utilities";
-import { DndContext, closestCenter } from "@dnd-kit/core";
-import {
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import {
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from "@dnd-kit/core";
-import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 import { toast } from "sonner";
-import {
-  GripVertical,
-  Plus,
-  Trash2,
-  Loader2,
-  Info,
-  AlertTriangle,
-} from "lucide-react";
+import { Plus, Trash2, Loader2, Info, AlertTriangle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -51,8 +28,8 @@ import {
  useAvailableProvidersForFailover,
  useAddToFailoverQueue,
  useRemoveFromFailoverQueue,
-  useReorderFailoverQueue,
-  useSetFailoverItemEnabled,
+  useAutoFailoverEnabled,
+  useSetAutoFailoverEnabled,
 } from "@/lib/query/failover";

 interface FailoverQueueManagerProps {
@@ -67,6 +44,10 @@ export function FailoverQueueManager({
  const { t } = useTranslation();
  const [selectedProviderId, setSelectedProviderId] = useState<string>("");

+  // 故障转移开关状态（每个应用独立）
+  const { data: isFailoverEnabled = false } = useAutoFailoverEnabled(appType);
+  const setFailoverEnabled = useSetAutoFailoverEnabled();
+
  // 查询数据
  const {
    data: queue,
@@ -79,59 +60,11 @@ export function FailoverQueueManager({
  // Mutations
  const addToQueue = useAddToFailoverQueue();
  const removeFromQueue = useRemoveFromFailoverQueue();
-  const reorderQueue = useReorderFailoverQueue();
-  const setItemEnabled = useSetFailoverItemEnabled();

-  // 拖拽配置
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: 8 },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  // 排序后的队列
-  const sortedQueue = useMemo(() => {
-    if (!queue) return [];
-    return [...queue].sort((a, b) => a.queueOrder - b.queueOrder);
-  }, [queue]);
-
-  // 处理拖拽结束
-  const handleDragEnd = useCallback(
-    async (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (!over || active.id === over.id || !sortedQueue) return;
-
-      const oldIndex = sortedQueue.findIndex(
-        (item) => item.providerId === active.id,
-      );
-      const newIndex = sortedQueue.findIndex(
-        (item) => item.providerId === over.id,
-      );
-
-      if (oldIndex === -1 || newIndex === -1) return;
-
-      const reordered = arrayMove(sortedQueue, oldIndex, newIndex);
-      const providerIds = reordered.map((item) => item.providerId);
-
-      try {
-        await reorderQueue.mutateAsync({ appType, providerIds });
-        toast.success(
-          t("proxy.failoverQueue.reorderSuccess", "队列顺序已更新"),
-          { closeButton: true },
-        );
-      } catch (error) {
-        toast.error(
-          t("proxy.failoverQueue.reorderFailed", "更新顺序失败") +
-            ": " +
-            String(error),
-        );
-      }
-    },
-    [sortedQueue, appType, reorderQueue, t],
-  );
+  // 切换故障转移开关
+  const handleToggleFailover = (enabled: boolean) => {
+    setFailoverEnabled.mutate({ appType, enabled });
+  };

  // 添加供应商到队列
  const handleAddProvider = async () => {
@@ -171,19 +104,6 @@ export function FailoverQueueManager({
    }
  };

-  // 切换启用状态
-  const handleToggleEnabled = async (providerId: string, enabled: boolean) => {
-    try {
-      await setItemEnabled.mutateAsync({ appType, providerId, enabled });
-    } catch (error) {
-      toast.error(
-        t("proxy.failoverQueue.toggleFailed", "状态更新失败") +
-          ": " +
-          String(error),
-      );
-    }
-  };
-
  if (isQueueLoading) {
    return (
      <div className="flex items-center justify-center p-8">
@@ -203,13 +123,41 @@ export function FailoverQueueManager({

  return (
    <div className="space-y-4">
+      {/* 自动故障转移开关 */}
+      <div className="flex items-center justify-between p-4 rounded-lg bg-muted/50 border border-border/50">
+        <div className="space-y-0.5">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">
+              {t("proxy.failover.autoSwitch", {
+                defaultValue: "自动故障转移",
+              })}
+            </span>
+            {isFailoverEnabled && (
+              <span className="px-2 py-0.5 text-xs rounded-full bg-emerald-500/20 text-emerald-600 dark:text-emerald-400">
+                {t("common.enabled", { defaultValue: "已开启" })}
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {t("proxy.failover.autoSwitchDescription", {
+              defaultValue: "开启后，请求失败时自动切换到队列中的下一个供应商",
+            })}
+          </p>
+        </div>
+        <Switch
+          checked={isFailoverEnabled}
+          onCheckedChange={handleToggleFailover}
+          disabled={disabled || setFailoverEnabled.isPending}
+        />
+      </div>
+
      {/* 说明信息 */}
      <Alert className="border-blue-500/40 bg-blue-500/10">
        <Info className="h-4 w-4" />
        <AlertDescription className="text-sm">
          {t(
            "proxy.failoverQueue.info",
-            "当前激活的供应商始终优先。当请求失败时，系统会按队列顺序依次尝试其他供应商。",
+            "队列顺序与首页供应商列表顺序一致。当请求失败时，系统会按顺序依次尝试队列中的供应商。",
          )}
        </AlertDescription>
      </Alert>
@@ -260,7 +208,7 @@ export function FailoverQueueManager({
      </div>

      {/* 队列列表 */}
-      {sortedQueue.length === 0 ? (
+      {!queue || queue.length === 0 ? (
        <div className="rounded-lg border border-dashed border-muted-foreground/40 p-8 text-center">
          <p className="text-sm text-muted-foreground">
            {t(
@@ -270,39 +218,26 @@ export function FailoverQueueManager({
          </p>
        </div>
      ) : (
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleDragEnd}
-        >
-          <SortableContext
-            items={sortedQueue.map((item) => item.providerId)}
-            strategy={verticalListSortingStrategy}
-          >
-            <div className="space-y-2">
-              {sortedQueue.map((item, index) => (
-                <SortableQueueItem
-                  key={item.providerId}
-                  item={item}
-                  index={index}
-                  disabled={disabled}
-                  onToggleEnabled={handleToggleEnabled}
-                  onRemove={handleRemoveProvider}
-                  isRemoving={removeFromQueue.isPending}
-                  isToggling={setItemEnabled.isPending}
-                />
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
+        <div className="space-y-2">
+          {queue.map((item, index) => (
+            <QueueItem
+              key={item.providerId}
+              item={item}
+              index={index}
+              disabled={disabled}
+              onRemove={handleRemoveProvider}
+              isRemoving={removeFromQueue.isPending}
+            />
+          ))}
+        </div>
      )}

      {/* 队列说明 */}
-      {sortedQueue.length > 0 && (
+      {queue && queue.length > 0 && (
        <p className="text-xs text-muted-foreground">
          {t(
-            "proxy.failoverQueue.dragHint",
-            "拖拽供应商可调整故障转移顺序，序号越小优先级越高。",
+            "proxy.failoverQueue.orderHint",
+            "队列顺序与首页供应商列表顺序一致，可在首页拖拽调整顺序。",
          )}
        </p>
      )}
@@ -310,65 +245,29 @@ export function FailoverQueueManager({
  );
 }

-interface SortableQueueItemProps {
+interface QueueItemProps {
  item: FailoverQueueItem;
  index: number;
  disabled: boolean;
-  onToggleEnabled: (providerId: string, enabled: boolean) => void;
  onRemove: (providerId: string) => void;
  isRemoving: boolean;
-  isToggling: boolean;
 }

-function SortableQueueItem({
+function QueueItem({
  item,
  index,
  disabled,
-  onToggleEnabled,
  onRemove,
  isRemoving,
-  isToggling,
-}: SortableQueueItemProps) {
+}: QueueItemProps) {
  const { t } = useTranslation();
-  const {
-    setNodeRef,
-    attributes,
-    listeners,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.providerId, disabled });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };

  return (
    <div
-      ref={setNodeRef}
-      style={style}
      className={cn(
        "flex items-center gap-3 rounded-lg border bg-card p-3 transition-colors",
-        isDragging && "opacity-50 shadow-lg",
-        !item.enabled && "opacity-60",
      )}
    >
-      {/* 拖拽手柄 */}
-      <button
-        type="button"
-        className={cn(
-          "cursor-grab touch-none text-muted-foreground hover:text-foreground",
-          disabled && "cursor-not-allowed opacity-50",
-        )}
-        {...attributes}
-        {...listeners}
-        disabled={disabled}
-        aria-label={t("provider.dragHandle", "拖拽排序")}
-      >
-        <GripVertical className="h-5 w-5" />
-      </button>
-
      {/* 序号 */}
      <div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium">
        {index + 1}
@@ -376,24 +275,11 @@ function SortableQueueItem({

      {/* 供应商名称 */}
      <div className="flex-1 min-w-0">
-        <span
-          className={cn(
-            "text-sm font-medium truncate block",
-            !item.enabled && "text-muted-foreground line-through",
-          )}
-        >
+        <span className="text-sm font-medium truncate block">
          {item.providerName}
        </span>
      </div>

-      {/* 启用开关 */}
-      <Switch
-        checked={item.enabled}
-        onCheckedChange={(checked) => onToggleEnabled(item.providerId, checked)}
-        disabled={disabled || isToggling}
-        aria-label={t("proxy.failoverQueue.toggleEnabled", "启用/禁用")}
-      />
-
      {/* 删除按钮 */}
      <Button
        variant="ghost"
@@ -147,13 +147,10 @@ export function ProxyPanel() {
                    <ProviderQueueGroup
                      appType="claude"
                      appLabel="Claude"
-                      targets={claudeQueue
-                        .filter((item) => item.enabled)
-                        .sort((a, b) => a.queueOrder - b.queueOrder)
-                        .map((item) => ({
-                          id: item.providerId,
-                          name: item.providerName,
-                        }))}
+                      targets={claudeQueue.map((item) => ({
+                        id: item.providerId,
+                        name: item.providerName,
+                      }))}
                      status={status}
                    />
                  )}
@@ -163,13 +160,10 @@ export function ProxyPanel() {
                    <ProviderQueueGroup
                      appType="codex"
                      appLabel="Codex"
-                      targets={codexQueue
-                        .filter((item) => item.enabled)
-                        .sort((a, b) => a.queueOrder - b.queueOrder)
-                        .map((item) => ({
-                          id: item.providerId,
-                          name: item.providerName,
-                        }))}
+                      targets={codexQueue.map((item) => ({
+                        id: item.providerId,
+                        name: item.providerName,
+                      }))}
                      status={status}
                    />
                  )}
@@ -179,13 +173,10 @@ export function ProxyPanel() {
                    <ProviderQueueGroup
                      appType="gemini"
                      appLabel="Gemini"
-                      targets={geminiQueue
-                        .filter((item) => item.enabled)
-                        .sort((a, b) => a.queueOrder - b.queueOrder)
-                        .map((item) => ({
-                          id: item.providerId,
-                          name: item.providerName,
-                        }))}
+                      targets={geminiQueue.map((item) => ({
+                        id: item.providerId,
+                        name: item.providerName,
+                      }))}
                      status={status}
                    />
                  )}
@@ -47,10 +47,6 @@ import type { SettingsFormState } from "@/hooks/useSettings";
 import { Switch } from "@/components/ui/switch";
 import { Badge } from "@/components/ui/badge";
 import { useProxyStatus } from "@/hooks/useProxyStatus";
-import {
-  useAutoFailoverEnabled,
-  useSetAutoFailoverEnabled,
-} from "@/lib/query/failover";

 interface SettingsDialogProps {
  open: boolean;
@@ -187,17 +183,9 @@ export function SettingsPage({
    isPending: isProxyPending,
  } = useProxyStatus();

-  // 使用持久化的自动故障转移开关状态
-  const { data: failoverEnabled = false } = useAutoFailoverEnabled();
-  const setAutoFailoverEnabled = useSetAutoFailoverEnabled();
-
  const handleToggleProxy = async (checked: boolean) => {
    try {
      if (!checked) {
-        // 关闭代理时，同时关闭故障转移
-        if (failoverEnabled) {
-          setAutoFailoverEnabled.mutate(false);
-        }
        await stopWithRestore();
      } else {
        await startProxyServer();
@@ -207,19 +195,6 @@ export function SettingsPage({
    }
  };

-  // 处理故障转移开关：开启时自动启动代理
-  const handleToggleFailover = async (checked: boolean) => {
-    try {
-      if (checked && !isRunning) {
-        // 开启故障转移时，先启动代理
-        await startProxyServer();
-      }
-      setAutoFailoverEnabled.mutate(checked);
-    } catch (error) {
-      console.error("Toggle failover failed:", error);
-    }
-  };
-
  return (
    <div className="mx-auto max-w-[56rem] flex flex-col h-[calc(100vh-8rem)] overflow-hidden px-6">
      {isBusy ? (
@@ -380,37 +355,36 @@ export function SettingsPage({

                    <AccordionItem
                      value="failover"
-                      className="rounded-xl glass-card overflow-hidden [&[data-state=open]>.accordion-header]:bg-muted/50"
+                      className="rounded-xl glass-card overflow-hidden"
                    >
-                      <AccordionPrimitive.Header className="accordion-header flex items-center justify-between px-6 py-4 hover:bg-muted/50">
-                        <AccordionPrimitive.Trigger className="flex flex-1 items-center justify-between hover:no-underline [&[data-state=open]>svg]:rotate-180">
-                          <div className="flex items-center gap-3">
-                            <Activity className="h-5 w-5 text-orange-500" />
-                            <div className="text-left">
-                              <h3 className="text-base font-semibold">
-                                {t("settings.advanced.failover.title")}
-                              </h3>
-                              <p className="text-sm text-muted-foreground font-normal">
-                                {t("settings.advanced.failover.description")}
-                              </p>
-                            </div>
+                      <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
+                        <div className="flex items-center gap-3">
+                          <Activity className="h-5 w-5 text-orange-500" />
+                          <div className="text-left">
+                            <h3 className="text-base font-semibold">
+                              {t("settings.advanced.failover.title")}
+                            </h3>
+                            <p className="text-sm text-muted-foreground font-normal">
+                              {t("settings.advanced.failover.description")}
+                            </p>
                          </div>
-                          <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-                        </AccordionPrimitive.Trigger>
-
-                        <div className="flex items-center gap-2 pl-4">
-                          <Switch
-                            checked={failoverEnabled && isRunning}
-                            onCheckedChange={handleToggleFailover}
-                            disabled={
-                              setAutoFailoverEnabled.isPending || isProxyPending
-                            }
-                          />
                        </div>
-                      </AccordionPrimitive.Header>
+                      </AccordionTrigger>
                      <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
                        <div className="space-y-6">
-                          {/* 故障转移队列管理 */}
+                          {/* 代理未运行时的提示 */}
+                          {!isRunning && (
+                            <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+                              <p className="text-sm text-yellow-600 dark:text-yellow-400">
+                                {t("proxy.failover.proxyRequired", {
+                                  defaultValue:
+                                    "需要先启动代理服务才能配置故障转移",
+                                })}
+                              </p>
+                            </div>
+                          )}
+
+                          {/* 故障转移队列管理 - 每个应用独立 */}
                          <div className="space-y-4">
                            <div>
                              <h4 className="text-sm font-semibold">
@@ -429,30 +403,27 @@ export function SettingsPage({
                              <TabsContent value="claude" className="mt-4">
                                <FailoverQueueManager
                                  appType="claude"
-                                  disabled={!failoverEnabled || !isRunning}
+                                  disabled={!isRunning}
                                />
                              </TabsContent>
                              <TabsContent value="codex" className="mt-4">
                                <FailoverQueueManager
                                  appType="codex"
-                                  disabled={!failoverEnabled || !isRunning}
+                                  disabled={!isRunning}
                                />
                              </TabsContent>
                              <TabsContent value="gemini" className="mt-4">
                                <FailoverQueueManager
                                  appType="gemini"
-                                  disabled={!failoverEnabled || !isRunning}
+                                  disabled={!isRunning}
                                />
                              </TabsContent>
                            </Tabs>
                          </div>

-                          {/* 熔断器配置 */}
+                          {/* 熔断器配置 - 全局共享 */}
                          <div className="border-t border-border/50 pt-6">
-                            <AutoFailoverConfigPanel
-                              enabled={failoverEnabled && isRunning}
-                              onEnabledChange={handleToggleFailover}
-                            />
+                            <AutoFailoverConfigPanel />
                          </div>
                        </div>
                      </AccordionContent>
@@ -75,6 +75,11 @@ export function useDragSort(providers: Record<string, Provider>, appId: AppId) {
          queryKey: ["providers", appId],
        });

+        // 刷新故障转移队列（因为队列顺序依赖 sort_index）
+        await queryClient.invalidateQueries({
+          queryKey: ["failoverQueue", appId],
+        });
+
        // 更新托盘菜单以反映新的排序（失败不影响主操作）
        try {
          await providersApi.updateTrayMenu();
@@ -73,8 +73,11 @@ export function useProxyStatus() {
      );
      queryClient.invalidateQueries({ queryKey: ["proxyStatus"] });
      queryClient.invalidateQueries({ queryKey: ["proxyTakeoverStatus"] });
-      // 清除所有供应商健康状态缓存（后端已清空数据库记录）
-      queryClient.invalidateQueries({ queryKey: ["providerHealth"] });
+      // 彻底删除所有供应商健康状态缓存（后端已清空数据库记录）
+      queryClient.removeQueries({ queryKey: ["providerHealth"] });
+      // 彻底删除所有熔断器统计缓存（代理停止后熔断器状态已重置）
+      queryClient.removeQueries({ queryKey: ["circuitBreakerStats"] });
+      // 注意：故障转移队列和开关状态会保留，不需要刷新
    },
    onError: (error: Error) => {
      const detail =
@@ -6,10 +6,12 @@ import {
  type StreamCheckResult,
 } from "@/lib/api/model-test";
 import type { AppId } from "@/lib/api";
+import { useResetCircuitBreaker } from "@/lib/query/failover";

 export function useStreamCheck(appId: AppId) {
  const { t } = useTranslation();
  const [checkingIds, setCheckingIds] = useState<Set<string>>(new Set());
+  const resetCircuitBreaker = useResetCircuitBreaker();

  const checkProvider = useCallback(
    async (
@@ -30,6 +32,9 @@ export function useStreamCheck(appId: AppId) {
            }),
            { closeButton: true },
          );
+
+          // 测试通过后重置熔断器状态
+          resetCircuitBreaker.mutate({ providerId, appType: appId });
        } else if (result.status === "degraded") {
          toast.warning(
            t("streamCheck.degraded", {
@@ -38,6 +43,9 @@ export function useStreamCheck(appId: AppId) {
              defaultValue: `${providerName} 响应较慢 (${result.responseTimeMs}ms)`,
            }),
          );
+
+          // 降级状态也重置熔断器，因为至少能通信
+          resetCircuitBreaker.mutate({ providerId, appType: appId });
        } else {
          toast.error(
            t("streamCheck.failed", {
@@ -66,7 +74,7 @@ export function useStreamCheck(appId: AppId) {
        });
      }
    },
-    [appId, t],
+    [appId, t, resetCircuitBreaker],
  );

  const isChecking = useCallback(
@@ -84,34 +84,16 @@ export const failoverApi = {
    return invoke("remove_from_failover_queue", { appType, providerId });
  },

-  // 重新排序故障转移队列
-  async reorderFailoverQueue(
-    appType: string,
-    providerIds: string[],
-  ): Promise<void> {
-    return invoke("reorder_failover_queue", { appType, providerIds });
+  // 获取指定应用的自动故障转移开关状态
+  async getAutoFailoverEnabled(appType: string): Promise<boolean> {
+    return invoke("get_auto_failover_enabled", { appType });
  },

-  // 设置故障转移队列项的启用状态
-  async setFailoverItemEnabled(
+  // 设置指定应用的自动故障转移开关状态
+  async setAutoFailoverEnabled(
    appType: string,
-    providerId: string,
    enabled: boolean,
  ): Promise<void> {
-    return invoke("set_failover_item_enabled", {
-      appType,
-      providerId,
-      enabled,
-    });
-  },
-
-  // 获取自动故障转移总开关状态
-  async getAutoFailoverEnabled(): Promise<boolean> {
-    return invoke("get_auto_failover_enabled");
-  },
-
-  // 设置自动故障转移总开关状态
-  async setAutoFailoverEnabled(enabled: boolean): Promise<void> {
-    return invoke("set_auto_failover_enabled", { enabled });
+    return invoke("set_auto_failover_enabled", { appType, enabled });
  },
 };
@@ -18,6 +18,9 @@ export function useProviderHealth(providerId: string, appType: string) {

 /**
 * 重置熔断器
+ *
+ * 重置后后端会检查是否应该切回优先级更高的供应商，
+ * 因此需要同时刷新供应商列表和代理状态。
 */
 export function useResetCircuitBreaker() {
  const queryClient = useQueryClient();
@@ -35,6 +38,14 @@ export function useResetCircuitBreaker() {
      queryClient.invalidateQueries({
        queryKey: ["providerHealth", variables.providerId, variables.appType],
      });
+      // 刷新供应商列表（因为可能发生了自动恢复切换）
+      queryClient.invalidateQueries({
+        queryKey: ["providers", variables.appType],
+      });
+      // 刷新代理状态（更新 active_targets）
+      queryClient.invalidateQueries({
+        queryKey: ["proxyStatus"],
+      });
    },
  });
 }
@@ -120,6 +131,9 @@ export function useAddToFailoverQueue() {
      queryClient.invalidateQueries({
        queryKey: ["availableProvidersForFailover", variables.appType],
      });
+      queryClient.invalidateQueries({
+        queryKey: ["providers", variables.appType],
+      });
    },
  });
 }
@@ -145,146 +159,79 @@ export function useRemoveFromFailoverQueue() {
      queryClient.invalidateQueries({
        queryKey: ["availableProvidersForFailover", variables.appType],
      });
-    },
-  });
-}
-
-/**
- * 重新排序故障转移队列
- */
-export function useReorderFailoverQueue() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({
-      appType,
-      providerIds,
-    }: {
-      appType: string;
-      providerIds: string[];
-    }) => failoverApi.reorderFailoverQueue(appType, providerIds),
-    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({
-        queryKey: ["failoverQueue", variables.appType],
+        queryKey: ["providers", variables.appType],
      });
-    },
-  });
-}
-
-/**
- * 设置故障转移队列项的启用状态
- * 使用乐观更新(Optimistic Update)以提供即时反馈
- */
-export function useSetFailoverItemEnabled() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({
-      appType,
-      providerId,
-      enabled,
-    }: {
-      appType: string;
-      providerId: string;
-      enabled: boolean;
-    }) => failoverApi.setFailoverItemEnabled(appType, providerId, enabled),
-
-    // 乐观更新：立即更新缓存中的数据
-    onMutate: async (variables) => {
-      // 取消正在进行的查询，防止覆盖乐观更新
-      await queryClient.cancelQueries({
-        queryKey: ["failoverQueue", variables.appType],
-      });
-
-      // 保存之前的数据以便回滚
-      const previousQueue = queryClient.getQueryData<
-        import("@/types/proxy").FailoverQueueItem[]
-      >(["failoverQueue", variables.appType]);
-
-      // 乐观地更新缓存
-      if (previousQueue) {
-        queryClient.setQueryData<import("@/types/proxy").FailoverQueueItem[]>(
-          ["failoverQueue", variables.appType],
-          previousQueue.map((item) =>
-            item.providerId === variables.providerId
-              ? { ...item, enabled: variables.enabled }
-              : item,
-          ),
-        );
-      }
-
-      // 返回上下文供 onError 使用
-      return { previousQueue };
-    },
-
-    // 错误时回滚
-    onError: (_error, variables, context) => {
-      if (context?.previousQueue) {
-        queryClient.setQueryData(
-          ["failoverQueue", variables.appType],
-          context.previousQueue,
-        );
-      }
-    },
-
-    // 无论成功失败，都重新获取最新数据以确保一致性
-    onSettled: (_, __, variables) => {
+      // 清除该供应商的健康状态缓存（退出队列后不再需要健康监控）
      queryClient.invalidateQueries({
-        queryKey: ["failoverQueue", variables.appType],
+        queryKey: ["providerHealth", variables.providerId, variables.appType],
+      });
+      // 清除该供应商的熔断器统计缓存
+      queryClient.invalidateQueries({
+        queryKey: [
+          "circuitBreakerStats",
+          variables.providerId,
+          variables.appType,
+        ],
      });
    },
  });
 }

-// ========== 自动故障转移总开关 Hooks ==========
+// ========== 自动故障转移开关 Hooks ==========

 /**
- * 获取自动故障转移总开关状态
+ * 获取指定应用的自动故障转移开关状态
 */
-export function useAutoFailoverEnabled() {
+export function useAutoFailoverEnabled(appType: string) {
  return useQuery({
-    queryKey: ["autoFailoverEnabled"],
-    queryFn: () => failoverApi.getAutoFailoverEnabled(),
+    queryKey: ["autoFailoverEnabled", appType],
+    queryFn: () => failoverApi.getAutoFailoverEnabled(appType),
    // 默认值为 false（与后端保持一致）
    placeholderData: false,
  });
 }

 /**
- * 设置自动故障转移总开关状态
+ * 设置指定应用的自动故障转移开关状态
 */
 export function useSetAutoFailoverEnabled() {
  const queryClient = useQueryClient();

  return useMutation({
-    mutationFn: (enabled: boolean) =>
-      failoverApi.setAutoFailoverEnabled(enabled),
+    mutationFn: ({ appType, enabled }: { appType: string; enabled: boolean }) =>
+      failoverApi.setAutoFailoverEnabled(appType, enabled),

    // 乐观更新
-    onMutate: async (enabled) => {
-      await queryClient.cancelQueries({ queryKey: ["autoFailoverEnabled"] });
+    onMutate: async ({ appType, enabled }) => {
+      await queryClient.cancelQueries({
+        queryKey: ["autoFailoverEnabled", appType],
+      });
      const previousValue = queryClient.getQueryData<boolean>([
        "autoFailoverEnabled",
+        appType,
      ]);

-      queryClient.setQueryData(["autoFailoverEnabled"], enabled);
+      queryClient.setQueryData(["autoFailoverEnabled", appType], enabled);

-      return { previousValue };
+      return { previousValue, appType };
    },

    // 错误时回滚
-    onError: (_error, _enabled, context) => {
+    onError: (_error, _variables, context) => {
      if (context?.previousValue !== undefined) {
        queryClient.setQueryData(
-          ["autoFailoverEnabled"],
+          ["autoFailoverEnabled", context.appType],
          context.previousValue,
        );
      }
    },

    // 无论成功失败，都重新获取
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["autoFailoverEnabled"] });
+    onSettled: (_, __, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["autoFailoverEnabled", variables.appType],
+      });
    },
  });
 }
@@ -23,6 +23,8 @@ export interface Provider {
  // 图标配置
  icon?: string; // 图标名称（如 "openai", "anthropic"）
  iconColor?: string; // 图标颜色（Hex 格式，如 "#00A67E"）
+  // 是否加入故障转移队列
+  inFailoverQueue?: boolean;
 }

 export interface AppConfig {
@@ -103,7 +103,5 @@ export interface ProxyUsageRecord {
 export interface FailoverQueueItem {
  providerId: string;
  providerName: string;
-  queueOrder: number;
-  enabled: boolean;
-  createdAt: number;
+  sortIndex?: number;
 }