- nav: center links (首页/排行榜/我的), right-side AuthMenu + RemainingVotesBadge; image logo with responsive sizing - auth: replace /login route with global LoginModal triggered anywhere; "我的" intercepts unauth users with post-login redirect - home: full-screen Hero, redesigned Top12 (12 pill cards, top-3 glow), scroll-snap mandatory between Hero/Top12/candidates - home: candidates section with sticky filter that gains frosted-glass bg when stuck (matches nav) - filter: simplified tags (全部/舞蹈/声乐/rap/全能型); ArtistCard uniform purple vote button - ranking/me: remove Top12Bar; me header stacks 编辑资料/退出登录 vertically - typography: font-logo set to Orbitron; ✦ glyph in CYBER ✦ STAR preserved - layout: max-w-[1500px] unified across pages - docs: add design-spec.md + design-spec.html with full visual spec (lucide SVG, zero emoji policy) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
import Logo from "./Logo";
|
|
import NavLinks from "./NavLinks";
|
|
import SearchTrigger from "./SearchTrigger";
|
|
import AuthMenu from "./auth/AuthMenu";
|
|
import RemainingVotesBadge from "./auth/RemainingVotesBadge";
|
|
|
|
export default function Navigation() {
|
|
return (
|
|
<header className="sticky top-0 z-50 backdrop-blur-xl bg-[rgba(13,10,36,0.85)] border-b border-white/[0.08]">
|
|
<nav className="max-w-[1500px] mx-auto h-20 px-4 sm:px-6 lg:px-8 flex items-center gap-8">
|
|
<Logo size="md" />
|
|
|
|
{/* 中部:首页 / 排行榜 / 我的 */}
|
|
<NavLinks className="hidden md:flex" />
|
|
|
|
{/* 右侧:搜索 + 今日余票 + 登录/注册 (或 头像+下拉) */}
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<SearchTrigger />
|
|
<RemainingVotesBadge />
|
|
<AuthMenu />
|
|
</div>
|
|
</nav>
|
|
|
|
{/* 移动端:单独一行 nav links */}
|
|
<NavLinks
|
|
className="md:hidden border-t border-white/[0.05] overflow-x-auto"
|
|
mobile
|
|
/>
|
|
</header>
|
|
);
|
|
}
|