@@ -27,6 +31,8 @@ export const AppHeader = ({ token, mock }: AppHeaderProps) => (
)}
+
+ {searchEnabled &&
}
diff --git a/src/app/(app)/components/search-button.tsx b/src/app/(app)/components/search-button.tsx
new file mode 100644
index 0000000..e4f0d78
--- /dev/null
+++ b/src/app/(app)/components/search-button.tsx
@@ -0,0 +1,60 @@
+// 顶栏搜索按钮：打开搜索弹窗，并在按钮上显示后台搜索的进度与完成提示
+"use client";
+
+import { CheckIcon, SearchIcon, TriangleAlertIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+import { useSearchStore } from "@/stores/search-store";
+
+import { SearchDialog } from "./search-dialog";
+
+export const SearchButton = () => {
+ const status = useSearchStore((state) => state.status);
+ const total = useSearchStore((state) => state.total);
+ const completed = useSearchStore((state) => state.completed);
+ const unseen = useSearchStore((state) => state.unseen);
+ const setOpen = useSearchStore((state) => state.setOpen);
+
+ const searching = status === "searching";
+ // 完成/失败后一直保持到用户打开弹窗看过为止
+ const finished = unseen && status === "done";
+ const failed = unseen && status === "failed";
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/src/app/(app)/components/search-dialog.tsx b/src/app/(app)/components/search-dialog.tsx
new file mode 100644
index 0000000..36efa5d
--- /dev/null
+++ b/src/app/(app)/components/search-dialog.tsx
@@ -0,0 +1,256 @@
+// 搜索弹窗：关键词、进度、失败站点与结果列表；关闭弹窗不会中断搜索（状态在 search-store）
+"use client";
+
+import { useState } from "react";
+import {
+ ChevronDownIcon,
+ ListFilterIcon,
+ SearchIcon,
+ TriangleAlertIcon
+} from "lucide-react";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger
+} from "@/components/ui/collapsible";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle
+} from "@/components/ui/dialog";
+import {
+ Empty,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle
+} from "@/components/ui/empty";
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupInput
+} from "@/components/ui/input-group";
+import {
+ Progress,
+ ProgressLabel,
+ ProgressValue
+} from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import { MAX_QUERY_LENGTH } from "@/constants/search";
+import { useSearchResults } from "@/hooks/use-search-results";
+import { cn } from "@/lib/utils";
+import { useSearchStore, type SearchStatus } from "@/stores/search-store";
+import { useSearchViewStore } from "@/stores/search-view-store";
+
+import { SearchResultList } from "./search-result-list";
+import { SearchResultToolbar } from "./search-result-toolbar";
+
+/** 结果区固定高度：弹窗不随结果数量忽高忽低 */
+const RESULT_HEIGHT = "h-[min(40rem,60dvh)]";
+
+const progressLabel = (status: SearchStatus, resultCount: number) => {
+ switch (status) {
+ case "searching":
+ return `正在搜索 · 已有 ${resultCount} 条结果`;
+ case "done":
+ return `搜索完成 · 共 ${resultCount} 条结果`;
+ case "cancelled":
+ return `已取消 · 已有 ${resultCount} 条结果`;
+ default:
+ return `搜索失败 · 已有 ${resultCount} 条结果`;
+ }
+};
+
+const SearchForm = () => {
+ const status = useSearchStore((state) => state.status);
+ const start = useSearchStore((state) => state.start);
+ const cancel = useSearchStore((state) => state.cancel);
+ // 弹窗每次打开都会重新挂载，从最近一次搜索的关键词继续
+ const [draft, setDraft] = useState(() => useSearchStore.getState().query);
+ const keyword = draft.trim();
+
+ return (
+
+ );
+};
+
+const SearchProgress = () => {
+ const status = useSearchStore((state) => state.status);
+ const total = useSearchStore((state) => state.total);
+ const completed = useSearchStore((state) => state.completed);
+ const resultCount = useSearchStore((state) => state.results.length);
+ const failures = useSearchStore((state) => state.failures);
+ const error = useSearchStore((state) => state.error);
+
+ if (status === "idle") return null;
+
+ return (
+
+
+
+ {status === "failed" && error && (
+
+
+ {error}
+
+ )}
+
+ {failures.length > 0 && (
+
+
+ {failures.length} 个站点没有返回结果
+
+
+
+
+ {failures.map((failure) => (
+ -
+ {failure.indexerName} — {failure.error}
+
+ ))}
+
+
+
+ )}
+
+ );
+};
+
+const SearchResults = () => {
+ const status = useSearchStore((state) => state.status);
+ const results = useSearchStore((state) => state.results);
+ const sortKey = useSearchViewStore((state) => state.sortKey);
+ const order = useSearchViewStore((state) => state.order);
+ const setKeyword = useSearchViewStore((state) => state.setKeyword);
+ const { items, terms } = useSearchResults(results);
+
+ if (results.length > 0)
+ return (
+
+
+ {items.length > 0 ? (
+
+ ) : (
+
+
+
+
+
+ 没有匹配的结果
+
+ 共 {results.length} 条结果中没有同时包含这些词的
+
+
+
+
+ )}
+
+ );
+
+ if (status === "searching")
+ return (
+
+ {Array.from({ length: 10 }, (_, index) => (
+
+ ))}
+
+ );
+
+ const idle = status === "idle";
+ return (
+
+
+
+
+
+ {idle ? "输入关键词开始搜索" : "没有找到结果"}
+ {idle ? "" : "换个关键词试试"}
+
+
+ );
+};
+
+export const SearchDialog = () => {
+ const open = useSearchStore((state) => state.open);
+ const setOpen = useSearchStore((state) => state.setOpen);
+
+ return (
+
+ );
+};
diff --git a/src/app/(app)/components/search-result-list.tsx b/src/app/(app)/components/search-result-list.tsx
new file mode 100644
index 0000000..b788c80
--- /dev/null
+++ b/src/app/(app)/components/search-result-list.tsx
@@ -0,0 +1,226 @@
+// 搜索结果列表（虚拟滚动）：结果可达数千条，行高固定，只渲染可见行
+"use client";
+
+import { memo, useState } from "react";
+import {
+ ArrowDownIcon,
+ ArrowUpIcon,
+ CheckIcon,
+ CloudDownloadIcon,
+ CopyIcon,
+ ExternalLinkIcon,
+ type LucideIcon
+} from "lucide-react";
+
+import { HighlightText } from "@/components/highlight-text";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger
+} from "@/components/ui/tooltip";
+import { VirtualList } from "@/components/virtual-list";
+import { useCopy } from "@/hooks/use-copy";
+import { useAddMagnet } from "@/hooks/use-torrents";
+import { cn } from "@/lib/utils";
+import { useSearchStore } from "@/stores/search-store";
+import type { SearchResult } from "@/types/search";
+import { formatRelativeDate } from "@/utils/date";
+import { formatBytes, formatCount } from "@/utils/format";
+
+/** 名称完整换行显示，行高不固定；这是未测量前的估计值（日期行 + 单行名称 + 底栏） */
+const ESTIMATED_ROW_HEIGHT = 108;
+
+type RowActionProps = {
+ label: string;
+ icon: LucideIcon;
+ /** 进行中：显示 Spinner 并禁用 */
+ pending?: boolean;
+ disabled?: boolean;
+ /** 链接型操作：在新标签页打开 */
+ href?: string;
+ onClick?: () => void;
+ className?: string;
+};
+
+/** 行尾的图标操作：只显示图标，名称放在 Tooltip 与 aria-label */
+const RowAction = ({
+ label,
+ icon: Icon,
+ pending = false,
+ disabled = false,
+ href,
+ onClick,
+ className
+}: RowActionProps) => (
+
+
+ )
+ }
+ : {})}
+ />
+ }
+ >
+ {pending ? : }
+
+ {label}
+
+);
+
+/** 每行都能跳转到站点；有 magnet 时另有复制、添加到 TorBox */
+const ResultActions = ({ result }: { result: SearchResult }) => {
+ const copy = useCopy();
+ const status = useSearchStore((state) => state.torrentStatus[result.id]);
+ const setTorrentStatus = useSearchStore((state) => state.setTorrentStatus);
+ const { mutate: addToTorbox } = useAddMagnet({
+ onMutate: () => setTorrentStatus(result.id, "adding"),
+ onSuccess: () => setTorrentStatus(result.id, "added"),
+ onError: () => setTorrentStatus(result.id)
+ });
+ const { magnet, detailsUrl } = result;
+
+ return (
+ <>
+ {magnet && (
+ <>
+
copy(magnet, "已复制 magnet 链接")}
+ />
+ addToTorbox(magnet)}
+ />
+
+ )}
+ {detailsUrl && (
+
+ )}
+
+ );
+};
+
+/** 做种 / 下载数：只显示图标与数字，名称放在 title 与读屏文字里 */
+const Stat = ({
+ label,
+ icon: Icon,
+ value
+}: {
+ label: string;
+ icon: LucideIcon;
+ value: number;
+}) => (
+
+
+ {label}
+ {formatCount(value)}
+
+);
+
+const ResultRow = memo(function ResultRow({
+ result,
+ terms,
+ now
+}: {
+ result: SearchResult;
+ terms: readonly string[];
+ now: number;
+}) {
+ const { publishedAt, size, seeders, leechers } = result;
+
+ return (
+
+
+ {/* 站点没给发布时间时留空，来源仍靠右 */}
+
+ {publishedAt ? formatRelativeDate(publishedAt, now) : null}
+
+
+ {result.indexerName}
+
+
+ {/* 名称不省略；没有空格的超长名称也要能在容器内断行 */}
+
+
+
+
+
+ {size != null && {formatBytes(size)}}
+ {seeders != null && (
+
+ )}
+ {leechers != null && (
+
+ )}
+
+ {/* 窄屏换到下一行，靠右 */}
+
+
+
+
+
+
+
+
+
+ setKeyword(event.target.value)}
+ placeholder="在结果中筛选，空格分隔多个词"
+ aria-label="在结果中筛选"
+ autoComplete="off"
+ />
+ {keyword && (
+
+
+ {shown} / {total}
+
+ setKeyword("")}
+ >
+
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 5a03a43..2983417 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -1,5 +1,6 @@
// 登录后页面布局
import { isMockMode } from "@/server/env";
+import { isSearchAvailable } from "@/server/search";
import { requireSessionToken } from "@/server/session";
import { AppHeader } from "./components/app-header";
@@ -10,7 +11,11 @@ const AppLayout = async ({ children }: { children: React.ReactNode }) => {
return (
);
diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
new file mode 100644
index 0000000..2144173
--- /dev/null
+++ b/src/app/api/search/route.ts
@@ -0,0 +1,50 @@
+// 搜索接口：并行查询全部 Indexer，以 NDJSON 流逐个交付结果
+import type { NextRequest } from "next/server";
+import { MAX_QUERY_LENGTH } from "@/constants/search";
+import { guard } from "@/server/auth";
+import { JackettError } from "@/server/jackett";
+import { createLogger } from "@/server/logger";
+import { jsonError, ndjsonResponse, withApi } from "@/server/response";
+import {
+ getSearchIndexers,
+ isSearchAvailable,
+ runSearch
+} from "@/server/search";
+import type { SearchEvent } from "@/types/search";
+
+const log = createLogger("search");
+
+export const dynamic = "force-dynamic";
+
+export const GET = withApi(async (req: NextRequest) => {
+ const denied = guard(req);
+ if (denied) return denied;
+ if (!isSearchAvailable()) return jsonError(503, "未配置 Jackett");
+
+ const query = req.nextUrl.searchParams.get("q")?.trim() ?? "";
+ if (!query) return jsonError(400, "请输入搜索关键词");
+ if (query.length > MAX_QUERY_LENGTH)
+ return jsonError(400, `关键词不能超过 ${MAX_QUERY_LENGTH} 个字符`);
+
+ // 先取 Indexer 列表：失败时还没开始写流，可以返回正常的错误响应
+ let indexers;
+ try {
+ indexers = await getSearchIndexers(req.signal);
+ } catch (error) {
+ log.error({ err: error }, "获取 Indexer 列表失败");
+ return jsonError(
+ 502,
+ error instanceof JackettError
+ ? `Jackett 返回错误：${error.message}`
+ : "无法连接 Jackett"
+ );
+ }
+ if (indexers.length === 0)
+ return jsonError(404, "Jackett 中没有已配置的 Indexer");
+
+ return ndjsonResponse(req, async (send, signal) => {
+ send({ type: "start", total: indexers.length });
+ await runSearch(indexers, query, signal, send);
+ send({ type: "done" });
+ });
+});
diff --git a/src/app/api/torrents/route.ts b/src/app/api/torrents/route.ts
new file mode 100644
index 0000000..1a0d329
--- /dev/null
+++ b/src/app/api/torrents/route.ts
@@ -0,0 +1,35 @@
+// 添加 torrent 接口（magnet）
+import type { NextRequest } from "next/server";
+import { MAX_MAGNET_LENGTH } from "@/constants/torbox";
+import { guard } from "@/server/auth";
+import { createLogger } from "@/server/logger";
+import { jsonError, jsonOk, withApi } from "@/server/response";
+import { addMagnet } from "@/server/torbox";
+import { isMagnetLink } from "@/utils/magnet";
+
+const log = createLogger("torrents");
+
+export const dynamic = "force-dynamic";
+
+export const POST = withApi(async (req: NextRequest) => {
+ const denied = guard(req);
+ if (denied) return denied;
+
+ const body = await req.json().catch(() => ({}));
+ const magnet = typeof body.magnet === "string" ? body.magnet.trim() : "";
+ if (!magnet || magnet.length > MAX_MAGNET_LENGTH || !isMagnetLink(magnet))
+ return jsonError(400, "magnet 链接格式不正确");
+
+ try {
+ const result = await addMagnet(magnet);
+ log.info({ id: result.id, hash: result.hash }, "已添加 magnet");
+ return jsonOk(result);
+ } catch (error) {
+ // TorBox 的失败原因（名额已满、限流等）对用户有意义，原样透出
+ log.error({ err: error }, "添加 magnet 失败");
+ return jsonError(
+ 502,
+ error instanceof Error ? error.message : "upstream error"
+ );
+ }
+});
diff --git a/src/components/highlight-text.tsx b/src/components/highlight-text.tsx
new file mode 100644
index 0000000..a3cc6c0
--- /dev/null
+++ b/src/components/highlight-text.tsx
@@ -0,0 +1,38 @@
+// 高亮文本中命中的关键词（不区分大小写）
+import { Fragment } from "react";
+
+const escapeRegExp = (value: string) =>
+ value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+type HighlightTextProps = {
+ text: string;
+ /** 要高亮的词；为空时原样输出 */
+ terms: readonly string[];
+};
+
+export const HighlightText = ({ text, terms }: HighlightTextProps) => {
+ if (terms.length === 0) return text;
+
+ // 长词优先，避免「ubuntu」被「ub」抢先匹配后只亮一半
+ const pattern = [...terms]
+ .sort((a, b) => b.length - a.length)
+ .map(escapeRegExp)
+ .join("|");
+ // 带捕获组的 split：奇数下标的片段就是命中的部分
+ const parts = text.split(new RegExp(`(${pattern})`, "i"));
+
+ return parts.map((part, index) =>
+ index % 2 === 1 ? (
+ // 实心翠绿 + 深墨字（对比度 8.2:1）；半透明底在深色卡片上几乎看不出来。
+ // box-decoration-clone：命中词跨行断开时，每一段都保留完整的圆角与内边距
+
+ {part}
+
+ ) : (
+ {part}
+ )
+ );
+};
diff --git a/src/components/image-lightbox.tsx b/src/components/image-lightbox.tsx
index 817c52e..e57925e 100644
--- a/src/components/image-lightbox.tsx
+++ b/src/components/image-lightbox.tsx
@@ -94,6 +94,8 @@ const SINGLE_RENDER: Render = {
/** 灯箱配色映射到现有主题变量，不新增颜色 */
const STYLES: SlotStyles = {
root: {
+ // 层级：浮层 z-50 < 灯箱 < 通知 z-100；库默认 9999 会盖住通知
+ "--yarl__portal_zindex": 90,
"--yarl__color_backdrop": "var(--background)",
"--yarl__color_button": "var(--muted-foreground)",
"--yarl__color_button_active": "var(--foreground)",
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index f200244..f292e66 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -29,7 +29,9 @@ function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
= {
+ items: readonly T[];
+ /** 稳定的行标识；重新排序后已测量的行高会跟着行走 */
+ getItemKey: (item: T) => string | number;
+ /** 未测量前的估计行高（px），越接近实际值滚动条越稳 */
+ estimateSize: number;
+ renderItem: (item: T) => ReactNode;
+ overscan?: number;
+ /** 值变化时滚回顶部，如筛选、排序条件改变；流式追加数据不应改变它 */
+ resetScrollKey?: string;
+ className?: string;
+};
+
+export const VirtualList = ({
+ items,
+ getItemKey,
+ estimateSize,
+ renderItem,
+ overscan = 8,
+ resetScrollKey,
+ className
+}: VirtualListProps) => {
+ const scrollRef = useRef(null);
+
+ // eslint-disable-next-line react-hooks/incompatible-library -- 项目未启用 React Compiler；虚拟器每次渲染都需读取最新滚动状态
+ const virtualizer = useVirtualizer({
+ count: items.length,
+ getScrollElement: () => scrollRef.current,
+ getItemKey: (index) => getItemKey(items[index]),
+ estimateSize: () => estimateSize,
+ overscan
+ });
+
+ useEffect(() => {
+ scrollRef.current?.scrollTo({ top: 0 });
+ }, [resetScrollKey]);
+
+ const rows = virtualizer.getVirtualItems();
+ const top = rows[0]?.start ?? 0;
+ const bottom = virtualizer.getTotalSize() - (rows.at(-1)?.end ?? 0);
+
+ return (
+
+
+ {rows.map((row) => (
+ // measureElement 读取 data-index 并监听尺寸变化
+
+ {renderItem(items[row.index])}
+
+ ))}
+
+