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

@@ -1,17 +1,192 @@
-import { EmptyStateCard } from "../components/common/EmptyStateCard";
+import { Link, useSearchParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { isApiError } from "../api/types";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { createReimbursement, fetchReimbursements, type ReimbursementStatus } from "../api/reimbursements";
+import { useAuth } from "../auth/AuthContext";
+import { hasPermission } from "../auth/permissions";
 import { PageHeader } from "../components/common/PageHeader";
 
+const PAGE_SIZE = 20;
+
 export function ReimbursementsPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { permissions } = useAuth();
+  const queryClient = useQueryClient();
+
+  const status = (searchParams.get("status") as ReimbursementStatus | null) ?? "draft";
+  const page = Number(searchParams.get("page") ?? "1") || 1;
+  const scope = (searchParams.get("scope") as "own" | "all" | null) ?? "own";
+  const canViewAll = hasPermission(permissions, "expense.view_all");
+
+  const listQuery = useQuery({
+    queryKey: ["reimbursements", "list", status, page, scope],
+    queryFn: () => fetchReimbursements({ status, page, pageSize: PAGE_SIZE, scope }),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: () => createReimbursement({}),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["reimbursements"] });
+    },
+  });
+
+  const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
+
   return (
-    <div>
+    <div className="space-y-6">
       <PageHeader
         title="我的报销"
-        subtitle="此页面已完成路由、鉴权与菜单接入，后续将接入真实列表数据。"
-      />
-      <EmptyStateCard
-        title="功能建设中"
-        description="后续迭代将实现报销列表、筛选、详情与提交能力。"
+        subtitle="报销列表、详情与提交/撤回/支付动作入口。"
+        actions={
+          <button
+            className="btn-primary"
+            disabled={createMutation.isPending}
+            onClick={() => createMutation.mutate()}
+            type="button"
+          >
+            {createMutation.isPending ? "创建中..." : "新建报销"}
+          </button>
+        }
       />
+
+      {createMutation.error && isApiError(createMutation.error) ? (
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+          {createMutation.error.code}:
+          {mapApiErrorMessage(
+            createMutation.error.code,
+            createMutation.error.details,
+            createMutation.error.message,
+          )}
+        </p>
+      ) : null}
+
+      <section className="card-std space-y-4">
+        <div className="flex flex-wrap items-center gap-2">
+          {[
+            { value: "draft", label: "草稿" },
+            { value: "reviewing", label: "审批中" },
+            { value: "approved", label: "已通过" },
+            { value: "paid", label: "已支付" },
+            { value: "rejected", label: "已驳回" },
+            { value: "cancelled", label: "已取消" },
+          ].map((item) => (
+            <button
+              className={status === item.value ? "btn-primary" : "btn-secondary"}
+              key={item.value}
+              onClick={() => setSearchParams({ status: item.value, page: "1", scope })}
+              type="button"
+            >
+              {item.label}
+            </button>
+          ))}
+
+          {canViewAll ? (
+            <>
+              <button
+                className={scope === "own" ? "btn-primary" : "btn-secondary"}
+                onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
+                type="button"
+              >
+                仅自己
+              </button>
+              <button
+                className={scope === "all" ? "btn-primary" : "btn-secondary"}
+                onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
+                type="button"
+              >
+                全范围
+              </button>
+            </>
+          ) : null}
+        </div>
+
+        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+
+        {listQuery.isError ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+            {isApiError(listQuery.error)
+              ? `${listQuery.error.code}: ${mapApiErrorMessage(
+                  listQuery.error.code,
+                  listQuery.error.details,
+                  listQuery.error.message,
+                )}`
+              : "加载报销列表失败"}
+          </p>
+        ) : null}
+
+        {!listQuery.isLoading && !listQuery.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">状态</th>
+                  <th className="px-3 py-2">金额</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>
+                {(listQuery.data?.items ?? []).length ? (
+                  listQuery.data?.items.map((item) => (
+                    <tr className="border-t border-slate-100" key={item.id}>
+                      <td className="px-3 py-2">
+                        <div className="font-medium text-slate-900">{item.formNumber ?? item.id}</div>
+                        <div className="text-xs text-slate-500">{item.id}</div>
+                      </td>
+                      <td className="px-3 py-2">{item.status}</td>
+                      <td className="px-3 py-2">{item.totalAmount ?? "-"}</td>
+                      <td className="px-3 py-2">{item.owner?.name ?? "-"}</td>
+                      <td className="px-3 py-2">{item.reimbursementDate ?? "-"}</td>
+                      <td className="px-3 py-2">
+                        <Link className="btn-secondary" to={`/reimbursements/${item.id}`}>
+                          详情
+                        </Link>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td className="px-3 py-3 text-slate-500" colSpan={6}>
+                      暂无数据
+                    </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, scope, page: String(Math.max(1, page - 1)) })
+              }
+              type="button"
+            >
+              上一页
+            </button>
+            <button
+              className="btn-secondary"
+              disabled={page >= totalPages}
+              onClick={() =>
+                setSearchParams({ status, scope, page: String(Math.min(totalPages, page + 1)) })
+              }
+              type="button"
+            >
+              下一页
+            </button>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }