完成转录功能，中文脚本搜索，播放界面显示脚本

app/search/page.tsx

@@ -0,0 +1,268 @@
+"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");
+  };
+
+  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>
+  );
+}