s'

app/vip/components/VipHeader.tsx

@@ -7,9 +7,10 @@ import styles from "./vip.module.css";
 type VipHeaderProps = {
   isLoggedIn: boolean;
   userName?: string | null;
+  onLogout?: () => void;
 };
 
-export function VipHeader({ isLoggedIn, userName }: VipHeaderProps) {
+export function VipHeader({ isLoggedIn, userName, onLogout }: VipHeaderProps) {
   return (
     <header className={styles.header}>
       <Link
@@ -23,7 +24,19 @@ export function VipHeader({ isLoggedIn, userName }: VipHeaderProps) {
       <nav className={styles.nav}>
         <ThemeToggle />
         {isLoggedIn ? (
-          <span className={styles.userBadge}>{userName || "会员"}</span>
+          <div className={styles.userBadge} style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <span>{userName || "会员"}</span>
+            {onLogout && (
+              <button
+                type="button"
+                onClick={onLogout}
+                className={styles.loginLink}
+                style={{ background: "none", border: "none", cursor: "pointer", padding: 0, fontSize: "inherit" }}
+              >
+                退出
+              </button>
+            )}
+          </div>
         ) : (
           <Link href="/#login" className={styles.loginLink}>
             登录