b17b488f8e
Reorganize navigation and module structure based on new requirements. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
238 lines
9.3 KiB
TypeScript
238 lines
9.3 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Download, Share2, Eye, Calendar, TrendingUp, TrendingDown, BarChart3, PieChart } from "lucide-react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
|
|
interface Report {
|
|
id: string
|
|
name: string
|
|
type: "distribution" | "trend" | "comparison"
|
|
period: string
|
|
generatedAt: string
|
|
metrics: {
|
|
label: string
|
|
value: string
|
|
change?: number
|
|
}[]
|
|
chartData?: any
|
|
}
|
|
|
|
const MOCK_REPORTS: Report[] = [
|
|
{
|
|
id: "1",
|
|
name: "用户价值分布报告",
|
|
type: "distribution",
|
|
period: "2025年12月",
|
|
generatedAt: "2025-12-12 06:00:00",
|
|
metrics: [
|
|
{ label: "S级用户", value: "5.2%", change: 0.3 },
|
|
{ label: "A级用户", value: "12.8%", change: 0.5 },
|
|
{ label: "B级用户", value: "28.5%", change: -0.2 },
|
|
{ label: "C级用户", value: "35.2%", change: -0.4 },
|
|
{ label: "D级用户", value: "18.3%", change: -0.2 },
|
|
],
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "价值趋势对比报告",
|
|
type: "trend",
|
|
period: "近6个月",
|
|
generatedAt: "2025-12-12 06:00:00",
|
|
metrics: [
|
|
{ label: "平均CLV", value: "¥2,856", change: 12.5 },
|
|
{ label: "高价值用户占比", value: "18.0%", change: 2.3 },
|
|
{ label: "用户价值总量", value: "¥125.6B", change: 8.7 },
|
|
{ label: "人均贡献", value: "¥31.2", change: 5.2 },
|
|
],
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "项目价值排名报告",
|
|
type: "comparison",
|
|
period: "2025年12月",
|
|
generatedAt: "2025-12-11 22:00:00",
|
|
metrics: [
|
|
{ label: "#1 华东区项目", value: "¥28.5B", change: 15.2 },
|
|
{ label: "#2 华南区项目", value: "¥22.3B", change: 12.8 },
|
|
{ label: "#3 华北区项目", value: "¥18.9B", change: 8.5 },
|
|
{ label: "#4 西南区项目", value: "¥15.6B", change: 10.2 },
|
|
{ label: "#5 华中区项目", value: "¥12.8B", change: 6.3 },
|
|
],
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "流失风险分析报告",
|
|
type: "distribution",
|
|
period: "2025年12月",
|
|
generatedAt: "2025-12-12 00:00:00",
|
|
metrics: [
|
|
{ label: "高风险用户", value: "8.5%", change: -1.2 },
|
|
{ label: "中风险用户", value: "25.3%", change: 0.5 },
|
|
{ label: "低风险用户", value: "66.2%", change: 0.7 },
|
|
{ label: "预计流失数", value: "34.2M", change: -5.8 },
|
|
],
|
|
},
|
|
]
|
|
|
|
const TYPE_CONFIG = {
|
|
distribution: { label: "分布报告", color: "bg-blue-100 text-blue-700", icon: PieChart },
|
|
trend: { label: "趋势报告", color: "bg-green-100 text-green-700", icon: TrendingUp },
|
|
comparison: { label: "对比报告", color: "bg-purple-100 text-purple-700", icon: BarChart3 },
|
|
}
|
|
|
|
export default function AssessmentReportsPage() {
|
|
const [reports, setReports] = useState<Report[]>(MOCK_REPORTS)
|
|
const [selectedPeriod, setSelectedPeriod] = useState("month")
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">评估报告</h1>
|
|
<p className="text-gray-500 mt-1">查看价值评估分析报告</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
|
|
<SelectTrigger className="w-32 bg-white/60">
|
|
<Calendar className="w-4 h-4 mr-2" />
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="week">本周</SelectItem>
|
|
<SelectItem value="month">本月</SelectItem>
|
|
<SelectItem value="quarter">本季度</SelectItem>
|
|
<SelectItem value="year">本年</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
批量导出
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<Card className="border-none shadow-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-2 text-blue-100 mb-2">
|
|
<TrendingUp className="w-5 h-5" />
|
|
<span>用户价值总量</span>
|
|
</div>
|
|
<div className="text-4xl font-bold mb-2">¥125.6B</div>
|
|
<div className="flex items-center gap-1 text-green-300 text-sm">
|
|
<TrendingUp className="w-4 h-4" />
|
|
<span>较上月增长 8.7%</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-none shadow-lg bg-gradient-to-br from-green-500 to-emerald-600 text-white">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-2 text-green-100 mb-2">
|
|
<BarChart3 className="w-5 h-5" />
|
|
<span>高价值用户占比</span>
|
|
</div>
|
|
<div className="text-4xl font-bold mb-2">18.0%</div>
|
|
<div className="flex items-center gap-1 text-green-300 text-sm">
|
|
<TrendingUp className="w-4 h-4" />
|
|
<span>较上月提升 2.3%</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-none shadow-lg bg-gradient-to-br from-purple-500 to-violet-600 text-white">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-2 text-purple-100 mb-2">
|
|
<PieChart className="w-5 h-5" />
|
|
<span>平均CLV</span>
|
|
</div>
|
|
<div className="text-4xl font-bold mb-2">¥2,856</div>
|
|
<div className="flex items-center gap-1 text-green-300 text-sm">
|
|
<TrendingUp className="w-4 h-4" />
|
|
<span>较上月增长 12.5%</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Report List */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{reports.map((report) => {
|
|
const TypeIcon = TYPE_CONFIG[report.type].icon
|
|
|
|
return (
|
|
<Card key={report.id} className="border-none shadow-sm bg-white/60 backdrop-blur-sm">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<CardTitle className="text-lg">{report.name}</CardTitle>
|
|
<Badge className={TYPE_CONFIG[report.type].color}>
|
|
<TypeIcon className="w-3 h-3 mr-1" />
|
|
{TYPE_CONFIG[report.type].label}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-sm text-gray-500">周期: {report.period}</p>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
|
<Download className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
|
<Share2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{report.metrics.map((metric, i) => (
|
|
<div key={i} className="flex items-center justify-between p-3 rounded-xl bg-gray-50">
|
|
<span className="text-gray-600">{metric.label}</span>
|
|
<div className="flex items-center gap-3">
|
|
<span className="font-bold text-gray-900">{metric.value}</span>
|
|
{metric.change !== undefined && (
|
|
<Badge
|
|
className={
|
|
metric.change > 0
|
|
? "bg-green-100 text-green-700"
|
|
: metric.change < 0
|
|
? "bg-red-100 text-red-700"
|
|
: "bg-gray-100 text-gray-700"
|
|
}
|
|
>
|
|
{metric.change > 0 ? (
|
|
<TrendingUp className="w-3 h-3 mr-1" />
|
|
) : metric.change < 0 ? (
|
|
<TrendingDown className="w-3 h-3 mr-1" />
|
|
) : null}
|
|
{metric.change > 0 ? "+" : ""}
|
|
{metric.change}%
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-gray-100 text-xs text-gray-500">
|
|
生成时间: {report.generatedAt}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|