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

场景获客列表搞定

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

@@ -1,86 +1,34 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { Slider } from "@/components/ui/slider"
 import { format } from "date-fns"
-import { Search, Users } from "lucide-react"
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
-import { api } from "@/lib/api"
-
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://yishi.com'
 
 interface BasicInfoStepProps {
   onNext: (data: any) => void
-  initialData?: {
-    name?: string
-    distributeType?: string | number
-    maxPerDay?: number
-    timeType?: string | number
-    startTime?: string
-    endTime?: string
-    accounts?: string[]
-    account?: string[]
-  }
+  initialData?: any
 }
 
 export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
   const [formData, setFormData] = useState({
-    name: initialData.name ?? `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
-    distributeType: String(initialData.distributeType ?? "1"),
-    maxPerDay: initialData.maxPerDay ?? 200,
-    timeType: String(initialData.timeType ?? "2"),
-    startTime: initialData.startTime ?? "09:00",
-    endTime: initialData.endTime ?? "18:00",
+    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",
   })
 
-  // 账号选择相关状态
-  const [accountDialogOpen, setAccountDialogOpen] = useState(false)
-  const [accountList, setAccountList] = useState<any[]>([])
-  const [selectedAccountIds, setSelectedAccountIds] = useState<string[]>(
-    (initialData.account || initialData.accounts || []).map(String)
-  )
-  const [accountPage, setAccountPage] = useState(1)
-  const [accountTotal, setAccountTotal] = useState(0)
-  const [accountLoading, setAccountLoading] = useState(false)
-
-  // API配置弹窗状态
-  const [apiDialogOpen, setApiDialogOpen] = useState(false)
-  const [apiKey] = useState("naxf1-82h2f-vdwcm-rrhpm-q9hd1") // 这里可以从后端获取或生成
-  const [apiUrl] = useState(`${API_BASE_URL}/v1/plan/api/scenariosz`)
-
-  // 拉取账号列表
-  useEffect(() => {
-    setAccountLoading(true)
-    api.get(`/v1/workbench/account-list?page=${accountPage}&size=10`).then((res: any) => {
-      setAccountList(res.data?.list || [])
-      setAccountTotal(res.data?.total || 0)
-    }).finally(() => setAccountLoading(false))
-  }, [accountPage])
-
   const handleChange = (field: string, value: any) => {
     setFormData((prev) => ({ ...prev, [field]: value }))
   }
 
   const handleSubmit = () => {
-    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",
-      account: selectedAccountIds,
-      accounts: selectedAccountIds,
-    })
-  }
-
-  // 账号弹窗确认
-  const handleAccountDialogConfirm = () => {
-    setAccountDialogOpen(false)
+    onNext(formData)
   }
 
   return (
@@ -104,16 +52,28 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
         <div className="space-y-2">
           <Label>分配方式</Label>
           <RadioGroup
-            value={String(formData.distributeType)}
-            onValueChange={(value) => handleChange("distributeType", value)}
+            value={formData.distributionMethod}
+            onValueChange={(value) => handleChange("distributionMethod", value)}
             className="space-y-2"
           >
             <div className="flex items-center space-x-2">
-              <RadioGroupItem value="1" id="equal" />
+              <RadioGroupItem value="equal" 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" />
+              <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" />
+              <Label htmlFor="ratio" className="cursor-pointer">
+                比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
+              </Label>
+            </div>
           </RadioGroup>
         </div>
 
@@ -123,41 +83,41 @@ 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.maxPerDay} 人/天</span>
+              <span className="font-medium">{formData.dailyLimit} 人/天</span>
             </div>
             <Slider
-              value={[formData.maxPerDay]}
+              value={[formData.dailyLimit]}
               min={1}
-              max={1000}
+              max={200}
               step={1}
-              onValueChange={(value) => handleChange("maxPerDay", value[0])}
+              onValueChange={(value) => handleChange("dailyLimit", value[0])}
               className="py-4"
             />
-            <p className="text-sm text-gray-500">限制每天最多分配的流量数量（1-1000）</p>
+            <p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
           </div>
 
           <div className="space-y-4 pt-4">
             <Label>时间限制</Label>
             <RadioGroup
-              value={String(formData.timeType)}
-              onValueChange={(value) => handleChange("timeType", value)}
+              value={formData.timeRestriction}
+              onValueChange={(value) => handleChange("timeRestriction", value)}
               className="space-y-4"
             >
               <div className="flex items-center space-x-2">
-                <RadioGroupItem value="1" id="allDay" />
+                <RadioGroupItem value="allDay" id="allDay" />
                 <Label htmlFor="allDay" className="cursor-pointer">
                   全天分配
                 </Label>
               </div>
               <div className="flex items-center space-x-2">
-                <RadioGroupItem value="2" id="custom" />
+                <RadioGroupItem value="custom" id="custom" />
                 <Label htmlFor="custom" className="cursor-pointer">
                   自定义时间段
                 </Label>
               </div>
             </RadioGroup>
 
-            {formData.timeType == "2" && (
+            {formData.timeRestriction === "custom" && (
               <div className="grid grid-cols-2 gap-4 pt-2">
                 <div>
                   <Label htmlFor="startTime" className="mb-2 block">
@@ -189,91 +149,13 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
             )}
           </div>
         </div>
-
-        {/* 账号选择 */}
-        <div className="space-y-2">
-          <Label>选择账号 <span className="text-red-500 ml-1">*</span></Label>
-          <div className="relative w-full">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-            <Input
-              placeholder="选择账号"
-              value={selectedAccountIds.length > 0 ? `已选择${selectedAccountIds.length}个账号` : ''}
-              readOnly
-              className="pl-10 cursor-pointer"
-              onClick={() => setAccountDialogOpen(true)}
-            />
-          </div>
-          <div className="flex items-center gap-2 text-sm text-gray-500">
-            <Users className="w-4 h-4 text-blue-500" />
-            <span>已选账号：</span>
-            {selectedAccountIds.length === 0 ? (
-              <span className="text-gray-400">未选择</span>
-            ) : (
-              <span className="bg-blue-50 text-blue-600 rounded px-2 py-0.5 font-semibold">{selectedAccountIds.length} 个</span>
-            )}
-          </div>
-        </div>
       </div>
 
       <div className="mt-8 flex justify-end">
-        <Button onClick={handleSubmit} disabled={selectedAccountIds.length === 0} className="px-8">
+        <Button onClick={handleSubmit} className="px-8">
           下一步 →
         </Button>
       </div>
-
-      {/* 账号选择弹窗 */}
-      <Dialog open={accountDialogOpen} onOpenChange={setAccountDialogOpen}>
-        <DialogContent className="max-w-xl w-full p-0 rounded-2xl shadow-2xl max-h-[80vh]">
-          <DialogTitle className="text-lg font-bold text-center py-3 border-b">选择账号</DialogTitle>
-          <div className="p-6 pt-4">
-            {/* 账号列表 */}
-            <div className="max-h-[500px] overflow-y-auto space-y-2">
-              {accountLoading ? (
-                <div className="text-center text-gray-400 py-8">加载中...</div>
-              ) : accountList.length === 0 ? (
-                <div className="text-center text-gray-400 py-8">暂无账号</div>
-              ) : (
-                accountList.map(account => (
-                  <label
-                    key={account.id}
-                    className={`
-                      flex items-center gap-3 p-4 rounded-xl border
-                      ${selectedAccountIds.includes(String(account.id)) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
-                      hover:border-blue-400 transition-colors cursor-pointer
-                    `}
-                  >
-                    <input
-                      type="checkbox"
-                      className="accent-blue-500 scale-110"
-                      checked={selectedAccountIds.includes(String(account.id))}
-                      onChange={() => {
-                        setSelectedAccountIds(prev =>
-                          prev.includes(String(account.id))
-                            ? prev.filter(id => id !== String(account.id))
-                            : [...prev, String(account.id)]
-                        )
-                      }}
-                    />
-                    <div className="flex-1">
-                      <div className="font-semibold text-base">{account.realName || account.nickname}</div>
-                      <div className="text-xs text-gray-500">账号: {account.userName || '--'}</div>
-                    </div>
-                  </label>
-                ))
-              )}
-            </div>
-            {/* 确认按钮 */}
-            <div className="flex justify-center mt-8">
-              <Button
-                className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
-                onClick={handleAccountDialogConfirm}
-              >
-                确认
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
     </div>
   )
 }

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

@@ -1,16 +1,13 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Avatar } from "@/components/ui/avatar"
-import { Search, Smartphone } from "lucide-react"
+import { Search } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { api } from "@/lib/api"
-import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 
 interface Device {
   id: string
@@ -19,165 +16,165 @@ interface Device {
   avatar?: string
 }
 
+interface CustomerService {
+  id: string
+  name: string
+  status: "online" | "offline"
+  avatar?: string
+}
+
 interface TargetSettingsStepProps {
   onNext: (data: any) => void
   onBack: () => void
   initialData?: any
 }
 
-export default function TargetSettingsStep({ onNext, onBack, initialData = {}, setDevices }: TargetSettingsStepProps & { setDevices: (ids: string[]) => void }) {
-  const [deviceList, setDeviceList] = useState<any[]>([])
-  const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([])
-  const [search, setSearch] = useState("")
-  const [loading, setLoading] = useState(false)
-  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
-  const [statusFilter, setStatusFilter] = useState("all")
+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("")
 
-  // 每次 initialData.devices 变化时，同步 selectedDeviceIds
-  useEffect(() => {
-    const ids = Array.isArray(initialData.devices) ? initialData.devices.map(String) : [];
-    setSelectedDeviceIds(ids);
-  }, [initialData.devices])
+  // 模拟设备数据
+  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: any) => {
-      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 = deviceList.filter(device => {
-    const matchesSearch =
-      search === "" ||
-      (device.memo || device.nickname || "").toLowerCase().includes(search.toLowerCase()) ||
-      (device.imei || "").toLowerCase().includes(search.toLowerCase()) ||
-      (device.wechatId || "").toLowerCase().includes(search.toLowerCase())
-    const matchesStatus = statusFilter === "all" || (statusFilter === "online" ? device.alive === 1 : device.alive !== 1)
-    return matchesSearch && matchesStatus
-  })
+  const filteredDevices = devices.filter((device) => device.name.toLowerCase().includes(searchTerm.toLowerCase()))
 
-  const handleSubmit = () => {
-    onNext({ devices: selectedDeviceIds })
+  const filteredCustomerServices = customerServices.filter((cs) =>
+    cs.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+
+  const toggleDevice = (id: string) => {
+    setSelectedDevices((prev) => (prev.includes(id) ? prev.filter((deviceId) => deviceId !== id) : [...prev, id]))
   }
 
-  // 弹窗内确认选择
-  const handleDialogConfirm = () => {
-    if (typeof setDevices === 'function') {
-      setDevices(selectedDeviceIds)
-    }
-    setDeviceDialogOpen(false)
+  const toggleCustomerService = (id: string) => {
+    setSelectedCustomerServices((prev) => (prev.includes(id) ? prev.filter((csId) => csId !== id) : [...prev, id]))
+  }
+
+  const handleSubmit = () => {
+    onNext({
+      selectedDevices,
+      selectedCustomerServices,
+    })
   }
 
   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 w-full">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
           <Input
-            placeholder="选择设备"
-            value={selectedDeviceIds.length > 0 ? `已选择${selectedDeviceIds.length}个设备` : ''}
-            readOnly
-            className="pl-10 cursor-pointer"
-            onClick={() => setDeviceDialogOpen(true)}
+            placeholder="搜索设备或客服"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10"
           />
         </div>
       </div>
-      {/* 已选设备展示优化 */}
-      <div className="flex flex-col gap-2 mb-6">
-        <div className="flex items-center gap-2 text-sm text-gray-500">
-          <Smartphone className="w-4 h-4 text-green-500" />
-          <span>已选设备：</span>
-          {selectedDeviceIds.length === 0 ? (
-            <span className="text-gray-400">未选择</span>
-          ) : (
-            <span className="bg-green-50 text-green-600 rounded px-2 py-0.5 font-semibold">{selectedDeviceIds.length} 个</span>
-          )}
-        </div>
-      </div>
-      <div className="mt-10 flex justify-between">
-        <Button variant="outline" onClick={onBack}>← 上一步</Button>
-        <Button onClick={handleSubmit} disabled={selectedDeviceIds.length === 0} className="px-8 font-bold shadow-md">下一步 →</Button>
-      </div>
-      {/* 设备选择弹窗 */}
-      <Dialog open={deviceDialogOpen} onOpenChange={setDeviceDialogOpen}>
-        <DialogContent className="max-w-xl w-full p-0 rounded-2xl shadow-2xl max-h-[80vh]">
-          <DialogTitle className="text-lg font-bold text-center py-3 border-b">选择设备</DialogTitle>
-          <div className="p-6 pt-4">
-            {/* 搜索和筛选 */}
-            <div className="flex items-center gap-2 mb-4">
-              <Input
-                placeholder="搜索设备IMEI/备注/微信号"
-                value={search}
-                onChange={e => setSearch(e.target.value)}
-                className="flex-1 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
-              />
-              <select
-                className="border rounded-lg px-3 py-2 text-sm bg-gray-50 focus:border-blue-500"
-                value={statusFilter}
-                onChange={e => setStatusFilter(e.target.value)}
+
+      <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"}`}
               >
-                <option value="all">全部状态</option>
-                <option value="online">在线</option>
-                <option value="offline">离线</option>
-              </select>
-            </div>
-            {/* 设备列表 */}
-            <div className="max-h-[500px] overflow-y-auto space-y-2">
-              {loading ? (
-                <div className="text-center text-gray-400 py-8">加载中...</div>
-              ) : filteredDevices.length === 0 ? (
-                <div className="text-center text-gray-400 py-8">暂无设备</div>
-              ) : (
-                filteredDevices.map(device => (
-                  <label
-                    key={device.id}
-                    className={`
-                      flex items-center gap-3 p-4 rounded-xl border
-                      ${selectedDeviceIds.includes(String(device.id)) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
-                      hover:border-blue-400 transition-colors cursor-pointer
-                    `}
-                  >
-                    <input
-                      type="checkbox"
-                      className="accent-blue-500 scale-110"
-                      checked={selectedDeviceIds.includes(String(device.id))}
-                      onChange={() => {
-                        setSelectedDeviceIds(prev =>
-                          prev.includes(String(device.id))
-                            ? prev.filter(id => id !== String(device.id))
-                            : [...prev, String(device.id)]
-                        )
-                      }}
-                    />
-                    <div className="flex-1">
-                      <div className="font-semibold text-base">{device.memo || device.nickname || device.name}</div>
-                      <div className="text-xs text-gray-500">IMEI: {device.imei}</div>
-                      <div className="text-xs text-gray-400">微信号: {device.wechatId || '--'}（{device.nickname || '--'}）</div>
+                <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>
-                    <span className="flex items-center gap-1 text-xs font-medium">
-                      <span className={`w-2 h-2 rounded-full ${device.alive === 1 ? 'bg-green-500' : 'bg-gray-300'}`}></span>
-                      <span className={device.alive === 1 ? 'text-green-600' : 'text-gray-400'}>
-                        {device.alive === 1 ? '在线' : '离线'}
-                      </span>
-                    </span>
-                  </label>
-                ))
-              )}
-            </div>
-            {/* 确认按钮 */}
-            <div className="flex justify-center mt-8">
-              <Button
-                className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
-                onClick={handleDialogConfirm}
-              >
-                确认
-              </Button>
-            </div>
+                  </div>
+                  <Checkbox
+                    checked={selectedDevices.includes(device.id)}
+                    onCheckedChange={() => toggleDevice(device.id)}
+                  />
+                </CardContent>
+              </Card>
+            ))}
           </div>
-        </DialogContent>
-      </Dialog>
+        </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>
+      </div>
     </div>
   )
 }

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

@@ -1,15 +1,12 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Search } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import { Database } from "lucide-react"
-import { api } from "@/lib/api"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 
 interface TrafficPool {
   id: string
@@ -22,82 +19,43 @@ interface TrafficPoolStepProps {
   onSubmit: (data: any) => void
   onBack: () => void
   initialData?: any
-  devices?: string[]
 }
 
-export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, devices = [] }: TrafficPoolStepProps) {
+export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }: TrafficPoolStepProps) {
   const [selectedPools, setSelectedPools] = useState<string[]>(initialData.selectedPools || [])
-  const [searchInput, setSearchInput] = useState("")
   const [searchTerm, setSearchTerm] = useState("")
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const [deviceLabels, setDeviceLabels] = useState<{ label: string; count: number }[]>([])
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [currentPage, setCurrentPage] = useState(1)
-  const pageSize = 10
-  const [total, setTotal] = useState(0)
-  const [loading, setLoading] = useState(false)
-  const filteredPools = deviceLabels.filter(
+
+  // 模拟流量池数据
+  const trafficPools: TrafficPool[] = [
+    { id: "1", name: "新客流量池", count: 1250, description: "新获取的客户流量" },
+    { id: "2", name: "高意向流量池", count: 850, description: "有购买意向的客户" },
+    { id: "3", name: "复购流量池", count: 620, description: "已购买过产品的客户" },
+    { id: "4", name: "活跃流量池", count: 1580, description: "近期活跃的客户" },
+    { id: "5", name: "沉睡流量池", count: 2300, description: "长期未活跃的客户" },
+  ]
+
+  const filteredPools = trafficPools.filter(
     (pool) =>
-      pool.label && pool.label.toLowerCase().includes(searchTerm.toLowerCase())
+      pool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      pool.description.toLowerCase().includes(searchTerm.toLowerCase()),
   )
-  const totalPages = Math.ceil(total / pageSize)
-  const pagedPools = filteredPools.slice((currentPage - 1) * pageSize, currentPage * pageSize)
 
-  // 监听 devices、currentPage、searchTerm 变化，请求标签（后端分页+搜索）
-  useEffect(() => {
-    if (!devices || devices.length === 0) {
-      setDeviceLabels([])
-      setTotal(0)
-      return
-    }
-    const fetchLabels = async () => {
-      setLoading(true)
-      try {
-        const params = devices.join(",")
-        const res = await api.get<{ code: number; msg: string; data: { list: { label: string; count: number }[]; total: number } }>(`/v1/workbench/device-labels?deviceIds=${params}&page=${currentPage}&pageSize=${pageSize}&keyword=${encodeURIComponent(searchTerm)}`)
-        if (res.code === 200 && Array.isArray(res.data?.list)) {
-          setDeviceLabels(res.data.list)
-          setTotal(res.data.total || 0)
-        } else {
-          setDeviceLabels([])
-          setTotal(0)
-        }
-      } catch (e) {
-        setDeviceLabels([])
-        setTotal(0)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchLabels()
-  }, [devices, currentPage, searchTerm])
-
-  // 搜索时重置分页并触发搜索
-  const handleSearch = () => {
-    setCurrentPage(1)
-    setSearchTerm(searchInput)
-  }
-
-  // label 到描述的映射
-  const poolDescMap: Record<string, string> = {
-    "新客流量池": "新获取的客户流量",
-    "高意向流量池": "有购买意向的客户",
-    "复购流量池": "已购买过产品的客户",
-    "活跃流量池": "近期活跃的客户",
-    "沉睡流量池": "长期未活跃的客户",
-  }
-
-  const togglePool = (label: string) => {
-    setSelectedPools((prev) =>
-      prev.includes(label) ? prev.filter((id) => id !== label) : [...prev, label]
-    )
+  const togglePool = (id: string) => {
+    setSelectedPools((prev) => (prev.includes(id) ? prev.filter((poolId) => poolId !== id) : [...prev, id]))
   }
 
   const handleSubmit = async () => {
     setIsSubmitting(true)
+
     try {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      onSubmit({ poolIds: selectedPools })
+      // 这里可以添加实际的提交逻辑
+      await new Promise((resolve) => setTimeout(resolve, 1000)) // 模拟API请求
+
+      onSubmit({
+        selectedPools,
+        // 可以添加其他需要提交的数据
+      })
     } catch (error) {
       console.error("提交失败:", error)
     } finally {
@@ -105,108 +63,57 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
     }
   }
 
-  // 每次弹窗打开时重置分页
-  useEffect(() => { if (dialogOpen) setCurrentPage(1) }, [dialogOpen])
-
   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 w-full">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
           <Input
-            placeholder="选择流量池"
-            value={selectedPools.join(", ")}
-            readOnly
-            className="pl-10 cursor-pointer"
-            onClick={() => setDialogOpen(true)}
+            placeholder="搜索流量池"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10"
           />
         </div>
       </div>
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-w-xl w-full p-0 rounded-2xl shadow-2xl max-h-[80vh]">
-          <DialogTitle className="text-lg font-bold text-center py-3 border-b">选择流量池</DialogTitle>
-          <div className="p-6 pt-4">
-            {/* 搜索栏 */}
-            <div className="relative mb-4 flex gap-2">
-              <div className="flex-1 relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-                <Input
-                  placeholder="搜索流量池"
-                  value={searchInput}
-                  onChange={e => setSearchInput(e.target.value)}
-                  className="pl-10 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
-                />
-              </div>
-              <Button onClick={handleSearch} className="px-4">搜索</Button>
-            </div>
-            {/* 流量池列表 */}
-            <div className="overflow-y-auto max-h-[400px] space-y-3">
-              {loading ? (
-                <div className="text-center text-gray-400 py-8">加载中...</div>
-              ) : filteredPools.length === 0 ? (
-                <div className="text-center text-gray-400 py-8">暂无流量池</div>
-              ) : (
-                filteredPools.map((pool) => (
-                  <div
-                    key={pool.label}
-                    className={
-                      `flex items-center justify-between rounded-xl shadow-sm border transition-colors duration-150 cursor-pointer
-                      ${selectedPools.includes(pool.label) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
-                      hover:border-blue-400`
-                    }
-                    onClick={() => togglePool(pool.label)}
-                  >
-                    <div className="flex items-center space-x-3 p-4 flex-1">
+
+      <div className="space-y-3 mt-4">
+        {filteredPools.map((pool) => (
+          <Card
+            key={pool.id}
+            className={`cursor-pointer border ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
+            onClick={() => togglePool(pool.id)}
+          >
+            <CardContent className="p-4 flex items-center justify-between">
+              <div className="flex items-center space-x-3">
                 <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                   <Database className="h-5 w-5 text-blue-600" />
                 </div>
                 <div>
-                        <p className="font-bold text-base">{pool.label}</p>
-                        <p className="text-sm text-gray-500">{poolDescMap[pool.label] || ""}</p>
+                  <p className="font-medium">{pool.name}</p>
+                  <p className="text-sm text-gray-500">{pool.description}</p>
                 </div>
               </div>
-                    <span className="text-sm text-gray-500 mr-4">{pool.count} 人</span>
-                    <input
-                      type="checkbox"
-                      className="accent-blue-500 scale-125 mr-6"
-                      checked={selectedPools.includes(pool.label)}
-                      onChange={e => {
-                        e.stopPropagation();
-                        togglePool(pool.label);
-                      }}
-                      onClick={e => e.stopPropagation()}
+              <div className="flex items-center space-x-3">
+                <span className="text-sm text-gray-500">{pool.count} 人</span>
+                <Checkbox
+                  checked={selectedPools.includes(pool.id)}
+                  onCheckedChange={() => togglePool(pool.id)}
+                  onClick={(e) => e.stopPropagation()}
                 />
-                  </div>
-                ))
-              )}
-            </div>
-            {/* 分页按钮 */}
-            {totalPages > 1 && (
-              <div className="flex justify-center items-center gap-2 mt-6">
-                <Button size="sm" variant="outline" disabled={currentPage === 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>上一页</Button>
-                <span className="text-sm text-gray-500">第 {currentPage} / {totalPages} 页</span>
-                <Button size="sm" variant="outline" disabled={currentPage === totalPages} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}>下一页</Button>
               </div>
-            )}
-            {/* 确认按钮 */}
-            <div className="flex justify-center mt-8">
-              <Button
-                className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
-                onClick={() => setDialogOpen(false)}
-                disabled={selectedPools.length === 0}
-              >
-                确认
-              </Button>
-            </div>
+            </CardContent>
+          </Card>
+        ))}
       </div>
-        </DialogContent>
-      </Dialog>
+
       <div className="mt-8 flex justify-between">
         <Button variant="outline" onClick={onBack}>
           ← 上一步
         </Button>
-        <Button onClick={handleSubmit}>
+        <Button onClick={handleSubmit} disabled={selectedPools.length === 0 || isSubmitting}>
           {isSubmitting ? "提交中..." : "完成"}
         </Button>
       </div>