cunkebao_v3/nkebao/src/pages/plans/Plans.tsx

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, Users, TrendingUp, Calendar } from 'lucide-react';

interface Plan {
  id: string;
  name: string;
  status: 'active' | 'paused' | 'completed';
  createdAt: string;
  totalCustomers: number;
  todayCustomers: number;
  growth: string;
  scenario: string;
}

export default function Plans() {
  const navigate = useNavigate();
  const [plans, setPlans] = useState<Plan[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchPlans = async () => {
      setLoading(true);
      try {
        // 模拟API调用
        const mockPlans: Plan[] = [
          {
            id: '1',
            name: '春季营销计划',
            status: 'active',
            createdAt: '2024-03-15',
            totalCustomers: 456,
            todayCustomers: 23,
            growth: '+8.2%',
            scenario: 'douyin',
          },
          {
            id: '2',
            name: '新品推广计划',
            status: 'active',
            createdAt: '2024-03-10',
            totalCustomers: 234,
            todayCustomers: 15,
            growth: '+5.1%',
            scenario: 'xiaohongshu',
          },
          {
            id: '3',
            name: '节日活动计划',
            status: 'paused',
            createdAt: '2024-02-28',
            totalCustomers: 789,
            todayCustomers: 0,
            growth: '+0%',
            scenario: 'gongzhonghao',
          },
        ];

        setPlans(mockPlans);
      } catch (error) {
        setError('获取计划数据失败');
        console.error('获取计划数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPlans();
  }, []);

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'active':
        return 'text-green-600 bg-green-50';
      case 'paused':
        return 'text-yellow-600 bg-yellow-50';
      case 'completed':
        return 'text-gray-600 bg-gray-50';
      default:
        return 'text-gray-600 bg-gray-50';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'active':
        return '进行中';
      case 'paused':
        return '已暂停';
      case 'completed':
        return '已完成';
      default:
        return '未知';
    }
  };

  if (loading) {
    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">
            <h1 className="text-xl font-semibold">获客计划</h1>
          </div>
        </header>
        <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">
        <header className="sticky top-0 z-10 bg-white border-b">
          <div className="flex items-center justify-between p-4">
            <h1 className="text-xl font-semibold">获客计划</h1>
          </div>
        </header>
        <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">
          <h1 className="text-xl font-semibold">获客计划</h1>
          <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>
      </header>

      <div className="p-4">
        {plans.length === 0 ? (
          <div className="text-center py-8 text-gray-500">
            <p>暂无获客计划</p>
            <button
              onClick={() => navigate('/scenarios/new')}
              className="mt-2 text-blue-600 hover:text-blue-700"
            >
              立即创建
            </button>
          </div>
        ) : (
          <div className="space-y-4">
            {plans.map((plan) => (
              <div
                key={plan.id}
                className="bg-white rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
                onClick={() => navigate(`/plans/${plan.id}`)}
              >
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <div className="flex items-center mb-2">
                      <h3 className="font-medium text-gray-900">{plan.name}</h3>
                      <span className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(plan.status)}`}>
                        {getStatusText(plan.status)}
                      </span>
                    </div>
                    <div className="flex items-center text-sm text-gray-500">
                      <Calendar className="h-4 w-4 mr-1" />
                      <span>创建于 {plan.createdAt}</span>
                    </div>
                  </div>
                  
                  <div className="text-right">
                    <div className="flex items-center text-sm">
                      <span className="text-gray-500">总获客:</span>
                      <span className="font-medium ml-1">{plan.totalCustomers}</span>
                    </div>
                    <div className="flex items-center text-sm mt-1">
                      <span className="text-gray-500">今日:</span>
                      <span className="font-medium ml-1">{plan.todayCustomers}</span>
                      <span className="text-green-500 ml-1">({plan.growth})</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}