feat(web): 发现页改为「推荐」分区 +「探索」筛选，卡片带本地状态与订阅 / 搜索资源

Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
2026-10-06 18:09:50 +08:00
1 parent 9a154bc249
commit 740e2fe67d
@@ -0,0 +1,123 @@
+import { type DiscoverItem, tmdbImageUrl } from "@umt/contracts";
+import { CalendarPlus, LoaderCircle, PackageSearch, Star } from "lucide-react";
+import { useState } from "react";
+import { StatusBadge } from "~/components/console/status-badge.tsx";
+import { Button } from "~/components/ui/button.tsx";
+import { cn } from "~/lib/utils.ts";
+import { itemMeta, localBadges } from "./discover-state.ts";
+
+// 发现卡片:海报(懒加载)、评分、本地状态、标题、年份 · 类型 · 风格;点海报 / 标题进作品,下面两个动作。
+
+export type CardAction = "open" | "subscribe" | "search";
+
+export function coverUrl(it: Pick<DiscoverItem, "cover" | "posterPath">): string | null {
+  return it.posterPath ? tmdbImageUrl(it.posterPath, "w342") : it.cover;
+}
+
+export function DiscoverCard({
+  item,
+  busy,
+  onAction,
+  className,
+}: {
+  item: DiscoverItem;
+  /** 正在为这张卡匹配 TMDB */
+  busy: CardAction | null;
+  onAction: (a: CardAction) => void;
+  className?: string;
+}) {
+  const [failed, setFailed] = useState(false);
+  const src = failed ? null : coverUrl(item);
+  const badges = localBadges(item);
+  const meta = itemMeta(item);
+  return (
+    <article className={cn("group flex min-w-0 flex-col", className)} aria-label={item.title}>
+      <button
+        type="button"
+        onClick={() => onAction("open")}
+        disabled={!!busy}
+        className="relative block aspect-[2/3] w-full cursor-pointer overflow-hidden rounded-xl border border-border/70 bg-foreground/[0.05] text-left transition-colors duration-base hover:border-foreground/40 disabled:cursor-wait"
+      >
+        {src ? (
+          <img
+            src={src}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            referrerPolicy="no-referrer"
+            onError={() => setFailed(true)}
+            className="h-full w-full object-cover transition-transform duration-slow group-hover:scale-[1.03]"
+          />
+        ) : (
+          <span className="grid h-full w-full place-items-center px-2 text-center text-title font-semibold text-foreground/30">
+            {item.title.charAt(0)}
+          </span>
+        )}
+        {item.rating ? (
+          <span className="absolute top-1.5 left-1.5 inline-flex items-center gap-0.5 rounded-full bg-background/80 px-1.5 py-0.5 text-micro font-medium text-foreground backdrop-blur">
+            <Star className="h-3 w-3" aria-hidden />
+            {item.rating.toFixed(1)}
+          </span>
+        ) : null}
+        {badges.length ? (
+          <span className="absolute inset-x-1.5 bottom-1.5 flex flex-wrap gap-1">
+            {badges.map((b) => (
+              <StatusBadge key={b.label} tone={b.tone} className="bg-background/85 backdrop-blur">
+                {b.label}
+              </StatusBadge>
+            ))}
+          </span>
+        ) : null}
+        {busy ? (
+          <span className="absolute inset-0 grid place-items-center bg-background/60">
+            <LoaderCircle className="h-5 w-5 animate-spin" aria-label="匹配中" />
+          </span>
+        ) : null}
+      </button>
+      <div className="min-w-0 pt-1.5">
+        <button
+          type="button"
+          onClick={() => onAction("open")}
+          disabled={!!busy}
+          className="block w-full cursor-pointer truncate text-left text-caption font-medium text-foreground hover:underline"
+          title={item.title}
+        >
+          {item.title}
+        </button>
+        <p className="truncate text-meta text-muted-foreground">{meta || "—"}</p>
+        <div className="mt-1 flex flex-wrap gap-1">
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={() => onAction("subscribe")}
+            disabled={!!busy}
+            aria-label={`订阅「${item.title}」`}
+          >
+            <CalendarPlus />
+            订阅
+          </Button>
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={() => onAction("search")}
+            disabled={!!busy}
+            aria-label={`搜索「${item.title}」的资源`}
+          >
+            <PackageSearch />
+            搜索资源
+          </Button>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export function DiscoverCardSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn("flex min-w-0 flex-col", className)} aria-hidden>
+      <div className="aspect-[2/3] w-full animate-pulse rounded-xl bg-foreground/[0.07]" />
+      <div className="mt-2 h-3.5 w-4/5 animate-pulse rounded-tight bg-foreground/[0.07]" />
+      <div className="mt-1.5 h-3 w-1/2 animate-pulse rounded-tight bg-foreground/[0.05]" />
+    </div>
+  );
+}