fix: replicate original nav - SubNavBar on sub-pages + external links on home
This commit is contained in:
54
src/components/layout/SubNavBar.tsx
Normal file
54
src/components/layout/SubNavBar.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user