feat: 播放页按来源列表切换,新增作者/搜索/hashtag 侧栏

- 播放上下文:作品链接带上来源(搜索、标签、作者、hashtag),上一条/下一条
  在该列表内移动;当前作品不在列表中时退回全部作品的发布时间顺序
- 顶部提示标签显示当前列表与位置,点击打开侧栏列表,✕ 退出
- 侧栏改为「评论 | TA的作品 | 搜索结果/#hashtag」标签页,作品封面网格可就地切换
- 作者模式:打开「TA的作品」进入,关闭侧栏不退出,点提示 ✕ 后回到原来的列表
- 从搜索结果进入或点 hashtag 时自动打开对应列表
- 描述中的 hashtag 可点击,按完整 hashtag 精确匹配(#丰川祥子 不含 #丰川祥子cos)
- 新增 /api/playlist;搜索 SQL 抽到 lib/search-query.ts 与播放页共用,保证顺序一致
- 移动端:底部抽屉、点作品后收起,媒体区支持上下滑切换

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-11-09 00:50:09 +08:00
co-authored by Claude Opus 5.5
parent 182ca9cf05
commit b84fcec77b
28 changed files with 1592 additions and 282 deletions
+13 -2
View File
@@ -8,9 +8,11 @@ import {
type FormEvent,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { playbackContextQuery } from "@/lib/playback-context";
import type { SnippetPart } from "@/lib/search";
import { isVideoContentTag, VIDEO_CONTENT_TAGS } from "@/lib/video-tags";
@@ -209,6 +211,15 @@ export default function SearchClient({
router.push("/search");
};
// 从搜索结果进入播放页时,上下切换在这次的搜索结果里移动(与当前 URL 上的搜索条件一致)
const resultLinkQuery = useMemo(() => {
const q = (searchParams.get("q") || "").trim();
const tagParam = searchParams.get("tag") || "";
const tag = tagParam && isVideoContentTag(tagParam) ? tagParam : null;
if (!q && !tag) return "";
return playbackContextQuery({ kind: "search", q, tag });
}, [searchParams]);
return (
<div className="min-h-screen bg-zinc-950 text-white">
{/* 顶部搜索栏 */}
@@ -333,7 +344,7 @@ export default function SearchClient({
<div className="flex gap-4 p-4">
{/* 左侧:封面预览 */}
<Link
href={`/aweme/${content.aweme_id}`}
href={`/aweme/${content.aweme_id}${resultLinkQuery}`}
target="_blank"
className="flex-shrink-0 w-64 h-80 sm:w-70 sm:h-96 rounded-xl overflow-hidden bg-zinc-900 group"
>
@@ -388,7 +399,7 @@ export default function SearchClient({
{/* 描述 */}
<Link
href={`/aweme/${content.aweme_id}`}
href={`/aweme/${content.aweme_id}${resultLinkQuery}`}
target="_blank"
>
<p className="text-white/90 text-sm sm:text-base line-clamp-3 mb-3 hover:text-white transition-colors">