From f574c56bf8f0ea4e50ad91911ee312a43c2587ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Mon, 21 Jul 2025 14:05:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F=E5=A4=8D=E5=8E=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/pages/home/index.module.scss | 169 +++++++++++----
 nkebao/src/pages/home/index.tsx         | 266 +++++++++++-------------
 2 files changed, 256 insertions(+), 179 deletions(-)

diff --git a/nkebao/src/pages/home/index.module.scss b/nkebao/src/pages/home/index.module.scss
index 5ead01a4..bd72ec6a 100644
--- a/nkebao/src/pages/home/index.module.scss
+++ b/nkebao/src/pages/home/index.module.scss
@@ -1,12 +1,20 @@
 .home-page {
   padding: 12px;
+  background: #f8f6f3;
+  min-height: 100vh;
+}
 
+.content-wrapper {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 // 导航栏样式
 .nav-title {
   display: flex;
-  align-items: center;
+  width: 100%;
   justify-content: center;
 }
 
@@ -17,58 +25,133 @@
   text-shadow: 0 2px 4px rgba(24, 142, 238, 0.2);
 }
 
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.error-tip {
+  font-size: 12px;
+  color: #f97316;
+  background: #fef3c7;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+
+.nav-button {
+  padding: 8px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  
+  &:hover {
+    background: #f3f4f6;
+  }
+}
+
 // 统计卡片网格
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
+  gap: 12px;
   margin-bottom: 16px;
 }
 
 .stat-card {
   background: white;
-  border-radius: 12px;
-  padding: 12px 8px;
+  border-radius: 8px;
+  padding: 12px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   
   &:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 }
 
-.stat-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: rgba(24, 142, 238, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.stat-content {
-  flex: 1;
-  min-width: 0;
+.stat-label {
+  font-size: 16px;
+  color: #666;
+  line-height: 1.2;
+  font-weight: bold;
 }
 
 .stat-value {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 700;
-  color: var(--primary-color);
+  color: #3b82f6;
   line-height: 1.2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.stat-label {
-  font-size: 11px;
-  color: #666;
-  margin-top: 2px;
-  line-height: 1.2;
+.progress-bar {
+  height: 4px;
+  background: #e5e7eb;
+  border-radius: 2px;
+  margin-top: 8px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #3b82f6;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+// Loading状态样式
+.stat-card {
+  .stat-label:empty::before {
+    content: '';
+    display: block;
+    width: 60px;
+    height: 12px;
+    background: #f0f0f0;
+    border-radius: 2px;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  
+  .stat-value {
+    span:empty::before {
+      content: '';
+      display: block;
+      width: 40px;
+      height: 20px;
+      background: #f0f0f0;
+      border-radius: 2px;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    
+    div:empty::before {
+      content: '';
+      display: block;
+      width: 20px;
+      height: 20px;
+      background: #f0f0f0;
+      border-radius: 4px;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }
 
 // 通用区域样式
@@ -157,37 +240,47 @@
 // 今日数据网格
 .today-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
 }
 
 .today-item {
-  text-align: center;
-  padding: 8px 4px;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #f8fafc;
   border-radius: 8px;
   transition: all 0.3s ease;
+  cursor: pointer;
   
   &:hover {
+    background: #f1f5f9;
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 }
 
 .today-icon {
-  margin-bottom: 4px;
-  opacity: 0.8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .today-value {
-  font-size: 14px;
+  font-size: 18px;
   font-weight: 700;
-  margin-bottom: 2px;
+  color: #333;
   line-height: 1.2;
 }
 
 .today-label {
-  font-size: 10px;
+  font-size: 12px;
   color: #666;
   line-height: 1.2;
 }
diff --git a/nkebao/src/pages/home/index.tsx b/nkebao/src/pages/home/index.tsx
index 3ac3b164..a72b4dc2 100644
--- a/nkebao/src/pages/home/index.tsx
+++ b/nkebao/src/pages/home/index.tsx
@@ -1,21 +1,17 @@
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { NavBar } from "antd-mobile";
 import {
-  AppOutline,
-  UserOutline,
-  ClockCircleOutline,
-  SendOutline,
-  StarOutline,
-  Bell,
-  Smartphone,
-  Users,
-  Activity,
-  MessageSquare,
-  TrendingUp,
-} from "antd-mobile-icons";
+  BellOutlined,
+  MobileOutlined,
+  UserOutlined,
+  MessageOutlined,
+  TeamOutlined,
+  RiseOutlined,
+  LineChartOutlined,
+} from "@ant-design/icons";
 import MeauMobile from "@/components/MeauMobile/MeauMoible";
 import Layout from "@/components/Layout/Layout";
-import style from "./index.module.scss";
 import LineChart from "@/components/LineChart";
 import {
   getPlanStats,
@@ -23,19 +19,39 @@ import {
   getTodayStats,
   getDashboard,
 } from "./api";
+import style from "./index.module.scss";
+
+interface DashboardData {
+  deviceNum?: number;
+  wechatNum?: number;
+  aliveWechatNum?: number;
+}
+
+interface TodayStatsData {
+  momentsNum?: number;
+  groupPushNum?: number;
+  passRate?: string;
+  sysActive?: string;
+}
+
+interface SevenDayStatsData {
+  date?: string[];
+  allNum?: number[];
+}
 
 const Home: React.FC = () => {
+  const navigate = useNavigate();
   const [sceneStats, setSceneStats] = useState<any[]>([]);
   const [todayStats, setTodayStats] = useState<any[]>([]);
-  const [dashboard, setDashboard] = useState<any>({});
-  const [sevenDayStats, setSevenDayStats] = useState<any>({});
+  const [dashboard, setDashboard] = useState<DashboardData>({});
+  const [sevenDayStats, setSevenDayStats] = useState<SevenDayStatsData>({});
   const [isLoading, setIsLoading] = useState(true);
   const [apiError, setApiError] = useState("");
 
   // 场景获客数据
   const scenarioFeatures = [
     {
-      id: "douyin",
+      id: "3",
       name: "抖音获客",
       icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
       color: "bg-blue-100 text-blue-600",
@@ -43,7 +59,7 @@ const Home: React.FC = () => {
       growth: 12,
     },
     {
-      id: "xiaohongshu",
+      id: "4",
       name: "小红书获客",
       icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
       color: "bg-red-100 text-red-600",
@@ -51,7 +67,7 @@ const Home: React.FC = () => {
       growth: 8,
     },
     {
-      id: "gongzhonghao",
+      id: "6",
       name: "公众号获客",
       icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
       color: "bg-green-100 text-green-600",
@@ -59,7 +75,7 @@ const Home: React.FC = () => {
       growth: 15,
     },
     {
-      id: "haibao",
+      id: "1",
       name: "海报获客",
       icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
       color: "bg-orange-100 text-orange-600",
@@ -73,28 +89,28 @@ const Home: React.FC = () => {
     {
       title: "朋友圈同步",
       value: "12",
-      icon: <MessageSquare className="h-4 w-4" />,
+      icon: <MessageOutlined style={{ fontSize: 16, color: "#8b5cf6" }} />,
       color: "text-purple-600",
       path: "/workspace/moments-sync",
     },
     {
       title: "群发任务",
       value: "8",
-      icon: <Users className="h-4 w-4" />,
+      icon: <TeamOutlined style={{ fontSize: 16, color: "#f97316" }} />,
       color: "text-orange-600",
       path: "/workspace/group-push",
     },
     {
       title: "获客转化",
       value: "85%",
-      icon: <TrendingUp className="h-4 w-4" />,
+      icon: <RiseOutlined style={{ fontSize: 16, color: "#22c55e" }} />,
       color: "text-green-600",
       path: "/scenarios",
     },
     {
       title: "系统活跃度",
       value: "98%",
-      icon: <Activity className="h-4 w-4" />,
+      icon: <LineChartOutlined style={{ fontSize: 16, color: "#3b82f6" }} />,
       color: "text-blue-600",
       path: "/workspace",
     },
@@ -142,35 +158,31 @@ const Home: React.FC = () => {
           const todayStatsData = [
             {
               label: "同步朋友圈",
-              value: todayResult.value.momentsNum,
+              value: todayResult.value?.momentsNum || 0,
               icon: (
-                <ClockCircleOutline
-                  style={{ fontSize: 16, color: "#ff6b35" }}
-                />
+                <MessageOutlined style={{ fontSize: 16, color: "#8b5cf6" }} />
               ),
-              color: "#ff6b35",
+              color: "#8b5cf6",
             },
             {
               label: "群发任务",
-              value: todayResult.value.groupPushNum,
-              icon: <SendOutline style={{ fontSize: 16, color: "#ffd700" }} />,
-              color: "#ffd700",
+              value: todayResult.value?.groupPushNum || 0,
+              icon: <TeamOutlined style={{ fontSize: 16, color: "#f97316" }} />,
+              color: "#f97316",
             },
             {
               label: "获客转化率",
-              value: todayResult.value.passRate,
-              icon: <StarOutline style={{ fontSize: 16, color: "#4caf50" }} />,
-              color: "#4caf50",
+              value: todayResult.value?.passRate || "0%",
+              icon: <RiseOutlined style={{ fontSize: 16, color: "#22c55e" }} />,
+              color: "#22c55e",
             },
             {
               label: "系统活跃度",
-              value: todayResult.value.sysActive,
+              value: todayResult.value?.sysActive || "0%",
               icon: (
-                <ClockCircleOutline
-                  style={{ fontSize: 16, color: "#2196f3" }}
-                />
+                <LineChartOutlined style={{ fontSize: 16, color: "#3b82f6" }} />
               ),
-              color: "#2196f3",
+              color: "#3b82f6",
             },
           ];
           setTodayStats(todayStatsData);
@@ -189,13 +201,11 @@ const Home: React.FC = () => {
   }, []);
 
   const handleDevicesClick = () => {
-    // 导航到设备页面
-    console.log("点击设备");
+    navigate("/devices");
   };
 
   const handleWechatClick = () => {
-    // 导航到微信号页面
-    console.log("点击微信号");
+    navigate("/wechat-accounts");
   };
 
   if (isLoading) {
@@ -211,13 +221,16 @@ const Home: React.FC = () => {
         footer={<MeauMobile />}
         loading={true}
       >
-        <div className="bg-gray-50">
-          <div className="p-4 space-y-4">
-            <div className="grid grid-cols-3 gap-3">
+        <div className={style["home-page"]}>
+          <div className={style["content-wrapper"]}>
+            <div className={style["stats-grid"]}>
               {[...Array(3)].map((_, i) => (
-                <div key={i} className="p-3 bg-white animate-pulse rounded-lg">
-                  <div className="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-6 bg-gray-200 rounded"></div>
+                <div key={i} className={style["stat-card"]}>
+                  <div className={style["stat-label"]}></div>
+                  <div className={style["stat-value"]}>
+                    <span></span>
+                    <div></div>
+                  </div>
                 </div>
               ))}
             </div>
@@ -233,132 +246,103 @@ const Home: React.FC = () => {
         <NavBar back={null} style={{ background: "#fff" }}>
           <div className={style["nav-title"]}>
             <span className={style["nav-text"]}>存客宝</span>
-            <div className="flex items-center ml-auto">
-              {apiError && (
-                <div className="text-xs text-orange-600 bg-orange-50 px-2 py-1 rounded mr-2">
-                  API连接异常，显示默认数据
-                </div>
-              )}
-              <button className="p-2 hover:bg-gray-100 rounded-full">
-                <Bell className="h-5 w-5 text-gray-600" />
-              </button>
-            </div>
           </div>
         </NavBar>
       }
       footer={<MeauMobile />}
     >
-      <div className="bg-gray-50">
-        <div className="p-4 space-y-4">
+      <div className={style["home-page"]}>
+        <div className={style["content-wrapper"]}>
           {/* 统计卡片 */}
-          <div className="grid grid-cols-3 gap-3">
-            <div className="cursor-pointer" onClick={handleDevicesClick}>
-              <div className="p-3 bg-white hover:shadow-md transition-all rounded-lg">
-                <div className="flex flex-col">
-                  <span className="text-xs text-gray-500 mb-1">设备数量</span>
-                  <div className="flex items-center justify-between">
-                    <span className="text-lg font-bold text-blue-600">
-                      {dashboard.deviceNum || 42}
-                    </span>
-                    <Smartphone className="w-5 h-5 text-blue-600" />
-                  </div>
-                  <div className="h-2"></div>
-                </div>
+          <div className={style["stats-grid"]}>
+            <div className={style["stat-card"]} onClick={handleDevicesClick}>
+              <div className={style["stat-label"]}>设备数量</div>
+              <div className={style["stat-value"]}>
+                <span>{dashboard.deviceNum || 42}</span>
+                <MobileOutlined style={{ fontSize: 20, color: "#3b82f6" }} />
               </div>
             </div>
-            <div className="cursor-pointer" onClick={handleWechatClick}>
-              <div className="p-3 bg-white hover:shadow-md transition-all rounded-lg">
-                <div className="flex flex-col">
-                  <span className="text-xs text-gray-500 mb-1">微信号数量</span>
-                  <div className="flex items-center justify-between">
-                    <span className="text-lg font-bold text-blue-600">
-                      {dashboard.wechatNum || 42}
-                    </span>
-                    <Users className="w-5 h-5 text-blue-600" />
-                  </div>
-                </div>
-                <div className="h-2"></div>
+            <div className={style["stat-card"]} onClick={handleWechatClick}>
+              <div className={style["stat-label"]}>微信号数量</div>
+              <div className={style["stat-value"]}>
+                <span>{dashboard.wechatNum || 42}</span>
+                <TeamOutlined style={{ fontSize: 20, color: "#3b82f6" }} />
               </div>
             </div>
-            <div className="p-3 bg-white rounded-lg">
-              <div className="flex flex-col">
-                <span className="text-xs text-gray-500 mb-1">在线微信号</span>
-                <div className="flex items-center justify-between mb-1">
-                  <span className="text-lg font-bold text-blue-600">
-                    {dashboard.aliveWechatNum || 35}
-                  </span>
-                  <Activity className="w-5 h-5 text-blue-600" />
-                </div>
-                <div className="h-1 bg-gray-200 rounded-full">
-                  <div
-                    className="h-1 bg-blue-600 rounded-full"
-                    style={{
-                      width: `${
-                        dashboard.wechatNum > 0
-                          ? (dashboard.aliveWechatNum / dashboard.wechatNum) *
-                            100
-                          : 0
-                      }%`,
-                    }}
-                  ></div>
-                </div>
+            <div className={style["stat-card"]}>
+              <div className={style["stat-label"]}>在线微信号</div>
+              <div className={style["stat-value"]}>
+                <span>{dashboard.aliveWechatNum || 35}</span>
+                <LineChartOutlined style={{ fontSize: 20, color: "#3b82f6" }} />
+              </div>
+              <div className={style["progress-bar"]}>
+                <div
+                  className={style["progress-fill"]}
+                  style={{
+                    width: `${
+                      (dashboard.wechatNum || 0) > 0
+                        ? ((dashboard.aliveWechatNum || 0) /
+                            (dashboard.wechatNum || 1)) *
+                          100
+                        : 0
+                    }%`,
+                  }}
+                ></div>
               </div>
             </div>
           </div>
 
           {/* 场景获客统计 */}
-          <div className="p-4 bg-white rounded-lg">
-            <div className="flex justify-between items-center mb-3">
-              <h2 className="text-base font-semibold">场景获客统计</h2>
+          <div className={style["section"]}>
+            <div className={style["section-header"]}>
+              <h2 className={style["section-title"]}>场景获客统计</h2>
             </div>
-            <div className="flex justify-between">
+            <div className={style["scene-grid"]}>
               {scenarioFeatures
                 .sort((a, b) => b.value - a.value)
                 .slice(0, 4) // 只显示前4个
                 .map((scenario) => (
                   <div
                     key={scenario.id}
-                    className="block flex-1 cursor-pointer"
+                    className={style["scene-item"]}
+                    onClick={() =>
+                      navigate(
+                        `/scenarios/list/${scenario.id}/${encodeURIComponent(
+                          scenario.name
+                        )}`
+                      )
+                    }
                   >
-                    <div className="flex flex-col items-center text-center space-y-1">
-                      <div
-                        className={`w-10 h-10 rounded-full ${scenario.color} flex items-center justify-center`}
-                      >
-                        <img
-                          src={scenario.icon || "/placeholder.svg"}
-                          alt={scenario.name}
-                          className="w-5 h-5"
-                        />
-                      </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 className={style["scene-icon"]}>
+                      <img
+                        src={scenario.icon || "/placeholder.svg"}
+                        alt={scenario.name}
+                        className={style["scene-image"]}
+                      />
                     </div>
+                    <div className={style["scene-value"]}>{scenario.value}</div>
+                    <div className={style["scene-label"]}>{scenario.name}</div>
                   </div>
                 ))}
             </div>
           </div>
 
           {/* 今日数据统计 */}
-          <div className="p-4 bg-white rounded-lg">
-            <div className="flex justify-between items-center mb-3">
-              <h2 className="text-base font-semibold">今日数据</h2>
+          <div className={style["section"]}>
+            <div className={style["section-header"]}>
+              <h2 className={style["section-title"]}>今日数据</h2>
             </div>
-            <div className="grid grid-cols-2 gap-4">
+            <div className={style["today-grid"]}>
               {todayStatsData.map((stat, index) => (
                 <div
                   key={index}
-                  className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+                  className={style["today-item"]}
+                  onClick={() => stat.path && navigate(stat.path)}
                 >
-                  <div className={`p-2 rounded-full bg-white ${stat.color}`}>
-                    {stat.icon}
-                  </div>
+                  <div className={style["today-icon"]}>{stat.icon}</div>
                   <div>
-                    <div className="text-lg font-semibold">{stat.value}</div>
-                    <div className="text-xs text-gray-500">{stat.title}</div>
+                    <div className={style["today-value"]}>{stat.value}</div>
+                    <div className={style["today-label"]}>{stat.title}</div>
                   </div>
                 </div>
               ))}
@@ -372,8 +356,8 @@ const Home: React.FC = () => {
             </div>
             <div className={style["chart-container"]}>
               <LineChart
-                xData={sevenDayStats.date}
-                yData={sevenDayStats.allNum}
+                xData={sevenDayStats.date || []}
+                yData={sevenDayStats.allNum || []}
               />
             </div>
           </div>