Develop (#9)

* feat: optimize popup standalone window layout and enhance storage cleaner synchronization

* docs: 更新README文档并删除过时文件

- 更新README文档，添加项目结构、功能特性和路由系统等详细信息
- 删除不再使用的文档文件，包括CLAUDE.md、GEMINI.md和多个设计规范文档
- 清理项目中的过时配置文件和计划文档

* feat: 添加 Vitest 测试框架和组件测试

- 添加 Vitest 配置 (vitest.config.ts, vitest.setup.ts)
- 创建组件测试: Button, ToolCard, GlobalSnackbar, TopBar, RouterContainer, StorageCleanerConfirm
- 创建工具测试: routes, storageCleaner
- 修复 background.ts 监听器参数问题
- 修复 options/App.tsx 硬编码默认值
- 更新 lint-staged.config.mjs (添加 .mjs 支持, 添加 --no-warn-ignored)
- 更新 tsconfig.json (添加测试类型支持, 移除测试文件排除)
- 更新 package.json (添加测试脚本和依赖)

* fix: 修复 StorageCleanerPage Chrome API 监听器内存泄漏

使用 useRef 模式存储 loadInfo 函数引用，避免依赖数组变化导致的监听器重复注册问题

* refactor(popup): 优化 OpenUrl 页面样式和导航逻辑

重构 OpenUrl 页面输入框样式，改进聚焦状态效果
移除 RouterProvider 依赖，直接通过存储设置侧边栏路由
在 OpenUrlViewer 页面添加加载状态指示器和错误处理
监听存储变化实现 URL 自动更新

* feat(ui): 优化存储清理页面UI和交互效果

重构存储清理页面组件，增强视觉层次和交互体验：
- 使用新的错误提示样式和布局
- 改进选项卡片样式，增加悬停动画和选中状态
- 调整整体间距和排版，提升视觉一致性
- 添加微交互效果如悬停缩放和阴影
- 优化颜色方案和过渡动画
- 统一组件尺寸和字体层级

* feat: 添加二维码工具页面，支持URL转二维码和二维码解析功能

* chore: update package-lock.json (npm audit fix)

* refactor(主题): 将页面样式抽离到统一配置文件

将各页面的颜色和样式配置抽离到config/pageTheme.ts中统一管理
优化测试用例中使用each替代forEach
更新路由测试以包含新的qrCode页面

* feat(二维码页面): 添加复制二维码功能并优化样式

添加复制二维码到剪贴板的功能，并调整按钮布局和样式。同时将 ContentCopyIcon 导入位置调整到其他图标导入之后，并修复缩进问题。在 tsconfig.json 中添加 vitest/globals 类型支持。

* feat(theme): 为所有页面添加统一的背景色和卡片背景色

为应用中的所有页面添加了统一的浅灰色背景(#f5f5f5)和白色卡片背景(#ffffff)，以保持视觉一致性。修改了ToolCard组件以支持自定义卡片背景色，并更新了所有相关页面使用新的主题配置。

* feat: 添加复制按钮组件并优化现有复制功能

refactor(utils): 创建剪贴板工具函数
feat(components): 新增可复用的CopyButton组件
refactor(pages): 在QrCodePage和TimestampPage中使用CopyButton
style: 格式化代码并调整部分样式

* refactor(存储): 统一qrCode相关存储键名

将'qrCode/expanded'重命名为'qrCode/qrExpanded'以保持命名一致性

* feat: 添加二维码工具功能并更新项目配置

- 新增二维码工具页面及相关组件和工具函数
- 添加 MIT 许可证文件
- 更新 package.json 配置为公开项目
- 更新 README 文档说明新功能

entrypoints/popup/pages/StorageCleanerPage.tsx

@@ -9,6 +9,7 @@ import {
   Stack,
   Switch,
   Grid,
+  CircularProgress,
 } from '@mui/material';
 import WarningIcon from '@mui/icons-material/Warning';
 import StorageIcon from '@mui/icons-material/Storage';
@@ -34,6 +35,7 @@ import {
   getServiceWorkerCount,
   formatSize,
 } from '@/utils/storageCleaner';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
   localStorage: true,
@@ -52,6 +54,7 @@ const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
 export default function StorageCleanerPage() {
   const [domain, setDomain] = useState<string>('');
   const [error, setError] = useState<string>('');
+  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);
@@ -60,51 +63,84 @@ export default function StorageCleanerPage() {
   const [showConfirm, setShowConfirm] = useState<boolean>(false);
   const { snackbarProps, showMessage } = useSnackbar();
   const reloadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const resultTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     return () => {
       if (reloadTimeoutRef.current) clearTimeout(reloadTimeoutRef.current);
+      if (resultTimeoutRef.current) clearTimeout(resultTimeoutRef.current);
     };
   }, []);
 
-  const loadInfo = async () => {
-    const tab = await getCurrentTab();
-    if (!tab || !tab.url) {
-      setError('无法获取当前标签页');
-      return;
-    }
-    if (isRestrictedUrl(tab.url)) {
-      setError('存储清理功能不支持此页面');
-      return;
-    }
-    const url = tab.url;
-    const tabId = tab.id!;
-    setDomain(new URL(url).hostname);
+  const loadInfo = useCallback(async () => {
+    try {
+      const tab = await getCurrentTab();
+      if (!tab || !tab.url) {
+        setError('无法获取当前标签页');
+        return;
+      }
+      if (isRestrictedUrl(tab.url)) {
+        setError('存储清理功能不支持此页面');
+        return;
+      }
 
-    const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
-      storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
-      getCookieSize(url),
-      getLocalStorageSize(tabId),
-      getSessionStorageSize(tabId),
-      getIndexedDBSize(tabId),
-      getCacheStorageSize(tabId),
-      getServiceWorkerCount(tabId),
-    ]);
+      // 重置错误状态
+      setError('');
 
-    setAutoRefresh(savedPrefs?.autoRefresh ?? DEFAULT_PREFERENCES.autoRefresh);
-    setOptions(savedPrefs?.selectedTypes ?? DEFAULT_PREFERENCES.selectedTypes);
-    setSizes({
-      cookies: cSize,
-      localStorage: lsSize,
-      sessionStorage: ssSize,
-      indexedDB: idbSize,
-      cacheStorage: cacheCount,
-      serviceWorkers: swCount,
-    });
-  };
+      const url = tab.url;
+      const tabId = tab.id!;
+      setDomain(new URL(url).hostname);
+
+      const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
+        storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
+        getCookieSize(url),
+        getLocalStorageSize(tabId),
+        getSessionStorageSize(tabId),
+        getIndexedDBSize(tabId),
+        getCacheStorageSize(tabId),
+        getServiceWorkerCount(tabId),
+      ]);
+
+      if (savedPrefs) {
+        setAutoRefresh(savedPrefs.autoRefresh ?? DEFAULT_PREFERENCES.autoRefresh);
+        setOptions(savedPrefs.selectedTypes ?? DEFAULT_PREFERENCES.selectedTypes);
+      }
+
+      setSizes({
+        cookies: cSize,
+        localStorage: lsSize,
+        sessionStorage: ssSize,
+        indexedDB: idbSize,
+        cacheStorage: cacheCount,
+        serviceWorkers: swCount,
+      });
+    } finally {
+      setIsInitializing(false);
+    }
+  }, []);
+
+  const loadInfoRef = useRef(loadInfo);
+  loadInfoRef.current = loadInfo;
 
   useEffect(() => {
-    loadInfo();
+    loadInfoRef.current();
+
+    const handleTabChange = () => loadInfoRef.current();
+    const handleTabUpdated = (_tabId: number, changeInfo: { status?: string; url?: string }) => {
+      if (changeInfo.status === 'complete' || changeInfo.url) {
+        loadInfoRef.current();
+      }
+    };
+
+    chrome.tabs.onActivated.addListener(handleTabChange);
+    chrome.tabs.onUpdated.addListener(handleTabUpdated);
+    chrome.windows.onFocusChanged.addListener(handleTabChange);
+
+    return () => {
+      chrome.tabs.onActivated.removeListener(handleTabChange);
+      chrome.tabs.onUpdated.removeListener(handleTabUpdated);
+      chrome.windows.onFocusChanged.removeListener(handleTabChange);
+    };
   }, []);
 
   const handleAutoRefreshChange = useCallback(
@@ -164,6 +200,13 @@ export default function StorageCleanerPage() {
     try {
       const cleaningResult = await clearStorage(tab.id, tab.url, options);
       setResult(cleaningResult);
+
+      // 5秒后自动清除结果提示
+      if (resultTimeoutRef.current) clearTimeout(resultTimeoutRef.current);
+      resultTimeoutRef.current = setTimeout(() => {
+        setResult(null);
+      }, 5000);
+
       if (autoRefresh && cleaningResult.success && tab.id !== undefined) {
         showMessage('清理成功，即将刷新页面');
         reloadTimeoutRef.current = setTimeout(() => {
@@ -178,20 +221,78 @@ export default function StorageCleanerPage() {
       setLoading(false);
       setShowConfirm(false);
     }
-  }, [options, autoRefresh, showMessage]);
+  }, [options, autoRefresh, showMessage, loadInfo]);
+
+  if (isInitializing) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+        <CircularProgress size={24} color="warning" />
+      </Box>
+    );
+  }
 
   if (error) {
     return (
-      <Container sx={{ py: 4 }}>
-        <Alert severity="error" icon={<WarningIcon />} sx={{ borderRadius: 3 }}>
-          {error}
-        </Alert>
+      <Container
+        sx={{
+          py: 8,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          minHeight: '400px',
+          textAlign: 'center',
+        }}
+      >
+        <Box sx={{ width: '100%', maxWidth: 320 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 4,
+              p: 4,
+              boxShadow: '0 8px 24px rgba(244, 67, 54, 0.15)',
+              border: '1px solid rgba(244, 67, 54, 0.2)',
+              bgcolor: 'rgba(244, 67, 54, 0.05)',
+            }}
+          >
+            <WarningIcon sx={{ fontSize: 36, color: 'error.main', mb: 2 }} />
+            <Typography
+              variant="body1"
+              color="error.main"
+              sx={{
+                fontSize: '0.9rem',
+                fontWeight: 700,
+                lineHeight: 1.4,
+                mb: 3,
+              }}
+            >
+              {error}
+            </Typography>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{
+                fontSize: '0.75rem',
+                fontWeight: 500,
+                lineHeight: 1.4,
+              }}
+            >
+              存储清理功能仅适用于标准网页
+            </Typography>
+          </Box>
+        </Box>
       </Container>
     );
   }
 
   // 这里的总大小仅包含以字节计算的项
-  const totalSize = (sizes.cookies || 0) + (sizes.localStorage || 0) + (sizes.sessionStorage || 0) + (sizes.indexedDB || 0);
+  const totalSize =
+    (sizes.cookies || 0) +
+    (sizes.localStorage || 0) +
+    (sizes.sessionStorage || 0) +
+    (sizes.indexedDB || 0);
 
   const OptionItem = ({
     label,
@@ -211,25 +312,32 @@ export default function StorageCleanerPage() {
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
-        py: 0.8,
-        px: 1.2,
-        borderRadius: 2.5,
-        transition: 'all 0.2s',
-        '&:hover': { bgcolor: 'grey.50' },
+        py: 1,
+        px: 1.5,
+        borderRadius: 3,
+        transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+        bgcolor: checked ? 'rgba(255, 152, 0, 0.05)' : 'transparent',
+        border: `1px solid ${checked ? 'rgba(255, 152, 0, 0.2)' : 'transparent'}`,
+        '&:hover': {
+          bgcolor: checked ? 'rgba(255, 152, 0, 0.1)' : 'rgba(0, 0, 0, 0.02)',
+          transform: 'translateY(-1px)',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+        },
       }}
     >
-      <Box sx={{ flex: 1, minWidth: 0, mr: 1 }}>
+      <Box sx={{ flex: 1, minWidth: 0, mr: 1.5 }}>
         <Typography
-          variant="caption"
-          fontWeight={800}
-          color="text.primary"
-          sx={{ 
-            fontSize: '0.7rem', 
-            display: 'block', 
-            lineHeight: 1.1,
+          variant="body2"
+          fontWeight={700}
+          color={checked ? storageCleanerPageStyles.warningColor : 'text.primary'}
+          sx={{
+            fontSize: '0.75rem',
+            display: 'block',
+            lineHeight: 1.2,
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            textOverflow: 'ellipsis',
+            transition: 'color 0.2s',
           }}
         >
           {label}
@@ -237,14 +345,15 @@ export default function StorageCleanerPage() {
         {size !== undefined && size > 0 ? (
           <Typography
             variant="caption"
-            sx={{ 
-              color: 'text.disabled', 
-              fontSize: '0.6rem', 
-              fontWeight: 700,
+            sx={{
+              color: 'text.secondary',
+              fontSize: '0.65rem',
+              fontWeight: 600,
               display: 'block',
-              mt: 0.2,
+              mt: 0.3,
               lineHeight: 1,
-              whiteSpace: 'nowrap'
+              whiteSpace: 'nowrap',
+              opacity: 0.8,
             }}
           >
             {isCount ? `${size} 个` : formatSize(size)}
@@ -252,13 +361,14 @@ export default function StorageCleanerPage() {
         ) : (
           <Typography
             variant="caption"
-            sx={{ 
-              color: 'grey.300', 
-              fontSize: '0.6rem', 
+            sx={{
+              color: 'grey.400',
+              fontSize: '0.65rem',
               fontWeight: 500,
               display: 'block',
-              mt: 0.2,
-              lineHeight: 1
+              mt: 0.3,
+              lineHeight: 1,
+              fontStyle: 'italic',
             }}
           >
             无数据
@@ -270,63 +380,89 @@ export default function StorageCleanerPage() {
         checked={checked}
         onChange={onChange}
         color="warning"
-        sx={{ p: 0.5 }}
+        sx={{
+          p: 0.6,
+          '& .MuiSvgIcon-root': {
+            fontSize: 18,
+            transition: 'transform 0.2s',
+          },
+          '&:hover .MuiSvgIcon-root': {
+            transform: 'scale(1.1)',
+          },
+        }}
       />
     </Box>
   );
 
   return (
-    <Box sx={{ pb: 2 }}>
+    <Box sx={{ bgcolor: '#f5f5f5', minHeight: '100%', pb: 2 }}>
       <Container sx={{ py: 2 }}>
         {/* Domain Header */}
-        <Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 2 }}>
+        <Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 3 }}>
           <Box
             sx={{
-              p: 1,
-              borderRadius: 2.5,
-              bgcolor: '#fff4e5',
-              color: '#ff9800',
+              p: 1.2,
+              borderRadius: 3,
+              bgcolor: 'rgba(255, 152, 0, 0.1)',
+              color: storageCleanerPageStyles.warningColor,
               display: 'flex',
+              boxShadow: '0 2px 8px rgba(255, 152, 0, 0.15)',
+              transition: 'all 0.2s',
+              '&:hover': {
+                bgcolor: 'rgba(255, 152, 0, 0.15)',
+                transform: 'scale(1.05)',
+              },
             }}
           >
-            <StorageIcon sx={{ fontSize: 20 }} />
+            <StorageIcon sx={{ fontSize: 22 }} />
           </Box>
           <Box sx={{ flex: 1 }}>
             <Stack direction="row" justifyContent="space-between" alignItems="center">
               <Typography
-                variant="subtitle1"
+                variant="h6"
                 fontWeight={900}
-                sx={{ letterSpacing: '-0.5px', lineHeight: 1.2 }}
+                sx={{
+                  letterSpacing: '-0.5px',
+                  lineHeight: 1.2,
+                  fontSize: '1rem',
+                  color: 'text.primary',
+                }}
               >
                 存储清理
               </Typography>
               {totalSize > 0 && (
-                <Typography
-                  variant="caption"
+                <Box
                   sx={{
-                    bgcolor: '#fff4e5',
-                    color: '#ff9800',
-                    px: 1,
-                    py: 0.2,
-                    borderRadius: 1.5,
+                    bgcolor: 'rgba(255, 152, 0, 0.15)',
+                    color: storageCleanerPageStyles.warningColor,
+                    px: 1.5,
+                    py: 0.3,
+                    borderRadius: 2,
                     fontWeight: 800,
-                    fontSize: '0.65rem',
+                    fontSize: '0.7rem',
+                    boxShadow: '0 2px 4px rgba(255, 152, 0, 0.2)',
+                    transition: 'all 0.2s',
+                    '&:hover': {
+                      bgcolor: 'rgba(255, 152, 0, 0.25)',
+                    },
                   }}
                 >
                   已占用 {formatSize(totalSize)}
-                </Typography>
+                </Box>
               )}
             </Stack>
             <Typography
-              variant="caption"
+              variant="body2"
               color="text.secondary"
               sx={{
                 fontWeight: 600,
                 display: 'block',
-                maxWidth: 220,
+                maxWidth: 240,
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
+                mt: 0.3,
+                fontSize: '0.75rem',
               }}
             >
               {domain || '加载中...'}
@@ -337,15 +473,20 @@ export default function StorageCleanerPage() {
         {/* Storage Options Grid */}
         <Box
           sx={{
-            mb: 2,
+            mb: 3,
             border: '1px solid',
             borderColor: 'grey.100',
             borderRadius: 4,
-            p: 0.8,
+            p: 1.2,
             bgcolor: 'background.paper',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
+            transition: 'all 0.2s',
+            '&:hover': {
+              boxShadow: '0 6px 16px rgba(0, 0, 0, 0.08)',
+            },
           }}
         >
-          <Grid container spacing={0}>
+          <Grid container spacing={1.5}>
             <Grid size={6}>
               <OptionItem
                 label="LocalStorage"
@@ -356,7 +497,7 @@ export default function StorageCleanerPage() {
             </Grid>
             <Grid size={6}>
               <OptionItem
-                label="Session"
+                label="Session Storage"
                 checked={options.sessionStorage}
                 size={sizes.sessionStorage}
                 onChange={() => handleOptionChange('sessionStorage')}
@@ -380,7 +521,7 @@ export default function StorageCleanerPage() {
             </Grid>
             <Grid size={6}>
               <OptionItem
-                label="Cache"
+                label="Cache Storage"
                 checked={options.cacheStorage}
                 size={sizes.cacheStorage}
                 isCount
@@ -389,28 +530,34 @@ export default function StorageCleanerPage() {
             </Grid>
             <Grid size={6}>
               <OptionItem
-                label="Workers"
+                label="Service Workers"
                 checked={options.serviceWorkers}
                 size={sizes.serviceWorkers}
                 isCount
-              onChange={() => handleOptionChange('serviceWorkers')}
+                onChange={() => handleOptionChange('serviceWorkers')}
               />
             </Grid>
           </Grid>
-          <Divider sx={{ my: 0.8, borderColor: 'grey.50' }} />
+          <Divider sx={{ my: 1.2, borderColor: 'grey.100' }} />
           <Box
             sx={{
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
-              px: 1.2,
-              py: 0.4,
+              px: 1.5,
+              py: 0.6,
+              bgcolor: 'rgba(0, 0, 0, 0.02)',
+              borderRadius: 2,
+              transition: 'all 0.2s',
+              '&:hover': {
+                bgcolor: 'rgba(0, 0, 0, 0.04)',
+              },
             }}
           >
             <Typography
-              variant="caption"
-              fontWeight={800}
-              sx={{ color: 'text.secondary', fontSize: '0.65rem' }}
+              variant="body2"
+              fontWeight={700}
+              sx={{ color: 'text.secondary', fontSize: '0.7rem' }}
             >
               全选所有项
             </Typography>
@@ -420,7 +567,16 @@ export default function StorageCleanerPage() {
               indeterminate={someSelected}
               onChange={(e) => handleSelectAll(e.target.checked)}
               color="warning"
-              sx={{ p: 0.5 }}
+              sx={{
+                p: 0.6,
+                '& .MuiSvgIcon-root': {
+                  fontSize: 18,
+                  transition: 'transform 0.2s',
+                },
+                '&:hover .MuiSvgIcon-root': {
+                  transform: 'scale(1.1)',
+                },
+              }}
             />
           </Box>
         </Box>
@@ -428,8 +584,8 @@ export default function StorageCleanerPage() {
         {/* Auto Refresh Toggle */}
         <Box
           sx={{
-            mb: 2,
-            p: 1.2,
+            mb: 3,
+            p: 1.5,
             borderRadius: 4,
             bgcolor: 'background.paper',
             border: '1px solid',
@@ -437,9 +593,14 @@ export default function StorageCleanerPage() {
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+            transition: 'all 0.2s',
+            '&:hover': {
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+            },
           }}
         >
-          <Typography variant="caption" fontWeight={700}>
+          <Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem' }}>
             清理后自动刷新页面
           </Typography>
           <Switch
@@ -447,6 +608,18 @@ export default function StorageCleanerPage() {
             checked={autoRefresh}
             onChange={(e) => handleAutoRefreshChange(e.target.checked)}
             color="warning"
+            sx={{
+              '& .MuiSwitch-track': {
+                borderRadius: 20,
+              },
+              '& .MuiSwitch-thumb': {
+                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+                transition: 'all 0.2s',
+              },
+              '&:hover .MuiSwitch-thumb': {
+                transform: 'scale(1.1)',
+              },
+            }}
           />
         </Box>
 
@@ -455,13 +628,21 @@ export default function StorageCleanerPage() {
           variant="contained"
           onClick={() => setShowConfirm(true)}
           sx={{
-            py: 1.2,
+            py: 1.3,
             borderRadius: 4,
-            bgcolor: '#ff9800',
+            bgcolor: storageCleanerPageStyles.warningColor,
             fontWeight: 800,
             fontSize: '0.85rem',
-            boxShadow: 'none',
-            '&:hover': { bgcolor: '#f57c00', boxShadow: '0 8px 16px rgba(255, 152, 0, 0.2)' },
+            boxShadow: '0 4px 12px rgba(255, 152, 0, 0.25)',
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            '&:hover': {
+              bgcolor: storageCleanerPageStyles.warningDark,
+              boxShadow: '0 8px 20px rgba(255, 152, 0, 0.35)',
+              transform: 'translateY(-2px)',
+            },
+            '&:active': {
+              transform: 'translateY(0)',
+            },
           }}
           disabled={loading}
           fullWidth
@@ -471,13 +652,23 @@ export default function StorageCleanerPage() {
 
         {/* Result & Refresh Secondary Action */}
         {result && (
-          <Box sx={{ mt: 2 }}>
+          <Box sx={{ mt: 3, animation: 'fadeIn 0.3s ease-in-out' }}>
             <Alert
               severity={result.success ? 'success' : 'error'}
               sx={{
-                borderRadius: 2.5,
-                py: 0,
-                '& .MuiAlert-message': { fontSize: '0.75rem', fontWeight: 600 },
+                borderRadius: 3,
+                py: 1,
+                px: 2,
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+                '& .MuiAlert-message': {
+                  fontSize: '0.8rem',
+                  fontWeight: 600,
+                  lineHeight: 1.4,
+                },
+                '& .MuiAlert-icon': {
+                  fontSize: '1.2rem',
+                  mr: 1,
+                },
               }}
             >
               {result.success ? formatCleaningResult(result) : result.error || '清理失败'}