feat(client): 报销页精修与 testid（E5）

- 报销列表使用 Tabs/Table 收敛展示
- 报销详情动作区（submit/withdraw/pay）统一组件与错误展示
- 支付凭证字段补齐 data-testid 供 E2E

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>
   );
 }