feat(client): 通知中心与未读角标(F16)

- Topbar 增加通知铃铛与未读数
- 新增 /notifications 列表页，支持筛选与标记已读
- 为 workflow/reimbursement/auth 通知提供跳转入口

client/src/api/notifications.ts

@@ -0,0 +1,51 @@
+import { apiRequestData } from "./http";
+
+export type NotificationItem = {
+  id: string;
+  type: string;
+  title: string;
+  body: string | null;
+  targetType: string | null;
+  targetId: string | null;
+  readAt: string | null;
+  createdAt: string;
+};
+
+export type NotificationListResponse = {
+  page: number;
+  pageSize: number;
+  total: number;
+  unreadOnly: boolean;
+  unreadCount: number;
+  items: NotificationItem[];
+};
+
+export type NotificationListQuery = {
+  page?: number;
+  pageSize?: number;
+  unreadOnly?: boolean;
+};
+
+function toQueryString(query: NotificationListQuery) {
+  const params = new URLSearchParams();
+  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");
+  const qs = params.toString();
+  return qs ? `?${qs}` : "";
+}
+
+export async function fetchNotifications(query: NotificationListQuery = {}) {
+  return apiRequestData<NotificationListResponse>(`/api/notifications${toQueryString(query)}`);
+}
+
+export async function markNotificationRead(notificationId: string) {
+  return apiRequestData<{ id: string; readAt: string | null }>(
+    `/api/notifications/${notificationId}/mark-read`,
+    {
+      method: "POST",
+      body: JSON.stringify({}),
+    },
+  );
+}
+

client/src/components/navigation/Topbar.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { fetchNotifications } from "../../api/notifications";
 import { useAuth } from "../../auth/AuthContext";
 import { Button } from "../ui/button";
 import {
@@ -37,11 +39,42 @@ function MenuIcon() {
   );
 }
 
+function BellIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 17H9m9-2V11a6 6 0 10-12 0v4l-2 2h16l-2-2z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
 export function Topbar() {
   const { me, logout } = useAuth();
   const roleCodes = me?.roleCodes ?? [];
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
+  const unreadQuery = useQuery({
+    enabled: Boolean(me),
+    queryKey: ["notifications", "unread-count"],
+    queryFn: () => fetchNotifications({ unreadOnly: true, page: 1, pageSize: 1 }),
+    refetchInterval: 30_000,
+  });
+
+  const unreadCount = unreadQuery.data?.unreadCount ?? 0;
+  const unreadBadge = unreadCount > 99 ? "99+" : String(unreadCount);
+
   return (
     <header className="sticky top-0 z-20 border-b border-slate-200 bg-white/95 px-4 py-3 backdrop-blur sm:px-6">
       <div className="flex items-center justify-between gap-4">
@@ -89,6 +122,24 @@ export function Topbar() {
         </div>
 
         <div className="flex items-center gap-3">
+          <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>
+
           <div className="hidden text-right sm:block">
             <p className="text-xs uppercase tracking-wide text-secondary">角色</p>
             <p className="text-sm font-medium text-slate-900">{roleCodes.join(" / ") || "-"}</p>

client/src/pages/NotificationsPage.tsx

@@ -0,0 +1,224 @@
+import { Link, useSearchParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { fetchNotifications, markNotificationRead } from "../api/notifications";
+import { isApiError } from "../api/types";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { PageHeader } from "../components/common/PageHeader";
+import { Button } from "../components/ui/button";
+import { Card } from "../components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
+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;
+}
+
+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 listQuery = useQuery({
+    queryKey: ["notifications", "list", unreadOnly, page],
+    queryFn: () =>
+      fetchNotifications({
+        unreadOnly,
+        page,
+        pageSize: PAGE_SIZE,
+      }),
+  });
+
+  const markReadMutation = useMutation({
+    mutationFn: async (notificationId: string) => markNotificationRead(notificationId),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["notifications"] }),
+        queryClient.invalidateQueries({ queryKey: ["notifications", "unread-count"] }),
+      ]);
+    },
+  });
+
+  const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="通知"
+        subtitle="站内通知与待办提醒。"
+        actions={
+          <Button asChild variant="secondary" data-testid="notifications-back">
+            <Link to="/dashboard">返回仪表盘</Link>
+          </Button>
+        }
+      />
+
+      <Card className="space-y-4 p-6">
+        <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="text-sm text-slate-600">
+            未读 {listQuery.data?.unreadCount ?? 0} 条
+          </div>
+        </div>
+
+        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+
+        {listQuery.isError ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+            {isApiError(listQuery.error)
+              ? `${listQuery.error.code}: ${mapApiErrorMessage(
+                  listQuery.error.code,
+                  listQuery.error.details,
+                  listQuery.error.message,
+                )}`
+              : "加载通知失败"}
+          </p>
+        ) : null}
+
+        {!listQuery.isLoading && !listQuery.isError ? (
+          <div className="rounded-lg border border-slate-200">
+            <Table data-testid="notifications-table">
+              <TableHeader>
+                <tr>
+                  <TableHead>标题</TableHead>
+                  <TableHead>时间</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead className="w-40">操作</TableHead>
+                </tr>
+              </TableHeader>
+              <TableBody>
+                {(listQuery.data?.items ?? []).length ? (
+                  listQuery.data?.items.map((item) => {
+                    const targetLink = resolveTargetLink(item);
+                    return (
+                      <TableRow data-testid="notification-row" key={item.id}>
+                        <TableCell>
+                          <div className="font-medium text-slate-900">{item.title}</div>
+                          {item.body ? (
+                            <div className="mt-1 text-xs text-slate-500">{item.body}</div>
+                          ) : null}
+                        </TableCell>
+                        <TableCell className="text-xs text-slate-600">
+                          {item.createdAt.slice(0, 19).replace("T", " ")}
+                        </TableCell>
+                        <TableCell className="text-xs text-slate-600">
+                          {item.readAt ? "已读" : "未读"}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex 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>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                ) : (
+                  <TableRow>
+                    <TableCell className="py-3 text-slate-500" colSpan={4}>
+                      暂无通知
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        ) : null}
+
+        <div className="flex items-center justify-between text-sm">
+          <span>
+            第 {page} / {totalPages} 页
+          </span>
+          <div className="flex gap-2">
+            <Button
+              data-testid="notifications-prev-page"
+              variant="secondary"
+              disabled={page <= 1}
+              onClick={() =>
+                setSearchParams({ unreadOnly: unreadOnly ? "1" : "0", page: String(Math.max(1, page - 1)) })
+              }
+              type="button"
+            >
+              上一页
+            </Button>
+            <Button
+              data-testid="notifications-next-page"
+              variant="secondary"
+              disabled={page >= totalPages}
+              onClick={() =>
+                setSearchParams({
+                  unreadOnly: unreadOnly ? "1" : "0",
+                  page: String(Math.min(totalPages, page + 1)),
+                })
+              }
+              type="button"
+            >
+              下一页
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+

client/src/router/index.tsx

@@ -7,6 +7,7 @@ import { DelegationsPage } from "../pages/DelegationsPage";
 import { ForbiddenPage } from "../pages/ForbiddenPage";
 import { InvoicePoolPage } from "../pages/InvoicePoolPage";
 import { LoginPage } from "../pages/LoginPage";
+import { NotificationsPage } from "../pages/NotificationsPage";
 import { NotFoundPage } from "../pages/NotFoundPage";
 import { ProfilePage } from "../pages/ProfilePage";
 import { ReimbursementDetailPage } from "../pages/ReimbursementDetailPage";
@@ -86,6 +87,8 @@ export function AppRouter() {
           }
         />
 
+        <Route path="notifications" element={<NotificationsPage />} />
+
         <Route
           path="audit-logs"
           element={