's'

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

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