s'

app/vip/components/LandingPage.tsx

@@ -13,12 +13,14 @@ import { LoginModal } from "./landing/LoginModal";
 type LandingPageProps = {
   onJoin: () => void;
   onVerify: (userId: string) => Promise<boolean>;
+  onVerifyByEmail?: (email: string, password: string) => Promise<boolean>;
   onVerifySuccess: () => void;
 };
 
 export function LandingPage({
   onJoin,
   onVerify,
+  onVerifyByEmail,
   onVerifySuccess,
 }: LandingPageProps) {
   const [loginModalOpen, setLoginModalOpen] = useState(false);
@@ -36,6 +38,7 @@ export function LandingPage({
         open={loginModalOpen}
         onClose={() => setLoginModalOpen(false)}
         onVerify={onVerify}
+        onVerifyByEmail={onVerifyByEmail}
         onSuccess={onVerifySuccess}
       />
     </>

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}>
             登录

app/vip/components/VipLayout.tsx

@@ -8,12 +8,13 @@ type VipLayoutProps = {
   children: ReactNode;
   isLoggedIn: boolean;
   userName?: string | null;
+  onLogout?: () => void;
 };
 
-export function VipLayout({ children, isLoggedIn, userName }: VipLayoutProps) {
+export function VipLayout({ children, isLoggedIn, userName, onLogout }: VipLayoutProps) {
   return (
     <div className={styles.root}>
-      <VipHeader isLoggedIn={isLoggedIn} userName={userName} />
+      <VipHeader isLoggedIn={isLoggedIn} userName={userName} onLogout={onLogout} />
       <main className={styles.main}>{children}</main>
     </div>
   );

app/vip/components/landing/AuthForm.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { pbLogin, pbRegister, pbSaveAuth } from "@/app/lib/pocketbase";
+import styles from "../vip.module.css";
+
+type AuthFormProps = {
+  onSuccess: () => void;
+  autoFocus?: boolean;
+};
+
+export function AuthForm({ onSuccess, autoFocus }: AuthFormProps) {
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordConfirm, setPasswordConfirm] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      let result;
+      if (mode === "register") {
+        if (password !== passwordConfirm) {
+          setError("两次密码不一致");
+          setLoading(false);
+          return;
+        }
+        if (password.length < 8) {
+          setError("密码至少 8 位");
+          setLoading(false);
+          return;
+        }
+        result = await pbRegister(email, password, passwordConfirm);
+      } else {
+        result = await pbLogin(email, password);
+      }
+      pbSaveAuth(result.token, result.record);
+      await fetch("/api/auth/sync-session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token: result.token, record: result.record }),
+      });
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "操作失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="your@email.com"
+        required
+        autoFocus={autoFocus}
+        disabled={loading}
+        style={{
+          width: "100%",
+          padding: "0.75rem 1rem",
+          fontSize: "1rem",
+          border: "1px solid var(--border)",
+          borderRadius: "8px",
+          background: "var(--background)",
+          color: "var(--foreground)",
+          marginBottom: "0.75rem",
+        }}
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder={mode === "register" ? "至少 8 位" : "••••••••"}
+        required
+        minLength={mode === "register" ? 8 : 1}
+        disabled={loading}
+        style={{
+          width: "100%",
+          padding: "0.75rem 1rem",
+          fontSize: "1rem",
+          border: "1px solid var(--border)",
+          borderRadius: "8px",
+          background: "var(--background)",
+          color: "var(--foreground)",
+          marginBottom: mode === "register" ? "0.75rem" : 0,
+        }}
+      />
+      {mode === "register" && (
+        <input
+          type="password"
+          value={passwordConfirm}
+          onChange={(e) => setPasswordConfirm(e.target.value)}
+          placeholder="再次输入密码"
+          required
+          disabled={loading}
+          style={{
+            width: "100%",
+            padding: "0.75rem 1rem",
+            fontSize: "1rem",
+            border: "1px solid var(--border)",
+            borderRadius: "8px",
+            background: "var(--background)",
+            color: "var(--foreground)",
+            marginBottom: "0.75rem",
+          }}
+        />
+      )}
+      {error && (
+        <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>
+          {error}
+        </p>
+      )}
+      <button
+        type="submit"
+        disabled={loading}
+        className={`${styles.btnPrimary} ${styles.btnLarge}`}
+        style={{ width: "100%", marginBottom: "0.75rem" }}
+      >
+        {loading ? "处理中…" : mode === "login" ? "登录" : "注册"}
+      </button>
+      <p style={{ fontSize: "0.85rem", color: "var(--muted-foreground)", textAlign: "center" }}>
+        {mode === "login" ? (
+          <>
+            还没有账号？{" "}
+            <button type="button" onClick={() => { setMode("register"); setError(null); }} className="text-[var(--primary)]">
+              立即注册
+            </button>
+          </>
+        ) : (
+          <>
+            已有账号？{" "}
+            <button type="button" onClick={() => { setMode("login"); setError(null); }} className="text-[var(--primary)]">
+              去登录
+            </button>
+          </>
+        )}
+      </p>
+    </form>
+  );
+}

app/vip/components/landing/LoginForm.tsx

@@ -1,25 +1,29 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, type FormEvent } from "react";
 import styles from "../vip.module.css";
 
 type LoginFormProps = {
   onVerify: (userId: string) => Promise<boolean>;
+  onVerifyByEmail?: (email: string, password: string) => Promise<boolean>;
   onSuccess: () => void;
   autoFocus?: boolean;
 };
 
-export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
+export function LoginForm({ onVerify, onVerifyByEmail, onSuccess, autoFocus }: LoginFormProps) {
+  const [mode, setMode] = useState<"user_id" | "email">("user_id");
   const [userId, setUserId] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
-  }, [autoFocus]);
+  }, [autoFocus, mode]);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleUserIdSubmit = async (e: FormEvent) => {
     e.preventDefault();
     const trimmed = userId.trim();
     if (!trimmed) {
@@ -30,11 +34,8 @@ export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
     setLoading(true);
     try {
       const ok = await onVerify(trimmed);
-      if (ok) {
-        onSuccess();
-      } else {
-        setError("未找到该账号的会员记录，请确认账号正确");
-      }
+      if (ok) onSuccess();
+      else setError("未找到该账号的会员记录，请确认账号正确");
     } catch {
       setError("验证失败，请稍后重试");
     } finally {
@@ -42,39 +43,103 @@ export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
     }
   };
 
+  const handleEmailSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!onVerifyByEmail) return;
+    const trimmedEmail = email.trim();
+    if (!trimmedEmail || !password) {
+      setError("请输入邮箱和密码");
+      return;
+    }
+    setError(null);
+    setLoading(true);
+    try {
+      const ok = await onVerifyByEmail(trimmedEmail, password);
+      if (ok) onSuccess();
+      else setError("未找到该邮箱关联的会员记录，请确认账号正确");
+    } catch {
+      setError("验证失败，请稍后重试");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const inputStyle = {
+    width: "100%" as const,
+    padding: "0.75rem 1rem",
+    fontSize: "1rem",
+    border: "1px solid var(--border)",
+    borderRadius: "8px",
+    background: "var(--background)",
+    color: "var(--foreground)",
+    marginBottom: "0.75rem",
+  };
+
   return (
-    <form onSubmit={handleSubmit}>
-      <input
-        ref={inputRef}
-        type="text"
-        value={userId}
-        onChange={(e) => setUserId(e.target.value)}
-        placeholder="例如：user1234567890"
-        disabled={loading}
-        style={{
-          width: "100%",
-          padding: "0.75rem 1rem",
-          fontSize: "1rem",
-          border: "1px solid var(--border)",
-          borderRadius: "8px",
-          background: "var(--background)",
-          color: "var(--foreground)",
-          marginBottom: "0.75rem",
-        }}
-      />
-      {error && (
-        <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>
-          {error}
-        </p>
+    <>
+      <div className="mb-3 flex gap-2">
+        <button
+          type="button"
+          onClick={() => { setMode("user_id"); setError(null); }}
+          className={`flex-1 rounded-lg py-2 text-sm font-medium ${mode === "user_id" ? "bg-[var(--primary)] text-[var(--primary-foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"}`}
+        >
+          user_id
+        </button>
+        <button
+          type="button"
+          onClick={() => { setMode("email"); setError(null); }}
+          className={`flex-1 rounded-lg py-2 text-sm font-medium ${mode === "email" ? "bg-[var(--primary)] text-[var(--primary-foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"}`}
+        >
+          邮箱
+        </button>
+      </div>
+      {mode === "user_id" ? (
+        <form onSubmit={handleUserIdSubmit}>
+          <input
+            ref={inputRef}
+            type="text"
+            value={userId}
+            onChange={(e) => setUserId(e.target.value)}
+            placeholder="例如：user1234567890"
+            disabled={loading}
+            style={inputStyle}
+          />
+          {error && <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>{error}</p>}
+          <button type="submit" disabled={loading} className={`${styles.btnPrimary} ${styles.btnLarge}`} style={{ width: "100%" }}>
+            {loading ? "验证中..." : "验证并登录"}
+          </button>
+        </form>
+      ) : onVerifyByEmail ? (
+        <form onSubmit={handleEmailSubmit}>
+          <input
+            ref={inputRef}
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            disabled={loading}
+            style={inputStyle}
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="密码"
+            disabled={loading}
+            style={inputStyle}
+          />
+          {error && <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>{error}</p>}
+          <button type="submit" disabled={loading} className={`${styles.btnPrimary} ${styles.btnLarge}`} style={{ width: "100%" }}>
+            {loading ? "验证中..." : "验证并登录"}
+          </button>
+        </form>
+      ) : (
+        <form onSubmit={handleUserIdSubmit}>
+          <input ref={inputRef} type="text" value={userId} onChange={(e) => setUserId(e.target.value)} placeholder="例如：user1234567890" disabled={loading} style={inputStyle} />
+          {error && <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>{error}</p>}
+          <button type="submit" disabled={loading} className={`${styles.btnPrimary} ${styles.btnLarge}`} style={{ width: "100%" }}>{loading ? "验证中..." : "验证并登录"}</button>
+        </form>
       )}
-      <button
-        type="submit"
-        disabled={loading}
-        className={`${styles.btnPrimary} ${styles.btnLarge}`}
-        style={{ width: "100%" }}
-      >
-        {loading ? "验证中..." : "验证并登录"}
-      </button>
-    </form>
+    </>
   );
 }

app/vip/components/landing/LoginModal.tsx

@@ -1,17 +1,21 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import styles from "../vip.module.css";
 import { LoginForm } from "./LoginForm";
+import { AuthForm } from "./AuthForm";
 
 type LoginModalProps = {
   open: boolean;
   onClose: () => void;
   onVerify: (userId: string) => Promise<boolean>;
+  onVerifyByEmail?: (email: string, password: string) => Promise<boolean>;
   onSuccess: () => void;
 };
 
-export function LoginModal({ open, onClose, onVerify, onSuccess }: LoginModalProps) {
+export function LoginModal({ open, onClose, onVerify, onVerifyByEmail, onSuccess }: LoginModalProps) {
+  const [tab, setTab] = useState<"email" | "legacy">("email");
+
   useEffect(() => {
     if (open) {
       document.body.style.overflow = "hidden";
@@ -46,19 +50,17 @@ export function LoginModal({ open, onClose, onVerify, onSuccess }: LoginModalPro
       aria-modal="true"
       aria-labelledby="login-modal-title"
     >
-      {/* 背景遮罩 */}
       <div
         className="absolute inset-0 bg-black/60 backdrop-blur-sm"
         onClick={onClose}
       />
-      {/* 弹窗内容 */}
       <div
         className="relative w-full max-w-[400px] rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl animate__animated animate__fadeIn animate__faster"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-4 flex items-center justify-between">
           <h2 id="login-modal-title" className={styles.sectionTitle} style={{ margin: 0 }}>
-            已有账号登录
+            登录
           </h2>
           <button
             type="button"
@@ -71,10 +73,41 @@ export function LoginModal({ open, onClose, onVerify, onSuccess }: LoginModalPro
             </svg>
           </button>
         </div>
-        <p className={styles.sectionDesc} style={{ marginBottom: "1rem" }}>
-          请输入您的会员账号（支付时使用的 user_id）以恢复权益
-        </p>
-        <LoginForm onVerify={onVerify} onSuccess={handleSuccess} autoFocus />
+        <div className="mb-4 flex gap-2 border-b border-[var(--border)]">
+          <button
+            type="button"
+            onClick={() => setTab("email")}
+            className={`pb-2 text-sm font-medium ${tab === "email" ? "border-b-2 border-[var(--primary)] text-[var(--primary)]" : "text-[var(--muted-foreground)]"}`}
+          >
+            邮箱登录
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab("legacy")}
+            className={`pb-2 text-sm font-medium ${tab === "legacy" ? "border-b-2 border-[var(--primary)] text-[var(--primary)]" : "text-[var(--muted-foreground)]"}`}
+          >
+            会员账号恢复
+          </button>
+        </div>
+        {tab === "email" ? (
+          <p className={styles.sectionDesc} style={{ marginBottom: "1rem" }}>
+            使用邮箱登录，可与 digital / meetup 等站点共享账号
+          </p>
+        ) : (
+          <p className={styles.sectionDesc} style={{ marginBottom: "1rem" }}>
+            支持 user_id 或关联 users 的邮箱验证
+          </p>
+        )}
+        {tab === "email" ? (
+          <AuthForm onSuccess={handleSuccess} autoFocus />
+        ) : (
+          <LoginForm
+            onVerify={onVerify}
+            onVerifyByEmail={onVerifyByEmail}
+            onSuccess={handleSuccess}
+            autoFocus
+          />
+        )}
       </div>
     </div>
   );

app/vip/components/landing/PayAuthModal.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect } from "react";
+import styles from "../vip.module.css";
+import { AuthForm } from "./AuthForm";
+
+type PayAuthModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+};
+
+/** 支付前强制补充邮箱：注册/登录以关联 users 记录 */
+export function PayAuthModal({ open, onClose, onSuccess }: PayAuthModalProps) {
+  useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+
+  const handleSuccess = () => {
+    onClose();
+    onSuccess();
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div
+        className="relative w-full max-w-[400px] rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className={styles.sectionTitle} style={{ margin: 0 }}>
+            请先注册/登录
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg p-2 text-[var(--muted-foreground)] transition hover:bg-[var(--muted)]"
+            aria-label="关闭"
+          >
+            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <p className={styles.sectionDesc} style={{ marginBottom: "1rem" }}>
+          补充邮箱用于关联会员权益，支付后可在各站点通用
+        </p>
+        <AuthForm onSuccess={handleSuccess} autoFocus />
+      </div>
+    </div>
+  );
+}