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

Co-Authored-By: Claude Fable 5.1 <[email protected]>
2026-09-29 15:13:35 +08:00
1 parent 94fd48bff2
commit ac478673bc
@@ -11,11 +11,13 @@ import { EntityMetadataField as FieldEnum, FinalFieldValue } from "@umt/contract
 import {
  ArrowLeft,
  CalendarClock,
+  CalendarPlus,
  ChevronRight,
  FolderTree,
  GitMerge,
  Lock,
  LockOpen,
+  PackageSearch,
  PencilLine,
  RefreshCw,
  SearchX,
@@ -23,6 +25,7 @@ import {
 import { useState } from "react";
 import { Link, useParams } from "react-router";
 import { toast } from "sonner";
+import { mediaServers } from "~/api/instances.ts";
 import {
  useEntityDetail,
  useLibraryDetail,
@@ -63,6 +66,9 @@ import {
 } from "~/components/library/parts.tsx";
 import { SlotCard } from "~/components/library/slot-card.tsx";
 import { EntityNamingButton } from "~/components/naming/entity-naming-dialog.tsx";
+import { useReleaseSearchLauncher } from "~/components/search/search-sections.tsx";
+import { EmbyBadge } from "~/components/search/work-card.tsx";
+import { SubscriptionFormDialog } from "~/components/subscriptions/subscription-form.tsx";
 import { Button } from "~/components/ui/button.tsx";
 import { errorMessage } from "~/lib/api.ts";
 import { formatBytes, formatDateTime } from "~/lib/utils.ts";
@@ -576,6 +582,9 @@ export default function LibraryDetailPage() {
  const detail = useLibraryDetail(id);
  const entity = useEntityDetail(id);
  const [merging, setMerging] = useState(false);
+  const [subscribing, setSubscribing] = useState(false);
+  const launcher = useReleaseSearchLauncher();
+  const ms = mediaServers.useList();

  const back = (
    <Link
@@ -645,8 +654,29 @@ export default function LibraryDetailPage() {
            {e.originalTitle ? ` · ${e.originalTitle}` : ""}
          </p>
          <p className="mt-1 font-mono text-meta break-all text-muted-foreground">{e.id}</p>
+          {(ms.data?.items.length ?? 0) > 0 ? (
+            <div className="mt-1.5 flex flex-wrap gap-1">
+              <EmbyBadge refOf={{ mediaEntityId: e.id }} />
+            </div>
+          ) : null}
        </div>
        <div className="flex flex-wrap gap-2">
+          {e.status !== "merged" ? (
+            <>
+              <Button size="sm" onClick={() => setSubscribing(true)}>
+                <CalendarPlus />
+                订阅
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => launcher.open({ title: e.title, ref: `local:${e.id}` })}
+              >
+                <PackageSearch />
+                搜索资源
+              </Button>
+            </>
+          ) : null}
          <Button asChild variant="outline" size="sm">
            <Link to={`${consolePath("subscriptions")}?mediaEntityId=${e.id}`}>
              <CalendarClock />
@@ -676,6 +706,19 @@ export default function LibraryDetailPage() {
        <DownloadsPanel detail={d} />
      </div>
      <MergeDialog entity={e} open={merging} onOpenChange={setMerging} />
+      {subscribing ? (
+        <SubscriptionFormDialog
+          initialTarget={{
+            kind: "entity",
+            id: e.id,
+            title: e.title,
+            year: e.year,
+            mediaKind: e.kind === "movie" ? "movie" : e.kind === "variety" ? "variety" : "series",
+          }}
+          onClose={() => setSubscribing(false)}
+        />
+      ) : null}
+      {launcher.dialog}
    </>
  );
 }
@@ -0,0 +1,294 @@
+import type { MediaServerInventory, TmdbMediaDetail } from "@umt/contracts";
+import { ArrowLeft, BookmarkPlus, CalendarPlus, FolderPlus, PackageSearch } from "lucide-react";
+import { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router";
+import { toast } from "sonner";
+import { useEntityFromCandidate } from "~/api/files.ts";
+import { mediaServers } from "~/api/instances.ts";
+import { useMediaServerInventory, useTmdbMedia } from "~/api/search.ts";
+import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
+import { consolePath, settingsPath } from "~/components/console/nav.ts";
+import { StatusBadge } from "~/components/console/status-badge.tsx";
+import { MEDIA_KIND } from "~/components/library/labels.ts";
+import { CoverPlaceholder, Panel } from "~/components/library/parts.tsx";
+import { useReleaseSearchLauncher } from "~/components/search/search-sections.tsx";
+import { InventoryBadges, mediaServerSummary, slotLine } from "~/components/search/work-card.tsx";
+import { SubscriptionFormDialog } from "~/components/subscriptions/subscription-form.tsx";
+import { Button } from "~/components/ui/button.tsx";
+import { errorMessage } from "~/lib/api.ts";
+
+// 作品详情(仅 TMDB,SEARCH-2):TMDB 信息与季列表 + 本地账本 / Emby 对比;在这里「订阅」「搜索资源」「建档不订阅」。
+// 已建档的作品同时给媒体库详情入口。
+
+export const meta = () => [{ title: "作品详情 · UHD 媒体自动化控制台" }];
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+export default function TmdbMediaPage() {
+  const { type, id } = useParams();
+  const q = useTmdbMedia(type, id);
+  const navigate = useNavigate();
+
+  const back = (
+    <button
+      type="button"
+      onClick={() => navigate(-1)}
+      className="mb-4 inline-flex cursor-pointer items-center gap-1 text-caption text-muted-foreground hover:text-foreground"
+    >
+      <ArrowLeft className="h-4 w-4" />
+      返回
+    </button>
+  );
+
+  if (q.isPending) {
+    return (
+      <>
+        {back}
+        <LoadingState rows={6} />
+      </>
+    );
+  }
+  if (q.isError) {
+    const code = (q.error as { code?: string }).code;
+    return (
+      <>
+        {back}
+        <ErrorState
+          title={code === "not_found" ? "TMDB 没有这个条目" : "作品加载失败"}
+          error={q.error}
+          onRetry={code === "not_found" ? undefined : () => q.refetch()}
+        />
+      </>
+    );
+  }
+  return (
+    <>
+      {back}
+      <Detail d={q.data} />
+    </>
+  );
+}
+
+function Detail({ d }: { d: TmdbMediaDetail }) {
+  const navigate = useNavigate();
+  const [subscribing, setSubscribing] = useState(false);
+  const entity = useEntityFromCandidate();
+  const launcher = useReleaseSearchLauncher();
+  const kind = d.entityType === "movie" ? "movie" : "series";
+  const ref = d.localEntityId ? `local:${d.localEntityId}` : `tmdb:${d.entityType}:${d.externalId}`;
+
+  const createEntity = () =>
+    entity.mutate(
+      { provider: "tmdb", externalId: d.externalId, kind: d.entityType },
+      {
+        onSuccess: (r) => {
+          toast.success(r.created ? `已建档「${r.title}」` : `「${r.title}」已在媒体库`);
+          navigate(consolePath("library", r.mediaEntityId));
+        },
+        onError: (e) => toast.error(errorMessage(e, "建档失败")),
+      },
+    );
+
+  return (
+    <>
+      <header className="mb-6 flex flex-wrap items-start gap-4">
+        <CoverPlaceholder title={d.title} kind={kind} posterPath={d.posterPath} className="h-40 w-28 sm:h-48 sm:w-32" />
+        <div className="min-w-0 flex-1 basis-64">
+          <h1 className="text-title-lg font-semibold tracking-tight break-words text-foreground">
+            {d.title}
+            {d.year ? <span className="font-normal text-muted-foreground"> ({d.year})</span> : null}
+          </h1>
+          <p className="mt-1 text-body break-words text-muted-foreground">
+            {[
+              MEDIA_KIND[kind],
+              d.originalTitle && d.originalTitle !== d.title ? d.originalTitle : null,
+              d.releaseDate,
+              d.originCountry.join(" / ") || null,
+              `TMDB ${d.externalId}`,
+            ]
+              .filter(Boolean)
+              .join(" · ")}
+          </p>
+          <div className="mt-2 flex flex-wrap gap-1">
+            <InventoryBadges inv={d.inventory} />
+          </div>
+          {d.overview ? <p className="mt-3 max-w-3xl text-caption text-foreground">{d.overview}</p> : null}
+          <div className="mt-4 flex flex-wrap gap-2">
+            <Button onClick={() => setSubscribing(true)}>
+              <CalendarPlus />
+              订阅
+            </Button>
+            <Button variant="outline" onClick={() => launcher.open({ title: d.title, ref })}>
+              <PackageSearch />
+              搜索资源
+            </Button>
+            {d.localEntityId ? (
+              <Button asChild variant="outline">
+                <Link to={consolePath("library", d.localEntityId)}>
+                  <BookmarkPlus />
+                  媒体库详情
+                </Link>
+              </Button>
+            ) : (
+              <Button variant="outline" onClick={createEntity} disabled={entity.isPending}>
+                <FolderPlus />
+                {entity.isPending ? "建档中…" : "建档不订阅"}
+              </Button>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <div className="space-y-5">
+        <InventoryPanel d={d} />
+        {d.entityType === "tv" ? <SeasonsPanel d={d} /> : null}
+        {d.aliases.length || d.externalIds.imdb || d.externalIds.tvdb ? (
+          <Panel title="别名与外部身份">
+            <p className="text-caption break-words text-muted-foreground">
+              {[
+                d.externalIds.imdb ? `IMDb ${d.externalIds.imdb}` : null,
+                d.externalIds.tvdb ? `TVDB ${d.externalIds.tvdb}` : null,
+              ]
+                .filter(Boolean)
+                .join(" · ")}
+            </p>
+            {d.aliases.length ? (
+              <p className="mt-1 text-caption break-words text-foreground">{d.aliases.join("、")}</p>
+            ) : null}
+          </Panel>
+        ) : null}
+      </div>
+
+      {subscribing ? (
+        <SubscriptionFormDialog
+          initialTarget={
+            d.localEntityId
+              ? { kind: "entity", id: d.localEntityId, title: d.title, year: d.year, mediaKind: kind }
+              : {
+                  kind: "tmdb",
+                  entityType: d.entityType,
+                  externalId: d.externalId,
+                  title: d.title,
+                  year: d.year,
+                  mediaKind: kind,
+                }
+          }
+          onClose={() => setSubscribing(false)}
+          onCreated={() => toast.success(`已订阅「${d.title}」`)}
+        />
+      ) : null}
+      {launcher.dialog}
+    </>
+  );
+}
+
+function InventoryPanel({ d }: { d: TmdbMediaDetail }) {
+  const ms = mediaServers.useList();
+  const hasEmby = (ms.data?.items.length ?? 0) > 0;
+  const emby = useMediaServerInventory({ tmdbType: d.entityType, tmdbId: d.externalId }, hasEmby);
+  const inv = d.inventory;
+  const line = slotLine(inv);
+  return (
+    <Panel title="库内对比" description="本地账本按 TMDB 身份对应；Emby 查询失败记为未知，不等于缺失">
+      <dl className="grid gap-4 sm:grid-cols-2">
+        <div className="min-w-0">
+          <dt className="text-meta text-muted-foreground">本地账本</dt>
+          <dd className="mt-1 space-y-1 text-caption text-foreground">
+            {inv.state === "not_collected" ? (
+              <p>未收录。订阅或建档后开始追踪。</p>
+            ) : (
+              <>
+                <p>
+                  {inv.versionCount} 个版本已入库
+                  {inv.downloadingCount ? ` · ${inv.downloadingCount} 个正在下载` : ""}
+                  {inv.subscribed ? " · 已订阅" : ""}
+                </p>
+                {line ? <p className="text-muted-foreground">{line}</p> : null}
+              </>
+            )}
+          </dd>
+        </div>
+        <div className="min-w-0">
+          <dt className="text-meta text-muted-foreground">Emby</dt>
+          <dd className="mt-1 text-caption text-foreground">
+            {!hasEmby ? (
+              <p className="text-muted-foreground">
+                没有配置媒体服务器。
+                <Link to={settingsPath("media-servers")} className="ml-1 underline underline-offset-4">
+                  去配置
+                </Link>
+              </p>
+            ) : emby.isPending ? (
+              <p className="text-muted-foreground">查询中…</p>
+            ) : emby.isError ? (
+              <p className="text-warning">{errorMessage(emby.error, "查询失败")}</p>
+            ) : (
+              <EmbyInstances ms={emby.data} />
+            )}
+          </dd>
+        </div>
+      </dl>
+    </Panel>
+  );
+}
+
+function EmbyInstances({ ms }: { ms: MediaServerInventory }) {
+  const s = mediaServerSummary(ms);
+  return (
+    <div className="space-y-1">
+      {s ? <StatusBadge tone={s.tone}>{s.label}</StatusBadge> : null}
+      <ul className="space-y-0.5">
+        {ms.instances.map((i) => (
+          <li key={i.instanceId} className="break-words text-muted-foreground">
+            {i.name}：
+            {i.status === "present"
+              ? i.items.map((x) => `${x.name}${x.year ? ` (${x.year})` : ""}`).join("、") || "已有"
+              : i.status === "not_found"
+                ? "没有"
+                : `未知${i.reason ? `（${i.reason}）` : ""}`}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function SeasonsPanel({ d }: { d: TmdbMediaDetail }) {
+  if (d.seasons.length === 0) {
+    return (
+      <Panel title="季">
+        <EmptyState plain title="TMDB 还没有季信息" className="py-6" />
+      </Panel>
+    );
+  }
+  return (
+    <Panel title="季" description={d.localEntityId ? "本地一列是已入库集数" : "未收录，本地一列不显示"}>
+      <table className="w-full text-caption">
+        <thead>
+          <tr className="text-left text-meta text-muted-foreground">
+            <th className="py-1.5 pr-3 font-normal">季</th>
+            <th className="py-1.5 pr-3 font-normal">名称</th>
+            <th className="py-1.5 pr-3 font-normal">首播</th>
+            <th className="py-1.5 pr-3 text-right font-normal">集数</th>
+            {d.localEntityId ? <th className="py-1.5 text-right font-normal">本地</th> : null}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-border/60">
+          {d.seasons.map((s) => (
+            <tr key={s.seasonNumber}>
+              <td className="py-1.5 pr-3 font-mono text-foreground">S{pad(s.seasonNumber)}</td>
+              <td className="py-1.5 pr-3 break-words text-foreground">{s.name ?? "—"}</td>
+              <td className="py-1.5 pr-3 text-muted-foreground tabular-nums">{s.airDate ?? "—"}</td>
+              <td className="py-1.5 pr-3 text-right tabular-nums">{s.episodeCount}</td>
+              {d.localEntityId ? (
+                <td className="py-1.5 text-right tabular-nums">
+                  {s.localHave === null ? "—" : `${s.localHave}/${s.episodeCount}`}
+                </td>
+              ) : null}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Panel>
+  );
+}
@@ -1,43 +1,57 @@
-import { Search } from "lucide-react";
-import { type FormEvent, useEffect, useState } from "react";
-import { useSearchParams } from "react-router";
+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 { RELEASE_FILTER_KEYS, type ReleaseFilterState, ReleaseResults } from "~/components/search/release-results.tsx";
-import { ActionsSection, MediaSection } from "~/components/search/search-sections.tsx";
+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";

-// 全局搜索结果页(W9-G):/console/search?q= 三段 —— 作品 / 资源 / 操作;q 与资源筛选都写在 URL 里。
+// 全局搜索(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) return;
-    // 换关键词时筛选随之清空(站点/分辨率分面随结果变化)
+    if (!next || (next === q && !work)) return;
+    // 换关键词回到第一阶段,筛选随之清空
    setParams(new URLSearchParams({ q: next }));
  };

  return (
    <>
-      <PageHeader title="搜索" description="本地作品、TMDB、各站点资源和控制台页面。" />
+      <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="作品名、别名或资源标题"
+            placeholder="作品名、原名或别名"
            aria-label="搜索关键词"
            className="pl-9"
          />
@@ -48,11 +62,39 @@ export default function SearchPage() {
      </form>

      {!q ? (
-        <EmptyState icon={Search} title="输入关键词开始搜索" description="也可以在任意页面按 Ctrl/⌘ K 打开搜索。" />
+        <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">
-          <MediaSection q={q} />
-          <ReleaseResults q={q} filters={f.values as ReleaseFilterState} setFilter={f.set} resetFilters={f.reset} />
+          <WorksSection q={q} />
          <ActionsSection q={q} />
        </div>
      )}
@@ -1,10 +1,11 @@
-import { Globe, LayoutGrid, List, Plus, RefreshCw } from "lucide-react";
+import { Globe, LayoutGrid, List, PackageSearch, Plus, RefreshCw } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router";
 import { useSites } from "~/api/sites.ts";
 import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
 import { FilterSelect } from "~/components/console/filter-bar.tsx";
 import { PageHeader } from "~/components/console/page-header.tsx";
+import { SearchDefaultDialog } from "~/components/sites/search-default-dialog.tsx";
 import { SiteAddDialog } from "~/components/sites/site-add-dialog.tsx";
 import { SiteCard, SiteTable } from "~/components/sites/site-card.tsx";
 import { type SiteDialog, SiteDialogHost, useSiteChecks } from "~/components/sites/site-dialogs.tsx";
@@ -88,6 +89,7 @@ export default function SitesPage() {
  }, [credFor, sites.data]);

  const all = sites.data?.items ?? [];
+  const [searchDefaults, setSearchDefaults] = useState(false);
  const attention = all.filter(needsAttention).length;
  const shown = sortSites(
    all.filter((s) => (filter === "enabled" ? s.enabled : filter === "attention" ? needsAttention(s) : true)),
@@ -105,6 +107,10 @@ export default function SitesPage() {
              <RefreshCw className={sites.isFetching ? "animate-spin" : undefined} />
              刷新
            </Button>
+            <Button variant="outline" size="sm" onClick={() => setSearchDefaults(true)} disabled={!all.length}>
+              <PackageSearch />
+              搜索站点
+            </Button>
            <Button size="sm" onClick={() => setAdding(true)}>
              <Plus />
              添加站点
@@ -181,6 +187,7 @@ export default function SitesPage() {

      {adding ? <SiteAddDialog onClose={() => setAdding(false)} /> : null}
      <SiteDialogHost dialog={dialog} onClose={() => setDialog(null)} />
+      <SearchDefaultDialog open={searchDefaults} onOpenChange={setSearchDefaults} sites={all} />
    </>
  );
 }