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

client/src/pages/MobileReimbursementDetailPage.tsx

@@ -44,7 +44,7 @@ import { RiskFlagsCard } from "../components/common/RiskFlagsCard";
 import { MobileIcon } from "../components/mobile/MobileIcon";
 import { MobileDetailHeader } from "../components/mobile/MobileDetailHeader";
 import { ReimbursementTravelSummary } from "../components/reimbursements/ReimbursementTravelSummary";
-import { ReimbursementProcessingProgress } from "../components/reimbursements/ReimbursementProcessingProgress";
+import { ProcessingProgress } from "../components/patterns/ProcessingProgress";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { Button } from "../components/ui/button";
 import {
@@ -944,6 +944,34 @@ export function MobileReimbursementDetailPage() {
         ) : null}
       </section>
 
+      <section className="mobile-card" data-testid="mobile-reimbursement-processing-section">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <h2 className="text-base font-semibold text-zinc-900">处理进度</h2>
+          </div>
+          {canRemindPendingWorkflow && pendingTaskId ? (
+            <Button
+              size="sm"
+              type="button"
+              variant="secondary"
+              disabled={remindMutation.isPending}
+              onClick={() => remindMutation.mutate(pendingTaskId)}
+            >
+              {remindMutation.isPending ? "催办中..." : "催办"}
+            </Button>
+          ) : null}
+        </div>
+        <div className="mt-3">
+          <ProcessingProgress
+            progress={detail.processingProgress ?? { stages: [] }}
+            ariaLabel="报销处理进度"
+            testId="mobile-reimbursement-processing-progress"
+            targetLinkLabel="查看所在付款批次"
+            mobile
+          />
+        </div>
+      </section>
+
       <section className="mobile-card" data-testid="mobile-reimbursement-items">
         <div className="flex items-center justify-between gap-3">
           <h2 className="text-base font-semibold text-zinc-900">报销明细</h2>
@@ -1253,28 +1281,6 @@ export function MobileReimbursementDetailPage() {
         )}
       </section>
 
-      <section className="mobile-card" data-testid="mobile-reimbursement-processing-section">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <h2 className="text-base font-semibold text-zinc-900">处理进度</h2>
-            </div>
-            {canRemindPendingWorkflow && pendingTaskId ? (
-              <Button
-                size="sm"
-                type="button"
-                variant="secondary"
-                disabled={remindMutation.isPending}
-                onClick={() => remindMutation.mutate(pendingTaskId)}
-              >
-                {remindMutation.isPending ? "催办中..." : "催办"}
-              </Button>
-            ) : null}
-          </div>
-          <div className="mt-3">
-            <ReimbursementProcessingProgress progress={detail.processingProgress ?? { stages: [] }} mobile />
-          </div>
-        </section>
-
       {showSecondaryActions ? (
         <section className="mobile-card" data-testid="mobile-reimbursement-actions">
           <h2 className="text-base font-semibold text-zinc-900">操作</h2>