feat: 搜索改为子串匹配，支持多关键词、排除词与分页加载

- 不再依赖 zhparser 分词：关键词按空格拆分，全部需在描述或语音转写中以子串出现；-词表示排除 - 英文/数字关键词要求词首对齐，避免 ai 命中 said - 按描述/转写命中次数打分，同分按发布时间倒序；总数随查询一并返回 - 返回结构化高亮片段（descParts / snippet），前端高亮描述与转写命中位置 - 前端显示描述/语音命中标记、真实结果总数，并支持加载更多 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-08 22:43:15 +08:00
parent 11d9d35002
commit 182ca9cf05
3 changed files with 489 additions and 257 deletions
@@ -1,19 +1,28 @@
 "use client";

-import { ArrowLeft, MessageSquare, Search, X } from "lucide-react";
+import { ArrowLeft, FileText, Mic, Search, X } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { type FormEvent, useCallback, useEffect, useState } from "react";
-import { VIDEO_CONTENT_TAGS, isVideoContentTag } from "@/lib/video-tags";
+import {
+  type FormEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import type { SnippetPart } from "@/lib/search";
+import { isVideoContentTag, VIDEO_CONTENT_TAGS } from "@/lib/video-tags";

 // 匹配搜索结果类型（适配后端API）
 type SearchResultItem = {
  id: string;
  awemeId: string;
  type: "video" | "image";
-  rank: number;
-  snippet: string; // 后端返回的高亮片段，已包含<mark>标签
+  score: number;
+  matchedIn: ("desc" | "transcript")[];
+  descParts: SnippetPart[]; // 完整描述，标出命中位置
+  snippet: SnippetPart[] | null; // 语音转写的命中片段
  contentTags: string[];
  video?: {
    aweme_id: string;
@@ -38,6 +47,27 @@ type SearchResultItem = {
    };
  };
 };
+
+const PAGE_SIZE = 30;
+
+function renderParts(parts: SnippetPart[]) {
+  let offset = 0;
+  return parts.map((part) => {
+    const key = `${offset}-${part.text}`;
+    offset += part.text.length;
+    return part.hit ? (
+      <mark
+        key={key}
+        className="rounded-sm bg-yellow-400/80 px-0.5 text-zinc-950"
+      >
+        {part.text}
+      </mark>
+    ) : (
+      <span key={key}>{part.text}</span>
+    );
+  });
+}
+
 export default function SearchClient({
  initialQuery,
 }: {
@@ -48,7 +78,12 @@ export default function SearchClient({

  const [query, setQuery] = useState(initialQuery);
  const [results, setResults] = useState<SearchResultItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  // 只采用最近一次请求的结果，避免快速切换关键词时旧结果覆盖新结果
+  const requestIdRef = useRef(0);
  const [searched, setSearched] = useState(false);
  const [selectedTag, setSelectedTag] = useState<string | null>(null);

@@ -61,30 +96,79 @@ export default function SearchClient({
    return queryString ? `/search?${queryString}` : "/search";
  }, []);

-  const performSearch = useCallback(async (q: string, tag: string | null) => {
-    const trimmed = q.trim();
-    if (!trimmed && !tag) {
-      setResults([]);
-      setSearched(false);
-      return;
-    }
-    setLoading(true);
-    setSearched(true);
-    try {
-      const params = new URLSearchParams({ limit: "60" });
-      if (trimmed) params.set("q", trimmed);
+  const fetchPage = useCallback(
+    async (q: string, tag: string | null, pageNum: number) => {
+      const params = new URLSearchParams({
+        limit: String(PAGE_SIZE),
+        page: String(pageNum),
+      });
+      if (q) params.set("q", q);
      if (tag) params.set("tag", tag);
      const res = await fetch(`/api/search?${params.toString()}`);
      if (!res.ok) throw new Error("Search failed");
-      const data = await res.json();
-      setResults(data.results || []);
+      return (await res.json()) as {
+        results?: SearchResultItem[];
+        total?: number;
+      };
+    },
+    [],
+  );
+
+  const performSearch = useCallback(
+    async (q: string, tag: string | null) => {
+      const trimmed = q.trim();
+      const requestId = ++requestIdRef.current;
+      if (!trimmed && !tag) {
+        setResults([]);
+        setTotal(0);
+        setSearched(false);
+        return;
+      }
+      setLoading(true);
+      setSearched(true);
+      setPage(1);
+      try {
+        const data = await fetchPage(trimmed, tag, 1);
+        if (requestId !== requestIdRef.current) return;
+        setResults(data.results || []);
+        setTotal(data.total ?? 0);
+      } catch (err) {
+        if (requestId !== requestIdRef.current) return;
+        console.error("Search error:", err);
+        setResults([]);
+        setTotal(0);
+      } finally {
+        if (requestId === requestIdRef.current) setLoading(false);
+      }
+    },
+    [fetchPage],
+  );
+
+  const loadMore = async () => {
+    const q = (searchParams.get("q") || "").trim();
+    const tagParam = searchParams.get("tag") || "";
+    const tag = tagParam && isVideoContentTag(tagParam) ? tagParam : null;
+    const requestId = requestIdRef.current;
+    const nextPage = page + 1;
+    setLoadingMore(true);
+    try {
+      const data = await fetchPage(q, tag, nextPage);
+      if (requestId !== requestIdRef.current) return;
+      setResults((prev) => {
+        const seen = new Set(prev.map((r) => r.id));
+        return [
+          ...prev,
+          ...(data.results || []).filter((r) => !seen.has(r.id)),
+        ];
+      });
+      setTotal(data.total ?? 0);
+      setPage(nextPage);
    } catch (err) {
      console.error("Search error:", err);
-      setResults([]);
    } finally {
-      setLoading(false);
+      if (requestId === requestIdRef.current) setLoadingMore(false);
    }
-  }, []);
+  };

  // 初始 & URL 变化时同步（用 searchParams 订阅 URL 更稳妥）
  useEffect(() => {
@@ -96,7 +180,9 @@ export default function SearchClient({
    if (q || tag) {
      performSearch(q, tag);
    } else {
+      requestIdRef.current++;
      setResults([]);
+      setTotal(0);
      setSearched(false);
    }
  }, [searchParams, performSearch]);
@@ -118,28 +204,11 @@ export default function SearchClient({
    setQuery("");
    setSelectedTag(null);
    setResults([]);
+    setTotal(0);
    setSearched(false);
    router.push("/search");
  };

-  const renderSnippet = (snippet: string) => {
-    let highlighted = false;
-    let offset = 0;
-    return snippet.split(/(<mark>|<\/mark>)/g).map((part) => {
-      offset += part.length;
-      if (part === "<mark>") {
-        highlighted = true;
-        return null;
-      }
-      if (part === "</mark>") {
-        highlighted = false;
-        return null;
-      }
-      if (!part) return null;
-      return highlighted ? <mark key={`${offset}-${part}`}>{part}</mark> : part;
-    });
-  };
-
  return (
    <div className="min-h-screen bg-zinc-950 text-white">
      {/* 顶部搜索栏 */}
@@ -234,7 +303,7 @@ export default function SearchClient({
            <Search size={64} className="mb-4 opacity-20" />
            <p className="text-xl">输入关键词开始搜索</p>
            <p className="text-sm mt-2">
-              支持搜索视频描述、图文描述及语音转写内容
+              按原文匹配描述和语音转写，多个关键词用空格分隔，以 - 开头表示排除
            </p>
          </div>
        )}
@@ -243,10 +312,7 @@ export default function SearchClient({
          <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>{" "}
+                找到 <span className="text-white font-semibold">{total}</span>{" "}
                个结果
              </h2>
            </div>
@@ -260,7 +326,7 @@ export default function SearchClient({

                return (
                  <div
-                    key={item.awemeId}
+                    key={item.id}
                    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"
                  >
                    {/* 主内容区 */}
@@ -298,10 +364,18 @@ export default function SearchClient({
                          >
                            {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>
+                          {item.matchedIn.includes("desc") && (
+                            <span className="flex items-center gap-1 px-2 py-0.5 bg-green-600/20 text-green-300 text-xs rounded">
+                              <FileText size={12} />
+                              描述命中
+                            </span>
+                          )}
+                          {item.matchedIn.includes("transcript") && (
+                            <span className="flex items-center gap-1 px-2 py-0.5 bg-green-600/20 text-green-300 text-xs rounded">
+                              <Mic size={12} />
+                              语音命中
+                            </span>
+                          )}
                          {item.contentTags.map((tag) => (
                            <span
                              key={tag}
@@ -317,8 +391,10 @@ export default function SearchClient({
                          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 className="text-white/90 text-sm sm:text-base line-clamp-3 mb-3 hover:text-white transition-colors">
+                            {item.descParts.length > 0
+                              ? renderParts(item.descParts)
+                              : "无描述"}
                          </p>
                        </Link>

@@ -341,29 +417,44 @@ export default function SearchClient({
                          </span>
                        </div>

-                        {/* 匹配详情：展示后端返回的snippet（已包含<mark>标签） */}
-                        <div className="space-y-3">
+                        {/* 语音转写片段：命中时展示命中位置附近的文字 */}
+                        {item.snippet && item.snippet.length > 0 && (
                          <div>
                            <h4 className="flex items-center gap-2 text-xs font-medium text-green-300 mb-1.5">
-                              <MessageSquare size={14} />
-                              匹配内容
+                              <Mic size={14} />
+                              {item.matchedIn.includes("transcript")
+                                ? "语音内容"
+                                : "语音转写"}
                            </h4>
                            <div
                              className="text-xs text-white/70 bg-white/5 rounded-lg p-2 leading-relaxed"
-                              style={{
-                                wordBreak: "break-word",
-                              }}
+                              style={{ wordBreak: "break-word" }}
                            >
-                              {renderSnippet(item.snippet)}
+                              {renderParts(item.snippet)}
                            </div>
                          </div>
-                        </div>
+                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
+
+            {results.length < total && (
+              <div className="mt-8 flex justify-center">
+                <button
+                  type="button"
+                  onClick={loadMore}
+                  disabled={loadingMore}
+                  className="rounded-full border border-white/10 bg-white/5 px-6 py-2.5 text-sm text-white/80 transition-colors hover:border-white/20 hover:text-white disabled:opacity-50"
+                >
+                  {loadingMore
+                    ? "加载中..."
+                    : `加载更多（还有 ${total - results.length} 个）`}
+                </button>
+              </div>
+            )}
          </div>
        )}
      </main>