【操盘手】 流量分发页面整体优化

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

@@ -0,0 +1,161 @@
+"use client"
+
+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"
+
+interface BasicInfoStepProps {
+  onNext: (data: any) => void
+  initialData?: any
+}
+
+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",
+  })
+
+  const handleChange = (field: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const handleSubmit = () => {
+    onNext(formData)
+  }
+
+  return (
+    <div className="bg-white rounded-lg p-6 shadow-sm">
+      <h2 className="text-xl font-bold mb-6">基本信息</h2>
+
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <Label htmlFor="name" className="flex items-center">
+            计划名称 <span className="text-red-500 ml-1">*</span>
+          </Label>
+          <Input
+            id="name"
+            value={formData.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+            placeholder="请输入计划名称"
+            required
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label>分配方式</Label>
+          <RadioGroup
+            value={formData.distributionMethod}
+            onValueChange={(value) => handleChange("distributionMethod", value)}
+            className="space-y-2"
+          >
+            <div className="flex items-center space-x-2">
+              <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>
+
+        <div className="space-y-4">
+          <Label>分配限制</Label>
+
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <span>每日最大分配量</span>
+              <span className="font-medium">{formData.dailyLimit} 人/天</span>
+            </div>
+            <Slider
+              value={[formData.dailyLimit]}
+              min={1}
+              max={200}
+              step={1}
+              onValueChange={(value) => handleChange("dailyLimit", value[0])}
+              className="py-4"
+            />
+            <p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
+          </div>
+
+          <div className="space-y-4 pt-4">
+            <Label>时间限制</Label>
+            <RadioGroup
+              value={formData.timeRestriction}
+              onValueChange={(value) => handleChange("timeRestriction", value)}
+              className="space-y-4"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="allDay" id="allDay" />
+                <Label htmlFor="allDay" className="cursor-pointer">
+                  全天分配
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="custom" id="custom" />
+                <Label htmlFor="custom" className="cursor-pointer">
+                  自定义时间段
+                </Label>
+              </div>
+            </RadioGroup>
+
+            {formData.timeRestriction === "custom" && (
+              <div className="grid grid-cols-2 gap-4 pt-2">
+                <div>
+                  <Label htmlFor="startTime" className="mb-2 block">
+                    开始时间
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      id="startTime"
+                      type="time"
+                      value={formData.startTime}
+                      onChange={(e) => handleChange("startTime", e.target.value)}
+                    />
+                  </div>
+                </div>
+                <div>
+                  <Label htmlFor="endTime" className="mb-2 block">
+                    结束时间
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      id="endTime"
+                      type="time"
+                      value={formData.endTime}
+                      onChange={(e) => handleChange("endTime", e.target.value)}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8 flex justify-end">
+        <Button onClick={handleSubmit} className="px-8">
+          下一步 →
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+"use client"
+
+import type React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps: {
+    id: number
+    title: string
+    icon: React.ReactNode
+  }[]
+}
+
+export default function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
+  return (
+    <div className="flex justify-between items-center w-full mb-6 px-4">
+      {steps.map((step, index) => (
+        <div key={step.id} className="flex flex-col items-center">
+          <div
+            className={cn(
+              "w-16 h-16 rounded-full flex items-center justify-center mb-2",
+              currentStep === index ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
+            )}
+          >
+            {step.icon}
+          </div>
+          <span className={cn("text-sm", currentStep === index ? "text-blue-500 font-medium" : "text-gray-500")}>
+            {step.title}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,180 @@
+"use client"
+
+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 } from "lucide-react"
+import { Input } from "@/components/ui/input"
+
+interface Device {
+  id: string
+  name: string
+  status: "online" | "offline"
+  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 = {} }: TargetSettingsStepProps) {
+  const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData.selectedDevices || [])
+  const [selectedCustomerServices, setSelectedCustomerServices] = useState<string[]>(
+    initialData.selectedCustomerServices || [],
+  )
+  const [searchTerm, setSearchTerm] = useState("")
+
+  // 模拟设备数据
+  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" },
+  ]
+
+  // 模拟客服数据
+  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 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]))
+  }
+
+  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">
+          <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>
+      </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>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,122 @@
+"use client"
+
+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"
+
+interface TrafficPool {
+  id: string
+  name: string
+  count: number
+  description: string
+}
+
+interface TrafficPoolStepProps {
+  onSubmit: (data: any) => void
+  onBack: () => void
+  initialData?: any
+}
+
+export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }: TrafficPoolStepProps) {
+  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 () => {
+    setIsSubmitting(true)
+
+    try {
+      // 这里可以添加实际的提交逻辑
+      await new Promise((resolve) => setTimeout(resolve, 1000)) // 模拟API请求
+
+      onSubmit({
+        selectedPools,
+        // 可以添加其他需要提交的数据
+      })
+    } catch (error) {
+      console.error("提交失败:", error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  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>
+      </div>
+
+      <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-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)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="mt-8 flex justify-between">
+        <Button variant="outline" onClick={onBack}>
+          ← 上一步
+        </Button>
+        <Button onClick={handleSubmit} disabled={selectedPools.length === 0 || isSubmitting}>
+          {isSubmitting ? "提交中..." : "完成"}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -2,450 +2,106 @@
 
 import { useState } from "react"
 import { useRouter } from "next/navigation"
-import { ChevronLeft, Users, Target, Settings, ArrowRight, ArrowLeft, Smartphone } from "lucide-react"
+import { ChevronLeft, Plus, Users, Database, Settings } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { Switch } from "@/components/ui/switch"
-import { Badge } from "@/components/ui/badge"
-import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
-import { Checkbox } from "@/components/ui/checkbox"
-import { toast } from "@/components/ui/use-toast"
+import { useToast } from "@/components/ui/use-toast"
+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"
 
-export default function NewTrafficDistributionPage() {
+export default function NewTrafficDistribution() {
   const router = useRouter()
-  const [currentStep, setCurrentStep] = useState(1)
+  const { toast } = useToast()
+  const [currentStep, setCurrentStep] = useState(0)
   const [formData, setFormData] = useState({
-    name: "",
-    description: "",
-    priority: "high",
-    autoDistribute: true,
-    createAsPackage: false,
-    packagePrice: 0,
-    allDevices: false,
-    newDevices: false,
-    targetDevices: [] as string[],
-    showDeviceSelector: false,
-    selectedPool: "",
-    isPoolSelectorOpen: false,
-    selectedUsers: [],
+    basicInfo: {},
+    targetSettings: {},
+    trafficPool: {},
   })
 
-  const updateFormData = (field: string, value: any) => {
-    setFormData((prev) => {
-      if (field.includes(".")) {
-        const [parent, child] = field.split(".")
-        return {
-          ...prev,
-          [parent]: {
-            ...prev[parent as keyof typeof prev],
-            [child]: value,
-          },
-        }
-      }
-      return { ...prev, [field]: value }
-    })
+  const steps = [
+    { id: 1, title: "基本信息", icon: <Plus className="h-6 w-6" /> },
+    { id: 2, title: "目标设置", icon: <Users className="h-6 w-6" /> },
+    { id: 3, title: "流量池选择", icon: <Database className="h-6 w-6" /> },
+  ]
+
+  const handleBasicInfoNext = (data: any) => {
+    setFormData((prev) => ({ ...prev, basicInfo: data }))
+    setCurrentStep(1)
   }
 
-  const handleNext = () => {
-    if (currentStep === 1 && !formData.name) {
-      toast({
-        title: "请填写规则名称",
-        description: "规则名称为必填项",
-        variant: "destructive",
-      })
-      return
-    }
-
-    if (currentStep === 2 && !formData.allDevices && (!formData.targetDevices || formData.targetDevices.length === 0)) {
-      toast({
-        title: "请选择设备",
-        description: "请选择至少一台设备或选择所有设备",
-        variant: "destructive",
-      })
-      return
-    }
-
-    if (currentStep === 3 && !formData.selectedPool) {
-      toast({
-        title: "请选择流量池",
-        description: "请选择一个流量池进行分发",
-        variant: "destructive",
-      })
-      return
-    }
-
-    if (currentStep < 3) {
-      setCurrentStep((prev) => prev + 1)
-    } else {
-      handleSubmit()
-    }
+  const handleTargetSettingsNext = (data: any) => {
+    setFormData((prev) => ({ ...prev, targetSettings: data }))
+    setCurrentStep(2)
   }
 
-  const handleBack = () => {
-    if (currentStep > 1) {
-      setCurrentStep((prev) => prev - 1)
-    } else {
-      router.back()
-    }
+  const handleTargetSettingsBack = () => {
+    setCurrentStep(0)
   }
 
-  const handleSubmit = () => {
-    toast({
-      title: "创建成功",
-      description: "流量分发规则已创建",
-    })
-    router.push("/workspace/traffic-distribution")
+  const handleTrafficPoolBack = () => {
+    setCurrentStep(1)
+  }
+
+  const handleSubmit = async (data: any) => {
+    const finalData = {
+      ...formData,
+      trafficPool: data,
+    }
+
+    try {
+      // 这里可以添加实际的API调用
+      console.log("提交的数据:", finalData)
+
+      toast({
+        title: "创建成功",
+        description: "流量分发规则已成功创建",
+      })
+
+      // 跳转到列表页
+      router.push("/workspace/traffic-distribution")
+    } catch (error) {
+      console.error("提交失败:", error)
+      toast({
+        title: "创建失败",
+        description: "请稍后重试",
+        variant: "destructive",
+      })
+    }
   }
 
   return (
-    <div className="flex-1 bg-white min-h-screen">
-      <header className="sticky top-0 z-10 bg-white border-b">
-        <div className="flex items-center justify-between p-4">
-          <div className="flex items-center space-x-3">
-            <Button variant="ghost" size="icon" onClick={handleBack}>
-              <ChevronLeft className="h-5 w-5" />
-            </Button>
-            <h1 className="text-lg font-medium">新建流量分发</h1>
-          </div>
-        </div>
-      </header>
-
-      <div className="p-4 max-w-3xl mx-auto">
-        {/* 步骤指示器 */}
-        <div className="mb-6">
-          <div className="flex items-center justify-between">
-            {[
-              { step: 1, title: "规则设定", icon: <Settings className="h-4 w-4" /> },
-              { step: 2, title: "选择设备", icon: <Smartphone className="h-4 w-4" /> },
-              { step: 3, title: "选择流量池", icon: <Users className="h-4 w-4" /> },
-            ].map(({ step, title, icon }) => (
-              <div key={step} className="flex flex-col items-center">
-                <div
-                  className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                    step === currentStep
-                      ? "bg-blue-600 text-white"
-                      : step < currentStep
-                        ? "bg-green-500 text-white"
-                        : "bg-gray-200 text-gray-500"
-                  }`}
-                >
-                  {step < currentStep ? "✓" : icon}
-                </div>
-                <span className="text-xs mt-1">{title}</span>
-              </div>
-            ))}
-          </div>
-          <div className="relative mt-2">
-            <div className="absolute top-0 left-0 right-0 h-1 bg-gray-200"></div>
-            <div
-              className="absolute top-0 left-0 h-1 bg-blue-600 transition-all"
-              style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
-            ></div>
-          </div>
+    <div className="container max-w-md mx-auto pb-20">
+      <div className="sticky top-0 bg-white z-10 pb-2">
+        <div className="flex items-center py-4 border-b">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-bold">新建流量分发</h1>
+          <Button variant="ghost" size="icon" className="ml-auto">
+            <Settings className="h-5 w-5" />
+          </Button>
         </div>
 
-        {/* 步骤1：规则设定 */}
-        {currentStep === 1 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>规则设定</CardTitle>
-              <CardDescription>设置流量分发的基本规则和优先级</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="space-y-2">
-                <Label htmlFor="name">
-                  规则名称 <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  id="name"
-                  placeholder="输入分发规则名称"
-                  value={formData.name}
-                  onChange={(e) => updateFormData("name", e.target.value)}
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="description">规则描述</Label>
-                <Textarea
-                  id="description"
-                  placeholder="简要描述该分发规则的目标和用途"
-                  value={formData.description}
-                  onChange={(e) => updateFormData("description", e.target.value)}
-                />
-              </div>
-
-              <div className="space-y-4">
-                <h3 className="text-sm font-medium">优先级</h3>
-                <RadioGroup
-                  value={formData.priority || "high"}
-                  onValueChange={(value) => updateFormData("priority", value)}
-                  className="space-y-3"
-                >
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="high" id="high-priority" />
-                    <Label htmlFor="high-priority" className="cursor-pointer">
-                      高优先
-                    </Label>
-                    <span className="text-xs text-gray-500 ml-2">(高优先级规则将优先执行)</span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="low" id="low-priority" />
-                    <Label htmlFor="low-priority" className="cursor-pointer">
-                      低优先
-                    </Label>
-                    <span className="text-xs text-gray-500 ml-2">(当高优先级规则不匹配时执行)</span>
-                  </div>
-                </RadioGroup>
-              </div>
-
-              <div className="space-y-2 border-t pt-4">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="autoDistribute">自动分发</Label>
-                  <Switch
-                    id="autoDistribute"
-                    checked={formData.autoDistribute !== false}
-                    onCheckedChange={(checked) => updateFormData("autoDistribute", checked)}
-                  />
-                </div>
-                <p className="text-xs text-gray-500">启用后，系统将自动按规则分发流量；关闭则需手动触发分发</p>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="createAsPackage">创建为流量包</Label>
-                  <Switch
-                    id="createAsPackage"
-                    checked={formData.createAsPackage || false}
-                    onCheckedChange={(checked) => updateFormData("createAsPackage", checked)}
-                  />
-                </div>
-                <p className="text-xs text-gray-500">启用后，可创建为可售卖流量包并设置价格</p>
-              </div>
-
-              {formData.createAsPackage && (
-                <div className="space-y-2 pl-4 border-l-2 border-blue-100">
-                  <Label htmlFor="packagePrice">流量包价格 (元/包)</Label>
-                  <Input
-                    id="packagePrice"
-                    type="number"
-                    placeholder="输入价格"
-                    value={formData.packagePrice || ""}
-                    onChange={(e) => updateFormData("packagePrice", Number.parseFloat(e.target.value))}
-                  />
-                </div>
-              )}
-
-              <div className="pt-4 flex justify-end">
-                <Button onClick={handleNext}>
-                  下一步
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* 步骤2：选择设备 */}
-        {currentStep === 2 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>选择设备</CardTitle>
-              <CardDescription>选择需要接收流量的设备</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="space-y-4">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="allDevices"
-                    checked={formData.allDevices || false}
-                    onCheckedChange={(checked) => {
-                      updateFormData("allDevices", checked === true)
-                      if (checked) updateFormData("targetDevices", [])
-                    }}
-                  />
-                  <Label htmlFor="allDevices" className="font-medium">
-                    所有设备
-                  </Label>
-                  <span className="text-xs text-gray-500">(系统自动分配流量到所有在线设备)</span>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="newDevices"
-                    checked={formData.newDevices || false}
-                    onCheckedChange={(checked) => updateFormData("newDevices", checked === true)}
-                    disabled={formData.allDevices}
-                  />
-                  <Label htmlFor="newDevices" className="font-medium">
-                    新添加设备
-                  </Label>
-                  <span className="text-xs text-gray-500">(仅针对新添加设备进行流量分发)</span>
-                </div>
-
-                <div className="space-y-2 pt-4">
-                  <Label className="font-medium">指定设备</Label>
-                  <p className="text-xs text-gray-500 mb-2">选择特定的设备进行流量分发</p>
-
-                  <Button
-                    variant="outline"
-                    className="w-full"
-                    disabled={formData.allDevices}
-                    onClick={() => updateFormData("showDeviceSelector", true)}
-                  >
-                    <Smartphone className="mr-2 h-4 w-4" />
-                    选择设备
-                    {formData.targetDevices?.length > 0 && (
-                      <Badge variant="secondary" className="ml-2">
-                        已选 {formData.targetDevices.length} 台
-                      </Badge>
-                    )}
-                  </Button>
-                </div>
-              </div>
-
-              <div className="pt-4 flex justify-between">
-                <Button variant="outline" onClick={handleBack}>
-                  <ArrowLeft className="mr-2 h-4 w-4" />
-                  上一步
-                </Button>
-                <Button onClick={handleNext}>
-                  下一步
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* 步骤3：选择流量池 */}
-        {currentStep === 3 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>选择流量池</CardTitle>
-              <CardDescription>选择需要分发的流量池</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {/* 普通流量包 */}
-                <Card
-                  className={`cursor-pointer hover:border-blue-400 transition-colors ${
-                    formData.selectedPool === "normal" ? "border-blue-500 bg-blue-50" : ""
-                  }`}
-                  onClick={() => updateFormData("selectedPool", "normal")}
-                >
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-base">普通流量包</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
-                      <div className="flex justify-between">
-                        <span className="text-sm text-gray-500">价格:</span>
-                        <span className="font-medium">0.50元/流量包</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-sm text-gray-500">总添加人数:</span>
-                        <span className="font-medium">10人</span>
-                      </div>
-                      <div className="flex flex-wrap gap-1 mt-2">
-                        <Badge variant="outline">新用户</Badge>
-                        <Badge variant="outline">低活跃度</Badge>
-                        <Badge variant="outline">全国</Badge>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* 高质量流量 */}
-                <Card
-                  className={`cursor-pointer hover:border-blue-400 transition-colors ${
-                    formData.selectedPool === "high" ? "border-blue-500 bg-blue-50" : ""
-                  }`}
-                  onClick={() => updateFormData("selectedPool", "high")}
-                >
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-base">高质量流量</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
-                      <div className="flex justify-between">
-                        <span className="text-sm text-gray-500">价格:</span>
-                        <span className="font-medium">2.50元/流量包</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-sm text-gray-500">总添加人数:</span>
-                        <span className="font-medium">25人</span>
-                      </div>
-                      <div className="flex flex-wrap gap-1 mt-2">
-                        <Badge variant="outline">高消费</Badge>
-                        <Badge variant="outline">高活跃度</Badge>
-                        <Badge variant="outline">一线城市</Badge>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* 精准营销流量 */}
-                <Card
-                  className={`cursor-pointer hover:border-blue-400 transition-colors ${
-                    formData.selectedPool === "precise" ? "border-blue-500 bg-blue-50" : ""
-                  }`}
-                  onClick={() => updateFormData("selectedPool", "precise")}
-                >
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-base">精准营销流量</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
-                      <div className="flex justify-between">
-                        <span className="text-sm text-gray-500">价格:</span>
-                        <span className="font-medium">3.80元/流量包</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-sm text-gray-500">总添加人数:</span>
-                        <span className="font-medium">50人</span>
-                      </div>
-                      <div className="flex flex-wrap gap-1 mt-2">
-                        <Badge variant="outline">潜在客户</Badge>
-                        <Badge variant="outline">有购买意向</Badge>
-                        <Badge variant="outline">华东地区</Badge>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-
-              <div className="pt-4">
-                <Button variant="outline" className="w-full" onClick={() => updateFormData("isPoolSelectorOpen", true)}>
-                  <Target className="mr-2 h-4 w-4" />
-                  从流量池中挑选特定标签用户
-                </Button>
-              </div>
-
-              <div className="pt-4 flex justify-between">
-                <Button variant="outline" onClick={handleBack}>
-                  <ArrowLeft className="mr-2 h-4 w-4" />
-                  上一步
-                </Button>
-                <Button onClick={handleSubmit} disabled={!formData.selectedPool}>
-                  完成创建
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        )}
+        <StepIndicator currentStep={currentStep} steps={steps} />
       </div>
 
-      {/* 流量池选择器 */}
-      <TrafficPoolSelector
-        open={formData.isPoolSelectorOpen}
-        onOpenChange={(open) => updateFormData("isPoolSelectorOpen", open)}
-        selectedUsers={formData.selectedUsers}
-        onSelect={(users) => updateFormData("selectedUsers", users)}
-      />
+      <div className="mt-4">
+        {currentStep === 0 && <BasicInfoStep onNext={handleBasicInfoNext} initialData={formData.basicInfo} />}
+
+        {currentStep === 1 && (
+          <TargetSettingsStep
+            onNext={handleTargetSettingsNext}
+            onBack={handleTargetSettingsBack}
+            initialData={formData.targetSettings}
+          />
+        )}
+
+        {currentStep === 2 && (
+          <TrafficPoolStep onSubmit={handleSubmit} onBack={handleTrafficPoolBack} initialData={formData.trafficPool} />
+        )}
+      </div>
     </div>
   )
 }