流量分发列表 + 添加 + 修改状态功能提交

Cunkebao/app/scenarios/[channel]/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { use, useState } from "react"
+import { use, useState, useEffect } from "react"
 import { Copy, Link, HelpCircle, Shield, ChevronLeft, Plus } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useRouter } from "next/navigation"
@@ -17,24 +17,7 @@ import {
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-
-// 获取渠道中文名称
-const getChannelName = (channel: string) => {
-  const channelMap: Record<string, string> = {
-    douyin: "抖音",
-    kuaishou: "快手",
-    xiaohongshu: "小红书",
-    weibo: "微博",
-    haibao: "海报",
-    poster: "海报",
-    phone: "电话",
-    gongzhonghao: "公众号",
-    weixinqun: "微信群",
-    payment: "付款码",
-    api: "API",
-  }
-  return channelMap[channel] || channel
-}
+import { api, ApiResponse } from "@/lib/api"
 
 interface Task {
   id: string
@@ -83,46 +66,48 @@ function ApiDocumentationTooltip() {
   // const channel = unwrappedParams.channel
   // const channelName = getChannelName(unwrappedParams.channel)
   const channel = resolvedParams.channel
-  const channelName = getChannelName(resolvedParams.channel)
+  const [channelName, setChannelName] = useState<string>("")
 
-  const initialTasks: Task[] = [
-    {
-      id: "1",
-      name: `${channelName}直播获客计划`,
-      status: "running",
-      stats: {
-        devices: 5,
-        acquired: 31,
-        added: 25,
-      },
-      lastUpdated: "2024-02-09 15:30",
-      executionTime: "2024-02-09 17:24:10",
-      nextExecutionTime: "2024-02-09 17:25:36",
-      trend: Array.from({ length: 7 }, (_, i) => ({
-        date: `2月${String(i + 1)}日`,
-        customers: Math.floor(Math.random() * 30) + 30,
-      })),
-    },
-    {
-      id: "2",
-      name: `${channelName}评论区获客计划`,
-      status: "paused",
-      stats: {
-        devices: 3,
-        acquired: 15,
-        added: 12,
-      },
-      lastUpdated: "2024-02-09 14:00",
-      executionTime: "2024-02-09 16:30:00",
-      nextExecutionTime: "2024-02-09 16:45:00",
-      trend: Array.from({ length: 7 }, (_, i) => ({
-        date: `2月${String(i + 1)}日`,
-        customers: Math.floor(Math.random() * 20) + 20,
-      })),
-    },
-  ]
+  // 1. tasks 初始值设为 []
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState("")
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [total, setTotal] = useState(0)
 
-  const [tasks, setTasks] = useState<Task[]>(initialTasks)
+  useEffect(() => {
+    api.get<ApiResponse>(`/v1/plan/scenes-detail?id=${channel}`)
+      .then((res: ApiResponse) => {
+        if (res.code === 200 && res.data?.name) {
+          setChannelName(res.data.name)
+        } else {
+          setChannelName(channel)
+        }
+      })
+      .catch(() => setChannelName(channel))
+  }, [channel])
+
+  // 抽出请求列表的函数
+  const fetchTasks = () => {
+    setLoading(true)
+    setError("")
+    api.get<ApiResponse>(`/v1/plan/list?sceneId=${channel}&page=${page}&pageSize=${pageSize}`)
+      .then((res: ApiResponse) => {
+        if (res.code === 200 && Array.isArray(res.data?.list)) {
+          setTasks(res.data.list)
+          setTotal(res.data.total || 0)
+        } else {
+          setError(res.msg || "接口返回异常")
+        }
+      })
+      .catch(err => setError(err?.message || "接口请求失败"))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    fetchTasks()
+  }, [channel, page, pageSize])
 
   const [deviceStats, setDeviceStats] = useState<DeviceStats>({
     active: 5,
@@ -141,32 +126,61 @@ function ApiDocumentationTooltip() {
 
   const handleCopyPlan = (taskId: string) => {
     const taskToCopy = tasks.find((task) => task.id === taskId)
-    if (taskToCopy) {
-      const newTask = {
-        ...taskToCopy,
-        id: `${Date.now()}`,
-        name: `${taskToCopy.name} (副本)`,
-        status: "paused" as const,
-      }
-      setTasks([...tasks, newTask])
-      toast({
-        title: "计划已复制",
-        description: `已成功复制"${taskToCopy.name}"`,
-        variant: "default",
+    if (!taskToCopy) return;
+    api.get<ApiResponse>(`/v1/plan/copy?planId=${taskId}`)
+      .then((res: ApiResponse) => {
+        if (res.code === 200) {
+          toast({
+            title: "计划已复制",
+            description: `已成功复制"${taskToCopy.name}"`,
+            variant: "default",
+          })
+          setPage(1)
+          fetchTasks()
+        } else {
+          toast({
+            title: "复制失败",
+            description: res.msg || "复制计划失败，请重试",
+            variant: "destructive",
+          })
+        }
+      })
+      .catch(err => {
+        toast({
+          title: "复制失败",
+          description: err?.message || "复制计划失败，请重试",
+          variant: "destructive",
+        })
       })
-    }
   }
 
   const handleDeletePlan = (taskId: string) => {
     const taskToDelete = tasks.find((t) => t.id === taskId)
-    if (taskToDelete) {
-      setTasks(tasks.filter((t) => t.id !== taskId))
-      toast({
-        title: "计划已删除",
-        description: `已成功删除"${taskToDelete.name}"`,
-        variant: "default",
+    if (!taskToDelete) return;
+    api.delete<ApiResponse>(`/v1/plan/delete?planId=${taskId}`)
+      .then((res: ApiResponse) => {
+        if (res.code === 200) {
+          setTasks(tasks.filter((t) => t.id !== taskId))
+          toast({
+            title: "计划已删除",
+            description: `已成功删除"${taskToDelete.name}"`,
+            variant: "default",
+          })
+        } else {
+          toast({
+            title: "删除失败",
+            description: res.msg || "删除计划失败，请重试",
+            variant: "destructive",
+          })
+        }
+      })
+      .catch(err => {
+        toast({
+          title: "删除失败",
+          description: err?.message || "删除计划失败，请重试",
+          variant: "destructive",
+        })
       })
-    }
   }
 
   const handleStatusChange = (taskId: string, newStatus: "running" | "paused") => {
@@ -217,37 +231,48 @@ function ApiDocumentationTooltip() {
             <Button variant="ghost" size="icon" onClick={() => router.push("/scenarios")} className="h-8 w-8">
               <ChevronLeft className="h-5 w-5" />
             </Button>
-            <h1 className="text-xl font-semibold text-blue-600">{channelName}获客</h1>
+            <h1 className="text-xl font-semibold text-blue-600">{channelName}</h1>
           </div>
           <Button onClick={handleCreateNewPlan} size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
             <Plus className="h-4 w-4 mr-1" />
-            新建{channelName}计划
+            新建计划
           </Button>
         </div>
       </header>
 
       <div className="p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
         <div className="space-y-4">
-          {tasks.length > 0 ? (
-            tasks.map((task) => (
-              <div key={task.id}>
-                <ScenarioAcquisitionCard
-                  task={task}
-                  channel={channel}
-                  onEdit={() => handleEditPlan(task.id)}
-                  onCopy={handleCopyPlan}
-                  onDelete={handleDeletePlan}
-                  onStatusChange={handleStatusChange}
-                  onOpenSettings={handleOpenApiSettings}
-                />
+          {loading ? (
+            <div className="text-center py-12 text-gray-400">加载中...</div>
+          ) : error ? (
+            <div className="text-center py-12 text-red-500">{error}</div>
+          ) : tasks.length > 0 ? (
+            <>
+              {tasks.map((task) => (
+                <div key={task.id}>
+                  <ScenarioAcquisitionCard
+                    task={task}
+                    channel={channel}
+                    onEdit={() => handleEditPlan(task.id)}
+                    onCopy={handleCopyPlan}
+                    onDelete={handleDeletePlan}
+                    onStatusChange={handleStatusChange}
+                    onOpenSettings={handleOpenApiSettings}
+                  />
+                </div>
+              ))}
+              <div className="flex justify-center mt-6 gap-2">
+                <Button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</Button>
+                <span className="px-2">第 {page} 页 / 共 {Math.max(1, Math.ceil(total / pageSize))} 页</span>
+                <Button disabled={page * pageSize >= total} onClick={() => setPage(page + 1)}>下一页</Button>
               </div>
-            ))
+            </>
           ) : (
             <div className="text-center py-12 bg-white rounded-lg shadow-sm md:col-span-2 lg:col-span-3">
               <div className="text-gray-400 mb-4">暂无获客计划</div>
               <Button onClick={handleCreateNewPlan} className="bg-blue-600 hover:bg-blue-700 text-white">
                 <Plus className="h-4 w-4 mr-1" />
-                新建{channelName}计划
+                新建计划
               </Button>
             </div>
           )}