docs(plan): on-demand site detail page parsing (HHClub details.php)

Co-Authored-By: Claude Fable 5.1 <[email protected]>

apps/web/app/components/search/search-sections.tsx

@@ -1,18 +1,17 @@
-import type { TmdbCandidate } from "@umt/contracts";
-import { ArrowRight, Film, Plus } from "lucide-react";
+import type { SearchWork } from "@umt/contracts";
+import { ArrowRight, Film, PackageSearch } from "lucide-react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router";
-import { toast } from "sonner";
-import { useEntityFromCandidate } from "~/api/files.ts";
+import { mediaServers } from "~/api/instances.ts";
 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";
+import { actionIcon } from "./search-labels.ts";
+import { SitePickerDialog } from "./site-picker-dialog.tsx";
+import { releaseSearchPath, WorkCard, workRef } from "./work-card.tsx";
 
-// 结果页的"作品"与"操作"两段(资源段见 release-results.tsx)
+// 结果页第一阶段:作品(本地 + TMDB 合并,带库存对比)与操作;资源要点「搜索资源」选站点后才查(release-results.tsx)
 
 function SectionTitle({ id, title, extra }: { id: string; title: string; extra?: string }) {
   return (
@@ -23,131 +22,76 @@ function SectionTitle({ id, title, extra }: { id: string; title: string; extra?:
   );
 }
 
-/** 从 TMDB 候选建订阅:先按 TMDB id 建档(季/集与总集数随之就位)再订阅作品;建档失败退回按标题追踪 */
-export function useSubscribeTmdb() {
-  const create = useCreateSubscription();
-  const entity = useEntityFromCandidate();
+/** 「搜索资源」:先选站点,再跳到第二阶段(同一搜索页带 work / in 参数) */
+export function useReleaseSearchLauncher() {
   const navigate = useNavigate();
+  const [target, setTarget] = useState<{ title: string; ref: string } | null>(null);
   return {
-    pending: create.isPending || entity.isPending,
-    subscribe: async (c: TmdbCandidate, onDone?: () => void) => {
-      const kind = c.entityType === "movie" ? "movie" : "series";
-      const mediaEntityId =
-        c.localEntityId ??
-        (await entity
-          .mutateAsync({ provider: "tmdb", externalId: c.externalId, kind: c.entityType === "movie" ? "movie" : "tv" })
-          .then((r) => r.mediaEntityId)
-          .catch(() => null));
-      create.mutate(
-        {
-          ...(mediaEntityId ? { mediaEntityId } : { 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, "订阅失败")),
-        },
-      );
-    },
+    open: (t: { title: string; ref: string }) => setTarget(t),
+    dialog: (
+      <SitePickerDialog
+        open={!!target}
+        onOpenChange={(o) => !o && setTarget(null)}
+        title={target?.title ?? ""}
+        onConfirm={(ids) => target && navigate(releaseSearchPath(target, ids))}
+      />
+    ),
   };
 }
 
-export function MediaSection({ q }: { q: string }) {
+export function WorksSection({ q }: { q: string }) {
   const res = useSearch(q, "media", 20);
-  const sub = useSubscribeTmdb();
-  const local = res.data?.media?.local.items ?? [];
+  const ms = mediaServers.useList();
+  const emby = (ms.data?.items ?? []).some((i) => (i as { enabled?: boolean }).enabled !== false);
+  const launcher = useReleaseSearchLauncher();
+  const works = res.data?.media?.works ?? [];
   const tmdb = res.data?.media?.tmdb;
+  const searchReleases = (w: SearchWork) => {
+    const ref = workRef(w);
+    if (ref) launcher.open({ title: w.title, ref });
+  };
   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 ? (
+      <div className="mb-3 flex flex-wrap items-end justify-between gap-2">
+        <SectionTitle id="search-media" title="作品" extra={res.data ? `${works.length} 部` : undefined} />
+        <Button variant="ghost" size="sm" onClick={() => launcher.open({ title: q, ref: `q:${q}` })}>
+          <PackageSearch />
+          按关键词搜资源
+        </Button>
+      </div>
+      {res.isPending ? (
+        <LoadingState rows={3} className="pg-slab rounded-xl p-4" />
+      ) : res.isError ? (
+        <div className="pg-slab rounded-xl">
           <ErrorState plain error={res.error} onRetry={() => res.refetch()} />
-        ) : local.length === 0 && !tmdb?.items.length ? (
+        </div>
+      ) : works.length === 0 ? (
+        <div className="pg-slab rounded-xl">
           <EmptyState
             plain
             icon={Film}
             title="没有匹配的作品"
-            description="换个译名、原名或别名再搜。"
+            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>
+        </div>
+      ) : (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {works.map((w) => (
+            <WorkCard key={w.key} w={w} emby={emby} onSearchReleases={searchReleases} />
+          ))}
+        </div>
+      )}
+      {tmdb && !tmdb.configured ? (
+        <p className="mt-2 text-meta text-muted-foreground">
+          TMDB 未配置，只搜了本地作品。
+          <Link to={settingsPath("metadata")} className="ml-1 underline underline-offset-4">
+            去配置
+          </Link>
+        </p>
+      ) : null}
+      {tmdb?.error ? <p className="mt-2 text-meta text-warning">TMDB 查询失败：{tmdb.error}</p> : null}
+      {launcher.dialog}
     </section>
   );
 }