refactor(ui): [UI7-1] 深度翻新报销、发票与用户管理等核心视窗

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="[email protected]"
-                  />
-                </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>
   );
 }