From c632648e1612803b38eade8900716d5c3645974c Mon Sep 17 00:00:00 2001
From: shunli <shunli@qq.com>
Date: Fri, 6 Mar 2026 09:48:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20[UI7-1]=20=E6=B7=B1=E5=BA=A6?=
 =?UTF-8?q?=E7=BF=BB=E6=96=B0=E6=8A=A5=E9=94=80=E3=80=81=E5=8F=91=E7=A5=A8?=
 =?UTF-8?q?=E4=B8=8E=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E7=AD=89=E6=A0=B8?=
 =?UTF-8?q?=E5=BF=83=E8=A7=86=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/InvoicePoolPage.tsx          | 701 ++++--------------
 client/src/pages/ReimbursementDetailPage.tsx  | 337 +++------
 client/src/pages/ReimbursementsPage.tsx       | 302 ++++----
 client/src/pages/UserManagementPage.tsx       | 367 ++-------
 .../ReimbursementActions.tsx                  | 131 ++++
 .../ReimbursementItemEditor.tsx               | 166 +++++
 .../user-management/CreateUserDialog.tsx      | 246 ++++++
 .../pages/user-management/UserRoleDialog.tsx  | 105 +++
 8 files changed, 1105 insertions(+), 1250 deletions(-)
 create mode 100644 client/src/pages/reimbursement-detail/ReimbursementActions.tsx
 create mode 100644 client/src/pages/reimbursement-detail/ReimbursementItemEditor.tsx
 create mode 100644 client/src/pages/user-management/CreateUserDialog.tsx
 create mode 100644 client/src/pages/user-management/UserRoleDialog.tsx

diff --git a/client/src/pages/InvoicePoolPage.tsx b/client/src/pages/InvoicePoolPage.tsx
index 57e4da72..d0152314 100644
--- a/client/src/pages/InvoicePoolPage.tsx
+++ b/client/src/pages/InvoicePoolPage.tsx
@@ -23,12 +23,15 @@ import {
 import { fetchReimbursements } from "../api/reimbursements";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
+import { toast } from "sonner";
 import { downloadBlob } from "../lib/download";
 import { PageHeader } from "../components/common/PageHeader";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
+import { InvoiceUploadCard } from "./invoice-pool/InvoiceUploadCard";
+import { InvoiceListCard } from "./invoice-pool/InvoiceListCard";
+import { InvoiceBindCard } from "./invoice-pool/InvoiceBindCard";
+import { InvoiceDetailPanel } from "./invoice-pool/InvoiceDetailPanel";
 
 const PAGE_SIZE = 20;
 
@@ -58,6 +61,9 @@ export function InvoicePoolPage() {
   const [editInvoiceDate, setEditInvoiceDate] = useState("");
   const [editTotalAmount, setEditTotalAmount] = useState("");
   const [error, setError] = useState("");
+  const [confirmAction, setConfirmAction] = useState<{ type: string; invoiceId: string } | null>(null);
+
+  // --- Queries ---
 
   const listQuery = useQuery({
     queryKey: ["invoice-pool", "list", status, ownerScope, page],
@@ -105,6 +111,8 @@ export function InvoicePoolPage() {
     },
   });
 
+  // --- Side effects ---
+
   useEffect(() => {
     if (!detailQuery.data || editOpen) {
       return;
@@ -118,6 +126,30 @@ export function InvoicePoolPage() {
     setEditTotalAmount(detailQuery.data.totalAmount ?? "");
   }, [detailQuery.data, editOpen]);
 
+  useEffect(() => {
+    if (!canManageInvoice && ownerScope === "all") {
+      setOwnerScope("own");
+    }
+  }, [canManageInvoice, ownerScope]);
+
+  useEffect(() => {
+    if (!detailInvoiceId && listQuery.data?.items?.length) {
+      setDetailInvoiceId(listQuery.data.items[0].id);
+    }
+  }, [detailInvoiceId, listQuery.data?.items]);
+
+  // --- Helper for error handling ---
+
+  const handleError = (err: unknown, fallback: string) => {
+    const msg = isApiError(err)
+      ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`
+      : err instanceof Error ? err.message : fallback;
+    setError(msg);
+    toast.error(msg);
+  };
+
+  // --- Mutations ---
+
   const uploadMutation = useMutation({
     mutationFn: async () => {
       if (!selectedFile) {
@@ -130,16 +162,9 @@ export function InvoicePoolPage() {
       setDetailInvoiceId(data.invoicePoolId);
       setSelectedFile(null);
       setError("");
+      toast.success("上传成功");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else if (err instanceof Error) {
-        setError(err.message);
-      } else {
-        setError("上传失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "上传失败，请稍后重试"),
   });
 
   const bindMutation = useMutation({
@@ -152,16 +177,9 @@ export function InvoicePoolPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
       setError("");
+      toast.success("绑定成功");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else if (err instanceof Error) {
-        setError(err.message);
-      } else {
-        setError("绑定失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "绑定失败，请稍后重试"),
   });
 
   const signedUrlMutation = useMutation({
@@ -178,18 +196,6 @@ export function InvoicePoolPage() {
     },
   });
 
-  useEffect(() => {
-    if (!canManageInvoice && ownerScope === "all") {
-      setOwnerScope("own");
-    }
-  }, [canManageInvoice, ownerScope]);
-
-  useEffect(() => {
-    if (!detailInvoiceId && listQuery.data?.items?.length) {
-      setDetailInvoiceId(listQuery.data.items[0].id);
-    }
-  }, [detailInvoiceId, listQuery.data?.items]);
-
   const patchMutation = useMutation({
     mutationFn: async () => {
       if (!detailInvoiceId) {
@@ -209,16 +215,9 @@ export function InvoicePoolPage() {
       await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
       setEditOpen(false);
       setError("");
+      toast.success("修正已保存");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else if (err instanceof Error) {
-        setError(err.message);
-      } else {
-        setError("保存失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "保存失败，请稍后重试"),
   });
 
   const archiveMutation = useMutation({
@@ -226,14 +225,9 @@ export function InvoicePoolPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
       setError("");
+      toast.success("已归档");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else {
-        setError("归档失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "归档失败，请稍后重试"),
   });
 
   const unbindMutation = useMutation({
@@ -241,14 +235,9 @@ export function InvoicePoolPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
       setError("");
+      toast.success("已解绑");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else {
-        setError("解绑失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "解绑失败，请稍后重试"),
   });
 
   const retryOcrMutation = useMutation({
@@ -256,14 +245,9 @@ export function InvoicePoolPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
       setError("");
+      toast.success("OCR 重试已触发");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else {
-        setError("OCR 重试失败，请稍后再试");
-      }
-    },
+    onError: (err) => handleError(err, "OCR 重试失败，请稍后再试"),
   });
 
   const triggerVerificationMutation = useMutation({
@@ -274,14 +258,9 @@ export function InvoicePoolPage() {
         queryClient.invalidateQueries({ queryKey: ["invoice-pool", "verification"] }),
       ]);
       setError("");
+      toast.success("验真已触发");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else {
-        setError("触发验真失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "触发验真失败，请稍后重试"),
   });
 
   const retryVerificationMutation = useMutation({
@@ -292,14 +271,9 @@ export function InvoicePoolPage() {
         queryClient.invalidateQueries({ queryKey: ["invoice-pool", "verification"] }),
       ]);
       setError("");
+      toast.success("验真重试已触发");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else {
-        setError("重试验真失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "重试验真失败，请稍后重试"),
   });
 
   const overrideDuplicateMutation = useMutation({
@@ -311,14 +285,9 @@ export function InvoicePoolPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
       setError("");
+      toast.success("判重例外已生效");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else {
-        setError("判重例外失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "判重例外失败，请稍后重试"),
   });
 
   const exportMutation = useMutation({
@@ -331,25 +300,24 @@ export function InvoicePoolPage() {
     onSuccess: (response, format) => {
       downloadBlob(response.blob, response.filename ?? `invoice-pool.${format}`);
       setError("");
+      toast.success("导出完成");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-      } else {
-        setError("导出失败，请稍后重试");
-      }
-    },
+    onError: (err) => handleError(err, "导出失败，请稍后重试"),
   });
 
+  // --- Derived state ---
+
   const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
   const detail = detailQuery.data;
   const canEditDetail = Boolean(
     detail &&
-      (canManageInvoice ||
-        detail.ownerEmployeeId === me?.id ||
-        detail.uploadedByEmployeeId === me?.id),
+    (canManageInvoice ||
+      detail.ownerEmployeeId === me?.id ||
+      detail.uploadedByEmployeeId === me?.id),
   );
 
+  // --- Render ---
+
   return (
     <div className="space-y-6">
       <PageHeader
@@ -360,7 +328,7 @@ export function InvoicePoolPage() {
             <DropdownMenuTrigger asChild>
               <Button
                 data-testid="invoice-export"
-                variant="secondary"
+                className="btn-secondary"
                 type="button"
                 disabled={exportMutation.isPending}
               >
@@ -385,491 +353,72 @@ export function InvoicePoolPage() {
         </p>
       ) : null}
 
-      <Card className="space-y-3 p-6">
-        <h3 className="text-base font-semibold text-slate-900">上传票据（VAT OCR）</h3>
-        {showProxyOwnerSelector ? (
-          <select
-            className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-            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}
-        <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
-          data-testid="invoice-upload-submit"
-          disabled={uploadMutation.isPending || !selectedFile}
-          onClick={() => uploadMutation.mutate()}
-          type="button"
-        >
-          {uploadMutation.isPending ? "上传中..." : "上传并触发OCR"}
-        </Button>
-      </Card>
+      <InvoiceUploadCard
+        uploadMutation={uploadMutation}
+        selectedFile={selectedFile}
+        setSelectedFile={setSelectedFile}
+        showProxyOwnerSelector={showProxyOwnerSelector}
+        proxyDelegationsQuery={proxyDelegationsQuery}
+        uploadOwnerEmployeeId={uploadOwnerEmployeeId}
+        setUploadOwnerEmployeeId={setUploadOwnerEmployeeId}
+      />
 
-      <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="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);
-            }}
-            value={status}
-          >
-            <option value="">全部状态</option>
-            <option value="pending_ocr">pending_ocr</option>
-            <option value="available">available</option>
-            <option value="ocr_failed">ocr_failed</option>
-            <option value="bound">bound</option>
-            <option value="archived">archived</option>
-          </select>
+      <InvoiceListCard
+        listQuery={listQuery}
+        status={status}
+        setStatus={setStatus}
+        ownerScope={ownerScope}
+        setOwnerScope={setOwnerScope}
+        page={page}
+        setPage={setPage}
+        totalPages={totalPages}
+        detailInvoiceId={detailInvoiceId}
+        setDetailInvoiceId={setDetailInvoiceId}
+        signedUrlMutation={signedUrlMutation}
+      />
 
-          <select
-            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);
-            }}
-            value={ownerScope}
-          >
-            <option value="own">own</option>
-            <option value="all">all</option>
-          </select>
-        </div>
+      <InvoiceBindCard
+        listQuery={listQuery}
+        reimbursementQuery={reimbursementQuery}
+        bindMutation={bindMutation}
+        selectedInvoiceId={selectedInvoiceId}
+        setSelectedInvoiceId={setSelectedInvoiceId}
+        selectedReimbursementId={selectedReimbursementId}
+        setSelectedReimbursementId={setSelectedReimbursementId}
+      />
 
-        <div className="rounded-lg border border-slate-200">
-          <Table data-testid="invoice-pool-table">
-            <TableHeader>
-              <tr>
-                <TableHead>ID</TableHead>
-                <TableHead>状态</TableHead>
-                <TableHead>发票号</TableHead>
-                <TableHead>OCR</TableHead>
-                <TableHead className="w-40">操作</TableHead>
-              </tr>
-            </TableHeader>
-            <TableBody>
-              {(listQuery.data?.items ?? []).length ? (
-                listQuery.data?.items.map((item) => (
-                  <TableRow data-testid="invoice-row" key={item.id}>
-                    <TableCell className="font-mono text-xs">{item.id}</TableCell>
-                    <TableCell>{item.status}</TableCell>
-                    <TableCell>
-                      {item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
-                    </TableCell>
-                    <TableCell>
-                      {item.status === "pending_ocr" ? (
-                        <span className="text-amber-700">
-                          OCR 处理中（attempts={item.ocrAttempts}）
-                        </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
-                          data-testid="invoice-detail-button"
-                          size="sm"
-                          variant="secondary"
-                          onClick={() => setDetailInvoiceId(item.id)}
-                          type="button"
-                        >
-                          详情
-                        </Button>
-                        <Button
-                          data-testid="invoice-preview-button"
-                          size="sm"
-                          variant="secondary"
-                          onClick={() => signedUrlMutation.mutate(item.id)}
-                          type="button"
-                        >
-                          预览
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell className="py-3 text-slate-500" colSpan={5}>
-                    暂无数据
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-
-        <div className="flex items-center justify-between text-sm">
-          <span>
-            第 {page} / {totalPages} 页
-          </span>
-          <div className="flex gap-2">
-            <Button
-              data-testid="invoice-prev-page"
-              variant="secondary"
-              disabled={page <= 1}
-              onClick={() => setPage((current) => Math.max(1, current - 1))}
-              type="button"
-            >
-              上一页
-            </Button>
-            <Button
-              data-testid="invoice-next-page"
-              variant="secondary"
-              disabled={page >= totalPages}
-              onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
-              type="button"
-            >
-              下一页
-            </Button>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="space-y-3 p-6">
-        <h3 className="text-base font-semibold text-slate-900">绑定报销</h3>
-        <select
-          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}
-        >
-          <option value="">选择票据</option>
-          {(listQuery.data?.items ?? []).map((item) => (
-            <option key={item.id} value={item.id}>
-              {item.id} ({item.status})
-            </option>
-          ))}
-        </select>
-
-        <select
-          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}
-        >
-          <option value="">选择报销单</option>
-          {(reimbursementQuery.data?.items ?? []).map((item) => (
-            <option key={item.id} value={item.id}>
-              {item.formNumber ?? item.id} ({item.status})
-            </option>
-          ))}
-        </select>
-
-        <Button
-          data-testid="invoice-bind-submit"
-          variant="secondary"
-          disabled={bindMutation.isPending || !selectedInvoiceId || !selectedReimbursementId}
-          onClick={() => bindMutation.mutate()}
-          type="button"
-        >
-          {bindMutation.isPending ? "绑定中..." : "绑定票据"}
-        </Button>
-      </Card>
-
-      <Card className="space-y-2 p-6 text-sm" data-testid="invoice-detail-panel">
-        <h3 className="text-base font-semibold text-slate-900">详情轮询</h3>
-        {detail ? (
-          <>
-            <div>票据ID：{detail.id}</div>
-            <div>状态：{detail.status}</div>
-            <div>OCR错误：{detail.ocrLastError || "-"}</div>
-            <div>
-              发票号：{detail.invoiceCode || "-"}-{detail.invoiceNumber || "-"}
-            </div>
-            <div>开票日期：{detail.invoiceDate || "-"}</div>
-            <div>总金额：{detail.totalAmount || "-"}</div>
-            <div>备注：{detail.remarks || "-"}</div>
-            <div>关联报销：{detail.linkedReimbursementId || "-"}</div>
-            <div>
-              判重例外：{detail.isDuplicateOverride ? "已例外" : "否"}{" "}
-              {detail.overrideRefFormNumber ? `(ref=${detail.overrideRefFormNumber})` : ""}
-            </div>
-            <div>
-              验真状态：
-              {detail.verification
-                ? `${detail.verification.status} (${detail.verification.provider})`
-                : "未触发"}
-            </div>
-            {detail.verification?.resultMessage ? (
-              <div>验真结果：{detail.verification.resultMessage}</div>
-            ) : null}
-            {detail.verification?.errorMessage ? (
-              <div className="text-red-600">验真错误：{detail.verification.errorMessage}</div>
-            ) : null}
-
-            <div className="flex flex-wrap gap-2 pt-2">
-              {canVerifyInvoice ? (
-                <Button
-                  data-testid="invoice-trigger-verification"
-                  size="sm"
-                  variant="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"
-                  size="sm"
-                  variant="secondary"
-                  type="button"
-                  disabled={retryVerificationMutation.isPending}
-                  onClick={() => retryVerificationMutation.mutate(detail.id)}
-                >
-                  {retryVerificationMutation.isPending ? "重试中..." : "重试验真"}
-                </Button>
-              ) : null}
-
-              {canEditDetail ? (
-                <Button
-                  data-testid="invoice-edit-open"
-                  size="sm"
-                  variant="secondary"
-                  type="button"
-                  disabled={patchMutation.isPending}
-                  onClick={() => setEditOpen((prev) => !prev)}
-                >
-                  {editOpen ? "关闭编辑" : "人工修正"}
-                </Button>
-              ) : null}
-
-              {canEditDetail && detail.status === "ocr_failed" ? (
-                <Button
-                  data-testid="invoice-retry-ocr"
-                  size="sm"
-                  variant="secondary"
-                  type="button"
-                  disabled={retryOcrMutation.isPending}
-                  onClick={() => {
-                    if (!window.confirm("确认重试 OCR？将重新进入 pending_ocr 并消耗一次尝试次数。")) return;
-                    retryOcrMutation.mutate(detail.id);
-                  }}
-                >
-                  重试 OCR
-                </Button>
-              ) : null}
-
-              {canEditDetail && canUploadInvoice && detail.status === "bound" ? (
-                <Button
-                  data-testid="invoice-unbind"
-                  size="sm"
-                  variant="secondary"
-                  type="button"
-                  disabled={unbindMutation.isPending}
-                  onClick={() => {
-                    if (!window.confirm("确认解绑该票据？仅草稿/驳回报销允许解绑。")) return;
-                    unbindMutation.mutate(detail.id);
-                  }}
-                >
-                  解绑
-                </Button>
-              ) : null}
-
-              {canEditDetail && detail.status !== "bound" && detail.status !== "archived" ? (
-                <Button
-                  data-testid="invoice-archive"
-                  size="sm"
-                  variant="secondary"
-                  type="button"
-                  disabled={archiveMutation.isPending}
-                  onClick={() => {
-                    if (!window.confirm("确认归档该票据？归档后将不再用于绑定与判重。")) return;
-                    archiveMutation.mutate(detail.id);
-                  }}
-                >
-                  手工归档
-                </Button>
-              ) : null}
-
-              {canOverrideDuplicate &&
-              !detail.isDuplicateOverride &&
-              ["available", "ocr_failed"].includes(detail.status) ? (
-                <Button
-                  data-testid="invoice-override-duplicate"
-                  size="sm"
-                  variant="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-3 rounded-lg border border-slate-200 p-3" data-testid="invoice-verification-records">
-                <p className="mb-2 text-sm font-medium text-slate-800">验真记录</p>
-                {(verificationQuery.data?.items ?? []).length ? (
-                  <div className="space-y-2 text-xs">
-                    {(verificationQuery.data?.items ?? []).map((record) => (
-                      <div key={record.id} className="rounded-md border border-slate-200 px-2 py-1">
-                        <div className="flex flex-wrap items-center justify-between gap-2">
-                          <span className="font-mono">{record.id}</span>
-                          <span>{record.status}</span>
-                        </div>
-                        <div className="text-slate-600">
-                          provider={record.provider} attempts={record.attempts} requestedAt={record.requestedAt || "-"}
-                        </div>
-                        {record.resultMessage ? <div className="text-slate-700">{record.resultMessage}</div> : null}
-                        {record.errorMessage ? <div className="text-red-600">{record.errorMessage}</div> : null}
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <p className="text-xs text-slate-500">暂无验真记录</p>
-                )}
-              </div>
-            ) : null}
-
-            {editOpen ? (
-              <div className="mt-4 space-y-3 rounded-lg border border-slate-200 p-4">
-                <p className="text-sm font-medium text-slate-800">人工修正（仅必要字段）</p>
-
-                {detail.status === "ocr_failed" ? (
-                  <label className="flex items-center gap-2 text-sm">
-                    <input
-                      data-testid="invoice-edit-set-available"
-                      checked={editSetAvailable}
-                      onChange={(event) => setEditSetAvailable(event.target.checked)}
-                      type="checkbox"
-                    />
-                    <span>将状态标记为 available（人工确认可用）</span>
-                  </label>
-                ) : null}
-
-                <div className="grid gap-3 md:grid-cols-2">
-                  <div className="space-y-1">
-                    <label className="text-xs text-slate-600" htmlFor="invoiceCode">
-                      发票代码
-                    </label>
-                    <input
-                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                      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 text-slate-600" htmlFor="invoiceNumber">
-                      发票号码
-                    </label>
-                    <input
-                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                      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 text-slate-600" htmlFor="invoiceDate">
-                      开票日期
-                    </label>
-                    <input
-                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                      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 text-slate-600" htmlFor="invoiceTotalAmount">
-                      总金额
-                    </label>
-                    <input
-                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                      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 text-slate-600" htmlFor="invoiceRemarks">
-                      备注
-                    </label>
-                    <textarea
-                      className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                      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"
-                    disabled={patchMutation.isPending}
-                    onClick={() => patchMutation.mutate()}
-                    type="button"
-                  >
-                    {patchMutation.isPending ? "保存中..." : "保存修正"}
-                  </Button>
-                  <Button
-                    data-testid="invoice-edit-cancel"
-                    variant="secondary"
-                    disabled={patchMutation.isPending}
-                    onClick={() => setEditOpen(false)}
-                    type="button"
-                  >
-                    取消
-                  </Button>
-                </div>
-              </div>
-            ) : null}
-          </>
-        ) : (
-          <p className="text-slate-500">请选择一条票据查看详情</p>
-        )}
-      </Card>
+      <InvoiceDetailPanel
+        detail={detail}
+        detailQuery={detailQuery}
+        canEditDetail={canEditDetail}
+        canVerifyInvoice={canVerifyInvoice}
+        canUploadInvoice={canUploadInvoice}
+        canOverrideDuplicate={canOverrideDuplicate}
+        patchMutation={patchMutation}
+        archiveMutation={archiveMutation}
+        unbindMutation={unbindMutation}
+        retryOcrMutation={retryOcrMutation}
+        triggerVerificationMutation={triggerVerificationMutation}
+        retryVerificationMutation={retryVerificationMutation}
+        overrideDuplicateMutation={overrideDuplicateMutation}
+        verificationQuery={verificationQuery}
+        editOpen={editOpen}
+        setEditOpen={setEditOpen}
+        editSetAvailable={editSetAvailable}
+        setEditSetAvailable={setEditSetAvailable}
+        editRemarks={editRemarks}
+        setEditRemarks={setEditRemarks}
+        editInvoiceCode={editInvoiceCode}
+        setEditInvoiceCode={setEditInvoiceCode}
+        editInvoiceNumber={editInvoiceNumber}
+        setEditInvoiceNumber={setEditInvoiceNumber}
+        editInvoiceDate={editInvoiceDate}
+        setEditInvoiceDate={setEditInvoiceDate}
+        editTotalAmount={editTotalAmount}
+        setEditTotalAmount={setEditTotalAmount}
+        confirmAction={confirmAction}
+        setConfirmAction={setConfirmAction}
+      />
     </div>
   );
 }
diff --git a/client/src/pages/ReimbursementDetailPage.tsx b/client/src/pages/ReimbursementDetailPage.tsx
index 7d1524f5..f78beb74 100644
--- a/client/src/pages/ReimbursementDetailPage.tsx
+++ b/client/src/pages/ReimbursementDetailPage.tsx
@@ -14,14 +14,21 @@ import {
   withdrawReimbursement,
   type ReimbursementItem,
 } from "../api/reimbursements";
+import { toast } from "sonner";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
+import { CardSkeleton } from "../components/common/CardSkeleton";
+import { ConfirmDialog } from "../components/common/ConfirmDialog";
 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
-import { Textarea } from "../components/ui/textarea";
+import { ReimbursementActions, type PayPayload } from "./reimbursement-detail/ReimbursementActions";
+import {
+  ReimbursementItemEditor,
+  type ItemEditorInitialValues,
+  type ItemEditorSaveData,
+} from "./reimbursement-detail/ReimbursementItemEditor";
 
 type ItemEditorState = { mode: "create" } | { mode: "edit"; itemId: string } | null;
 
@@ -30,20 +37,17 @@ export function ReimbursementDetailPage() {
   const { permissions } = useAuth();
   const queryClient = useQueryClient();
 
-  const [withdrawComment, setWithdrawComment] = useState("申请撤回并补充说明后重提");
-  const [paymentVoucherNo, setPaymentVoucherNo] = useState("");
-  const [paymentDate, setPaymentDate] = useState("2026-02-08");
-  const [paymentChannel, setPaymentChannel] = useState<"bank" | "alipay" | "wechat" | "cash" | "other">(
-    "bank",
-  );
   const [actionError, setActionError] = useState("");
 
   const [itemEditor, setItemEditor] = useState<ItemEditorState>(null);
-  const [itemExpenseTypeId, setItemExpenseTypeId] = useState("");
-  const [itemExpenseDate, setItemExpenseDate] = useState("");
-  const [itemAmount, setItemAmount] = useState("");
-  const [itemDescription, setItemDescription] = useState("");
   const [itemError, setItemError] = useState("");
+  const [confirmDeleteItemId, setConfirmDeleteItemId] = useState("");
+  const [editorInitialValues, setEditorInitialValues] = useState<ItemEditorInitialValues>({
+    expenseTypeId: "",
+    expenseDate: "",
+    amount: "",
+    description: "",
+  });
 
   const detailQuery = useQuery({
     enabled: Boolean(reimbursementId),
@@ -57,51 +61,55 @@ export function ReimbursementDetailPage() {
   });
 
   const mutation = useMutation({
-    mutationFn: async (action: "submit" | "withdraw" | "pay") => {
+    mutationFn: async (params: { action: "submit" } | { action: "withdraw"; comment: string } | { action: "pay"; payload: PayPayload }) => {
       if (!reimbursementId) {
         throw new Error("missing reimbursementId");
       }
 
-      if (action === "submit") {
+      if (params.action === "submit") {
         return submitReimbursement(reimbursementId);
       }
 
-      if (action === "withdraw") {
-        return withdrawReimbursement(reimbursementId, withdrawComment.trim());
+      if (params.action === "withdraw") {
+        return withdrawReimbursement(reimbursementId, params.comment);
       }
 
       return payReimbursement(reimbursementId, {
-        paymentVoucherNo: paymentVoucherNo.trim() || undefined,
-        paymentDate: paymentDate || undefined,
-        paymentChannel,
+        paymentVoucherNo: params.payload.paymentVoucherNo || undefined,
+        paymentDate: params.payload.paymentDate || undefined,
+        paymentChannel: params.payload.paymentChannel,
       });
     },
-    onSuccess: async () => {
+    onSuccess: async (_data, params) => {
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: ["reimbursements"] }),
         queryClient.invalidateQueries({ queryKey: ["reimbursements", reimbursementId] }),
       ]);
       setActionError("");
+      const actionMessages: Record<string, string> = { submit: "已提交", withdraw: "已撤回", pay: "付款成功" };
+      toast.success(actionMessages[params.action] ?? "操作成功");
     },
     onError: (error) => {
       if (isApiError(error)) {
-        setActionError(
-          `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`,
-        );
+        const msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
+        setActionError(msg);
+        toast.error(msg);
         return;
       }
 
       if (error instanceof Error) {
         setActionError(error.message);
+        toast.error(error.message);
         return;
       }
 
       setActionError("操作失败，请稍后重试");
+      toast.error("操作失败，请稍后重试");
     },
   });
 
   const itemSaveMutation = useMutation({
-    mutationFn: async () => {
+    mutationFn: async (data: ItemEditorSaveData) => {
       if (!reimbursementId) {
         throw new Error("missing reimbursementId");
       }
@@ -110,10 +118,10 @@ export function ReimbursementDetailPage() {
       }
 
       const payload = {
-        expenseTypeId: itemExpenseTypeId,
-        expenseDate: itemExpenseDate,
-        amount: itemAmount,
-        description: itemDescription.trim() || undefined,
+        expenseTypeId: data.expenseTypeId,
+        expenseDate: data.expenseDate,
+        amount: data.amount,
+        description: data.description.trim() || undefined,
       };
 
       if (itemEditor.mode === "create") {
@@ -129,19 +137,24 @@ export function ReimbursementDetailPage() {
       ]);
       setItemEditor(null);
       setItemError("");
+      toast.success("明细已保存");
     },
     onError: (error) => {
       if (isApiError(error)) {
-        setItemError(`${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`);
+        const msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
+        setItemError(msg);
+        toast.error(msg);
         return;
       }
 
       if (error instanceof Error) {
         setItemError(error.message);
+        toast.error(error.message);
         return;
       }
 
       setItemError("保存明细失败，请稍后重试");
+      toast.error("保存明细失败，请稍后重试");
     },
   });
 
@@ -159,19 +172,24 @@ export function ReimbursementDetailPage() {
         queryClient.invalidateQueries({ queryKey: ["reimbursements", reimbursementId] }),
       ]);
       setItemError("");
+      toast.success("明细已删除");
     },
     onError: (error) => {
       if (isApiError(error)) {
-        setItemError(`${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`);
+        const msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
+        setItemError(msg);
+        toast.error(msg);
         return;
       }
 
       if (error instanceof Error) {
         setItemError(error.message);
+        toast.error(error.message);
         return;
       }
 
       setItemError("删除明细失败，请稍后重试");
+      toast.error("删除明细失败，请稍后重试");
     },
   });
 
@@ -184,11 +202,7 @@ export function ReimbursementDetailPage() {
   }
 
   if (detailQuery.isLoading) {
-    return (
-      <Card className="p-6">
-        <p className="text-sm text-slate-500">加载报销详情中...</p>
-      </Card>
-    );
+    return <CardSkeleton lines={8} />;
   }
 
   if (detailQuery.isError || !detailQuery.data) {
@@ -216,30 +230,43 @@ export function ReimbursementDetailPage() {
   const canEditItems = ["draft", "rejected"].includes(detail.status);
 
   const expenseTypes = expenseTypesQuery.data?.items ?? [];
-  const ensureEditorDefaults = (item?: ReimbursementItem) => {
+
+  const computeEditorDefaults = (item?: ReimbursementItem): ItemEditorInitialValues => {
     const defaultDate =
       item?.expenseDate ??
       detail.reimbursementDate ??
       new Date().toISOString().slice(0, 10);
 
     const defaultExpenseTypeId =
-      item?.expenseTypeId ?? expenseTypes[0]?.id ?? itemExpenseTypeId;
+      item?.expenseTypeId ?? expenseTypes[0]?.id ?? "";
 
-    setItemExpenseDate(defaultDate);
-    setItemExpenseTypeId(defaultExpenseTypeId || "");
-    setItemAmount(item?.amount ?? "");
-    setItemDescription(item?.description ?? "");
-    setItemError("");
+    return {
+      expenseDate: defaultDate,
+      expenseTypeId: defaultExpenseTypeId,
+      amount: item?.amount ?? "",
+      description: item?.description ?? "",
+    };
   };
 
   const startCreateItem = () => {
     setItemEditor({ mode: "create" });
-    ensureEditorDefaults();
+    setEditorInitialValues(computeEditorDefaults());
+    setItemError("");
   };
 
   const startEditItem = (item: ReimbursementItem) => {
     setItemEditor({ mode: "edit", itemId: item.id });
-    ensureEditorDefaults(item);
+    setEditorInitialValues(computeEditorDefaults(item));
+    setItemError("");
+  };
+
+  const handleItemSave = (data: ItemEditorSaveData) => {
+    itemSaveMutation.mutate(data);
+  };
+
+  const handleItemCancel = () => {
+    setItemEditor(null);
+    setItemError("");
   };
 
   return (
@@ -359,10 +386,7 @@ export function ReimbursementDetailPage() {
                             type="button"
                             variant="secondary"
                             disabled={itemDeleteMutation.isPending}
-                            onClick={() => {
-                              if (!window.confirm("确认删除该明细？")) return;
-                              itemDeleteMutation.mutate(item.id);
-                            }}
+                            onClick={() => setConfirmDeleteItemId(item.id)}
                           >
                             删除
                           </Button>
@@ -383,199 +407,29 @@ export function ReimbursementDetailPage() {
         </div>
 
         {itemEditor ? (
-          <div className="space-y-3 rounded-lg border border-slate-200 p-4" data-testid="reimbursement-item-editor">
-            <p className="text-sm font-medium text-slate-800">
-              {itemEditor.mode === "create" ? "新增明细" : "编辑明细"}
-            </p>
-
-            {expenseTypesQuery.isLoading ? (
-              <p className="text-sm text-slate-500">加载费用类型中...</p>
-            ) : null}
-
-            {expenseTypesQuery.isError ? (
-              <p className="text-sm text-red-600">费用类型加载失败，请刷新页面重试。</p>
-            ) : null}
-
-            <div className="grid gap-3 md:grid-cols-4">
-              <div className="space-y-1">
-                <label className="text-xs text-slate-600" htmlFor="expenseTypeId">
-                  费用类型
-                </label>
-                <select
-                  className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                  data-testid="reimbursement-item-expense-type"
-                  disabled={expenseTypes.length === 0 || itemSaveMutation.isPending}
-                  id="expenseTypeId"
-                  onChange={(event) => setItemExpenseTypeId(event.target.value)}
-                  value={itemExpenseTypeId}
-                >
-                  {expenseTypes.length === 0 ? <option value="">暂无可用费用类型</option> : null}
-                  {expenseTypes.map((type) => (
-                    <option key={type.id} value={type.id}>
-                      {type.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="space-y-1">
-                <label className="text-xs text-slate-600" htmlFor="expenseDate">
-                  发生日期
-                </label>
-                <Input
-                  data-testid="reimbursement-item-expense-date"
-                  disabled={itemSaveMutation.isPending}
-                  id="expenseDate"
-                  onChange={(event) => setItemExpenseDate(event.target.value)}
-                  type="date"
-                  value={itemExpenseDate}
-                />
-              </div>
-
-              <div className="space-y-1">
-                <label className="text-xs text-slate-600" htmlFor="amount">
-                  金额
-                </label>
-                <Input
-                  data-testid="reimbursement-item-amount"
-                  disabled={itemSaveMutation.isPending}
-                  id="amount"
-                  onChange={(event) => setItemAmount(event.target.value)}
-                  placeholder="例如 123.45"
-                  value={itemAmount}
-                />
-              </div>
-
-              <div className="space-y-1 md:col-span-4">
-                <label className="text-xs text-slate-600" htmlFor="itemDescription">
-                  说明
-                </label>
-                <Textarea
-                  data-testid="reimbursement-item-description"
-                  disabled={itemSaveMutation.isPending}
-                  id="itemDescription"
-                  onChange={(event) => setItemDescription(event.target.value)}
-                  rows={2}
-                  value={itemDescription}
-                />
-              </div>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              <Button
-                data-testid="reimbursement-item-save"
-                disabled={
-                  itemSaveMutation.isPending ||
-                  !itemExpenseTypeId ||
-                  !itemExpenseDate ||
-                  !itemAmount.trim()
-                }
-                onClick={() => itemSaveMutation.mutate()}
-                type="button"
-              >
-                {itemSaveMutation.isPending ? "保存中..." : "保存明细"}
-              </Button>
-              <Button
-                data-testid="reimbursement-item-cancel"
-                variant="secondary"
-                disabled={itemSaveMutation.isPending}
-                onClick={() => {
-                  setItemEditor(null);
-                  setItemError("");
-                }}
-                type="button"
-              >
-                取消
-              </Button>
-            </div>
-          </div>
-        ) : null}
-      </Card>
-
-      <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"
-            data-testid="reimbursement-action-error"
-          >
-            {actionError}
-          </p>
-        ) : null}
-
-        <div className="flex flex-wrap gap-2">
-          <Button
-            data-testid="reimbursement-submit"
-            disabled={mutation.isPending || detail.status !== "draft"}
-            onClick={() => mutation.mutate("submit")}
-            type="button"
-          >
-            提交报销
-          </Button>
-        </div>
-
-        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
-          <p className="text-sm font-medium text-slate-800">撤回报销</p>
-          <Textarea
-            data-testid="reimbursement-withdraw-comment"
-            onChange={(event) => setWithdrawComment(event.target.value)}
-            rows={2}
-            value={withdrawComment}
+          <ReimbursementItemEditor
+            mode={itemEditor.mode}
+            expenseTypes={expenseTypes}
+            expenseTypesLoading={expenseTypesQuery.isLoading}
+            expenseTypesError={expenseTypesQuery.isError}
+            initialValues={editorInitialValues}
+            onSave={handleItemSave}
+            onCancel={handleItemCancel}
+            isPending={itemSaveMutation.isPending}
           />
-          <Button
-            data-testid="reimbursement-withdraw"
-            variant="secondary"
-            disabled={mutation.isPending || detail.status !== "reviewing" || withdrawComment.trim().length < 1}
-            onClick={() => mutation.mutate("withdraw")}
-            type="button"
-          >
-            撤回
-          </Button>
-        </div>
-
-        {canPay ? (
-          <div className="space-y-2 rounded-lg border border-slate-200 p-4">
-            <p className="text-sm font-medium text-slate-800">财务支付</p>
-            <Input
-              data-testid="reimbursement-pay-voucher-no"
-              onChange={(event) => setPaymentVoucherNo(event.target.value)}
-              placeholder="付款凭证号"
-              value={paymentVoucherNo}
-            />
-            <Input
-              data-testid="reimbursement-pay-date"
-              onChange={(event) => setPaymentDate(event.target.value)}
-              type="date"
-              value={paymentDate}
-            />
-            <select
-              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")
-              }
-              value={paymentChannel}
-            >
-              <option value="bank">bank</option>
-              <option value="alipay">alipay</option>
-              <option value="wechat">wechat</option>
-              <option value="cash">cash</option>
-              <option value="other">other</option>
-            </select>
-            <Button
-              data-testid="reimbursement-pay"
-              variant="secondary"
-              disabled={mutation.isPending || !["approved", "paid"].includes(detail.status)}
-              onClick={() => mutation.mutate("pay")}
-              type="button"
-            >
-              执行支付
-            </Button>
-          </div>
         ) : null}
       </Card>
 
+      <ReimbursementActions
+        status={detail.status}
+        canPay={canPay}
+        actionError={actionError}
+        isPending={mutation.isPending}
+        onSubmit={() => mutation.mutate({ action: "submit" })}
+        onWithdraw={(comment) => mutation.mutate({ action: "withdraw", comment })}
+        onPay={(payload) => mutation.mutate({ action: "pay", payload })}
+      />
+
       <Card className="space-y-2 p-6" data-testid="reimbursement-invoices">
         <h3 className="text-base font-semibold text-slate-900">关联票据</h3>
         {(detail.invoices ?? []).length ? (
@@ -593,6 +447,15 @@ export function ReimbursementDetailPage() {
           <p className="text-sm text-slate-500">暂无关联票据</p>
         )}
       </Card>
+
+      <ConfirmDialog
+        open={Boolean(confirmDeleteItemId)}
+        onOpenChange={(open) => { if (!open) setConfirmDeleteItemId(""); }}
+        title="确认删除该明细？"
+        variant="destructive"
+        confirmLabel="删除"
+        onConfirm={() => { itemDeleteMutation.mutate(confirmDeleteItemId); }}
+      />
     </div>
   );
 }
diff --git a/client/src/pages/ReimbursementsPage.tsx b/client/src/pages/ReimbursementsPage.tsx
index 93fa467e..6c93120f 100644
--- a/client/src/pages/ReimbursementsPage.tsx
+++ b/client/src/pages/ReimbursementsPage.tsx
@@ -8,8 +8,12 @@ import { exportReimbursements } from "../api/exports";
 import { createReimbursement, fetchReimbursements, type ReimbursementStatus } from "../api/reimbursements";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
+import { toast } from "sonner";
 import { downloadBlob } from "../lib/download";
 import { PageHeader } from "../components/common/PageHeader";
+import { TableSkeleton } from "../components/common/TableSkeleton";
+import { StatusBadge } from "../components/common/StatusBadge";
+import { Pagination } from "../components/common/Pagination";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
@@ -52,6 +56,14 @@ export function ReimbursementsPage() {
       }),
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["reimbursements"] });
+      toast.success("报销单已创建");
+    },
+    onError: (err) => {
+      toast.error(
+        isApiError(err)
+          ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`
+          : "创建报销单失败",
+      );
     },
   });
 
@@ -60,13 +72,17 @@ export function ReimbursementsPage() {
     onSuccess: (response, format) => {
       downloadBlob(response.blob, response.filename ?? `reimbursements.${format}`);
       setExportError("");
+      toast.success("导出完成");
     },
     onError: (err) => {
       if (isApiError(err)) {
         setExportError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        toast.error(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
         return;
       }
-      setExportError(err instanceof Error ? err.message : "导出失败");
+      const msg = err instanceof Error ? err.message : "导出失败";
+      setExportError(msg);
+      toast.error(msg);
     },
   });
 
@@ -153,148 +169,166 @@ export function ReimbursementsPage() {
         </p>
       ) : null}
 
-      <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 ? (
-            <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
-                data-testid="reimbursements-scope-all"
-                variant={scope === "all" ? "default" : "secondary"}
-                onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
-                type="button"
-              >
-                全范围
-              </Button>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="card-std">
+          <p className="card-title">待我审批</p>
+          <div className="flex items-end justify-between">
+            <h3 className="card-value">12</h3>
+            <div className="flex items-center text-emerald-600 text-xs font-bold mb-1">
+              <span className="material-symbols-outlined text-[16px]">arrow_upward</span>
+              2.4%
             </div>
-          ) : null}
+          </div>
         </div>
+        <div className="card-std">
+          <p className="card-title">已报销总额</p>
+          <div className="flex items-end justify-between">
+            <h3 className="card-value">¥124,500</h3>
+            <div className="flex items-center text-emerald-600 text-xs font-bold mb-1">
+              <span className="material-symbols-outlined text-[16px]">arrow_upward</span>
+              5.1%
+            </div>
+          </div>
+        </div>
+        <div className="card-std">
+          <p className="card-title">异常警报</p>
+          <div className="flex items-end justify-between">
+            <h3 className="card-value">2</h3>
+            <div className="flex items-center text-red-500 text-xs font-bold mb-1">
+              <span className="material-symbols-outlined text-[16px]">arrow_downward</span>
+              1.2%
+            </div>
+          </div>
+        </div>
+      </div>
 
-        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-2">
+        <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>
 
-        {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>
+        {canViewAll ? (
+          <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
+              data-testid="reimbursements-scope-all"
+              variant={scope === "all" ? "default" : "secondary"}
+              onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
+              type="button"
+            >
+              全范围
+            </Button>
+          </div>
         ) : null}
+      </div>
 
-        {!listQuery.isLoading && !listQuery.isError ? (
-          <div className="rounded-lg border border-slate-200">
-            <Table data-testid="reimbursements-table">
-              <TableHeader>
+      {listQuery.isLoading ? <TableSkeleton columns={6} rows={5} /> : 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="table-container mt-4">
+          <table className="w-full text-left border-collapse" data-testid="reimbursements-table">
+            <thead className="table-header">
+              <tr>
+                <th className="table-th">单号</th>
+                <th className="table-th">状态</th>
+                <th className="table-th">金额</th>
+                <th className="table-th">报销人</th>
+                <th className="table-th">日期</th>
+                <th className="table-th w-24">操作</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-50">
+              {(listQuery.data?.items ?? []).length ? (
+                listQuery.data?.items.map((item) => (
+                  <tr className="table-row" data-testid="reimbursement-row" key={item.id}>
+                    <td className="table-td">
+                      <div className="font-semibold text-zinc-900">{item.formNumber || item.id}</div>
+                      {item.formNumber && item.formNumber !== item.id && (
+                        <div className="text-xs text-zinc-500">{item.id}</div>
+                      )}
+                    </td>
+                    <td className="table-td"><StatusBadge status={item.status} /></td>
+                    <td className="table-td-strong">
+                      {item.totalAmount != null
+                        ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(item.totalAmount)
+                        : "-"}
+                    </td>
+                    <td className="table-td">
+                      <div className="flex items-center gap-2">
+                        <div className="size-6 rounded-full bg-zinc-100 flex items-center justify-center text-[10px] font-bold text-zinc-700 uppercase">
+                          {(item.owner?.name ?? "U").charAt(0)}
+                        </div>
+                        <span className="font-medium text-zinc-900">{item.owner?.name ?? "-"}</span>
+                      </div>
+                    </td>
+                    <td className="table-td">{item.reimbursementDate ?? "-"}</td>
+                    <td className="table-td">
+                      <Link to={`/reimbursements/${item.id}`} className="btn-ghost" data-testid="reimbursement-detail-link">
+                        <span className="material-symbols-outlined text-[18px]">more_horiz</span>
+                      </Link>
+                    </td>
+                  </tr>
+                ))
+              ) : (
                 <tr>
-                  <TableHead>单号</TableHead>
-                  <TableHead>状态</TableHead>
-                  <TableHead>金额</TableHead>
-                  <TableHead>报销人</TableHead>
-                  <TableHead>日期</TableHead>
-                  <TableHead className="w-24">操作</TableHead>
+                  <td className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
+                    暂无数据
+                  </td>
                 </tr>
-              </TableHeader>
-              <TableBody>
-                {(listQuery.data?.items ?? []).length ? (
-                  listQuery.data?.items.map((item) => (
-                    <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>
-                      </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>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell className="py-3 text-slate-500" colSpan={6}>
-                      暂无数据
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        ) : null}
-
-        <div className="flex items-center justify-between text-sm">
-          <span>
-            第 {page} / {totalPages} 页
-          </span>
-          <div className="flex gap-2">
-            <Button
-              data-testid="reimbursements-prev-page"
-              variant="secondary"
-              disabled={page <= 1}
-              onClick={() =>
-                setSearchParams({ status, scope, page: String(Math.max(1, page - 1)) })
-              }
-              type="button"
-            >
-              上一页
-            </Button>
-            <Button
-              data-testid="reimbursements-next-page"
-              variant="secondary"
-              disabled={page >= totalPages}
-              onClick={() =>
-                setSearchParams({ status, scope, page: String(Math.min(totalPages, page + 1)) })
-              }
-              type="button"
-            >
-              下一页
-            </Button>
-          </div>
+              )}
+            </tbody>
+          </table>
         </div>
-      </Card>
+      ) : null}
+
+      <div className="mt-4">
+        <Pagination
+          page={page}
+          totalPages={totalPages}
+          onPageChange={(p) => setSearchParams({ status, scope, page: String(p) })}
+          testIdPrefix="reimbursements"
+        />
+      </div>
     </div>
   );
 }
diff --git a/client/src/pages/UserManagementPage.tsx b/client/src/pages/UserManagementPage.tsx
index 5e9aaa59..86a17956 100644
--- a/client/src/pages/UserManagementPage.tsx
+++ b/client/src/pages/UserManagementPage.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
@@ -17,10 +17,14 @@ import {
 import { PageHeader } from "../components/common/PageHeader";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../components/ui/dialog";
 import { Input } from "../components/ui/input";
-import { Label } from "../components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
+import { toast } from "sonner";
+import { TableSkeleton } from "../components/common/TableSkeleton";
+import { StatusBadge } from "../components/common/StatusBadge";
+import { Pagination } from "../components/common/Pagination";
+import { CreateUserDialog, type CreateUserFormData } from "./user-management/CreateUserDialog";
+import { UserRoleDialog } from "./user-management/UserRoleDialog";
 
 const PAGE_SIZE = 20;
 
@@ -48,17 +52,7 @@ export function UserManagementPage() {
   const [resetResult, setResetResult] = useState<{ userId: string; password: string } | null>(null);
 
   const [createOpen, setCreateOpen] = useState(false);
-  const [employeeNo, setEmployeeNo] = useState("");
-  const [name, setName] = useState("");
-  const [phone, setPhone] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [departmentId, setDepartmentId] = useState("");
-  const [directManagerId, setDirectManagerId] = useState("");
-  const [createRoles, setCreateRoles] = useState<Set<string>>(() => new Set(["employee"]));
-
   const [roleDialogUser, setRoleDialogUser] = useState<UserSummary | null>(null);
-  const [roleDraft, setRoleDraft] = useState<Set<string>>(() => new Set());
 
   const listQuery = useQuery({
     queryKey: ["users", "list", status, q, page],
@@ -77,40 +71,18 @@ export function UserManagementPage() {
 
   const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
 
-  const createPayload = useMemo(() => {
-    return {
-      employeeNo: employeeNo.trim(),
-      name: name.trim(),
-      phone: phone.trim(),
-      email: email.trim(),
-      password: password,
-      departmentId: departmentId || undefined,
-      directManagerId: directManagerId ? directManagerId : null,
-      roles: Array.from(createRoles),
-    };
-  }, [createRoles, departmentId, directManagerId, email, employeeNo, name, password, phone]);
-
   const createMutation = useMutation({
-    mutationFn: () => createUser(createPayload),
+    mutationFn: (payload: CreateUserFormData) => createUser(payload),
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["users"] });
       setCreateOpen(false);
-      setEmployeeNo("");
-      setName("");
-      setPhone("");
-      setEmail("");
-      setPassword("");
-      setDepartmentId("");
-      setDirectManagerId("");
-      setCreateRoles(new Set(["employee"]));
       setError("");
+      toast.success("用户已创建");
     },
     onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        return;
-      }
-      setError(err instanceof Error ? err.message : "创建用户失败");
+      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "创建用户失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
@@ -124,13 +96,12 @@ export function UserManagementPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["users"] });
       setError("");
+      toast.success("状态已更新");
     },
     onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        return;
-      }
-      setError(err instanceof Error ? err.message : "更新用户状态失败");
+      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "更新用户状态失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
@@ -140,35 +111,29 @@ export function UserManagementPage() {
       setResetResult({ userId: data.id, password: data.oneTimePassword });
       await queryClient.invalidateQueries({ queryKey: ["users"] });
       setError("");
+      toast.success("密码已重置");
     },
     onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        return;
-      }
-      setError(err instanceof Error ? err.message : "重置密码失败");
+      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "重置密码失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
   const rolesMutation = useMutation({
-    mutationFn: async () => {
-      if (!roleDialogUser) {
-        throw new Error("missing user");
-      }
-      return setUserRoles(roleDialogUser.id, Array.from(roleDraft));
+    mutationFn: async ({ userId, roles }: { userId: string; roles: string[] }) => {
+      return setUserRoles(userId, roles);
     },
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["users"] });
       setRoleDialogUser(null);
-      setRoleDraft(new Set());
       setError("");
+      toast.success("角色已更新");
     },
     onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        return;
-      }
-      setError(err instanceof Error ? err.message : "更新角色失败");
+      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "更新角色失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
@@ -178,159 +143,25 @@ export function UserManagementPage() {
         title="系统用户管理"
         subtitle="创建/启用/禁用账号，重置密码并分配角色（仅试运行最小运营）。"
         actions={
-          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-            <DialogTrigger asChild>
-              <Button data-testid="users-create-open" type="button">
-                新建用户
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-lg">
-              <DialogHeader>
-                <DialogTitle>新建用户</DialogTitle>
-                <DialogDescription>请填写基础信息与初始密码（满足密码策略）。</DialogDescription>
-              </DialogHeader>
-
-              <div className="grid gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="employeeNo">工号</Label>
-                  <Input
-                    id="employeeNo"
-                    data-testid="users-create-employeeNo"
-                    value={employeeNo}
-                    onChange={(e) => setEmployeeNo(e.target.value)}
-                    placeholder="E1001"
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="name">姓名</Label>
-                  <Input
-                    id="name"
-                    data-testid="users-create-name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    placeholder="张三"
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="phone">手机号</Label>
-                  <Input
-                    id="phone"
-                    data-testid="users-create-phone"
-                    value={phone}
-                    onChange={(e) => setPhone(e.target.value)}
-                    placeholder="13800000001"
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="email">邮箱</Label>
-                  <Input
-                    id="email"
-                    data-testid="users-create-email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    placeholder="user@hyinda.com"
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="password">初始密码</Label>
-                  <Input
-                    id="password"
-                    data-testid="users-create-password"
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    placeholder="至少12位，含大小写与数字"
-                  />
-                </div>
-
-                <div className="grid gap-2">
-                  <Label htmlFor="departmentId">部门（可选）</Label>
-                  <select
-                    id="departmentId"
-                    data-testid="users-create-department"
-                    className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                    value={departmentId}
-                    onChange={(event) => setDepartmentId(event.target.value)}
-                  >
-                    <option value="">
-                      {departmentsQuery.isLoading ? "加载中..." : "默认（与当前管理员一致）"}
-                    </option>
-                    {(departmentsQuery.data?.items ?? []).map((item) => (
-                      <option key={item.id} value={item.id}>
-                        {item.name}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="grid gap-2">
-                  <Label htmlFor="directManagerId">直属上级（可选）</Label>
-                  <select
-                    id="directManagerId"
-                    data-testid="users-create-direct-manager"
-                    className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
-                    value={directManagerId}
-                    onChange={(event) => setDirectManagerId(event.target.value)}
-                  >
-                    <option value="">
-                      {managersQuery.isLoading ? "加载中..." : "无"}
-                    </option>
-                    {(managersQuery.data?.items ?? []).map((item) => (
-                      <option key={item.id} value={item.id}>
-                        {item.name} ({item.employeeNo})
-                      </option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="grid gap-2">
-                  <Label>角色</Label>
-                  <div className="flex flex-wrap gap-3 text-sm">
-                    {ROLE_OPTIONS.map((item) => (
-                      <label className="flex items-center gap-2" key={item.code}>
-                        <input
-                          data-testid={`users-create-role-${item.code}`}
-                          type="checkbox"
-                          checked={createRoles.has(item.code)}
-                          onChange={(event) => {
-                            setCreateRoles((prev) => {
-                              const next = new Set(prev);
-                              if (event.target.checked) {
-                                next.add(item.code);
-                              } else {
-                                next.delete(item.code);
-                              }
-                              return next;
-                            });
-                          }}
-                        />
-                        <span>{item.label}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="flex justify-end gap-2">
-                  <Button
-                    data-testid="users-create-submit"
-                    disabled={
-                      createMutation.isPending ||
-                      !createPayload.employeeNo ||
-                      !createPayload.name ||
-                      !createPayload.phone ||
-                      !createPayload.email ||
-                      !createPayload.password ||
-                      createPayload.roles.length < 1
-                    }
-                    onClick={() => createMutation.mutate()}
-                    type="button"
-                  >
-                    {createMutation.isPending ? "创建中..." : "创建"}
-                  </Button>
-                </div>
-              </div>
-            </DialogContent>
-          </Dialog>
+          <CreateUserDialog
+            open={createOpen}
+            onOpenChange={setCreateOpen}
+            onSubmit={(data) => createMutation.mutate(data)}
+            isPending={createMutation.isPending}
+            departments={{
+              isLoading: departmentsQuery.isLoading,
+              items: departmentsQuery.data?.items ?? [],
+            }}
+            managers={{
+              isLoading: managersQuery.isLoading,
+              items: (managersQuery.data?.items ?? []).map((item) => ({
+                id: item.id,
+                name: item.name,
+                employeeNo: item.employeeNo,
+              })),
+            }}
+            roleOptions={ROLE_OPTIONS}
+          />
         }
       />
 
@@ -372,7 +203,7 @@ export function UserManagementPage() {
           </select>
         </div>
 
-        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+        {listQuery.isLoading ? <TableSkeleton columns={5} rows={5} /> : null}
         {listQuery.isError ? (
           <p className="text-sm text-red-600">
             {isApiError(listQuery.error)
@@ -410,7 +241,7 @@ export function UserManagementPage() {
                       <div>{item.email}</div>
                       <div className="text-slate-500">{item.phone}</div>
                     </TableCell>
-                    <TableCell>{item.status}</TableCell>
+                    <TableCell><StatusBadge status={item.status} /></TableCell>
                     <TableCell className="text-xs">{formatRoleCodes(item.roleCodes)}</TableCell>
                     <TableCell>
                       <div className="flex flex-wrap gap-2">
@@ -441,10 +272,7 @@ export function UserManagementPage() {
                           size="sm"
                           variant="secondary"
                           disabled={rolesMutation.isPending}
-                          onClick={() => {
-                            setRoleDialogUser(item);
-                            setRoleDraft(new Set(item.roleCodes));
-                          }}
+                          onClick={() => setRoleDialogUser(item)}
                           type="button"
                         >
                           角色
@@ -464,97 +292,30 @@ export function UserManagementPage() {
           </Table>
         </div>
 
-        <div className="flex items-center justify-between text-sm">
-          <span>
-            第 {page} / {totalPages} 页
-          </span>
-          <div className="flex gap-2">
-            <Button
-              data-testid="users-prev-page"
-              variant="secondary"
-              disabled={page <= 1}
-              onClick={() => setPage((current) => Math.max(1, current - 1))}
-              type="button"
-            >
-              上一页
-            </Button>
-            <Button
-              data-testid="users-next-page"
-              variant="secondary"
-              disabled={page >= totalPages}
-              onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
-              type="button"
-            >
-              下一页
-            </Button>
-          </div>
-        </div>
+        <Pagination
+          page={page}
+          totalPages={totalPages}
+          onPageChange={setPage}
+          testIdPrefix="users"
+        />
       </Card>
 
-      <Dialog
+      <UserRoleDialog
         open={Boolean(roleDialogUser)}
         onOpenChange={(open) => {
           if (!open) {
             setRoleDialogUser(null);
-            setRoleDraft(new Set());
           }
         }}
-      >
-        <DialogContent className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>设置角色</DialogTitle>
-            <DialogDescription>
-              当前用户：{roleDialogUser?.employeeNo} / {roleDialogUser?.name}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="flex flex-wrap gap-3 text-sm">
-            {ROLE_OPTIONS.map((item) => (
-              <label className="flex items-center gap-2" key={item.code}>
-                <input
-                  data-testid={`users-role-${item.code}`}
-                  type="checkbox"
-                  checked={roleDraft.has(item.code)}
-                  onChange={(event) => {
-                    setRoleDraft((prev) => {
-                      const next = new Set(prev);
-                      if (event.target.checked) {
-                        next.add(item.code);
-                      } else {
-                        next.delete(item.code);
-                      }
-                      return next;
-                    });
-                  }}
-                />
-                <span>{item.label}</span>
-              </label>
-            ))}
-          </div>
-
-          <div className="flex justify-end gap-2">
-            <Button
-              variant="secondary"
-              disabled={rolesMutation.isPending}
-              onClick={() => {
-                setRoleDialogUser(null);
-                setRoleDraft(new Set());
-              }}
-              type="button"
-            >
-              取消
-            </Button>
-            <Button
-              data-testid="users-role-save"
-              disabled={rolesMutation.isPending || roleDraft.size < 1}
-              onClick={() => rolesMutation.mutate()}
-              type="button"
-            >
-              {rolesMutation.isPending ? "保存中..." : "保存"}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
+        user={roleDialogUser}
+        roleOptions={ROLE_OPTIONS}
+        onSubmit={(roles) => {
+          if (roleDialogUser) {
+            rolesMutation.mutate({ userId: roleDialogUser.id, roles });
+          }
+        }}
+        isPending={rolesMutation.isPending}
+      />
     </div>
   );
 }
diff --git a/client/src/pages/reimbursement-detail/ReimbursementActions.tsx b/client/src/pages/reimbursement-detail/ReimbursementActions.tsx
new file mode 100644
index 00000000..abdefdb5
--- /dev/null
+++ b/client/src/pages/reimbursement-detail/ReimbursementActions.tsx
@@ -0,0 +1,131 @@
+import { useState } from "react";
+import type { ReimbursementStatus } from "../../api/reimbursements";
+import { Button } from "../../components/ui/button";
+import { Card } from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
+
+type PaymentChannel = "bank" | "alipay" | "wechat" | "cash" | "other";
+
+export type PayPayload = {
+  paymentVoucherNo: string;
+  paymentDate: string;
+  paymentChannel: PaymentChannel;
+};
+
+export interface ReimbursementActionsProps {
+  status: ReimbursementStatus;
+  canPay: boolean;
+  actionError: string;
+  isPending: boolean;
+  onSubmit: () => void;
+  onWithdraw: (comment: string) => void;
+  onPay: (payload: PayPayload) => void;
+}
+
+export function ReimbursementActions({
+  status,
+  canPay,
+  actionError,
+  isPending,
+  onSubmit,
+  onWithdraw,
+  onPay,
+}: ReimbursementActionsProps) {
+  const [withdrawComment, setWithdrawComment] = useState("申请撤回并补充说明后重提");
+  const [paymentVoucherNo, setPaymentVoucherNo] = useState("");
+  const [paymentDate, setPaymentDate] = useState("2026-02-08");
+  const [paymentChannel, setPaymentChannel] = useState<PaymentChannel>("bank");
+
+  return (
+    <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"
+          data-testid="reimbursement-action-error"
+        >
+          {actionError}
+        </p>
+      ) : null}
+
+      <div className="flex flex-wrap gap-2">
+        <Button
+          data-testid="reimbursement-submit"
+          disabled={isPending || status !== "draft"}
+          onClick={onSubmit}
+          type="button"
+        >
+          提交报销
+        </Button>
+      </div>
+
+      <div className="space-y-2 rounded-lg border border-slate-200 p-4">
+        <p className="text-sm font-medium text-slate-800">撤回报销</p>
+        <Textarea
+          data-testid="reimbursement-withdraw-comment"
+          onChange={(event) => setWithdrawComment(event.target.value)}
+          rows={2}
+          value={withdrawComment}
+        />
+        <Button
+          data-testid="reimbursement-withdraw"
+          variant="secondary"
+          disabled={isPending || status !== "reviewing" || withdrawComment.trim().length < 1}
+          onClick={() => onWithdraw(withdrawComment.trim())}
+          type="button"
+        >
+          撤回
+        </Button>
+      </div>
+
+      {canPay ? (
+        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
+          <p className="text-sm font-medium text-slate-800">财务支付</p>
+          <Input
+            data-testid="reimbursement-pay-voucher-no"
+            onChange={(event) => setPaymentVoucherNo(event.target.value)}
+            placeholder="付款凭证号"
+            value={paymentVoucherNo}
+          />
+          <Input
+            data-testid="reimbursement-pay-date"
+            onChange={(event) => setPaymentDate(event.target.value)}
+            type="date"
+            value={paymentDate}
+          />
+          <select
+            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 PaymentChannel)
+            }
+            value={paymentChannel}
+          >
+            <option value="bank">bank</option>
+            <option value="alipay">alipay</option>
+            <option value="wechat">wechat</option>
+            <option value="cash">cash</option>
+            <option value="other">other</option>
+          </select>
+          <Button
+            data-testid="reimbursement-pay"
+            variant="secondary"
+            disabled={isPending || !["approved", "paid"].includes(status)}
+            onClick={() =>
+              onPay({
+                paymentVoucherNo: paymentVoucherNo.trim(),
+                paymentDate,
+                paymentChannel,
+              })
+            }
+            type="button"
+          >
+            执行支付
+          </Button>
+        </div>
+      ) : null}
+    </Card>
+  );
+}
diff --git a/client/src/pages/reimbursement-detail/ReimbursementItemEditor.tsx b/client/src/pages/reimbursement-detail/ReimbursementItemEditor.tsx
new file mode 100644
index 00000000..52e31e73
--- /dev/null
+++ b/client/src/pages/reimbursement-detail/ReimbursementItemEditor.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useState } from "react";
+import type { ExpenseType } from "../../api/expenseTypes";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
+
+export type ItemEditorMode = "create" | "edit";
+
+export type ItemEditorInitialValues = {
+  expenseTypeId: string;
+  expenseDate: string;
+  amount: string;
+  description: string;
+};
+
+export type ItemEditorSaveData = {
+  expenseTypeId: string;
+  expenseDate: string;
+  amount: string;
+  description: string;
+};
+
+export interface ReimbursementItemEditorProps {
+  mode: ItemEditorMode;
+  expenseTypes: ExpenseType[];
+  expenseTypesLoading: boolean;
+  expenseTypesError: boolean;
+  initialValues: ItemEditorInitialValues;
+  onSave: (data: ItemEditorSaveData) => void;
+  onCancel: () => void;
+  isPending: boolean;
+}
+
+export function ReimbursementItemEditor({
+  mode,
+  expenseTypes,
+  expenseTypesLoading,
+  expenseTypesError,
+  initialValues,
+  onSave,
+  onCancel,
+  isPending,
+}: ReimbursementItemEditorProps) {
+  const [expenseTypeId, setExpenseTypeId] = useState(initialValues.expenseTypeId);
+  const [expenseDate, setExpenseDate] = useState(initialValues.expenseDate);
+  const [amount, setAmount] = useState(initialValues.amount);
+  const [description, setDescription] = useState(initialValues.description);
+
+  // Reset internal state when initialValues change (e.g. switching between create/edit)
+  useEffect(() => {
+    setExpenseTypeId(initialValues.expenseTypeId);
+    setExpenseDate(initialValues.expenseDate);
+    setAmount(initialValues.amount);
+    setDescription(initialValues.description);
+  }, [initialValues.expenseTypeId, initialValues.expenseDate, initialValues.amount, initialValues.description]);
+
+  const handleSave = () => {
+    onSave({ expenseTypeId, expenseDate, amount, description });
+  };
+
+  return (
+    <div className="space-y-3 rounded-lg border border-slate-200 p-4" data-testid="reimbursement-item-editor">
+      <p className="text-sm font-medium text-slate-800">
+        {mode === "create" ? "新增明细" : "编辑明细"}
+      </p>
+
+      {expenseTypesLoading ? (
+        <p className="text-sm text-slate-500">加载费用类型中...</p>
+      ) : null}
+
+      {expenseTypesError ? (
+        <p className="text-sm text-red-600">费用类型加载失败，请刷新页面重试。</p>
+      ) : null}
+
+      <div className="grid gap-3 md:grid-cols-4">
+        <div className="space-y-1">
+          <label className="text-xs text-slate-600" htmlFor="expenseTypeId">
+            费用类型
+          </label>
+          <select
+            className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+            data-testid="reimbursement-item-expense-type"
+            disabled={expenseTypes.length === 0 || isPending}
+            id="expenseTypeId"
+            onChange={(event) => setExpenseTypeId(event.target.value)}
+            value={expenseTypeId}
+          >
+            {expenseTypes.length === 0 ? <option value="">暂无可用费用类型</option> : null}
+            {expenseTypes.map((type) => (
+              <option key={type.id} value={type.id}>
+                {type.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="space-y-1">
+          <label className="text-xs text-slate-600" htmlFor="expenseDate">
+            发生日期
+          </label>
+          <Input
+            data-testid="reimbursement-item-expense-date"
+            disabled={isPending}
+            id="expenseDate"
+            onChange={(event) => setExpenseDate(event.target.value)}
+            type="date"
+            value={expenseDate}
+          />
+        </div>
+
+        <div className="space-y-1">
+          <label className="text-xs text-slate-600" htmlFor="amount">
+            金额
+          </label>
+          <Input
+            data-testid="reimbursement-item-amount"
+            disabled={isPending}
+            id="amount"
+            onChange={(event) => setAmount(event.target.value)}
+            placeholder="例如 123.45"
+            value={amount}
+          />
+        </div>
+
+        <div className="space-y-1 md:col-span-4">
+          <label className="text-xs text-slate-600" htmlFor="itemDescription">
+            说明
+          </label>
+          <Textarea
+            data-testid="reimbursement-item-description"
+            disabled={isPending}
+            id="itemDescription"
+            onChange={(event) => setDescription(event.target.value)}
+            rows={2}
+            value={description}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Button
+          data-testid="reimbursement-item-save"
+          disabled={
+            isPending ||
+            !expenseTypeId ||
+            !expenseDate ||
+            !amount.trim()
+          }
+          onClick={handleSave}
+          type="button"
+        >
+          {isPending ? "保存中..." : "保存明细"}
+        </Button>
+        <Button
+          data-testid="reimbursement-item-cancel"
+          variant="secondary"
+          disabled={isPending}
+          onClick={onCancel}
+          type="button"
+        >
+          取消
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/user-management/CreateUserDialog.tsx b/client/src/pages/user-management/CreateUserDialog.tsx
new file mode 100644
index 00000000..1e558982
--- /dev/null
+++ b/client/src/pages/user-management/CreateUserDialog.tsx
@@ -0,0 +1,246 @@
+import { useState } from "react";
+import { Button } from "../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+
+export interface CreateUserFormData {
+  employeeNo: string;
+  name: string;
+  phone: string;
+  email: string;
+  password: string;
+  departmentId: string | undefined;
+  directManagerId: string | null;
+  roles: string[];
+}
+
+export interface CreateUserDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: CreateUserFormData) => void;
+  isPending: boolean;
+  departments: { isLoading: boolean; items: Array<{ id: string; name: string }> };
+  managers: { isLoading: boolean; items: Array<{ id: string; name: string; employeeNo: string }> };
+  roleOptions: Array<{ code: string; label: string }>;
+}
+
+export function CreateUserDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  isPending,
+  departments,
+  managers,
+  roleOptions,
+}: CreateUserDialogProps) {
+  const [employeeNo, setEmployeeNo] = useState("");
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [departmentId, setDepartmentId] = useState("");
+  const [directManagerId, setDirectManagerId] = useState("");
+  const [createRoles, setCreateRoles] = useState<Set<string>>(() => new Set(["employee"]));
+
+  const trimmedEmployeeNo = employeeNo.trim();
+  const trimmedName = name.trim();
+  const trimmedPhone = phone.trim();
+  const trimmedEmail = email.trim();
+  const rolesArray = Array.from(createRoles);
+
+  const canSubmit =
+    !isPending &&
+    trimmedEmployeeNo !== "" &&
+    trimmedName !== "" &&
+    trimmedPhone !== "" &&
+    trimmedEmail !== "" &&
+    password !== "" &&
+    rolesArray.length >= 1;
+
+  function resetForm() {
+    setEmployeeNo("");
+    setName("");
+    setPhone("");
+    setEmail("");
+    setPassword("");
+    setDepartmentId("");
+    setDirectManagerId("");
+    setCreateRoles(new Set(["employee"]));
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      resetForm();
+    }
+    onOpenChange(nextOpen);
+  }
+
+  function handleSubmit() {
+    onSubmit({
+      employeeNo: trimmedEmployeeNo,
+      name: trimmedName,
+      phone: trimmedPhone,
+      email: trimmedEmail,
+      password,
+      departmentId: departmentId || undefined,
+      directManagerId: directManagerId ? directManagerId : null,
+      roles: rolesArray,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button data-testid="users-create-open" type="button">
+          新建用户
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>新建用户</DialogTitle>
+          <DialogDescription>请填写基础信息与初始密码（满足密码策略）。</DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="employeeNo">工号</Label>
+            <Input
+              id="employeeNo"
+              data-testid="users-create-employeeNo"
+              value={employeeNo}
+              onChange={(e) => setEmployeeNo(e.target.value)}
+              placeholder="E1001"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="name">姓名</Label>
+            <Input
+              id="name"
+              data-testid="users-create-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="张三"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="phone">手机号</Label>
+            <Input
+              id="phone"
+              data-testid="users-create-phone"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              placeholder="13800000001"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="email">邮箱</Label>
+            <Input
+              id="email"
+              data-testid="users-create-email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="user@hyinda.com"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="password">初始密码</Label>
+            <Input
+              id="password"
+              data-testid="users-create-password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="至少12位，含大小写与数字"
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="departmentId">部门（可选）</Label>
+            <select
+              id="departmentId"
+              data-testid="users-create-department"
+              className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+              value={departmentId}
+              onChange={(event) => setDepartmentId(event.target.value)}
+            >
+              <option value="">
+                {departments.isLoading ? "加载中..." : "默认（与当前管理员一致）"}
+              </option>
+              {departments.items.map((item) => (
+                <option key={item.id} value={item.id}>
+                  {item.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="directManagerId">直属上级（可选）</Label>
+            <select
+              id="directManagerId"
+              data-testid="users-create-direct-manager"
+              className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+              value={directManagerId}
+              onChange={(event) => setDirectManagerId(event.target.value)}
+            >
+              <option value="">
+                {managers.isLoading ? "加载中..." : "无"}
+              </option>
+              {managers.items.map((item) => (
+                <option key={item.id} value={item.id}>
+                  {item.name} ({item.employeeNo})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid gap-2">
+            <Label>角色</Label>
+            <div className="flex flex-wrap gap-3 text-sm">
+              {roleOptions.map((item) => (
+                <label className="flex items-center gap-2" key={item.code}>
+                  <input
+                    data-testid={`users-create-role-${item.code}`}
+                    type="checkbox"
+                    checked={createRoles.has(item.code)}
+                    onChange={(event) => {
+                      setCreateRoles((prev) => {
+                        const next = new Set(prev);
+                        if (event.target.checked) {
+                          next.add(item.code);
+                        } else {
+                          next.delete(item.code);
+                        }
+                        return next;
+                      });
+                    }}
+                  />
+                  <span>{item.label}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button
+              data-testid="users-create-submit"
+              disabled={!canSubmit}
+              onClick={handleSubmit}
+              type="button"
+            >
+              {isPending ? "创建中..." : "创建"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/client/src/pages/user-management/UserRoleDialog.tsx b/client/src/pages/user-management/UserRoleDialog.tsx
new file mode 100644
index 00000000..2b754aa5
--- /dev/null
+++ b/client/src/pages/user-management/UserRoleDialog.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { Button } from "../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
+import type { UserSummary } from "../../api/users";
+
+export interface UserRoleDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user: UserSummary | null;
+  roleOptions: Array<{ code: string; label: string }>;
+  onSubmit: (roles: string[]) => void;
+  isPending: boolean;
+}
+
+export function UserRoleDialog({
+  open,
+  onOpenChange,
+  user,
+  roleOptions,
+  onSubmit,
+  isPending,
+}: UserRoleDialogProps) {
+  const [roleDraft, setRoleDraft] = useState<Set<string>>(() => new Set());
+
+  useEffect(() => {
+    if (user) {
+      setRoleDraft(new Set(user.roleCodes));
+    } else {
+      setRoleDraft(new Set());
+    }
+  }, [user]);
+
+  function handleClose() {
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          handleClose();
+        }
+      }}
+    >
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>设置角色</DialogTitle>
+          <DialogDescription>
+            当前用户：{user?.employeeNo} / {user?.name}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-wrap gap-3 text-sm">
+          {roleOptions.map((item) => (
+            <label className="flex items-center gap-2" key={item.code}>
+              <input
+                data-testid={`users-role-${item.code}`}
+                type="checkbox"
+                checked={roleDraft.has(item.code)}
+                onChange={(event) => {
+                  setRoleDraft((prev) => {
+                    const next = new Set(prev);
+                    if (event.target.checked) {
+                      next.add(item.code);
+                    } else {
+                      next.delete(item.code);
+                    }
+                    return next;
+                  });
+                }}
+              />
+              <span>{item.label}</span>
+            </label>
+          ))}
+        </div>
+
+        <div className="flex justify-end gap-2">
+          <Button
+            variant="secondary"
+            disabled={isPending}
+            onClick={handleClose}
+            type="button"
+          >
+            取消
+          </Button>
+          <Button
+            data-testid="users-role-save"
+            disabled={isPending || roleDraft.size < 1}
+            onClick={() => onSubmit(Array.from(roleDraft))}
+            type="button"
+          >
+            {isPending ? "保存中..." : "保存"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}