R63 A1-A6：通知中心体验增强

2026-04-14 14:14:10 +08:00
@@ -1,12 +1,15 @@
 import { Link, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { fetchNotifications, markNotificationRead } from "../api/notifications";
+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 { TableSkeleton } from "../components/common/TableSkeleton";
 import { Pagination } from "../components/common/Pagination";
 import { Button } from "../components/ui/button";
+import { resolveNotificationTargetLink } from "../lib/notificationLinks";
+import { resolveErrorMessage } from "../lib/resolveErrorMessage";
 import {
  Table,
  TableBody,
@@ -19,23 +22,16 @@ import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";

 const PAGE_SIZE = 20;

-function resolveTargetLink(item: { targetType: string | null; targetId: string | null }) {
-  if (!item.targetType || !item.targetId) return null;
-
-  if (item.targetType === "workflow_task") {
-    return `/workflow/tasks/${item.targetId}`;
-  }
-
-  if (item.targetType === "reimbursement_form") {
-    return `/reimbursements/${item.targetId}`;
-  }
-
-  if (item.targetType === "employee") {
-    return "/settings/profile";
-  }
-
-  return null;
-}
+const NOTIFICATION_TYPE_OPTIONS = [
+  { label: "全部", value: "" },
+  { label: "审批待办", value: "workflow.task_assigned" },
+  { 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" },
+];

 export function NotificationsPage() {
  const queryClient = useQueryClient();
@@ -44,24 +40,45 @@ export function NotificationsPage() {
  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, page],
+    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 Promise.all([
-        queryClient.invalidateQueries({ queryKey: ["notifications"] }),
-        queryClient.invalidateQueries({ queryKey: ["notifications", "unread-count"] }),
-      ]);
+      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));
    },
  });

@@ -73,33 +90,67 @@ export function NotificationsPage() {
        title="通知"
        subtitle="站内通知与待办提醒。"
        actions={
-          <Button asChild variant="secondary" data-testid="notifications-back">
-            <Link to="/dashboard">返回仪表盘</Link>
-          </Button>
+          <>
+            <Button
+              type="button"
+              variant="secondary"
+              data-testid="notifications-mark-all-read"
+              disabled={(listQuery.data?.unreadCount ?? 0) === 0 || markAllReadMutation.isPending}
+              onClick={() => markAllReadMutation.mutate()}
+            >
+              全部标为已读
+            </Button>
+            <Button asChild variant="secondary" data-testid="notifications-back">
+              <Link to="/dashboard">返回仪表盘</Link>
+            </Button>
+          </>
        }
      />

      <div className="card-std p-6 space-y-4">
        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-          <Tabs
-            data-testid="notifications-filter-tabs"
-            value={unreadOnly ? "unread" : "all"}
-            onValueChange={(value) =>
-              setSearchParams({
-                unreadOnly: value === "unread" ? "1" : "0",
-                page: "1",
-              })
-            }
-          >
-            <TabsList className="flex w-full flex-wrap justify-start gap-1 md:w-auto">
-              <TabsTrigger data-testid="notifications-filter-all" value="all">
-                全部
-              </TabsTrigger>
-              <TabsTrigger data-testid="notifications-filter-unread" value="unread">
-                未读
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
+          <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="flex w-full flex-wrap justify-start gap-1 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="h-10 min-w-40 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>

          <div className="text-sm text-zinc-600">
            未读 {listQuery.data?.unreadCount ?? 0} 条
@@ -134,7 +185,7 @@ export function NotificationsPage() {
              <TableBody>
                {(listQuery.data?.items ?? []).length ? (
                  listQuery.data?.items.map((item) => {
-                    const targetLink = resolveTargetLink(item);
+                    const targetLink = resolveNotificationTargetLink(item);
                    return (
                      <TableRow data-testid="notification-row" key={item.id}>
                        <TableCell>
@@ -189,11 +240,14 @@ export function NotificationsPage() {
        <Pagination
          page={page}
          totalPages={totalPages}
-          onPageChange={(p) => setSearchParams({ unreadOnly: unreadOnly ? "1" : "0", page: String(p) })}
+          onPageChange={(p) =>
+            updateFilters({
+              page: p,
+            })
+          }
          testIdPrefix="notifications"
        />
      </div>
    </div>
  );
 }
-