存客宝 React

Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx

@@ -0,0 +1,485 @@
+"use client"
+
+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"
+
+// 模拟数据
+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",
+    userFilters: [],
+    excludeTags: [],
+  },
+  selectedUsers: [],
+}
+
+export default function EditTrafficDistributionPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    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,
+  })
+
+  // 加载计划详情
+  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])
+
+  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 = () => {
+    // 这里处理表单提交逻辑
+    console.log("提交表单数据:", formData)
+    router.push(`/workspace/traffic-distribution/${params.id}`)
+  }
+
+  const isStep1Valid = formData.name && formData.source
+  const isStep2Valid = formData.targetGroups.length > 0 || formData.targetDevices.length > 0
+  const isStep3Valid = true // 规则设置可以有默认值
+
+  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: <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>
+
+        {/* 步骤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>
+
+              <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} 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>
+  )
+}
+

Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx

@@ -0,0 +1,99 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export default function TrafficDistributionDetailLoading() {
+  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" disabled>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <Skeleton className="h-6 w-40" />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-8 w-32" />
+            <Skeleton className="h-9 w-20" />
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4">
+        {/* 标签页骨架 */}
+        <Skeleton className="h-10 w-full mb-6" />
+
+        {/* 内容骨架 */}
+        <div 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>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-8 w-24" />
+                  </div>
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-8 w-24" />
+                  </div>
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* 图表骨架 */}
+          <Card>
+            <CardHeader className="pb-2">
+              <div className="flex items-center justify-between">
+                <Skeleton className="h-6 w-24" />
+                <Skeleton className="h-9 w-32" />
+              </div>
+            </CardHeader>
+            <CardContent className="p-4">
+              <Skeleton className="h-64 w-full" />
+            </CardContent>
+          </Card>
+
+          {/* 基本信息骨架 */}
+          <Card>
+            <CardHeader>
+              <Skeleton className="h-6 w-24" />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i}>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-6 w-32" />
+                  </div>
+                ))}
+              </div>
+
+              <div>
+                <Skeleton className="h-4 w-16 mb-2" />
+                <div className="flex flex-wrap gap-2">
+                  {[1, 2, 3].map((i) => (
+                    <Skeleton key={i} className="h-6 w-16 rounded-full" />
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx

@@ -0,0 +1,324 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Settings, Users, BarChart3, Download, Clock } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+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"
+
+// 模拟数据
+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",
+  },
+}
+
+// 模拟流量数据
+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 } }) {
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState("overview")
+  const [isActive, setIsActive] = useState(planDetails.status === "active")
+  const [timeRange, setTimeRange] = useState("7days")
+
+  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={() => 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>
+          </div>
+        </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>
+          </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>
+
+            {/* 基本信息 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>基本信息</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}
+                      </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>
+              </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">
+            <Card>
+              <CardHeader>
+                <CardTitle>分发规则</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}
+                          </Badge>
+                          <span>{group}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-gray-500">当前分发方式不使用优先级</p>
+                  )}
+                </div>
+
+                <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>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+