's'

app/vip/components/landing/LoginModal.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect } from "react";
+import styles from "../vip.module.css";
+import { LoginForm } from "./LoginForm";
+
+type LoginModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onVerify: (userId: string) => Promise<boolean>;
+  onSuccess: () => void;
+};
+
+export function LoginModal({ open, onClose, onVerify, onSuccess }: LoginModalProps) {
+  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"
+      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"
+            onClick={onClose}
+            className="rounded-lg p-2 text-[var(--muted-foreground)] transition hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+            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" }}>
+          请输入您的会员账号（支付时使用的 user_id）以恢复权益
+        </p>
+        <LoginForm onVerify={onVerify} onSuccess={handleSuccess} autoFocus />
+      </div>
+    </div>
+  );
+}