【操盘手】 流量分发添加页面及功能优化

Cunkebao/app/content/[id]/materials/new/page.tsx

@@ -106,7 +106,7 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
       const response = await api.post<ApiResponse>('/v1/content/library/create-item', payload)
       if (response.code === 200) {
         showToast("创建成功", "success")
-        router.push(`/content/${params.id}/materials`)
+      router.push(`/content/${params.id}/materials`)
       } else {
         showToast(response.msg || "创建失败", "error")
       }
@@ -152,7 +152,7 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
                   <CalendarDays className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
                 </div>
               </div>
-              <div>
+            <div>
                 <Label className="font-bold flex items-center mb-2">
                   <span className="text-red-500 mr-1">*</span>类型
                 </Label>
@@ -252,7 +252,7 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
                     <Label htmlFor="url" className="font-bold flex items-center mb-2">
                       <span className="text-red-500 mr-1">*</span>链接地址
                     </Label>
-                    <Input
+                <Input
                       id="url"
                       value={url}
                       onChange={(e) => setUrl(e.target.value)}
@@ -286,7 +286,7 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
                             <span className="text-sm text-gray-500">上传视频</span>
                           </>
                         )}
-                      </Button>
+                </Button>
                       {videoUrl && (
                         <Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setVideoUrl("")}>删除</Button>
                       )}
@@ -329,19 +329,19 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
                                   className="object-cover"
                                 />
                               </div>
-                              <Button
-                                type="button"
+                    <Button
+                      type="button"
                                 variant="destructive"
-                                size="sm"
+                      size="sm"
                                 className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0 rounded-full"
                                 onClick={() => handleRemoveImage(index)}
-                              >
-                                <X className="h-3 w-3" />
-                              </Button>
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
                             </div>
-                          ))}
-                        </div>
-                      </div>
+                ))}
+              </div>
+            </div>
                     )}
                   </>
                 )}

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

@@ -40,13 +40,11 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
   const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
   const [statusFilter, setStatusFilter] = useState("all")
 
-  // 每次弹窗打开时，同步主表单的 devices（转为字符串数组）
+  // 每次 initialData.devices 变化时，同步 selectedDeviceIds
   useEffect(() => {
-    if (deviceDialogOpen) {
-      const ids = Array.isArray(initialData.devices) ? initialData.devices.map(String) : [];
-      setSelectedDeviceIds(ids);
-    }
-  }, [deviceDialogOpen, initialData.devices])
+    const ids = Array.isArray(initialData.devices) ? initialData.devices.map(String) : [];
+    setSelectedDeviceIds(ids);
+  }, [initialData.devices])
 
   useEffect(() => {
     setLoading(true)
@@ -66,7 +64,7 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
   })
 
   const handleSubmit = () => {
-    onNext({ devices: Array.isArray(initialData.devices) ? initialData.devices : [] })
+    onNext({ devices: selectedDeviceIds })
   }
 
   // 弹窗内确认选择
@@ -85,7 +83,7 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
           <Input
             placeholder="选择设备"
-            value={Array.isArray(initialData.devices) && initialData.devices.length > 0 ? `已选择${initialData.devices.length}个设备` : ''}
+            value={selectedDeviceIds.length > 0 ? `已选择${selectedDeviceIds.length}个设备` : ''}
             readOnly
             className="pl-10 cursor-pointer"
             onClick={() => setDeviceDialogOpen(true)}
@@ -93,10 +91,10 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
         </div>
       </div>
       <div className="space-y-3 mt-4 max-h-80 overflow-y-auto">
-        {Array.isArray(initialData.devices) && initialData.devices.length === 0 ? (
+        {selectedDeviceIds.length === 0 ? (
           <div className="text-gray-400">未选择设备</div>
         ) : (
-          <div className="text-base text-gray-500">已选设备：{Array.isArray(initialData.devices) ? initialData.devices.length : 0} 个</div>
+          <div className="text-base text-gray-500">已选设备：{selectedDeviceIds.length} 个</div>
         )}
       </div>
       <div className="mt-8 flex justify-between">

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

@@ -27,6 +27,7 @@ interface FormData {
   targetSettings: {
     targetGroups: string[]
     targets: string[]
+    devices?: string[]
   }
   trafficPool: {
     deviceIds: number[]
@@ -65,6 +66,7 @@ export default function NewTrafficDistribution() {
       poolIds: [],
     },
   })
+  const [devices, setDevices] = useState<string[]>([])
 
   const steps = [
     { id: 1, title: "基本信息", icon: <Plus className="h-6 w-6" /> },
@@ -78,7 +80,8 @@ export default function NewTrafficDistribution() {
   }
 
   const handleTargetSettingsNext = (data: FormData["targetSettings"]) => {
-    setFormData((prev) => ({ ...prev, targetSettings: data }))
+    setFormData((prev) => ({ ...prev, targetSettings: { ...data } }))
+    setDevices(data.devices || [])
     setCurrentStep(2)
   }
 
@@ -154,11 +157,17 @@ export default function NewTrafficDistribution() {
             onNext={handleTargetSettingsNext}
             onBack={handleTargetSettingsBack}
             initialData={formData.targetSettings}
+            setDevices={setDevices}
           />
         )}
 
         {currentStep === 2 && (
-          <TrafficPoolStep onSubmit={handleSubmit} onBack={handleTrafficPoolBack} initialData={formData.trafficPool} />
+          <TrafficPoolStep
+            onSubmit={handleSubmit}
+            onBack={handleTrafficPoolBack}
+            initialData={formData.trafficPool}
+            devices={devices}
+          />
         )}
       </div>
     </div>