239 lines
8.7 KiB
TypeScript
239 lines
8.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { ArrowLeft, Users, TrendingUp, Calendar, Settings, Play, Pause, Edit } from 'lucide-react';
|
|
|
|
interface PlanData {
|
|
id: string;
|
|
name: string;
|
|
status: 'active' | 'paused' | 'completed';
|
|
createdAt: string;
|
|
totalCustomers: number;
|
|
todayCustomers: number;
|
|
growth: string;
|
|
description?: string;
|
|
scenario: string;
|
|
}
|
|
|
|
export default function PlanDetail() {
|
|
const { planId } = useParams<{ planId: string }>();
|
|
const navigate = useNavigate();
|
|
const [plan, setPlan] = useState<PlanData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
const fetchPlanData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
// 模拟API调用
|
|
const mockPlan: PlanData = {
|
|
id: planId || '',
|
|
name: '春季营销计划',
|
|
status: 'active',
|
|
createdAt: '2024-03-15',
|
|
totalCustomers: 456,
|
|
todayCustomers: 23,
|
|
growth: '+8.2%',
|
|
description: '针对春季市场的营销推广计划，通过多种渠道获取潜在客户',
|
|
scenario: 'douyin',
|
|
};
|
|
|
|
setPlan(mockPlan);
|
|
} catch (error) {
|
|
setError('获取计划数据失败');
|
|
console.error('获取计划数据失败:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchPlanData();
|
|
}, [planId]);
|
|
|
|
const handleStatusChange = async (newStatus: 'active' | 'paused') => {
|
|
if (!plan) return;
|
|
|
|
try {
|
|
// 这里可以调用实际的API
|
|
// await fetch(`/api/plans/${plan.id}/status`, {
|
|
// method: 'PATCH',
|
|
// headers: { 'Content-Type': 'application/json' },
|
|
// body: JSON.stringify({ status: newStatus }),
|
|
// });
|
|
|
|
setPlan({ ...plan, status: newStatus });
|
|
} catch (error) {
|
|
console.error('更新计划状态失败:', error);
|
|
alert('更新失败，请重试');
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
|
|
<div className="flex justify-center items-center h-40">
|
|
<div className="text-gray-500">加载中...</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !plan) {
|
|
return (
|
|
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
|
|
<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">
|
|
<header className="sticky top-0 z-10 bg-white border-b">
|
|
<div className="flex items-center justify-between p-4">
|
|
<div className="flex items-center">
|
|
<button
|
|
onClick={() => navigate(-1)}
|
|
className="mr-3 p-1 hover:bg-gray-100 rounded"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</button>
|
|
<h1 className="text-xl font-semibold">{plan.name}</h1>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => navigate(`/plans/${plan.id}/edit`)}
|
|
className="p-2 hover:bg-gray-100 rounded"
|
|
>
|
|
<Edit className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => navigate(`/plans/${plan.id}/settings`)}
|
|
className="p-2 hover:bg-gray-100 rounded"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="p-4">
|
|
{/* 计划描述 */}
|
|
{plan.description && (
|
|
<div className="bg-white rounded-lg p-4 mb-6">
|
|
<p className="text-gray-600 text-sm">{plan.description}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 数据统计 */}
|
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
|
<div className="bg-white rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-gray-500 text-sm">总获客数</p>
|
|
<p className="text-2xl font-bold text-gray-900">{plan.totalCustomers}</p>
|
|
</div>
|
|
<Users className="h-8 w-8 text-blue-500" />
|
|
</div>
|
|
<div className="flex items-center mt-2 text-green-500 text-sm">
|
|
<TrendingUp className="h-4 w-4 mr-1" />
|
|
<span>{plan.growth}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-gray-500 text-sm">今日获客</p>
|
|
<p className="text-2xl font-bold text-gray-900">{plan.todayCustomers}</p>
|
|
</div>
|
|
<Calendar className="h-8 w-8 text-green-500" />
|
|
</div>
|
|
<div className="flex items-center mt-2 text-gray-500 text-sm">
|
|
<span>创建于 {plan.createdAt}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 状态控制 */}
|
|
<div className="bg-white rounded-lg p-4 mb-6">
|
|
<h3 className="text-lg font-medium mb-4">计划状态</h3>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<span className={`px-3 py-1 rounded-full text-sm ${
|
|
plan.status === 'active'
|
|
? 'text-green-600 bg-green-50'
|
|
: plan.status === 'paused'
|
|
? 'text-yellow-600 bg-yellow-50'
|
|
: 'text-gray-600 bg-gray-50'
|
|
}`}>
|
|
{plan.status === 'active' ? '进行中' : plan.status === 'paused' ? '已暂停' : '已完成'}
|
|
</span>
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
{plan.status === 'active' ? (
|
|
<button
|
|
onClick={() => handleStatusChange('paused')}
|
|
className="flex items-center px-3 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition-colors text-sm"
|
|
>
|
|
<Pause className="h-4 w-4 mr-1" />
|
|
暂停
|
|
</button>
|
|
) : plan.status === 'paused' ? (
|
|
<button
|
|
onClick={() => handleStatusChange('active')}
|
|
className="flex items-center px-3 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors text-sm"
|
|
>
|
|
<Play className="h-4 w-4 mr-1" />
|
|
启动
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 功能区域 */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-white rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onClick={() => navigate(`/plans/${plan.id}/customers`)}>
|
|
<div className="flex items-center">
|
|
<Users className="h-8 w-8 text-blue-500 mr-3" />
|
|
<div>
|
|
<h3 className="font-medium text-gray-900">客户管理</h3>
|
|
<p className="text-sm text-gray-500">查看和管理获客客户</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onClick={() => navigate(`/plans/${plan.id}/analytics`)}>
|
|
<div className="flex items-center">
|
|
<TrendingUp className="h-8 w-8 text-green-500 mr-3" />
|
|
<div>
|
|
<h3 className="font-medium text-gray-900">数据分析</h3>
|
|
<p className="text-sm text-gray-500">查看获客数据统计</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onClick={() => navigate(`/plans/${plan.id}/content`)}>
|
|
<div className="flex items-center">
|
|
<Calendar className="h-8 w-8 text-purple-500 mr-3" />
|
|
<div>
|
|
<h3 className="font-medium text-gray-900">内容管理</h3>
|
|
<p className="text-sm text-gray-500">管理营销内容</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onClick={() => navigate(`/plans/${plan.id}/settings`)}>
|
|
<div className="flex items-center">
|
|
<Settings className="h-8 w-8 text-gray-500 mr-3" />
|
|
<div>
|
|
<h3 className="font-medium text-gray-900">计划设置</h3>
|
|
<p className="text-sm text-gray-500">配置计划参数</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|