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 文档说明新功能

components/CopyButton.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import { copyToClipboard } from '@/utils/clipboard';
+
+interface CopyButtonProps {
+  text: string;
+  tooltip?: string;
+  size?: 'small' | 'medium' | 'large';
+  color?: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string;
+  style?: React.CSSProperties;
+  showMessage?: (message: string, options?: { severity: 'success' | 'error' }) => void;
+}
+
+/**
+ * 复制按钮组件
+ * @param text 要复制的文本
+ * @param tooltip 提示信息
+ * @param size 按钮大小
+ * @param color 按钮颜色
+ * @returns 复制按钮组件
+ */
+export const CopyButton: React.FC<CopyButtonProps> = ({
+  text,
+  tooltip = '复制',
+  size = 'small',
+  color = 'primary',
+  style,
+  showMessage,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    if (text) {
+      const success = await copyToClipboard(text, showMessage);
+      if (success) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }
+    } else {
+      showMessage?.('无内容可复制', { severity: 'error' });
+    }
+  };
+
+  return (
+    <Tooltip title={tooltip}>
+      <IconButton
+        size={size}
+        onClick={handleCopy}
+        style={style}
+        sx={{
+          color: copied ? 'success.main' : color,
+          bgcolor: '#fff',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+          '&:hover': {
+            bgcolor: copied
+              ? 'success.main'
+              : typeof color === 'string' &&
+                  !['primary', 'secondary', 'success', 'error', 'info', 'warning'].includes(color)
+                ? color
+                : `${color}.main`,
+            color: '#fff',
+          },
+        }}
+      >
+        {copied ? (
+          <CheckIcon fontSize={size === 'small' ? 'small' : 'medium'} />
+        ) : (
+          <ContentCopyIcon fontSize={size === 'small' ? 'small' : 'medium'} />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default CopyButton;

components/GlobalSnackbar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Snackbar, Alert, type SxProps, type Theme, alpha } from '@mui/material';
+import { Snackbar, Alert, type SxProps, type Theme, alpha, Portal } from '@mui/material';
 
 export type SnackbarSeverity = 'success' | 'info' | 'warning' | 'error';
 
@@ -61,39 +61,30 @@ export function GlobalSnackbar({
   onClose,
   severity = defaultProps.severity,
   autoHideDuration = defaultProps.autoHideDuration,
-  anchorOrigin = defaultProps.anchorOrigin,
   showAlert = defaultProps.showAlert,
   hideIcon = defaultProps.hideIcon,
-  sx,
-  alertSx,
 }: GlobalSnackbarProps) {
-  // 共享的固定定位样式
-  const fixedSx: SxProps<Theme> = {
-    position: 'fixed',
-    bottom: '24px !important', // 固定在视口底部
-    left: '50% !important',
-    transform: 'translateX(-50%) !important',
-    zIndex: (theme) => theme.zIndex.tooltip + 100,
-    maxWidth: '90%',
-    width: 'max-content',
-  };
-
-  if (showAlert) {
-    return (
+  // 使用 Portal 将 Snackbar 传送到 DOM 顶层 (body 标签下)
+  return (
+    <Portal>
       <Snackbar
         open={open}
         autoHideDuration={autoHideDuration}
         onClose={onClose}
-        anchorOrigin={anchorOrigin}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         disableWindowBlurListener
-        sx={[fixedSx, ...(Array.isArray(sx) ? sx : [sx])]}
+        sx={{
+          zIndex: 999999,
+          // 确保距离底部的间距
+          bottom: { xs: '24px', sm: '24px' },
+        }}
       >
-        <Alert
-          severity={severity}
-          variant="filled"
-          icon={hideIcon ? false : undefined}
-          sx={[
-            { 
+        {showAlert ? (
+          <Alert
+            severity={severity}
+            variant="filled"
+            icon={hideIcon ? false : undefined}
+            sx={{
               borderRadius: '50px',
               px: 2.5,
               py: 0.2,
@@ -103,39 +94,18 @@ export function GlobalSnackbar({
               justifyContent: 'center',
               fontWeight: 800,
               fontSize: '0.75rem',
-              letterSpacing: '0.02em',
               backgroundImage: 'none',
-              boxShadow: (theme: Theme) => `0 12px 32px ${alpha(theme.palette[severity].main, 0.35)}`,
-              
-              '& .MuiAlert-icon': {
-                mr: 0.5,
-                fontSize: '1.1rem',
-                color: '#fff'
-              },
-              '& .MuiAlert-message': {
-                color: '#fff',
-                padding: '6px 0',
-                textAlign: 'center'
-              }
-            },
-            ...(Array.isArray(alertSx) ? alertSx : [alertSx]),
-          ]}
-        >
-          {message}
-        </Alert>
+              boxShadow: (theme: Theme) =>
+                `0 12px 32px ${alpha(theme.palette[severity].main, 0.35)}`,
+              '& .MuiAlert-icon': { mr: 0.5, fontSize: '1.1rem', color: '#fff' },
+              '& .MuiAlert-message': { color: '#fff', padding: '6px 0' },
+            }}
+          >
+            {message}
+          </Alert>
+        ) : undefined}
       </Snackbar>
-    );
-  }
-
-  return (
-    <Snackbar
-      open={open}
-      autoHideDuration={autoHideDuration}
-      onClose={onClose}
-      anchorOrigin={anchorOrigin}
-      message={message}
-      sx={[fixedSx, ...(Array.isArray(sx) ? sx : [sx])]}
-    />
+    </Portal>
   );
 }
 

components/ToolCard.tsx

@@ -11,15 +11,16 @@ interface ToolCardProps {
   icon: React.ReactNode;
   onClick: () => void;
   hasAI?: boolean;
+  cardBackgroundColor?: string;
 }
 
-export default function ToolCard({ title, description, snapshot, colorCode, icon, onClick, hasAI }: ToolCardProps) {
+export default function ToolCard({ title, description, snapshot, colorCode, icon, onClick, hasAI, cardBackgroundColor = 'background.paper' }: ToolCardProps) {
   return (
     <Box
       onClick={onClick}
       sx={{
         position: 'relative',
-        bgcolor: 'background.paper',
+        bgcolor: cardBackgroundColor,
         borderRadius: 4,
         p: 2.5,
         cursor: 'pointer',

components/TopBar.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Box, IconButton, Typography, Stack, Tooltip } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
@@ -7,10 +8,17 @@ import { useRouter } from '@/providers/RouterProvider';
 export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
   const { currentPage, goBack } = useRouter();
 
+  const isDetachedMode = useMemo(() => {
+    return new URLSearchParams(window.location.search).get('mode') === 'detached';
+  }, []);
+
   const handleDetach = () => {
-    // 弹出脱离窗口 (以独立面板形式打开当前 URL)
+    // 弹出脱离窗口 (以独立面板形式打开当前 URL，并标记 mode=detached)
+    const url = new URL(window.location.href);
+    url.searchParams.set('mode', 'detached');
+
     chrome.windows.create({
-      url: window.location.href,
+      url: url.toString(),
       type: 'panel',
       width: 420,
       height: 600
@@ -62,11 +70,13 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
       </Typography>
 
       <Stack direction="row" spacing={1} sx={{ width: 80, justifyContent: 'flex-end' }}>
-        <Tooltip title="独立窗口模式">
-          <IconButton size="small" onClick={handleDetach}>
-            <OpenInNewIcon sx={{ fontSize: 18 }} />
-          </IconButton>
-        </Tooltip>
+        {!isDetachedMode && (
+          <Tooltip title="独立窗口模式">
+            <IconButton size="small" onClick={handleDetach}>
+              <OpenInNewIcon sx={{ fontSize: 18 }} />
+            </IconButton>
+          </Tooltip>
+        )}
         <Tooltip title="设置">
           <IconButton size="small" onClick={onOpenOptions}>
             <SettingsIcon sx={{ fontSize: 18 }} />

components/__tests__/Button.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from '../Button';
+
+describe('Button Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render with default props', () => {
+      render(<Button>Click Me</Button>);
+      const button = screen.getByRole('button', { name: /click me/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should render with custom text', () => {
+      render(<Button>Submit</Button>);
+      expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument();
+    });
+
+    it('should render with different variants', () => {
+      const { rerender } = render(<Button variant="contained">Contained</Button>);
+      expect(screen.getByRole('button', { name: /contained/i })).toBeInTheDocument();
+
+      rerender(<Button variant="outlined">Outlined</Button>);
+      expect(screen.getByRole('button', { name: /outlined/i })).toBeInTheDocument();
+
+      rerender(<Button variant="text">Text</Button>);
+      expect(screen.getByRole('button', { name: /text/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call onClick when clicked', () => {
+      const handleClick = vi.fn();
+      render(<Button onClick={handleClick}>Click Me</Button>);
+
+      fireEvent.click(screen.getByRole('button', { name: /click me/i }));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onClick when disabled', () => {
+      const handleClick = vi.fn();
+      render(<Button onClick={handleClick} disabled>Disabled Button</Button>);
+
+      fireEvent.click(screen.getByRole('button', { name: /disabled button/i }));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply fullWidth prop', () => {
+      render(<Button fullWidth>Full Width</Button>);
+      const button = screen.getByRole('button', { name: /full width/i });
+      expect(button).toHaveClass('MuiButton-fullWidth');
+    });
+  });
+
+  describe('States', () => {
+    it('should render in loading state', () => {
+      render(<Button loading>Loading</Button>);
+      const button = screen.getByRole('button', { name: /loading/i });
+      expect(button).toHaveClass('MuiButton-loading');
+    });
+
+    it('should render as disabled', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByRole('button', { name: /disabled/i });
+      expect(button).toBeDisabled();
+    });
+  });
+});

components/__tests__/GlobalSnackbar.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { GlobalSnackbar, useSnackbar, type GlobalSnackbarProps } from '../GlobalSnackbar';
+
+describe('GlobalSnackbar Component', () => {
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const defaultProps: GlobalSnackbarProps = {
+    message: 'Test message',
+    open: true,
+    onClose: mockOnClose,
+  };
+
+  describe('Rendering', () => {
+    it('should render with default props', () => {
+      render(<GlobalSnackbar {...defaultProps} />);
+      expect(screen.getByText('Test message')).toBeInTheDocument();
+    });
+
+    it.each(['success', 'info', 'warning', 'error'] as const)(
+      'should render with %s severity',
+      (severity) => {
+        render(
+          <GlobalSnackbar {...defaultProps} severity={severity} />
+        );
+        expect(screen.getByText('Test message')).toBeInTheDocument();
+      }
+    );
+
+    it('should render with custom anchor origin', () => {
+      render(
+        <GlobalSnackbar
+          {...defaultProps}
+          anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+        />
+      );
+      expect(screen.getByText('Test message')).toBeInTheDocument();
+    });
+  });
+
+  describe('useSnackbar Hook', () => {
+    it('should return initial state', () => {
+      const TestComponent = () => {
+        const { snackbarProps } = useSnackbar();
+        return (
+          <div>
+            <span data-testid="open">{String(snackbarProps.open)}</span>
+            <span data-testid="message">{snackbarProps.message}</span>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+      expect(screen.getByTestId('open').textContent).toBe('false');
+      expect(screen.getByTestId('message').textContent).toBe('');
+    });
+
+    it('should show message when showMessage is called', async () => {
+      const TestComponent = () => {
+        const { snackbarProps, showMessage } = useSnackbar();
+
+        return (
+          <div>
+            <button onClick={() => showMessage('Hello')}>Show</button>
+            <span data-testid="message">{snackbarProps.message}</span>
+            <span data-testid="open">{String(snackbarProps.open)}</span>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /show/i }));
+      });
+
+      expect(screen.getByTestId('message').textContent).toBe('Hello');
+      expect(screen.getByTestId('open').textContent).toBe('true');
+    });
+
+    it('should close message when closeMessage is called', async () => {
+      const TestComponent = () => {
+        const { snackbarProps, showMessage, closeMessage } = useSnackbar();
+
+        return (
+          <div>
+            <button onClick={() => showMessage('Hello')}>Show</button>
+            <button onClick={closeMessage}>Close</button>
+            <span data-testid="open">{String(snackbarProps.open)}</span>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /show/i }));
+      });
+
+      expect(screen.getByTestId('open').textContent).toBe('true');
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /close/i }));
+      });
+
+      expect(screen.getByTestId('open').textContent).toBe('false');
+    });
+
+    it('should apply custom options', async () => {
+      const TestComponent = () => {
+        const { snackbarProps, showMessage } = useSnackbar({ severity: 'warning' });
+
+        return (
+          <div>
+            <button onClick={() => showMessage('Warning!')}>Show</button>
+            <span data-testid="severity">{snackbarProps.severity}</span>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /show/i }));
+      });
+
+      expect(screen.getByTestId('severity').textContent).toBe('warning');
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call onClose when close is triggered', async () => {
+      render(<GlobalSnackbar {...defaultProps} />);
+
+      await act(async () => {
+        // Trigger close by timeout (autoHideDuration)
+      });
+
+      // Note: MUI Snackbar's close behavior depends on autoHideDuration
+    });
+  });
+});

components/__tests__/RouterContainer.test.tsx

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import RouterContainer from '../RouterContainer';
+import { RouterProvider } from '@/providers/RouterProvider';
+import type { PageType } from '@/types/storage';
+
+const mockRouterValue = {
+  currentPage: 'dashboard' as PageType,
+  visiblePages: ['dashboard', 'timestamp'] as PageType[],
+  pageOrder: ['timestamp'] as PageType[],
+  isLoaded: true,
+  navigateTo: vi.fn(),
+  navigateLocal: vi.fn(),
+  syncNavigation: vi.fn(),
+  goBack: vi.fn(),
+  setVisiblePages: vi.fn(),
+  setPageOrder: vi.fn(),
+};
+
+vi.mock('@/providers/RouterProvider', () => ({
+  useRouter: () => mockRouterValue,
+  RouterProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe('RouterContainer Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderWithProvider = (ui: React.ReactElement) => {
+    return render(<RouterProvider>{ui}</RouterProvider>);
+  };
+
+  describe('Rendering', () => {
+    it('should render loading state when isLoaded is false', () => {
+      mockRouterValue.isLoaded = false;
+      renderWithProvider(<RouterContainer />);
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('should render page content when isLoaded is true', () => {
+      mockRouterValue.isLoaded = true;
+      mockRouterValue.currentPage = 'dashboard';
+      const { container } = renderWithProvider(<RouterContainer />);
+      expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
+    });
+  });
+
+  describe('Animation classes', () => {
+    it('should apply dashboard animation class on dashboard page', () => {
+      mockRouterValue.currentPage = 'dashboard';
+      renderWithProvider(<RouterContainer />);
+      const box = document.querySelector('.page-transition-dashboard');
+      expect(box).toBeInTheDocument();
+    });
+
+    it('should apply enter animation class on non-dashboard page', () => {
+      mockRouterValue.currentPage = 'timestamp';
+      renderWithProvider(<RouterContainer />);
+      const box = document.querySelector('.page-transition-enter');
+      expect(box).toBeInTheDocument();
+    });
+  });
+
+  describe('Route handling', () => {
+    it('should update when currentPage changes', () => {
+      const { rerender } = renderWithProvider(<RouterContainer />);
+
+      mockRouterValue.currentPage = 'timestamp';
+      rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
+
+      const box = document.querySelector('.page-transition-enter');
+      expect(box).toBeInTheDocument();
+    });
+  });
+});

components/__tests__/StorageCleanerConfirm.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { StorageCleanerConfirm } from '../StorageCleanerConfirm';
+import type { StorageCleanerOptions } from '@/types/storage';
+
+describe('StorageCleanerConfirm Component', () => {
+  const mockOnClose = vi.fn();
+  const mockOnConfirm = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const defaultOptions: StorageCleanerOptions = {
+    localStorage: true,
+    sessionStorage: true,
+    indexedDB: true,
+    cookies: true,
+    cacheStorage: true,
+    serviceWorkers: true,
+  };
+
+  const renderComponent = (props?: Partial<React.ComponentProps<typeof StorageCleanerConfirm>>) => {
+    return render(
+      <StorageCleanerConfirm
+        open={true}
+        onClose={mockOnClose}
+        onConfirm={mockOnConfirm}
+        options={defaultOptions}
+        {...props}
+      />
+    );
+  };
+
+  describe('Rendering', () => {
+    it('should render dialog when open', () => {
+      renderComponent();
+      expect(screen.getByText('确认清理数据？')).toBeInTheDocument();
+    });
+
+    it('should display warning message', () => {
+      renderComponent();
+      expect(screen.getByText(/此操作不可撤销/i)).toBeInTheDocument();
+    });
+
+    it('should display selected options as chips', () => {
+      renderComponent();
+      expect(screen.getByText('localStorage')).toBeInTheDocument();
+      expect(screen.getByText('sessionStorage')).toBeInTheDocument();
+      expect(screen.getByText('cookies')).toBeInTheDocument();
+    });
+
+    it('should display cancel and confirm buttons', () => {
+      renderComponent();
+      expect(screen.getByRole('button', { name: /取消/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /确认清理/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call onClose when cancel is clicked', () => {
+      renderComponent();
+
+      fireEvent.click(screen.getByRole('button', { name: /取消/i }));
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+    });
+
+    it('should call onConfirm when confirm is clicked', () => {
+      renderComponent();
+
+      fireEvent.click(screen.getByRole('button', { name: /确认清理/i }));
+      expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+      expect(mockOnClose).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Options filtering', () => {
+    it('should only show selected options', () => {
+      const partialOptions: StorageCleanerOptions = {
+        localStorage: true,
+        sessionStorage: false,
+        indexedDB: true,
+        cookies: false,
+        cacheStorage: false,
+        serviceWorkers: false,
+      };
+
+      renderComponent({ options: partialOptions });
+
+      expect(screen.getByText('localStorage')).toBeInTheDocument();
+      expect(screen.getByText('indexedDB')).toBeInTheDocument();
+      expect(screen.queryByText('sessionStorage')).not.toBeInTheDocument();
+      expect(screen.queryByText('cookies')).not.toBeInTheDocument();
+    });
+
+    it('should handle empty options', () => {
+      const emptyOptions: StorageCleanerOptions = {
+        localStorage: false,
+        sessionStorage: false,
+        indexedDB: false,
+        cookies: false,
+        cacheStorage: false,
+        serviceWorkers: false,
+      };
+
+      renderComponent({ options: emptyOptions });
+
+      const chips = screen.queryAllByRole('button');
+      expect(chips.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe('Dialog behavior', () => {
+    it('should not render when open is false', () => {
+      renderComponent({ open: false });
+      expect(screen.queryByText('确认清理数据？')).not.toBeInTheDocument();
+    });
+
+    it('should render with different options', () => {
+      const customOptions: StorageCleanerOptions = {
+        localStorage: false,
+        sessionStorage: true,
+        indexedDB: false,
+        cookies: true,
+        cacheStorage: false,
+        serviceWorkers: false,
+      };
+
+      renderComponent({ options: customOptions });
+
+      expect(screen.getByText('sessionStorage')).toBeInTheDocument();
+      expect(screen.getByText('cookies')).toBeInTheDocument();
+    });
+  });
+});

components/__tests__/ToolCard.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ToolCard from '../ToolCard';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+
+describe('ToolCard Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render with title and description', () => {
+      render(
+        <ToolCard
+          title="Test Tool"
+          description="This is a test tool"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(screen.getByText('Test Tool')).toBeInTheDocument();
+      expect(screen.getByText('This is a test tool')).toBeInTheDocument();
+    });
+
+    it('should render with only title when no description', () => {
+      render(
+        <ToolCard
+          title="Title Only"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(screen.getByText('Title Only')).toBeInTheDocument();
+    });
+
+    it('should render icon', () => {
+      render(
+        <ToolCard
+          title="With Icon"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon data-testid="test-icon" />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+    });
+
+    it('should render snapshot content when provided', () => {
+      render(
+        <ToolCard
+          title="With Snapshot"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+          snapshot={<div data-testid="snapshot">Snapshot Content</div>}
+        />
+      );
+
+      expect(screen.getByTestId('snapshot')).toBeInTheDocument();
+    });
+
+    it('should not render snapshot section when not provided', () => {
+      const { container } = render(
+        <ToolCard
+          title="No Snapshot"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('AI Badge', () => {
+    it('should render AI badge when hasAI is true', () => {
+      render(
+        <ToolCard
+          title="AI Tool"
+          hasAI={true}
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      const autoAwesomeIcon = screen.getByTestId('AutoAwesomeIcon');
+      expect(autoAwesomeIcon).toBeInTheDocument();
+    });
+
+    it('should not render AI badge when hasAI is false', () => {
+      render(
+        <ToolCard
+          title="Normal Tool"
+          hasAI={false}
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      const autoAwesomeIcon = screen.queryByTestId('AutoAwesomeIcon');
+      expect(autoAwesomeIcon).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call onClick when clicked', () => {
+      const handleClick = vi.fn();
+      render(
+        <ToolCard
+          title="Clickable"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={handleClick}
+        />
+      );
+
+      const card = screen.getByText('Clickable').closest('.MuiBox-root');
+      if (card) {
+        fireEvent.click(card);
+      }
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom color code', () => {
+      const customColor = '#ff5722';
+      const { container } = render(
+        <ToolCard
+          title="Custom Color"
+          colorCode={customColor}
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      const iconContainer = container.querySelector('.MuiBox-root > div');
+      expect(iconContainer).toBeInTheDocument();
+    });
+  });
+});

components/__tests__/TopBar.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TopBar from '../TopBar';
+import { RouterProvider } from '@/providers/RouterProvider';
+import type { PageType } from '@/types/storage';
+
+const mockRouterValue = {
+  currentPage: 'dashboard' as PageType,
+  visiblePages: ['dashboard', 'timestamp'] as PageType[],
+  pageOrder: ['timestamp'] as PageType[],
+  isLoaded: true,
+  navigateTo: vi.fn(),
+  navigateLocal: vi.fn(),
+  syncNavigation: vi.fn(),
+  goBack: vi.fn(),
+  setVisiblePages: vi.fn(),
+  setPageOrder: vi.fn(),
+};
+
+vi.mock('@/providers/RouterProvider', () => ({
+  useRouter: () => mockRouterValue,
+  RouterProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe('TopBar Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderWithProvider = (ui: React.ReactElement) => {
+    return render(<RouterProvider>{ui}</RouterProvider>);
+  };
+
+  describe('Rendering', () => {
+    it('should render with default title', () => {
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      expect(screen.getByText('Testing Tools')).toBeInTheDocument();
+    });
+
+    it('should render back button when not on dashboard', () => {
+      mockRouterValue.currentPage = 'timestamp';
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      expect(screen.getByTestId('ArrowBackIosNewIcon')).toBeInTheDocument();
+    });
+
+    it('should not render back button on dashboard', () => {
+      mockRouterValue.currentPage = 'dashboard';
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      expect(screen.queryByTestId('ArrowBackIosNewIcon')).not.toBeInTheDocument();
+    });
+
+    it('should render settings button', () => {
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+      expect(screen.getByTestId('SettingsIcon')).toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call onOpenOptions when settings button is clicked', () => {
+      const handleOpenOptions = vi.fn();
+      renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
+
+      fireEvent.click(screen.getByTestId('SettingsIcon'));
+      expect(handleOpenOptions).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call goBack when back button is clicked', () => {
+      mockRouterValue.currentPage = 'timestamp';
+      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
+
+      fireEvent.click(screen.getByTestId('ArrowBackIosNewIcon'));
+      expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
+    });
+  });
+});