's'

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

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

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

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

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

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