refactor: overhaul UI for streamlined user experience
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>
This commit is contained in:
v0
212
components/traffic-pool/pool-analytics.tsx
Normal file
212
components/traffic-pool/pool-analytics.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user