From e5ae802ab21054abb6bfac230d1b3951db7bc10a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Mon, 25 May 2026 20:11:39 +0800
Subject: [PATCH] fix: remove unnecessary animations from StorageCleaner page

- Remove entrance animations (animate-in, fade-in, zoom-in) from all components
- Remove scale effect (active:scale-[0.99]) from clean button
- Remove transition effects (transition-all, transition-colors) from OptionItem, StorageOptionsGrid, AutoRefreshToggle
- Remove bouncing animation from error icon
- Remove pulsing animation from warning banner
- Keep animate-spin on button loading spinner as functional indicator
---
 pages/StorageCleaner/AutoRefreshToggle.tsx     | 2 +-
 pages/StorageCleaner/CleaningResult.tsx        | 5 +----
 pages/StorageCleaner/ErrorDisplay.tsx          | 4 ++--
 pages/StorageCleaner/OptionItem.tsx            | 4 ++--
 pages/StorageCleaner/StorageCleanerConfirm.tsx | 3 +--
 pages/StorageCleaner/StorageOptionsGrid.tsx    | 4 ++--
 pages/StorageCleaner/index.tsx                 | 8 ++++----
 7 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/pages/StorageCleaner/AutoRefreshToggle.tsx b/pages/StorageCleaner/AutoRefreshToggle.tsx
index a062723..dec8af4 100644
--- a/pages/StorageCleaner/AutoRefreshToggle.tsx
+++ b/pages/StorageCleaner/AutoRefreshToggle.tsx
@@ -48,7 +48,7 @@ export default function AutoRefreshToggle({
   return (
     <div
       className={cn(
-        'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring flex justify-between items-center',
+        'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex justify-between items-center',
         className,
       )}
       {...props}
diff --git a/pages/StorageCleaner/CleaningResult.tsx b/pages/StorageCleaner/CleaningResult.tsx
index b9e4da1..d37c9e6 100644
--- a/pages/StorageCleaner/CleaningResult.tsx
+++ b/pages/StorageCleaner/CleaningResult.tsx
@@ -17,10 +17,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
   const isSuccess = result.success;
 
   return (
-    <div
-      className={cn('animate-in fade-in slide-in-from-top-1 duration-200 w-full', className)}
-      {...props}
-    >
+    <div className={cn('w-full', className)} {...props}>
       {/* 2. 彻底重构容器类名结构：
         - 成功状态：采用 Tailwind 官方推荐的 emerald 体系，利用 /10 (10% 透明度) 和 /20 (边框)。
         - 失败状态：完全放权给标准的 border-destructive/20 和 bg-destructive/5。
diff --git a/pages/StorageCleaner/ErrorDisplay.tsx b/pages/StorageCleaner/ErrorDisplay.tsx
index 4bf067d..e653ada 100644
--- a/pages/StorageCleaner/ErrorDisplay.tsx
+++ b/pages/StorageCleaner/ErrorDisplay.tsx
@@ -13,7 +13,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
     // 1. 精简层级：单层外壳直接搞定居中、响应式高度与外部类名扩展
     <div
       className={cn(
-        'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center animate-in fade-in zoom-in-95 duration-200',
+        'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center',
         className,
       )}
       {...props}
@@ -25,7 +25,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
       */}
       <div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm">
         {/* 3. 图标与主要错误信息全面对接 text-destructive 语义色 */}
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0 animate-bounce [animation-duration:2s]">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0">
           <AlertCircle className="h-5 w-5" />
         </div>
 
diff --git a/pages/StorageCleaner/OptionItem.tsx b/pages/StorageCleaner/OptionItem.tsx
index ba82ff5..db4b12d 100644
--- a/pages/StorageCleaner/OptionItem.tsx
+++ b/pages/StorageCleaner/OptionItem.tsx
@@ -29,7 +29,7 @@ export default function OptionItem({
       // 3. 跨越级交互升级：将外部容器升级为一个高度敏感的可点击 Tab 热区
       onClick={onChange}
       className={cn(
-        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none transition-all duration-200',
+        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
         // 4. 彻底抛弃硬编码黄底：
         // - 选中时：使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。
         // - 未选中时：保持透明 border-transparent，悬停呈现 bg-muted。
@@ -45,7 +45,7 @@ export default function OptionItem({
       <div className="flex-1 min-w-0 mr-4">
         <span
           className={cn(
-            'block text-xs font-semibold leading-tight truncate transition-colors',
+            'block text-xs font-semibold leading-tight truncate',
             checked ? 'text-foreground font-bold' : 'text-foreground/80',
           )}
         >
diff --git a/pages/StorageCleaner/StorageCleanerConfirm.tsx b/pages/StorageCleaner/StorageCleanerConfirm.tsx
index 1d736a4..190b405 100644
--- a/pages/StorageCleaner/StorageCleanerConfirm.tsx
+++ b/pages/StorageCleaner/StorageCleanerConfirm.tsx
@@ -42,7 +42,6 @@ export function StorageCleanerConfirm({
       <DialogContent
         className={cn(
           'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
-          'animate-in fade-in-50 zoom-in-95 duration-200',
         )}
       >
         {/* 头部标题区域 */}
@@ -72,7 +71,7 @@ export function StorageCleanerConfirm({
           </div>
 
           {/* 风险警告横幅 */}
-          <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px] animate-pulse [animation-duration:3s]">
+          <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
             <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
             <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
               {t('storageCleaner:irreversible')}
diff --git a/pages/StorageCleaner/StorageOptionsGrid.tsx b/pages/StorageCleaner/StorageOptionsGrid.tsx
index 4e84d6f..699913d 100644
--- a/pages/StorageCleaner/StorageOptionsGrid.tsx
+++ b/pages/StorageCleaner/StorageOptionsGrid.tsx
@@ -46,7 +46,7 @@ export default function StorageOptionsGrid({
   return (
     <div
       className={cn(
-        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden transition-all',
+        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ export default function StorageOptionsGrid({
       */}
       <div
         onClick={handleToggleAll}
-        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 transition-colors cursor-pointer select-none"
+        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
       >
         <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
           {t('storageCleaner:selectAll')}
diff --git a/pages/StorageCleaner/index.tsx b/pages/StorageCleaner/index.tsx
index b932a00..8cf82af 100644
--- a/pages/StorageCleaner/index.tsx
+++ b/pages/StorageCleaner/index.tsx
@@ -33,8 +33,8 @@ export default function Index() {
 
   if (isInitializing) {
     return (
-      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full animate-in fade-in duration-200">
-        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground/80" />
+      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
+        <Loader2 className="h-6 w-6 text-muted-foreground/80" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
           正在读取站点数据...
         </span>
@@ -47,7 +47,7 @@ export default function Index() {
   }
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-3.5 animate-in fade-in duration-300">
+    <div className="p-4 w-full flex flex-col space-y-3.5">
       <StorageOptionsGrid
         options={options}
         sizes={sizes}
@@ -67,7 +67,7 @@ export default function Index() {
         size="default"
         onClick={() => setShowConfirm(true)}
         disabled={isButtonDisabled}
-        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide transition-all active:scale-[0.99]"
+        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
       >
         {loading ? (
           <>