's'

2026-03-12 02:23:10 -05:00
parent f653dccd6d
commit 421f979e10
21 changed files with 709 additions and 264 deletions
--- a/app/[locale]/course/[moduleIndex]/[lessonIndex]/page.tsx
+++ b/app/[locale]/course/[moduleIndex]/[lessonIndex]/page.tsx
@@ -1,8 +1,8 @@
 "use client";

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Link } from "@/i18n/navigation";
+import { Link, useTranslation } from "@/i18n/navigation";
 import { VideoPlayer } from "@/app/components/course/VideoPlayer";
 import { LessonMarkdown } from "./LessonMarkdown";
 import { getLesson } from "@/config/lessons";
@@ -14,6 +14,8 @@ import Header from "@/app/components/Header";
 export default function LessonPage() {
  const params = useParams();
  const router = useRouter();
+  const { t } = useTranslation("community");
+  const [toast, setToast] = useState(false);
  const moduleIndex = Number(params.moduleIndex);
  const lessonIndex = Number(params.lessonIndex);

@@ -149,6 +151,14 @@ export default function LessonPage() {
          )}
        </div>
      </main>
+      {toast && (
+        <div
+          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
+          role="alert"
+        >
+          {t("updating")}
+        </div>
+      )}
    </div>
  );
 }
--- a/app/[locale]/day/[id]/page.tsx
+++ b/app/[locale]/day/[id]/page.tsx
@@ -120,7 +120,7 @@ export default async function DayPage({ params }: PageProps) {
          🌍 数字游民指南
        </Link>
        <span className="mx-2">·</span>
-        开源免费 · 社区驱动
+        精选内容 · 持续更新
      </footer>
    </div>
  );
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -5,10 +5,13 @@ import Roadmap from "../components/Roadmap";
 import Tools from "../components/Tools";
 import Community from "../components/Community";
 import Footer from "../components/Footer";
-import { getThemeToolsData } from "../lib/theme-data";
+import { getThemeToolsData, getResourceData } from "../lib/theme-data";

 export default async function HomePage() {
-  const toolsData = await getThemeToolsData();
+  const [toolsData, resourceData] = await Promise.all([
+    getThemeToolsData(),
+    getResourceData(),
+  ]);

  return (
    <>
@@ -18,7 +21,7 @@ export default async function HomePage() {
        <Features />
        <Roadmap />
        <Tools data={toolsData} />
-        <Community />
+        <Community resourceData={resourceData} />
      </main>
      <Footer />
    </>
--- a/app/components/Community.tsx
+++ b/app/components/Community.tsx
@@ -1,84 +1,58 @@
 "use client";

+import { useState } from "react";
 import { Link, useTranslation } from "@/i18n/navigation";
-import ShopCard from "./ShopCard";
 import { TOPIC_IDS } from "@/config";
+import type { ResourceData } from "@/app/lib/theme-data";
+import ResourceNavigation from "./ResourceNavigation";

-const linkKeys = ["github", "destinations", "indieDev", "aiAgent", "cloudPhone", "unmannedLive", "appDownload"] as const;
+const mainModuleKeys = ["destinations", "vipEntry", "appDownload"] as const;
+const topicKeys = ["indieDev", "aiAgent", "cloudPhone", "unmannedLive"] as const;

-const linkIcons: Record<(typeof linkKeys)[number], string> = {
-  github: "📦",
+const linkIcons: Record<string, string> = {
  destinations: "🗺️",
+  vipEntry: "👑",
+  appDownload: "📱",
  indieDev: "🛠️",
  aiAgent: "🤖",
  cloudPhone: "☁️",
  unmannedLive: "📺",
-  appDownload: "📱",
 };
-const linkHrefs: Record<(typeof linkKeys)[number], { href: string; newTab?: boolean }> = {
-  github: { href: "https://github.com" },
+const linkHrefs: Record<string, { href: string; newTab?: boolean }> = {
  destinations: { href: "https://meetup.hackrobot.cn/", newTab: true },
-  indieDev: { href: "/ebook" },
-  aiAgent: { href: "/ebook" },
-  cloudPhone: { href: "https://android.hackrobot.cn", newTab: true },
-  unmannedLive: { href: "/ebook" },
+  vipEntry: { href: "https://vip.hackrobot.cn/", newTab: true },
  appDownload: { href: "/app" },
 };

-export default function Community() {
+type CommunityProps = {
+  resourceData?: ResourceData;
+};
+
+export default function Community({ resourceData }: CommunityProps) {
  const { t } = useTranslation("community");
+  const [toast, setToast] = useState(false);
+
+  const showUpdating = () => {
+    setToast(true);
+    setTimeout(() => setToast(false), 2000);
+  };
+
+  const renderCardContent = (key: string) => (
+    <>
+      <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl dark:bg-slate-800">
+        {linkIcons[key]}
+      </span>
+      <div className="min-w-0 flex-1">
+        <h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
+        <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
+        <span className="mt-2 inline-block text-sm font-medium text-sky-600">{t(`links.${key}.label`)}</span>
+      </div>
+    </>
+  );
+
  return (
    <section id="community" className="py-20 sm:py-28 dark:bg-slate-950">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        {/* 电商独立站卡片 */}
-        <div id="shop">
-          <ShopCard />
-        </div>
-
-        {/* 数字游民社区 - 优化布局 */}
-        <div className="mb-20">
-          <Link
-            href="/join"
-            className="group block overflow-hidden rounded-2xl border border-sky-200/80 bg-gradient-to-br from-sky-50 via-white to-cyan-50/60 p-8 shadow-sm transition-all duration-300 hover:border-sky-300 hover:shadow-xl hover:shadow-sky-100/50 dark:border-sky-800/80 dark:from-sky-900/30 dark:via-slate-900 dark:to-cyan-900/20 dark:hover:border-sky-700 dark:hover:shadow-sky-900/30 sm:p-10"
-          >
-            <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex-1">
-                <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-sky-100 px-4 py-1.5 text-sm font-semibold text-sky-700 dark:bg-sky-900/50 dark:text-sky-300">
-                  <span className="text-lg">👥</span>
-                  {t("nomadCommunity")}
-                </div>
-                <h3 className="mb-3 text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-3xl">
-                  {t("joinTitle")}
-                </h3>
-                <p className="mb-4 max-w-xl text-base leading-relaxed text-slate-600 dark:text-slate-400">
-                  {t("joinDesc")}
-                </p>
-                <div className="flex flex-wrap gap-3">
-                  <span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm dark:bg-slate-800/90 dark:text-slate-300">
-                    {t("applyForm")}
-                  </span>
-                  <span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm dark:bg-slate-800/90 dark:text-slate-300">
-                    {t("approveJoin")}
-                  </span>
-                </div>
-              </div>
-              <div className="flex shrink-0 items-center gap-4 rounded-2xl bg-white/90 p-6 shadow-md backdrop-blur-sm transition-transform dark:bg-slate-800/90 group-hover:scale-[1.02] sm:p-8">
-                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50">
-                  📝
-                </div>
-                <div className="text-left">
-                  <div className="font-bold text-slate-800 dark:text-slate-200">
-                    {t("applyNow")}
-                  </div>
-                  <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
-                    {t("applyHint")}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Link>
-        </div>
-
        <div id="resources" className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
            <span className="gradient-text">{t("resourcesTitle")}</span>
@@ -90,44 +64,64 @@ export default function Community() {
          </p>
        </div>

-        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {linkKeys.map((key) => {
+        {/* 图书 / 商业数码 / 网盘 */}
+        {resourceData && <ResourceNavigation data={resourceData} />}
+
+        {/* 目的地数据库 + 私域VIP入口 + App 下载 - 主模块 */}
+        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {mainModuleKeys.map((key) => {
            const { href, newTab } = linkHrefs[key];
-            const isTopic = (TOPIC_IDS as readonly string[]).includes(key);
-            const content = (
-              <>
-                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl dark:bg-slate-800">
-                  {linkIcons[key]}
-                </span>
-                <div className="min-w-0 flex-1">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
-                    {isTopic && (
-                      <span className="rounded-md bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-400">
-                        {t("topicTag")}
-                      </span>
-                    )}
-                  </div>
-                  <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
-                  <span className="mt-2 inline-block text-sm font-medium text-sky-600">
-                    {t(`links.${key}.label`)}
-                  </span>
-                </div>
-              </>
-            );
            return (
              <Link
                key={key}
                href={href}
                target={newTab ? "_blank" : undefined}
                rel={newTab ? "noopener noreferrer" : undefined}
-                className="card-hover flex items-start gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
+                className="card-hover flex items-start gap-5 rounded-2xl border-2 border-slate-200 bg-white p-6 shadow-md transition-all hover:border-sky-300 hover:shadow-lg dark:border-slate-700 dark:bg-slate-900 dark:hover:border-sky-600"
              >
-                {content}
+                {renderCardContent(key)}
              </Link>
            );
          })}
        </div>
+
+        {/* 4 个专题 - 小卡片，暂不可点击 */}
+        <div className="mt-8">
+          <h3 className="mb-4 text-center text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+            {t("topicTag")}
+          </h3>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {topicKeys.map((key) => (
+              <button
+                key={key}
+                type="button"
+                onClick={showUpdating}
+                className="flex cursor-not-allowed items-start gap-4 rounded-xl border border-slate-200 bg-slate-50/80 p-4 opacity-90 transition-opacity hover:opacity-100 dark:border-slate-700 dark:bg-slate-800/60"
+              >
+                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-200 text-lg dark:bg-slate-700">
+                  {linkIcons[key]}
+                </span>
+                <div className="min-w-0 flex-1 text-left">
+                  <h4 className="font-bold text-slate-700 dark:text-slate-300">{t(`links.${key}.title`)}</h4>
+                  <p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
+                  <span className="mt-1.5 inline-block text-xs font-medium text-amber-600 dark:text-amber-400">
+                    {t("updating")}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* 更新中 Toast */}
+        {toast && (
+          <div
+            className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
+            role="alert"
+          >
+            {t("updating")}
+          </div>
+        )}
      </div>
    </section>
  );
--- a/app/components/Features.tsx
+++ b/app/components/Features.tsx
@@ -40,13 +40,6 @@ export default function Features() {
            </div>
          ))}
        </div>
-
-        <div className="mt-12 text-center">
-          <div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-5 py-2 text-sm font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-900/50 dark:text-amber-300">
-            <span>🔥</span>
-            {t("stat")} <span className="font-bold">{t("statCount")}</span> {t("statSuffix")}
-          </div>
-        </div>
      </div>
    </section>
  );
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -24,9 +24,8 @@ const footerSections = [
    titleKey: "community" as const,
    links: [
      { labelKey: "discord" as const, href: "#" },
-      { labelKey: "wechat" as const, href: "#community" },
+      { labelKey: "wechat" as const, href: "https://vip.hackrobot.cn/", openInNewTab: true },
      { labelKey: "jike" as const, href: "#" },
-      { labelKey: "github" as const, href: "#" },
    ],
  },
  {
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -9,8 +9,7 @@ import ThemeToggle from "./ThemeToggle";
 const navLinks = [
  { labelKey: "roadmap" as const, href: "#roadmap" },
  { labelKey: "tools" as const, href: "#tools" },
-  { labelKey: "community" as const, href: "#community" },
-  { labelKey: "shop" as const, href: "#shop" },
+  { labelKey: "community" as const, href: "https://vip.hackrobot.cn/", external: true },
  { labelKey: "resources" as const, href: "#resources" },
 ];

@@ -54,6 +53,8 @@ export default function Header() {
              <a
                key={link.href}
                href={link.href}
+                target={"external" in link && link.external ? "_blank" : undefined}
+                rel={"external" in link && link.external ? "noopener noreferrer" : undefined}
                className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
              >
                {tNav(link.labelKey)}
@@ -123,6 +124,8 @@ export default function Header() {
              <a
                key={link.href}
                href={link.href}
+                target={"external" in link && link.external ? "_blank" : undefined}
+                rel={"external" in link && link.external ? "noopener noreferrer" : undefined}
                onClick={() => setMobileOpen(false)}
                className="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
              >
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -4,13 +4,6 @@ import { useTranslation } from "@/i18n/navigation";

 export default function Hero() {
  const { t } = useTranslation("hero");
-  const stats = [
-    { value: "200+", labelKey: "resources" as const },
-    { value: "7 天", labelKey: "path" as const },
-    { value: "50+", labelKey: "tools" as const },
-    { value: "30+", labelKey: "destinations" as const },
-    { value: "100%", labelKey: "free" as const },
-  ];
  return (
    <section className="relative overflow-hidden pt-24 pb-16 sm:pt-32 sm:pb-20">
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-sky-50/80 via-white to-white dark:from-slate-900 dark:via-slate-900 dark:to-slate-950" />
@@ -53,43 +46,6 @@ export default function Hero() {
            </a>
          </div>
        </div>
-
-        {/* Stats marquee */}
-        <div className="marquee-container mt-16 overflow-hidden">
-          <div className="flex animate-scroll w-max gap-6">
-            {[...stats, ...stats].map((s, i) => (
-              <div
-                key={i}
-                className="flex shrink-0 items-center gap-3 rounded-2xl border border-slate-100 bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80"
-              >
-                <span className="text-2xl font-bold text-sky-600 sm:text-3xl">
-                  {s.value}
-                </span>
-                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
-                  {t(`stats.${s.labelKey}`)}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="marquee-container mt-4 overflow-hidden">
-          <div className="flex animate-scroll-reverse w-max gap-6">
-            {[...stats, ...stats].map((s, i) => (
-              <div
-                key={i}
-                className="flex shrink-0 items-center gap-3 rounded-2xl border border-slate-100 bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80"
-              >
-                <span className="text-2xl font-bold text-amber-500 sm:text-3xl">
-                  {s.value}
-                </span>
-                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
-                  {t(`stats.${s.labelKey}`)}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
      </div>
    </section>
  );
--- a/app/components/ResourceNavigation.tsx
+++ b/app/components/ResourceNavigation.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+import { useState, useMemo, useEffect } from "react";
+import { useTranslation } from "@/i18n/navigation";
+import type { ResourceData } from "@/app/lib/theme-data";
+
+const PER_PAGE_MOBILE = 4;
+const PER_PAGE_PC = 8;
+const BREAKPOINT = 768;
+
+function useIsPC() {
+  const [isPC, setIsPC] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia(`(min-width: ${BREAKPOINT}px)`);
+    setIsPC(mq.matches);
+    const fn = () => setIsPC(mq.matches);
+    mq.addEventListener("change", fn);
+    return () => mq.removeEventListener("change", fn);
+  }, []);
+  return isPC;
+}
+
+/** 每页条数：H5=4，PC=8；总数不足则全显 */
+function getPerPage(total: number, isPC: boolean): number {
+  const cap = isPC ? PER_PAGE_PC : PER_PAGE_MOBILE;
+  return total <= cap ? total : cap;
+}
+
+type ResourceNavigationProps = {
+  data: ResourceData;
+};
+
+export default function ResourceNavigation({ data }: ResourceNavigationProps) {
+  const { t } = useTranslation("community");
+  const isPC = useIsPC();
+  const firstCategoryId = data.pan.categories[0]?.id ?? "";
+  const [activePanCategory, setActivePanCategory] = useState(firstCategoryId);
+  const [booksPage, setBooksPage] = useState(0);
+  const [productsPage, setProductsPage] = useState(0);
+  const [toast, setToast] = useState(false);
+
+  const showUpdating = () => {
+    setToast(true);
+    setTimeout(() => setToast(false), 2000);
+  };
+
+  const activeCategory = data.pan.categories.find((c) => c.id === activePanCategory);
+
+  const booksPerPage = getPerPage(data.books.length, isPC);
+  const productsPerPage = getPerPage(data.products.length, isPC);
+  const booksTotalPages = Math.ceil(data.books.length / booksPerPage) || 1;
+  const productsTotalPages = Math.ceil(data.products.length / productsPerPage) || 1;
+
+  useEffect(() => {
+    setBooksPage((p) => Math.max(0, Math.min(p, booksTotalPages - 1)));
+  }, [booksTotalPages]);
+  useEffect(() => {
+    setProductsPage((p) => Math.max(0, Math.min(p, productsTotalPages - 1)));
+  }, [productsTotalPages]);
+
+  const paginatedBooks = useMemo(() => {
+    const start = booksPage * booksPerPage;
+    return data.books.slice(start, start + booksPerPage);
+  }, [data.books, booksPage, booksPerPage]);
+
+  const paginatedProducts = useMemo(() => {
+    const start = productsPage * productsPerPage;
+    return data.products.slice(start, start + productsPerPage);
+  }, [data.products, productsPage, productsPerPage]);
+
+  return (
+    <div className="mt-12 space-y-16">
+      {/* 图书 - 封面+书名，数量少则大封面，多则分页 */}
+      <div>
+        <h3 className="mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
+          <span>📚</span>
+          {t("resourceSections.books")}
+          {data.books.length > 0 && (
+            <span className="text-sm font-normal text-slate-500 dark:text-slate-400">
+              （{t("resourceSections.totalBooks").replace("{count}", String(data.books.length))}）
+            </span>
+          )}
+        </h3>
+        <div
+          className="grid grid-cols-2 gap-3 gap-y-4 sm:gap-4 md:grid-cols-8"
+        >
+          {paginatedBooks.map((book, i) => (
+            <button
+              key={`book-${booksPage}-${i}`}
+              type="button"
+              onClick={showUpdating}
+              className="group flex cursor-not-allowed flex-col text-left"
+            >
+              <div
+                className="overflow-hidden rounded-lg border border-slate-200 bg-slate-100 shadow-sm transition-all group-hover:shadow-md dark:border-slate-700 dark:bg-slate-800"
+                style={{ aspectRatio: "2/3" }}
+              >
+                <img
+                  src={book.cover}
+                  alt={book.title}
+                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+              </div>
+              <p className="mt-2 line-clamp-2 text-center text-xs font-medium text-slate-700 dark:text-slate-300 sm:text-sm">
+                {book.title}
+              </p>
+            </button>
+          ))}
+        </div>
+        {booksTotalPages > 1 && (
+          <div className="mt-6 flex items-center justify-center gap-2">
+            <button
+              type="button"
+              onClick={() => setBooksPage((p) => Math.max(0, p - 1))}
+              disabled={booksPage === 0}
+              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
+              aria-label="上一页"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <span className="px-4 text-sm text-slate-600 dark:text-slate-400">
+              {booksPage + 1} / {booksTotalPages}
+            </span>
+            <button
+              type="button"
+              onClick={() => setBooksPage((p) => Math.min(booksTotalPages - 1, p + 1))}
+              disabled={booksPage === booksTotalPages - 1}
+              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
+              aria-label="下一页"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 商业数码 - 商品图+跳转电商 */}
+      <div>
+        <h3 className="mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
+          <span>🛒</span>
+          {t("resourceSections.products")}
+          {data.products.length > 0 && (
+            <span className="text-sm font-normal text-slate-500 dark:text-slate-400">
+              （{t("resourceSections.totalProducts").replace("{count}", String(data.products.length))}）
+            </span>
+          )}
+        </h3>
+        <div
+          className="grid grid-cols-2 gap-3 gap-y-4 sm:gap-4 md:grid-cols-8"
+        >
+          {paginatedProducts.map((product, i) => (
+            <button
+              key={`product-${productsPage}-${i}`}
+              type="button"
+              onClick={showUpdating}
+              className="group flex cursor-not-allowed flex-col text-left"
+            >
+              <div
+                className="overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-sm transition-all group-hover:shadow-md dark:border-slate-700 dark:bg-slate-900"
+                style={{ aspectRatio: "1/1" }}
+              >
+                <img
+                  src={product.image}
+                  alt={product.name}
+                  className="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
+                />
+              </div>
+              <p className="mt-2 line-clamp-2 text-center text-xs font-medium text-slate-700 dark:text-slate-300 sm:text-sm">
+                {product.name}
+              </p>
+            </button>
+          ))}
+        </div>
+        {productsTotalPages > 1 && (
+          <div className="mt-6 flex items-center justify-center gap-2">
+            <button
+              type="button"
+              onClick={() => setProductsPage((p) => Math.max(0, p - 1))}
+              disabled={productsPage === 0}
+              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
+              aria-label="上一页"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <span className="px-4 text-sm text-slate-600 dark:text-slate-400">
+              {productsPage + 1} / {productsTotalPages}
+            </span>
+            <button
+              type="button"
+              onClick={() => setProductsPage((p) => Math.min(productsTotalPages - 1, p + 1))}
+              disabled={productsPage === productsTotalPages - 1}
+              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
+              aria-label="下一页"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 网盘 - 分类 Tab */}
+      <div>
+        <h3 className="mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
+          <span>☁️</span>
+          {t("resourceSections.pan")}
+        </h3>
+        <div className="rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
+          <div className="flex flex-wrap gap-1 border-b border-slate-200 p-2 dark:border-slate-700">
+            {data.pan.categories.map((cat) => (
+              <button
+                key={cat.id}
+                type="button"
+                onClick={() => setActivePanCategory(cat.id)}
+                className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+                  activePanCategory === cat.id
+                    ? "bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300"
+                    : "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
+                }`}
+              >
+                <span className="mr-1.5">{cat.icon}</span>
+                {cat.title}
+              </button>
+            ))}
+          </div>
+          <div className="p-4">
+            {activeCategory && (
+              <div
+                className="grid gap-3"
+                style={{
+                  gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 260px), 1fr))",
+                }}
+              >
+                {activeCategory.items.map((item, i) => (
+                  <a
+                    key={i}
+                    href={item.href}
+                    target="_blank"
+                    rel="noopener noreferrer sponsored"
+                    className="flex items-center gap-3 rounded-xl border border-slate-100 p-3 transition-colors hover:border-sky-200 hover:bg-sky-50/50 dark:border-slate-700 dark:hover:border-sky-800 dark:hover:bg-sky-900/20"
+                  >
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-lg dark:bg-slate-800">
+                      {activeCategory.icon}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium text-slate-900 dark:text-slate-100">{item.name}</div>
+                      <div className="text-xs text-slate-500 dark:text-slate-400">{item.desc}</div>
+                    </div>
+                    <span className="shrink-0 text-sm font-medium text-sky-600">→</span>
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {toast && (
+        <div
+          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
+          role="alert"
+        >
+          {t("updating")}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/components/Resources.tsx
+++ b/app/components/Resources.tsx
@@ -67,7 +67,7 @@ const resources = [
    lang: "中文",
    tag: "📱 社区",
    title: "数字游民部落 — 中文社区指南",
-    desc: "连接全球华人数字游民：经验分享、城市攻略、合租搭伴、线下 Meetup",
+    desc: "连接全球数字游民：经验分享、城市攻略、合租搭伴、线下 Meetup",
    source: "微信公众号",
    color: "bg-cyan-50 text-cyan-700 border-cyan-200",
  },
--- a/app/components/Roadmap.tsx
+++ b/app/components/Roadmap.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { useState } from "react";
 import { Link, useTranslation } from "@/i18n/navigation";

 const days = [
@@ -14,6 +15,7 @@ const days = [

 export default function Roadmap() {
  const { t } = useTranslation("roadmap");
+  const [courseToast, setCourseToast] = useState(false);
  return (
    <section id="roadmap" className="bg-slate-50 py-20 sm:py-28 dark:bg-slate-900">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -26,70 +28,99 @@ export default function Roadmap() {
          </p>
        </div>

-        <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {days.map((d) => (
-            <Link
-              key={d.day}
-              href={`/day/${d.day}`}
-              className="card-hover group flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-800 dark:hover:border-sky-700"
-            >
-              <div className="flex items-center gap-3">
-                <div
-                  className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white ${d.color}`}
-                >
-                  DAY {d.day}
+        {/* 7天入门文档 - 独立区块 */}
+        <div className="mt-14">
+          <h3 className="mb-4 text-center text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+            {t("daysSection")}
+          </h3>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {days.map((d) => (
+              <Link
+                key={d.day}
+                href={`/day/${d.day}`}
+                className="card-hover group flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-sky-600"
+              >
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white ${d.color}`}
+                  >
+                    DAY {d.day}
+                  </div>
+                  <span className="text-xl">{d.icon}</span>
+                  <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600 dark:text-slate-100 dark:group-hover:text-sky-400">
+                    {t(`days.${d.day}.title`)}
+                  </h3>
                </div>
-                <span className="text-xl">{d.icon}</span>
-                <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600 dark:text-slate-100 dark:group-hover:text-sky-400">
-                  {t(`days.${d.day}.title`)}
-                </h3>
-              </div>
-              <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
-                {t(`days.${d.day}.desc`)}
-              </p>
-              <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600 dark:text-sky-400">
-                {t("viewDetails")}
-              </span>
-            </Link>
-          ))}
-          <Link
-            href="/ebook"
-            className="card-hover group flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-800 dark:hover:border-sky-700"
-          >
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-r from-sky-500 to-cyan-500 text-xs font-bold text-white">
-                📖
-              </div>
-              <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600">
-                {t("ebook.title")}
-              </h3>
-            </div>
-            <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600">
-              {t("ebook.desc")}
-            </p>
-            <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600">
-              {t("ebook.cta")}
-            </span>
-          </Link>
+                <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+                  {t(`days.${d.day}.desc`)}
+                </p>
+                <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600 dark:text-sky-400">
+                  {t("viewDetails")}
+                </span>
+              </Link>
+            ))}
+          </div>
        </div>

-        <div className="mt-16 overflow-hidden rounded-2xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 p-8 text-center dark:border-amber-800 dark:from-amber-900/30 dark:to-orange-900/30 sm:p-10">
-          <div className="mb-2 text-sm font-semibold text-amber-600 dark:text-amber-400">
-            {t("course.tag")}
-          </div>
-          <h3 className="text-2xl font-bold text-slate-900">
-            {t("course.title")}
+        {/* 电子书 + 实战课 - 平级展示 */}
+        <div className="mt-16">
+          <h3 className="mb-6 text-center text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+            {t("productsSection")}
          </h3>
-          <p className="mx-auto mt-3 max-w-xl text-slate-600 dark:text-slate-400">
-            {t("course.desc")}
-          </p>
-          <Link
-            href="/course"
-            className="mt-6 inline-flex items-center gap-2 rounded-full bg-amber-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-500"
-          >
-            {t("course.cta")}
-          </Link>
+          <div className="grid gap-6 sm:grid-cols-2">
+            <Link
+              href="/ebook"
+              className="group flex flex-col overflow-hidden rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-sky-50 to-cyan-50/50 p-8 shadow-md transition-all hover:border-sky-300 hover:shadow-lg dark:border-slate-700 dark:from-sky-900/20 dark:to-cyan-900/10 dark:hover:border-sky-600"
+            >
+              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50 dark:shadow-sky-900/30">
+                📖
+              </div>
+              <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+                {t("ebook.title")}
+              </h3>
+              <p className="mt-2 flex-1 text-slate-600 dark:text-slate-400">
+                {t("ebook.desc")}
+              </p>
+              <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-sky-600 dark:text-sky-400">
+                {t("ebook.cta")}
+              </span>
+            </Link>
+
+            <div className="flex flex-col overflow-hidden rounded-2xl border-2 border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50/50 p-8 shadow-md transition-all dark:border-amber-800 dark:from-amber-900/20 dark:to-orange-900/10">
+              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 text-3xl shadow-lg shadow-amber-200/50 dark:shadow-amber-900/30">
+                🎓
+              </div>
+              <span className="mb-2 inline-block text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
+                {t("course.tag")}
+              </span>
+              <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+                {t("course.title")}
+              </h3>
+              <p className="mt-2 flex-1 text-slate-600 dark:text-slate-400">
+                {t("course.desc")}
+              </p>
+              <button
+                type="button"
+                onClick={() => {
+                  setCourseToast(true);
+                  setTimeout(() => setCourseToast(false), 2000);
+                }}
+                className="mt-6 inline-flex cursor-not-allowed items-center gap-2 self-start rounded-full bg-amber-500 px-6 py-3 font-semibold text-white opacity-90 transition hover:opacity-100 dark:bg-amber-600"
+              >
+                {t("course.cta")}
+              </button>
+            </div>
+          </div>
        </div>
+
+        {courseToast && (
+          <div
+            className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
+            role="alert"
+          >
+            {t("course.updating")}
+          </div>
+        )}
      </div>
    </section>
  );
--- a/app/components/Tools.tsx
+++ b/app/components/Tools.tsx
@@ -10,13 +10,6 @@ type ToolsProps = {
 export default function Tools({ data }: ToolsProps) {
  const categories = data.categories;
  const { t } = useTranslation("tools");
-  const total = categories.reduce((s, c) => s + c.tools.length, 0);
-  const toolStats = [
-    { value: `${total}+`, key: "tools" as const },
-    { value: String(categories.length), key: "categories" as const },
-    { value: "数字游民", key: "nomad" as const },
-    { value: "佣金", key: "affiliate" as const },
-  ];
  return (
    <section id="tools" className="py-20 sm:py-28 dark:bg-slate-950">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -73,20 +66,6 @@ export default function Tools({ data }: ToolsProps) {
            </div>
          ))}
        </div>
-
-        <div className="mt-14 grid grid-cols-2 gap-4 sm:grid-cols-4">
-          {toolStats.map((s) => (
-            <div
-              key={s.key}
-              className="rounded-2xl border border-slate-100 bg-white p-5 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900"
-            >
-              <div className="text-3xl font-extrabold text-sky-600 dark:text-sky-400">
-                {s.value}
-              </div>
-              <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`stats.${s.key}`)}</div>
-            </div>
-          ))}
-        </div>
      </div>
    </section>
  );
--- a/app/components/course/CTASection.tsx
+++ b/app/components/course/CTASection.tsx
@@ -2,11 +2,14 @@

 import { useState, useEffect } from "react";
 import { Link } from "@/i18n/navigation";
+import { useTranslation } from "@/i18n/navigation";
 import { CTA_CONFIG } from "@/config/course";
 import { isPaid } from "@/app/lib/course-payment";

 export function CTASection() {
+  const { t } = useTranslation("community");
  const [paid, setPaid] = useState(false);
+  const [toast, setToast] = useState(false);
  useEffect(() => {
    setPaid(isPaid());
    const onPayUpdate = () => setPaid(isPaid());
@@ -34,13 +37,34 @@ export function CTASection() {
            </span>
          ))}
        </div>
-        <Link
-          href={paid ? "/course/0/0" : "/join"}
-          className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
-        >
-          {paid ? "开始学习 →" : "立即加入 →"}
-        </Link>
+        {paid ? (
+          <Link
+            href="/course/0/0"
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
+          >
+            开始学习 →
+          </Link>
+        ) : (
+          <button
+            type="button"
+            onClick={() => {
+              setToast(true);
+              setTimeout(() => setToast(false), 2000);
+            }}
+            className="inline-flex cursor-not-allowed items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] opacity-90 shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-100 sm:px-10"
+          >
+            立即加入 →
+          </button>
+        )}
      </div>
+      {toast && (
+        <div
+          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
+          role="alert"
+        >
+          {t("updating")}
+        </div>
+      )}
    </section>
  );
 }
--- a/app/components/course/CourseHero.tsx
+++ b/app/components/course/CourseHero.tsx
@@ -2,6 +2,7 @@

 import { useState, useEffect } from "react";
 import { Link } from "@/i18n/navigation";
+import { useTranslation } from "@/i18n/navigation";
 import { HERO_CONFIG, CURRICULUM_CONFIG } from "@/config/course";
 import { isPaid } from "@/app/lib/course-payment";
 import { getLastWatched, getProgress } from "@/app/lib/learning";
@@ -9,7 +10,9 @@ import { getLastWatched, getProgress } from "@/app/lib/learning";
 const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);

 export function CourseHero() {
+  const { t } = useTranslation("community");
  const [paid, setPaid] = useState(false);
+  const [toast, setToast] = useState(false);
  const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
  const [progress, setProgress] = useState({ completed: 0, percent: 0 });

@@ -60,13 +63,24 @@ export function CourseHero() {
            >
              继续学习 →
            </Link>
-          ) : (
+          ) : paid ? (
            <Link
-              href={paid ? "/course/0/0" : "/join"}
+              href="/course/0/0"
              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"
            >
-              {paid ? "进入课程 →" : "立即报名 →"}
+              进入课程 →
            </Link>
+          ) : (
+            <button
+              type="button"
+              onClick={() => {
+                setToast(true);
+                setTimeout(() => setToast(false), 2000);
+              }}
+              className="inline-flex shrink-0 cursor-not-allowed items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] opacity-90 transition hover:opacity-100 sm:px-10"
+            >
+              立即报名 →
+            </button>
          )}
        </div>
        {paid && progress.completed > 0 && (
@@ -84,6 +98,14 @@ export function CourseHero() {
          </div>
        )}
      </div>
+      {toast && (
+        <div
+          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
+          role="alert"
+        >
+          {t("updating")}
+        </div>
+      )}
    </section>
  );
 }
--- a/app/lib/theme-data.ts
+++ b/app/lib/theme-data.ts
@@ -82,5 +82,49 @@ async function getThemeToolsDataFallback(): Promise<{
  return mod.default;
 }

+export type ResourceData = {
+  books: Array<{ cover: string; title: string; href: string }>;
+  products: Array<{ image: string; name: string; href: string }>;
+  pan: {
+    categories: Array<{
+      id: string;
+      title: string;
+      icon: string;
+      items: Array<{ name: string; desc: string; href: string }>;
+    }>;
+  };
+};
+
+/** 加载资源导航数据：图书、商业数码、网盘 */
+export async function getResourceData(): Promise<ResourceData> {
+  const theme = CURRENT_THEME;
+  if (theme === "digital-nomad") {
+    const [booksMod, productsMod, panMod] = await Promise.all([
+      import("@/content/themes/digital-nomad/data/books.json"),
+      import("@/content/themes/digital-nomad/data/products.json"),
+      import("@/content/themes/digital-nomad/data/pan.json"),
+    ]);
+    return {
+      books: booksMod.default.books,
+      products: productsMod.default.products,
+      pan: panMod.default,
+    };
+  }
+  return getResourceDataFallback();
+}
+
+async function getResourceDataFallback(): Promise<ResourceData> {
+  const [booksMod, productsMod, panMod] = await Promise.all([
+    import("@/content/themes/digital-nomad/data/books.json"),
+    import("@/content/themes/digital-nomad/data/products.json"),
+    import("@/content/themes/digital-nomad/data/pan.json"),
+  ]);
+  return {
+    books: booksMod.default.books,
+    products: productsMod.default.products,
+    pan: panMod.default,
+  };
+}
+
 export { CURRENT_THEME, THEME_IDS };
 export type { ThemeId };