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/WorkflowTasksPage.tsx

@@ -1,17 +1,140 @@
-import { EmptyStateCard } from "../components/common/EmptyStateCard";
+import { Link, useSearchParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { isApiError } from "../api/types";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { fetchWorkflowTasks } from "../api/workflow";
 import { PageHeader } from "../components/common/PageHeader";
 
+const PAGE_SIZE = 20;
+
 export function WorkflowTasksPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const status =
+    (searchParams.get("status") as
+      | "pending"
+      | "completed"
+      | "rejected"
+      | "cancelled"
+      | "skipped"
+      | null) ?? "pending";
+  const page = Number(searchParams.get("page") ?? "1") || 1;
+
+  const query = useQuery({
+    queryKey: ["workflow", "tasks", status, page],
+    queryFn: () => fetchWorkflowTasks({ status, page, pageSize: PAGE_SIZE }),
+  });
+
+  const totalPages = Math.max(1, Math.ceil((query.data?.total ?? 0) / PAGE_SIZE));
+
   return (
-    <div>
-      <PageHeader
-        title="待我处理"
-        subtitle="此页面需要 expense.approve 权限，当前用于壳层联调与权限验证。"
-      />
-      <EmptyStateCard
-        title="功能建设中"
-        description="后续迭代将接入待办任务列表与 approve/reject/return/transfer 动作。"
-      />
+    <div className="space-y-6">
+      <PageHeader title="待我处理" subtitle="审批待办列表（支持筛选与详情动作联动）。" />
+
+      <section className="card-std space-y-4">
+        <div className="flex flex-wrap items-center gap-2">
+          {[
+            { value: "pending", label: "待处理" },
+            { value: "completed", label: "已通过" },
+            { value: "rejected", label: "已驳回" },
+            { value: "cancelled", label: "已取消" },
+            { value: "skipped", label: "已跳过" },
+          ].map((item) => (
+            <button
+              className={status === item.value ? "btn-primary" : "btn-secondary"}
+              key={item.value}
+              onClick={() => {
+                setSearchParams({ status: item.value, page: "1" });
+              }}
+              type="button"
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+
+        {query.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+
+        {query.isError ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+            {isApiError(query.error)
+              ? `${query.error.code}: ${mapApiErrorMessage(
+                  query.error.code,
+                  query.error.details,
+                  query.error.message,
+                )}`
+              : "加载待办失败，请稍后重试"}
+          </p>
+        ) : null}
+
+        {!query.isLoading && !query.isError ? (
+          <div className="overflow-x-auto rounded-lg border border-slate-200">
+            <table className="min-w-full text-left text-sm">
+              <thead className="bg-slate-50 text-slate-600">
+                <tr>
+                  <th className="px-3 py-2">任务</th>
+                  <th className="px-3 py-2">报销ID</th>
+                  <th className="px-3 py-2">状态</th>
+                  <th className="px-3 py-2">创建时间</th>
+                  <th className="px-3 py-2">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(query.data?.items ?? []).length ? (
+                  query.data?.items.map((task) => (
+                    <tr className="border-t border-slate-100" key={task.id}>
+                      <td className="px-3 py-2">
+                        <div className="font-medium text-slate-900">{task.stepName}</div>
+                        <div className="text-xs text-slate-500">{task.id}</div>
+                      </td>
+                      <td className="px-3 py-2 font-mono text-xs">{task.workflowInstance?.entityId}</td>
+                      <td className="px-3 py-2">{task.status}</td>
+                      <td className="px-3 py-2">{new Date(task.createdAt).toLocaleString()}</td>
+                      <td className="px-3 py-2">
+                        <Link className="btn-secondary" to={`/workflow/tasks/${task.id}`}>
+                          详情
+                        </Link>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td className="px-3 py-3 text-slate-500" colSpan={5}>
+                      暂无数据
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        ) : null}
+
+        <div className="flex items-center justify-between text-sm">
+          <span>
+            第 {page} / {totalPages} 页
+          </span>
+          <div className="flex gap-2">
+            <button
+              className="btn-secondary"
+              disabled={page <= 1}
+              onClick={() => setSearchParams({ status, page: String(Math.max(1, page - 1)) })}
+              type="button"
+            >
+              上一页
+            </button>
+            <button
+              className="btn-secondary"
+              disabled={page >= totalPages}
+              onClick={() =>
+                setSearchParams({ status, page: String(Math.min(totalPages, page + 1)) })
+              }
+              type="button"
+            >
+              下一页
+            </button>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }