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

client/src/pages/MobileLeavePage.tsx

@@ -64,7 +64,7 @@ function LeaveRecordCard({
   const canSubmit = item.status === "draft" || item.status === "rejected";
 
   return (
-    <article className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-leave-record-card">
+    <article className="mobile-card" data-testid="mobile-leave-record-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">{item.leaveType?.name ?? "请假"}</div>
@@ -73,7 +73,7 @@ function LeaveRecordCard({
         <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">{item.requestedDays}</div>
@@ -87,7 +87,7 @@ function LeaveRecordCard({
       {item.reason ? <p className="mt-3 line-clamp-2 text-sm text-zinc-500">{item.reason}</p> : null}
 
       {canEdit || canSubmit ? (
-        <div className="mt-4 grid grid-cols-2 gap-2">
+        <div className="mobile-two-action-grid mt-4">
           {canEdit ? (
             <Button variant="secondary" type="button" disabled={isSaving} onClick={() => onEdit(item)}>
               编辑
@@ -251,8 +251,8 @@ export function MobileLeavePage() {
     <PageScaffold className="space-y-3 pb-4">
       <PageHeader title="请假" />
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-summary">
-        <div className="grid grid-cols-3 gap-3 text-sm">
+      <section className="mobile-card" data-testid="mobile-leave-summary">
+        <div className="mobile-metric-grid text-sm">
           <div>
             <div className="text-xs text-zinc-500">可用</div>
             <div className="mt-1 text-2xl font-semibold text-zinc-900">{balanceSummary.available.toFixed(1)}</div>
@@ -268,7 +268,7 @@ export function MobileLeavePage() {
         </div>
       </section>
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-form">
+      <section className="mobile-card" data-testid="mobile-leave-form">
         <div className="mb-4 flex items-center justify-between gap-3">
           <h3 className="text-base font-semibold text-zinc-900">{editingItem ? "编辑请假" : "新建请假"}</h3>
           {editingItem ? (
@@ -291,7 +291,7 @@ export function MobileLeavePage() {
             </select>
           </label>
 
-          <div className="grid grid-cols-2 gap-3">
+          <div className="mobile-info-grid">
             <label className="block space-y-2 text-sm text-zinc-700">
               <span>开始日期</span>
               <input className="input-std" type="date" value={startDate} onChange={(event) => setStartDate(event.target.value)} />
@@ -302,7 +302,7 @@ export function MobileLeavePage() {
             </label>
           </div>
 
-          <div className="grid grid-cols-2 gap-3">
+          <div className="mobile-info-grid">
             <label className="block space-y-2 text-sm text-zinc-700">
               <span>开始时段</span>
               <select className="select-std" value={startSession} onChange={(event) => setStartSession(event.target.value as LeaveSession)}>
@@ -370,7 +370,7 @@ export function MobileLeavePage() {
         </div>
       </section>
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-balances">
+      <section className="mobile-card" data-testid="mobile-leave-balances">
         <h3 className="text-base font-semibold text-zinc-900">额度</h3>
         <div className="mt-3 space-y-2">
           {balancesQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
@@ -381,7 +381,7 @@ export function MobileLeavePage() {
                 <div className="font-medium text-zinc-900">{item.leaveType.name}</div>
                 <span className="badge-success">启用</span>
               </div>
-              <div className="mt-3 grid grid-cols-3 gap-3 text-sm">
+              <div className="mobile-metric-grid mt-3 text-sm">
                 <div>
                   <div className="text-xs text-zinc-500">可用</div>
                   <div className="font-semibold text-zinc-900">{item.available}</div>
@@ -400,7 +400,7 @@ export function MobileLeavePage() {
         </div>
       </section>
 
-      <section className="rounded-lg border border-zinc-200 bg-white p-3 shadow-sm" data-testid="mobile-leave-records">
+      <section className="mobile-card" data-testid="mobile-leave-records">
         <h3 className="text-base font-semibold text-zinc-900">请假记录</h3>
         <Tabs value={statusFilter} onValueChange={(value) => setStatusFilter(value as LeaveStatusFilter)}>
           <TabsList className="mt-3 grid h-auto w-full grid-cols-4">