369 lines
16 KiB
TypeScript
369 lines
16 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 } 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 AnalysisPlan {
|
|
id: string
|
|
name: string
|
|
wechatId: string
|
|
deviceName: string
|
|
status: "running" | "completed" | "failed"
|
|
createdAt: string
|
|
completedAt?: string
|
|
keywords: string[]
|
|
type: "friends" | "moments" | "both" | "behavior"
|
|
}
|
|
|
|
export default function AIAnalyzerPage() {
|
|
const router = useRouter()
|
|
const [plans, setPlans] = useState<AnalysisPlan[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
// 模拟加载数据
|
|
const fetchPlans = async () => {
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
|
const mockPlans: AnalysisPlan[] = [
|
|
{
|
|
id: "plan-1",
|
|
name: "美妆用户分析",
|
|
wechatId: "wxid_abc123",
|
|
deviceName: "设备1",
|
|
status: "completed",
|
|
createdAt: "2023-12-15T10:30:00Z",
|
|
completedAt: "2023-12-15T11:45:00Z",
|
|
keywords: ["美妆", "护肤", "彩妆"],
|
|
type: "both",
|
|
},
|
|
{
|
|
id: "plan-2",
|
|
name: "健身爱好者分析",
|
|
wechatId: "wxid_fit456",
|
|
deviceName: "设备2",
|
|
status: "running",
|
|
createdAt: "2023-12-16T09:15:00Z",
|
|
keywords: ["健身", "运动", "健康"],
|
|
type: "friends",
|
|
},
|
|
{
|
|
id: "plan-3",
|
|
name: "教育行业分析",
|
|
wechatId: "wxid_edu789",
|
|
deviceName: "设备3",
|
|
status: "completed",
|
|
createdAt: "2023-12-14T14:20:00Z",
|
|
completedAt: "2023-12-14T16:10:00Z",
|
|
keywords: ["教育", "培训", "学习"],
|
|
type: "moments",
|
|
},
|
|
{
|
|
id: "plan-4",
|
|
name: "用户行为分析",
|
|
wechatId: "wxid_beh123",
|
|
deviceName: "设备4",
|
|
status: "completed",
|
|
createdAt: "2023-12-18T08:20:00Z",
|
|
completedAt: "2023-12-18T10:15:00Z",
|
|
keywords: ["活跃度", "互动", "转化"],
|
|
type: "behavior",
|
|
},
|
|
]
|
|
|
|
setPlans(mockPlans)
|
|
setIsLoading(false)
|
|
}
|
|
|
|
fetchPlans()
|
|
}, [])
|
|
|
|
const getStatusBadge = (status: AnalysisPlan["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 getTypeLabel = (type: AnalysisPlan["type"]) => {
|
|
switch (type) {
|
|
case "friends":
|
|
return "好友信息分析"
|
|
case "moments":
|
|
return "朋友圈内容分析"
|
|
case "both":
|
|
return "综合分析"
|
|
case "behavior":
|
|
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-analyzer/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.deviceName} | 微信号: {plan.wechatId}
|
|
</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">{getTypeLabel(plan.type)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">关键词</span>
|
|
<div className="flex flex-wrap gap-1 justify-end">
|
|
{plan.keywords.map((keyword, index) => (
|
|
<Badge key={index} variant="secondary" className="text-xs">
|
|
{keyword}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</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">
|
|
<Mail className="h-4 w-4" />
|
|
<span>发送报告</span>
|
|
</Button>
|
|
<Link href={`/workspace/ai-analyzer/${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-analyzer/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.deviceName} | 微信号: {plan.wechatId}
|
|
</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">{getTypeLabel(plan.type)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">关键词</span>
|
|
<div className="flex flex-wrap gap-1 justify-end">
|
|
{plan.keywords.map((keyword, index) => (
|
|
<Badge key={index} variant="secondary" className="text-xs">
|
|
{keyword}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</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.deviceName} | 微信号: {plan.wechatId}
|
|
</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">{getTypeLabel(plan.type)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">关键词</span>
|
|
<div className="flex flex-wrap gap-1 justify-end">
|
|
{plan.keywords.map((keyword, index) => (
|
|
<Badge key={index} variant="secondary" className="text-xs">
|
|
{keyword}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</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">
|
|
<Button variant="outline" size="sm" className="flex items-center gap-1">
|
|
<Mail className="h-4 w-4" />
|
|
<span>发送报告</span>
|
|
</Button>
|
|
<Link href={`/workspace/ai-analyzer/${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>
|
|
)
|
|
}
|
|
|