'小红书解析

app/host/[id]/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+import { HOSTS } from "@/config/home.config";
+
+export default function HostDetailPage() {
+  const params = useParams();
+  const id = typeof params.id === "string" ? params.id : "";
+  const host = HOSTS.find((h) => h.id === id);
+
+  if (!host) {
+    return (
+      <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex items-center justify-center">
+        <div className="text-center px-4">
+          <p className="text-stone-500 dark:text-stone-400 mb-4">主理人不存在</p>
+          <Link href="/" className="text-amber-600 dark:text-amber-400">
+            返回首页
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
+      <Header />
+      <main className="max-w-[600px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 mb-6"
+        >
+          ← 返回首页
+        </Link>
+
+        <article className="rounded-2xl overflow-hidden bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-700">
+          <div className="p-6 sm:p-8 text-center">
+            <div className="relative w-24 h-24 sm:w-28 sm:h-28 mx-auto rounded-full overflow-hidden border-4 border-amber-100 dark:border-amber-900/30">
+              <Image
+                src={host.avatar}
+                alt={host.name}
+                fill
+                sizes="112px"
+                className="object-cover"
+                unoptimized
+              />
+            </div>
+            <h1 className="mt-4 text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">
+              {host.name}
+            </h1>
+            <p className="mt-2 text-sm text-amber-600 dark:text-amber-400">
+              {host.bio}
+            </p>
+            <div className="mt-6 pt-6 border-t border-stone-100 dark:border-stone-700 text-left">
+              <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed">
+                {host.intro}
+              </p>
+            </div>
+          </div>
+        </article>
+
+        <Link
+          href="/"
+          className="mt-6 inline-flex justify-center w-full sm:w-auto bg-amber-600 hover:bg-amber-700 text-white px-6 py-2.5 rounded-xl text-sm font-medium"
+        >
+          看看本周活动
+        </Link>
+      </main>
+      <Footer />
+    </div>
+  );
+}