FEAT => 本次更新项目为：

存客宝设备绑定引导页

nkebao/src/pages/guide/index.module.scss

@@ -1,7 +1,7 @@
 .guideContainer {
-  min-height: 100vh;
+  height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--primary-color);
-  padding: 20px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -26,7 +26,7 @@
   align-items: center;
   justify-content: center;
   height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--primary-color);
 }
 
 .loadingText {
@@ -38,42 +38,40 @@
 
 .header {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
   position: relative;
   z-index: 1;
 }
 
 .iconContainer {
-  width: 80px;
+  width: 60px;
-  height: 80px;
+  height: 60px;
-  background: rgba(255, 255, 255, 0.2);
+  background: #fff;
   border-radius: 50%;
-  display: flex;
+  margin: 0 auto 12px;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 20px;
-  backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
+  overflow: hidden;
 }
 
-.warningIcon {
+.logo {
-  font-size: 40px;
+  width: 100%;
-  color: #ffd700;
+  height: 100%;
+  object-fit: contain;
 }
 
 .title {
   color: white;
-  font-size: 28px;
+  font-size: 22px;
   font-weight: 700;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .subtitle {
   color: rgba(255, 255, 255, 0.9);
-  font-size: 16px;
+  font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.4;
-  max-width: 300px;
+  max-width: 280px;
   margin: 0 auto;
 }
 
@@ -81,34 +79,36 @@
   flex: 1;
   position: relative;
   z-index: 1;
+  overflow-y: auto;
+  padding-right: 4px;
 }
 
 .deviceStatus {
-  margin-bottom: 30px;
+  margin-bottom: 16px;
 }
 
 .statusCard {
   background: rgba(255, 255, 255, 0.95);
-  border-radius: 16px;
+  border-radius: 12px;
-  padding: 20px;
+  padding: 12px;
   display: flex;
   align-items: center;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .statusIcon {
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--primary-color);
-  border-radius: 12px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 16px;
+  margin-right: 12px;
   color: white;
-  font-size: 24px;
+  font-size: 20px;
 }
 
 .statusInfo {
@@ -116,69 +116,69 @@
 }
 
 .statusTitle {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   color: #333;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
 .statusValue {
-  font-size: 14px;
+  font-size: 12px;
   color: #666;
 }
 
 .deviceCount {
-  color: #667eea;
+  color: var(--primary-color);
   font-weight: 700;
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .guideSteps {
-  margin-bottom: 30px;
+  margin-bottom: 16px;
 }
 
 .stepsTitle {
   color: white;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 600;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .stepList {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
 }
 
 .stepItem {
   background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
+  border-radius: 8px;
-  padding: 16px;
+  padding: 10px;
   display: flex;
   align-items: flex-start;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   transition: transform 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
+    transform: translateY(-1px);
   }
 }
 
 .stepNumber {
-  width: 32px;
+  width: 24px;
-  height: 32px;
+  height: 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 12px;
-  margin-right: 16px;
+  margin-right: 10px;
   flex-shrink: 0;
 }
 
@@ -187,23 +187,23 @@
 }
 
 .stepTitle {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   color: #333;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
 .stepDesc {
-  font-size: 14px;
+  font-size: 12px;
   color: #666;
-  line-height: 1.4;
+  line-height: 1.3;
 }
 
 .tips {
   background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
+  border-radius: 8px;
-  padding: 20px;
+  padding: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
@@ -211,24 +211,24 @@
 .tipsTitle {
   display: flex;
   align-items: center;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   color: #333;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .tipsIcon {
   color: #ff6b6b;
-  margin-right: 8px;
+  margin-right: 6px;
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .tipsContent {
   p {
-    font-size: 14px;
+    font-size: 12px;
     color: #666;
-    line-height: 1.6;
+    line-height: 1.4;
-    margin-bottom: 8px;
+    margin-bottom: 4px;
 
     &:last-child {
       margin-bottom: 0;
@@ -237,41 +237,41 @@
 }
 
 .footer {
-  margin-top: 30px;
+  margin-top: 16px;
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .primaryButton {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: white;
   border: none;
-  border-radius: 12px;
+  border-radius: 8px;
-  height: 48px;
+  height: 44px;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
-  color: white;
+  color: var(--primary-color);
-  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.4);
   transition: all 0.3s ease;
 
   &:active {
     transform: translateY(1px);
-    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.4);
   }
 }
 
 .buttonIcon {
-  margin-left: 8px;
+  margin-left: 6px;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .secondaryButton {
   border: 2px solid rgba(255, 255, 255, 0.8);
-  border-radius: 12px;
+  border-radius: 8px;
-  height: 48px;
+  height: 44px;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: white;
   background: transparent;
@@ -285,27 +285,27 @@
 // 响应式设计
 @media (max-width: 480px) {
   .guideContainer {
-    padding: 16px;
+    padding: 12px;
   }
 
   .title {
-    font-size: 24px;
+    font-size: 20px;
   }
 
   .subtitle {
-    font-size: 14px;
+    font-size: 13px;
   }
 
   .statusCard {
-    padding: 16px;
+    padding: 10px;
   }
 
   .stepItem {
-    padding: 14px;
+    padding: 8px;
   }
 
   .tips {
-    padding: 16px;
+    padding: 10px;
   }
 }
 
@@ -313,7 +313,7 @@
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
@@ -325,7 +325,7 @@
 .deviceStatus,
 .guideSteps,
 .tips {
-  animation: fadeInUp 0.6s ease-out;
+  animation: fadeInUp 0.5s ease-out;
 }
 
 .guideSteps {
@@ -337,5 +337,5 @@
 }
 
 .footer {
-  animation: fadeInUp 0.6s ease-out 0.3s both;
+  animation: fadeInUp 0.5s ease-out 0.3s both;
 }

nkebao/src/pages/guide/index.tsx

@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button, Toast } from "antd-mobile";
+import { Button, Toast, Popup, Tabs, Input } from "antd-mobile";
 import {
   MobileOutlined,
   ExclamationCircleOutlined,
   ArrowRightOutlined,
+  QrcodeOutlined,
 } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
-import { useUserStore } from "@/store/module/user";
 import { getDashboard } from "@/pages/mobile/home/api";
+import { fetchDeviceQRCode, addDeviceByImei } from "@/api/devices";
+import { useUserStore } from "@/store/module/user";
 import styles from "./index.module.scss";
 
 const Guide: React.FC = () => {
@@ -16,21 +18,29 @@ const Guide: React.FC = () => {
   const { user } = useUserStore();
   const [loading, setLoading] = useState(true);
   const [deviceCount, setDeviceCount] = useState(0);
-  const [hasDevices, setHasDevices] = useState(false);
 
-  useEffect(() => {
+  // 添加设备弹窗状态
-    checkDeviceStatus();
+  const [addVisible, setAddVisible] = useState(false);
-  }, []);
+  const [addTab, setAddTab] = useState("scan");
+  const [qrLoading, setQrLoading] = useState(false);
+  const [qrCode, setQrCode] = useState<string | null>(null);
+  const [imei, setImei] = useState("");
+  const [name, setName] = useState("");
+  const [addLoading, setAddLoading] = useState(false);
+
+  // 轮询监听相关
+  const [isPolling, setIsPolling] = useState(false);
+  const pollingRef = useRef<NodeJS.Timeout | null>(null);
+  const initialDeviceCountRef = useRef(0);
 
   // 检查设备绑定状态
-  const checkDeviceStatus = async () => {
+  const checkDeviceStatus = useCallback(async () => {
     try {
       setLoading(true);
       const dashboardData = await getDashboard();
       const deviceNum = dashboardData?.deviceNum || 0;
 
       setDeviceCount(deviceNum);
-      setHasDevices(deviceNum > 0);
 
       // 如果已有设备，直接跳转到首页
       if (deviceNum > 0) {
@@ -46,16 +56,116 @@ const Guide: React.FC = () => {
     } finally {
       setLoading(false);
     }
+  }, []);
+
+  useEffect(() => {
+    checkDeviceStatus();
+  }, [checkDeviceStatus]);
+
+  // 开始轮询监听设备状态
+  const startPolling = useCallback(() => {
+    if (isPolling) return;
+
+    setIsPolling(true);
+    initialDeviceCountRef.current = deviceCount;
+
+    const pollDeviceStatus = async () => {
+      try {
+        const dashboardData = await getDashboard();
+        const currentDeviceCount = dashboardData?.deviceNum || 0;
+
+        // 如果设备数量增加了，说明有新设备添加成功
+        if (currentDeviceCount > initialDeviceCountRef.current) {
+          Toast.show({ content: "设备添加成功！", position: "top" });
+          setAddVisible(false);
+          setDeviceCount(currentDeviceCount);
+          setIsPolling(false);
+          if (pollingRef.current) {
+            clearInterval(pollingRef.current);
+            pollingRef.current = null;
+          }
+          // 可以选择跳转到首页或继续留在当前页面
+          // navigate("/");
+          return;
+        }
+      } catch (error) {
+        console.error("轮询检查设备状态失败:", error);
+      }
+    };
+
+    // 每3秒检查一次设备状态
+    pollingRef.current = setInterval(pollDeviceStatus, 3000);
+  }, [isPolling, deviceCount]);
+
+  // 停止轮询
+  const stopPolling = useCallback(() => {
+    setIsPolling(false);
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current);
+      pollingRef.current = null;
+    }
+  }, []);
+
+  // 组件卸载时清理轮询
+  useEffect(() => {
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+      }
+    };
+  }, []);
+
+  // 获取二维码
+  const handleGetQr = async () => {
+    setQrLoading(true);
+    setQrCode(null);
+    try {
+      const accountId = user.s2_accountId;
+      if (!accountId) throw new Error("未获取到用户信息");
+      const res = await fetchDeviceQRCode(accountId);
+      setQrCode(res.qrCode);
+      // 获取二维码后开始轮询监听
+      startPolling();
+    } catch (e: any) {
+      Toast.show({ content: e.message || "获取二维码失败", position: "top" });
+    } finally {
+      setQrLoading(false);
+    }
   };
 
   // 跳转到设备管理页面
   const handleGoToDevices = () => {
-    navigate("/devices");
+    handleGetQr();
+    setAddVisible(true);
   };
 
-  // 跳转到首页（跳过引导）
+  // 手动添加设备
-  const handleSkipGuide = () => {
+  const handleAddDevice = async () => {
-    navigate("/");
+    if (!imei.trim() || !name.trim()) {
+      Toast.show({ content: "请填写完整信息", position: "top" });
+      return;
+    }
+    setAddLoading(true);
+    try {
+      await addDeviceByImei(imei, name);
+      Toast.show({ content: "添加成功", position: "top" });
+      setAddVisible(false);
+      setImei("");
+      setName("");
+      // 重新检查设备状态
+      await checkDeviceStatus();
+    } catch (e: any) {
+      Toast.show({ content: e.message || "添加失败", position: "top" });
+    } finally {
+      setAddLoading(false);
+    }
+  };
+
+  // 关闭弹窗时停止轮询
+  const handleClosePopup = () => {
+    setAddVisible(false);
+    stopPolling();
+    setQrCode(null);
   };
 
   if (loading) {
@@ -74,12 +184,10 @@ const Guide: React.FC = () => {
         {/* 头部区域 */}
         <div className={styles.header}>
           <div className={styles.iconContainer}>
-            <ExclamationCircleOutlined className={styles.warningIcon} />
+            <img src="/logo.png" alt="存客宝" className={styles.logo} />
           </div>
           <h1 className={styles.title}>欢迎使用存客宝</h1>
-          <p className={styles.subtitle}>
+          <p className={styles.subtitle}>请先绑定设备以获得完整功能体验</p>
-            为了更好的使用体验，请先绑定您的设备
-          </p>
         </div>
 
         {/* 内容区域 */}
@@ -92,7 +200,7 @@ const Guide: React.FC = () => {
               <div className={styles.statusInfo}>
                 <div className={styles.statusTitle}>设备绑定状态</div>
                 <div className={styles.statusValue}>
-                  已绑定设备：
+                  已绑定：
                   <span className={styles.deviceCount}>{deviceCount}</span> 台
                 </div>
               </div>
@@ -100,14 +208,14 @@ const Guide: React.FC = () => {
           </div>
 
           <div className={styles.guideSteps}>
-            <h2 className={styles.stepsTitle}>绑定设备步骤</h2>
+            <h2 className={styles.stepsTitle}>绑定步骤</h2>
             <div className={styles.stepList}>
               <div className={styles.stepItem}>
                 <div className={styles.stepNumber}>1</div>
                 <div className={styles.stepContent}>
                   <div className={styles.stepTitle}>准备设备</div>
                   <div className={styles.stepDesc}>
-                    确保您的手机设备已安装存客宝应用
+                    确保手机已安装存客宝应用
                   </div>
                 </div>
               </div>
@@ -115,9 +223,7 @@ const Guide: React.FC = () => {
                 <div className={styles.stepNumber}>2</div>
                 <div className={styles.stepContent}>
                   <div className={styles.stepTitle}>扫描二维码</div>
-                  <div className={styles.stepDesc}>
+                  <div className={styles.stepDesc}>在设备管理页面扫描绑定</div>
-                    在设备管理页面扫描二维码绑定设备
-                  </div>
                 </div>
               </div>
               <div className={styles.stepItem}>
@@ -138,7 +244,7 @@ const Guide: React.FC = () => {
               温馨提示
             </div>
             <div className={styles.tipsContent}>
-              <p>• 绑定设备后可以享受更完整的功能体验</p>
+              <p>• 绑定设备后可享受完整功能体验</p>
               <p>• 每个账号最多可绑定10台设备</p>
               <p>• 如需帮助请联系客服</p>
             </div>
@@ -157,18 +263,86 @@ const Guide: React.FC = () => {
             立即绑定设备
             <ArrowRightOutlined className={styles.buttonIcon} />
           </Button>
-
-          <Button
-            block
-            fill="outline"
-            size="large"
-            className={styles.secondaryButton}
-            onClick={handleSkipGuide}
-          >
-            稍后绑定
-          </Button>
         </div>
       </div>
+
+      {/* 添加设备弹窗 */}
+      <Popup
+        visible={addVisible}
+        onMaskClick={handleClosePopup}
+        bodyStyle={{
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          minHeight: 320,
+        }}
+      >
+        <div style={{ padding: 20 }}>
+          <Tabs
+            activeKey={addTab}
+            onChange={setAddTab}
+            style={{ marginBottom: 16 }}
+          >
+            <Tabs.Tab title="扫码添加" key="scan" />
+            <Tabs.Tab title="手动添加" key="manual" />
+          </Tabs>
+          {addTab === "scan" && (
+            <div style={{ textAlign: "center", minHeight: 200 }}>
+              <Button color="primary" onClick={handleGetQr} loading={qrLoading}>
+                <QrcodeOutlined />
+                获取二维码
+              </Button>
+              {qrCode && (
+                <div style={{ marginTop: 16 }}>
+                  <img
+                    src={qrCode}
+                    alt="二维码"
+                    style={{
+                      width: 180,
+                      height: 180,
+                      background: "#f5f5f5",
+                      borderRadius: 8,
+                      margin: "0 auto",
+                    }}
+                  />
+                  <div style={{ color: "#888", fontSize: 12, marginTop: 8 }}>
+                    请用手机扫码添加设备
+                  </div>
+                  {isPolling && (
+                    <div
+                      style={{ color: "#1890ff", fontSize: 12, marginTop: 8 }}
+                    >
+                      正在监听设备添加状态...
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+          {addTab === "manual" && (
+            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+              <Input
+                placeholder="设备名称"
+                value={name}
+                onChange={val => setName(val)}
+                clearable
+              />
+              <Input
+                placeholder="设备IMEI"
+                value={imei}
+                onChange={val => setImei(val)}
+                clearable
+              />
+              <Button
+                color="primary"
+                onClick={handleAddDevice}
+                loading={addLoading}
+              >
+                添加
+              </Button>
+            </div>
+          )}
+        </div>
+      </Popup>
     </Layout>
   );
 };

nkebao/src/pages/login/login.tsx

@@ -105,7 +105,7 @@ const Login: React.FC = () => {
       try {
         const dashboardData = await getDashboard();
         const deviceNum = dashboardData?.deviceNum || 0;
-
+        console.log(deviceNum, "deviceNum");
         // 如果没有绑定设备，跳转到引导页面
         if (deviceNum === 0) {
           navigate("/guide");

nkebao/src/pages/mobile/scenarios/list/index.tsx

@@ -46,9 +46,7 @@ const Scene: React.FC = () => {
           image:
             item.image ||
             "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png",
-          description:
+          description: "",
-            scenarioDescriptions[item.name?.toLowerCase()] ||
-            "通过该平台进行获客",
           count: item.count,
           growth: item.growth,
           status: item.status,
@@ -144,11 +142,7 @@ const Scene: React.FC = () => {
                   </div>
                 </div>
                 <div className={style["card-title"]}>{scenario.name}</div>
-                {scenario.description && (
+
-                  <div className={style["card-desc"]}>
-                    {scenario.description}
-                  </div>
-                )}
                 <div className={style["card-stats"]}>
                   <span className={style["card-count"]}>
                     今日: {scenario.count}