215 lines
7.3 KiB
TypeScript
215 lines
7.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Plus, TrendingUp } from 'lucide-react';
|
||
import PageHeader from '@/components/PageHeader';
|
||
|
||
interface Scenario {
|
||
id: string;
|
||
name: string;
|
||
image: string;
|
||
description?: string;
|
||
count: number;
|
||
growth: string;
|
||
}
|
||
|
||
export default function Scenarios() {
|
||
const navigate = useNavigate();
|
||
const [scenarios, setScenarios] = useState<Scenario[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState('');
|
||
|
||
// AI智能获客用本地 mock 数据（暂时注释掉，可以后续启用）
|
||
// const aiScenarios = [
|
||
// {
|
||
// id: "ai-friend",
|
||
// name: "AI智能加友",
|
||
// icon: "🤖",
|
||
// count: 245,
|
||
// growth: "+18.5%",
|
||
// description: "智能分析目标用户画像，自动筛选优质客户",
|
||
// path: "/scenarios/ai-friend",
|
||
// },
|
||
// {
|
||
// id: "ai-group",
|
||
// name: "AI群引流",
|
||
// icon: "🤖",
|
||
// count: 178,
|
||
// growth: "+15.2%",
|
||
// description: "智能群管理，提高群活跃度，增强获客效果",
|
||
// path: "/scenarios/ai-group",
|
||
// },
|
||
// {
|
||
// id: "ai-conversion",
|
||
// name: "AI场景转化",
|
||
// icon: "🤖",
|
||
// count: 134,
|
||
// growth: "+12.8%",
|
||
// description: "多场景智能营销，提升获客转化率",
|
||
// path: "/scenarios/ai-conversion",
|
||
// },
|
||
// ];
|
||
|
||
useEffect(() => {
|
||
const fetchScenarios = async () => {
|
||
setLoading(true);
|
||
try {
|
||
// 这里可以调用实际的API
|
||
// const response = await fetch('/api/scenarios');
|
||
// const data = await response.json();
|
||
|
||
// 模拟数据
|
||
const mockScenarios: Scenario[] = [
|
||
{
|
||
id: "douyin",
|
||
name: "抖音获客",
|
||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
|
||
description: "通过抖音平台进行精准获客",
|
||
count: 156,
|
||
growth: "+12%",
|
||
},
|
||
{
|
||
id: "xiaohongshu",
|
||
name: "小红书获客",
|
||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
|
||
description: "利用小红书平台进行内容营销获客",
|
||
count: 89,
|
||
growth: "+8%",
|
||
},
|
||
{
|
||
id: "gongzhonghao",
|
||
name: "公众号获客",
|
||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
|
||
description: "通过微信公众号进行获客",
|
||
count: 234,
|
||
growth: "+15%",
|
||
},
|
||
{
|
||
id: "haibao",
|
||
name: "海报获客",
|
||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
|
||
description: "通过海报分享进行获客",
|
||
count: 167,
|
||
growth: "+10%",
|
||
},
|
||
];
|
||
|
||
setScenarios(mockScenarios);
|
||
} catch (error) {
|
||
setError('获取场景数据失败');
|
||
console.error('获取场景数据失败:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchScenarios();
|
||
}, []);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
|
||
<PageHeader
|
||
title="场景获客"
|
||
showBack={false}
|
||
/>
|
||
<div className="flex justify-center items-center h-40">
|
||
<div className="text-gray-500">加载中...</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
|
||
<PageHeader
|
||
title="场景获客"
|
||
showBack={false}
|
||
/>
|
||
<div className="text-red-500 text-center py-8">{error}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
|
||
<PageHeader
|
||
title="场景获客"
|
||
showBack={false}
|
||
rightContent={
|
||
<button
|
||
onClick={() => navigate('/scenarios/new')}
|
||
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
|
||
>
|
||
<Plus className="h-4 w-4 mr-1" />
|
||
新建计划
|
||
</button>
|
||
}
|
||
/>
|
||
|
||
<div className="p-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{scenarios.map((scenario) => (
|
||
<div
|
||
key={scenario.id}
|
||
className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
|
||
onClick={() => navigate(`/scenarios/${scenario.id}/detail`)}
|
||
>
|
||
<div className="p-4 flex flex-col items-center">
|
||
<img src={scenario.image} alt={scenario.name} className="w-12 h-12 mb-2 rounded" />
|
||
<h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
|
||
{scenario.description && (
|
||
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
|
||
)}
|
||
<div className="flex items-center mt-2 text-gray-500 text-sm">
|
||
<span>今日: </span>
|
||
<span className="font-medium ml-1">{scenario.count}</span>
|
||
</div>
|
||
<div className="flex items-center mt-1 text-green-500 text-xs">
|
||
<TrendingUp className="h-3 w-3 mr-1" />
|
||
<span>{scenario.growth}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* AI智能获客部分（暂时注释掉，可以后续启用） */}
|
||
{/*
|
||
<div className="mt-6">
|
||
<div className="flex items-center mb-4">
|
||
<h2 className="text-lg font-medium">AI智能获客</h2>
|
||
<span className="ml-2 px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded border">
|
||
Beta
|
||
</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{aiScenarios.map((scenario) => (
|
||
<div
|
||
key={scenario.id}
|
||
className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
|
||
onClick={() => navigate(scenario.path)}
|
||
>
|
||
<div className="p-4 flex flex-col items-center">
|
||
<div className="text-3xl mb-2">{scenario.icon}</div>
|
||
<h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
|
||
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
|
||
<div className="flex items-center mt-2 text-gray-500 text-sm">
|
||
<span>今日: </span>
|
||
<span className="font-medium ml-1">{scenario.count}</span>
|
||
</div>
|
||
<div className="flex items-center mt-1 text-green-500 text-xs">
|
||
<TrendingUp className="h-3 w-3 mr-1" />
|
||
<span>{scenario.growth}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
*/}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|