mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-05-22 22:57:35 +08:00
feat: mobileButtonNav active path
This commit is contained in:
@@ -14,9 +14,19 @@ import {
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname } from 'next/navigation';
|
import { usePathname } from 'next/navigation';
|
||||||
|
|
||||||
const MobileBottomNav = () => {
|
interface MobileBottomNavProps {
|
||||||
|
/**
|
||||||
|
* 主动指定当前激活的路径。当未提供时,自动使用 usePathname() 获取的路径。
|
||||||
|
*/
|
||||||
|
activePath?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
// 当前激活路径:优先使用传入的 activePath,否则回退到浏览器地址
|
||||||
|
const currentActive = activePath ?? pathname;
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ icon: Home, label: '首页', href: '/' },
|
{ icon: Home, label: '首页', href: '/' },
|
||||||
{ icon: Search, label: '搜索', href: '/search' },
|
{ icon: Search, label: '搜索', href: '/search' },
|
||||||
@@ -50,7 +60,7 @@ const MobileBottomNav = () => {
|
|||||||
const tagMatch = href.match(/tag=([^&]+)/)?.[1];
|
const tagMatch = href.match(/tag=([^&]+)/)?.[1];
|
||||||
|
|
||||||
// 解码URL以进行正确的比较
|
// 解码URL以进行正确的比较
|
||||||
const decodedActive = decodeURIComponent(pathname);
|
const decodedActive = decodeURIComponent(currentActive);
|
||||||
const decodedItemHref = decodeURIComponent(href);
|
const decodedItemHref = decodeURIComponent(href);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
|||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
<MobileBottomNav />
|
<MobileBottomNav activePath={activePath} />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user