R32-1 R32-4 R33-2: 收口工作台交互与报销链路

client/src/pages/ReimbursementDetailPage.tsx

@@ -32,6 +32,7 @@ import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
 import { EntityOverviewHero } from "../components/patterns/EntityOverviewHero";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { SectionPanel } from "../components/patterns/SectionPanel";
+import { TEST_IDS } from "../lib/testIds";
 import { ReimbursementActions, type PayPayload } from "./reimbursement-detail/ReimbursementActions";
 import {
   ReimbursementItemEditor,
@@ -697,6 +698,37 @@ export function ReimbursementDetailPage() {
             <div>关联项目：{detail.project ? `${detail.project.projectNo} · ${detail.project.name}` : "未关联"}</div>
           </DetailSideMeta>
 
+          {detail.status === "reviewing" && detail.workflowProgress ? (
+            <DetailSideMeta
+              title="审批进度"
+              description={`当前位于第 ${detail.workflowProgress.currentStepIndex + 1} / ${detail.workflowProgress.totalSteps} 步。`}
+            >
+              <div className="space-y-3" data-testid={TEST_IDS.reimbursement.workflowProgress}>
+                {detail.workflowProgress.steps.map((step, index) => (
+                  <div
+                    key={step.id}
+                    className={
+                      step.status === "current"
+                        ? "rounded-lg border border-primary-200 bg-primary-50 px-3 py-2"
+                        : step.status === "completed"
+                          ? "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2"
+                          : "rounded-lg border border-zinc-200 bg-white px-3 py-2"
+                    }
+                  >
+                    <div className="flex items-center justify-between gap-3 text-sm">
+                      <span className="font-medium text-zinc-900">
+                        第 {index + 1} 步 · {step.name}
+                      </span>
+                      <span className="text-xs text-zinc-500">
+                        {step.status === "completed" ? "已完成" : step.status === "current" ? "当前节点" : "待处理"}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </DetailSideMeta>
+          ) : null}
+
           <ReimbursementActions
             status={detail.status}
             canPay={canPay}