用 Tailwind CSS 重构所有共享组件

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