's''

app/history/[id]/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import SessionCoverImage from "../../components/SessionCoverImage";
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+import { PAST_SESSIONS } from "@/config/home.config";
+import { ACTIVITY_TYPES } from "@/config/home.config";
+
+export default function HistoryDetailPage() {
+  const params = useParams();
+  const id = typeof params.id === "string" ? params.id : "";
+  const session = PAST_SESSIONS.find((s) => s.id === id);
+
+  if (!session) {
+    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="/history" 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="/history"
+          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="relative aspect-[16/10] w-full bg-stone-100 dark:bg-stone-800">
+            {session.coverImage ? (
+              <SessionCoverImage
+                src={session.coverImage}
+                alt={session.title}
+                type={session.type}
+                fill
+                sizes="600px"
+                className="object-cover"
+              />
+            ) : (
+              <div className="absolute inset-0 flex items-center justify-center text-4xl">☕</div>
+            )}
+            <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
+              <span className="text-xs text-white/90">{ACTIVITY_TYPES[session.type]} · {session.city}</span>
+              <h1 className="text-xl sm:text-2xl font-bold text-white mt-0.5">{session.title}</h1>
+            </div>
+          </div>
+          <div className="p-5 sm:p-6">
+            <dl className="space-y-3 text-sm">
+              <div>
+                <dt className="text-stone-500 dark:text-stone-400">时间</dt>
+                <dd className="font-medium text-stone-800 dark:text-stone-100">{session.date} {session.time}</dd>
+              </div>
+              <div>
+                <dt className="text-stone-500 dark:text-stone-400">地点</dt>
+                <dd className="font-medium text-stone-800 dark:text-stone-100">{session.place}</dd>
+              </div>
+              <div>
+                <dt className="text-stone-500 dark:text-stone-400">城市</dt>
+                <dd className="font-medium text-stone-800 dark:text-stone-100">{session.city}</dd>
+              </div>
+            </dl>
+            <p className="mt-4 pt-4 border-t border-stone-100 dark:border-stone-700 text-sm text-stone-600 dark:text-stone-400">
+              这是一场已结束的活动。想参加本周活动？去首页看看～
+            </p>
+            <Link
+              href="/"
+              className="mt-4 inline-flex items-center 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>
+          </div>
+        </article>
+      </main>
+      <Footer />
+    </div>
+  );
+}

app/history/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+import SessionCoverImage from "../components/SessionCoverImage";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { PAST_SESSIONS } from "@/config/home.config";
+import { ACTIVITY_TYPES } from "@/config/home.config";
+
+export default function HistoryPage() {
+  return (
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
+      <Header />
+      <main className="max-w-[700px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        <h1 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2">
+          历史活动
+        </h1>
+        <p className="text-sm text-stone-500 dark:text-stone-400 mb-8">
+          看看之前都举办了什么～
+        </p>
+
+        <div className="relative">
+          <div className="absolute left-[11px] sm:left-[15px] top-0 bottom-0 w-px bg-stone-200 dark:bg-stone-700" />
+          <div className="space-y-0">
+            {PAST_SESSIONS.map((s, i) => (
+              <Link
+                key={s.id}
+                href={`/history/${s.id}`}
+                className="group flex gap-4 sm:gap-6 py-6 sm:py-8 relative"
+              >
+                <div className="relative z-10 w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-amber-500 shrink-0 mt-1 flex items-center justify-center text-white text-[10px] sm:text-xs font-bold">
+                  {PAST_SESSIONS.length - i}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4">
+                    <div className="relative w-full sm:w-28 sm:h-28 shrink-0 aspect-[4/3] sm:aspect-square rounded-xl overflow-hidden bg-stone-100 dark:bg-stone-800">
+                      {s.coverImage ? (
+                        <SessionCoverImage
+                          src={s.coverImage}
+                          alt={s.title}
+                          type={s.type}
+                          fill
+                          sizes="(max-width: 640px) 100vw, 112px"
+                          className="object-cover"
+                        />
+                      ) : (
+                        <div className="absolute inset-0 flex items-center justify-center text-2xl">☕</div>
+                      )}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <span className="text-[10px] sm:text-xs text-amber-600 dark:text-amber-400/90">
+                        {ACTIVITY_TYPES[s.type]} · {s.city}
+                      </span>
+                      <h2 className="font-semibold text-stone-800 dark:text-stone-100 text-base sm:text-lg mt-0.5 group-hover:text-amber-600 dark:group-hover:text-amber-400">
+                        {s.title}
+                      </h2>
+                      <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">
+                        {s.date} {s.time} · {s.place}
+                      </p>
+                      <span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
+                        查看详情 →
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-stone-200 dark:border-stone-800">
+          <Link
+            href="/"
+            className="text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400"
+          >
+            ← 返回首页
+          </Link>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}