373 lines
14 KiB
TypeScript
373 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowLeft, MessageSquare, 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";
|
|
|
|
// 匹配搜索结果类型（适配后端API）
|
|
type SearchResultItem = {
|
|
id: string;
|
|
awemeId: string;
|
|
type: "video" | "image";
|
|
rank: number;
|
|
snippet: string; // 后端返回的高亮片段，已包含<mark>标签
|
|
contentTags: string[];
|
|
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 [selectedTag, setSelectedTag] = useState<string | null>(null);
|
|
|
|
const buildSearchHref = useCallback((q: string, tag: string | null) => {
|
|
const params = new URLSearchParams();
|
|
const trimmed = q.trim();
|
|
if (trimmed) params.set("q", trimmed);
|
|
if (tag) params.set("tag", tag);
|
|
const queryString = params.toString();
|
|
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);
|
|
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 || []);
|
|
} catch (err) {
|
|
console.error("Search error:", err);
|
|
setResults([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
// 初始 & URL 变化时同步（用 searchParams 订阅 URL 更稳妥）
|
|
useEffect(() => {
|
|
const q = searchParams.get("q") || "";
|
|
const tagParam = searchParams.get("tag") || "";
|
|
const tag = tagParam && isVideoContentTag(tagParam) ? tagParam : null;
|
|
setQuery(q);
|
|
setSelectedTag(tag);
|
|
if (q || tag) {
|
|
performSearch(q, tag);
|
|
} else {
|
|
setResults([]);
|
|
setSearched(false);
|
|
}
|
|
}, [searchParams, performSearch]);
|
|
|
|
const handleSearch = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
const trimmed = query.trim();
|
|
if (!trimmed && !selectedTag) return;
|
|
router.push(buildSearchHref(trimmed, selectedTag));
|
|
};
|
|
|
|
const handleTagSelect = (tag: string) => {
|
|
const nextTag = selectedTag === tag ? null : tag;
|
|
setSelectedTag(nextTag);
|
|
router.push(buildSearchHref(query, nextTag));
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setQuery("");
|
|
setSelectedTag(null);
|
|
setResults([]);
|
|
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">
|
|
{/* 顶部搜索栏 */}
|
|
<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
|
|
type="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"
|
|
/>
|
|
<Search
|
|
size={20}
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 text-white/40"
|
|
/>
|
|
{(query || selectedTag) && (
|
|
<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() && !selectedTag)}
|
|
>
|
|
{loading ? "搜索中..." : "搜索"}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div className="max-w-7xl mx-auto px-4 pb-4">
|
|
<div className="flex gap-2 overflow-x-auto">
|
|
{VIDEO_CONTENT_TAGS.map((tag) => (
|
|
<button
|
|
key={tag}
|
|
type="button"
|
|
onClick={() => handleTagSelect(tag)}
|
|
className={`flex-shrink-0 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
|
|
selectedTag === tag
|
|
? "border-blue-400 bg-blue-500/20 text-blue-200"
|
|
: "border-white/10 bg-white/5 text-white/60 hover:border-white/20 hover:text-white"
|
|
}`}
|
|
>
|
|
{tag}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</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 && !selectedTag && (
|
|
<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"
|
|
>
|
|
{content.cover_url ? (
|
|
<Image
|
|
src={content.cover_url}
|
|
alt={content.desc}
|
|
width={280}
|
|
height={384}
|
|
unoptimized
|
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
) : (
|
|
<div className="h-full w-full bg-zinc-800" />
|
|
)}
|
|
</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>
|
|
{item.contentTags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-2 py-0.5 text-xs rounded bg-blue-500/15 text-blue-200"
|
|
>
|
|
{tag}
|
|
</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">
|
|
{content.author.avatar_url ? (
|
|
<Image
|
|
src={content.author.avatar_url}
|
|
alt={content.author.nickname}
|
|
width={24}
|
|
height={24}
|
|
unoptimized
|
|
className="w-6 h-6 rounded-full ring-1 ring-white/20"
|
|
/>
|
|
) : (
|
|
<div className="h-6 w-6 rounded-full bg-white/10 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"
|
|
style={{
|
|
wordBreak: "break-word",
|
|
}}
|
|
>
|
|
{renderSnippet(item.snippet)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|