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

2026-04-14 14:14:10 +08:00
@@ -24,6 +24,7 @@ export type NotificationListQuery = {
  page?: number;
  pageSize?: number;
  unreadOnly?: boolean;
+  type?: string;
 };

 function toQueryString(query: NotificationListQuery) {
@@ -31,6 +32,7 @@ function toQueryString(query: NotificationListQuery) {
  if (query.page != null) params.set("page", String(query.page));
  if (query.pageSize != null) params.set("pageSize", String(query.pageSize));
  if (query.unreadOnly != null) params.set("unreadOnly", query.unreadOnly ? "1" : "0");
+  if (query.type) params.set("type", query.type);
  const qs = params.toString();
  return qs ? `?${qs}` : "";
 }
@@ -49,3 +51,9 @@ export async function markNotificationRead(notificationId: string) {
  );
 }

+export async function markAllNotificationsRead() {
+  return apiRequestData<{ updatedCount: number }>("/api/notifications/mark-all-read", {
+    method: "POST",
+    body: JSON.stringify({}),
+  });
+}
@@ -1,9 +1,12 @@
 import { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import { fetchNotifications } from "../../api/notifications";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { NotificationItem } from "../../api/notifications";
+import { fetchNotifications, markAllNotificationsRead, markNotificationRead } from "../../api/notifications";
 import { useAuth } from "../../auth/AuthContext";
 import { resolvePageMeta } from "../../features/navigation/schema";
+import { resolveNotificationTargetLink, formatNotificationRelativeTime } from "../../lib/notificationLinks";
+import { resolveErrorMessage } from "../../lib/resolveErrorMessage";
 import { isWecomWebView } from "../../lib/runtimeContext";
 import { GlobalSearchDialog } from "../GlobalSearchDialog";
 import { AppBrand } from "../shell/AppBrand";
@@ -17,6 +20,7 @@ import {
  DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { NavLinks } from "./NavLinks";
+import { toast } from "sonner";

 function MenuIcon() {
  return (
@@ -43,8 +47,11 @@ function BellIcon() {
 export function Topbar() {
  const { me, logout } = useAuth();
  const location = useLocation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
+  const [notificationsOpen, setNotificationsOpen] = useState(false);
  const wecomEntry = isWecomWebView();
  const pageMeta = resolvePageMeta(location.pathname);

@@ -55,9 +62,47 @@ export function Topbar() {
    refetchInterval: 30_000,
  });

+  const dropdownQuery = useQuery({
+    enabled: Boolean(me) && notificationsOpen,
+    queryKey: ["notifications", "dropdown"],
+    queryFn: () => fetchNotifications({ page: 1, pageSize: 5 }),
+  });
+
+  const markReadMutation = useMutation({
+    mutationFn: (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 unreadCount = unreadQuery.data?.unreadCount ?? 0;
  const unreadBadge = unreadCount > 99 ? "99+" : String(unreadCount);

+  const handleNotificationClick = async (item: NotificationItem) => {
+    const targetLink = resolveNotificationTargetLink(item) ?? "/notifications";
+
+    try {
+      if (!item.readAt) {
+        await markReadMutation.mutateAsync(item.id);
+      }
+      setNotificationsOpen(false);
+      navigate(targetLink);
+    } catch (error) {
+      toast.error(resolveErrorMessage(error));
+    }
+  };
+
  useEffect(() => {
    const handleKeydown = (event: KeyboardEvent) => {
      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
@@ -160,16 +205,88 @@ export function Topbar() {
              <span className="material-symbols-outlined text-[18px]">search</span>
            </Button>

-            <Button asChild size="icon" variant="secondary" aria-label="通知" type="button" data-testid="notifications-bell">
-              <Link className="relative" to="/notifications">
-                <BellIcon />
-                {unreadCount > 0 ? (
-                  <span className="absolute -right-2 -top-2 min-w-5 rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white">
-                    {unreadBadge}
-                  </span>
-                ) : null}
-              </Link>
-            </Button>
+            <DropdownMenu open={notificationsOpen} onOpenChange={setNotificationsOpen}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="secondary"
+                  aria-label="通知"
+                  type="button"
+                  data-testid="notifications-bell"
+                  className="relative"
+                >
+                  <BellIcon />
+                  {unreadCount > 0 ? (
+                    <span className="absolute -right-2 -top-2 min-w-5 rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white">
+                      {unreadBadge}
+                    </span>
+                  ) : null}
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent align="end" className="w-80 max-w-[calc(100vw-2rem)] p-0">
+                <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-3">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold text-zinc-900">通知</span>
+                    <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600">
+                      {unreadCount}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    className="text-xs font-medium text-primary disabled:text-zinc-400"
+                    disabled={unreadCount === 0 || markAllReadMutation.isPending}
+                    onClick={() => markAllReadMutation.mutate()}
+                  >
+                    全部标为已读
+                  </button>
+                </div>
+
+                <div className="max-h-[400px] overflow-y-auto">
+                  {dropdownQuery.isLoading ? (
+                    <div className="px-4 py-6 text-sm text-zinc-500">通知加载中...</div>
+                  ) : null}
+
+                  {dropdownQuery.isError ? (
+                    <div className="px-4 py-6 text-sm text-red-600">{resolveErrorMessage(dropdownQuery.error)}</div>
+                  ) : null}
+
+                  {!dropdownQuery.isLoading && !dropdownQuery.isError ? (
+                    dropdownQuery.data?.items?.length ? (
+                      dropdownQuery.data.items.map((item) => (
+                        <button
+                          key={item.id}
+                          type="button"
+                          className="flex w-full items-start gap-3 border-b border-zinc-100 px-4 py-3 text-left transition hover:bg-zinc-50 disabled:opacity-60"
+                          disabled={markReadMutation.isPending}
+                          onClick={() => void handleNotificationClick(item)}
+                        >
+                          <span className="mt-1 flex w-3 justify-center">
+                            {!item.readAt ? <span className="h-2 w-2 rounded-full bg-sky-500" /> : null}
+                          </span>
+                          <span className="min-w-0 flex-1">
+                            <span className="block truncate text-sm font-medium text-zinc-900">{item.title}</span>
+                            <span className="mt-1 block text-xs text-zinc-500">
+                              {formatNotificationRelativeTime(item.createdAt)}
+                            </span>
+                          </span>
+                        </button>
+                      ))
+                    ) : (
+                      <div className="px-4 py-6 text-sm text-zinc-500">暂无通知</div>
+                    )
+                  ) : null}
+                </div>
+
+                <div className="border-t border-zinc-200 px-2 py-2">
+                  <Button asChild variant="ghost" className="w-full justify-between" type="button">
+                    <Link to="/notifications" onClick={() => setNotificationsOpen(false)}>
+                      查看全部通知
+                    </Link>
+                  </Button>
+                </div>
+              </DropdownMenuContent>
+            </DropdownMenu>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
@@ -0,0 +1,75 @@
+type NotificationTarget = {
+  targetType: string | null;
+  targetId: string | null;
+};
+
+export function resolveNotificationTargetLink(item: NotificationTarget) {
+  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 === "leave_request") {
+    return `/leave-requests?highlight=${item.targetId}`;
+  }
+
+  if (item.targetType === "purchase_request") {
+    return `/purchase-requests?highlight=${item.targetId}`;
+  }
+
+  if (item.targetType === "travel_request") {
+    return `/travel-requests?highlight=${item.targetId}`;
+  }
+
+  if (item.targetType === "asset" || item.targetType === "asset_card") {
+    return `/assets?highlight=${item.targetId}`;
+  }
+
+  if (item.targetType === "inventory_check") {
+    return `/inventory-checks?highlight=${item.targetId}`;
+  }
+
+  if (item.targetType === "employee") {
+    return "/settings/profile";
+  }
+
+  return null;
+}
+
+export function formatNotificationRelativeTime(value: string | null) {
+  if (!value) {
+    return "-";
+  }
+
+  const timestamp = new Date(value).getTime();
+  if (Number.isNaN(timestamp)) {
+    return "-";
+  }
+
+  const diffMs = Date.now() - timestamp;
+  if (diffMs < 60 * 1000) {
+    return "刚刚";
+  }
+
+  const diffMinutes = Math.floor(diffMs / (60 * 1000));
+  if (diffMinutes < 60) {
+    return `${diffMinutes} 分钟前`;
+  }
+
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) {
+    return `${diffHours} 小时前`;
+  }
+
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) {
+    return `${diffDays} 天前`;
+  }
+
+  return new Date(value).toLocaleDateString("zh-CN");
+}
@@ -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>
  );
 }
-