From fe784f9e2b95159739d6fe157e0b859506fa148c Mon Sep 17 00:00:00 2001
From: Frudrax Cheng <i@cynosura.one>
Date: Thu, 28 May 2026 09:30:30 +0800
Subject: [PATCH] feat: merge account management into employee page

---
 src/App.tsx                              |   2 -
 src/components/AdminLayout.tsx           |  15 +-
 src/components/EmployeeAccountsPanel.tsx | 416 +++++++++++++++++++++++
 src/pages/EmployeeSerials.tsx            |   7 +-
 src/pages/Users.tsx                      |   2 +
 src/types/index.ts                       |   2 +-
 6 files changed, 426 insertions(+), 18 deletions(-)
 create mode 100644 src/components/EmployeeAccountsPanel.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b4ea82a..9bbf5eb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,6 @@ 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();
@@ -53,7 +52,6 @@ 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>
diff --git a/src/components/AdminLayout.tsx b/src/components/AdminLayout.tsx
index 2310565..8b047d6 100644
--- a/src/components/AdminLayout.tsx
+++ b/src/components/AdminLayout.tsx
@@ -8,7 +8,6 @@ import {
   ExclamationCircleOutlined,
   IdcardOutlined,
   ToolOutlined,
-  UsergroupAddOutlined,
 } from '@ant-design/icons';
 import { authApi } from '@/services/api';
 import './styles/AdminLayout.css';
@@ -46,16 +45,6 @@ function AdminLayout() {
       label: '售后工单',
       onClick: () => navigate('/admin/aftersales'),
     },
-    ...(user?.role === 'admin'
-      ? [
-          {
-            key: 'users',
-            icon: <UsergroupAddOutlined />,
-            label: '用户管理',
-            onClick: () => navigate('/admin/users'),
-          },
-        ]
-      : []),
   ];
 
   const handleLogout = () => {
@@ -102,7 +91,6 @@ 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';
   };
@@ -113,7 +101,6 @@ 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 '控制台';
   };
@@ -159,4 +146,4 @@ function AdminLayout() {
   );
 }
 
-export default AdminLayout;
\ No newline at end of file
+export default AdminLayout;
diff --git a/src/components/EmployeeAccountsPanel.tsx b/src/components/EmployeeAccountsPanel.tsx
new file mode 100644
index 0000000..d88f2c6
--- /dev/null
+++ b/src/components/EmployeeAccountsPanel.tsx
@@ -0,0 +1,416 @@
+import { useEffect, useState } from 'react';
+import {
+  Card,
+  Table,
+  Button,
+  Space,
+  Input,
+  Select,
+  Tag,
+  Modal,
+  Form,
+  message,
+  Pagination,
+} from 'antd';
+import {
+  UsergroupAddOutlined,
+  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: '技术员',
+  employee: '员工（不可登录后台）',
+  user: '普通用户',
+};
+
+const ROLE_COLOR: Record<UserRole, string> = {
+  admin: 'red',
+  technician: 'blue',
+  employee: 'green',
+  user: 'default',
+};
+
+function EmployeeAccountsPanel() {
+  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 (
+    <Card
+      title={
+        <Space>
+          <UsergroupAddOutlined />
+          <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>
+
+      <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>
+    </Card>
+  );
+}
+
+export default EmployeeAccountsPanel;
diff --git a/src/pages/EmployeeSerials.tsx b/src/pages/EmployeeSerials.tsx
index 7e0dd35..c1f9709 100644
--- a/src/pages/EmployeeSerials.tsx
+++ b/src/pages/EmployeeSerials.tsx
@@ -6,6 +6,8 @@ import QRCode from 'qrcode';
 import { useNavigate } from 'react-router-dom';
 import type { Color } from 'antd/es/color-picker';
 import type { EmployeeSerial } from '@/types';
+import { authApi } from '@/services/api';
+import EmployeeAccountsPanel from '@/components/EmployeeAccountsPanel';
 
 function EmployeeSerialsPage() {
   const [serials, setSerials] = useState<EmployeeSerial[]>([]);
@@ -27,6 +29,8 @@ function EmployeeSerialsPage() {
   const [generatedData, setGeneratedData] = useState<any>(null);
   const [generateSuccessModalVisible, setGenerateSuccessModalVisible] = useState(false);
   const navigate = useNavigate();
+  const currentUser = authApi.getCurrentUser();
+  const isAdmin = currentUser?.role === 'admin';
 
   const colorPresets = [
     '#000000',
@@ -331,6 +335,7 @@ function EmployeeSerialsPage() {
           />
         </div>
       </Card>
+      {isAdmin && <div style={{ marginTop: 16 }}><EmployeeAccountsPanel /></div>}
 
       <Modal
         title="生成员工序列号"
@@ -536,4 +541,4 @@ function EmployeeSerialsPage() {
   );
 }
 
-export default EmployeeSerialsPage;
\ No newline at end of file
+export default EmployeeSerialsPage;
diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx
index a5669b7..1d11327 100644
--- a/src/pages/Users.tsx
+++ b/src/pages/Users.tsx
@@ -25,12 +25,14 @@ import type { User, UserRole, CreateUserRequest, UpdateUserRequest } from '@/typ
 const ROLE_LABEL: Record<UserRole, string> = {
   admin: '管理员',
   technician: '技术员',
+  employee: '员工（不可登录后台）',
   user: '普通用户',
 };
 
 const ROLE_COLOR: Record<UserRole, string> = {
   admin: 'red',
   technician: 'blue',
+  employee: 'green',
   user: 'default',
 };
 
diff --git a/src/types/index.ts b/src/types/index.ts
index 1d0ea19..eadd088 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,4 @@
-export type UserRole = 'admin' | 'technician' | 'user';
+export type UserRole = 'admin' | 'technician' | 'employee' | 'user';
 
 export interface User {
   id: number;