feat(web): global search — top bar entry, Ctrl/Cmd+K palette and /console/search results (FE-3)
- palette queries media + actions: local works open, TMDB candidates view/subscribe, page jumps
- results page: works / releases / actions; release filters, facets, sort, cursor, partial-site warning
- release rows: download via /search/releases/{siteId}/{siteReleaseId}/plan, delegate to Agent
- smoke: rules tabs, preferences redirect, search page
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
2c6a89f309
commit
393a4cadcc
12 files changed
+1399
-1
No files matched your search
@@ -0,0 +1,175 @@
|
||||
import type { TmdbCandidate } from "@umt/contracts";
|
||||
import { ArrowRight, Film, Plus } from "lucide-react";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import { useSearch } from "~/api/search.ts";
|
||||
import { useCreateSubscription } from "~/api/subscriptions.ts";
|
||||
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { settingsPath } from "~/components/console/nav.ts";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { errorMessage } from "~/lib/api.ts";
|
||||
import { actionIcon, mediaKindLabel, slotSummary } from "./search-labels.ts";
|
||||
|
||||
// 结果页的"作品"与"操作"两段(资源段见 release-results.tsx)
|
||||
|
||||
function SectionTitle({ id, title, extra }: { id: string; title: string; extra?: string }) {
|
||||
return (
|
||||
<h2 id={id} className="mb-3 text-body font-semibold text-foreground">
|
||||
{title}
|
||||
{extra ? <span className="ml-2 text-caption font-normal text-muted-foreground tabular-nums">{extra}</span> : null}
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
||||
/** 从 TMDB 候选建订阅:按标题追踪(建档后自动关联作品) */
|
||||
export function useSubscribeTmdb() {
|
||||
const create = useCreateSubscription();
|
||||
const navigate = useNavigate();
|
||||
return {
|
||||
pending: create.isPending,
|
||||
subscribe: (c: TmdbCandidate, onDone?: () => void) => {
|
||||
const kind = c.entityType === "movie" ? "movie" : "series";
|
||||
create.mutate(
|
||||
{
|
||||
titleQuery: c.year ? `${c.title} ${c.year}` : c.title,
|
||||
mediaKind: kind,
|
||||
mode: kind === "movie" ? "once" : "continuous",
|
||||
seasonScope: kind === "movie" ? "current_season" : "following_seasons",
|
||||
priority: "new_work",
|
||||
origin: "user",
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.success(`已订阅「${c.title}」`, {
|
||||
action: { label: "查看", onClick: () => navigate("/console/subscriptions") },
|
||||
});
|
||||
onDone?.();
|
||||
},
|
||||
onError: (e) => toast.error(errorMessage(e, "订阅失败")),
|
||||
},
|
||||
);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function MediaSection({ q }: { q: string }) {
|
||||
const res = useSearch(q, "media", 20);
|
||||
const sub = useSubscribeTmdb();
|
||||
const local = res.data?.media?.local.items ?? [];
|
||||
const tmdb = res.data?.media?.tmdb;
|
||||
return (
|
||||
<section aria-labelledby="search-media" className="min-w-0">
|
||||
<SectionTitle
|
||||
id="search-media"
|
||||
title="作品"
|
||||
extra={res.data ? `${local.length + (tmdb?.items.length ?? 0)} 条` : undefined}
|
||||
/>
|
||||
<div className="pg-slab min-w-0 overflow-hidden rounded-xl">
|
||||
{res.isPending ? (
|
||||
<LoadingState rows={2} className="p-4" />
|
||||
) : res.isError ? (
|
||||
<ErrorState plain error={res.error} onRetry={() => res.refetch()} />
|
||||
) : local.length === 0 && !tmdb?.items.length ? (
|
||||
<EmptyState
|
||||
plain
|
||||
icon={Film}
|
||||
title="没有匹配的作品"
|
||||
description="换个译名、原名或别名再搜。"
|
||||
className="py-8"
|
||||
/>
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{local.map((h) => (
|
||||
<li key={h.entity.id}>
|
||||
<Link
|
||||
to={`/console/library/${h.entity.id}`}
|
||||
className="flex min-w-0 items-center gap-3 px-4 py-3 transition-colors duration-micro hover:bg-foreground/[0.04]"
|
||||
>
|
||||
<Film className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-foreground">
|
||||
{h.entity.title}
|
||||
{h.entity.year ? <span className="text-muted-foreground"> ({h.entity.year})</span> : null}
|
||||
</p>
|
||||
<p className="truncate text-meta text-muted-foreground">
|
||||
{mediaKindLabel(h.entity.kind)} · {slotSummary(h)}
|
||||
{h.matchedAlias && h.matchedAlias !== h.entity.title ? ` · 命中别名 ${h.matchedAlias}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
<StatusBadge>本地</StatusBadge>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
{(tmdb?.items ?? []).map((c) => (
|
||||
<li key={`${c.entityType}-${c.externalId}`} className="flex min-w-0 items-center gap-3 px-4 py-3">
|
||||
<Plus className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-foreground">
|
||||
{c.title}
|
||||
{c.year ? <span className="text-muted-foreground"> ({c.year})</span> : null}
|
||||
</p>
|
||||
<p className="line-clamp-1 text-meta text-muted-foreground">
|
||||
TMDB · {c.entityType === "movie" ? "电影" : "剧集"}
|
||||
{c.originalTitle && c.originalTitle !== c.title ? ` · ${c.originalTitle}` : ""}
|
||||
{c.overview ? ` · ${c.overview}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
{c.localEntityId ? (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link to={`/console/library/${c.localEntityId}`}>查看</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" size="sm" disabled={sub.pending} onClick={() => sub.subscribe(c)}>
|
||||
订阅
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{tmdb && !tmdb.configured ? (
|
||||
<p className="border-t border-border/60 px-4 py-2.5 text-meta text-muted-foreground">
|
||||
TMDB 未配置,只搜了本地作品。
|
||||
<Link to={settingsPath("metadata")} className="ml-1 underline underline-offset-4">
|
||||
去配置
|
||||
</Link>
|
||||
</p>
|
||||
) : null}
|
||||
{tmdb?.error ? (
|
||||
<p className="border-t border-border/60 px-4 py-2.5 text-meta text-warning">TMDB 查询失败:{tmdb.error}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function ActionsSection({ q }: { q: string }) {
|
||||
const res = useSearch(q, "actions", 12);
|
||||
const items = res.data?.actions?.items ?? [];
|
||||
if (res.isPending || res.isError || items.length === 0) return null;
|
||||
return (
|
||||
<section aria-labelledby="search-actions" className="min-w-0">
|
||||
<SectionTitle id="search-actions" title="操作" />
|
||||
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map((a) => {
|
||||
const Icon = actionIcon(a.kind);
|
||||
return (
|
||||
<Link
|
||||
key={a.id}
|
||||
to={a.href}
|
||||
className="pg-slab flex min-w-0 items-center gap-3 rounded-xl px-4 py-3 transition-colors duration-micro hover:bg-foreground/[0.04]"
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-sm font-medium text-foreground">{a.title}</span>
|
||||
<span className="block truncate text-meta text-muted-foreground">{a.group}</span>
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user