Files
users/components/traffic-pool/pool-analytics.tsx
v0 2408d50cb0 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>
2025-07-18 13:47:12 +00:00

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