104 lines
4.2 KiB
TypeScript
104 lines
4.2 KiB
TypeScript
import { ArrowLeft, Search } from "lucide-react";
|
|
import { type FormEvent, useEffect, useMemo, useState } from "react";
|
|
import { Link, useNavigate, useSearchParams } from "react-router";
|
|
import { EmptyState } from "~/components/console/empty-state.tsx";
|
|
import { PageHeader } from "~/components/console/page-header.tsx";
|
|
import { useQueryState } from "~/components/console/use-query-state.ts";
|
|
import {
|
|
parseWorkRef,
|
|
RELEASE_FILTER_KEYS,
|
|
type ReleaseFilterState,
|
|
ReleaseResults,
|
|
} from "~/components/search/release-results.tsx";
|
|
import { ActionsSection, WorksSection } from "~/components/search/search-sections.tsx";
|
|
import { SitePickerDialog } from "~/components/search/site-picker-dialog.tsx";
|
|
import { releaseSearchPath } from "~/components/search/work-card.tsx";
|
|
import { Button } from "~/components/ui/button.tsx";
|
|
import { Input } from "~/components/ui/input.tsx";
|
|
|
|
// 全局搜索(SEARCH-2 两阶段):/console/search?q= 先列作品(本地 + TMDB,带库内状态)与操作,不查站点;
|
|
// 点「搜索资源」选站点后进第二阶段 ?q=&work=&in=&t=(work = local:<id> / tmdb:<type>:<id> / q:<关键词>,in = 站点 ID)。
|
|
|
|
export const meta = () => [{ title: "搜索 · UHD 媒体自动化控制台" }];
|
|
|
|
export default function SearchPage() {
|
|
const [params, setParams] = useSearchParams();
|
|
const navigate = useNavigate();
|
|
const q = (params.get("q") ?? "").trim();
|
|
const work = params.get("work") ?? "";
|
|
const title = params.get("t") ?? q;
|
|
const siteIds = params.get("in") ?? "";
|
|
const target = useMemo(() => (work ? parseWorkRef(work) : null), [work]);
|
|
const [input, setInput] = useState(q);
|
|
const [picking, setPicking] = useState(false);
|
|
useEffect(() => setInput(q), [q]);
|
|
const f = useQueryState(RELEASE_FILTER_KEYS);
|
|
|
|
const submit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
const next = input.trim();
|
|
if (!next || (next === q && !work)) return;
|
|
// 换关键词回到第一阶段,筛选随之清空
|
|
setParams(new URLSearchParams({ q: next }));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title="搜索" description="先看作品和库内状态，需要时再到站点搜资源。" />
|
|
<form onSubmit={submit} className="mb-6 flex gap-2">
|
|
<div className="relative min-w-0 flex-1 sm:max-w-xl">
|
|
<Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
placeholder="作品名、原名或别名"
|
|
aria-label="搜索关键词"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<Button type="submit" disabled={!input.trim()}>
|
|
搜索
|
|
</Button>
|
|
</form>
|
|
|
|
{!q ? (
|
|
<EmptyState icon={Search} title="输入作品名开始搜索" description="也可以在任意页面按 Ctrl/⌘ K 打开搜索。" />
|
|
) : target ? (
|
|
<div key={`${work}|${siteIds}`} className="space-y-4">
|
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
<Link
|
|
to={`/console/search?${new URLSearchParams({ q }).toString()}`}
|
|
className="inline-flex items-center gap-1 text-caption text-muted-foreground hover:text-foreground"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
返回作品
|
|
</Link>
|
|
<h2 className="min-w-0 text-body font-semibold break-words text-foreground">
|
|
{target.q ? `关键词「${target.q}」` : `「${title}」`}的资源
|
|
</h2>
|
|
</div>
|
|
<ReleaseResults
|
|
target={target}
|
|
siteIds={siteIds}
|
|
filters={f.values as ReleaseFilterState}
|
|
setFilter={f.set}
|
|
resetFilters={f.reset}
|
|
onChangeSites={() => setPicking(true)}
|
|
/>
|
|
<SitePickerDialog
|
|
open={picking}
|
|
onOpenChange={setPicking}
|
|
title={target.q ?? title}
|
|
onConfirm={(ids) => navigate(releaseSearchPath({ title, ref: work }, ids))}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div key={q} className="space-y-8">
|
|
<WorksSection q={q} />
|
|
<ActionsSection q={q} />
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|