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>
   );
 }

pages/StorageCleaner/CleaningResult.tsx

@@ -1,35 +1,48 @@
+import React from 'react';
 import { CheckCircle, XCircle } from 'lucide-react';
-import type { CleaningResult } from '@/types/storage';
+import type { CleaningResult as CleaningResultType } from '@/types/storage';
 import { formatCleaningResult } from '@/utils/storageCleaner';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具
 
-interface CleaningResultProps {
-  result: CleaningResult | null;
+interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: CleaningResultType | null;
 }
 
-export default function CleaningResult({ result }: CleaningResultProps) {
+export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
   const { t } = useLazyTranslation('storageCleaner');
+
   if (!result) return null;
 
   const isSuccess = result.success;
 
   return (
-    <div className="mt-3 animate-in fade-in duration-300">
+    <div
+      className={cn('animate-in fade-in slide-in-from-top-1 duration-200 w-full', className)}
+      {...props}
+    >
+      {/* 2. 彻底重构容器类名结构：
+        - 成功状态：采用 Tailwind 官方推荐的 emerald 体系，利用 /10 (10% 透明度) 和 /20 (边框)。
+        - 失败状态：完全放权给标准的 border-destructive/20 和 bg-destructive/5。
+        - 这样在明暗双色模式切换时，色彩会自动与背景完美融为一体。
+      */}
       <div
-        className={`flex items-start gap-3 rounded-lg py-3 px-4 shadow-sm ${
-          isSuccess ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'
-        }`}
-      >
-        {isSuccess ? (
-          <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
-        ) : (
-          <XCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+        className={cn(
+          'flex items-start gap-3 rounded-xl py-2.5 px-3.5 border shadow-sm',
+          isSuccess
+            ? 'bg-emerald-500/5 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
+            : 'bg-destructive/5 border-destructive/20 text-destructive',
         )}
-        <span
-          className={`text-sm font-semibold leading-relaxed ${
-            isSuccess ? 'text-green-600' : 'text-red-700'
-          }`}
-        >
+      >
+        {/* 3. 图标样式向系统语义全面对齐 */}
+        {isSuccess ? (
+          <CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-emerald-500" />
+        ) : (
+          <XCircle className="h-4 w-4 shrink-0 mt-0.5 text-destructive" />
+        )}
+
+        {/* 4. 文本排版细节微调 */}
+        <span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
           {isSuccess
             ? formatCleaningResult(result, t)
             : result.error || t('storageCleaner:partialFailure')}

pages/StorageCleaner/ErrorDisplay.tsx

@@ -1,22 +1,42 @@
 import { AlertCircle } from 'lucide-react';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils';
 
-interface ErrorDisplayProps {
+interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
   error: string;
 }
 
-export default function ErrorDisplay({ error }: ErrorDisplayProps) {
+export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
   const { t } = useLazyTranslation('storageCleaner');
+
   return (
-    <div className="py-8 flex justify-center items-center min-h-[200px] sm:min-h-[400px] text-center">
-      <div className="w-full max-w-[320px]">
-        <div className="flex flex-col items-center justify-center rounded-lg p-6 shadow-lg border border-red-200 bg-red-50">
-          <AlertCircle className="h-9 w-9 text-red-500 mb-3" />
-          <p className="text-sm font-bold leading-relaxed mb-4 text-red-600">{error}</p>
-          <p className="text-xs font-medium leading-relaxed text-muted-foreground">
-            {t('storageCleaner:errorStandardOnly')}
-          </p>
+    // 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',
+        className,
+      )}
+      {...props}
+    >
+      {/* 2. 核心卡片容器：
+        - 彻底放弃 bg-red-50，改用标准的 bg-destructive/5（3%~5% 透明度的系统危险色）。
+        - 边框改为 border-destructive/20。
+        - 这样在黑夜模式下会自动完美混色，绝不刺眼。
+      */}
+      <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]">
+          <AlertCircle className="h-5 w-5" />
         </div>
+
+        <p className="text-sm font-semibold leading-relaxed text-destructive break-all px-1 mb-2">
+          {error}
+        </p>
+
+        {/* 次要提示文本维持柔和的中性高级灰 */}
+        <p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
+          {t('storageCleaner:errorStandardOnly')}
+        </p>
       </div>
     </div>
   );

pages/StorageCleaner/OptionItem.tsx

@@ -1,7 +1,11 @@
+import React from 'react';
 import { formatSize } from '@/utils/storageCleaner';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils';
+// 引入官方的 Checkbox 原子组件
+import { Checkbox } from '@/components/ui/checkbox';
 
-interface OptionItemProps {
+interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
   labelKey: string;
   checked: boolean;
   size?: number;
@@ -15,39 +19,62 @@ export default function OptionItem({
   size,
   isCount = false,
   onChange,
+  className,
+  ...props
 }: OptionItemProps) {
   const { t } = useLazyTranslation('storageCleaner');
+
   return (
     <div
-      className={`flex justify-between items-center py-2 px-3 rounded-lg transition-all duration-200 ${
+      // 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',
+        // 4. 彻底抛弃硬编码黄底：
+        // - 选中时：使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。
+        // - 未选中时：保持透明 border-transparent，悬停呈现 bg-muted。
+        // 这样在暗黑模式下会自动无缝混色，极为深邃、高级。
         checked
-          ? 'bg-amber-50 border border-amber-200'
-          : 'bg-transparent border border-transparent hover:bg-muted hover:shadow-sm'
-      }`}
+          ? 'bg-primary/5 border-primary/30 shadow-sm'
+          : 'bg-transparent border-transparent hover:bg-muted/70',
+        className,
+      )}
+      {...props}
     >
-      <div className="flex-1 min-w-0 mr-3">
+      {/* 左侧数据区域 */}
+      <div className="flex-1 min-w-0 mr-4">
         <span
-          className={`block text-xs leading-tight truncate transition-colors ${
-            checked ? 'text-amber-700 font-bold' : 'text-foreground font-bold'
-          }`}
+          className={cn(
+            'block text-xs font-semibold leading-tight truncate transition-colors',
+            checked ? 'text-foreground font-bold' : 'text-foreground/80',
+          )}
         >
           {t(labelKey)}
         </span>
+
+        {/* 底部容量大小或计数标识 */}
         {size !== undefined && size > 0 ? (
-          <span className="block text-[10px] font-semibold text-muted-foreground mt-0.5 opacity-80">
+          <span className="block text-[10px] font-mono font-medium text-muted-foreground/80 mt-0.5 tabular-nums">
             {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
           </span>
         ) : (
-          <span className="block text-[10px] font-medium text-muted-foreground mt-0.5 italic">
+          <span className="block text-[10px] font-medium text-muted-foreground/60 mt-0.5 italic">
             {t('storageCleaner:noData')}
           </span>
         )}
       </div>
-      <input
-        type="checkbox"
+
+      {/* 5. 超进化：全面替换原生 input 标签
+        完美调用 shadcn 的 Checkbox 组件。它自带全站统一的主色（Primary）、
+        打钩选中时的平滑微放大缩放动效（Scale Animation），
+        并且阻止冒泡，防范与外层的全局覆盖点击事件产生双重冲突。
+      */}
+      <Checkbox
         checked={checked}
-        onChange={onChange}
-        className="h-4 w-4 rounded border-input text-amber-500 focus:ring-amber-500"
+        // 阻止 Checkbox 自身的点击事件冒泡，因为外层 div 已经代理了点击逻辑
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={onChange}
+        className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
       />
     </div>
   );

pages/StorageCleaner/StorageCleanerConfirm.tsx

@@ -7,8 +7,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
   open: boolean;
@@ -31,50 +34,74 @@ export function StorageCleanerConfirm({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent className="sm:max-w-[400px] p-6">
-        <DialogHeader>
-          <DialogTitle className="text-center text-xl font-bold tracking-tight">
+      {/* 💡 终极修复秘诀：
+        - 移除原来的 sm:max-w-[360px]，改用 max-w-[calc(100%-32px)] 或者是 w-[88%]。
+        - 这样无论插件弹窗多窄，它的左右两侧都必然会被强制挤出至少 16px 的完美空白护边！
+        - 将 p-5 转换为明确的 p-6，增大弹窗内部的呼吸感。
+      */}
+      <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',
+        )}
+      >
+        {/* 头部标题区域 */}
+        <DialogHeader className="pt-1">
+          <DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
             {t('storageCleaner:confirmTitle')}
           </DialogTitle>
         </DialogHeader>
 
-        <div className="text-center">
-          <DialogDescription className="mb-4 text-sm font-medium text-muted-foreground">
+        {/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
+        <div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
+          <DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
             {t('storageCleaner:confirmDesc')}
           </DialogDescription>
 
-          <div className="flex flex-wrap gap-2 justify-center mb-6">
+          {/* 待清理项目徽章群 */}
+          <div className="flex flex-wrap gap-1.5 justify-center mb-5 w-full">
             {selectedOptions.map((label) => (
-              <span
+              <Badge
                 key={label}
-                className="inline-flex items-center px-3 py-1.5 rounded-md text-xs font-bold text-amber-700 bg-amber-50 border border-amber-200"
+                variant="secondary"
+                className="px-2.5 py-0.5 text-[11px] font-semibold border border-border/40 select-none bg-muted/60"
               >
                 {label}
-              </span>
+              </Badge>
             ))}
           </div>
 
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-50 border border-dashed border-red-200">
-            <span className="text-xs font-bold text-red-600 flex items-center gap-1">
-              <span role="img" aria-label="warning">
-                ⚠️
-              </span>{' '}
+          {/* 风险警告横幅 */}
+          <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]">
+            <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')}
             </span>
           </div>
         </div>
 
-        <DialogFooter className="flex flex-col gap-3 sm:flex-row sm:justify-end sm:gap-3 pt-4">
-          <Button variant="outline" onClick={onClose} className="w-full sm:w-auto">
-            {t('common:buttons.cancel')}
-          </Button>
+        {/* 底部操作按钮区：
+          💡 修复要点：
+          - 增加 pt-2 隔开上方危险条。
+          - 显式通过 w-full 配合 flex-col 铺满，在移动端/窄插件下垂直堆叠，最符合小屏直觉。
+        */}
+        <DialogFooter className="flex flex-col gap-2 w-full pt-2">
           <Button
-            variant="default"
+            variant="destructive"
+            size="sm"
             onClick={onConfirm}
-            className="w-full sm:w-auto bg-amber-500 hover:bg-amber-600 text-white"
+            className="w-full text-xs font-bold shadow-sm h-9"
           >
             {t('storageCleaner:confirmAction')}
           </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClose}
+            className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
+          >
+            {t('common:buttons.cancel')}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

pages/StorageCleaner/StorageOptionsGrid.tsx

@@ -1,12 +1,17 @@
+import React from 'react';
 import type { StorageCleanerOptions } from '@/types/storage';
 import OptionItem from './OptionItem';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { cn } from '@/lib/utils';
+// 1. 引入官方标准的 Checkbox 原子组件
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
 
-interface StorageOptionsGridProps {
+interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
   options: StorageCleanerOptions;
   sizes: Record<string, number>;
   allSelected: boolean;
-  someSelected: boolean;
+  someSelected: boolean; // 重新激活半选状态
   onOptionChange: (key: keyof StorageCleanerOptions) => void;
   onSelectAll: (checked: boolean) => void;
 }
@@ -15,9 +20,11 @@ export default function StorageOptionsGrid({
   options,
   sizes,
   allSelected,
-  someSelected: _someSelected,
+  someSelected,
   onOptionChange,
   onSelectAll,
+  className,
+  ...props
 }: StorageOptionsGridProps) {
   const { t } = useLazyTranslation('storageCleaner');
 
@@ -30,33 +37,60 @@ export default function StorageOptionsGrid({
     { key: 'serviceWorkers', isCount: true },
   ];
 
+  // 2. 处理全选栏点击事件：包裹整个栏变成超级热区
+  const handleToggleAll = () => {
+    // 如果当前已经是全选，点击则取消全选；否则，点击就是全选
+    onSelectAll(!allSelected);
+  };
+
   return (
-    <div className="mb-3 border rounded-lg bg-background shadow-sm overflow-hidden transition-all hover:shadow-md">
+    <div
+      className={cn(
+        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden transition-all',
+        className,
+      )}
+      {...props}
+    >
+      {/* 核心网格区 */}
       <div className="p-3">
-        <div className="grid grid-cols-2 gap-3">
+        {/* 💡 优化点：加入 items-stretch，确保左右卡片高度绝对对齐 */}
+        <div className="grid grid-cols-2 gap-2.5 items-stretch">
           {optionKeys.map(({ key, isCount }) => (
-            <div key={key}>
-              <OptionItem
-                labelKey={`storageCleaner:options.${key}`}
-                checked={options[key]}
-                size={sizes[key]}
-                isCount={isCount}
-                onChange={() => onOptionChange(key)}
-              />
-            </div>
+            /* 💡 终极修复：直接把 key 挂在 OptionItem 上，移除了无意义的包裹 div */
+            <OptionItem
+              key={key}
+              labelKey={`storageCleaner:options.${key}`}
+              checked={options[key]}
+              size={sizes[key]}
+              isCount={isCount}
+              onChange={() => onOptionChange(key)}
+            />
           ))}
         </div>
       </div>
-      <div className="border-t" />
-      <div className="flex justify-between items-center px-5 py-2 transition-colors hover:bg-muted rounded-b-lg">
-        <span className="text-xs font-bold text-muted-foreground">
+
+      {/* 3. 全选功能底护栏超进化：
+        - 整体赋予 cursor-pointer 和 onClick，点击一整行都能触发全选。
+        - 悬停时自动变色提示可点击 (hover:bg-muted/50)。
+      */}
+      <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"
+      >
+        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
           {t('storageCleaner:selectAll')}
-        </span>
-        <input
-          type="checkbox"
-          checked={allSelected}
-          onChange={(e) => onSelectAll(e.target.checked)}
-          className="h-4 w-4 rounded border-input text-amber-500 focus:ring-amber-500"
+        </Label>
+
+        {/* 4. 降维打击：调用标准的 shadcn/ui Checkbox
+          - 阻止冒泡：防止事件重复触发。
+          - 完美注入半选逻辑：当 allSelected 为 false 但 someSelected 为 true 时，
+            组件会自动呈现优雅的 "—" (减号) 半选视觉状态，向主流系统控制台高标准看齐！
+        */}
+        <Checkbox
+          checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+          onClick={(e) => e.stopPropagation()}
+          onCheckedChange={(checked) => onSelectAll(checked === true)}
+          className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary"
         />
       </div>
     </div>

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)}

pages/StorageCleaner/useStorageCleaner.ts

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { storageUtil } from '@/utils/chromeStorage';
-import type { SnackbarOptions } from '@/components/GlobalSnackbar';
 import type {
   CleaningResult,
   StorageCleanerOptions,
@@ -11,14 +10,15 @@ import {
   getCacheStorageSize,
   getCookieSize,
   getCurrentTab,
-  getOriginStorageEstimate,
   getLocalStorageSize,
+  getOriginStorageEstimate,
   getServiceWorkerCount,
   getSessionStorageSize,
   isRestrictedUrl,
 } from '@/utils/storageCleaner';
 import { MessageAction, sendMessage } from '@/utils/messages';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { toast } from 'sonner'; // 1. 直接引用 shadcn 推荐的 Sonner 单例通知，踢出回调依赖
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
   localStorage: true,
@@ -35,7 +35,6 @@ const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
 };
 
 export interface UseStorageCleanerReturn {
-  // State
   domain: string;
   error: string;
   isInitializing: boolean;
@@ -46,26 +45,17 @@ export interface UseStorageCleanerReturn {
   result: CleaningResult | null;
   showConfirm: boolean;
   setShowConfirm: (show: boolean) => void;
-
-  // Computed
   totalSize: number;
   allSelected: boolean;
   someSelected: boolean;
 
-  // Handlers
-  handleAutoRefreshChange: (checked: boolean) => Promise<void>;
-  handleOptionChange: (key: keyof StorageCleanerOptions) => Promise<void>;
-  handleSelectAll: (checked: boolean) => Promise<void>;
+  handleAutoRefreshChange: (checked: boolean) => void;
+  handleOptionChange: (key: keyof StorageCleanerOptions) => void;
+  handleSelectAll: (checked: boolean) => void;
   handleClean: () => Promise<void>;
 }
 
-export interface UseStorageCleanerOptions {
-  showMessage: (message: string, options?: SnackbarOptions) => void;
-}
-
-export function useStorageCleaner({
-  showMessage,
-}: UseStorageCleanerOptions): UseStorageCleanerReturn {
+export function useStorageCleaner(): UseStorageCleanerReturn {
   const { t } = useLazyTranslation(['storageCleaner', 'common']);
   const [domain, setDomain] = useState<string>('');
   const [error, setError] = useState<string>('');
@@ -79,6 +69,7 @@ export function useStorageCleaner({
 
   const requestIdRef = useRef<number>(0);
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const storageTimerRef = useRef<NodeJS.Timeout | null>(null);
   const loadingRef = useRef(loading);
 
   useEffect(() => {
@@ -88,9 +79,11 @@ export function useStorageCleaner({
   useEffect(() => {
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
     };
   }, []);
 
+  // 核心数据拉取链条
   const loadInfo = useCallback(async () => {
     const currentRequestId = ++requestIdRef.current;
     try {
@@ -149,16 +142,14 @@ export function useStorageCleaner({
   });
 
   const debouncedLoadInfo = useCallback(() => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
       loadInfoRef.current().catch(console.error);
     }, 300);
   }, []);
 
+  // 监听浏览器标签行为
   useEffect(() => {
-    // 首次加载不防抖
     loadInfoRef.current().catch(console.error);
 
     const handleTabChange = () => debouncedLoadInfo();
@@ -176,90 +167,91 @@ export function useStorageCleaner({
       chrome.tabs.onActivated.removeListener(handleTabChange);
       chrome.tabs.onUpdated.removeListener(handleTabUpdated);
       chrome.windows.onFocusChanged.removeListener(handleTabChange);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
     };
   }, [debouncedLoadInfo]);
 
-  const handleAutoRefreshChange = useCallback(
-    async (checked: boolean) => {
-      setAutoRefresh(checked);
-      await storageUtil.set('storageCleaner/preferences', {
-        autoRefresh: checked,
-        selectedTypes: options,
-      });
-    },
-    [options],
-  );
+  // 2. 超进化：防抖写盘管道 (Chrome Storage Debounce Pipeline)
+  // 用户疯狂点击勾选时，React 状态保持丝滑的 0 延迟同步，只有停下点击 500ms 后，才会真正发起一次 Chrome 存盘，配额永远安全。
+  useEffect(() => {
+    // 过滤掉首次初始化时的无意义写盘
+    if (isInitializing) return;
 
-  const handleOptionChange = useCallback(
-    async (key: keyof StorageCleanerOptions) => {
-      const newOptions = { ...options, [key]: !options[key] };
-      setOptions(newOptions);
-      await storageUtil.set('storageCleaner/preferences', {
-        autoRefresh,
-        selectedTypes: newOptions,
-      });
-    },
-    [options, autoRefresh],
-  );
+    if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
+    storageTimerRef.current = setTimeout(async () => {
+      await storageUtil
+        .set('storageCleaner/preferences', {
+          autoRefresh,
+          selectedTypes: options,
+        })
+        .catch(console.error);
+    }, 500);
+  }, [options, autoRefresh, isInitializing]);
 
-  const handleSelectAll = useCallback(
-    async (checked: boolean) => {
-      const newOptions = {
-        localStorage: checked,
-        sessionStorage: checked,
-        indexedDB: checked,
-        cookies: checked,
-        cacheStorage: checked,
-        serviceWorkers: checked,
-      };
-      setOptions(newOptions);
-      await storageUtil.set('storageCleaner/preferences', {
-        autoRefresh,
-        selectedTypes: newOptions,
-      });
-    },
-    [autoRefresh],
-  );
+  // 3. 极速状态分发：同步函数化（去掉了原有的 async 声明，只负责触发状态）
+  const handleAutoRefreshChange = useCallback((checked: boolean) => {
+    setAutoRefresh(checked);
+  }, []);
 
+  const handleOptionChange = useCallback((key: keyof StorageCleanerOptions) => {
+    setOptions((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  const handleSelectAll = useCallback((checked: boolean) => {
+    setOptions({
+      localStorage: checked,
+      sessionStorage: checked,
+      indexedDB: checked,
+      cookies: checked,
+      cacheStorage: checked,
+      serviceWorkers: checked,
+    });
+  }, []);
+
+  // 清理动作核心
   const handleClean = useCallback(async () => {
-    if (loadingRef.current) {
-      return;
-    }
+    if (loadingRef.current) return;
+
     const tab = await getCurrentTab();
     if (!tab || !tab.id || !tab.url) {
-      showMessage(t('storageCleaner:errorNoTab'), { severity: 'warning' });
+      toast.warning(t('storageCleaner:errorNoTab'));
       return;
     }
+
     setLoading(true);
     try {
       const cleaningResult = await clearStorage(tab.id, tab.url, options);
       setResult(cleaningResult);
 
       if (autoRefresh && cleaningResult.success) {
-        showMessage(t('storageCleaner:cleanSuccessReload'), { severity: 'success' });
+        toast.success(t('storageCleaner:cleanSuccessReload'));
         await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
       } else {
         await loadInfo();
       }
     } catch (err) {
-      showMessage(`${t('storageCleaner:cleanError')}: ${String(err)}`, { severity: 'error' });
+      toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
     } finally {
       setLoading(false);
       setShowConfirm(false);
     }
-  }, [options, autoRefresh, showMessage, loadInfo, t]);
+  }, [options, autoRefresh, loadInfo, t]);
 
-  const totalSize =
-    (sizes.cookies || 0) +
-    (sizes.localStorage || 0) +
-    (sizes.sessionStorage || 0) +
-    (sizes.indexedDB || 0);
+  // 4. 精准的流式衍生计算收拢：完全切断垃圾内存常态分配
+  const totalSize = useMemo(() => {
+    return (
+      (sizes.cookies || 0) +
+      (sizes.localStorage || 0) +
+      (sizes.sessionStorage || 0) +
+      (sizes.indexedDB || 0)
+    );
+  }, [sizes]);
 
-  const allSelected = Object.values(options).every(Boolean);
-  const someSelected = Object.values(options).some(Boolean) && !allSelected;
+  const selectionMetrics = useMemo(() => {
+    const vals = Object.values(options);
+    const all = vals.every(Boolean);
+    const some = vals.some(Boolean) && !all;
+    return { all, some };
+  }, [options]);
 
   return {
     domain,
@@ -273,8 +265,8 @@ export function useStorageCleaner({
     showConfirm,
     setShowConfirm,
     totalSize,
-    allSelected,
-    someSelected,
+    allSelected: selectionMetrics.all,
+    someSelected: selectionMetrics.some,
     handleAutoRefreshChange,
     handleOptionChange,
     handleSelectAll,