267 行
11 KiB
TypeScript
267 行
11 KiB
TypeScript
import { Link, useSearchParams } from "react-router-dom";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { toast } from "sonner";
|
|
import { fetchNotifications, markAllNotificationsRead, markNotificationRead } from "../api/notifications";
|
|
import { TableSkeleton } from "../components/common/TableSkeleton";
|
|
import { Pagination } from "../components/common/Pagination";
|
|
import { Button } from "../components/ui/button";
|
|
import { FilterBar, ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
|
|
import { resolveNotificationTargetLink } from "../lib/notificationLinks";
|
|
import { resolveErrorMessage } from "../lib/resolveErrorMessage";
|
|
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
|
|
|
|
const PAGE_SIZE = 20;
|
|
|
|
const NOTIFICATION_TYPE_OPTIONS = [
|
|
{ label: "全部", value: "" },
|
|
{ label: "审批提醒", value: "workflow.task_assigned" },
|
|
{ label: "报销", value: "reimbursement.approved,reimbursement.rejected,reimbursement.returned,reimbursement.paid,payment_batch.review_requested,payment_batch.execution_requested" },
|
|
{ label: "请假", value: "leave.approved,leave.rejected" },
|
|
{ label: "采购", value: "purchase_request.approved,purchase_request.rejected" },
|
|
{ label: "差旅", value: "travel_request.approved,travel_request.rejected" },
|
|
{ label: "资产", value: "asset.assigned,asset.returned,asset.transferred" },
|
|
{ label: "盘点", value: "inventory_check.completed" },
|
|
];
|
|
|
|
export function NotificationsPage() {
|
|
const queryClient = useQueryClient();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const unreadOnlyRaw = searchParams.get("unreadOnly") ?? "0";
|
|
const unreadOnly = unreadOnlyRaw === "1" || unreadOnlyRaw === "true";
|
|
const page = Number(searchParams.get("page") ?? "1") || 1;
|
|
const selectedType = searchParams.get("type") ?? "";
|
|
|
|
const updateFilters = (next: { unreadOnly?: boolean; page?: number; type?: string }) => {
|
|
const params = new URLSearchParams();
|
|
params.set("unreadOnly", (next.unreadOnly ?? unreadOnly) ? "1" : "0");
|
|
params.set("page", String(next.page ?? page));
|
|
const nextType = next.type ?? selectedType;
|
|
if (nextType) {
|
|
params.set("type", nextType);
|
|
}
|
|
setSearchParams(params);
|
|
};
|
|
|
|
const listQuery = useQuery({
|
|
queryKey: ["notifications", "list", unreadOnly, selectedType, page],
|
|
queryFn: () =>
|
|
fetchNotifications({
|
|
unreadOnly,
|
|
page,
|
|
pageSize: PAGE_SIZE,
|
|
...(selectedType ? { type: selectedType } : {}),
|
|
}),
|
|
});
|
|
|
|
const markReadMutation = useMutation({
|
|
mutationFn: async (notificationId: string) => markNotificationRead(notificationId),
|
|
onSuccess: async () => {
|
|
await queryClient.invalidateQueries({ queryKey: ["notifications"] });
|
|
},
|
|
});
|
|
|
|
const markAllReadMutation = useMutation({
|
|
mutationFn: () => markAllNotificationsRead(),
|
|
onSuccess: async () => {
|
|
toast.success("已全部标为已读");
|
|
await queryClient.invalidateQueries({ queryKey: ["notifications"] });
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
|
|
const notificationItems = listQuery.data?.items ?? [];
|
|
|
|
return (
|
|
<ListWorkspace>
|
|
<WorkspaceHeader
|
|
title="通知中心"
|
|
actions={
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
data-testid="notifications-mark-all-read"
|
|
disabled={(listQuery.data?.unreadCount ?? 0) === 0 || markAllReadMutation.isPending}
|
|
onClick={() => markAllReadMutation.mutate()}
|
|
>
|
|
全部标为已读
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<FilterBar className="ops-command-bar !p-3 md:!p-3.5">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center">
|
|
<Tabs
|
|
data-testid="notifications-filter-tabs"
|
|
value={unreadOnly ? "unread" : "all"}
|
|
onValueChange={(value) =>
|
|
updateFilters({
|
|
unreadOnly: value === "unread",
|
|
page: 1,
|
|
})
|
|
}
|
|
>
|
|
<TabsList className="ops-command-bar__tabs !w-full md:!w-auto">
|
|
<TabsTrigger data-testid="notifications-filter-all" value="all">
|
|
全部
|
|
</TabsTrigger>
|
|
<TabsTrigger data-testid="notifications-filter-unread" value="unread">
|
|
未读
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<label className="flex items-center gap-2 text-sm text-zinc-600">
|
|
<span>类型</span>
|
|
<select
|
|
data-testid="notifications-type-filter"
|
|
className="select-sm min-w-40"
|
|
value={selectedType}
|
|
onChange={(event) =>
|
|
updateFilters({
|
|
type: event.target.value,
|
|
page: 1,
|
|
})
|
|
}
|
|
>
|
|
{NOTIFICATION_TYPE_OPTIONS.map((option) => (
|
|
<option key={option.label} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="detail-evidence-card text-sm">
|
|
<span className="font-semibold text-zinc-900">未读 {listQuery.data?.unreadCount ?? 0}</span>
|
|
<span className="ml-2 text-zinc-500">/ 共 {listQuery.data?.total ?? 0}</span>
|
|
</div>
|
|
</div>
|
|
</FilterBar>
|
|
|
|
{listQuery.isLoading ? <TableSkeleton columns={4} rows={5} /> : null}
|
|
|
|
{listQuery.isError ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{resolveErrorMessage(listQuery.error, "加载通知失败")}
|
|
</p>
|
|
) : null}
|
|
|
|
{!listQuery.isLoading && !listQuery.isError ? (
|
|
<>
|
|
<div className="notification-inbox md:hidden">
|
|
{notificationItems.length ? (
|
|
notificationItems.map((item) => {
|
|
const targetLink = resolveNotificationTargetLink(item);
|
|
return (
|
|
<div data-testid="notification-mobile-card" key={item.id} className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-semibold text-zinc-900">{item.title}</div>
|
|
{item.body ? <div className="mt-1 text-xs leading-5 text-zinc-500">{item.body}</div> : null}
|
|
</div>
|
|
<span className="shrink-0 rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
|
|
{item.readAt ? "已读" : "未读"}
|
|
</span>
|
|
</div>
|
|
<div className="mt-3 text-xs text-zinc-500">{item.createdAt.slice(0, 19).replace("T", " ")}</div>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{targetLink ? (
|
|
<Button asChild size="sm" variant="secondary" data-testid="notification-mobile-target-link">
|
|
<Link to={targetLink}>查看详情</Link>
|
|
</Button>
|
|
) : null}
|
|
|
|
{!item.readAt ? (
|
|
<Button
|
|
data-testid="notification-mobile-mark-read"
|
|
size="sm"
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={markReadMutation.isPending}
|
|
onClick={() => markReadMutation.mutate(item.id)}
|
|
>
|
|
标为已读
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
|
|
)}
|
|
</div>
|
|
<div className="notification-inbox hidden md:block" data-testid="notifications-table">
|
|
{notificationItems.length ? (
|
|
notificationItems.map((item) => {
|
|
const targetLink = resolveNotificationTargetLink(item);
|
|
return (
|
|
<article
|
|
data-testid="notification-row"
|
|
key={item.id}
|
|
className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}
|
|
>
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="font-semibold text-zinc-900">{item.title}</div>
|
|
<span className={item.readAt ? "badge-neutral" : "badge-warning"}>
|
|
{item.readAt ? "已读" : "未读"}
|
|
</span>
|
|
</div>
|
|
{item.body ? <div className="mt-1 text-sm text-zinc-500">{item.body}</div> : null}
|
|
<div className="notification-row-card__meta mt-2">
|
|
{item.createdAt.slice(0, 19).replace("T", " ")}
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 flex-wrap gap-2">
|
|
{targetLink ? (
|
|
<Button asChild size="sm" variant="secondary" data-testid="notification-target-link">
|
|
<Link to={targetLink}>查看详情</Link>
|
|
</Button>
|
|
) : null}
|
|
|
|
{!item.readAt ? (
|
|
<Button
|
|
data-testid="notification-mark-read"
|
|
size="sm"
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={markReadMutation.isPending}
|
|
onClick={() => markReadMutation.mutate(item.id)}
|
|
>
|
|
标为已读
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
})
|
|
) : (
|
|
<div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
|
|
<Pagination
|
|
page={page}
|
|
totalPages={totalPages}
|
|
onPageChange={(p) =>
|
|
updateFilters({
|
|
page: p,
|
|
})
|
|
}
|
|
testIdPrefix="notifications"
|
|
/>
|
|
</ListWorkspace>
|
|
);
|
|
}
|