233 行
8.8 KiB
TypeScript
233 行
8.8 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 { isApiError } from "../api/types";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { Pagination } from "../components/common/Pagination";
|
|
import { PageScaffold } from "../components/patterns/PageScaffold";
|
|
import { Button } from "../components/ui/button";
|
|
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
|
|
import { resolveNotificationTargetLink } from "../lib/notificationLinks";
|
|
import { resolveMobileEquivalentPath } from "../lib/runtimeContext";
|
|
import { resolveErrorMessage } from "../lib/resolveErrorMessage";
|
|
|
|
const PAGE_SIZE = 20;
|
|
|
|
const NOTIFICATION_TYPE_OPTIONS = [
|
|
{ label: "全部", value: "" },
|
|
{ label: "审批待办", value: "workflow.task_assigned,workflow.task_reminded,workflow.task_overdue" },
|
|
{ label: "报销", value: "reimbursement.approved,reimbursement.rejected,reimbursement.returned,reimbursement.paid" },
|
|
{ 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" },
|
|
];
|
|
|
|
function resolveNotificationError(error: unknown) {
|
|
if (isApiError(error)) {
|
|
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
|
}
|
|
return "加载通知失败";
|
|
}
|
|
|
|
function resolveMobileNotificationTarget(item: Parameters<typeof resolveNotificationTargetLink>[0]) {
|
|
const targetLink = resolveNotificationTargetLink(item);
|
|
if (!targetLink) return null;
|
|
const [pathname, search = ""] = targetLink.split("?");
|
|
return resolveMobileEquivalentPath(pathname, search ? `?${search}` : "");
|
|
}
|
|
|
|
function formatTime(value: string) {
|
|
return value.slice(0, 19).replace("T", " ");
|
|
}
|
|
|
|
export function MobileNotificationsPage() {
|
|
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 notificationItems = listQuery.data?.items ?? [];
|
|
const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
|
|
|
|
return (
|
|
<PageScaffold className="pb-4">
|
|
<div className="space-y-3" data-testid="mobile-notifications-page">
|
|
<PageHeader
|
|
title="通知"
|
|
meta={<span className="badge-neutral">未读 {listQuery.data?.unreadCount ?? 0}</span>}
|
|
actions={
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
data-testid="mobile-notifications-mark-all-read"
|
|
disabled={(listQuery.data?.unreadCount ?? 0) === 0 || markAllReadMutation.isPending}
|
|
onClick={() => markAllReadMutation.mutate()}
|
|
>
|
|
全部已读
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<section className="mobile-card space-y-4" data-testid="mobile-notifications-list">
|
|
<div className="space-y-3">
|
|
<Tabs
|
|
data-testid="mobile-notifications-filter-tabs"
|
|
value={unreadOnly ? "unread" : "all"}
|
|
onValueChange={(value) =>
|
|
updateFilters({
|
|
unreadOnly: value === "unread",
|
|
page: 1,
|
|
})
|
|
}
|
|
>
|
|
<TabsList className="grid h-auto w-full grid-cols-2">
|
|
<TabsTrigger data-testid="mobile-notifications-filter-all" value="all">
|
|
全部
|
|
</TabsTrigger>
|
|
<TabsTrigger data-testid="mobile-notifications-filter-unread" value="unread">
|
|
未读
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<label className="flex items-center gap-2 text-sm text-zinc-600">
|
|
<span className="shrink-0">类型</span>
|
|
<select
|
|
data-testid="mobile-notifications-type-filter"
|
|
className="h-10 min-w-0 flex-1 rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-700 shadow-sm outline-none transition focus:border-zinc-300 focus:ring-2 focus:ring-zinc-100"
|
|
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>
|
|
|
|
{listQuery.isLoading ? (
|
|
<div className="mobile-empty-state">加载中...</div>
|
|
) : null}
|
|
|
|
{listQuery.isError ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{resolveNotificationError(listQuery.error)}
|
|
</p>
|
|
) : null}
|
|
|
|
{!listQuery.isLoading && !listQuery.isError && !notificationItems.length ? (
|
|
<div className="mobile-empty-state">暂无通知</div>
|
|
) : null}
|
|
|
|
{notificationItems.map((item) => {
|
|
const targetLink = resolveMobileNotificationTarget(item);
|
|
return (
|
|
<article data-testid="mobile-notification-card" key={item.id} className="mobile-list-card">
|
|
<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={item.readAt ? "badge-neutral shrink-0" : "badge-warning shrink-0"}>
|
|
{item.readAt ? "已读" : "未读"}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-3 text-xs text-zinc-500">{formatTime(item.createdAt)}</div>
|
|
<div className="mobile-two-action-grid mt-3">
|
|
{targetLink ? (
|
|
<Button asChild size="sm" variant="secondary" data-testid="mobile-notification-target-link">
|
|
<Link to={targetLink}>查看</Link>
|
|
</Button>
|
|
) : null}
|
|
|
|
{!item.readAt ? (
|
|
<Button
|
|
className={targetLink ? "" : "col-span-2"}
|
|
data-testid="mobile-notification-mark-read"
|
|
size="sm"
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={markReadMutation.isPending}
|
|
onClick={() => markReadMutation.mutate(item.id)}
|
|
>
|
|
标为已读
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
);
|
|
})}
|
|
|
|
<Pagination
|
|
page={page}
|
|
totalPages={totalPages}
|
|
onPageChange={(nextPage) =>
|
|
updateFilters({
|
|
page: nextPage,
|
|
})
|
|
}
|
|
testIdPrefix="mobile-notifications"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</PageScaffold>
|
|
);
|
|
}
|
|
|
|
export default MobileNotificationsPage;
|