实现 B-2b 统一报销工作台迁移（reimbursement-form-shared-component-migration）

client/src/components/reimbursements/ReimbursementMobileWorkspaceShell.tsx

@@ -0,0 +1,58 @@
+import type { ReimbursementEvidenceCapabilities } from "./ReimbursementItemEvidenceList";
+import { ReimbursementItemEvidenceList } from "./ReimbursementItemEvidenceList";
+import type { ReimbursementWorkspaceModel, ReimbursementWorkspaceSlots } from "../../lib/reimbursementWorkspace";
+import { formatDisplayDate, formatMoney } from "../../lib/displayFormat";
+import { MobileDetailHeader } from "../mobile/MobileDetailHeader";
+import { MOBILE_STICKY_ACTION_PAGE_CLASS } from "../patterns/MobileStickyActionBar";
+import { PageScaffold } from "../patterns/PageScaffold";
+
+type Props = {
+  model: ReimbursementWorkspaceModel;
+  capabilities?: ReimbursementEvidenceCapabilities;
+  slots: ReimbursementWorkspaceSlots;
+  fallbackTo: string;
+};
+
+export function ReimbursementMobileWorkspaceShell({ model, capabilities, slots, fallbackTo }: Props) {
+  return (
+    <PageScaffold className={slots.mobileActions ? MOBILE_STICKY_ACTION_PAGE_CLASS : undefined} data-testid="reimbursement-mobile-workspace">
+      <MobileDetailHeader
+        fallbackTo={fallbackTo}
+        status={slots.status}
+        subtitle="报销详情"
+        testId="mobile-reimbursement-detail-header"
+        title={model.header.displayCode}
+      />
+      {slots.transientFeedback}
+      <section className="mobile-card mobile-focus-card mobile-page-stack">
+        <div>
+          <p className="text-xs text-zinc-500">报销合计</p>
+          <p className="mt-1 text-3xl font-semibold text-zinc-950">{formatMoney(model.header.totalAmount)}</p>
+        </div>
+        <div className="mobile-info-grid">
+          <div className="mobile-list-card">
+            <p className="text-xs text-zinc-500">报销人</p>
+            <p className="mt-1 font-medium text-zinc-900">{model.header.ownerName}</p>
+          </div>
+          <div className="mobile-list-card">
+            <p className="text-xs text-zinc-500">报销日期</p>
+            <p className="mt-1 font-medium text-zinc-900">{formatDisplayDate(model.header.reimbursementDate)}</p>
+          </div>
+        </div>
+        <div>
+          <p className="text-xs text-zinc-500">事由</p>
+          <p className="mt-1 text-sm leading-6 text-zinc-700">{model.header.description || "未填写事由"}</p>
+        </div>
+        {slots.headerDetails}
+      </section>
+      {slots.beforeEvidence}
+      <section className="mobile-card scroll-mt-20" data-testid="reimbursement-workspace-evidence" id="reimbursement-workspace-evidence">
+        <h2 className="mb-3 text-base font-semibold text-zinc-900">明细与票据</h2>
+        <ReimbursementItemEvidenceList evidence={model.evidence} capabilities={capabilities} mobile />
+      </section>
+      {slots.afterEvidence}
+      {slots.timeline}
+      {slots.mobileActions}
+    </PageScaffold>
+  );
+}