From f771a734440140e96deba46d774d708914a66946 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=B0=B8=E5=B9=B3?= <xuyongping@szwycity.cn>
Date: Fri, 4 Jul 2025 14:03:04 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=A1=B5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/App.tsx                      | 47 +++++++++++++------------
 nkebao/src/components/BottomNav.tsx     | 38 ++++++++++++++++++++
 nkebao/src/components/LayoutWrapper.tsx | 24 +++++++++++++
 nkebao/src/pages/Home.tsx               |  2 +-
 4 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 nkebao/src/components/BottomNav.tsx
 create mode 100644 nkebao/src/components/LayoutWrapper.tsx

diff --git a/nkebao/src/App.tsx b/nkebao/src/App.tsx
index 707bcaaff..80c21ccec 100644
--- a/nkebao/src/App.tsx
+++ b/nkebao/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import LayoutWrapper from './components/LayoutWrapper';
 import Home from './pages/Home';
 import Login from './pages/login/Login';
 import Devices from './pages/devices/Devices';
@@ -23,28 +24,30 @@ import Content from './pages/content/Content';
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/devices" element={<Devices />} />
-        <Route path="/devices/:id" element={<DeviceDetail />} />
-        <Route path="/wechat-accounts" element={<WechatAccounts />} />
-        <Route path="/wechat-accounts/:id" element={<WechatAccountDetail />} />
-        <Route path="/workspace" element={<Workspace />} />
-        <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
-        <Route path="/workspace/moments-sync" element={<MomentsSync />} />
-        <Route path="/workspace/moments-sync/:id" element={<MomentsSyncDetail />} />
-        <Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
-        <Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
-        <Route path="/scenarios" element={<Scenarios />} />
-        <Route path="/profile" element={<Profile />} />
-        <Route path="/plans" element={<Plans />} />
-        <Route path="/orders" element={<Orders />} />
-        <Route path="/traffic-pool" element={<TrafficPool />} />
-        <Route path="/contact-import" element={<ContactImport />} />
-        <Route path="/content" element={<Content />} />
-        {/* 你可以继续添加更多路由 */}
-      </Routes>
+      <LayoutWrapper>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/devices" element={<Devices />} />
+          <Route path="/devices/:id" element={<DeviceDetail />} />
+          <Route path="/wechat-accounts" element={<WechatAccounts />} />
+          <Route path="/wechat-accounts/:id" element={<WechatAccountDetail />} />
+          <Route path="/workspace" element={<Workspace />} />
+          <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
+          <Route path="/workspace/moments-sync" element={<MomentsSync />} />
+          <Route path="/workspace/moments-sync/:id" element={<MomentsSyncDetail />} />
+          <Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
+          <Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
+          <Route path="/scenarios" element={<Scenarios />} />
+          <Route path="/profile" element={<Profile />} />
+          <Route path="/plans" element={<Plans />} />
+          <Route path="/orders" element={<Orders />} />
+          <Route path="/traffic-pool" element={<TrafficPool />} />
+          <Route path="/contact-import" element={<ContactImport />} />
+          <Route path="/content" element={<Content />} />
+          {/* 你可以继续添加更多路由 */}
+        </Routes>
+      </LayoutWrapper>
     </BrowserRouter>
   );
 }
diff --git a/nkebao/src/components/BottomNav.tsx b/nkebao/src/components/BottomNav.tsx
new file mode 100644
index 000000000..b7813f792
--- /dev/null
+++ b/nkebao/src/components/BottomNav.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Home, Users, User, Briefcase } from 'lucide-react';
+
+const navItems = [
+  { href: "/", icon: Home, label: "首页" },
+  { href: "/scenarios", icon: Users, label: "场景获客" },
+  { href: "/workspace", icon: Briefcase, label: "工作台" },
+  { href: "/profile", icon: User, label: "我的" },
+];
+
+export default function BottomNav() {
+  const location = useLocation();
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50">
+      <div className="w-full mx-auto flex justify-around">
+        {navItems.map((item) => {
+          const IconComponent = item.icon;
+          const isActive = location.pathname === item.href;
+          
+          return (
+            <Link
+              key={item.href}
+              to={item.href}
+              className={`flex flex-col items-center py-2 px-3 ${
+                isActive ? "text-blue-500" : "text-gray-500"
+              }`}
+            >
+              <IconComponent className="w-6 h-6" />
+              <span className="text-xs mt-1">{item.label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+} 
\ No newline at end of file
diff --git a/nkebao/src/components/LayoutWrapper.tsx b/nkebao/src/components/LayoutWrapper.tsx
new file mode 100644
index 000000000..c17462eb9
--- /dev/null
+++ b/nkebao/src/components/LayoutWrapper.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import BottomNav from './BottomNav';
+
+interface LayoutWrapperProps {
+  children: React.ReactNode;
+}
+
+export default function LayoutWrapper({ children }: LayoutWrapperProps) {
+  const location = useLocation();
+
+  // 只在四个主页显示底部导航栏：首页、场景获客、工作台和我的
+  const mainPages = ["/", "/scenarios", "/workspace", "/profile"];
+  const showBottomNav = mainPages.includes(location.pathname);
+
+  return (
+    <div className="mx-auto w-full">
+      <main className="w-full mx-auto bg-white min-h-screen flex flex-col relative lg:max-w-7xl xl:max-w-[1200px]">
+        {children}
+        {showBottomNav && <BottomNav />}
+      </main>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/Home.tsx b/nkebao/src/pages/Home.tsx
index f4e7ccad8..f29946de0 100644
--- a/nkebao/src/pages/Home.tsx
+++ b/nkebao/src/pages/Home.tsx
@@ -147,7 +147,7 @@ export default function Home() {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto pb-16 bg-gray-50">
+    <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 justify-between items-center p-4">
           <h1 className="text-xl font-semibold text-blue-600">存客宝</h1>