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

搜索功能植入完成

nkebao/src/pages/scenarios/ScenarioList.tsx

@@ -1,12 +1,33 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
-import PageHeader from '@/components/PageHeader';
-import Layout from '@/components/Layout';
-import BottomNav from '@/components/BottomNav';
-import { Plus, Users, TrendingUp, Calendar, Copy, Trash2, Play, Pause, Settings, Loader2, Code } from 'lucide-react';
-import { fetchPlanList, fetchPlanDetail, copyPlan, deletePlan, type Task } from '@/api/scenarios';
-import { useToast } from '@/components/ui/toast';
-import '@/components/Layout.css';
+import React, { useEffect, useState, useCallback } from "react";
+import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+import PageHeader from "@/components/PageHeader";
+import Layout from "@/components/Layout";
+import BottomNav from "@/components/BottomNav";
+import {
+  Plus,
+  Users,
+  Calendar,
+  Copy,
+  Trash2,
+  Play,
+  Pause,
+  Settings,
+  Loader2,
+  Code,
+  Search,
+  RefreshCw,
+} from "lucide-react";
+import {
+  fetchPlanList,
+  fetchPlanDetail,
+  copyPlan,
+  deletePlan,
+  type Task,
+} from "@/api/scenarios";
+import { useToast } from "@/components/ui/toast";
+import "@/components/Layout.css";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 interface ScenarioData {
   id: string;
@@ -26,20 +47,25 @@ interface ApiSettings {
 }
 
 export default function ScenarioDetail() {
-  const { scenarioId } = useParams<{ scenarioId: string }>();
+  const { scenarioId, scenarioName } = useParams<{
+    scenarioId: string;
+    scenarioName: string;
+  }>();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { toast } = useToast();
   const [scenario, setScenario] = useState<ScenarioData | null>(null);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const [showApiDialog, setShowApiDialog] = useState(false);
   const [currentApiSettings, setCurrentApiSettings] = useState<ApiSettings>({
-    apiKey: '',
-    webhookUrl: '',
-    taskId: '',
+    apiKey: "",
+    webhookUrl: "",
+    taskId: "",
   });
+  const [searchTerm, setSearchTerm] = useState("");
+  const [loadingTasks, setLoadingTasks] = useState(false);
 
   // 获取渠道中文名称
   const getChannelName = (channel: string) => {
@@ -61,61 +87,61 @@ export default function ScenarioDetail() {
   // 获取场景描述
   const getScenarioDescription = (channel: string) => {
     const descriptions: Record<string, string> = {
-      douyin: '通过抖音平台进行精准获客，利用短视频内容吸引目标用户',
-      xiaohongshu: '利用小红书平台进行内容营销获客，通过优质内容建立品牌形象',
-      gongzhonghao: '通过微信公众号进行获客，建立私域流量池',
-      haibao: '通过海报分享进行获客，快速传播品牌信息',
-      phone: '通过电话营销进行获客，直接与客户沟通',
-      weixinqun: '通过微信群进行获客，利用社交裂变效应',
-      payment: '通过付款码进行获客，便捷的支付方式',
-      api: '通过API接口进行获客，支持第三方系统集成',
+      douyin: "通过抖音平台进行精准获客，利用短视频内容吸引目标用户",
+      xiaohongshu: "利用小红书平台进行内容营销获客，通过优质内容建立品牌形象",
+      gongzhonghao: "通过微信公众号进行获客，建立私域流量池",
+      haibao: "通过海报分享进行获客，快速传播品牌信息",
+      phone: "通过电话营销进行获客，直接与客户沟通",
+      weixinqun: "通过微信群进行获客，利用社交裂变效应",
+      payment: "通过付款码进行获客，便捷的支付方式",
+      api: "通过API接口进行获客，支持第三方系统集成",
     };
-    return descriptions[channel] || '通过该平台进行获客';
+    return descriptions[channel] || "通过该平台进行获客";
   };
 
   useEffect(() => {
     const fetchScenarioData = async () => {
       if (!scenarioId) return;
-      
+
       setLoading(true);
-      setError('');
-      
+      setError("");
+
       try {
         // 获取计划列表
         const response = await fetchPlanList(scenarioId, 1, 20);
-        
+
         // 设置计划列表（可能为空）
         if (response && response.data && response.data.list) {
           setTasks(response.data.list);
         } else {
           setTasks([]);
         }
-        
+
         // 构建场景数据（无论是否有计划都要创建）
         const scenarioData: ScenarioData = {
           id: scenarioId,
-          name: getScenarioName(),
-          image: '', // 可以根据需要设置图片
+          name: scenarioName || "",
+          image: "", // 可以根据需要设置图片
           description: getScenarioDescription(scenarioId),
           totalPlans: response?.data?.list?.length || 0,
           totalCustomers: 0, // 移除统计
           todayCustomers: 0, // 移除统计
-          growth: '', // 移除增长
+          growth: "", // 移除增长
         };
 
         setScenario(scenarioData);
       } catch (error) {
-        console.error('获取场景数据失败:', error);
+        console.error("获取场景数据失败:", error);
         // 即使API失败也要创建基本的场景数据
         const scenarioData: ScenarioData = {
           id: scenarioId,
           name: getScenarioName(),
-          image: '',
+          image: "",
           description: getScenarioDescription(scenarioId),
           totalPlans: 0,
           totalCustomers: 0,
           todayCustomers: 0,
-          growth: '',
+          growth: "",
         };
         setScenario(scenarioData);
         setTasks([]);
@@ -130,28 +156,31 @@ export default function ScenarioDetail() {
   // 获取场景名称 - 优先使用URL查询参数，其次使用映射
   const getScenarioName = useCallback(() => {
     // 优先使用URL查询参数中的name
-    const urlName = searchParams.get('name');
+    const urlName = searchParams.get("name");
     if (urlName) {
       return urlName;
     }
-    
+
     // 如果没有URL参数，使用映射
-    return getChannelName(scenarioId || '');
+    return getChannelName(scenarioId || "");
   }, [searchParams, scenarioId]);
 
   // 更新场景数据中的名称
   useEffect(() => {
-    setScenario(prev => prev ? {
-      ...prev,
-      name: (() => {
-        const urlName = searchParams.get('name');
-        if (urlName) return urlName;
-        return getChannelName(scenarioId || '');
-      })()
-    } : null);
+    setScenario((prev) =>
+      prev
+        ? {
+            ...prev,
+            name: (() => {
+              const urlName = searchParams.get("name");
+              if (urlName) return urlName;
+              return getChannelName(scenarioId || "");
+            })(),
+          }
+        : null
+    );
   }, [searchParams, scenarioId]);
 
-
   const handleCopyPlan = async (taskId: string) => {
     const taskToCopy = tasks.find((task) => task.id === taskId);
     if (!taskToCopy) return;
@@ -160,24 +189,28 @@ export default function ScenarioDetail() {
       const response = await copyPlan(taskId);
       if (response && response.code === 200) {
         toast({
-          title: '计划已复制',
+          title: "计划已复制",
           description: `已成功复制"${taskToCopy.name}"`,
         });
-        
+
         // 重新加载数据
         const refreshResponse = await fetchPlanList(scenarioId!, 1, 20);
-        if (refreshResponse && refreshResponse.code === 200 && refreshResponse.data) {
+        if (
+          refreshResponse &&
+          refreshResponse.code === 200 &&
+          refreshResponse.data
+        ) {
           setTasks(refreshResponse.data.list);
         }
       } else {
-        throw new Error(response?.msg || '复制失败');
+        throw new Error(response?.msg || "复制失败");
       }
     } catch (error) {
-      console.error('复制计划失败:', error);
+      console.error("复制计划失败:", error);
       toast({
-        title: '复制失败',
-        description: error instanceof Error ? error.message : '复制计划失败',
-        variant: 'destructive',
+        title: "复制失败",
+        description: error instanceof Error ? error.message : "复制计划失败",
+        variant: "destructive",
       });
     }
   };
@@ -192,24 +225,28 @@ export default function ScenarioDetail() {
       const response = await deletePlan(taskId);
       if (response && response.code === 200) {
         toast({
-          title: '计划已删除',
+          title: "计划已删除",
           description: `已成功删除"${taskToDelete.name}"`,
         });
-        
+
         // 重新加载数据
         const refreshResponse = await fetchPlanList(scenarioId!, 1, 20);
-        if (refreshResponse && refreshResponse.code === 200 && refreshResponse.data) {
+        if (
+          refreshResponse &&
+          refreshResponse.code === 200 &&
+          refreshResponse.data
+        ) {
           setTasks(refreshResponse.data.list);
         }
       } else {
-        throw new Error(response?.msg || '删除失败');
+        throw new Error(response?.msg || "删除失败");
       }
     } catch (error) {
-      console.error('删除计划失败:', error);
+      console.error("删除计划失败:", error);
       toast({
-        title: '删除失败',
-        description: error instanceof Error ? error.message : '删除计划失败',
-        variant: 'destructive',
+        title: "删除失败",
+        description: error instanceof Error ? error.message : "删除计划失败",
+        variant: "destructive",
       });
     }
   };
@@ -217,20 +254,22 @@ export default function ScenarioDetail() {
   const handleStatusChange = async (taskId: string, newStatus: 1 | 0) => {
     try {
       // 这里应该调用状态切换API，暂时模拟
-      setTasks(prev => prev.map(task => 
-        task.id === taskId ? { ...task, status: newStatus } : task
-      ));
-      
+      setTasks((prev) =>
+        prev.map((task) =>
+          task.id === taskId ? { ...task, status: newStatus } : task
+        )
+      );
+
       toast({
-        title: '状态已更新',
-        description: `计划已${newStatus === 1 ? '启动' : '暂停'}`,
+        title: "状态已更新",
+        description: `计划已${newStatus === 1 ? "启动" : "暂停"}`,
       });
     } catch (error) {
-      console.error('状态切换失败:', error);
+      console.error("状态切换失败:", error);
       toast({
-        title: '状态切换失败',
-        description: '请稍后重试',
-        variant: 'destructive',
+        title: "状态切换失败",
+        description: "请稍后重试",
+        variant: "destructive",
       });
     }
   };
@@ -240,20 +279,22 @@ export default function ScenarioDetail() {
       const response = await fetchPlanDetail(taskId);
       if (response && response.code === 200 && response.data) {
         setCurrentApiSettings({
-          apiKey: response.data.apiKey || 'demo-api-key-123456',
-          webhookUrl: response.data.textUrl?.fullUrl || `https://api.example.com/webhook/${taskId}`,
+          apiKey: response.data.apiKey || "demo-api-key-123456",
+          webhookUrl:
+            response.data.textUrl?.fullUrl ||
+            `https://api.example.com/webhook/${taskId}`,
           taskId,
         });
         setShowApiDialog(true);
       } else {
-        throw new Error(response?.msg || '获取API设置失败');
+        throw new Error(response?.msg || "获取API设置失败");
       }
     } catch (error) {
-      console.error('获取API设置失败:', error);
+      console.error("获取API设置失败:", error);
       toast({
-        title: '获取API设置失败',
-        description: '请稍后重试',
-        variant: 'destructive',
+        title: "获取API设置失败",
+        description: "请稍后重试",
+        variant: "destructive",
       });
     }
   };
@@ -261,8 +302,8 @@ export default function ScenarioDetail() {
   const handleCopyApiUrl = (url: string) => {
     navigator.clipboard.writeText(url);
     toast({
-      title: '已复制',
-      description: '接口地址已复制到剪贴板',
+      title: "已复制",
+      description: "接口地址已复制到剪贴板",
     });
   };
 
@@ -273,22 +314,22 @@ export default function ScenarioDetail() {
   const getStatusColor = (status: number) => {
     switch (status) {
       case 1:
-        return 'text-green-600 bg-green-50';
+        return "text-green-600 bg-green-50";
       case 0:
-        return 'text-yellow-600 bg-yellow-50';
+        return "text-yellow-600 bg-yellow-50";
       default:
-        return 'text-gray-600 bg-gray-50';
+        return "text-gray-600 bg-gray-50";
     }
   };
 
   const getStatusText = (status: number) => {
     switch (status) {
       case 1:
-        return '进行中';
+        return "进行中";
       case 0:
-        return '已暂停';
+        return "已暂停";
       default:
-        return '未知';
+        return "未知";
     }
   };
 
@@ -297,11 +338,10 @@ export default function ScenarioDetail() {
       <Layout
         header={
           <PageHeader
-            title={scenario?.name || '场景详情'}
+            title={scenario?.name || "场景详情"}
             defaultBackPath="/scenarios"
           />
         }
-        footer={<BottomNav />}
       >
         <div className="bg-gray-50 min-h-screen flex items-center justify-center">
           <div className="flex flex-col items-center space-y-4">
@@ -316,25 +356,20 @@ export default function ScenarioDetail() {
   if (error) {
     return (
       <Layout
-        header={
-          <PageHeader
-            title="场景详情"
-            defaultBackPath="/scenarios"
-          />
-        }
+        header={<PageHeader title="场景详情" defaultBackPath="/scenarios" />}
         footer={<BottomNav />}
       >
         <div className="bg-gray-50 min-h-screen flex items-center justify-center">
           <div className="text-center">
             <p className="text-red-500 mb-4">{error}</p>
-            <button 
+            <button
               onClick={() => window.location.reload()}
               className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
               重新加载
             </button>
+          </div>
         </div>
-      </div>
       </Layout>
     );
   }
@@ -342,12 +377,7 @@ export default function ScenarioDetail() {
   if (!scenario) {
     return (
       <Layout
-        header={
-          <PageHeader
-            title="场景详情"
-            defaultBackPath="/scenarios"
-          />
-        }
+        header={<PageHeader title="场景详情" defaultBackPath="/scenarios" />}
         footer={<BottomNav />}
       >
         <div className="bg-gray-50 min-h-screen flex items-center justify-center">
@@ -355,141 +385,153 @@ export default function ScenarioDetail() {
             <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
             <p className="text-gray-500">加载场景数据中...</p>
           </div>
-      </div>
+        </div>
       </Layout>
     );
   }
 
+  const handleRefresh = async () => {
+    setLoadingTasks(true);
+    await fetchPlanList(scenarioId!, 1, 20);
+    setLoadingTasks(false);
+  };
+
+  const filteredTasks = tasks.filter((task) => task.name.includes(searchTerm));
+
   return (
     <Layout
       header={
-      <PageHeader
-        title={scenario.name}
-        defaultBackPath="/scenarios"
-        rightContent={
-          <button
-              onClick={handleCreateNewPlan}
-            className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            新建计划
-          </button>
-        }
-      />
-      }
-      footer={<BottomNav />}
-    >
-      <div className="bg-gray-50 min-h-screen pb-20">
-      <div className="p-4">
-        {/* 场景描述 */}
-        <div className="bg-white rounded-lg p-4 mb-6">
-          <p className="text-gray-600 text-sm">{scenario.description}</p>
-        </div>
-
-        {/* 数据统计 */}
-        {/* <div className="grid grid-cols-2 gap-4 mb-6">
-          <div className="bg-white rounded-lg p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-gray-500 text-sm">总获客数</p>
-                <p className="text-2xl font-bold text-gray-900">{scenario.totalCustomers}</p>
-              </div>
-              <Users className="h-8 w-8 text-blue-500" />
-            </div>
-            <div className="flex items-center mt-2 text-green-500 text-sm">
-              <TrendingUp className="h-4 w-4 mr-1" />
-              <span>{scenario.growth}</span>
-            </div>
-          </div>
-
-          <div className="bg-white rounded-lg p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-gray-500 text-sm">今日获客</p>
-                <p className="text-2xl font-bold text-gray-900">{scenario.todayCustomers}</p>
-              </div>
-              <Calendar className="h-8 w-8 text-green-500" />
-            </div>
-            <div className="flex items-center mt-2 text-gray-500 text-sm">
-              <span>活跃计划: {scenario.totalPlans}</span>
-            </div>
-          </div>
-        </div> */}
-
-        {/* 计划列表 */}
-        <div className="bg-white rounded-lg">
-          <div className="p-4 border-b">
-            <h2 className="text-lg font-medium">获客计划</h2>
-          </div>
-          
-            {tasks.length === 200 ? (
-              <div className="p-8 text-center">
-                <div className="mb-4">
-                  <Users className="h-12 w-12 text-gray-300 mx-auto mb-3" />
-                  <p className="text-gray-500 text-lg font-medium mb-2">暂无获客计划</p>
-                  <p className="text-gray-400 text-sm">创建您的第一个获客计划，开始获取客户</p>
-                </div>
+        <>
+          <PageHeader
+            title={scenario.name}
+            defaultBackPath="/scenarios"
+            rightContent={
               <button
-                  onClick={handleCreateNewPlan}
-                  className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+                onClick={handleCreateNewPlan}
+                className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
               >
-                  <Plus className="h-4 w-4 mr-2" />
-                  创建第一个计划
+                <Plus className="h-4 w-4 mr-1" />
+                新建计划
+              </button>
+            }
+          />
+          <div className="flex items-center space-x-2 m-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Input
+                placeholder="搜索计划名称"
+                className="pl-9"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleRefresh}
+              disabled={loadingTasks}
+            >
+              {loadingTasks ? (
+                <RefreshCw className="h-4 w-4 animate-spin" />
+              ) : (
+                <RefreshCw className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        </>
+      }
+    >
+      <div className="p-4">
+        {/* 计划列表 */}
+        <div className="rounded-lg">
+          {filteredTasks.length === 0 ? (
+            <div className="p-8 text-center">
+              <div className="mb-4">
+                <Users className="h-12 w-12 text-gray-300 mx-auto mb-3" />
+                <p className="text-gray-500 text-lg font-medium mb-2">
+                  暂无获客计划
+                </p>
+                <p className="text-gray-400 text-sm">
+                  创建您的第一个获客计划，开始获取客户
+                </p>
+              </div>
+              <button
+                onClick={handleCreateNewPlan}
+                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                创建第一个计划
               </button>
             </div>
           ) : (
             <div className="divide-y">
-                {tasks.map((task) => (
-                  <div key={task.id} className="p-4 hover:bg-gray-50">
+              {filteredTasks.map((task) => (
+                <div key={task.id} className="p-4  bg-white">
                   <div className="flex items-center justify-between">
                     <div className="flex-1">
                       <div className="flex items-center mb-2">
-                          <h3 className="font-medium text-gray-900">{task.name}</h3>
-                          <span className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(task.status)}`}>
-                            {getStatusText(task.status)}
+                        <h3 className="font-medium text-gray-900">
+                          {task.name}
+                        </h3>
+                        <span
+                          className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(
+                            task.status
+                          )}`}
+                        >
+                          {getStatusText(task.status)}
                         </span>
                       </div>
                       <div className="flex items-center text-sm text-gray-500">
                         <Calendar className="h-4 w-4 mr-1" />
-                          <span>最后更新: {task.lastUpdated}</span>
+                        <span>最后更新: {task.lastUpdated}</span>
+                      </div>
+                      <div className="flex items-center mt-2 text-sm text-gray-500">
+                        <span>
+                          设备: {task.stats?.devices || 0} | 获客:{" "}
+                          {task.stats?.acquired || 0} | 添加:{" "}
+                          {task.stats?.added || 0}
+                        </span>
                       </div>
-                        <div className="flex items-center mt-2 text-sm text-gray-500">
-                          <span>设备: {task.stats?.devices || 0} | 获客: {task.stats?.acquired || 0} | 添加: {task.stats?.added || 0}</span>
                     </div>
-                      </div>
-                      
-                      <div className="flex items-center space-x-2">
-                        <button
-                          onClick={() => handleStatusChange(task.id, task.status === 1 ? 0 : 1)}
-                          className={`p-2 rounded-md ${
-                            task.status === 1 
-                              ? 'text-yellow-600 hover:bg-yellow-50' 
-                              : 'text-green-600 hover:bg-green-50'
-                          }`}
-                        >
-                          {task.status === 1 ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
-                        </button>
-                        
-                        <button
-                          onClick={() => handleOpenApiSettings(task.id)}
-                          className="p-2 text-blue-600 hover:bg-blue-50 rounded-md"
-                        >
-                          <Settings className="h-4 w-4" />
-                        </button>
-                        
-                        <button
-                          onClick={() => handleCopyPlan(task.id)}
-                          className="p-2 text-gray-600 hover:bg-gray-50 rounded-md"
-                        >
-                          <Copy className="h-4 w-4" />
-                        </button>
-                        
-                        <button
-                          onClick={() => handleDeletePlan(task.id)}
-                          className="p-2 text-red-600 hover:bg-red-50 rounded-md"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </button>
+
+                    <div className="flex items-center space-x-2">
+                      <button
+                        onClick={() =>
+                          handleStatusChange(task.id, task.status === 1 ? 0 : 1)
+                        }
+                        className={`p-2 rounded-md ${
+                          task.status === 1
+                            ? "text-yellow-600 hover:bg-yellow-50"
+                            : "text-green-600 hover:bg-green-50"
+                        }`}
+                      >
+                        {task.status === 1 ? (
+                          <Pause className="h-4 w-4" />
+                        ) : (
+                          <Play className="h-4 w-4" />
+                        )}
+                      </button>
+
+                      <button
+                        onClick={() => handleOpenApiSettings(task.id)}
+                        className="p-2 text-blue-600 hover:bg-blue-50 rounded-md"
+                      >
+                        <Settings className="h-4 w-4" />
+                      </button>
+
+                      <button
+                        onClick={() => handleCopyPlan(task.id)}
+                        className="p-2 text-gray-600 hover:bg-gray-50 rounded-md"
+                      >
+                        <Copy className="h-4 w-4" />
+                      </button>
+
+                      <button
+                        onClick={() => handleDeletePlan(task.id)}
+                        className="p-2 text-red-600 hover:bg-red-50 rounded-md"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -498,8 +540,6 @@ export default function ScenarioDetail() {
           )}
         </div>
       </div>
-    </div>
-
       {/* API接口设置对话框 */}
       {showApiDialog && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
@@ -511,7 +551,9 @@ export default function ScenarioDetail() {
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold">计划接口配置</h3>
-                  <p className="text-gray-500 text-sm">通过API接口直接导入客资到该获客计划</p>
+                  <p className="text-gray-500 text-sm">
+                    通过API接口直接导入客资到该获客计划
+                  </p>
                 </div>
               </div>
               <button
@@ -527,7 +569,9 @@ export default function ScenarioDetail() {
               <div className="bg-gray-50 rounded-lg p-4">
                 <div className="flex items-center justify-between mb-3">
                   <h4 className="font-medium">API密钥</h4>
-                  <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">安全认证</span>
+                  <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
+                    安全认证
+                  </span>
                 </div>
                 <div className="flex items-center space-x-3">
                   <input
@@ -539,8 +583,8 @@ export default function ScenarioDetail() {
                     onClick={() => {
                       navigator.clipboard.writeText(currentApiSettings.apiKey);
                       toast({
-                        title: '已复制',
-                        description: 'API密钥已复制到剪贴板',
+                        title: "已复制",
+                        description: "API密钥已复制到剪贴板",
                       });
                     }}
                     className="px-3 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
@@ -551,7 +595,8 @@ export default function ScenarioDetail() {
                 </div>
                 <div className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                   <p className="text-sm text-amber-800">
-                    <strong>安全提示：</strong>请妥善保管API密钥，不要在客户端代码中暴露。建议在服务器端使用该密钥。
+                    <strong>安全提示：</strong>
+                    请妥善保管API密钥，不要在客户端代码中暴露。建议在服务器端使用该密钥。
                   </p>
                 </div>
               </div>
@@ -560,7 +605,9 @@ export default function ScenarioDetail() {
               <div className="bg-gray-50 rounded-lg p-4">
                 <div className="flex items-center justify-between mb-3">
                   <h4 className="font-medium">接口地址</h4>
-                  <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">POST请求</span>
+                  <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">
+                    POST请求
+                  </span>
                 </div>
                 <div className="flex items-center space-x-3">
                   <input
@@ -569,28 +616,47 @@ export default function ScenarioDetail() {
                     className="flex-1 p-2 bg-white border rounded font-mono text-sm"
                   />
                   <button
-                    onClick={() => handleCopyApiUrl(currentApiSettings.webhookUrl)}
+                    onClick={() =>
+                      handleCopyApiUrl(currentApiSettings.webhookUrl)
+                    }
                     className="px-3 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
                   >
                     <Copy className="h-4 w-4 mr-1" />
                     复制
                   </button>
                 </div>
-                
+
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                   <div className="bg-green-50 border border-green-200 rounded-lg p-3">
-                    <h5 className="font-medium text-green-800 mb-2">必要参数</h5>
+                    <h5 className="font-medium text-green-800 mb-2">
+                      必要参数
+                    </h5>
                     <div className="space-y-1 text-sm text-green-700">
-                      <div><code className="bg-green-100 px-1 rounded">name</code> - 客户姓名</div>
-                      <div><code className="bg-green-100 px-1 rounded">phone</code> - 手机号码</div>
+                      <div>
+                        <code className="bg-green-100 px-1 rounded">name</code>{" "}
+                        - 客户姓名
+                      </div>
+                      <div>
+                        <code className="bg-green-100 px-1 rounded">phone</code>{" "}
+                        - 手机号码
+                      </div>
                     </div>
                   </div>
                   <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                     <h5 className="font-medium text-blue-800 mb-2">可选参数</h5>
                     <div className="space-y-1 text-sm text-blue-700">
-                      <div><code className="bg-blue-100 px-1 rounded">source</code> - 来源标识</div>
-                      <div><code className="bg-blue-100 px-1 rounded">remark</code> - 备注信息</div>
-                      <div><code className="bg-blue-100 px-1 rounded">tags</code> - 客户标签</div>
+                      <div>
+                        <code className="bg-blue-100 px-1 rounded">source</code>{" "}
+                        - 来源标识
+                      </div>
+                      <div>
+                        <code className="bg-blue-100 px-1 rounded">remark</code>{" "}
+                        - 备注信息
+                      </div>
+                      <div>
+                        <code className="bg-blue-100 px-1 rounded">tags</code> -
+                        客户标签
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -601,4 +667,4 @@ export default function ScenarioDetail() {
       )}
     </Layout>
   );
-} 
+}

nkebao/src/pages/scenarios/Scenarios.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Plus, TrendingUp, Loader2 } from 'lucide-react';
-import UnifiedHeader from '@/components/UnifiedHeader';
-import Layout from '@/components/Layout';
-import BottomNav from '@/components/BottomNav';
-import { fetchScenes, type SceneItem } from '@/api/scenarios';
-import '@/components/Layout.css';
+import React, { useEffect, useState, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { Plus, TrendingUp, Loader2 } from "lucide-react";
+import UnifiedHeader from "@/components/UnifiedHeader";
+import Layout from "@/components/Layout";
+import BottomNav from "@/components/BottomNav";
+import { fetchScenes, type SceneItem } from "@/api/scenarios";
+import "@/components/Layout.css";
 
 interface Scenario {
   id: string;
@@ -21,45 +21,54 @@ export default function Scenarios() {
   const navigate = useNavigate();
   const [scenarios, setScenarios] = useState<Scenario[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   // 场景描述映射
-  const scenarioDescriptions: Record<string, string> = useMemo(() => ({
-    douyin: '通过抖音平台进行精准获客',
-    xiaohongshu: '利用小红书平台进行内容营销获客',
-    gongzhonghao: '通过微信公众号进行获客',
-    haibao: '通过海报分享进行获客',
-    phone: '通过电话营销进行获客',
-    weixinqun: '通过微信群进行获客',
-    payment: '通过付款码进行获客',
-    api: '通过API接口进行获客',
-  }), []);
+  const scenarioDescriptions: Record<string, string> = useMemo(
+    () => ({
+      douyin: "通过抖音平台进行精准获客",
+      xiaohongshu: "利用小红书平台进行内容营销获客",
+      gongzhonghao: "通过微信公众号进行获客",
+      haibao: "通过海报分享进行获客",
+      phone: "通过电话营销进行获客",
+      weixinqun: "通过微信群进行获客",
+      payment: "通过付款码进行获客",
+      api: "通过API接口进行获客",
+    }),
+    []
+  );
 
   useEffect(() => {
     const fetchScenarios = async () => {
       setLoading(true);
-      setError('');
-      
+      setError("");
+
       try {
         const response = await fetchScenes({ page: 1, limit: 20 });
-        
+
         if (response && response.code === 200 && response.data) {
           // 转换API数据为前端需要的格式
-          const transformedScenarios: Scenario[] = response.data.map((item: SceneItem) => ({
-            id: item.id.toString(),
-            name: item.name,
-            image: item.image|| 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png',
-            description: scenarioDescriptions[item.name.toLowerCase()] || '通过该平台进行获客',
-            count: Math.floor(Math.random() * 200) + 50, // 模拟今日数据
-            growth: `+${Math.floor(Math.random() * 20) + 5}%`, // 模拟增长率
-            status: item.status === 1 ? 'active' : 'inactive',
-          }));
-          
+          const transformedScenarios: Scenario[] = response.data.map(
+            (item: SceneItem) => ({
+              id: item.id.toString(),
+              name: item.name,
+              image:
+                item.image ||
+                "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png",
+              description:
+                scenarioDescriptions[item.name.toLowerCase()] ||
+                "通过该平台进行获客",
+              count: Math.floor(Math.random() * 200) + 50, // 模拟今日数据
+              growth: `+${Math.floor(Math.random() * 20) + 5}%`, // 模拟增长率
+              status: item.status === 1 ? "active" : "inactive",
+            })
+          );
+
           setScenarios(transformedScenarios);
-        } 
+        }
       } catch (error) {
-        console.error('获取场景数据失败:', error);
-        setError('获取场景数据失败，请稍后重试');
+        console.error("获取场景数据失败:", error);
+        setError("获取场景数据失败，请稍后重试");
       } finally {
         setLoading(false);
       }
@@ -68,23 +77,20 @@ export default function Scenarios() {
     fetchScenarios();
   }, [scenarioDescriptions]);
 
-  const handleScenarioClick = (scenarioId: string,scenarioName:string) => {
-    navigate(`/scenarios/${scenarioId}?name=${encodeURIComponent(scenarioName)}`);
+  const handleScenarioClick = (scenarioId: string, scenarioName: string) => {
+    navigate(
+      `/scenarios/list/${scenarioId}/${encodeURIComponent(scenarioName)}`
+    );
   };
 
   const handleNewPlan = () => {
-    navigate('/scenarios/new');
+    navigate("/scenarios/new");
   };
 
   if (loading) {
     return (
       <Layout
-        header={
-          <UnifiedHeader
-            title="场景获客"
-            showBack={false}
-          />
-        }
+        header={<UnifiedHeader title="场景获客" showBack={false} />}
         footer={<BottomNav />}
       >
         <div className="bg-gray-50 min-h-screen flex items-center justify-center">
@@ -100,18 +106,13 @@ export default function Scenarios() {
   if (error && scenarios.length === 0) {
     return (
       <Layout
-        header={
-          <UnifiedHeader
-            title="场景获客"
-            showBack={false}
-          />
-        }
+        header={<UnifiedHeader title="场景获客" showBack={false} />}
         footer={<BottomNav />}
       >
         <div className="bg-gray-50 min-h-screen flex items-center justify-center">
           <div className="text-center">
             <p className="text-red-500 mb-4">{error}</p>
-            <button 
+            <button
               onClick={() => window.location.reload()}
               className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
             >
@@ -132,10 +133,10 @@ export default function Scenarios() {
           titleColor="blue"
           actions={[
             {
-              type: 'button',
+              type: "button",
               icon: Plus,
-              label: '新建计划',
-              size: 'sm',
+              label: "新建计划",
+              size: "sm",
               onClick: handleNewPlan,
             },
           ]}
@@ -150,29 +151,34 @@ export default function Scenarios() {
               <p className="text-yellow-800 text-sm">{error}</p>
             </div>
           )}
-          
+
           <div className="grid grid-cols-2 gap-4">
             {scenarios.map((scenario) => (
               <div
                 key={scenario.id}
                 className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
-                onClick={() => handleScenarioClick(scenario.id,scenario.name)}
+                onClick={() => handleScenarioClick(scenario.id, scenario.name)}
               >
                 <div className="p-4 flex flex-col items-center">
                   <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mb-2">
-                    <img 
-                      src={scenario.image} 
-                      alt={scenario.name} 
+                    <img
+                      src={scenario.image}
+                      alt={scenario.name}
                       className="w-8 h-8"
                       onError={(e) => {
                         // 图片加载失败时使用默认图标
-                        e.currentTarget.src = 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png';
+                        e.currentTarget.src =
+                          "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png";
                       }}
                     />
                   </div>
-                  <h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
+                  <h3 className="text-blue-600 font-medium text-center">
+                    {scenario.name}
+                  </h3>
                   {scenario.description && (
-                    <p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
+                    <p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">
+                      {scenario.description}
+                    </p>
                   )}
                   <div className="flex items-center mt-2 text-gray-500 text-sm">
                     <span>今日: </span>
@@ -190,4 +196,4 @@ export default function Scenarios() {
       </div>
     </Layout>
   );
-} 
+}

nkebao/src/pages/scenarios/new/page.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { ChevronLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Message } from "tdesign-mobile-react";
+import { Toast } from "tdesign-mobile-react";
 import { Steps, StepItem } from "tdesign-mobile-react";
 import { BasicSettings } from "./steps/BasicSettings";
 import { FriendRequestSettings } from "./steps/FriendRequestSettings";
@@ -55,20 +55,28 @@ export default function NewPlan() {
 
   // 处理保存
   const handleSave = async () => {
-    console.log("保存数据:", formData);
-
     try {
-      await createScenarioPlan(formData);
-      Message.success("获客计划已创建");
-      // router("/scenarios");
+      const result = await createScenarioPlan(formData);
+      console.log(result);
+      if (result.code === 200) {
+        Toast({ message: "获客计划已创建", theme: "success" });
+        // router("/scenarios/1?name=海报获客");
+      } else {
+        Toast({
+          message: result.msg,
+          theme: "error",
+        });
+      }
     } catch (error) {
-      Message.error(
-        error instanceof Error
-          ? error.message
-          : typeof error === "string"
-          ? error
-          : "创建计划失败，请重试"
-      );
+      Toast({
+        message:
+          error instanceof Error
+            ? error.message
+            : typeof error === "string"
+            ? error
+            : "创建计划失败，请重试",
+        theme: "error",
+      });
     }
   };