372 lines
17 KiB
TypeScript
372 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { ArrowLeft, Plus, FileText, BarChart2, Mail, Tag } from "lucide-react"
|
|
import { useRouter } from "next/navigation"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import Link from "next/link"
|
|
|
|
interface StrategyPlan {
|
|
id: string
|
|
name: string
|
|
deviceIds: string[]
|
|
deviceNames: string[]
|
|
status: "running" | "completed" | "failed"
|
|
createdAt: string
|
|
completedAt?: string
|
|
strategyType: "jd" | "yisi" | "database" | "custom"
|
|
strategyName: string
|
|
trafficPoolSize: number
|
|
optimizedUsers: number
|
|
}
|
|
|
|
export default function AIStrategyPage() {
|
|
const router = useRouter()
|
|
const [plans, setPlans] = useState<StrategyPlan[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
// 模拟加载数据
|
|
const fetchPlans = async () => {
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
|
const mockPlans: StrategyPlan[] = [
|
|
{
|
|
id: "plan-1",
|
|
name: "京东会员优化",
|
|
deviceIds: ["device-1", "device-2"],
|
|
deviceNames: ["设备1", "设备2"],
|
|
status: "completed",
|
|
createdAt: "2023-12-15T10:30:00Z",
|
|
completedAt: "2023-12-15T11:45:00Z",
|
|
strategyType: "jd",
|
|
strategyName: "京东会员识别",
|
|
trafficPoolSize: 287,
|
|
optimizedUsers: 142,
|
|
},
|
|
{
|
|
id: "plan-2",
|
|
name: "易思API用户分析",
|
|
deviceIds: ["device-3"],
|
|
deviceNames: ["设备3"],
|
|
status: "running",
|
|
createdAt: "2023-12-16T09:15:00Z",
|
|
strategyType: "yisi",
|
|
strategyName: "易思用户画像",
|
|
trafficPoolSize: 156,
|
|
optimizedUsers: 0,
|
|
},
|
|
{
|
|
id: "plan-3",
|
|
name: "数据库客户匹配",
|
|
deviceIds: ["device-1", "device-4"],
|
|
deviceNames: ["设备1", "设备4"],
|
|
status: "completed",
|
|
createdAt: "2023-12-14T14:20:00Z",
|
|
completedAt: "2023-12-14T16:10:00Z",
|
|
strategyType: "database",
|
|
strategyName: "CRM客户匹配",
|
|
trafficPoolSize: 423,
|
|
optimizedUsers: 215,
|
|
},
|
|
]
|
|
|
|
setPlans(mockPlans)
|
|
setIsLoading(false)
|
|
}
|
|
|
|
fetchPlans()
|
|
}, [])
|
|
|
|
const getStatusBadge = (status: StrategyPlan["status"]) => {
|
|
switch (status) {
|
|
case "running":
|
|
return (
|
|
<Badge variant="outline" className="bg-blue-50 text-blue-600 border-blue-200">
|
|
执行中
|
|
</Badge>
|
|
)
|
|
case "completed":
|
|
return (
|
|
<Badge variant="outline" className="bg-green-50 text-green-600 border-green-200">
|
|
已完成
|
|
</Badge>
|
|
)
|
|
case "failed":
|
|
return (
|
|
<Badge variant="outline" className="bg-red-50 text-red-600 border-red-200">
|
|
失败
|
|
</Badge>
|
|
)
|
|
}
|
|
}
|
|
|
|
const getStrategyLabel = (type: StrategyPlan["strategyType"]) => {
|
|
switch (type) {
|
|
case "jd":
|
|
return "京东会员"
|
|
case "yisi":
|
|
return "易思接口"
|
|
case "database":
|
|
return "数据库匹配"
|
|
case "custom":
|
|
return "自定义策略"
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen max-h-screen bg-gray-50">
|
|
{/* 头部 */}
|
|
<div className="bg-white p-4 border-b flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<h1 className="text-xl font-semibold">AI策略优化</h1>
|
|
</div>
|
|
<Button onClick={() => router.push("/workspace/ai-strategy/new")} className="flex items-center gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
新建优化策略
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 主内容区域 */}
|
|
<div className="flex-1 p-4 overflow-auto">
|
|
<div className="max-w-5xl mx-auto">
|
|
<Tabs defaultValue="all" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-3 mb-6">
|
|
<TabsTrigger value="all">全部策略</TabsTrigger>
|
|
<TabsTrigger value="running">执行中</TabsTrigger>
|
|
<TabsTrigger value="completed">已完成</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="all" className="space-y-4">
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
|
|
</div>
|
|
) : plans.length > 0 ? (
|
|
plans.map((plan) => (
|
|
<Card key={plan.id} className="hover:shadow-md transition-shadow">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<CardTitle>{plan.name}</CardTitle>
|
|
<CardDescription className="mt-1">设备: {plan.deviceNames.join(", ")}</CardDescription>
|
|
</div>
|
|
{getStatusBadge(plan.status)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col space-y-3">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">策略类型</span>
|
|
<span className="font-medium">{getStrategyLabel(plan.strategyType)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">策略名称</span>
|
|
<span className="font-medium">{plan.strategyName}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">流量池大小</span>
|
|
<span className="font-medium">{plan.trafficPoolSize} 用户</span>
|
|
</div>
|
|
{plan.status === "completed" && (
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">优化用户数</span>
|
|
<span className="font-medium">{plan.optimizedUsers} 用户</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">创建时间</span>
|
|
<span>{new Date(plan.createdAt).toLocaleString()}</span>
|
|
</div>
|
|
{plan.completedAt && (
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">完成时间</span>
|
|
<span>{new Date(plan.completedAt).toLocaleString()}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
{plan.status === "completed" && (
|
|
<>
|
|
<Button variant="outline" size="sm" className="flex items-center gap-1">
|
|
<Tag className="h-4 w-4" />
|
|
<span>导入标签</span>
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="flex items-center gap-1">
|
|
<Mail className="h-4 w-4" />
|
|
<span>发送报告</span>
|
|
</Button>
|
|
<Link href={`/workspace/ai-strategy/${plan.id}`}>
|
|
<Button size="sm" className="flex items-center gap-1">
|
|
<BarChart2 className="h-4 w-4" />
|
|
<span>查看报告</span>
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
{plan.status === "running" && (
|
|
<Button variant="outline" size="sm" className="flex items-center gap-1">
|
|
<FileText className="h-4 w-4" />
|
|
<span>查看进度</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<div className="text-center py-12 bg-white rounded-lg border">
|
|
<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<BarChart2 className="h-8 w-8 text-gray-400" />
|
|
</div>
|
|
<h3 className="text-lg font-medium text-gray-900 mb-1">暂无优化策略</h3>
|
|
<p className="text-gray-500 mb-4">创建一个新的AI策略优化计划来开始</p>
|
|
<Button onClick={() => router.push("/workspace/ai-strategy/new")}>新建优化策略</Button>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="running" className="space-y-4">
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
|
|
</div>
|
|
) : plans.filter((p) => p.status === "running").length > 0 ? (
|
|
plans
|
|
.filter((p) => p.status === "running")
|
|
.map((plan) => (
|
|
<Card key={plan.id} className="hover:shadow-md transition-shadow">
|
|
{/* 与上面相同的卡片内容 */}
|
|
<CardHeader className="pb-2">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<CardTitle>{plan.name}</CardTitle>
|
|
<CardDescription className="mt-1">设备: {plan.deviceNames.join(", ")}</CardDescription>
|
|
</div>
|
|
{getStatusBadge(plan.status)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col space-y-3">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">策略类型</span>
|
|
<span className="font-medium">{getStrategyLabel(plan.strategyType)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">策略名称</span>
|
|
<span className="font-medium">{plan.strategyName}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">流量池大小</span>
|
|
<span className="font-medium">{plan.trafficPoolSize} 用户</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">创建时间</span>
|
|
<span>{new Date(plan.createdAt).toLocaleString()}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<Button variant="outline" size="sm" className="flex items-center gap-1">
|
|
<FileText className="h-4 w-4" />
|
|
<span>查看进度</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<div className="text-center py-12 bg-white rounded-lg border">
|
|
<p className="text-gray-500">暂无执行中的优化策略</p>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="completed" className="space-y-4">
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
|
|
</div>
|
|
) : plans.filter((p) => p.status === "completed").length > 0 ? (
|
|
plans
|
|
.filter((p) => p.status === "completed")
|
|
.map((plan) => (
|
|
<Card key={plan.id} className="hover:shadow-md transition-shadow">
|
|
{/* 与上面相同的卡片内容 */}
|
|
<CardHeader className="pb-2">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<CardTitle>{plan.name}</CardTitle>
|
|
<CardDescription className="mt-1">设备: {plan.deviceNames.join(", ")}</CardDescription>
|
|
</div>
|
|
{getStatusBadge(plan.status)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col space-y-3">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">策略类型</span>
|
|
<span className="font-medium">{getStrategyLabel(plan.strategyType)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">策略名称</span>
|
|
<span className="font-medium">{plan.strategyName}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">流量池大小</span>
|
|
<span className="font-medium">{plan.trafficPoolSize} 用户</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">优化用户数</span>
|
|
<span className="font-medium">{plan.optimizedUsers} 用户</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">创建时间</span>
|
|
<span>{new Date(plan.createdAt).toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">完成时间</span>
|
|
<span>{new Date(plan.completedAt!).toLocaleString()}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<Button variant="outline" size="sm" className="flex items-center gap-1">
|
|
<Tag className="h-4 w-4" />
|
|
<span>导入标签</span>
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="flex items-center gap-1">
|
|
<Mail className="h-4 w-4" />
|
|
<span>发送报告</span>
|
|
</Button>
|
|
<Link href={`/workspace/ai-strategy/${plan.id}`}>
|
|
<Button size="sm" className="flex items-center gap-1">
|
|
<BarChart2 className="h-4 w-4" />
|
|
<span>查看报告</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<div className="text-center py-12 bg-white rounded-lg border">
|
|
<p className="text-gray-500">暂无已完成的优化策略</p>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|