feat: 全局用户头像徽章,所有页面右上角统一显示

- 新增 GlobalUserBadge 组件,固定在右上角,已登录显示头像+用户名,未登录显示登录按钮
- 通过 layout.tsx 全局挂载,仅在个人中心页隐藏
- userId.ts 登录/登出时派发 nowhatever_auth 事件,组件实时响应
- 移除各页面重复的用户指示器(首页、极速救场、周末契约大厅、个人中心顶栏退出按钮)
- TopNav 右侧留出空间避免与全局徽章重叠
- 头像徽章采用暗色主题风格(bg-surface/80)
This commit is contained in:
2026-02-26 14:42:40 +08:00
parent f851eed847
commit 7aa6c7f792
9 changed files with 129 additions and 110 deletions
+1 -48
View File
@@ -1,27 +1,12 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { Zap, Gift, Clock, ChevronRight, User } from "lucide-react";
import { Zap, Gift, Clock, ChevronRight } from "lucide-react";
import BrandLogo from "@/components/BrandLogo";
import { getCachedProfile } from "@/lib/userId";
import AuthModal from "@/components/AuthModal";
import type { UserProfile } from "@/types";
export default function LandingPage() {
const router = useRouter();
const [profile, setProfile] = useState<UserProfile | null>(null);
const [showAuth, setShowAuth] = useState(false);
useEffect(() => {
setProfile(getCachedProfile());
}, []);
const handleAuth = useCallback((p: UserProfile) => {
setProfile(p);
setShowAuth(false);
}, []);
return (
<div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-10 overflow-y-auto scrollbar-none">
@@ -29,32 +14,6 @@ export default function LandingPage() {
<div className="pointer-events-none fixed left-1/2 top-0 -translate-x-1/2 -translate-y-1/3 h-[420px] w-[420px] rounded-full bg-orange-500/8 blur-3xl" />
<div className="pointer-events-none fixed left-1/4 top-1/2 h-[300px] w-[300px] rounded-full bg-purple-500/5 blur-3xl" />
{/* User indicator */}
<motion.div
className="mb-4 flex w-full max-w-sm justify-end"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.1 }}
>
{profile ? (
<button
onClick={() => router.push("/profile")}
className="flex items-center gap-2 rounded-full bg-surface/80 px-3 py-1.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated"
>
<span className="text-sm">{profile.avatar}</span>
<span className="text-xs font-semibold text-gray-300">{profile.username}</span>
</button>
) : (
<button
onClick={() => setShowAuth(true)}
className="flex items-center gap-1.5 rounded-full bg-surface/80 px-3 py-1.5 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated hover:text-gray-300"
>
<User size={13} />
</button>
)}
</motion.div>
{/* Header */}
<motion.div
className="flex flex-col items-center gap-4"
@@ -189,12 +148,6 @@ export default function LandingPage() {
NOWHATEVER 便
</motion.p>
<AuthModal
open={showAuth}
onClose={() => setShowAuth(false)}
onAuth={handleAuth}
defaultTab="register"
/>
</div>
);
}