优化财务与管理页视觉 Wave4（05-27-pc-finance-admin-visual-wave4）

client/src/pages/AuditLogsPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { isApiError } from "../api/types";
 import { exportAuditLogs } from "../api/exports";
 import { fetchAuditLogs, type AuditLogListResponse } from "../api/audit";
-import { PageHeader } from "../components/common/PageHeader";
+import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { Button } from "../components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
 import { downloadBlob } from "../lib/download";
@@ -68,10 +68,10 @@ export function AuditLogsPage() {
   }, [actionFilter, page, targetTypeFilter]);
 
   return (
-    <div>
-      <PageHeader
+    <ListWorkspace>
+      <WorkspaceHeader
         title="审计工作台"
-        subtitle="只读查看系统关键操作审计记录。"
+        subtitle="关键操作审计只读查询与导出。"
         actions={
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -135,7 +135,15 @@ export function AuditLogsPage() {
         }
       />
 
-      <section className="card-std p-6 space-y-4">
+      <div className="finance-status-strip" data-testid="audit-summary">
+        <div className="finance-metric-card"><div className="finance-metric-card__label">记录总数</div><div className="finance-metric-card__value">{data?.total ?? 0}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页</div><div className="finance-metric-card__value">{page}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">Action 过滤</div><div className="finance-metric-card__value text-base">{actionFilter || "全部"}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">Target 过滤</div><div className="finance-metric-card__value text-base">{targetTypeFilter || "全部"}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">模式</div><div className="finance-metric-card__value text-base">只读</div></div>
+      </div>
+
+      <section className="admin-command-panel space-y-4">
         <div className="grid gap-3 md:grid-cols-3">
           <label className="text-sm text-zinc-700">
             Action
@@ -177,7 +185,7 @@ export function AuditLogsPage() {
           </p>
         ) : null}
 
-        <div className="overflow-x-auto rounded-lg border border-zinc-200">
+        <div className="ops-table-focus overflow-x-auto">
           <table className="min-w-full text-left text-sm">
             <thead className="bg-zinc-50 text-zinc-600">
               <tr>
@@ -251,6 +259,6 @@ export function AuditLogsPage() {
           </div>
         </div>
       </section>
-    </div>
+    </ListWorkspace>
   );
 }