重写所有页面和组件：用纯 Tailwind CSS 替换 MUI 组件和图标

components/__tests__/ToolCard.test.tsx

@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ToolCard from '@/pages/Dashboard/ToolCard';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { Clock } from 'lucide-react';
 
 describe('ToolCard 组件', () => {
   beforeEach(() => {
@@ -16,7 +16,7 @@ describe('ToolCard 组件', () => {
           title="测试工具"
           description="这是一个测试工具"
           colorKey="primary"
-          icon={AccessTimeIcon}
+          icon={Clock}
           onClick={() => {}}
         />,
       );
@@ -26,16 +26,14 @@ describe('ToolCard 组件', () => {
     });
 
     it('无描述时仅渲染标题', () => {
-      render(
-        <ToolCard title="仅标题" colorKey="primary" icon={AccessTimeIcon} onClick={() => {}} />,
-      );
+      render(<ToolCard title="仅标题" colorKey="primary" icon={Clock} onClick={() => {}} />);
 
       expect(screen.getByText('仅标题')).toBeInTheDocument();
     });
 
     it('应渲染图标', () => {
       const { container } = render(
-        <ToolCard title="带图标" colorKey="primary" icon={AccessTimeIcon} onClick={() => {}} />,
+        <ToolCard title="带图标" colorKey="primary" icon={Clock} onClick={() => {}} />,
       );
 
       const svgElement = container.querySelector('svg');
@@ -47,7 +45,7 @@ describe('ToolCard 组件', () => {
         <ToolCard
           title="带快照"
           colorKey="primary"
-          icon={AccessTimeIcon}
+          icon={Clock}
           onClick={() => {}}
           snapshot={<div data-testid="snapshot">快照内容</div>}
         />,
@@ -58,16 +56,14 @@ describe('ToolCard 组件', () => {
 
     it('未提供快照时不渲染快照区域', () => {
       const { container } = render(
-        <ToolCard title="无快照" colorKey="primary" icon={AccessTimeIcon} onClick={() => {}} />,
+        <ToolCard title="无快照" colorKey="primary" icon={Clock} onClick={() => {}} />,
       );
 
       expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
     });
 
     it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
-      render(
-        <ToolCard title="可聚焦" colorKey="primary" icon={AccessTimeIcon} onClick={() => {}} />,
-      );
+      render(<ToolCard title="可聚焦" colorKey="primary" icon={Clock} onClick={() => {}} />);
 
       const button = screen.getByRole('button', { name: /可聚焦/ });
       expect(button).toBeInTheDocument();
@@ -78,9 +74,7 @@ describe('ToolCard 组件', () => {
   describe('交互测试', () => {
     it('点击时应调用 onClick', () => {
       const handleClick = vi.fn();
-      render(
-        <ToolCard title="可点击" colorKey="primary" icon={AccessTimeIcon} onClick={handleClick} />,
-      );
+      render(<ToolCard title="可点击" colorKey="primary" icon={Clock} onClick={handleClick} />);
 
       const button = screen.getByRole('button', { name: /可点击/ });
       fireEvent.click(button);
@@ -90,14 +84,7 @@ describe('ToolCard 组件', () => {
 
     it('按 Enter 键时应调用 onClick', async () => {
       const handleClick = vi.fn();
-      render(
-        <ToolCard
-          title="键盘可触发"
-          colorKey="primary"
-          icon={AccessTimeIcon}
-          onClick={handleClick}
-        />,
-      );
+      render(<ToolCard title="键盘可触发" colorKey="primary" icon={Clock} onClick={handleClick} />);
 
       const button = screen.getByRole('button', { name: /键盘可触发/ });
       await act(async () => {
@@ -112,7 +99,7 @@ describe('ToolCard 组件', () => {
   describe('样式测试', () => {
     it('应应用自定义颜色代码', () => {
       const { container } = render(
-        <ToolCard title="自定义颜色" colorKey="warning" icon={AccessTimeIcon} onClick={() => {}} />,
+        <ToolCard title="自定义颜色" colorKey="warning" icon={Clock} onClick={() => {}} />,
       );
 
       const svgElement = container.querySelector('svg');