feat(web): more-filters panel and MP ordering for quick filters (SEARCH-4)

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-09-30 22:40:55 +08:00
1 parent d9cf8f1c3a
commit b15c06ad20
6 files changed
+307 -77

No files matched your search

@@ -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();
});
+16 -38
View File
@@ -56,33 +56,19 @@ const RESOLUTION: { value: ResolutionStatus; label: string }[] = [
{ value: "ambiguous", label: "有歧义" },
{ value: "unidentifiable", label: "无法识别" },
];
const SIZE = [
{ value: "lt5", label: "< 5 GB" },
{ value: "5to20", label: "5–20 GB" },
{ value: "20to60", label: "20–60 GB" },
{ value: "gt60", label: "> 60 GB" },
];
const AGE = [
{ value: "1", label: "24 小时内" },
{ value: "7", label: "7 天内" },
{ value: "30", label: "30 天内" },
];
const GB = 1024 ** 3;
/** 服务端不支持的维度(做种/大小/上传时间)在已加载结果里筛选,界面上写明;H&R 在快速筛选里(POLISH-1) */
type LocalFilters = { seeding: string; size: string; age: string };
/**
* 服务端不支持的维度(上传时间)在已加载结果里筛选,界面上写明。H&R(POLISH-1)、做种与大小(SEARCH-4)
* 在快速筛选里,按全部本地资源计数和筛选。
*/
type LocalFilters = { age: string };
function localMatch(r: WorkbenchRelease, f: LocalFilters, now: number) {
if (f.seeding === "alive" && !(r.seeders && r.seeders > 0)) return false;
if (f.seeding === "hot" && !(r.seeders && r.seeders >= 20)) return false;
if (f.size) {
const s = r.sizeBytes;
if (s === null) return false;
if (f.size === "lt5" && s >= 5 * GB) return false;
if (f.size === "5to20" && (s < 5 * GB || s >= 20 * GB)) return false;
if (f.size === "20to60" && (s < 20 * GB || s >= 60 * GB)) return false;
if (f.size === "gt60" && s < 60 * GB) return false;
}
if (f.age) {
const t = r.sourcePublishedAt ? new Date(r.sourcePublishedAt).getTime() : null;
if (t === null || now - t > Number(f.age) * 86_400_000) return false;
@@ -151,7 +137,7 @@ export default function SiteWorkbenchPage() {
const q = useDebounced(qInput.trim());
const [category, setCategory] = useState("");
const [resolution, setResolution] = useState("");
const [local, setLocal] = useState<LocalFilters>({ seeding: "", size: "", age: "" });
const [local, setLocal] = useState<LocalFilters>({ age: "" });
// 快速筛选(SEARCH-3):服务端按本地资源表数据统计与筛选,不触发站点请求
const [quick, setQuick] = useQuickFilters("site");
const qf = formatQuickFilter(quick);
@@ -202,7 +188,7 @@ export default function SiteWorkbenchPage() {
setCategory("");
setQuick({});
setResolution("");
setLocal({ seeding: "", size: "", age: "" });
setLocal({ age: "" });
};
const anyFilter = !!(qInput || category || resolution || localActive || selectedCount(quick));
@@ -377,21 +363,6 @@ export default function SiteWorkbenchPage() {
>
<FilterSelect label="分类" value={category} onChange={setCategory} options={categories} />
<FilterSelect label="识别" value={resolution} onChange={setResolution} options={RESOLUTION} />
<FilterSelect
label="做种"
value={local.seeding}
onChange={(v) => setLocal((l) => ({ ...l, seeding: v }))}
options={[
{ value: "alive", label: "有人做种" },
{ value: "hot", label: "≥ 20 做种" },
]}
/>
<FilterSelect
label="大小"
value={local.size}
onChange={(v) => setLocal((l) => ({ ...l, size: v }))}
options={SIZE}
/>
<FilterSelect
label="上传"
value={local.age}
@@ -401,7 +372,14 @@ export default function SiteWorkbenchPage() {
</FilterBar>
{/* 「清除筛选」在上方筛选行,一并清掉快速筛选 */}
<QuickFilterBar facets={pages[0]?.facets} value={quick} onChange={setQuick} hide={["site"]} hideClear />
{/* 分类已有上方的站点分类下拉(与 MP 站点资源一致),不再给分面 */}
<QuickFilterBar
facets={pages[0]?.facets}
value={quick}
onChange={setQuick}
hide={["site", "category"]}
hideClear
/>
{coverage || refreshFailed ? (
<CoverageBanner coverage={coverage} refreshError={refreshFailed ? releases.error : null} />
@@ -429,7 +407,7 @@ export default function SiteWorkbenchPage() {
}
description={
all.length
? "做种、大小、上传时间只筛选已加载的结果。加载更多或放宽条件。"
? "上传时间只筛选已加载的结果。加载更多或放宽条件。"
: quickHidden
? "减少快速筛选条件再看。"
: coverage?.liveError