feat(detail-page-structure-progress-actions): 统一详情处理进度与操作区

client/src/pages/ReimbursementDetailPage.tsx

@@ -47,7 +47,7 @@ import { AttachmentDeleteConfirmDialog } from "../components/common/AttachmentDe
 import { useAttachmentDownloadReasonDialog } from "../components/common/useAttachmentDownloadReasonDialog";
 import { RiskFlagsCard } from "../components/common/RiskFlagsCard";
 import { ReimbursementTravelSummary } from "../components/reimbursements/ReimbursementTravelSummary";
-import { ReimbursementProcessingProgress } from "../components/reimbursements/ReimbursementProcessingProgress";
+import { ProcessingProgress } from "../components/patterns/ProcessingProgress";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { Button } from "../components/ui/button";
 import {
@@ -60,6 +60,12 @@ import {
 import { Input } from "../components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 import { EntityOverviewHero } from "../components/patterns/EntityOverviewHero";
+import {
+  BusinessDetailActionPanel,
+  BusinessDetailAside,
+  BusinessDetailMain,
+  BusinessDetailWorkspace,
+} from "../components/patterns/BusinessDetailTemplate";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { SectionPanel } from "../components/patterns/SectionPanel";
 import {
@@ -1028,30 +1034,6 @@ export function ReimbursementDetailPage() {
       );
     }
 
-    if (detail.status === "reviewing") {
-      return (
-        <Button asChild data-testid="reimbursement-primary-action">
-          <a href="#reimbursement-workflow-progress-panel">看审批进度</a>
-        </Button>
-      );
-    }
-
-    if (detail.status === "approved") {
-      return (
-        <Button asChild data-testid="reimbursement-primary-action">
-          <a href="#reimbursement-processing-progress-panel">看处理进度</a>
-        </Button>
-      );
-    }
-
-    if (detail.status === "paid") {
-      return (
-        <Button asChild data-testid="reimbursement-primary-action">
-          <a href="#reimbursement-processing-progress-panel">查看付款结果</a>
-        </Button>
-      );
-    }
-
     return null;
   })();
 
@@ -1105,16 +1087,10 @@ export function ReimbursementDetailPage() {
             <StatusBadge status={detail.status} />
           </>
         )}
-        actions={(
-          <div className="flex flex-wrap gap-2" data-testid="reimbursement-first-screen-actions">
-            {primaryAction}
-            {secondaryActions}
-          </div>
-        )}
       />
 
-      <div className="mx-auto w-full max-w-5xl space-y-5">
-        <div className="space-y-5">
+      <BusinessDetailWorkspace className="mx-auto w-full max-w-7xl">
+        <BusinessDetailMain>
           <SectionPanel title="报销概况">
             <div className="detail-command-panel space-y-4" data-testid="reimbursement-overview">
               <div>
@@ -1227,35 +1203,17 @@ export function ReimbursementDetailPage() {
               ) : null}
             </div>
 
-              {showSecondaryDetail ? (
-                <div className="space-y-4 pt-4" data-testid="reimbursement-secondary-detail">
-                  <div className="detail-command-panel">
-                    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-                      <h4 className="text-base font-semibold text-zinc-900">更多</h4>
-                      <div className="flex flex-wrap gap-2">
-                        {detail.status !== "paid" ? (
-                          <Button asChild variant="secondary">
-                            <Link to={`/reimbursements/${detail.id}/print`}>打印 / PDF</Link>
-                          </Button>
-                        ) : null}
-                        {canDeleteReimbursement ? (
-                          <Button
-                            data-testid="reimbursement-delete-draft"
-                            disabled={deleteReimbursementMutation.isPending}
-                            onClick={() => setConfirmDeleteReimbursement(true)}
-                            type="button"
-                            variant="destructive"
-                          >
-                            删除草稿
-                          </Button>
-                        ) : null}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ) : null}
             </SectionPanel>
 
+          <SectionPanel title="处理进度">
+            <ProcessingProgress
+              progress={processingProgress}
+              ariaLabel="报销处理进度"
+              testId="reimbursement-workflow-progress"
+              targetLinkLabel="查看所在付款批次"
+            />
+          </SectionPanel>
+
           <SectionPanel title="报销明细">
             <div className="space-y-4">
               <div className="space-y-4" data-testid="reimbursement-items">
@@ -1574,27 +1532,49 @@ export function ReimbursementDetailPage() {
               </div>
             </SectionPanel>
 
-            <SectionPanel title="处理进度">
-              <div id="reimbursement-processing-progress-panel">
-                <ReimbursementProcessingProgress progress={processingProgress} />
-              </div>
-            </SectionPanel>
-          </div>
+        </BusinessDetailMain>
 
-          <div className="space-y-5">
-          <ReimbursementActions
-            status={detail.status}
-            showSubmitAction={false}
-            actionError={["reviewing", "approved"].includes(detail.status) ? actionError : ""}
-            submitDisabled={blockStandardChecks.length > 0}
-            submitHint=""
-            submitNotice=""
-            isPending={mutation.isPending}
-            onSubmit={() => void handleSubmitAction()}
-            onWithdraw={(comment) => mutation.mutate({ action: "withdraw", comment })}
-          />
-        </div>
-      </div>
+        <BusinessDetailAside>
+          <BusinessDetailActionPanel
+            status={<StatusBadge status={detail.status} />}
+            primaryAction={primaryAction}
+            secondaryActions={secondaryActions}
+            moreActions={showSecondaryDetail ? (
+              <div className="grid gap-2" data-testid="reimbursement-secondary-detail">
+                {detail.status !== "paid" ? (
+                  <Button asChild variant="secondary">
+                    <Link to={`/reimbursements/${detail.id}/print`}>打印 / PDF</Link>
+                  </Button>
+                ) : null}
+                {canDeleteReimbursement ? (
+                  <Button
+                    data-testid="reimbursement-delete-draft"
+                    disabled={deleteReimbursementMutation.isPending}
+                    onClick={() => setConfirmDeleteReimbursement(true)}
+                    type="button"
+                    variant="destructive"
+                  >
+                    删除草稿
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+            testId="reimbursement-action-panel"
+          >
+            <ReimbursementActions
+              status={detail.status}
+              showSubmitAction={false}
+              actionError={["reviewing", "approved"].includes(detail.status) ? actionError : ""}
+              submitDisabled={blockStandardChecks.length > 0}
+              submitHint=""
+              submitNotice=""
+              isPending={mutation.isPending}
+              onSubmit={() => void handleSubmitAction()}
+              onWithdraw={(comment) => mutation.mutate({ action: "withdraw", comment })}
+            />
+          </BusinessDetailActionPanel>
+        </BusinessDetailAside>
+      </BusinessDetailWorkspace>
 
       <Dialog open={isInvoiceDialogOpen} onOpenChange={handleInvoiceDialogOpenChange}>
         <DialogContent