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

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

apps/web/app/routes/console/search.tsx

@@ -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>
       )}