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

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

client/src/pages/PurchaseRequestsPage.tsx

@@ -36,7 +36,6 @@ import { fetchProjects } from "../api/projects";
 import { remindWorkflowTask } from "../api/workflow";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
-import { PageHeader } from "../components/common/PageHeader";
 import { RiskFlagsCard } from "../components/common/RiskFlagsCard";
 import { AiSuggestionCard } from "../components/ai/AiSuggestionCard";
 import { Pagination } from "../components/common/Pagination";
@@ -46,6 +45,7 @@ import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 import { Textarea } from "../components/ui/textarea";
+import { FilterBar, ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { SectionPanel } from "../components/patterns/SectionPanel";
 import { buildPrecheckDialogMessage } from "../lib/precheck";
 import {
@@ -720,6 +720,9 @@ export function PurchaseRequestsPage() {
 
   const detail = detailQuery.data;
   const archiveOrder = archiveOrderQuery.data?.archiveOrder ?? detail?.archiveOrder ?? null;
+  const detailAttachments = detail?.attachments ?? [];
+  const detailApprovalHistory = detail?.approvalHistory ?? [];
+  const detailRiskFlags = detail?.riskFlags ?? [];
 
   const handleSubmitAction = async () => {
     if (!selectedId) {
@@ -769,8 +772,8 @@ export function PurchaseRequestsPage() {
   );
 
   return (
-    <div className="space-y-6">
-      <PageHeader
+    <ListWorkspace>
+      <WorkspaceHeader
         title="采购申请"
         subtitle="草稿、附件、审批。"
         actions={
@@ -793,7 +796,7 @@ export function PurchaseRequestsPage() {
         </p>
       ) : null}
 
-      <div className="card-std space-y-4 p-6">
+      <FilterBar className="space-y-4">
         <div className="grid gap-3 md:grid-cols-5">
           <select
             className="select-std"
@@ -887,10 +890,10 @@ export function PurchaseRequestsPage() {
             </div>
           ) : null}
         </div>
-      </div>
+      </FilterBar>
 
       <div className="grid gap-6 xl:grid-cols-[420px_minmax(0,1fr)]">
-        <div className="card-std space-y-4 p-6">
+        <div className="card-std space-y-4 p-4 md:p-5">
           <div className="flex items-center justify-between">
             <h3 className="text-base font-semibold text-zinc-900">采购单列表</h3>
             <span className="text-sm text-zinc-500">共 {listQuery.data?.total ?? 0} 条</span>
@@ -952,7 +955,7 @@ export function PurchaseRequestsPage() {
                   <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无采购申请</div>
                 )}
               </div>
-              <div className="hidden rounded-lg border border-zinc-200 md:block">
+              <PrimaryTable className="hidden md:block">
               <Table data-testid="purchase-requests-table">
                 <TableHeader>
                   <tr>
@@ -1002,7 +1005,7 @@ export function PurchaseRequestsPage() {
                   )}
                 </TableBody>
               </Table>
-              </div>
+              </PrimaryTable>
             </>
           ) : null}
 
@@ -1014,7 +1017,7 @@ export function PurchaseRequestsPage() {
           />
         </div>
 
-        <div className="card-std space-y-5 p-6">
+        <div className="card-std space-y-5 p-4 md:p-5">
           {!selectedId ? (
             <div className="rounded-lg border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500">
               请先在左侧选择采购单，或新建一张采购草稿。
@@ -1096,7 +1099,7 @@ export function PurchaseRequestsPage() {
                 </div>
                 <div className="rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm">
                   <div className="text-zinc-500">附件</div>
-                  <div className="mt-2 font-medium text-zinc-900">{detail.attachments.length} 个</div>
+                  <div className="mt-2 font-medium text-zinc-900">{detailAttachments.length} 个</div>
                 </div>
               </div>
 
@@ -1116,12 +1119,12 @@ export function PurchaseRequestsPage() {
                 </div>
               </div>
 
-              <RiskFlagsCard items={detail.riskFlags} title="待处理风险项" />
+              <RiskFlagsCard items={detailRiskFlags} title="待处理风险项" />
 
               <SectionPanel title="审批记录" description="展示最近审批动作、退回或驳回说明，便于申请人按意见修改。">
-                {detail.approvalHistory.length ? (
+                {detailApprovalHistory.length ? (
                   <div className="space-y-2" data-testid="purchase-approval-history">
-                    {detail.approvalHistory.map((item) => (
+                    {detailApprovalHistory.map((item) => (
                       <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">
                         <div className="flex flex-wrap items-center justify-between gap-2">
                           <span className="font-medium text-zinc-900">
@@ -1515,8 +1518,8 @@ export function PurchaseRequestsPage() {
                   </div>
                 </div>
                 <div className="space-y-3 md:hidden">
-                  {detail.attachments.length ? (
-                    detail.attachments.map((attachment) => (
+                  {detailAttachments.length ? (
+                    detailAttachments.map((attachment) => (
                       <div key={attachment.id} className="rounded-lg border border-zinc-200 bg-white p-4">
                         <div className="font-medium text-zinc-900">{attachment.originalName}</div>
                         <div className="mt-1 text-xs text-zinc-500">{attachment.mimeType} / {attachment.fileSize} bytes</div>
@@ -1563,8 +1566,8 @@ export function PurchaseRequestsPage() {
                       </tr>
                     </TableHeader>
                     <TableBody>
-                      {detail.attachments.length ? (
-                        detail.attachments.map((attachment) => (
+                      {detailAttachments.length ? (
+                        detailAttachments.map((attachment) => (
                           <TableRow key={attachment.id}>
                             <TableCell>
                               <div className="font-medium text-zinc-900">{attachment.originalName}</div>
@@ -1754,6 +1757,6 @@ export function PurchaseRequestsPage() {
           ) : null}
         </div>
       </div>
-    </div>
+    </ListWorkspace>
   );
 }