Zonghao Yuan
dc08f64ec1
* fix(web): restore GitHub/X links in mobile header 上一个 PR (#80) 为缓解 Header 移动端拥挤，给 GitHub/X 图标加了 hidden sm:inline-flex，导致手机端（<640px）看不到这两个入口。 横向溢出的真正元凶（导入按钮负偏移）已在 #80 修复，Header 全显示 不会重新引入左右滑动，故恢复图标在所有视口常驻显示。 * fix(web): 移动端 UserChip 只显示头像，宽度与其他图标按钮对齐 登录态 UserChip 之前是「头像 + 名字」的宽按钮（≈90px）， 是齿轮/GitHub/X 图标按钮（≈16px）的 5-6 倍，导致 Header 右侧集群宽度在登录/未登录切换时剧烈变化，所有按钮位置大幅偏移。 改动： - 去掉名字显示，只保留头像圆圈 - 头像尺寸 h-5→h-4（16px，与图标按钮一致） - 按钮 padding 收窄至 p-0.5（总宽≈22px） - 加 title 属性保留完整用户名（hover 可见） - 移除开发过程中使用的 mock 登录态临时代码
107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { AUTH_ENABLED } from "@/lib/supabase/config";
|
|
import { createClient } from "@/lib/supabase/client";
|
|
import type { AuthChangeEvent, Session, User } from "@supabase/supabase-js";
|
|
|
|
export function UserChip({
|
|
onLoginClick,
|
|
}: {
|
|
onLoginClick: () => void;
|
|
}) {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!AUTH_ENABLED) return;
|
|
const supabase = createClient();
|
|
supabase.auth.getUser().then(({ data }: { data: { user: User | null } }) => setUser(data.user));
|
|
const {
|
|
data: { subscription },
|
|
} = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
|
|
setUser(session?.user ?? null);
|
|
});
|
|
return () => subscription.unsubscribe();
|
|
}, []);
|
|
|
|
const handleLogout = useCallback(async () => {
|
|
const supabase = createClient();
|
|
await supabase.auth.signOut();
|
|
setUser(null);
|
|
setMenuOpen(false);
|
|
}, []);
|
|
|
|
if (!AUTH_ENABLED) return null;
|
|
|
|
if (!user) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onLoginClick}
|
|
className="flex items-center gap-1.5 rounded-full border border-cream-50/15 bg-cream-50/[0.06] px-3 py-1.5 text-[11px] text-cream-50/70 transition-colors hover:bg-cream-50/[0.12] hover:text-cream-50/90"
|
|
>
|
|
<i className="fa-solid fa-right-to-bracket text-[10px]" />
|
|
登录
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const label =
|
|
user.user_metadata?.full_name ??
|
|
user.email?.split("@")[0] ??
|
|
"User";
|
|
const avatarUrl = user.user_metadata?.avatar_url as string | undefined;
|
|
const initial = label.charAt(0).toUpperCase();
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setMenuOpen((v) => !v)}
|
|
className="flex items-center justify-center rounded-full border border-cream-50/15 bg-cream-50/[0.06] p-0.5 text-cream-50/80 transition-colors hover:bg-cream-50/[0.12]"
|
|
title={label}
|
|
>
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt=""
|
|
className="h-4 w-4 rounded-full object-cover"
|
|
referrerPolicy="no-referrer"
|
|
/>
|
|
) : (
|
|
<span className="flex h-4 w-4 items-center justify-center rounded-full bg-[rgba(175,138,72,0.6)] text-[9px] font-medium text-cream-50">
|
|
{initial}
|
|
</span>
|
|
)}
|
|
</button>
|
|
{menuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={() => setMenuOpen(false)}
|
|
/>
|
|
<div
|
|
className="absolute right-0 top-full z-50 mt-1 min-w-[120px] overflow-hidden rounded-md"
|
|
style={{
|
|
background: "rgba(14, 10, 6, 0.92)",
|
|
border: "1px solid rgba(175, 138, 72, 0.5)",
|
|
backdropFilter: "blur(12px)",
|
|
WebkitBackdropFilter: "blur(12px)",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className="flex w-full items-center gap-2 px-3.5 py-2.5 text-[12px] text-cream-50/70 transition-colors hover:bg-cream-50/[0.08] hover:text-cream-50/90"
|
|
>
|
|
<i className="fa-solid fa-right-from-bracket text-[11px]" />
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|