MUD6 推广移动统一设计

client/src/components/mobile/BarcodeScannerPanel.tsx

@@ -183,7 +183,7 @@ export function BarcodeScannerPanel({ disabled = false, onDetected }: BarcodeSca
   }, [startWithBarcodeDetector, startWithZxing, stopScanner]);
 
   return (
-    <div className="space-y-3 rounded-xl border border-zinc-200 p-4" data-testid="barcode-scanner-panel">
+    <div className="mobile-card space-y-3" data-testid="barcode-scanner-panel">
       <div className="flex items-center justify-between gap-3">
         <div>
           <h3 className="text-base font-semibold text-zinc-900">相机扫码</h3>

client/src/pages/MobileApprovalsPage.tsx

@@ -811,7 +811,7 @@ export function MobileApprovalsPage() {
         <p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
       ) : null}
 
-      <section className="card-std space-y-4 p-4" data-testid="mobile-approvals-list">
+      <section className="mobile-card space-y-4" data-testid="mobile-approvals-list">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <div>
             <h3 className="text-base font-semibold text-zinc-900">{listTitle}</h3>
@@ -835,7 +835,7 @@ export function MobileApprovalsPage() {
             placeholder="搜索待办"
           />
 
-          <details className="rounded-xl border border-zinc-200 bg-zinc-50/70 px-3 py-2 text-sm">
+          <details className="mobile-subcard bg-zinc-50/70 text-sm">
             <summary className="cursor-pointer select-none font-medium text-zinc-700">
               筛选与批量
             </summary>
@@ -891,7 +891,7 @@ export function MobileApprovalsPage() {
         </div>
 
         {batchMode ? (
-          <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-3 text-sm">
+          <div className="mobile-subcard bg-zinc-50 text-sm">
             <div className="flex flex-wrap items-center justify-between gap-3">
               <div className="text-zinc-700">已选 {selectedBatchTaskIds.length} 条</div>
               <div className="grid w-full gap-2 sm:flex sm:w-auto sm:flex-wrap">
@@ -964,7 +964,7 @@ export function MobileApprovalsPage() {
               return (
                 <div
                   key={task.id}
-                  className={`flex gap-3 rounded-xl border px-3 py-3 ${
+                  className={`mobile-list-card flex gap-3 ${
                     isBatchSelected ? "border-primary bg-primary-50" : "border-zinc-200 bg-white"
                   }`}
                 >
@@ -999,7 +999,7 @@ export function MobileApprovalsPage() {
             return (
               <button
                 key={task.id}
-                className={`min-h-20 w-full rounded-xl border px-3 py-3 text-left transition-colors ${
+                className={`mobile-list-card min-h-20 w-full text-left transition-colors ${
                   isSelected ? "border-primary bg-primary-50" : "border-zinc-200 bg-white"
                 }`}
                 data-testid={`mobile-approvals-task-${task.id}`}
@@ -1022,7 +1022,7 @@ export function MobileApprovalsPage() {
         </div>
       </section>
 
-      <section ref={detailSectionRef} className="card-std scroll-mt-4 space-y-3 p-4" data-testid="mobile-approvals-detail">
+      <section ref={detailSectionRef} className="mobile-card scroll-mt-4 space-y-3" data-testid="mobile-approvals-detail">
         <h3 className="text-base font-semibold text-zinc-900">处理</h3>
 
         {!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}
@@ -1045,7 +1045,7 @@ export function MobileApprovalsPage() {
 
         {selectedTask ? (
           <>
-            <div className="rounded-lg border border-zinc-200 p-3 text-sm">
+            <div className="mobile-list-card text-sm">
               <div>任务状态：{workflowStatusLabel(selectedTask.task.status)}</div>
               <div>步骤：{selectedTask.task.stepName}</div>
               <div>对象类型：{entityLabel(selectedTask.workflowInstance?.entityType)}</div>
@@ -1105,7 +1105,7 @@ export function MobileApprovalsPage() {
                   <p className="text-xs text-zinc-500">离线仅保存通过 / 驳回草稿，联网同步成功后才会正式提交。</p>
                 ) : null}
 
-                <div className="grid gap-2 sm:grid-cols-3">
+                <div className="grid gap-2 min-[390px]:grid-cols-3">
                   <Button
                     className="min-h-12 w-full"
                     data-testid="mobile-approvals-approve"
@@ -1150,7 +1150,7 @@ export function MobileApprovalsPage() {
                 </div>
 
                 {canTransfer ? (
-                  <div className="space-y-3 rounded-lg border border-zinc-200 bg-white p-3 text-sm">
+                  <div className="mobile-list-card space-y-3 text-sm">
                     <p className="font-medium text-zinc-800">转审</p>
                     <select
                       className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
@@ -1192,7 +1192,7 @@ export function MobileApprovalsPage() {
         ) : null}
       </section>
 
-      <section className="card-std space-y-3 p-4" data-testid="mobile-approvals-queue">
+      <section className="mobile-card space-y-3" data-testid="mobile-approvals-queue">
         <div className="flex items-center justify-between gap-3">
           <h3 className="text-base font-semibold text-zinc-900">离线草稿</h3>
           <span className="text-sm text-zinc-500">{currentQueueItems.length ? `待同步 ${currentQueueItems.length}` : "无草稿"}</span>
@@ -1216,7 +1216,7 @@ export function MobileApprovalsPage() {
         {!currentQueueItems.length ? <p className="text-sm text-zinc-500">暂无待同步草稿。</p> : null}
 
         {currentQueueItems.map((item) => (
-          <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3 text-sm">
+          <div key={item.id} className="mobile-list-card text-sm">
             <div className="font-medium text-zinc-900">
               {publicReference(item.taskSnapshot.reference) ?? entityLabel(item.taskSnapshot.entityType)} · {item.action === "approve" ? "通过" : "驳回"}
             </div>

client/src/pages/MobileAssetScanPage.tsx

@@ -16,6 +16,7 @@ import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { PageHeader } from "../components/common/PageHeader";
 import { BarcodeScannerPanel } from "../components/mobile/BarcodeScannerPanel";
+import { PageScaffold } from "../components/patterns/PageScaffold";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import {
@@ -394,7 +395,7 @@ export function MobileAssetScanPage() {
   );
 
   return (
-    <div className="space-y-4">
+    <PageScaffold className="space-y-4">
       <PageHeader
         title={isInventoryMode ? "移动扫码盘点" : "移动资产扫码"}
         subtitle={isInventoryMode ? "在盘点任务上下文中扫码定位资产并快捷录入结果。" : "扫码或手工输入资产编号，快速查看资产卡片。"}
@@ -410,7 +411,7 @@ export function MobileAssetScanPage() {
       ) : null}
 
       {isInventoryMode ? (
-        <div className="card-std space-y-3 p-4" data-testid="mobile-asset-scan-inventory-context">
+        <div className="mobile-card space-y-3" data-testid="mobile-asset-scan-inventory-context">
           <div className="flex items-center justify-between gap-3">
             <div>
               <h3 className="text-base font-semibold text-zinc-900">盘点任务上下文</h3>
@@ -436,7 +437,7 @@ export function MobileAssetScanPage() {
           ) : null}
 
           {selectedInventoryCheck ? (
-            <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-zinc-200 px-3 py-3 text-sm">
+            <div className="mobile-list-card flex flex-wrap items-center justify-between gap-3 text-sm">
               <div>
                 <div className="font-medium text-zinc-900">{selectedInventoryCheck.checkNo}</div>
                 <div className="text-zinc-500">状态：{inventoryStatusLabel(selectedInventoryCheck.status)} · 范围：{selectedInventoryCheck.scopeType} / {selectedInventoryCheck.scopeRefId ?? "全量"}</div>
@@ -459,13 +460,13 @@ export function MobileAssetScanPage() {
         }}
       />
 
-      <div className="card-std space-y-3 p-4" data-testid="mobile-asset-scan-search">
+      <div className="mobile-card space-y-3" data-testid="mobile-asset-scan-search">
         <div className="flex items-center justify-between gap-3">
           <h3 className="text-base font-semibold text-zinc-900">手工输入 / 搜索</h3>
           <span className={`text-sm ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
         </div>
 
-        <div className="flex flex-col gap-2 sm:flex-row">
+        <div className="grid gap-2 min-[390px]:grid-cols-[minmax(0,1fr)_auto]">
           <Input
             data-testid="mobile-asset-scan-input"
             value={searchInput}
@@ -483,14 +484,14 @@ export function MobileAssetScanPage() {
       </div>
 
       {filteredSearchResults.length > 1 ? (
-        <div className="card-std space-y-3 p-4" data-testid="mobile-asset-scan-candidates">
+        <div className="mobile-card space-y-3" data-testid="mobile-asset-scan-candidates">
           <h3 className="text-base font-semibold text-zinc-900">候选资产</h3>
           <div className="space-y-2">
             {filteredSearchResults.map((item) => (
               <button
                 key={item.id}
                 type="button"
-                className={`w-full rounded-lg border px-3 py-3 text-left text-sm ${selectedAssetId === item.id ? "border-primary bg-primary-50 text-primary" : "border-zinc-200 bg-white text-zinc-800"}`}
+                className={`mobile-list-card w-full text-left text-sm ${selectedAssetId === item.id ? "border-primary bg-primary-50 text-primary" : "border-zinc-200 bg-white text-zinc-800"}`}
                 onClick={() => setSelectedAssetId(item.id)}
                 data-testid={`mobile-asset-scan-candidate-${item.id}`}
               >
@@ -503,7 +504,7 @@ export function MobileAssetScanPage() {
       ) : null}
 
       {selectedAsset ? (
-        <div className="card-std space-y-4 p-4" data-testid="mobile-asset-scan-detail">
+        <div className="mobile-card space-y-4" data-testid="mobile-asset-scan-detail">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div>
               <h3 className="text-lg font-semibold text-zinc-900">{selectedAsset.assetNo}</h3>
@@ -514,22 +515,22 @@ export function MobileAssetScanPage() {
             </Button>
           </div>
 
-          <div className="grid gap-3 md:grid-cols-2">
-            <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">状态：{statusLabel(selectedAsset.status)}</div>
-            <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">法体：{selectedAsset.legalEntity?.name ?? "-"}</div>
-            <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">成本中心：{selectedAsset.costCenter?.name ?? "-"}</div>
-            <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">位置：{selectedAsset.location ?? "-"}</div>
-            <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">归属人：{selectedAsset.assignee?.name ?? "未分配"}</div>
-            <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">序列号：{selectedAsset.serialNo ?? "-"}</div>
+          <div className="mobile-info-grid">
+            <div className="mobile-subcard text-sm">状态：{statusLabel(selectedAsset.status)}</div>
+            <div className="mobile-subcard text-sm">法体：{selectedAsset.legalEntity?.name ?? "-"}</div>
+            <div className="mobile-subcard text-sm">成本中心：{selectedAsset.costCenter?.name ?? "-"}</div>
+            <div className="mobile-subcard text-sm">位置：{selectedAsset.location ?? "-"}</div>
+            <div className="mobile-subcard text-sm">归属人：{selectedAsset.assignee?.name ?? "未分配"}</div>
+            <div className="mobile-subcard text-sm">序列号：{selectedAsset.serialNo ?? "-"}</div>
           </div>
 
           {isInventoryMode && canRecordInventory && selectedInventoryCheck ? (
-            <div className="space-y-3 rounded-xl border border-zinc-200 bg-zinc-50 p-4">
+            <div className="mobile-subcard space-y-3 bg-zinc-50">
               <div>
                 <h4 className="text-sm font-semibold text-zinc-900">盘点录入</h4>
                 <p className="text-xs text-zinc-500">仅在盘点中的任务可提交或离线缓存结果。</p>
               </div>
-              <div className="grid gap-3 md:grid-cols-2">
+              <div className="mobile-info-grid">
                 <div className="space-y-2">
                   <label className="text-sm font-medium text-zinc-700">盘点结果</label>
                   <select className="select-std" value={recordResult} onChange={(event) => setRecordResult(event.target.value as InventoryCheckResult)}>
@@ -564,7 +565,7 @@ export function MobileAssetScanPage() {
       ) : null}
 
       {isInventoryMode && canRecordInventory ? (
-        <div className="card-std space-y-3 p-4" data-testid="mobile-asset-scan-queue">
+        <div className="mobile-card space-y-3" data-testid="mobile-asset-scan-queue">
           <div className="flex items-center justify-between gap-3">
             <h3 className="text-base font-semibold text-zinc-900">离线盘点队列</h3>
             <span className="text-sm text-zinc-500">{currentQueueItems.length ? `待同步 ${currentQueueItems.length} 项` : "无待同步项"}</span>
@@ -575,7 +576,7 @@ export function MobileAssetScanPage() {
           ) : null}
 
           {currentQueueItems.map((item) => (
-            <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3 text-sm">
+            <div key={item.id} className="mobile-list-card text-sm">
               <div className="font-medium text-zinc-900">{item.assetNo}</div>
               <div className="text-zinc-500">结果：{inventoryResultLabel(item.result)} · 创建时间：{formatDateTime(item.createdAt)}</div>
               <div className="text-zinc-500">备注：{item.note ?? "-"}</div>
@@ -597,6 +598,6 @@ export function MobileAssetScanPage() {
           ))}
         </div>
       ) : null}
-    </div>
+    </PageScaffold>
   );
 }

client/src/pages/MobileCapturePage.tsx

@@ -186,7 +186,7 @@ export function MobileCapturePage() {
         <p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
       ) : null}
 
-      <div className="card-std space-y-4 p-4">
+      <div className="mobile-card space-y-4">
         <div className="flex items-center justify-between gap-3">
           <div>
             <h3 className="text-base font-semibold text-zinc-900">选择票据</h3>
@@ -200,10 +200,10 @@ export function MobileCapturePage() {
         <div className="grid gap-2" data-testid="mobile-capture-file">
           <label
             htmlFor="mobile-capture-pdf-file"
-            className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-left shadow-sm transition-colors hover:bg-zinc-50"
+            className="mobile-action-link min-h-16 cursor-pointer"
           >
-            <MobileIcon name="picture_as_pdf" className="size-10 rounded-lg bg-emerald-50 p-2 text-emerald-700" />
-            <span className="min-w-0">
+            <MobileIcon name="picture_as_pdf" className="mobile-action-icon bg-emerald-50 text-emerald-700" />
+            <span className="mobile-action-copy">
               <span className="block text-sm font-semibold text-zinc-900">选择 PDF 发票</span>
               <span className="mt-0.5 block text-xs leading-5 text-zinc-500">数电票或扫描件 PDF</span>
             </span>
@@ -221,7 +221,7 @@ export function MobileCapturePage() {
           />
         </div>
 
-        <div className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-600">
+        <div className="mobile-subcard text-sm text-zinc-600">
           <span className="font-medium text-zinc-800">当前文件：</span>
           {selectedFiles.length ? `已选择 ${selectedFiles.length} 个` : "未选择"}
           {selectedFiles.length ? (
@@ -282,7 +282,7 @@ export function MobileCapturePage() {
         </div>
       </div>
 
-      <div className="card-std space-y-3 p-4" data-testid="mobile-capture-queue">
+      <div className="mobile-card space-y-3" data-testid="mobile-capture-queue">
         <div className="flex items-center justify-between gap-3">
           <h3 className="text-base font-semibold text-zinc-900">离线上传队列</h3>
           <span className="shrink-0 text-sm text-zinc-500">{queuedCountLabel}</span>
@@ -295,7 +295,7 @@ export function MobileCapturePage() {
         ) : null}
 
         {queuedItems.map((item) => (
-          <div key={item.id} className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm">
+          <div key={item.id} className="mobile-list-card text-sm">
             <div className="font-medium text-zinc-800">{item.fileName}</div>
             <div className="text-zinc-500">创建时间：{formatTime(item.createdAt)}</div>
             <div className="mt-2">

client/src/pages/MobileLeavePage.tsx

@@ -376,7 +376,7 @@ export function MobileLeavePage() {
           {balancesQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
           {!balancesQuery.isLoading && !balances.length ? <div className="text-sm text-zinc-500">暂无额度</div> : null}
           {balances.slice(0, 3).map((item) => (
-            <div key={item.leaveType.id} className="rounded-lg border border-zinc-200 p-3">
+            <div key={item.leaveType.id} className="mobile-list-card">
               <div className="flex items-center justify-between gap-3">
                 <div className="font-medium text-zinc-900">{item.leaveType.name}</div>
                 <span className="badge-success">启用</span>
@@ -413,14 +413,14 @@ export function MobileLeavePage() {
         </Tabs>
 
         <div className="mt-4 space-y-3">
-          {requestsQuery.isLoading ? <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">加载中...</div> : null}
+          {requestsQuery.isLoading ? <div className="mobile-empty-state">加载中...</div> : null}
           {requestsQuery.isError ? (
             <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">
               {resolveErrorMessage(requestsQuery.error)}
             </div>
           ) : null}
           {!requestsQuery.isLoading && !requestsQuery.isError && !records.length ? (
-            <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">暂无请假记录</div>
+            <div className="mobile-empty-state">暂无请假记录</div>
           ) : null}
           {records.map((item) => (
             <LeaveRecordCard

client/src/pages/MobileMePage.tsx

@@ -38,11 +38,11 @@ function MobileActionLink({
   return (
     <Link
       to={to}
-      className="mobile-me-action-link"
+      className="mobile-action-link mobile-me-action-link"
       data-testid="mobile-me-action-link"
     >
-      <MobileIcon name={icon} className="mobile-me-action-icon" />
-      <span className="mobile-me-action-copy">
+      <MobileIcon name={icon} className="mobile-action-icon mobile-me-action-icon" />
+      <span className="mobile-action-copy mobile-me-action-copy">
         <span className="block text-sm font-semibold text-zinc-900">{label}</span>
         {description ? <span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span> : null}
       </span>
@@ -82,11 +82,11 @@ export function MobileMePage() {
       <PageHeader title="我的" />
 
       <SectionPanel title="个人信息">
-        <div className="mobile-me-profile-row" data-testid="mobile-me-profile-row">
-          <div className="mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
+        <div className="mobile-slot-row mobile-me-profile-row" data-testid="mobile-me-profile-row">
+          <div className="mobile-slot-avatar mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
             <EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
           </div>
-          <div className="mobile-me-profile-copy" data-testid="mobile-me-profile-copy">
+          <div className="mobile-slot-copy mobile-me-profile-copy" data-testid="mobile-me-profile-copy">
             <div className="text-lg font-semibold leading-7 text-zinc-900" data-testid="mobile-me-profile-name">
               {me?.name ?? "-"}
             </div>
@@ -113,7 +113,7 @@ export function MobileMePage() {
       </SectionPanel>
 
       <SectionPanel title="更多入口">
-        <div className="mobile-me-entry-grid" data-testid="mobile-more-links">
+        <div className="mobile-entry-grid mobile-me-entry-grid" data-testid="mobile-more-links">
           <MobileActionLink to="/mobile/notifications" label="通知中心" icon="notifications" />
           <MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />
           <MobileActionLink to="/mobile/reimbursements" label="报销" icon="request_quote" />
@@ -125,7 +125,7 @@ export function MobileMePage() {
 
       {canAccessAdmin ? (
         <SectionPanel title="管理入口">
-          <div className="mobile-me-entry-grid">
+          <div className="mobile-entry-grid mobile-me-entry-grid">
             <MobileActionLink to="/mobile/me" label="人员管理" icon="group" />
             <MobileActionLink to="/mobile/me" label="组织架构" icon="account_tree" />
             <MobileActionLink to="/mobile/me" label="系统设置" icon="settings" />

client/src/pages/MobileNotificationsPage.tsx

@@ -115,7 +115,7 @@ export function MobileNotificationsPage() {
         }
       />
 
-      <section className="card-std space-y-4 p-4" data-testid="mobile-notifications-list">
+      <section className="mobile-card space-y-4" data-testid="mobile-notifications-list">
         <div className="space-y-3">
           <Tabs
             data-testid="mobile-notifications-filter-tabs"
@@ -160,7 +160,7 @@ export function MobileNotificationsPage() {
         </div>
 
         {listQuery.isLoading ? (
-          <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">加载中...</div>
+          <div className="mobile-empty-state">加载中...</div>
         ) : null}
 
         {listQuery.isError ? (
@@ -170,13 +170,13 @@ export function MobileNotificationsPage() {
         ) : null}
 
         {!listQuery.isLoading && !listQuery.isError && !notificationItems.length ? (
-          <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">暂无通知</div>
+          <div className="mobile-empty-state">暂无通知</div>
         ) : null}
 
         {notificationItems.map((item) => {
           const targetLink = resolveMobileNotificationTarget(item);
           return (
-            <article data-testid="mobile-notification-card" key={item.id} className="rounded-lg border border-zinc-200 bg-white p-4">
+            <article data-testid="mobile-notification-card" key={item.id} className="mobile-list-card">
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
                   <div className="text-sm font-semibold text-zinc-900">{item.title}</div>

client/src/pages/MobileProfilePage.tsx

@@ -124,20 +124,20 @@ export function MobileProfilePage() {
       ) : null}
 
       <SectionPanel title="基本信息">
-        <dl className="grid gap-3 text-sm">
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+        <dl className="mobile-info-grid text-sm">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">姓名</dt>
             <dd className="mt-1 font-medium text-zinc-900">{me?.name ?? "-"}</dd>
           </div>
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">员工号</dt>
             <dd className="mt-1 font-medium text-zinc-900">{me?.employeeNo ?? "-"}</dd>
           </div>
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">邮箱</dt>
             <dd className="mt-1 break-words font-medium text-zinc-900">{me?.email ?? "-"}</dd>
           </div>
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">手机号</dt>
             <dd className="mt-1 font-medium text-zinc-900">{me?.phone ?? "-"}</dd>
           </div>
@@ -145,7 +145,7 @@ export function MobileProfilePage() {
       </SectionPanel>
 
       <SectionPanel title="外部通知推送">
-        <label className="flex min-h-12 items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-800">
+        <label className="mobile-list-card flex min-h-12 items-center justify-between gap-3 text-sm text-zinc-800">
           <span>接收外部渠道推送</span>
           <input
             type="checkbox"
@@ -159,13 +159,13 @@ export function MobileProfilePage() {
 
       <SectionPanel title="企业微信绑定">
         <div className="space-y-3" data-testid="mobile-profile-wecom-card">
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <div className="text-xs text-zinc-500">接入状态</div>
             <div className="mt-1 font-semibold text-zinc-900">{wecomStatus.label}</div>
             <div className="mt-1 text-sm leading-5 text-zinc-500">{wecomStatus.description}</div>
           </div>
 
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <div className="flex items-center justify-between gap-3">
               <div>
                 <div className="text-xs text-zinc-500">当前绑定</div>
@@ -181,7 +181,7 @@ export function MobileProfilePage() {
             ) : null}
           </div>
 
-          <div className="grid grid-cols-2 gap-2">
+          <div className="mobile-two-action-grid">
             <Button
               className="w-full"
               type="button"

client/src/pages/MobileReimbursementDetailPage.tsx

@@ -880,7 +880,7 @@ export function MobileReimbursementDetailPage() {
         <div className="mt-3 space-y-2">
           {detail.items.length ? (
             detail.items.map((item) => (
-              <article key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3">
+              <article key={item.id} className="mobile-list-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.expenseType?.name ?? "费用"}</div>
@@ -934,7 +934,7 @@ export function MobileReimbursementDetailPage() {
         {detail.invoices.length ? (
           <div className="mt-3 space-y-2">
             {detail.invoices.map((invoice) => (
-              <article key={invoice.id} className="rounded-lg border border-zinc-200 px-3 py-3">
+              <article key={invoice.id} className="mobile-list-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">{formatInvoiceTitle(invoice)}</div>
@@ -1025,7 +1025,7 @@ export function MobileReimbursementDetailPage() {
         {(detail.attachments ?? []).length ? (
           <div className="mt-3 space-y-2">
             {(detail.attachments ?? []).map((attachment) => (
-              <article key={attachment.id} className="rounded-lg border border-zinc-200 px-3 py-3">
+              <article key={attachment.id} className="mobile-list-card">
                 <div className="min-w-0">
                   <div className="truncate text-sm font-semibold text-zinc-900">{attachment.originalName}</div>
                   <div className="mt-1 text-xs text-zinc-500">

client/src/pages/MobileReimbursementsPage.tsx

@@ -199,14 +199,14 @@ export function MobileReimbursementsPage() {
         </Tabs>
 
         <div className="mt-4 space-y-3">
-          {listQuery.isLoading ? <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">加载中...</div> : null}
+          {listQuery.isLoading ? <div className="mobile-empty-state">加载中...</div> : null}
           {listQuery.isError ? (
             <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">
               {resolveErrorMessage(listQuery.error)}
             </div>
           ) : null}
           {!listQuery.isLoading && !listQuery.isError && !items.length ? (
-            <div className="rounded-lg border border-dashed border-zinc-200 p-6 text-center text-sm text-zinc-500">暂无报销记录</div>
+            <div className="mobile-empty-state">暂无报销记录</div>
           ) : null}
           {items.map((item) => (
             <ReimbursementCard

client/src/styles/mobile-touch.css

@@ -16,8 +16,10 @@
   --mobile-bottom-nav-height: 68px;
   --mobile-sticky-action-height: 78px;
   --mobile-icon-action-min-height: 72px;
-  --mobile-me-slot-gap: clamp(12px, 3.7vw, 16px);
-  --mobile-me-action-icon-slot: 36px;
+  --mobile-slot-gap: clamp(12px, 3.7vw, 16px);
+  --mobile-action-icon-slot: 36px;
+  --mobile-me-slot-gap: var(--mobile-slot-gap);
+  --mobile-me-action-icon-slot: var(--mobile-action-icon-slot);
 }
 
 .page-scaffold.mobile-fixed-action-page {
@@ -119,6 +121,7 @@
   min-width: 0;
 }
 
+.mobile-entry-grid,
 .mobile-me-entry-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -126,14 +129,16 @@
   min-width: 0;
 }
 
+.mobile-slot-row,
 .mobile-me-profile-row {
   display: grid;
   grid-template-columns: 44px minmax(0, 1fr);
-  column-gap: var(--mobile-me-slot-gap);
+  column-gap: var(--mobile-slot-gap);
   align-items: center;
   min-width: 0;
 }
 
+.mobile-slot-avatar,
 .mobile-me-avatar-slot {
   width: 44px;
   min-width: 44px;
@@ -142,10 +147,12 @@
   justify-content: center;
 }
 
+.mobile-slot-copy,
 .mobile-me-profile-copy {
   min-width: 0;
 }
 
+.mobile-slot-copy > *,
 .mobile-me-profile-copy > * {
   min-width: 0;
   overflow: hidden;
@@ -153,10 +160,11 @@
   white-space: nowrap;
 }
 
+.mobile-action-link,
 .mobile-me-action-link {
   display: grid;
-  grid-template-columns: var(--mobile-me-action-icon-slot) minmax(0, 1fr);
-  column-gap: var(--mobile-me-slot-gap);
+  grid-template-columns: var(--mobile-action-icon-slot) minmax(0, 1fr);
+  column-gap: var(--mobile-slot-gap);
   align-items: center;
   min-width: 0;
   min-height: 48px;
@@ -169,30 +177,35 @@
   transition: background-color 150ms ease, border-color 150ms ease;
 }
 
+.mobile-action-link:hover,
 .mobile-me-action-link:hover {
   background: rgb(250 250 250);
 }
 
+.mobile-action-icon,
 .mobile-me-action-icon {
-  width: var(--mobile-me-action-icon-slot);
-  height: var(--mobile-me-action-icon-slot);
+  width: var(--mobile-action-icon-slot);
+  height: var(--mobile-action-icon-slot);
   border-radius: 10px;
   background: rgb(244 244 245);
   color: rgb(63 63 70);
   padding: 7px;
 }
 
+.mobile-action-icon svg,
 .mobile-me-action-icon svg {
   display: block;
   width: 100%;
   height: 100%;
 }
 
+.mobile-action-copy,
 .mobile-me-action-copy {
   display: block;
   min-width: 0;
 }
 
+.mobile-action-copy > *,
 .mobile-me-action-copy > * {
   min-width: 0;
   overflow: hidden;
@@ -200,6 +213,34 @@
   white-space: nowrap;
 }
 
+.mobile-list-card {
+  min-width: 0;
+  border: 1px solid rgb(228 228 231);
+  border-radius: 12px;
+  background: rgb(255 255 255);
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
+  padding: var(--mobile-card-padding);
+}
+
+.mobile-subcard {
+  min-width: 0;
+  border: 1px solid rgb(228 228 231);
+  border-radius: 10px;
+  background: rgb(255 255 255);
+  padding: 10px 12px;
+}
+
+.mobile-empty-state {
+  min-width: 0;
+  border: 1px dashed rgb(228 228 231);
+  border-radius: 12px;
+  padding: 20px 12px;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(113 113 122);
+}
+
 .mobile-info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
@@ -238,8 +279,8 @@
     --mobile-card-gap: 6px;
     --mobile-card-padding: 10px;
     --mobile-icon-action-min-height: 68px;
-    --mobile-me-slot-gap: 12px;
-    --mobile-me-action-icon-slot: 34px;
+    --mobile-slot-gap: 12px;
+    --mobile-action-icon-slot: 34px;
   }
 
   .mobile-icon-action__icon {