2408d50cb0
Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
365 lines
14 KiB
TypeScript
365 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Search, Filter, Plus, Users, ArrowRight, BarChart } from "lucide-react"
|
|
|
|
export default function TrafficPoolPage() {
|
|
const [selectedCategory, setSelectedCategory] = useState("all")
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
|
|
// 模拟场景分类数据
|
|
const categories = [
|
|
{ id: "all", name: "所有场景" },
|
|
{ id: "user-assets", name: "用户资产" },
|
|
{ id: "street-vendor", name: "地摊相关" },
|
|
{ id: "fandeng", name: "樊登读书" },
|
|
{ id: "wow", name: "魔兽世界" },
|
|
{ id: "other", name: "其他场景" },
|
|
]
|
|
|
|
// 模拟流量池数据
|
|
const pools = [
|
|
{
|
|
id: "1",
|
|
name: "私域池",
|
|
description: "已转化为私域用户的高价值流量池",
|
|
userCount: 12500,
|
|
categories: ["用户资产", "樊登读书"],
|
|
conversionRate: 32,
|
|
status: "active",
|
|
growth: "+15%",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "公域池",
|
|
description: "尚未转化的公域流量用户池",
|
|
userCount: 45600,
|
|
categories: ["地摊相关"],
|
|
conversionRate: 8,
|
|
status: "active",
|
|
growth: "+23%",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "游戏池",
|
|
description: "游戏相关用户的流量池",
|
|
userCount: 28900,
|
|
categories: ["魔兽世界"],
|
|
conversionRate: 15,
|
|
status: "active",
|
|
growth: "+8%",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "休眠池",
|
|
description: "长期未活跃的休眠用户池",
|
|
userCount: 9800,
|
|
categories: ["用户资产", "地摊相关", "樊登读书", "魔兽世界"],
|
|
conversionRate: 3,
|
|
status: "inactive",
|
|
growth: "-5%",
|
|
},
|
|
]
|
|
|
|
// 过滤流量池
|
|
const filteredPools = pools.filter((pool) => {
|
|
const matchesSearch =
|
|
pool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
pool.description.toLowerCase().includes(searchQuery.toLowerCase())
|
|
|
|
const matchesCategory =
|
|
selectedCategory === "all" ||
|
|
pool.categories.some((cat) => {
|
|
const categoryObj = categories.find((c) => c.name === cat)
|
|
return categoryObj && categoryObj.id === selectedCategory
|
|
})
|
|
|
|
return matchesSearch && matchesCategory
|
|
})
|
|
|
|
// 模拟用户数据
|
|
const poolUsers = [
|
|
{ id: "1", name: "张三", source: "微信", joinDate: "2023-05-15", category: "用户资产", value: "高" },
|
|
{ id: "2", name: "李四", source: "抖音", joinDate: "2023-04-10", category: "地摊相关", value: "中" },
|
|
{ id: "3", name: "王五", source: "小红书", joinDate: "2023-03-05", category: "樊登读书", value: "低" },
|
|
{ id: "4", name: "赵六", source: "官网", joinDate: "2023-02-20", category: "魔兽世界", value: "高" },
|
|
{ id: "5", name: "钱七", source: "微信", joinDate: "2023-01-15", category: "用户资产", value: "中" },
|
|
]
|
|
|
|
return (
|
|
<div className="container mx-auto py-6 space-y-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">流量池管理</h1>
|
|
<p className="text-muted-foreground">按场景分类管理您的流量池和用户资源</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
创建新流量池
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row gap-4 items-center">
|
|
<div className="relative w-full md:max-w-sm">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="search"
|
|
placeholder="搜索流量池..."
|
|
className="pl-8"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<Select value={selectedCategory} onValueChange={setSelectedCategory}>
|
|
<SelectTrigger className="w-full md:w-[180px]">
|
|
<SelectValue placeholder="选择场景分类" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{categories.map((category) => (
|
|
<SelectItem key={category.id} value={category.id}>
|
|
{category.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Button variant="outline" size="icon" className="ml-auto">
|
|
<Filter className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<Tabs defaultValue="grid" className="w-full">
|
|
<TabsList className="grid w-full max-w-md grid-cols-3">
|
|
<TabsTrigger value="grid">卡片视图</TabsTrigger>
|
|
<TabsTrigger value="list">列表视图</TabsTrigger>
|
|
<TabsTrigger value="analytics">数据分析</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="grid" className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredPools.map((pool) => (
|
|
<Card key={pool.id} className={`${pool.status === "inactive" ? "border-dashed opacity-70" : ""}`}>
|
|
<CardHeader className="pb-2">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<CardTitle>{pool.name}</CardTitle>
|
|
<CardDescription>{pool.description}</CardDescription>
|
|
</div>
|
|
<Badge
|
|
className={pool.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}
|
|
>
|
|
{pool.status === "active" ? "活跃" : "休眠"}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center">
|
|
<Users className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
<span className="text-sm font-medium">用户数量</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<span className="font-bold">{pool.userCount.toLocaleString()}</span>
|
|
<span
|
|
className={`text-xs ml-2 ${pool.growth.startsWith("+") ? "text-green-600" : "text-red-600"}`}
|
|
>
|
|
{pool.growth}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center">
|
|
<ArrowRight className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
<span className="text-sm font-medium">转化率</span>
|
|
</div>
|
|
<span className="font-bold">{pool.conversionRate}%</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm font-medium">包含场景</span>
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{pool.categories.map((category, index) => (
|
|
<Badge key={index} variant="outline" className="bg-blue-50">
|
|
{category}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="pt-4 flex justify-end gap-2">
|
|
<Button variant="outline" size="sm">
|
|
查看详情
|
|
</Button>
|
|
<Button size="sm">管理用户</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="list" className="space-y-6">
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>流量池名称</TableHead>
|
|
<TableHead>用户数量</TableHead>
|
|
<TableHead>转化率</TableHead>
|
|
<TableHead>场景分类</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredPools.map((pool) => (
|
|
<TableRow key={pool.id}>
|
|
<TableCell>
|
|
<div>
|
|
<p className="font-medium">{pool.name}</p>
|
|
<p className="text-sm text-muted-foreground">{pool.description}</p>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center">
|
|
<span>{pool.userCount.toLocaleString()}</span>
|
|
<span
|
|
className={`text-xs ml-2 ${pool.growth.startsWith("+") ? "text-green-600" : "text-red-600"}`}
|
|
>
|
|
{pool.growth}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>{pool.conversionRate}%</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{pool.categories.map((category, index) => (
|
|
<Badge key={index} variant="outline" className="bg-blue-50">
|
|
{category}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
className={
|
|
pool.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
|
}
|
|
>
|
|
{pool.status === "active" ? "活跃" : "休眠"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" size="sm">
|
|
查看
|
|
</Button>
|
|
<Button size="sm">管理</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="analytics" className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>流量池用户分布</CardTitle>
|
|
<CardDescription>按场景分类的用户分布情况</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="h-80 flex items-center justify-center">
|
|
<div className="text-center text-muted-foreground flex flex-col items-center">
|
|
<BarChart className="h-10 w-10 mb-2" />
|
|
<p>流量池用户分布图表</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>转化率分析</CardTitle>
|
|
<CardDescription>各流量池的转化率对比</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="h-80 flex items-center justify-center">
|
|
<div className="text-center text-muted-foreground flex flex-col items-center">
|
|
<BarChart className="h-10 w-10 mb-2" />
|
|
<p>转化率对比图表</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>流量池用户列表</CardTitle>
|
|
<CardDescription>所有流量池中的用户</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>用户名</TableHead>
|
|
<TableHead>来源</TableHead>
|
|
<TableHead>加入日期</TableHead>
|
|
<TableHead>场景分类</TableHead>
|
|
<TableHead>用户价值</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{poolUsers.map((user) => (
|
|
<TableRow key={user.id}>
|
|
<TableCell className="font-medium">{user.name}</TableCell>
|
|
<TableCell>{user.source}</TableCell>
|
|
<TableCell>{user.joinDate}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" className="bg-blue-50">
|
|
{user.category}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
className={
|
|
user.value === "高"
|
|
? "bg-green-100 text-green-800"
|
|
: user.value === "中"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-red-100 text-red-800"
|
|
}
|
|
>
|
|
{user.value}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button variant="outline" size="sm">
|
|
查看详情
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|