tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化header组件语义化

Browse Source
This commit is contained in:
tone
2025-12-15 14:17:02 +08:00
parent 578e7eeb4b
commit 50877448ab
1 changed files with 84 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
apps/frontend/components/Header.tsx
View File

@@ -3,7 +3,7 @@
import { cn } from "@/lib/utils";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { useEffect, useRef, useState } from "react";
import {
Drawer,
DrawerContent,
@@ -29,64 +29,43 @@ export default function Header() {
];
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, path: string) => {
e.preventDefault();
if (path === '/console') {
e.preventDefault();
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
router.push(token ? '/console' : '/console/login');
setShowMenu(false);
} else {
router.push(path);
}
setShowMenu(false);
}
}
const menuButtonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (!showMenu && menuButtonRef.current) {
menuButtonRef.current.focus();
}
}, [showMenu]);
return (
<header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 shadow">
<div className="flex items-center justify-between px-10 md:h-18 md:px-20 h-14 duration-300">
<>
<header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 shadow" role="banner" aria-label="网站顶部导航栏">
<div className="flex items-center justify-between px-10 md:h-18 md:px-20 h-14 duration-300" aria-label="主菜单">
<Link
href="/"
className={cn(
"cursor-pointer font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
pathname === "/" && "text-zinc-800"
)}
aria-current={pathname === "/" ? "page" : undefined}
>
<span className="sr-only">特恩(TONE)</span>
{pathname === "/"
? <div className="text-2xl"> 🍭</div>
: <div className="md:text-lg">特恩(TONE)</div>}
? <span className="text-2xl" aria-hidden="true" >🍭</span>
: <span className="md:text-lg" aria-hidden="true">特恩(TONE)</span>}
</Link>
<Drawer direction="right" open={showMenu} onOpenChange={(state) => !state && setShowMenu(false)}>
<DrawerTrigger>
<div className="sm:hidden cursor-pointer text-zinc-600" onClick={() => setShowMenu(true)}>
菜单
</div>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle className="flex justify-between">
<span>菜单</span>
<X className="cursor-pointer" onClick={() => setShowMenu(false)} />
</DrawerTitle>
<DrawerDescription>请选择需要前往的页面</DrawerDescription>
</DrawerHeader>
<div className="w-full flex flex-col px-4 gap-2">
{menuItems.slice(1).map((item) => (
<Link
key={item.name}
href={item.path}
onClick={e => handleClick(e, item.path)}
>
<Button className="w-full" size='lg'
variant={pathname.startsWith(item.path) ? 'default' : 'outline'}
>{item.name}</Button>
</Link>
))}
</div>
</DrawerContent>
</Drawer>
<div className={cn(
"sm:flex items-center gap-12 hidden",
<nav className={cn(
"items-center gap-12 hidden sm:flex",
)}>
{menuItems.slice(1).map((item) => (
<Link
@@ -97,13 +76,53 @@ export default function Header() {
pathname.startsWith(item.path) && "text-zinc-800 border-b-pink-500"
)}
onClick={e => handleClick(e, item.path)}
aria-current={pathname === item.path ? "page" : undefined}
>
{item.name}
</Link>
))}
</div>
</nav>
<button
ref={menuButtonRef}
className="sm:hidden text-zinc-600"
onClick={() => setShowMenu(true)}
aria-label="打开主菜单"
>菜单</button>
</div>
</header >
<Drawer direction="right" open={showMenu} onOpenChange={setShowMenu}>
<DrawerContent>
<DrawerHeader>
<DrawerTitle className="flex justify-between">
<span>菜单</span>
<button
onClick={() => setShowMenu(false)}
aria-label="关闭菜单"
>
<X className="size-5" aria-hidden="true" />
</button>
</DrawerTitle>
<DrawerDescription>请选择需要前往的页面</DrawerDescription>
</DrawerHeader>
<nav className="w-full flex flex-col px-4 gap-2" aria-label="移动设备主菜单">
{menuItems.slice(1).map((item) => (
<Link
key={item.name}
href={item.path}
onClick={e => handleClick(e, item.path)}
aria-current={pathname === item.path ? "page" : undefined}
>
<Button className="w-full" size='lg'
variant={pathname.startsWith(item.path) ? 'default' : 'outline'}
>{item.name}</Button>
</Link>
))}
</nav>
</DrawerContent>
</Drawer>
</>
)
}