255 lines
9.0 KiB
TypeScript
255 lines
9.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import {
|
|
ChevronLeft,
|
|
Plus,
|
|
MoreHorizontal,
|
|
Play,
|
|
Pause,
|
|
Edit,
|
|
Trash2,
|
|
Eye,
|
|
TrendingUp,
|
|
Users,
|
|
Database,
|
|
Clock,
|
|
} from "lucide-react"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
|
import Link from "next/link"
|
|
import BottomNav from "@/app/components/BottomNav"
|
|
|
|
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
|
|
}
|
|
|
|
export default function TrafficDistributionPage() {
|
|
const router = useRouter()
|
|
const [plans, setPlans] = useState<DistributionPlan[]>([
|
|
{
|
|
id: "1",
|
|
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",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "小红书种草计划",
|
|
status: "active",
|
|
source: "xiaohongshu",
|
|
sourceIcon: "📱",
|
|
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",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "微信社群活动",
|
|
status: "paused",
|
|
source: "wechat",
|
|
sourceIcon: "💬",
|
|
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",
|
|
},
|
|
])
|
|
|
|
// 直接使用plans而不是filteredPlans
|
|
const plansList = plans
|
|
|
|
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 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">流量分发</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">
|
|
{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>
|
|
) : (
|
|
<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>
|
|
|
|
<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>
|
|
|
|
{/* 卡片内容 - 参考场景获客的标签样式 */}
|
|
<div className="grid grid-cols-5 divide-x bg-white">
|
|
<div className="p-3 text-center">
|
|
<div className="text-xs text-gray-500 mb-1">日均分发人数</div>
|
|
<div className="text-lg font-semibold">{plan.dailyAverage}</div>
|
|
</div>
|
|
<div className="p-3 text-center">
|
|
<div className="text-xs text-gray-500 mb-1">分发设备</div>
|
|
<div className="text-lg font-semibold flex items-center justify-center">
|
|
<Users className="h-4 w-4 mr-1 text-blue-500" />
|
|
{plan.deviceCount}
|
|
</div>
|
|
</div>
|
|
<div className="p-3 text-center">
|
|
<div className="text-xs text-gray-500 mb-1">流量池</div>
|
|
<div className="text-lg font-semibold flex items-center justify-center">
|
|
<Database className="h-4 w-4 mr-1 text-green-500" />
|
|
{plan.poolCount}
|
|
</div>
|
|
</div>
|
|
<div className="p-3 text-center">
|
|
<div className="text-xs text-gray-500 mb-1">日均分发量</div>
|
|
<div className="text-lg font-semibold flex items-center justify-center">
|
|
<TrendingUp className="h-4 w-4 mr-1 text-amber-500" />
|
|
{plan.dailyAverage}
|
|
</div>
|
|
</div>
|
|
<div className="p-3 text-center">
|
|
<div className="text-xs text-gray-500 mb-1">总流量池数量</div>
|
|
<div className="text-lg font-semibold">{plan.totalUsers}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 底部信息 */}
|
|
<div className="p-3 bg-gray-50 text-sm text-gray-500 flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<Clock className="h-4 w-4 mr-1" />
|
|
<span>上次执行: {plan.lastUpdated.split(" ")[0]}</span>
|
|
</div>
|
|
<div>创建人: {plan.creator}</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<BottomNav />
|
|
</div>
|
|
)
|
|
}
|