refactor: 全面迁移 StorageCleaner 页面至 shadcn 样式并移除 GlobalSnackbar 依赖

pages/StorageCleaner/index.tsx

@@ -1,5 +1,5 @@
+import { Loader2 } from 'lucide-react'; // 引入标准的高级阻尼 Spinner 图标
 import { Button } from '@/components/ui/button';
-import { useSnackbar } from '@/components/GlobalSnackbar';
 import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
 import { useStorageCleaner } from './useStorageCleaner';
 import StorageOptionsGrid from './StorageOptionsGrid';
@@ -9,8 +9,9 @@ import CleaningResult from './CleaningResult';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 export default function Index() {
-  const { showMessage } = useSnackbar();
   const { t } = useLazyTranslation('storageCleaner');
+
+  // 1. 完美对接全新重构、无需回调参数的纯净版状态 Hook
   const {
     error,
     isInitializing,
@@ -27,48 +28,73 @@ export default function Index() {
     handleOptionChange,
     handleSelectAll,
     handleClean,
-  } = useStorageCleaner({ showMessage });
+  } = useStorageCleaner();
 
-  const isDisabled = !(someSelected || allSelected) || loading;
+  // 计算当前的按钮锁定状态：没有任何一项被勾选，或者正在清理中，则禁用大按钮
+  const isButtonDisabled = !(someSelected || allSelected) || loading;
 
+  // 2. 初始化骨架屏：全面升级为符合 shadcn 规范的无损微动效 Spinner
   if (isInitializing) {
     return (
-      <div className="flex justify-center py-8">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-amber-500 border-t-transparent" />
+      <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" />
+        <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
+          正在读取站点数据...
+        </span>
       </div>
     );
   }
 
+  // 拦截非法域名或受限域名的错误提示页（ErrorDisplay 内部已在上一轮做好 p-4 居中）
   if (error) {
     return <ErrorDisplay error={error} />;
   }
 
   return (
-    <div>
-      <div className="p-2">
-        <StorageOptionsGrid
-          options={options}
-          sizes={sizes}
-          allSelected={allSelected}
-          someSelected={someSelected}
-          onOptionChange={handleOptionChange}
-          onSelectAll={handleSelectAll}
-        />
+    /* 3. 终极版页面根容器：
+      - 彻底灌入 p-4，全局对齐线向内收缩 16px，终结贴边惨剧。
+      - 用 space-y-3.5 替代块级外边距（mb-3 等），让所有卡片之间的垂直间距处于绝对一致的黄金比例。
+    */
+    <div className="p-4 w-full flex flex-col space-y-3.5 animate-in fade-in duration-300">
+      {/* 存储网格核心中控面板 (内部已满血复活半选状态) */}
+      <StorageOptionsGrid
+        options={options}
+        sizes={sizes}
+        allSelected={allSelected}
+        someSelected={someSelected}
+        onOptionChange={handleOptionChange}
+        onSelectAll={handleSelectAll}
+      />
 
-        <AutoRefreshToggle autoRefresh={autoRefresh} onChange={handleAutoRefreshChange} />
+      {/* 自动刷新开关 */}
+      <AutoRefreshToggle autoRefresh={autoRefresh} onChange={handleAutoRefreshChange} />
 
-        <Button
-          variant="default"
-          onClick={() => setShowConfirm(true)}
-          disabled={isDisabled}
-          className="w-full bg-amber-500 hover:bg-amber-600 text-white"
-        >
-          {loading ? t('storageCleaner:cleaning') : t('storageCleaner:cleanNow')}
-        </Button>
+      {/* 4. 主行动按钮超进化：
+        - 彻底剥离 bg-amber-500，全面回归系统标准的 variant="destructive"。
+        - 享受高风险操作该有的危险红警示，完美契合上一轮重构的二次确认弹窗基调。
+        - 高级动态加载：当处于 cleaning 状态时，文字自动流转，且左侧自动淡入等宽 Loader2 图标。
+      */}
+      <Button
+        variant="destructive"
+        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]"
+      >
+        {loading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t('storageCleaner:cleaning')}
+          </>
+        ) : (
+          t('storageCleaner:cleanNow')
+        )}
+      </Button>
 
-        <CleaningResult result={result} />
-      </div>
+      {/* 动态清理结果返回反馈卡片 */}
+      <CleaningResult result={result} />
 
+      {/* 二次风险防御确认弹窗 */}
       <StorageCleanerConfirm
         open={showConfirm}
         onClose={() => setShowConfirm(false)}