feat(web): IA-3 navigation, legacy redirects and top-bar inbox (FE-1)
Sidebar becomes 5 groups (overview / resources / subscriptions / organize / system). Pending items move to a top-bar inbox with badge and grouped dropdown. Engine panel, schedules and identity pages redirect to the task page, its plan tab and media overview views; the download plan becomes a second tab of the download panel. nav.test and smoke cover the new routes. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
4bb2583f6c
commit
738d4ce752
18 files changed
+647
-1104
No files matched your search
@@ -0,0 +1,261 @@
|
||||
import type {
|
||||
ExternalIdentity,
|
||||
IdentityCandidateReason,
|
||||
IdentityCandidateStatus,
|
||||
IdentityPoolItem,
|
||||
IdentityStatus,
|
||||
} from "@umt/contracts";
|
||||
import { ArrowRight, Fingerprint, Lock, SearchX } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { useExternalIdentities, useIdentityPool } from "~/api/identity.ts";
|
||||
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { ExternalIdentitySheet, identityRef } from "~/components/library/identity-external-sheet.tsx";
|
||||
import { inboxLink, inInbox, PoolSheet, querySummary } from "~/components/library/identity-pool-sheet.tsx";
|
||||
import {
|
||||
EVIDENCE_LEVEL,
|
||||
IDENTITY_STATUS,
|
||||
opts,
|
||||
POOL_REASON,
|
||||
POOL_STATUS,
|
||||
VERIFY_STATUS,
|
||||
} from "~/components/library/labels.ts";
|
||||
import { relTime, Tone } from "~/components/library/parts.tsx";
|
||||
|
||||
// 媒体概览的身份视图(原"身份与元数据"页,IA-3 并入 /console/library):待识别资源、外部身份。
|
||||
// 待识别资源只读;选候选、忽略在待处理里做(docs/design/console-ia.md §3.1 判定只在待处理)。
|
||||
|
||||
function useDebounced(v: string, ms = 250) {
|
||||
const [d, setD] = useState(v);
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setD(v), ms);
|
||||
return () => clearTimeout(t);
|
||||
}, [v, ms]);
|
||||
return d;
|
||||
}
|
||||
|
||||
export function PoolTab() {
|
||||
const [q, setQ] = useState("");
|
||||
const [status, setStatus] = useState("pending");
|
||||
const [reason, setReason] = useState("");
|
||||
const dq = useDebounced(q.trim());
|
||||
const pool = useIdentityPool({
|
||||
q: dq || undefined,
|
||||
status: (status || undefined) as IdentityCandidateStatus | undefined,
|
||||
reason: (reason || undefined) as IdentityCandidateReason | undefined,
|
||||
});
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const rows = pool.data?.pages.flatMap((p) => p.items);
|
||||
const open = rows?.find((r) => r.id === openId) ?? null;
|
||||
|
||||
const columns: DataColumn<IdentityPoolItem>[] = [
|
||||
{
|
||||
key: "title",
|
||||
header: "原始标题",
|
||||
className: "max-w-0 w-full",
|
||||
cell: (r) => (
|
||||
<div className="min-w-0">
|
||||
<p className="font-mono text-caption break-all text-foreground">{r.release.title}</p>
|
||||
<p className="mt-0.5 truncate text-meta text-muted-foreground">
|
||||
{r.release.subtitle ? `${r.release.subtitle} · ` : ""}解析:{querySummary(r.query)}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "reason",
|
||||
header: "原因",
|
||||
cell: (r) => (
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<Tone v={POOL_REASON[r.reason]} />
|
||||
{inInbox(r) ? (
|
||||
<Link
|
||||
to={inboxLink(r)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="inline-flex items-center gap-0.5 text-meta whitespace-nowrap text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
|
||||
>
|
||||
已进待处理
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "cands",
|
||||
header: "候选",
|
||||
hideBelow: "sm",
|
||||
align: "right",
|
||||
cell: (r) => <span className="tabular-nums">{r.candidates.length}</span>,
|
||||
},
|
||||
{
|
||||
key: "attempts",
|
||||
header: "尝试",
|
||||
hideBelow: "md",
|
||||
cell: (r) => (
|
||||
<span className="text-meta whitespace-nowrap text-muted-foreground">
|
||||
{r.attempts} 次 · {relTime(r.lastAttemptAt)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "next",
|
||||
header: "下次复查",
|
||||
hideBelow: "lg",
|
||||
cell: (r) => (
|
||||
<span className="text-meta whitespace-nowrap text-muted-foreground">
|
||||
{r.status === "pending" ? (
|
||||
r.nextReviewAt ? (
|
||||
relTime(r.nextReviewAt)
|
||||
) : (
|
||||
"不自动复查"
|
||||
)
|
||||
) : (
|
||||
<Tone v={POOL_STATUS[r.status]} />
|
||||
)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const filtered = !!q || status !== "pending" || !!reason;
|
||||
return (
|
||||
<>
|
||||
<FilterBar
|
||||
search={{ value: q, onChange: setQ, placeholder: "按原始标题 / 解析标题检索" }}
|
||||
onReset={
|
||||
filtered
|
||||
? () => {
|
||||
setQ("");
|
||||
setStatus("pending");
|
||||
setReason("");
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<FilterSelect label="状态" value={status} onChange={setStatus} options={opts(POOL_STATUS)} />
|
||||
<FilterSelect label="原因" value={reason} onChange={setReason} options={opts(POOL_REASON)} />
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(r) => r.id}
|
||||
loading={pool.isPending}
|
||||
error={pool.error}
|
||||
onRetry={() => pool.refetch()}
|
||||
onRowClick={(r) => setOpenId(r.id)}
|
||||
selectedKey={openId}
|
||||
empty={{
|
||||
icon: SearchX,
|
||||
title: filtered ? "没有符合条件的待识别资源" : "没有待识别资源",
|
||||
description: "证据不足或冲突的资源会出现在这里,有新证据时自动重试。",
|
||||
}}
|
||||
hasMore={pool.hasNextPage}
|
||||
onLoadMore={() => pool.fetchNextPage()}
|
||||
loadingMore={pool.isFetchingNextPage}
|
||||
/>
|
||||
<PoolSheet key={open?.id ?? "none"} item={open} onClose={() => setOpenId(null)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ExternalTab() {
|
||||
const [provider, setProvider] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const list = useExternalIdentities({
|
||||
provider: provider || undefined,
|
||||
status: (status || undefined) as IdentityStatus | undefined,
|
||||
});
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const rows = list.data?.pages.flatMap((p) => p.items);
|
||||
const open = rows?.find((r) => r.id === openId) ?? null;
|
||||
|
||||
const columns: DataColumn<ExternalIdentity>[] = [
|
||||
{
|
||||
key: "ref",
|
||||
header: "外部身份",
|
||||
cell: (r) => (
|
||||
<span className="inline-flex items-center gap-1.5 font-mono text-caption break-all text-foreground">
|
||||
{r.locked ? <Lock className="h-3 w-3 shrink-0 text-muted-foreground" aria-label="已锁定" /> : null}
|
||||
{identityRef(r)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "entity",
|
||||
header: "作品",
|
||||
hideBelow: "sm",
|
||||
cell: (r) => (
|
||||
<span className="line-clamp-1 text-caption text-foreground">
|
||||
{r.mediaEntityTitle ?? <span className="text-muted-foreground">未关联</span>}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ key: "status", header: "状态", cell: (r) => <Tone v={IDENTITY_STATUS[r.status]} /> },
|
||||
{
|
||||
key: "level",
|
||||
header: "证据",
|
||||
hideBelow: "sm",
|
||||
cell: (r) => <span className="text-meta whitespace-nowrap">{EVIDENCE_LEVEL[r.evidenceLevel]}</span>,
|
||||
},
|
||||
{ key: "verify", header: "外部校验", hideBelow: "md", cell: (r) => <Tone v={VERIFY_STATUS[r.verifyStatus]} /> },
|
||||
{
|
||||
key: "rev",
|
||||
header: "修订",
|
||||
hideBelow: "lg",
|
||||
align: "right",
|
||||
cell: (r) => (
|
||||
<span className="text-meta whitespace-nowrap text-muted-foreground tabular-nums">
|
||||
r{r.revision} · {relTime(r.updatedAt)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
const filtered = !!provider || !!status;
|
||||
return (
|
||||
<>
|
||||
<FilterBar
|
||||
onReset={
|
||||
filtered
|
||||
? () => {
|
||||
setProvider("");
|
||||
setStatus("");
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<FilterSelect
|
||||
label="来源"
|
||||
value={provider}
|
||||
onChange={setProvider}
|
||||
options={[
|
||||
{ value: "tmdb", label: "TMDB" },
|
||||
{ value: "imdb", label: "IMDb" },
|
||||
{ value: "tvdb", label: "TVDB" },
|
||||
]}
|
||||
/>
|
||||
<FilterSelect label="状态" value={status} onChange={setStatus} options={opts(IDENTITY_STATUS)} />
|
||||
</FilterBar>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(r) => r.id}
|
||||
loading={list.isPending}
|
||||
error={list.error}
|
||||
onRetry={() => list.refetch()}
|
||||
onRowClick={(r) => setOpenId(r.id)}
|
||||
selectedKey={openId}
|
||||
empty={{
|
||||
icon: Fingerprint,
|
||||
title: "没有外部身份",
|
||||
description: "没有外部身份的作品也能建档入库。",
|
||||
}}
|
||||
hasMore={list.hasNextPage}
|
||||
onLoadMore={() => list.fetchNextPage()}
|
||||
loadingMore={list.isFetchingNextPage}
|
||||
/>
|
||||
<ExternalIdentitySheet item={open} onClose={() => setOpenId(null)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user