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>
791 lines
34 KiB
TypeScript
791 lines
34 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 { Badge } from "@/components/ui/badge"
|
||
import { Progress } from "@/components/ui/progress"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||
import { Input } from "@/components/ui/input"
|
||
import {
|
||
ArrowUpRight,
|
||
Download,
|
||
Filter,
|
||
RefreshCw,
|
||
Target,
|
||
TrendingUp,
|
||
Users,
|
||
Layers,
|
||
Tag,
|
||
BarChart3,
|
||
Search,
|
||
HelpCircle,
|
||
ChevronRight,
|
||
ChevronDown,
|
||
} from "lucide-react"
|
||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
|
||
|
||
// 真实用户数据
|
||
const mockUsers = [
|
||
{
|
||
id: "1",
|
||
name: "李明华",
|
||
company: "阿里巴巴集团",
|
||
recency: 1,
|
||
frequency: 28,
|
||
monetary: 45600,
|
||
rfmScore: 95,
|
||
level: "高价值",
|
||
growth: "+8.5%",
|
||
upgradeFromDays: 45,
|
||
nextUpgrade: "VIP客户",
|
||
upgradeProbability: 85,
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "张雨婷",
|
||
company: "腾讯科技",
|
||
recency: 3,
|
||
frequency: 22,
|
||
monetary: 32800,
|
||
rfmScore: 88,
|
||
level: "高价值",
|
||
growth: "+6.2%",
|
||
upgradeFromDays: 28,
|
||
nextUpgrade: "白金会员",
|
||
upgradeProbability: 78,
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "王建国",
|
||
company: "字节跳动",
|
||
recency: 2,
|
||
frequency: 25,
|
||
monetary: 38900,
|
||
rfmScore: 91,
|
||
level: "高价值",
|
||
growth: "+7.8%",
|
||
upgradeFromDays: 38,
|
||
nextUpgrade: "企业VIP",
|
||
upgradeProbability: 82,
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "刘思琪",
|
||
company: "美团点评",
|
||
recency: 7,
|
||
frequency: 18,
|
||
monetary: 25400,
|
||
rfmScore: 76,
|
||
level: "中高价值",
|
||
growth: "+4.1%",
|
||
upgradeFromDays: 12,
|
||
nextUpgrade: "高价值用户",
|
||
upgradeProbability: 68,
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "陈浩然",
|
||
company: "京东集团",
|
||
recency: 4,
|
||
frequency: 20,
|
||
monetary: 28700,
|
||
rfmScore: 82,
|
||
level: "中高价值",
|
||
growth: "+5.3%",
|
||
upgradeFromDays: 22,
|
||
nextUpgrade: "高价值用户",
|
||
upgradeProbability: 72,
|
||
},
|
||
{
|
||
id: "6",
|
||
name: "周欣妍",
|
||
company: "滴滴出行",
|
||
recency: 12,
|
||
frequency: 15,
|
||
monetary: 18600,
|
||
rfmScore: 65,
|
||
level: "中等价值",
|
||
growth: "+3.2%",
|
||
upgradeFromDays: 8,
|
||
nextUpgrade: "中高价值用户",
|
||
upgradeProbability: 55,
|
||
},
|
||
{
|
||
id: "7",
|
||
name: "马志强",
|
||
company: "华为技术",
|
||
recency: 6,
|
||
frequency: 16,
|
||
monetary: 22100,
|
||
rfmScore: 71,
|
||
level: "中等价值",
|
||
growth: "+4.8%",
|
||
upgradeFromDays: 15,
|
||
nextUpgrade: "中高价值用户",
|
||
upgradeProbability: 61,
|
||
},
|
||
{
|
||
id: "8",
|
||
name: "赵丽娟",
|
||
company: "小米科技",
|
||
recency: 15,
|
||
frequency: 12,
|
||
monetary: 15800,
|
||
rfmScore: 58,
|
||
level: "中等价值",
|
||
growth: "+2.1%",
|
||
upgradeFromDays: 5,
|
||
nextUpgrade: "中高价值用户",
|
||
upgradeProbability: 45,
|
||
},
|
||
]
|
||
|
||
export default function UserValuePage() {
|
||
const [timeRange, setTimeRange] = useState("30days")
|
||
const [searchQuery, setSearchQuery] = useState("")
|
||
const [showModelDialog, setShowModelDialog] = useState(false)
|
||
const [showUpgradeDialog, setShowUpgradeDialog] = useState(false)
|
||
const [expandedSections, setExpandedSections] = useState({
|
||
overview: true,
|
||
model: false,
|
||
analysis: true,
|
||
upgradePaths: false,
|
||
})
|
||
|
||
const filteredUsers = mockUsers.filter(
|
||
(user) =>
|
||
user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
user.company.toLowerCase().includes(searchQuery.toLowerCase()),
|
||
)
|
||
|
||
const getRFMLevelColor = (level: string) => {
|
||
switch (level) {
|
||
case "高价值":
|
||
return "bg-green-100 text-green-800"
|
||
case "中高价值":
|
||
return "bg-blue-100 text-blue-800"
|
||
case "中等价值":
|
||
return "bg-yellow-100 text-yellow-800"
|
||
case "低价值":
|
||
return "bg-gray-100 text-gray-800"
|
||
case "流失风险":
|
||
return "bg-red-100 text-red-800"
|
||
default:
|
||
return "bg-gray-100 text-gray-800"
|
||
}
|
||
}
|
||
|
||
const toggleSection = (section: string) => {
|
||
setExpandedSections((prev) => ({
|
||
...prev,
|
||
[section]: !prev[section],
|
||
}))
|
||
}
|
||
|
||
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>
|
||
|
||
{/* 用户估值概览 */}
|
||
<Collapsible
|
||
open={expandedSections.overview}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<Target className="h-5 w-5 text-green-600" />
|
||
<div className="text-left">
|
||
<CardTitle>用户估值概览</CardTitle>
|
||
<CardDescription>用户价值评估整体情况</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.overview ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<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-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">¥3,248</div>
|
||
<div className="text-sm text-green-600 mt-1 flex items-center">
|
||
<ArrowUpRight className="h-4 w-4 mr-1" />
|
||
较上月增长 8.2%
|
||
</div>
|
||
</div>
|
||
<div className="bg-green-100 p-2 rounded-full">
|
||
<Target 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>94%</span>
|
||
</div>
|
||
<Progress value={94} 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">45,678</div>
|
||
<div className="text-sm text-green-600 mt-1 flex items-center">
|
||
<ArrowUpRight className="h-4 w-4 mr-1" />
|
||
较上月增长 12.3%
|
||
</div>
|
||
</div>
|
||
<div className="bg-purple-100 p-2 rounded-full">
|
||
<TrendingUp 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>28.6%</span>
|
||
</div>
|
||
<Progress value={28.6} className="h-1.5 bg-purple-100" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<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">15.8%</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">
|
||
<BarChart3 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>11.2%</span>
|
||
</div>
|
||
<Progress value={141} className="h-1.5 bg-blue-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">12.5%</div>
|
||
<div className="text-sm text-green-600 mt-1 flex items-center">
|
||
<ArrowUpRight className="h-4 w-4 mr-1" />
|
||
较上月提升 1.8%
|
||
</div>
|
||
</div>
|
||
<div className="bg-amber-100 p-2 rounded-full">
|
||
<Users 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>15%</span>
|
||
</div>
|
||
<Progress value={83} className="h-1.5 bg-amber-100" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* RFM估值模型 */}
|
||
<Collapsible
|
||
open={expandedSections.model}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, model: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<BarChart3 className="h-5 w-5 text-blue-600" />
|
||
<div className="text-left">
|
||
<CardTitle className="flex items-center gap-2">
|
||
RFM用户价值模型
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setShowModelDialog(true)
|
||
}}
|
||
className="h-6 w-6 p-0"
|
||
>
|
||
<HelpCircle className="h-4 w-4" />
|
||
</Button>
|
||
</CardTitle>
|
||
<CardDescription>基于用户行为的价值评估模型</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.model ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<CardContent className="p-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div className="space-y-2">
|
||
<h3 className="font-semibold flex items-center">
|
||
<span className="bg-red-100 text-red-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
|
||
R
|
||
</span>
|
||
Recency (最近消费时间)
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground">用户最近一次交易的时间间隔，时间越短价值越高。</p>
|
||
<div className="bg-gray-50 p-3 rounded-md">
|
||
<div className="text-sm">
|
||
<div className="flex justify-between mb-1">
|
||
<span>1-3天</span>
|
||
<span className="font-medium">5分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>4-7天</span>
|
||
<span className="font-medium">4分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>8-14天</span>
|
||
<span className="font-medium">3分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>15-30天</span>
|
||
<span className="font-medium">2分</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>30天以上</span>
|
||
<span className="font-medium">1分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h3 className="font-semibold flex items-center">
|
||
<span className="bg-green-100 text-green-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
|
||
F
|
||
</span>
|
||
Frequency (消费频率)
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground">用户在一段时间内的交易次数，频率越高价值越高。</p>
|
||
<div className="bg-gray-50 p-3 rounded-md">
|
||
<div className="text-sm">
|
||
<div className="flex justify-between mb-1">
|
||
<span>25次以上/月</span>
|
||
<span className="font-medium">5分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>20-24次/月</span>
|
||
<span className="font-medium">4分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>15-19次/月</span>
|
||
<span className="font-medium">3分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>10-14次/月</span>
|
||
<span className="font-medium">2分</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>1-9次/月</span>
|
||
<span className="font-medium">1分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h3 className="font-semibold flex items-center">
|
||
<span className="bg-blue-100 text-blue-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
|
||
M
|
||
</span>
|
||
Monetary (消费金额)
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground">用户在一段时间内的消费金额，金额越高价值越高。</p>
|
||
<div className="bg-gray-50 p-3 rounded-md">
|
||
<div className="text-sm">
|
||
<div className="flex justify-between mb-1">
|
||
<span>30000元以上</span>
|
||
<span className="font-medium">5分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>20000-29999元</span>
|
||
<span className="font-medium">4分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>10000-19999元</span>
|
||
<span className="font-medium">3分</span>
|
||
</div>
|
||
<div className="flex justify-between mb-1">
|
||
<span>5000-9999元</span>
|
||
<span className="font-medium">2分</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>5000元以下</span>
|
||
<span className="font-medium">1分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6">
|
||
<h3 className="font-semibold mb-3">RFM评分等级</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||
<div className="bg-green-100 p-3 rounded-md text-center">
|
||
<p className="font-medium text-green-800">高价值用户</p>
|
||
<p className="text-sm text-green-700">85-100分</p>
|
||
</div>
|
||
<div className="bg-blue-100 p-3 rounded-md text-center">
|
||
<p className="font-medium text-blue-800">中高价值用户</p>
|
||
<p className="text-sm text-blue-700">70-84分</p>
|
||
</div>
|
||
<div className="bg-yellow-100 p-3 rounded-md text-center">
|
||
<p className="font-medium text-yellow-800">中等价值用户</p>
|
||
<p className="text-sm text-yellow-700">55-69分</p>
|
||
</div>
|
||
<div className="bg-gray-100 p-3 rounded-md text-center">
|
||
<p className="font-medium text-gray-800">低价值用户</p>
|
||
<p className="text-sm text-gray-700">40-54分</p>
|
||
</div>
|
||
<div className="bg-red-100 p-3 rounded-md text-center">
|
||
<p className="font-medium text-red-800">流失风险用户</p>
|
||
<p className="text-sm text-red-700">0-39分</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* 用户价值分析 */}
|
||
<Collapsible
|
||
open={expandedSections.analysis}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, analysis: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<Users className="h-5 w-5 text-purple-600" />
|
||
<div className="text-left">
|
||
<CardTitle>用户价值分析</CardTitle>
|
||
<CardDescription>用户价值分布与详细数据 ({filteredUsers.length})</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.analysis ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<CardContent className="p-4">
|
||
<div className="mb-4">
|
||
<div className="relative w-64">
|
||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||
<Input
|
||
type="search"
|
||
placeholder="搜索用户或公司..."
|
||
className="pl-8"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-md border">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>用户</TableHead>
|
||
<TableHead>公司</TableHead>
|
||
<TableHead className="text-center">RFM评分</TableHead>
|
||
<TableHead className="text-center">R值</TableHead>
|
||
<TableHead className="text-center">F值</TableHead>
|
||
<TableHead className="text-center">M值</TableHead>
|
||
<TableHead className="text-right">增长率</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{filteredUsers.map((user) => (
|
||
<TableRow key={user.id} className="hover:bg-gray-50">
|
||
<TableCell className="font-medium">{user.name}</TableCell>
|
||
<TableCell>{user.company}</TableCell>
|
||
<TableCell className="text-center">
|
||
<Badge className={`${getRFMLevelColor(user.level)}`}>
|
||
{user.rfmScore} ({user.level})
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell className="text-center">{user.recency}天</TableCell>
|
||
<TableCell className="text-center">{user.frequency}次/月</TableCell>
|
||
<TableCell className="text-center">¥{user.monetary.toLocaleString()}</TableCell>
|
||
<TableCell className="text-right text-green-600">{user.growth}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* 用户升级路径分析 */}
|
||
<Collapsible
|
||
open={expandedSections.upgradePaths}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, upgradePaths: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<TrendingUp className="h-5 w-5 text-orange-600" />
|
||
<div className="text-left">
|
||
<CardTitle className="flex items-center gap-2">
|
||
用户升级路径分析
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setShowUpgradeDialog(true)
|
||
}}
|
||
className="h-6 w-6 p-0"
|
||
>
|
||
<HelpCircle className="h-4 w-4" />
|
||
</Button>
|
||
</CardTitle>
|
||
<CardDescription>用户价值提升路径与策略</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.upgradePaths ? (
|
||
<ChevronDown className="h-5 w-5" />
|
||
) : (
|
||
<ChevronRight className="h-5 w-5" />
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<CardContent className="p-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||
<Card className="bg-white shadow-sm">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-lg flex items-center">
|
||
<Target className="h-5 w-5 mr-2 text-green-600" />
|
||
升级潜力分析
|
||
</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">2,345</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-sm">中潜力用户</span>
|
||
<span className="text-sm font-medium">5,678</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-sm">低潜力用户</span>
|
||
<span className="text-sm font-medium">1,234</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-white shadow-sm">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-lg flex items-center">
|
||
<Layers className="h-5 w-5 mr-2 text-blue-600" />
|
||
升级成功率
|
||
</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">12.5%</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-sm">平均升级周期</span>
|
||
<span className="text-sm font-medium">28天</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-sm">预期升级用户</span>
|
||
<span className="text-sm font-medium">1,856</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-white shadow-sm">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-lg flex items-center">
|
||
<Tag className="h-5 w-5 mr-2 text-purple-600" />
|
||
升级价值贡献
|
||
</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">¥2.3M</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-sm">平均用户价值提升</span>
|
||
<span className="text-sm font-medium">¥1,245</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-sm">ROI提升</span>
|
||
<span className="text-sm font-medium">35.8%</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-medium">个人升级路径推荐</h3>
|
||
<div className="space-y-3">
|
||
{filteredUsers.slice(0, 5).map((user) => (
|
||
<div
|
||
key={user.id}
|
||
className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50"
|
||
>
|
||
<div className="flex items-center gap-4">
|
||
<div>
|
||
<p className="font-medium">{user.name}</p>
|
||
<p className="text-sm text-gray-500">{user.company}</p>
|
||
</div>
|
||
<Badge className={getRFMLevelColor(user.level)}>{user.level}</Badge>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<div className="text-right">
|
||
<p className="text-sm font-medium">下一级别: {user.nextUpgrade}</p>
|
||
<p className="text-sm text-gray-500">升级概率: {user.upgradeProbability}%</p>
|
||
</div>
|
||
<div className="w-24">
|
||
<Progress value={user.upgradeProbability} className="h-2" />
|
||
</div>
|
||
<Button variant="outline" size="sm">
|
||
查看策略
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* RFM模型说明对话框 */}
|
||
<Dialog open={showModelDialog} onOpenChange={setShowModelDialog}>
|
||
<DialogContent className="sm:max-w-lg">
|
||
<DialogHeader>
|
||
<DialogTitle>RFM模型说明</DialogTitle>
|
||
<DialogDescription>RFM模型是一种用于客户价值评估的经典方法</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div className="p-4 bg-blue-50 rounded-lg">
|
||
<h4 className="font-medium mb-2">什么是RFM模型？</h4>
|
||
<p className="text-sm text-gray-600">
|
||
RFM模型是一种用于分析客户价值和客户创利能力的重要工具，通过分析客户的Recency（最近一次购买时间）、Frequency（购买频率）和Monetary（购买金额）三个维度来评估客户价值。
|
||
</p>
|
||
</div>
|
||
<div className="p-4 bg-green-50 rounded-lg">
|
||
<h4 className="font-medium mb-2">如何使用RFM评分？</h4>
|
||
<p className="text-sm text-gray-600">
|
||
每个维度按1-5分评分，总分15分。我们将总分转换为0-100的百分制，便于理解和比较。高分用户是我们的核心客户，需要重点维护和深度挖掘。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 升级路径说明对话框 */}
|
||
<Dialog open={showUpgradeDialog} onOpenChange={setShowUpgradeDialog}>
|
||
<DialogContent className="sm:max-w-lg">
|
||
<DialogHeader>
|
||
<DialogTitle>用户升级路径分析</DialogTitle>
|
||
<DialogDescription>基于用户行为数据预测用户价值提升路径</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div className="p-4 bg-purple-50 rounded-lg">
|
||
<h4 className="font-medium mb-2">升级路径是什么？</h4>
|
||
<p className="text-sm text-gray-600">
|
||
升级路径是基于用户当前的RFM评分、行为模式和历史数据，预测用户可能的价值提升方向和概率。帮助制定个性化的用户运营策略。
|
||
</p>
|
||
</div>
|
||
<div className="p-4 bg-orange-50 rounded-lg">
|
||
<h4 className="font-medium mb-2">如何制定升级策略？</h4>
|
||
<p className="text-sm text-gray-600">
|
||
系统会根据用户的弱势维度（R、F、M中得分较低的）推荐相应的运营策略，如优惠券刺激消费频率、个性化推荐提升客单价等。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
)
|
||
}
|