s''

app/[locale]/videos/[slug]/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { use, useEffect, useState } from "react";
+import { Link, useLocale } from "@/i18n/navigation";
+import { apiFetch } from "@/app/lib/api-client";
+import Footer from "@/app/components/Footer";
+
+interface ContentItem {
+  slug: string;
+  title: string;
+  titleEn?: string;
+  subtitle: string;
+  subtitleEn?: string;
+  description: string;
+  descriptionEn?: string;
+  coverImage: string;
+  mediaUrl: string;
+  chapters?: { title: string; time?: string }[];
+  relatedProfiles?: string[];
+  durationMinutes?: number;
+}
+
+interface CityLite {
+  slug: string;
+  name: string;
+  nameEn?: string;
+  icon: string;
+  nomadsNow: number;
+}
+
+export default function VideoPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = use(params);
+  const locale = useLocale();
+  const [item, setItem] = useState<ContentItem | null>(null);
+  const [cities, setCities] = useState<CityLite[]>([]);
+
+  useEffect(() => {
+    apiFetch<{ item: ContentItem; cities: CityLite[] }>(`/api/content/${slug}`)
+      .then((data) => {
+        setItem(data.item);
+        setCities(data.cities || []);
+      })
+      .catch(() => setItem(null));
+  }, [slug]);
+
+  if (!item) {
+    return <div className="min-h-screen bg-[#0f172a] p-10 text-gray-300">加载中...</div>;
+  }
+
+  const title = locale === "zh" ? item.title : item.titleEn || item.title;
+  const subtitle = locale === "zh" ? item.subtitle : item.subtitleEn || item.subtitle;
+  const description = locale === "zh" ? item.description : item.descriptionEn || item.description;
+
+  return (
+    <div className="min-h-screen bg-[#0f172a] text-white">
+      <main className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12">
+        <Link href="/" className="text-sm text-white/60 hover:text-white">← 返回首页</Link>
+        <div className="mt-6 overflow-hidden rounded-2xl bg-black shadow-2xl">
+          <video src={item.mediaUrl} poster={item.coverImage} controls playsInline className="aspect-video w-full bg-black object-contain" />
+        </div>
+        <div className="mt-8 grid gap-8 lg:grid-cols-[1fr_320px]">
+          <section>
+            <p className="text-sm font-semibold text-[#ff7a45]">个人访谈 / 现实纪录片</p>
+            <h1 className="mt-2 text-3xl font-bold sm:text-4xl">{title}</h1>
+            <p className="mt-2 text-lg text-white/60">{subtitle}</p>
+            <p className="mt-6 leading-8 text-white/75">{description}</p>
+          </section>
+          <aside className="rounded-2xl bg-white/10 p-5 backdrop-blur">
+            <h2 className="font-bold">章节</h2>
+            <div className="mt-4 space-y-3">
+              {(item.chapters || []).map((chapter) => (
+                <div key={chapter.title} className="rounded-xl bg-white/10 px-4 py-3">
+                  <p className="text-sm">{chapter.title}</p>
+                  <p className="mt-1 text-xs text-white/50">{chapter.time || "00:00"}</p>
+                </div>
+              ))}
+            </div>
+          </aside>
+        </div>
+        <section className="mt-10">
+          <h2 className="mb-4 text-xl font-bold">片中城市</h2>
+          <div className="flex flex-wrap gap-3">
+            {cities.map((city) => (
+              <Link key={city.slug} href={`/city/${city.slug}`} className="rounded-full bg-white/10 px-4 py-2 text-sm hover:bg-white/20">
+                {city.icon} {locale === "zh" ? city.name : city.nameEn || city.name} · {city.nomadsNow} 人在此
+              </Link>
+            ))}
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+}