统一页面右上角操作区（05-31-unified-page-header-actions）

client/src/pages/PaymentBatchesPage.tsx

@@ -21,8 +21,9 @@ import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
-import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
+import { HeaderActionGroup, ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import {
+  BusinessListToolbar,
   BusinessMobileList,
   BusinessTable,
 } from "../components/patterns/BusinessListTemplate";
@@ -346,21 +347,18 @@ export function PaymentBatchesPage() {
       <WorkspaceHeader
         title="付款"
         actions={
-          <div className="flex flex-wrap gap-2">
+          <HeaderActionGroup>
             {selectedBatchId ? (
               <Button type="button" variant="secondary" onClick={returnToList}>
                 返回列表
               </Button>
             ) : null}
-            <Button type="button" variant="secondary" onClick={() => void refresh()}>
-              刷新
-            </Button>
             {!selectedBatchId ? (
-              <Button type="button" variant={showCreatePanel ? "default" : "secondary"} onClick={() => setShowCreatePanel((current) => !current)}>
+              <Button type="button" onClick={() => setShowCreatePanel(true)}>
                 新建批次
               </Button>
             ) : null}
-          </div>
+          </HeaderActionGroup>
         }
       />
 
@@ -663,6 +661,17 @@ export function PaymentBatchesPage() {
         )
       ) : (
         <>
+          <BusinessListToolbar
+            actions={
+              <Button type="button" size="sm" variant="secondary" onClick={() => void refresh()}>
+                刷新
+              </Button>
+            }
+          >
+            <span className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">
+              全部批次 {batches.length}
+            </span>
+          </BusinessListToolbar>
           <BusinessMobileList testId="payment-batches-mobile-list">
             {batches.map((item) => (
               <button