R89 A6-A7 移动触控与回归补齐

client/src/pages/MobileCapturePage.tsx

@@ -5,6 +5,7 @@ import { uploadInvoice } from "../api/invoicePool";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
 import { PageHeader } from "../components/common/PageHeader";
+import { PageScaffold } from "../components/patterns/PageScaffold";
 import { Button } from "../components/ui/button";
 import { Spinner } from "../components/ui/spinner";
 import {
@@ -125,10 +126,10 @@ export function MobileCapturePage() {
   }, [queuedItems, syncMutation]);
 
   return (
-    <div className="space-y-4">
+    <PageScaffold className="space-y-4">
       <PageHeader
-        title="移动拍照上传"
-        subtitle="支持离线缓存与联网自动重放。"
+        title="票据上传"
+        subtitle="拍照或选择发票文件，离线时自动加入待上传队列。"
       />
 
       {error ? (
@@ -139,18 +140,30 @@ 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-3 p-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-base font-semibold text-zinc-900">拍照/选择文件</h3>
-          <span className={isOnline ? "text-emerald-600" : "text-orange-600"}>
+      <div className="card-std space-y-4 p-4">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <h3 className="text-base font-semibold text-zinc-900">选择票据</h3>
+            <p className="mt-1 text-sm leading-5 text-zinc-500">支持图片和 PDF，手机会优先打开相机。</p>
+          </div>
+          <span className={isOnline ? "shrink-0 text-sm text-emerald-600" : "shrink-0 text-sm text-orange-600"}>
             {isOnline ? "在线" : "离线"}
           </span>
         </div>
 
+        <label
+          htmlFor="mobile-capture-file"
+          className="flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-center transition-colors hover:border-zinc-400 hover:bg-white"
+        >
+          <span className="material-symbols-outlined text-[32px] text-zinc-700">add_photo_alternate</span>
+          <span className="mt-2 text-sm font-semibold text-zinc-900">拍照或选择文件</span>
+          <span className="mt-1 text-xs leading-5 text-zinc-500">JPG、PNG、PDF 均可上传</span>
+        </label>
         <input
+          id="mobile-capture-file"
           accept="image/*,application/pdf"
           capture="environment"
-          className="w-full text-sm"
+          className="sr-only"
           data-testid="mobile-capture-file"
           onChange={(event) => {
             const file = event.target.files?.[0] ?? null;
@@ -159,12 +172,14 @@ export function MobileCapturePage() {
           type="file"
         />
 
-        <div className="text-sm text-zinc-600">
-          当前文件：{selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : "未选择"}
+        <div className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-600">
+          <span className="font-medium text-zinc-800">当前文件：</span>
+          {selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : "未选择"}
         </div>
 
-        <div className="flex flex-wrap gap-2">
+        <div className="grid gap-2 sm:grid-cols-2">
           <Button
+            className="min-h-12 w-full"
             data-testid="mobile-capture-upload"
             disabled={uploadMutation.isPending || !selectedFile}
             onClick={async () => {
@@ -202,6 +217,7 @@ export function MobileCapturePage() {
           </Button>
 
           <Button
+            className="min-h-12 w-full"
             data-testid="mobile-capture-sync-queue"
             disabled={!queuedItems.length || syncMutation.isPending || !isOnline}
             onClick={() => syncMutation.mutate(queuedItems)}
@@ -214,9 +230,9 @@ export function MobileCapturePage() {
       </div>
 
       <div className="card-std space-y-3 p-4" data-testid="mobile-capture-queue">
-        <div className="flex items-center justify-between">
+        <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">{queuedCountLabel}</span>
+          <span className="shrink-0 text-sm text-zinc-500">{queuedCountLabel}</span>
         </div>
 
         {queueQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div> : null}
@@ -226,11 +242,12 @@ export function MobileCapturePage() {
         ) : null}
 
         {queuedItems.map((item) => (
-          <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-2 text-sm">
+          <div key={item.id} className="rounded-xl border border-zinc-200 bg-white px-3 py-3 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">
               <Button
+                className="min-h-11 w-full sm:w-auto"
                 data-testid={`mobile-capture-remove-${item.id}`}
                 onClick={async () => {
                   await removeQueuedInvoiceUpload(item.id);
@@ -246,6 +263,6 @@ export function MobileCapturePage() {
           </div>
         ))}
       </div>
-    </div>
+    </PageScaffold>
   );
 }