b17b488f8e
Reorganize navigation and module structure based on new requirements. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
262 lines
9.5 KiB
TypeScript
262 lines
9.5 KiB
TypeScript
"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>
|
|
)
|
|
}
|