feat: 全局用户头像徽章,所有页面右上角统一显示
- 新增 GlobalUserBadge 组件,固定在右上角,已登录显示头像+用户名,未登录显示登录按钮 - 通过 layout.tsx 全局挂载,仅在个人中心页隐藏 - userId.ts 登录/登出时派发 nowhatever_auth 事件,组件实时响应 - 移除各页面重复的用户指示器(首页、极速救场、周末契约大厅、个人中心顶栏退出按钮) - TopNav 右侧留出空间避免与全局徽章重叠 - 头像徽章采用暗色主题风格(bg-surface/80)
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user