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

api接入了

nkebao/src/pages/workspace/traffic-distribution/NewDistribution.tsx

@@ -19,6 +19,7 @@ import DeviceSelection from '@/components/DeviceSelection';
 import { useToast } from '@/components/ui/toast';
 import { fetchAccountList, Account } from '@/api/trafficDistribution';
 import '@/components/Layout.css';
+import TrafficPoolSelection from '@/components/TrafficPoolSelection';
 
 interface BasicInfoData {
   name: string;
@@ -585,30 +586,8 @@ export default function NewDistribution() {
   // 流量池选择步骤组件
   const TrafficPoolStep = ({ onSubmit, onBack, initialData = {} }: { onSubmit: (data: TrafficPoolData) => void; onBack: () => void; initialData?: Partial<TrafficPoolData> }) => {
     const [selectedPools, setSelectedPools] = useState<string[]>(initialData.selectedPools || []);
-    const [searchTerm, setSearchTerm] = useState("");
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    // 模拟流量池数据
-    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.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        pool.description.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    const togglePool = (id: string) => {
-      setSelectedPools(prev => 
-        prev.includes(id) ? prev.filter(poolId => poolId !== id) : [...prev, id]
-      );
-    };
-
     const handleSubmit = async () => {
       if (selectedPools.length === 0) {
         toast({
@@ -635,56 +614,27 @@ export default function NewDistribution() {
       }
     };
 
+    // 从formData中获取选中的设备ID
+    const deviceIds = formData.targetSettings?.selectedDevices || [];
+
     return (
       <div className="bg-white rounded-lg p-6">
         <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 h-12"
-            />
-          </div>
-        </div>
-
-        <div className="space-y-3 mt-4">
-          {filteredPools.map(pool => (
-            <div 
-              key={pool.id}
-              className={`cursor-pointer border rounded-lg ${selectedPools.includes(pool.id) ? "border-blue-500 bg-blue-50" : "border-gray-200"}`}
-              onClick={() => togglePool(pool.id)}
-            >
-              <div 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-medium">{pool.name}</p>
-                    <p className="text-sm text-gray-500">{pool.description}</p>
-                  </div>
-                </div>
-                <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)}
-                  />
-                </div>
-              </div>
-            </div>
-          ))}
+        
+        <div className="mb-6">
+          <TrafficPoolSelection
+            selectedPools={selectedPools}
+            onSelect={setSelectedPools}
+            deviceIds={deviceIds}
+            placeholder="选择流量池"
+          />
         </div>
 
         <div className="mt-8 flex justify-between">
           <Button variant="outline" onClick={onBack}>
             ← 上一步
           </Button>
-          <Button onClick={handleSubmit} disabled={isSubmitting}>
+          <Button onClick={handleSubmit} disabled={isSubmitting || selectedPools.length === 0}>
             {isSubmitting ? "提交中..." : "完成"}
           </Button>
         </div>