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

client/src/api/featureFlags.ts

@@ -0,0 +1,47 @@
+import { apiRequestData } from "./http";
+
+export type FeatureFlagKey = "erp_sync" | "invoice_verification";
+export type FeatureFlagOverrideMode = "inherit" | "force_on" | "force_off";
+export type FeatureFlagRolloutType = "global" | "department_allowlist";
+
+export type FeatureFlagItem = {
+  id: string | null;
+  flagKey: FeatureFlagKey;
+  overrideMode: FeatureFlagOverrideMode;
+  rolloutType: FeatureFlagRolloutType;
+  departmentIds: string[];
+  note: string;
+  version: number;
+  createdAt: string | null;
+  createdBy: string | null;
+  updatedAt: string | null;
+  updatedBy: string | null;
+  envEnabled: boolean;
+  effectiveEnabled: boolean;
+  effectiveReason: string;
+  matchedDepartmentId: string | null;
+  requiresDepartment: boolean;
+};
+
+export type FeatureFlagListResponse = {
+  items: FeatureFlagItem[];
+};
+
+export type FeatureFlagUpdatePayload = {
+  overrideMode: FeatureFlagOverrideMode;
+  rolloutType: FeatureFlagRolloutType;
+  departmentIds: string[];
+  note: string;
+  expectedVersion: number;
+};
+
+export async function fetchFeatureFlags() {
+  return apiRequestData<FeatureFlagListResponse>("/api/system/feature-flags");
+}
+
+export async function updateFeatureFlag(flagKey: FeatureFlagKey, payload: FeatureFlagUpdatePayload) {
+  return apiRequestData<{ item: FeatureFlagItem }>(`/api/system/feature-flags/${flagKey}`, {
+    method: "PUT",
+    body: JSON.stringify(payload),
+  });
+}

client/src/components/navigation/NavLinks.tsx

@@ -26,6 +26,16 @@ export const NAV_ITEMS: NavItem[] = [
     label: "票据中心",
     anyOf: ["invoice.upload", "invoice.view_own", "invoice.manage"],
   },
+  {
+    to: "/mobile/capture",
+    label: "移动拍照",
+    anyOf: ["invoice.upload", "invoice.manage"],
+  },
+  {
+    to: "/mobile/approvals",
+    label: "移动审批",
+    anyOf: ["expense.approve"],
+  },
   {
     to: "/budgets",
     label: "预算管理",
@@ -56,6 +66,11 @@ export const NAV_ITEMS: NavItem[] = [
     label: "审批规则",
     anyOf: ["system.settings"],
   },
+  {
+    to: "/system/feature-flags",
+    label: "功能开关",
+    anyOf: ["system.settings"],
+  },
   { to: "/settings/profile", label: "个人设置" },
 ];
 

client/src/main.tsx

@@ -5,8 +5,11 @@ import { BrowserRouter } from "react-router-dom";
 import { AuthProvider } from "./auth/AuthContext";
 import { queryClient } from "./query/queryClient";
 import { AppRouter } from "./router";
+import { registerPwaIfEnabled } from "./pwa";
 import "./index.css";
 
+registerPwaIfEnabled();
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>

client/src/mobile/uploadQueue.ts

@@ -0,0 +1,126 @@
+export type MobileUploadQueueItem = {
+  id: string;
+  fileName: string;
+  mimeType: string;
+  createdAt: string;
+  dataUrl: string;
+  ownerEmployeeId: string | null;
+};
+
+const DB_NAME = "hyb-oa-mobile";
+const DB_VERSION = 1;
+const STORE_NAME = "invoice_upload_queue";
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+function getDatabase() {
+  if (!dbPromise) {
+    dbPromise = new Promise((resolve, reject) => {
+      const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+      request.onupgradeneeded = () => {
+        const db = request.result;
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          db.createObjectStore(STORE_NAME, { keyPath: "id" });
+        }
+      };
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error ?? new Error("indexeddb_open_failed"));
+    });
+  }
+
+  return dbPromise;
+}
+
+function toDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        reject(new Error("file_reader_invalid_result"));
+      }
+    };
+    reader.onerror = () => reject(reader.error ?? new Error("file_reader_failed"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function fromDataUrl(dataUrl: string, fallbackFileName: string, fallbackMimeType = "application/octet-stream") {
+  const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);
+  if (!match) {
+    throw new Error("invalid_data_url");
+  }
+
+  const mimeType = match[1] || fallbackMimeType;
+  const base64 = match[2];
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+
+  return new File([bytes], fallbackFileName, { type: mimeType });
+}
+
+async function withStore<T>(mode: IDBTransactionMode, executor: (store: IDBObjectStore) => Promise<T>) {
+  const db = await getDatabase();
+
+  return new Promise<T>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, mode);
+    const store = tx.objectStore(STORE_NAME);
+
+    executor(store)
+      .then((result) => {
+        tx.oncomplete = () => resolve(result);
+        tx.onerror = () => reject(tx.error ?? new Error("indexeddb_tx_failed"));
+      })
+      .catch((error) => reject(error));
+  });
+}
+
+function requestPromise<T>(request: IDBRequest<T>) {
+  return new Promise<T>((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error ?? new Error("indexeddb_request_failed"));
+  });
+}
+
+export async function enqueueInvoiceUpload(file: File, ownerEmployeeId: string | null = null) {
+  const dataUrl = await toDataUrl(file);
+  const item: MobileUploadQueueItem = {
+    id: crypto.randomUUID(),
+    fileName: file.name,
+    mimeType: file.type || "application/octet-stream",
+    createdAt: new Date().toISOString(),
+    dataUrl,
+    ownerEmployeeId,
+  };
+
+  await withStore("readwrite", async (store) => {
+    await requestPromise(store.put(item));
+    return true;
+  });
+
+  return item;
+}
+
+export async function listQueuedInvoiceUploads() {
+  return withStore("readonly", async (store) => {
+    const records = (await requestPromise(store.getAll())) as MobileUploadQueueItem[];
+    return records.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+  });
+}
+
+export async function removeQueuedInvoiceUpload(id: string) {
+  await withStore("readwrite", async (store) => {
+    await requestPromise(store.delete(id));
+    return true;
+  });
+}
+
+export function queuedItemToFile(item: MobileUploadQueueItem) {
+  return fromDataUrl(item.dataUrl, item.fileName, item.mimeType);
+}

client/src/pages/FeatureFlagsPage.tsx

@@ -0,0 +1,351 @@
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { fetchDepartments } from "../api/departments";
+import {
+  fetchFeatureFlags,
+  updateFeatureFlag,
+  type FeatureFlagItem,
+  type FeatureFlagOverrideMode,
+  type FeatureFlagRolloutType,
+} from "../api/featureFlags";
+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 { Label } from "../components/ui/label";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
+
+const OVERRIDE_MODE_OPTIONS: Array<{ value: FeatureFlagOverrideMode; label: string }> = [
+  { value: "force_off", label: "强制关闭" },
+  { value: "inherit", label: "继承Env" },
+  { value: "force_on", label: "强制开启" },
+];
+
+const ROLLOUT_TYPE_OPTIONS: Array<{ value: FeatureFlagRolloutType; label: string }> = [
+  { value: "global", label: "全量" },
+  { value: "department_allowlist", label: "部门白名单" },
+];
+
+function toDisplayName(flagKey: string) {
+  if (flagKey === "erp_sync") return "ERP 同步";
+  if (flagKey === "invoice_verification") return "发票验真";
+  return flagKey;
+}
+
+function dedupeIds(items: string[]) {
+  return Array.from(new Set(items.filter(Boolean)));
+}
+
+type DraftState = {
+  overrideMode: FeatureFlagOverrideMode;
+  rolloutType: FeatureFlagRolloutType;
+  departmentIds: string[];
+  note: string;
+  version: number;
+};
+
+function buildDraft(item: FeatureFlagItem): DraftState {
+  return {
+    overrideMode: item.overrideMode,
+    rolloutType: item.rolloutType,
+    departmentIds: item.departmentIds,
+    note: item.note ?? "",
+    version: item.version,
+  };
+}
+
+export function FeatureFlagsPage() {
+  const queryClient = useQueryClient();
+  const [error, setError] = useState("");
+  const [drafts, setDrafts] = useState<Record<string, DraftState>>({});
+
+  const flagsQuery = useQuery({
+    queryKey: ["feature-flags"],
+    queryFn: () => fetchFeatureFlags(),
+  });
+
+  const departmentsQuery = useQuery({
+    queryKey: ["departments", "feature-flags", "active"],
+    queryFn: () => fetchDepartments({ includeArchived: false }),
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async (flagKey: string) => {
+      const draft = drafts[flagKey];
+      if (!draft) {
+        throw new Error("未找到待提交草稿");
+      }
+
+      return updateFeatureFlag(flagKey as "erp_sync" | "invoice_verification", {
+        overrideMode: draft.overrideMode,
+        rolloutType: draft.rolloutType,
+        departmentIds:
+          draft.rolloutType === "department_allowlist" ? dedupeIds(draft.departmentIds) : [],
+        note: draft.note.trim(),
+        expectedVersion: draft.version,
+      });
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["feature-flags"] });
+      setError("");
+    },
+    onError: (err) => {
+      if (isApiError(err)) {
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        return;
+      }
+      setError(err instanceof Error ? err.message : "更新开关失败");
+    },
+  });
+
+  const departmentsById = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const item of departmentsQuery.data?.items ?? []) {
+      map.set(item.id, item.name);
+    }
+    return map;
+  }, [departmentsQuery.data?.items]);
+
+  const items = flagsQuery.data?.items ?? [];
+
+  const ensureDraft = (item: FeatureFlagItem) => {
+    if (drafts[item.flagKey]) {
+      return drafts[item.flagKey];
+    }
+    return buildDraft(item);
+  };
+
+  const patchDraft = (flagKey: string, updater: (prev: DraftState) => DraftState) => {
+    setDrafts((prev) => {
+      const base = prev[flagKey];
+      const next = updater(base ?? buildDraft(items.find((item) => item.flagKey === flagKey)!));
+      return {
+        ...prev,
+        [flagKey]: next,
+      };
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="功能开关"
+        subtitle="统一治理 ERP 与验真灰度。Env 仍是硬闸，在线开关用于部门级灰度。"
+      />
+
+      {error ? (
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
+      ) : null}
+
+      <Card className="space-y-4 p-6">
+        <h3 className="text-base font-semibold text-slate-900">开关列表</h3>
+
+        {flagsQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+
+        {flagsQuery.isError ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+            {isApiError(flagsQuery.error)
+              ? `${flagsQuery.error.code}: ${mapApiErrorMessage(
+                  flagsQuery.error.code,
+                  flagsQuery.error.details,
+                  flagsQuery.error.message,
+                )}`
+              : "加载功能开关失败"}
+          </p>
+        ) : null}
+
+        {!flagsQuery.isLoading && !flagsQuery.isError ? (
+          <div className="rounded-lg border border-slate-200">
+            <Table data-testid="feature-flags-table">
+              <TableHeader>
+                <tr>
+                  <TableHead>功能</TableHead>
+                  <TableHead>当前状态</TableHead>
+                  <TableHead>覆盖策略</TableHead>
+                  <TableHead>灰度范围</TableHead>
+                  <TableHead>备注</TableHead>
+                  <TableHead className="w-40">操作</TableHead>
+                </tr>
+              </TableHeader>
+              <TableBody>
+                {items.map((item) => {
+                  const draft = ensureDraft(item);
+                  const isPending = updateMutation.isPending && updateMutation.variables === item.flagKey;
+
+                  return (
+                    <TableRow key={item.flagKey} data-testid={`feature-flag-row-${item.flagKey}`}>
+                      <TableCell>
+                        <div className="font-medium text-slate-900">{toDisplayName(item.flagKey)}</div>
+                        <div className="font-mono text-xs text-slate-500">{item.flagKey}</div>
+                      </TableCell>
+
+                      <TableCell className="text-sm">
+                        <div>
+                          Env：
+                          <span className={item.envEnabled ? "text-emerald-600" : "text-red-600"}>
+                            {item.envEnabled ? "ON" : "OFF"}
+                          </span>
+                        </div>
+                        <div>
+                          Effective：
+                          <span className={item.effectiveEnabled ? "text-emerald-600" : "text-red-600"}>
+                            {item.effectiveEnabled ? "ON" : "OFF"}
+                          </span>
+                        </div>
+                        <div className="text-xs text-slate-500">reason: {item.effectiveReason}</div>
+                      </TableCell>
+
+                      <TableCell className="space-y-2 text-sm">
+                        <div>
+                          <Label className="mb-1 block text-xs text-slate-500">override</Label>
+                          <select
+                            className="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+                            value={draft.overrideMode}
+                            onChange={(event) =>
+                              patchDraft(item.flagKey, (prev) => ({
+                                ...prev,
+                                overrideMode: event.target.value as FeatureFlagOverrideMode,
+                              }))
+                            }
+                          >
+                            {OVERRIDE_MODE_OPTIONS.map((option) => (
+                              <option key={option.value} value={option.value}>
+                                {option.label}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+
+                        <div>
+                          <Label className="mb-1 block text-xs text-slate-500">rollout</Label>
+                          <select
+                            className="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+                            value={draft.rolloutType}
+                            onChange={(event) =>
+                              patchDraft(item.flagKey, (prev) => ({
+                                ...prev,
+                                rolloutType: event.target.value as FeatureFlagRolloutType,
+                                departmentIds:
+                                  event.target.value === "department_allowlist"
+                                    ? prev.departmentIds
+                                    : [],
+                              }))
+                            }
+                          >
+                            {ROLLOUT_TYPE_OPTIONS.map((option) => (
+                              <option key={option.value} value={option.value}>
+                                {option.label}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+                      </TableCell>
+
+                      <TableCell className="text-sm">
+                        {draft.rolloutType === "department_allowlist" ? (
+                          <div className="space-y-2">
+                            <select
+                              className="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+                              value=""
+                              onChange={(event) => {
+                                const selected = event.target.value;
+                                if (!selected) return;
+                                patchDraft(item.flagKey, (prev) => ({
+                                  ...prev,
+                                  departmentIds: dedupeIds([...prev.departmentIds, selected]),
+                                }));
+                              }}
+                            >
+                              <option value="">添加部门</option>
+                              {(departmentsQuery.data?.items ?? []).map((department) => (
+                                <option key={department.id} value={department.id}>
+                                  {department.name}
+                                </option>
+                              ))}
+                            </select>
+
+                            <div className="max-h-24 overflow-auto rounded border border-slate-200 p-2 text-xs">
+                              {draft.departmentIds.length ? (
+                                draft.departmentIds.map((departmentId) => (
+                                  <div
+                                    key={departmentId}
+                                    className="mb-1 flex items-center justify-between rounded bg-slate-50 px-2 py-1"
+                                  >
+                                    <span>{departmentsById.get(departmentId) ?? departmentId}</span>
+                                    <button
+                                      className="text-red-600"
+                                      type="button"
+                                      onClick={() =>
+                                        patchDraft(item.flagKey, (prev) => ({
+                                          ...prev,
+                                          departmentIds: prev.departmentIds.filter((id) => id !== departmentId),
+                                        }))
+                                      }
+                                    >
+                                      移除
+                                    </button>
+                                  </div>
+                                ))
+                              ) : (
+                                <p className="text-slate-500">暂无白名单部门</p>
+                              )}
+                            </div>
+                          </div>
+                        ) : (
+                          <span className="text-slate-500">全量</span>
+                        )}
+                      </TableCell>
+
+                      <TableCell>
+                        <textarea
+                          className="min-h-24 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+                          placeholder="填写本次变更说明"
+                          value={draft.note}
+                          onChange={(event) =>
+                            patchDraft(item.flagKey, (prev) => ({
+                              ...prev,
+                              note: event.target.value,
+                            }))
+                          }
+                        />
+                        <p className="mt-1 text-xs text-slate-500">version: {draft.version}</p>
+                      </TableCell>
+
+                      <TableCell>
+                        <div className="space-y-2">
+                          <Button
+                            data-testid={`feature-flag-save-${item.flagKey}`}
+                            disabled={isPending}
+                            onClick={() => updateMutation.mutate(item.flagKey)}
+                            type="button"
+                          >
+                            {isPending ? "保存中..." : "保存"}
+                          </Button>
+
+                          <Button
+                            data-testid={`feature-flag-reset-${item.flagKey}`}
+                            variant="secondary"
+                            type="button"
+                            onClick={() =>
+                              setDrafts((prev) => ({
+                                ...prev,
+                                [item.flagKey]: buildDraft(item),
+                              }))
+                            }
+                          >
+                            重置
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        ) : null}
+      </Card>
+    </div>
+  );
+}

client/src/pages/MobileApprovalsPage.tsx

@@ -0,0 +1,235 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { isApiError } from "../api/types";
+import {
+  approveWorkflowTask,
+  fetchWorkflowApprovers,
+  fetchWorkflowTaskDetail,
+  fetchWorkflowTasks,
+  rejectWorkflowTask,
+  returnWorkflowTask,
+  transferWorkflowTask,
+} from "../api/workflow";
+import { PageHeader } from "../components/common/PageHeader";
+import { Button } from "../components/ui/button";
+import { Card } from "../components/ui/card";
+import { Textarea } from "../components/ui/textarea";
+
+type MobileAction = "approve" | "reject" | "return" | "transfer";
+
+export function MobileApprovalsPage() {
+  const queryClient = useQueryClient();
+  const [selectedTaskId, setSelectedTaskId] = useState("");
+  const [error, setError] = useState("");
+  const [comment, setComment] = useState("");
+  const [transferToApproverId, setTransferToApproverId] = useState("");
+  const [transferReason, setTransferReason] = useState("");
+
+  const tasksQuery = useQuery({
+    queryKey: ["mobile", "workflow", "tasks"],
+    queryFn: () => fetchWorkflowTasks({ status: "pending", page: 1, pageSize: 30 }),
+  });
+
+  const detailQuery = useQuery({
+    enabled: Boolean(selectedTaskId),
+    queryKey: ["mobile", "workflow", "task-detail", selectedTaskId],
+    queryFn: () => fetchWorkflowTaskDetail(selectedTaskId),
+  });
+
+  const approversQuery = useQuery({
+    enabled: detailQuery.data?.allowedActions?.includes("transfer") ?? false,
+    queryKey: ["mobile", "workflow", "approvers"],
+    queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
+  });
+
+  const actionMutation = useMutation({
+    mutationFn: async (action: MobileAction) => {
+      if (!selectedTaskId) {
+        throw new Error("请选择任务");
+      }
+
+      if (action === "approve") {
+        return approveWorkflowTask(selectedTaskId);
+      }
+
+      if (action === "reject") {
+        if (!comment.trim()) {
+          throw new Error("驳回必须填写意见");
+        }
+        return rejectWorkflowTask(selectedTaskId, comment.trim());
+      }
+
+      if (action === "return") {
+        if (!comment.trim()) {
+          throw new Error("退回必须填写意见");
+        }
+        return returnWorkflowTask(selectedTaskId, comment.trim());
+      }
+
+      if (!transferToApproverId) {
+        throw new Error("请选择转审目标审批人");
+      }
+      if (transferReason.trim().length < 10) {
+        throw new Error("转审理由至少 10 个字");
+      }
+
+      return transferWorkflowTask(selectedTaskId, transferToApproverId, transferReason.trim());
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "tasks"] }),
+        queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-detail", selectedTaskId] }),
+      ]);
+      setComment("");
+      setTransferReason("");
+      setTransferToApproverId("");
+      setError("");
+    },
+    onError: (err) => {
+      if (isApiError(err)) {
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        return;
+      }
+
+      setError(err instanceof Error ? err.message : "动作执行失败");
+    },
+  });
+
+  const pendingTasks = tasksQuery.data?.items ?? [];
+  const selectedTask = detailQuery.data;
+
+  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}
+
+      <Card className="space-y-3 p-4" data-testid="mobile-approvals-list">
+        <h3 className="text-base font-semibold text-slate-900">待办任务</h3>
+
+        {tasksQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+
+        {!tasksQuery.isLoading && pendingTasks.length === 0 ? (
+          <p className="text-sm text-slate-500">暂无待办任务。</p>
+        ) : null}
+
+        <div className="space-y-2">
+          {pendingTasks.map((task) => (
+            <button
+              key={task.id}
+              className={`w-full rounded-lg border px-3 py-2 text-left text-sm ${
+                selectedTaskId === task.id
+                  ? "border-primary bg-primary-50 text-primary"
+                  : "border-slate-200 bg-white text-slate-800"
+              }`}
+              data-testid={`mobile-approvals-task-${task.id}`}
+              onClick={() => setSelectedTaskId(task.id)}
+              type="button"
+            >
+              <div className="font-medium">{task.stepName}</div>
+              <div className="text-xs text-slate-500">任务ID: {task.id}</div>
+              <div className="text-xs text-slate-500">状态: {task.status}</div>
+            </button>
+          ))}
+        </div>
+      </Card>
+
+      <Card className="space-y-3 p-4" data-testid="mobile-approvals-detail">
+        <h3 className="text-base font-semibold text-slate-900">任务详情与动作</h3>
+
+        {!selectedTaskId ? <p className="text-sm text-slate-500">请先选择任务。</p> : null}
+
+        {selectedTaskId && detailQuery.isLoading ? (
+          <p className="text-sm text-slate-500">加载任务详情中...</p>
+        ) : null}
+
+        {selectedTask && (
+          <>
+            <div className="rounded-lg border border-slate-200 p-3 text-sm">
+              <div>任务状态：{selectedTask.task.status}</div>
+              <div>步骤：{selectedTask.task.stepName}</div>
+              <div>报销单号：{selectedTask.reimbursement?.formNumber ?? "-"}</div>
+              <div>金额：{selectedTask.reimbursement?.totalAmount ?? "-"}</div>
+              <div>提交人：{selectedTask.reimbursement?.submitter?.name ?? "-"}</div>
+            </div>
+
+            <Textarea
+              data-testid="mobile-approvals-comment"
+              onChange={(event) => setComment(event.target.value)}
+              placeholder="驳回/退回意见"
+              rows={3}
+              value={comment}
+            />
+
+            <div className="flex flex-wrap gap-2">
+              <Button
+                data-testid="mobile-approvals-approve"
+                disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("approve")}
+                onClick={() => actionMutation.mutate("approve")}
+                type="button"
+              >
+                通过
+              </Button>
+              <Button
+                data-testid="mobile-approvals-reject"
+                disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("reject")}
+                onClick={() => actionMutation.mutate("reject")}
+                type="button"
+                variant="secondary"
+              >
+                驳回
+              </Button>
+              <Button
+                data-testid="mobile-approvals-return"
+                disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("return")}
+                onClick={() => actionMutation.mutate("return")}
+                type="button"
+                variant="secondary"
+              >
+                退回
+              </Button>
+            </div>
+
+            <div className="space-y-2 rounded-lg border border-slate-200 p-3 text-sm">
+              <p className="font-medium text-slate-800">转审</p>
+              <select
+                className="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+                data-testid="mobile-approvals-transfer-to"
+                onChange={(event) => setTransferToApproverId(event.target.value)}
+                value={transferToApproverId}
+              >
+                <option value="">请选择目标审批人</option>
+                {(approversQuery.data?.items ?? []).map((approver) => (
+                  <option key={approver.id} value={approver.id}>
+                    {approver.name} ({approver.employeeNo})
+                  </option>
+                ))}
+              </select>
+
+              <Textarea
+                data-testid="mobile-approvals-transfer-reason"
+                onChange={(event) => setTransferReason(event.target.value)}
+                placeholder="转审理由（至少10字）"
+                rows={2}
+                value={transferReason}
+              />
+
+              <Button
+                data-testid="mobile-approvals-transfer"
+                disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("transfer")}
+                onClick={() => actionMutation.mutate("transfer")}
+                type="button"
+                variant="secondary"
+              >
+                提交转审
+              </Button>
+            </div>
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}

client/src/pages/MobileCapturePage.tsx

@@ -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>
+  );
+}

client/src/pwa.ts

@@ -0,0 +1,20 @@
+import { registerSW } from "virtual:pwa-register";
+
+export function registerPwaIfEnabled() {
+  if (import.meta.env.DEV) {
+    return;
+  }
+
+  if (import.meta.env.VITE_PWA_ENABLED === "false") {
+    return;
+  }
+
+  registerSW({
+    immediate: true,
+    onOfflineReady() {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("hyb-oa:pwa-offline-ready"));
+      }
+    },
+  });
+}

client/src/router/index.tsx

@@ -3,12 +3,15 @@ import { AppShellLayout } from "../layouts/AppShellLayout";
 import { AuthLayout } from "../layouts/AuthLayout";
 import { AuditLogsPage } from "../pages/AuditLogsPage";
 import { ApprovalRulesPage } from "../pages/ApprovalRulesPage";
+import { FeatureFlagsPage } from "../pages/FeatureFlagsPage";
 import { ChangePasswordPage } from "../pages/ChangePasswordPage";
 import { BudgetsPage } from "../pages/BudgetsPage";
 import { DashboardPage } from "../pages/DashboardPage";
 import { DepartmentsPage } from "../pages/DepartmentsPage";
 import { DelegationsPage } from "../pages/DelegationsPage";
 import { ForbiddenPage } from "../pages/ForbiddenPage";
+import { MobileApprovalsPage } from "../pages/MobileApprovalsPage";
+import { MobileCapturePage } from "../pages/MobileCapturePage";
 import { InvoicePoolPage } from "../pages/InvoicePoolPage";
 import { LoginPage } from "../pages/LoginPage";
 import { NotificationsPage } from "../pages/NotificationsPage";
@@ -111,6 +114,24 @@ export function AppRouter() {
           }
         />
 
+        <Route
+          path="mobile/capture"
+          element={
+            <RequirePermission anyOf={["invoice.upload", "invoice.manage"]}>
+              <MobileCapturePage />
+            </RequirePermission>
+          }
+        />
+
+        <Route
+          path="mobile/approvals"
+          element={
+            <RequirePermission anyOf={["expense.approve"]}>
+              <MobileApprovalsPage />
+            </RequirePermission>
+          }
+        />
+
         <Route path="notifications" element={<NotificationsPage />} />
 
         <Route
@@ -158,6 +179,15 @@ export function AppRouter() {
           }
         />
 
+        <Route
+          path="system/feature-flags"
+          element={
+            <RequirePermission anyOf={["system.settings"]}>
+              <FeatureFlagsPage />
+            </RequirePermission>
+          }
+        />
+
         <Route path="settings/profile" element={<ProfilePage />} />
       </Route>
 

client/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />