's'

2026-03-11 23:47:45 -05:00
parent 296d703307
commit 0c2ccadb6b
35 changed files with 2399 additions and 195 deletions
--- a/app/data/vip.mock.ts
+++ b/app/data/vip.mock.ts
@@ -0,0 +1,112 @@
+/**
+ * VIP 首页 Mock 数据 - 集中管理
+ * 后续可替换为 api.hackrobot.cn 真实接口
+ */
+
+export const ASSET_STATS = {
+  topics: 4,
+  ebooks: 2,
+  videos: 12,
+  templates: 8,
+  updateFrequency: "每周",
+} as const;
+
+export const TOPICS = [
+  {
+    id: "ebook",
+    icon: "📖",
+    title: "电子书",
+    desc: "地理套利·自动化",
+    href: "/ebook",
+  },
+  {
+    id: "cloudphone",
+    icon: "🎬",
+    title: "视频教程",
+    desc: "云手机·无人直播",
+    href: "/cloudphone",
+  },
+  {
+    id: "community",
+    icon: "👥",
+    title: "私密社群",
+    desc: "抱团出海",
+    href: "https://qun.hackrobot.cn",
+  },
+  {
+    id: "tools",
+    icon: "🛒",
+    title: "设备自助",
+    desc: "开箱即用",
+    href: null,
+  },
+] as const;
+
+/** 模块展示 - 首页展示用 */
+export const TOPICS_DISPLAY = [
+  { id: "ebook", icon: "📖", title: "电子书", desc: "地理套利·自动化杠杆", href: "/ebook" },
+  { id: "cloudphone", icon: "🎬", title: "视频教程", desc: "云手机·无人直播", href: "/cloudphone" },
+  { id: "community", icon: "👥", title: "私密社群", desc: "抱团出海", href: "https://qun.hackrobot.cn" },
+  { id: "tools", icon: "🛒", title: "设备自助", desc: "开箱即用", href: null },
+] as const;
+
+/** 电子书展示 - 首页展示用 */
+export const EBOOKS_DISPLAY = [
+  { id: "1", title: "数字游民", desc: "地理套利与自动化杠杆", href: "/ebook" },
+  { id: "2", title: "云手机", desc: "低成本工作室搭建指南", href: "/cloudphone" },
+] as const;
+
+/** 视频教程展示 - 参考 digital.hackrobot.cn 资源导航专题，至少 4 个 */
+export const VIDEO_COURSES_DISPLAY = [
+  { id: "cloudphone", icon: "☁️", title: "云手机模块", desc: "低成本自建云手机，TikTok/YouTube 运营搭建指南", href: "/topic/cloudphone" },
+  { id: "livestream", icon: "📺", title: "无人直播模块", desc: "TikTok/YouTube 无人直播，24 小时自动化", href: "/topic/livestream" },
+  { id: "indie", icon: "🛠️", title: "独立开发模块", desc: "从想法到产品，独立开发者全流程指南", href: "/topic/indie" },
+  { id: "aiagent", icon: "🤖", title: "AI Agent 模块", desc: "AIGC 与智能体，Vibe Coding 跨界创造", href: "/topic/aiagent" },
+] as const;
+
+export const COMPARE_ITEMS = [
+  { feature: "电子书", single: "单买", member: "全解锁" },
+  { feature: "视频教程", single: "单买", member: "全解锁" },
+  { feature: "私密社群", single: "—", member: "✓" },
+  { feature: "即时问答", single: "—", member: "✓" },
+  { feature: "持续更新", single: "—", member: "✓" },
+] as const;
+
+export const COMMUNITY_PREVIEW = [
+  { icon: "👥", text: "私密社群，抱团出海" },
+  { icon: "💬", text: "即时问答，技术咨询" },
+  { icon: "🎪", text: "线下沙龙，面交对接" },
+] as const;
+
+export const FAQ_ITEMS = [
+  {
+    q: "会员包含哪些内容？",
+    a: "电子书、视频教程、私密社群、即时问答、设备自助等全部解锁，并享受持续更新。",
+  },
+  {
+    q: "如何加入？",
+    a: "点击「立即加入」完成支付即可，支付成功后自动开通，无需人工审核。",
+  },
+  {
+    q: "支持退款吗？",
+    a: "本内容为虚拟数字交付，不支持退款。购买前请确认适合您的需求。",
+  },
+] as const;
+
+/** 已登录控制台用 */
+export const RECENT_UPDATES = [
+  { id: "1", title: "云手机·第3章更新", date: "3月10日", href: "/cloudphone/course/2/0" },
+  { id: "2", title: "电子书·地理套利补充", date: "3月8日", href: "/ebook" },
+  { id: "3", title: "模板库·RPA 脚本新增", date: "3月5日", href: null },
+] as const;
+
+export const COMMUNITY_HIGHLIGHTS = [
+  { id: "1", text: "本周社群讨论：出海合规要点", href: "https://qun.hackrobot.cn" },
+  { id: "2", text: "问答精选：云手机多开方案", href: "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot" },
+] as const;
+
+export const WEEKLY_ACTIONS = [
+  { id: "1", text: "完成云手机第2章", href: "/cloudphone/course/1/0", priority: 1 },
+  { id: "2", text: "阅读电子书地理套利篇", href: "/ebook", priority: 2 },
+  { id: "3", text: "加入社群参与讨论", href: "https://qun.hackrobot.cn", priority: 3 },
+] as const;
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,21 +1,18 @@
 "use client";

 import { useCallback, useEffect, useState } from "react";
-import Link from "next/link";
 import PocketBase from "pocketbase";
 import { getPayEnv, getDeviceFromEnv } from "@/app/lib/payEnv";
 import { getPaymentConfig } from "@/config/services.config";
-import { formatRestoreDateShort } from "@/config/promo.config";
 import { usePayStatusPoll } from "@/app/lib/usePayStatusPoll";
-import { ThemeToggle } from "@/app/components/ThemeToggle";
-import styles from "./home.module.css";
+import { VipLayout } from "@/app/vip/components/VipLayout";
+import { LandingPage } from "@/app/vip/components/LandingPage";
+import { DashboardPage } from "@/app/vip/components/DashboardPage";
+import styles from "@/app/vip/components/vip.module.css";

 const PB_URL =
  process.env.NEXT_PUBLIC_POCKETBASE_URL || "https://pocketbase.hackrobot.cn";

-/** 临时：预览支付成功后的界面，本地调试用，上线前改回 false */
-const FORCE_VIP_PREVIEW = false;
-
 /** 微信内支付渠道：zpay | xorpay */
 const WECHAT_PAY_PROVIDER: "zpay" | "xorpay" = "xorpay";

@@ -154,33 +151,6 @@ function removeStorage(key: string): void {
  localStorage.removeItem(key);
 }

-const FEATURES = [
-  {
-    icon: "🚀",
-    title: "业务方向",
-    desc: "无人直播、RPA 自动化、Web 开发，找到你的变现路径",
-  },
-  {
-    icon: "⚙️",
-    title: "技术杠杆",
-    desc: "云手机、PVE 虚拟化、服务器集群，低成本放大收益",
-  },
-  {
-    icon: "🌐",
-    title: "海外平台",
-    desc: "YouTube、TikTok、SaaS 运营实战，出海掘金",
-  },
-];
-
-const UNLOCK_ITEMS = [
-  { icon: "📖", title: "电子书", desc: "地理套利·自动化", href: "/ebook" },
-  { icon: "🎬", title: "视频教程", desc: "云手机·无人直播", href: "/cloudphone" },
-  { icon: "👥", title: "私密社群", desc: "抱团出海", href: null },
-  { icon: "🛒", title: "商店", desc: "设备自助", href: null },
-  { icon: "💬", title: "即时问答", desc: "技术咨询", href: "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot" },
-  { icon: "🎪", title: "线下沙龙", desc: "面交·对接", href: null },
-];
-
 export default function Home() {
  const [paidType, setPaidType] = useState<string | null>(null);
  const [userName, setUserName] = useState<string | null>(null);
@@ -218,29 +188,32 @@ export default function Home() {
    return userId;
  }, []);

-  const checkPaymentFromPB = useCallback(async (userId: string) => {
-    try {
-      const pb = new PocketBase(PB_URL);
-      const records = await pb.collection("payments").getList(1, 1, {
-        filter: `user_id = "${userId}"`,
-        sort: "-created",
-      });
+  const checkPaymentFromPB = useCallback(
+    async (userId: string): Promise<boolean> => {
+      try {
+        const pb = new PocketBase(PB_URL);
+        const records = await pb.collection("payments").getList(1, 1, {
+          filter: `user_id = "${userId}"`,
+          sort: "-created",
+        });

-      if (records.items.length > 0) {
-        const latestType = records.items[0].type as string;
-        const dbUserId = records.items[0].user_id as string;
-        savePaidType(latestType);
-        saveUserName(dbUserId);
-        return latestType;
-      } else {
+        if (records.items.length > 0) {
+          const latestType = records.items[0].type as string;
+          const dbUserId = records.items[0].user_id as string;
+          setStorage("userId", dbUserId);
+          savePaidType(latestType);
+          saveUserName(dbUserId);
+          return latestType === "vip";
+        }
        savePaidType(null);
-        return null;
+        return false;
+      } catch (err) {
+        console.error("查询 PocketBase 失败:", err);
+        return false;
      }
-    } catch (err) {
-      console.error("查询 PocketBase 失败:", err);
-      return getStorage("paidType");
-    }
-  }, [savePaidType, saveUserName]);
+    },
+    [savePaidType, saveUserName]
+  );

  const clearAllStorage = useCallback(() => {
    try {
@@ -253,19 +226,6 @@ export default function Home() {
          /* ignore */
        }
      });
-      try {
-        for (let i = localStorage.length - 1; i >= 0; i--) {
-          const key = localStorage.key(i);
-          if (key) localStorage.removeItem(key);
-        }
-      } catch {
-        /* ignore */
-      }
-      try {
-        sessionStorage.clear();
-      } catch {
-        /* ignore */
-      }
      setPaidType(null);
      setUserName(null);
      setLoading(false);
@@ -282,7 +242,13 @@ export default function Home() {
    const env = getPayEnv();
    const device = getDeviceFromEnv(env);
    const totalFee = getPaymentConfig().defaultAmount ?? 8800;
-    const base = { user_id: userId, return_url: returnUrl, total_fee: totalFee, type: "vip", channel: "wxpay" as const };
+    const base = {
+      user_id: userId,
+      return_url: returnUrl,
+      total_fee: totalFee,
+      type: "vip",
+      channel: "wxpay" as const,
+    };
    if (device === "wechat" && WECHAT_PAY_PROVIDER === "xorpay") {
      payWechatXorpay(base);
    } else if (device === "h5") {
@@ -293,13 +259,13 @@ export default function Home() {
    }
  }, [getOrCreateUserId]);

-  const handleCopyUsername = useCallback(() => {
-    const name = userName || "";
-    if (typeof navigator !== "undefined" && navigator.clipboard) {
-      navigator.clipboard.writeText(name);
-      alert("账号已复制");
-    }
-  }, [userName]);
+  const handleLogin = useCallback(() => {
+    document.getElementById("login")?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+
+  const handleVerifySuccess = useCallback(() => {
+    window.location.reload();
+  }, []);

  const env = getPayEnv();
  const device = getDeviceFromEnv(env);
@@ -348,7 +314,10 @@ export default function Home() {

      const userId = getStorage("userId");
      if (userId) {
-        await checkPaymentFromPB(userId);
+        const found = await checkPaymentFromPB(userId);
+        if (found) {
+          setUserName(getStorage("userName"));
+        }
      }
      setLoading(false);
    };
@@ -379,6 +348,8 @@ export default function Home() {
    }
  }, [paidType]);

+  const isLoggedIn = paidType === "vip";
+
  if (loading) {
    return (
      <div className={styles.loading}>
@@ -388,124 +359,18 @@ export default function Home() {
    );
  }

-  if (FORCE_VIP_PREVIEW || paidType === "vip") {
-    return (
-      <div className={styles.root}>
-        <header className={styles.header}>
-          <Link href="https://digital.hackrobot.cn/zh" className={styles.logo} target="_blank" rel="noopener">
-            🌍 异度星球
-          </Link>
-        <nav className={styles.nav}>
-          <ThemeToggle />
-        </nav>
-      </header>
-
-        <main className={styles.main}>
-          <section className={styles.vipSuccess}>
-            <div className={`${styles.vipSuccessCard} animate__animated animate__zoomIn`} style={{ animationDelay: "0.1s", animationFillMode: "both" }}>
-              <div className={styles.vipSuccessIcon}>✅</div>
-              <h1>欢迎加入异度星球</h1>
-              <p className={styles.vipSuccessDesc}>您已解锁全部 VIP 权益</p>
-              <div className={styles.vipCode}>
-                <div className={styles.vipCodeRow}>
-                  <span>星球地址</span>
-                  <code>qun.hackrobot.cn</code>
-                </div>
-                <div className={styles.vipCodeRow}>
-                  <span>账号</span>
-                  <code>{getStorage("userName") || (FORCE_VIP_PREVIEW ? "preview" : "")}</code>
-                  <button type="button" onClick={handleCopyUsername}>复制</button>
-                </div>
-                <div className={styles.vipCodeRow}>
-                  <span>密码</span>
-                  <code>123456</code>
-                </div>
-                <a
-                  href="https://qun.hackrobot.cn"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles.vipCta}
-                >
-                  进入星球 →
-                </a>
-                <p className={styles.vipTip}>打开网页后，请点击「左上角头像」打开侧面栏</p>
-              </div>
-            </div>
-          </section>
-        </main>
-      </div>
-    );
-  }
-
  return (
-    <div className={styles.root}>
-      <header className={styles.header}>
-        <Link href="https://digital.hackrobot.cn/zh" className={styles.logo} target="_blank" rel="noopener">
-          🌍 异度星球
-        </Link>
-        <nav className={styles.nav}>
-          <ThemeToggle />
-        </nav>
-      </header>
-
-      <main className={styles.main}>
-        <section className={styles.hero}>
-          <p className={`${styles.heroBadge} animate__animated animate__fadeInDown`} style={{ animationDelay: "0.1s", animationFillMode: "both" }}>🎒 数字游民进阶社群 · 私密资源</p>
-          <h1 className={`${styles.heroTitle} animate__animated animate__fadeInDown`} style={{ animationDelay: "0.2s", animationFillMode: "both" }}>
-            异度星球
-          </h1>
-          <p className={`${styles.heroSubtitle} animate__animated animate__fadeInDown`} style={{ animationDelay: "0.3s", animationFillMode: "both" }}>
-            解锁电子书、视频教程、即时问答 · 抱团出海，技术杠杆
-          </p>
-        </section>
-
-        <section className={`${styles.section} ${styles.sectionTightTop}`}>
-          <div className={styles.features}>
-            {FEATURES.map((f, i) => (
-              <div key={i} className={`${styles.featureCard} animate__animated animate__fadeInUp`} style={{ animationDelay: `${0.3 + i * 0.1}s`, animationFillMode: "both" }}>
-                <span className={styles.featureIcon}>{f.icon}</span>
-                <h3>{f.title}</h3>
-                <p>{f.desc}</p>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className={styles.section}>
-          <h2 className="animate__animated animate__fadeInDown" style={{ animationDelay: "0.1s", animationFillMode: "both" }}>🔓 解锁 VIP</h2>
-          <p className={`${styles.sectionDesc} animate__animated animate__fadeInUp`} style={{ animationDelay: "0.2s", animationFillMode: "both" }}>
-            一次付费·全部解锁
-          </p>
-          <div className={styles.unlockGrid}>
-            {UNLOCK_ITEMS.map((item, i) => (
-              <div
-                key={i}
-                className={`${styles.unlockCard} ${styles.unlockCardDisabled} animate__animated animate__fadeInUp`}
-                style={{ animationDelay: `${0.25 + i * 0.06}s`, animationFillMode: "both" }}
-              >
-                <span className={styles.unlockIcon}>{item.icon}</span>
-                <span className={styles.unlockTitle}>{item.title}</span>
-                <span className={styles.unlockDesc}>{item.desc}</span>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className={`${styles.section} ${styles.sectionCta}`}>
-          <div className={`${styles.ctaCard} animate__animated animate__zoomIn`} style={{ animationDelay: "0.2s", animationFillMode: "both" }}>
-            <h2>限时特惠 · {formatRestoreDateShort()}恢复原价</h2>
-            <p>阶梯定价 · 数字交付 · 不支持退款</p>
-            <p className={styles.ctaNote}>🚫 不适合躺赚、现金流紧张</p>
-            <button
-              type="button"
-              onClick={() => { handlePay(); }}
-              className={`${styles.btnPrimary} ${styles.btnLarge}`}
-            >
-              🔒 解锁 VIP
-            </button>
-          </div>
-        </section>
-      </main>
-    </div>
+    <VipLayout isLoggedIn={isLoggedIn} userName={userName}>
+      {isLoggedIn ? (
+        <DashboardPage userName={userName} />
+      ) : (
+        <LandingPage
+          onJoin={handlePay}
+          onLogin={handleLogin}
+          onVerify={checkPaymentFromPB}
+          onVerifySuccess={handleVerifySuccess}
+        />
+      )}
+    </VipLayout>
  );
 }
--- a/app/topic/[topicId]/layout.tsx
+++ b/app/topic/[topicId]/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ topicId: string }>;
+}): Promise<Metadata> {
+  const { topicId } = await params;
+  const titles: Record<string, string> = {
+    cloudphone: "云手机模块 | 低成本自建云手机",
+    livestream: "无人直播模块 | TikTok/YouTube 24小时自动化",
+    indie: "独立开发模块 | 即将上线",
+    aiagent: "AI Agent 模块 | 即将上线",
+  };
+  return {
+    title: titles[topicId] ?? "模块 | 异度星球",
+    description: "异度星球 VIP 会员专属视频教程模块",
+  };
+}
+
+export default function TopicLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
--- a/app/topic/[topicId]/page.tsx
+++ b/app/topic/[topicId]/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { TopicHeader } from "../components/TopicHeader";
+import { TopicBreadcrumb } from "../components/TopicBreadcrumb";
+import { TopicHero } from "../components/TopicHero";
+import { TopicCurriculum } from "../components/TopicCurriculum";
+import { TopicComingSoon } from "../components/TopicComingSoon";
+import { TopicFooter } from "../components/TopicFooter";
+import { getTopicConfig } from "../config";
+import { ChatFloatButton } from "@/app/cloudphone/components/ChatFloatButton";
+
+export default function TopicPage() {
+  const params = useParams();
+  const topicId = String(params?.topicId ?? "");
+  const config = getTopicConfig(topicId);
+
+  if (!config) {
+    return (
+      <div className="min-h-screen bg-[var(--background)]">
+        <TopicHeader topicId="cloudphone" />
+        <main className="pt-20 pb-16">
+          <div className="mx-auto max-w-4xl px-4 py-16 text-center">
+            <h1 className="mb-4 text-2xl font-bold">模块不存在</h1>
+            <p className="mb-6 text-[var(--muted-foreground)]">请检查链接或返回首页</p>
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] transition hover:opacity-90"
+            >
+              ← 返回首页
+            </Link>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
+      <TopicHeader topicId={topicId} />
+      <ChatFloatButton />
+      <main>
+        <div className="mx-auto max-w-6xl px-4 pt-20 sm:px-6 md:px-6">
+          <TopicBreadcrumb topicId={topicId} />
+        </div>
+        <TopicHero topicId={topicId} />
+        <TopicCurriculum topicId={topicId} />
+        <TopicComingSoon topicId={topicId} />
+        <TopicFooter topicId={topicId} />
+      </main>
+    </div>
+  );
+}
--- a/app/topic/components/TopicBreadcrumb.tsx
+++ b/app/topic/components/TopicBreadcrumb.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { getTopicConfig } from "../config";
+
+type TopicBreadcrumbProps = {
+  topicId: string;
+};
+
+export function TopicBreadcrumb({ topicId }: TopicBreadcrumbProps) {
+  const config = getTopicConfig(topicId);
+  if (!config) return null;
+
+  return (
+    <nav
+      className="mb-6 flex flex-wrap items-center gap-2 text-sm text-[var(--muted-foreground)]"
+      aria-label="面包屑"
+    >
+      <Link href="/" className="transition hover:text-[var(--foreground)]">
+        首页
+      </Link>
+      <span>/</span>
+      <Link href="/#topics" className="transition hover:text-[var(--foreground)]">
+        模块
+      </Link>
+      <span>/</span>
+      <span className="text-[var(--foreground)] font-medium">{config.title}</span>
+    </nav>
+  );
+}
--- a/app/topic/components/TopicComingSoon.tsx
+++ b/app/topic/components/TopicComingSoon.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+import { getTopicConfig } from "../config";
+
+type TopicComingSoonProps = {
+  topicId: string;
+};
+
+export function TopicComingSoon({ topicId }: TopicComingSoonProps) {
+  const config = getTopicConfig(topicId);
+  if (!config?.externalUrl) return null;
+
+  return (
+    <section className="border-t border-[var(--border)] py-16 md:py-24">
+      <div className="mx-auto max-w-2xl px-4 text-center sm:px-6">
+        <div className="mb-6 text-6xl">{config.icon}</div>
+        <h2 className="mb-4 text-xl font-bold sm:text-2xl">即将上线</h2>
+        <p className="mb-8 text-[var(--muted-foreground)]">{config.desc}</p>
+        <Link
+          href={config.externalUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90"
+        >
+          前往数字游民指南了解更多 →
+        </Link>
+      </div>
+    </section>
+  );
+}
--- a/app/topic/components/TopicCurriculum.tsx
+++ b/app/topic/components/TopicCurriculum.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { getTopicCurriculum } from "../config";
+import { canWatchLesson } from "@/app/cloudphone/lib/payment";
+import { isBookmarked, toggleBookmark, getBookmarks, getCompletedLessons } from "@/app/cloudphone/lib/learning";
+
+type TopicCurriculumProps = {
+  topicId: string;
+};
+
+export function TopicCurriculum({ topicId }: TopicCurriculumProps) {
+  const [expanded, setExpanded] = useState<Record<number, boolean>>({});
+  const [bookmarks, setBookmarks] = useState<Set<string>>(new Set());
+  const [completed, setCompleted] = useState<Set<string>>(new Set());
+
+  const curriculum = getTopicCurriculum(topicId);
+
+  useEffect(() => {
+    setBookmarks(getBookmarks());
+    setCompleted(getCompletedLessons());
+    const onB = () => setBookmarks(getBookmarks());
+    const onP = () => setCompleted(getCompletedLessons());
+    window.addEventListener("learning:bookmarks", onB);
+    window.addEventListener("learning:progress", onP);
+    return () => {
+      window.removeEventListener("learning:bookmarks", onB);
+      window.removeEventListener("learning:progress", onP);
+    };
+  }, []);
+
+  useEffect(() => {
+    const curr = getTopicCurriculum(topicId);
+    if (curr?.modules?.length) {
+      setExpanded((prev) => {
+        const next = { ...prev };
+        curr.modules.forEach((_, i) => {
+          if (next[i] === undefined) next[i] = i === 0;
+        });
+        return next;
+      });
+    }
+  }, [topicId]);
+
+  const toggle = (i: number) => {
+    setExpanded((prev) => ({ ...prev, [i]: !prev[i] }));
+  };
+
+  if (!curriculum?.hasContent || !curriculum.modules.length) return null;
+
+  const modules = curriculum.modules;
+
+  return (
+    <section className="border-t border-[var(--border)] py-12 md:py-16 lg:py-20">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">实战课程</h2>
+        <p className="mb-6 text-center text-[var(--muted-foreground)] sm:mb-8 md:mb-10">
+          从入门到进阶，完整学习路径
+        </p>
+        <div className="space-y-2 md:space-y-3">
+          {modules.map((module, i) => {
+            const isOpen = expanded[i] ?? true;
+            return (
+              <div
+                key={module.title}
+                className="animate__animated animate__fadeInUp overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] shadow-sm transition-all duration-200 hover:border-[var(--accent)]/30 hover:shadow-md md:rounded-2xl"
+                style={{ animationDelay: `${i * 0.06}s`, animationFillMode: "both" }}
+              >
+                <button
+                  type="button"
+                  onClick={() => toggle(i)}
+                  className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)]/50 sm:px-5 sm:py-4"
+                >
+                  <span className="flex items-center gap-2 text-base font-semibold sm:text-lg">
+                    <span
+                      className={`inline-block transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`}
+                    >
+                      ▶
+                    </span>
+                    <span>{module.emoji}</span>
+                    {module.title}
+                  </span>
+                  <span className="text-sm text-[var(--muted-foreground)]">{module.lessons.length} 节</span>
+                </button>
+                {isOpen && (
+                  <ul className="border-t border-[var(--border)]">
+                    {module.lessons.map((lesson, li) => {
+                      const origMod = module.originalModuleIndex;
+                      const free = origMod === 0 && li < 2;
+                      const unlocked = canWatchLesson(origMod, li);
+                      const key = `${origMod}-${li}`;
+                      const bookmarked = isBookmarked(origMod, li);
+                      const isCompleted = completed.has(key);
+                      return (
+                        <li key={key}>
+                          <Link
+                            href={`/cloudphone/course/${origMod}/${li}`}
+                            className="flex flex-col gap-1 px-4 py-3 transition hover:bg-[var(--muted)]/50 sm:flex-row sm:items-center sm:justify-between sm:px-5 sm:py-3"
+                          >
+                            <span className="flex items-center gap-2 truncate sm:gap-3">
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  toggleBookmark(origMod, li);
+                                }}
+                                className="shrink-0 text-xs"
+                                aria-label={bookmarked ? "取消收藏" : "收藏"}
+                              >
+                                {bookmarked ? "⭐" : "☆"}
+                              </button>
+                              <span
+                                className={
+                                  unlocked ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]"
+                                }
+                              >
+                                {lesson.name}
+                              </span>
+                              {free && (
+                                <span className="shrink-0 rounded bg-[var(--accent)]/20 px-1.5 py-0.5 text-xs text-[var(--accent)]">
+                                  试看
+                                </span>
+                              )}
+                              {isCompleted && (
+                                <span className="shrink-0 rounded bg-green-500/20 px-1.5 py-0.5 text-xs text-green-600 dark:text-green-400">
+                                  ✓
+                                </span>
+                              )}
+                              {!unlocked && (
+                                <span className="shrink-0 text-xs text-[var(--muted-foreground)]">🔒</span>
+                              )}
+                            </span>
+                            <span className="flex shrink-0 items-center gap-2 text-xs text-[var(--muted-foreground)] sm:text-sm">
+                              {lesson.duration}
+                              <span className="text-[var(--accent)]">→</span>
+                            </span>
+                          </Link>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/app/topic/components/TopicFooter.tsx
+++ b/app/topic/components/TopicFooter.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { getTopicConfig } from "../config";
+
+type TopicFooterProps = {
+  topicId: string;
+};
+
+export function TopicFooter({ topicId }: TopicFooterProps) {
+  const config = getTopicConfig(topicId);
+
+  return (
+    <footer className="border-t border-[var(--border)] py-6 sm:py-8">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="mb-4 flex flex-wrap items-center justify-center gap-4">
+          <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
+            返回首页
+          </Link>
+          <Link
+            href="/#topics"
+            className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          >
+            模块列表
+          </Link>
+          <a
+            href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            即时问答
+          </a>
+        </div>
+        <div className="text-center text-sm text-[var(--muted-foreground)]">
+          {config ? `${config.icon} ${config.title} · 异度星球` : "异度星球 · 数字游民社群"}
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/app/topic/components/TopicHeader.tsx
+++ b/app/topic/components/TopicHeader.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { ThemeToggle } from "@/app/components/ThemeToggle";
+import { getTopicConfig } from "../config";
+import { isPaid } from "@/app/cloudphone/lib/payment";
+
+type TopicHeaderProps = {
+  topicId: string;
+};
+
+export function TopicHeader({ topicId }: TopicHeaderProps) {
+  const [paid, setPaid] = useState(false);
+  const config = getTopicConfig(topicId);
+
+  useEffect(() => {
+    setPaid(isPaid());
+    const onPayUpdate = () => setPaid(isPaid());
+    window.addEventListener("pay:updated", onPayUpdate);
+    return () => window.removeEventListener("pay:updated", onPayUpdate);
+  }, []);
+
+  const ctaHref = config?.externalUrl
+    ? config.externalUrl
+    : paid
+      ? "/cloudphone/course/0/0"
+      : config?.payUrl ?? "/";
+
+  return (
+    <header
+      className="fixed left-0 right-0 top-0 z-50 border-b border-[var(--border)] bg-[var(--background)]/95 backdrop-blur-xl"
+      style={{ animationFillMode: "both" }}
+    >
+      <div className="mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-14 sm:gap-4 sm:px-4 md:h-16 md:px-6">
+        <Link
+          href="/"
+          className="min-w-0 truncate text-sm font-medium text-[var(--foreground)] sm:text-base md:text-lg"
+        >
+          🌍 异度星球
+        </Link>
+        <nav className="flex shrink-0 items-center gap-1.5 sm:gap-3">
+          <ThemeToggle />
+          <Link
+            href="/"
+            className="text-sm text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]"
+          >
+            首页
+          </Link>
+          <a
+            href="https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hidden items-center gap-1.5 rounded-full border border-[var(--accent)]/40 bg-[var(--accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/20 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            即时问答
+          </a>
+          <Link
+            href={ctaHref}
+            target={config?.externalUrl ? "_blank" : undefined}
+            rel={config?.externalUrl ? "noopener noreferrer" : undefined}
+            className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-4 sm:py-2 sm:text-sm"
+          >
+            {config?.externalUrl ? "前往了解 →" : paid ? "进入课程 →" : "立即报名 →"}
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}
--- a/app/topic/components/TopicHero.tsx
+++ b/app/topic/components/TopicHero.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { getTopicConfig, getTopicCurriculum } from "../config";
+import { getLastWatched, getProgress } from "@/app/cloudphone/lib/learning";
+import { ParticleBackground } from "@/app/cloudphone/components/ParticleBackground";
+
+type TopicHeroProps = {
+  topicId: string;
+};
+
+export function TopicHero({ topicId }: TopicHeroProps) {
+  const config = getTopicConfig(topicId);
+  const curriculum = getTopicCurriculum(topicId);
+  const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
+  const [progress, setProgress] = useState({ completed: 0, percent: 0 });
+
+  const totalLessons = curriculum?.modules.reduce((s, m) => s + m.lessons.length, 0) ?? 0;
+
+  useEffect(() => {
+    if (curriculum?.hasContent && totalLessons > 0) {
+      setLast(getLastWatched());
+      setProgress(getProgress(totalLessons));
+      const onProgress = () => {
+        setLast(getLastWatched());
+        setProgress(getProgress(totalLessons));
+      };
+      window.addEventListener("learning:progress", onProgress);
+      return () => window.removeEventListener("learning:progress", onProgress);
+    }
+  }, [curriculum?.hasContent, totalLessons]);
+
+  if (!config) return null;
+
+  const ctaHref = config.externalUrl
+    ? config.externalUrl
+    : last
+      ? `/cloudphone/course/${last.moduleIndex}/${last.lessonIndex}`
+      : config.payUrl;
+
+  return (
+    <section className="relative overflow-hidden pt-24 pb-16 sm:pt-28 sm:pb-20 md:pt-32 md:pb-24">
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--gradient-accent),transparent)] animate-gradient" />
+      <ParticleBackground />
+      <div className="relative mx-auto max-w-4xl px-4 text-center sm:px-6">
+        <h1
+          className="animate__animated animate__fadeInDown mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl"
+          style={{ animationDelay: "0.1s", animationFillMode: "both" }}
+        >
+          {config.icon} {config.title}
+        </h1>
+        <p
+          className="animate__animated animate__fadeInDown mb-6 text-lg text-[var(--muted-foreground)] sm:mb-8 sm:text-xl md:text-2xl"
+          style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+        >
+          {config.subtitle}
+        </p>
+        {config.desc && (
+          <p
+            className="animate__animated animate__fadeInDown mx-auto mb-10 max-w-2xl text-sm text-[var(--muted-foreground)] sm:mb-12 sm:text-base"
+            style={{ animationDelay: "0.25s", animationFillMode: "both" }}
+          >
+            {config.desc}
+          </p>
+        )}
+        <div
+          className="animate__animated animate__fadeInDown mb-10 flex flex-wrap justify-center gap-6 sm:mb-12 sm:gap-8"
+          style={{ animationDelay: "0.4s", animationFillMode: "both" }}
+        >
+          {config.stats.map((s) => (
+            <div key={s.label} className="text-center transition-transform duration-300 hover:scale-105">
+              <div className="text-2xl font-bold text-[var(--accent)] sm:text-3xl md:text-4xl">
+                {s.value}
+              </div>
+              <div className="mt-1 text-xs text-[var(--muted-foreground)] sm:text-sm">{s.label}</div>
+            </div>
+          ))}
+        </div>
+        {curriculum?.hasContent && (
+          <div
+            className="animate__animated animate__fadeInDown flex flex-wrap justify-center gap-3 sm:gap-4"
+            style={{ animationDelay: "0.6s", animationFillMode: "both" }}
+          >
+            <Link
+              href={ctaHref}
+              target={config.externalUrl ? "_blank" : undefined}
+              rel={config.externalUrl ? "noopener noreferrer" : undefined}
+              className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
+            >
+              {config.externalUrl ? "前往了解 →" : last ? "继续学习 →" : "立即报名 →"}
+            </Link>
+          </div>
+        )}
+        {curriculum?.hasContent && progress.completed > 0 && (
+          <div className="mt-6 w-full max-w-xs" style={{ animationDelay: "0.7s", animationFillMode: "both" }}>
+            <div className="mb-1 flex justify-between text-xs text-[var(--muted-foreground)]">
+              <span>学习进度</span>
+              <span>
+                {progress.completed}/{totalLessons} 节
+              </span>
+            </div>
+            <div className="h-2 overflow-hidden rounded-full bg-[var(--muted)]">
+              <div
+                className="h-full rounded-full bg-[var(--accent)] transition-all"
+                style={{ width: `${progress.percent}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
--- a/app/topic/config.ts
+++ b/app/topic/config.ts
@@ -0,0 +1,92 @@
+/**
+ * 模块配置 - 模块 > 视频教程 > [模块名]
+ * 参考 cloudphone/nomadlms 结构
+ */
+
+import { CURRICULUM_CONFIG } from "@/app/cloudphone/config/course";
+
+export type TopicConfig = {
+  id: string;
+  icon: string;
+  title: string;
+  subtitle: string;
+  desc: string;
+  stats: { value: string; label: string }[];
+  /** 使用的 curriculum 模块索引，空则用全部 */
+  moduleIndices?: number[];
+  /** 外部链接，有则显示「前往了解」而非课程列表 */
+  externalUrl?: string;
+  payUrl: string;
+};
+
+export const TOPIC_CONFIGS: Record<string, TopicConfig> = {
+  cloudphone: {
+    id: "cloudphone",
+    icon: "☁️",
+    title: "云手机模块",
+    subtitle: "低成本自建云手机，TikTok/YouTube 运营搭建指南",
+    desc: "用开源硬件打造云手机，Redroid、AOSP、ffmpeg、SRS，从零搭建无人直播工作室",
+    stats: [
+      { value: "13", label: "节实战课程" },
+      { value: "170+", label: "分钟视频" },
+      { value: "5", label: "大模块" },
+    ],
+    payUrl: "/cloudphone/pay",
+  },
+  livestream: {
+    id: "livestream",
+    icon: "📺",
+    title: "无人直播模块",
+    subtitle: "TikTok/YouTube 无人直播，24 小时自动化",
+    desc: "ffmpeg 拉流转推、SRS 直播服务器、油猴脚本自动化，实现 24 小时无人值守推流",
+    stats: [
+      { value: "7", label: "节核心课程" },
+      { value: "100+", label: "分钟视频" },
+      { value: "2", label: "大模块" },
+    ],
+    moduleIndices: [1, 2],
+    payUrl: "/cloudphone/pay",
+  },
+  indie: {
+    id: "indie",
+    icon: "🛠️",
+    title: "独立开发模块",
+    subtitle: "从想法到产品，独立开发者全流程指南",
+    desc: "即将上线，敬请期待。可先前往数字游民指南了解更多。",
+    stats: [
+      { value: "—", label: "课程筹备中" },
+      { value: "—", label: "敬请期待" },
+    ],
+    externalUrl: "https://digital.hackrobot.cn/zh",
+    payUrl: "/",
+  },
+  aiagent: {
+    id: "aiagent",
+    icon: "🤖",
+    title: "AI Agent 模块",
+    subtitle: "AIGC 与智能体，Vibe Coding 跨界创造",
+    desc: "即将上线，敬请期待。可先前往数字游民指南了解更多。",
+    stats: [
+      { value: "—", label: "课程筹备中" },
+      { value: "—", label: "敬请期待" },
+    ],
+    externalUrl: "https://digital.hackrobot.cn/zh",
+    payUrl: "/",
+  },
+};
+
+export function getTopicConfig(topicId: string): TopicConfig | null {
+  return TOPIC_CONFIGS[topicId] ?? null;
+}
+
+export function getTopicCurriculum(topicId: string) {
+  const config = getTopicConfig(topicId);
+  if (!config) return null;
+  if (config.externalUrl) return { modules: [], hasContent: false };
+  const indices = config.moduleIndices ?? CURRICULUM_CONFIG.modules.map((_, i) => i);
+  const modules = indices
+    .map((i) => ({ module: CURRICULUM_CONFIG.modules[i], originalIndex: i }))
+    .filter((x) => x.module)
+    .map(({ module: m, originalIndex }) => ({ ...m, originalModuleIndex: originalIndex }));
+  return { modules, hasContent: modules.length > 0 };
+}
--- a/app/vip/components/DashboardPage.tsx
+++ b/app/vip/components/DashboardPage.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { WelcomeBlock } from "./dashboard/WelcomeBlock";
+import { UnlockedStats } from "./dashboard/UnlockedStats";
+import { RecentUpdates } from "./dashboard/RecentUpdates";
+import { ContinueLearning } from "./dashboard/ContinueLearning";
+import { TopicEbookShowcase } from "./landing/TopicEbookShowcase";
+import { CommunityHighlights } from "./dashboard/CommunityHighlights";
+import { WeeklyActions } from "./dashboard/WeeklyActions";
+
+type DashboardPageProps = {
+  userName: string | null;
+};
+
+export function DashboardPage({ userName }: DashboardPageProps) {
+  return (
+    <>
+      <WelcomeBlock userName={userName} />
+      <UnlockedStats />
+      <ContinueLearning />
+      <RecentUpdates />
+      <TopicEbookShowcase />
+      <CommunityHighlights />
+      <WeeklyActions />
+    </>
+  );
+}
--- a/app/vip/components/LandingPage.tsx
+++ b/app/vip/components/LandingPage.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { LandingHero } from "./landing/LandingHero";
+import { AssetStats } from "./landing/AssetStats";
+import { TopicEbookShowcase } from "./landing/TopicEbookShowcase";
+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";
+
+type LandingPageProps = {
+  onJoin: () => void;
+  onLogin: () => void;
+  onVerify: (userId: string) => Promise<boolean>;
+  onVerifySuccess: () => void;
+};
+
+export function LandingPage({
+  onJoin,
+  onLogin,
+  onVerify,
+  onVerifySuccess,
+}: LandingPageProps) {
+  return (
+    <>
+      <LandingHero />
+      <AssetStats />
+      <TopicEbookShowcase />
+      <CompareSection />
+      <CommunityPreview />
+      <FAQSection />
+      <LandingCTA onJoin={onJoin} onLogin={onLogin} />
+      <LoginBlock onVerify={onVerify} onSuccess={onVerifySuccess} />
+    </>
+  );
+}
--- a/app/vip/components/VipHeader.tsx
+++ b/app/vip/components/VipHeader.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import Link from "next/link";
+import { ThemeToggle } from "@/app/components/ThemeToggle";
+import styles from "./vip.module.css";
+
+type VipHeaderProps = {
+  isLoggedIn: boolean;
+  userName?: string | null;
+};
+
+export function VipHeader({ isLoggedIn, userName }: VipHeaderProps) {
+  return (
+    <header className={styles.header}>
+      <Link
+        href="https://digital.hackrobot.cn/zh"
+        className={styles.logo}
+        target="_blank"
+        rel="noopener"
+      >
+        🌍 异度星球
+      </Link>
+      <nav className={styles.nav}>
+        <ThemeToggle />
+        {isLoggedIn ? (
+          <span className={styles.userBadge}>{userName || "会员"}</span>
+        ) : (
+          <Link href="/#login" className={styles.loginLink}>
+            登录
+          </Link>
+        )}
+      </nav>
+    </header>
+  );
+}
--- a/app/vip/components/VipLayout.tsx
+++ b/app/vip/components/VipLayout.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { VipHeader } from "./VipHeader";
+import styles from "./vip.module.css";
+
+type VipLayoutProps = {
+  children: ReactNode;
+  isLoggedIn: boolean;
+  userName?: string | null;
+};
+
+export function VipLayout({ children, isLoggedIn, userName }: VipLayoutProps) {
+  return (
+    <div className={styles.root}>
+      <VipHeader isLoggedIn={isLoggedIn} userName={userName} />
+      <main className={styles.main}>{children}</main>
+    </div>
+  );
+}
--- a/app/vip/components/dashboard/CommunityHighlights.tsx
+++ b/app/vip/components/dashboard/CommunityHighlights.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import Link from "next/link";
+import { COMMUNITY_HIGHLIGHTS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function CommunityHighlights() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>社区精选</h2>
+      <div
+        className="animate__animated animate__fadeInUp"
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {COMMUNITY_HIGHLIGHTS.map((item) => (
+          <Link
+            key={item.id}
+            href={item.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.card}
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              textDecoration: "none",
+              color: "inherit",
+            }}
+          >
+            <span style={{ color: "var(--foreground)" }}>{item.text}</span>
+            <span style={{ marginLeft: "0.5rem", color: "var(--accent)", fontSize: "0.9rem" }}>
+              →
+            </span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/dashboard/ContinueLearning.tsx
+++ b/app/vip/components/dashboard/ContinueLearning.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import Link from "next/link";
+import { getLastWatched, getProgress } from "@/app/cloudphone/lib/learning";
+import { CURRICULUM_CONFIG } from "@/app/cloudphone/config/course";
+import { useState, useEffect } from "react";
+import styles from "../vip.module.css";
+
+const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
+
+export function ContinueLearning() {
+  const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
+  const [progress, setProgress] = useState({ completed: 0, percent: 0 });
+
+  useEffect(() => {
+    setLast(getLastWatched());
+    setProgress(getProgress(TOTAL_LESSONS));
+    const onProgress = () => {
+      setLast(getLastWatched());
+      setProgress(getProgress(TOTAL_LESSONS));
+    };
+    window.addEventListener("learning:progress", onProgress);
+    return () => window.removeEventListener("learning:progress", onProgress);
+  }, []);
+
+  if (!last || progress.completed >= TOTAL_LESSONS) {
+    return (
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>继续学习</h2>
+        <Link
+          href="/cloudphone/course/0/0"
+          className={`${styles.card} ${styles.btnPrimary}`}
+          style={{ display: "block", textAlign: "center" }}
+        >
+          {progress.completed >= TOTAL_LESSONS ? "复习课程" : "开始学习"} →
+        </Link>
+      </section>
+    );
+  }
+
+  const module = CURRICULUM_CONFIG.modules[last.moduleIndex];
+  const lesson = module?.lessons[last.lessonIndex];
+  const title = lesson?.name || `第 ${last.moduleIndex + 1} 章`;
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>继续学习</h2>
+      <Link
+        href={`/cloudphone/course/${last.moduleIndex}/${last.lessonIndex}`}
+        className={styles.card}
+        style={{
+          display: "block",
+          textDecoration: "none",
+          color: "inherit",
+        }}
+      >
+        <div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.5rem" }}>
+          {title}
+        </div>
+        <div className="animate__animated animate__fadeInUp" style={{ animationFillMode: "both" }}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              fontSize: "0.8rem",
+              color: "var(--muted-foreground)",
+              marginBottom: "0.25rem",
+            }}
+          >
+            <span>进度</span>
+            <span>
+              {progress.completed}/{TOTAL_LESSONS} 节
+            </span>
+          </div>
+          <div
+            style={{
+              height: "6px",
+              borderRadius: "3px",
+              background: "var(--muted)",
+              overflow: "hidden",
+            }}
+          >
+            <div
+              style={{
+                height: "100%",
+                width: `${progress.percent}%`,
+                background: "var(--accent)",
+                borderRadius: "3px",
+                transition: "width 0.3s",
+              }}
+            />
+          </div>
+        </div>
+        <div style={{ marginTop: "0.75rem", color: "var(--accent)", fontSize: "0.9rem" }}>
+          继续学习 →
+        </div>
+      </Link>
+    </section>
+  );
+}
--- a/app/vip/components/dashboard/RecentUpdates.tsx
+++ b/app/vip/components/dashboard/RecentUpdates.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { RECENT_UPDATES } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function RecentUpdates() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>最近更新</h2>
+      <div
+        className="animate__animated animate__fadeInUp"
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {RECENT_UPDATES.map((item) => {
+          const content = (
+            <div
+              className={styles.card}
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "0.5rem",
+              }}
+            >
+              <span style={{ color: "var(--foreground)" }}>{item.title}</span>
+              <span style={{ fontSize: "0.8rem", color: "var(--muted-foreground)" }}>
+                {item.date}
+              </span>
+            </div>
+          );
+          if (item.href) {
+            return (
+              <Link key={item.id} href={item.href} style={{ textDecoration: "none" }}>
+                {content}
+              </Link>
+            );
+          }
+          return <div key={item.id}>{content}</div>;
+        })}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/dashboard/TopicCards.tsx
+++ b/app/vip/components/dashboard/TopicCards.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { TOPICS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function TopicCards() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>模块入口</h2>
+      <div
+        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {TOPICS.map((t) => {
+          const content = (
+            <>
+              <span className={styles.topicIcon}>{t.icon}</span>
+              <span className={styles.topicTitle}>{t.title}</span>
+              <span className={styles.topicDesc}>{t.desc}</span>
+            </>
+          );
+          if (t.href) {
+            return (
+              <Link
+                key={t.id}
+                href={t.href}
+                className={styles.topicCard}
+                target={t.href.startsWith("http") ? "_blank" : undefined}
+                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
+              >
+                {content}
+              </Link>
+            );
+          }
+          return (
+            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
+              {content}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/dashboard/UnlockedStats.tsx
+++ b/app/vip/components/dashboard/UnlockedStats.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { ASSET_STATS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+const STAT_ITEMS = [
+  { key: "topics", label: "已解锁模块" },
+  { key: "ebooks", label: "电子书" },
+  { key: "videos", label: "视频" },
+  { key: "templates", label: "模板" },
+] as const;
+
+export function UnlockedStats() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>已解锁</h2>
+      <div
+        className={`${styles.statsGrid4} animate__animated animate__fadeInUp`}
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {STAT_ITEMS.map(({ key, label }) => {
+          const value = String(ASSET_STATS[key as keyof typeof ASSET_STATS]);
+          return (
+            <div key={key} className={styles.card} style={{ textAlign: "center" }}>
+              <div className={styles.bigNumber}>{value}</div>
+              <div className={styles.bigNumberLabel}>{label}</div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/dashboard/WeeklyActions.tsx
+++ b/app/vip/components/dashboard/WeeklyActions.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { WEEKLY_ACTIONS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function WeeklyActions() {
+  return (
+    <section className={styles.section} style={{ paddingBottom: "2rem" }}>
+      <h2 className={styles.sectionTitle}>本周推荐</h2>
+      <div
+        className="animate__animated animate__fadeInUp"
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {WEEKLY_ACTIONS.map((item) => (
+          <Link
+            key={item.id}
+            href={item.href}
+            target={item.href.startsWith("http") ? "_blank" : undefined}
+            rel={item.href.startsWith("http") ? "noopener noreferrer" : undefined}
+            className={styles.card}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              marginBottom: "0.5rem",
+              textDecoration: "none",
+              color: "inherit",
+            }}
+          >
+            <span
+              style={{
+                width: "24px",
+                height: "24px",
+                borderRadius: "50%",
+                background: "var(--accent)",
+                color: "var(--accent-foreground)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "0.75rem",
+                fontWeight: 600,
+              }}
+            >
+              {item.priority}
+            </span>
+            <span style={{ color: "var(--foreground)" }}>{item.text}</span>
+            <span style={{ marginLeft: "auto", color: "var(--accent)", fontSize: "0.9rem" }}>
+              →
+            </span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/dashboard/WelcomeBlock.tsx
+++ b/app/vip/components/dashboard/WelcomeBlock.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import Link from "next/link";
+import styles from "../vip.module.css";
+
+type WelcomeBlockProps = {
+  userName: string | null;
+};
+
+function getStorage(key: string): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(key);
+}
+
+export function WelcomeBlock({ userName }: WelcomeBlockProps) {
+  const displayName = userName || getStorage("userName") || "会员";
+  return (
+    <section className={styles.section} style={{ paddingTop: "1.5rem" }}>
+      <h1
+        className="animate__animated animate__fadeInDown"
+        style={{
+          fontSize: "clamp(1.5rem, 4vw, 2rem)",
+          fontWeight: 600,
+          margin: 0,
+          animationDelay: "0.1s",
+          animationFillMode: "both",
+        }}
+      >
+        欢迎回来，{displayName}
+      </h1>
+      <p
+        className="animate__animated animate__fadeInDown"
+        style={{
+          fontSize: "0.95rem",
+          color: "var(--muted-foreground)",
+          margin: "0.25rem 0 0",
+          animationDelay: "0.15s",
+          animationFillMode: "both",
+        }}
+      >
+        以下是您的会员资产与推荐动作
+      </p>
+      <Link
+        href="https://qun.hackrobot.cn"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.card}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          marginTop: "1rem",
+          textDecoration: "none",
+          color: "var(--accent)",
+          fontWeight: 500,
+        }}
+      >
+        🌐 进入星球 qun.hackrobot.cn →
+      </Link>
+    </section>
+  );
+}
--- a/app/vip/components/landing/AssetStats.tsx
+++ b/app/vip/components/landing/AssetStats.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { ASSET_STATS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+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}>
+      <div
+        className={`${styles.statsGrid} animate__animated animate__fadeInUp`}
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {STAT_ITEMS.map(({ key, label }, i) => {
+          const value =
+            key === "updateFrequency"
+              ? ASSET_STATS[key]
+              : String(ASSET_STATS[key as keyof typeof ASSET_STATS]);
+          return (
+            <div
+              key={key}
+              className={styles.card}
+              style={{
+                textAlign: "center",
+                animationDelay: `${0.25 + i * 0.05}s`,
+                animationFillMode: "both",
+              }}
+            >
+              <div className={styles.bigNumber}>{value}</div>
+              <div className={styles.bigNumberLabel}>{label}</div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/landing/CommunityPreview.tsx
+++ b/app/vip/components/landing/CommunityPreview.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { COMMUNITY_PREVIEW } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function CommunityPreview() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>社区价值</h2>
+      <div
+        className="animate__animated animate__fadeInUp"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+          animationDelay: "0.2s",
+          animationFillMode: "both",
+        }}
+      >
+        {COMMUNITY_PREVIEW.map((item, i) => (
+          <div
+            key={i}
+            className={styles.card}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+            }}
+          >
+            <span style={{ fontSize: "1.5rem" }}>{item.icon}</span>
+            <span style={{ color: "var(--foreground)" }}>{item.text}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/landing/CompareSection.tsx
+++ b/app/vip/components/landing/CompareSection.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { COMPARE_ITEMS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function CompareSection() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>单品 vs 会员</h2>
+      <p className={styles.sectionDesc}>一次付费，全部解锁</p>
+      <div
+        className="animate__animated animate__fadeInUp"
+        style={{
+          overflow: "hidden",
+          borderRadius: "12px",
+          border: "1px solid var(--border)",
+          animationDelay: "0.25s",
+          animationFillMode: "both",
+        }}
+      >
+        <table
+          style={{
+            width: "100%",
+            borderCollapse: "collapse",
+            fontSize: "0.9rem",
+          }}
+        >
+          <thead>
+            <tr style={{ background: "var(--muted)" }}>
+              <th
+                style={{
+                  padding: "0.75rem 1rem",
+                  textAlign: "left",
+                  fontWeight: 600,
+                  color: "var(--foreground)",
+                }}
+              >
+                权益
+              </th>
+              <th
+                style={{
+                  padding: "0.75rem 1rem",
+                  textAlign: "center",
+                  fontWeight: 600,
+                  color: "var(--muted-foreground)",
+                }}
+              >
+                单品
+              </th>
+              <th
+                style={{
+                  padding: "0.75rem 1rem",
+                  textAlign: "center",
+                  fontWeight: 600,
+                  color: "var(--accent)",
+                }}
+              >
+                会员
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {COMPARE_ITEMS.map((row, i) => (
+              <tr
+                key={i}
+                style={{
+                  borderTop: "1px solid var(--border)",
+                  background: i % 2 === 1 ? "var(--muted)" : "transparent",
+                }}
+              >
+                <td style={{ padding: "0.75rem 1rem", color: "var(--foreground)" }}>
+                  {row.feature}
+                </td>
+                <td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--muted-foreground)" }}>
+                  {row.single}
+                </td>
+                <td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--accent)" }}>
+                  {row.member}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/landing/FAQSection.tsx
+++ b/app/vip/components/landing/FAQSection.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+import { FAQ_ITEMS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function FAQSection() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>常见问题</h2>
+      <div
+        className="animate__animated animate__fadeInUp"
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {FAQ_ITEMS.map((item, i) => (
+          <div
+            key={i}
+            className={styles.card}
+            style={{
+              marginBottom: "0.75rem",
+              cursor: "pointer",
+            }}
+            onClick={() => setOpenIndex(openIndex === i ? null : i)}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                fontWeight: 500,
+                color: "var(--foreground)",
+              }}
+            >
+              {item.q}
+              <span style={{ fontSize: "1.2rem", transition: "transform 0.2s", transform: openIndex === i ? "rotate(180deg)" : "none" }}>
+                ▼
+              </span>
+            </div>
+            {openIndex === i && (
+              <p
+                style={{
+                  marginTop: "0.75rem",
+                  fontSize: "0.9rem",
+                  color: "var(--muted-foreground)",
+                  lineHeight: 1.5,
+                }}
+              >
+                {item.a}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/landing/LandingCTA.tsx
+++ b/app/vip/components/landing/LandingCTA.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { formatRestoreDateShort } from "@/config/promo.config";
+import styles from "../vip.module.css";
+
+type LandingCTAProps = {
+  onJoin: () => void;
+  onLogin: () => void;
+};
+
+export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
+  return (
+    <section className={styles.section} style={{ paddingBottom: "2rem" }}>
+      <div
+        className={`${styles.card} animate__animated animate__zoomIn`}
+        style={{
+          maxWidth: "560px",
+          margin: "0 auto",
+          padding: "1.5rem",
+          textAlign: "center",
+          animationDelay: "0.2s",
+          animationFillMode: "both",
+        }}
+      >
+        <h2 style={{ fontSize: "1.35rem", margin: "0 0 0.5rem", color: "var(--foreground)" }}>
+          限时特惠 · {formatRestoreDateShort()}恢复原价
+        </h2>
+        <p style={{ fontSize: "0.9rem", color: "var(--muted-foreground)", margin: "0 0 1rem" }}>
+          阶梯定价 · 数字交付 · 不支持退款
+        </p>
+        <p style={{ fontSize: "0.8rem", color: "var(--muted-foreground)", marginBottom: "1.5rem" }}>
+          🚫 不适合躺赚、现金流紧张
+        </p>
+        <div
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "1rem",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <button
+            type="button"
+            onClick={onJoin}
+            className={`${styles.btnPrimary} ${styles.btnLarge}`}
+          >
+            🔒 立即加入
+          </button>
+          <button
+            type="button"
+            onClick={onLogin}
+            className={styles.btnSecondary}
+          >
+            已有账号登录
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/landing/LandingHero.tsx
+++ b/app/vip/components/landing/LandingHero.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import styles from "../vip.module.css";
+
+export function LandingHero() {
+  return (
+    <section className={styles.section} style={{ paddingTop: "2rem", textAlign: "center" }}>
+      <p
+        className="animate__animated animate__fadeInDown"
+        style={{
+          display: "inline-block",
+          fontSize: "0.875rem",
+          color: "var(--muted-foreground)",
+          background: "var(--card)",
+          padding: "0.35rem 0.85rem",
+          borderRadius: "9999px",
+          border: "1px solid var(--border)",
+          marginBottom: "1rem",
+          animationDelay: "0.1s",
+          animationFillMode: "both",
+        }}
+      >
+        异度星球会员中心
+      </p>
+      <h1
+        className="animate__animated animate__fadeInDown"
+        style={{
+          fontSize: "clamp(2rem, 6vw, 3rem)",
+          fontWeight: 700,
+          margin: "0 0 0.5rem",
+          letterSpacing: "-0.02em",
+          lineHeight: 1.2,
+          animationDelay: "0.2s",
+          animationFillMode: "both",
+        }}
+      >
+        全模块解锁 · 持续更新 · 抱团出海
+      </h1>
+      <p
+        className="animate__animated animate__fadeInDown"
+        style={{
+          fontSize: "1.125rem",
+          color: "var(--muted-foreground)",
+          maxWidth: "540px",
+          margin: "0",
+          lineHeight: 1.6,
+          animationDelay: "0.3s",
+          animationFillMode: "both",
+        }}
+      >
+        一次付费，解锁电子书、视频教程、私密社群、即时问答，享受每周更新
+      </p>
+    </section>
+  );
+}
--- a/app/vip/components/landing/LoginBlock.tsx
+++ b/app/vip/components/landing/LoginBlock.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import styles from "../vip.module.css";
+
+type LoginBlockProps = {
+  onVerify: (userId: string) => Promise<boolean>;
+  onSuccess: () => void;
+};
+
+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);
+
+  useEffect(() => {
+    const hash = typeof window !== "undefined" ? window.location.hash : "";
+    if (hash === "#login") {
+      inputRef.current?.focus();
+    }
+  }, []);
+
+  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" }}>
+        <h2 className={styles.sectionTitle}>已有账号登录</h2>
+        <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>
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/landing/TopicEbookShowcase.tsx
+++ b/app/vip/components/landing/TopicEbookShowcase.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+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() {
+  return (
+    <section id="topics" className={styles.section}>
+      {/* 模块展示 */}
+      <h2 className={styles.sectionTitle}>模块</h2>
+      <div
+        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
+        style={{ animationDelay: "0.2s", animationFillMode: "both", marginBottom: "1.5rem" }}
+      >
+        {TOPICS_DISPLAY.map((t) => {
+          const content = (
+            <>
+              <span className={styles.topicIcon}>{t.icon}</span>
+              <span className={styles.topicTitle}>{t.title}</span>
+              <span className={styles.topicDesc}>{t.desc}</span>
+            </>
+          );
+          if (t.href) {
+            return (
+              <Link
+                key={t.id}
+                href={t.href}
+                className={styles.topicCard}
+                target={t.href.startsWith("http") ? "_blank" : undefined}
+                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
+              >
+                {content}
+              </Link>
+            );
+          }
+          return (
+            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
+              {content}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 视频教程展示 - 参考 digital 资源导航，至少 4 个 */}
+      <h2 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>
+        ))}
+      </div>
+
+      {/* 电子书展示 */}
+      <h2 className={styles.sectionTitle}>电子书</h2>
+      <div
+        className="animate__animated animate__fadeInUp"
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+          gap: "1rem",
+          animationDelay: "0.25s",
+          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}》
+            </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/landing/TopicEntries.tsx
+++ b/app/vip/components/landing/TopicEntries.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { TOPICS } from "@/app/data/vip.mock";
+import styles from "../vip.module.css";
+
+export function TopicEntries() {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>核心模块</h2>
+      <div
+        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
+        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
+      >
+        {TOPICS.map((t, i) => {
+          const content = (
+            <>
+              <span className={styles.topicIcon}>{t.icon}</span>
+              <span className={styles.topicTitle}>{t.title}</span>
+              <span className={styles.topicDesc}>{t.desc}</span>
+            </>
+          );
+          if (t.href) {
+            return (
+              <Link
+                key={t.id}
+                href={t.href}
+                className={styles.topicCard}
+                target={t.href.startsWith("http") ? "_blank" : undefined}
+                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
+              >
+                {content}
+              </Link>
+            );
+          }
+          return (
+            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
+              {content}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
--- a/app/vip/components/vip.module.css
+++ b/app/vip/components/vip.module.css
@@ -0,0 +1,264 @@
+/* VIP 会员中心 - 深色主题优先，会员感、控制台感、资产感 */
+
+.root {
+  min-height: 100vh;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+@media (max-width: 640px) {
+  .header {
+    padding: 0.75rem 1rem;
+  }
+}
+
+.logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+.logo:hover {
+  color: var(--accent);
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.loginLink {
+  font-size: 0.9rem;
+  color: var(--muted-foreground);
+  text-decoration: none;
+}
+
+.loginLink:hover {
+  color: var(--accent);
+}
+
+.userBadge {
+  font-size: 0.875rem;
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem 2rem;
+}
+
+@media (max-width: 640px) {
+  .main {
+    padding: 0 1rem 1.5rem;
+  }
+}
+
+/* 区块通用 */
+.section {
+  padding: 1.5rem 0;
+}
+
+.sectionTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--foreground);
+  margin: 0 0 1rem;
+}
+
+.sectionDesc {
+  font-size: 0.9rem;
+  color: var(--muted-foreground);
+  margin: 0 0 1rem;
+  line-height: 1.5;
+}
+
+/* 卡片 */
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1rem 1.25rem;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.card:hover {
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+/* 大数字 */
+.bigNumber {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1.2;
+}
+
+@media (min-width: 640px) {
+  .bigNumber {
+    font-size: 2.5rem;
+  }
+}
+
+.bigNumberLabel {
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+  margin-top: 0.25rem;
+}
+
+/* 按钮 */
+.btnPrimary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.75rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--accent-foreground);
+  background: var(--accent);
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: opacity 0.2s, transform 0.15s;
+}
+
+.btnPrimary:hover {
+  opacity: 0.95;
+  transform: translateY(-1px);
+}
+
+.btnSecondary {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.btnSecondary:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.btnLarge {
+  padding: 1rem 2.5rem;
+  font-size: 1.1rem;
+}
+
+/* 资产统计网格 */
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .statsGrid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.statsGrid4 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .statsGrid4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* 模块网格 */
+.topicGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .topicGrid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.topicCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem 1rem;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.2s, transform 0.2s;
+}
+
+.topicCard:hover {
+  border-color: rgba(245, 158, 11, 0.4);
+  transform: translateY(-2px);
+}
+
+.topicIcon {
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.topicTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.topicDesc {
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+}
+
+/* Loading */
+.loading {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.loadingSpinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}