feat: 本次提交更新内容如下

更了全局layout组件

nkebao/src/components/Layout.css

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.container main {
+  flex: 1;
+  overflow: auto;
+} 

nkebao/src/components/Layout.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface LayoutProps {
+  loading?: boolean;
+  children?: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ 
+  loading, 
+  children, 
+  header, 
+  footer 
+}) => {
+  return (
+    <div className="container">
+      {header && (
+        <header>
+          {header}
+        </header>
+      )}
+      <main>
+        {children}
+      </main>
+      {footer && (
+        <footer>
+          {footer}
+        </footer>
+      )}
+    </div>
+  );
+};
+
+export default Layout; 

nkebao/src/pages/Home.tsx

@@ -2,6 +2,9 @@ import React, { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Bell, Smartphone, Users, Activity } from 'lucide-react';
 import Chart from 'chart.js/auto';
+import Layout from '@/components/Layout';
+import BottomNav from '@/components/BottomNav';
+import '@/components/Layout.css';
 
 // 模拟数据
 const stats = {
@@ -140,19 +143,20 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="flex-1 flex flex-col bg-gray-50">
+    <Layout
-      {/* 固定header */}
+      header={
-      <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b">
+        <div className="bg-white border-b">
-        <div className="flex justify-between items-center p-4">
+          <div className="flex justify-between items-center p-4">
-          <h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
+            <h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
-          <button className="p-2 hover:bg-gray-100 rounded-full">
+            <button className="p-2 hover:bg-gray-100 rounded-full">
-            <Bell className="h-5 w-5 text-gray-600" />
+              <Bell className="h-5 w-5 text-gray-600" />
-          </button>
+            </button>
+          </div>
         </div>
-      </header>
+      }
-
+      footer={<BottomNav />}
-      {/* 可滚动的内容区域 */}
+    >
-      <div className="flex-1 overflow-y-auto pt-16 pb-24">
+      <div className="bg-gray-50">
         <div className="p-4 space-y-6">
           {/* 统计卡片 */}
           <div className="grid grid-cols-3 gap-4">
@@ -234,6 +238,6 @@ export default function Home() {
           </div>
         </div>
       </div>
-    </div>
+    </Layout>
   );
 } 

nkebao/src/pages/devices/Devices.tsx

@@ -4,6 +4,8 @@ import { Plus, Search, RefreshCw, QrCode, Loader2, AlertTriangle, X } from 'luci
 import { devicesApi } from '@/api';
 import { useToast } from '@/components/ui/toast';
 import PageHeader from '@/components/PageHeader';
+import Layout from '@/components/Layout';
+import '@/components/Layout.css';
 
 // 设备接口
 interface Device {
@@ -376,24 +378,24 @@ export default function Devices() {
   });
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <Layout
-      {/* 页面Header */}
+      header={
-      <PageHeader
+        <PageHeader
-        title="设备管理"
+          title="设备管理"
-        defaultBackPath="/"
+          defaultBackPath="/"
-        rightContent={
+          rightContent={
-          <button 
+            <button 
-            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
-            onClick={handleOpenAddDeviceModal}
+              onClick={handleOpenAddDeviceModal}
-          >
+            >
-            <Plus className="h-4 w-4" />
+              <Plus className="h-4 w-4" />
-            添加设备
+              添加设备
-          </button>
+            </button>
-        }
+          }
-      />
+        />
-
+      }
-      {/* 内容区域 */}
+    >
-      <div className="pt-16 pb-20">
+      <div className="bg-gray-50">
         <div className="p-4 space-y-4">
           {/* 统计卡片 */}
           <div className="grid grid-cols-2 gap-3">
@@ -500,7 +502,6 @@ export default function Devices() {
           </div>
         </div>
       </div>
-
       {/* 添加设备弹窗 */}
       {isAddDeviceOpen && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
@@ -713,6 +714,6 @@ export default function Devices() {
           </div>
         </div>
       )}
-    </div>
+    </Layout>
   );
 } 

nkebao/src/pages/profile/Profile.tsx

@@ -7,6 +7,9 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useAuth } from '@/contexts/AuthContext';
 import { useToast } from '@/components/ui/toast';
+import Layout from '@/components/Layout';
+import BottomNav from '@/components/BottomNav';
+import '@/components/Layout.css';
 
 const menuItems = [
   { href: '/devices', label: '设备管理' },
@@ -52,85 +55,88 @@ export default function Profile() {
       </div>
     );
   }
-
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white pb-16">
+    <Layout
-      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
+      header={
-        <div className="flex justify-between items-center p-4">
+        <div className="bg-white/80 backdrop-blur-sm border-b">
-          <h1 className="text-xl font-semibold text-blue-600">我的</h1>
+          <div className="flex justify-between items-center p-4">
-          <div className="flex items-center space-x-2">
+            <h1 className="text-xl font-semibold text-blue-600">我的</h1>
-            <Button variant="ghost" size="icon">
+            <div className="flex items-center space-x-2">
-              <Settings className="w-5 h-5" />
+              <Button variant="ghost" size="icon">
-            </Button>
+                <Settings className="w-5 h-5" />
-            <Button variant="ghost" size="icon">
+              </Button>
-              <Bell className="w-5 h-5" />
+              <Button variant="ghost" size="icon">
-            </Button>
+                <Bell className="w-5 h-5" />
+              </Button>
+            </div>
           </div>
         </div>
-      </header>
+      }
-
+      footer={<BottomNav />}
-      <div className="p-4 space-y-6">
+    >
-        {/* 用户信息卡片 */}
+      <div className="bg-gradient-to-b from-blue-50 to-white">
-        <Card className="p-6">
+        <div className="p-4 space-y-6">
-          <div className="flex items-center space-x-4">
+          {/* 用户信息卡片 */}
-            <Avatar className="w-20 h-20">
+          <Card className="p-6">
-              <AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
+            <div className="flex items-center space-x-4">
-              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xl font-semibold shadow-lg">
+              <Avatar className="w-20 h-20">
-                {(userInfo?.username || user?.username || '用户').slice(0, 2).toUpperCase()}
+                <AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
-              </AvatarFallback>
+                <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xl font-semibold shadow-lg">
-            </Avatar>
+                  {(userInfo?.username || user?.username || '用户').slice(0, 2).toUpperCase()}
-            <div className="flex-1">
+                </AvatarFallback>
-              <h2 className="text-xl font-semibold text-blue-600">
+              </Avatar>
-                {userInfo?.username || user?.username || '用户'}
+              <div className="flex-1">
-              </h2>
+                <h2 className="text-xl font-semibold text-blue-600">
-              <p className="text-gray-500">
+                  {userInfo?.username || user?.username || '用户'}
-                账号: {userInfo?.account || user?.account || Math.floor(10000000 + Math.random() * 90000000).toString()}
+                </h2>
-              </p>
+                <p className="text-gray-500">
-              <div className="mt-2">
+                  账号: {userInfo?.account || user?.account || Math.floor(10000000 + Math.random() * 90000000).toString()}
-                <Button 
+                </p>
-                  variant="outline" 
+                <div className="mt-2">
-                  size="sm"
+                  <Button 
-                  onClick={() => {
+                    variant="outline" 
-                    toast({
+                    size="sm"
-                      title: '功能开发中',
+                    onClick={() => {
-                      description: '编辑资料功能正在开发中',
+                      toast({
-                    });
+                        title: '功能开发中',
-                  }}
+                        description: '编辑资料功能正在开发中',
-                >
+                      });
-                  编辑资料
+                    }}
-                </Button>
+                  >
+                    编辑资料
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
+          </Card>
-        </Card>
 
-        {/* 功能菜单 */}
+          {/* 功能菜单 */}
-        <Card className="divide-y">
+          <Card className="divide-y">
-          {menuItems.map((item) => (
+            {menuItems.map((item) => (
-            <div
+              <div
-              key={item.href || item.label}
+                key={item.href || item.label}
-              className="p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
+                className="p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
-              onClick={() => (item.href ? navigate(item.href) : null)}
+                onClick={() => (item.href ? navigate(item.href) : null)}
-            >
+              >
-              <div className="flex items-center">
+                <div className="flex items-center">
-                <span>{item.label}</span>
+                  <span>{item.label}</span>
+                </div>
+                <ChevronRight className="w-5 h-5 text-gray-400" />
               </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
+            ))}
-            </div>
+          </Card>
-          ))}
-        </Card>
 
-        {/* 退出登录按钮 */}
+          {/* 退出登录按钮 */}
-        <Button
+          <Button
-          variant="ghost"
+            variant="ghost"
-          className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 mt-6"
+            className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 mt-6"
-          onClick={() => setShowLogoutDialog(true)}
+            onClick={() => setShowLogoutDialog(true)}
-        >
+          >
-          <LogOut className="w-5 h-5 mr-2" />
+            <LogOut className="w-5 h-5 mr-2" />
-          退出登录
+            退出登录
-        </Button>
+          </Button>
+        </div>
       </div>
-
       {/* 退出登录确认对话框 */}
       <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
         <DialogContent>
@@ -150,6 +156,6 @@ export default function Profile() {
           </div>
         </DialogContent>
       </Dialog>
-    </div>
+    </Layout>
   );
 } 

nkebao/src/pages/scenarios/Scenarios.tsx

@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Plus, TrendingUp } from 'lucide-react';
 import PageHeader from '@/components/PageHeader';
+import Layout from '@/components/Layout';
+import BottomNav from '@/components/BottomNav';
+import '@/components/Layout.css';
 
 interface Scenario {
   id: string;
@@ -107,94 +110,74 @@ export default function Scenarios() {
 
   if (loading) {
     return (
-      <div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
+      <Layout
-        <PageHeader
+        header={
-          title="场景获客"
+          <PageHeader
-          showBack={false}
+            title="场景获客"
-        />
+            showBack={false}
-        <div className="flex justify-center items-center h-40">
+          />
-          <div className="text-gray-500">加载中...</div>
+        }
+        footer={<BottomNav />}
+      >
+        <div className="bg-gray-50">
+          <div className="flex justify-center items-center h-40">
+            <div className="text-gray-500">加载中...</div>
+          </div>
         </div>
-      </div>
+      </Layout>
     );
   }
-
   if (error) {
     return (
-      <div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
+      <Layout
+        header={
+          <PageHeader
+            title="场景获客"
+            showBack={false}
+          />
+        }
+        footer={<BottomNav />}
+      >
+        <div className="bg-gray-50">
+          <div className="text-red-500 text-center py-8">{error}</div>
+        </div>
+      </Layout>
+    );
+  }
+  return (
+    <Layout
+      header={
         <PageHeader
           title="场景获客"
           showBack={false}
-        />
+          rightContent={
-        <div className="text-red-500 text-center py-8">{error}</div>
+            <button 
-      </div>
+              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"
-  }
-
-  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">
+              <Plus className="h-4 w-4 mr-1" />
-                <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>
+            </button>
-                {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">
+      footer={<BottomNav />}
-                  <span>今日: </span>
+    >
-                  <span className="font-medium ml-1">{scenario.count}</span>
+      <div className="bg-gray-50">
-                </div>
+        <div className="p-4">
-                <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) => (
+            {scenarios.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)}
+                onClick={() => navigate(`/scenarios/${scenario.id}/detail`)}
               >
                 <div className="p-4 flex flex-col items-center">
-                  <div className="text-3xl mb-2">{scenario.icon}</div>
+                  <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>
-                  <p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
+                  {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>
@@ -207,9 +190,44 @@ export default function Scenarios() {
               </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>
-    </div>
+    </Layout>
   );
 } 

nkebao/src/pages/scenarios/douyin/DouyinScenario.tsx

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { Plus, Copy, Trash2, Play, Pause, TrendingUp, Users, Clock } from 'lucide-react';
 import PageHeader from '@/components/PageHeader';
 import { useToast } from '@/components/ui/toast';
+import Layout from '@/components/Layout';
+import '@/components/Layout.css';
 
 interface Task {
   id: string;
@@ -122,123 +124,126 @@ export default function DouyinScenario() {
   };
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+    <Layout
-      <PageHeader
+      header={
-        title="抖音获客"
+        <PageHeader
-        defaultBackPath="/scenarios"
+          title="抖音获客"
-        rightContent={
+          defaultBackPath="/scenarios"
-          <button
+          rightContent={
-            onClick={() => navigate('/scenarios/new?scenario=douyin')}
+            <button
-            className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
+              onClick={() => navigate('/scenarios/new?scenario=douyin')}
-          >
+              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" />
+            >
-            新建计划
+              <Plus className="h-4 w-4 mr-1" />
-          </button>
+              新建计划
-        }
+            </button>
-      />
+          }
-
+        />
-      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+      }
-      <div className="pt-16 p-4 max-w-7xl mx-auto">
+    >
-        {tasks.map((task) => (
+      <div className="bg-gradient-to-b from-blue-50 to-white">
-          <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
+        <div className="p-4 max-w-7xl mx-auto">
-            {/* 任务头部 */}
+          {tasks.map((task) => (
-            <div className="p-4 border-b border-gray-100">
+            <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
-              <div className="flex items-center justify-between">
+              {/* 任务头部 */}
-                <div className="flex items-center space-x-3">
+              <div className="p-4 border-b border-gray-100">
-                  <div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
+                <div className="flex items-center justify-between">
-                    {getStatusIcon(task.status)}
+                  <div className="flex items-center space-x-3">
-                  </div>
+                    <div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
-                  <div>
+                      {getStatusIcon(task.status)}
-                    <h3 className="font-medium text-gray-900">{task.name}</h3>
+                    </div>
-                    <div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
+                    <div>
-                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
+                      <h3 className="font-medium text-gray-900">{task.name}</h3>
-                        {getStatusText(task.status)}
+                      <div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
-                      </span>
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
-                      <span>最后更新: {task.lastUpdated}</span>
+                          {getStatusText(task.status)}
+                        </span>
+                        <span>最后更新: {task.lastUpdated}</span>
+                      </div>
                     </div>
                   </div>
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => handleCopyPlan(task.id)}
+                      className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                      title="复制计划"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() => handleDeletePlan(task.id)}
+                      className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      title="删除计划"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </div>
                 </div>
-                <div className="flex items-center space-x-2">
+              </div>
-                  <button
+
-                    onClick={() => handleCopyPlan(task.id)}
+              {/* 统计信息 */}
-                    className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+              <div className="p-4">
-                    title="复制计划"
+                <div className="grid grid-cols-3 gap-4 mb-4">
-                  >
+                  <div className="text-center">
-                    <Copy className="h-4 w-4" />
+                    <div className="flex items-center justify-center text-gray-500 mb-1">
-                  </button>
+                      <Users className="h-4 w-4 mr-1" />
-                  <button
+                      <span className="text-sm">设备数</span>
-                    onClick={() => handleDeletePlan(task.id)}
+                    </div>
-                    className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                    <div className="text-xl font-bold text-blue-600">{task.stats.devices}</div>
-                    title="删除计划"
+                  </div>
-                  >
+                  <div className="text-center">
-                    <Trash2 className="h-4 w-4" />
+                    <div className="flex items-center justify-center text-gray-500 mb-1">
-                  </button>
+                      <TrendingUp className="h-4 w-4 mr-1" />
+                      <span className="text-sm">已获客</span>
+                    </div>
+                    <div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="flex items-center justify-center text-gray-500 mb-1">
+                      <Users className="h-4 w-4 mr-1" />
+                      <span className="text-sm">已添加</span>
+                    </div>
+                    <div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
+                  </div>
+                </div>
+
+                {/* 趋势图表 */}
+                <div className="mb-4">
+                  <h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
+                  <div className="flex items-end space-x-1 h-20">
+                    {task.trend.map((item, index) => (
+                      <div key={index} className="flex-1 flex flex-col items-center">
+                        <div
+                          className="w-full bg-blue-200 rounded-t"
+                          style={{ height: `${(item.customers / 15) * 100}%` }}
+                        ></div>
+                        <span className="text-xs text-gray-500 mt-1">{item.date}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 执行信息 */}
+                <div className="bg-gray-50 rounded-lg p-3">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-600">执行时间: {task.executionTime}</span>
+                    <span className="text-blue-600">{task.nextExecutionTime}</span>
+                  </div>
                 </div>
               </div>
             </div>
+          ))}
 
-            {/* 统计信息 */}
+          {/* 设备树图表 */}
-            <div className="p-4">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
-              <div className="grid grid-cols-3 gap-4 mb-4">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">设备分布</h3>
-                <div className="text-center">
+            <div className="text-center py-8 text-gray-500">
-                  <div className="flex items-center justify-center text-gray-500 mb-1">
+              <Users className="h-12 w-12 mx-auto mb-2 text-gray-300" />
-                    <Users className="h-4 w-4 mr-1" />
+              <p>设备树图表功能开发中...</p>
-                    <span className="text-sm">设备数</span>
-                  </div>
-                  <div className="text-xl font-bold text-blue-600">{task.stats.devices}</div>
-                </div>
-                <div className="text-center">
-                  <div className="flex items-center justify-center text-gray-500 mb-1">
-                    <TrendingUp className="h-4 w-4 mr-1" />
-                    <span className="text-sm">已获客</span>
-                  </div>
-                  <div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
-                </div>
-                <div className="text-center">
-                  <div className="flex items-center justify-center text-gray-500 mb-1">
-                    <Users className="h-4 w-4 mr-1" />
-                    <span className="text-sm">已添加</span>
-                  </div>
-                  <div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
-                </div>
-              </div>
-
-              {/* 趋势图表 */}
-              <div className="mb-4">
-                <h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
-                <div className="flex items-end space-x-1 h-20">
-                  {task.trend.map((item, index) => (
-                    <div key={index} className="flex-1 flex flex-col items-center">
-                      <div
-                        className="w-full bg-blue-200 rounded-t"
-                        style={{ height: `${(item.customers / 15) * 100}%` }}
-                      ></div>
-                      <span className="text-xs text-gray-500 mt-1">{item.date}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* 执行信息 */}
-              <div className="bg-gray-50 rounded-lg p-3">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-gray-600">执行时间: {task.executionTime}</span>
-                  <span className="text-blue-600">{task.nextExecutionTime}</span>
-                </div>
-              </div>
             </div>
           </div>
-        ))}
-
-        {/* 设备树图表 */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
-          <h3 className="text-lg font-medium text-gray-900 mb-4">设备分布</h3>
-          <div className="text-center py-8 text-gray-500">
-            <Users className="h-12 w-12 mx-auto mb-2 text-gray-300" />
-            <p>设备树图表功能开发中...</p>
-          </div>
         </div>
       </div>
-    </div>
+    </Layout>
   );
 } 

nkebao/src/pages/scenarios/gongzhonghao/GongzhonghaoScenario.tsx

@@ -16,6 +16,8 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import PageHeader from '@/components/PageHeader';
+import Layout from '@/components/Layout';
+import '@/components/Layout.css';
 import { 
   fetchSceneName, 
   fetchPlanList, 
@@ -212,58 +214,60 @@ export default function GongzhonghaoScenario() {
   };
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+    <Layout
-      <PageHeader
+      header={
-        title={channelName}
+        <PageHeader
-        defaultBackPath="/scenarios"
+          title={channelName}
-        rightContent={
+          defaultBackPath="/scenarios"
-          <Button onClick={handleCreateNewPlan} size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
+          rightContent={
-            <Plus className="h-4 w-4 mr-1" />
+            <Button onClick={handleCreateNewPlan} size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
-            新建计划
+              <Plus className="h-4 w-4 mr-1" />
-          </Button>
+              新建计划
-        }
+            </Button>
-      />
+          }
-
+        />
-      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+      }
-      <div className="pt-16 p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
+    >
-        <div className="space-y-4">
+      <div className="bg-gradient-to-b from-blue-50 to-white">
-          {loading ? (
+        <div className="p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
-            <div className="text-center py-12 text-gray-400">加载中...</div>
+          <div className="space-y-4">
-          ) : error ? (
+            {loading ? (
-            <div className="text-center py-12 text-red-500">{error}</div>
+              <div className="text-center py-12 text-gray-400">加载中...</div>
-          ) : tasks.length > 0 ? (
+            ) : error ? (
-            <>
+              <div className="text-center py-12 text-red-500">{error}</div>
-              {tasks.map((task) => (
+            ) : tasks.length > 0 ? (
-                <div key={task.id}>
+              <>
-                  <ScenarioAcquisitionCard
+                {tasks.map((task) => (
-                    task={task}
+                  <div key={task.id}>
-                    channel={channel}
+                    <ScenarioAcquisitionCard
-                    onEdit={() => handleEditPlan(task.id)}
+                      task={task}
-                    onCopy={handleCopyPlan}
+                      channel={channel}
-                    onDelete={handleDeletePlan}
+                      onEdit={() => handleEditPlan(task.id)}
-                    onStatusChange={handleStatusChange}
+                      onCopy={handleCopyPlan}
-                    onOpenSettings={handleOpenApiSettings}
+                      onDelete={handleDeletePlan}
-                  />
+                      onStatusChange={handleStatusChange}
+                      onOpenSettings={handleOpenApiSettings}
+                    />
+                  </div>
+                ))}
+                <div className="flex justify-center mt-6 gap-2">
+                  <Button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</Button>
+                  <span className="px-2">第 {page} 页 / 共 {Math.max(1, Math.ceil(total / pageSize))} 页</span>
+                  <Button disabled={page * pageSize >= total} onClick={() => setPage(page + 1)}>下一页</Button>
                 </div>
-              ))}
+              </>
-              <div className="flex justify-center mt-6 gap-2">
+            ) : (
-                <Button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</Button>
+              <div className="text-center py-12 bg-white rounded-lg shadow-sm md:col-span-2 lg:col-span-3">
-                <span className="px-2">第 {page} 页 / 共 {Math.max(1, Math.ceil(total / pageSize))} 页</span>
+                <div className="text-gray-400 mb-4">暂无获客计划</div>
-                <Button disabled={page * pageSize >= total} onClick={() => setPage(page + 1)}>下一页</Button>
+                <Button onClick={handleCreateNewPlan} className="bg-blue-600 hover:bg-blue-700 text-white">
+                  <Plus className="h-4 w-4 mr-1" />
+                  新建计划
+                </Button>
               </div>
-            </>
+            )}
-          ) : (
+          </div>
-            <div className="text-center py-12 bg-white rounded-lg shadow-sm md:col-span-2 lg:col-span-3">
-              <div className="text-gray-400 mb-4">暂无获客计划</div>
-              <Button onClick={handleCreateNewPlan} className="bg-blue-600 hover:bg-blue-700 text-white">
-                <Plus className="h-4 w-4 mr-1" />
-                新建计划
-              </Button>
-            </div>
-          )}
         </div>
       </div>
-
       {/* API接口设置对话框 */}
       <Dialog open={showApiDialog} onOpenChange={setShowApiDialog}>
         <DialogContent className="sm:max-w-md">
@@ -432,6 +436,6 @@ export default function GongzhonghaoScenario() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </Layout>
   );
 }

nkebao/src/pages/scenarios/haibao/HaibaoScenario.tsx

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { Plus, Copy, Trash2, Play, Pause, TrendingUp, Users, Clock, Image } from 'lucide-react';
 import PageHeader from '@/components/PageHeader';
 import { useToast } from '@/components/ui/toast';
+import Layout from '@/components/Layout';
+import '@/components/Layout.css';
 
 interface Task {
   id: string;
@@ -122,123 +124,126 @@ export default function HaibaoScenario() {
   };
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+    <Layout
-      <PageHeader
+      header={
-        title="海报获客"
+        <PageHeader
-        defaultBackPath="/scenarios"
+          title="海报获客"
-        rightContent={
+          defaultBackPath="/scenarios"
-          <button
+          rightContent={
-            onClick={() => navigate('/scenarios/new?scenario=haibao')}
+            <button
-            className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
+              onClick={() => navigate('/scenarios/new?scenario=haibao')}
-          >
+              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" />
+            >
-            新建计划
+              <Plus className="h-4 w-4 mr-1" />
-          </button>
+              新建计划
-        }
+            </button>
-      />
+          }
-
+        />
-      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+      }
-      <div className="pt-16 p-4 max-w-7xl mx-auto">
+    >
-        {tasks.map((task) => (
+      <div className="bg-gradient-to-b from-blue-50 to-white">
-          <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
+        <div className="p-4 max-w-7xl mx-auto">
-            {/* 任务头部 */}
+          {tasks.map((task) => (
-            <div className="p-4 border-b border-gray-100">
+            <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
-              <div className="flex items-center justify-between">
+              {/* 任务头部 */}
-                <div className="flex items-center space-x-3">
+              <div className="p-4 border-b border-gray-100">
-                  <div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
+                <div className="flex items-center justify-between">
-                    {getStatusIcon(task.status)}
+                  <div className="flex items-center space-x-3">
-                  </div>
+                    <div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
-                  <div>
+                      {getStatusIcon(task.status)}
-                    <h3 className="font-medium text-gray-900">{task.name}</h3>
+                    </div>
-                    <div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
+                    <div>
-                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
+                      <h3 className="font-medium text-gray-900">{task.name}</h3>
-                        {getStatusText(task.status)}
+                      <div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
-                      </span>
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
-                      <span>最后更新: {task.lastUpdated}</span>
+                          {getStatusText(task.status)}
+                        </span>
+                        <span>最后更新: {task.lastUpdated}</span>
+                      </div>
                     </div>
                   </div>
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => handleCopyPlan(task.id)}
+                      className="p-2 text-gray-400 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
+                      title="复制计划"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() => handleDeletePlan(task.id)}
+                      className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      title="删除计划"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </div>
                 </div>
-                <div className="flex items-center space-x-2">
+              </div>
-                  <button
+
-                    onClick={() => handleCopyPlan(task.id)}
+              {/* 统计信息 */}
-                    className="p-2 text-gray-400 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
+              <div className="p-4">
-                    title="复制计划"
+                <div className="grid grid-cols-3 gap-4 mb-4">
-                  >
+                  <div className="text-center">
-                    <Copy className="h-4 w-4" />
+                    <div className="flex items-center justify-center text-gray-500 mb-1">
-                  </button>
+                      <Users className="h-4 w-4 mr-1" />
-                  <button
+                      <span className="text-sm">设备数</span>
-                    onClick={() => handleDeletePlan(task.id)}
+                    </div>
-                    className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                    <div className="text-xl font-bold text-orange-600">{task.stats.devices}</div>
-                    title="删除计划"
+                  </div>
-                  >
+                  <div className="text-center">
-                    <Trash2 className="h-4 w-4" />
+                    <div className="flex items-center justify-center text-gray-500 mb-1">
-                  </button>
+                      <TrendingUp className="h-4 w-4 mr-1" />
+                      <span className="text-sm">已获客</span>
+                    </div>
+                    <div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="flex items-center justify-center text-gray-500 mb-1">
+                      <Users className="h-4 w-4 mr-1" />
+                      <span className="text-sm">已添加</span>
+                    </div>
+                    <div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
+                  </div>
+                </div>
+
+                {/* 趋势图表 */}
+                <div className="mb-4">
+                  <h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
+                  <div className="flex items-end space-x-1 h-20">
+                    {task.trend.map((item, index) => (
+                      <div key={index} className="flex-1 flex flex-col items-center">
+                        <div
+                          className="w-full bg-orange-200 rounded-t"
+                          style={{ height: `${(item.customers / 30) * 100}%` }}
+                        ></div>
+                        <span className="text-xs text-gray-500 mt-1">{item.date}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 执行信息 */}
+                <div className="bg-gray-50 rounded-lg p-3">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-600">执行时间: {task.executionTime}</span>
+                    <span className="text-orange-600">{task.nextExecutionTime}</span>
+                  </div>
                 </div>
               </div>
             </div>
+          ))}
 
-            {/* 统计信息 */}
+          {/* 海报管理 */}
-            <div className="p-4">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
-              <div className="grid grid-cols-3 gap-4 mb-4">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">海报管理</h3>
-                <div className="text-center">
+            <div className="text-center py-8 text-gray-500">
-                  <div className="flex items-center justify-center text-gray-500 mb-1">
+              <Image className="h-12 w-12 mx-auto mb-2 text-gray-300" />
-                    <Users className="h-4 w-4 mr-1" />
+              <p>海报管理功能开发中...</p>
-                    <span className="text-sm">设备数</span>
-                  </div>
-                  <div className="text-xl font-bold text-orange-600">{task.stats.devices}</div>
-                </div>
-                <div className="text-center">
-                  <div className="flex items-center justify-center text-gray-500 mb-1">
-                    <TrendingUp className="h-4 w-4 mr-1" />
-                    <span className="text-sm">已获客</span>
-                  </div>
-                  <div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
-                </div>
-                <div className="text-center">
-                  <div className="flex items-center justify-center text-gray-500 mb-1">
-                    <Users className="h-4 w-4 mr-1" />
-                    <span className="text-sm">已添加</span>
-                  </div>
-                  <div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
-                </div>
-              </div>
-
-              {/* 趋势图表 */}
-              <div className="mb-4">
-                <h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
-                <div className="flex items-end space-x-1 h-20">
-                  {task.trend.map((item, index) => (
-                    <div key={index} className="flex-1 flex flex-col items-center">
-                      <div
-                        className="w-full bg-orange-200 rounded-t"
-                        style={{ height: `${(item.customers / 30) * 100}%` }}
-                      ></div>
-                      <span className="text-xs text-gray-500 mt-1">{item.date}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* 执行信息 */}
-              <div className="bg-gray-50 rounded-lg p-3">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-gray-600">执行时间: {task.executionTime}</span>
-                  <span className="text-orange-600">{task.nextExecutionTime}</span>
-                </div>
-              </div>
             </div>
           </div>
-        ))}
-
-        {/* 海报管理 */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
-          <h3 className="text-lg font-medium text-gray-900 mb-4">海报管理</h3>
-          <div className="text-center py-8 text-gray-500">
-            <Image className="h-12 w-12 mx-auto mb-2 text-gray-300" />
-            <p>海报管理功能开发中...</p>
-          </div>
         </div>
       </div>
-    </div>
+    </Layout>
   );
 }