feat: 本次提交更新内容如下

搞登录拦截模块

nkebao/src/pages/home/index.tsx

@@ -1,65 +1,121 @@
-import React, { useEffect, useState } from "react";
-import { Card, Toast } from "antd-mobile";
-import { getDeviceStats, getWechatStats } from "./api";
-import Layout from "@/com/Layout/Layout";
-import "./index.scss";
-
-const Home: React.FC = () => {
-  const [stats, setStats] = useState({
-    totalDevices: 0,
-    onlineDevices: 0,
-    totalWechatAccounts: 0,
-    onlineWechatAccounts: 0,
-  });
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchStats = async () => {
-      setLoading(true);
-      try {
-        const [device, wechat] = await Promise.all([
-          getDeviceStats(),
-          getWechatStats(),
-        ]);
-        setStats({
-          totalDevices: device.total || 0,
-          onlineDevices: device.online || 0,
-          totalWechatAccounts: wechat.total || 0,
-          onlineWechatAccounts: wechat.active || 0,
-        });
-      } catch (err: any) {
-        Toast.show({
-          content: err?.message || "数据加载失败",
-          position: "top",
-        });
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchStats();
-  }, []);
-
-  return (
-    <Layout
-      loading={loading}
-      header={<h1 className="home-title">首页 Home</h1>}
-      footer={<div>底部内容</div>} // 如有底部内容可加
-    >
-      <div className="home-cards">
-        <Card title="设备数量" className="home-card">
-          <div className="home-card-value">{stats.totalDevices}</div>
-          <div className="home-card-desc">在线设备：{stats.onlineDevices}</div>
-        </Card>
-        <Card title="微信号数量" className="home-card">
-          <div className="home-card-value">{stats.totalWechatAccounts}</div>
-          <div className="home-card-desc">
-            在线微信号：{stats.onlineWechatAccounts}
-          </div>
-        </Card>
-      </div>
-      {loading && <div className="home-loading">加载中...</div>}
-    </Layout>
-  );
-};
-
-export default Home;
+import React, { useEffect, useState } from "react";
+import { Card, NavBar, TabBar, Grid } from "antd-mobile";
+import {
+  AppOutline,
+  UserOutline,
+  PieOutline, // 替换 BarChartOutline
+  ShopbagOutline,
+} from "antd-mobile-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 } from "./api";
+
+const sceneStats = [
+  {
+    label: "公众号获客",
+    value: 234,
+    icon: <ShopbagOutline style={{ fontSize: 28, color: "#4caf50" }} />,
+  },
+  {
+    label: "海报获客",
+    value: 167,
+    icon: <AppOutline style={{ fontSize: 28, color: "#ff9800" }} />,
+  },
+  {
+    label: "抖音获客",
+    value: 156,
+    icon: <PieOutline style={{ fontSize: 28, color: "#2196f3" }} />,
+  },
+  {
+    label: "小红书获客",
+    value: 89,
+    icon: <UserOutline style={{ fontSize: 28, color: "#e91e63" }} />,
+  },
+];
+
+const todayStats = [
+  { label: "朋友圈同步", value: 12 },
+  { label: "群发任务", value: 8 },
+  { label: "获客转化", value: "85%" },
+  { label: "系统活跃度", value: "98%" },
+];
+
+const Home: React.FC = () => {
+  useEffect(() => {
+    getPlanStats({ num: 4 }).then((res: any) => {
+      console.log(res);
+    });
+  }, []);
+
+  return (
+    <Layout
+      header={
+        <NavBar back={null} style={{ background: "#fff" }}>
+          <span style={{ color: "#1677ff", fontWeight: 700 }}>存客宝</span>
+        </NavBar>
+      }
+      footer={<MeauMobile />}
+    >
+      <div className={style["home-page"]}>
+        {/* 统计卡片 */}
+        <div className={style["home-cards"]}>
+          <Card className={style["home-card"]}>
+            <div className={style["home-card-title"]}>设备数量</div>
+            <div className={style["home-card-value"]}>0</div>
+          </Card>
+          <Card className={style["home-card"]}>
+            <div className={style["home-card-title"]}>微信号数量</div>
+            <div className={style["home-card-value"]}>0</div>
+          </Card>
+          <Card className={style["home-card"]}>
+            <div className={style["home-card-title"]}>在线微信号</div>
+            <div className={style["home-card-value"]}>0</div>
+          </Card>
+        </div>
+
+        {/* 场景获客统计 */}
+        <Card className={style["home-section"]}>
+          <div className={style["home-section-title"]}>场景获客统计</div>
+          <div className={style["home-scene-stats"]}>
+            {sceneStats.map((item) => (
+              <div key={item.label} className={style["home-scene-item"]}>
+                <div className={style["home-scene-icon"]}>{item.icon}</div>
+                <div className={style["home-scene-value"]}>{item.value}</div>
+                <div className={style["home-scene-label"]}>{item.label}</div>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        {/* 今日数据 */}
+        <Card className={style["home-section"]}>
+          <div className={style["home-section-title"]}>今日数据</div>
+          <Grid columns={2} gap={12}>
+            {todayStats.map((item) => (
+              <Grid.Item key={item.label}>
+                <div className={style["home-today-item"]}>
+                  <div className={style["home-today-value"]}>{item.value}</div>
+                  <div className={style["home-today-label"]}>{item.label}</div>
+                </div>
+              </Grid.Item>
+            ))}
+          </Grid>
+        </Card>
+
+        {/* 每日获客趋势（静态图表占位） */}
+        <Card className={style["home-section"]}>
+          <div className={style["home-section-title"]}>每日获客趋势</div>
+          <div className={style["home-chart"]}>
+            <LineChart
+              xData={["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}
+              yData={[120, 150, 180, 200, 230, 210, 190]}
+            />
+          </div>
+        </Card>
+      </div>
+    </Layout>
+  );
+};
+export default Home;