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
This commit is contained in:
Jason
2025-12-11 10:51:25 +08:00
parent cbc23764c0
commit 735b3b7d39
2 changed files with 7 additions and 6 deletions
+5 -4
View File
@@ -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" />
+2 -2
View File
@@ -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}