From 735b3b7d398b5d4cfe4624bd14ad2e6e52af91a2 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 11 Dec 2025 10:51:25 +0800
Subject: [PATCH] style(ui): improve provider card hover animation and layout

- Increase translate offset for usage footer to prevent overlap with action buttons
- Add ease-out timing function and extend duration to 300ms for smoother animation
- Temporarily disable circuit breaker reset button to reduce button clutter
---
 src/components/providers/ProviderActions.tsx | 9 +++++----
 src/components/providers/ProviderCard.tsx    | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 6b7ab35f..c649053c 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -59,7 +59,7 @@ export function ProviderActions({
           // 代理接管模式下启用按钮使用绿色
           !isCurrent &&
             isProxyTakeover &&
-            "bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
+            "bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
         )}
       >
         {isCurrent ? (
@@ -124,7 +124,8 @@ export function ProviderActions({
         </Button>
 
         {/* 重置熔断器按钮 - 代理目标启用时显示 */}
-        {onResetCircuitBreaker && isProxyTarget && (
+        {/* TODO: 暂时隐藏，后续根据故障转移功能启用 */}
+        {/* {onResetCircuitBreaker && isProxyTarget && (
           <Button
             size="icon"
             variant="ghost"
@@ -147,7 +148,7 @@ export function ProviderActions({
           >
             <RotateCcw className="h-4 w-4" />
           </Button>
-        )}
+        )} */}
 
         <Button
           size="icon"
@@ -157,7 +158,7 @@ export function ProviderActions({
           className={cn(
             iconButtonClass,
             !isCurrent && "hover:text-red-500 dark:hover:text-red-400",
-            isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
+            isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground"
           )}
         >
           <Trash2 className="h-4 w-4" />
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 11e79e8d..2f8029b2 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -248,7 +248,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-[12.25rem] group-focus-within:-translate-x-[12.25rem] sm:group-hover:-translate-x-[14.25rem] sm:group-focus-within:-translate-x-[14.25rem]">
+          <div className="ml-auto transition-transform duration-300 ease-out group-hover:-translate-x-[14.5rem] group-focus-within:-translate-x-[14.5rem] sm:group-hover:-translate-x-[16.5rem] sm:group-focus-within:-translate-x-[16.5rem]">
             <UsageFooter
               provider={provider}
               providerId={provider.id}
@@ -259,7 +259,7 @@ export function ProviderCard({
             />
           </div>
 
-          <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">
+          <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-300 ease-out translate-x-2 group-hover:translate-x-0 group-focus-within:translate-x-0">
             <ProviderActions
               isCurrent={isCurrent}
               isTesting={isTesting}