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

- 新增 GlobalUserBadge 组件，固定在右上角，已登录显示头像+用户名，未登录显示登录按钮 - 通过 layout.tsx 全局挂载，仅在个人中心页隐藏 - userId.ts 登录/登出时派发 nowhatever_auth 事件，组件实时响应 - 移除各页面重复的用户指示器（首页、极速救场、周末契约大厅、个人中心顶栏退出按钮） - TopNav 右侧留出空间避免与全局徽章重叠 - 头像徽章采用暗色主题风格（bg-surface/80）
2026-02-26 14:42:40 +08:00
parent f851eed847
commit 7aa6c7f792
9 changed files with 129 additions and 110 deletions
@@ -49,6 +49,16 @@ export default function BlindboxLobbyPage() {
    }
  }, []);

+  useEffect(() => {
+    const handler = () => {
+      const registered = isRegistered();
+      setLoggedIn(registered);
+      setProfile(registered ? getCachedProfile() : null);
+    };
+    window.addEventListener("nowhatever_auth", handler);
+    return () => window.removeEventListener("nowhatever_auth", handler);
+  }, []);
+
  const fetchRooms = useCallback(async () => {
    const p = getCachedProfile();
    if (!p) return;
@@ -135,12 +145,6 @@ export default function BlindboxLobbyPage() {
            ADVENTURE ROULETTE
          </p>
        </div>
-        {profile && (
-          <div className="flex items-center gap-2 rounded-full bg-surface px-3 py-1.5 ring-1 ring-border">
-            <span className="text-sm">{profile.avatar}</span>
-            <span className="text-xs font-semibold text-gray-300">{profile.username}</span>
-          </div>
-        )}
      </div>

      <AnimatePresence mode="wait">
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { Geist } from "next/font/google";
 import "./globals.css";
+import GlobalUserBadge from "@/components/GlobalUserBadge";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
  return (
    <html lang="zh-CN">
      <body className={`${geistSans.variable} font-sans antialiased`}>
+        <GlobalUserBadge />
        {children}
      </body>
    </html>
@@ -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>
  );
 }
@@ -3,12 +3,10 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
-import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, User, ArrowLeft } from "lucide-react";
-import { getUserId, getCachedProfile, getCachedPreferences } from "@/lib/userId";
-import { getAvatarBg } from "@/lib/avatars";
-import AuthModal from "@/components/AuthModal";
+import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, ArrowLeft } from "lucide-react";
+import { getUserId, getCachedPreferences } from "@/lib/userId";
 import { SCENES, getSceneConfig } from "@/lib/sceneConfig";
-import type { UserProfile, SceneType } from "@/types";
+import type { SceneType } from "@/types";

 interface LocationSuggestion {
  id: string;
@@ -90,13 +88,7 @@ export default function PanicPage() {
  const [scene, setScene] = useState<SceneType>("eat");
  const sceneConfig = getSceneConfig(scene);

-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [authModalOpen, setAuthModalOpen] = useState(false);
-
  useEffect(() => {
-    const cached = getCachedProfile();
-    if (cached) setProfile(cached);
-
    const prefs = getCachedPreferences();
    if (prefs.cuisine) setCuisine(prefs.cuisine);
    if (prefs.priceRange) setPriceRange(prefs.priceRange);
@@ -265,27 +257,6 @@ export default function PanicPage() {
        返回
      </button>

-      {/* Profile / Auth button */}
-      <div className="absolute right-4 top-3">
-        {profile ? (
-          <button
-            onClick={() => router.push("/profile")}
-            className={`flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
-          >
-            <span className="text-base leading-none">{profile.avatar}</span>
-            <span className="max-w-20 truncate text-xs font-semibold text-foreground">{profile.username}</span>
-          </button>
-        ) : (
-          <button
-            onClick={() => setAuthModalOpen(true)}
-            className="flex h-8 items-center gap-1.5 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
-          >
-            <User size={14} />
-            登录
-          </button>
-        )}
-      </div>
-
      <motion.div
        className="flex items-center gap-3"
        initial={{ y: -20, opacity: 0 }}
@@ -629,11 +600,6 @@ export default function PanicPage() {
        )}
      </motion.div>

-      <AuthModal
-        open={authModalOpen}
-        onClose={() => setAuthModalOpen(false)}
-        onAuth={(p) => setProfile(p)}
-      />
    </div>
  );
 }
@@ -274,13 +274,6 @@ export default function ProfilePage() {
          <ArrowLeft size={20} />
        </button>
        <h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
-        <button
-          onClick={handleLogout}
-          className="flex items-center gap-1.5 rounded-full bg-surface px-3 py-1.5 text-xs font-medium text-muted ring-1 ring-border transition-colors hover:text-rose-400 active:bg-elevated"
-        >
-          <LogOut size={13} />
-          退出
-        </button>
      </nav>

      <div className="mx-auto max-w-sm px-5">