DG9 统一全站 UI 布局样板迁移

关联 Issue: DG9-0..DG9-12

client/src/pages/ApprovalRulesPage.tsx

@@ -10,7 +10,7 @@ import {
   type ApprovalRoleCode,
   type ApprovalRule,
 } from "../api/approvalRules";
-import { PageHeader } from "../components/common/PageHeader";
+import { ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { Button } from "../components/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../components/ui/dialog";
 import { Input } from "../components/ui/input";
@@ -144,8 +144,8 @@ export function ApprovalRulesPage() {
   }, [editOpen, editRule]);
 
   return (
-    <div className="space-y-6">
-      <PageHeader
+    <ListWorkspace>
+      <WorkspaceHeader
         title="审批规则"
         subtitle="维护金额段与审批层级（仅影响新提交的报销单，历史流程不回写）。"
         actions={
@@ -161,7 +161,7 @@ export function ApprovalRulesPage() {
         </p>
       ) : null}
 
-      <div className="card-std p-6 space-y-4">
+      <div className="card-std space-y-4 p-4 md:p-5">
         <h3 className="text-base font-semibold text-zinc-900">新建审批规则</h3>
 
         <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
@@ -286,7 +286,7 @@ export function ApprovalRulesPage() {
         </div>
       </div>
 
-      <div className="card-std p-6 space-y-4">
+      <div className="card-std space-y-4 p-4 md:p-5">
         <h3 className="text-base font-semibold text-zinc-900">规则列表</h3>
 
         {listQuery.isLoading ? <TableSkeleton columns={6} rows={5} /> : null}
@@ -304,7 +304,7 @@ export function ApprovalRulesPage() {
         ) : null}
 
         {!listQuery.isLoading && !listQuery.isError ? (
-          <div className="rounded-lg border border-zinc-200">
+          <PrimaryTable>
             <Table data-testid="approval-rules-table">
               <TableHeader>
                 <tr>
@@ -371,7 +371,7 @@ export function ApprovalRulesPage() {
                 )}
               </TableBody>
             </Table>
-          </div>
+          </PrimaryTable>
         ) : null}
       </div>
 
@@ -516,7 +516,6 @@ export function ApprovalRulesPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </ListWorkspace>
   );
 }
-