refactor(ui): [UI7-1] 为其余配置与边缘页面应用新版空壳布局

client/src/pages/MobileCapturePage.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { uploadInvoice } from "../api/invoicePool";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
 import { PageHeader } from "../components/common/PageHeader";
 import { Button } from "../components/ui/button";
+import { Spinner } from "../components/ui/spinner";
 import { Card } from "../components/ui/card";
 import {
   enqueueInvoiceUpload,
@@ -47,15 +49,20 @@ export function MobileCapturePage() {
     onSuccess: () => {
       setSelectedFile(null);
       setError("");
-      setMessage("上传成功");
+      setMessage("");
+      toast.success("上传成功");
     },
     onError: (err) => {
       if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        const msg = `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`;
+        setError(msg);
+        toast.error(msg);
         return;
       }
 
-      setError(err instanceof Error ? err.message : "上传失败");
+      const msg = err instanceof Error ? err.message : "上传失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
@@ -80,10 +87,13 @@ export function MobileCapturePage() {
     onSuccess: async (result) => {
       await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
       setError("");
-      setMessage(`队列同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
+      setMessage("");
+      toast.success(`同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
     },
     onError: (err) => {
-      setError(err instanceof Error ? err.message : "队列同步失败");
+      const msg = err instanceof Error ? err.message : "队列同步失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
@@ -210,7 +220,7 @@ export function MobileCapturePage() {
           <span className="text-sm text-slate-500">{queuedCountLabel}</span>
         </div>
 
-        {queueQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+        {queueQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-slate-500"><Spinner size="sm" />加载中...</div> : null}
 
         {!queueQuery.isLoading && queuedItems.length === 0 ? (
           <p className="text-sm text-slate-500">暂无待上传文件。</p>