From 4c884a12566a802a4e84387efba40526ed1fe65b Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Mon, 8 Dec 2025 16:53:36 +0800
Subject: [PATCH] refactor(providers): update provider card styling to use
 theme tokens

Replace hardcoded color classes with semantic design tokens:
- Use bg-card, border-border, text-card-foreground instead of glass-card
- Replace gray/white color literals with muted/foreground tokens
- Change proxy target indicator color from purple to green
- Improve hover states with border-border-active
- Ensure consistent dark mode support via CSS variables
---
 src/components/providers/ProviderCard.tsx        | 12 ++++++------
 src/components/providers/ProviderEmptyState.tsx  |  2 +-
 src/components/providers/ProviderHealthBadge.tsx | 13 +++++++------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 47b39c661..e6afe4240 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -229,9 +229,9 @@ export function ProviderCard({
   return (
     <div
       className={cn(
-        "glass-card relative overflow-hidden rounded-xl p-4 transition-all duration-300",
-        "group hover:bg-black/[0.02] dark:hover:bg-white/[0.02] hover:border-primary/50",
-        isCurrent ? "glass-card-active" : "hover:scale-[1.01]",
+        "relative overflow-hidden rounded-xl border border-border p-4 transition-all duration-300",
+        "bg-card text-card-foreground group hover:border-border-active",
+        isCurrent ? "border-primary/50 shadow-sm" : "hover:shadow-sm",
         dragHandleProps?.isDragging &&
           "cursor-grabbing border-primary shadow-lg scale-105 z-10",
       )}
@@ -254,7 +254,7 @@ export function ProviderCard({
           </button>
 
           {/* 供应商图标 */}
-          <div className="h-8 w-8 rounded-lg bg-white/5 flex items-center justify-center border border-gray-200 dark:border-white/10 group-hover:scale-105 transition-transform duration-300">
+          <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center border border-border group-hover:scale-105 transition-transform duration-300">
             <ProviderIcon
               icon={provider.icon}
               name={provider.name}
@@ -316,12 +316,12 @@ export function ProviderCard({
                       handleSetProxyTarget(checked);
                     }}
                     disabled={setProxyTargetMutation.isPending}
-                    className="scale-75 data-[state=checked]:bg-purple-500"
+                    className="scale-75 data-[state=checked]:bg-green-500"
                   />
                   {provider.isProxyTarget && (
                     <Label
                       htmlFor={`proxy-target-switch-${provider.id}`}
-                      className="text-xs font-medium text-purple-500 dark:text-purple-400 cursor-pointer"
+                      className="text-xs font-medium text-green-600 dark:text-green-400 cursor-pointer"
                     >
                       {t("provider.proxyTarget", { defaultValue: "代理目标" })}
                     </Label>
diff --git a/src/components/providers/ProviderEmptyState.tsx b/src/components/providers/ProviderEmptyState.tsx
index c287f2cba..a79de0b1d 100644
--- a/src/components/providers/ProviderEmptyState.tsx
+++ b/src/components/providers/ProviderEmptyState.tsx
@@ -10,7 +10,7 @@ export function ProviderEmptyState({ onCreate }: ProviderEmptyStateProps) {
   const { t } = useTranslation();
 
   return (
-    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-muted-foreground/30 p-10 text-center">
+    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border p-10 text-center">
       <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
         <Users className="h-7 w-7 text-muted-foreground" />
       </div>
diff --git a/src/components/providers/ProviderHealthBadge.tsx b/src/components/providers/ProviderHealthBadge.tsx
index c72667faf..dbacb6caf 100644
--- a/src/components/providers/ProviderHealthBadge.tsx
+++ b/src/components/providers/ProviderHealthBadge.tsx
@@ -28,24 +28,25 @@ export function ProviderHealthBadge({
         label: "正常",
         status: ProviderHealthStatus.Healthy,
         color: "bg-green-500",
-        bgColor: "bg-green-50 dark:bg-green-950",
-        textColor: "text-green-700 dark:text-green-300",
+        // 使用更深/柔和的背景色，去除可能的白色内容感
+        bgColor: "bg-green-500/10",
+        textColor: "text-green-600 dark:text-green-400",
       };
     } else if (consecutiveFailures < 5) {
       return {
         label: "降级",
         status: ProviderHealthStatus.Degraded,
         color: "bg-yellow-500",
-        bgColor: "bg-yellow-50 dark:bg-yellow-950",
-        textColor: "text-yellow-700 dark:text-yellow-300",
+        bgColor: "bg-yellow-500/10",
+        textColor: "text-yellow-600 dark:text-yellow-400",
       };
     } else {
       return {
         label: "熔断",
         status: ProviderHealthStatus.Failed,
         color: "bg-red-500",
-        bgColor: "bg-red-50 dark:bg-red-950",
-        textColor: "text-red-700 dark:text-red-300",
+        bgColor: "bg-red-500/10",
+        textColor: "text-red-600 dark:text-red-400",
       };
     }
   };