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

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>
+  );
 }