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
This commit is contained in:
YoVinchen
2025-12-08 16:53:36 +08:00
parent 0210e7991f
commit 4c884a1256
3 changed files with 14 additions and 13 deletions
+6 -6
View File
@@ -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>
@@ -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>
@@ -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",
};
}
};