yeyinly/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化扫码登录

Browse Source
This commit is contained in:
mtvpls
2026-05-30 21:18:41 +08:00
parent 56d0de288f
commit 8d0e0fb779
2 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tv/TVLayout.tsx
+35 -27
View File
@@ -27,38 +27,46 @@ const navItems = [
{ label: '私人影库', href: '/tv/private', icon: Heart },
];
export default function TVLayout({ children }: { children: ReactNode }) {
export default function TVLayout({
children,
showNav = true,
}: {
children: ReactNode;
showNav?: boolean;
}) {
const pathname = usePathname();
return (
<main className='min-h-screen overflow-x-hidden bg-black text-slate-50'>
<div className='fixed inset-0 pointer-events-none bg-[radial-gradient(circle_at_20%_0%,rgba(225,29,72,0.22),transparent_34%),radial-gradient(circle_at_90%_10%,rgba(79,70,229,0.24),transparent_30%),linear-gradient(180deg,#05050b_0%,#000_55%)]' />
<header className='fixed left-6 right-6 top-5 z-40 rounded-[28px] border border-white/10 bg-slate-950/78 px-5 py-3 shadow-2xl shadow-black/60 backdrop-blur-xl'>
<nav className='flex items-center justify-center gap-3 overflow-x-auto overscroll-x-contain px-4 py-3 [scrollbar-width:none]'>
{navItems.map((item) => {
const active =
item.href === '/tv'
? pathname === '/tv'
: pathname === item.href || pathname.startsWith(`${item.href}/`);
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
className={`group flex shrink-0 cursor-pointer items-center gap-2 rounded-2xl px-5 py-3 text-xl font-semibold outline-none transition duration-200 tv-focusable ${
active
? 'bg-rose-600 text-white shadow-lg shadow-rose-950/40'
: 'bg-white/5 text-slate-300 hover:bg-white/10 hover:text-white focus:bg-white/12'
}`}
>
<Icon className='h-6 w-6' />
<span>{item.label}</span>
</Link>
);
})}
</nav>
</header>
<div className='relative z-10 px-8 pb-16 pt-32'>{children}</div>
{showNav && (
<header className='fixed left-6 right-6 top-5 z-40 rounded-[28px] border border-white/10 bg-slate-950/78 px-5 py-3 shadow-2xl shadow-black/60 backdrop-blur-xl'>
<nav className='flex items-center justify-center gap-3 overflow-x-auto overscroll-x-contain px-4 py-3 [scrollbar-width:none]'>
{navItems.map((item) => {
const active =
item.href === '/tv'
? pathname === '/tv'
: pathname === item.href || pathname.startsWith(`${item.href}/`);
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
className={`group flex shrink-0 cursor-pointer items-center gap-2 rounded-2xl px-5 py-3 text-xl font-semibold outline-none transition duration-200 tv-focusable ${
active
? 'bg-rose-600 text-white shadow-lg shadow-rose-950/40'
: 'bg-white/5 text-slate-300 hover:bg-white/10 hover:text-white focus:bg-white/12'
}`}
>
<Icon className='h-6 w-6' />
<span>{item.label}</span>
</Link>
);
})}
</nav>
</header>
)}
<div className={`relative z-10 px-8 pb-16 ${showNav ? 'pt-32' : 'pt-16'}`}>{children}</div>
<TVVirtualRemote />
</main>
);