feat(web): 整理页只留整理记录，整理队列改成标题栏按钮，记录加维度筛选
- 标题栏「队列 N」(排队 + 执行中,含刮削)点开右侧面板看队列;面板开关在 URL(?queue=1), 旧链接 ?tab=queue 打开面板、?tab=records 去掉;整理向导「整理队列」跳到面板。 - 筛选学 MP:状态、类型、整理方式、媒体库目录、分类、来源、时间做成维度按钮(单选,带条数), 已选条件(含作品、需要处理、关键词、本次整理)排成可移除标签 +「清除」;按作品分组照旧。 Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
eb294b0ffa
commit
83be47aea2
8 files changed
+587
-196
No files matched your search
@@ -861,7 +861,7 @@ export function OrganizeWizard({ source, onClose }: { source: OrganizeSource; on
|
||||
onClick={() => {
|
||||
if (submitting.current) return;
|
||||
onClose();
|
||||
navigate("/console/organize?tab=queue");
|
||||
navigate("/console/organize?queue=1");
|
||||
}}
|
||||
>
|
||||
<FileStack />
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { EngineRun } from "@umt/contracts";
|
||||
import { FileStack, RefreshCw } from "lucide-react";
|
||||
import { FileStack, ListOrdered, Loader2, RefreshCw } from "lucide-react";
|
||||
import { Link } from "react-router";
|
||||
import { useDownloadTask } from "~/api/downloads.ts";
|
||||
import { useEngineRun, useEngineRuns } from "~/api/engine.ts";
|
||||
import { useEngineRun, useEngineRuns, useEngineRunsPage } from "~/api/engine.ts";
|
||||
import { useScrapeRecords } from "~/api/files.ts";
|
||||
import { ACTION_LABEL, useRecord } from "~/api/records.ts";
|
||||
import { useRecordsForDownload } from "~/api/tasks.ts";
|
||||
@@ -13,9 +13,11 @@ import { useListPagination } from "~/components/console/use-list-pagination.ts";
|
||||
import { relTime } from "~/components/library/parts.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { Pagination } from "~/components/ui/pagination.tsx";
|
||||
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet.tsx";
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
import { organizeQueueStage, organizeRunInput, scrapeQueueStage } from "./queue-model.ts";
|
||||
import { queueCountLabel } from "./record-filter-model.ts";
|
||||
import { recordFileProgress, recordTitle } from "./record-parts.ts";
|
||||
|
||||
function ScrapeQueueItem({ run }: { run: EngineRun }) {
|
||||
@@ -81,7 +83,7 @@ function QueueItem({ run }: { run: EngineRun }) {
|
||||
const download = useDownloadTask(downloadId);
|
||||
const record = recordQuery.data ?? matchingRecord;
|
||||
const progress = record ? recordFileProgress(record) : null;
|
||||
const title = record ? recordTitle(record) : (download.data?.name ?? run.business?.title ?? "核验入库任务");
|
||||
const title = record ? recordTitle(record) : (download.data?.name ?? run.business?.title ?? "核验整理任务");
|
||||
const source = record?.source.path ?? download.data?.contentPath ?? download.data?.savePath;
|
||||
const status = run.status === "pending" ? "排队" : run.status === "sleeping" ? "等待" : "执行中";
|
||||
return (
|
||||
@@ -135,18 +137,19 @@ function QueueItem({ run }: { run: EngineRun }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** Existing engine workflows are authoritative, including jobs that have not created a record yet. */
|
||||
export function OrganizeQueue() {
|
||||
const QUEUE_FILTER = { workflowName: "verifyAndImport,scrapeMedia", status: "pending,running,sleeping" } as const;
|
||||
|
||||
function useQueueInvalidation() {
|
||||
const qc = useQueryClient();
|
||||
const runs = useEngineRuns(
|
||||
{ workflowName: "verifyAndImport,scrapeMedia", status: "pending,running,sleeping" },
|
||||
true,
|
||||
5_000,
|
||||
);
|
||||
useSse(["task.created", "task.status_changed", "organization.changed", "download.status_changed"], () => {
|
||||
void qc.invalidateQueries({ queryKey: qk.all("engine") });
|
||||
void qc.invalidateQueries({ queryKey: ["records"] });
|
||||
});
|
||||
}
|
||||
|
||||
/** 排队与执行中的整理 / 刮削任务;以引擎运行为准(含还没生成整理记录的任务) */
|
||||
export function OrganizeQueue() {
|
||||
const runs = useEngineRuns(QUEUE_FILTER, true, 5_000);
|
||||
const rows = runs.data?.pages.flatMap((page) => page.items);
|
||||
const paged = useListPagination(rows, {
|
||||
hasMore: runs.hasNextPage,
|
||||
@@ -157,10 +160,7 @@ export function OrganizeQueue() {
|
||||
});
|
||||
return (
|
||||
<section aria-label="排队与执行中的整理任务" className="space-y-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<p className="text-caption text-muted-foreground">
|
||||
下载核验、手动与自动整理、整理后的 NFO / 图片刮削在此排队。整理完成后进入记录，刮削继续显示到任务结束。
|
||||
</p>
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" size="sm" disabled={runs.isFetching} onClick={() => void runs.refetch()}>
|
||||
<RefreshCw />
|
||||
刷新
|
||||
@@ -187,3 +187,44 @@ export function OrganizeQueue() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const COUNT_LIMIT = 100;
|
||||
|
||||
/**
|
||||
* 整理队列入口(对照 MP 整理历史页的「整理队列」按钮):标题栏一个按钮写当前排队 + 执行中的任务数,
|
||||
* 点开右侧面板看队列。面板开关由页面放在 URL(?queue=1),旧链接 ?tab=queue 也落到这里。
|
||||
*/
|
||||
export function OrganizeQueueButton({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
|
||||
useQueueInvalidation();
|
||||
const page = useEngineRunsPage(QUEUE_FILTER, COUNT_LIMIT, 10_000);
|
||||
const items = page.data?.items ?? [];
|
||||
const running = items.some((r) => r.status === "running");
|
||||
const count = queueCountLabel(items.length, !!page.data?.nextCursor);
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={open}
|
||||
aria-label={count ? `整理队列：${count} 个任务` : "整理队列"}
|
||||
onClick={() => onOpenChange(true)}
|
||||
>
|
||||
{running ? <Loader2 className="animate-spin" /> : <ListOrdered />}
|
||||
队列
|
||||
{count ? <span className="tabular-nums">{count}</span> : null}
|
||||
</Button>
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent side="right" className="w-full gap-0 sm:max-w-xl">
|
||||
<SheetHeader className="pr-12">
|
||||
<SheetTitle>整理队列</SheetTitle>
|
||||
<SheetDescription className="text-meta">
|
||||
下载核验、手动与自动整理、整理后的 NFO / 图片刮削在这里排队。整理完成后进入整理记录，刮削显示到任务结束。
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4">{open ? <OrganizeQueue /> : null}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { RECORD_STATUS_LABEL, TRIGGER_LABEL } from "~/api/records.ts";
|
||||
import { buildDims, filterTags, normalizeLegacyParams, queueCountLabel } from "./record-filter-model.ts";
|
||||
|
||||
const ctx = {
|
||||
statusLabel: RECORD_STATUS_LABEL,
|
||||
triggerLabel: TRIGGER_LABEL,
|
||||
rootName: (id: string) => ({ r1: "电影库", r2: "剧集库" })[id] ?? "已移除的目录",
|
||||
facets: {
|
||||
action: [
|
||||
{ value: "copy", n: 12 },
|
||||
{ value: "move", n: 3 },
|
||||
],
|
||||
libraryRootId: [
|
||||
{ value: "r1", n: 10 },
|
||||
{ value: "r2", n: 5 },
|
||||
],
|
||||
category: [{ value: "欧美电影", n: 7 }],
|
||||
},
|
||||
};
|
||||
|
||||
describe("整理记录筛选维度", () => {
|
||||
it("维度顺序与选项:状态不含排队 / 执行中,整理方式与目录来自统计并带条数", () => {
|
||||
const dims = buildDims({}, ctx);
|
||||
expect(dims.map((d) => d.label)).toEqual(["状态", "类型", "整理方式", "媒体库目录", "分类", "来源", "时间"]);
|
||||
expect(dims[0]!.options.map((o) => o.value)).toEqual(["succeeded", "partial", "failed", "cancelled"]);
|
||||
expect(dims[2]!.options).toEqual([
|
||||
{ value: "copy", label: "复制", n: 12 },
|
||||
{ value: "move", label: "移动", n: 3 },
|
||||
]);
|
||||
expect(dims[3]!.options.map((o) => o.label)).toEqual(["电影库", "剧集库"]);
|
||||
});
|
||||
|
||||
it("已选值当前没有记录时仍列出,免得选中项消失", () => {
|
||||
const dims = buildDims({ category: "纪录片", action: "in_place" }, ctx);
|
||||
expect(dims.find((d) => d.key === "category")!.options).toContainEqual({ value: "纪录片", label: "纪录片", n: 0 });
|
||||
expect(dims.find((d) => d.key === "action")!.options).toContainEqual({
|
||||
value: "in_place",
|
||||
label: "原地整理",
|
||||
n: 0,
|
||||
});
|
||||
});
|
||||
|
||||
it("统计还没回来时整理方式列全部,目录与分类为空", () => {
|
||||
const dims = buildDims({}, { ...ctx, facets: undefined });
|
||||
expect(dims.find((d) => d.key === "action")!.options.map((o) => o.label)).toEqual([
|
||||
"复制",
|
||||
"移动",
|
||||
"硬链接",
|
||||
"原地整理",
|
||||
]);
|
||||
expect(dims.find((d) => d.key === "root")!.options).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("已选条件标签", () => {
|
||||
it("本次整理、作品、需要处理在前,其余按维度顺序,关键词最后", () => {
|
||||
const v = { status: "failed", root: "r1", category: "欧美电影", attention: "1", q: "Arrival" };
|
||||
const tags = filterTags(v, buildDims(v, ctx), { entityId: "e1", entityTitle: "沙丘", pinned: 0 });
|
||||
expect(tags.map((t) => `${t.dimLabel}:${t.label}`)).toEqual([
|
||||
"作品:沙丘",
|
||||
"只看:需要处理",
|
||||
"状态:失败",
|
||||
"媒体库目录:电影库",
|
||||
"分类:欧美电影",
|
||||
"关键词:Arrival",
|
||||
]);
|
||||
});
|
||||
|
||||
it("没有条件时没有标签;作品标题没取到时写「已选作品」", () => {
|
||||
expect(filterTags({}, buildDims({}, ctx), {})).toEqual([]);
|
||||
expect(filterTags({}, buildDims({}, ctx), { entityId: "e1" })[0]).toMatchObject({ label: "已选作品" });
|
||||
expect(filterTags({}, buildDims({}, ctx), { pinned: 3 })[0]).toMatchObject({ dimLabel: "本次整理", label: "3 条" });
|
||||
});
|
||||
});
|
||||
|
||||
describe("旧链接与队列按钮", () => {
|
||||
it("?tab=queue 打开队列面板,?tab=records 去掉,其余参数保留", () => {
|
||||
expect(normalizeLegacyParams(new URLSearchParams("tab=queue"))?.toString()).toBe("queue=1");
|
||||
expect(normalizeLegacyParams(new URLSearchParams("tab=records&attention=1"))?.toString()).toBe("attention=1");
|
||||
expect(normalizeLegacyParams(new URLSearchParams("status=failed"))).toBeNull();
|
||||
});
|
||||
|
||||
it("队列数:0 不写,超过一页写 N+", () => {
|
||||
expect(queueCountLabel(0, false)).toBeNull();
|
||||
expect(queueCountLabel(3, false)).toBe("3");
|
||||
expect(queueCountLabel(100, true)).toBe("100+");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,114 @@
|
||||
import type { OrganizationStats } from "@umt/contracts";
|
||||
|
||||
// 整理记录筛选(对照 MP 的维度按钮 + 可删条件标签):每个维度一个按钮,点开单选;已选条件排成可移除的标签。
|
||||
// 条件都写在 URL 里(刷新、分享不丢);旧链接 ?tab=queue / ?tab=records 换成单页 + 队列面板(?queue=1)。
|
||||
|
||||
export const RECORD_FILTER_KEYS = [
|
||||
"status",
|
||||
"kind",
|
||||
"action",
|
||||
"root",
|
||||
"category",
|
||||
"trigger",
|
||||
"time",
|
||||
"q",
|
||||
"group",
|
||||
"attention",
|
||||
] as const;
|
||||
export type RecordFilterKey = (typeof RECORD_FILTER_KEYS)[number];
|
||||
|
||||
export const KIND_LABEL = { movie: "电影", series: "剧集", none: "未识别" } as const;
|
||||
export const TIME_LABEL = { today: "今天", "7d": "最近 7 天", "30d": "最近 30 天" } as const;
|
||||
/** 整理记录能筛的整理方式(不含文件管理的改名、删除、还原) */
|
||||
export const ORGANIZE_ACTION_LABEL = { copy: "复制", move: "移动", hardlink: "硬链接", in_place: "原地整理" } as const;
|
||||
|
||||
export type FilterOptionN = { value: string; label: string; n?: number };
|
||||
|
||||
/** 一个维度按钮:单选,value 为空 = 不限 */
|
||||
export type FilterDim = {
|
||||
key: "status" | "kind" | "action" | "root" | "category" | "trigger" | "time";
|
||||
label: string;
|
||||
options: FilterOptionN[];
|
||||
};
|
||||
|
||||
/** 可移除的条件标签 */
|
||||
export type FilterTag = { key: string; dimLabel: string; label: string };
|
||||
|
||||
type Values = Partial<Record<RecordFilterKey, string>>;
|
||||
|
||||
/**
|
||||
* 维度按钮的选项。整理方式 / 媒体库目录 / 分类只列有记录的值(来自统计的 facets,带条数);
|
||||
* 已选但当前没有记录的值仍然列出,免得选中项"消失"。
|
||||
*/
|
||||
export function buildDims(
|
||||
v: Values,
|
||||
ctx: {
|
||||
statusLabel: Record<string, string>;
|
||||
triggerLabel: Record<string, string>;
|
||||
facets?: OrganizationStats["facets"];
|
||||
rootName: (id: string) => string;
|
||||
},
|
||||
): FilterDim[] {
|
||||
const facet = (list: { value: string; n: number }[] | undefined, chosen: string, label: (x: string) => string) => {
|
||||
const opts: FilterOptionN[] = (list ?? []).map((x) => ({ value: x.value, label: label(x.value), n: x.n }));
|
||||
if (chosen && !opts.some((o) => o.value === chosen)) opts.push({ value: chosen, label: label(chosen), n: 0 });
|
||||
return opts;
|
||||
};
|
||||
const entries = (o: Record<string, string>) => Object.entries(o).map(([value, label]) => ({ value, label }));
|
||||
const actionLabel = (x: string) => ORGANIZE_ACTION_LABEL[x as keyof typeof ORGANIZE_ACTION_LABEL] ?? x;
|
||||
return [
|
||||
{
|
||||
key: "status",
|
||||
label: "状态",
|
||||
options: entries(ctx.statusLabel).filter((o) => o.value !== "queued" && o.value !== "running"),
|
||||
},
|
||||
{ key: "kind", label: "类型", options: entries(KIND_LABEL) },
|
||||
{
|
||||
key: "action",
|
||||
label: "整理方式",
|
||||
options: ctx.facets ? facet(ctx.facets.action, v.action ?? "", actionLabel) : entries(ORGANIZE_ACTION_LABEL),
|
||||
},
|
||||
{ key: "root", label: "媒体库目录", options: facet(ctx.facets?.libraryRootId, v.root ?? "", ctx.rootName) },
|
||||
{ key: "category", label: "分类", options: facet(ctx.facets?.category, v.category ?? "", (x) => x) },
|
||||
{ key: "trigger", label: "来源", options: entries(ctx.triggerLabel) },
|
||||
{ key: "time", label: "时间", options: entries(TIME_LABEL) },
|
||||
];
|
||||
}
|
||||
|
||||
/** 已选条件 → 标签(按维度顺序;作品、需要处理、本次整理的记录也算条件) */
|
||||
export function filterTags(
|
||||
v: Values,
|
||||
dims: FilterDim[],
|
||||
extra: { entityTitle?: string | null; entityId?: string | null; pinned?: number },
|
||||
): FilterTag[] {
|
||||
const tags: FilterTag[] = [];
|
||||
if (extra.pinned) tags.push({ key: "ids", dimLabel: "本次整理", label: `${extra.pinned} 条` });
|
||||
if (extra.entityId) tags.push({ key: "mediaEntityId", dimLabel: "作品", label: extra.entityTitle || "已选作品" });
|
||||
if (v.attention === "1") tags.push({ key: "attention", dimLabel: "只看", label: "需要处理" });
|
||||
for (const d of dims) {
|
||||
const value = v[d.key];
|
||||
if (!value) continue;
|
||||
tags.push({ key: d.key, dimLabel: d.label, label: d.options.find((o) => o.value === value)?.label ?? value });
|
||||
}
|
||||
if (v.q) tags.push({ key: "q", dimLabel: "关键词", label: v.q });
|
||||
return tags;
|
||||
}
|
||||
|
||||
/**
|
||||
* 旧链接兼容:整理页曾分「整理队列」「整理记录」两个标签页。
|
||||
* ?tab=queue → 打开队列面板(?queue=1);?tab=records 或其它值 → 去掉。不需要改时返回 null。
|
||||
*/
|
||||
export function normalizeLegacyParams(params: URLSearchParams): URLSearchParams | null {
|
||||
const tab = params.get("tab");
|
||||
if (tab === null) return null;
|
||||
const next = new URLSearchParams(params);
|
||||
next.delete("tab");
|
||||
if (tab === "queue") next.set("queue", "1");
|
||||
return next;
|
||||
}
|
||||
|
||||
/** 队列按钮上的数:0 不写;超过一页写 N+ */
|
||||
export function queueCountLabel(n: number, more: boolean): string | null {
|
||||
if (!n) return null;
|
||||
return more ? `${n}+` : String(n);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { Check, ChevronDown, X } from "lucide-react";
|
||||
import type * as React from "react";
|
||||
import { useState } from "react";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
|
||||
import { cn } from "~/lib/utils.ts";
|
||||
import type { FilterDim, FilterTag } from "./record-filter-model.ts";
|
||||
|
||||
// 整理记录筛选条:一行可横向滚动的维度按钮(单选弹层),下面一行已选条件标签(点一下移除)+「清除」。
|
||||
// 外观与资源快速筛选(components/search/quick-filter-bar.tsx)一致。
|
||||
|
||||
export function RecordFilterChips({
|
||||
dims,
|
||||
values,
|
||||
onChange,
|
||||
}: {
|
||||
dims: FilterDim[];
|
||||
values: Partial<Record<FilterDim["key"], string>>;
|
||||
onChange: (key: FilterDim["key"], value: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
role="toolbar"
|
||||
aria-label="筛选维度"
|
||||
className="scroll-bleed -mx-1 flex min-w-0 gap-1.5 overflow-x-auto px-1 pb-0.5 [scrollbar-width:none]"
|
||||
>
|
||||
{dims
|
||||
// 只有一个可选值又没选时不用筛(比如只有一个媒体库目录)
|
||||
.filter((d) => d.options.length > 1 || !!values[d.key])
|
||||
.map((d) => (
|
||||
<DimButton key={d.key} dim={d} value={values[d.key] ?? ""} onChange={(x) => onChange(d.key, x)} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DimButton({ dim, value, onChange }: { dim: FilterDim; value: string; onChange: (v: string) => void }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const pick = (x: string) => {
|
||||
setOpen(false);
|
||||
onChange(x);
|
||||
};
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Chip label={dim.label} active={!!value} />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" className="w-56 p-1" aria-label={dim.label}>
|
||||
<div className="flex max-h-[min(60dvh,22rem)] flex-col overflow-y-auto">
|
||||
<OptionRow on={!value} label="不限" onClick={() => pick("")} />
|
||||
{dim.options.map((o) => (
|
||||
<OptionRow
|
||||
key={o.value}
|
||||
on={value === o.value}
|
||||
label={o.label}
|
||||
n={o.n}
|
||||
onClick={() => pick(value === o.value ? "" : o.value)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
function OptionRow({ on, label, n, onClick }: { on: boolean; label: string; n?: number; onClick: () => void }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitemradio"
|
||||
aria-checked={on}
|
||||
onClick={onClick}
|
||||
className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-2 text-left text-sm text-foreground transition-colors duration-micro hover:bg-foreground/[0.06] md:py-1.5"
|
||||
>
|
||||
<span aria-hidden className="grid h-4 w-4 shrink-0 place-items-center">
|
||||
{on ? <Check className="h-3.5 w-3.5" /> : null}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 truncate">{label}</span>
|
||||
{n ? <span className="text-meta text-muted-foreground tabular-nums">{n}</span> : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/** 维度按钮;Popover 的 asChild 需要转发 ref 与事件,所以透传其余属性 */
|
||||
function Chip({
|
||||
label,
|
||||
active,
|
||||
className,
|
||||
...rest
|
||||
}: React.ComponentProps<"button"> & { label: string; active: 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]",
|
||||
active
|
||||
? "pill-selected text-foreground"
|
||||
: "border-border text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
<ChevronDown className="h-3.5 w-3.5 opacity-70" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/** 已选条件:每个一个可移除标签,末尾一个「清除」 */
|
||||
export function RecordFilterTags({
|
||||
tags,
|
||||
onRemove,
|
||||
onClear,
|
||||
}: {
|
||||
tags: FilterTag[];
|
||||
onRemove: (key: string) => void;
|
||||
onClear: () => void;
|
||||
}) {
|
||||
if (!tags.length) return null;
|
||||
return (
|
||||
<div className="mb-3 flex min-w-0 flex-wrap items-center gap-1.5">
|
||||
{tags.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
type="button"
|
||||
onClick={() => onRemove(t.key)}
|
||||
aria-label={`移除筛选 ${t.dimLabel} ${t.label}`}
|
||||
className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-full bg-foreground/[0.06] pr-1.5 pl-2.5 text-meta text-foreground transition-colors duration-micro hover:bg-foreground/[0.1]"
|
||||
>
|
||||
<span className="text-muted-foreground">{t.dimLabel}</span>
|
||||
<span className="max-w-40 truncate">{t.label}</span>
|
||||
<X className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
))}
|
||||
<Button variant="ghost" size="sm" className="h-7" onClick={onClear}>
|
||||
清除
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user