feat(P11-P12): 落地治理开关与移动端MVP（G0-G6/H1/M1-M4）

- 新增 Feature Flag 模型、评估服务与管理 API（erp_sync/invoice_verification）\n- 完成 ERP 与验真灰度收口（路由/服务/作业统一判定）\n- 补齐 pay 与手动 sync 的 department_id 灰度上下文\n- 增加管理后台开关页、PWA 基础设施与移动拍照/审批页面\n- 增加回归脚本、安全基线与压测脚本，更新文档与执行合同\n\nIssue: G0,G1,G2,G3,G4,G5,G6,H1,M1,M2,M3,M4
2026-02-11 20:33:30 +08:00
@@ -0,0 +1,242 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+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 { Card } from "../components/ui/card";
+import {
+  enqueueInvoiceUpload,
+  listQueuedInvoiceUploads,
+  queuedItemToFile,
+  removeQueuedInvoiceUpload,
+  type MobileUploadQueueItem,
+} from "../mobile/uploadQueue";
+
+function formatTime(value: string) {
+  try {
+    return new Date(value).toLocaleString("zh-CN");
+  } catch {
+    return value;
+  }
+}
+
+function isLikelyNetworkError(error: unknown) {
+  if (isApiError(error)) {
+    return error.status >= 500;
+  }
+
+  return true;
+}
+
+export function MobileCapturePage() {
+  const queryClient = useQueryClient();
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
+
+  const queueQuery = useQuery({
+    queryKey: ["mobile", "invoice-upload-queue"],
+    queryFn: () => listQueuedInvoiceUploads(),
+  });
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => uploadInvoice(file, "vat"),
+    onSuccess: () => {
+      setSelectedFile(null);
+      setError("");
+      setMessage("上传成功");
+    },
+    onError: (err) => {
+      if (isApiError(err)) {
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        return;
+      }
+
+      setError(err instanceof Error ? err.message : "上传失败");
+    },
+  });
+
+  const syncMutation = useMutation({
+    mutationFn: async (items: MobileUploadQueueItem[]) => {
+      let succeeded = 0;
+      let failed = 0;
+
+      for (const item of items) {
+        try {
+          const file = queuedItemToFile(item);
+          await uploadInvoice(file, "vat");
+          await removeQueuedInvoiceUpload(item.id);
+          succeeded += 1;
+        } catch {
+          failed += 1;
+        }
+      }
+
+      return { succeeded, failed };
+    },
+    onSuccess: async (result) => {
+      await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
+      setError("");
+      setMessage(`队列同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "队列同步失败");
+    },
+  });
+
+  const queuedItems = queueQuery.data ?? [];
+
+  const queuedCountLabel = useMemo(() => {
+    if (!queuedItems.length) return "无待上传项";
+    return `待上传 ${queuedItems.length} 项`;
+  }, [queuedItems.length]);
+
+  useEffect(() => {
+    const onOnline = () => {
+      setIsOnline(true);
+      if (queuedItems.length) {
+        syncMutation.mutate(queuedItems);
+      }
+    };
+
+    const onOffline = () => {
+      setIsOnline(false);
+    };
+
+    window.addEventListener("online", onOnline);
+    window.addEventListener("offline", onOffline);
+
+    return () => {
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+    };
+  }, [queuedItems, syncMutation]);
+
+  return (
+    <div className="space-y-4">
+      <PageHeader
+        title="移动拍照上传"
+        subtitle="支持离线缓存与联网自动重放。"
+      />
+
+      {error ? (
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
+      ) : null}
+
+      {message ? (
+        <p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
+      ) : null}
+
+      <Card className="space-y-3 p-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-semibold text-slate-900">拍照/选择文件</h3>
+          <span className={isOnline ? "text-emerald-600" : "text-orange-600"}>
+            {isOnline ? "在线" : "离线"}
+          </span>
+        </div>
+
+        <input
+          accept="image/*,application/pdf"
+          capture="environment"
+          className="w-full text-sm"
+          data-testid="mobile-capture-file"
+          onChange={(event) => {
+            const file = event.target.files?.[0] ?? null;
+            setSelectedFile(file);
+          }}
+          type="file"
+        />
+
+        <div className="text-sm text-slate-600">
+          当前文件：{selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : "未选择"}
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          <Button
+            data-testid="mobile-capture-upload"
+            disabled={uploadMutation.isPending || !selectedFile}
+            onClick={async () => {
+              if (!selectedFile) return;
+
+              setMessage("");
+              setError("");
+
+              if (!isOnline) {
+                await enqueueInvoiceUpload(selectedFile);
+                await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
+                setSelectedFile(null);
+                setMessage("当前离线，已加入待上传队列");
+                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;
+              }
+            }}
+            type="button"
+          >
+            {uploadMutation.isPending ? "上传中..." : "立即上传"}
+          </Button>
+
+          <Button
+            data-testid="mobile-capture-sync-queue"
+            disabled={!queuedItems.length || syncMutation.isPending || !isOnline}
+            onClick={() => syncMutation.mutate(queuedItems)}
+            type="button"
+            variant="secondary"
+          >
+            {syncMutation.isPending ? "同步中..." : "同步队列"}
+          </Button>
+        </div>
+      </Card>
+
+      <Card className="space-y-3 p-4" data-testid="mobile-capture-queue">
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-semibold text-slate-900">离线上传队列</h3>
+          <span className="text-sm text-slate-500">{queuedCountLabel}</span>
+        </div>
+
+        {queueQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+
+        {!queueQuery.isLoading && queuedItems.length === 0 ? (
+          <p className="text-sm text-slate-500">暂无待上传文件。</p>
+        ) : null}
+
+        {queuedItems.map((item) => (
+          <div key={item.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm">
+            <div className="font-medium text-slate-800">{item.fileName}</div>
+            <div className="text-slate-500">创建时间：{formatTime(item.createdAt)}</div>
+            <div className="mt-2">
+              <Button
+                data-testid={`mobile-capture-remove-${item.id}`}
+                onClick={async () => {
+                  await removeQueuedInvoiceUpload(item.id);
+                  await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
+                }}
+                size="sm"
+                type="button"
+                variant="secondary"
+              >
+                移除
+              </Button>
+            </div>
+          </div>
+        ))}
+      </Card>
+    </div>
+  );
+}