's'

2026-03-12 00:34:50 -05:00
parent 0c2ccadb6b
commit 5caf970c7e
26 changed files with 1528 additions and 288 deletions
--- a/app/vip/components/LandingPage.tsx
+++ b/app/vip/components/LandingPage.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { useState } from "react";
 import { LandingHero } from "./landing/LandingHero";
 import { AssetStats } from "./landing/AssetStats";
 import { TopicEbookShowcase } from "./landing/TopicEbookShowcase";
@@ -7,31 +8,36 @@ import { CompareSection } from "./landing/CompareSection";
 import { CommunityPreview } from "./landing/CommunityPreview";
 import { FAQSection } from "./landing/FAQSection";
 import { LandingCTA } from "./landing/LandingCTA";
-import { LoginBlock } from "./landing/LoginBlock";
+import { LoginModal } from "./landing/LoginModal";

 type LandingPageProps = {
  onJoin: () => void;
-  onLogin: () => void;
  onVerify: (userId: string) => Promise<boolean>;
  onVerifySuccess: () => void;
 };

 export function LandingPage({
  onJoin,
-  onLogin,
  onVerify,
  onVerifySuccess,
 }: LandingPageProps) {
+  const [loginModalOpen, setLoginModalOpen] = useState(false);
+
  return (
    <>
      <LandingHero />
      <AssetStats />
-      <TopicEbookShowcase />
+      <TopicEbookShowcase onLockedClick={() => setLoginModalOpen(true)} />
      <CompareSection />
      <CommunityPreview />
      <FAQSection />
-      <LandingCTA onJoin={onJoin} onLogin={onLogin} />
-      <LoginBlock onVerify={onVerify} onSuccess={onVerifySuccess} />
+      <LandingCTA onJoin={onJoin} onLogin={() => setLoginModalOpen(true)} />
+      <LoginModal
+        open={loginModalOpen}
+        onClose={() => setLoginModalOpen(false)}
+        onVerify={onVerify}
+        onSuccess={onVerifySuccess}
+      />
    </>
  );
 }
--- a/app/vip/components/dashboard/UnlockedStats.tsx
+++ b/app/vip/components/dashboard/UnlockedStats.tsx
@@ -7,7 +7,6 @@ const STAT_ITEMS = [
  { key: "topics", label: "已解锁模块" },
  { key: "ebooks", label: "电子书" },
  { key: "videos", label: "视频" },
-  { key: "templates", label: "模板" },
 ] as const;

 export function UnlockedStats() {
--- a/app/vip/components/landing/AssetStats.tsx
+++ b/app/vip/components/landing/AssetStats.tsx
@@ -7,13 +7,12 @@ const STAT_ITEMS = [
  { key: "topics", label: "模块" },
  { key: "ebooks", label: "电子书" },
  { key: "videos", label: "视频" },
-  { key: "templates", label: "模板" },
  { key: "updateFrequency", label: "更新" },
 ] as const;

 export function AssetStats() {
  return (
-    <section className={styles.section}>
+    <section className={`${styles.section} ${styles.statsSection}`}>
      <div
        className={`${styles.statsGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
--- a/app/vip/components/landing/LandingHero.tsx
+++ b/app/vip/components/landing/LandingHero.tsx
@@ -4,7 +4,7 @@ import styles from "../vip.module.css";

 export function LandingHero() {
  return (
-    <section className={styles.section} style={{ paddingTop: "2rem", textAlign: "center" }}>
+    <section className={`${styles.section} ${styles.heroSection}`} style={{ textAlign: "center" }}>
      <p
        className="animate__animated animate__fadeInDown"
        style={{
@@ -42,13 +42,14 @@ export function LandingHero() {
          fontSize: "1.125rem",
          color: "var(--muted-foreground)",
          maxWidth: "540px",
-          margin: "0",
+          margin: "0 auto",
          lineHeight: 1.6,
+          textAlign: "center",
          animationDelay: "0.3s",
          animationFillMode: "both",
        }}
      >
-        一次付费，解锁电子书、视频教程、私密社群、即时问答，享受每周更新
+        一次付费，解锁电子书、视频教程、私密社群、即时问答，每周更新
      </p>
    </section>
  );
--- a/app/vip/components/landing/LoginBlock.tsx
+++ b/app/vip/components/landing/LoginBlock.tsx
@@ -1,7 +1,8 @@
 "use client";

-import { useState, useRef, useEffect } from "react";
+import { useState, useEffect } from "react";
 import styles from "../vip.module.css";
+import { LoginForm } from "./LoginForm";

 type LoginBlockProps = {
  onVerify: (userId: string) => Promise<boolean>;
@@ -9,41 +10,11 @@ type LoginBlockProps = {
 };

 export function LoginBlock({ onVerify, onSuccess }: LoginBlockProps) {
-  const [userId, setUserId] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
+  const [hash, setHash] = useState("");
  useEffect(() => {
-    const hash = typeof window !== "undefined" ? window.location.hash : "";
-    if (hash === "#login") {
-      inputRef.current?.focus();
-    }
+    setHash(typeof window !== "undefined" ? window.location.hash : "");
  }, []);

-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const trimmed = userId.trim();
-    if (!trimmed) {
-      setError("请输入您的账号");
-      return;
-    }
-    setError(null);
-    setLoading(true);
-    try {
-      const ok = await onVerify(trimmed);
-      if (ok) {
-        onSuccess();
-      } else {
-        setError("未找到该账号的会员记录，请确认账号正确");
-      }
-    } catch {
-      setError("验证失败，请稍后重试");
-    } finally {
-      setLoading(false);
-    }
-  };
-
  return (
    <section id="login" className={styles.section} style={{ paddingTop: "2rem" }}>
      <div className={styles.card} style={{ maxWidth: "400px", margin: "0 auto" }}>
@@ -51,39 +22,7 @@ export function LoginBlock({ onVerify, onSuccess }: LoginBlockProps) {
        <p className={styles.sectionDesc}>
          请输入您的会员账号（支付时使用的 user_id）以恢复权益
        </p>
-        <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>
-          )}
-          <button
-            type="submit"
-            disabled={loading}
-            className={`${styles.btnPrimary} ${styles.btnLarge}`}
-            style={{ width: "100%" }}
-          >
-            {loading ? "验证中..." : "验证并登录"}
-          </button>
-        </form>
+        <LoginForm onVerify={onVerify} onSuccess={onSuccess} autoFocus={hash === "#login"} />
      </div>
    </section>
  );
--- a/app/vip/components/landing/LoginForm.tsx
+++ b/app/vip/components/landing/LoginForm.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import styles from "../vip.module.css";
+
+type LoginFormProps = {
+  onVerify: (userId: string) => Promise<boolean>;
+  onSuccess: () => void;
+  autoFocus?: boolean;
+};
+
+export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
+  const [userId, setUserId] = 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]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = userId.trim();
+    if (!trimmed) {
+      setError("请输入您的账号");
+      return;
+    }
+    setError(null);
+    setLoading(true);
+    try {
+      const ok = await onVerify(trimmed);
+      if (ok) {
+        onSuccess();
+      } else {
+        setError("未找到该账号的会员记录，请确认账号正确");
+      }
+    } catch {
+      setError("验证失败，请稍后重试");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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>
+      )}
+      <button
+        type="submit"
+        disabled={loading}
+        className={`${styles.btnPrimary} ${styles.btnLarge}`}
+        style={{ width: "100%" }}
+      >
+        {loading ? "验证中..." : "验证并登录"}
+      </button>
+    </form>
+  );
+}
--- a/app/vip/components/landing/LoginModal.tsx
+++ b/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>
+  );
+}
--- a/app/vip/components/landing/TopicEbookShowcase.tsx
+++ b/app/vip/components/landing/TopicEbookShowcase.tsx
@@ -4,9 +4,13 @@ import Link from "next/link";
 import { TOPICS_DISPLAY, EBOOKS_DISPLAY, VIDEO_COURSES_DISPLAY } from "@/app/data/vip.mock";
 import styles from "../vip.module.css";

-export function TopicEbookShowcase() {
+type TopicEbookShowcaseProps = {
+  onLockedClick?: () => void;
+};
+
+export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
  return (
-    <section id="topics" className={styles.section}>
+    <section id="topics" className={`${styles.section} ${styles.topicsSection}`}>
      {/* 模块展示 */}
      <h2 className={styles.sectionTitle}>模块</h2>
      <div
@@ -14,13 +18,30 @@ export function TopicEbookShowcase() {
        style={{ animationDelay: "0.2s", animationFillMode: "both", marginBottom: "1.5rem" }}
      >
        {TOPICS_DISPLAY.map((t) => {
+          const isLocked = "locked" in t && t.locked && onLockedClick;
          const content = (
-            <>
+            <span className={styles.topicCardInner}>
+              {isLocked && (
+                <span className={styles.topicLock} title="会员专享">🔒</span>
+              )}
              <span className={styles.topicIcon}>{t.icon}</span>
              <span className={styles.topicTitle}>{t.title}</span>
              <span className={styles.topicDesc}>{t.desc}</span>
-            </>
+            </span>
          );
+          if (isLocked) {
+            return (
+              <button
+                key={t.id}
+                type="button"
+                className={styles.topicCard}
+                onClick={onLockedClick}
+                style={{ cursor: "pointer", border: "none", font: "inherit" }}
+              >
+                {content}
+              </button>
+            );
+          }
          if (t.href) {
            return (
              <Link
@@ -43,28 +64,36 @@ export function TopicEbookShowcase() {
      </div>

      {/* 视频教程展示 - 参考 digital 资源导航，至少 4 个 */}
-      <h2 className={styles.sectionTitle}>视频教程</h2>
+      <h2 id="video-courses" className={styles.sectionTitle}>视频教程</h2>
      <div
        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.22s", animationFillMode: "both", marginBottom: "1.5rem" }}
      >
-        {VIDEO_COURSES_DISPLAY.map((v) => (
-          <Link
-            key={v.id}
-            href={v.href}
-            className={styles.topicCard}
-            target={v.href.startsWith("http") ? "_blank" : undefined}
-            rel={v.href.startsWith("http") ? "noopener noreferrer" : undefined}
-          >
-            <span className={styles.topicIcon}>{v.icon}</span>
-            <span className={styles.topicTitle}>{v.title}</span>
-            <span className={styles.topicDesc}>{v.desc}</span>
-          </Link>
-        ))}
+        {VIDEO_COURSES_DISPLAY.map((v) =>
+          v.href ? (
+            <Link
+              key={v.id}
+              href={v.href}
+              className={styles.topicCard}
+              target={v.href.startsWith("http") ? "_blank" : undefined}
+              rel={v.href.startsWith("http") ? "noopener noreferrer" : undefined}
+            >
+              <span className={styles.topicIcon}>{v.icon}</span>
+              <span className={styles.topicTitle}>{v.title}</span>
+              <span className={styles.topicDesc}>{v.desc}</span>
+            </Link>
+          ) : (
+            <div key={v.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.9 }}>
+              <span className={styles.topicIcon}>{v.icon}</span>
+              <span className={styles.topicTitle}>{v.title}</span>
+              <span className={styles.topicDesc}>{v.desc}</span>
+            </div>
+          )
+        )}
      </div>

      {/* 电子书展示 */}
-      <h2 className={styles.sectionTitle}>电子书</h2>
+      <h2 id="ebooks" className={styles.sectionTitle}>电子书</h2>
      <div
        className="animate__animated animate__fadeInUp"
        style={{
@@ -75,28 +104,48 @@ export function TopicEbookShowcase() {
          animationFillMode: "both",
        }}
      >
-        {EBOOKS_DISPLAY.map((e) => (
-          <Link
-            key={e.id}
-            href={e.href}
-            className={styles.card}
-            style={{
-              display: "block",
-              padding: "1.25rem",
-              textDecoration: "none",
-              color: "inherit",
-            }}
-          >
-            <span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📖</span>
-            <div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.25rem" }}>
-              《{e.title}》
+        {EBOOKS_DISPLAY.map((e) => {
+          const cardContent = (
+            <>
+              <span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📖</span>
+              <div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.25rem" }}>
+                《{e.title}》
+              </div>
+              <div style={{ fontSize: "0.9rem", color: "var(--muted-foreground)" }}>{e.desc}</div>
+              <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>
+                阅读 →
+              </div>
+            </>
+          );
+          return e.href ? (
+            <Link
+              key={e.id}
+              href={e.href}
+              className={styles.card}
+              style={{
+                display: "block",
+                padding: "1.25rem",
+                textDecoration: "none",
+                color: "inherit",
+              }}
+            >
+              {cardContent}
+            </Link>
+          ) : (
+            <div
+              key={e.id}
+              className={styles.card}
+              style={{
+                display: "block",
+                padding: "1.25rem",
+                cursor: "default",
+                opacity: 0.9,
+              }}
+            >
+              {cardContent}
            </div>
-            <div style={{ fontSize: "0.9rem", color: "var(--muted-foreground)" }}>{e.desc}</div>
-            <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: "var(--accent)" }}>
-              阅读 →
-            </div>
-          </Link>
-        ))}
+          );
+        })}
      </div>
    </section>
  );
--- a/app/vip/components/vip.module.css
+++ b/app/vip/components/vip.module.css
@@ -71,6 +71,72 @@
  padding: 1.5rem 0;
 }

+/* PC 首页：Hero + 统计 模块上方 */
+.heroSection {
+  padding-top: 2rem;
+  padding-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+  .heroSection {
+    padding-top: 3rem;
+    padding-bottom: 1.5rem;
+  }
+  .heroSection p:first-of-type {
+    margin-bottom: 1.25rem;
+  }
+  .heroSection h1 {
+    font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
+    margin-bottom: 0.75rem;
+  }
+  .heroSection p:last-of-type {
+    font-size: 1.25rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .heroSection {
+    padding-top: 4rem;
+    padding-bottom: 2rem;
+  }
+}
+
+.statsSection {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+  .statsSection {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .statsSection {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+}
+
+.topicsSection .sectionTitle {
+  margin-bottom: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .topicsSection {
+    padding-top: 2.5rem;
+  }
+  .topicsSection .sectionTitle {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
 .sectionTitle {
  font-size: 1.25rem;
  font-weight: 600;
@@ -174,7 +240,7 @@

@media (min-width: 640px) {
  .statsGrid {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(4, 1fr);
  }
 }

@@ -204,9 +270,11 @@
 }

 .topicCard {
+  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
+  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  background: var(--card);
@@ -217,6 +285,14 @@
  transition: border-color 0.2s, transform 0.2s;
 }

+.topicCardInner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
 .topicCard:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
@@ -238,6 +314,14 @@
  color: var(--muted-foreground);
 }

+.topicLock {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  font-size: 0.85rem;
+  opacity: 0.85;
+}
+
 /* Loading */
 .loading {
  min-height: 100vh;