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>
509 lines
22 KiB
TypeScript
509 lines
22 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 { BarChart, LineChart } from "@/components/charts"
|
|
import {
|
|
Activity,
|
|
ArrowUpRight,
|
|
Download,
|
|
Filter,
|
|
RefreshCw,
|
|
ShoppingCart,
|
|
TrendingUp,
|
|
MessageSquare,
|
|
} from "lucide-react"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
|
|
export default function ConversionPage() {
|
|
const [timeRange, setTimeRange] = useState("30days")
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 space-y-6">
|
|
{/* 页面标题和工具栏 */}
|
|
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">成交转化</h1>
|
|
<p className="text-muted-foreground mt-1">促进用户交易与转化的功能集合</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Select value={timeRange} onValueChange={setTimeRange}>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue placeholder="选择时间范围" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="7days">最近7天</SelectItem>
|
|
<SelectItem value="30days">最近30天</SelectItem>
|
|
<SelectItem value="90days">最近90天</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline" size="icon">
|
|
<Filter className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="icon">
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Download className="mr-2 h-4 w-4" />
|
|
导出报告
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 成交转化概览 */}
|
|
<Card className="border-none shadow-md overflow-hidden">
|
|
<CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<CardTitle>成交转化概览</CardTitle>
|
|
<CardDescription>用户交易与转化整体情况</CardDescription>
|
|
</div>
|
|
<Button variant="outline">
|
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
|
查看详情
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="text-sm font-medium text-blue-600">浏览转化率</div>
|
|
<div className="text-2xl font-bold mt-2">45.2%</div>
|
|
<div className="text-sm text-green-600 mt-1 flex items-center">
|
|
<ArrowUpRight className="h-4 w-4 mr-1" />
|
|
较上月提升 2.1%
|
|
</div>
|
|
</div>
|
|
<div className="bg-blue-100 p-2 rounded-full">
|
|
<Activity className="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<div className="flex justify-between text-xs mb-1">
|
|
<span>目标</span>
|
|
<span>50%</span>
|
|
</div>
|
|
<Progress value={90.4} className="h-1.5 bg-blue-100" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="text-sm font-medium text-green-600">购买转化率</div>
|
|
<div className="text-2xl font-bold mt-2">12.5%</div>
|
|
<div className="text-sm text-green-600 mt-1 flex items-center">
|
|
<ArrowUpRight className="h-4 w-4 mr-1" />
|
|
较上月提升 0.8%
|
|
</div>
|
|
</div>
|
|
<div className="bg-green-100 p-2 rounded-full">
|
|
<ShoppingCart className="h-5 w-5 text-green-600" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<div className="flex justify-between text-xs mb-1">
|
|
<span>目标</span>
|
|
<span>15%</span>
|
|
</div>
|
|
<Progress value={83.3} className="h-1.5 bg-green-100" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-none shadow-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="text-sm font-medium text-purple-600">场景转化率</div>
|
|
<div className="text-2xl font-bold mt-2">18.3%</div>
|
|
<div className="text-sm text-green-600 mt-1 flex items-center">
|
|
<ArrowUpRight className="h-4 w-4 mr-1" />
|
|
较上月提升 1.2%
|
|
</div>
|
|
</div>
|
|
<div className="bg-purple-100 p-2 rounded-full">
|
|
<MessageSquare className="h-5 w-5 text-purple-600" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<div className="flex justify-between text-xs mb-1">
|
|
<span>目标</span>
|
|
<span>20%</span>
|
|
</div>
|
|
<Progress value={91.5} className="h-1.5 bg-purple-100" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-gradient-to-br from-amber-50 to-yellow-50 border-none shadow-sm">
|
|
<CardContent className="p-4">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="text-sm font-medium text-amber-600">客单价</div>
|
|
<div className="text-2xl font-bold mt-2">¥245</div>
|
|
<div className="text-sm text-green-600 mt-1 flex items-center">
|
|
<ArrowUpRight className="h-4 w-4 mr-1" />
|
|
较上月提升 5.2%
|
|
</div>
|
|
</div>
|
|
<div className="bg-amber-100 p-2 rounded-full">
|
|
<TrendingUp className="h-5 w-5 text-amber-600" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<div className="flex justify-between text-xs mb-1">
|
|
<span>目标</span>
|
|
<span>¥250</span>
|
|
</div>
|
|
<Progress value={98} className="h-1.5 bg-amber-100" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 用户行为分析 */}
|
|
<Card className="border-none shadow-md overflow-hidden">
|
|
<CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<CardTitle>用户行为分析</CardTitle>
|
|
<CardDescription>用户行为与交互数据分析</CardDescription>
|
|
</div>
|
|
<Badge className="bg-blue-100 text-blue-800">转化</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="bg-white p-4 rounded-lg shadow-sm">
|
|
<h3 className="text-lg font-medium mb-3">用户行为分析</h3>
|
|
<BarChart
|
|
data={{
|
|
labels: ["浏览", "搜索", "点击", "加购", "下单", "支付", "分享"],
|
|
datasets: [
|
|
{
|
|
label: "行为占比(%)",
|
|
data: [100, 65, 45, 25, 15, 12, 8],
|
|
backgroundColor: "rgba(59, 130, 246, 0.8)",
|
|
},
|
|
],
|
|
}}
|
|
height={220}
|
|
/>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg shadow-sm">
|
|
<h3 className="text-lg font-medium mb-3">用户活跃度分析</h3>
|
|
<LineChart
|
|
data={{
|
|
labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
datasets: [
|
|
{
|
|
label: "活跃用户数",
|
|
data: [65000, 59000, 80000, 81000, 56000, 85000, 90000],
|
|
borderColor: "rgb(59, 130, 246)",
|
|
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
|
},
|
|
{
|
|
label: "平均停留时间(分钟)",
|
|
data: [12, 10, 14, 15, 11, 18, 20],
|
|
borderColor: "rgb(16, 185, 129)",
|
|
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
|
},
|
|
],
|
|
}}
|
|
height={220}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-lg">用户行为指标</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">平均活跃度</span>
|
|
<span className="text-sm font-medium">68.5%</span>
|
|
</div>
|
|
<Progress value={68.5} className="h-1.5" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">平均停留时间</span>
|
|
<span className="text-sm font-medium">12.5分钟</span>
|
|
</div>
|
|
<Progress value={62.5} className="h-1.5" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">互动率</span>
|
|
<span className="text-sm font-medium">45.2%</span>
|
|
</div>
|
|
<Progress value={45.2} className="h-1.5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 交易漏斗分析 */}
|
|
<Card className="border-none shadow-md overflow-hidden">
|
|
<CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<CardTitle>交易漏斗分析</CardTitle>
|
|
<CardDescription>用户交易转化漏斗分析</CardDescription>
|
|
</div>
|
|
<Badge className="bg-blue-100 text-blue-800">转化</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="bg-white p-4 rounded-lg shadow-sm">
|
|
<h3 className="text-lg font-medium mb-3">转化漏斗</h3>
|
|
<div className="flex flex-col items-center space-y-2 py-4">
|
|
<div className="w-full max-w-md">
|
|
<div className="relative pt-1">
|
|
<div className="flex mb-2 items-center justify-between">
|
|
<div>
|
|
<span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
|
|
浏览 (100%)
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-xs font-semibold inline-block text-blue-600">125,689</span>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
|
|
<div
|
|
style={{ width: "100%" }}
|
|
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full max-w-md">
|
|
<div className="relative pt-1">
|
|
<div className="flex mb-2 items-center justify-between">
|
|
<div>
|
|
<span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
|
|
加入购物车 (45%)
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-xs font-semibold inline-block text-blue-600">56,560</span>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
|
|
<div
|
|
style={{ width: "45%" }}
|
|
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full max-w-md">
|
|
<div className="relative pt-1">
|
|
<div className="flex mb-2 items-center justify-between">
|
|
<div>
|
|
<span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-yellow-600 bg-yellow-200">
|
|
下单 (18%)
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-xs font-semibold inline-block text-yellow-600">22,624</span>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200">
|
|
<div
|
|
style={{ width: "18%" }}
|
|
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full max-w-md">
|
|
<div className="relative pt-1">
|
|
<div className="flex mb-2 items-center justify-between">
|
|
<div>
|
|
<span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200">
|
|
支付完成 (8%)
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-xs font-semibold inline-block text-green-600">10,055</span>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-200">
|
|
<div
|
|
style={{ width: "8%" }}
|
|
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg shadow-sm">
|
|
<h3 className="text-lg font-medium mb-3">转化率趋势</h3>
|
|
<LineChart
|
|
data={{
|
|
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
datasets: [
|
|
{
|
|
label: "浏览转化率",
|
|
data: [40, 42, 43, 44, 45, 46, 45],
|
|
borderColor: "rgb(59, 130, 246)",
|
|
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
|
},
|
|
{
|
|
label: "购买转化率",
|
|
data: [15, 16, 16.5, 17, 17.5, 18, 18],
|
|
borderColor: "rgb(16, 185, 129)",
|
|
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
|
},
|
|
],
|
|
}}
|
|
height={220}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 场景管理 */}
|
|
<Card className="border-none shadow-md overflow-hidden">
|
|
<CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<CardTitle>场景管理</CardTitle>
|
|
<CardDescription>用户交互场景管理与分析</CardDescription>
|
|
</div>
|
|
<Badge className="bg-blue-100 text-blue-800">转化</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-lg">场景概览</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">活跃场景数</span>
|
|
<span className="text-sm font-medium">48</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">场景转化率</span>
|
|
<span className="text-sm font-medium">18.3%</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">场景覆盖率</span>
|
|
<span className="text-sm font-medium">85.2%</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-lg">热门场景</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">社交场景</span>
|
|
<span className="text-sm font-medium">35%</span>
|
|
</div>
|
|
<Progress value={35} className="h-1.5" />
|
|
|
|
<div className="flex justify-between items-center mt-2">
|
|
<span className="text-sm">购物场景</span>
|
|
<span className="text-sm font-medium">30%</span>
|
|
</div>
|
|
<Progress value={30} className="h-1.5" />
|
|
|
|
<div className="flex justify-between items-center mt-2">
|
|
<span className="text-sm">内容消费</span>
|
|
<span className="text-sm font-medium">20%</span>
|
|
</div>
|
|
<Progress value={20} className="h-1.5" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-lg">场景效果</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">平均停留时间</span>
|
|
<span className="text-sm font-medium">8.5分钟</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">互动率</span>
|
|
<span className="text-sm font-medium">42.3%</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm">转化率</span>
|
|
<span className="text-sm font-medium">18.3%</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<div className="bg-white p-4 rounded-lg shadow-sm">
|
|
<h3 className="text-lg font-medium mb-3">场景使用趋势</h3>
|
|
<LineChart
|
|
data={{
|
|
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
datasets: [
|
|
{
|
|
label: "社交场景",
|
|
data: [25000, 27000, 28000, 30000, 32000, 35000, 38000],
|
|
borderColor: "rgb(59, 130, 246)",
|
|
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
|
},
|
|
{
|
|
label: "购物场景",
|
|
data: [20000, 22000, 24000, 25000, 28000, 30000, 32000],
|
|
borderColor: "rgb(16, 185, 129)",
|
|
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
|
},
|
|
],
|
|
}}
|
|
height={220}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|