feat: unify employee management with inline code assignment

src/pages/EmployeeSerials.tsx

@@ -1,289 +1,255 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
-import { Card, Table, Input, Button, Space, message, Modal, Tag, Form, Select, InputNumber, Pagination, ColorPicker } from 'antd';
+import {
-import { UserOutlined, PlusOutlined, StopOutlined, EditOutlined, QrcodeOutlined, DeleteOutlined } from '@ant-design/icons';
+  Card,
-import { employeeSerialApi } from '@/services/api';
+  Table,
-import QRCode from 'qrcode';
+  Button,
-import { useNavigate } from 'react-router-dom';
+  Space,
-import type { Color } from 'antd/es/color-picker';
+  Input,
-import type { EmployeeSerial } from '@/types';
+  Select,
-import { authApi } from '@/services/api';
+  Tag,
-import EmployeeAccountsPanel from '@/components/EmployeeAccountsPanel';
+  Modal,
+  Form,
+  message,
+  Pagination,
+  InputNumber,
+} from 'antd';
+import {
+  UserOutlined,
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  KeyOutlined,
+  IdcardOutlined,
+} from '@ant-design/icons';
+import { usersApi, authApi, employeeSerialApi } from '@/services/api';
+import type { User, UserRole, CreateUserRequest, UpdateUserRequest, EmployeeSerial } 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 EmployeeSerialsPage() {
-  const [serials, setSerials] = useState<EmployeeSerial[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [page, setPage] = useState(1);
-  const [limit, setLimit] = useState(10);
-  const [total, setTotal] = useState(0);
-  const [generateModalVisible, setGenerateModalVisible] = useState(false);
-  const [generateLoading, setGenerateLoading] = useState(false);
-  const [editModalVisible, setEditModalVisible] = useState(false);
-  const [editLoading, setEditLoading] = useState(false);
-  const [selectedSerial, setSelectedSerial] = useState<EmployeeSerial | null>(null);
-  const [qrCodeModalVisible, setQrCodeModalVisible] = useState(false);
-  const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
-  const [generateForm] = Form.useForm();
-  const [editForm] = Form.useForm();
-  const [qrColor, setQrColor] = useState('#000000');
-  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 = [
+  const [users, setUsers] = useState<User[]>([]);
-    '#000000',
+  const [loading, setLoading] = useState(true);
-    '#165DFF',
+  const [page, setPage] = useState(1);
-    '#52C41A',
+  const [limit, setLimit] = useState(10);
-    '#FAAD14',
+  const [total, setTotal] = useState(0);
-    '#FF4D4F',
+  const [search, setSearch] = useState('');
-    '#722ED1',
+  const [roleFilter, setRoleFilter] = useState<UserRole | undefined>();
-    '#EB2F96',
-  ];
 
-  useEffect(() => {
+  const [createVisible, setCreateVisible] = useState(false);
-    loadSerials();
+  const [createLoading, setCreateLoading] = useState(false);
-  }, [page, limit, searchTerm]);
+  const [createForm] = Form.useForm<CreateUserRequest>();
 
-  const handlePageChange = (newPage: number, newLimit: number) => {
+  const [editingUser, setEditingUser] = useState<User | null>(null);
-    setPage(newPage);
+  const [editLoading, setEditLoading] = useState(false);
-    setLimit(newLimit);
+  const [editForm] = Form.useForm<UpdateUserRequest>();
-  };
 
-  const loadSerials = async () => {
+  const [resetPasswordUser, setResetPasswordUser] = useState<User | null>(null);
+  const [resetLoading, setResetLoading] = useState(false);
+  const [resetForm] = Form.useForm<{ newPassword: string }>();
+
+  const [assignUser, setAssignUser] = useState<User | null>(null);
+  const [assignLoading, setAssignLoading] = useState(false);
+  const [assignForm] = Form.useForm<{ companyName: string; position: string; quantity: number }>();
+
+  const [serialsVisible, setSerialsVisible] = useState(false);
+  const [serialsLoading, setSerialsLoading] = useState(false);
+  const [serials, setSerials] = useState<EmployeeSerial[]>([]);
+
+  const loadUsers = async () => {
     setLoading(true);
     try {
-      const result = await employeeSerialApi.list({ page, limit, search: searchTerm || undefined });
+      const result = await usersApi.list({
-      setSerials(result.data);
+        page,
-      setTotal(result.pagination.total);
+        limit,
-    } catch (error: any) {
+        search: search || undefined,
-      message.error(error.message || '加载员工序列号列表失败');
+        role: roleFilter,
-      setSerials([]);
+      });
+      setUsers(result.data || []);
+      setTotal(result.pagination?.total || 0);
+    } catch (err: any) {
+      message.error(err?.response?.data?.message || err.message || '加载员工列表失败');
+      setUsers([]);
     } finally {
       setLoading(false);
     }
   };
 
-  const handleGenerate = async (values: { companyName: string; position: string; employeeName: string; quantity: number }) => {
+  useEffect(() => {
-    setGenerateLoading(true);
+    loadUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, limit, search, roleFilter]);
+
+  const handleCreate = async (values: CreateUserRequest) => {
+    setCreateLoading(true);
     try {
-      const result = await employeeSerialApi.generate(values);
+      await usersApi.create(values);
-      
+      message.success('员工创建成功');
-      if (result.serials && result.serials.length > 0) {
+      setCreateVisible(false);
-        const baseUrl = window.location.origin;
+      createForm.resetFields();
-        const queryUrl = `${baseUrl}/query?serial=${result.serials[0].serialNumber}`;
+      loadUsers();
-        const qrCode = await QRCode.toDataURL(queryUrl, {
+    } catch (err: any) {
-          color: {
+      message.error(err?.response?.data?.message || err.message || '创建失败');
-            dark: qrColor,
-            light: '#ffffff',
-          },
-        });
-        setQrCodeDataUrl(qrCode);
-        setGeneratedData(result);
-        setGenerateSuccessModalVisible(true);
-      }
-      
-      message.success(result.message || '生成成功');
-      setGenerateModalVisible(false);
-      generateForm.resetFields();
-      loadSerials();
-    } catch (error: any) {
-      message.error(error.message || '生成失败');
     } finally {
-      setGenerateLoading(false);
+      setCreateLoading(false);
     }
   };
 
-  const handleDownloadQR = () => {
+  const openEdit = (user: User) => {
-    const link = document.createElement('a');
+    setEditingUser(user);
-    link.download = `qrcode-${generatedData?.serials?.[0]?.serialNumber}.png`;
-    link.href = qrCodeDataUrl;
-    link.click();
-  };
-
-  const handleViewQuery = () => {
-    if (generatedData?.serials?.[0]?.serialNumber) {
-      navigate(`/query?serial=${generatedData.serials[0].serialNumber}`);
-      setGenerateSuccessModalVisible(false);
-      generateForm.resetFields();
-    }
-  };
-
-  const handleEdit = (serial: EmployeeSerial) => {
-    setSelectedSerial(serial);
     editForm.setFieldsValue({
-      companyName: serial.companyName,
+      name: user.name,
-      position: serial.position, // 映射 position 到 position
+      email: user.email,
-      employeeName: serial.employeeName,
+      role: user.role,
-      isActive: serial.isActive,
     });
-    setEditModalVisible(true);
   };
 
-  const handleUpdate = async (values: { companyName?: string; position?: string; employeeName?: string; isActive?: boolean }) => {
+  const handleEdit = async (values: UpdateUserRequest) => {
-    if (!selectedSerial) return;
+    if (!editingUser) return;
     setEditLoading(true);
     try {
-      await employeeSerialApi.update(selectedSerial.serialNumber, {
+      await usersApi.update(editingUser.id, values);
-        companyName: values.companyName,
+      message.success('员工资料更新成功');
-        position: values.position, // 映射 position 到 position
+      setEditingUser(null);
-        employeeName: values.employeeName,
+      loadUsers();
-        isActive: values.isActive,
+    } catch (err: any) {
-      });
+      message.error(err?.response?.data?.message || err.message || '更新失败');
-      message.success('更新成功');
-      setEditModalVisible(false);
-      loadSerials();
-    } catch (error: any) {
-      message.error(error.message || '更新失败');
     } finally {
       setEditLoading(false);
     }
   };
 
-  const handleRevoke = async (serial: EmployeeSerial) => {
+  const handleResetPassword = async (values: { newPassword: string }) => {
-    Modal.confirm({
+    if (!resetPasswordUser) return;
-      title: '确认吊销',
+    setResetLoading(true);
-      content: `确定要吊销序列号 "${serial.serialNumber}" 吗？`,
-      okText: '确定',
-      okType: 'danger',
-      cancelText: '取消',
-      onOk: async () => {
-        try {
-          await employeeSerialApi.revoke(serial.serialNumber);
-          message.success('吊销成功');
-          loadSerials();
-        } catch (error: any) {
-          message.error(error.message || '吊销失败');
-        }
-      },
-    });
-  };
-
-  const handleDelete = async (serial: EmployeeSerial) => {
-    Modal.confirm({
-      title: '确认删除',
-      content: `确定要删除序列号 "${serial.serialNumber}" 吗？此操作不可恢复！`,
-      okText: '确定',
-      okType: 'danger',
-      cancelText: '取消',
-      onOk: async () => {
-        try {
-          await employeeSerialApi.delete(serial.serialNumber);
-          message.success('删除成功');
-          loadSerials();
-        } catch (error: any) {
-          message.error(error.message || '删除失败');
-        }
-      },
-    });
-  };
-
-  const handleViewQrCode = async (serial: EmployeeSerial) => {
-    setSelectedSerial(serial);
     try {
-      const baseUrl = window.location.origin;
+      await usersApi.resetPassword(resetPasswordUser.id, values.newPassword);
-      const result = await employeeSerialApi.generateQrCode(serial.serialNumber, `${baseUrl}/query`);
+      message.success('密码重置成功');
-      if (result.qrCodeData) {
+      setResetPasswordUser(null);
-        const qrDataUrl = result.qrCodeData.startsWith('data:') 
+      resetForm.resetFields();
-          ? result.qrCodeData 
+    } catch (err: any) {
-          : `data:image/png;base64,${result.qrCodeData}`;
+      message.error(err?.response?.data?.message || err.message || '重置失败');
-        setQrCodeDataUrl(qrDataUrl);
+    } finally {
-        setQrCodeModalVisible(true);
+      setResetLoading(false);
-      }
-    } catch (error: any) {
-      message.error(error.message || '生成二维码失败');
     }
   };
 
-  const handleSearch = (value: string) => {
+  const handleDelete = (user: User) => {
-    setSearchTerm(value);
+    Modal.confirm({
-    setPage(1);
+      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 = [
+  const openAssignCode = (user: User) => {
-    {
+    setAssignUser(user);
-      title: '序列号',
+    assignForm.setFieldsValue({
-      dataIndex: 'serialNumber',
+      position: user.role === 'technician' ? '技术员' : user.role === 'admin' ? '管理员' : '员工',
-      key: 'serialNumber',
+      quantity: 1,
-      width: 180,
+    });
-    },
+  };
-    {
+
-      title: '企业名称',
+  const handleAssignCode = async (values: { companyName: string; position: string; quantity: number }) => {
-      dataIndex: 'companyName',
+    if (!assignUser) return;
-      key: 'companyName',
+    setAssignLoading(true);
-    },
+    try {
-    {
+      await employeeSerialApi.generate({
-      title: '职位',
+        companyName: values.companyName,
-      dataIndex: 'position',
+        position: values.position,
-      key: 'position',
+        employeeName: assignUser.name,
-    },
+        quantity: values.quantity,
-    {
+      });
-      title: '员工姓名',
+      message.success('赋码成功');
-      dataIndex: 'employeeName',
+      setAssignUser(null);
-      key: 'employeeName',
+      assignForm.resetFields();
-    },
+    } catch (err: any) {
-    {
+      message.error(err?.response?.data?.message || err.message || '赋码失败');
-      title: '状态',
+    } finally {
-      dataIndex: 'isActive',
+      setAssignLoading(false);
-      key: 'isActive',
+    }
-      render: (isActive: boolean) => (
+  };
-        <Tag color={isActive ? 'green' : 'red'}>
+
-          {isActive ? '有效' : '已吊销'}
+  const openSerials = async (user: User) => {
-        </Tag>
+    setSerialsVisible(true);
-      ),
+    setSerialsLoading(true);
-    },
+    try {
-    {
+      const result = await employeeSerialApi.list({ page: 1, limit: 200, search: user.name || user.username });
-      title: '创建时间',
+      const list = (result.data || []).filter((s) => s.employeeName === user.name);
-      dataIndex: 'createdAt',
+      setSerials(list);
-      key: 'createdAt',
+    } catch (err: any) {
-      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+      message.error(err?.response?.data?.message || err.message || '加载赋码记录失败');
-    },
+      setSerials([]);
-    {
+    } finally {
-      title: '操作',
+      setSerialsLoading(false);
-      key: 'actions',
+    }
-      render: (_: any, record: EmployeeSerial) => (
+  };
-        <Space>
+
-          <Button
+  const columns = useMemo(
-            type="link"
+    () => [
-            size="small"
+      { title: '用户名', dataIndex: 'username', key: 'username', render: (v: string) => <span style={{ fontFamily: 'monospace' }}>{v}</span> },
-            icon={<QrcodeOutlined />}
+      { title: '姓名', dataIndex: 'name', key: 'name' },
-            onClick={() => handleViewQrCode(record)}
+      { title: '邮箱', dataIndex: 'email', key: 'email', render: (v?: string) => v || '-' },
-          >
+      {
-            二维码
+        title: '角色',
-          </Button>
+        dataIndex: 'role',
-          <Button
+        key: 'role',
-            type="link"
+        render: (role: UserRole) => <Tag color={ROLE_COLOR[role]}>{ROLE_LABEL[role]}</Tag>,
-            size="small"
+      },
-            icon={<EditOutlined />}
+      { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', render: (v: string) => new Date(v).toLocaleString('zh-CN') },
-            onClick={() => handleEdit(record)}
+      {
-          >
+        title: '操作',
-            编辑
+        key: 'actions',
-          </Button>
+        render: (_: unknown, record: User) => (
-          {record.isActive && (
+          <Space wrap>
-            <Button
+            <Button type="link" size="small" icon={<IdcardOutlined />} onClick={() => openAssignCode(record)}>
-              type="link"
+              赋码
-              size="small"
-              danger
-              icon={<StopOutlined />}
-              onClick={() => handleRevoke(record)}
-            >
-              吊销
             </Button>
-          )}
+            <Button type="link" size="small" onClick={() => openSerials(record)}>
-          <Button
+              赋码记录
-            type="link"
+            </Button>
-            size="small"
+            <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)}>
-            danger
+              编辑
-            icon={<DeleteOutlined />}
+            </Button>
-            onClick={() => handleDelete(record)}
+            <Button type="link" size="small" icon={<KeyOutlined />} onClick={() => setResetPasswordUser(record)}>
-          >
+              重置密码
-            删除
+            </Button>
-          </Button>
+            {record.id !== currentUser?.id && (
-        </Space>
+              <Button type="link" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
-      ),
+                删除
-    },
+              </Button>
-  ];
+            )}
+          </Space>
+        ),
+      },
+    ],
+    [currentUser?.id]
+  );
 
   return (
     <div>
@@ -295,247 +261,149 @@ function EmployeeSerialsPage() {
           </Space>
         }
         extra={
-          <Space>
+          isAdmin && (
-            <Input.Search
+            <Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateVisible(true)}>
-              placeholder="搜索序列号/企业/职位/员工"
+              新建员工
-              allowClear
-              style={{ width: 250 }}
-              onSearch={handleSearch}
-              onChange={(e) => {
-                if (!e.target.value) {
-                  handleSearch('');
-                }
-              }}
-            />
-            <Button
-              type="primary"
-              icon={<PlusOutlined />}
-              onClick={() => setGenerateModalVisible(true)}
-            >
-              生成序列号
             </Button>
-          </Space>
+          )
         }
       >
-        <Table
+        <Space style={{ marginBottom: 16 }}>
-          columns={columns}
+          <Input.Search
-          dataSource={serials}
+            placeholder="搜索用户名/姓名/邮箱"
-          rowKey="serialNumber"
+            allowClear
-          loading={loading}
+            style={{ width: 280 }}
-          pagination={false}
+            onSearch={(v) => {
-        />
+              setPage(1);
+              setSearch(v);
+            }}
+            onChange={(e) => {
+              if (!e.target.value) {
+                setPage(1);
+                setSearch('');
+              }
+            }}
+          />
+          <Select
+            placeholder="角色筛选"
+            allowClear
+            style={{ width: 180 }}
+            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={handlePageChange}
+            onChange={(newPage, newLimit) => {
-            showSizeChanger={true}
+              setPage(newPage);
+              setLimit(newLimit);
+            }}
+            showSizeChanger
             showTotal={(t) => `共计 ${t} 条记录`}
           />
         </div>
       </Card>
-      {isAdmin && <div style={{ marginTop: 16 }}><EmployeeAccountsPanel /></div>}
 
-      <Modal
+      <Modal title="新建员工" open={createVisible} onCancel={() => setCreateVisible(false)} footer={null} width={480}>
-        title="生成员工序列号"
+        <Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ role: 'employee' }}>
-        open={generateModalVisible}
+          <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }, { min: 3, max: 50, message: '用户名长度 3-50' }]}>
-        onCancel={() => {
+            <Input />
-          setGenerateModalVisible(false);
-          generateForm.resetFields();
-        }}
-        footer={null}
-        width={500}
-      >
-        <Form
-          form={generateForm}
-          layout="vertical"
-          onFinish={handleGenerate}
-        >
-          <Form.Item
-            name="companyName"
-            label="企业名称"
-            rules={[{ required: true, message: '请输入企业名称' }]}
-          >
-            <Input placeholder="请输入企业名称" />
           </Form.Item>
-          <Form.Item
+          <Form.Item name="password" label="初始密码" rules={[{ required: true, message: '请输入密码' }, { min: 6, message: '密码至少 6 位' }]}>
-            name="position"
+            <Input.Password />
-            label="职位"
-            rules={[{ required: true, message: '请输入职位' }]}
-          >
-            <Input placeholder="请输入职位" />
           </Form.Item>
-          <Form.Item
+          <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
-            name="employeeName"
+            <Input />
-            label="员工姓名"
-            rules={[{ required: true, message: '请输入员工姓名' }]}
-          >
-            <Input placeholder="请输入员工姓名" />
           </Form.Item>
-          <Form.Item
+          <Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
-            name="quantity"
+            <Input />
-            label="生成数量"
+          </Form.Item>
-            rules={[{ required: true, message: '请输入生成数量' }]}
+          <Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
-            initialValue={1}
+            <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)} 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 />
+          </Form.Item>
+          <Form.Item>
+            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+              <Button onClick={() => setResetPasswordUser(null)}>取消</Button>
+              <Button type="primary" htmlType="submit" loading={resetLoading}>确认重置</Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      <Modal title={assignUser ? `给 ${assignUser.name} 赋码` : '员工赋码'} open={!!assignUser} onCancel={() => setAssignUser(null)} footer={null} width={500}>
+        <Form form={assignForm} layout="vertical" onFinish={handleAssignCode}>
+          <Form.Item name="companyName" label="企业名称" rules={[{ required: true, message: '请输入企业名称' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="position" label="职位" rules={[{ required: true, message: '请输入职位' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="quantity" label="生成数量" initialValue={1} rules={[{ required: true, message: '请输入生成数量' }]}>
             <InputNumber min={1} max={1000} style={{ width: '100%' }} />
           </Form.Item>
-          <Form.Item
-            label="二维码颜色"
-            name="qrColor"
-            initialValue="#000000"
-          >
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-                {colorPresets.map((color) => (
-                  <div
-                    key={color}
-                    onClick={() => setQrColor(color)}
-                    style={{
-                      width: '28px',
-                      height: '28px',
-                      backgroundColor: color,
-                      border: qrColor === color ? '2px solid #165DFF' : '2px solid #d9d9d9',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      transition: 'all 0.2s',
-                    }}
-                  />
-                ))}
-              </div>
-              <ColorPicker
-                value={qrColor}
-                onChange={(color: Color) => {
-                  const hexColor = color.toHexString();
-                  setQrColor(hexColor);
-                }}
-              />
-            </div>
-          </Form.Item>
           <Form.Item>
             <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
-              <Button onClick={() => setGenerateModalVisible(false)}>取消</Button>
+              <Button onClick={() => setAssignUser(null)}>取消</Button>
-              <Button type="primary" htmlType="submit" loading={generateLoading}>
+              <Button type="primary" htmlType="submit" loading={assignLoading}>确认赋码</Button>
-                生成
-              </Button>
             </Space>
           </Form.Item>
         </Form>
       </Modal>
 
-      <Modal
+      <Modal title="员工赋码记录" open={serialsVisible} onCancel={() => setSerialsVisible(false)} footer={null} width={900}>
-        title="编辑员工序列号"
+        <Table
-        open={editModalVisible}
+          rowKey="serialNumber"
-        onCancel={() => {
+          loading={serialsLoading}
-          setEditModalVisible(false);
+          dataSource={serials}
-          editForm.resetFields();
+          pagination={false}
-        }}
+          columns={[
-        footer={null}
+            { title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber' },
-        width={500}
+            { title: '企业名称', dataIndex: 'companyName', key: 'companyName' },
-      >
+            { title: '职位', dataIndex: 'position', key: 'position' },
-        <Form
+            { title: '员工姓名', dataIndex: 'employeeName', key: 'employeeName' },
-          form={editForm}
+            { title: '状态', dataIndex: 'isActive', key: 'isActive', render: (v: boolean) => <Tag color={v ? 'green' : 'red'}>{v ? '有效' : '已吊销'}</Tag> },
-          layout="vertical"
+            { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', render: (v: string) => new Date(v).toLocaleString('zh-CN') },
-          onFinish={handleUpdate}
+          ]}
-        >
+        />
-          <Form.Item
-            name="companyName"
-            label="企业名称"
-          >
-            <Input placeholder="请输入企业名称" />
-          </Form.Item>
-          <Form.Item
-            name="position"
-            label="职位"
-          >
-            <Input placeholder="请输入职位" />
-          </Form.Item>
-          <Form.Item
-            name="employeeName"
-            label="员工姓名"
-          >
-            <Input placeholder="请输入员工姓名" />
-          </Form.Item>
-          <Form.Item
-            name="isActive"
-            label="状态"
-          >
-            <Select placeholder="请选择状态">
-              <Select.Option value={true}>有效</Select.Option>
-              <Select.Option value={false}>吊销</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item>
-            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
-              <Button onClick={() => setEditModalVisible(false)}>取消</Button>
-              <Button type="primary" htmlType="submit" loading={editLoading}>
-                保存
-              </Button>
-            </Space>
-          </Form.Item>
-        </Form>
-      </Modal>
-
-      <Modal
-        title="生成成功"
-        open={generateSuccessModalVisible}
-        onCancel={() => setGenerateSuccessModalVisible(false)}
-        footer={null}
-        width={600}
-      >
-        {generatedData && (
-          <div>
-            <Space direction="vertical" style={{ width: '100%' }} size="middle">
-              <div>
-                <p><strong>企业名称:</strong> {generatedData.serials?.[0]?.companyName}</p>
-                <p><strong>职位:</strong> {generatedData.serials?.[0]?.position}</p>
-                <p><strong>员工姓名:</strong> {generatedData.serials?.[0]?.employeeName}</p>
-                <p><strong>生成数量:</strong> {generatedData.serials?.length || 0}</p>
-              </div>
-
-              {qrCodeDataUrl && (
-                <div style={{ textAlign: 'center' }}>
-                  <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px' }} />
-                  {generatedData.serials && generatedData.serials.length > 0 && (
-                    <p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{generatedData.serials[0].serialNumber}</p>
-                  )}
-                </div>
-              )}
-
-              <Space>
-                <Button type="primary" onClick={handleViewQuery}>查询序列号</Button>
-                <Button onClick={handleDownloadQR}>下载二维码</Button>
-                <Button onClick={() => {
-                  setGenerateSuccessModalVisible(false);
-                  generateForm.resetFields();
-                }}>生成新的序列号</Button>
-              </Space>
-            </Space>
-          </div>
-        )}
-      </Modal>
-
-      <Modal
-        title="员工二维码"
-        open={qrCodeModalVisible}
-        onCancel={() => setQrCodeModalVisible(false)}
-        footer={null}
-        width={400}
-      >
-        <div style={{ textAlign: 'center' }}>
-          {qrCodeDataUrl && (
-            <>
-              <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px' }} />
-              <p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>
-                {selectedSerial?.serialNumber}
-              </p>
-              <p style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
-                {selectedSerial?.companyName} - {selectedSerial?.position} - {selectedSerial?.employeeName}
-              </p>
-            </>
-          )}
-        </div>
       </Modal>
     </div>
   );