feat(client): 完成 P3 业务页联动闭环（D6/D8/D10/D11）

- 待办：列表/详情 + approve/reject/return/transfer（D6）
- 报销：列表/详情 + create/submit/withdraw/pay（D8）
- 票据：列表/上传/OCR轮询/绑定/预览（D10）
- 统一：Api types + 错误映射 + react-query缓存失效（D11）

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -0,0 +1,262 @@
+import { useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { isApiError } from "../api/types";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import {
+  approveWorkflowTask,
+  fetchWorkflowApprovers,
+  fetchWorkflowTaskDetail,
+  rejectWorkflowTask,
+  returnWorkflowTask,
+  transferWorkflowTask,
+} from "../api/workflow";
+import { useAuth } from "../auth/AuthContext";
+import { hasPermission } from "../auth/permissions";
+import { PageHeader } from "../components/common/PageHeader";
+
+export function WorkflowTaskDetailPage() {
+  const { taskId = "" } = useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { permissions } = useAuth();
+
+  const [rejectComment, setRejectComment] = useState("请补充必要说明后重提");
+  const [returnComment, setReturnComment] = useState("请补充报销说明并修正后重新提交");
+  const [transferReason, setTransferReason] = useState("当前事项需转交对应审批人处理，请尽快处理。");
+  const [selectedApprover, setSelectedApprover] = useState("");
+  const [actionError, setActionError] = useState("");
+
+  const detailQuery = useQuery({
+    enabled: Boolean(taskId),
+    queryKey: ["workflow", "task", taskId],
+    queryFn: () => fetchWorkflowTaskDetail(taskId),
+  });
+
+  const approverQuery = useQuery({
+    enabled: hasPermission(permissions, "expense.transfer"),
+    queryKey: ["workflow", "approvers"],
+    queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 50 }),
+  });
+
+  const allowedActions = useMemo(() => {
+    return new Set(detailQuery.data?.allowedActions ?? []);
+  }, [detailQuery.data?.allowedActions]);
+
+  const mutation = useMutation({
+    mutationFn: async (action: "approve" | "reject" | "return" | "transfer") => {
+      if (!taskId) {
+        throw new Error("missing taskId");
+      }
+
+      if (action === "approve") {
+        return approveWorkflowTask(taskId);
+      }
+
+      if (action === "reject") {
+        return rejectWorkflowTask(taskId, rejectComment.trim());
+      }
+
+      if (action === "return") {
+        return returnWorkflowTask(taskId, returnComment.trim());
+      }
+
+      if (!selectedApprover) {
+        throw new Error("请选择转审目标");
+      }
+
+      return transferWorkflowTask(taskId, selectedApprover, transferReason.trim());
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["workflow", "tasks"] }),
+        queryClient.invalidateQueries({ queryKey: ["workflow", "task", taskId] }),
+      ]);
+      setActionError("");
+    },
+    onError: (error) => {
+      if (error instanceof Error && !isApiError(error)) {
+        setActionError(error.message);
+        return;
+      }
+
+      if (isApiError(error)) {
+        setActionError(
+          `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`,
+        );
+        return;
+      }
+
+      setActionError("动作执行失败，请稍后重试");
+    },
+  });
+
+  if (!taskId) {
+    return (
+      <section className="card-std">
+        <p className="text-sm text-red-600">缺少 taskId 参数。</p>
+      </section>
+    );
+  }
+
+  if (detailQuery.isLoading) {
+    return (
+      <section className="card-std">
+        <p className="text-sm text-slate-500">加载任务详情中...</p>
+      </section>
+    );
+  }
+
+  if (detailQuery.isError || !detailQuery.data) {
+    const message = isApiError(detailQuery.error)
+      ? `${detailQuery.error.code}: ${mapApiErrorMessage(
+          detailQuery.error.code,
+          detailQuery.error.details,
+          detailQuery.error.message,
+        )}`
+      : "加载失败，请返回列表重试";
+
+    return (
+      <section className="card-std space-y-3">
+        <p className="text-sm text-red-600">{message}</p>
+        <button className="btn-secondary" onClick={() => navigate("/workflow/tasks")}>返回待办列表</button>
+      </section>
+    );
+  }
+
+  const detail = detailQuery.data;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={`任务详情 ${detail.task.stepName}`}
+        subtitle={`任务ID: ${detail.task.id}`}
+        actions={
+          <Link className="btn-secondary" to="/workflow/tasks">
+            返回待办列表
+          </Link>
+        }
+      />
+
+      <section className="card-std space-y-2 text-sm">
+        <div>状态：{detail.task.status}</div>
+        <div>实例：{detail.workflowInstance?.id ?? "-"}</div>
+        <div>报销单号：{detail.reimbursement?.formNumber ?? "-"}</div>
+        <div>报销金额：{detail.reimbursement?.totalAmount ?? "-"}</div>
+        <div>提交人：{detail.reimbursement?.submitter?.name ?? "-"}</div>
+        <div>报销人：{detail.reimbursement?.owner?.name ?? "-"}</div>
+      </section>
+
+      <section className="card-std space-y-3">
+        <h3 className="text-base font-semibold text-slate-900">审批动作</h3>
+
+        {actionError ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+            {actionError}
+          </p>
+        ) : null}
+
+        <div className="flex flex-wrap gap-2">
+          <button
+            className="btn-primary"
+            disabled={!allowedActions.has("approve") || mutation.isPending}
+            onClick={() => mutation.mutate("approve")}
+            type="button"
+          >
+            通过
+          </button>
+        </div>
+
+        <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+          <p className="text-sm font-medium text-slate-800">驳回</p>
+          <textarea
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            onChange={(event) => setRejectComment(event.target.value)}
+            rows={2}
+            value={rejectComment}
+          />
+          <button
+            className="btn-secondary"
+            disabled={!allowedActions.has("reject") || mutation.isPending || rejectComment.trim().length < 1}
+            onClick={() => mutation.mutate("reject")}
+            type="button"
+          >
+            提交驳回
+          </button>
+        </div>
+
+        <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+          <p className="text-sm font-medium text-slate-800">退回</p>
+          <textarea
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            onChange={(event) => setReturnComment(event.target.value)}
+            rows={2}
+            value={returnComment}
+          />
+          <button
+            className="btn-secondary"
+            disabled={!allowedActions.has("return") || mutation.isPending || returnComment.trim().length < 1}
+            onClick={() => mutation.mutate("return")}
+            type="button"
+          >
+            提交退回
+          </button>
+        </div>
+
+        <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+          <p className="text-sm font-medium text-slate-800">转审</p>
+          <select
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            onChange={(event) => setSelectedApprover(event.target.value)}
+            value={selectedApprover}
+          >
+            <option value="">请选择目标审批人</option>
+            {(approverQuery.data?.items ?? []).map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.name} ({item.employeeNo})
+              </option>
+            ))}
+          </select>
+          <textarea
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            onChange={(event) => setTransferReason(event.target.value)}
+            rows={2}
+            value={transferReason}
+          />
+          <button
+            className="btn-secondary"
+            disabled={
+              !allowedActions.has("transfer") ||
+              mutation.isPending ||
+              !selectedApprover ||
+              transferReason.trim().length < 10
+            }
+            onClick={() => mutation.mutate("transfer")}
+            type="button"
+          >
+            提交转审
+          </button>
+        </div>
+      </section>
+
+      <section className="card-std space-y-3">
+        <h3 className="text-base font-semibold text-slate-900">处理历史</h3>
+        <div className="space-y-2">
+          {detail.history.length ? (
+            detail.history.map((item) => (
+              <div className="rounded-lg border border-slate-200 px-3 py-2 text-sm" key={item.id}>
+                <div className="font-medium text-slate-900">
+                  {item.action} · {item.actorName || item.actorId}
+                </div>
+                <div className="text-slate-600">{item.comment || "-"}</div>
+                <div className="text-xs text-slate-500">{item.createdAt || "-"}</div>
+              </div>
+            ))
+          ) : (
+            <p className="text-sm text-slate-500">暂无历史记录</p>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}