MUD6 推广移动统一设计

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">