From 7e0d9210a99031ab29a1c1f846e8fefd77b477ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=B0=B8=E5=B9=B3?= <xuyongping@szwycity.cn>
Date: Fri, 4 Jul 2025 16:11:02 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AD=98=E4=B8=80=E6=B3=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/package-lock.json                |   2 +-
 nkebao/package.json                     |   2 +-
 nkebao/src/components/BottomNav.tsx     |   6 +-
 nkebao/src/components/LayoutWrapper.tsx |   2 +-
 nkebao/src/pages/Home.tsx               | 100 +++++++++++++++++-------
 5 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/nkebao/package-lock.json b/nkebao/package-lock.json
index cf8cd7e4..5bf25869 100644
--- a/nkebao/package-lock.json
+++ b/nkebao/package-lock.json
@@ -50,7 +50,7 @@
         "@types/react-dom": "^18.2.17",
         "autoprefixer": "^10.4.20",
         "axios": "^1.6.0",
-        "chart.js": "latest",
+        "chart.js": "^4.5.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "1.0.4",
diff --git a/nkebao/package.json b/nkebao/package.json
index 7f1a5a8f..18c6c45e 100644
--- a/nkebao/package.json
+++ b/nkebao/package.json
@@ -45,7 +45,7 @@
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.20",
     "axios": "^1.6.0",
-    "chart.js": "latest",
+    "chart.js": "^4.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
diff --git a/nkebao/src/components/BottomNav.tsx b/nkebao/src/components/BottomNav.tsx
index b7813f79..046bf0b8 100644
--- a/nkebao/src/components/BottomNav.tsx
+++ b/nkebao/src/components/BottomNav.tsx
@@ -13,8 +13,8 @@ export default function BottomNav() {
   const location = useLocation();
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50">
-      <div className="w-full mx-auto flex justify-around">
+    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 h-16">
+      <div className="w-full h-full mx-auto flex justify-around items-center">
         {navItems.map((item) => {
           const IconComponent = item.icon;
           const isActive = location.pathname === item.href;
@@ -23,7 +23,7 @@ export default function BottomNav() {
             <Link
               key={item.href}
               to={item.href}
-              className={`flex flex-col items-center py-2 px-3 ${
+              className={`flex flex-col items-center justify-center py-2 px-3 h-full ${
                 isActive ? "text-blue-500" : "text-gray-500"
               }`}
             >
diff --git a/nkebao/src/components/LayoutWrapper.tsx b/nkebao/src/components/LayoutWrapper.tsx
index 7ca75d61..10fae72e 100644
--- a/nkebao/src/components/LayoutWrapper.tsx
+++ b/nkebao/src/components/LayoutWrapper.tsx
@@ -42,7 +42,7 @@ export default function LayoutWrapper({ children }: LayoutWrapperProps) {
   // 其他页面显示底部导航
   return (
     <div className="flex flex-col h-screen">
-      <div className="flex-1 overflow-hidden">
+      <div className="flex-1 overflow-y-auto">
         {children}
       </div>
       {shouldShowBottomNav && <BottomNav />}
diff --git a/nkebao/src/pages/Home.tsx b/nkebao/src/pages/Home.tsx
index e18860be..6912039e 100644
--- a/nkebao/src/pages/Home.tsx
+++ b/nkebao/src/pages/Home.tsx
@@ -43,6 +43,7 @@ const scenarioFeatures = [
 export default function Home() {
   const navigate = useNavigate();
   const chartRef = useRef<HTMLCanvasElement>(null);
+  const chartInstance = useRef<any>(null);
 
   const handleDevicesClick = () => {
     navigate('/devices');
@@ -54,44 +55,83 @@ export default function Home() {
 
   useEffect(() => {
     if (chartRef.current) {
+      // 如果已经有图表实例，先销毁它
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+
       const ctx = chartRef.current.getContext('2d');
       if (ctx) {
-        // 清除之前的图表
-        ctx.clearRect(0, 0, chartRef.current.width, chartRef.current.height);
-        
-        // 绘制简单的柱状图
-        const data = [12, 19, 15, 25, 22, 30, 28];
-        const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
-        const barWidth = 30;
-        const barSpacing = 20;
-        const startX = 50;
-        const startY = 200;
-        
-        ctx.fillStyle = '#3B82F6';
-        data.forEach((value, index) => {
-          const x = startX + index * (barWidth + barSpacing);
-          const height = (value / 30) * 150;
-          const y = startY - height;
-          
-          ctx.fillRect(x, y, barWidth, height);
-          
-          // 绘制数值
-          ctx.fillStyle = '#374151';
-          ctx.font = '12px Arial';
-          ctx.textAlign = 'center';
-          ctx.fillText(value.toString(), x + barWidth / 2, y - 5);
-          
-          // 绘制标签
-          ctx.fillText(labels[index], x + barWidth / 2, startY + 20);
-          
-          ctx.fillStyle = '#3B82F6';
+        // 动态导入Chart.js
+        import('chart.js/auto').then(({ Chart }) => {
+          // 创建新的图表实例
+          chartInstance.current = new Chart(ctx, {
+            type: 'line',
+            data: {
+              labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+              datasets: [
+                {
+                  label: '获客数量',
+                  data: [12, 19, 15, 25, 22, 30, 28],
+                  backgroundColor: 'rgba(59, 130, 246, 0.2)',
+                  borderColor: 'rgba(59, 130, 246, 1)',
+                  borderWidth: 2,
+                  tension: 0.3,
+                  pointRadius: 4,
+                  pointBackgroundColor: 'rgba(59, 130, 246, 1)',
+                  pointHoverRadius: 6,
+                },
+              ],
+            },
+            options: {
+              responsive: true,
+              maintainAspectRatio: false,
+              plugins: {
+                legend: {
+                  display: false,
+                },
+                tooltip: {
+                  backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                  titleColor: '#333',
+                  bodyColor: '#666',
+                  borderColor: '#ddd',
+                  borderWidth: 1,
+                  padding: 10,
+                  displayColors: false,
+                  callbacks: {
+                    label: (context: any) => `获客数量: ${context.parsed.y}`,
+                  },
+                },
+              },
+              scales: {
+                x: {
+                  grid: {
+                    display: false,
+                  },
+                },
+                y: {
+                  beginAtZero: true,
+                  grid: {
+                    color: 'rgba(0, 0, 0, 0.05)',
+                  },
+                },
+              },
+            },
+          });
         });
       }
     }
+
+    // 组件卸载时清理图表实例
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
   }, []);
 
   return (
-    <div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
+    <div className="flex-1 overflow-y-auto pb-24 bg-gray-50">
       <header className="sticky top-0 z-10 bg-white border-b">
         <div className="flex justify-between items-center p-4">
           <h1 className="text-xl font-semibold text-blue-600">存客宝</h1>