From 61a8245582f396974ed19bb0c70e3864a8aa0738 Mon Sep 17 00:00:00 2001
From: Chen Gu <guchen@MBKPro.lan>
Date: Sat, 9 May 2026 14:49:21 +0800
Subject: [PATCH] fix: replicate original nav - SubNavBar on sub-pages +
 external links on home

---
 src/components/layout/SubNavBar.tsx | 54 +++++++++++++++++++++++++++++
 src/pages/Home.tsx                  | 22 ++++--------
 src/router.tsx                      |  4 ++-
 3 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 src/components/layout/SubNavBar.tsx

diff --git a/src/components/layout/SubNavBar.tsx b/src/components/layout/SubNavBar.tsx
new file mode 100644
index 0000000..c761b90
--- /dev/null
+++ b/src/components/layout/SubNavBar.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+interface DockItem {
+  id: string;
+  label: string;
+}
+
+const NAV_ITEMS: DockItem[] = [
+  { id: 'optimization', label: '快速优化' },
+  { id: 'exposure', label: '画面滤镜' },
+  { id: 'filter-community', label: '滤镜社区' },
+  { id: 'weapon', label: '改枪方案' },
+  { id: 'settings', label: '设置' },
+];
+
+const PAGE_ID_MAP: Record<string, string> = {
+  '/optimization': 'optimization',
+  '/exposure': 'exposure',
+  '/filter-community': 'filter-community',
+  '/weapon': 'weapon',
+  '/scheme-detail': 'weapon',
+  '/settings': 'settings',
+};
+
+export default function SubNavBar() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentPage = PAGE_ID_MAP[location.pathname] || '';
+
+  if (!currentPage || currentPage === 'home') return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-30 flex justify-center pb-1.5">
+      <div className="flex border border-[#333] bg-[#1a1a1a] relative">
+        {NAV_ITEMS.map(item => {
+          const isActive = currentPage === item.id;
+          return (
+            <button
+              key={item.id}
+              onClick={() => navigate('/' + item.id)}
+              className={`relative px-3 py-1.5 text-[8px] font-semibold tracking-[0.1em] uppercase
+                border-r border-[#333] last:border-r-0 transition-colors duration-75
+                ${isActive ? 'bg-[#ff4500]/10 text-[#ff4500]' : 'text-[#555] hover:text-[#888] hover:bg-[#222]'}`}
+            >
+              {isActive && <span className="absolute top-0 left-0 right-0 h-[1px] bg-[#ff4500]" />}
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index c95288a..9784f5c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -60,22 +60,12 @@ export default function Home() {
         />
       </div>
 
-      {/* 社区动态 */}
-      <Card className="p-3 mt-1" serial="FEED-01">
-        <div className="flex items-center justify-between mb-2">
-          <h2 className="text-[9px] font-semibold tracking-[0.15em] uppercase text-[#888]">最新动态</h2>
-          <span className="tech-sn">实时</span>
-        </div>
-        <div className="space-y-1.5">
-          {[1, 2, 3].map(i => (
-            <div key={i} className="flex items-center gap-2 text-[9px] text-[#555] border-b border-[#333] pb-1 last:border-b-0 last:pb-0">
-              <span className="w-1 h-1 bg-[#333] rounded-full" />
-              <span className="font-mono text-[8px] text-[#444]">[{String(i).padStart(4, '0')}]</span>
-              <span>社区动态 #{i}</span>
-            </div>
-          ))}
-        </div>
-      </Card>
+      {/* 外部链接（对齐原版） */}
+      <div className="flex items-center justify-center gap-6 border border-[#333] p-2">
+        <a href="#" className="text-[8px] font-semibold tracking-[0.1em] uppercase text-[#555] hover:text-[#888] transition-colors duration-75">社区教程</a>
+        <a href="#" className="text-[8px] font-semibold tracking-[0.1em] uppercase text-[#555] hover:text-[#888] transition-colors duration-75">微信</a>
+        <a href="#" className="text-[8px] font-semibold tracking-[0.1em] uppercase text-[#555] hover:text-[#888] transition-colors duration-75">官网</a>
+      </div>
 
       {/* 底部启动按钮 */}
       <div className="flex gap-2 border border-[#333] p-2">
diff --git a/src/router.tsx b/src/router.tsx
index 3d9bc64..31879b7 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -2,6 +2,7 @@ import React, { Suspense, lazy } from 'react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import PageContainer from './components/layout/PageContainer';
 import TopHud from './components/layout/TopHud';
+import SubNavBar from './components/layout/SubNavBar';
 
 const Home = lazy(() => import('./pages/Home'));
 const Optimization = lazy(() => import('./pages/Optimization'));
@@ -44,11 +45,12 @@ function PageShell({ children, currentPage }: { children: React.ReactNode; curre
         ]}
         onBack={isHome ? undefined : () => navigate(-1)}
       />
-      <PageContainer>
+      <PageContainer className={isHome ? '' : 'pb-8'}>
         <Suspense fallback={<LoadingFallback />}>
           {children}
         </Suspense>
       </PageContainer>
+      <SubNavBar />
     </div>
   );
 }