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
+73
View File
@@ -0,0 +1,73 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { useRouter, usePathname } from "next/navigation";
import { motion } from "framer-motion";
import { User } from "lucide-react";
import { getCachedProfile } from "@/lib/userId";
import AuthModal from "@/components/AuthModal";
import type { UserProfile } from "@/types";
const HIDDEN_PREFIXES = ["/profile"];
export default function GlobalUserBadge() {
const router = useRouter();
const pathname = usePathname();
const [profile, setProfile] = useState<UserProfile | null>(null);
const [showAuth, setShowAuth] = useState(false);
const hidden = HIDDEN_PREFIXES.some((p) => pathname.startsWith(p));
useEffect(() => {
setProfile(getCachedProfile());
}, [pathname]);
useEffect(() => {
const handler = () => setProfile(getCachedProfile());
window.addEventListener("nowhatever_auth", handler);
return () => window.removeEventListener("nowhatever_auth", handler);
}, []);
const handleAuth = useCallback((p: UserProfile) => {
setProfile(p);
setShowAuth(false);
}, []);
if (hidden) return null;
return (
<>
<motion.div
className="fixed right-4 top-3 z-40"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.1, duration: 0.3 }}
>
{profile ? (
<button
onClick={() => router.push("/profile")}
className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated active:opacity-80"
>
<span className="text-base leading-none">{profile.avatar}</span>
<span className="max-w-20 truncate text-xs font-semibold text-gray-300">
{profile.username}
</span>
</button>
) : (
<button
onClick={() => setShowAuth(true)}
className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-gray-300"
>
<User size={13} />
</button>
)}
</motion.div>
<AuthModal
open={showAuth}
onClose={() => setShowAuth(false)}
onAuth={handleAuth}
/>
</>
);
}
+37 -11
View File
@@ -22,7 +22,13 @@ import {
Heart,
UserPlus,
} from "lucide-react";
import { Restaurant, MatchType, RunnerUp, SceneType, UserProfile } from "@/types";
import {
Restaurant,
MatchType,
RunnerUp,
SceneType,
UserProfile,
} from "@/types";
import { fireCelebration, playChime } from "@/lib/celebrate";
import { isRegistered } from "@/lib/userId";
import ShareCardModal from "@/components/ShareCardModal";
@@ -237,11 +243,14 @@ export default function MatchResult({
setShowShareCard(true);
}, []);
const handleAuth = useCallback((profile: UserProfile) => {
setRegistered(true);
setShowAuth(false);
showToast(`欢迎,${profile.username}!记录已保存`);
}, [showToast]);
const handleAuth = useCallback(
(profile: UserProfile) => {
setRegistered(true);
setShowAuth(false);
showToast(`欢迎,${profile.username}!记录已保存`);
},
[showToast],
);
const handleFavorite = useCallback(async () => {
if (!registered || favorited || favLoading) return;
@@ -296,7 +305,12 @@ export default function MatchResult({
<motion.div
initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
transition={{
type: "spring",
stiffness: 200,
damping: 12,
delay: 0.2,
}}
>
{isUnanimous ? (
<PartyPopper size={56} className="text-emerald-400" />
@@ -311,7 +325,7 @@ export default function MatchResult({
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.35 }}
>
{isSolo ? "帮你选好了" : "就去这了"}
{isSolo ? "帮你选好了" : "就去这了"}
</motion.h1>
<motion.p
@@ -352,7 +366,12 @@ export default function MatchResult({
className="relative mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
transition={{
type: "spring",
stiffness: 180,
damping: 18,
delay: 0.5,
}}
>
{registered && (
<motion.button
@@ -362,11 +381,18 @@ export default function MatchResult({
whileTap={{ scale: 0.85 }}
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ delay: 0.7, type: "spring", stiffness: 300, damping: 15 }}
transition={{
delay: 0.7,
type: "spring",
stiffness: 300,
damping: 15,
}}
>
<Heart
size={18}
className={favorited ? "fill-red-500 text-red-500" : "text-white"}
className={
favorited ? "fill-red-500 text-red-500" : "text-white"
}
/>
</motion.button>
)}
+1 -1
View File
@@ -47,7 +47,7 @@ export default function TopNav({
return (
<>
<nav className="relative z-10 flex h-14 items-center justify-between px-4">
<nav className="relative z-10 flex h-14 items-center justify-between pl-4 pr-24">
<div className="flex items-center gap-1.5">
<button
onClick={() => setShowQr(true)}