fnvtk/users
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restructure navigation and module layout

Browse Source 
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
2026-01-31 04:32:36 +00:00
parent 22e725887a
commit b17b488f8e
105 changed files with 20530 additions and 3622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/data-asset/api-market/loading.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Loading() {
return null
}

326
app/data-asset/api-market/page.tsx Normal file
View File

@@ -0,0 +1,326 @@
"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 { Input } from "@/components/ui/input"
import {
Server,
ArrowLeft,
Plus,
Search,
Filter,
Activity,
Zap,
Clock,
Code,
Key,
Copy,
Eye,
Settings,
BarChart3,
} from "lucide-react"
import Link from "next/link"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { ApiKeyManagementDialog } from "@/components/dialogs/api-key-management-dialog"
import { PublishApiDialog } from "@/components/dialogs/publish-api-dialog"
const apiServices = [
{
id: 1,
name: "用户画像查询API",
description: "根据用户ID查询完整画像信息",
endpoint: "/api/v1/user/portrait",
method: "GET",
totalCalls: 2580000,
todayCalls: 125800,
qps: 1200,
latency: 32,
status: "running",
subscribers: 45,
},
{
id: 2,
name: "价值评估API",
description: "实时评估用户价值等级",
endpoint: "/api/v1/user/value",
method: "POST",
totalCalls: 1890000,
todayCalls: 89500,
qps: 800,
latency: 45,
status: "running",
subscribers: 38,
},
{
id: 3,
name: "标签推荐API",
description: "智能推荐用户标签",
endpoint: "/api/v1/tag/recommend",
method: "POST",
totalCalls: 980000,
todayCalls: 45600,
qps: 500,
latency: 28,
status: "running",
subscribers: 23,
},
{
id: 4,
name: "流失预测API",
description: "预测用户流失概率",
endpoint: "/api/v1/predict/churn",
method: "POST",
totalCalls: 560000,
todayCalls: 28900,
qps: 300,
latency: 120,
status: "running",
subscribers: 18,
},
{
id: 5,
name: "人群圈选API",
description: "根据条件筛选用户人群",
endpoint: "/api/v1/crowd/select",
method: "POST",
totalCalls: 320000,
todayCalls: 15600,
qps: 200,
latency: 250,
status: "running",
subscribers: 12,
},
]
const apiCallTrend = [
{ time: "00:00", calls: 8500 },
{ time: "04:00", calls: 3200 },
{ time: "08:00", calls: 15800 },
{ time: "12:00", calls: 28500 },
{ time: "16:00", calls: 32000 },
{ time: "20:00", calls: 25600 },
{ time: "24:00", calls: 18900 },
]
export default function APIMarketPage() {
const [searchTerm, setSearchTerm] = useState("")
const [totalCalls, setTotalCalls] = useState(305400)
const [showKeyDialog, setShowKeyDialog] = useState(false)
const [showPublishDialog, setShowPublishDialog] = useState(false)
useEffect(() => {
const interval = setInterval(() => {
setTotalCalls((prev) => prev + Math.floor(Math.random() * 500))
}, 2000)
return () => clearInterval(interval)
}, [])
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30 p-6">
<div className="max-w-7xl mx-auto space-y-6">
{/* 页面标题 */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Link href="/data-asset">
<Button variant="ghost" size="icon" className="rounded-full">
<ArrowLeft className="w-5 h-5" />
</Button>
</Link>
<div>
<h1 className="text-2xl font-bold text-slate-800">API服务市场</h1>
<p className="text-slate-500 mt-1">API服务发布、订阅与监控</p>
</div>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => setShowKeyDialog(true)}>
<Key className="w-4 h-4 mr-2" />
管理密钥
</Button>
<Button
className="bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700"
onClick={() => setShowPublishDialog(true)}
>
<Plus className="w-4 h-4 mr-2" />
发布API
</Button>
</div>
</div>
{/* API调用概览 */}
<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">{totalCalls.toLocaleString()}</p>
</div>
<Zap className="w-8 h-8 text-blue-500" />
</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">平均QPS</p>
<p className="text-2xl font-bold text-slate-800">600</p>
</div>
<Activity className="w-8 h-8 text-emerald-500" />
</div>
<p className="text-xs text-slate-500 mt-2">峰值: 1,200</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">95ms</p>
</div>
<Clock className="w-8 h-8 text-amber-500" />
</div>
<p className="text-xs text-emerald-600 mt-2">较上周 -8%</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">99.8%</p>
</div>
<BarChart3 className="w-8 h-8 text-violet-500" />
</div>
<p className="text-xs text-emerald-600 mt-2">稳定运行</p>
</CardContent>
</Card>
</div>
{/* 调用趋势图 */}
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
<CardHeader className="pb-2">
<CardTitle className="text-base">今日API调用趋势</CardTitle>
</CardHeader>
<CardContent>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={apiCallTrend}>
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
<XAxis dataKey="time" tick={{ fontSize: 12 }} stroke="#94a3b8" />
<YAxis tick={{ fontSize: 12 }} stroke="#94a3b8" />
<Tooltip
contentStyle={{
backgroundColor: "white",
border: "1px solid #e2e8f0",
borderRadius: "8px",
}}
/>
<Line type="monotone" dataKey="calls" stroke="#3b82f6" strokeWidth={2} dot={{ r: 4 }} />
</LineChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
{/* 筛选工具栏 */}
<div className="flex items-center gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<Input
placeholder="搜索API服务..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-9 bg-white/70"
/>
</div>
<Button variant="outline">
<Filter className="w-4 h-4 mr-2" />
筛选
</Button>
</div>
{/* API服务列表 */}
<div className="space-y-4">
{apiServices.map((api) => (
<Card key={api.id} className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-md transition-all">
<CardContent className="p-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
<Server className="w-6 h-6 text-white" />
</div>
<div>
<div className="flex items-center gap-2">
<h3 className="font-semibold text-slate-800">{api.name}</h3>
<Badge className="bg-emerald-100 text-emerald-700">
<Activity className="w-3 h-3 mr-1" />
运行中
</Badge>
</div>
<p className="text-sm text-slate-500 mt-0.5">{api.description}</p>
<div className="flex items-center gap-2 mt-2">
<Badge
variant="outline"
className={api.method === "GET" ? "bg-blue-50 text-blue-600" : "bg-green-50 text-green-600"}
>
{api.method}
</Badge>
<code className="text-xs bg-slate-100 px-2 py-0.5 rounded">{api.endpoint}</code>
<Button variant="ghost" size="sm" className="h-6 px-2">
<Copy className="w-3 h-3" />
</Button>
</div>
</div>
</div>
<div className="flex items-center gap-8">
<div className="text-center">
<p className="text-lg font-bold text-slate-800">{api.todayCalls.toLocaleString()}</p>
<p className="text-xs text-slate-500">今日调用</p>
</div>
<div className="text-center">
<p className="text-lg font-semibold text-slate-700">{api.qps}</p>
<p className="text-xs text-slate-500">QPS</p>
</div>
<div className="text-center">
<p className="text-lg font-semibold text-slate-700">{api.latency}ms</p>
<p className="text-xs text-slate-500">延迟</p>
</div>
<div className="text-center">
<p className="text-lg font-semibold text-slate-700">{api.subscribers}</p>
<p className="text-xs text-slate-500">订阅方</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm">
<Code className="w-4 h-4 mr-1" />
文档
</Button>
<Button variant="outline" size="sm">
<Eye className="w-4 h-4 mr-1" />
监控
</Button>
<Button variant="ghost" size="sm">
<Settings className="w-4 h-4" />
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
<ApiKeyManagementDialog open={showKeyDialog} onOpenChange={setShowKeyDialog} />
<PublishApiDialog open={showPublishDialog} onOpenChange={setShowPublishDialog} />
</div>
)
}

3
app/data-asset/loading.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Loading() {
return null
}

3
app/data-asset/packages/loading.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Loading() {
return null
}

261
app/data-asset/packages/page.tsx Normal file
View File

@@ -0,0 +1,261 @@
"use client"
import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import {
Package,
ArrowLeft,
Plus,
Download,
Trash2,
RefreshCw,
Search,
Filter,
Clock,
CheckCircle2,
Eye,
Copy,
MoreHorizontal,
} from "lucide-react"
import Link from "next/link"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { CreatePackageDialog } from "@/components/dialogs/create-package-dialog"
import { PackagePreviewDialog } from "@/components/dialogs/package-preview-dialog"
const packages = [
{
id: 1,
name: "高价值用户包-S级",
description: "RFM评分S级的高价值用户",
users: 125800,
status: "active",
createdAt: "2024-12-10",
updatedAt: "2小时前",
downloads: 23,
tags: ["高价值", "S级", "活跃"],
},
{
id: 2,
name: "流失预警用户包",
description: "流失风险值大于80的用户",
users: 23400,
status: "active",
createdAt: "2024-12-11",
updatedAt: "1小时前",
downloads: 15,
tags: ["流失风险", "预警"],
},
{
id: 3,
name: "潜力转化用户包",
description: "转化概率大于60%的潜力用户",
users: 89000,
status: "active",
createdAt: "2024-12-08",
updatedAt: "30分钟前",
downloads: 45,
tags: ["潜力用户", "转化"],
},
{
id: 4,
name: "沉默用户唤醒包",
description: "30天内未活跃的沉默用户",
users: 156000,
status: "generating",
createdAt: "2024-12-12",
updatedAt: "生成中",
downloads: 0,
tags: ["沉默用户", "唤醒"],
},
{
id: 5,
name: "新用户引导包",
description: "7天内注册的新用户",
users: 12580,
status: "active",
createdAt: "2024-12-05",
updatedAt: "4小时前",
downloads: 18,
tags: ["新用户", "引导"],
},
]
export default function PackagesPage() {
const [searchTerm, setSearchTerm] = useState("")
const [showCreateDialog, setShowCreateDialog] = useState(false)
const [showPreviewDialog, setShowPreviewDialog] = useState(false)
const [selectedPackage, setSelectedPackage] = useState<(typeof packages)[0] | null>(null)
const handlePreview = (pkg: (typeof packages)[0]) => {
setSelectedPackage(pkg)
setShowPreviewDialog(true)
}
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 className="flex items-center gap-4">
<Link href="/data-asset">
<Button variant="ghost" size="icon" className="rounded-full">
<ArrowLeft className="w-5 h-5" />
</Button>
</Link>
<div>
<h1 className="text-2xl font-bold text-slate-800">流量包管理</h1>
<p className="text-slate-500 mt-1">创建、管理和导出用户流量包</p>
</div>
</div>
<Button
className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700"
onClick={() => setShowCreateDialog(true)}
>
<Plus className="w-4 h-4 mr-2" />
创建流量包
</Button>
</div>
{/* 筛选工具栏 */}
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
<CardContent className="p-4">
<div className="flex items-center gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<Input
placeholder="搜索流量包名称或标签..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-9"
/>
</div>
<Button variant="outline">
<Filter className="w-4 h-4 mr-2" />
筛选
</Button>
<Button variant="outline">
<RefreshCw className="w-4 h-4 mr-2" />
刷新
</Button>
</div>
</CardContent>
</Card>
{/* 流量包列表 */}
<div className="grid grid-cols-1 gap-4">
{packages.map((pkg) => (
<Card key={pkg.id} className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-md transition-all">
<CardContent className="p-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
<Package className="w-6 h-6 text-white" />
</div>
<div>
<div className="flex items-center gap-2">
<h3 className="font-semibold text-slate-800">{pkg.name}</h3>
{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">
<RefreshCw className="w-3 h-3 mr-1 animate-spin" />
生成中
</Badge>
)}
</div>
<p className="text-sm text-slate-500 mt-0.5">{pkg.description}</p>
<div className="flex items-center gap-2 mt-2">
{pkg.tags.map((tag, i) => (
<Badge key={i} variant="outline" className="text-xs">
{tag}
</Badge>
))}
</div>
</div>
</div>
<div className="flex items-center gap-8">
<div className="text-center">
<p className="text-2xl font-bold text-slate-800">{pkg.users.toLocaleString()}</p>
<p className="text-xs text-slate-500">用户数</p>
</div>
<div className="text-center">
<p className="text-lg font-semibold text-slate-700">{pkg.downloads}</p>
<p className="text-xs text-slate-500">下载次数</p>
</div>
<div className="text-right">
<p className="text-sm text-slate-600 flex items-center gap-1">
<Clock className="w-3 h-3" />
{pkg.updatedAt}
</p>
<p className="text-xs text-slate-400">创建于 {pkg.createdAt}</p>
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
disabled={pkg.status !== "active"}
onClick={() => handlePreview(pkg)}
>
<Eye className="w-4 h-4 mr-1" />
预览
</Button>
<Button variant="outline" size="sm" disabled={pkg.status !== "active"}>
<Download className="w-4 h-4 mr-1" />
导出
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreHorizontal className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<Copy className="w-4 h-4 mr-2" />
复制
</DropdownMenuItem>
<DropdownMenuItem>
<RefreshCw className="w-4 h-4 mr-2" />
更新
</DropdownMenuItem>
<DropdownMenuItem className="text-red-600">
<Trash2 className="w-4 h-4 mr-2" />
删除
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
<CreatePackageDialog open={showCreateDialog} onOpenChange={setShowCreateDialog} />
<PackagePreviewDialog
open={showPreviewDialog}
onOpenChange={setShowPreviewDialog}
packageData={
selectedPackage
? {
name: selectedPackage.name,
description: selectedPackage.description,
users: selectedPackage.users,
tags: selectedPackage.tags,
}
: undefined
}
/>
</div>
)
}

274
app/data-asset/page.tsx Normal file
View File

@@ -0,0 +1,274 @@
"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>
)
}