b17b488f8e
Reorganize navigation and module structure based on new requirements. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
275 lines
13 KiB
TypeScript
275 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Package, Server, Download, Upload, Users, Activity, ArrowRight, CheckCircle2, Zap } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
const assetOverview = {
|
|
totalPackages: 156,
|
|
apiServices: 28,
|
|
totalCalls: 12580000,
|
|
activeSubscribers: 89,
|
|
}
|
|
|
|
const trafficPackages = [
|
|
{ id: 1, name: "高价值用户包", users: 125800, status: "active", updated: "2小时前", downloads: 23 },
|
|
{ id: 2, name: "流失预警用户包", users: 23400, status: "active", updated: "1小时前", downloads: 15 },
|
|
{ id: 3, name: "潜力转化用户包", users: 89000, status: "active", updated: "30分钟前", downloads: 45 },
|
|
{ id: 4, name: "沉默用户唤醒包", users: 156000, status: "pending", updated: "生成中", downloads: 0 },
|
|
]
|
|
|
|
const apiServices = [
|
|
{ id: 1, name: "用户画像查询API", calls: 2580000, qps: 1200, status: "running", latency: "32ms" },
|
|
{ id: 2, name: "价值评估API", calls: 1890000, qps: 800, status: "running", latency: "45ms" },
|
|
{ id: 3, name: "标签推荐API", calls: 980000, qps: 500, status: "running", latency: "28ms" },
|
|
{ id: 4, name: "流失预测API", calls: 560000, qps: 300, status: "running", latency: "120ms" },
|
|
]
|
|
|
|
export default function DataAssetPage() {
|
|
const [todayCalls, setTodayCalls] = useState(258000)
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTodayCalls((prev) => prev + Math.floor(Math.random() * 1000))
|
|
}, 2000)
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50/30 p-6">
|
|
<div className="max-w-7xl mx-auto space-y-6">
|
|
{/* 页面标题 */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-800">数据资产与输出中心</h1>
|
|
<p className="text-slate-500 mt-1">流量包管理、API服务市场、数据输出</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline">
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
导入数据
|
|
</Button>
|
|
<Button className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700">
|
|
<Package className="w-4 h-4 mr-2" />
|
|
创建流量包
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 资产概览 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-slate-500">流量包总数</p>
|
|
<p className="text-2xl font-bold text-slate-800">{assetOverview.totalPackages}</p>
|
|
</div>
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
|
<Package className="w-5 h-5 text-white" />
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-emerald-600 mt-2">本月新增 12</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-slate-500">API服务数</p>
|
|
<p className="text-2xl font-bold text-slate-800">{assetOverview.apiServices}</p>
|
|
</div>
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
<Server className="w-5 h-5 text-white" />
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-emerald-600 mt-2">全部运行中</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-slate-500">今日API调用</p>
|
|
<p className="text-2xl font-bold text-slate-800">{todayCalls.toLocaleString()}</p>
|
|
</div>
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
|
|
<Zap className="w-5 h-5 text-white" />
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-emerald-600 mt-2">较昨日 +15.2%</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-slate-500">活跃订阅方</p>
|
|
<p className="text-2xl font-bold text-slate-800">{assetOverview.activeSubscribers}</p>
|
|
</div>
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 flex items-center justify-center">
|
|
<Users className="w-5 h-5 text-white" />
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-emerald-600 mt-2">本月新增 8</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 功能入口 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Link href="/data-asset/packages">
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-lg hover:border-slate-300 transition-all cursor-pointer group h-full">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
|
<Package className="w-7 h-7 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-800">流量包管理</h3>
|
|
<p className="text-sm text-slate-500">创建、管理、导出用户流量包</p>
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="w-5 h-5 text-slate-400 group-hover:text-slate-600 group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
<Link href="/data-asset/api-market">
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-lg hover:border-slate-300 transition-all cursor-pointer group h-full">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
<Server className="w-7 h-7 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-800">API服务市场</h3>
|
|
<p className="text-sm text-slate-500">API服务发布、订阅、监控</p>
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="w-5 h-5 text-slate-400 group-hover:text-slate-600 group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* 热门流量包 */}
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Package className="w-4 h-4 text-indigo-500" />
|
|
热门流量包
|
|
</CardTitle>
|
|
<Link href="/data-asset/packages">
|
|
<Button variant="ghost" size="sm">
|
|
查看全部
|
|
<ArrowRight className="w-4 h-4 ml-1" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{trafficPackages.map((pkg) => (
|
|
<div key={pkg.id} className="flex items-center justify-between p-3 bg-slate-50/80 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center">
|
|
<Users className="w-5 h-5 text-indigo-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-800">{pkg.name}</p>
|
|
<p className="text-xs text-slate-500">{pkg.users.toLocaleString()} 用户</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{pkg.status === "active" ? (
|
|
<Badge className="bg-emerald-100 text-emerald-700">
|
|
<CheckCircle2 className="w-3 h-3 mr-1" />
|
|
可用
|
|
</Badge>
|
|
) : (
|
|
<Badge className="bg-blue-100 text-blue-700">
|
|
<Activity className="w-3 h-3 mr-1 animate-pulse" />
|
|
生成中
|
|
</Badge>
|
|
)}
|
|
<div className="text-right">
|
|
<p className="text-xs text-slate-500">{pkg.updated}</p>
|
|
{pkg.downloads > 0 && (
|
|
<p className="text-xs text-slate-400">
|
|
<Download className="w-3 h-3 inline mr-1" />
|
|
{pkg.downloads}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* API服务状态 */}
|
|
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Server className="w-4 h-4 text-blue-500" />
|
|
API服务状态
|
|
</CardTitle>
|
|
<Link href="/data-asset/api-market">
|
|
<Button variant="ghost" size="sm">
|
|
查看全部
|
|
<ArrowRight className="w-4 h-4 ml-1" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{apiServices.map((api) => (
|
|
<div key={api.id} className="flex items-center justify-between p-3 bg-slate-50/80 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-100 to-cyan-100 flex items-center justify-center">
|
|
<Zap className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-800">{api.name}</p>
|
|
<p className="text-xs text-slate-500">
|
|
QPS: {api.qps} | 延迟: {api.latency}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<Badge className="bg-emerald-100 text-emerald-700">
|
|
<Activity className="w-3 h-3 mr-1" />
|
|
运行中
|
|
</Badge>
|
|
<div className="text-right">
|
|
<p className="text-sm font-medium text-slate-700">{(api.calls / 1000000).toFixed(1)}M</p>
|
|
<p className="text-xs text-slate-500">总调用</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|