refactor: rename autoRefresh to reloadAfterClean for clarity and consistency across components

pages/StorageCleaner/AutoRefreshToggle.tsx

@@ -1,17 +1,44 @@
+/**
+ * 自动刷新开关组件
+ *
+ * 用于 StorageCleaner 页面，控制是否自动刷新存储数据列表。
+ * 以卡片形式展示，左侧为标签文本，右侧为 shadcn/ui Switch 开关。
+ *
+ * @example
+ * ```tsx
+ * <AutoRefreshToggle
+ *   reloadAfterClean={reloadAfterClean}
+ *   onChange={(checked) => setReloadAfterClean(checked)}
+ * />
+ * ```
+ */
+
 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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  autoRefresh: boolean;
+export interface AutoRefreshToggleProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> {
+  /** 开关的当前状态（受控） */
+  reloadAfterClean: boolean;
+  /** 状态变化时的回调函数 */
   onChange: (checked: boolean) => void;
 }
 
+/**
+ * 自动刷新开关
+ *
+ * @param reloadAfterClean - 当前开关状态
+ * @param onChange - 状态变化回调，接收新的布尔值
+ * @param className - 额外的 CSS 类名，用于覆盖或扩展样式
+ * @param props - 透传给外层 div 的其他 HTML 属性
+ */
 export default function AutoRefreshToggle({
-  autoRefresh,
+  reloadAfterClean,
   onChange,
   className,
   ...props
@@ -21,15 +48,12 @@ export default function AutoRefreshToggle({
   return (
     <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 与 Switch 通过 htmlFor + id 关联，支持点击文字触发开关 */}
       <Label
         htmlFor="auto-refresh-switch"
         className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
@@ -37,16 +61,7 @@ export default function AutoRefreshToggle({
         {t('storageCleaner:autoRefresh')}
       </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
-      />
+      <Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
     </div>
   );
 }

pages/StorageCleaner/index.tsx

@@ -11,29 +11,26 @@ import { useLazyTranslation } from '@/utils/useLazyTranslation';
 export default function Index() {
   const { t } = useLazyTranslation('storageCleaner');
 
-  // 1. 完美对接全新重构、无需回调参数的纯净版状态 Hook
   const {
     error,
     isInitializing,
     options,
     sizes,
-    autoRefresh,
+    reloadAfterClean,
     loading,
     result,
     showConfirm,
     setShowConfirm,
     allSelected,
     someSelected,
-    handleAutoRefreshChange,
+    handleReloadAfterCleanChange,
     handleOptionChange,
     handleSelectAll,
     handleClean,
   } = useStorageCleaner();
 
-  // 计算当前的按钮锁定状态：没有任何一项被勾选，或者正在清理中，则禁用大按钮
   const isButtonDisabled = !(someSelected || allSelected) || loading;
 
-  // 2. 初始化骨架屏：全面升级为符合 shadcn 规范的无损微动效 Spinner
   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">
@@ -45,18 +42,12 @@ export default function Index() {
     );
   }
 
-  // 拦截非法域名或受限域名的错误提示页（ErrorDisplay 内部已在上一轮做好 p-4 居中）
   if (error) {
     return <ErrorDisplay error={error} />;
   }
 
   return (
-    /* 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}
@@ -66,14 +57,11 @@ export default function Index() {
         onSelectAll={handleSelectAll}
       />
 
-      {/* 自动刷新开关 */}
-      <AutoRefreshToggle autoRefresh={autoRefresh} onChange={handleAutoRefreshChange} />
+      <AutoRefreshToggle
+        reloadAfterClean={reloadAfterClean}
+        onChange={handleReloadAfterCleanChange}
+      />
 
-      {/* 4. 主行动按钮超进化：
-        - 彻底剥离 bg-amber-500，全面回归系统标准的 variant="destructive"。
-        - 享受高风险操作该有的危险红警示，完美契合上一轮重构的二次确认弹窗基调。
-        - 高级动态加载：当处于 cleaning 状态时，文字自动流转，且左侧自动淡入等宽 Loader2 图标。
-      */}
       <Button
         variant="destructive"
         size="default"
@@ -91,10 +79,8 @@ export default function Index() {
         )}
       </Button>
 
-      {/* 动态清理结果返回反馈卡片 */}
       <CleaningResult result={result} />
 
-      {/* 二次风险防御确认弹窗 */}
       <StorageCleanerConfirm
         open={showConfirm}
         onClose={() => setShowConfirm(false)}

pages/StorageCleaner/useStorageCleaner.ts

@@ -30,7 +30,7 @@ const DEFAULT_OPTIONS: StorageCleanerOptions = {
 };
 
 const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
-  autoRefresh: true,
+  reloadAfterClean: true,
   selectedTypes: DEFAULT_OPTIONS,
 };
 
@@ -40,7 +40,7 @@ export interface UseStorageCleanerReturn {
   isInitializing: boolean;
   options: StorageCleanerOptions;
   sizes: Record<string, number>;
-  autoRefresh: boolean;
+  reloadAfterClean: boolean;
   loading: boolean;
   result: CleaningResult | null;
   showConfirm: boolean;
@@ -49,7 +49,7 @@ export interface UseStorageCleanerReturn {
   allSelected: boolean;
   someSelected: boolean;
 
-  handleAutoRefreshChange: (checked: boolean) => void;
+  handleReloadAfterCleanChange: (checked: boolean) => void;
   handleOptionChange: (key: keyof StorageCleanerOptions) => void;
   handleSelectAll: (checked: boolean) => void;
   handleClean: () => Promise<void>;
@@ -62,7 +62,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
   const [isInitializing, setIsInitializing] = useState<boolean>(true);
   const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
   const [sizes, setSizes] = useState<Record<string, number>>({});
-  const [autoRefresh, setAutoRefresh] = useState<boolean>(true);
+  const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
   const [loading, setLoading] = useState<boolean>(false);
   const [result, setResult] = useState<CleaningResult | null>(null);
   const [showConfirm, setShowConfirm] = useState<boolean>(false);
@@ -117,7 +117,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       if (currentRequestId !== requestIdRef.current) return;
 
       if (savedPrefs) {
-        setAutoRefresh(savedPrefs.autoRefresh ?? DEFAULT_PREFERENCES.autoRefresh);
+        setReloadAfterClean(savedPrefs.reloadAfterClean ?? DEFAULT_PREFERENCES.reloadAfterClean);
         setOptions(savedPrefs.selectedTypes ?? DEFAULT_PREFERENCES.selectedTypes);
       }
 
@@ -170,26 +170,22 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     };
   }, [debouncedLoadInfo]);
 
-  // 2. 超进化：防抖写盘管道 (Chrome Storage Debounce Pipeline)
-  // 用户疯狂点击勾选时，React 状态保持丝滑的 0 延迟同步，只有停下点击 500ms 后，才会真正发起一次 Chrome 存盘，配额永远安全。
   useEffect(() => {
-    // 过滤掉首次初始化时的无意义写盘
     if (isInitializing) return;
 
     if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
     storageTimerRef.current = setTimeout(async () => {
       await storageUtil
         .set('storageCleaner/preferences', {
-          autoRefresh,
+          reloadAfterClean,
           selectedTypes: options,
         })
         .catch(console.error);
     }, 500);
-  }, [options, autoRefresh, isInitializing]);
+  }, [options, reloadAfterClean, isInitializing]);
 
-  // 3. 极速状态分发：同步函数化（去掉了原有的 async 声明，只负责触发状态）
-  const handleAutoRefreshChange = useCallback((checked: boolean) => {
-    setAutoRefresh(checked);
+  const handleReloadAfterCleanChange = useCallback((checked: boolean) => {
+    setReloadAfterClean(checked);
   }, []);
 
   const handleOptionChange = useCallback((key: keyof StorageCleanerOptions) => {
@@ -207,7 +203,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     });
   }, []);
 
-  // 清理动作核心
   const handleClean = useCallback(async () => {
     if (loadingRef.current) return;
 
@@ -222,7 +217,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       const cleaningResult = await clearStorage(tab.id, tab.url, options);
       setResult(cleaningResult);
 
-      if (autoRefresh && cleaningResult.success) {
+      if (reloadAfterClean && cleaningResult.success) {
         toast.success(t('storageCleaner:cleanSuccessReload'));
         await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
       } else {
@@ -234,9 +229,8 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       setLoading(false);
       setShowConfirm(false);
     }
-  }, [options, autoRefresh, loadInfo, t]);
+  }, [options, reloadAfterClean, loadInfo, t]);
 
-  // 4. 精准的流式衍生计算收拢：完全切断垃圾内存常态分配
   const totalSize = useMemo(() => {
     return (
       (sizes.cookies || 0) +
@@ -259,7 +253,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     isInitializing,
     options,
     sizes,
-    autoRefresh,
+    reloadAfterClean,
     loading,
     result,
     showConfirm,
@@ -267,7 +261,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     totalSize,
     allSelected: selectionMetrics.all,
     someSelected: selectionMetrics.some,
-    handleAutoRefreshChange,
+    handleReloadAfterCleanChange,
     handleOptionChange,
     handleSelectAll,
     handleClean,