4eed69520c
Refactor homepage for focused search and data display; streamline data platform; enhance user and tag management; focus AI assistant on data analysis and report generation. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
269 lines
10 KiB
TypeScript
269 lines
10 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 { Progress } from "@/components/ui/progress"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import {
|
|
BarChart3,
|
|
TrendingUp,
|
|
Users,
|
|
Database,
|
|
Activity,
|
|
RefreshCw,
|
|
Download,
|
|
Eye,
|
|
Zap,
|
|
Target,
|
|
AlertCircle,
|
|
} from "lucide-react"
|
|
|
|
export default function DashboardPage() {
|
|
const [timeRange, setTimeRange] = useState("today")
|
|
|
|
const dashboardStats = {
|
|
totalUsers: 125678,
|
|
activeUsers: 45678,
|
|
dataVolume: 1245678,
|
|
aiAccuracy: 96.8,
|
|
growthRate: 12.5,
|
|
qualityScore: 94.2,
|
|
}
|
|
|
|
const recentActivities = [
|
|
{
|
|
id: 1,
|
|
type: "data_sync",
|
|
message: "用户数据同步完成",
|
|
time: "2分钟前",
|
|
status: "success",
|
|
},
|
|
{
|
|
id: 2,
|
|
type: "ai_analysis",
|
|
message: "AI模型训练完成",
|
|
time: "5分钟前",
|
|
status: "success",
|
|
},
|
|
{
|
|
id: 3,
|
|
type: "quality_check",
|
|
message: "数据质量检查通过",
|
|
time: "10分钟前",
|
|
status: "warning",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="container mx-auto py-6 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 tracking-tight">数据总览</h1>
|
|
<p className="text-muted-foreground">全局数据资产概览与监控</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Select value={timeRange} onValueChange={setTimeRange}>
|
|
<SelectTrigger className="w-[120px]">
|
|
<SelectValue placeholder="时间范围" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="today">今日</SelectItem>
|
|
<SelectItem value="week">本周</SelectItem>
|
|
<SelectItem value="month">本月</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<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>
|
|
|
|
{/* 核心指标卡片 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<Card className="bg-gradient-to-r from-blue-50 to-cyan-50 border-none shadow-md">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm font-medium">总用户数</CardTitle>
|
|
<Users className="h-4 w-4 text-blue-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-blue-600">{dashboardStats.totalUsers.toLocaleString()}</div>
|
|
<div className="flex items-center mt-2">
|
|
<TrendingUp className="h-3 w-3 text-green-500 mr-1" />
|
|
<span className="text-xs text-green-600">+{dashboardStats.growthRate}%</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-none shadow-md">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm font-medium">活跃用户</CardTitle>
|
|
<Activity className="h-4 w-4 text-green-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-green-600">{dashboardStats.activeUsers.toLocaleString()}</div>
|
|
<div className="text-xs text-muted-foreground mt-2">
|
|
活跃率 {((dashboardStats.activeUsers / dashboardStats.totalUsers) * 100).toFixed(1)}%
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-gradient-to-r from-purple-50 to-pink-50 border-none shadow-md">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm font-medium">数据量</CardTitle>
|
|
<Database className="h-4 w-4 text-purple-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-purple-600">{dashboardStats.dataVolume.toLocaleString()}</div>
|
|
<div className="text-xs text-muted-foreground mt-2">条记录</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-gradient-to-r from-orange-50 to-red-50 border-none shadow-md">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm font-medium">AI准确率</CardTitle>
|
|
<Target className="h-4 w-4 text-orange-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-orange-600">{dashboardStats.aiAccuracy}%</div>
|
|
<div className="text-xs text-muted-foreground mt-2">模型置信度</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 详细分析 */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* 数据质量监控 */}
|
|
<Card className="lg:col-span-2">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<BarChart3 className="h-5 w-5 text-blue-600" />
|
|
数据质量监控
|
|
</CardTitle>
|
|
<CardDescription>实时数据质量评估</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<span>整体质量评分</span>
|
|
<span className="font-medium">{dashboardStats.qualityScore}%</span>
|
|
</div>
|
|
<Progress value={dashboardStats.qualityScore} className="h-2" />
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<span>数据完整性</span>
|
|
<span className="font-medium">98.5%</span>
|
|
</div>
|
|
<Progress value={98.5} className="h-2" />
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<span>数据准确性</span>
|
|
<span className="font-medium">96.2%</span>
|
|
</div>
|
|
<Progress value={96.2} className="h-2" />
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<span>数据一致性</span>
|
|
<span className="font-medium">94.8%</span>
|
|
</div>
|
|
<Progress value={94.8} className="h-2" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 实时活动 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Activity className="h-5 w-5 text-green-600" />
|
|
实时活动
|
|
</CardTitle>
|
|
<CardDescription>系统活动监控</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{recentActivities.map((activity) => (
|
|
<div key={activity.id} className="flex items-start gap-3 p-2 hover:bg-gray-50 rounded-lg">
|
|
<div
|
|
className={`p-1 rounded-full ${
|
|
activity.status === "success"
|
|
? "text-green-600"
|
|
: activity.status === "warning"
|
|
? "text-yellow-600"
|
|
: "text-red-600"
|
|
}`}
|
|
>
|
|
{activity.status === "success" ? (
|
|
<Zap className="h-4 w-4" />
|
|
) : activity.status === "warning" ? (
|
|
<AlertCircle className="h-4 w-4" />
|
|
) : (
|
|
<AlertCircle className="h-4 w-4" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{activity.message}</p>
|
|
<p className="text-xs text-gray-500">{activity.time}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button variant="outline" className="w-full mt-4 bg-transparent">
|
|
查看全部活动
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 快速操作 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Zap className="h-5 w-5 text-yellow-600" />
|
|
快速操作
|
|
</CardTitle>
|
|
<CardDescription>常用功能快捷入口</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
|
|
<Eye className="h-5 w-5" />
|
|
<span className="text-xs">查看报告</span>
|
|
</Button>
|
|
<Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
|
|
<Database className="h-5 w-5" />
|
|
<span className="text-xs">数据导入</span>
|
|
</Button>
|
|
<Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
|
|
<Users className="h-5 w-5" />
|
|
<span className="text-xs">用户管理</span>
|
|
</Button>
|
|
<Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
|
|
<Target className="h-5 w-5" />
|
|
<span className="text-xs">AI分析</span>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|