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

pages/StorageCleaner/AutoRefreshToggle.tsx

@@ -1,26 +1,52 @@
+import React from 'react';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils';
+// 引入官方的 Switch 原子组件
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
 
-interface AutoRefreshToggleProps {
+interface AutoRefreshToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   autoRefresh: boolean;
   onChange: (checked: boolean) => void;
 }
 
-export default function AutoRefreshToggle({ autoRefresh, onChange }: AutoRefreshToggleProps) {
+export default function AutoRefreshToggle({
+  autoRefresh,
+  onChange,
+  className,
+  ...props
+}: AutoRefreshToggleProps) {
   const { t } = useLazyTranslation('storageCleaner');
+
   return (
-    <div className="mb-3 p-4 rounded-lg bg-background border border-border flex justify-between items-center shadow-sm transition-all hover:shadow-md">
-      <span className="text-sm font-bold text-foreground px-3">
+    <div
+      className={cn(
+        // 外层包裹维持优雅的 shadcn 风格中性卡片，去除硬编码 mb-3 扩展灵活性
+        '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',
+        className,
+      )}
+      {...props}
+    >
+      {/* 3. 使用标准的 shadcn/ui Label 组件：
+        绑定 htmlFor 建立安全的表单无障碍桥梁，使得用户点击文字也能触发开关联动
+      */}
+      <Label
+        htmlFor="auto-refresh-switch"
+        className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
+      >
         {t('storageCleaner:autoRefresh')}
-      </span>
-      <label className="relative inline-flex items-center cursor-pointer">
-        <input
-          type="checkbox"
-          checked={autoRefresh}
-          onChange={(e) => onChange(e.target.checked)}
-          className="sr-only peer"
-        />
-        <div className="w-9 h-5 bg-muted peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-amber-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-background after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-input after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-amber-500" />
-      </label>
+      </Label>
+
+      {/* 4. 超进化：彻底废除 200 个字符的原生 checkbox 拼接！
+        完美调用 shadcn 的 Switch 组件。它会自动应用全站统一的主色（Primary）、
+        带阻尼的滑块硬件加速动效、以及教科书级别的 WAI-ARIA 无障碍键盘焦点提示。
+      */}
+      <Switch
+        id="auto-refresh-switch"
+        checked={autoRefresh}
+        onCheckedChange={onChange}
+        className="data-[state=checked]:bg-primary" // 如果依然需要特定的琥珀色可写 data-[state=checked]:bg-amber-500
+      />
     </div>
   );
 }