refactor: strengthen client boundaries and quality gates

2026-08-28 14:26:58 +08:00
parent 3af145abe5
commit ad27acad7e
51 changed files with 7703 additions and 697 deletions
@@ -0,0 +1,95 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { LoginPage, loginErrorMessage } from './LoginPage';
+
+const { getCaptcha, login } = vi.hoisted(() => ({ getCaptcha: vi.fn(), login: vi.fn() }));
+
+vi.mock('@/api/adminApi', () => ({
+  adminApi: { getCaptcha, login },
+  clientApi: { getCaptcha, login },
+}));
+
+vi.mock('@/components/ui', () => ({
+  Button: ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button {...props}>{children}</button>
+  ),
+  ClientLoginCanvas: () => <div data-testid="client-canvas" />,
+  Input: ({ label, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { label: string }) => (
+    <label>
+      {label}
+      <input {...props} />
+    </label>
+  ),
+  Modal: ({ children, open, title }: { children: React.ReactNode; open: boolean; title: string }) =>
+    open ? (
+      <div role="dialog" aria-label={title}>
+        {children}
+      </div>
+    ) : null,
+}));
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    getCaptcha
+      .mockReset()
+      .mockResolvedValue({ captchaId: 'captcha-1', challenge: '12 + 3 = ?', expiresInSeconds: 300 });
+    login.mockReset();
+  });
+
+  it('renders client-only website return action and loads a captcha', async () => {
+    render(
+      <MemoryRouter>
+        <LoginPage portal="client" />
+      </MemoryRouter>,
+    );
+    expect(screen.getByRole('link', { name: '返回官网' })).toHaveAttribute('href', 'https://www.lisglo.com');
+    expect(await screen.findByRole('button', { name: '12 + 3 = ?' })).toBeEnabled();
+  });
+
+  it('maps backend login errors to Chinese and refreshes the one-time captcha', async () => {
+    login.mockRejectedValue(new Error('Invalid login or password'));
+    render(
+      <MemoryRouter>
+        <LoginPage portal="client" />
+      </MemoryRouter>,
+    );
+    await screen.findByRole('button', { name: '12 + 3 = ?' });
+    fireEvent.change(screen.getByLabelText('用户名/登录账号'), { target: { value: 'bad-user' } });
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: 'bad-password' } });
+    fireEvent.change(screen.getByLabelText('图形验证码'), { target: { value: '15' } });
+    fireEvent.click(screen.getByRole('button', { name: '登录' }));
+    await waitFor(() => expect(screen.getAllByText('用户名或密码错误')).toHaveLength(2));
+    expect(getCaptcha).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not render client artwork or the website link for admin login', async () => {
+    render(
+      <MemoryRouter>
+        <LoginPage portal="admin" />
+      </MemoryRouter>,
+    );
+    await screen.findByRole('button', { name: '12 + 3 = ?' });
+    expect(screen.queryByTestId('client-canvas')).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: '返回官网' })).not.toBeInTheDocument();
+    expect(screen.getByText('运营端登录')).toBeVisible();
+  });
+
+  it.each([
+    ['login and password are required', '请输入用户名和密码'],
+    ['Captcha expired', '验证码已过期，请刷新后重试'],
+    ['Captcha is incorrect', '验证码错误，请重新输入'],
+    ['User is locked', '账号已锁定，请 24 小时后再试'],
+    ['Too many login attempts from this source', '登录尝试过于频繁，请稍后再试'],
+    ['User is disabled or deleted', '账号已停用或已删除'],
+    ['Only platform admins can login to admin portal', '该账号不是运营端管理员'],
+    ['Only enterprise admins linked to a tenant can login to client portal', '该账号不是已绑定企业的客户端管理员'],
+    ['unknown backend error', 'unknown backend error'],
+  ])('maps backend error %s to a stable user message', (backend, expected) => {
+    expect(loginErrorMessage(new Error(backend))).toBe(expected);
+  });
+
+  it('uses a safe fallback for non-error failures', () => {
+    expect(loginErrorMessage(null)).toBe('登录失败，请检查账号信息后重试');
+  });
+});
@@ -1,23 +1,31 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { adminApi, clientApi, type CaptchaResponse } from '@/api/adminApi';
-import { consumeSessionRecovery, markUserActivity, readSessionRecovery, writeSession, type Portal } from '@/api/session';
+import {
+  consumeSessionRecovery,
+  markUserActivity,
+  readSessionRecovery,
+  writeSession,
+  type Portal,
+} from '@/api/session';
 import { Button, ClientLoginCanvas, Input, Modal } from '@/components/ui';

 type LoginPageProps = {
  portal: Portal;
 };

-function loginErrorMessage(err: unknown) {
+export function loginErrorMessage(err: unknown) {
  const message = err instanceof Error ? err.message : '';
  if (message.includes('Invalid login or password')) return '用户名或密码错误';
  if (message.includes('login and password are required')) return '请输入用户名和密码';
  if (message.includes('Captcha expired')) return '验证码已过期，请刷新后重试';
  if (message.includes('Captcha is incorrect')) return '验证码错误，请重新输入';
  if (message.includes('User is locked')) return '账号已锁定，请 24 小时后再试';
+  if (message.includes('Too many login attempts')) return '登录尝试过于频繁，请稍后再试';
  if (message.includes('User is disabled or deleted')) return '账号已停用或已删除';
  if (message.includes('Only platform admins can login to admin portal')) return '该账号不是运营端管理员';
-  if (message.includes('Only enterprise admins linked to a tenant can login to client portal')) return '该账号不是已绑定企业的客户端管理员';
+  if (message.includes('Only enterprise admins linked to a tenant can login to client portal'))
+    return '该账号不是已绑定企业的客户端管理员';
  return message || '登录失败，请检查账号信息后重试';
 }

@@ -90,17 +98,39 @@ export function LoginPage({ portal }: LoginPageProps) {
              {recovery.message ?? '登录会话已失效，请重新登录。'} 登录成功后将返回之前访问的页面。
            </p>
          ) : null}
-          <Input label="用户名/登录账号" onChange={(event) => setLogin(event.target.value)} placeholder="请输入用户名、邮箱或手机号" value={login} />
-          <Input label="密码" onChange={(event) => setPassword(event.target.value)} placeholder="请输入密码" type="password" value={password} />
+          <Input
+            label="用户名/登录账号"
+            onChange={(event) => setLogin(event.target.value)}
+            placeholder="请输入用户名、邮箱或手机号"
+            value={login}
+          />
+          <Input
+            label="密码"
+            onChange={(event) => setPassword(event.target.value)}
+            placeholder="请输入密码"
+            type="password"
+            value={password}
+          />
          <div className="login-captcha-row">
-            <Input label="图形验证码" onChange={(event) => setCaptchaText(event.target.value)} placeholder="请输入计算结果" value={captchaText} />
+            <Input
+              label="图形验证码"
+              onChange={(event) => setCaptchaText(event.target.value)}
+              placeholder="请输入计算结果"
+              value={captchaText}
+            />
            <button className="login-captcha" onClick={() => void refreshCaptcha()} type="button">
              {captcha?.challenge ?? '刷新'}
            </button>
          </div>
          {error ? <p className="login-error">{error}</p> : null}
-          <Button disabled={loading} onClick={submit}>{loading ? '登录中...' : '登录'}</Button>
-          {!isAdmin ? <a className="login-return-link" href="https://www.lisglo.com">返回官网</a> : null}
+          <Button disabled={loading} onClick={submit}>
+            {loading ? '登录中...' : '登录'}
+          </Button>
+          {!isAdmin ? (
+            <a className="login-return-link" href="https://www.lisglo.com">
+              返回官网
+            </a>
+          ) : null}
        </div>
      </section>
      <Modal
@@ -0,0 +1,143 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ClientUsersPage } from './ClientUsersPage';
+
+const { clientApi } = vi.hoisted(() => ({
+  clientApi: {
+    listUsers: vi.fn(),
+    deleteUser: vi.fn(),
+    changeUserStatus: vi.fn(),
+    createUser: vi.fn(),
+    updateUser: vi.fn(),
+    changeUserPassword: vi.fn(),
+  },
+}));
+
+vi.mock('@/api/adminApi', () => ({ clientApi }));
+vi.mock('@/components/ui', () => ({
+  Button: ({
+    children,
+    icon: _icon,
+    ...props
+  }: React.ButtonHTMLAttributes<HTMLButtonElement> & { icon?: React.ReactNode }) => (
+    <button {...props}>{children}</button>
+  ),
+  Input: ({ label, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { label: string }) => (
+    <label>
+      {label}
+      <input {...props} />
+    </label>
+  ),
+  Select: ({
+    label,
+    options,
+    ...props
+  }: React.SelectHTMLAttributes<HTMLSelectElement> & {
+    label: string;
+    options: Array<{ label: string; value: string }>;
+  }) => (
+    <label>
+      {label}
+      <select {...props}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  ),
+  Tag: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+  Table: ({
+    columns,
+    data,
+    emptyText,
+  }: {
+    columns: Array<{ key: string; render?: (record: never) => React.ReactNode }>;
+    data: never[];
+    emptyText: string;
+  }) =>
+    data.length ? (
+      <div>
+        {data.map((row: never, index: number) => (
+          <div key={index}>
+            {columns.map((column) => (
+              <span key={column.key}>{column.render?.(row)}</span>
+            ))}
+          </div>
+        ))}
+      </div>
+    ) : (
+      <p>{emptyText}</p>
+    ),
+  Modal: ({
+    children,
+    footer,
+    open,
+    title,
+  }: {
+    children: React.ReactNode;
+    footer: React.ReactNode;
+    open: boolean;
+    title: string;
+  }) =>
+    open ? (
+      <div role="dialog" aria-label={title}>
+        {children}
+        {footer}
+      </div>
+    ) : null,
+}));
+
+const user = {
+  id: 'user-1',
+  displayName: '截图用户',
+  username: 'screenshot',
+  email: 'user@example.com',
+  phone: '13800000000',
+  status: 'active',
+  roles: ['enterprise_admin'],
+};
+
+describe('ClientUsersPage states', () => {
+  beforeEach(() => {
+    Object.values(clientApi).forEach((mock) => mock.mockReset());
+  });
+
+  it('renders the empty state from a successful real API-shaped response', async () => {
+    clientApi.listUsers.mockResolvedValue([]);
+    render(<ClientUsersPage />);
+    expect(await screen.findByText('暂无用户')).toBeVisible();
+  });
+
+  it('renders a backend loading error', async () => {
+    clientApi.listUsers.mockRejectedValue(new Error('用户服务暂不可用'));
+    render(<ClientUsersPage />);
+    expect(await screen.findByText('用户服务暂不可用')).toBeVisible();
+  });
+
+  it('shows query loading and requires confirmation before deletion', async () => {
+    let resolveQuery: (value: (typeof user)[]) => void = () => undefined;
+    clientApi.listUsers
+      .mockResolvedValueOnce([user])
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveQuery = resolve;
+          }),
+      )
+      .mockResolvedValueOnce([]);
+    clientApi.deleteUser.mockResolvedValue(user);
+    render(<ClientUsersPage />);
+    await screen.findByText('截图用户');
+    fireEvent.click(screen.getByRole('button', { name: '查询' }));
+    expect(screen.getByRole('button', { name: '查询中...' })).toBeDisabled();
+    resolveQuery([user]);
+    await screen.findByRole('button', { name: '查询' });
+    fireEvent.click(screen.getByRole('button', { name: '删除' }));
+    expect(screen.getByRole('dialog', { name: '删除用户' })).toHaveTextContent('确认删除用户 截图用户');
+    expect(clientApi.deleteUser).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: '确认' }));
+    await waitFor(() => expect(clientApi.deleteUser).toHaveBeenCalledWith('user-1'));
+  });
+});
@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Edit3, KeyRound, Plus, Search, Trash2, Users } from 'lucide-react';
-import { clientApi, type ManagedUser, type UserPayload } from '@/api/adminApi';
+import { clientApi, type ManagedUser } from '@/api/adminApi';
 import { formatDateTime } from '@/utils/dateTime';
-import { readSession } from '@/api/session';
 import { Button, Input, Modal, Select, Table, Tag, type TableColumn } from '@/components/ui';
 import './ClientUsersPage.css';

@@ -42,19 +41,19 @@ const emptyFilters: UserFilters = {
 };

 function toForm(user?: ManagedUser): UserForm {
-  return user ? {
-    displayName: user.displayName,
-    username: user.username,
-    email: user.email ?? '',
-    phone: user.phone ?? '',
-    status: user.status,
-    password: '',
-  } : emptyForm;
+  return user
+    ? {
+        displayName: user.displayName,
+        username: user.username,
+        email: user.email ?? '',
+        phone: user.phone ?? '',
+        status: user.status,
+        password: '',
+      }
+    : emptyForm;
 }

 export function ClientUsersPage() {
-  const session = readSession('client');
-  const tenantId = session?.user.tenantId ?? undefined;
  const [users, setUsers] = useState<ManagedUser[]>([]);
  const [filters, setFilters] = useState<UserFilters>(emptyFilters);
  const [appliedFilters, setAppliedFilters] = useState<UserFilters>(emptyFilters);
@@ -72,16 +71,15 @@ export function ClientUsersPage() {
  const [querying, setQuerying] = useState(false);

  async function loadUsers(query: UserFilters = appliedFilters) {
-    if (!tenantId) return;
-    setUsers(await clientApi.listUsers(query, tenantId));
+    setUsers(await clientApi.listUsers(query));
  }

  useEffect(() => {
-    if (!tenantId) return;
-    void clientApi.listUsers({}, tenantId)
+    void clientApi
+      .listUsers({})
      .then(setUsers)
      .catch((err) => setError(err instanceof Error ? err.message : '加载用户失败'));
-  }, [tenantId]);
+  }, []);

  function updateFilter<Key extends keyof UserFilters>(key: Key, value: UserFilters[Key]) {
    setFilters((current) => ({ ...current, [key]: value }));
@@ -122,26 +120,28 @@ export function ClientUsersPage() {
  }

  async function saveUser() {
-    if (!form.displayName.trim() || (!form.email.trim() && !form.phone.trim()) || (creating && form.password.length < 6)) {
+    if (
+      !form.displayName.trim() ||
+      (!form.email.trim() && !form.phone.trim()) ||
+      (creating && form.password.length < 6)
+    ) {
      setFormError('请填写姓名、邮箱或手机号；新增用户密码至少 6 位');
      return;
    }
    setSaving(true);
    setFormError('');
-    const body: UserPayload = {
+    const body = {
      displayName: form.displayName,
      username: form.username || form.email || form.phone,
      email: form.email,
      phone: form.phone,
      status: form.status,
-      roleCode: 'enterprise_admin',
-      operatorId: session?.user.id,
    };
    try {
      if (creating) {
-        await clientApi.createUser({ ...body, password: form.password }, tenantId);
+        await clientApi.createUser({ ...body, password: form.password });
      } else if (editingUser) {
-        await clientApi.updateUser(editingUser.id, body, tenantId);
+        await clientApi.updateUser(editingUser.id, body);
      }
      setCreating(false);
      setEditingUser(null);
@@ -159,9 +159,12 @@ export function ClientUsersPage() {
    setConfirmError('');
    try {
      if (confirmAction.type === 'delete') {
-        await clientApi.deleteUser(confirmAction.user.id, session?.user.id, tenantId);
+        await clientApi.deleteUser(confirmAction.user.id);
      } else {
-        await clientApi.changeUserStatus(confirmAction.user.id, confirmAction.user.status === 'active' ? 'disabled' : 'active', session?.user.id, tenantId);
+        await clientApi.changeUserStatus(
+          confirmAction.user.id,
+          confirmAction.user.status === 'active' ? 'disabled' : 'active',
+        );
      }
    } catch (failure) {
      const detail = failure instanceof Error ? failure.message : '用户操作失败';
@@ -181,55 +184,136 @@ export function ClientUsersPage() {

  async function savePassword() {
    if (!passwordUser) return;
-    await clientApi.changeUserPassword(passwordUser.id, newPassword, session?.user.id, tenantId);
+    await clientApi.changeUserPassword(passwordUser.id, newPassword);
    setPasswordUser(null);
    setNewPassword('');
  }

-  const columns = useMemo<Array<TableColumn<ManagedUser>>>(() => [
-    { key: 'name', title: '用户名', width: '140px', render: (record) => <strong className="text-strong">{record.displayName}</strong> },
-    { key: 'email', title: '邮箱', render: (record) => <span className="muted">{record.email ?? '-'}</span> },
-    { key: 'phone', title: '手机号', width: '160px', render: (record) => <span className="muted">{record.phone ?? '-'}</span> },
-    { key: 'role', title: '角色', width: '130px', render: () => <Tag tone="info">企业管理员</Tag> },
-    { key: 'status', title: '状态', width: '120px', render: (record) => <Tag tone={record.status === 'active' ? 'success' : 'neutral'}>{record.status === 'active' ? '正常' : '禁用'}</Tag> },
-    { key: 'lastLoginAt', title: '最后登录时间', width: '190px', render: (record) => <span className="muted">{formatDateTime(record.lastLoginAt)}</span> },
-    {
-      key: 'actions',
-      title: '操作',
-      width: '290px',
-      render: (record) => (
-        <div className="inline-actions client-user-actions" aria-label={`${record.displayName}的用户操作`}>
-          <Button icon={<Edit3 size={15} />} onClick={() => openEditor(record)} size="sm" variant="ghost">编辑</Button>
-          <Button icon={<KeyRound size={15} />} onClick={() => { setPasswordUser(record); setNewPassword(''); }} size="sm" variant="ghost">改密</Button>
-          <Button onClick={() => openConfirm({ type: 'status', user: record })} size="sm" variant={record.status === 'active' ? 'warning' : 'success'}>{record.status === 'active' ? '禁用' : '启用'}</Button>
-          <Button icon={<Trash2 size={15} />} onClick={() => openConfirm({ type: 'delete', user: record })} size="sm" variant="danger">删除</Button>
-        </div>
-      ),
-    },
-  ], []);
+  const columns = useMemo<Array<TableColumn<ManagedUser>>>(
+    () => [
+      {
+        key: 'name',
+        title: '用户名',
+        width: '140px',
+        render: (record) => <strong className="text-strong">{record.displayName}</strong>,
+      },
+      { key: 'email', title: '邮箱', render: (record) => <span className="muted">{record.email ?? '-'}</span> },
+      {
+        key: 'phone',
+        title: '手机号',
+        width: '160px',
+        render: (record) => <span className="muted">{record.phone ?? '-'}</span>,
+      },
+      { key: 'role', title: '角色', width: '130px', render: () => <Tag tone="info">企业管理员</Tag> },
+      {
+        key: 'status',
+        title: '状态',
+        width: '120px',
+        render: (record) => (
+          <Tag tone={record.status === 'active' ? 'success' : 'neutral'}>
+            {record.status === 'active' ? '正常' : '禁用'}
+          </Tag>
+        ),
+      },
+      {
+        key: 'lastLoginAt',
+        title: '最后登录时间',
+        width: '190px',
+        render: (record) => <span className="muted">{formatDateTime(record.lastLoginAt)}</span>,
+      },
+      {
+        key: 'actions',
+        title: '操作',
+        width: '290px',
+        render: (record) => (
+          <div className="inline-actions client-user-actions" aria-label={`${record.displayName}的用户操作`}>
+            <Button icon={<Edit3 size={15} />} onClick={() => openEditor(record)} size="sm" variant="ghost">
+              编辑
+            </Button>
+            <Button
+              icon={<KeyRound size={15} />}
+              onClick={() => {
+                setPasswordUser(record);
+                setNewPassword('');
+              }}
+              size="sm"
+              variant="ghost"
+            >
+              改密
+            </Button>
+            <Button
+              onClick={() => openConfirm({ type: 'status', user: record })}
+              size="sm"
+              variant={record.status === 'active' ? 'warning' : 'success'}
+            >
+              {record.status === 'active' ? '禁用' : '启用'}
+            </Button>
+            <Button
+              icon={<Trash2 size={15} />}
+              onClick={() => openConfirm({ type: 'delete', user: record })}
+              size="sm"
+              variant="danger"
+            >
+              删除
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [],
+  );

  return (
    <section className="page-stack system-page">
      <div className="system-page-toolbar">
        <div className="sms-send-title">
-          <span className="sms-send-title__icon"><Users size={22} /></span>
+          <span className="sms-send-title__icon">
+            <Users size={22} />
+          </span>
          <h1>用户管理</h1>
        </div>
-        <Button icon={<Plus size={16} />} onClick={() => openEditor()} size="sm">添加用户</Button>
+        <Button icon={<Plus size={16} />} onClick={() => openEditor()} size="sm">
+          添加用户
+        </Button>
      </div>

      <div className="surface system-filter-row client-user-filter">
-        <Input label="用户姓名" onChange={(event) => updateFilter('displayName', event.target.value)} placeholder="请输入用户姓名" value={filters.displayName} />
-        <Input label="登录账号" onChange={(event) => updateFilter('login', event.target.value)} placeholder="用户名、邮箱或手机号" value={filters.login} />
+        <Input
+          label="用户姓名"
+          onChange={(event) => updateFilter('displayName', event.target.value)}
+          placeholder="请输入用户姓名"
+          value={filters.displayName}
+        />
+        <Input
+          label="登录账号"
+          onChange={(event) => updateFilter('login', event.target.value)}
+          placeholder="用户名、邮箱或手机号"
+          value={filters.login}
+        />
        <Select
          label="状态"
          onChange={(event) => updateFilter('status', event.target.value)}
-          options={[{ label: '全部状态', value: '' }, { label: '正常', value: 'active' }, { label: '禁用', value: 'disabled' }]}
+          options={[
+            { label: '全部状态', value: '' },
+            { label: '正常', value: 'active' },
+            { label: '禁用', value: 'disabled' },
+          ]}
          value={filters.status}
        />
        <div className="client-user-filter__actions">
-          <Button disabled={querying} icon={<Search size={16} />} onClick={() => void queryUsers()}>{querying ? '查询中...' : '查询'}</Button>
-          <Button disabled={querying} onClick={() => { setFilters(emptyFilters); void queryUsers(emptyFilters); }} variant="secondary">重置</Button>
+          <Button disabled={querying} icon={<Search size={16} />} onClick={() => void queryUsers()}>
+            {querying ? '查询中...' : '查询'}
+          </Button>
+          <Button
+            disabled={querying}
+            onClick={() => {
+              setFilters(emptyFilters);
+              void queryUsers(emptyFilters);
+            }}
+            variant="secondary"
+          >
+            重置
+          </Button>
        </div>
      </div>
      {error ? <div className="surface empty-state">{error}</div> : null}
@@ -237,38 +321,141 @@ export function ClientUsersPage() {
        <Table columns={columns} data={users} emptyText="暂无用户" rowKey="id" />
      </div>

-      {(creating || editingUser) ? (
+      {creating || editingUser ? (
        <Modal
-          footer={<><Button disabled={saving} onClick={() => { setCreating(false); setEditingUser(null); }} variant="secondary">取消</Button><Button disabled={saving} onClick={() => void saveUser()}>{saving ? '保存中...' : '保存'}</Button></>}
-          onClose={() => { setCreating(false); setEditingUser(null); }}
+          footer={
+            <>
+              <Button
+                disabled={saving}
+                onClick={() => {
+                  setCreating(false);
+                  setEditingUser(null);
+                }}
+                variant="secondary"
+              >
+                取消
+              </Button>
+              <Button disabled={saving} onClick={() => void saveUser()}>
+                {saving ? '保存中...' : '保存'}
+              </Button>
+            </>
+          }
+          onClose={() => {
+            setCreating(false);
+            setEditingUser(null);
+          }}
          open
          size="xl"
          title={creating ? '添加用户' : '编辑用户'}
        >
          <div className="system-user-form">
-            <Input label="用户名 *" onChange={(event) => updateField('displayName', event.target.value)} placeholder="请输入用户名" value={form.displayName} />
-            <Input label="邮箱 *" onChange={(event) => updateField('email', event.target.value)} placeholder="请输入邮箱" value={form.email} />
-            <Input label="手机号 *" onChange={(event) => updateField('phone', event.target.value)} placeholder="请输入手机号" value={form.phone} />
-            <Input hint="可用用户名、邮箱或手机号登录" label="用户名/登录账号" onChange={(event) => updateField('username', event.target.value)} value={form.username} />
-            {creating ? <Input label="初始密码 *" onChange={(event) => updateField('password', event.target.value)} type="password" value={form.password} /> : null}
-            <Select label="状态 *" onChange={(event) => updateField('status', event.target.value)} options={[{ label: '正常', value: 'active' }, { label: '禁用', value: 'disabled' }]} value={form.status} />
-            {formError ? <p className="form-error" role="alert">{formError}</p> : null}
+            <Input
+              label="用户名 *"
+              onChange={(event) => updateField('displayName', event.target.value)}
+              placeholder="请输入用户名"
+              value={form.displayName}
+            />
+            <Input
+              label="邮箱 *"
+              onChange={(event) => updateField('email', event.target.value)}
+              placeholder="请输入邮箱"
+              value={form.email}
+            />
+            <Input
+              label="手机号 *"
+              onChange={(event) => updateField('phone', event.target.value)}
+              placeholder="请输入手机号"
+              value={form.phone}
+            />
+            <Input
+              hint="可用用户名、邮箱或手机号登录"
+              label="用户名/登录账号"
+              onChange={(event) => updateField('username', event.target.value)}
+              value={form.username}
+            />
+            {creating ? (
+              <Input
+                label="初始密码 *"
+                onChange={(event) => updateField('password', event.target.value)}
+                type="password"
+                value={form.password}
+              />
+            ) : null}
+            <Select
+              label="状态 *"
+              onChange={(event) => updateField('status', event.target.value)}
+              options={[
+                { label: '正常', value: 'active' },
+                { label: '禁用', value: 'disabled' },
+              ]}
+              value={form.status}
+            />
+            {formError ? (
+              <p className="form-error" role="alert">
+                {formError}
+              </p>
+            ) : null}
          </div>
        </Modal>
      ) : null}

      {passwordUser ? (
-        <Modal footer={<><Button onClick={() => setPasswordUser(null)} variant="secondary">取消</Button><Button onClick={() => void savePassword()}>保存</Button></>} onClose={() => setPasswordUser(null)} open title="修改密码">
+        <Modal
+          footer={
+            <>
+              <Button onClick={() => setPasswordUser(null)} variant="secondary">
+                取消
+              </Button>
+              <Button onClick={() => void savePassword()}>保存</Button>
+            </>
+          }
+          onClose={() => setPasswordUser(null)}
+          open
+          title="修改密码"
+        >
          <div className="system-user-form">
-            <Input label="新密码" onChange={(event) => setNewPassword(event.target.value)} type="password" value={newPassword} />
+            <Input
+              label="新密码"
+              onChange={(event) => setNewPassword(event.target.value)}
+              type="password"
+              value={newPassword}
+            />
          </div>
        </Modal>
      ) : null}

      {confirmAction ? (
-        <Modal footer={<><Button disabled={confirming} onClick={() => setConfirmAction(null)} variant="secondary">取消</Button><Button disabled={confirming} onClick={() => void runConfirm()} variant={confirmAction.type === 'delete' ? 'danger' : 'primary'}>{confirming ? '处理中...' : '确认'}</Button></>} onClose={() => { if (!confirming) setConfirmAction(null); }} open title={confirmAction.type === 'delete' ? '删除用户' : '变更用户状态'}>
-          <p>{confirmAction.type === 'delete' ? `确认删除用户 ${confirmAction.user.displayName}？` : `确认${confirmAction.user.status === 'active' ? '禁用' : '启用'}用户 ${confirmAction.user.displayName}？`}</p>
-          {confirmError ? <p className="form-error" role="alert">{confirmError}</p> : null}
+        <Modal
+          footer={
+            <>
+              <Button disabled={confirming} onClick={() => setConfirmAction(null)} variant="secondary">
+                取消
+              </Button>
+              <Button
+                disabled={confirming}
+                onClick={() => void runConfirm()}
+                variant={confirmAction.type === 'delete' ? 'danger' : 'primary'}
+              >
+                {confirming ? '处理中...' : '确认'}
+              </Button>
+            </>
+          }
+          onClose={() => {
+            if (!confirming) setConfirmAction(null);
+          }}
+          open
+          title={confirmAction.type === 'delete' ? '删除用户' : '变更用户状态'}
+        >
+          <p>
+            {confirmAction.type === 'delete'
+              ? `确认删除用户 ${confirmAction.user.displayName}？`
+              : `确认${confirmAction.user.status === 'active' ? '禁用' : '启用'}用户 ${confirmAction.user.displayName}？`}
+          </p>
+          {confirmError ? (
+            <p className="form-error" role="alert">
+              {confirmError}
+            </p>
+          ) : null}
        </Modal>
      ) : null}
    </section>