修复网页全屏还显示顶部和底部栏

This commit is contained in:
mtvpls
2025-12-28 23:08:19 +08:00
parent 01d508edb0
commit 2d132d7b66
2 changed files with 35 additions and 17 deletions

View File

@@ -10,37 +10,44 @@ import { VersionCheckProvider } from './VersionCheckProvider';
interface PageLayoutProps {
children: React.ReactNode;
activePath?: string;
hideNavigation?: boolean; // 控制是否隐藏顶部和底部导航栏
}
const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
const PageLayout = ({ children, activePath = '/', hideNavigation = false }: PageLayoutProps) => {
return (
<VersionCheckProvider>
<div className='w-full min-h-screen'>
{/* 移动端头部 */}
<MobileHeader showBackButton={['/play', '/live'].includes(activePath)} />
{!hideNavigation && (
<MobileHeader showBackButton={['/play', '/live'].includes(activePath)} />
)}
{/* 主要布局容器 */}
<div className='flex md:grid md:grid-cols-[auto_1fr] w-full min-h-screen md:min-h-auto'>
{/* 侧边栏 - 桌面端显示,移动端隐藏 */}
<div className='hidden md:block'>
<Sidebar activePath={activePath} />
</div>
{!hideNavigation && (
<div className='hidden md:block'>
<Sidebar activePath={activePath} />
</div>
)}
{/* 主内容区域 */}
<div className='relative min-w-0 flex-1 transition-all duration-300'>
{/* 桌面端左上角返回按钮 */}
{['/play', '/live'].includes(activePath) && (
{!hideNavigation && ['/play', '/live'].includes(activePath) && (
<div className='absolute top-3 left-1 z-20 hidden md:flex'>
<BackButton />
</div>
)}
{/* 桌面端顶部按钮 */}
<div className='absolute top-2 right-4 z-20 hidden md:flex items-center gap-2'>
<ThemeToggle />
<UserMenu />
<UpdateNotification />
</div>
{!hideNavigation && (
<div className='absolute top-2 right-4 z-20 hidden md:flex items-center gap-2'>
<ThemeToggle />
<UserMenu />
<UpdateNotification />
</div>
)}
{/* 主内容 */}
<main
@@ -55,9 +62,11 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
</div>
{/* 移动端底部导航 */}
<div className='md:hidden'>
<MobileBottomNav activePath={activePath} />
</div>
{!hideNavigation && (
<div className='md:hidden'>
<MobileBottomNav activePath={activePath} />
</div>
)}
</div>
</VersionCheckProvider>
);