From cbc23764c01f533d335a1f15cc846bdd56a3299c Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 11 Dec 2025 10:21:33 +0800
Subject: [PATCH] style(ui): apply emerald theme when proxy takeover is active

- Change provider card gradient background from hover to selected state
- Use emerald color for card hover border, selected border, and gradient
  when proxy takeover mode is active
- Update "CC Switch" title to emerald when proxy is running
- Update "Enable" button to emerald in proxy takeover mode
---
 src/App.tsx                                  |  8 +++++++-
 src/components/providers/ProviderActions.tsx |  6 ++++++
 src/components/providers/ProviderCard.tsx    | 12 ++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c142cb0c1..7d4a84d55 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import { checkAllEnvConflicts, checkEnvConflicts } from "@/lib/api/env";
 import { useProviderActions } from "@/hooks/useProviderActions";
 import { useProxyStatus } from "@/hooks/useProxyStatus";
 import { extractErrorMessage } from "@/utils/errorUtils";
+import { cn } from "@/lib/utils";
 import { AppSwitcher } from "@/components/AppSwitcher";
 import { ProviderList } from "@/components/providers/ProviderList";
 import { AddProviderDialog } from "@/components/providers/AddProviderDialog";
@@ -417,7 +418,12 @@ function App() {
                     href="https://github.com/farion1231/cc-switch"
                     target="_blank"
                     rel="noreferrer"
-                    className="text-xl font-semibold text-blue-500 transition-colors hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
+                    className={cn(
+                      "text-xl font-semibold transition-colors",
+                      isProxyRunning && isTakeoverActive
+                        ? "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"
+                    )}
                   >
                     CC Switch
                   </a>
diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 4a35f27a0..6b7ab35ff 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -16,6 +16,7 @@ import { cn } from "@/lib/utils";
 interface ProviderActionsProps {
   isCurrent: boolean;
   isTesting?: boolean;
+  isProxyTakeover?: boolean;
   onSwitch: () => void;
   onEdit: () => void;
   onDuplicate: () => void;
@@ -30,6 +31,7 @@ interface ProviderActionsProps {
 export function ProviderActions({
   isCurrent,
   isTesting,
+  isProxyTakeover = false,
   onSwitch,
   onEdit,
   onDuplicate,
@@ -54,6 +56,10 @@ export function ProviderActions({
           "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",
         )}
       >
         {isCurrent ? (
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 6dfedbd38..11e79e8dd 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -157,7 +157,9 @@ export function ProviderCard({
     <div
       className={cn(
         "relative overflow-hidden rounded-xl border border-border p-4 transition-all duration-300",
-        "bg-card text-card-foreground group hover:border-border-active",
+        "bg-card text-card-foreground group",
+        // 代理接管模式下 hover 使用绿色边框，否则使用蓝色
+        isProxyTakeover ? "hover:border-emerald-500/50" : "hover:border-border-active",
         // 代理接管模式下当前供应商使用绿色边框
         isProxyTakeover && isCurrent
           ? "border-emerald-500/60 shadow-sm shadow-emerald-500/10"
@@ -168,7 +170,12 @@ export function ProviderCard({
           "cursor-grabbing border-primary shadow-lg scale-105 z-10",
       )}
     >
-      <div className="absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+      <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"
+      )} />
       <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex flex-1 items-center gap-2">
           <button
@@ -256,6 +263,7 @@ export function ProviderCard({
             <ProviderActions
               isCurrent={isCurrent}
               isTesting={isTesting}
+              isProxyTakeover={isProxyTakeover}
               onSwitch={() => onSwitch(provider)}
               onEdit={() => onEdit(provider)}
               onDuplicate={() => onDuplicate(provider)}