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-28 16:56:16 +08:00 · 2025-12-23 12:37:36 +08:00
parent bf570b6d2a
commit 1586451862
38 changed files with 972 additions and 810 deletions
@@ -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>