diff --git a/Cunkebao/app/workspace/moments-sync/[id]/page.tsx b/Cunkebao/app/workspace/moments-sync/[id]/page.tsx
index 685c2fb2..badd0812 100644
--- a/Cunkebao/app/workspace/moments-sync/[id]/page.tsx
+++ b/Cunkebao/app/workspace/moments-sync/[id]/page.tsx
@@ -51,6 +51,19 @@ interface SyncHistory {
   errorMessage?: string
 }
 
+// 新增朋友圈发布记录类型
+type MomentRecord = {
+  id: number
+  workbenchId: number
+  publishTime: number
+  contentType: number // 1文本 2视频 3图片
+  content: string
+  resUrls: string[]
+  urls: string[]
+  operatorName: string
+  operatorAvatar: string
+}
+
 export default function MomentsSyncDetailPage({ params }: { params: { id: string } }) {
   const router = useRouter()
   const [taskDetail, setTaskDetail] = useState<TaskDetail | null>(null)
@@ -58,13 +71,15 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
   const [isLoading, setIsLoading] = useState(true)
   const [activeTab, setActiveTab] = useState("overview")
   const [showDeleteAlert, setShowDeleteAlert] = useState(false)
+  const [momentRecords, setMomentRecords] = useState<MomentRecord[]>([])
+  const [isMomentLoading, setIsMomentLoading] = useState(false)
   
   // 获取任务详情
   useEffect(() => {
     const fetchTaskDetail = async () => {
       setIsLoading(true)
       try {
-        const response = await api.get<ApiResponse>(`/v1/workbench/detail?id=${params.id}`)
+        const response = await api.get<ApiResponse>(`/v1/workbench/moments-records?workbenchId=${params.id}`)
         if (response.code === 200 && response.data) {
           setTaskDetail(response.data)
           
@@ -103,12 +118,33 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
     }
   }
 
+  // 获取朋友圈发布记录
+  type MomentsApiResponse = { code: number; msg: string; data: { list: MomentRecord[] } }
+  const fetchMomentRecords = async () => {
+    setIsMomentLoading(true)
+    try {
+      const response = await api.get<MomentsApiResponse>(`/v1/workbench/moments-records?workbenchId=${params.id}`)
+      if (response.code === 200 && response.data) {
+        setMomentRecords(response.data.list || [])
+      } else {
+        setMomentRecords([])
+      }
+    } catch (error) {
+      setMomentRecords([])
+    } finally {
+      setIsMomentLoading(false)
+    }
+  }
+
   // 切换Tab时加载数据
   const handleTabChange = (value: string) => {
     setActiveTab(value)
     if (value === "history" && syncHistory.length === 0) {
       fetchSyncHistory()
     }
+    if (value === "moments" && momentRecords.length === 0) {
+      fetchMomentRecords()
+    }
   }
 
   // 切换任务状态
@@ -275,10 +311,11 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
         </Card>
 
         <Tabs value={activeTab} onValueChange={handleTabChange} className="mb-4">
-          <TabsList className="grid grid-cols-3">
+          <TabsList className="grid grid-cols-4">
             <TabsTrigger value="overview">基本信息</TabsTrigger>
             <TabsTrigger value="devices">设备列表</TabsTrigger>
             <TabsTrigger value="history">同步历史</TabsTrigger>
+            <TabsTrigger value="moments">发布记录</TabsTrigger>
           </TabsList>
           
           <TabsContent value="overview" className="mt-4">
@@ -385,6 +422,65 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
               )}
             </Card>
           </TabsContent>
+          
+          <TabsContent value="moments" className="mt-4">
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-medium">朋友圈发布记录</h3>
+                <Button variant="outline" size="sm" onClick={fetchMomentRecords} disabled={isMomentLoading}>
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                  刷新
+                </Button>
+              </div>
+              {isMomentLoading ? (
+                <div className="text-center py-8 text-gray-500">加载中...</div>
+              ) : momentRecords.length === 0 ? (
+                <div className="text-center py-8 text-gray-500">暂无发布记录</div>
+              ) : (
+                <div className="space-y-4">
+                  {momentRecords.map((rec) => (
+                    <div key={rec.id} className="border rounded-lg p-3 flex gap-3">
+                      <Avatar className="h-10 w-10">
+                        {rec.operatorAvatar ? (
+                          <img src={rec.operatorAvatar} alt={rec.operatorName} />
+                        ) : (
+                          <div className="bg-blue-100 text-blue-600 h-full w-full flex items-center justify-center">
+                            {rec.operatorName?.charAt(0) || "?"}
+                          </div>
+                        )}
+                      </Avatar>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="font-medium text-sm">{rec.operatorName}</span>
+                          <span className="text-xs text-gray-400">{rec.publishTime ? new Date(rec.publishTime * 1000).toLocaleString() : "-"}</span>
+                        </div>
+                        <div className="mb-1 text-gray-800 text-sm">
+                          {rec.contentType === 1 && rec.content}
+                          {rec.contentType === 3 && rec.content}
+                        </div>
+                        {/* 图片展示 */}
+                        {rec.contentType === 3 && rec.resUrls && rec.resUrls.length > 0 && (
+                          <div className="flex gap-2 flex-wrap mt-1">
+                            {rec.resUrls.map((url, idx) => (
+                              <img key={idx} src={url} alt="图片" className="h-20 w-20 object-cover rounded" />
+                            ))}
+                          </div>
+                        )}
+                        {/* 视频展示 */}
+                        {rec.contentType === 2 && rec.urls && rec.urls.length > 0 && (
+                          <div className="mt-1">
+                            {rec.urls.map((url, idx) => (
+                              <video key={idx} src={url} controls className="h-32 w-48 rounded" />
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Card>
+          </TabsContent>
         </Tabs>
       </div>
       
diff --git a/Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx b/Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx
index 224d6f83..c5eb14c2 100644
--- a/Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx
@@ -1,514 +1,89 @@
 "use client"
 
+import type React from "react"
+
 import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
-import { ChevronLeft, Info, Users, Target, Settings, ArrowRight, ArrowLeft } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { Switch } from "@/components/ui/switch"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { Slider } from "@/components/ui/slider"
-import { Badge } from "@/components/ui/badge"
-import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
-import { toast } from "@/components/ui/use-toast"
+import { useToast } from "@/components/ui/use-toast"
 
 // 模拟数据
-const planDetails = {
+const mockDistributionRule = {
   id: "1",
   name: "抖音直播引流计划",
   description: "从抖音直播间获取的潜在客户流量分发",
   status: "active",
-  source: "douyin",
-  sourceIcon: "🎬",
-  distributionMethod: "even",
-  targetGroups: ["新客户", "潜在客户"],
-  devices: ["iPhone 13", "华为 P40", "小米 11"],
-  totalUsers: 1250,
-  dailyAverage: 85,
-  weeklyData: [42, 56, 78, 64, 85, 92, 76],
-  createdAt: "2024-03-10T08:30:00Z",
-  lastUpdated: "2024-03-18T10:30:00Z",
-  rules: {
-    maxPerDay: 50,
-    timeRestriction: "custom",
-    customTimeStart: "09:00",
-    customTimeEnd: "21:00",
-    userFilters: [],
-    excludeTags: [],
-  },
-  selectedUsers: [],
+  dailyDistributionLimit: 85,
+  deviceIds: ["dev1", "dev2", "dev3"],
+  trafficPoolIds: ["pool1", "pool2"],
+  distributionStrategy: "even",
+  autoAdjust: true,
 }
 
 export default function EditTrafficDistributionPage({ params }: { params: { id: string } }) {
   const router = useRouter()
-  const [currentStep, setCurrentStep] = useState(1)
+  const { toast } = useToast()
+  const [loading, setLoading] = useState(true)
+  const [isDeviceDialogOpen, setIsDeviceDialogOpen] = useState(false)
+  const [isPoolDialogOpen, setIsPoolDialogOpen] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
   const [formData, setFormData] = useState({
+    id: "",
     name: "",
     description: "",
-    source: "",
-    distributionMethod: "even", // even, priority, ratio
-    targetGroups: [] as string[],
-    targetDevices: [] as string[],
-    autoTag: true,
-    activeStatus: true,
-    priorityOrder: [] as string[],
-    ratioSettings: {} as Record<string, number>,
-    rules: {
-      maxPerDay: 50,
-      timeRestriction: "all", // all, custom
-      customTimeStart: "09:00",
-      customTimeEnd: "21:00",
-      userFilters: [] as string[],
-      excludeTags: [] as string[],
-    },
-    selectedUsers: [],
-    isPoolSelectorOpen: false,
+    status: "active",
+    dailyDistributionLimit: 100,
+    deviceIds: [] as string[],
+    trafficPoolIds: [] as string[],
+    distributionStrategy: "even", // even, weighted, priority
+    autoAdjust: true,
   })
 
-  // 加载计划详情
   useEffect(() => {
-    // 模拟API请求
-    setFormData({
-      name: planDetails.name,
-      description: planDetails.description || "",
-      source: planDetails.source,
-      distributionMethod: planDetails.distributionMethod,
-      targetGroups: planDetails.targetGroups,
-      targetDevices: planDetails.devices,
-      autoTag: true,
-      activeStatus: planDetails.status === "active",
-      priorityOrder: planDetails.targetGroups,
-      ratioSettings: planDetails.targetGroups.reduce(
-        (acc, group, index, arr) => {
-          acc[group] = Math.floor(100 / arr.length)
-          return acc
-        },
-        {} as Record<string, number>,
-      ),
-      rules: planDetails.rules,
-      selectedUsers: planDetails.selectedUsers || [],
-      isPoolSelectorOpen: false,
-    })
-  }, [params.id])
+    // 模拟API请求获取计划详情
+    const fetchData = async () => {
+      try {
+        // 实际项目中应从API获取数据
+        // const response = await fetch(`/api/traffic-distribution/${params.id}`)
+        // const data = await response.json()
+        // setFormData(data)
 
-  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 handleNext = () => {
-    setCurrentStep((prev) => prev + 1)
-  }
-
-  const handleBack = () => {
-    if (currentStep > 1) {
-      setCurrentStep((prev) => prev - 1)
-    } else {
-      router.back()
-    }
-  }
-
-  const handleSubmit = async (formData: any) => {
-    try {
-      const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/api/traffic-distribution/${params.id}`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        },
-        body: JSON.stringify(formData)
-      });
-      
-      const data = await response.json();
-      if (data.code === 200) {
+        // 使用模拟数据
+        setTimeout(() => {
+          setFormData({
+            ...mockDistributionRule,
+            id: params.id,
+          })
+          setLoading(false)
+        }, 500)
+      } catch (error) {
+        console.error("获取分发规则失败:", error)
         toast({
-          title: "保存成功",
-          description: "流量分配计划已更新",
-        });
-        router.push('/workspace/traffic-distribution');
-      } else {
-        toast({
-          title: "保存失败",
-          description: data.msg || "请稍后重试",
+          title: "加载失败",
+          description: "无法加载分发规则详情",
           variant: "destructive",
-        });
+        })
+        setLoading(false)
       }
-    } catch (error) {
-      toast({
-        title: "保存失败",
-        description: "网络错误，请稍后重试",
-        variant: "destructive",
-      });
     }
-  };
 
-  const isStep1Valid = formData.name && formData.source
-  const isStep2Valid = formData.targetGroups.length > 0 || formData.targetDevices.length > 0
-  const isStep3Valid = true // 规则设置可以有默认值
+    fetchData()
+  }, [params.id, toast])
 
-  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>
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
 
-      <div className="p-4 max-w-3xl mx-auto">
-        {/* 步骤指示器 */}
-        <div className="mb-6">
-          <div className="flex items-center justify-between">
-            {[
-              { step: 1, title: "基本信息", icon: <Info className="h-4 w-4" /> },
-              { step: 2, title: "目标设置", icon: <Target className="h-4 w-4" /> },
-              { step: 3, title: "规则配置", icon: <Settings 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>
+  const handleSwitchChange = (checked: boolean, name: string) => {
+    setFormData((prev) => ({ ...prev, [name]: checked }))
+  }
 
-        {/* 步骤1：基本信息 */}
-        {currentStep === 1 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>基本信息</CardTitle>
-              <CardDescription>设置流量分发计划的基本信息</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <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>
+  const handleSelectChange = (value: string, name: string) => {
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
 
-              <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-2">
-                <Label htmlFor="source">
-                  流量来源 <span className="text-red-500">*</span>
-                </Label>
-                <Select value={formData.source} onValueChange={(value) => updateFormData("source", value)}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="选择流量来源" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="douyin">抖音</SelectItem>
-                    <SelectItem value="xiaohongshu">小红书</SelectItem>
-                    <SelectItem value="wechat">微信</SelectItem>
-                    <SelectItem value="weibo">微博</SelectItem>
-                    <SelectItem value="other">其他来源</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="pt-4 flex justify-end">
-                <Button onClick={handleNext} disabled={!isStep1Valid}>
-                  下一步
-                  <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-4">
-              <Tabs defaultValue="groups">
-                <TabsList className="grid w-full grid-cols-2">
-                  <TabsTrigger value="groups">目标人群</TabsTrigger>
-                  <TabsTrigger value="devices">目标设备</TabsTrigger>
-                </TabsList>
-                <TabsContent value="groups" className="pt-4">
-                  <div className="space-y-4">
-                    <div className="grid grid-cols-2 gap-3">
-                      {["新客户", "潜在客户", "老客户", "会员", "高价值用户", "流失用户"].map((group) => (
-                        <Card
-                          key={group}
-                          className={`cursor-pointer hover:border-blue-400 transition-colors ${
-                            formData.targetGroups.includes(group) ? "border-blue-500 bg-blue-50" : ""
-                          }`}
-                          onClick={() => {
-                            const newGroups = formData.targetGroups.includes(group)
-                              ? formData.targetGroups.filter((g) => g !== group)
-                              : [...formData.targetGroups, group]
-                            updateFormData("targetGroups", newGroups)
-                          }}
-                        >
-                          <CardContent className="p-3 text-center">{group}</CardContent>
-                        </Card>
-                      ))}
-                    </div>
-                    <p className="text-xs text-gray-500">选择需要分发流量的目标人群，可多选</p>
-
-                    <div className="mt-4">
-                      <Button
-                        variant="outline"
-                        onClick={() => updateFormData("isPoolSelectorOpen", true)}
-                        className="w-full"
-                      >
-                        <Users className="mr-2 h-4 w-4" />
-                        从流量池选择特定用户
-                      </Button>
-
-                      {formData.selectedUsers.length > 0 && (
-                        <div className="mt-2">
-                          <p className="text-sm font-medium mb-1">已选择 {formData.selectedUsers.length} 个用户</p>
-                          <div className="flex flex-wrap gap-1">
-                            {formData.selectedUsers.slice(0, 3).map((user: any) => (
-                              <Badge key={user.id} variant="secondary">
-                                {user.nickname}
-                              </Badge>
-                            ))}
-                            {formData.selectedUsers.length > 3 && (
-                              <Badge variant="secondary">+{formData.selectedUsers.length - 3}</Badge>
-                            )}
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </TabsContent>
-                <TabsContent value="devices" className="pt-4">
-                  <div className="space-y-4">
-                    <p className="text-sm">选择需要接收流量的设备</p>
-                    <Button variant="outline" className="w-full">
-                      选择设备
-                    </Button>
-                    <p className="text-xs text-gray-500">您可以选择特定设备接收分发的流量</p>
-                  </div>
-                </TabsContent>
-              </Tabs>
-
-              <div className="pt-4 flex justify-between">
-                <Button variant="outline" onClick={handleBack}>
-                  <ArrowLeft className="mr-2 h-4 w-4" />
-                  上一步
-                </Button>
-                <Button onClick={handleNext} disabled={!isStep2Valid}>
-                  下一步
-                  <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="space-y-4">
-                <h3 className="text-sm font-medium">分发方式</h3>
-                <RadioGroup
-                  value={formData.distributionMethod}
-                  onValueChange={(value) => updateFormData("distributionMethod", value)}
-                  className="space-y-3"
-                >
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="even" id="even" />
-                    <Label htmlFor="even" 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="priority" id="priority" />
-                    <Label htmlFor="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="ratio" id="ratio" />
-                    <Label htmlFor="ratio" className="cursor-pointer">
-                      比例分发
-                    </Label>
-                    <span className="text-xs text-gray-500 ml-2">(按设定比例分配流量)</span>
-                  </div>
-                </RadioGroup>
-              </div>
-
-              <div className="space-y-4 border-t pt-4">
-                <h3 className="text-sm font-medium">分发限制</h3>
-
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="maxPerDay">每日最大分发量</Label>
-                    <span className="text-sm font-medium">{formData.rules.maxPerDay} 人/天</span>
-                  </div>
-                  <Slider
-                    id="maxPerDay"
-                    min={10}
-                    max={200}
-                    step={10}
-                    value={[formData.rules.maxPerDay]}
-                    onValueChange={(value) => updateFormData("rules.maxPerDay", value[0])}
-                  />
-                  <p className="text-xs text-gray-500">限制每天最多分发的流量数量</p>
-                </div>
-
-                <div className="space-y-2">
-                  <Label>时间限制</Label>
-                  <RadioGroup
-                    value={formData.rules.timeRestriction}
-                    onValueChange={(value) => updateFormData("rules.timeRestriction", value)}
-                    className="space-y-3"
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="all" id="all-time" />
-                      <Label htmlFor="all-time" className="cursor-pointer">
-                        全天分发
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="custom" id="custom-time" />
-                      <Label htmlFor="custom-time" className="cursor-pointer">
-                        自定义时间段
-                      </Label>
-                    </div>
-                  </RadioGroup>
-
-                  {formData.rules.timeRestriction === "custom" && (
-                    <div className="grid grid-cols-2 gap-2 mt-2">
-                      <div>
-                        <Label htmlFor="timeStart" className="text-xs">
-                          开始时间
-                        </Label>
-                        <Input
-                          id="timeStart"
-                          type="time"
-                          value={formData.rules.customTimeStart}
-                          onChange={(e) => updateFormData("rules.customTimeStart", e.target.value)}
-                        />
-                      </div>
-                      <div>
-                        <Label htmlFor="timeEnd" className="text-xs">
-                          结束时间
-                        </Label>
-                        <Input
-                          id="timeEnd"
-                          type="time"
-                          value={formData.rules.customTimeEnd}
-                          onChange={(e) => updateFormData("rules.customTimeEnd", e.target.value)}
-                        />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              <div className="space-y-2 border-t pt-4">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="autoTag">自动标记</Label>
-                  <Switch
-                    id="autoTag"
-                    checked={formData.autoTag}
-                    onCheckedChange={(checked) => updateFormData("autoTag", 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="activeStatus">立即激活</Label>
-                  <Switch
-                    id="activeStatus"
-                    checked={formData.activeStatus}
-                    onCheckedChange={(checked) => updateFormData("activeStatus", checked)}
-                  />
-                </div>
-                <p className="text-xs text-gray-500">启用后，创建完成后立即开始流量分发</p>
-              </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(formData)} disabled={!isStep3Valid}>
-                  保存修改
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* 流量池选择器 */}
-      <TrafficPoolSelector
-        open={formData.isPoolSelectorOpen}
-        onOpenChange={(open) => updateFormData("isPoolSelectorOpen", open)}
-        selectedUsers={formData.selectedUsers}
-        onSelect={(users) => updateFormData("selectedUsers", users)}
-      />
-    </div>
-  )
+  const handleDeviceSelection = (selectedDevices: string[]) => {
+    setFormData((prev) => ({ ...prev, deviceIds: selectedDevices }))
+  }
 }
-
diff --git a/Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx b/Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx
index b87592e6..a19c145f 100644
--- a/Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx
@@ -96,4 +96,3 @@ export default function TrafficDistributionDetailLoading() {
     </div>
   )
 }
-
diff --git a/Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx b/Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx
index aa8434b1..6143065b 100644
--- a/Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx
@@ -1,324 +1,279 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
-import { ChevronLeft, Settings, Users, BarChart3, Download, Clock } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { ChevronLeft, Users, Database, TrendingUp, Calendar, Clock } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { Switch } from "@/components/ui/switch"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import BottomNav from "@/app/components/BottomNav"
 
-// 模拟数据
-const planDetails = {
-  id: "1",
-  name: "抖音直播引流计划",
-  description: "从抖音直播间获取的潜在客户流量分发",
-  status: "active",
-  source: "douyin",
-  sourceIcon: "🎬",
-  distributionMethod: "even",
-  targetGroups: ["新客户", "潜在客户"],
-  devices: ["iPhone 13", "华为 P40", "小米 11"],
-  totalUsers: 1250,
-  dailyAverage: 85,
-  weeklyData: [42, 56, 78, 64, 85, 92, 76],
-  createdAt: "2024-03-10T08:30:00Z",
-  lastUpdated: "2024-03-18T10:30:00Z",
-  rules: {
-    maxPerDay: 50,
-    timeRestriction: "custom",
-    customTimeStart: "09:00",
-    customTimeEnd: "21:00",
-  },
+interface DistributionPlan {
+  id: string
+  name: string
+  status: "active" | "paused"
+  source: string
+  sourceIcon: string
+  targetGroups: string[]
+  totalUsers: number
+  dailyAverage: number
+  deviceCount: number
+  poolCount: number
+  lastUpdated: string
+  createTime: string
+  creator: string
+  devices: {
+    id: string
+    name: string
+    status: "online" | "offline"
+  }[]
+  pools: {
+    id: string
+    name: string
+    count: number
+    keywords: string[]
+  }[]
+  dailyStats: {
+    date: string
+    distributed: number
+  }[]
 }
 
-// 模拟流量数据
-const trafficData = [
-  { id: "1", name: "张三", source: "抖音直播", time: "2024-03-20 09:45", target: "新客户", device: "iPhone 13" },
-  { id: "2", name: "李四", source: "抖音评论", time: "2024-03-20 10:12", target: "潜在客户", device: "华为 P40" },
-  { id: "3", name: "王五", source: "抖音私信", time: "2024-03-20 11:30", target: "新客户", device: "小米 11" },
-  { id: "4", name: "赵六", source: "抖音直播", time: "2024-03-20 13:15", target: "潜在客户", device: "iPhone 13" },
-  { id: "5", name: "孙七", source: "抖音评论", time: "2024-03-20 14:22", target: "新客户", device: "华为 P40" },
-]
-
-export default function TrafficDistributionDetailPage({ params }: { params: { id: string } }) {
+export default function DistributionPlanDetailPage({ params }: { params: { id: string } }) {
+  const { id } = params
   const router = useRouter()
-  const [activeTab, setActiveTab] = useState("overview")
-  const [isActive, setIsActive] = useState(planDetails.status === "active")
-  const [timeRange, setTimeRange] = useState("7days")
+  const [plan, setPlan] = useState<DistributionPlan | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // 模拟API请求
+    setTimeout(() => {
+      setPlan({
+        id: id,
+        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",
+        devices: [
+          { id: "dev1", name: "iPhone 13", status: "online" },
+          { id: "dev2", name: "Xiaomi 12", status: "online" },
+          { id: "dev3", name: "Huawei P40", status: "offline" },
+        ],
+        pools: [
+          { id: "pool1", name: "抖音流量池", count: 850, keywords: ["抖音直播", "短视频", "网红"] },
+          { id: "pool2", name: "通用流量池", count: 400, keywords: ["电商", "购物", "促销"] },
+        ],
+        dailyStats: [
+          { date: "03-15", distributed: 78 },
+          { date: "03-16", distributed: 92 },
+          { date: "03-17", distributed: 85 },
+          { date: "03-18", distributed: 103 },
+          { date: "03-19", distributed: 67 },
+          { date: "03-20", distributed: 89 },
+          { date: "03-21", distributed: 95 },
+        ],
+      })
+      setLoading(false)
+    }, 500)
+  }, [id])
+
+  if (loading) {
+    return (
+      <div className="flex-1 bg-gray-50 min-h-screen p-4 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
+          <p className="mt-4 text-gray-500">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!plan) {
+    return (
+      <div className="flex-1 bg-gray-50 min-h-screen p-4">
+        <div className="text-center py-12">
+          <h2 className="text-xl font-medium text-gray-700">未找到计划</h2>
+          <p className="text-gray-500 mt-2">无法找到ID为 {id} 的分发计划</p>
+          <Button className="mt-4" onClick={() => router.push("/workspace/traffic-distribution")}>
+            返回列表
+          </Button>
+        </div>
+      </div>
+    )
+  }
 
   return (
-    <div className="flex-1 bg-white min-h-screen">
+    <div className="flex-1 bg-gray-50 min-h-screen pb-16">
       <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={() => router.back()}>
               <ChevronLeft className="h-5 w-5" />
             </Button>
-            <h1 className="text-lg font-medium">{planDetails.name}</h1>
-          </div>
-          <div className="flex items-center space-x-2">
-            <div className="flex items-center mr-4">
-              <span className="mr-2 text-sm">状态:</span>
-              <Switch checked={isActive} onCheckedChange={setIsActive} />
-              <span className="ml-2 text-sm">{isActive ? "进行中" : "已暂停"}</span>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => router.push(`/workspace/traffic-distribution/${params.id}/edit`)}
-            >
-              <Settings className="h-4 w-4 mr-2" />
-              编辑
-            </Button>
+            <h1 className="text-lg font-medium">计划详情</h1>
           </div>
+          <Button variant="outline" onClick={() => router.push(`/workspace/traffic-distribution/${id}/edit`)}>
+            编辑计划
+          </Button>
         </div>
       </header>
 
-      <div className="p-4">
-        <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className="grid w-full grid-cols-3 mb-6">
-            <TabsTrigger value="overview">概览</TabsTrigger>
-            <TabsTrigger value="traffic">流量记录</TabsTrigger>
-            <TabsTrigger value="rules">分发规则</TabsTrigger>
+      <div className="p-4 space-y-4">
+        {/* 计划概览 */}
+        <Card>
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-3">
+                <div className="text-2xl">{plan.sourceIcon}</div>
+                <CardTitle>{plan.name}</CardTitle>
+              </div>
+              <Badge variant={plan.status === "active" ? "success" : "secondary"}>
+                {plan.status === "active" ? "进行中" : "已暂停"}
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 gap-4 mt-2">
+              <div className="flex items-center space-x-2">
+                <Users className="h-4 w-4 text-gray-500" />
+                <span className="text-sm text-gray-500">创建人: {plan.creator}</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Calendar className="h-4 w-4 text-gray-500" />
+                <span className="text-sm text-gray-500">创建时间: {plan.createTime.split(" ")[0]}</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Clock className="h-4 w-4 text-gray-500" />
+                <span className="text-sm text-gray-500">最近更新: {plan.lastUpdated.split(" ")[0]}</span>
+              </div>
+            </div>
+
+            {/* 统计数据区域：上3下2布局，单元格加分隔线 */}
+            <div className="grid grid-cols-3 bg-white rounded-t-lg overflow-hidden border-t border-l border-r mt-6">
+              <div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
+                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.dailyAverage}</div>
+                <div className="text-xs text-gray-500 mt-1">日均分发人数</div>
+              </div>
+              <div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
+                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.deviceCount}</div>
+                <div className="text-xs text-gray-500 mt-1">分发设备</div>
+              </div>
+              <div className="flex flex-col items-center justify-center py-4">
+                <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 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">
+              <div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
+                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.dailyAverage}</div>
+                <div className="text-xs text-gray-500 mt-1">日均分发量</div>
+              </div>
+              <div className="flex flex-col items-center justify-center py-4">
+                <div className="text-2xl font-bold text-gray-900 mb-1">{plan.totalUsers}</div>
+                <div className="text-xs text-gray-500 mt-1">总流量池数量</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 详细信息标签页 */}
+        <Tabs defaultValue="devices" className="w-full">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="devices">设备</TabsTrigger>
+            <TabsTrigger value="pools">流量池</TabsTrigger>
+            <TabsTrigger value="stats">分发统计</TabsTrigger>
           </TabsList>
 
-          {/* 概览标签页 */}
-          <TabsContent value="overview" className="space-y-6">
-            {/* 数据卡片 */}
-            <div className="grid grid-cols-2 gap-4">
-              <Card>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <p className="text-sm text-gray-500">总流量</p>
-                      <p className="text-2xl font-bold text-blue-600">{planDetails.totalUsers.toLocaleString()}</p>
-                    </div>
-                    <Users className="h-8 w-8 text-blue-500" />
-                  </div>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <p className="text-sm text-gray-500">日均获取</p>
-                      <p className="text-2xl font-bold text-green-600">{planDetails.dailyAverage}</p>
-                    </div>
-                    <BarChart3 className="h-8 w-8 text-green-500" />
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-
-            {/* 图表 */}
-            <Card>
-              <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                  <CardTitle>流量趋势</CardTitle>
-                  <Select value={timeRange} onValueChange={setTimeRange}>
-                    <SelectTrigger className="w-[120px]">
-                      <SelectValue placeholder="选择时间范围" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="7days">近7天</SelectItem>
-                      <SelectItem value="30days">近30天</SelectItem>
-                      <SelectItem value="90days">近90天</SelectItem>
-                      <SelectItem value="custom">自定义</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </CardHeader>
-              <CardContent className="p-4">
-                <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
-                  {/* 这里可以放置实际的图表组件 */}
-                  <div className="text-center">
-                    <BarChart3 className="h-12 w-12 text-gray-300 mx-auto mb-2" />
-                    <p className="text-gray-500">流量趋势图表</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* 基本信息 */}
+          <TabsContent value="devices" className="mt-4">
             <Card>
               <CardHeader>
-                <CardTitle>基本信息</CardTitle>
+                <CardTitle className="text-base">分发设备 ({plan.devices.length})</CardTitle>
               </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <p className="text-sm text-gray-500">流量来源</p>
-                    <p className="font-medium">{planDetails.sourceIcon} 抖音</p>
-                  </div>
-                  <div>
-                    <p className="text-sm text-gray-500">分发方式</p>
-                    <p className="font-medium">
-                      {planDetails.distributionMethod === "even"
-                        ? "均匀分发"
-                        : planDetails.distributionMethod === "priority"
-                          ? "优先级分发"
-                          : "比例分发"}
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-sm text-gray-500">创建时间</p>
-                    <p className="font-medium">{new Date(planDetails.createdAt).toLocaleDateString()}</p>
-                  </div>
-                  <div>
-                    <p className="text-sm text-gray-500">最近更新</p>
-                    <p className="font-medium">{new Date(planDetails.lastUpdated).toLocaleDateString()}</p>
-                  </div>
-                </div>
-
-                <div>
-                  <p className="text-sm text-gray-500 mb-2">目标人群</p>
-                  <div className="flex flex-wrap gap-2">
-                    {planDetails.targetGroups.map((group) => (
-                      <Badge key={group} variant="outline">
-                        {group}
+              <CardContent>
+                <div className="space-y-3">
+                  {plan.devices.map((device) => (
+                    <div key={device.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                      <div>
+                        <div className="font-medium">{device.name}</div>
+                        <div className="text-sm text-gray-500">ID: {device.id}</div>
+                      </div>
+                      <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                        {device.status === "online" ? "在线" : "离线"}
                       </Badge>
-                    ))}
-                  </div>
-                </div>
-
-                <div>
-                  <p className="text-sm text-gray-500 mb-2">目标设备</p>
-                  <div className="flex flex-wrap gap-2">
-                    {planDetails.devices.map((device) => (
-                      <Badge key={device} variant="outline">
-                        {device}
-                      </Badge>
-                    ))}
-                  </div>
+                    </div>
+                  ))}
                 </div>
               </CardContent>
             </Card>
           </TabsContent>
 
-          {/* 流量记录标签页 */}
-          <TabsContent value="traffic" className="space-y-6">
-            <div className="flex justify-between items-center mb-4">
-              <h2 className="text-lg font-medium">流量记录</h2>
-              <Button variant="outline" size="sm">
-                <Download className="h-4 w-4 mr-2" />
-                导出数据
-              </Button>
-            </div>
-
-            <Card>
-              <CardContent className="p-0">
-                <div className="overflow-x-auto">
-                  <table className="w-full">
-                    <thead>
-                      <tr className="border-b">
-                        <th className="text-left p-3">用户</th>
-                        <th className="text-left p-3">来源</th>
-                        <th className="text-left p-3">时间</th>
-                        <th className="text-left p-3">目标</th>
-                        <th className="text-left p-3">设备</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {trafficData.map((item) => (
-                        <tr key={item.id} className="border-b hover:bg-gray-50">
-                          <td className="p-3">{item.name}</td>
-                          <td className="p-3">{item.source}</td>
-                          <td className="p-3">{item.time}</td>
-                          <td className="p-3">{item.target}</td>
-                          <td className="p-3">{item.device}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </CardContent>
-            </Card>
-
-            <div className="flex justify-center">
-              <Button variant="outline">加载更多</Button>
-            </div>
-          </TabsContent>
-
-          {/* 分发规则标签页 */}
-          <TabsContent value="rules" className="space-y-6">
+          <TabsContent value="pools" className="mt-4">
             <Card>
               <CardHeader>
-                <CardTitle>分发规则</CardTitle>
+                <CardTitle className="text-base">流量池 ({plan.pools.length})</CardTitle>
               </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <p className="text-sm text-gray-500">分发方式</p>
-                    <p className="font-medium">
-                      {planDetails.distributionMethod === "even"
-                        ? "均匀分发"
-                        : planDetails.distributionMethod === "priority"
-                          ? "优先级分发"
-                          : "比例分发"}
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-sm text-gray-500">每日最大分发量</p>
-                    <p className="font-medium">{planDetails.rules.maxPerDay} 人/天</p>
-                  </div>
-                </div>
-
-                <div>
-                  <p className="text-sm text-gray-500">时间限制</p>
-                  <div className="flex items-center mt-1">
-                    <Clock className="h-4 w-4 mr-2 text-gray-400" />
-                    {planDetails.rules.timeRestriction === "all" ? (
-                      <p className="font-medium">全天分发</p>
-                    ) : (
-                      <p className="font-medium">
-                        {planDetails.rules.customTimeStart} - {planDetails.rules.customTimeEnd}
-                      </p>
-                    )}
-                  </div>
-                </div>
-
-                <div className="border-t pt-4">
-                  <p className="text-sm text-gray-500 mb-2">目标人群优先级</p>
-                  {planDetails.distributionMethod === "priority" ? (
-                    <div className="space-y-2">
-                      {planDetails.targetGroups.map((group, index) => (
-                        <div key={group} className="flex items-center">
-                          <Badge variant="outline" className="mr-2">
-                            {index + 1}
+              <CardContent>
+                <div className="space-y-4">
+                  {plan.pools.map((pool) => (
+                    <div key={pool.id} className="p-3 bg-gray-50 rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="font-medium">{pool.name}</div>
+                        <Badge variant="outline">{pool.count} 人</Badge>
+                      </div>
+                      <div className="flex flex-wrap gap-2 mt-2">
+                        {pool.keywords.map((keyword, idx) => (
+                          <Badge key={idx} variant="secondary" className="bg-white">
+                            {keyword}
                           </Badge>
-                          <span>{group}</span>
-                        </div>
-                      ))}
+                        ))}
+                      </div>
                     </div>
-                  ) : (
-                    <p className="text-gray-500">当前分发方式不使用优先级</p>
-                  )}
+                  ))}
                 </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
 
-                <div className="border-t pt-4">
-                  <p className="text-sm text-gray-500 mb-2">分发比例设置</p>
-                  {planDetails.distributionMethod === "ratio" ? (
-                    <div className="space-y-2">
-                      {planDetails.targetGroups.map((group) => (
-                        <div key={group} className="flex items-center justify-between">
-                          <span>{group}</span>
-                          <Badge>{Math.floor(100 / planDetails.targetGroups.length)}%</Badge>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-gray-500">当前分发方式不使用比例设置</p>
-                  )}
+          <TabsContent value="stats" className="mt-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">分发统计</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="h-64 w-full">
+                  {/* 这里可以放置图表组件，例如使用 recharts 或其他图表库 */}
+                  <div className="h-full flex items-end justify-between gap-2">
+                    {plan.dailyStats.map((stat, idx) => (
+                      <div key={idx} className="flex flex-col items-center">
+                        <div
+                          className="bg-blue-500 rounded-t-sm w-10"
+                          style={{ height: `${(stat.distributed / 120) * 100}%` }}
+                        ></div>
+                        <div className="text-xs mt-1">{stat.date}</div>
+                        <div className="text-xs font-medium">{stat.distributed}</div>
+                      </div>
+                    ))}
+                  </div>
                 </div>
+                <div className="text-center mt-4 text-sm text-gray-500">最近7天分发数据统计</div>
               </CardContent>
             </Card>
           </TabsContent>
         </Tabs>
       </div>
+
+      <BottomNav />
     </div>
   )
 }
-
diff --git a/Cunkebao/app/workspace/traffic-distribution/components/distribution-rule-card.tsx b/Cunkebao/app/workspace/traffic-distribution/components/distribution-rule-card.tsx
new file mode 100644
index 00000000..e281f302
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/components/distribution-rule-card.tsx
@@ -0,0 +1,161 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { MoreHorizontal, Edit, Copy, Code, Trash2, Play, Pause } from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { useRouter } from "next/navigation"
+import { formatDate } from "@/app/lib/utils"
+
+// 分发规则类型定义
+export interface DistributionRule {
+  id: string
+  name: string
+  status: "active" | "paused" | "completed"
+  deviceCount: number
+  dailyDistribution: number
+  trafficPoolCount: number
+  totalDistributed: number
+  lastExecuted?: string
+  createdAt: string
+}
+
+interface DistributionRuleCardProps {
+  rule: DistributionRule
+  onDelete: (id: string) => void
+  onStatusChange: (id: string, status: "active" | "paused") => void
+}
+
+export function DistributionRuleCard({ rule, onDelete, onStatusChange }: DistributionRuleCardProps) {
+  const router = useRouter()
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  // 状态标签颜色映射
+  const statusColorMap = {
+    active: "bg-green-100 text-green-800 hover:bg-green-200",
+    paused: "bg-yellow-100 text-yellow-800 hover:bg-yellow-200",
+    completed: "bg-blue-100 text-blue-800 hover:bg-blue-200",
+  }
+
+  // 状态文本映射
+  const statusTextMap = {
+    active: "进行中",
+    paused: "已暂停",
+    completed: "已完成",
+  }
+
+  // 处理编辑按钮点击
+  const handleEdit = () => {
+    router.push(`/workspace/traffic-distribution/${rule.id}/edit`)
+  }
+
+  // 处理复制按钮点击
+  const handleCopy = () => {
+    // 实现复制功能
+    console.log("复制分发规则:", rule.id)
+  }
+
+  // 处理接口按钮点击
+  const handleAPI = () => {
+    router.push(`/workspace/traffic-distribution/${rule.id}/api`)
+  }
+
+  // 处理删除按钮点击
+  const handleDelete = () => {
+    onDelete(rule.id)
+  }
+
+  // 处理状态切换
+  const handleStatusToggle = () => {
+    const newStatus = rule.status === "active" ? "paused" : "active"
+    onStatusChange(rule.id, newStatus)
+  }
+
+  return (
+    <Card className="w-full hover:shadow-md transition-shadow duration-200">
+      <CardContent className="p-4">
+        <div className="flex justify-between items-start">
+          <div className="flex flex-col">
+            <div className="flex items-center gap-2 mb-2">
+              <h3 className="text-lg font-semibold">{rule.name}</h3>
+              <Badge className={statusColorMap[rule.status]}>{statusTextMap[rule.status]}</Badge>
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-3">
+              <div className="bg-gray-50 rounded-lg p-3 text-center">
+                <div className="text-sm text-gray-500">日均分发人数</div>
+                <div className="text-xl font-bold mt-1">{rule.dailyDistribution}</div>
+              </div>
+
+              <div className="bg-gray-50 rounded-lg p-3 text-center">
+                <div className="text-sm text-gray-500">分发设备</div>
+                <div className="text-xl font-bold mt-1">{rule.deviceCount}</div>
+              </div>
+
+              <div className="bg-gray-50 rounded-lg p-3 text-center">
+                <div className="text-sm text-gray-500">流量池</div>
+                <div className="text-xl font-bold mt-1">{rule.trafficPoolCount}</div>
+              </div>
+
+              <div className="bg-gray-50 rounded-lg p-3 text-center">
+                <div className="text-sm text-gray-500">日均分发量</div>
+                <div className="text-xl font-bold mt-1">{rule.dailyDistribution}</div>
+              </div>
+
+              <div className="bg-gray-50 rounded-lg p-3 text-center">
+                <div className="text-sm text-gray-500">总流量池数量</div>
+                <div className="text-xl font-bold mt-1">{rule.totalDistributed}</div>
+              </div>
+            </div>
+          </div>
+
+          <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <DropdownMenuTrigger className="focus:outline-none">
+              <div className="p-2 rounded-full hover:bg-gray-100">
+                <MoreHorizontal className="h-5 w-5 text-gray-500" />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[180px]">
+              <DropdownMenuItem onClick={handleEdit} className="cursor-pointer">
+                <Edit className="mr-2 h-4 w-4" />
+                <span>编辑计划</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleCopy} className="cursor-pointer">
+                <Copy className="mr-2 h-4 w-4" />
+                <span>复制计划</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleAPI} className="cursor-pointer">
+                <Code className="mr-2 h-4 w-4" />
+                <span>计划接口</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleStatusToggle} className="cursor-pointer">
+                {rule.status === "active" ? (
+                  <>
+                    <Pause className="mr-2 h-4 w-4" />
+                    <span>暂停计划</span>
+                  </>
+                ) : (
+                  <>
+                    <Play className="mr-2 h-4 w-4" />
+                    <span>启动计划</span>
+                  </>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleDelete} className="cursor-pointer text-red-600">
+                <Trash2 className="mr-2 h-4 w-4" />
+                <span>删除计划</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {rule.lastExecuted && (
+          <div className="flex items-center text-sm text-gray-500 mt-4">
+            <span className="flex items-center">上次执行: {formatDate(rule.lastExecuted)}</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/Cunkebao/app/workspace/traffic-distribution/components/distribution-rule-form.tsx b/Cunkebao/app/workspace/traffic-distribution/components/distribution-rule-form.tsx
new file mode 100644
index 00000000..63f5c8b2
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/components/distribution-rule-form.tsx
@@ -0,0 +1,280 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { Switch } from "@/components/ui/switch"
+import { useToast } from "@/components/ui/use-toast"
+import TrafficPoolSelector from "../components/traffic-pool-selector"
+import { useRouter } from "next/navigation"
+
+// 定义分发规则表单的属性接口
+interface DistributionRuleFormProps {
+  initialData?: {
+    id?: string
+    name?: string
+    description?: string
+    trafficPoolId?: string
+    trafficPoolName?: string
+    keywords?: string[]
+    isActive?: boolean
+    distributionRatio?: number
+    targetAudience?: string
+  }
+  onSubmit?: (data: any) => void
+  isEdit?: boolean
+}
+
+// 导出分发规则表单组件
+export default function DistributionRuleForm({
+  initialData = {},
+  onSubmit,
+  isEdit = false,
+}: DistributionRuleFormProps) {
+  const router = useRouter()
+  const { toast } = useToast()
+
+  // 表单状态
+  const [formData, setFormData] = useState({
+    name: initialData.name || "",
+    description: initialData.description || "",
+    trafficPoolId: initialData.trafficPoolId || "",
+    trafficPoolName: initialData.trafficPoolName || "",
+    keywords: initialData.keywords || [],
+    isActive: initialData.isActive !== undefined ? initialData.isActive : true,
+    distributionRatio: initialData.distributionRatio || 50,
+    targetAudience: initialData.targetAudience || "",
+  })
+
+  const [keywordInput, setKeywordInput] = useState("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // 处理表单输入变化
+  const handleChange = (field: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  // 处理关键词添加
+  const handleAddKeyword = () => {
+    if (keywordInput.trim() && !formData.keywords.includes(keywordInput.trim())) {
+      setFormData((prev) => ({
+        ...prev,
+        keywords: [...prev.keywords, keywordInput.trim()],
+      }))
+      setKeywordInput("")
+    }
+  }
+
+  // 处理关键词删除
+  const handleRemoveKeyword = (keyword: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      keywords: prev.keywords.filter((k) => k !== keyword),
+    }))
+  }
+
+  // 处理流量池选择
+  const handlePoolSelect = (poolId: string, poolName: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      trafficPoolId: poolId,
+      trafficPoolName: poolName,
+    }))
+  }
+
+  // 处理表单提交
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    try {
+      // 表单验证
+      if (!formData.name) {
+        toast({
+          title: "错误",
+          description: "请输入分发规则名称",
+          variant: "destructive",
+        })
+        setIsSubmitting(false)
+        return
+      }
+
+      if (!formData.trafficPoolId) {
+        toast({
+          title: "错误",
+          description: "请选择流量池",
+          variant: "destructive",
+        })
+        setIsSubmitting(false)
+        return
+      }
+
+      // 如果有onSubmit回调，则调用
+      if (onSubmit) {
+        await onSubmit(formData)
+      } else {
+        // 模拟API调用
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
+        toast({
+          title: isEdit ? "更新成功" : "创建成功",
+          description: isEdit ? "流量分发规则已成功更新" : "新的流量分发规则已创建",
+        })
+
+        // 返回列表页
+        router.push("/workspace/traffic-distribution")
+      }
+    } catch (error) {
+      console.error("提交表单时出错:", error)
+      toast({
+        title: "提交失败",
+        description: "保存分发规则时发生错误，请重试",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle>{isEdit ? "编辑流量分发规则" : "创建新的流量分发规则"}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 基本信息 */}
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="name">规则名称</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => handleChange("name", e.target.value)}
+                placeholder="输入规则名称"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="description">规则描述</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => handleChange("description", e.target.value)}
+                placeholder="描述该规则的用途和目标"
+                className="mt-1"
+              />
+            </div>
+          </div>
+
+          {/* 流量池选择 */}
+          <div className="space-y-2">
+            <Label>选择流量池</Label>
+            <TrafficPoolSelector selectedPoolId={formData.trafficPoolId} onSelect={handlePoolSelect} />
+            {formData.trafficPoolName && (
+              <div className="text-sm text-muted-foreground mt-1">已选择: {formData.trafficPoolName}</div>
+            )}
+          </div>
+
+          {/* 关键词设置 */}
+          <div className="space-y-2">
+            <Label>关键词设置</Label>
+            <div className="flex space-x-2">
+              <Input
+                value={keywordInput}
+                onChange={(e) => setKeywordInput(e.target.value)}
+                placeholder="添加关键词"
+                className="flex-1"
+                onKeyPress={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault()
+                    handleAddKeyword()
+                  }
+                }}
+              />
+              <Button type="button" onClick={handleAddKeyword}>
+                添加
+              </Button>
+            </div>
+
+            {formData.keywords.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-2">
+                {formData.keywords.map((keyword, index) => (
+                  <div
+                    key={index}
+                    className="bg-secondary text-secondary-foreground px-3 py-1 rounded-full flex items-center text-sm"
+                  >
+                    {keyword}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveKeyword(keyword)}
+                      className="ml-2 text-secondary-foreground/70 hover:text-secondary-foreground"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* 目标受众 */}
+          <div>
+            <Label htmlFor="targetAudience">目标受众</Label>
+            <Select value={formData.targetAudience} onValueChange={(value) => handleChange("targetAudience", value)}>
+              <SelectTrigger>
+                <SelectValue placeholder="选择目标受众" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">所有用户</SelectItem>
+                <SelectItem value="new">新用户</SelectItem>
+                <SelectItem value="returning">回访用户</SelectItem>
+                <SelectItem value="highValue">高价值用户</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 分发比例 */}
+          <div className="space-y-2">
+            <Label htmlFor="distributionRatio">分发比例 ({formData.distributionRatio}%)</Label>
+            <Input
+              id="distributionRatio"
+              type="range"
+              min="1"
+              max="100"
+              value={formData.distributionRatio}
+              onChange={(e) => handleChange("distributionRatio", Number.parseInt(e.target.value))}
+              className="mt-1"
+            />
+          </div>
+
+          {/* 启用状态 */}
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="isActive"
+              checked={formData.isActive}
+              onCheckedChange={(checked) => handleChange("isActive", checked)}
+            />
+            <Label htmlFor="isActive">启用该规则</Label>
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex justify-between">
+          <Button type="button" variant="outline" onClick={() => router.push("/workspace/traffic-distribution")}>
+            取消
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? "保存中..." : isEdit ? "更新规则" : "创建规则"}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+  )
+}
diff --git a/Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx b/Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx
index ebe2105e..028d2b7e 100644
--- a/Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx
@@ -177,4 +177,3 @@ export default function KeywordSelector({ onSelect, initialSelected = [] }: Keyw
     </div>
   )
 }
-
diff --git a/Cunkebao/app/workspace/traffic-distribution/components/traffic-pool-selector.tsx b/Cunkebao/app/workspace/traffic-distribution/components/traffic-pool-selector.tsx
new file mode 100644
index 00000000..f656082b
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/components/traffic-pool-selector.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { useDebounce } from "@/hooks/use-debounce"
+import { Skeleton } from "@/components/ui/skeleton"
+
+// 模拟流量池数据
+const mockTrafficPools = [
+  { id: "1", name: "抖音流量池", source: "douyin", count: 1250 },
+  { id: "2", name: "微信流量池", source: "wechat", count: 3420 },
+  { id: "3", name: "电话流量池", source: "phone", count: 890 },
+  { id: "4", name: "海报流量池", source: "poster", count: 1670 },
+  { id: "5", name: "高意向客户池", source: "mixed", count: 520 },
+  { id: "6", name: "新客户流量池", source: "mixed", count: 780 },
+]
+
+interface TrafficPoolSelectorProps {
+  selectedPoolId?: string
+  onSelect: (poolId: string, poolName: string) => void
+}
+
+export default function TrafficPoolSelector({ selectedPoolId, onSelect }: TrafficPoolSelectorProps) {
+  const [searchTerm, setSearchTerm] = useState("")
+  const [isLoading, setIsLoading] = useState(true)
+  const [pools, setPools] = useState<any[]>([])
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 300)
+
+  // 加载流量池数据
+  useEffect(() => {
+    const fetchPools = async () => {
+      setIsLoading(true)
+      try {
+        // 模拟API调用
+        await new Promise((resolve) => setTimeout(resolve, 800))
+
+        // 根据搜索词过滤
+        const filteredPools = mockTrafficPools.filter((pool) =>
+          pool.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()),
+        )
+
+        setPools(filteredPools)
+      } catch (error) {
+        console.error("获取流量池数据失败:", error)
+        setPools([])
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchPools()
+  }, [debouncedSearchTerm])
+
+  return (
+    <div className="space-y-4">
+      <Input
+        placeholder="搜索流量池..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        className="mb-4"
+      />
+
+      {isLoading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <Card key={i} className="cursor-pointer">
+              <CardContent className="p-4">
+                <Skeleton className="h-6 w-3/4 mb-2" />
+                <Skeleton className="h-4 w-1/2" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : pools.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {pools.map((pool) => (
+            <Card
+              key={pool.id}
+              className={`cursor-pointer transition-all ${
+                selectedPoolId === pool.id ? "border-primary bg-primary/5" : "hover:border-primary/50"
+              }`}
+              onClick={() => onSelect(pool.id, pool.name)}
+            >
+              <CardContent className="p-4">
+                <div className="font-medium">{pool.name}</div>
+                <div className="text-sm text-muted-foreground">{pool.count} 条数据</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-8">
+          <p className="text-muted-foreground">未找到匹配的流量池</p>
+          <Button variant="link" className="mt-2" onClick={() => setSearchTerm("")}>
+            清除搜索
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/Cunkebao/app/workspace/traffic-distribution/loading.tsx b/Cunkebao/app/workspace/traffic-distribution/loading.tsx
index 4a24822d..0f366f63 100644
--- a/Cunkebao/app/workspace/traffic-distribution/loading.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/loading.tsx
@@ -85,4 +85,3 @@ export default function TrafficDistributionLoading() {
     </div>
   )
 }
-
diff --git a/Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx b/Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx
new file mode 100644
index 00000000..dcf72e12
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx b/Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx
new file mode 100644
index 00000000..e5809748
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx b/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx
new file mode 100644
index 00000000..d0225556
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/Cunkebao/app/workspace/traffic-distribution/new/components/traffic-pool-step.tsx b/Cunkebao/app/workspace/traffic-distribution/new/components/traffic-pool-step.tsx
new file mode 100644
index 00000000..ac57f74a
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/Cunkebao/app/workspace/traffic-distribution/new/page.tsx b/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
index 010c611f..02af0313 100644
--- a/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
+++ b/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>
   )
 }
diff --git a/Cunkebao/app/workspace/traffic-distribution/page.tsx b/Cunkebao/app/workspace/traffic-distribution/page.tsx
index dcd971f7..c9f3050a 100644
--- a/Cunkebao/app/workspace/traffic-distribution/page.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/page.tsx
@@ -5,24 +5,23 @@ import { useRouter } from "next/navigation"
 import {
   ChevronLeft,
   Plus,
-  Filter,
-  Search,
-  RefreshCw,
-  MoreVertical,
-  Clock,
+  MoreHorizontal,
+  Play,
+  Pause,
+  Edit,
+  Trash2,
+  Eye,
   TrendingUp,
   Users,
-  Trash2,
+  Database,
+  Clock,
 } from "lucide-react"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { Switch } from "@/components/ui/switch"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import Link from "next/link"
+import BottomNav from "@/app/components/BottomNav"
 
 interface DistributionPlan {
   id: string
@@ -33,6 +32,8 @@ interface DistributionPlan {
   targetGroups: string[]
   totalUsers: number
   dailyAverage: number
+  deviceCount: number
+  poolCount: number
   lastUpdated: string
   createTime: string
   creator: string
@@ -40,9 +41,6 @@ interface DistributionPlan {
 
 export default function TrafficDistributionPage() {
   const router = useRouter()
-  const [showFilterDialog, setShowFilterDialog] = useState(false)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [sourceFilter, setSourceFilter] = useState("all")
   const [plans, setPlans] = useState<DistributionPlan[]>([
     {
       id: "1",
@@ -53,6 +51,8 @@ export default function TrafficDistributionPage() {
       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",
@@ -66,6 +66,8 @@ export default function TrafficDistributionPage() {
       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",
@@ -79,16 +81,16 @@ export default function TrafficDistributionPage() {
       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 filteredPlans = plans
-    .filter((plan) => searchQuery === "" || plan.name.toLowerCase().includes(searchQuery.toLowerCase()))
-    .filter((plan) => sourceFilter === "all" || plan.source === sourceFilter)
+  // 直接使用plans而不是filteredPlans
+  const plansList = plans
 
   const handleDelete = (planId: string) => {
     setPlans(plans.filter((plan) => plan.id !== planId))
@@ -111,7 +113,7 @@ export default function TrafficDistributionPage() {
   }
 
   return (
-    <div className="flex-1 bg-gray-50 min-h-screen">
+    <div className="flex-1 bg-gray-50 min-h-screen pb-16">
       <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">
@@ -130,136 +132,120 @@ export default function TrafficDistributionPage() {
       </header>
 
       <div className="p-4">
-        <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={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-            <Button variant="outline" size="icon" onClick={() => setShowFilterDialog(true)}>
-              <Filter className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="icon">
-              <RefreshCw className="h-4 w-4" />
+        {plansList.length === 0 ? (
+          <div className="text-center py-12 bg-white rounded-lg border mt-4">
+            <div className="text-gray-500">暂无数据</div>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={() => router.push("/workspace/traffic-distribution/new")}
+            >
+              创建分发计划
             </Button>
           </div>
-        </Card>
-
-        <div className="space-y-4">
-          {filteredPlans.length === 0 ? (
-            <div className="text-center py-12 bg-white rounded-lg border">
-              <div className="text-gray-500">暂无数据</div>
-              <Button
-                variant="outline"
-                className="mt-4"
-                onClick={() => router.push("/workspace/traffic-distribution/new")}
-              >
-                创建分发计划
-              </Button>
-            </div>
-          ) : (
-            filteredPlans.map((plan) => (
-              <Card key={plan.id} className="p-4">
-                <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center space-x-2">
-                    <span className="text-xl mr-1">{plan.sourceIcon}</span>
-                    <h3 className="font-medium">{plan.name}</h3>
-                    <Badge variant={plan.status === "active" ? "success" : "secondary"}>
-                      {plan.status === "active" ? "进行中" : "已暂停"}
-                    </Badge>
+        ) : (
+          <div className="space-y-4 mt-2">
+            {plansList.map((plan) => (
+              <Card key={plan.id} className="overflow-hidden">
+                {/* 卡片头部 */}
+                <div className="p-4 bg-white border-b flex items-center justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className="text-2xl">{plan.sourceIcon}</div>
+                    <div>
+                      <h3 className="font-medium text-lg">{plan.name}</h3>
+                      <div className="flex items-center space-x-2 mt-1">
+                        <Badge variant={plan.status === "active" ? "success" : "secondary"}>
+                          {plan.status === "active" ? "进行中" : "已暂停"}
+                        </Badge>
+                        {plan.targetGroups.map((group, index) => (
+                          <Badge key={index} variant="outline">
+                            {group}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
                   </div>
-                  <div className="flex items-center space-x-2">
-                    <Switch checked={plan.status === "active"} onCheckedChange={() => togglePlanStatus(plan.id)} />
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="sm">
-                          <MoreVertical className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent>
-                        <DropdownMenuItem onClick={() => handleView(plan.id)}>
-                          <Users className="h-4 w-4 mr-2" />
-                          查看
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleEdit(plan.id)}>
-                          <TrendingUp className="h-4 w-4 mr-2" />
-                          编辑
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleDelete(plan.id)}>
-                          <Trash2 className="h-4 w-4 mr-2" />
-                          删除
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => handleView(plan.id)}>
+                        <Eye className="mr-2 h-4 w-4" />
+                        查看详情
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleEdit(plan.id)}>
+                        <Edit className="mr-2 h-4 w-4" />
+                        编辑计划
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => togglePlanStatus(plan.id)}>
+                        {plan.status === "active" ? (
+                          <>
+                            <Pause className="mr-2 h-4 w-4" />
+                            暂停计划
+                          </>
+                        ) : (
+                          <>
+                            <Play className="mr-2 h-4 w-4" />
+                            启动计划
+                          </>
+                        )}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleDelete(plan.id)} className="text-red-600">
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        删除计划
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+
+                {/* 卡片内容 - 上3下2布局，图标在文字左侧 */}
+                <div className="bg-white">
+                  <div className="grid grid-cols-3">
+                    <div className="p-3 text-center border-r border-gray-200">
+                      <div className="text-lg font-semibold">{plan.dailyAverage}</div>
+                      <div className="text-xs text-gray-500 mt-1">日均分发人数</div>
+                    </div>
+                    <div className="p-3 text-center border-r border-gray-200">
+                      <div className="text-lg font-semibold">{plan.deviceCount}</div>
+                      <div className="text-xs text-gray-500 mt-1">分发设备</div>
+                    </div>
+                    <div className="p-3 text-center">
+                      <div className="text-lg font-semibold">{plan.poolCount}</div>
+                      <div className="text-xs text-gray-500 mt-1">流量池</div>
+                    </div>
+                  </div>
+                  {/* 横向分隔线 */}
+                  <div className="border-t border-gray-200 mx-auto w-full" style={{height: 0}} />
+                  <div className="grid grid-cols-2">
+                    <div className="p-3 text-center border-r border-gray-200">
+                      <div className="text-lg font-semibold">{plan.dailyAverage}</div>
+                      <div className="text-xs text-gray-500 mt-1">日均分发量</div>
+                    </div>
+                    <div className="p-3 text-center">
+                      <div className="text-lg font-semibold">{plan.totalUsers}</div>
+                      <div className="text-xs text-gray-500 mt-1">总流量池数量</div>
+                    </div>
                   </div>
                 </div>
 
-                <div className="grid grid-cols-2 gap-4 mb-4">
-                  <div className="text-sm text-gray-500">
-                    <div>目标人群：{plan.targetGroups.join(", ")}</div>
-                    <div>总流量：{plan.totalUsers} 人</div>
-                  </div>
-                  <div className="text-sm text-gray-500">
-                    <div>日均获取：{plan.dailyAverage} 人</div>
-                    <div>创建人：{plan.creator}</div>
-                  </div>
-                </div>
-
-                <div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
+                {/* 底部信息 */}
+                <div className="p-3 bg-gray-50 text-sm text-gray-500 flex items-center justify-between">
                   <div className="flex items-center">
-                    <Clock className="w-4 h-4 mr-1" />
-                    上次更新：{plan.lastUpdated}
+                    <Clock className="h-4 w-4 mr-1" />
+                    <span>上次执行: {plan.lastUpdated.split(" ")[0]}</span>
                   </div>
-                  <div>创建时间：{plan.createTime}</div>
+                  <div>创建人: {plan.creator}</div>
                 </div>
               </Card>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* 筛选弹窗 */}
-      <Dialog open={showFilterDialog} onOpenChange={setShowFilterDialog}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>筛选分发计划</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4 py-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">流量来源</label>
-              <Select value={sourceFilter} onValueChange={setSourceFilter}>
-                <SelectTrigger>
-                  <SelectValue placeholder="选择流量来源" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">全部来源</SelectItem>
-                  <SelectItem value="douyin">抖音</SelectItem>
-                  <SelectItem value="xiaohongshu">小红书</SelectItem>
-                  <SelectItem value="wechat">微信</SelectItem>
-                  <SelectItem value="weibo">微博</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex justify-end space-x-2 pt-2">
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setSourceFilter("all")
-                }}
-              >
-                重置
-              </Button>
-              <Button onClick={() => setShowFilterDialog(false)}>应用筛选</Button>
-            </div>
+            ))}
           </div>
-        </DialogContent>
-      </Dialog>
+        )}
+      </div>
+      <BottomNav />
     </div>
   )
 }
diff --git a/Cunkebao/lib/api.ts b/Cunkebao/lib/api.ts
index 9841e91b..9f4b7208 100644
--- a/Cunkebao/lib/api.ts
+++ b/Cunkebao/lib/api.ts
@@ -97,7 +97,7 @@ export const request = async <T>(
         localStorage.removeItem('token');
         localStorage.removeItem('userInfo');
         // 使用 window.location 进行一次性重定向
-        window.location.href = '/login';
+          window.location.href = '/login';
       }
       throw new Error(result.msg || '登录已过期，请重新登录');
     }