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

client/src/pages/ApOperationsPage.tsx

@@ -248,9 +248,9 @@ function SummaryCard({
           : "text-zinc-900";
 
   return (
-    <div className="card-std p-5">
-      <div className="text-sm text-zinc-500">{title}</div>
-      <div className={`mt-2 text-2xl font-bold ${toneClass}`}>{value}</div>
+    <div className="finance-metric-card">
+      <div className="finance-metric-card__label">{title}</div>
+      <div className={`finance-metric-card__value ${toneClass}`}>{value}</div>
     </div>
   );
 }
@@ -618,7 +618,7 @@ export function ApOperationsPage() {
     <ListWorkspace>
       <WorkspaceHeader
         title="财务付款与对账"
-        subtitle="待付款、异常付款、风险和对账。"
+        subtitle="待付款、异常付款、风险、对账和台账集中处理。"
         actions={
           <>
             <Button
@@ -661,7 +661,7 @@ export function ApOperationsPage() {
         <SectionError message={resolveErrorMessage(financeLedgerQuery.error, "财务台账加载失败")} />
       ) : null}
 
-      <div className="grid gap-4 md:grid-cols-5">
+      <div className="finance-status-strip" data-testid="ap-operations-summary">
         <SummaryCard title="待付款" value={summaryQuery.data?.summary.pendingPaymentCount ?? "-"} />
         <SummaryCard title="异常" value={summaryQuery.data?.summary.exceptionCount ?? "-"} tone="red" />
         <SummaryCard
@@ -677,9 +677,9 @@ export function ApOperationsPage() {
         />
       </div>
 
-      <div className="card-std p-4 md:p-5">
+      <div className="finance-command-panel">
         <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as OperationsTab)}>
-          <TabsList className="flex w-full flex-wrap justify-start gap-1">
+          <TabsList className="ops-command-bar__tabs !w-full !justify-start">
             <TabsTrigger value="pending">待付款 {pendingBatches.length}</TabsTrigger>
             <TabsTrigger value="failed">异常付款 {failedItems.length}</TabsTrigger>
             <TabsTrigger value="risk">风险标记 {filteredRiskFlags.length}</TabsTrigger>
@@ -688,7 +688,7 @@ export function ApOperationsPage() {
           </TabsList>
 
           <TabsContent value="ledger" className="mt-6 space-y-4">
-            <div className="grid gap-3 md:grid-cols-6">
+            <div className="finance-command-panel grid gap-3 !p-3 md:grid-cols-6">
               <div className="space-y-2">
                 <div className="text-sm font-medium text-zinc-700">审批状态</div>
                 <select
@@ -791,7 +791,7 @@ export function ApOperationsPage() {
               </Button>
             </div>
 
-            <div className="rounded-lg border border-zinc-200" data-testid="finance-ledger-table">
+            <div className="ops-table-focus overflow-x-auto" data-testid="finance-ledger-table">
               <Table>
                 <TableHeader>
                   <tr>
@@ -901,7 +901,7 @@ export function ApOperationsPage() {
           </TabsContent>
 
           <TabsContent value="pending" className="mt-6 space-y-4">
-            <div className="grid gap-3 md:grid-cols-4">
+            <div className="finance-command-panel grid gap-3 !p-3 md:grid-cols-4">
               <div className="space-y-2">
                 <div className="text-sm font-medium text-zinc-700">实体类型</div>
                 <select
@@ -943,7 +943,7 @@ export function ApOperationsPage() {
               </div>
             </div>
 
-            <div className="rounded-lg border border-zinc-200">
+            <div className="ops-table-focus overflow-x-auto">
               <Table>
                 <TableHeader>
                   <tr>
@@ -1046,7 +1046,7 @@ export function ApOperationsPage() {
           </TabsContent>
 
           <TabsContent value="failed" className="mt-6 space-y-4">
-            <div className="rounded-lg border border-zinc-200">
+            <div className="ops-table-focus overflow-x-auto">
               <Table>
                 <TableHeader>
                   <tr>
@@ -1170,7 +1170,7 @@ export function ApOperationsPage() {
               ))}
             </div>
 
-            <div className="rounded-lg border border-zinc-200">
+            <div className="ops-table-focus overflow-x-auto">
               <Table>
                 <TableHeader>
                   <tr>
@@ -1248,7 +1248,7 @@ export function ApOperationsPage() {
           </TabsContent>
 
           <TabsContent value="reconciliation" className="mt-6 space-y-4">
-            <div className="rounded-lg border border-zinc-200">
+            <div className="ops-table-focus overflow-x-auto">
               <Table>
                 <TableHeader>
                   <tr>