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>
421 lines
17 KiB
TypeScript
421 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
} from "recharts"
|
|
import { Download, FileDown, Tag, User, CheckCircle, Clock } from "lucide-react"
|
|
|
|
export function TaskResults() {
|
|
// 模拟数据
|
|
const tagDistributionData = [
|
|
{ name: "京东活跃用户", value: 5840 },
|
|
{ name: "电商偏好", value: 4250 },
|
|
{ name: "高消费用户", value: 1850 },
|
|
{ name: "品质生活", value: 2100 },
|
|
{ name: "数码爱好者", value: 1450 },
|
|
]
|
|
|
|
const userActionData = [
|
|
{ name: "登录成功", value: 8125 },
|
|
{ name: "浏览商品", value: 6540 },
|
|
{ name: "加入购物车", value: 3250 },
|
|
{ name: "完成购买", value: 1850 },
|
|
{ name: "评价商品", value: 980 },
|
|
]
|
|
|
|
const timeDistributionData = [
|
|
{ name: "0-5分钟", count: 2450 },
|
|
{ name: "5-10分钟", count: 3650 },
|
|
{ name: "10-20分钟", count: 2850 },
|
|
{ name: "20-30分钟", count: 1950 },
|
|
{ name: "30+分钟", count: 1600 },
|
|
]
|
|
|
|
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"]
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>任务结果分析</CardTitle>
|
|
<Button variant="outline" size="sm">
|
|
<FileDown className="mr-2 h-4 w-4" />
|
|
导出报告
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-medium">京东活跃用户标记</h3>
|
|
<div className="flex items-center space-x-2 mt-1">
|
|
<Badge className="bg-green-100 text-green-800">已完成</Badge>
|
|
<span className="text-sm text-muted-foreground">完成时间: 2023-07-15 16:15:30</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
|
<div className="flex items-center space-x-2">
|
|
<User className="h-5 w-5 text-blue-500" />
|
|
<span className="text-sm font-medium">目标用户</span>
|
|
</div>
|
|
<div className="mt-2">
|
|
<span className="text-2xl font-bold">12,500</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
|
<div className="flex items-center space-x-2">
|
|
<CheckCircle className="h-5 w-5 text-green-500" />
|
|
<span className="text-sm font-medium">成功处理</span>
|
|
</div>
|
|
<div className="mt-2">
|
|
<span className="text-2xl font-bold">12,380</span>
|
|
<span className="text-sm text-muted-foreground ml-2">99.0%</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
|
<div className="flex items-center space-x-2">
|
|
<Tag className="h-5 w-5 text-purple-500" />
|
|
<span className="text-sm font-medium">打标签用户</span>
|
|
</div>
|
|
<div className="mt-2">
|
|
<span className="text-2xl font-bold">8,450</span>
|
|
<span className="text-sm text-muted-foreground ml-2">67.6%</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
|
<div className="flex items-center space-x-2">
|
|
<Clock className="h-5 w-5 text-orange-500" />
|
|
<span className="text-sm font-medium">执行时间</span>
|
|
</div>
|
|
<div className="mt-2">
|
|
<span className="text-2xl font-bold">1h 45m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs defaultValue="overview" className="space-y-4">
|
|
<TabsList>
|
|
<TabsTrigger value="overview">结果概览</TabsTrigger>
|
|
<TabsTrigger value="tags">标签分析</TabsTrigger>
|
|
<TabsTrigger value="users">用户分析</TabsTrigger>
|
|
<TabsTrigger value="details">详细数据</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview" className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-4">标签分布</h4>
|
|
<div className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={tagDistributionData}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
|
>
|
|
{tagDistributionData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-4">用户行为分布</h4>
|
|
<div className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={userActionData}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="value" fill="#8884d8" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-4">用户停留时间分布</h4>
|
|
<div className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={timeDistributionData}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="count" fill="#82ca9d" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="tags" className="space-y-4">
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>标签名称</TableHead>
|
|
<TableHead>用户数量</TableHead>
|
|
<TableHead>占比</TableHead>
|
|
<TableHead>标签分类</TableHead>
|
|
<TableHead>创建时间</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell className="font-medium">京东活跃用户</TableCell>
|
|
<TableCell>5,840</TableCell>
|
|
<TableCell>46.7%</TableCell>
|
|
<TableCell>行为特征</TableCell>
|
|
<TableCell>2023-07-15 15:30:25</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">电商偏好</TableCell>
|
|
<TableCell>4,250</TableCell>
|
|
<TableCell>34.0%</TableCell>
|
|
<TableCell>偏好特征</TableCell>
|
|
<TableCell>2023-07-15 15:35:10</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">高消费用户</TableCell>
|
|
<TableCell>1,850</TableCell>
|
|
<TableCell>14.8%</TableCell>
|
|
<TableCell>价值特征</TableCell>
|
|
<TableCell>2023-07-15 15:40:30</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">品质生活</TableCell>
|
|
<TableCell>2,100</TableCell>
|
|
<TableCell>16.8%</TableCell>
|
|
<TableCell>偏好特征</TableCell>
|
|
<TableCell>2023-07-15 15:45:15</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">数码爱好者</TableCell>
|
|
<TableCell>1,450</TableCell>
|
|
<TableCell>11.6%</TableCell>
|
|
<TableCell>偏好特征</TableCell>
|
|
<TableCell>2023-07-15 15:50:05</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="users" className="space-y-4">
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>用户分类</TableHead>
|
|
<TableHead>数量</TableHead>
|
|
<TableHead>占比</TableHead>
|
|
<TableHead>平均停留时间</TableHead>
|
|
<TableHead>平均交互次数</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell className="font-medium">活跃购买用户</TableCell>
|
|
<TableCell>3,250</TableCell>
|
|
<TableCell>26.0%</TableCell>
|
|
<TableCell>25分钟</TableCell>
|
|
<TableCell>12.5</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">浏览未购买用户</TableCell>
|
|
<TableCell>4,850</TableCell>
|
|
<TableCell>38.8%</TableCell>
|
|
<TableCell>15分钟</TableCell>
|
|
<TableCell>8.2</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">短时访问用户</TableCell>
|
|
<TableCell>2,450</TableCell>
|
|
<TableCell>19.6%</TableCell>
|
|
<TableCell>3分钟</TableCell>
|
|
<TableCell>2.1</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">登录未浏览用户</TableCell>
|
|
<TableCell>1,830</TableCell>
|
|
<TableCell>14.6%</TableCell>
|
|
<TableCell>1分钟</TableCell>
|
|
<TableCell>0.5</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">登录失败用户</TableCell>
|
|
<TableCell>120</TableCell>
|
|
<TableCell>1.0%</TableCell>
|
|
<TableCell>-</TableCell>
|
|
<TableCell>-</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="details" className="space-y-4">
|
|
<div className="flex justify-end mb-4">
|
|
<Button variant="outline" size="sm">
|
|
<Download className="mr-2 h-4 w-4" />
|
|
导出详细数据
|
|
</Button>
|
|
</div>
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>用户ID</TableHead>
|
|
<TableHead>处理时间</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead>添加标签</TableHead>
|
|
<TableHead>停留时间</TableHead>
|
|
<TableHead>交互次数</TableHead>
|
|
<TableHead>详情</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell>user_12345</TableCell>
|
|
<TableCell>2023-07-15 14:32:15</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-green-100 text-green-800">成功</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
<Badge variant="outline" className="flex items-center gap-1">
|
|
<Tag className="h-3 w-3" />
|
|
京东活跃用户
|
|
</Badge>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>18分钟</TableCell>
|
|
<TableCell>9</TableCell>
|
|
<TableCell>登录成功, 近30天活跃度高</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>user_12346</TableCell>
|
|
<TableCell>2023-07-15 14:32:18</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-green-100 text-green-800">成功</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
<Badge variant="outline" className="flex items-center gap-1">
|
|
<Tag className="h-3 w-3" />
|
|
京东活跃用户
|
|
</Badge>
|
|
<Badge variant="outline" className="flex items-center gap-1">
|
|
<Tag className="h-3 w-3" />
|
|
电商偏好
|
|
</Badge>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>25分钟</TableCell>
|
|
<TableCell>15</TableCell>
|
|
<TableCell>登录成功, 购买频率高</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>user_12347</TableCell>
|
|
<TableCell>2023-07-15 14:32:20</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-red-100 text-red-800">失败</Badge>
|
|
</TableCell>
|
|
<TableCell>-</TableCell>
|
|
<TableCell>-</TableCell>
|
|
<TableCell>-</TableCell>
|
|
<TableCell>登录失败, 账号异常</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>user_12348</TableCell>
|
|
<TableCell>2023-07-15 14:32:25</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-green-100 text-green-800">成功</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
<Badge variant="outline" className="flex items-center gap-1">
|
|
<Tag className="h-3 w-3" />
|
|
京东活跃用户
|
|
</Badge>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>32分钟</TableCell>
|
|
<TableCell>12</TableCell>
|
|
<TableCell>登录成功, 浏览时间长</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>user_12349</TableCell>
|
|
<TableCell>2023-07-15 14:32:30</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-green-100 text-green-800">成功</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
<Badge variant="outline" className="flex items-center gap-1">
|
|
<Tag className="h-3 w-3" />
|
|
京东活跃用户
|
|
</Badge>
|
|
<Badge variant="outline" className="flex items-center gap-1">
|
|
<Tag className="h-3 w-3" />
|
|
高消费用户
|
|
</Badge>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>28分钟</TableCell>
|
|
<TableCell>18</TableCell>
|
|
<TableCell>登录成功, 消费金额高</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|