106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
'use client';
|
||
|
||
import { Clover, Film, Home, Search, Tv } from 'lucide-react';
|
||
import Link from 'next/link';
|
||
import { usePathname } from 'next/navigation';
|
||
|
||
interface MobileBottomNavProps {
|
||
/**
|
||
* 主动指定当前激活的路径。当未提供时，自动使用 usePathname() 获取的路径。
|
||
*/
|
||
activePath?: string;
|
||
}
|
||
|
||
const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
|
||
const pathname = usePathname();
|
||
|
||
// 当前激活路径：优先使用传入的 activePath，否则回退到浏览器地址
|
||
const currentActive = activePath ?? pathname;
|
||
|
||
const navItems = [
|
||
{ icon: Home, label: '首页', href: '/' },
|
||
{ icon: Search, label: '搜索', href: '/search' },
|
||
{ icon: Tv, label: 'IPTV', href: '/iptv' },
|
||
{
|
||
icon: Film,
|
||
label: '电影',
|
||
href: '/douban?type=movie',
|
||
},
|
||
{
|
||
icon: Clover,
|
||
label: '综艺',
|
||
href: '/douban?type=show',
|
||
},
|
||
];
|
||
|
||
const isActive = (href: string) => {
|
||
const typeMatch = href.match(/type=([^&]+)/)?.[1];
|
||
|
||
// 解码URL以进行正确的比较
|
||
const decodedActive = decodeURIComponent(currentActive);
|
||
const decodedItemHref = decodeURIComponent(href);
|
||
|
||
return (
|
||
decodedActive === decodedItemHref ||
|
||
(decodedActive.startsWith('/douban') &&
|
||
decodedActive.includes(`type=${typeMatch}`))
|
||
);
|
||
};
|
||
|
||
return (
|
||
<nav
|
||
className='md:hidden fixed left-0 right-0 z-[600] bg-white/90 backdrop-blur-xl border-t border-purple-200/50 overflow-hidden dark:bg-gray-900/80 dark:border-purple-700/50 shadow-lg'
|
||
style={{
|
||
/* 紧贴视口底部，同时在内部留出安全区高度 */
|
||
bottom: 0,
|
||
paddingBottom: 'env(safe-area-inset-bottom)',
|
||
}}
|
||
>
|
||
{/* 顶部装饰线 */}
|
||
<div className='absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-purple-500/50 to-transparent'></div>
|
||
|
||
<ul className='flex items-center'>
|
||
{navItems.map((item) => {
|
||
const active = isActive(item.href);
|
||
return (
|
||
<li key={item.href} className='flex-shrink-0 w-1/5'>
|
||
<Link
|
||
href={item.href}
|
||
className={`flex flex-col items-center justify-center w-full h-14 gap-1 text-xs transition-all duration-200 relative ${
|
||
active
|
||
? 'transform -translate-y-1'
|
||
: 'hover:transform hover:-translate-y-0.5'
|
||
}`}
|
||
>
|
||
{/* 激活状态的背景光晕 */}
|
||
{active && (
|
||
<div className='absolute inset-0 bg-purple-500/10 rounded-lg mx-2 my-1 border border-purple-300/20'></div>
|
||
)}
|
||
|
||
<item.icon
|
||
className={`h-6 w-6 transition-all duration-200 ${
|
||
active
|
||
? 'text-purple-600 dark:text-purple-400 scale-110'
|
||
: 'text-gray-500 dark:text-gray-400 hover:text-purple-500 dark:hover:text-purple-300'
|
||
}`}
|
||
/>
|
||
<span
|
||
className={`transition-all duration-200 font-medium ${
|
||
active
|
||
? 'text-purple-600 dark:text-purple-400'
|
||
: 'text-gray-600 dark:text-gray-300 hover:text-purple-500 dark:hover:text-purple-300'
|
||
}`}
|
||
>
|
||
{item.label}
|
||
</span>
|
||
</Link>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</nav>
|
||
);
|
||
};
|
||
|
||
export default MobileBottomNav;
|