feat(08-05-interaction-pattern-unification): 统一前端交互与反馈模式

client/src/pages/MobileReimbursementDetailPage.tsx

@@ -49,6 +49,7 @@ import { isTravelReimbursement } from "../lib/reimbursementTravel";
 import { ReimbursementOperationalHints } from "../components/reimbursements/ReimbursementOperationalHints";
 import { ProcessingProgress } from "../components/patterns/ProcessingProgress";
 import { PageScaffold } from "../components/patterns/PageScaffold";
+import { MOBILE_STICKY_ACTION_PAGE_CLASS, MobileStickyActionBar } from "../components/patterns/MobileStickyActionBar";
 import { Button } from "../components/ui/button";
 import {
   Dialog,
@@ -881,10 +882,7 @@ export function MobileReimbursementDetailPage() {
     <PageScaffold
       className={cn(
         "space-y-4",
-        showStickyActions ? "mobile-fixed-action-page" : "",
-        showStickyActions
-          ? "pb-[calc(var(--mobile-sticky-action-height,78px)+env(safe-area-inset-bottom,0px)+1.25rem)]"
-          : "pb-6",
+        showStickyActions ? MOBILE_STICKY_ACTION_PAGE_CLASS : "pb-6",
       )}
       data-testid="mobile-reimbursement-detail"
     >
@@ -1333,11 +1331,7 @@ export function MobileReimbursementDetailPage() {
       ) : null}
 
       {showStickyActions ? (
-        <div
-          className="mobile-sticky-action-surface fixed inset-x-0 bottom-0 z-50 border-t border-zinc-200 bg-white/95 shadow-[0_-10px_24px_rgba(15,23,42,0.10)] backdrop-blur"
-          data-testid="mobile-reimbursement-sticky-actions"
-        >
-          <div className="mobile-sticky-action-grid">
+        <MobileStickyActionBar testId="mobile-reimbursement-sticky-actions">
             {showSubmitAction ? (
               <Button
                 className="min-h-11 min-w-0 px-2 text-sm whitespace-nowrap"
@@ -1349,8 +1343,7 @@ export function MobileReimbursementDetailPage() {
                 {submitMutation.isPending ? "提交中..." : "提交审批"}
               </Button>
             ) : null}
-          </div>
-        </div>
+        </MobileStickyActionBar>
       ) : null}
 
       <Dialog open={isInvoiceDialogOpen} onOpenChange={closeInvoiceDialog}>