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">
             <h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
             <button className="p-2 hover:bg-gray-100 rounded-full">
               <Bell className="h-5 w-5 text-gray-600" />
             </button>
           </div>
-      </header>
+        </div>
-
+      }
-      {/* 可滚动的内容区域 */}
+      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,8 +378,8 @@ export default function Devices() {
   });
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <Layout
-      {/* 页面Header */}
+      header={
         <PageHeader
           title="设备管理"
           defaultBackPath="/"
@@ -391,9 +393,9 @@ export default function Devices() {
             </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,10 +55,10 @@ 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="bg-white/80 backdrop-blur-sm border-b">
           <div className="flex justify-between items-center p-4">
             <h1 className="text-xl font-semibold text-blue-600">我的</h1>
             <div className="flex items-center space-x-2">
@@ -67,8 +70,11 @@ export default function Profile() {
               </Button>
             </div>
           </div>
-      </header>
+        </div>
-
+      }
+      footer={<BottomNav />}
+    >
+      <div className="bg-gradient-to-b from-blue-50 to-white">
         <div className="p-4 space-y-6">
           {/* 用户信息卡片 */}
           <Card className="p-6">
@@ -130,7 +136,7 @@ export default function Profile() {
             退出登录
           </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,32 +110,43 @@ export default function Scenarios() {
 
   if (loading) {
     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="flex justify-center items-center h-40">
             <div className="text-gray-500">加载中...</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 (
-    <div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
+    <Layout
+      header={
         <PageHeader
           title="场景获客"
           showBack={false}
@@ -146,7 +160,10 @@ export default function Scenarios() {
             </button>
           }
         />
-
+      }
+      footer={<BottomNav />}
+    >
+      <div className="bg-gray-50">
         <div className="p-4">
           <div className="grid grid-cols-2 gap-4">
             {scenarios.map((scenario) => (
@@ -211,5 +228,6 @@ export default function Scenarios() {
           */}
         </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,7 +124,8 @@ export default function DouyinScenario() {
   };
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+    <Layout
+      header={
         <PageHeader
           title="抖音获客"
           defaultBackPath="/scenarios"
@@ -136,9 +139,10 @@ export default function DouyinScenario() {
             </button>
           }
         />
-
+      }
-      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+    >
-      <div className="pt-16 p-4 max-w-7xl mx-auto">
+      <div className="bg-gradient-to-b from-blue-50 to-white">
+        <div className="p-4 max-w-7xl mx-auto">
           {tasks.map((task) => (
             <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
               {/* 任务头部 */}
@@ -240,5 +244,6 @@ export default function DouyinScenario() {
           </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,7 +214,8 @@ export default function GongzhonghaoScenario() {
   };
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+    <Layout
+      header={
         <PageHeader
           title={channelName}
           defaultBackPath="/scenarios"
@@ -223,9 +226,10 @@ export default function GongzhonghaoScenario() {
             </Button>
           }
         />
-
+      }
-      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+    >
-      <div className="pt-16 p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
+      <div className="bg-gradient-to-b from-blue-50 to-white">
+        <div className="p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
           <div className="space-y-4">
             {loading ? (
               <div className="text-center py-12 text-gray-400">加载中...</div>
@@ -263,7 +267,7 @@ export default function GongzhonghaoScenario() {
             )}
           </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,7 +124,8 @@ export default function HaibaoScenario() {
   };
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+    <Layout
+      header={
         <PageHeader
           title="海报获客"
           defaultBackPath="/scenarios"
@@ -136,9 +139,10 @@ export default function HaibaoScenario() {
             </button>
           }
         />
-
+      }
-      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+    >
-      <div className="pt-16 p-4 max-w-7xl mx-auto">
+      <div className="bg-gradient-to-b from-blue-50 to-white">
+        <div className="p-4 max-w-7xl mx-auto">
           {tasks.map((task) => (
             <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
               {/* 任务头部 */}
@@ -240,5 +244,6 @@ export default function HaibaoScenario() {
           </div>
         </div>
       </div>
+    </Layout>
   );
 }