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
+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 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">