refactor: overhaul system navigation based on 5 HTML docs
Reorganize modules, add AI Agent smart interaction, include prompt settings, enhance data output with subscriptions, and separate system monitoring. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
377
app/data-output/packages/page.tsx
Normal file
377
app/data-output/packages/page.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import {
|
||||
Package, Plus, Download, Eye, Trash2, RefreshCw,
|
||||
Users, Calendar, Tag, Filter, MoreHorizontal, Share2,
|
||||
CheckCircle2, Clock, AlertCircle
|
||||
} from "lucide-react"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
const packages = [
|
||||
{
|
||||
id: "1",
|
||||
name: "高价值用户流量包",
|
||||
description: "CLV评分前20%的活跃用户",
|
||||
userCount: 15680,
|
||||
tags: ["高价值", "活跃用户"],
|
||||
status: "active",
|
||||
createdAt: "2024-01-10",
|
||||
lastUpdated: "2024-01-15",
|
||||
downloadCount: 23,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "潜力用户营销包",
|
||||
description: "近30天有浏览但未转化的用户",
|
||||
userCount: 8920,
|
||||
tags: ["潜力用户", "营销"],
|
||||
status: "active",
|
||||
createdAt: "2024-01-08",
|
||||
lastUpdated: "2024-01-14",
|
||||
downloadCount: 15,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "流失预警用户包",
|
||||
description: "预测30天内可能流失的用户",
|
||||
userCount: 3240,
|
||||
tags: ["流失预警", "挽回"],
|
||||
status: "updating",
|
||||
createdAt: "2024-01-05",
|
||||
lastUpdated: "2024-01-15",
|
||||
downloadCount: 8,
|
||||
},
|
||||
]
|
||||
|
||||
export default function PackagesPage() {
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
const [showPreviewDialog, setShowPreviewDialog] = useState(false)
|
||||
const [selectedPackage, setSelectedPackage] = useState<typeof packages[0] | null>(null)
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return <Badge className="bg-green-100 text-green-700">可用</Badge>
|
||||
case "updating":
|
||||
return <Badge className="bg-blue-100 text-blue-700">更新中</Badge>
|
||||
case "expired":
|
||||
return <Badge className="bg-gray-100 text-gray-700">已过期</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">流量包管理</h1>
|
||||
<p className="text-muted-foreground">创建和管理用户流量包，支持多维度筛选和导出</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
创建流量包
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">流量包总数</p>
|
||||
<p className="text-2xl font-bold">24</p>
|
||||
</div>
|
||||
<Package className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">覆盖用户</p>
|
||||
<p className="text-2xl font-bold">156.8K</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">本月下载</p>
|
||||
<p className="text-2xl font-bold">89</p>
|
||||
</div>
|
||||
<Download className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">活跃包</p>
|
||||
<p className="text-2xl font-bold">18</p>
|
||||
</div>
|
||||
<CheckCircle2 className="h-8 w-8 text-cyan-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 流量包列表 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>流量包列表</CardTitle>
|
||||
<CardDescription>管理所有已创建的用户流量包</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input placeholder="搜索流量包..." className="w-64" />
|
||||
<Button variant="outline" size="icon">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>名称</TableHead>
|
||||
<TableHead>用户数</TableHead>
|
||||
<TableHead>标签</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>更新时间</TableHead>
|
||||
<TableHead>下载次数</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{packages.map((pkg) => (
|
||||
<TableRow key={pkg.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{pkg.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{pkg.description}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{pkg.userCount.toLocaleString()}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
{pkg.tags.map((tag) => (
|
||||
<Badge key={tag} variant="outline" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(pkg.status)}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{pkg.lastUpdated}</TableCell>
|
||||
<TableCell>{pkg.downloadCount}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedPackage(pkg)
|
||||
setShowPreviewDialog(true)
|
||||
}}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
刷新数据
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Share2 className="h-4 w-4 mr-2" />
|
||||
分享
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-600">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 创建流量包弹窗 */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建流量包</DialogTitle>
|
||||
<DialogDescription>通过设置筛选条件创建用户流量包</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>流量包名称</Label>
|
||||
<Input placeholder="输入流量包名称" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>描述</Label>
|
||||
<Input placeholder="输入流量包描述" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>筛选条件</Label>
|
||||
<Card className="p-4">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择字段" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="clv_score">CLV评分</SelectItem>
|
||||
<SelectItem value="rfm_level">RFM等级</SelectItem>
|
||||
<SelectItem value="last_active">最后活跃</SelectItem>
|
||||
<SelectItem value="purchase_count">购买次数</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择条件" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="gt">大于</SelectItem>
|
||||
<SelectItem value="lt">小于</SelectItem>
|
||||
<SelectItem value="eq">等于</SelectItem>
|
||||
<SelectItem value="between">介于</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input placeholder="输入值" />
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
添加条件
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>标签</Label>
|
||||
<Input placeholder="输入标签，用逗号分隔" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
|
||||
<Button>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
预览结果
|
||||
</Button>
|
||||
<Button>创建</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 预览弹窗 */}
|
||||
<Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>流量包预览 - {selectedPackage?.name}</DialogTitle>
|
||||
<DialogDescription>{selectedPackage?.description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">用户总数</p>
|
||||
<p className="text-2xl font-bold">{selectedPackage?.userCount.toLocaleString()}</p>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">平均CLV</p>
|
||||
<p className="text-2xl font-bold">¥2,580</p>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">活跃率</p>
|
||||
<p className="text-2xl font-bold">78.5%</p>
|
||||
</Card>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">用户样本</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>用户ID</TableHead>
|
||||
<TableHead>CLV评分</TableHead>
|
||||
<TableHead>RFM等级</TableHead>
|
||||
<TableHead>最后活跃</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>U****001</TableCell>
|
||||
<TableCell>92</TableCell>
|
||||
<TableCell>A</TableCell>
|
||||
<TableCell>2024-01-15</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>U****002</TableCell>
|
||||
<TableCell>88</TableCell>
|
||||
<TableCell>A</TableCell>
|
||||
<TableCell>2024-01-14</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>U****003</TableCell>
|
||||
<TableCell>85</TableCell>
|
||||
<TableCell>B</TableCell>
|
||||
<TableCell>2024-01-15</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowPreviewDialog(false)}>关闭</Button>
|
||||
<Button>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
导出数据
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user