From dc0feb60b24b02b1a02b66fd9806e6794ccd6dc5 Mon Sep 17 00:00:00 2001
From: shunli <shunli@qq.com>
Date: Thu, 5 Mar 2026 18:38:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E6=8F=90=E5=8F=96=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=8E=9F=E7=94=9F=E7=BB=84=E4=BB=B6=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BF=AE=E5=A4=8D=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E8=BE=B9=E8=B7=9Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/invoice-pool/InvoiceBindCard.tsx    |  69 ++++
 .../pages/invoice-pool/InvoiceDetailPanel.tsx | 375 ++++++++++++++++++
 .../pages/invoice-pool/InvoiceListCard.tsx    | 144 +++++++
 .../pages/invoice-pool/InvoiceUploadCard.tsx  |  73 ++++
 4 files changed, 661 insertions(+)
 create mode 100644 client/src/pages/invoice-pool/InvoiceBindCard.tsx
 create mode 100644 client/src/pages/invoice-pool/InvoiceDetailPanel.tsx
 create mode 100644 client/src/pages/invoice-pool/InvoiceListCard.tsx
 create mode 100644 client/src/pages/invoice-pool/InvoiceUploadCard.tsx

diff --git a/client/src/pages/invoice-pool/InvoiceBindCard.tsx b/client/src/pages/invoice-pool/InvoiceBindCard.tsx
new file mode 100644
index 00000000..c75a62a2
--- /dev/null
+++ b/client/src/pages/invoice-pool/InvoiceBindCard.tsx
@@ -0,0 +1,69 @@
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
+import type { InvoicePoolListResponse } from "../../api/invoicePool";
+import type { ReimbursementListResponse } from "../../api/reimbursements";
+import { Button } from "../../components/ui/button";
+
+export type InvoiceBindCardProps = {
+  listQuery: UseQueryResult<InvoicePoolListResponse, Error>;
+  reimbursementQuery: UseQueryResult<ReimbursementListResponse, Error>;
+  bindMutation: UseMutationResult<Record<string, unknown>, Error, void>;
+  selectedInvoiceId: string;
+  setSelectedInvoiceId: (id: string) => void;
+  selectedReimbursementId: string;
+  setSelectedReimbursementId: (id: string) => void;
+};
+
+export function InvoiceBindCard({
+  listQuery,
+  reimbursementQuery,
+  bindMutation,
+  selectedInvoiceId,
+  setSelectedInvoiceId,
+  selectedReimbursementId,
+  setSelectedReimbursementId,
+}: InvoiceBindCardProps) {
+  return (
+    <div className="card-std space-y-4">
+      <h3 className="card-title">绑定报销</h3>
+      <select
+        className="select-std"
+        data-testid="invoice-bind-invoice"
+        onChange={(event) => setSelectedInvoiceId(event.target.value)}
+        value={selectedInvoiceId}
+      >
+        <option value="">选择票据</option>
+        {(listQuery.data?.items ?? []).map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.invoiceCode ? `${item.invoiceCode}-${item.invoiceNumber}` : item.id.substring(0, 8)} ({item.status})
+          </option>
+        ))}
+      </select>
+
+      <select
+        className="select-std"
+        data-testid="invoice-bind-reimbursement"
+        onChange={(event) => setSelectedReimbursementId(event.target.value)}
+        value={selectedReimbursementId}
+      >
+        <option value="">选择报销单</option>
+        {(reimbursementQuery.data?.items ?? []).map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.formNumber ?? item.id} ({item.status})
+          </option>
+        ))}
+      </select>
+
+      <div className="pt-2">
+        <Button
+          data-testid="invoice-bind-submit"
+          className="btn-primary"
+          disabled={bindMutation.isPending || !selectedInvoiceId || !selectedReimbursementId}
+          onClick={() => bindMutation.mutate()}
+          type="button"
+        >
+          {bindMutation.isPending ? "绑定中..." : "绑定票据"}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/invoice-pool/InvoiceDetailPanel.tsx b/client/src/pages/invoice-pool/InvoiceDetailPanel.tsx
new file mode 100644
index 00000000..a16399ff
--- /dev/null
+++ b/client/src/pages/invoice-pool/InvoiceDetailPanel.tsx
@@ -0,0 +1,375 @@
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
+import type { InvoicePoolDetail, InvoiceVerificationRecord } from "../../api/invoicePool";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
+import { Button } from "../../components/ui/button";
+
+export type InvoiceDetailPanelProps = {
+  detail: InvoicePoolDetail | undefined;
+  detailQuery: UseQueryResult<InvoicePoolDetail, Error>;
+  canEditDetail: boolean;
+  canVerifyInvoice: boolean;
+  canUploadInvoice: boolean;
+  canOverrideDuplicate: boolean;
+  patchMutation: UseMutationResult<InvoicePoolDetail, Error, void>;
+  archiveMutation: UseMutationResult<InvoicePoolDetail, Error, string>;
+  unbindMutation: UseMutationResult<InvoicePoolDetail, Error, string>;
+  retryOcrMutation: UseMutationResult<InvoicePoolDetail, Error, string>;
+  triggerVerificationMutation: UseMutationResult<{ invoiceId: string; verificationId: string; provider: string; triggerMode: string }, Error, string>;
+  retryVerificationMutation: UseMutationResult<{ invoiceId: string; verificationId: string; status: string }, Error, string>;
+  overrideDuplicateMutation: UseMutationResult<InvoicePoolDetail, Error, { invoiceId: string; refFormNumber: string; reason: string }>;
+  verificationQuery: UseQueryResult<{ invoiceId: string; items: InvoiceVerificationRecord[] }, Error>;
+  editOpen: boolean;
+  setEditOpen: (open: boolean) => void;
+  editSetAvailable: boolean;
+  setEditSetAvailable: (value: boolean) => void;
+  editRemarks: string;
+  setEditRemarks: (value: string) => void;
+  editInvoiceCode: string;
+  setEditInvoiceCode: (value: string) => void;
+  editInvoiceNumber: string;
+  setEditInvoiceNumber: (value: string) => void;
+  editInvoiceDate: string;
+  setEditInvoiceDate: (value: string) => void;
+  editTotalAmount: string;
+  setEditTotalAmount: (value: string) => void;
+  confirmAction: { type: string; invoiceId: string } | null;
+  setConfirmAction: (action: { type: string; invoiceId: string } | null) => void;
+};
+
+export function InvoiceDetailPanel({
+  detail,
+  canEditDetail,
+  canVerifyInvoice,
+  canUploadInvoice,
+  canOverrideDuplicate,
+  patchMutation,
+  archiveMutation,
+  unbindMutation,
+  retryOcrMutation,
+  triggerVerificationMutation,
+  retryVerificationMutation,
+  overrideDuplicateMutation,
+  verificationQuery,
+  editOpen,
+  setEditOpen,
+  editSetAvailable,
+  setEditSetAvailable,
+  editRemarks,
+  setEditRemarks,
+  editInvoiceCode,
+  setEditInvoiceCode,
+  editInvoiceNumber,
+  setEditInvoiceNumber,
+  editInvoiceDate,
+  setEditInvoiceDate,
+  editTotalAmount,
+  setEditTotalAmount,
+  confirmAction,
+  setConfirmAction,
+}: InvoiceDetailPanelProps) {
+  return (
+    <>
+      <div className="card-std space-y-4" data-testid="invoice-detail-panel">
+        <h3 className="card-title">详情轮询</h3>
+        {detail ? (
+          <>
+            <div className="grid grid-cols-2 gap-y-3 pt-2 text-sm text-zinc-700">
+              <div><span className="text-zinc-500">票据ID：</span>{detail.id}</div>
+              <div><span className="text-zinc-500">状态：</span>{detail.status}</div>
+              <div className="col-span-2">
+                <span className="text-zinc-500">发票号：</span>
+                {detail.invoiceCode || "-"}-{detail.invoiceNumber || "-"}
+              </div>
+              <div className="col-span-2">
+                <span className="text-zinc-500">总金额：</span>
+                {detail.totalAmount ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(Number(detail.totalAmount)) : "-"}
+              </div>
+              <div><span className="text-zinc-500">开票日期：</span>{detail.invoiceDate || "-"}</div>
+              <div><span className="text-zinc-500">关联报销：</span>{detail.linkedReimbursementId || "-"}</div>
+              <div className="col-span-2 flex flex-col gap-1">
+                <div>
+                  <span className="text-zinc-500">验真状态：</span>
+                  {detail.verification ? `${detail.verification.status} (${detail.verification.provider})` : "未触发"}
+                </div>
+                {detail.verification?.resultMessage ? (
+                  <div className="text-zinc-900 bg-zinc-50 px-2 py-1.5 rounded-md mt-1 border border-zinc-100">{detail.verification.resultMessage}</div>
+                ) : null}
+                {detail.verification?.errorMessage ? (
+                  <div className="text-red-700 bg-red-50 px-2 py-1.5 rounded-md mt-1 border border-red-100 flex items-center gap-1.5">
+                    <span className="material-symbols-outlined text-[16px]">error</span>
+                    {detail.verification.errorMessage}
+                  </div>
+                ) : null}
+              </div>
+              {detail.ocrLastError ? <div className="col-span-2 text-red-600"><span className="text-zinc-500">OCR错误：</span>{detail.ocrLastError}</div> : null}
+              {detail.remarks ? <div className="col-span-2"><span className="text-zinc-500">备注：</span>{detail.remarks}</div> : null}
+              <div className="col-span-2">
+                <span className="text-zinc-500">判重例外：</span>
+                {detail.isDuplicateOverride ? "已例外" : "否"} {detail.overrideRefFormNumber ? `(ref=${detail.overrideRefFormNumber})` : ""}
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2 pt-4 border-t border-zinc-100 mt-4">
+              {canVerifyInvoice ? (
+                <Button
+                  data-testid="invoice-trigger-verification"
+                  className="btn-secondary"
+                  type="button"
+                  disabled={triggerVerificationMutation.isPending || detail.status === "pending_ocr"}
+                  onClick={() => triggerVerificationMutation.mutate(detail.id)}
+                >
+                  {triggerVerificationMutation.isPending ? "触发中..." : "触发验真"}
+                </Button>
+              ) : null}
+
+              {canVerifyInvoice &&
+                detail.verification &&
+                ["failed", "error"].includes(detail.verification.status) ? (
+                <Button
+                  data-testid="invoice-retry-verification"
+                  className="btn-secondary"
+                  type="button"
+                  disabled={retryVerificationMutation.isPending}
+                  onClick={() => retryVerificationMutation.mutate(detail.id)}
+                >
+                  {retryVerificationMutation.isPending ? "重试中..." : "重试验真"}
+                </Button>
+              ) : null}
+
+              {canEditDetail ? (
+                <Button
+                  data-testid="invoice-edit-open"
+                  className="btn-secondary"
+                  type="button"
+                  disabled={patchMutation.isPending}
+                  onClick={() => setEditOpen(!editOpen)}
+                >
+                  {editOpen ? "关闭编辑" : "人工修正"}
+                </Button>
+              ) : null}
+
+              {canEditDetail && detail.status === "ocr_failed" ? (
+                <Button
+                  data-testid="invoice-retry-ocr"
+                  className="btn-secondary"
+                  type="button"
+                  disabled={retryOcrMutation.isPending}
+                  onClick={() => setConfirmAction({ type: "retryOcr", invoiceId: detail.id })}
+                >
+                  重试 OCR
+                </Button>
+              ) : null}
+
+              {canEditDetail && canUploadInvoice && detail.status === "bound" ? (
+                <Button
+                  data-testid="invoice-unbind"
+                  className="btn-secondary"
+                  type="button"
+                  disabled={unbindMutation.isPending}
+                  onClick={() => setConfirmAction({ type: "unbind", invoiceId: detail.id })}
+                >
+                  解绑
+                </Button>
+              ) : null}
+
+              {canEditDetail && detail.status !== "bound" && detail.status !== "archived" ? (
+                <Button
+                  data-testid="invoice-archive"
+                  className="btn-secondary text-red-600 hover:text-red-700 hover:bg-red-50"
+                  type="button"
+                  disabled={archiveMutation.isPending}
+                  onClick={() => setConfirmAction({ type: "archive", invoiceId: detail.id })}
+                >
+                  手工归档
+                </Button>
+              ) : null}
+
+              {canOverrideDuplicate &&
+                !detail.isDuplicateOverride &&
+                ["available", "ocr_failed"].includes(detail.status) ? (
+                <Button
+                  data-testid="invoice-override-duplicate"
+                  className="btn-secondary"
+                  type="button"
+                  disabled={overrideDuplicateMutation.isPending}
+                  onClick={() => {
+                    if (!window.confirm("确认执行判重例外？该操作将写入审计并影响判重口径。")) return;
+                    const refFormNumber = window.prompt("请输入参考单号（必填）");
+                    if (!refFormNumber?.trim()) return;
+                    const reason = window.prompt("请输入例外原因（必填）");
+                    if (!reason?.trim()) return;
+                    overrideDuplicateMutation.mutate({
+                      invoiceId: detail.id,
+                      refFormNumber: refFormNumber.trim(),
+                      reason: reason.trim(),
+                    });
+                  }}
+                >
+                  判重例外
+                </Button>
+              ) : null}
+            </div>
+
+            {canVerifyInvoice ? (
+              <div className="mt-4 rounded-lg bg-zinc-50 border border-zinc-200 p-4" data-testid="invoice-verification-records">
+                <p className="mb-3 text-sm font-semibold text-zinc-900 border-b border-zinc-200/60 pb-2">验真记录</p>
+                {(verificationQuery.data?.items ?? []).length ? (
+                  <div className="space-y-3 text-xs">
+                    {(verificationQuery.data?.items ?? []).map((record) => (
+                      <div key={record.id} className="rounded-md border border-zinc-200 bg-white px-3 py-2 shadow-sm">
+                        <div className="flex flex-wrap items-center justify-between gap-2 mb-1">
+                          <span className="font-mono text-zinc-500">{record.id}</span>
+                          <span className={`font-semibold ${record.status === "failed" || record.status === "error" ? "text-red-600" : "text-emerald-600"}`}>
+                            {record.status}
+                          </span>
+                        </div>
+                        <div className="text-zinc-600 break-words">
+                          服务商: <strong className="font-medium text-zinc-800">{record.provider}</strong> |
+                          重试次数: <strong className="font-medium text-zinc-800">{record.attempts}</strong> |
+                          验真时间: <strong className="font-medium text-zinc-800">{record.requestedAt || "-"}</strong>
+                        </div>
+                        {record.resultMessage ? <div className="mt-1 text-zinc-800 py-1 px-2 bg-zinc-50 rounded italic">{record.resultMessage}</div> : null}
+                        {record.errorMessage ? <div className="mt-1 text-red-600 font-medium py-1 px-2 border border-red-100 bg-red-50 rounded">{record.errorMessage}</div> : null}
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-xs text-zinc-500">暂无验真记录</p>
+                )}
+              </div>
+            ) : null}
+
+            {editOpen ? (
+              <div className="mt-4 space-y-4 rounded-lg border border-zinc-200 bg-zinc-50/50 p-4">
+                <p className="text-sm font-semibold text-zinc-900 border-b border-zinc-200 pb-2">人工修正（仅必要字段）</p>
+
+                {detail.status === "ocr_failed" ? (
+                  <label className="flex items-center gap-2 text-sm cursor-pointer select-none">
+                    <input
+                      className="size-4 rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900 focus:ring-offset-1"
+                      data-testid="invoice-edit-set-available"
+                      checked={editSetAvailable}
+                      onChange={(event) => setEditSetAvailable(event.target.checked)}
+                      type="checkbox"
+                    />
+                    <span className="text-zinc-700">将状态标记为 available（人工确认可用）</span>
+                  </label>
+                ) : null}
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-1">
+                    <label className="text-xs font-medium text-zinc-600" htmlFor="invoiceCode">
+                      发票代码
+                    </label>
+                    <input
+                      className="input-std"
+                      data-testid="invoice-edit-code"
+                      id="invoiceCode"
+                      onChange={(event) => setEditInvoiceCode(event.target.value)}
+                      value={editInvoiceCode}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-xs font-medium text-zinc-600" htmlFor="invoiceNumber">
+                      发票号码
+                    </label>
+                    <input
+                      className="input-std"
+                      data-testid="invoice-edit-number"
+                      id="invoiceNumber"
+                      onChange={(event) => setEditInvoiceNumber(event.target.value)}
+                      value={editInvoiceNumber}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-xs font-medium text-zinc-600" htmlFor="invoiceDate">
+                      开票日期
+                    </label>
+                    <input
+                      className="input-std"
+                      data-testid="invoice-edit-date"
+                      id="invoiceDate"
+                      onChange={(event) => setEditInvoiceDate(event.target.value)}
+                      type="date"
+                      value={editInvoiceDate}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-xs font-medium text-zinc-600" htmlFor="invoiceTotalAmount">
+                      总金额
+                    </label>
+                    <input
+                      className="input-std"
+                      data-testid="invoice-edit-total-amount"
+                      id="invoiceTotalAmount"
+                      onChange={(event) => setEditTotalAmount(event.target.value)}
+                      value={editTotalAmount}
+                    />
+                  </div>
+                  <div className="space-y-1 md:col-span-2">
+                    <label className="text-xs font-medium text-zinc-600" htmlFor="invoiceRemarks">
+                      备注
+                    </label>
+                    <textarea
+                      className="input-std resize-none"
+                      data-testid="invoice-edit-remarks"
+                      id="invoiceRemarks"
+                      onChange={(event) => setEditRemarks(event.target.value)}
+                      rows={2}
+                      value={editRemarks}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    data-testid="invoice-edit-save"
+                    className="btn-primary"
+                    disabled={patchMutation.isPending}
+                    onClick={() => patchMutation.mutate()}
+                    type="button"
+                  >
+                    {patchMutation.isPending ? "保存中..." : "保存修正"}
+                  </Button>
+                  <Button
+                    data-testid="invoice-edit-cancel"
+                    className="btn-secondary"
+                    disabled={patchMutation.isPending}
+                    onClick={() => setEditOpen(false)}
+                    type="button"
+                  >
+                    取消
+                  </Button>
+                </div>
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <p className="text-zinc-500 py-6 text-center bg-zinc-50/50 rounded-lg border border-dashed border-zinc-200 mt-2">请从左侧列表选择一条票据查看详情与修正选项</p>
+        )}
+      </div>
+
+      <ConfirmDialog
+        open={Boolean(confirmAction)}
+        title={
+          confirmAction?.type === "retryOcr" ? "确认重试 OCR" :
+            confirmAction?.type === "unbind" ? "确认解绑" :
+              confirmAction?.type === "archive" ? "确认归档" : "确认操作"
+        }
+        description={
+          confirmAction?.type === "retryOcr" ? "将重新进入 pending_ocr 并消耗一次尝试次数。" :
+            confirmAction?.type === "unbind" ? "仅草稿/驳回报销允许解绑。" :
+              confirmAction?.type === "archive" ? "归档后将不再用于绑定与判重。" : ""
+        }
+        variant={confirmAction?.type === "archive" ? "destructive" : "default"}
+        onConfirm={async () => {
+          if (!confirmAction) return;
+          if (confirmAction.type === "retryOcr") retryOcrMutation.mutate(confirmAction.invoiceId);
+          if (confirmAction.type === "unbind") unbindMutation.mutate(confirmAction.invoiceId);
+          if (confirmAction.type === "archive") archiveMutation.mutate(confirmAction.invoiceId);
+        }}
+        onOpenChange={(open) => { if (!open) setConfirmAction(null); }}
+      />
+    </>
+  );
+}
diff --git a/client/src/pages/invoice-pool/InvoiceListCard.tsx b/client/src/pages/invoice-pool/InvoiceListCard.tsx
new file mode 100644
index 00000000..14d822e7
--- /dev/null
+++ b/client/src/pages/invoice-pool/InvoiceListCard.tsx
@@ -0,0 +1,144 @@
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
+import type { InvoicePoolListResponse, InvoicePoolStatus } from "../../api/invoicePool";
+import { StatusBadge } from "../../components/common/StatusBadge";
+import { TableSkeleton } from "../../components/common/TableSkeleton";
+import { Pagination } from "../../components/common/Pagination";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu";
+
+export type InvoiceListCardProps = {
+  listQuery: UseQueryResult<InvoicePoolListResponse, Error>;
+  status: InvoicePoolStatus | "";
+  setStatus: (status: InvoicePoolStatus | "") => void;
+  ownerScope: "own" | "all";
+  setOwnerScope: (scope: "own" | "all") => void;
+  page: number;
+  setPage: (page: number) => void;
+  totalPages: number;
+  detailInvoiceId: string;
+  setDetailInvoiceId: (id: string) => void;
+  signedUrlMutation: UseMutationResult<{ signedUrl: string; expiresAt: string }, Error, string>;
+};
+
+export function InvoiceListCard({
+  listQuery,
+  status,
+  setStatus,
+  ownerScope,
+  setOwnerScope,
+  page,
+  setPage,
+  totalPages,
+  setDetailInvoiceId,
+  signedUrlMutation,
+}: InvoiceListCardProps) {
+  return (
+    <div className="card-std space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="card-title">筛选与列表</h3>
+        <div className="flex items-center gap-2">
+          <select
+            className="select-sm"
+            data-testid="invoice-filter-status"
+            onChange={(event) => {
+              setStatus(event.target.value as InvoicePoolStatus | "");
+              setPage(1);
+            }}
+            value={status}
+          >
+            <option value="">全部状态</option>
+            <option value="pending_ocr">识别中</option>
+            <option value="available">可用</option>
+            <option value="ocr_failed">识别失败</option>
+            <option value="bound">已绑定</option>
+            <option value="archived">已归档</option>
+          </select>
+
+          <select
+            className="select-sm"
+            data-testid="invoice-filter-owner-scope"
+            onChange={(event) => {
+              setOwnerScope(event.target.value as "own" | "all");
+              setPage(1);
+            }}
+            value={ownerScope}
+          >
+            <option value="own">仅看自己</option>
+            <option value="all">查看全部</option>
+          </select>
+        </div>
+      </div>
+
+      {listQuery.isLoading ? <TableSkeleton columns={5} rows={5} /> : null}
+      {!listQuery.isLoading ? (
+        <>
+          <div className="table-container">
+            <table className="w-full text-left text-sm text-zinc-600" data-testid="invoice-pool-table">
+              <thead className="bg-zinc-50/50">
+                <tr>
+                  <th className="table-th w-[280px]">票据流水号</th>
+                  <th className="table-th w-[120px]">状态</th>
+                  <th className="table-th w-[200px]">发票号码</th>
+                  <th className="table-th">识别情况 (OCR)</th>
+                  <th className="table-th w-[80px] text-right">操作</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-100">
+                {(listQuery.data?.items ?? []).length ? (
+                  listQuery.data?.items.map((item) => (
+                    <tr className="table-row" data-testid="invoice-row" key={item.id}>
+                      <td className="table-td">
+                        <div className="font-mono text-xs text-zinc-500">{item.id}</div>
+                      </td>
+                      <td className="table-td"><StatusBadge status={item.status} /></td>
+                      <td className="table-td font-medium text-zinc-900">
+                        {item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
+                      </td>
+                      <td className="table-td">
+                        {item.status === "pending_ocr" ? (
+                          <span className="flex items-center gap-1.5 text-amber-600 font-medium">
+                            <span className="size-1.5 rounded-full bg-amber-500 animate-pulse" />
+                            识别中 <span className="text-zinc-400 font-normal text-xs">(重试: {item.ocrAttempts})</span>
+                          </span>
+                        ) : item.status === "ocr_failed" ? (
+                          <span className="flex items-center gap-1.5 text-red-600">
+                            <span className="size-1.5 rounded-full bg-red-500" />
+                            识别失败 <span className="text-zinc-400 text-xs">({item.ocrLastError || "未知错误"})</span>
+                          </span>
+                        ) : (
+                          <span className="text-zinc-400 text-xs">解析成功</span>
+                        )}
+                      </td>
+                      <td className="table-td text-right">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger className="rounded-md p-1 hover:bg-zinc-100 focus:outline-none transition-colors">
+                            <span className="material-symbols-outlined text-[20px] text-zinc-400">more_horiz</span>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-32">
+                            <DropdownMenuItem data-testid="invoice-detail-button" onSelect={() => setDetailInvoiceId(item.id)}>
+                              查看详情
+                            </DropdownMenuItem>
+                            <DropdownMenuItem data-testid="invoice-preview-button" onSelect={() => signedUrlMutation.mutate(item.id)}>
+                              下载 / 预览
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td className="table-td text-center text-zinc-500 py-8" colSpan={5}>
+                      暂无票据数据
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          <Pagination page={page} totalPages={totalPages} onPageChange={setPage} testIdPrefix="invoice" />
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/client/src/pages/invoice-pool/InvoiceUploadCard.tsx b/client/src/pages/invoice-pool/InvoiceUploadCard.tsx
new file mode 100644
index 00000000..f16785ff
--- /dev/null
+++ b/client/src/pages/invoice-pool/InvoiceUploadCard.tsx
@@ -0,0 +1,73 @@
+import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
+import type { FetchMyDelegationsResponse } from "../../api/delegations";
+import { Button } from "../../components/ui/button";
+
+export type InvoiceUploadCardProps = {
+  uploadMutation: UseMutationResult<{ invoicePoolId: string; status: string; fileSha256: string }, Error, void>;
+  selectedFile: File | null;
+  setSelectedFile: (file: File | null) => void;
+  showProxyOwnerSelector: boolean;
+  proxyDelegationsQuery: UseQueryResult<FetchMyDelegationsResponse, Error>;
+  uploadOwnerEmployeeId: string;
+  setUploadOwnerEmployeeId: (id: string) => void;
+};
+
+export function InvoiceUploadCard({
+  uploadMutation,
+  selectedFile,
+  setSelectedFile,
+  showProxyOwnerSelector,
+  proxyDelegationsQuery,
+  uploadOwnerEmployeeId,
+  setUploadOwnerEmployeeId,
+}: InvoiceUploadCardProps) {
+  return (
+    <div className="card-std space-y-4">
+      <h3 className="card-title">上传票据（VAT OCR）</h3>
+      {showProxyOwnerSelector ? (
+        <select
+          className="select-std"
+          data-testid="invoice-upload-owner"
+          onChange={(event) => setUploadOwnerEmployeeId(event.target.value)}
+          value={uploadOwnerEmployeeId}
+        >
+          <option value="">自己</option>
+          {(proxyDelegationsQuery.data?.received ?? [])
+            .filter((item) => item.status === "active")
+            .map((item) => (
+              <option key={item.id} value={item.principalEmployeeId}>
+                {item.principal?.name ?? item.principalEmployeeId}
+              </option>
+            ))}
+        </select>
+      ) : null}
+      <div className="flex items-center gap-3">
+        <label
+          htmlFor="file-upload"
+          className="cursor-pointer inline-flex h-9 items-center justify-center rounded-md border border-dashed border-zinc-300 bg-zinc-50 px-4 py-2 text-sm font-medium text-zinc-600 shadow-sm transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus-within:ring-1 focus-within:ring-zinc-400"
+        >
+          <span className="material-symbols-outlined mr-2 text-[18px]">cloud_upload</span>
+          {selectedFile ? selectedFile.name : "选择文件"}
+        </label>
+        <input
+          id="file-upload"
+          className="hidden"
+          accept="application/pdf,image/jpeg,image/png,image/webp"
+          data-testid="invoice-upload-file"
+          onChange={(event) => setSelectedFile(event.target.files?.[0] ?? null)}
+          type="file"
+        />
+
+        <Button
+          data-testid="invoice-upload-submit"
+          className={selectedFile ? "" : "opacity-50"}
+          disabled={uploadMutation.isPending || !selectedFile}
+          onClick={() => uploadMutation.mutate()}
+          type="button"
+        >
+          {uploadMutation.isPending ? "上传中..." : "上传并触发 OCR"}
+        </Button>
+      </div>
+    </div>
+  );
+}