Merge branch 'search4'

Co-Authored-By: Claude Fable 5.1 <[email protected]> # Conflicts: # docs/plan/00-first-version-plan.md
2026-09-30 22:41:26 +08:00
commit 511ad93077
@@ -1,5 +1,6 @@
 import type { FacetCount, ReleaseQuickFacets } from "@umt/contracts";
-import { Check, ChevronDown, SlidersHorizontal, X } from "lucide-react";
+import { Check, ChevronDown, ListFilter, SlidersHorizontal, X } from "lucide-react";
+import type * as React from "react";
 import { type ReactNode, useState } from "react";
 import { useIsMobile } from "~/components/files/use-mobile.ts";
 import { Button } from "~/components/ui/button.tsx";
@@ -8,6 +9,7 @@ import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetT
 import { cn } from "~/lib/utils.ts";
 import {
  clearDims,
+  MORE_DIMS,
  QUICK_GROUPS,
  type QuickDim,
  type QuickGroup,
@@ -21,6 +23,8 @@ import {
 // 选项带计数(按其它维度的已选条件),0 计数置灰;已选条件以可移除标签列出,只有一个「清除」。
 // 桌面用弹层,手机用底部抽屉。搜索结果页与站点资源 Tab 共用。
 // POLISH-1:H&R 是分面维度;页面可在同一行右侧放大小 / 排序(aside),手机上收进「大小与排序」抽屉。
+// SEARCH-4:对齐 MP 后维度变多,常用的留在筛选条上,其余(音频、字幕、配音、特性、年份、分类、大小、做种、H&R)
+// 收进「更多筛选」:桌面一个宽弹层分节列出,手机一个抽屉。弹层与抽屉都是不透明实底(pg-float)。

 /** 分面之外的已选条件(如大小区间),和分面标签排在一起 */
 export type ExtraTag = { key: string; dimLabel: string; label: string; onRemove: () => void };
@@ -52,8 +56,9 @@ export function QuickFilterBar({
 }) {
  const mobile = useIsMobile();
  const [sheet, setSheet] = useState<QuickGroup | null>(null);
+  const [moreOpen, setMoreOpen] = useState(false);
  const [asideOpen, setAsideOpen] = useState(false);
-  const groups = QUICK_GROUPS.filter((g) => {
+  const visible = QUICK_GROUPS.filter((g) => {
    const dims = g.dims.filter((d) => !hide.includes(d.dim));
    if (!dims.length) return false;
    const opts = dims.flatMap((d) => facets?.[d.dim] ?? []);
@@ -67,8 +72,12 @@ export function QuickFilterBar({
      ) > 0
    );
  });
+  const groups = visible.filter((g) => !g.more);
+  const moreGroups = visible.filter((g) => g.more);
+  const moreDims = MORE_DIMS.filter((d) => !hide.includes(d));
+  const moreCount = selectedCount(value, moreDims);
  const tags = selectedTags(value, facets).filter((t) => !hide.includes(t.dim));
-  if (!groups.length && !tags.length && !extraTags.length && !aside) return null;
+  if (!visible.length && !tags.length && !extraTags.length && !aside) return null;
  const clearAll = onClearAll ?? (() => onChange({}));

  return (
@@ -100,26 +109,7 @@ export function QuickFilterBar({
            const dims = g.dims.map((d) => d.dim);
            const n = selectedCount(value, dims);
            const chip = (
-              <button
-                key={g.key}
-                type="button"
-                aria-haspopup="dialog"
-                onClick={mobile ? () => setSheet(g) : undefined}
-                className={cn(
-                  "inline-flex h-8 shrink-0 cursor-pointer items-center gap-1 rounded-full border px-3 text-caption font-medium whitespace-nowrap transition-[background-color,color,transform] duration-micro active:scale-[0.96]",
-                  n
-                    ? "pill-selected text-foreground"
-                    : "border-border text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground",
-                )}
-              >
-                {g.label}
-                {n ? (
-                  <span className="min-w-4 rounded-full bg-primary px-1 text-center text-meta leading-4 text-primary-foreground tabular-nums">
-                    {n}
-                  </span>
-                ) : null}
-                <ChevronDown className="h-3.5 w-3.5 opacity-70" />
-              </button>
+              <FilterChip key={g.key} label={g.label} count={n} onClick={mobile ? () => setSheet(g) : undefined} />
            );
            return mobile ? (
              chip
@@ -132,6 +122,27 @@ export function QuickFilterBar({
              </Popover>
            );
          })}
+          {moreGroups.length ? (
+            mobile ? (
+              <FilterChip label="更多筛选" count={moreCount} onClick={() => setMoreOpen(true)} more />
+            ) : (
+              <Popover open={moreOpen} onOpenChange={setMoreOpen}>
+                <PopoverTrigger asChild>
+                  <FilterChip label="更多筛选" count={moreCount} more />
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-[min(44rem,calc(100vw-2rem))] p-0">
+                  <MorePanel
+                    groups={moreGroups}
+                    facets={facets}
+                    value={value}
+                    onChange={onChange}
+                    onClear={() => onChange(clearDims(value, moreDims))}
+                    count={moreCount}
+                  />
+                </PopoverContent>
+              </Popover>
+            )
+          ) : null}
        </div>
        {aside && !mobile ? <div className="flex shrink-0 items-center gap-1.5">{aside.content("inline")}</div> : null}
      </div>
@@ -172,6 +183,33 @@ export function QuickFilterBar({
        </Sheet>
      ) : null}

+      {mobile && moreGroups.length ? (
+        <Sheet open={moreOpen} onOpenChange={setMoreOpen}>
+          <SheetContent side="bottom" className="max-h-[85dvh] gap-0 rounded-t-2xl">
+            <SheetHeader className="pb-2">
+              <SheetTitle>更多筛选</SheetTitle>
+              <SheetDescription className="text-meta">可多选，数字是选中后的条数</SheetDescription>
+            </SheetHeader>
+            <div className="min-h-0 overflow-y-auto px-4 pb-3">
+              <MorePanel groups={moreGroups} facets={facets} value={value} onChange={onChange} bare />
+            </div>
+            <SheetFooter className="flex-row gap-2 border-t border-border/60">
+              <Button
+                variant="outline"
+                className="flex-1"
+                disabled={!moreCount}
+                onClick={() => onChange(clearDims(value, moreDims))}
+              >
+                清除
+              </Button>
+              <Button className="flex-1" onClick={() => setMoreOpen(false)}>
+                完成
+              </Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ) : null}
+
      {mobile ? (
        <Sheet open={!!sheet} onOpenChange={(o) => !o && setSheet(null)}>
          <SheetContent side="bottom" className="max-h-[80dvh] gap-0 rounded-t-2xl">
@@ -316,3 +354,133 @@ function GroupPanel({
    </div>
  );
 }
+
+/** 筛选条上的入口按钮;Popover 的 asChild 需要转发 ref 与事件,所以透传其余属性 */
+function FilterChip({
+  label,
+  count,
+  more = false,
+  className,
+  ...rest
+}: React.ComponentProps<"button"> & { label: string; count: number; more?: boolean }) {
+  return (
+    <button
+      type="button"
+      aria-haspopup="dialog"
+      {...rest}
+      className={cn(
+        "inline-flex h-8 shrink-0 cursor-pointer items-center gap-1 rounded-full border px-3 text-caption font-medium whitespace-nowrap transition-[background-color,color,transform] duration-micro active:scale-[0.96]",
+        count
+          ? "pill-selected text-foreground"
+          : "border-border text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground",
+        className,
+      )}
+    >
+      {more ? <ListFilter className="h-3.5 w-3.5" /> : null}
+      {label}
+      {count ? (
+        <span className="min-w-4 rounded-full bg-primary px-1 text-center text-meta leading-4 text-primary-foreground tabular-nums">
+          {count}
+        </span>
+      ) : null}
+      {more ? null : <ChevronDown className="h-3.5 w-3.5 opacity-70" />}
+    </button>
+  );
+}
+
+/** 「更多筛选」:每个维度一节,选项是带计数的小按钮;0 计数且未选时置灰 */
+function MorePanel({
+  groups,
+  facets,
+  value,
+  onChange,
+  onClear,
+  count = 0,
+  bare = false,
+}: {
+  groups: QuickGroup[];
+  facets: ReleaseQuickFacets | undefined;
+  value: QuickSelection;
+  onChange: (next: QuickSelection) => void;
+  onClear?: () => void;
+  count?: number;
+  bare?: boolean;
+}) {
+  return (
+    <div className="flex max-h-[min(70dvh,32rem)] flex-col">
+      {bare ? null : (
+        <div className="flex items-center justify-between border-b border-border/60 px-4 py-2.5">
+          <span className="text-caption font-medium text-foreground">更多筛选</span>
+          <button
+            type="button"
+            disabled={!count}
+            onClick={onClear}
+            className="cursor-pointer text-meta text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-50"
+          >
+            清除
+          </button>
+        </div>
+      )}
+      <div className={cn("grid min-h-0 gap-x-6 gap-y-4 overflow-y-auto", bare ? "" : "p-4 sm:grid-cols-2")}>
+        {groups.map((g) =>
+          g.dims.map((d) => {
+            const opts: FacetCount[] = facets?.[d.dim] ?? [];
+            const chosen = value[d.dim] ?? [];
+            const extra = chosen.filter((v) => !opts.some((o) => o.value === v));
+            const all = [...opts, ...extra.map((v) => ({ value: v, label: v, count: 0 }))];
+            if (!all.length) return null;
+            const n = chosen.length;
+            return (
+              <fieldset key={d.dim} className="m-0 min-w-0 border-0 p-0">
+                <legend className="mb-1.5 flex w-full items-center justify-between">
+                  <span className="text-meta font-medium text-muted-foreground">{d.label}</span>
+                  {n ? (
+                    <button
+                      type="button"
+                      onClick={() => onChange(clearDims(value, [d.dim]))}
+                      className="cursor-pointer text-meta text-muted-foreground hover:text-foreground"
+                    >
+                      清除
+                    </button>
+                  ) : null}
+                </legend>
+                <div className="flex flex-wrap gap-1.5">
+                  {all.map((o) => {
+                    const on = chosen.includes(o.value);
+                    const dead = o.count === 0 && !on;
+                    return (
+                      <button
+                        key={o.value}
+                        type="button"
+                        aria-pressed={on}
+                        disabled={dead}
+                        onClick={() => onChange(toggleValue(value, d.dim, o.value))}
+                        className={cn(
+                          "inline-flex h-8 max-w-full cursor-pointer items-center gap-1.5 rounded-full border px-3 text-caption transition-colors duration-micro md:h-7",
+                          on
+                            ? "border-primary bg-primary text-primary-foreground"
+                            : "border-border text-foreground hover:bg-foreground/[0.06]",
+                          dead ? "cursor-default opacity-40 hover:bg-transparent" : "",
+                        )}
+                      >
+                        <span className="min-w-0 truncate">{o.label}</span>
+                        <span
+                          className={cn(
+                            "text-meta tabular-nums",
+                            on ? "text-primary-foreground/80" : "text-muted-foreground",
+                          )}
+                        >
+                          {o.count}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </fieldset>
+            );
+          }),
+        )}
+      </div>
+    </div>
+  );
+}
@@ -2,9 +2,11 @@ import { describe, expect, it } from "vitest";
 import {
  clearDims,
  formatQuickFilter,
+  MORE_DIMS,
  mergeLegacyFilters,
  parseStored,
  persistable,
+  QUICK_GROUPS,
  quickFilterStorageKey,
  selectedCount,
  selectedTags,
@@ -24,12 +26,23 @@ const empty = {
  releaseGroup: [],
  season: [],
  episode: [],
+  audioCodec: [],
+  subtitle: [],
+  dub: [],
+  feature: [],
+  year: [],
+  category: [],
+  size: [],
+  seeders: [],
 };

 describe("快速筛选状态", () => {
-  it("qf 按维度顺序拼接,值编码;空选择不带参数", () => {
+  it("qf 按维度顺序(对齐 MP 筛选条)拼接,值编码;空选择不带参数", () => {
    expect(formatQuickFilter({ hdr: ["DV"], resolution: ["2160p"], releaseGroup: ["A,B"] })).toBe(
-      "resolution:2160p;hdr:DV;releaseGroup:A%2CB",
+      "hdr:DV;resolution:2160p;releaseGroup:A%2CB",
+    );
+    expect(formatQuickFilter({ seeders: ["0"], audioCodec: ["TrueHD"], site: ["s"] })).toBe(
+      "site:s;audioCodec:TrueHD;seeders:0",
    );
    expect(formatQuickFilter({ resolution: [] })).toBeUndefined();
  });
@@ -47,8 +60,8 @@ describe("快速筛选状态", () => {
  it("已选标签取分面里的选项名,取不到用原值", () => {
    const facets = { ...empty, releaseType: [{ value: "encode", label: "蓝光压制", count: 3 }] };
    expect(selectedTags({ releaseType: ["encode"], season: ["2"] }, facets)).toEqual([
-      { dim: "releaseType", value: "encode", dimLabel: "版本", label: "蓝光压制" },
      { dim: "season", value: "2", dimLabel: "季", label: "2" },
+      { dim: "releaseType", value: "encode", dimLabel: "质量", label: "蓝光压制" },
    ]);
  });

@@ -63,6 +76,40 @@ describe("快速筛选状态", () => {
    expect(quickFilterStorageKey("site")).not.toBe(quickFilterStorageKey("search"));
  });

+  it("SEARCH-4 新增的固定档位维度记忆,年份 / 分类随结果变化不记", () => {
+    const sel = { audioCodec: ["TrueHD"], subtitle: ["zh"], dub: ["cmn"], year: ["2024"], category: ["电影"] };
+    expect(persistable(sel)).toEqual({ audioCodec: ["TrueHD"], subtitle: ["zh"], dub: ["cmn"] });
+    expect(parseStored(JSON.stringify({ seeders: ["50+"], feature: ["10bit"], size: ["20-50"] }))).toEqual({
+      seeders: ["50+"],
+      feature: ["10bit"],
+      size: ["20-50"],
+    });
+  });
+
+  it("「更多筛选」收的是 MP 筛选条之外的维度", () => {
+    expect(MORE_DIMS).toEqual([
+      "audioCodec",
+      "subtitle",
+      "dub",
+      "feature",
+      "year",
+      "category",
+      "size",
+      "seeders",
+      "hr",
+    ]);
+    expect(QUICK_GROUPS.filter((g) => !g.more).map((g) => g.label)).toEqual([
+      "站点",
+      "季/集",
+      "促销",
+      "编码",
+      "质量",
+      "HDR",
+      "分辨率",
+      "制作组",
+    ]);
+  });
+
  it("H&R 分面也记忆;旧版存的内容(没有 hr)照常读出,键不变", () => {
    expect(persistable({ hr: ["no"], site: ["x"] })).toEqual({ hr: ["no"] });
    expect(quickFilterStorageKey("search")).toBe("umt.quickFilters.search");
@@ -7,18 +7,22 @@ import { useCallback, useEffect, useState } from "react";
 export type QuickDim = keyof ReleaseQuickFacets;
 export type QuickSelection = Partial<Record<QuickDim, string[]>>;

-/** 筛选条上的一个入口;「季/集」一个入口里分两节 */
-export type QuickGroup = { key: string; label: string; dims: { dim: QuickDim; label: string }[] };
+/**
+ * 筛选条上的一个入口;「季/集」一个入口里分两节。
+ * more = 收进「更多筛选」(SEARCH-4):常用维度按 MP 搜索结果筛选条的顺序放在前面
+ * (站点、季集、促销、视频编码、质量、分辨率、制作组;HDR 在 MP 里并在「质量」,这里单列紧跟其后)。
+ */
+export type QuickGroup = { key: string; label: string; dims: { dim: QuickDim; label: string }[]; more?: boolean };
+
+const one = (dim: QuickDim, label: string, more?: boolean): QuickGroup => ({
+  key: dim,
+  label,
+  dims: [{ dim, label }],
+  ...(more ? { more } : {}),
+});

 export const QUICK_GROUPS: QuickGroup[] = [
-  { key: "resolution", label: "分辨率", dims: [{ dim: "resolution", label: "分辨率" }] },
-  { key: "videoCodec", label: "编码", dims: [{ dim: "videoCodec", label: "编码" }] },
-  { key: "releaseType", label: "版本", dims: [{ dim: "releaseType", label: "版本" }] },
-  { key: "site", label: "站点", dims: [{ dim: "site", label: "站点" }] },
-  { key: "promotion", label: "促销", dims: [{ dim: "promotion", label: "促销" }] },
-  { key: "hdr", label: "HDR", dims: [{ dim: "hdr", label: "HDR" }] },
-  { key: "hr", label: "H&R", dims: [{ dim: "hr", label: "H&R" }] },
-  { key: "releaseGroup", label: "制作组", dims: [{ dim: "releaseGroup", label: "制作组" }] },
+  one("site", "站点"),
  {
    key: "seasonEpisode",
    label: "季/集",
@@ -27,12 +31,43 @@ export const QUICK_GROUPS: QuickGroup[] = [
      { dim: "episode", label: "集" },
    ],
  },
+  one("promotion", "促销"),
+  one("videoCodec", "编码"),
+  one("releaseType", "质量"),
+  one("hdr", "HDR"),
+  one("resolution", "分辨率"),
+  one("releaseGroup", "制作组"),
+  one("audioCodec", "音频", true),
+  one("subtitle", "字幕", true),
+  one("dub", "配音", true),
+  one("feature", "特性", true),
+  one("year", "年份", true),
+  one("category", "分类", true),
+  one("size", "大小", true),
+  one("seeders", "做种", true),
+  one("hr", "H&R", true),
 ];

+export const MORE_GROUPS = QUICK_GROUPS.filter((g) => g.more);
+export const MORE_DIMS: QuickDim[] = MORE_GROUPS.flatMap((g) => g.dims.map((d) => d.dim));
+
 const DIM_ORDER: QuickDim[] = QUICK_GROUPS.flatMap((g) => g.dims.map((d) => d.dim));

-/** 记住上次选择的维度:与具体结果无关的档位;站点、制作组、季集随搜索变化,不记 */
-const PERSISTED: QuickDim[] = ["resolution", "videoCodec", "releaseType", "promotion", "hdr", "hr"];
+/** 记住上次选择的维度:与具体结果无关的档位;站点、制作组、季集、年份、分类随搜索变化,不记 */
+const PERSISTED: QuickDim[] = [
+  "resolution",
+  "videoCodec",
+  "releaseType",
+  "promotion",
+  "hdr",
+  "hr",
+  "audioCodec",
+  "subtitle",
+  "dub",
+  "feature",
+  "size",
+  "seeders",
+];

 /** 查询参数 qf:`维度:值,值;维度:值`,值经 encodeURIComponent */
 export function formatQuickFilter(sel: QuickSelection): string | undefined {
@@ -184,6 +184,8 @@ export function ReleaseResults({
          value={quick}
          onChange={setQuick}
          onClearAll={clearAll}
+          // 大小已有精确区间(大小与排序),不再给分档
+          hide={["size"]}
          extraTags={
            sizeTag
              ? [
@@ -75,7 +75,7 @@ describe("站点选择", () => {
    expect(toApiFilters({ tmdb: "movie:1" }, { ...f, sites: "" }, "")).not.toHaveProperty("q");
    // 快速筛选进 qf(同维度逗号分隔,值编码)
    expect(toApiFilters({ q: "x" }, f, "", { resolution: ["2160p", "1080p"], promotion: ["50%"], hdr: [] }).qf).toBe(
-      "resolution:2160p,1080p;promotion:50%25",
+      "promotion:50%25;resolution:2160p,1080p",
    );
    expect(toApiFilters({ q: "x" }, f, "", {}).qf).toBeUndefined();
  });