From e9974d4f5953c2d33bd86146c2d8a0248871a9ef Mon Sep 17 00:00:00 2001
From: shunli <shunli@qq.com>
Date: Sun, 8 Feb 2026 23:30:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(client):=20=E6=8A=A5=E9=94=80=E9=A1=B5?=
 =?UTF-8?q?=E7=B2=BE=E4=BF=AE=E4=B8=8E=20testid=EF=BC=88E5=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 报销列表使用 Tabs/Table 收敛展示
- 报销详情动作区（submit/withdraw/pay）统一组件与错误展示
- 支付凭证字段补齐 data-testid 供 E2E
---
 client/src/pages/ReimbursementDetailPage.tsx  |  84 +++++-----
 client/src/pages/ReimbursementsPage.tsx       | 154 ++++++++++--------
 .../2026-02-08_21-50-09-p4-trialrun-ready.csv |   2 +-
 3 files changed, 135 insertions(+), 105 deletions(-)

diff --git a/client/src/pages/ReimbursementDetailPage.tsx b/client/src/pages/ReimbursementDetailPage.tsx
index f8967f57..addae9de 100644
--- a/client/src/pages/ReimbursementDetailPage.tsx
+++ b/client/src/pages/ReimbursementDetailPage.tsx
@@ -12,6 +12,10 @@ import {
 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 { Input } from "../components/ui/input";
+import { Textarea } from "../components/ui/textarea";
 
 export function ReimbursementDetailPage() {
   const { reimbursementId = "" } = useParams();
@@ -78,17 +82,17 @@ export function ReimbursementDetailPage() {
 
   if (!reimbursementId) {
     return (
-      <section className="card-std">
+      <Card className="p-6">
         <p className="text-sm text-red-600">缺少 reimbursementId 参数。</p>
-      </section>
+      </Card>
     );
   }
 
   if (detailQuery.isLoading) {
     return (
-      <section className="card-std">
+      <Card className="p-6">
         <p className="text-sm text-slate-500">加载报销详情中...</p>
-      </section>
+      </Card>
     );
   }
 
@@ -102,12 +106,12 @@ export function ReimbursementDetailPage() {
       : "加载报销详情失败";
 
     return (
-      <section className="card-std space-y-3">
+      <Card className="space-y-3 p-6">
         <p className="text-sm text-red-600">{message}</p>
-        <Link className="btn-secondary" to="/reimbursements">
-          返回报销列表
-        </Link>
-      </section>
+        <Button asChild variant="secondary">
+          <Link to="/reimbursements">返回报销列表</Link>
+        </Button>
+      </Card>
     );
   }
 
@@ -120,76 +124,81 @@ export function ReimbursementDetailPage() {
         title={`报销详情 ${detail.formNumber ?? detail.id}`}
         subtitle={`状态：${detail.status}`}
         actions={
-          <Link className="btn-secondary" to="/reimbursements">
-            返回列表
-          </Link>
+          <Button asChild variant="secondary" data-testid="reimbursement-back">
+            <Link to="/reimbursements">返回列表</Link>
+          </Button>
         }
       />
 
-      <section className="card-std space-y-2 text-sm">
+      <Card className="space-y-2 p-6 text-sm" data-testid="reimbursement-summary">
         <div>报销ID：{detail.id}</div>
         <div>报销日期：{detail.reimbursementDate ?? "-"}</div>
         <div>金额：{detail.totalAmount ?? "-"}</div>
         <div>提交人：{detail.submitter?.name ?? "-"}</div>
         <div>报销人：{detail.owner?.name ?? "-"}</div>
         <div>说明：{detail.description || "-"}</div>
-      </section>
+      </Card>
 
-      <section className="card-std space-y-3">
+      <Card className="space-y-4 p-6">
         <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">
+          <p
+            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
+            data-testid="reimbursement-action-error"
+          >
             {actionError}
           </p>
         ) : null}
 
         <div className="flex flex-wrap gap-2">
-          <button
-            className="btn-primary"
+          <Button
+            data-testid="reimbursement-submit"
             disabled={mutation.isPending || detail.status !== "draft"}
             onClick={() => mutation.mutate("submit")}
             type="button"
           >
             提交报销
-          </button>
+          </Button>
         </div>
 
-        <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
           <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"
+          <Textarea
+            data-testid="reimbursement-withdraw-comment"
             onChange={(event) => setWithdrawComment(event.target.value)}
             rows={2}
             value={withdrawComment}
           />
-          <button
-            className="btn-secondary"
+          <Button
+            data-testid="reimbursement-withdraw"
+            variant="secondary"
             disabled={mutation.isPending || detail.status !== "reviewing" || withdrawComment.trim().length < 1}
             onClick={() => mutation.mutate("withdraw")}
             type="button"
           >
             撤回
-          </button>
+          </Button>
         </div>
 
         {canPay ? (
-          <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+          <div className="space-y-2 rounded-lg border border-slate-200 p-4">
             <p className="text-sm font-medium text-slate-800">财务支付</p>
-            <input
-              className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            <Input
+              data-testid="reimbursement-pay-voucher-no"
               onChange={(event) => setPaymentVoucherNo(event.target.value)}
               placeholder="付款凭证号"
               value={paymentVoucherNo}
             />
-            <input
-              className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            <Input
+              data-testid="reimbursement-pay-date"
               onChange={(event) => setPaymentDate(event.target.value)}
               type="date"
               value={paymentDate}
             />
             <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="reimbursement-pay-channel"
               onChange={(event) =>
                 setPaymentChannel(event.target.value as "bank" | "alipay" | "wechat" | "cash" | "other")
               }
@@ -201,19 +210,20 @@ export function ReimbursementDetailPage() {
               <option value="cash">cash</option>
               <option value="other">other</option>
             </select>
-            <button
-              className="btn-secondary"
+            <Button
+              data-testid="reimbursement-pay"
+              variant="secondary"
               disabled={mutation.isPending || !["approved", "paid"].includes(detail.status)}
               onClick={() => mutation.mutate("pay")}
               type="button"
             >
               执行支付
-            </button>
+            </Button>
           </div>
         ) : null}
-      </section>
+      </Card>
 
-      <section className="card-std space-y-2">
+      <Card className="space-y-2 p-6" data-testid="reimbursement-invoices">
         <h3 className="text-base font-semibold text-slate-900">关联票据</h3>
         {(detail.invoices ?? []).length ? (
           <div className="space-y-2 text-sm">
@@ -229,7 +239,7 @@ export function ReimbursementDetailPage() {
         ) : (
           <p className="text-sm text-slate-500">暂无关联票据</p>
         )}
-      </section>
+      </Card>
     </div>
   );
 }
diff --git a/client/src/pages/ReimbursementsPage.tsx b/client/src/pages/ReimbursementsPage.tsx
index bf1f4585..a603b767 100644
--- a/client/src/pages/ReimbursementsPage.tsx
+++ b/client/src/pages/ReimbursementsPage.tsx
@@ -6,6 +6,10 @@ import { createReimbursement, fetchReimbursements, type ReimbursementStatus } fr
 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";
+import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 
 const PAGE_SIZE = 20;
 
@@ -39,14 +43,14 @@ export function ReimbursementsPage() {
         title="我的报销"
         subtitle="报销列表、详情与提交/撤回/支付动作入口。"
         actions={
-          <button
-            className="btn-primary"
+          <Button
+            data-testid="reimbursements-create"
             disabled={createMutation.isPending}
             onClick={() => createMutation.mutate()}
             type="button"
           >
             {createMutation.isPending ? "创建中..." : "新建报销"}
-          </button>
+          </Button>
         }
       />
 
@@ -61,43 +65,52 @@ export function ReimbursementsPage() {
         </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>
-          ))}
+      <Card className="space-y-4 p-6">
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <Tabs
+            data-testid="reimbursements-status-tabs"
+            value={status}
+            onValueChange={(value) => setSearchParams({ status: value, page: "1", scope })}
+          >
+            <TabsList className="flex w-full flex-wrap justify-start gap-1 md:w-auto">
+              {[
+                { value: "draft", label: "草稿" },
+                { value: "reviewing", label: "审批中" },
+                { value: "approved", label: "已通过" },
+                { value: "paid", label: "已支付" },
+                { value: "rejected", label: "已驳回" },
+                { value: "cancelled", label: "已取消" },
+              ].map((item) => (
+                <TabsTrigger
+                  data-testid={`reimbursements-tab-${item.value}`}
+                  key={item.value}
+                  value={item.value}
+                >
+                  {item.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
 
           {canViewAll ? (
-            <>
-              <button
-                className={scope === "own" ? "btn-primary" : "btn-secondary"}
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                data-testid="reimbursements-scope-own"
+                variant={scope === "own" ? "default" : "secondary"}
                 onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
                 type="button"
               >
                 仅自己
-              </button>
-              <button
-                className={scope === "all" ? "btn-primary" : "btn-secondary"}
+              </Button>
+              <Button
+                data-testid="reimbursements-scope-all"
+                variant={scope === "all" ? "default" : "secondary"}
                 onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
                 type="button"
               >
                 全范围
-              </button>
-            </>
+              </Button>
+            </div>
           ) : null}
         </div>
 
@@ -116,46 +129,51 @@ export function ReimbursementsPage() {
         ) : 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">
+          <div className="rounded-lg border border-slate-200">
+            <Table data-testid="reimbursements-table">
+              <TableHeader>
                 <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>
+                  <TableHead>单号</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead>金额</TableHead>
+                  <TableHead>报销人</TableHead>
+                  <TableHead>日期</TableHead>
+                  <TableHead className="w-24">操作</TableHead>
                 </tr>
-              </thead>
-              <tbody>
+              </TableHeader>
+              <TableBody>
                 {(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">
+                    <TableRow data-testid="reimbursement-row" key={item.id}>
+                      <TableCell>
                         <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>
+                      </TableCell>
+                      <TableCell>{item.status}</TableCell>
+                      <TableCell>{item.totalAmount ?? "-"}</TableCell>
+                      <TableCell>{item.owner?.name ?? "-"}</TableCell>
+                      <TableCell>{item.reimbursementDate ?? "-"}</TableCell>
+                      <TableCell>
+                        <Button
+                          asChild
+                          size="sm"
+                          variant="secondary"
+                          data-testid="reimbursement-detail-link"
+                        >
+                          <Link to={`/reimbursements/${item.id}`}>详情</Link>
+                        </Button>
+                      </TableCell>
+                    </TableRow>
                   ))
                 ) : (
-                  <tr>
-                    <td className="px-3 py-3 text-slate-500" colSpan={6}>
+                  <TableRow>
+                    <TableCell className="py-3 text-slate-500" colSpan={6}>
                       暂无数据
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                 )}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           </div>
         ) : null}
 
@@ -164,8 +182,9 @@ export function ReimbursementsPage() {
             第 {page} / {totalPages} 页
           </span>
           <div className="flex gap-2">
-            <button
-              className="btn-secondary"
+            <Button
+              data-testid="reimbursements-prev-page"
+              variant="secondary"
               disabled={page <= 1}
               onClick={() =>
                 setSearchParams({ status, scope, page: String(Math.max(1, page - 1)) })
@@ -173,9 +192,10 @@ export function ReimbursementsPage() {
               type="button"
             >
               上一页
-            </button>
-            <button
-              className="btn-secondary"
+            </Button>
+            <Button
+              data-testid="reimbursements-next-page"
+              variant="secondary"
               disabled={page >= totalPages}
               onClick={() =>
                 setSearchParams({ status, scope, page: String(Math.min(totalPages, page + 1)) })
@@ -183,10 +203,10 @@ export function ReimbursementsPage() {
               type="button"
             >
               下一页
-            </button>
+            </Button>
           </div>
         </div>
-      </section>
+      </Card>
     </div>
   );
 }
diff --git a/issues/2026-02-08_21-50-09-p4-trialrun-ready.csv b/issues/2026-02-08_21-50-09-p4-trialrun-ready.csv
index 49c5ae4b..b225639f 100644
--- a/issues/2026-02-08_21-50-09-p4-trialrun-ready.csv
+++ b/issues/2026-02-08_21-50-09-p4-trialrun-ready.csv
@@ -3,7 +3,7 @@ E1,CSV快照收口（试运行上线版）,新建P4试运行上线版执行合
 E2,前端UI组件基线（成熟复用）,引入UI primitives与移动端44px触控规范并保持现有token策略,三大业务页可复用组件且typecheck与build通过,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/components/ui/* | client/src/lib/* | client/src/styles/mobile-touch.css | client/src/index.css | client/tailwind.config.js | client/package.json,"[""E1""]",本地拷贝shadcn风格组件子集并记录来源/许可证与回滚路径
 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,TODO,TODO,TODO,client/src/pages/ReimbursementsPage.tsx | client/src/pages/ReimbursementDetailPage.tsx | client/src/api/reimbursements.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
 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账号不写生产密码与密钥