faet: 存一版本，首页样式处理好了。

nkebao/src/index.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 16px; /* 基础字体大小，1rem = 16px */
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -9,9 +13,25 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem; /* 16px */
+  line-height: 1.5;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 16px; /* 移动端保持16px基础字体大小 */
+  }
+}
+
+/* 小屏幕设备适配 */
+@media screen and (max-width: 375px) {
+  html {
+    font-size: 14px; /* 小屏幕设备稍微减小字体 */
+  }
+}

nkebao/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Bell, Smartphone, Users, Activity } from 'lucide-react';
+import Chart from 'chart.js/auto';
 
 // 模拟数据
 const stats = {
@@ -54,17 +55,16 @@ export default function Home() {
   };
 
   useEffect(() => {
-    if (chartRef.current) {
+    if (!chartRef.current) return;
-      // 如果已经有图表实例，先销毁它
+
+    // 销毁旧实例
     if (chartInstance.current) {
       chartInstance.current.destroy();
+      chartInstance.current = null;
     }
 
     const ctx = chartRef.current.getContext('2d');
     if (ctx) {
-        // 动态导入Chart.js
-        import('chart.js/auto').then(({ Chart }) => {
-          // 创建新的图表实例
       chartInstance.current = new Chart(ctx, {
         type: 'line',
         data: {
@@ -108,24 +108,33 @@ export default function Home() {
               grid: {
                 display: false,
               },
+              ticks: {
+                font: {
+                  size: 12, // 0.75rem
+                },
+              },
             },
             y: {
               beginAtZero: true,
               grid: {
                 color: 'rgba(0, 0, 0, 0.05)',
               },
+              ticks: {
+                font: {
+                  size: 12, // 0.75rem
+                },
+              },
             },
           },
         },
       });
-        });
-      }
     }
 
-    // 组件卸载时清理图表实例
+    // 卸载时销毁
     return () => {
       if (chartInstance.current) {
         chartInstance.current.destroy();
+        chartInstance.current = null;
       }
     };
   }, []);

nkebao/tailwind.config.js

@@ -4,7 +4,53 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontSize: {
+        'xs': ['0.75rem', { lineHeight: '1rem' }],
+        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
+        'base': ['1rem', { lineHeight: '1.5rem' }],
+        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
+        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
+        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      },
+      spacing: {
+        '0.5': '0.125rem',
+        '1': '0.25rem',
+        '1.5': '0.375rem',
+        '2': '0.5rem',
+        '2.5': '0.625rem',
+        '3': '0.75rem',
+        '3.5': '0.875rem',
+        '4': '1rem',
+        '5': '1.25rem',
+        '6': '1.5rem',
+        '7': '1.75rem',
+        '8': '2rem',
+        '9': '2.25rem',
+        '10': '2.5rem',
+        '11': '2.75rem',
+        '12': '3rem',
+        '14': '3.5rem',
+        '16': '4rem',
+        '20': '5rem',
+        '24': '6rem',
+        '28': '7rem',
+        '32': '8rem',
+        '36': '9rem',
+        '40': '10rem',
+        '44': '11rem',
+        '48': '12rem',
+        '52': '13rem',
+        '56': '14rem',
+        '60': '15rem',
+        '64': '16rem',
+        '72': '18rem',
+        '80': '20rem',
+        '96': '24rem',
+      },
+    },
   },
   plugins: [],
 }