feat：静态做完了，先存一波

nkebao/src/App.tsx

@@ -14,8 +14,11 @@ import MomentsSyncDetail from './pages/workspace/moments-sync/Detail';
 import TrafficDistribution from './pages/workspace/traffic-distribution/TrafficDistribution';
 import TrafficDistributionDetail from './pages/workspace/traffic-distribution/Detail';
 import Scenarios from './pages/scenarios/Scenarios';
+import NewPlan from './pages/scenarios/NewPlan';
+import ScenarioDetail from './pages/scenarios/ScenarioDetail';
 import Profile from './pages/profile/Profile';
 import Plans from './pages/plans/Plans';
+import PlanDetail from './pages/plans/PlanDetail';
 import Orders from './pages/orders/Orders';
 import TrafficPool from './pages/traffic-pool/TrafficPool';
 import ContactImport from './pages/contact-import/ContactImport';
@@ -39,8 +42,11 @@ function App() {
           <Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
           <Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
           <Route path="/scenarios" element={<Scenarios />} />
+          <Route path="/scenarios/new" element={<NewPlan />} />
+          <Route path="/scenarios/:scenarioId" element={<ScenarioDetail />} />
           <Route path="/profile" element={<Profile />} />
           <Route path="/plans" element={<Plans />} />
+          <Route path="/plans/:planId" element={<PlanDetail />} />
           <Route path="/orders" element={<Orders />} />
           <Route path="/traffic-pool" element={<TrafficPool />} />
           <Route path="/contact-import" element={<ContactImport />} />

nkebao/src/pages/plans/PlanDetail.tsx

@@ -0,0 +1,239 @@
+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>
+  );
+} 

nkebao/src/pages/plans/Plans.tsx

@@ -1,5 +1,193 @@
-import React from 'react';
+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() {
-  return <div>套餐页</div>;
+  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>
+  );
 } 

nkebao/src/pages/scenarios/NewPlan.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Check } from 'lucide-react';
+
+interface ScenarioOption {
+  id: string;
+  name: string;
+  icon: string;
+  description: string;
+  image: string;
+}
+
+const scenarioOptions: ScenarioOption[] = [
+  {
+    id: "douyin",
+    name: "抖音获客",
+    icon: "🎵",
+    description: "通过抖音平台进行精准获客",
+    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
+  },
+  {
+    id: "xiaohongshu",
+    name: "小红书获客",
+    icon: "📖",
+    description: "利用小红书平台进行内容营销获客",
+    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
+  },
+  {
+    id: "gongzhonghao",
+    name: "公众号获客",
+    icon: "📱",
+    description: "通过微信公众号进行获客",
+    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
+  },
+  {
+    id: "haibao",
+    name: "海报获客",
+    icon: "🖼️",
+    description: "通过海报分享进行获客",
+    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
+  },
+];
+
+export default function NewPlan() {
+  const navigate = useNavigate();
+  const [selectedScenario, setSelectedScenario] = useState<string>('');
+  const [planName, setPlanName] = useState('');
+  const [description, setDescription] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!selectedScenario || !planName.trim()) {
+      alert('请选择场景并填写计划名称');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // 这里可以调用实际的API
+      // const response = await fetch('/api/plans', {
+      //   method: 'POST',
+      //   headers: { 'Content-Type': 'application/json' },
+      //   body: JSON.stringify({
+      //     scenarioId: selectedScenario,
+      //     name: planName,
+      //     description: description,
+      //   }),
+      // });
+
+      // 模拟API调用
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      // 跳转到计划详情页
+      navigate(`/scenarios/${selectedScenario}?plan=${encodeURIComponent(planName)}`);
+    } catch (error) {
+      console.error('创建计划失败:', error);
+      alert('创建计划失败，请重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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 p-4">
+          <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">新建计划</h1>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* 场景选择 */}
+          <div>
+            <h2 className="text-lg font-medium mb-4">选择获客场景</h2>
+            <div className="grid grid-cols-2 gap-4">
+              {scenarioOptions.map((scenario) => (
+                <div
+                  key={scenario.id}
+                  className={`relative p-4 border-2 rounded-lg cursor-pointer transition-all ${
+                    selectedScenario === scenario.id
+                      ? 'border-blue-500 bg-blue-50'
+                      : 'border-gray-200 bg-white hover:border-gray-300'
+                  }`}
+                  onClick={() => setSelectedScenario(scenario.id)}
+                >
+                  {selectedScenario === scenario.id && (
+                    <div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+                      <Check className="h-4 w-4 text-white" />
+                    </div>
+                  )}
+                  <div className="flex flex-col items-center text-center">
+                    <img 
+                      src={scenario.image} 
+                      alt={scenario.name} 
+                      className="w-12 h-12 mb-2 rounded"
+                    />
+                    <h3 className="font-medium text-gray-900">{scenario.name}</h3>
+                    <p className="text-xs text-gray-500 mt-1">{scenario.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 计划信息 */}
+          <div className="space-y-4">
+            <h2 className="text-lg font-medium">计划信息</h2>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                计划名称 *
+              </label>
+              <input
+                type="text"
+                value={planName}
+                onChange={(e) => setPlanName(e.target.value)}
+                placeholder="请输入计划名称"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                计划描述
+              </label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="请输入计划描述（可选）"
+                rows={3}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+              />
+            </div>
+          </div>
+
+          {/* 提交按钮 */}
+          <div className="pt-4">
+            <button
+              type="submit"
+              disabled={loading || !selectedScenario || !planName.trim()}
+              className="w-full py-3 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+            >
+              {loading ? '创建中...' : '创建计划'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+} 

nkebao/src/pages/scenarios/ScenarioDetail.tsx

@@ -0,0 +1,284 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { ArrowLeft, Plus, Users, TrendingUp, Calendar, Settings } from 'lucide-react';
+
+interface Plan {
+  id: string;
+  name: string;
+  status: 'active' | 'paused' | 'completed';
+  createdAt: string;
+  totalCustomers: number;
+  todayCustomers: number;
+  growth: string;
+}
+
+interface ScenarioData {
+  id: string;
+  name: string;
+  image: string;
+  description: string;
+  totalPlans: number;
+  totalCustomers: number;
+  todayCustomers: number;
+  growth: string;
+}
+
+export default function ScenarioDetail() {
+  const { scenarioId } = useParams<{ scenarioId: string }>();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [scenario, setScenario] = useState<ScenarioData | null>(null);
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const fetchScenarioData = async () => {
+      setLoading(true);
+      try {
+        // 模拟API调用
+        const mockScenario: ScenarioData = {
+          id: scenarioId || '',
+          name: getScenarioName(scenarioId || ''),
+          image: getScenarioImage(scenarioId || ''),
+          description: getScenarioDescription(scenarioId || ''),
+          totalPlans: 12,
+          totalCustomers: 2345,
+          todayCustomers: 156,
+          growth: '+12.5%',
+        };
+
+        const mockPlans: Plan[] = [
+          {
+            id: '1',
+            name: '春季营销计划',
+            status: 'active',
+            createdAt: '2024-03-15',
+            totalCustomers: 456,
+            todayCustomers: 23,
+            growth: '+8.2%',
+          },
+          {
+            id: '2',
+            name: '新品推广计划',
+            status: 'active',
+            createdAt: '2024-03-10',
+            totalCustomers: 234,
+            todayCustomers: 15,
+            growth: '+5.1%',
+          },
+          {
+            id: '3',
+            name: '节日活动计划',
+            status: 'paused',
+            createdAt: '2024-02-28',
+            totalCustomers: 789,
+            todayCustomers: 0,
+            growth: '+0%',
+          },
+        ];
+
+        setScenario(mockScenario);
+        setPlans(mockPlans);
+      } catch (error) {
+        setError('获取场景数据失败');
+        console.error('获取场景数据失败:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchScenarioData();
+  }, [scenarioId]);
+
+  const getScenarioName = (id: string): string => {
+    const names: Record<string, string> = {
+      douyin: '抖音获客',
+      xiaohongshu: '小红书获客',
+      gongzhonghao: '公众号获客',
+      haibao: '海报获客',
+    };
+    return names[id] || '未知场景';
+  };
+
+  const getScenarioImage = (id: string): string => {
+    const images: Record<string, string> = {
+      douyin: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png',
+      xiaohongshu: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png',
+      gongzhonghao: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png',
+      haibao: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png',
+    };
+    return images[id] || '';
+  };
+
+  const getScenarioDescription = (id: string): string => {
+    const descriptions: Record<string, string> = {
+      douyin: '通过抖音平台进行精准获客，利用短视频内容吸引目标用户',
+      xiaohongshu: '利用小红书平台进行内容营销获客，通过优质内容建立品牌形象',
+      gongzhonghao: '通过微信公众号进行获客，建立私域流量池',
+      haibao: '通过海报分享进行获客，快速传播品牌信息',
+    };
+    return descriptions[id] || '';
+  };
+
+  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">
+        <div className="flex justify-center items-center h-40">
+          <div className="text-gray-500">加载中...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !scenario) {
+    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>
+            <div className="flex items-center">
+              <img src={scenario.image} alt={scenario.name} className="w-8 h-8 mr-3 rounded" />
+              <h1 className="text-xl font-semibold">{scenario.name}</h1>
+            </div>
+          </div>
+          <button
+            onClick={() => navigate(`/scenarios/new?scenario=${scenarioId}`)}
+            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">
+        {/* 场景描述 */}
+        <div className="bg-white rounded-lg p-4 mb-6">
+          <p className="text-gray-600 text-sm">{scenario.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">{scenario.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>{scenario.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">{scenario.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>活跃计划: {scenario.totalPlans}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 计划列表 */}
+        <div className="bg-white rounded-lg">
+          <div className="p-4 border-b">
+            <h2 className="text-lg font-medium">获客计划</h2>
+          </div>
+          
+          {plans.length === 0 ? (
+            <div className="p-8 text-center text-gray-500">
+              <p>暂无获客计划</p>
+              <button
+                onClick={() => navigate(`/scenarios/new?scenario=${scenarioId}`)}
+                className="mt-2 text-blue-600 hover:text-blue-700"
+              >
+                立即创建
+              </button>
+            </div>
+          ) : (
+            <div className="divide-y">
+              {plans.map((plan) => (
+                <div key={plan.id} className="p-4 hover:bg-gray-50 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>
+    </div>
+  );
+} 

nkebao/src/pages/scenarios/Scenarios.tsx

@@ -1,5 +1,215 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, TrendingUp } from 'lucide-react';
+
+interface Scenario {
+  id: string;
+  name: string;
+  image: string;
+  description?: string;
+  count: number;
+  growth: string;
+}
 
 export default function Scenarios() {
-  return <div>场景列表页</div>;
+  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">
+        <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">
+        <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}`)}
+            >
+              <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>
+  );
 }