Merge branch 'yongpxu-dev' into yongxu-dev3

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;
 }

nkebao/src/pages/home/index.tsx

@@ -1,23 +1,17 @@
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { NavBar } from "antd-mobile";
-import {
-  ClockCircleOutline,
-  SendOutline,
-  StarOutline,
-} from "antd-mobile-icons";
-
 import {
   BellOutlined,
   MobileOutlined,
-  TeamOutlined,
-  LineChartOutlined,
+  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,
@@ -25,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",
@@ -45,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",
@@ -53,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",
@@ -61,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",
@@ -75,28 +89,28 @@ const Home: React.FC = () => {
     {
       title: "朋友圈同步",
       value: "12",
-      icon: <MessageOutlined className="h-4 w-4" />,
+      icon: <MessageOutlined style={{ fontSize: 16, color: "#8b5cf6" }} />,
       color: "text-purple-600",
       path: "/workspace/moments-sync",
     },
     {
       title: "群发任务",
       value: "8",
-      icon: <TeamOutlined className="h-4 w-4" />,
+      icon: <TeamOutlined style={{ fontSize: 16, color: "#f97316" }} />,
       color: "text-orange-600",
       path: "/workspace/group-push",
     },
     {
       title: "获客转化",
       value: "85%",
-      icon: <RiseOutlined className="h-4 w-4" />,
+      icon: <RiseOutlined style={{ fontSize: 16, color: "#22c55e" }} />,
       color: "text-green-600",
       path: "/scenarios",
     },
     {
       title: "系统活跃度",
       value: "98%",
-      icon: <LineChartOutlined className="h-4 w-4" />,
+      icon: <LineChartOutlined style={{ fontSize: 16, color: "#3b82f6" }} />,
       color: "text-blue-600",
       path: "/workspace",
     },
@@ -144,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);
@@ -191,13 +201,11 @@ const Home: React.FC = () => {
   }, []);
 
   const handleDevicesClick = () => {
-    // 导航到设备页面
-    console.log("点击设备");
+    navigate("/devices");
   };
 
   const handleWechatClick = () => {
-    // 导航到微信号页面
-    console.log("点击微信号");
+    navigate("/wechat-accounts");
   };
 
   if (isLoading) {
@@ -213,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>
@@ -235,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">
-                <BellOutlined 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>
-                    <MobileOutlined 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>
-                    <TeamOutlined 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>
-                  <LineChartOutlined 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>
               ))}
@@ -374,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>

nkebao/src/pages/scenarios/plan/list/index.module.scss

@@ -304,6 +304,7 @@
   background: white;
   border-radius: 16px;
   padding: 20px;
+  width: 100%;
 }
 
 .qr-loading {
@@ -329,4 +330,72 @@
   color: #ff4d4f;
   font-size: 14px;
   padding: 40px 20px;
+}
+
+.qr-link-section {
+  margin-top: 20px;
+  width: 100%;
+  padding: 0 10px;
+}
+
+.link-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+.link-input-wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  
+  @media (max-width: 480px) {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+.link-input {
+  flex: 1;
+  
+  .ant-input {
+    border-radius: 8px;
+    font-size: 12px;
+    color: #666;
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    
+    &:focus {
+      border-color: #1890ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
+  
+  @media (max-width: 480px) {
+    width: 100%;
+  }
+}
+
+.copy-button {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  
+  .anticon {
+    font-size: 12px;
+  }
+  
+  @media (max-width: 480px) {
+    width: 100%;
+    justify-content: center;
+  }
 } 

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

@@ -37,6 +37,7 @@ import {
 import style from "./index.module.scss";
 import { Task, ApiSettings, PlanDetail } from "./data";
 import PlanApi from "./planApi";
+import { buildApiUrl } from "@/utils/apiUrl";
 
 const ScenarioList: React.FC = () => {
   const { scenarioId, scenarioName } = useParams<{
@@ -57,6 +58,7 @@ const ScenarioList: React.FC = () => {
   const [showQrDialog, setShowQrDialog] = useState(false);
   const [qrLoading, setQrLoading] = useState(false);
   const [qrImg, setQrImg] = useState<any>("");
+  const [currentTaskId, setCurrentTaskId] = useState<string>("");
   const [showActionMenu, setShowActionMenu] = useState<string | null>(null);
 
   // 分页相关状态
@@ -208,11 +210,14 @@ const ScenarioList: React.FC = () => {
     try {
       const response: PlanDetail = await getPlanDetail(taskId);
       if (response) {
+        // 处理webhook URL，使用工具函数构建完整地址
+        const webhookUrl = buildApiUrl(
+          response.textUrl?.fullUrl || `webhook/${taskId}`
+        );
+
         setCurrentApiSettings({
           apiKey: response.apiKey || "demo-api-key-123456",
-          webhookUrl:
-            response.textUrl?.fullUrl ||
-            `https://api.example.com/webhook/${taskId}`,
+          webhookUrl: webhookUrl,
           taskId: taskId,
         });
         setShowApiDialog(true);
@@ -233,6 +238,7 @@ const ScenarioList: React.FC = () => {
     setQrLoading(true);
     setShowQrDialog(true);
     setQrImg("");
+    setCurrentTaskId(taskId); // 设置当前任务ID
 
     try {
       const response = await getWxMinAppCode(taskId);
@@ -566,11 +572,40 @@ const ScenarioList: React.FC = () => {
                   <div>生成二维码中...</div>
                 </div>
               ) : qrImg ? (
-                <img
-                  src={qrImg}
-                  alt="小程序二维码"
-                  className={style["qr-image"]}
-                />
+                <>
+                  <img
+                    src={qrImg}
+                    alt="小程序二维码"
+                    className={style["qr-image"]}
+                  />
+                  {/* 链接复制区域 */}
+                  <div className={style["qr-link-section"]}>
+                    <div className={style["link-label"]}>小程序链接</div>
+                    <div className={style["link-input-wrapper"]}>
+                      <Input
+                        value={`https://h5.ckb.quwanzhi.com/#/pages/form/input?id=${currentTaskId}`}
+                        readOnly
+                        className={style["link-input"]}
+                        placeholder="小程序链接"
+                      />
+                      <Button
+                        size="small"
+                        onClick={() => {
+                          const link = `https://h5.ckb.quwanzhi.com/#/pages/form/input?id=${currentTaskId}`;
+                          navigator.clipboard.writeText(link);
+                          Toast.show({
+                            content: "链接已复制到剪贴板",
+                            position: "top",
+                          });
+                        }}
+                        className={style["copy-button"]}
+                      >
+                        <CopyOutlined />
+                        复制
+                      </Button>
+                    </div>
+                  </div>
+                </>
               ) : (
                 <div className={style["qr-error"]}>二维码生成失败</div>
               )}

nkebao/src/pages/scenarios/plan/list/planApi.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { Popup, Button, Toast, SpinLoading } from "antd-mobile";
 import { Modal, Input, Tabs, Card, Tag, Space } from "antd";
 import {
@@ -12,6 +12,7 @@ import {
   CheckCircleOutlined,
 } from "@ant-design/icons";
 import style from "./planApi.module.scss";
+import { buildApiUrl } from "@/utils/apiUrl";
 
 /**
  * 计划接口配置弹窗组件
@@ -40,6 +41,7 @@ import style from "./planApi.module.scss";
  * - 支持多种编程语言的代码示例
  * - 响应式设计，自适应不同屏幕尺寸
  * - 支持暗色主题
+ * - 自动拼接API地址前缀
  */
 
 interface PlanApiProps {
@@ -65,9 +67,17 @@ const PlanApi: React.FC<PlanApiProps> = ({
 }) => {
   const [activeTab, setActiveTab] = useState("config");
   const [activeLanguage, setActiveLanguage] = useState("javascript");
-  const [testUrl, setTestUrl] = useState(
-    `${webhookUrl}?name=测试客户&phone=13800138000&source=API测试`
-  );
+
+  // 处理webhook URL，确保包含完整的API地址
+  const fullWebhookUrl = useMemo(() => {
+    return buildApiUrl(webhookUrl);
+  }, [webhookUrl]);
+
+  // 生成测试URL
+  const testUrl = useMemo(() => {
+    if (!fullWebhookUrl) return "";
+    return `${fullWebhookUrl}?name=测试客户&phone=13800138000&source=API测试`;
+  }, [fullWebhookUrl]);
 
   // 检测是否为移动端
   const isMobile = window.innerWidth <= 768;
@@ -122,10 +132,14 @@ const PlanApi: React.FC<PlanApiProps> = ({
           <Tag color="blue">POST请求</Tag>
         </div>
         <div className={style["input-group"]}>
-          <Input value={webhookUrl} disabled className={style["api-input"]} />
+          <Input
+            value={fullWebhookUrl}
+            disabled
+            className={style["api-input"]}
+          />
           <Button
             size="small"
-            onClick={() => handleCopy(webhookUrl, "接口地址")}
+            onClick={() => handleCopy(fullWebhookUrl, "接口地址")}
             className={style["copy-btn"]}
           >
             <CopyOutlined />
@@ -215,7 +229,7 @@ const PlanApi: React.FC<PlanApiProps> = ({
 
   const renderCodeTab = () => {
     const codeExamples = {
-      javascript: `fetch('${webhookUrl}', {
+      javascript: `fetch('${fullWebhookUrl}', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
@@ -229,7 +243,7 @@ const PlanApi: React.FC<PlanApiProps> = ({
 })`,
       python: `import requests
 
-url = '${webhookUrl}'
+url = '${fullWebhookUrl}'
 headers = {
     'Content-Type': 'application/json',
     'Authorization': 'Bearer ${apiKey}'
@@ -242,7 +256,7 @@ data = {
 
 response = requests.post(url, json=data, headers=headers)`,
       php: `<?php
-$url = '${webhookUrl}';
+$url = '${fullWebhookUrl}';
 $data = array(
     'name' => '张三',
     'phone' => '13800138000',
@@ -268,7 +282,7 @@ HttpClient client = HttpClient.newHttpClient();
 String json = "{\\"name\\":\\"张三\\",\\"phone\\":\\"13800138000\\",\\"source\\":\\"官网表单\\"}";
 
 HttpRequest request = HttpRequest.newBuilder()
-    .uri(URI.create("${webhookUrl}"))
+    .uri(URI.create("${fullWebhookUrl}"))
     .header("Content-Type", "application/json")
     .header("Authorization", "Bearer ${apiKey}")
     .POST(HttpRequest.BodyPublishers.ofString(json))

nkebao/src/utils/apiUrl.ts

@@ -0,0 +1,73 @@
+/**
+ * API URL工具函数
+ * 用于统一处理API地址的拼接逻辑
+ *
+ * URL结构: {VITE_API_BASE_URL}/v1/api/scenarios/{path}
+ *
+ * 示例:
+ * - 开发环境: http://localhost:3000/api/v1/api/scenarios/webhook/123
+ * - 生产环境: https://api.example.com/v1/api/scenarios/webhook/123
+ */
+
+/**
+ * 获取完整的API基础路径
+ * @returns 完整的API基础路径，包含 /v1/api/scenarios
+ *
+ * 示例:
+ * - 开发环境: http://localhost:3000/api/v1/api/scenarios
+ * - 生产环境: https://api.example.com/v1/api/scenarios
+ */
+export const getFullApiPath = (): string => {
+  const apiBaseUrl = (import.meta as any).env?.VITE_API_BASE_URL || "/api";
+  return `${apiBaseUrl}/v1/api/scenarios`;
+};
+
+/**
+ * 构建完整的API URL
+ * @param path 相对路径或完整URL
+ * @returns 完整的API URL
+ *
+ * 示例:
+ * - buildApiUrl('/webhook/123') → 'http://localhost:3000/api/v1/api/scenarios/webhook/123'
+ * - buildApiUrl('webhook/123') → 'http://localhost:3000/api/v1/api/scenarios/webhook/123'
+ * - buildApiUrl('https://api.example.com/webhook/123') → 'https://api.example.com/webhook/123'
+ */
+export const buildApiUrl = (path: string): string => {
+  if (!path) return "";
+
+  // 如果已经是完整的URL（包含http或https），直接返回
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+
+  const fullApiPath = getFullApiPath();
+
+  // 如果是相对路径，拼接完整API路径
+  if (path.startsWith("/")) {
+    return `${fullApiPath}${path}`;
+  }
+
+  // 其他情况，拼接完整API路径和路径
+  return `${fullApiPath}?${path}`;
+};
+
+/**
+ * 构建webhook URL
+ * @param taskId 任务ID
+ * @param path 可选的相对路径
+ * @returns 完整的webhook URL
+ *
+ * 示例:
+ * - buildWebhookUrl('123') → 'http://localhost:3000/api/v1/api/scenarios/webhook/123'
+ * - buildWebhookUrl('123', '/custom/path') → 'http://localhost:3000/api/v1/api/scenarios/custom/path'
+ */
+export const buildWebhookUrl = (taskId: string, path?: string): string => {
+  const fullApiPath = getFullApiPath();
+  const webhookPath = path || `/webhook/${taskId}`;
+
+  if (webhookPath.startsWith("/")) {
+    return `${fullApiPath}${webhookPath}`;
+  }
+
+  return `${fullApiPath}/${webhookPath}`;
+};