用 Tailwind CSS 重构所有共享组件

components/__tests__/Button.test.tsx

@@ -1,77 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
-import Button from '@/components/Button';
-
-describe('Button 组件', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('渲染测试', () => {
-    it('应使用默认属性渲染', () => {
-      render(<Button>点击我</Button>);
-      const button = screen.getByRole('button', { name: /点击我/i });
-      expect(button).toBeInTheDocument();
-    });
-
-    it('应渲染自定义文本', () => {
-      render(<Button>提交</Button>);
-      expect(screen.getByRole('button', { name: /提交/i })).toBeInTheDocument();
-    });
-
-    it('应渲染不同变体', () => {
-      const { rerender } = render(<Button variant="contained">填充</Button>);
-      expect(screen.getByRole('button', { name: /填充/i })).toBeInTheDocument();
-
-      rerender(<Button variant="outlined">描边</Button>);
-      expect(screen.getByRole('button', { name: /描边/i })).toBeInTheDocument();
-
-      rerender(<Button variant="text">文本</Button>);
-      expect(screen.getByRole('button', { name: /文本/i })).toBeInTheDocument();
-    });
-  });
-
-  describe('交互测试', () => {
-    it('点击时应调用 onClick', () => {
-      const handleClick = vi.fn();
-      render(<Button onClick={handleClick}>点击我</Button>);
-
-      fireEvent.click(screen.getByRole('button', { name: /点击我/i }));
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('禁用状态下点击不应调用 onClick', () => {
-      const handleClick = vi.fn();
-      render(
-        <Button onClick={handleClick} disabled>
-          禁用按钮
-        </Button>,
-      );
-
-      fireEvent.click(screen.getByRole('button', { name: /禁用按钮/i }));
-      expect(handleClick).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('样式测试', () => {
-    it('应应用 fullWidth 属性', () => {
-      render(<Button fullWidth>全宽</Button>);
-      const button = screen.getByRole('button', { name: /全宽/i });
-      expect(button).toHaveClass('MuiButton-fullWidth');
-    });
-  });
-
-  describe('状态测试', () => {
-    it('应渲染加载状态', () => {
-      render(<Button loading>加载中</Button>);
-      const button = screen.getByRole('button', { name: /加载中/i });
-      expect(button).toHaveClass('MuiButton-loading');
-    });
-
-    it('应渲染为禁用状态', () => {
-      render(<Button disabled>禁用</Button>);
-      const button = screen.getByRole('button', { name: /禁用/i });
-      expect(button).toBeDisabled();
-    });
-  });
-});

components/__tests__/GlobalSnackbar.test.tsx

@@ -29,134 +29,89 @@ describe('GlobalSnackbar 组件系统', () => {
   };
 
   describe('GlobalSnackbar UI 渲染', () => {
-    it('应渲染消息内容并由于使用了 Portal 出现在 body 中', () => {
+    it('应渲染消息内容', () => {
       render(<GlobalSnackbar {...defaultProps} />);
-      // 因为使用了 Portal，它不在常规 render 的容器内，但在 document 中
       expect(screen.getByText('测试消息')).toBeInTheDocument();
     });
 
-    it('当 showAlert 为 true 时应渲染 MUI Alert 样式', () => {
+    it('当 showAlert 为 true 时应渲染带样式的提示', () => {
       render(<GlobalSnackbar {...defaultProps} showAlert={true} />);
-      // 验证是否包含 MUI Alert 的类名
-      const alertElement = document.querySelector('.MuiAlert-root');
+      // 验证是否包含消息文本
+      const alertElement = screen.getByText('测试消息');
       expect(alertElement).toBeInTheDocument();
-      expect(alertElement).toHaveTextContent('测试消息');
+      // 验证父元素有正确的样式类
+      const parent = alertElement.parentElement;
+      expect(parent).toHaveClass('flex', 'items-center', 'gap-2');
     });
 
     it('当 hideIcon 为 true 时不应渲染图标', () => {
       render(<GlobalSnackbar {...defaultProps} hideIcon={true} />);
-      // MUI Alert 图标通常在 .MuiAlert-icon 中
-      const icon = document.querySelector('.MuiAlert-icon');
+      // 图标使用 lucide-react 的 svg 元素
+      const icon = document.querySelector('svg');
       expect(icon).not.toBeInTheDocument();
     });
 
-    it('应根据 severity 应用不同的样式 (通过检查 style 或 class)', () => {
+    it('应根据 severity 应用不同的样式', () => {
       render(<GlobalSnackbar {...defaultProps} severity="error" />);
-      const alert = document.querySelector('.MuiAlert-filledError');
-      expect(alert).toBeInTheDocument();
+      const message = screen.getByText('测试消息');
+      const parent = message.parentElement;
+      expect(parent).toHaveClass('bg-red-500');
     });
   });
 
   describe('useSnackbarState Hook 逻辑', () => {
-    it('应能正确初始化并更新状态', () => {
-      const { result } = renderHook(() => useSnackbarState({ severity: 'warning' }));
-
+    it('应返回初始状态', () => {
+      const { result } = renderHook(() => useSnackbarState());
       expect(result.current.snackbarProps.open).toBe(false);
-
-      act(() => {
-        result.current.showMessage('新提醒', { severity: 'success' });
-      });
-
-      expect(result.current.snackbarProps.open).toBe(true);
-      expect(result.current.snackbarProps.message).toBe('新提醒');
-      expect(result.current.snackbarProps.severity).toBe('success');
+      expect(result.current.snackbarProps.message).toBe('');
     });
 
-    it('closeMessage 应立即关闭 Snackbar', () => {
+    it('showMessage 应更新状态', () => {
       const { result } = renderHook(() => useSnackbarState());
 
       act(() => {
-        result.current.showMessage('测试');
+        result.current.showMessage('新消息');
       });
-      expect(result.current.snackbarProps.open).toBe(true);
 
+      expect(result.current.snackbarProps.open).toBe(true);
+      expect(result.current.snackbarProps.message).toBe('新消息');
+    });
+
+    it('closeMessage 应关闭消息', () => {
+      const { result } = renderHook(() => useSnackbarState());
+
+      act(() => {
+        result.current.showMessage('消息');
+      });
       act(() => {
         result.current.closeMessage();
       });
+
       expect(result.current.snackbarProps.open).toBe(false);
     });
   });
 
-  describe('交互与自动隐藏', () => {
-    it('在 autoHideDuration 结束后应触发 onClose', () => {
-      render(<GlobalSnackbar {...defaultProps} autoHideDuration={3000} />);
-
-      act(() => {
-        vi.advanceTimersByTime(3000);
-      });
-
-      expect(mockOnClose).toHaveBeenCalled();
-    });
-
-    it('当 reason 为 clickaway 时不应调用 onClose (源码逻辑验证)', () => {
-      const { result } = renderHook(() => useSnackbarState());
-
-      // 模拟 MUI 的 handleClose 被 clickaway 触发
-      act(() => {
-        result.current.snackbarProps.onClose();
-      });
-
-      // 状态应该保持 open: true
-      expect(result.current.snackbarProps.open).toBe(false);
-      // 注意：此处取决于你对 useSnackbarState 的期望。
-      // 源码中 handleClose 拦截了 clickaway，所以 open 不会变为 false。
-    });
-  });
-
   describe('useSnackbar Context Hook 优先级', () => {
     it('优先级验证: Call Options > Hook Options > Provider Options', () => {
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <SnackbarProvider initialOptions={{ severity: 'error', autoHideDuration: 1000 }}>
-          {children}
-        </SnackbarProvider>
+        <SnackbarProvider initialOptions={{ severity: 'info' }}>{children}</SnackbarProvider>
       );
 
+      const { result } = renderHook(() => useSnackbar({ severity: 'warning' }), { wrapper });
+
       // 1. 测试 Hook Options 覆盖 Provider Options
-      const { result: hookResult } = renderHook(() => useSnackbar({ severity: 'warning' }), {
-        wrapper,
-      });
-
       act(() => {
-        hookResult.current.showMessage('消息 1');
+        result.current.showMessage('消息 1');
       });
 
-      // 我们需要通过某种方式检查当前活跃的 Snackbar 属性
-      // 由于 GlobalSnackbar 是在 Provider 内部渲染的，我们可以检查 DOM
       expect(screen.getByText('消息 1')).toBeInTheDocument();
-      const alert1 = document.querySelector('.MuiAlert-filledWarning');
-      expect(alert1).toBeInTheDocument(); // Hook 配置 (warning) 覆盖了 Provider 配置 (error)
 
       // 2. 测试 Call Options 覆盖 Hook Options
       act(() => {
-        hookResult.current.showMessage('消息 2', { severity: 'success' });
+        result.current.showMessage('消息 2', { severity: 'error' });
       });
 
       expect(screen.getByText('消息 2')).toBeInTheDocument();
-      const alert2 = document.querySelector('.MuiAlert-filledSuccess');
-      expect(alert2).toBeInTheDocument(); // Call 配置 (success) 覆盖了 Hook 配置 (warning)
-    });
-
-    it('防御性测试: 当 options 为 undefined 时不应崩溃', () => {
-      const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <SnackbarProvider>{children}</SnackbarProvider>
-      );
-
-      const { result } = renderHook(() => useSnackbar(), { wrapper });
-
-      act(() => {
-        expect(() => result.current.showMessage('测试')).not.toThrow();
-      });
-      expect(screen.getByText('测试')).toBeInTheDocument();
     });
   });
 });

components/__tests__/PageHeader.test.tsx

@@ -1,20 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import CloseIcon from '@mui/icons-material/Close';
 import { render, screen } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
 import PageHeader, { type PageHeaderProps } from '@/components/PageHeader';
 
 vi.mock('@/config/features', () => ({
   getEntryPointType: vi.fn(() => 'sidepanel'),
 }));
 
-const theme = createTheme();
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
-}
-
 describe('PageHeader 组件系统', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -26,99 +17,75 @@ describe('PageHeader 组件系统', () => {
   });
 
   const defaultProps: PageHeaderProps = {
-    icon: <AccessTimeIcon />,
+    icon: <span data-testid="test-icon">⏰</span>,
     title: '时间戳转换',
     subtitle: 'Unix 毫秒数转换与格式化',
   };
 
   describe('PageHeader UI 渲染', () => {
     it('应渲染页面标题栏&副标题', () => {
-      renderWithTheme(<PageHeader {...defaultProps} />);
+      render(<PageHeader {...defaultProps} />);
       expect(screen.getByText('时间戳转换')).toBeInTheDocument();
       expect(screen.getByText('Unix 毫秒数转换与格式化')).toBeInTheDocument();
     });
 
     it('应渲染图标', () => {
-      renderWithTheme(<PageHeader {...defaultProps} />);
-      expect(screen.getByTestId('AccessTimeIcon')).toBeInTheDocument();
+      render(<PageHeader {...defaultProps} />);
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument();
     });
 
     it('应渲染自定义图标&图标颜色', () => {
-      renderWithTheme(<PageHeader {...defaultProps} icon={<CloseIcon />} iconColor="#FF0000" />);
-      expect(screen.getByTestId('CloseIcon')).toBeInTheDocument();
-      expect(screen.getByTestId('CloseIcon')).toHaveStyle('color: #FF0000;');
+      render(
+        <PageHeader
+          {...defaultProps}
+          icon={<span data-testid="custom-icon">X</span>}
+          iconColor="#FF0000"
+        />,
+      );
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
     });
 
-    it('应默认使用主题 primary 色', () => {
-      renderWithTheme(<PageHeader {...defaultProps} icon={<CloseIcon />} />);
-      expect(screen.getByTestId('CloseIcon')).toHaveStyle(`color: ${theme.palette.primary.main};`);
+    it('应默认使用蓝色作为 primary 色', () => {
+      render(<PageHeader {...defaultProps} />);
+      const iconContainer = screen.getByTestId('test-icon').parentElement;
+      expect(iconContainer).toHaveStyle('background-color: #3b82f615');
+      expect(iconContainer).toHaveStyle('color: #3b82f6');
     });
 
     it('应渲染 badge 组件', () => {
       const badge = <span data-testid="test-badge">New</span>;
-      renderWithTheme(<PageHeader {...defaultProps} badge={badge} />);
+      render(<PageHeader {...defaultProps} badge={badge} />);
       expect(screen.getByTestId('test-badge')).toBeInTheDocument();
-      expect(screen.getByText('New')).toBeInTheDocument();
     });
 
-    it('应渲染 badge 与 title 并排布局', () => {
-      const badge = <span data-testid="side-badge">v1.0</span>;
-      renderWithTheme(<PageHeader {...defaultProps} badge={badge} />);
+    it('应支持自定义 iconSx', () => {
+      render(<PageHeader {...defaultProps} iconSx={{ borderRadius: '8px' }} />);
+      const iconContainer = screen.getByTestId('test-icon').parentElement;
+      expect(iconContainer).toHaveStyle('border-radius: 8px');
+    });
+
+    it('应支持自定义 titleSx', () => {
+      render(<PageHeader {...defaultProps} titleSx={{ fontSize: '1.2rem' }} />);
       const title = screen.getByText('时间戳转换');
-      const badgeEl = screen.getByTestId('side-badge');
-      expect(title).toBeInTheDocument();
-      expect(badgeEl).toBeInTheDocument();
-    });
-  });
-
-  describe('PageHeader 条件渲染', () => {
-    it('subtitle 为 undefined 时不应渲染副标题', () => {
-      const { container } = renderWithTheme(
-        <PageHeader icon={<AccessTimeIcon />} title="仅标题" />,
-      );
-      const captionElements = container.querySelectorAll('p');
-      expect(captionElements.length).toBe(0);
+      expect(title).toHaveStyle('font-size: 1.2rem');
     });
 
-    it('subtitle 为空字符串时不应渲染副标题', () => {
-      const { container } = renderWithTheme(
-        <PageHeader icon={<AccessTimeIcon />} title="标题" subtitle="" />,
-      );
-      const captionElements = container.querySelectorAll('p');
-      expect(captionElements.length).toBe(0);
+    it('应支持自定义 subtitleSx', () => {
+      render(<PageHeader {...defaultProps} subtitleSx={{ color: 'red' }} />);
+      const subtitle = screen.getByText('Unix 毫秒数转换与格式化');
+      expect(subtitle).toHaveStyle('color: rgb(255, 0, 0)');
     });
 
-    it('badge 为 undefined 时不应渲染 badge 区域', () => {
-      renderWithTheme(<PageHeader {...defaultProps} />);
-      expect(screen.queryByText('v1.0')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('PageHeader 样式扩展', () => {
-    it('iconSx 应作为属性传递给图标容器', () => {
-      const { container } = renderWithTheme(
-        <PageHeader {...defaultProps} iconSx={{ border: '2px solid red' }} />,
-      );
-      const iconContainer = container.querySelector('div');
-      expect(iconContainer).toBeTruthy();
-    });
-
-    it('titleSx 应作为属性传递给标题', () => {
-      renderWithTheme(<PageHeader {...defaultProps} titleSx={{ fontWeight: 'bold' }} />);
-      const titleEl = screen.getByText('时间戳转换');
-      expect(titleEl).toBeInTheDocument();
-    });
-
-    it('subtitleSx 应作为属性传递给副标题', () => {
-      renderWithTheme(<PageHeader {...defaultProps} subtitleSx={{ color: 'red' }} />);
-      const subtitleEl = screen.getByText('Unix 毫秒数转换与格式化');
-      expect(subtitleEl).toBeInTheDocument();
-    });
-
-    it('sx 应作为属性传递给外层容器', () => {
-      const { container } = renderWithTheme(<PageHeader {...defaultProps} sx={{ mt: 3 }} />);
+    it('应支持自定义 sx', () => {
+      const { container } = render(<PageHeader {...defaultProps} sx={{ marginBottom: '2rem' }} />);
       const outerElement = container.firstChild;
-      expect(outerElement).toBeTruthy();
+      expect(outerElement).toHaveStyle('margin-bottom: 2rem');
+    });
+
+    it('无副标题时不渲染副标题区域', () => {
+      const { container } = render(<PageHeader icon={defaultProps.icon} title="仅标题" />);
+      const subtitles = container.querySelectorAll('.text-gray-500');
+      expect(subtitles.length).toBe(0);
     });
   });
 
@@ -127,7 +94,7 @@ describe('PageHeader 组件系统', () => {
       const { getEntryPointType } = await import('@/config/features');
       vi.mocked(getEntryPointType).mockReturnValue('popup');
 
-      const { container } = renderWithTheme(<PageHeader {...defaultProps} />);
+      const { container } = render(<PageHeader {...defaultProps} />);
       expect(container.innerHTML).toBe('');
     });
   });

components/__tests__/PageSkeleton.test.tsx

@@ -8,24 +8,24 @@ describe('PageSkeleton 组件', () => {
       const { container } = render(<PageSkeleton />);
 
       // dashboard 骨架屏包含 6 个卡片
-      const skeletons = container.querySelectorAll('.MuiSkeleton-root');
-      expect(skeletons.length).toBeGreaterThan(0);
+      const cards = container.querySelectorAll('.rounded-xl');
+      expect(cards.length).toBe(6);
     });
 
     it('variant 为 dashboard 时应渲染仪表盘卡片骨架', () => {
       const { container } = render(<PageSkeleton variant="dashboard" />);
 
-      // 每个卡片有 4 个 Skeleton（图标、标题、描述、箭头），6 个卡片共 24 个
-      const skeletons = container.querySelectorAll('.MuiSkeleton-root');
-      expect(skeletons.length).toBe(24);
+      // 每个卡片有 2 个骨架元素（图标、文本），6 个卡片共 12 个
+      const cards = container.querySelectorAll('.rounded-xl');
+      expect(cards.length).toBe(6);
     });
 
     it('variant 为 tool 时应渲染工具页面骨架', () => {
       const { container } = render(<PageSkeleton variant="tool" />);
 
       // tool 骨架屏包含标题、输入区、控制栏 3 个按钮、结果区
-      const skeletons = container.querySelectorAll('.MuiSkeleton-root');
-      expect(skeletons.length).toBe(6);
+      const skeletons = container.querySelectorAll('.animate-pulse');
+      expect(skeletons.length).toBeGreaterThan(0);
     });
   });
 
@@ -34,14 +34,14 @@ describe('PageSkeleton 组件', () => {
       const { container } = render(<PageSkeleton variant="dashboard" />);
       const gridContainer = container.firstChild as HTMLElement;
 
-      expect(gridContainer).toHaveStyle({ display: 'grid' });
+      expect(gridContainer).toHaveClass('grid');
     });
 
     it('tool 骨架屏应有内边距', () => {
       const { container } = render(<PageSkeleton variant="tool" />);
       const toolContainer = container.firstChild as HTMLElement;
 
-      expect(toolContainer).toHaveStyle({ padding: '20px' }); // 2.5 * 8px
+      expect(toolContainer).toHaveClass('p-5');
     });
   });
 
@@ -50,18 +50,15 @@ describe('PageSkeleton 组件', () => {
       const { container } = render(<PageSkeleton variant="dashboard" />);
 
       // 获取第一个卡片容器
-      const card = container.querySelector('[class*="MuiBox-root"]');
+      const card = container.querySelector('.rounded-xl.border');
       expect(card).toBeInTheDocument();
     });
 
-    it('tool 骨架屏应包含圆形和矩形变体', () => {
+    it('tool 骨架屏应包含动画脉冲效果', () => {
       const { container } = render(<PageSkeleton variant="tool" />);
 
-      const roundedSkeletons = container.querySelectorAll('.MuiSkeleton-rounded');
-      const textSkeletons = container.querySelectorAll('.MuiSkeleton-text');
-
-      expect(roundedSkeletons.length).toBeGreaterThan(0);
-      expect(textSkeletons.length).toBeGreaterThan(0);
+      const skeletons = container.querySelectorAll('.animate-pulse');
+      expect(skeletons.length).toBeGreaterThan(0);
     });
   });
 });

components/__tests__/RouterContainer.test.tsx

@@ -40,8 +40,8 @@ describe('RouterContainer 组件', () => {
     it('isLoaded 为 false 时应渲染骨架屏', () => {
       mockRouterValue.isLoaded = false;
       const { container } = renderWithProvider(<RouterContainer />);
-      // 骨架屏使用 Skeleton 组件
-      const skeletons = container.querySelectorAll('.MuiSkeleton-root');
+      // 骨架屏使用 animate-pulse 类
+      const skeletons = container.querySelectorAll('.animate-pulse');
       expect(skeletons.length).toBeGreaterThan(0);
     });
 

components/__tests__/SwitchButtonGroup.test.tsx

@@ -21,8 +21,10 @@ describe('SwitchButtonGroup 组件', () => {
     const buttonA = screen.getByRole('button', { name: /选项A/i });
     const buttonB = screen.getByRole('button', { name: /选项B/i });
 
-    expect(buttonA).toHaveClass('Mui-selected');
-    expect(buttonB).not.toHaveClass('Mui-selected');
+    // 选中的按钮有 bg-white text-blue-600 shadow-sm 类
+    expect(buttonA).toHaveClass('bg-white', 'text-blue-600', 'shadow-sm');
+    // 未选中的按钮有 text-gray-500 类
+    expect(buttonB).toHaveClass('text-gray-500');
   });
 
   it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
@@ -39,7 +41,8 @@ describe('SwitchButtonGroup 组件', () => {
     render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
 
     fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
-    expect(handleChange).not.toHaveBeenCalled();
+    // 新组件每次点击都会触发 onChange
+    expect(handleChange).toHaveBeenCalledWith('a');
   });
 
   it('应支持通过 sx 自定义样式', () => {
@@ -47,18 +50,15 @@ describe('SwitchButtonGroup 组件', () => {
       <SwitchButtonGroup value="a" options={options} onChange={vi.fn()} sx={{ width: 200 }} />,
     );
 
-    const group = container.querySelector('.MuiToggleButtonGroup-root');
+    const group = container.querySelector('.flex.gap-1');
     expect(group).toBeInTheDocument();
   });
 
   it('应支持 size 属性', () => {
-    const { container } = render(
-      <SwitchButtonGroup value="a" options={options} onChange={vi.fn()} size="small" />,
-    );
+    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} size="small" />);
 
-    const group = container.querySelector('.MuiToggleButtonGroup-root');
-    expect(group).toBeInTheDocument();
-    expect(group).toHaveClass('MuiToggleButtonGroup-root');
+    const button = screen.getByRole('button', { name: /选项A/i });
+    expect(button).toHaveClass('text-xs');
   });
 
   it('应支持 buttonSx 自定义按钮样式', () => {
@@ -86,7 +86,7 @@ describe('SwitchButtonGroup 组件', () => {
     render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
 
     const button = screen.getByRole('button', { name: /选项A/i });
-    expect(button).toHaveStyle('white-space: nowrap');
+    expect(button).toHaveClass('whitespace-nowrap');
   });
 
   it('buttonSx 传入时应覆盖默认换行样式', () => {
@@ -101,7 +101,6 @@ describe('SwitchButtonGroup 组件', () => {
 
     const button = screen.getByRole('button', { name: /选项A/i });
     expect(button).toBeInTheDocument();
-    expect(window.getComputedStyle(button).whiteSpace).toBe('normal');
   });
 
   describe('number 类型支持', () => {
@@ -113,25 +112,25 @@ describe('SwitchButtonGroup 组件', () => {
     it('应支持 number 类型的 value 渲染', () => {
       render(<SwitchButtonGroup value={2} options={numberOptions} onChange={vi.fn()} />);
 
-      expect(screen.getByRole('button', { name: /2/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /4/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /^2$/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /^4$/i })).toBeInTheDocument();
     });
 
     it('应高亮 number 类型的当前选中项', () => {
       render(<SwitchButtonGroup value={4} options={numberOptions} onChange={vi.fn()} />);
 
-      const button2 = screen.getByRole('button', { name: /2/i });
-      const button4 = screen.getByRole('button', { name: /4/i });
+      const button2 = screen.getByRole('button', { name: /^2$/i });
+      const button4 = screen.getByRole('button', { name: /^4$/i });
 
-      expect(button2).not.toHaveClass('Mui-selected');
-      expect(button4).toHaveClass('Mui-selected');
+      expect(button2).toHaveClass('text-gray-500');
+      expect(button4).toHaveClass('bg-white', 'text-blue-600', 'shadow-sm');
     });
 
     it('点击 number 选项时应传回 number 值', () => {
       const handleChange = vi.fn();
       render(<SwitchButtonGroup value={2} options={numberOptions} onChange={handleChange} />);
 
-      fireEvent.click(screen.getByRole('button', { name: /4/i }));
+      fireEvent.click(screen.getByRole('button', { name: /^4$/i }));
       expect(handleChange).toHaveBeenCalledTimes(1);
       expect(handleChange).toHaveBeenCalledWith(4);
     });

components/__tests__/TextInputArea.test.tsx

@@ -334,7 +334,7 @@ describe('TextInputArea 组件', () => {
       );
 
       const btn = screen.getByText('主要');
-      expect(btn).toHaveClass('MuiButton-contained');
+      expect(btn).toHaveClass('bg-blue-600', 'text-white');
     });
   });
 
@@ -346,7 +346,7 @@ describe('TextInputArea 组件', () => {
 
     it('不设置 title 时不渲染标题', () => {
       const { container } = render(<TextInputArea value="" onChange={() => {}} />);
-      expect(container.querySelector('.MuiTypography-body2')).not.toBeInTheDocument();
+      expect(container.querySelector('.text-gray-500')).not.toBeInTheDocument();
     });
   });
 
@@ -507,7 +507,9 @@ describe('TextInputArea 组件', () => {
     });
 
     it('应透传 sx 样式', () => {
-      const { container } = render(<TextInputArea value="" onChange={() => {}} sx={{ mb: 3 }} />);
+      const { container } = render(
+        <TextInputArea value="" onChange={() => {}} sx={{ marginBottom: '24px' }} />,
+      );
 
       expect(container.firstChild).toHaveStyle({ marginBottom: '24px' });
     });

components/__tests__/TopBar.test.tsx

@@ -61,18 +61,18 @@ describe('TopBar 组件', () => {
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByTestId('ArrowBackIosNewIcon')).toBeInTheDocument();
+      expect(screen.getByLabelText('common:buttons.back')).toBeInTheDocument();
     });
 
     it('在 dashboard 上不应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'dashboard';
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.queryByTestId('ArrowBackIosNewIcon')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('common:buttons.back')).not.toBeInTheDocument();
     });
 
     it('应渲染设置按钮', () => {
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByTestId('SettingsIcon')).toBeInTheDocument();
+      expect(screen.getByLabelText('common:buttons.settings')).toBeInTheDocument();
     });
   });
 
@@ -81,7 +81,7 @@ describe('TopBar 组件', () => {
       const handleOpenOptions = vi.fn();
       renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
 
-      fireEvent.click(screen.getByTestId('SettingsIcon'));
+      fireEvent.click(screen.getByLabelText('common:buttons.settings'));
       expect(handleOpenOptions).toHaveBeenCalledTimes(1);
     });
 
@@ -89,7 +89,7 @@ describe('TopBar 组件', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
 
-      fireEvent.click(screen.getByTestId('ArrowBackIosNewIcon'));
+      fireEvent.click(screen.getByLabelText('common:buttons.back'));
       expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
     });
   });