fnvtk/ckb-SuperAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

存客宝 React

Browse Source
This commit is contained in:
柳清爽
2025-03-29 16:50:39 +08:00
parent caea0b4b99
commit 7e7c199996
388 changed files with 53282 additions and 2076 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx Normal file
View File

@@ -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>
)
}

99
Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx Normal file
View File

@@ -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>
)
}

324
Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx Normal file
View File

@@ -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>
)
}

180
Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx Normal file
View File

@@ -0,0 +1,180 @@
"use client"
import { useState } from "react"
import { Search, Plus, X } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
interface KeywordSelectorProps {
onSelect: (keywords: string[]) => void
initialSelected?: string[]
}
export default function KeywordSelector({ onSelect, initialSelected = [] }: KeywordSelectorProps) {
const [searchQuery, setSearchQuery] = useState("")
const [selectedKeywords, setSelectedKeywords] = useState<string[]>(initialSelected)
const [activeCategory, setActiveCategory] = useState("popular")
// 模拟关键词数据
const keywordCategories = {
popular: [
"电商运营",
"社交媒体",
"短视频",
"直播带货",
"私域流量",
"用户增长",
"品牌营销",
"内容创作",
"数据分析",
"SEO优化",
"付费推广",
"用户留存",
"转化率",
"客户服务",
"产品推荐",
],
industry: [
"美妆护肤",
"服装穿搭",
"数码科技",
"家居生活",
"母婴育儿",
"食品饮料",
"健康养生",
"教育培训",
"金融理财",
"旅游出行",
],
scenario: [
"节日促销",
"新品上市",
"会员活动",
"限时折扣",
"满减优惠",
"秒杀活动",
"拼团活动",
"签到奖励",
"复购激励",
"用户调研",
],
custom: ["我的标签1", "我的标签2", "我的标签3", "自定义标签", "个性化标签"],
}
const filteredKeywords = searchQuery
? Object.values(keywordCategories)
.flat()
.filter((kw) => kw.includes(searchQuery))
: keywordCategories[activeCategory as keyof typeof keywordCategories]
const handleKeywordToggle = (keyword: string) => {
let newSelected
if (selectedKeywords.includes(keyword)) {
newSelected = selectedKeywords.filter((k) => k !== keyword)
} else {
newSelected = [...selectedKeywords, keyword]
}
setSelectedKeywords(newSelected)
onSelect(newSelected)
}
const handleRemoveKeyword = (keyword: string) => {
const newSelected = selectedKeywords.filter((k) => k !== keyword)
setSelectedKeywords(newSelected)
onSelect(newSelected)
}
return (
<div className="space-y-4">
{/* 已选关键词展示 */}
{selectedKeywords.length > 0 && (
<div className="space-y-2">
<div className="text-sm font-medium">已选关键词</div>
<div className="flex flex-wrap gap-2">
{selectedKeywords.map((keyword) => (
<Badge key={keyword} variant="secondary" className="flex items-center gap-1 py-1">
{keyword}
<button
onClick={() => handleRemoveKeyword(keyword)}
className="ml-1 rounded-full hover:bg-gray-200 p-0.5"
>
<X className="h-3 w-3" />
</button>
</Badge>
))}
</div>
</div>
)}
{/* 搜索框 */}
<div className="relative">
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
<Input
placeholder="搜索关键词"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9"
/>
</div>
{/* 分类标签页 */}
<Tabs
defaultValue="popular"
value={activeCategory}
onValueChange={(value) => {
setActiveCategory(value)
setSearchQuery("")
}}
>
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="popular">热门</TabsTrigger>
<TabsTrigger value="industry">行业</TabsTrigger>
<TabsTrigger value="scenario">场景</TabsTrigger>
<TabsTrigger value="custom">自定义</TabsTrigger>
</TabsList>
</Tabs>
{/* 关键词列表 */}
<ScrollArea className="h-[300px]">
<div className="grid grid-cols-2 gap-2">
{filteredKeywords.map((keyword) => (
<Card
key={keyword}
className={`p-3 cursor-pointer hover:shadow-sm transition-shadow ${
selectedKeywords.includes(keyword) ? "bg-blue-50 border-blue-200" : ""
}`}
onClick={() => handleKeywordToggle(keyword)}
>
<div className="flex items-center justify-between">
<span className="text-sm">{keyword}</span>
{selectedKeywords.includes(keyword) && <div className="h-2 w-2 rounded-full bg-blue-500"></div>}
</div>
</Card>
))}
</div>
</ScrollArea>
{/* 添加自定义关键词 */}
<Button
variant="outline"
className="w-full"
onClick={() => {
if (searchQuery && !selectedKeywords.includes(searchQuery)) {
const newSelected = [...selectedKeywords, searchQuery]
setSelectedKeywords(newSelected)
onSelect(newSelected)
setSearchQuery("")
}
}}
>
<Plus className="h-4 w-4 mr-2" />
添加自定义关键词
</Button>
</div>
)
}

88
Cunkebao/app/workspace/traffic-distribution/loading.tsx Normal file
View File

@@ -0,0 +1,88 @@
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { ChevronLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
export default function TrafficDistributionLoading() {
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>
<h1 className="text-lg font-medium">流量分发</h1>
</div>
<Skeleton className="h-9 w-24" />
</div>
</header>
<div className="p-4 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-20 mb-2" />
<Skeleton className="h-8 w-16" />
</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-20 mb-2" />
<Skeleton className="h-8 w-16" />
</div>
<Skeleton className="h-8 w-8 rounded-full" />
</div>
</CardContent>
</Card>
</div>
{/* 分类标签页骨架 */}
<Skeleton className="h-10 w-full rounded-lg" />
{/* 计划列表骨架 */}
<div className="space-y-4">
{Array.from({ length: 3 }).map((_, i) => (
<Card key={i} className="overflow-hidden">
<CardContent className="p-6">
<div className="flex items-center justify-between mb-4">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-5 w-16 rounded-full" />
</div>
<Skeleton className="h-4 w-32 mb-4" />
<div className="flex gap-2 mb-4">
<Skeleton className="h-6 w-16 rounded-full" />
<Skeleton className="h-6 w-20 rounded-full" />
<Skeleton className="h-6 w-14 rounded-full" />
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Skeleton className="h-4 w-16 mb-2" />
<Skeleton className="h-6 w-20" />
</div>
<div>
<Skeleton className="h-4 w-16 mb-2" />
<Skeleton className="h-6 w-20" />
</div>
</div>
</CardContent>
<div className="bg-gray-50 p-4 flex justify-between">
<Skeleton className="h-8 w-20" />
<Skeleton className="h-8 w-24" />
</div>
</Card>
))}
</div>
</div>
</div>
)
}

61
Cunkebao/app/workspace/traffic-distribution/new/loading.tsx Normal file
View File

@@ -0,0 +1,61 @@
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 NewTrafficDistributionLoading() {
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>
<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">
{[1, 2, 3].map((step) => (
<div key={step} className="flex flex-col items-center">
<Skeleton className="w-8 h-8 rounded-full" />
<Skeleton className="h-4 w-16 mt-1" />
</div>
))}
</div>
<Skeleton className="h-1 w-full mt-2" />
</div>
{/* 表单骨架 */}
<Card>
<CardHeader>
<Skeleton className="h-6 w-32" />
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-10 w-full" />
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-24 w-full" />
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-10 w-full" />
</div>
<div className="pt-4 flex justify-end">
<Skeleton className="h-10 w-24" />
</div>
</CardContent>
</Card>
</div>
</div>
)
}

425
Cunkebao/app/workspace/traffic-distribution/new/page.tsx Normal file
View File

@@ -0,0 +1,425 @@
"use client"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Users, Target, Settings, ArrowRight, ArrowLeft, Smartphone } 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"
export default function NewTrafficDistributionPage() {
const router = useRouter()
const [currentStep, setCurrentStep] = useState(1)
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: [],
})
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")
}
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: <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>
{/* 步骤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} disabled={!formData.name}>
下一步
<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}
disabled={!formData.allDevices && (!formData.targetDevices || formData.targetDevices.length === 0)}
>
下一步
<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>
)}
</div>
{/* 流量池选择器 */}
<TrafficPoolSelector
open={formData.isPoolSelectorOpen}
onOpenChange={(open) => updateFormData("isPoolSelectorOpen", open)}
selectedUsers={formData.selectedUsers}
onSelect={(users) => updateFormData("selectedUsers", users)}
/>
</div>
)
}

266
Cunkebao/app/workspace/traffic-distribution/page.tsx Normal file
View File

@@ -0,0 +1,266 @@
"use client"
import { useState } from "react"
import { useRouter } from "next/navigation"
import {
ChevronLeft,
Plus,
Filter,
Search,
RefreshCw,
MoreVertical,
Clock,
TrendingUp,
Users,
Trash2,
} 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"
interface DistributionPlan {
id: string
name: string
status: "active" | "paused"
source: string
sourceIcon: string
targetGroups: string[]
totalUsers: number
dailyAverage: number
lastUpdated: string
createTime: string
creator: string
}
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",
name: "抖音直播引流计划",
status: "active",
source: "douyin",
sourceIcon: "🎬",
targetGroups: ["新客户", "潜在客户"],
totalUsers: 1250,
dailyAverage: 85,
lastUpdated: "2024-03-18 10:30:00",
createTime: "2024-03-10 08:30:00",
creator: "admin",
},
{
id: "2",
name: "小红书种草计划",
status: "active",
source: "xiaohongshu",
sourceIcon: "📱",
targetGroups: ["女性用户", "美妆爱好者"],
totalUsers: 980,
dailyAverage: 65,
lastUpdated: "2024-03-17 14:20:00",
createTime: "2024-03-12 09:15:00",
creator: "marketing",
},
{
id: "3",
name: "微信社群活动",
status: "paused",
source: "wechat",
sourceIcon: "💬",
targetGroups: ["老客户", "会员"],
totalUsers: 2340,
dailyAverage: 0,
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)
const handleDelete = (planId: string) => {
setPlans(plans.filter((plan) => plan.id !== planId))
}
const handleEdit = (planId: string) => {
router.push(`/workspace/traffic-distribution/${planId}/edit`)
}
const handleView = (planId: string) => {
router.push(`/workspace/traffic-distribution/${planId}`)
}
const togglePlanStatus = (planId: string) => {
setPlans(
plans.map((plan) =>
plan.id === planId ? { ...plan, status: plan.status === "active" ? "paused" : "active" } : plan,
),
)
}
return (
<div className="flex-1 bg-gray-50 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">流量分发</h1>
</div>
<Link href="/workspace/traffic-distribution/new">
<Button>
<Plus className="h-4 w-4 mr-2" />
新建分发
</Button>
</Link>
</div>
</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" />
</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>
<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>
</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="flex items-center">
<Clock className="w-4 h-4 mr-1" />
上次更新：{plan.lastUpdated}
</div>
<div>创建时间：{plan.createTime}</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>
)
}