【操盘手】 流量分发 - 对接添加接口及页面优化

Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx

@@ -86,4 +86,4 @@ export default function EditTrafficDistributionPage({ params }: { params: { id:
   const handleDeviceSelection = (selectedDevices: string[]) => {
     setFormData((prev) => ({ ...prev, deviceIds: selectedDevices }))
   }
-}
+  }

Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx

@@ -171,7 +171,7 @@ export default function DistributionPlanDetailPage({ params }: { params: { id: s
                 <div className="text-2xl font-bold text-gray-900 mb-1">{plan.poolCount}</div>
                 <div className="text-xs text-gray-500 mt-1">流量池</div>
               </div>
-            </div>
+                </div>
             {/* 横向分隔线 */}
             <div className="border-t border-gray-200 mx-auto w-full" style={{height: 0}} />
             <div className="grid grid-cols-2 bg-white rounded-b-lg overflow-hidden border-b border-l border-r">

Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx

@@ -15,12 +15,12 @@ interface BasicInfoStepProps {
 
 export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
   const [formData, setFormData] = useState({
-    name: initialData.name || `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
-    distributionMethod: initialData.distributionMethod || "equal",
-    dailyLimit: initialData.dailyLimit || 50,
-    timeRestriction: initialData.timeRestriction || "custom",
-    startTime: initialData.startTime || "09:00",
-    endTime: initialData.endTime || "18:00",
+    name: initialData.name ?? `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
+    distributeType: initialData.distributeType ?? "1",
+    maxPerDay: initialData.maxPerDay ?? 50,
+    timeType: initialData.timeType ?? "2",
+    startTime: initialData.startTime ?? "09:00",
+    endTime: initialData.endTime ?? "18:00",
   })
 
   const handleChange = (field: string, value: any) => {
@@ -28,7 +28,14 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
   }
 
   const handleSubmit = () => {
-    onNext(formData)
+    onNext({
+      name: formData.name,
+      distributeType: Number(formData.distributeType),
+      maxPerDay: formData.maxPerDay,
+      timeType: Number(formData.timeType),
+      startTime: formData.timeType == "2" ? formData.startTime : "09:00",
+      endTime: formData.timeType == "2" ? formData.endTime : "21:00",
+    })
   }
 
   return (
@@ -52,24 +59,24 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
         <div className="space-y-2">
           <Label>分配方式</Label>
           <RadioGroup
-            value={formData.distributionMethod}
-            onValueChange={(value) => handleChange("distributionMethod", value)}
+            value={String(formData.distributeType)}
+            onValueChange={(value) => handleChange("distributeType", value)}
             className="space-y-2"
           >
             <div className="flex items-center space-x-2">
-              <RadioGroupItem value="equal" id="equal" />
+              <RadioGroupItem value="1" id="equal" />
               <Label htmlFor="equal" className="cursor-pointer">
                 均分配 <span className="text-gray-500 text-sm">(流量将均分配给所有客服)</span>
               </Label>
             </div>
             <div className="flex items-center space-x-2">
-              <RadioGroupItem value="priority" id="priority" />
+              <RadioGroupItem value="2" id="priority" />
               <Label htmlFor="priority" className="cursor-pointer">
                 优先级分配 <span className="text-gray-500 text-sm">(按客服优先级顺序分配)</span>
               </Label>
             </div>
             <div className="flex items-center space-x-2">
-              <RadioGroupItem value="ratio" id="ratio" />
+              <RadioGroupItem value="3" id="ratio" />
               <Label htmlFor="ratio" className="cursor-pointer">
                 比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
               </Label>
@@ -83,14 +90,14 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
           <div className="space-y-2">
             <div className="flex justify-between items-center">
               <span>每日最大分配量</span>
-              <span className="font-medium">{formData.dailyLimit} 人/天</span>
+              <span className="font-medium">{formData.maxPerDay} 人/天</span>
             </div>
             <Slider
-              value={[formData.dailyLimit]}
+              value={[formData.maxPerDay]}
               min={1}
               max={200}
               step={1}
-              onValueChange={(value) => handleChange("dailyLimit", value[0])}
+              onValueChange={(value) => handleChange("maxPerDay", value[0])}
               className="py-4"
             />
             <p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
@@ -99,25 +106,25 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
           <div className="space-y-4 pt-4">
             <Label>时间限制</Label>
             <RadioGroup
-              value={formData.timeRestriction}
-              onValueChange={(value) => handleChange("timeRestriction", value)}
+              value={String(formData.timeType)}
+              onValueChange={(value) => handleChange("timeType", value)}
               className="space-y-4"
             >
               <div className="flex items-center space-x-2">
-                <RadioGroupItem value="allDay" id="allDay" />
+                <RadioGroupItem value="1" id="allDay" />
                 <Label htmlFor="allDay" className="cursor-pointer">
                   全天分配
                 </Label>
               </div>
               <div className="flex items-center space-x-2">
-                <RadioGroupItem value="custom" id="custom" />
+                <RadioGroupItem value="2" id="custom" />
                 <Label htmlFor="custom" className="cursor-pointer">
                   自定义时间段
                 </Label>
               </div>
             </RadioGroup>
 
-            {formData.timeRestriction === "custom" && (
+            {formData.timeType == "2" && (
               <div className="grid grid-cols-2 gap-4 pt-2">
                 <div>
                   <Label htmlFor="startTime" className="mb-2 block">

Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -8,6 +8,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Avatar } from "@/components/ui/avatar"
 import { Search } from "lucide-react"
 import { Input } from "@/components/ui/input"
+import { api } from "@/lib/api"
 
 interface Device {
   id: string
@@ -30,150 +31,64 @@ interface TargetSettingsStepProps {
 }
 
 export default function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettingsStepProps) {
-  const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData.selectedDevices || [])
-  const [selectedCustomerServices, setSelectedCustomerServices] = useState<string[]>(
-    initialData.selectedCustomerServices || [],
-  )
-  const [searchTerm, setSearchTerm] = useState("")
+  const [deviceList, setDeviceList] = useState<any[]>([])
+  const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>(initialData.devices || [])
+  const [search, setSearch] = useState("")
+  const [loading, setLoading] = useState(false)
 
-  // 模拟设备数据
-  const devices: Device[] = [
-    { id: "1", name: "设备 1", status: "online" },
-    { id: "2", name: "设备 2", status: "online" },
-    { id: "3", name: "设备 3", status: "offline" },
-    { id: "4", name: "设备 4", status: "online" },
-    { id: "5", name: "设备 5", status: "offline" },
-  ]
+  useEffect(() => {
+    setLoading(true)
+    api.get('/v1/devices?page=1&limit=100').then(res => {
+      setDeviceList(res.data?.list || [])
+    }).finally(() => setLoading(false))
+  }, [])
 
-  // 模拟客服数据
-  const customerServices: CustomerService[] = [
-    { id: "1", name: "客服 A", status: "online" },
-    { id: "2", name: "客服 B", status: "online" },
-    { id: "3", name: "客服 C", status: "offline" },
-    { id: "4", name: "客服 D", status: "online" },
-  ]
-
-  const filteredDevices = devices.filter((device) => device.name.toLowerCase().includes(searchTerm.toLowerCase()))
-
-  const filteredCustomerServices = customerServices.filter((cs) =>
-    cs.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  const filteredDevices = deviceList.filter(device =>
+    (device.memo || device.nickname || "").toLowerCase().includes(search.toLowerCase())
   )
 
   const toggleDevice = (id: string) => {
-    setSelectedDevices((prev) => (prev.includes(id) ? prev.filter((deviceId) => deviceId !== id) : [...prev, id]))
-  }
-
-  const toggleCustomerService = (id: string) => {
-    setSelectedCustomerServices((prev) => (prev.includes(id) ? prev.filter((csId) => csId !== id) : [...prev, id]))
+    setSelectedDeviceIds(prev =>
+      prev.includes(id) ? prev.filter(did => did !== id) : [...prev, id]
+    )
   }
 
   const handleSubmit = () => {
     onNext({
-      selectedDevices,
-      selectedCustomerServices,
+      targets: selectedDeviceIds,
     })
   }
 
   return (
     <div className="bg-white rounded-lg p-6 shadow-sm">
       <h2 className="text-xl font-bold mb-6">目标设置</h2>
-
       <div className="mb-4">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
-          <Input
-            placeholder="搜索设备或客服"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-10"
-          />
-        </div>
+        <Input placeholder="搜索设备" value={search} onChange={e => setSearch(e.target.value)} />
+      </div>
+      <div className="space-y-3 mt-4 max-h-80 overflow-y-auto">
+        {loading ? <div className="text-center text-gray-400 py-8">加载中...</div> :
+          filteredDevices.map(device => (
+            <div key={device.id} className="flex items-center border rounded-lg px-4 py-2 mb-2 justify-between">
+              <div className="flex items-center gap-3">
+                <span className={`w-8 h-8 flex items-center justify-center rounded-full ${device.alive === 1 ? "bg-green-100 text-green-600" : "bg-gray-100 text-gray-400"}`}>设</span>
+                <div>
+                  <div className="font-medium">{device.memo }</div>
+                  <div className="text-xs text-gray-400">IMEI:{device.imei}</div>
+                  <div className="text-xs text-gray-400">微信号:{device.wechatId || "--"}（{device.nickname || "--"}）</div>
+                  <div className={`text-xs ${device.alive === 1 ? "text-green-600" : "text-gray-400"}`}>{device.alive === 1 ? "在线" : "离线"}</div>
+                </div>
+              </div>
+              <Checkbox
+                checked={selectedDeviceIds.includes(device.id)}
+                onCheckedChange={() => toggleDevice(device.id)}
+              />
+            </div>
+          ))
+        }
       </div>
-
-      <Tabs defaultValue="devices" className="w-full">
-        <TabsList className="grid w-full grid-cols-2 mb-4">
-          <TabsTrigger value="devices">设备选择</TabsTrigger>
-          <TabsTrigger value="customerService">客服选择</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="devices" className="space-y-4">
-          <div className="grid grid-cols-1 gap-3">
-            {filteredDevices.map((device) => (
-              <Card
-                key={device.id}
-                className={`cursor-pointer border ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
-              >
-                <CardContent className="p-3 flex items-center justify-between">
-                  <div className="flex items-center space-x-3">
-                    <Avatar>
-                      <div
-                        className={`w-full h-full flex items-center justify-center ${device.status === "online" ? "bg-green-100" : "bg-gray-100"}`}
-                      >
-                        <span className={`text-sm ${device.status === "online" ? "text-green-600" : "text-gray-600"}`}>
-                          {device.name.substring(0, 1)}
-                        </span>
-                      </div>
-                    </Avatar>
-                    <div>
-                      <p className="font-medium">{device.name}</p>
-                      <p className={`text-xs ${device.status === "online" ? "text-green-600" : "text-gray-500"}`}>
-                        {device.status === "online" ? "在线" : "离线"}
-                      </p>
-                    </div>
-                  </div>
-                  <Checkbox
-                    checked={selectedDevices.includes(device.id)}
-                    onCheckedChange={() => toggleDevice(device.id)}
-                  />
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </TabsContent>
-
-        <TabsContent value="customerService" className="space-y-4">
-          <div className="grid grid-cols-1 gap-3">
-            {filteredCustomerServices.map((cs) => (
-              <Card
-                key={cs.id}
-                className={`cursor-pointer border ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
-              >
-                <CardContent className="p-3 flex items-center justify-between">
-                  <div className="flex items-center space-x-3">
-                    <Avatar>
-                      <div
-                        className={`w-full h-full flex items-center justify-center ${cs.status === "online" ? "bg-green-100" : "bg-gray-100"}`}
-                      >
-                        <span className={`text-sm ${cs.status === "online" ? "text-green-600" : "text-gray-600"}`}>
-                          {cs.name.substring(0, 1)}
-                        </span>
-                      </div>
-                    </Avatar>
-                    <div>
-                      <p className="font-medium">{cs.name}</p>
-                      <p className={`text-xs ${cs.status === "online" ? "text-green-600" : "text-gray-500"}`}>
-                        {cs.status === "online" ? "在线" : "离线"}
-                      </p>
-                    </div>
-                  </div>
-                  <Checkbox
-                    checked={selectedCustomerServices.includes(cs.id)}
-                    onCheckedChange={() => toggleCustomerService(cs.id)}
-                  />
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </TabsContent>
-      </Tabs>
-
       <div className="mt-8 flex justify-between">
-        <Button variant="outline" onClick={onBack}>
-          ← 上一步
-        </Button>
-        <Button onClick={handleSubmit} disabled={selectedDevices.length === 0 && selectedCustomerServices.length === 0}>
-          下一步 →
-        </Button>
+        <Button variant="outline" onClick={onBack}>← 上一步</Button>
+        <Button onClick={handleSubmit} disabled={selectedDeviceIds.length === 0}>下一步 →</Button>
       </div>
     </div>
   )

Cunkebao/app/workspace/traffic-distribution/new/components/traffic-pool-step.tsx

@@ -53,7 +53,7 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:
       await new Promise((resolve) => setTimeout(resolve, 1000)) // 模拟API请求
 
       onSubmit({
-        selectedPools,
+        poolIds: selectedPools,
         // 可以添加其他需要提交的数据
       })
     } catch (error) {

Cunkebao/app/workspace/traffic-distribution/new/page.tsx

@@ -9,15 +9,61 @@ import StepIndicator from "./components/step-indicator"
 import BasicInfoStep from "./components/basic-info-step"
 import TargetSettingsStep from "./components/target-settings-step"
 import TrafficPoolStep from "./components/traffic-pool-step"
+import { api } from "@/lib/api"
+import { showToast } from "@/lib/toast"
+
+interface FormData {
+  basicInfo: {
+    name: string
+    source?: string
+    sourceIcon?: string
+    description?: string
+    distributeType: number
+    maxPerDay: number
+    timeType: number
+    startTime: string
+    endTime: string
+  }
+  targetSettings: {
+    targetGroups: string[]
+    targets: string[]
+  }
+  trafficPool: {
+    deviceIds: number[]
+    poolIds: number[]
+  }
+}
+
+interface ApiResponse {
+  code: number
+  msg: string
+  data: any
+}
 
 export default function NewTrafficDistribution() {
   const router = useRouter()
   const { toast } = useToast()
   const [currentStep, setCurrentStep] = useState(0)
-  const [formData, setFormData] = useState({
-    basicInfo: {},
-    targetSettings: {},
-    trafficPool: {},
+  const [formData, setFormData] = useState<FormData>({
+    basicInfo: {
+      name: "",
+      distributeType: 1,
+      maxPerDay: 100,
+      timeType: 2,
+      startTime: "08:00",
+      endTime: "22:00",
+      source: "",
+      sourceIcon: "",
+      description: "",
+    },
+    targetSettings: {
+      targetGroups: [],
+      targets: [],
+    },
+    trafficPool: {
+      deviceIds: [],
+      poolIds: [],
+    },
   })
 
   const steps = [
@@ -26,12 +72,12 @@ export default function NewTrafficDistribution() {
     { id: 3, title: "流量池选择", icon: <Database className="h-6 w-6" /> },
   ]
 
-  const handleBasicInfoNext = (data: any) => {
+  const handleBasicInfoNext = (data: FormData["basicInfo"]) => {
     setFormData((prev) => ({ ...prev, basicInfo: data }))
     setCurrentStep(1)
   }
 
-  const handleTargetSettingsNext = (data: any) => {
+  const handleTargetSettingsNext = (data: FormData["targetSettings"]) => {
     setFormData((prev) => ({ ...prev, targetSettings: data }))
     setCurrentStep(2)
   }
@@ -44,30 +90,43 @@ export default function NewTrafficDistribution() {
     setCurrentStep(1)
   }
 
-  const handleSubmit = async (data: any) => {
+  const handleSubmit = async (data: FormData["trafficPool"]) => {
     const finalData = {
       ...formData,
       trafficPool: data,
     }
 
+    const loadingToast = showToast("正在创建分发计划...", "loading", true);
     try {
-      // 这里可以添加实际的API调用
-      console.log("提交的数据:", finalData)
-
-      toast({
-        title: "创建成功",
-        description: "流量分发规则已成功创建",
+      const response = await api.post<ApiResponse>('/v1/workbench/create', {
+        type: 2, // 2表示流量分发任务
+        name: finalData.basicInfo.name,
+        source: finalData.basicInfo.source,
+        sourceIcon: finalData.basicInfo.sourceIcon,
+        description: finalData.basicInfo.description,
+        distributeType: finalData.basicInfo.distributeType,
+        maxPerDay: finalData.basicInfo.maxPerDay,
+        timeType: finalData.basicInfo.timeType,
+        startTime: finalData.basicInfo.startTime,
+        endTime: finalData.basicInfo.endTime,
+        targetGroups: finalData.targetSettings.targetGroups,
+        targets: finalData.targetSettings.targets,
+        pools: finalData.trafficPool.poolIds,
+        enabled: true, // 默认启用
       })
 
-      // 跳转到列表页
-      router.push("/workspace/traffic-distribution")
-    } catch (error) {
-      console.error("提交失败:", error)
-      toast({
-        title: "创建失败",
-        description: "请稍后重试",
-        variant: "destructive",
-      })
+      if (response.code === 200) {
+        loadingToast.remove();
+        showToast(response.msg || "创建成功", "success")
+        router.push("/workspace/traffic-distribution")
+      } else {
+        loadingToast.remove();
+        showToast(response.msg || "创建失败，请稍后重试", "error")
+      }
+    } catch (error: any) {
+      console.error("创建分发计划失败:", error)
+      loadingToast.remove();
+      showToast(error?.message || "请检查网络连接", "error")
     }
   }
 

Cunkebao/app/workspace/traffic-distribution/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import {
   ChevronLeft,
@@ -15,13 +15,19 @@ import {
   Users,
   Database,
   Clock,
+  Search,
+  Filter,
+  RefreshCw,
 } from "lucide-react"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import Link from "next/link"
 import BottomNav from "@/app/components/BottomNav"
+import { api } from "@/lib/api"
+import { showToast } from "@/lib/toast"
 
 interface DistributionPlan {
   id: string
@@ -39,61 +45,86 @@ interface DistributionPlan {
   creator: string
 }
 
+interface ApiResponse {
+  code: number
+  msg: string
+  data: {
+    list: DistributionPlan[]
+    total: number
+  }
+}
+
 export default function TrafficDistributionPage() {
   const router = useRouter()
-  const [plans, setPlans] = useState<DistributionPlan[]>([
-    {
-      id: "1",
-      name: "抖音直播引流计划",
-      status: "active",
-      source: "douyin",
-      sourceIcon: "🎬",
-      targetGroups: ["新客户", "潜在客户"],
-      totalUsers: 1250,
-      dailyAverage: 85,
-      deviceCount: 3,
-      poolCount: 2,
-      lastUpdated: "2024-03-18 10:30:00",
-      createTime: "2024-03-10 08:30:00",
-      creator: "admin",
-    },
-    {
-      id: "2",
-      name: "小红书种草计划",
-      status: "active",
-      source: "xiaohongshu",
-      sourceIcon: "📱",
-      targetGroups: ["女性用户", "美妆爱好者"],
-      totalUsers: 980,
-      dailyAverage: 65,
-      deviceCount: 2,
-      poolCount: 1,
-      lastUpdated: "2024-03-17 14:20:00",
-      createTime: "2024-03-12 09:15:00",
-      creator: "marketing",
-    },
-    {
-      id: "3",
-      name: "微信社群活动",
-      status: "paused",
-      source: "wechat",
-      sourceIcon: "💬",
-      targetGroups: ["老客户", "会员"],
-      totalUsers: 2340,
-      dailyAverage: 0,
-      deviceCount: 5,
-      poolCount: 3,
-      lastUpdated: "2024-03-15 09:45:00",
-      createTime: "2024-02-28 11:20:00",
-      creator: "social",
-    },
-  ])
+  const [loading, setLoading] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [plans, setPlans] = useState<DistributionPlan[]>([])
+  const [currentPage, setCurrentPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const pageSize = 10
 
-  // 直接使用plans而不是filteredPlans
-  const plansList = plans
+  // 加载分发计划数据
+  const fetchPlans = async (page: number, searchTerm?: string) => {
+    const loadingToast = showToast("正在加载分发计划...", "loading", true);
+    try {
+      setLoading(true)
+      const queryParams = new URLSearchParams({
+        page: page.toString(),
+        limit: pageSize.toString()
+      })
+      
+      if (searchTerm) {
+        queryParams.append('keyword', searchTerm)
+      }
+      
+      const response = await api.get<ApiResponse>(`/v1/traffic-distribution/list?${queryParams.toString()}`)
+      
+      if (response.code === 200) {
+        setPlans(response.data.list)
+        setTotal(response.data.total)
+      } else {
+        showToast(response.msg || "获取分发计划失败", "error")
+      }
+    } catch (error: any) {
+      console.error("获取分发计划失败:", error)
+      showToast(error?.message || "请检查网络连接", "error")
+    } finally {
+      loadingToast.remove();
+      setLoading(false)
+    }
+  }
 
-  const handleDelete = (planId: string) => {
-    setPlans(plans.filter((plan) => plan.id !== planId))
+  useEffect(() => {
+    fetchPlans(currentPage, searchTerm)
+  }, [currentPage])
+
+  const handleSearch = () => {
+    setCurrentPage(1)
+    fetchPlans(1, searchTerm)
+  }
+
+  const handleRefresh = () => {
+    fetchPlans(currentPage, searchTerm)
+  }
+
+  const handleDelete = async (planId: string) => {
+    const loadingToast = showToast("正在删除计划...", "loading", true);
+    try {
+      const response = await api.delete<ApiResponse>(`/v1/traffic-distribution/delete?id=${planId}`)
+
+      if (response.code === 200) {
+        loadingToast.remove();
+        fetchPlans(currentPage, searchTerm)
+        showToast(response.msg || "已成功删除分发计划", "success")
+      } else {
+        loadingToast.remove();
+        showToast(response.msg || "请稍后再试", "error")
+      }
+    } catch (error: any) {
+      console.error("删除计划失败:", error)
+      loadingToast.remove();
+      showToast(error?.message || "请检查网络连接", "error")
+    }
   }
 
   const handleEdit = (planId: string) => {
@@ -104,12 +135,33 @@ export default function TrafficDistributionPage() {
     router.push(`/workspace/traffic-distribution/${planId}`)
   }
 
-  const togglePlanStatus = (planId: string) => {
-    setPlans(
-      plans.map((plan) =>
-        plan.id === planId ? { ...plan, status: plan.status === "active" ? "paused" : "active" } : plan,
-      ),
-    )
+  const togglePlanStatus = async (planId: string, currentStatus: "active" | "paused") => {
+    const loadingToast = showToast("正在更新计划状态...", "loading", true);
+    try {
+      const response = await api.post<ApiResponse>('/v1/traffic-distribution/update-status', {
+        id: planId,
+        status: currentStatus === "active" ? "paused" : "active"
+      })
+
+      if (response.code === 200) {
+        setPlans(plans.map(plan => 
+          plan.id === planId 
+            ? { ...plan, status: currentStatus === "active" ? "paused" : "active" }
+            : plan
+        ))
+        
+        const newStatus = currentStatus === "active" ? "paused" : "active"
+        loadingToast.remove();
+        showToast(response.msg || `计划${newStatus === "active" ? "已启动" : "已暂停"}`, "success")
+      } else {
+        loadingToast.remove();
+        showToast(response.msg || "请稍后再试", "error")
+      }
+    } catch (error: any) {
+      console.error("更新计划状态失败:", error)
+      loadingToast.remove();
+      showToast(error?.message || "请检查网络连接", "error")
+    }
   }
 
   return (
@@ -132,7 +184,40 @@ export default function TrafficDistributionPage() {
       </header>
 
       <div className="p-4">
-        {plansList.length === 0 ? (
+        <Card className="p-4 mb-4">
+          <div className="flex items-center space-x-2">
+            <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)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+              />
+            </div>
+            <Button variant="outline" size="icon" onClick={handleSearch}>
+              <Filter className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
+              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+            </Button>
+          </div>
+        </Card>
+
+        {loading ? (
+          <div className="space-y-4">
+            {[...Array(3)].map((_, index) => (
+              <Card key={index} className="p-4 animate-pulse">
+                <div className="h-6 bg-gray-200 rounded w-1/4 mb-4"></div>
+                <div className="space-y-3">
+                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                  <div className="h-4 bg-gray-200 rounded w-1/2"></div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : plans.length === 0 ? (
           <div className="text-center py-12 bg-white rounded-lg border mt-4">
             <div className="text-gray-500">暂无数据</div>
             <Button
@@ -145,7 +230,7 @@ export default function TrafficDistributionPage() {
           </div>
         ) : (
           <div className="space-y-4 mt-2">
-            {plansList.map((plan) => (
+            {plans.map((plan) => (
               <Card key={plan.id} className="overflow-hidden">
                 {/* 卡片头部 */}
                 <div className="p-4 bg-white border-b flex items-center justify-between">
@@ -181,7 +266,7 @@ export default function TrafficDistributionPage() {
                         <Edit className="mr-2 h-4 w-4" />
                         编辑计划
                       </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => togglePlanStatus(plan.id)}>
+                      <DropdownMenuItem onClick={() => togglePlanStatus(plan.id, plan.status)}>
                         {plan.status === "active" ? (
                           <>
                             <Pause className="mr-2 h-4 w-4" />
@@ -244,6 +329,32 @@ export default function TrafficDistributionPage() {
             ))}
           </div>
         )}
+
+        {/* 分页 */}
+        {!loading && total > pageSize && (
+          <div className="flex justify-center mt-6 space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+              disabled={currentPage === 1 || loading}
+            >
+              上一页
+            </Button>
+            <div className="flex items-center space-x-1">
+              <span className="text-sm text-gray-500">第 {currentPage} 页</span>
+              <span className="text-sm text-gray-500">共 {Math.ceil(total / pageSize)} 页</span>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(prev => Math.min(Math.ceil(total / pageSize), prev + 1))}
+              disabled={currentPage >= Math.ceil(total / pageSize) || loading}
+            >
+              下一页
+            </Button>
+          </div>
+        )}
       </div>
       <BottomNav />
     </div>