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

client/src/components/navigation/Topbar.tsx

@@ -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>