From d52f0224b6e8bd341384dd72eb9115ecd4b3a2e7 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:35:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=9B=BA=E5=AE=9A=E5=A5=BD?=
 =?UTF-8?q?=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/pages/Home.tsx | 146 ++++++++++++++++++++------------------
 1 file changed, 75 insertions(+), 71 deletions(-)

diff --git a/nkebao/src/pages/Home.tsx b/nkebao/src/pages/Home.tsx
index 45bd5cd4c..9795732fa 100644
--- a/nkebao/src/pages/Home.tsx
+++ b/nkebao/src/pages/Home.tsx
@@ -140,8 +140,9 @@ export default function Home() {
   }, []);
 
   return (
-    <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-1 flex flex-col bg-gray-50">
+      {/* 固定header */}
+      <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b">
         <div className="flex justify-between items-center p-4">
           <h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
           <button className="p-2 hover:bg-gray-100 rounded-full">
@@ -150,83 +151,86 @@ export default function Home() {
         </div>
       </header>
 
-      <div className="p-4 space-y-6">
-        {/* 统计卡片 */}
-        <div className="grid grid-cols-3 gap-4">
-          <div 
-            className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow" 
-            onClick={handleDevicesClick}
-          >
-            <div className="flex flex-col">
-              <span className="text-sm text-gray-500 mb-2">设备数量</span>
-              <div className="flex items-center justify-between">
-                <span className="text-2xl font-bold text-blue-600">{stats.totalDevices}</span>
-                <Smartphone className="w-6 h-6 text-blue-600" />
+      {/* 可滚动的内容区域 */}
+      <div className="flex-1 overflow-y-auto pt-16 pb-24">
+        <div className="p-4 space-y-6">
+          {/* 统计卡片 */}
+          <div className="grid grid-cols-3 gap-4">
+            <div 
+              className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow" 
+              onClick={handleDevicesClick}
+            >
+              <div className="flex flex-col">
+                <span className="text-sm text-gray-500 mb-2">设备数量</span>
+                <div className="flex items-center justify-between">
+                  <span className="text-2xl font-bold text-blue-600">{stats.totalDevices}</span>
+                  <Smartphone className="w-6 h-6 text-blue-600" />
+                </div>
+              </div>
+            </div>
+            <div 
+              className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow" 
+              onClick={handleWechatClick}
+            >
+              <div className="flex flex-col">
+                <span className="text-sm text-gray-500 mb-2">微信号数量</span>
+                <div className="flex items-center justify-between">
+                  <span className="text-2xl font-bold text-blue-600">{stats.totalWechatAccounts}</span>
+                  <Users className="w-6 h-6 text-blue-600" />
+                </div>
+              </div>
+            </div>
+            <div className="p-4 bg-white rounded shadow">
+              <div className="flex flex-col">
+                <span className="text-sm text-gray-500 mb-2">在线微信号</span>
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-2xl font-bold text-blue-600">{stats.onlineWechatAccounts}</span>
+                  <Activity className="w-6 h-6 text-blue-600" />
+                </div>
+                <div className="w-full bg-gray-200 rounded-full h-1">
+                  <div 
+                    className="bg-blue-600 h-1 rounded-full" 
+                    style={{ width: `${(stats.onlineWechatAccounts / stats.totalWechatAccounts) * 100}%` }}
+                  ></div>
+                </div>
               </div>
             </div>
           </div>
-          <div 
-            className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow" 
-            onClick={handleWechatClick}
-          >
-            <div className="flex flex-col">
-              <span className="text-sm text-gray-500 mb-2">微信号数量</span>
-              <div className="flex items-center justify-between">
-                <span className="text-2xl font-bold text-blue-600">{stats.totalWechatAccounts}</span>
-                <Users className="w-6 h-6 text-blue-600" />
-              </div>
-            </div>
-          </div>
-          <div className="p-4 bg-white rounded shadow">
-            <div className="flex flex-col">
-              <span className="text-sm text-gray-500 mb-2">在线微信号</span>
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-2xl font-bold text-blue-600">{stats.onlineWechatAccounts}</span>
-                <Activity className="w-6 h-6 text-blue-600" />
-              </div>
-              <div className="w-full bg-gray-200 rounded-full h-1">
-                <div 
-                  className="bg-blue-600 h-1 rounded-full" 
-                  style={{ width: `${(stats.onlineWechatAccounts / stats.totalWechatAccounts) * 100}%` }}
-                ></div>
-              </div>
-            </div>
-          </div>
-        </div>
 
-        {/* 场景获客统计 */}
-        <div className="p-4 bg-white rounded shadow">
-          <div className="flex justify-between items-center mb-4">
-            <h2 className="text-lg font-semibold">场景获客统计</h2>
-          </div>
-          <div className="flex justify-between">
-            {scenarioFeatures
-              .sort((a, b) => b.value - a.value)
-              .map((scenario) => (
-                <div 
-                  key={scenario.id} 
-                  className="block flex-1 cursor-pointer" 
-                  onClick={() => navigate(`/scenarios/${scenario.id}`)}
-                >
-                  <div className="flex flex-col items-center text-center space-y-2">
-                    <div className={`w-12 h-12 rounded-full ${scenario.color} flex items-center justify-center`}>
-                      <img src={scenario.icon || "/placeholder.svg"} alt={scenario.name} className="w-6 h-6" />
-                    </div>
-                    <div className="text-sm font-medium">{scenario.value}</div>
-                    <div className="text-xs text-gray-500 whitespace-nowrap overflow-hidden text-ellipsis w-full">
-                      {scenario.name}
+          {/* 场景获客统计 */}
+          <div className="p-4 bg-white rounded shadow">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">场景获客统计</h2>
+            </div>
+            <div className="flex justify-between">
+              {scenarioFeatures
+                .sort((a, b) => b.value - a.value)
+                .map((scenario) => (
+                  <div 
+                    key={scenario.id} 
+                    className="block flex-1 cursor-pointer" 
+                    onClick={() => navigate(`/scenarios/${scenario.id}`)}
+                  >
+                    <div className="flex flex-col items-center text-center space-y-2">
+                      <div className={`w-12 h-12 rounded-full ${scenario.color} flex items-center justify-center`}>
+                        <img src={scenario.icon || "/placeholder.svg"} alt={scenario.name} className="w-6 h-6" />
+                      </div>
+                      <div className="text-sm font-medium">{scenario.value}</div>
+                      <div className="text-xs text-gray-500 whitespace-nowrap overflow-hidden text-ellipsis w-full">
+                        {scenario.name}
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                ))}
+            </div>
           </div>
-        </div>
 
-        {/* 每日获客趋势 */}
-        <div className="p-4 bg-white rounded shadow">
-          <h2 className="text-lg font-semibold mb-4">每日获客趋势</h2>
-          <div className="w-full h-64 relative">
-            <canvas ref={chartRef} />
+          {/* 每日获客趋势 */}
+          <div className="p-4 bg-white rounded shadow">
+            <h2 className="text-lg font-semibold mb-4">每日获客趋势</h2>
+            <div className="w-full h-64 relative">
+              <canvas ref={chartRef} />
+            </div>
           </div>
         </div>
       </div>