;s;

app/components/Header.tsx

@@ -2,9 +2,10 @@
 
 import { useState, useEffect } from "react";
 import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/i18n/navigation";
-import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
+import { getStoredUserEmail } from "@/app/lib/pocketbase";
 import AuthModal from "./AuthModal";
 import ThemeToggle from "./ThemeToggle";
+import UserAvatar from "./UserAvatar";
 
 const navLinks = [
   { labelKey: "roadmap" as const, href: "#roadmap" },
@@ -45,11 +46,6 @@ export default function Header() {
     return () => { mounted = false; };
   }, []);
 
-  const handleLogout = async () => {
-    await pbLogout();
-    setUserEmail(null);
-  };
-
   return (
     <header
       className={`fixed top-0 left-0 right-0 z-50 w-full max-w-[100vw] transition-all duration-300 ${
@@ -81,17 +77,7 @@ export default function Header() {
 
           <div className="flex shrink-0 items-center gap-1 sm:gap-3">
             {userEmail ? (
-              <div className="flex items-center gap-2">
-                <span className="hidden max-w-[120px] truncate text-sm text-slate-600 dark:text-slate-400 sm:inline">
-                  {userEmail}
-                </span>
-                <button
-                  onClick={handleLogout}
-                  className="rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800"
-                >
-                  {t("logout")}
-                </button>
-              </div>
+              <UserAvatar email={userEmail} onLogout={() => setUserEmail(null)} />
             ) : (
               <button
                 onClick={() => setAuthOpen(true)}
@@ -160,17 +146,9 @@ export default function Header() {
               {locale === "zh" ? "EN" : "中文"}
             </button>
             {userEmail ? (
-              <div className="mt-2 flex items-center justify-between rounded-lg border border-slate-100 bg-slate-50 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
-                <span className="truncate text-sm text-slate-600">{userEmail}</span>
-                <button
-                  onClick={() => {
-                    handleLogout();
-                    setMobileOpen(false);
-                  }}
-                  className="text-sm font-medium text-sky-500"
-                >
-                  {t("logout")}
-                </button>
+              <div className="mt-2 flex items-center gap-3 rounded-lg border border-slate-100 bg-slate-50 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
+                <UserAvatar email={userEmail} onLogout={() => { setUserEmail(null); setMobileOpen(false); }} />
+                <span className="truncate text-sm text-slate-600 dark:text-slate-400">{userEmail}</span>
               </div>
             ) : (
               <button

app/components/UserAvatar.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useTranslation } from "@/i18n/navigation";
+import { pbLogout } from "@/app/lib/pocketbase";
+
+function getAvatarLetter(email: string): string {
+  const local = email.split("@")[0];
+  if (!local) return "?";
+  return local.slice(0, 1).toUpperCase();
+}
+
+interface UserAvatarProps {
+  email: string;
+  onLogout?: () => void;
+}
+
+/** 圆形头像 + 点击展开退出按钮，供 digital / meetup / vip 三站复用 */
+export default function UserAvatar({ email, onLogout }: UserAvatarProps) {
+  const { t } = useTranslation("common");
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleLogout = async () => {
+    await pbLogout();
+    setOpen(false);
+    onLogout?.();
+  };
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-sky-500 text-sm font-semibold text-white shadow-sm ring-2 ring-white dark:ring-slate-900 hover:bg-sky-600"
+        aria-label={t("logout")}
+      >
+        {getAvatarLetter(email)}
+      </button>
+      {open && (
+        <div className="absolute right-0 top-full z-50 mt-2 min-w-[120px] rounded-lg border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-800">
+          <button
+            onClick={handleLogout}
+            className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-700"
+          >
+            {t("logout")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}