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

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