From 99471f6706359ce3598787693a7ac96838d7a186 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Sat, 22 Nov 2025 15:37:52 +0800
Subject: [PATCH] style(providers): optimize card layout and action button
 sizes

Improve provider card visual density and action buttons.
- Reduce icon button sizes for compact layout
- Adjust drag handle and icon sizes
- Tighten spacing between action buttons
- Update hover translate values for better alignment
---
 src/components/providers/ProviderActions.tsx |  9 +++++++--
 src/components/providers/ProviderCard.tsx    | 12 ++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 1f9c1f0..18df7bf 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -21,16 +21,17 @@ export function ProviderActions({
   onDelete,
 }: ProviderActionsProps) {
   const { t } = useTranslation();
+  const iconButtonClass = "h-8 w-8 p-1";
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-1.5">
       <Button
         size="sm"
         variant={isCurrent ? "secondary" : "default"}
         onClick={onSwitch}
         disabled={isCurrent}
         className={cn(
-          "w-20",
+          "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",
         )}
@@ -54,6 +55,7 @@ export function ProviderActions({
           variant="ghost"
           onClick={onEdit}
           title={t("common.edit")}
+          className={iconButtonClass}
         >
           <Edit className="h-4 w-4" />
         </Button>
@@ -63,6 +65,7 @@ export function ProviderActions({
           variant="ghost"
           onClick={onDuplicate}
           title={t("provider.duplicate")}
+          className={iconButtonClass}
         >
           <Copy className="h-4 w-4" />
         </Button>
@@ -72,6 +75,7 @@ export function ProviderActions({
           variant="ghost"
           onClick={onConfigureUsage}
           title={t("provider.configureUsage")}
+          className={iconButtonClass}
         >
           <BarChart3 className="h-4 w-4" />
         </Button>
@@ -82,6 +86,7 @@ export function ProviderActions({
           onClick={isCurrent ? undefined : onDelete}
           title={t("common.delete")}
           className={cn(
+            iconButtonClass,
             !isCurrent && "hover:text-red-500 dark:hover:text-red-400",
             isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
           )}
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 91a433d..1a60cb6 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -125,11 +125,11 @@ export function ProviderCard({
     >
       <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="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex flex-1 items-center gap-3">
+        <div className="flex flex-1 items-center gap-2">
           <button
             type="button"
             className={cn(
-              "flex-shrink-0 cursor-grab active:cursor-grabbing p-2",
+              "-ml-1.5 flex-shrink-0 cursor-grab active:cursor-grabbing p-1.5",
               "text-muted-foreground/50 hover:text-muted-foreground transition-colors",
               dragHandleProps?.isDragging && "cursor-grabbing",
             )}
@@ -141,12 +141,12 @@ export function ProviderCard({
           </button>
 
           {/* 供应商图标 */}
-          <div className="w-10 h-10 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-9 w-9 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">
             <ProviderIcon
               icon={provider.icon}
               name={provider.name}
               color={provider.iconColor}
-              size={28}
+              size={26}
             />
           </div>
 
@@ -196,7 +196,7 @@ export function ProviderCard({
         </div>
 
         <div className="relative flex items-center ml-auto">
-          <div className="ml-auto transition-transform duration-200 group-hover:-translate-x-[11rem] group-focus-within:-translate-x-[11rem] sm:group-hover:-translate-x-[13rem] sm:group-focus-within:-translate-x-[13rem]">
+          <div className="ml-auto transition-transform duration-200 group-hover:-translate-x-[12.25rem] group-focus-within:-translate-x-[12.25rem] sm:group-hover:-translate-x-[14.25rem] sm:group-focus-within:-translate-x-[14.25rem]">
             <UsageFooter
               provider={provider}
               providerId={provider.id}
@@ -207,7 +207,7 @@ export function ProviderCard({
             />
           </div>
 
-          <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-2 opacity-0 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-all duration-200 translate-x-3 group-hover:translate-x-0 group-focus-within:translate-x-0">
+          <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-all duration-200 translate-x-2 group-hover:translate-x-0 group-focus-within:translate-x-0">
             <ProviderActions
               isCurrent={isCurrent}
               onSwitch={() => onSwitch(provider)}