From 18fc2e326f650090aa5775ec104baf8161497c95 Mon Sep 17 00:00:00 2001
From: zichun <zhuzichunhogan@gmail.com>
Date: Fri, 15 May 2026 18:07:58 +0800
Subject: [PATCH] feat(frontend): UserFormPage (create + edit) + 子组件 + 路由接入

---
 frontend/src/pages/users/UserFormFields.tsx      |  75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/src/pages/users/UserFormPage.test.tsx   |  91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/src/pages/users/UserFormPage.tsx        | 198 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/src/pages/users/UserPermissionPanel.tsx |  35 +++++++++++++++++++++++++++++++++++
 frontend/src/router/index.tsx                    |  30 ++++++++++++++++++++++--------
 5 files changed, 421 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/pages/users/UserFormFields.tsx
 create mode 100644 frontend/src/pages/users/UserFormPage.test.tsx
 create mode 100644 frontend/src/pages/users/UserFormPage.tsx
 create mode 100644 frontend/src/pages/users/UserPermissionPanel.tsx

diff --git a/frontend/src/pages/users/UserFormFields.tsx b/frontend/src/pages/users/UserFormFields.tsx
new file mode 100644
index 0000000..3d500a5
--- /dev/null
+++ b/frontend/src/pages/users/UserFormFields.tsx
@@ -0,0 +1,75 @@
+import { Form, Input, Select, Checkbox } from 'antd';
+import { USER_TYPE_OPTIONS, LANGUAGE_OPTIONS, EMPLOYEE_OPTIONS } from './usersConstants';
+
+interface Props {
+  mode: 'create' | 'edit';
+  disabled?: boolean;
+}
+
+export default function UserFormFields({ mode, disabled = false }: Props) {
+  return (
+    <>
+      <Form.Item
+        label="用户名"
+        name="username"
+        rules={
+          mode === 'create'
+            ? [
+                { required: true, message: '请输入用户名' },
+                {
+                  pattern: /^[A-Za-z0-9_]{3,20}$/,
+                  message: '用户名必须为 3-20 位字母数字下划线',
+                },
+              ]
+            : []
+        }
+      >
+        <Input
+          placeholder="3-20 位字母数字下划线"
+          disabled={disabled || mode === 'edit'}
+          autoComplete="off"
+        />
+      </Form.Item>
+
+      <Form.Item
+        label="用户号"
+        name="userCode"
+        rules={[
+          { required: true, message: '请输入用户号' },
+          { max: 50, message: '用户号不能超过 50 字符' },
+        ]}
+      >
+        <Input placeholder="用户号" disabled={disabled} />
+      </Form.Item>
+
+      <Form.Item
+        label="类型"
+        name="userType"
+        rules={[{ required: true, message: '请选择类型' }]}
+      >
+        <Select options={USER_TYPE_OPTIONS as any} disabled={disabled} />
+      </Form.Item>
+
+      <Form.Item
+        label="语言"
+        name="language"
+        rules={[{ required: true, message: '请选择语言' }]}
+      >
+        <Select options={LANGUAGE_OPTIONS as any} disabled={disabled} />
+      </Form.Item>
+
+      <Form.Item label="单据修改权限" name="canEditDocument" valuePropName="checked">
+        <Checkbox disabled={disabled}>允许修改</Checkbox>
+      </Form.Item>
+
+      <Form.Item label="员工名" name="employeeId">
+        <Select
+          options={EMPLOYEE_OPTIONS}
+          disabled={disabled}
+          allowClear
+          placeholder="可选，不选 = 无关联"
+        />
+      </Form.Item>
+    </>
+  );
+}
diff --git a/frontend/src/pages/users/UserFormPage.test.tsx b/frontend/src/pages/users/UserFormPage.test.tsx
new file mode 100644
index 0000000..8a78fba
--- /dev/null
+++ b/frontend/src/pages/users/UserFormPage.test.tsx
@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { ConfigProvider } from 'antd';
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer, { setSession } from '../../store/slices/authSlice';
+import UserFormPage from './UserFormPage';
+
+function makeStore() {
+  const store = configureStore({ reducer: { auth: authReducer } });
+  store.dispatch(
+    setSession({
+      accessToken: 'jwt',
+      userInfo: {
+        userId: 2,
+        username: 'admin',
+        userType: 'SUPER_ADMIN',
+        language: 'zh-CN',
+        companyCode: 'HQ',
+      },
+    }),
+  );
+  return store;
+}
+
+function renderForm(mode: 'create' | 'edit', initialEntry: string) {
+  return render(
+    <Provider store={makeStore()}>
+      <ConfigProvider>
+        <MemoryRouter initialEntries={[initialEntry]}>
+          <Routes>
+            <Route path="/users" element={<div data-testid="users-list">LIST</div>} />
+            <Route path="/users/new" element={<UserFormPage mode={mode} />} />
+            <Route path="/users/:userId" element={<UserFormPage mode={mode} />} />
+          </Routes>
+        </MemoryRouter>
+      </ConfigProvider>
+    </Provider>,
+  );
+}
+
+describe('UserFormPage (create)', () => {
+  it('renders empty form with username editable', () => {
+    renderForm('create', '/users/new');
+    const usernameInput = screen.getByLabelText('用户名') as HTMLInputElement;
+    expect(usernameInput).not.toBeDisabled();
+  });
+
+  it('cancel button navigates back to /users', async () => {
+    renderForm('create', '/users/new');
+    const user = userEvent.setup();
+    await user.click(screen.getByTestId('form-cancel'));
+    expect(await screen.findByTestId('users-list')).toBeInTheDocument();
+  });
+
+  it('submit valid form navigates to /users', async () => {
+    renderForm('create', '/users/new');
+    const user = userEvent.setup();
+    await user.type(screen.getByLabelText('用户名'), 'newbie');
+    await user.type(screen.getByLabelText('用户号'), 'U999');
+    await user.click(screen.getByTestId('form-save'));
+    expect(await screen.findByTestId('users-list', {}, { timeout: 3000 })).toBeInTheDocument();
+  });
+
+  it('duplicate username (40901) shows field-level error', async () => {
+    renderForm('create', '/users/new');
+    const user = userEvent.setup();
+    await user.type(screen.getByLabelText('用户名'), 'dup');
+    await user.type(screen.getByLabelText('用户号'), 'U999');
+    await user.click(screen.getByTestId('form-save'));
+    await waitFor(() => expect(screen.getByText('用户名已存在')).toBeInTheDocument());
+  });
+});
+
+describe('UserFormPage (edit)', () => {
+  it('fetches detail and prefills form with username readonly', async () => {
+    renderForm('edit', '/users/1');
+    await waitFor(() => {
+      const usernameInput = screen.getByLabelText('用户名') as HTMLInputElement;
+      expect(usernameInput.value).toBe('alice');
+      expect(usernameInput).toBeDisabled();
+    });
+  });
+
+  it('unknown userId (40401) shows 404 result', async () => {
+    renderForm('edit', '/users/99999');
+    await waitFor(() => expect(screen.getByTestId('user-not-found')).toBeInTheDocument());
+  });
+});
diff --git a/frontend/src/pages/users/UserFormPage.tsx b/frontend/src/pages/users/UserFormPage.tsx
new file mode 100644
index 0000000..0e63bff
--- /dev/null
+++ b/frontend/src/pages/users/UserFormPage.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Alert, Button, Card, Form, Result, Space, Spin, message } from 'antd';
+import { usersApi } from '../../api/users';
+import type { CreateUserReq, UpdateUserReq, UserDetail } from '../../api/users';
+import { BizError, isBizError } from '../../api/errors';
+import { ERROR_MESSAGES } from './usersConstants';
+import UserFormFields from './UserFormFields';
+import UserPermissionPanel from './UserPermissionPanel';
+
+interface Props {
+  mode: 'create' | 'edit';
+}
+
+interface FormValues {
+  username?: string;
+  userCode?: string;
+  userType?: 'NORMAL' | 'SUPER_ADMIN';
+  language?: 'zh-CN' | 'en-US' | 'zh-TW';
+  canEditDocument?: boolean;
+  employeeId?: number;
+}
+
+export default function UserFormPage({ mode }: Props) {
+  const navigate = useNavigate();
+  const params = useParams<{ userId?: string }>();
+  const userId = params.userId ? Number(params.userId) : undefined;
+
+  const [form] = Form.useForm<FormValues>();
+  const [loadingInitial, setLoadingInitial] = useState(mode === 'edit');
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [notFound, setNotFound] = useState(false);
+  const [permissionCategoryIds, setPermissionCategoryIds] = useState<number[]>([]);
+  const [originalDetail, setOriginalDetail] = useState<UserDetail | null>(null);
+
+  useEffect(() => {
+    if (mode !== 'edit' || userId == null) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const detail = await usersApi.get(userId);
+        if (cancelled) return;
+        setOriginalDetail(detail);
+        form.setFieldsValue({
+          username: detail.username,
+          userCode: detail.userCode,
+          userType: detail.userType,
+          language: detail.language as FormValues['language'],
+          canEditDocument: false, // detail VO 当前不返回，默认 false
+          employeeId: detail.employeeId ?? undefined,
+        });
+        setPermissionCategoryIds(detail.permissionCategoryIds ?? []);
+      } catch (e) {
+        if (cancelled) return;
+        if (isBizError(e) && e.code === 40401) {
+          setNotFound(true);
+        } else if (isBizError(e)) {
+          setErrorMessage(e.message || (ERROR_MESSAGES.UNKNOWN as string));
+        } else {
+          setErrorMessage(ERROR_MESSAGES.UNKNOWN as string);
+        }
+      } finally {
+        if (!cancelled) setLoadingInitial(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, userId, form]);
+
+  const handleSubmit = async (values: FormValues) => {
+    setSubmitting(true);
+    setErrorMessage(null);
+    form.setFields([
+      { name: 'username', errors: [] },
+      { name: 'userCode', errors: [] },
+    ]);
+
+    try {
+      if (mode === 'create') {
+        await usersApi.create({
+          username: values.username!,
+          userCode: values.userCode!,
+          userType: values.userType!,
+          language: values.language!,
+          canEditDocument: !!values.canEditDocument,
+          employeeId: values.employeeId,
+          permissionCategoryIds,
+        });
+        message.success('新增用户成功');
+      } else if (userId != null) {
+        const patch: UpdateUserReq = {
+          userCode: values.userCode,
+          userType: values.userType,
+          language: values.language,
+          canEditDocument: values.canEditDocument,
+          employeeId: values.employeeId,
+          permissionCategoryIds,
+        };
+        await usersApi.update(userId, patch);
+        message.success('保存成功');
+      }
+      navigate('/users');
+    } catch (e) {
+      handleBizError(e);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleBizError = (e: unknown) => {
+    if (!isBizError(e)) {
+      setErrorMessage(ERROR_MESSAGES.UNKNOWN as string);
+      return;
+    }
+    const be = e as BizError;
+    if (be.code === 40901) {
+      form.setFields([{ name: 'username', errors: [ERROR_MESSAGES[40901] as string] }]);
+    } else if (be.code === 40902) {
+      form.setFields([{ name: 'userCode', errors: [ERROR_MESSAGES[40902] as string] }]);
+    } else if (be.code === 40004) {
+      setErrorMessage(ERROR_MESSAGES[40004] as string);
+    } else if (be.code === 40401) {
+      setNotFound(true);
+    } else if (be.code === -1) {
+      setErrorMessage(ERROR_MESSAGES.NETWORK as string);
+    } else {
+      setErrorMessage(be.message || (ERROR_MESSAGES.UNKNOWN as string));
+    }
+  };
+
+  if (notFound) {
+    return (
+      <div data-testid="user-not-found">
+        <Result
+          status="404"
+          title="用户不存在"
+          extra={
+            <Button type="primary" onClick={() => navigate('/users')}>
+              返回列表
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid={mode === 'create' ? 'user-form-create' : 'user-form-edit'} style={{ padding: 16 }}>
+      <Space style={{ marginBottom: 12 }}>
+        <Button
+          type="primary"
+          loading={submitting}
+          onClick={() => form.submit()}
+          data-testid="form-save"
+        >
+          保存
+        </Button>
+        <Button onClick={() => navigate('/users')} data-testid="form-cancel">
+          取消
+        </Button>
+      </Space>
+      {errorMessage && (
+        <Alert
+          type="error"
+          message={errorMessage}
+          showIcon
+          style={{ marginBottom: 12 }}
+          data-testid="form-error-alert"
+        />
+      )}
+      <Spin spinning={loadingInitial}>
+        <Card>
+          <Form<FormValues>
+            form={form}
+            layout="vertical"
+            onFinish={handleSubmit}
+            initialValues={{
+              userType: 'NORMAL',
+              language: 'zh-CN',
+              canEditDocument: false,
+            }}
+            disabled={submitting || loadingInitial}
+            data-testid="user-form"
+          >
+            <UserFormFields mode={mode} disabled={submitting || loadingInitial} />
+          </Form>
+          <UserPermissionPanel
+            value={permissionCategoryIds}
+            onChange={setPermissionCategoryIds}
+            disabled={submitting || loadingInitial}
+          />
+        </Card>
+      </Spin>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/users/UserPermissionPanel.tsx b/frontend/src/pages/users/UserPermissionPanel.tsx
new file mode 100644
index 0000000..1acfb1d
--- /dev/null
+++ b/frontend/src/pages/users/UserPermissionPanel.tsx
@@ -0,0 +1,35 @@
+import { Tabs, Checkbox } from 'antd';
+import { PERMISSION_CATEGORY_OPTIONS } from './usersConstants';
+
+interface Props {
+  value: number[];
+  onChange: (ids: number[]) => void;
+  disabled?: boolean;
+}
+
+export default function UserPermissionPanel({ value, onChange, disabled = false }: Props) {
+  return (
+    <div data-testid="user-permission-panel">
+      <Tabs
+        items={[
+          {
+            key: 'main',
+            label: '权限组',
+            children: (
+              <Checkbox.Group
+                options={PERMISSION_CATEGORY_OPTIONS}
+                value={value}
+                onChange={(checked) => onChange(checked as number[])}
+                disabled={disabled}
+                data-testid="permission-category-group"
+              />
+            ),
+          },
+          { key: 'customer', label: '客户查看权限', disabled: true, children: null },
+          { key: 'supplier', label: '供应商查看权限', disabled: true, children: null },
+          { key: 'person', label: '人员查看权限', disabled: true, children: null },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index 22c3125..3ca96bd 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -1,19 +1,33 @@
 import { createBrowserRouter, Navigate } from 'react-router-dom';
 import LoginPage from '../pages/login/LoginPage';
-import RequireAuth from './RequireAuth';
-
-function UsersPlaceholder() {
-  return <div data-testid="users-placeholder">users placeholder</div>;
-}
+import UsersListPage from '../pages/users/UsersListPage';
+import UserFormPage from '../pages/users/UserFormPage';
+import RequireSuperAdmin from './RequireSuperAdmin';
 
 export const router = createBrowserRouter([
   { path: '/login', element: <LoginPage /> },
   {
     path: '/users',
     element: (
-      <RequireAuth>
-        <UsersPlaceholder />
-      </RequireAuth>
+      <RequireSuperAdmin>
+        <UsersListPage />
+      </RequireSuperAdmin>
+    ),
+  },
+  {
+    path: '/users/new',
+    element: (
+      <RequireSuperAdmin>
+        <UserFormPage mode="create" />
+      </RequireSuperAdmin>
+    ),
+  },
+  {
+    path: '/users/:userId',
+    element: (
+      <RequireSuperAdmin>
+        <UserFormPage mode="edit" />
+      </RequireSuperAdmin>
     ),
   },
   { path: '*', element: <Navigate to="/users" replace /> },
--
libgit2 0.22.2