Add user management page and technician picker for reassign

- New /admin/users page (admin only) for creating technicians,
  editing role/email, resetting passwords, deleting users
- AftersalesDetail reassign modal now uses a searchable Select
  populated from /api/users/assignable instead of raw user ID input
- Menu entry only shown to admins

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/App.tsx

@@ -10,6 +10,7 @@ import EmployeeSerialsPage from './pages/EmployeeSerials';
 import AftersalesPage from './pages/Aftersales';
 import AftersalesDetailPage from './pages/AftersalesDetail';
 import AftersalesConfirmPage from './pages/AftersalesConfirm';
+import UsersPage from './pages/Users';
 
 const PrivateRoute = () => {
   const user = authApi.getCurrentUser();
@@ -52,6 +53,7 @@ function App() {
             <Route path="/admin/employee-serials" element={<EmployeeSerialsPage />} />
             <Route path="/admin/aftersales" element={<AftersalesPage />} />
             <Route path="/admin/aftersales/:serialNumber" element={<AftersalesDetailPage />} />
+            <Route path="/admin/users" element={<UsersPage />} />
             <Route path="/admin/profile" element={<ProfilePage />} />
           </Route>
         </Route>

src/components/AdminLayout.tsx

@@ -8,6 +8,7 @@ import {
   ExclamationCircleOutlined,
   IdcardOutlined,
   ToolOutlined,
+  UsergroupAddOutlined,
 } from '@ant-design/icons';
 import { authApi } from '@/services/api';
 import './styles/AdminLayout.css';
@@ -45,6 +46,16 @@ function AdminLayout() {
       label: '售后工单',
       onClick: () => navigate('/admin/aftersales'),
     },
+    ...(user?.role === 'admin'
+      ? [
+          {
+            key: 'users',
+            icon: <UsergroupAddOutlined />,
+            label: '用户管理',
+            onClick: () => navigate('/admin/users'),
+          },
+        ]
+      : []),
   ];
 
   const handleLogout = () => {
@@ -91,6 +102,7 @@ function AdminLayout() {
     if (path.includes('/manage')) return 'manage';
     if (path.includes('/employee-serials')) return 'employee-serials';
     if (path.includes('/aftersales')) return 'aftersales';
+    if (path.includes('/users')) return 'users';
     if (path.includes('/profile')) return 'profile';
     return 'dashboard';
   };
@@ -101,6 +113,7 @@ function AdminLayout() {
     if (path.includes('/manage')) return '企业管理';
     if (path.includes('/employee-serials')) return '员工管理';
     if (path.includes('/aftersales')) return '售后工单';
+    if (path.includes('/users')) return '用户管理';
     if (path.includes('/profile')) return '用户资料';
     return '控制台';
   };

src/pages/AftersalesDetail.tsx

@@ -23,12 +23,13 @@ import {
   StopOutlined,
   UserSwitchOutlined,
 } from '@ant-design/icons';
-import { aftersalesApi, authApi } from '@/services/api';
+import { aftersalesApi, authApi, usersApi } from '@/services/api';
 import type {
   AftersalesOrder,
   AftersalesServiceType,
   AftersalesWorkOrderStatus,
   UpdateAftersalesRequest,
+  User,
 } from '@/types';
 
 const SERVICE_TYPE_LABEL: Record<AftersalesServiceType, string> = {
@@ -81,6 +82,7 @@ function AftersalesDetailPage() {
 
   const [reassignModalVisible, setReassignModalVisible] = useState(false);
   const [reassignTechnicianId, setReassignTechnicianId] = useState<number | undefined>();
+  const [assignableUsers, setAssignableUsers] = useState<User[]>([]);
 
   const loadOrder = async () => {
     setLoading(true);
@@ -107,6 +109,18 @@ function AftersalesDetailPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [serialNumber]);
 
+  const openReassign = async () => {
+    setReassignModalVisible(true);
+    if (assignableUsers.length === 0) {
+      try {
+        const users = await usersApi.assignable();
+        setAssignableUsers(users);
+      } catch (err: any) {
+        message.error(err?.response?.data?.message || err.message || '加载技术员列表失败');
+      }
+    }
+  };
+
   const handleSave = async (values: UpdateAftersalesRequest) => {
     if (!order) return;
     setSaving(true);
@@ -260,7 +274,7 @@ function AftersalesDetailPage() {
             </Button>
             {isAdmin && !isClosed && (
               <>
-                <Button icon={<UserSwitchOutlined />} onClick={() => setReassignModalVisible(true)}>
+                <Button icon={<UserSwitchOutlined />} onClick={openReassign}>
                   重新分配
                 </Button>
                 <Button danger icon={<StopOutlined />} onClick={handleForceClose}>
@@ -424,25 +438,28 @@ function AftersalesDetailPage() {
       <Modal
         title="重新分配技术员"
         open={reassignModalVisible}
-        onCancel={() => setReassignModalVisible(false)}
+        onCancel={() => {
+          setReassignModalVisible(false);
+          setReassignTechnicianId(undefined);
+        }}
         onOk={handleReassign}
         okText="确认"
         cancelText="取消"
       >
         <Form layout="vertical">
-          <Form.Item label="新技术员 ID" required>
-            <Input
-              type="number"
-              placeholder="请输入技术员的用户 ID"
+          <Form.Item label="选择技术员" required>
+            <Select
+              placeholder="请选择技术员或管理员"
               value={reassignTechnicianId}
-              onChange={(e) =>
-                setReassignTechnicianId(e.target.value ? Number(e.target.value) : undefined)
-              }
+              onChange={(v) => setReassignTechnicianId(v)}
+              showSearch
+              optionFilterProp="label"
+              options={assignableUsers.map((u) => ({
+                value: u.id,
+                label: `${u.name}（${u.username}）${u.role === 'admin' ? ' · 管理员' : ' · 技术员'}`,
+              }))}
             />
           </Form.Item>
-          <p style={{ color: '#888', fontSize: 12 }}>
-            后续会在用户管理页提供技术员列表选择，目前先输入 ID。
-          </p>
         </Form>
       </Modal>
     </div>

src/pages/Users.tsx

@@ -0,0 +1,431 @@
+import { useEffect, useState } from 'react';
+import {
+  Card,
+  Table,
+  Button,
+  Space,
+  Input,
+  Select,
+  Tag,
+  Modal,
+  Form,
+  message,
+  Pagination,
+} from 'antd';
+import {
+  UserOutlined,
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  KeyOutlined,
+} from '@ant-design/icons';
+import { usersApi, authApi } from '@/services/api';
+import type { User, UserRole, CreateUserRequest, UpdateUserRequest } from '@/types';
+
+const ROLE_LABEL: Record<UserRole, string> = {
+  admin: '管理员',
+  technician: '技术员',
+  user: '普通用户',
+};
+
+const ROLE_COLOR: Record<UserRole, string> = {
+  admin: 'red',
+  technician: 'blue',
+  user: 'default',
+};
+
+function UsersPage() {
+  const currentUser = authApi.getCurrentUser();
+
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [search, setSearch] = useState('');
+  const [roleFilter, setRoleFilter] = useState<UserRole | undefined>();
+
+  const [createVisible, setCreateVisible] = useState(false);
+  const [createLoading, setCreateLoading] = useState(false);
+  const [createForm] = Form.useForm<CreateUserRequest>();
+
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [editLoading, setEditLoading] = useState(false);
+  const [editForm] = Form.useForm<UpdateUserRequest>();
+
+  const [resetPasswordUser, setResetPasswordUser] = useState<User | null>(null);
+  const [resetLoading, setResetLoading] = useState(false);
+  const [resetForm] = Form.useForm<{ newPassword: string }>();
+
+  const loadUsers = async () => {
+    setLoading(true);
+    try {
+      const result = await usersApi.list({
+        page,
+        limit,
+        search: search || undefined,
+        role: roleFilter,
+      });
+      setUsers(result.data || []);
+      setTotal(result.pagination?.total || 0);
+    } catch (err: any) {
+      message.error(err?.response?.data?.message || err.message || '加载用户列表失败');
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, limit, search, roleFilter]);
+
+  const handleCreate = async (values: CreateUserRequest) => {
+    setCreateLoading(true);
+    try {
+      await usersApi.create(values);
+      message.success('用户创建成功');
+      setCreateVisible(false);
+      createForm.resetFields();
+      loadUsers();
+    } catch (err: any) {
+      message.error(err?.response?.data?.message || err.message || '创建失败');
+    } finally {
+      setCreateLoading(false);
+    }
+  };
+
+  const openEdit = (user: User) => {
+    setEditingUser(user);
+    editForm.setFieldsValue({
+      name: user.name,
+      email: user.email,
+      role: user.role,
+    });
+  };
+
+  const handleEdit = async (values: UpdateUserRequest) => {
+    if (!editingUser) return;
+    setEditLoading(true);
+    try {
+      await usersApi.update(editingUser.id, values);
+      message.success('用户更新成功');
+      setEditingUser(null);
+      loadUsers();
+    } catch (err: any) {
+      message.error(err?.response?.data?.message || err.message || '更新失败');
+    } finally {
+      setEditLoading(false);
+    }
+  };
+
+  const handleResetPassword = async (values: { newPassword: string }) => {
+    if (!resetPasswordUser) return;
+    setResetLoading(true);
+    try {
+      await usersApi.resetPassword(resetPasswordUser.id, values.newPassword);
+      message.success('密码重置成功');
+      setResetPasswordUser(null);
+      resetForm.resetFields();
+    } catch (err: any) {
+      message.error(err?.response?.data?.message || err.message || '重置失败');
+    } finally {
+      setResetLoading(false);
+    }
+  };
+
+  const handleDelete = (user: User) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除用户 "${user.username}" 吗？此操作不可恢复！`,
+      okText: '确定',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await usersApi.delete(user.id);
+          message.success('删除成功');
+          loadUsers();
+        } catch (err: any) {
+          message.error(err?.response?.data?.message || err.message || '删除失败');
+        }
+      },
+    });
+  };
+
+  const columns = [
+    {
+      title: '用户名',
+      dataIndex: 'username',
+      key: 'username',
+      render: (text: string) => <span style={{ fontFamily: 'monospace' }}>{text}</span>,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      key: 'email',
+      render: (text?: string) => text || '-',
+    },
+    {
+      title: '角色',
+      dataIndex: 'role',
+      key: 'role',
+      width: 100,
+      render: (role: UserRole) => <Tag color={ROLE_COLOR[role]}>{ROLE_LABEL[role]}</Tag>,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      width: 170,
+      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 260,
+      render: (_: any, record: User) => (
+        <Space>
+          <Button
+            type="link"
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => openEdit(record)}
+          >
+            编辑
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            icon={<KeyOutlined />}
+            onClick={() => setResetPasswordUser(record)}
+          >
+            重置密码
+          </Button>
+          {record.id !== currentUser?.id && (
+            <Button
+              type="link"
+              size="small"
+              danger
+              icon={<DeleteOutlined />}
+              onClick={() => handleDelete(record)}
+            >
+              删除
+            </Button>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <Card
+        title={
+          <Space>
+            <UserOutlined />
+            <span>用户管理</span>
+          </Space>
+        }
+        extra={
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setCreateVisible(true)}
+          >
+            新建用户
+          </Button>
+        }
+      >
+        <Space style={{ marginBottom: 16 }}>
+          <Input.Search
+            placeholder="搜索用户名/姓名/邮箱"
+            allowClear
+            style={{ width: 260 }}
+            onSearch={(v) => {
+              setPage(1);
+              setSearch(v);
+            }}
+            onChange={(e) => {
+              if (!e.target.value) {
+                setPage(1);
+                setSearch('');
+              }
+            }}
+          />
+          <Select
+            placeholder="角色筛选"
+            allowClear
+            style={{ width: 140 }}
+            value={roleFilter}
+            onChange={(v) => {
+              setPage(1);
+              setRoleFilter(v);
+            }}
+            options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
+              value: k,
+              label: ROLE_LABEL[k],
+            }))}
+          />
+        </Space>
+
+        <Table
+          columns={columns}
+          dataSource={users}
+          rowKey="id"
+          loading={loading}
+          pagination={false}
+        />
+        <div style={{ marginTop: 16 }}>
+          <Pagination
+            current={page}
+            pageSize={limit}
+            total={total}
+            onChange={(newPage, newLimit) => {
+              setPage(newPage);
+              setLimit(newLimit);
+            }}
+            showSizeChanger
+            showTotal={(t) => `共计 ${t} 条记录`}
+          />
+        </div>
+      </Card>
+
+      <Modal
+        title="新建用户"
+        open={createVisible}
+        onCancel={() => {
+          setCreateVisible(false);
+          createForm.resetFields();
+        }}
+        footer={null}
+        width={480}
+      >
+        <Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ role: 'technician' }}>
+          <Form.Item
+            name="username"
+            label="用户名"
+            rules={[
+              { required: true, message: '请输入用户名' },
+              { min: 3, max: 50, message: '用户名长度 3-50' },
+            ]}
+          >
+            <Input placeholder="登录用用户名" />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            label="初始密码"
+            rules={[
+              { required: true, message: '请输入密码' },
+              { min: 6, message: '密码至少 6 位' },
+            ]}
+          >
+            <Input.Password placeholder="至少 6 位" />
+          </Form.Item>
+          <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
+            <Select
+              options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
+                value: k,
+                label: ROLE_LABEL[k],
+              }))}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+              <Button onClick={() => setCreateVisible(false)}>取消</Button>
+              <Button type="primary" htmlType="submit" loading={createLoading}>
+                创建
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      <Modal
+        title={editingUser ? `编辑用户：${editingUser.username}` : '编辑用户'}
+        open={!!editingUser}
+        onCancel={() => setEditingUser(null)}
+        footer={null}
+        width={480}
+      >
+        <Form form={editForm} layout="vertical" onFinish={handleEdit}>
+          <Form.Item name="name" label="姓名">
+            <Input />
+          </Form.Item>
+          <Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="role" label="角色">
+            <Select
+              options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
+                value: k,
+                label: ROLE_LABEL[k],
+              }))}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+              <Button onClick={() => setEditingUser(null)}>取消</Button>
+              <Button type="primary" htmlType="submit" loading={editLoading}>
+                保存
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      <Modal
+        title={resetPasswordUser ? `重置密码：${resetPasswordUser.username}` : '重置密码'}
+        open={!!resetPasswordUser}
+        onCancel={() => {
+          setResetPasswordUser(null);
+          resetForm.resetFields();
+        }}
+        footer={null}
+        width={420}
+      >
+        <Form form={resetForm} layout="vertical" onFinish={handleResetPassword}>
+          <Form.Item
+            name="newPassword"
+            label="新密码"
+            rules={[
+              { required: true, message: '请输入新密码' },
+              { min: 6, message: '密码至少 6 位' },
+            ]}
+          >
+            <Input.Password placeholder="至少 6 位" />
+          </Form.Item>
+          <Form.Item>
+            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+              <Button
+                onClick={() => {
+                  setResetPasswordUser(null);
+                  resetForm.resetFields();
+                }}
+              >
+                取消
+              </Button>
+              <Button type="primary" htmlType="submit" loading={resetLoading}>
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}
+
+export default UsersPage;

src/services/api.ts

@@ -10,6 +10,10 @@ import type {
   CreateAftersalesRequest,
   UpdateAftersalesRequest,
   CustomerConfirmRequest,
+  CreateUserRequest,
+  UpdateUserRequest,
+  UserListFilter,
+  UserListResponse,
 } from '@/types';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
@@ -433,4 +437,55 @@ export const aftersalesApi = {
     }
     throw new Error(response.data.error || '提交确认失败');
   },
+};
+
+export const usersApi = {
+  list: async (filter?: UserListFilter) => {
+    const params = new URLSearchParams();
+    if (filter?.page && filter.page > 1) params.append('page', String(filter.page));
+    if (filter?.limit && filter.limit !== 20) params.append('limit', String(filter.limit));
+    if (filter?.role) params.append('role', filter.role);
+    if (filter?.search) params.append('search', filter.search);
+
+    const url = params.toString() ? `/users?${params.toString()}` : '/users';
+    const response = await apiClient.get(url);
+    return response.data as UserListResponse;
+  },
+
+  create: async (data: CreateUserRequest) => {
+    const response = await apiClient.post('/users', data);
+    if (response.data.user) {
+      return response.data.user as User;
+    }
+    throw new Error(response.data.error || '创建用户失败');
+  },
+
+  update: async (id: number, data: UpdateUserRequest) => {
+    const response = await apiClient.patch(`/users/${id}`, data);
+    if (response.data.user) {
+      return response.data.user as User;
+    }
+    throw new Error(response.data.error || '更新用户失败');
+  },
+
+  resetPassword: async (id: number, newPassword: string) => {
+    const response = await apiClient.post(`/users/${id}/reset-password`, { newPassword });
+    if (response.data.message) {
+      return true;
+    }
+    throw new Error(response.data.error || '重置密码失败');
+  },
+
+  delete: async (id: number) => {
+    const response = await apiClient.delete(`/users/${id}`);
+    if (response.data.message) {
+      return true;
+    }
+    throw new Error(response.data.error || '删除用户失败');
+  },
+
+  assignable: async () => {
+    const response = await apiClient.get('/users/assignable');
+    return (response.data?.data || []) as User[];
+  },
 };

src/types/index.ts

@@ -1,12 +1,40 @@
+export type UserRole = 'admin' | 'technician' | 'user';
+
 export interface User {
   id: number;
   username: string;
   name: string;
   email?: string;
-  role: string;
+  role: UserRole;
   createdAt: string;
 }
 
+export interface CreateUserRequest {
+  username: string;
+  password: string;
+  name: string;
+  email?: string;
+  role: UserRole;
+}
+
+export interface UpdateUserRequest {
+  name?: string;
+  email?: string;
+  role?: UserRole;
+}
+
+export interface UserListFilter {
+  page?: number;
+  limit?: number;
+  role?: UserRole;
+  search?: string;
+}
+
+export interface UserListResponse {
+  data: User[];
+  pagination: EmployeeSerialPagination;
+}
+
 export interface Company {
   id: number;
   name: string;