集成媒体会话API，支持视频和图文的播放状态同步与元信息更新；重构搜索页面，避免编译警告

app/aweme/[awemeId]/Client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Pause, Play } from "lucide-react";
 import type { AwemeData, ImageData, Neighbors, VideoData, VideoTranscript } from "./types.ts";
 import { BackgroundCanvas } from "./components/BackgroundCanvas";
@@ -223,6 +223,211 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
     backgroundCanvasRef,
   });
 
+  // Media Session API 集成
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!("mediaSession" in navigator)) return;
+
+    const ms = (navigator as any).mediaSession as MediaSession;
+
+    // 元信息：标题、作者、专辑（使用创建时间），封面图（优先当前图片，其次作者头像）
+    const title = data.desc || `作品 ${data.aweme_id}`;
+    const artist = data.author.nickname || "作者";
+    const album = new Date(data.created_at).toLocaleString();
+    // 单一封面图：使用作品 cover_url
+    const coverUrl = (data as AwemeData).cover_url as string | undefined;
+    const coverSize = (data as AwemeData).cover_size as { w: number; h: number } | undefined;
+    const artwork = coverUrl ? [{ src: coverUrl, size: `${coverSize?.w || 512}x${coverSize?.h || 512}` }] : [];
+
+    try {
+      ms.metadata = new MediaMetadata({ title, artist, album, artwork });
+    } catch { }
+
+    // 更新播放状态
+    try {
+      ms.playbackState = playerState.isPlaying ? "playing" : "paused";
+    } catch { }
+
+    const getImagesTotalMs = () =>
+      (images || []).reduce((sum, img) => sum + (img.duration ?? SEGMENT_MS), 0);
+
+    const updatePosition = () => {
+      try {
+        // @ts-ignore: setPositionState 可能不存在
+        if (!ms.setPositionState) return;
+        if (isVideo) {
+          const v = videoRef.current;
+          if (!v || !isFinite(v.duration) || isNaN(v.duration)) return;
+          // @ts-ignore
+          ms.setPositionState({
+            duration: Math.max(0, v.duration),
+            position: Math.max(0, v.currentTime),
+            playbackRate: playerState.rate ?? 1,
+          });
+        } else if (images?.length) {
+          const totalMs = getImagesTotalMs();
+          const duration = totalMs / 1000;
+          const position = Math.max(0, Math.min(duration, (playerState.progress * totalMs) / 1000));
+          // @ts-ignore
+          ms.setPositionState({ duration, position, playbackRate: 1 });
+        }
+      } catch { }
+    };
+
+    // 绑定视频事件以同步状态
+    let timeUpdateTimer: number | null = null;
+    const v = videoRef.current;
+    if (isVideo && v) {
+      const onPlay = () => {
+        try { ms.playbackState = "playing"; } catch { }
+        updatePosition();
+      };
+      const onPause = () => {
+        try { ms.playbackState = "paused"; } catch { }
+        updatePosition();
+      };
+      const onTimeUpdate = () => updatePosition();
+      
+      v.addEventListener("play", onPlay);
+      v.addEventListener("pause", onPause);
+      v.addEventListener("timeupdate", onTimeUpdate);
+      // 初始同步
+      updatePosition();
+
+      // 清理
+      timeUpdateTimer = null;
+      return () => {
+        v.removeEventListener("play", onPlay);
+        v.removeEventListener("pause", onPause);
+        v.removeEventListener("timeupdate", onTimeUpdate);
+      };
+    } else if (!isVideo && images?.length) {
+      // 图文用定时器定期同步位置
+      const id = window.setInterval(updatePosition, 1000);
+      // 初始同步
+      updatePosition();
+      return () => window.clearInterval(id);
+    }
+    // 依赖：当这些变化时刷新元信息与位置状态
+  }, [
+    isVideo,
+    data.aweme_id,
+    data.desc,
+    data.author.nickname,
+    data.author.avatar_url,
+    data.created_at,
+    imageCarouselState.idx,
+    images,
+    playerState.isPlaying,
+    playerState.progress,
+    playerState.rate,
+  ]);
+
+  // 绑定系统媒体控件的操作处理程序
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!("mediaSession" in navigator)) return;
+    const ms = (navigator as any).mediaSession as MediaSession;
+
+    const getImagesTotalMs = () =>
+      (images || []).reduce((sum, img) => sum + (img.duration ?? SEGMENT_MS), 0);
+
+    const handlePlay = async () => {
+      if (isVideo) {
+        const v = videoRef.current;
+        try { await v?.play(); } catch { }
+      } else {
+        playerState.setIsPlaying(true);
+        try { await audioRef.current?.play(); } catch { }
+      }
+    };
+    const handlePause = () => {
+      if (isVideo) {
+        const v = videoRef.current;
+        v?.pause();
+      } else {
+        playerState.setIsPlaying(false);
+        audioRef.current?.pause();
+      }
+    };
+    const handleStop = () => {
+      if (isVideo) {
+        const v = videoRef.current;
+        if (v) { v.pause(); v.currentTime = 0; }
+      } else {
+        playerState.setIsPlaying(false);
+        audioRef.current?.pause();
+        seekTo(0);
+      }
+    };
+    const handleSeekDelta = (deltaSec: number) => {
+      if (isVideo) {
+        const v = videoRef.current;
+        if (v) v.currentTime = Math.max(0, Math.min(v.duration || Infinity, v.currentTime + deltaSec));
+      } else if (images?.length) {
+        const totalMs = getImagesTotalMs();
+        if (totalMs <= 0) return;
+        const deltaRatio = (deltaSec * 1000) / totalMs;
+        seekTo(playerState.progress + deltaRatio);
+      }
+    };
+    const handleSeekTo = (seekTimeSec: number) => {
+      if (isVideo) {
+        const v = videoRef.current;
+        if (v && isFinite(v.duration)) {
+          v.currentTime = Math.max(0, Math.min(v.duration, seekTimeSec));
+        }
+      } else if (images?.length) {
+        const totalMs = getImagesTotalMs();
+        const totalSec = totalMs / 1000;
+        if (totalSec > 0) seekTo(seekTimeSec / totalSec);
+      }
+    };
+
+    ms.setActionHandler("play", handlePlay);
+    ms.setActionHandler("pause", handlePause);
+    ms.setActionHandler("stop", handleStop);
+    ms.setActionHandler("seekbackward", (details: any) => handleSeekDelta(-((details?.seekOffset as number) || 10)));
+    ms.setActionHandler("seekforward", (details: any) => handleSeekDelta((details?.seekOffset as number) || 10));
+    ms.setActionHandler("seekto", (details: any) => {
+      if (typeof details?.seekTime === "number") handleSeekTo(details.seekTime);
+    });
+    ms.setActionHandler("previoustrack", () => {
+      if (!isVideo && images?.length > 1) {
+        prevImg();
+      } else if (neighbors.prev) {
+        router.push(`/aweme/${neighbors.prev.aweme_id}`);
+      }
+    });
+    ms.setActionHandler("nexttrack", () => {
+      if (!isVideo && images?.length > 1) {
+        nextImg();
+      } else if (neighbors.next) {
+        router.push(`/aweme/${neighbors.next.aweme_id}`);
+      }
+    });
+
+    return () => {
+      try {
+        ms.setActionHandler("play", null);
+        ms.setActionHandler("pause", null);
+        ms.setActionHandler("stop", null);
+        ms.setActionHandler("seekbackward", null);
+        ms.setActionHandler("seekforward", null);
+        ms.setActionHandler("seekto", null);
+        ms.setActionHandler("previoustrack", null);
+        ms.setActionHandler("nexttrack", null);
+      } catch { }
+    };
+  }, [
+    isVideo,
+    images,
+    neighbors.prev,
+    neighbors.next,
+    router,
+    playerState.progress,
+  ]);
+
   return (
     <div className="h-screen w-full">
       <BackgroundCanvas ref={backgroundCanvasRef} />

app/aweme/[awemeId]/page.tsx

@@ -58,7 +58,6 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
   const commentsCount = await prisma.comment.count({
     where: isVideo ? { videoId: id } : { imagePostId: id },
   });
-
   const aweme = isVideo ? video : post;
 
   const data: AwemeData = {
@@ -73,6 +72,8 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
         const aweme = video!
         return {
           type: "video" as const,
+          cover_url: getFileUrl(aweme!.cover_url ?? 'default-cover.png'),
+          cover_size: { h: aweme.height ?? 0, w: aweme.width ?? 0 },
           duration_ms: aweme!.duration_ms,
           video_url: getFileUrl(aweme!.video_url),
           width: aweme!.width ?? null,
@@ -82,7 +83,9 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
         const aweme = post!
         return {
           type: "image" as const,
-          images: aweme!.images.map(img => ({ ...img, url: getFileUrl(img.url), animated: getFileUrl(img.animated ?? 'default-animated.png'), })),
+          cover_url: getFileUrl(aweme!.images[0].url ?? 'default-cover.png'),
+          cover_size: { h: aweme!.images[0].height ?? 0, w: aweme!.images[0].width ?? 0 },
+          images: aweme!.images.map(img => ({ ...img, url: getFileUrl(img.url), animated: img.animated? getFileUrl(img.animated) : null })),
           music_url: getFileUrl(aweme!.music_url || 'default-music.mp3'),
         };
       }

app/aweme/[awemeId]/types.ts

@@ -12,6 +12,8 @@ export type Comment = {
 export type VideoData = {
   type: "video";
   aweme_id: string;
+  cover_url: string;
+  cover_size: {w: number; h: number};
   desc: string;
   created_at: string | Date;
   duration_ms: number | null;
@@ -26,6 +28,8 @@ export type VideoData = {
 export type ImageData = {
   type: "image";
   aweme_id: string;
+  cover_url: string;
+  cover_size: {w: number; h: number};
   desc: string;
   created_at: string | Date;
   images: { id: string; url: string; width: number | null; height: number | null; animated: string | null; duration: number | null }[];

app/search/SearchClient.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import { FormEvent, useCallback, useEffect, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { Search, ArrowLeft, X, MessageSquare } from "lucide-react";
+
+// 匹配搜索结果类型（适配后端API）
+type SearchResultItem = {
+  id: string;
+  awemeId: string;
+  type: 'video' | 'image';
+  rank: number;
+  snippet: string; // 后端返回的高亮片段，已包含<mark>标签
+  video?: {
+    aweme_id: string;
+    desc: string;
+    cover_url: string | null;
+    video_url: string | null;
+    duration_ms: number;
+    author: {
+      sec_uid: string;
+      nickname: string;
+      avatar_url: string | null;
+    };
+  };
+  imagePost?: {
+    aweme_id: string;
+    desc: string;
+    cover_url: string | null;
+    author: {
+      sec_uid: string;
+      nickname: string;
+      avatar_url: string | null;
+    };
+  };
+};
+export default function SearchClient({ initialQuery }: { initialQuery: string }) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const [query, setQuery] = useState(initialQuery);
+  const [results, setResults] = useState<SearchResultItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searched, setSearched] = useState(false);
+
+  const performSearch = useCallback(async (q: string) => {
+    if (!q.trim()) {
+      setResults([]);
+      setSearched(false);
+      return;
+    }
+    setLoading(true);
+    setSearched(true);
+    try {
+      const res = await fetch(`/api/search?q=${encodeURIComponent(q.trim())}&limit=60`);
+      if (!res.ok) throw new Error("Search failed");
+      const data = await res.json();
+      setResults(data.results || []);
+    } catch (err) {
+      console.error("Search error:", err);
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 初始 & URL 变化时同步（用 searchParams 订阅 URL 更稳妥）
+  useEffect(() => {
+    const q = searchParams.get("q") || "";
+    setQuery(q);
+    if (q) performSearch(q);
+  }, [searchParams, performSearch]);
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault();
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    router.push(`/search?q=${encodeURIComponent(trimmed)}`);
+    // 可省略：上面的 push 会触发上面的 effect 从 URL 拉取并搜索
+    // performSearch(trimmed);
+  };
+
+  const handleClear = () => {
+    setQuery("");
+    setResults([]);
+    setSearched(false);
+    router.push("/search");
+  };
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white">
+      {/* 顶部搜索栏 */}
+      <header className="sticky top-0 z-50 bg-zinc-900/80 backdrop-blur-xl border-b border-white/10">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center gap-4">
+          <button
+            onClick={() => router.push("/")}
+            className="p-2 rounded-full hover:bg-white/10 transition-colors"
+            aria-label="返回首页"
+          >
+            <ArrowLeft size={24} />
+          </button>
+
+          <form onSubmit={handleSearch} className="flex-1 flex items-center gap-3">
+            <div className="relative flex-1">
+              <input
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="搜索视频、图文描述或语音内容..."
+                className="w-full bg-white/5 border border-white/10 rounded-full px-5 py-3 pl-12 pr-12 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
+                autoFocus
+              />
+              <Search
+                size={20}
+                className="absolute left-4 top-1/2 -translate-y-1/2 text-white/40"
+              />
+              {query && (
+                <button
+                  type="button"
+                  onClick={handleClear}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-white/10 transition-colors"
+                  aria-label="清空"
+                >
+                  <X size={18} className="text-white/60" />
+                </button>
+              )}
+            </div>
+            <button
+              type="submit"
+              className="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={loading || !query.trim()}
+            >
+              {loading ? "搜索中..." : "搜索"}
+            </button>
+          </form>
+        </div>
+      </header>
+
+      {/* 结果区域 */}
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        {loading && (
+          <div className="flex items-center justify-center py-20">
+            <div className="flex flex-col items-center gap-4">
+              <div className="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
+              <p className="text-white/60">正在搜索...</p>
+            </div>
+          </div>
+        )}
+
+        {!loading && searched && results.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-20 text-white/60">
+            <Search size={64} className="mb-4 opacity-20" />
+            <p className="text-xl">未找到相关内容</p>
+            <p className="text-sm mt-2">试试其他关键词</p>
+          </div>
+        )}
+
+        {!loading && !searched && !query && (
+          <div className="flex flex-col items-center justify-center py-20 text-white/40">
+            <Search size={64} className="mb-4 opacity-20" />
+            <p className="text-xl">输入关键词开始搜索</p>
+            <p className="text-sm mt-2">支持搜索视频描述、图文描述及语音转写内容</p>
+          </div>
+        )}
+
+        {!loading && results.length > 0 && (
+          <div>
+            <div className="mb-6 flex items-center justify-between">
+              <h2 className="text-lg text-white/80">
+                找到 <span className="text-white font-semibold">{results.length}</span> 个结果
+              </h2>
+            </div>
+
+            {/* 单列列表布局 */}
+            <div className="space-y-4">
+              {results.map((item) => {
+                const content = item.type === 'video' ? item.video : item.imagePost;
+                if (!content) return null;
+
+                return (
+                  <div
+                    key={item.awemeId}
+                    className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden hover:border-white/20 transition-all hover:-translate-y-1"
+                  >
+                    {/* 主内容区 */}
+                    <div className="flex gap-4 p-4">
+                      {/* 左侧：封面预览 */}
+                      <Link
+                        href={`/aweme/${content.aweme_id}`}
+                        target="_blank"
+                        className="flex-shrink-0 w-64 h-80 sm:w-70 sm:h-96 rounded-xl overflow-hidden bg-zinc-900 group"
+                      >
+                        <img
+                          src={content.cover_url || ""}
+                          alt={content.desc}
+                          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                        />
+                      </Link>
+
+                      {/* 右侧：信息区 */}
+                      <div className="flex-1 min-w-0 flex flex-col">
+                        {/* 类型标签 */}
+                        <div className="flex items-center gap-2 mb-2">
+                          <span className={`px-2 py-0.5 text-xs rounded ${
+                            item.type === 'video' 
+                              ? 'bg-blue-600/20 text-blue-300' 
+                              : 'bg-purple-600/20 text-purple-300'
+                          }`}>
+                            {item.type === 'video' ? '视频' : '图文'}
+                          </span>
+                          <span className="flex items-center gap-1 px-2 py-0.5 bg-green-600/20 text-green-300 text-xs rounded">
+                            <MessageSquare size={12} />
+                            匹配度: {(item.rank * 100).toFixed(1)}%
+                          </span>
+                        </div>
+
+                        {/* 描述 */}
+                        <Link href={`/aweme/${content.aweme_id}`} target="_blank">
+                          <p className="text-white/90 text-sm sm:text-base line-clamp-2 mb-3 hover:text-white transition-colors">
+                            {content.desc || "无描述"}
+                          </p>
+                        </Link>
+
+                        {/* 作者信息 */}
+                        <div className="flex items-center gap-2 mb-4">
+                          <img
+                            src={content.author.avatar_url || ""}
+                            alt={content.author.nickname}
+                            className="w-6 h-6 rounded-full ring-1 ring-white/20"
+                          />
+                          <span className="text-xs text-white/60">
+                            {content.author.nickname}
+                          </span>
+                        </div>
+
+                        {/* 匹配详情：展示后端返回的snippet（已包含<mark>标签） */}
+                        <div className="space-y-3">
+                          <div>
+                            <h4 className="flex items-center gap-2 text-xs font-medium text-green-300 mb-1.5">
+                              <MessageSquare size={14} />
+                              匹配内容
+                            </h4>
+                            <div
+                              className="text-xs text-white/70 bg-white/5 rounded-lg p-2 leading-relaxed"
+                              dangerouslySetInnerHTML={{ __html: item.snippet }}
+                              style={{
+                                wordBreak: 'break-word',
+                              }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

app/search/page.tsx

@@ -1,268 +1,12 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
-import Link from "next/link";
-import { Search, ArrowLeft, X, MessageSquare } from "lucide-react";
-
-// 匹配搜索结果类型（适配后端API）
-type SearchResultItem = {
-  id: string;
-  awemeId: string;
-  type: 'video' | 'image';
-  rank: number;
-  snippet: string; // 后端返回的高亮片段，已包含<mark>标签
-  video?: {
-    aweme_id: string;
-    desc: string;
-    cover_url: string | null;
-    video_url: string | null;
-    duration_ms: number;
-    author: {
-      sec_uid: string;
-      nickname: string;
-      avatar_url: string | null;
-    };
-  };
-  imagePost?: {
-    aweme_id: string;
-    desc: string;
-    cover_url: string | null;
-    author: {
-      sec_uid: string;
-      nickname: string;
-      avatar_url: string | null;
-    };
-  };
-};
-
-export default function SearchPage() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const queryParam = searchParams.get("q") || "";
-
-  const [query, setQuery] = useState(queryParam);
-  const [results, setResults] = useState<SearchResultItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [searched, setSearched] = useState(false);
-
-  const performSearch = useCallback(async (q: string) => {
-    if (!q.trim()) {
-      setResults([]);
-      setSearched(false);
-      return;
-    }
-
-    setLoading(true);
-    setSearched(true);
-    try {
-      const res = await fetch(`/api/search?q=${encodeURIComponent(q.trim())}&limit=60`);
-      if (!res.ok) throw new Error("Search failed");
-      const data = await res.json();
-      setResults(data.results || []);
-    } catch (err) {
-      console.error("Search error:", err);
-      setResults([]);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  // 初始查询
-  useEffect(() => {
-    if (queryParam) {
-      performSearch(queryParam);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    const trimmed = query.trim();
-    if (!trimmed) return;
-    // 更新 URL
-    router.push(`/search?q=${encodeURIComponent(trimmed)}`);
-    performSearch(trimmed);
-  };
-
-  const handleClear = () => {
-    setQuery("");
-    setResults([]);
-    setSearched(false);
-    router.push("/search");
-  };
+// 不要写 "use client"
+import { Suspense } from "react";
+import SearchClient from "./SearchClient";
 
+export default function Page({ searchParams }: { searchParams: { q?: string } }) {
+  const q = typeof searchParams.q === "string" ? searchParams.q : "";
   return (
-    <div className="min-h-screen bg-zinc-950 text-white">
-      {/* 顶部搜索栏 */}
-      <header className="sticky top-0 z-50 bg-zinc-900/80 backdrop-blur-xl border-b border-white/10">
-        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center gap-4">
-          <button
-            onClick={() => router.push("/")}
-            className="p-2 rounded-full hover:bg-white/10 transition-colors"
-            aria-label="返回首页"
-          >
-            <ArrowLeft size={24} />
-          </button>
-
-          <form onSubmit={handleSearch} className="flex-1 flex items-center gap-3">
-            <div className="relative flex-1">
-              <input
-                type="text"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="搜索视频、图文描述或语音内容..."
-                className="w-full bg-white/5 border border-white/10 rounded-full px-5 py-3 pl-12 pr-12 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
-                autoFocus
-              />
-              <Search
-                size={20}
-                className="absolute left-4 top-1/2 -translate-y-1/2 text-white/40"
-              />
-              {query && (
-                <button
-                  type="button"
-                  onClick={handleClear}
-                  className="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-white/10 transition-colors"
-                  aria-label="清空"
-                >
-                  <X size={18} className="text-white/60" />
-                </button>
-              )}
-            </div>
-            <button
-              type="submit"
-              className="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              disabled={loading || !query.trim()}
-            >
-              {loading ? "搜索中..." : "搜索"}
-            </button>
-          </form>
-        </div>
-      </header>
-
-      {/* 结果区域 */}
-      <main className="max-w-7xl mx-auto px-4 py-8">
-        {loading && (
-          <div className="flex items-center justify-center py-20">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
-              <p className="text-white/60">正在搜索...</p>
-            </div>
-          </div>
-        )}
-
-        {!loading && searched && results.length === 0 && (
-          <div className="flex flex-col items-center justify-center py-20 text-white/60">
-            <Search size={64} className="mb-4 opacity-20" />
-            <p className="text-xl">未找到相关内容</p>
-            <p className="text-sm mt-2">试试其他关键词</p>
-          </div>
-        )}
-
-        {!loading && !searched && !queryParam && (
-          <div className="flex flex-col items-center justify-center py-20 text-white/40">
-            <Search size={64} className="mb-4 opacity-20" />
-            <p className="text-xl">输入关键词开始搜索</p>
-            <p className="text-sm mt-2">支持搜索视频描述、图文描述及语音转写内容</p>
-          </div>
-        )}
-
-        {!loading && results.length > 0 && (
-          <div>
-            <div className="mb-6 flex items-center justify-between">
-              <h2 className="text-lg text-white/80">
-                找到 <span className="text-white font-semibold">{results.length}</span> 个结果
-              </h2>
-            </div>
-
-            {/* 单列列表布局 */}
-            <div className="space-y-4">
-              {results.map((item) => {
-                const content = item.type === 'video' ? item.video : item.imagePost;
-                if (!content) return null;
-
-                return (
-                  <div
-                    key={item.awemeId}
-                    className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden hover:border-white/20 transition-all hover:-translate-y-1"
-                  >
-                    {/* 主内容区 */}
-                    <div className="flex gap-4 p-4">
-                      {/* 左侧：封面预览 */}
-                      <Link
-                        href={`/aweme/${content.aweme_id}`}
-                        target="_blank"
-                        className="flex-shrink-0 w-64 h-80 sm:w-70 sm:h-96 rounded-xl overflow-hidden bg-zinc-900 group"
-                      >
-                        <img
-                          src={content.cover_url || ""}
-                          alt={content.desc}
-                          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-                        />
-                      </Link>
-
-                      {/* 右侧：信息区 */}
-                      <div className="flex-1 min-w-0 flex flex-col">
-                        {/* 类型标签 */}
-                        <div className="flex items-center gap-2 mb-2">
-                          <span className={`px-2 py-0.5 text-xs rounded ${
-                            item.type === 'video' 
-                              ? 'bg-blue-600/20 text-blue-300' 
-                              : 'bg-purple-600/20 text-purple-300'
-                          }`}>
-                            {item.type === 'video' ? '视频' : '图文'}
-                          </span>
-                          <span className="flex items-center gap-1 px-2 py-0.5 bg-green-600/20 text-green-300 text-xs rounded">
-                            <MessageSquare size={12} />
-                            匹配度: {(item.rank * 100).toFixed(1)}%
-                          </span>
-                        </div>
-
-                        {/* 描述 */}
-                        <Link href={`/aweme/${content.aweme_id}`} target="_blank">
-                          <p className="text-white/90 text-sm sm:text-base line-clamp-2 mb-3 hover:text-white transition-colors">
-                            {content.desc || "无描述"}
-                          </p>
-                        </Link>
-
-                        {/* 作者信息 */}
-                        <div className="flex items-center gap-2 mb-4">
-                          <img
-                            src={content.author.avatar_url || ""}
-                            alt={content.author.nickname}
-                            className="w-6 h-6 rounded-full ring-1 ring-white/20"
-                          />
-                          <span className="text-xs text-white/60">
-                            {content.author.nickname}
-                          </span>
-                        </div>
-
-                        {/* 匹配详情：展示后端返回的snippet（已包含<mark>标签） */}
-                        <div className="space-y-3">
-                          <div>
-                            <h4 className="flex items-center gap-2 text-xs font-medium text-green-300 mb-1.5">
-                              <MessageSquare size={14} />
-                              匹配内容
-                            </h4>
-                            <div
-                              className="text-xs text-white/70 bg-white/5 rounded-lg p-2 leading-relaxed"
-                              dangerouslySetInnerHTML={{ __html: item.snippet }}
-                              style={{
-                                wordBreak: 'break-word',
-                              }}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </main>
-    </div>
+    <Suspense fallback={<div className="p-6 text-zinc-400">Loading…</div>}>
+      <SearchClient initialQuery={q} />
+    </Suspense>
   );
 }