kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 GlobalUserBadge 组件，固定在右上角，已登录显示头像+用户名，未登录显示登录按钮
- 通过 layout.tsx 全局挂载，仅在个人中心页隐藏
- userId.ts 登录/登出时派发 nowhatever_auth 事件，组件实时响应
- 移除各页面重复的用户指示器（首页、极速救场、周末契约大厅、个人中心顶栏退出按钮）
- TopNav 右侧留出空间避免与全局徽章重叠
- 头像徽章采用暗色主题风格（bg-surface/80）
This commit is contained in:
kurihada
2026-02-26 14:42:40 +08:00
parent f851eed847
commit 7aa6c7f792
9 changed files with 129 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blindbox/page.tsx
+10 -6
View File
@@ -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 fetchRooms = useCallback(async () => {
const p = getCachedProfile(); const p = getCachedProfile();
if (!p) return; if (!p) return;
@@ -135,12 +145,6 @@ export default function BlindboxLobbyPage() {
ADVENTURE ROULETTE ADVENTURE ROULETTE
</p> </p>
</div> </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> </div>
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
src/app/layout.tsx
+2
View File
@@ -1,6 +1,7 @@
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import { Geist } from "next/font/google"; import { Geist } from "next/font/google";
import "./globals.css"; import "./globals.css";
import GlobalUserBadge from "@/components/GlobalUserBadge";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
return ( return (
<html lang="zh-CN"> <html lang="zh-CN">
<body className={`${geistSans.variable} font-sans antialiased`}> <body className={`${geistSans.variable} font-sans antialiased`}>
<GlobalUserBadge />
{children} {children}
</body> </body>
</html> </html>
src/app/page.tsx
+1 -48
View File
@@ -1,27 +1,12 @@
"use client"; "use client";
import { useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { motion } from "framer-motion"; 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 BrandLogo from "@/components/BrandLogo";
import { getCachedProfile } from "@/lib/userId";
import AuthModal from "@/components/AuthModal";
import type { UserProfile } from "@/types";
export default function LandingPage() { export default function LandingPage() {
const router = useRouter(); 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 ( return (
<div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-10 overflow-y-auto scrollbar-none"> <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/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" /> <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 */} {/* Header */}
<motion.div <motion.div
className="flex flex-col items-center gap-4" className="flex flex-col items-center gap-4"
@@ -189,12 +148,6 @@ export default function LandingPage() {
NOWHATEVER — 拒绝随便，从今天开始 NOWHATEVER — 拒绝随便，从今天开始
</motion.p> </motion.p>
<AuthModal
open={showAuth}
onClose={() => setShowAuth(false)}
onAuth={handleAuth}
defaultTab="register"
/>
</div> </div>
); );
} }
src/app/panic/page.tsx
+3 -37
View File
@@ -3,12 +3,10 @@
import { useState, useRef, useEffect, useCallback } from "react"; import { useState, useRef, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, User, ArrowLeft } from "lucide-react"; import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, ArrowLeft } from "lucide-react";
import { getUserId, getCachedProfile, getCachedPreferences } from "@/lib/userId"; import { getUserId, getCachedPreferences } from "@/lib/userId";
import { getAvatarBg } from "@/lib/avatars";
import AuthModal from "@/components/AuthModal";
import { SCENES, getSceneConfig } from "@/lib/sceneConfig"; import { SCENES, getSceneConfig } from "@/lib/sceneConfig";
import type { UserProfile, SceneType } from "@/types"; import type { SceneType } from "@/types";
interface LocationSuggestion { interface LocationSuggestion {
id: string; id: string;
@@ -90,13 +88,7 @@ export default function PanicPage() {
const [scene, setScene] = useState<SceneType>("eat"); const [scene, setScene] = useState<SceneType>("eat");
const sceneConfig = getSceneConfig(scene); const sceneConfig = getSceneConfig(scene);
const [profile, setProfile] = useState<UserProfile | null>(null);
const [authModalOpen, setAuthModalOpen] = useState(false);
useEffect(() => { useEffect(() => {
const cached = getCachedProfile();
if (cached) setProfile(cached);
const prefs = getCachedPreferences(); const prefs = getCachedPreferences();
if (prefs.cuisine) setCuisine(prefs.cuisine); if (prefs.cuisine) setCuisine(prefs.cuisine);
if (prefs.priceRange) setPriceRange(prefs.priceRange); if (prefs.priceRange) setPriceRange(prefs.priceRange);
@@ -265,27 +257,6 @@ export default function PanicPage() {
返回 返回
</button> </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 <motion.div
className="flex items-center gap-3" className="flex items-center gap-3"
initial={{ y: -20, opacity: 0 }} initial={{ y: -20, opacity: 0 }}
@@ -629,11 +600,6 @@ export default function PanicPage() {
)} )}
</motion.div> </motion.div>
<AuthModal
open={authModalOpen}
onClose={() => setAuthModalOpen(false)}
onAuth={(p) => setProfile(p)}
/>
</div> </div>
); );
} }
src/app/profile/page.tsx
-7
View File
@@ -274,13 +274,6 @@ export default function ProfilePage() {
<ArrowLeft size={20} /> <ArrowLeft size={20} />
</button> </button>
<h1 className="flex-1 text-base font-bold text-white">个人中心</h1> <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> </nav>
<div className="mx-auto max-w-sm px-5"> <div className="mx-auto max-w-sm px-5">
src/components/GlobalUserBadge.tsx
+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}
/>
</>
);
}
src/components/MatchResult.tsx
+37 -11
View File
@@ -22,7 +22,13 @@ import {
Heart, Heart,
UserPlus, UserPlus,
} from "lucide-react"; } 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 { fireCelebration, playChime } from "@/lib/celebrate";
import { isRegistered } from "@/lib/userId"; import { isRegistered } from "@/lib/userId";
import ShareCardModal from "@/components/ShareCardModal"; import ShareCardModal from "@/components/ShareCardModal";
@@ -237,11 +243,14 @@ export default function MatchResult({
setShowShareCard(true); setShowShareCard(true);
}, []); }, []);
const handleAuth = useCallback((profile: UserProfile) => { const handleAuth = useCallback(
setRegistered(true); (profile: UserProfile) => {
setShowAuth(false); setRegistered(true);
showToast(`欢迎，${profile.username}！记录已保存`); setShowAuth(false);
}, [showToast]); showToast(`欢迎，${profile.username}！记录已保存`);
},
[showToast],
);
const handleFavorite = useCallback(async () => { const handleFavorite = useCallback(async () => {
if (!registered || favorited || favLoading) return; if (!registered || favorited || favLoading) return;
@@ -296,7 +305,12 @@ export default function MatchResult({
<motion.div <motion.div
initial={{ scale: 0, rotate: -20 }} initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }} 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 ? ( {isUnanimous ? (
<PartyPopper size={56} className="text-emerald-400" /> <PartyPopper size={56} className="text-emerald-400" />
@@ -311,7 +325,7 @@ export default function MatchResult({
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.35 }} transition={{ delay: 0.35 }}
> >
{isSolo ? "帮你选好了！" : "就去这了！"} {isSolo ? "帮你选好了" : "就去这了"}
</motion.h1> </motion.h1>
<motion.p <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" className="relative mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
initial={{ y: 60, opacity: 0 }} initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} 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 && ( {registered && (
<motion.button <motion.button
@@ -362,11 +381,18 @@ export default function MatchResult({
whileTap={{ scale: 0.85 }} whileTap={{ scale: 0.85 }}
initial={{ scale: 0, opacity: 0 }} initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} 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 <Heart
size={18} size={18}
className={favorited ? "fill-red-500 text-red-500" : "text-white"} className={
favorited ? "fill-red-500 text-red-500" : "text-white"
}
/> />
</motion.button> </motion.button>
)} )}
src/components/TopNav.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function TopNav({
return ( 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"> <div className="flex items-center gap-1.5">
<button <button
onClick={() => setShowQr(true)} onClick={() => setShowQr(true)}
src/lib/userId.ts
+2
View File
@@ -31,6 +31,7 @@ export function setCachedProfile(profile: UserProfile | null): void {
} else { } else {
localStorage.removeItem(PROFILE_KEY); localStorage.removeItem(PROFILE_KEY);
} }
window.dispatchEvent(new CustomEvent("nowhatever_auth"));
} }
export function isRegistered(): boolean { export function isRegistered(): boolean {
@@ -60,4 +61,5 @@ export function logout(): void {
localStorage.removeItem("nowhatever_preferences"); localStorage.removeItem("nowhatever_preferences");
const newId = crypto.randomUUID(); const newId = crypto.randomUUID();
localStorage.setItem(STORAGE_KEY, newId); localStorage.setItem(STORAGE_KEY, newId);
window.dispatchEvent(new CustomEvent("nowhatever_auth"));
} }