refactor: restructure navigation and module layout
Reorganize navigation and module structure based on new requirements. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
@@ -1,15 +1,13 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { DollarSign, TrendingUp, BarChart3, Calculator, Target, Users, ArrowUpRight, ArrowDownRight } from 'lucide-react'
|
||||
import { DollarSign, TrendingUp, BarChart3, Calculator, Users, ArrowUpRight } from "lucide-react"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
|
||||
export default function ValueAssessment() {
|
||||
// 价值评估模型数据
|
||||
const valueModels = [
|
||||
{
|
||||
name: "RFM价值模型",
|
||||
@@ -37,7 +35,6 @@ export default function ValueAssessment() {
|
||||
},
|
||||
]
|
||||
|
||||
// 项目价值分布
|
||||
const projectValues = [
|
||||
{ name: "美妆行业项目A", users: 45600000, value: 2856000000, growth: 15.8, level: "A" },
|
||||
{ name: "教育培训项目B", users: 32800000, value: 1968000000, growth: 12.3, level: "A" },
|
||||
@@ -46,7 +43,6 @@ export default function ValueAssessment() {
|
||||
{ name: "本地生活项目E", users: 19200000, value: 1152000000, growth: 6.5, level: "B" },
|
||||
]
|
||||
|
||||
// 微信号价值排名
|
||||
const wechatRanking = [
|
||||
{ name: "微信号001", users: 2856000, value: 168560000, avgValue: 59.0, rank: 1 },
|
||||
{ name: "微信号002", users: 2345000, value: 145780000, avgValue: 62.2, rank: 2 },
|
||||
@@ -55,7 +51,6 @@ export default function ValueAssessment() {
|
||||
{ name: "微信号005", users: 1520000, value: 95600000, avgValue: 62.9, rank: 5 },
|
||||
]
|
||||
|
||||
// 价值增长趋势
|
||||
const growthTrend = [
|
||||
{ month: "1月", value: 9850000000, growth: 8.5 },
|
||||
{ month: "2月", value: 10250000000, growth: 4.1 },
|
||||
@@ -80,109 +75,117 @@ export default function ValueAssessment() {
|
||||
|
||||
const getLevelColor = (level: string) => {
|
||||
const colors = {
|
||||
S: "border-purple-500/50 text-purple-400 bg-purple-500/10",
|
||||
A: "border-blue-500/50 text-blue-400 bg-blue-500/10",
|
||||
B: "border-green-500/50 text-green-400 bg-green-500/10",
|
||||
C: "border-yellow-500/50 text-yellow-400 bg-yellow-500/10",
|
||||
D: "border-gray-500/50 text-gray-400 bg-gray-500/10",
|
||||
S: "bg-purple-100 text-purple-700 border-purple-200",
|
||||
A: "bg-blue-100 text-blue-700 border-blue-200",
|
||||
B: "bg-green-100 text-green-700 border-green-200",
|
||||
C: "bg-yellow-100 text-yellow-700 border-yellow-200",
|
||||
D: "bg-gray-100 text-gray-700 border-gray-200",
|
||||
}
|
||||
return colors[level as keyof typeof colors] || colors.D
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold mb-2">价值评估</h1>
|
||||
<p className="text-gray-400">用户价值分析、项目价值统计与预测</p>
|
||||
<h1 className="text-3xl font-bold text-gray-900">价值评估</h1>
|
||||
<p className="text-gray-500 mt-1">用户价值分析、项目价值统计与预测</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="outline" className="bg-white/5 border-white/10 hover:bg-white/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="outline" className="bg-white/60 backdrop-blur-md">
|
||||
<Calculator className="w-4 h-4 mr-2" />
|
||||
价值计算器
|
||||
</Button>
|
||||
<Button className="bg-gradient-to-r from-blue-500 to-purple-500">
|
||||
<Button className="bg-gradient-to-r from-blue-500 to-purple-500 text-white">
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
生成报告
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 核心价值指标 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||
<Card className="bg-gradient-to-br from-purple-500/20 to-purple-900/20 border-purple-500/30">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="bg-gradient-to-br from-purple-500 to-purple-600 text-white border-none shadow-md">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-white flex items-center gap-2">
|
||||
<CardTitle className="text-purple-100 flex items-center gap-2">
|
||||
<DollarSign className="w-5 h-5" />
|
||||
平台总价值
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-4xl font-bold text-purple-400 mb-2">¥{formatCurrency(12580000000)}</div>
|
||||
<div className="text-4xl font-bold mb-2">¥{formatCurrency(12580000000)}</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<ArrowUpRight className="w-4 h-4 text-green-400" />
|
||||
<span className="text-green-400">+5.0%</span>
|
||||
<span className="text-gray-400">本月增长</span>
|
||||
<ArrowUpRight className="w-4 h-4 text-green-300" />
|
||||
<span className="text-green-300">+5.0%</span>
|
||||
<span className="text-purple-200">本月增长</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-blue-500/20 to-blue-900/20 border-blue-500/30">
|
||||
<Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-white flex items-center gap-2">
|
||||
<Users className="w-5 h-5" />
|
||||
<CardTitle className="text-gray-900 flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-blue-600" />
|
||||
人均价值
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-4xl font-bold text-blue-400 mb-2">¥293.5</div>
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">¥293.5</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<ArrowUpRight className="w-4 h-4 text-green-400" />
|
||||
<span className="text-green-400">+2.8%</span>
|
||||
<span className="text-gray-400">环比提升</span>
|
||||
<ArrowUpRight className="w-4 h-4 text-green-600" />
|
||||
<span className="text-green-600">+2.8%</span>
|
||||
<span className="text-gray-500">环比提升</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-green-500/20 to-green-900/20 border-green-500/30">
|
||||
<Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-white flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
<CardTitle className="text-gray-900 flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5 text-green-600" />
|
||||
价值覆盖率
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-4xl font-bold text-green-400 mb-2">85.5%</div>
|
||||
<div className="text-sm text-gray-400">已评估用户占比</div>
|
||||
<div className="text-4xl font-bold text-green-600 mb-2">85.5%</div>
|
||||
<div className="text-sm text-gray-500">已评估用户占比</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="models" className="space-y-6">
|
||||
<TabsList className="bg-white/5 border border-white/10">
|
||||
<TabsTrigger value="models">价值模型</TabsTrigger>
|
||||
<TabsTrigger value="projects">项目价值</TabsTrigger>
|
||||
<TabsTrigger value="wechat">微信号排名</TabsTrigger>
|
||||
<TabsTrigger value="trend">增长趋势</TabsTrigger>
|
||||
<TabsList className="bg-white/60 backdrop-blur-md border border-gray-200 p-1 rounded-xl">
|
||||
<TabsTrigger value="models" className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm">
|
||||
价值模型
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="projects"
|
||||
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
|
||||
>
|
||||
项目价值
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="wechat" className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm">
|
||||
微信号排名
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="trend" className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm">
|
||||
增长趋势
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 价值模型 */}
|
||||
<TabsContent value="models" className="space-y-6">
|
||||
{valueModels.map((model, index) => (
|
||||
<Card key={index} className="bg-white/5 border-white/10">
|
||||
<Card key={index} className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-white text-xl mb-1">{model.name}</CardTitle>
|
||||
<p className="text-sm text-gray-400">{model.description}</p>
|
||||
<CardTitle className="text-gray-900 text-xl mb-1">{model.name}</CardTitle>
|
||||
<p className="text-sm text-gray-500">{model.description}</p>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
model.status === "active"
|
||||
? "border-green-500/50 text-green-400"
|
||||
: "border-yellow-500/50 text-yellow-400"
|
||||
? "bg-green-50 text-green-600 border-green-200"
|
||||
: "bg-yellow-50 text-yellow-600 border-yellow-200"
|
||||
}
|
||||
>
|
||||
{model.status === "active" ? "运行中" : "训练中"}
|
||||
@@ -192,60 +195,59 @@ export default function ValueAssessment() {
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-6 mb-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">模型总价值</div>
|
||||
<div className="text-2xl font-bold text-white">¥{formatCurrency(model.totalValue)}</div>
|
||||
<div className="text-sm text-gray-500 mb-1">模型总价值</div>
|
||||
<div className="text-2xl font-bold text-gray-900">¥{formatCurrency(model.totalValue)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">人均价值</div>
|
||||
<div className="text-2xl font-bold text-blue-400">¥{model.avgValue}</div>
|
||||
<div className="text-sm text-gray-500 mb-1">人均价值</div>
|
||||
<div className="text-2xl font-bold text-blue-600">¥{model.avgValue}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">覆盖率</div>
|
||||
<div className="text-2xl font-bold text-green-400">{model.coverage}%</div>
|
||||
<div className="text-sm text-gray-500 mb-1">覆盖率</div>
|
||||
<div className="text-2xl font-bold text-green-600">{model.coverage}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={model.coverage} className="h-2" />
|
||||
<Progress value={model.coverage} className="h-2 bg-gray-100" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
{/* 项目价值 */}
|
||||
<TabsContent value="projects" className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{projectValues.map((project, index) => (
|
||||
<Card key={index} className="bg-white/5 border-white/10">
|
||||
<Card key={index} className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-lg font-semibold text-white">{project.name}</div>
|
||||
<div className="text-lg font-bold text-gray-900">{project.name}</div>
|
||||
<Badge variant="outline" className={getLevelColor(project.level)}>
|
||||
{project.level}级项目
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowUpRight className="w-4 h-4 text-green-400" />
|
||||
<span className="text-green-400 font-semibold">+{project.growth}%</span>
|
||||
<ArrowUpRight className="w-4 h-4 text-green-600" />
|
||||
<span className="text-green-600 font-semibold">+{project.growth}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-gray-400 mb-1">用户数</div>
|
||||
<div className="text-lg font-semibold text-white">{formatNumber(project.users)}</div>
|
||||
<div className="text-gray-500 mb-1">用户数</div>
|
||||
<div className="text-lg font-semibold text-gray-900">{formatNumber(project.users)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-400 mb-1">项目价值</div>
|
||||
<div className="text-lg font-semibold text-green-400">¥{formatCurrency(project.value)}</div>
|
||||
<div className="text-gray-500 mb-1">项目价值</div>
|
||||
<div className="text-lg font-semibold text-green-600">¥{formatCurrency(project.value)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-400 mb-1">人均价值</div>
|
||||
<div className="text-lg font-semibold text-blue-400">
|
||||
<div className="text-gray-500 mb-1">人均价值</div>
|
||||
<div className="text-lg font-semibold text-blue-600">
|
||||
¥{(project.value / project.users).toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-400 mb-1">增长率</div>
|
||||
<div className="text-lg font-semibold text-white">{project.growth}%</div>
|
||||
<div className="text-gray-500 mb-1">增长率</div>
|
||||
<div className="text-lg font-semibold text-gray-900">{project.growth}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -254,33 +256,24 @@ export default function ValueAssessment() {
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* 微信号排名 */}
|
||||
<TabsContent value="wechat" className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{wechatRanking.map((wechat, index) => (
|
||||
<Card key={index} className="bg-white/5 border-white/10">
|
||||
<Card key={index} className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold ${
|
||||
wechat.rank === 1
|
||||
? "bg-gradient-to-br from-yellow-400 to-orange-500"
|
||||
: wechat.rank === 2
|
||||
? "bg-gradient-to-br from-gray-300 to-gray-500"
|
||||
: wechat.rank === 3
|
||||
? "bg-gradient-to-br from-orange-400 to-orange-600"
|
||||
: "bg-white/10"
|
||||
}`}
|
||||
className={`w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold text-white ${wechat.rank === 1 ? "bg-gradient-to-br from-yellow-400 to-orange-500" : wechat.rank === 2 ? "bg-gradient-to-br from-gray-300 to-gray-500" : wechat.rank === 3 ? "bg-gradient-to-br from-orange-400 to-orange-600" : "bg-gray-200 text-gray-600"}`}
|
||||
>
|
||||
{wechat.rank}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-white mb-1">{wechat.name}</h3>
|
||||
<div className="text-sm text-gray-400">{formatNumber(wechat.users)} 用户</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-1">{wechat.name}</h3>
|
||||
<div className="text-sm text-gray-500">{formatNumber(wechat.users)} 用户</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold text-green-400">¥{formatCurrency(wechat.value)}</div>
|
||||
<div className="text-sm text-gray-400">人均 ¥{wechat.avgValue}</div>
|
||||
<div className="text-2xl font-bold text-green-600">¥{formatCurrency(wechat.value)}</div>
|
||||
<div className="text-sm text-gray-500">人均 ¥{wechat.avgValue}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -289,11 +282,10 @@ export default function ValueAssessment() {
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* 增长趋势 */}
|
||||
<TabsContent value="trend" className="space-y-6">
|
||||
<Card className="bg-white/5 border-white/10">
|
||||
<Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-2">
|
||||
<CardTitle className="text-gray-900 flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
价值增长趋势
|
||||
</CardTitle>
|
||||
@@ -301,14 +293,17 @@ export default function ValueAssessment() {
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{growthTrend.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-4 bg-white/5 rounded-lg">
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-100"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-lg font-semibold text-white">{item.month}</div>
|
||||
<div className="text-2xl font-bold text-green-400">¥{formatCurrency(item.value)}</div>
|
||||
<div className="text-lg font-semibold text-gray-900">{item.month}</div>
|
||||
<div className="text-2xl font-bold text-green-600">¥{formatCurrency(item.value)}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowUpRight className="w-4 h-4 text-green-400" />
|
||||
<span className="text-lg font-semibold text-green-400">+{item.growth}%</span>
|
||||
<ArrowUpRight className="w-4 h-4 text-green-600" />
|
||||
<span className="text-lg font-semibold text-green-600">+{item.growth}%</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user