feat(client): 票据中心精修与 testid（E6）

- 上传/筛选/列表/绑定/详情轮询统一 Card/Table/Button
- 强化 OCR 状态展示（pending_ocr/ocr_failed）与错误可读性
- 增加 data-testid 供 E2E 稳定定位

client/src/pages/InvoicePoolPage.tsx

@@ -14,6 +14,9 @@ import { fetchReimbursements } from "../api/reimbursements";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { PageHeader } from "../components/common/PageHeader";
+import { Button } from "../components/ui/button";
+import { Card } from "../components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 
 const PAGE_SIZE = 20;
 
@@ -141,26 +144,35 @@ export function InvoicePoolPage() {
       />
 
       {error ? (
-        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+          {error}
+        </p>
       ) : null}
 
-      <section className="card-std space-y-3">
+      <Card className="space-y-3 p-6">
         <h3 className="text-base font-semibold text-slate-900">上传票据（VAT OCR）</h3>
         <input
           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 className="btn-primary" onClick={() => uploadMutation.mutate()} type="button">
+        <Button
+          data-testid="invoice-upload-submit"
+          disabled={uploadMutation.isPending || !selectedFile}
+          onClick={() => uploadMutation.mutate()}
+          type="button"
+        >
           {uploadMutation.isPending ? "上传中..." : "上传并触发OCR"}
-        </button>
+        </Button>
-      </section>
+      </Card>
 
-      <section className="card-std space-y-3">
+      <Card className="space-y-3 p-6">
         <h3 className="text-base font-semibold text-slate-900">筛选与列表</h3>
         <div className="flex flex-wrap gap-2">
           <select
-            className="rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+            data-testid="invoice-filter-status"
             onChange={(event) => {
               setStatus(event.target.value as InvoicePoolStatus | "");
               setPage(1);
@@ -176,7 +188,8 @@ export function InvoicePoolPage() {
           </select>
 
           <select
-            className="rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+            data-testid="invoice-filter-owner-scope"
             onChange={(event) => {
               setOwnerScope(event.target.value as "own" | "all");
               setPage(1);
@@ -188,59 +201,72 @@ export function InvoicePoolPage() {
           </select>
         </div>
 
-        <div className="overflow-x-auto rounded-lg border border-slate-200">
+        <div className="rounded-lg border border-slate-200">
-          <table className="min-w-full text-left text-sm">
+          <Table data-testid="invoice-pool-table">
-            <thead className="bg-slate-50 text-slate-600">
+            <TableHeader>
               <tr>
-                <th className="px-3 py-2">ID</th>
+                <TableHead>ID</TableHead>
-                <th className="px-3 py-2">状态</th>
+                <TableHead>状态</TableHead>
-                <th className="px-3 py-2">发票号</th>
+                <TableHead>发票号</TableHead>
-                <th className="px-3 py-2">OCR</th>
+                <TableHead>OCR</TableHead>
-                <th className="px-3 py-2">操作</th>
+                <TableHead className="w-40">操作</TableHead>
               </tr>
-            </thead>
+            </TableHeader>
-            <tbody>
+            <TableBody>
               {(listQuery.data?.items ?? []).length ? (
                 listQuery.data?.items.map((item) => (
-                  <tr className="border-t border-slate-100" key={item.id}>
+                  <TableRow data-testid="invoice-row" key={item.id}>
-                    <td className="px-3 py-2 font-mono text-xs">{item.id}</td>
+                    <TableCell className="font-mono text-xs">{item.id}</TableCell>
-                    <td className="px-3 py-2">{item.status}</td>
+                    <TableCell>{item.status}</TableCell>
-                    <td className="px-3 py-2">
+                    <TableCell>
                       {item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
-                    </td>
+                    </TableCell>
-                    <td className="px-3 py-2">
+                    <TableCell>
-                      attempts={item.ocrAttempts}
+                      {item.status === "pending_ocr" ? (
-                      {item.ocrLastError ? ` / ${item.ocrLastError}` : ""}
+                        <span className="text-amber-700">
-                    </td>
+                          OCR 处理中（attempts={item.ocrAttempts}）
-                    <td className="px-3 py-2">
+                        </span>
+                      ) : item.status === "ocr_failed" ? (
+                        <span className="text-red-600">
+                          OCR 失败（{item.ocrLastError || "unknown"}）
+                        </span>
+                      ) : (
+                        <span className="text-slate-600">attempts={item.ocrAttempts}</span>
+                      )}
+                    </TableCell>
+                    <TableCell>
                       <div className="flex flex-wrap gap-2">
-                        <button
+                        <Button
-                          className="btn-secondary"
+                          data-testid="invoice-detail-button"
+                          size="sm"
+                          variant="secondary"
                           onClick={() => setDetailInvoiceId(item.id)}
                           type="button"
                         >
                           详情
-                        </button>
+                        </Button>
-                        <button
+                        <Button
-                          className="btn-secondary"
+                          data-testid="invoice-preview-button"
+                          size="sm"
+                          variant="secondary"
                           onClick={() => signedUrlMutation.mutate(item.id)}
                           type="button"
                         >
                           预览
-                        </button>
+                        </Button>
                       </div>
-                    </td>
+                    </TableCell>
-                  </tr>
+                  </TableRow>
                 ))
               ) : (
-                <tr>
+                <TableRow>
-                  <td className="px-3 py-3 text-slate-500" colSpan={5}>
+                  <TableCell className="py-3 text-slate-500" colSpan={5}>
                     暂无数据
-                  </td>
+                  </TableCell>
-                </tr>
+                </TableRow>
               )}
-            </tbody>
+            </TableBody>
-          </table>
+          </Table>
         </div>
 
         <div className="flex items-center justify-between text-sm">
@@ -248,30 +274,33 @@ export function InvoicePoolPage() {
             第 {page} / {totalPages} 页
           </span>
           <div className="flex gap-2">
-            <button
+            <Button
-              className="btn-secondary"
+              data-testid="invoice-prev-page"
+              variant="secondary"
               disabled={page <= 1}
               onClick={() => setPage((current) => Math.max(1, current - 1))}
               type="button"
             >
               上一页
-            </button>
+            </Button>
-            <button
+            <Button
-              className="btn-secondary"
+              data-testid="invoice-next-page"
+              variant="secondary"
               disabled={page >= totalPages}
               onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
               type="button"
             >
               下一页
-            </button>
+            </Button>
           </div>
         </div>
-      </section>
+      </Card>
 
-      <section className="card-std space-y-3">
+      <Card className="space-y-3 p-6">
         <h3 className="text-base font-semibold text-slate-900">绑定报销</h3>
         <select
-          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+          className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+          data-testid="invoice-bind-invoice"
           onChange={(event) => setSelectedInvoiceId(event.target.value)}
           value={selectedInvoiceId}
         >
@@ -284,7 +313,8 @@ export function InvoicePoolPage() {
         </select>
 
         <select
-          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+          className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+          data-testid="invoice-bind-reimbursement"
           onChange={(event) => setSelectedReimbursementId(event.target.value)}
           value={selectedReimbursementId}
         >
@@ -296,12 +326,18 @@ export function InvoicePoolPage() {
           ))}
         </select>
 
-        <button className="btn-secondary" onClick={() => bindMutation.mutate()} type="button">
+        <Button
+          data-testid="invoice-bind-submit"
+          variant="secondary"
+          disabled={bindMutation.isPending || !selectedInvoiceId || !selectedReimbursementId}
+          onClick={() => bindMutation.mutate()}
+          type="button"
+        >
           {bindMutation.isPending ? "绑定中..." : "绑定票据"}
-        </button>
+        </Button>
-      </section>
+      </Card>
 
-      <section className="card-std space-y-2 text-sm">
+      <Card className="space-y-2 p-6 text-sm" data-testid="invoice-detail-panel">
         <h3 className="text-base font-semibold text-slate-900">详情轮询</h3>
         {detailQuery.data ? (
           <>
@@ -315,7 +351,7 @@ export function InvoicePoolPage() {
         ) : (
           <p className="text-slate-500">请选择一条票据查看详情</p>
         )}
-      </section>
+      </Card>
     </div>
   );
 }

issues/2026-02-08_21-50-09-p4-trialrun-ready.csv

@@ -4,7 +4,7 @@ E2,前端UI组件基线（成熟复用）,引入UI primitives与移动端44px触
 E3,前端布局导航收敛,统一Sidebar与Topbar交互视觉响应式与权限菜单体验,四角色菜单正确窄屏可用路由守卫无闪烁,"manual: 按server与client README启动联调并验证employee manager finance finance_mgr菜单与守卫",manual,DONE,TODO,TODO,client/src/layouts/AppShellLayout.tsx | client/src/components/navigation/* | client/src/components/common/PageHeader.tsx | client/src/router/*,"[""E2""]",none
 E4,待办页精修（列表详情动作）,用UI primitives收敛待办列表与详情动作区统一加载空态错误并补data-testid,approve reject return transfer动作可用且动作后列表详情刷新一致,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/pages/WorkflowTasksPage.tsx | client/src/pages/WorkflowTaskDetailPage.tsx | client/src/api/workflow.ts,"[""E3""]",为E2E补稳定选择器data-testid
 E5,报销页精修（列表详情联动）,收敛报销列表详情展示并优化支付凭证与票据区块一致性并补data-testid,employee可create submit withdraw且finance可pay并填写凭证字段,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/pages/ReimbursementsPage.tsx | client/src/pages/ReimbursementDetailPage.tsx | client/src/api/reimbursements.ts,"[""E3""]",为E2E补稳定选择器data-testid
-E6,票据中心精修（OCR与预览）,收敛上传列表详情并强化OCR状态展示绑定与签名预览交互并补data-testid,OCR_PROVIDER=mock联调可轮询pending_ocr且ocr_failed展示原因且预览可用,cd client && npm run typecheck && npm run build,manual,TODO,TODO,TODO,client/src/pages/InvoicePoolPage.tsx | client/src/api/invoicePool.ts | client/src/api/http.ts,"[""E3""]",为E2E补稳定选择器data-testid
+E6,票据中心精修（OCR与预览）,收敛上传列表详情并强化OCR状态展示绑定与签名预览交互并补data-testid,OCR_PROVIDER=mock联调可轮询pending_ocr且ocr_failed展示原因且预览可用,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/pages/InvoicePoolPage.tsx | client/src/api/invoicePool.ts | client/src/api/http.ts,"[""E3""]",为E2E补稳定选择器data-testid
 E7,委派管理前端页（运营可用）,新增委派管理页与API封装支持创建列表撤销并加菜单入口与守卫,可创建委派撤销后delegate不可代办且无权限用户403提示正确,"manual: manager创建委派让delegate代办一次后撤销再验证PERM_002",manual,TODO,TODO,TODO,client/src/pages/DelegationsPage.tsx | client/src/api/delegations.ts | client/src/router/index.tsx | client/src/components/navigation/Sidebar.tsx,"[""E3""]",权限码沿用expense.proxy_manage
 E8,默认账号与失败体验收敛,补dev seed默认账号文档并让前端对网络失败给出可操作提示（含“忘记密码请联系管理员重置”）,登录页后端不可达提示服务未启动且README列出默认账号且SYS_001提示可读,"manual: 停后端访问登录页看到提示并按README默认账号登录成功",manual,TODO,TODO,TODO,client/src/pages/LoginPage.tsx | client/src/api/errorMessages.ts | server/README.md | client/README.md,"[""E1""]",仅写dev seed账号不写生产密码与密钥
 E9,DB索引补强（试运行性能）,为列表分页与筛选补组合索引以降低试运行慢查询风险,迁移可重复执行且回归全绿,cd server && npm run prisma:migrate:deploy && ./scripts/regression-all.sh,manual,TODO,TODO,TODO,server/prisma/schema.prisma | server/prisma/migrations/*,"[""E1""]",新增组合索引仅增不破回滚成本低