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

2025-06-16 15:42:36 +08:00
parent 9e89e3db9c
commit 51beeee212
14 changed files with 1423 additions and 645 deletions
--- a/Cunkebao/app/scenarios/[channel]/edit/[id]/page.tsx
+++ b/Cunkebao/app/scenarios/[channel]/edit/[id]/page.tsx
@@ -4,12 +4,13 @@ import { useState, useEffect } from "react"
 import { ChevronLeft } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
-import { BasicSettings } from "@/plans/new/steps/BasicSettings"
-import { FriendRequestSettings } from "@/plans/new/steps/FriendRequestSettings"
-import { MessageSettings } from "@/plans/new/steps/MessageSettings"
-import { TagSettings } from "@/plans/new/steps/TagSettings"
+import { BasicSettings } from "../../../new/steps/BasicSettings"
+import { FriendRequestSettings } from "../../../new/steps/FriendRequestSettings"
+import { MessageSettings } from "../../../new/steps/MessageSettings"
+import { TagSettings } from "@/scenarios/new/steps/TagSettings"
 import { useRouter } from "next/navigation"
 import { toast } from "@/components/ui/use-toast"
+import { api, ApiResponse } from "@/lib/api"

 const steps = [
  { id: 1, title: "步骤一", subtitle: "基础设置" },
@@ -22,6 +23,7 @@ export default function EditAcquisitionPlan({ params }: { params: { channel: str
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [loading, setLoading] = useState(true)
+  const [scenes, setScenes] = useState<any[]>([])
  const [formData, setFormData] = useState({
    planName: "",
    accounts: [],
@@ -39,26 +41,21 @@ export default function EditAcquisitionPlan({ params }: { params: { channel: str
  })

  useEffect(() => {
-    // 模拟从API获取计划数据
    const fetchPlanData = async () => {
      try {
-        // 这里应该是实际的API调用
-        const mockData = {
-          planName: "测试计划",
-          accounts: ["account1"],
-          dailyLimit: 15,
-          enabled: true,
-          remarkType: "phone",
-          remarkKeyword: "测试",
-          greeting: "你好",
-          addFriendTimeStart: "09:00",
-          addFriendTimeEnd: "18:00",
-          addFriendInterval: 2,
-          maxDailyFriends: 25,
-          messageInterval: 2,
-          messageContent: "欢迎",
+        const [planRes, scenesRes] = await Promise.all([
+          api.get<ApiResponse>(`/v1/plan/detail?id=${params.id}`),
+          api.get<ApiResponse>("/v1/plan/scenes")
+        ])
+
+        if (planRes.code === 200 && planRes.data) {
+          setFormData(planRes.data)
        }
-        setFormData(mockData)
+
+        if (scenesRes.code === 200 && Array.isArray(scenesRes.data)) {
+          setScenes(scenesRes.data)
+        }
+
        setLoading(false)
      } catch (error) {
        toast({
@@ -71,18 +68,25 @@ export default function EditAcquisitionPlan({ params }: { params: { channel: str
    }

    fetchPlanData()
-  }, [])
+  }, [params.id])

  const handleSave = async () => {
    try {
-      // 这里应该是实际的API调用
-      await new Promise((resolve) => setTimeout(resolve, 1000))
+      const res = await api.put<ApiResponse>(`/v1/plan/update?id=${params.id}`, formData)

-      toast({
-        title: "保存成功",
-        description: "获客计划已更新",
-      })
-      router.push(`/scenarios/${params.channel}`)
+      if (res.code === 200) {
+        toast({
+          title: "保存成功",
+          description: "获客计划已更新",
+        })
+        router.push(`/scenarios/${params.channel}`)
+      } else {
+        toast({
+          title: "保存失败",
+          description: res.msg || "更新计划失败，请重试",
+          variant: "destructive",
+        })
+      }
    } catch (error) {
      toast({
        title: "保存失败",
@@ -159,7 +163,7 @@ export default function EditAcquisitionPlan({ params }: { params: { channel: str
  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
-        return <BasicSettings formData={formData} onChange={setFormData} onNext={handleNext} isEdit />
+        return <BasicSettings formData={formData} onChange={setFormData} onNext={handleNext} scenarios={scenes} isEdit />
      case 2:
        return (
          <FriendRequestSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
@@ -178,7 +182,7 @@ export default function EditAcquisitionPlan({ params }: { params: { channel: str
      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
        <header className="sticky top-0 z-10 bg-white border-b">
          <div className="flex items-center h-14 px-4">
-            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+            <Button variant="ghost" size="icon" onClick={() => router.push(`/scenarios/${params.channel}`)}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="ml-2 text-lg font-medium">编辑获客计划</h1>
--- a/Cunkebao/app/scenarios/[channel]/page.tsx
+++ b/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>
          )}