311 lines
10 KiB
TypeScript
311 lines
10 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import type React from "react"
|
||
import { TrendingUp, Users, ChevronLeft, Bot, Sparkles, Plus, Phone } from "lucide-react"
|
||
import { Card } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { useRouter } from "next/navigation"
|
||
import { Skeleton } from "@/components/ui/skeleton"
|
||
import { fetchScenes, transformSceneItem } from "@/api/scenarios"
|
||
|
||
interface Channel {
|
||
id: string
|
||
name: string
|
||
icon: string
|
||
stats: {
|
||
daily: number
|
||
growth: number
|
||
}
|
||
link?: string
|
||
plans?: Plan[]
|
||
}
|
||
|
||
interface Plan {
|
||
id: string
|
||
name: string
|
||
isNew?: boolean
|
||
status: "active" | "paused" | "completed"
|
||
acquisitionCount: number
|
||
}
|
||
|
||
// AI场景列表（服务端暂未提供）
|
||
const aiScenarios = [
|
||
{
|
||
id: "ai-friend",
|
||
name: "AI智能加友",
|
||
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-azCH8EgGfidWXOqiM2D1jLH0VFRUtW.png",
|
||
description: "智能分析目标用户画像，自动筛选优质客户",
|
||
stats: {
|
||
daily: 245,
|
||
growth: 18.5,
|
||
},
|
||
link: "/scenarios/ai-friend",
|
||
plans: [
|
||
{
|
||
id: "ai-plan-1",
|
||
name: "AI智能筛选计划",
|
||
isNew: true,
|
||
status: "active",
|
||
acquisitionCount: 78,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "ai-group",
|
||
name: "AI群引流",
|
||
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-azCH8EgGfidWXOqiM2D1jLH0VFRUtW.png",
|
||
description: "智能群聊互动，提高群活跃度和转化率",
|
||
stats: {
|
||
daily: 178,
|
||
growth: 15.2,
|
||
},
|
||
link: "/scenarios/ai-group",
|
||
plans: [
|
||
{
|
||
id: "ai-plan-2",
|
||
name: "AI群聊互动计划",
|
||
status: "active",
|
||
acquisitionCount: 56,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "ai-conversion",
|
||
name: "AI场景转化",
|
||
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-m4ENUaZon82EPFHod2dP1dajlrRdVG.png",
|
||
description: "多场景智能营销，提升获客转化效果",
|
||
stats: {
|
||
daily: 134,
|
||
growth: 12.8,
|
||
},
|
||
link: "/scenarios/ai-conversion",
|
||
plans: [
|
||
{
|
||
id: "ai-plan-3",
|
||
name: "AI多场景营销",
|
||
isNew: true,
|
||
status: "active",
|
||
acquisitionCount: 43,
|
||
},
|
||
],
|
||
},
|
||
]
|
||
|
||
export default function ScenariosPage() {
|
||
const router = useRouter()
|
||
const [channels, setChannels] = useState<Channel[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
const loadScenes = async () => {
|
||
try {
|
||
setLoading(true)
|
||
const response = await fetchScenes({ limit: 50 })
|
||
|
||
if (response.code === 200 && response.data?.list) {
|
||
// 转换场景数据为前端展示格式
|
||
const transformedScenes = response.data.list.map((scene) => {
|
||
const transformedScene = transformSceneItem(scene)
|
||
|
||
// 添加link属性（用于导航）
|
||
return {
|
||
...transformedScene,
|
||
link: `/scenarios/${scene.id}`
|
||
}
|
||
})
|
||
|
||
setChannels(transformedScenes)
|
||
} else {
|
||
setError(response.msg || "获取场景列表失败")
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to fetch scenes:", err)
|
||
setError("获取场景列表失败")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
loadScenes()
|
||
}, [])
|
||
|
||
const handleChannelClick = (channelId: string, event: React.MouseEvent) => {
|
||
router.push(`/scenarios/${channelId}`)
|
||
}
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case "active":
|
||
return "bg-green-100 text-green-700"
|
||
case "paused":
|
||
return "bg-amber-100 text-amber-700"
|
||
case "completed":
|
||
return "bg-blue-100 text-blue-700"
|
||
default:
|
||
return "bg-gray-100 text-gray-700"
|
||
}
|
||
}
|
||
|
||
const getStatusText = (status: string) => {
|
||
switch (status) {
|
||
case "active":
|
||
return "执行中"
|
||
case "paused":
|
||
return "已暂停"
|
||
case "completed":
|
||
return "已完成"
|
||
default:
|
||
return "未知状态"
|
||
}
|
||
}
|
||
|
||
// 展示场景骨架屏
|
||
const renderSkeletons = () => {
|
||
return Array(8)
|
||
.fill(0)
|
||
.map((_, index) => (
|
||
<div key={`skeleton-${index}`} className="flex flex-col">
|
||
<Card className="p-4">
|
||
<div className="flex flex-col items-center text-center space-y-3">
|
||
<Skeleton className="w-12 h-12 rounded-xl" />
|
||
<Skeleton className="h-4 w-24" />
|
||
<div className="flex items-center space-x-1">
|
||
<Skeleton className="h-3 w-3 rounded-full" />
|
||
<Skeleton className="h-4 w-16" />
|
||
</div>
|
||
<Skeleton className="h-3 w-12" />
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
))
|
||
}
|
||
|
||
return (
|
||
<div className="flex-1 bg-gray-50">
|
||
<div className="w-full mx-auto bg-white min-h-screen lg:max-w-7xl xl:max-w-[1200px]">
|
||
<header className="sticky top-0 z-10 bg-white border-b">
|
||
<div className="flex justify-between items-center p-4">
|
||
<div className="flex items-center space-x-3">
|
||
<Button variant="ghost" size="icon" onClick={() => window.history.back()}>
|
||
<ChevronLeft className="h-5 w-5" />
|
||
</Button>
|
||
<h1 className="text-xl font-semibold text-blue-600">场景获客</h1>
|
||
</div>
|
||
|
||
<Button className="bg-blue-600 hover:bg-blue-700" onClick={() => router.push("/plans/new")}>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
新建计划
|
||
</Button>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="p-4 space-y-6">
|
||
{/* 错误提示 */}
|
||
{error && (
|
||
<div className="bg-red-50 text-red-600 p-4 rounded-md">
|
||
<p>{error}</p>
|
||
<Button
|
||
variant="outline"
|
||
className="mt-2"
|
||
onClick={() => window.location.reload()}
|
||
>
|
||
重试
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Traditional channels */}
|
||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||
{loading ? (
|
||
renderSkeletons()
|
||
) : (
|
||
channels.map((channel) => (
|
||
<div key={channel.id} className="flex flex-col">
|
||
<Card
|
||
className={`p-4 hover:shadow-lg transition-all cursor-pointer`}
|
||
onClick={() => router.push(channel.link || "")}
|
||
>
|
||
<div className="flex flex-col items-center text-center space-y-3">
|
||
<div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-sm">
|
||
<img
|
||
src={channel.icon || "/placeholder.svg"}
|
||
alt={channel.name}
|
||
className="w-8 h-8 object-contain"
|
||
onError={(e) => {
|
||
// 图片加载失败时，使用默认图标
|
||
const target = e.target as HTMLImageElement
|
||
target.src = "/assets/icons/poster-icon.svg"
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<h3 className="text-sm font-medium text-blue-600">{channel.name}</h3>
|
||
|
||
<div className="flex items-center space-x-1">
|
||
<Users className="w-3 h-3 text-gray-400" />
|
||
<div className="flex items-baseline">
|
||
<span className="text-xs text-gray-500">今日：</span>
|
||
<span className="text-base font-medium ml-1">{channel.stats.daily}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center text-green-500 text-xs">
|
||
<TrendingUp className="w-3 h-3 mr-1" />
|
||
<span>{channel.stats.growth > 0 ? "+" : ""}{channel.stats.growth}%</span>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* AI scenarios */}
|
||
<div>
|
||
<div className="flex items-center space-x-2 mb-3">
|
||
<Bot className="w-5 h-5 text-blue-600" />
|
||
<h2 className="text-lg font-medium">AI智能获客</h2>
|
||
<span className="px-2 py-0.5 bg-blue-50 text-blue-600 text-xs rounded-full">Beta</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||
{aiScenarios.map((scenario) => (
|
||
<div key={scenario.id} className="flex flex-col">
|
||
<Card
|
||
className={`p-4 hover:shadow-lg transition-all bg-gradient-to-br from-blue-50/50 to-white border-2 border-blue-100`}
|
||
onClick={() => router.push(scenario.link || "")}
|
||
>
|
||
<div className="flex flex-col items-center text-center space-y-3">
|
||
<div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center shadow-sm">
|
||
<Sparkles className="w-6 h-6 text-blue-500" />
|
||
</div>
|
||
|
||
<h3 className="text-sm font-medium text-blue-600">{scenario.name}</h3>
|
||
<p className="text-xs text-gray-500 text-center line-clamp-2">{scenario.description}</p>
|
||
|
||
<div className="flex items-center space-x-1">
|
||
<Users className="w-3 h-3 text-gray-400" />
|
||
<div className="flex items-baseline">
|
||
<span className="text-xs text-gray-500">今日：</span>
|
||
<span className="text-base font-medium ml-1">{scenario.stats.daily}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center text-green-500 text-xs">
|
||
<TrendingUp className="w-3 h-3 mr-1" />
|
||
<span>+{scenario.stats.growth}%</span>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|