s'

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>
+  );
+}