R92 A3-A4 优化发票上传状态与批量上传

client/src/pages/MobileCapturePage.tsx

@@ -32,11 +32,18 @@ function isLikelyNetworkError(error: unknown) {
   return true;
 }
 
+type CaptureUploadResult = {
+  succeeded: number;
+  queued: number;
+  failed: Array<{ file: File; message: string }>;
+};
+
 export function MobileCapturePage() {
   const queryClient = useQueryClient();
   const [error, setError] = useState("");
   const [message, setMessage] = useState("");
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [uploadProgress, setUploadProgress] = useState({ completed: 0, total: 0 });
   const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
 
   const queueQuery = useQuery({
@@ -45,12 +52,48 @@ export function MobileCapturePage() {
   });
 
   const uploadMutation = useMutation({
-    mutationFn: async (file: File) => uploadInvoice(file, "vat"),
-    onSuccess: () => {
-      setSelectedFile(null);
+    mutationFn: async (files: File[]) => {
+      const result: CaptureUploadResult = { succeeded: 0, queued: 0, failed: [] };
+      setUploadProgress({ completed: 0, total: files.length });
+
+      for (const [index, file] of files.entries()) {
+        try {
+          await uploadInvoice(file, "vat");
+          result.succeeded += 1;
+        } catch (err) {
+          if (isLikelyNetworkError(err)) {
+            await enqueueInvoiceUpload(file);
+            result.queued += 1;
+          } else {
+            result.failed.push({
+              file,
+              message: isApiError(err)
+                ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`
+                : err instanceof Error ? err.message : "上传失败",
+            });
+          }
+        }
+
+        setUploadProgress({ completed: index + 1, total: files.length });
+      }
+
+      return result;
+    },
+    onSuccess: async (result) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] }),
+        queryClient.invalidateQueries({ queryKey: ["invoice-pool"] }),
+      ]);
+      setSelectedFiles(result.failed.map((item) => item.file));
       setError("");
       setMessage("");
-      toast.success("上传成功");
+      if (result.failed.length) {
+        const msg = result.failed.map((item) => `${item.file.name}: ${item.message}`).join("；");
+        setError(msg);
+        toast.error(`上传完成：成功 ${result.succeeded}，待重试 ${result.queued}，失败 ${result.failed.length}`);
+        return;
+      }
+      toast.success(`上传完成：成功 ${result.succeeded}，待重试 ${result.queued}`);
     },
     onError: (err) => {
       if (isApiError(err)) {
@@ -64,6 +107,7 @@ export function MobileCapturePage() {
       setError(msg);
       toast.error(msg);
     },
+    onSettled: () => setUploadProgress({ completed: 0, total: 0 }),
   });
 
   const syncMutation = useMutation({
@@ -166,54 +210,55 @@ export function MobileCapturePage() {
           className="sr-only"
           data-testid="mobile-capture-file"
           onChange={(event) => {
-            const file = event.target.files?.[0] ?? null;
-            setSelectedFile(file);
+            setSelectedFiles(Array.from(event.target.files ?? []));
           }}
+          multiple
           type="file"
         />
 
         <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)` : "未选择"}
+          {selectedFiles.length ? `已选择 ${selectedFiles.length} 个` : "未选择"}
+          {selectedFiles.length ? (
+            <div className="mt-2 space-y-1 text-xs">
+              {selectedFiles.slice(0, 5).map((file) => (
+                <div key={`${file.name}-${file.size}`} className="truncate">
+                  {file.name} ({Math.ceil(file.size / 1024)} KB)
+                </div>
+              ))}
+              {selectedFiles.length > 5 ? <div>另有 {selectedFiles.length - 5} 个文件</div> : null}
+            </div>
+          ) : null}
         </div>
 
         <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}
+            disabled={uploadMutation.isPending || selectedFiles.length === 0}
             onClick={async () => {
-              if (!selectedFile) return;
+              if (!selectedFiles.length) return;
 
               setMessage("");
               setError("");
 
               if (!isOnline) {
-                await enqueueInvoiceUpload(selectedFile);
+                for (const file of selectedFiles) {
+                  await enqueueInvoiceUpload(file);
+                }
                 await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
-                setSelectedFile(null);
-                setMessage("当前离线，已加入待上传队列");
+                setSelectedFiles([]);
+                setMessage(`当前离线，已加入待上传队列 ${selectedFiles.length} 项`);
                 return;
               }
 
-              try {
-                await uploadMutation.mutateAsync(selectedFile);
-              } catch (err) {
-                if (isLikelyNetworkError(err)) {
-                  await enqueueInvoiceUpload(selectedFile);
-                  await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
-                  setSelectedFile(null);
-                  setError("");
-                  setMessage("上传失败，已加入离线队列等待重试");
-                  return;
-                }
-
-                throw err;
-              }
+              uploadMutation.mutate(selectedFiles);
             }}
             type="button"
           >
-            {uploadMutation.isPending ? "上传中..." : "立即上传"}
+            {uploadMutation.isPending
+              ? `上传中 ${uploadProgress.completed}/${uploadProgress.total}`
+              : "立即上传"}
           </Button>
 
           <Button