RS6 修复移动响应式布局体系

client/src/pages/MobileReimbursementsPage.tsx

@@ -65,7 +65,7 @@ function ReimbursementCard({
   const displayCode = resolveReimbursementDisplayCode(item);
 
   return (
-    <article className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-reimbursement-card">
+    <article className="mobile-card" data-testid="mobile-reimbursement-card">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <div className="truncate text-sm font-semibold text-zinc-900">{displayCode}</div>
@@ -74,7 +74,7 @@ function ReimbursementCard({
         <span className="badge-neutral shrink-0">{STATUS_LABEL[item.status]}</span>
       </div>
 
-      <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
+      <div className="mobile-info-grid mt-4 text-sm">
         <div>
           <div className="text-xs text-zinc-500">金额</div>
           <div className="mt-1 text-lg font-semibold text-zinc-900">{formatCurrency(item.totalAmount)}</div>
@@ -87,7 +87,7 @@ function ReimbursementCard({
 
       {item.description ? <p className="mt-3 line-clamp-2 text-sm text-zinc-500">{item.description}</p> : null}
 
-      <div className={canDeleteDraft ? "mt-4 grid grid-cols-2 gap-2" : "mt-4"}>
+      <div className={canDeleteDraft ? "mobile-two-action-grid mt-4" : "mt-4"}>
         <Button asChild className="w-full" type="button">
           <Link to={`/mobile/reimbursements/${item.id}`}>{actionLabel}</Link>
         </Button>
@@ -174,8 +174,8 @@ export function MobileReimbursementsPage() {
         }
       />
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm">
-        <div className="grid grid-cols-2 gap-3">
+      <section className="mobile-card">
+        <div className="mobile-info-grid">
           <div>
             <div className="text-xs text-zinc-500">当前列表</div>
             <div className="mt-1 text-2xl font-semibold text-zinc-900">{total}</div>
@@ -187,7 +187,7 @@ export function MobileReimbursementsPage() {
         </div>
       </section>
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-reimbursements-list">
+      <section className="mobile-card" data-testid="mobile-reimbursements-list">
         <Tabs value={status} onValueChange={(value) => setStatus(value as ReimbursementStatus)}>
           <TabsList className="grid h-auto w-full grid-cols-4">
             {STATUS_TABS.map((item) => (