UHD_Media_Tool/apps/web/app/routes/console/discover.tsx

import { useSearchParams } from "react-router";
import { PageHeader } from "~/components/console/page-header.tsx";
import {
  type ExploreState,
  fromSearchParams,
  patch,
  toSearchParams,
  type View,
} from "~/components/discover/discover-state.ts";
import { ExploreView } from "~/components/discover/explore-view.tsx";
import { RecommendView } from "~/components/discover/recommend-view.tsx";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";

// 发现(对照 MP 推荐 + 探索,docs/porting/moviepilot-discover.md):
// 「推荐」按分区横排 TMDB / 豆瓣 / Bangumi 的热门与榜单,每区「查看全部」带参数切到「探索」;
// 「探索」选来源后按类型、风格、地区、语言、年份、评分、排序筛选或搜关键词。状态都在 URL 里。
// 卡片标本地状态;点开进作品,豆瓣 / bgm 条目先匹配 TMDB 作品。

export const meta = () => [{ title: "发现 · UHD 媒体自动化控制台" }];

export default function DiscoverPage() {
  const [sp, setSp] = useSearchParams();
  const view: View = sp.get("view") === "explore" || sp.has("src") ? "explore" : "recommend";
  const explore = fromSearchParams(sp);
  const category = sp.get("cat") ?? "";

  const go = (next: ExploreState) => setSp(toSearchParams(next), { replace: false });

  return (
    <>
      <PageHeader title="发现" description="TMDB、豆瓣、Bangumi 的热门与榜单；点开作品可订阅或搜索资源" />
      <Tabs
        value={view}
        onValueChange={(v) =>
          setSp(v === "explore" ? toSearchParams(explore) : new URLSearchParams(category ? { cat: category } : {}))
        }
      >
        <TabsList className="mb-5">
          <TabsTrigger value="recommend">推荐</TabsTrigger>
          <TabsTrigger value="explore">探索</TabsTrigger>
        </TabsList>
      </Tabs>
      {view === "recommend" ? (
        <RecommendView
          category={category}
          onCategory={(c) => setSp(new URLSearchParams(c ? { cat: c } : {}), { replace: true })}
        />
      ) : (
        <ExploreView s={explore} onPatch={(p) => go(patch(explore, p))} />
      )}
    </>
  );
}