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

client/src/pages/InvoicePoolPage.tsx

@@ -29,7 +29,7 @@ import { hasPermission } from "../auth/permissions";
 import { toast } from "sonner";
 import { downloadBlob } from "../lib/download";
 import { formatInvoiceOcrErrorMessage } from "../lib/invoiceOcr";
-import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
+import { HeaderActionGroup, ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { Button } from "../components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
 import { InvoiceUploadCard } from "./invoice-pool/InvoiceUploadCard";
@@ -475,7 +475,7 @@ export function InvoicePoolPage() {
       <WorkspaceHeader
         title="票据"
         actions={
-          <div className="flex flex-wrap gap-2">
+          <HeaderActionGroup>
             {isInvoiceDetailMode ? (
               <Button type="button" variant="secondary" onClick={returnToInvoiceList}>
                 返回列表
@@ -484,41 +484,13 @@ export function InvoicePoolPage() {
               <>
                 <Button
                   type="button"
-                  variant={invoiceActionPanel === "upload" ? "default" : "secondary"}
-                  onClick={() => setInvoiceActionPanel((current) => (current === "upload" ? null : "upload"))}
+                  onClick={() => setInvoiceActionPanel("upload")}
                 >
                   上传票据
                 </Button>
-                <Button
-                  type="button"
-                  variant={invoiceActionPanel === "bind" ? "default" : "secondary"}
-                  onClick={() => setInvoiceActionPanel((current) => (current === "bind" ? null : "bind"))}
-                >
-                  绑定
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      data-testid="invoice-export"
-                      type="button"
-                      variant="secondary"
-                      disabled={exportMutation.isPending}
-                    >
-                      {exportMutation.isPending ? "导出中..." : "导出"}
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem data-testid="invoice-export-csv" onSelect={() => exportMutation.mutate("csv")}>
-                      导出 CSV
-                    </DropdownMenuItem>
-                    <DropdownMenuItem data-testid="invoice-export-xlsx" onSelect={() => exportMutation.mutate("xlsx")}>
-                      导出 Excel
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
               </>
             )}
-          </div>
+          </HeaderActionGroup>
         }
       />
 
@@ -573,6 +545,39 @@ export function InvoicePoolPage() {
       {!isInvoiceDetailMode ? (
         <InvoiceListCard
           listQuery={listQuery}
+          actions={
+            <>
+              <Button
+                type="button"
+                size="sm"
+                variant={invoiceActionPanel === "bind" ? "default" : "secondary"}
+                onClick={() => setInvoiceActionPanel((current) => (current === "bind" ? null : "bind"))}
+              >
+                绑定
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    data-testid="invoice-export"
+                    type="button"
+                    size="sm"
+                    variant="secondary"
+                    disabled={exportMutation.isPending}
+                  >
+                    {exportMutation.isPending ? "导出中..." : "导出"}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem data-testid="invoice-export-csv" onSelect={() => exportMutation.mutate("csv")}>
+                    导出 CSV
+                  </DropdownMenuItem>
+                  <DropdownMenuItem data-testid="invoice-export-xlsx" onSelect={() => exportMutation.mutate("xlsx")}>
+                    导出 Excel
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
+          }
           status={status}
           setStatus={setStatus}
           ownerScope={ownerScope}