重构前端 Wave0-2 体验基线（05-28-frontend-ux-redesign）

client/src/pages/NotificationsPage.tsx

@@ -4,11 +4,10 @@ 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 { PageScaffold } from "../components/patterns/PageScaffold";
+import { FilterBar, ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { resolveNotificationTargetLink } from "../lib/notificationLinks";
 import { resolveErrorMessage } from "../lib/resolveErrorMessage";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
@@ -79,10 +78,11 @@ export function NotificationsPage() {
   const notificationItems = listQuery.data?.items ?? [];
 
   return (
-    <PageScaffold>
-      <PageHeader
-        title="通知"
-        subtitle="事件、待办和业务直达入口。"
+    <ListWorkspace>
+      <WorkspaceHeader
+        eyebrow="通知"
+        title="通知中心"
+        subtitle="这里是事件收件箱；需要处理的事项会直达业务详情或审批任务。"
         actions={
           <>
             <Button
@@ -95,13 +95,13 @@ export function NotificationsPage() {
               全部标为已读
             </Button>
             <Button asChild variant="secondary" data-testid="notifications-back">
-              <Link to="/dashboard">返回仪表盘</Link>
+              <Link to="/portal">返回工作台</Link>
             </Button>
           </>
         }
       />
 
-      <div className="card-std space-y-4 p-4 md:p-5">
+      <FilterBar className="ops-command-bar !p-3 md:!p-3.5">
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-col gap-3 md:flex-row md:items-center">
             <Tabs
@@ -128,7 +128,7 @@ export function NotificationsPage() {
               <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"
+                className="select-sm min-w-40"
                 value={selectedType}
                 onChange={(event) =>
                   updateFilters({
@@ -151,20 +151,21 @@ export function NotificationsPage() {
             <span className="ml-2 text-zinc-500">/ 共 {listQuery.data?.total ?? 0}</span>
           </div>
         </div>
+      </FilterBar>
 
-        {listQuery.isLoading ? <TableSkeleton columns={4} rows={5} /> : null}
+      {listQuery.isLoading ? <TableSkeleton columns={4} rows={5} /> : 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.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 ? (
           <>
@@ -275,7 +276,6 @@ export function NotificationsPage() {
           }
           testIdPrefix="notifications"
         />
-      </div>
-    </PageScaffold>
+    </ListWorkspace>
   );
 }