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>
213 lines
8.2 KiB
TypeScript
213 lines
8.2 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
|
|
export function PoolAnalytics() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold">流量池分析</h2>
|
|
<div className="flex space-x-2">
|
|
<Select defaultValue="7days">
|
|
<SelectTrigger className="w-[180px]">
|
|
<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>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">总流量池数量</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">12</div>
|
|
<p className="text-xs text-muted-foreground">较上月增长 2个</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">活跃流量池</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">8</div>
|
|
<p className="text-xs text-muted-foreground">较上月增长 1个</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">流量池转化率</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">24.8%</div>
|
|
<p className="text-xs text-muted-foreground">较上月提升 2.3%</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Tabs defaultValue="overview">
|
|
<TabsList>
|
|
<TabsTrigger value="overview">概览</TabsTrigger>
|
|
<TabsTrigger value="performance">性能分析</TabsTrigger>
|
|
<TabsTrigger value="conversion">转化分析</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="overview" className="space-y-4">
|
|
<Card className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>流量池增长趋势</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="h-[300px] flex items-center justify-center">
|
|
<p className="text-muted-foreground">图表功能已移除</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
<TabsContent value="performance" className="space-y-4">
|
|
<Card className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>流量池性能指标</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="h-[300px] flex items-center justify-center">
|
|
<p className="text-muted-foreground">图表功能已移除</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
<TabsContent value="conversion" className="space-y-4">
|
|
<Card className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>流量池转化路径</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="h-[300px] flex items-center justify-center">
|
|
<p className="text-muted-foreground">图表功能已移除</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 保持已有的 KeywordAnalytics 函数
|
|
export function KeywordAnalytics() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold">流量词分析</h2>
|
|
<div className="flex space-x-2">
|
|
<Select defaultValue="7days">
|
|
<SelectTrigger className="w-[180px]">
|
|
<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>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">总流量词数量</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">125</div>
|
|
<p className="text-xs text-muted-foreground">较上月增长 12%</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">匹配用户总数</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">24,521</div>
|
|
<p className="text-xs text-muted-foreground">较上月增长 8%</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">平均匹配率</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">68.3%</div>
|
|
<p className="text-xs text-muted-foreground">较上月提升 2.1%</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Tabs defaultValue="trends">
|
|
<TabsList>
|
|
<TabsTrigger value="trends">趋势分析</TabsTrigger>
|
|
<TabsTrigger value="distribution">分布分析</TabsTrigger>
|
|
<TabsTrigger value="performance">性能分析</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="trends" className="space-y-4">
|
|
<Card className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>流量词匹配趋势</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="h-[300px] flex items-center justify-center">
|
|
<p className="text-muted-foreground">图表功能已移除</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
<TabsContent value="distribution" className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Card className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>流量词来源分布</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="h-[250px] flex items-center justify-center">
|
|
<p className="text-muted-foreground">图表功能已移除</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>流量词分类分布</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="h-[250px] flex items-center justify-center">
|
|
<p className="text-muted-foreground">图表功能已移除</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="performance" className="space-y-4">
|
|
<Card className="p-4">
|
|
<CardHeader>
|
|
<CardTitle>流量词匹配性能</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<div className="h-[300px] flex items-center justify-center">
|
|
<p className="text-muted-foreground">图表功能已移除</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|