feat(前端):终端列表

web-fe/src/pages/components/Layout/index.tsx

@@ -8,6 +8,8 @@ import {
 import { Avatar, Button, Dropdown, Layout, Menu, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { history, Outlet, useLocation } from 'umi';
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/lib/locale/zh_CN';
 import './index.less';
 
 const { Header, Sider, Content } = Layout;
@@ -68,6 +70,7 @@ const MainLayout: React.FC = () => {
   };
 
   return (
+    <ConfigProvider locale={zhCN}>
     <Layout className="main-layout">
       <Sider
         trigger={null}
@@ -119,6 +122,7 @@ const MainLayout: React.FC = () => {
         </Content>
       </Layout>
     </Layout>
+    </ConfigProvider>
   );
 };
 

web-fe/src/pages/components/customTree/index.tsx

@@ -0,0 +1,43 @@
+// custom-tree.tsx
+import React from 'react';
+import { Tree } from 'antd';
+import type { DataNode, TreeProps } from 'antd/es/tree';
+
+interface CustomTreeProps extends Omit<TreeProps, 'treeData'> {
+  treeData: any[];
+  titleField: string;
+  keyField: string;
+  childrenField?: string;
+}
+
+const CustomTree: React.FC<CustomTreeProps> = ({
+  treeData,
+  titleField,
+  keyField,
+  childrenField = 'children',
+  ...restProps
+}) => {
+  // Transform the tree data to match Ant Design's expected structure
+  const transformTreeData = (data: any[]): DataNode[] => {
+    return data.map(item => {
+      const node: DataNode = {
+        title: item[titleField],
+        key: item[keyField],
+        ...item
+      };
+
+      // Handle children if they exist
+      if (item[childrenField] && Array.isArray(item[childrenField])) {
+        node.children = transformTreeData(item[childrenField]);
+      }
+
+      return node;
+    });
+  };
+
+  const transformedData = transformTreeData(treeData);
+
+  return <Tree treeData={transformedData} {...restProps} />;
+};
+
+export default CustomTree;

web-fe/src/pages/terminal/contast.ts

@@ -0,0 +1,20 @@
+export interface User {
+  id: string;
+  user_id:string,
+  username: string;
+  loginName: string;
+  userGroup: string;
+  userType: string;
+}
+
+export interface OrganizationNode {
+  id: string;
+  name: string;
+  children?: OrganizationNode[];
+}
+
+export interface ModalBaseNode {
+  visible:boolean;
+  recordData: any;
+  selectedOrg:string;
+}

web-fe/src/pages/terminal/index.less

@@ -0,0 +1,45 @@
+.user_content {
+    display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #f7f8fa;
+  .left_content {
+    width: 400px;
+    height: 100%;
+    padding: 8px;
+    background-color: #fff;
+    .search {
+      width: 100%;
+      height: 70px;
+    }
+    .tree_box {
+      width: 100%;
+      height: calc(100% - 70px);
+      overflow: auto;
+      padding-top: 10px;
+    }
+  }
+  .right_content {
+    width: calc(100% - 400px);
+    height: 100%;
+    padding-left: 10px;
+    .teble_content {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      padding: 8px;
+      .teble_box {
+        width: 100%;
+        height: calc(100% - 40px);
+        overflow: hidden;
+      }
+    }
+  }
+  :global {
+    :where(.css-dev-only-do-not-override-1vjf2v5).ant-pagination
+      .ant-pagination-total-text {
+      position: absolute;
+      left: 5px;
+    }
+  }
+}

web-fe/src/pages/terminal/index.tsx

@@ -0,0 +1,382 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import CustomTree from '@/pages/components/customTree';
+import { deleteUser } from '@/services/userList';
+import {
+  DeleteOutlined,
+  DownOutlined,
+  PlusOutlined,
+  TeamOutlined,
+} from '@ant-design/icons';
+import { Button, Input, message, Popconfirm, Popover, Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import React, { useEffect, useState } from 'react';
+import { OrganizationNode, Device } from './contast';
+import styles from './index.less';
+import EditModal from './mod/eidtDevice';
+import CreatGroup from './mod/group';
+
+const UserListPage: React.FC = () => {
+  const [orgTreeData, setOrgTreeData] = useState<OrganizationNode[]>([]);
+  const [selectedOrg, setSelectedOrg] = useState<string>('');
+
+  // 用户列表
+  const [dataSource, setDataSource] = useState<Device[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState<string>('');
+  const [selectedRowKeys, setSelectedRowKeys] = useState<[]>([]);
+
+  // 分页参数
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [total, setTotal] = useState<number>(0);
+  // 编辑用户
+  const [currentUserInfo, setCurrentUserInfo] = useState<any>({
+    visible: false,
+  });
+
+  // 添加分组
+  const [visible, setVisible] = useState<boolean>(false);
+
+  // 获取用户分组组织树
+  useEffect(() => {
+    getGroupList();
+  }, []);
+
+  // 获取用户列表数据
+  useEffect(() => {
+    getDataSource();
+  }, [selectedOrg, currentPage, pageSize]);
+
+  const getGroupList = () => {
+    const mockOrgData: OrganizationNode[] = [
+      {
+        name: 'Headquartershdy',
+        id: '1',
+        children: [
+          {
+            name: 'HR Department',
+            id: '2',
+          },
+          {
+            name: 'IT Department',
+            id: '3',
+            children: [
+              {
+                name: 'Frontend Team',
+                id: '4',
+              },
+              {
+                name: 'Backend Team',
+                id: '5',
+              },
+            ],
+          },
+          {
+            name: 'Finance Department',
+            id: '6',
+          },
+        ],
+      },
+    ];
+    setSelectedOrg(mockOrgData[0].id as string);
+    setOrgTreeData(mockOrgData);
+  };
+
+  const getDataSource = () => {
+    setLoading(true);
+    setTimeout(() => {
+      const startIndex = (currentPage - 1) * pageSize;
+      const mockUsers: Device[] = Array.from(
+        { length: pageSize },
+        (_, index) => ({
+          id: `${startIndex + index + 1}`,
+          username: `User ${startIndex + index + 1}`,
+          loginName: `login${startIndex + index + 1}`,
+          userGroup:
+            index % 3 === 0 ? 'Admin' : index % 3 === 1 ? 'Manager' : 'User',
+          userType:
+            index % 4 === 0
+              ? 'Full-time'
+              : index % 4 === 1
+              ? 'Part-time'
+              : index % 4 === 2
+              ? 'Contractor'
+              : 'Intern',
+        }),
+      );
+
+      setDataSource(mockUsers);
+      setTotal(100);
+      setLoading(false);
+    }, 300);
+  };
+
+  const onDelete = (device?: Device) => {
+    const { user_id } = device || {};
+    const payload = {
+      ids: user_id ? [user_id] : selectedRowKeys,
+    };
+    deleteUser(payload as any).then((res) => {
+      console.log('res=====', res);
+      const { success } = res || {};
+      if (success) {
+        message.success('删除成功');
+        setSelectedRowKeys([]);
+        getDataSource();
+      }
+    });
+  };
+
+  const handleEditUserInfo = (device: Device) => {
+    setCurrentUserInfo({
+      recordData: { ...device },
+      visible: true,
+    });
+  };
+
+  const columns: ColumnsType<Device> = [
+    {
+      title: '显示名称',
+      dataIndex: 'username',
+      key: 'username',
+    },
+    {
+      title: '终端名称',
+      dataIndex: 'loginName',
+      key: 'loginName',
+    },
+    {
+      title: '终端分组',
+      dataIndex: 'userGroup',
+      key: 'userGroup',
+    },
+    {
+      title: 'IP地址',
+      dataIndex: 'sex',
+      key: 'sex',
+    },
+    {
+      title: '终端标识',
+      dataIndex: 'mac_addr',
+      key: 'mac_addr',
+    },
+    {
+      title: '终端类型',
+      dataIndex: 'device_type',
+      key: 'device_type',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      align: 'center',
+      width: 150,
+      render: (_, record) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Button type="link" onClick={() => handleEditUserInfo(record)}>
+            编辑
+          </Button>
+          <Popover
+            placement="bottomRight"
+            content={
+              <div>
+                <Popconfirm
+                  title=""
+                  description="删除操作不可逆，请确认是否删除?"
+                  onConfirm={() => onDelete(record)}
+                  // onCancel={cancel}
+                  okText="删除"
+                  cancelText="取消"
+                >
+                  <Button type="link">删除</Button>
+                </Popconfirm>
+                <div>
+                  <Button type="link" onClick={() => {}}>
+                    绑定用户
+                  </Button>
+                </div>
+                <div>
+                  <Button type="link" onClick={() => {}}>
+                    绑定镜像
+                  </Button>
+                </div>
+              </div>
+            }
+          >
+            <a onClick={(e) => e.preventDefault()}>
+              更多
+              <DownOutlined style={{ fontSize: '0.7rem' }} />
+            </a>
+          </Popover>
+        </div>
+      ),
+    },
+  ];
+
+  const onOrgSelect = (selectedKeys: React.Key[]) => {
+    if (selectedKeys.length > 0) {
+      setSelectedOrg(selectedKeys[0] as string);
+      setCurrentPage(1);
+    }
+  };
+
+  const handlePageChange = (page: number, size: number) => {
+    setCurrentPage(page);
+    setPageSize(size);
+  };
+
+  const handlePageSizeChange = (current: number, size: number) => {
+    setCurrentPage(1);
+    setPageSize(size);
+  };
+
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
+    setSelectedRowKeys(newSelectedRowKeys as any);
+  };
+
+  const onDeleteGroup = () => {};
+
+  return (
+    <div className={styles.user_content}>
+      <div className={styles.left_content}>
+        <div className={styles.search}>
+          <div style={{ paddingBottom: '5px' }}>
+            <Button
+              type="text"
+              style={{ marginRight: '8px', fontSize: '16px' }}
+              icon={<PlusOutlined />}
+              onClick={() => setVisible(true)}
+            />
+            <Popconfirm
+              title=""
+              description="删除操作不可逆，请确认是否删除?"
+              onConfirm={() => onDeleteGroup()}
+              // onCancel={cancel}
+              okText="删除"
+              cancelText="取消"
+              disabled={selectedOrg === ''}
+            >
+              <Button
+                type="text"
+                style={{ fontSize: '16px' }}
+                icon={<DeleteOutlined />}
+              />
+            </Popconfirm>
+          </div>
+          <Input.Search
+            placeholder="请输入名称"
+            style={{ marginBottom: 6 }}
+            onSearch={(value) => console.log('Search org:', value)}
+          />
+        </div>
+        <div className={styles.tree_box}>
+          <CustomTree
+            treeData={orgTreeData}
+            titleField="name"
+            keyField="id"
+            childrenField="children"
+            defaultExpandAll
+            onSelect={onOrgSelect}
+            selectedKeys={[selectedOrg]}
+            icon={<TeamOutlined style={{ fontSize: '15px' }} />}
+          />
+        </div>
+      </div>
+      <div className={styles.right_content}>
+        <div className={styles.teble_content}>
+          <div
+            style={{
+              marginBottom: 16,
+              display: 'flex',
+              justifyContent: 'space-between',
+            }}
+          >
+            <div>
+              <Popconfirm
+                title=""
+                description="删除操作不可逆，请确认是否删除?"
+                onConfirm={() => onDelete()}
+                // onCancel={cancel}
+                okText="删除"
+                cancelText="取消"
+                disabled={selectedRowKeys.length === 0}
+              >
+                <Button
+                  disabled={selectedRowKeys.length === 0}
+                  style={{ marginRight: '8px' }}
+                >
+                  删除
+                </Button>
+              </Popconfirm>
+              <Button style={{ marginRight: '8px' }} onClick={getDataSource}>
+                刷新
+              </Button>
+            </div>
+            <div>
+              <div>
+                <Input.Search
+                  placeholder="Search users"
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  style={{ width: 300 }}
+                  onSearch={(value) => {
+                    console.log('Search user:', value);
+                    setCurrentPage(1); // Reset to first page when searching
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+          <div className={styles.teble_box}>
+            <Table
+              columns={columns}
+              dataSource={dataSource}
+              loading={loading}
+              rowKey="id"
+              rowSelection={{
+                selectedRowKeys,
+                onChange: onSelectChange,
+              }}
+              pagination={{
+                current: currentPage,
+                pageSize: pageSize,
+                total: total,
+                onChange: handlePageChange,
+                onShowSizeChange: handlePageSizeChange,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                showTotal: (total) => {
+                  return `共${total}条数据`;
+                },
+              }}
+              scroll={{ x: 'max-content', y: 55 * 12 }}
+            />
+          </div>
+        </div>
+      </div>
+      <CreatGroup
+        visible={visible}
+        onCancel={() => {
+          setVisible(false);
+        }}
+        selectedOrg={selectedOrg}
+        onOk={() => {}}
+        orgTreeData={orgTreeData}
+      />
+      <EditModal
+        selectedOrg={selectedOrg}
+        orgTreeData={orgTreeData}
+        currentUserInfo={currentUserInfo}
+        onCancel={() => {
+          setCurrentUserInfo({
+            recordData: {},
+            visible: false,
+          });
+        }}
+        onOk={() => {}}
+      />
+    </div>
+  );
+};
+
+export default UserListPage;

web-fe/src/pages/terminal/mod/eidtDevice/index.tsx

@@ -0,0 +1,183 @@
+// index.tsx
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Radio,
+  Select,
+  TreeSelect,
+} from 'antd';
+import React, { useEffect } from 'react';
+import { ModalBaseNode, OrganizationNode } from '../../contast';
+
+const { Option } = Select;
+
+interface UserEditModalProps {
+  //   visible: boolean;
+  orgTreeData: OrganizationNode[];
+  onCancel: () => void;
+  onOk: (values: any) => void;
+  confirmLoading?: boolean;
+  currentUserInfo?: ModalBaseNode;
+  selectedOrg?: string;
+}
+
+const UserEditModal: React.FC<UserEditModalProps> = ({
+  orgTreeData,
+  onCancel,
+  onOk,
+  confirmLoading = false,
+  currentUserInfo,
+}) => {
+  const { recordData, visible, selectedOrg } = currentUserInfo || {};
+  const { user_id } = recordData || {};
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    const initialValues = { user_group_id: [selectedOrg], status: 1 };
+    form.setFieldsValue(initialValues);
+  }, [visible, form, recordData, selectedOrg]);
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      onOk(values);
+    } catch (error) {
+      message.error('请检查表单字段');
+    }
+  };
+
+  const validateMessages = {
+    required: '${label} is required!',
+    types: {
+      email: '${label} is not a valid email!',
+      number: '${label} is not a valid number!',
+      cell_phone: '${label} is not a valid cell phone number!',
+    },
+    number: {
+      range: '${label} must be between ${min} and ${max}',
+    },
+  };
+
+  return (
+    <Modal
+      title={user_id ? '编辑用户信息' : '新增用户'}
+      open={visible}
+      onCancel={onCancel}
+      onOk={handleOk}
+      confirmLoading={confirmLoading}
+      width={600}
+      maskClosable={false}
+      centered={true}
+      destroyOnHidden={true}
+      cancelText="取消"
+      okText="确定"
+      //   按钮居中对其
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'right' }}>
+          <Button
+            type="primary"
+            onClick={handleOk}
+            style={{ marginRight: '20px' }}
+          >
+            确定
+          </Button>
+          <Button onClick={onCancel} style={{ marginRight: '20px' }}>
+            取消
+          </Button>
+        </div>
+      }
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        layout="horizontal"
+        style={{ paddingTop: '20px', paddingBottom: '20px' }}
+        validateMessages={validateMessages}
+      >
+        <Form.Item
+          name="loginName"
+          label="显示名称"
+          rules={[{ required: true, message: '请输入显示名称' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          name="device_id"
+          label="终端标识"
+          rules={[{ required: true, message: '请输入终端标识' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          name="user_group_id"
+          label="终端分组"
+          rules={[{ required: true, message: '请选择终端分组' }]}
+        >
+          <TreeSelect
+            showSearch
+            allowClear={false}
+            treeDefaultExpandAll
+            placeholder="请选择终端分组"
+            treeData={orgTreeData}
+            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="status"
+          label="认证方式"
+          rules={[{ required: false, message: '请选择认证方式' }]}
+        >
+          <Radio.Group optionType="button">
+            <Radio value={1}>用户认证</Radio>
+            <Radio value={2}>终端认证</Radio>
+          </Radio.Group>
+        </Form.Item>
+
+        <Form.Item
+          name="ip_addr"
+          label="IP地址"
+          rules={[{ required: false, message: '请输入IP地址' }]}
+        >
+          <Input placeholder="请输入IP地址" />
+        </Form.Item>
+        <Form.Item
+          name="mac addr"
+          label="MAC地址"
+          rules={[{ required: false, message: '请输入MAC地址' }]}
+        >
+          <Input />
+        </Form.Item>
+        {/* <Form.Item
+          name="终端厂商"
+          label="mac_addr"
+          rules={[{ required: true, message: '请输入终端厂商' }]}
+        >
+          <Input />
+        </Form.Item> */}
+        <Form.Item
+          name="model"
+          label="终端型号"
+          rules={[{ required: false, message: '请输入终端型号' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="description"
+          label="描述"
+          rules={[{ required: false, message: '请输入终端型号' }]}
+        >
+          <Input.TextArea rows={4} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default UserEditModal;

web-fe/src/pages/terminal/mod/group/index.tsx

@@ -0,0 +1,109 @@
+// d:\VDI\vdi\web-fe\src\pages\userList\mod\group\index.tsx
+import { Button, Form, Input, Modal, TreeSelect } from 'antd';
+import React, { useEffect } from 'react';
+// import type { DataNode } from 'antd/es/tree';
+import { OrganizationNode } from '../../contast';
+
+interface CreatGroupProps {
+  visible: boolean;
+  selectedOrg: string;
+  onCancel: () => void;
+  onOk: (values: any) => void;
+  orgTreeData: OrganizationNode[];
+}
+
+const CreatGroup: React.FC<CreatGroupProps> = (props) => {
+  const { visible, onCancel, onOk, orgTreeData, selectedOrg } = props;
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    const initialValues = { parent_device_group_id: [selectedOrg] };
+    form.setFieldsValue(initialValues);
+  }, [visible, form, selectedOrg]);
+
+  // Flatten tree data for parent group selection
+  // const flattenTreeData = (data: OrganizationNode[], result: { value: string; label: string }[] = []) => {
+  //   data.forEach(item => {
+  //     result.push({ value: item.id as string, label: item.name as string });
+  //     if (item.children) {
+  //       flattenTreeData(item.children, result);
+  //     }
+  //   });
+  //   return result;
+  // };
+
+  // const parentGroupOptions = flattenTreeData(orgTreeData);
+
+  const handleOk = () => {
+    form.submit();
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  const handleFinish = (values: any) => {
+    onOk(values);
+    form.resetFields();
+  };
+
+  return (
+    <Modal
+      title="添加用户分组"
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okText="确认"
+      cancelText="取消"
+      centered={true}
+      destroyOnHidden={true}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'right' }}>
+          <Button
+            type="primary"
+            onClick={handleOk}
+            style={{ marginRight: '20px' }}
+          >
+            确定
+          </Button>
+          <Button onClick={onCancel} style={{ marginRight: '20px' }}>
+            取消
+          </Button>
+        </div>
+      }
+    >
+      <div style={{ height: '300px' }}>
+        <Form
+          form={form}
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 18 }}
+          layout="horizontal"
+          onFinish={handleFinish}
+          style={{ paddingTop: '20px', paddingBottom: '20px' }}
+        >
+          <Form.Item
+            name="device_group_name:"
+            label="分组名"
+            rules={[{ required: true, message: '请输入分组名!' }]}
+          >
+            <Input placeholder="请输入分组名" />
+          </Form.Item>
+
+          <Form.Item name="parent_device_group_id" label="父分组名">
+            <TreeSelect
+              showSearch
+              allowClear={false}
+              treeDefaultExpandAll
+              placeholder="请选择用户分组"
+              treeData={orgTreeData}
+              fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+            />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  );
+};
+
+export default CreatGroup;

web-fe/src/pages/userList/contast.ts

@@ -0,0 +1,20 @@
+export interface User {
+  id: string;
+  user_id:string,
+  username: string;
+  loginName: string;
+  userGroup: string;
+  userType: string;
+}
+
+export interface OrganizationNode {
+  id: string;
+  name: string;
+  children?: OrganizationNode[];
+}
+
+export interface ModalBaseNode {
+  visible:boolean;
+  recordData: any;
+  selectedOrg:string;
+}

web-fe/src/pages/userList/index.less

@@ -1,9 +1,10 @@
 .user_content {
+    display: flex;
   width: 100%;
   height: 100%;
   background-color: #f7f8fa;
   .left_content {
-    width: 100%;
+    width: 400px;
     height: 100%;
     padding: 8px;
     background-color: #fff;
@@ -19,13 +20,26 @@
     }
   }
   .right_content {
-    width: 100%;
+    width: calc(100% - 400px);
     height: 100%;
+    padding-left: 10px;
     .teble_content {
       width: 100%;
       height: 100%;
       background-color: #fff;
       padding: 8px;
+      .teble_box {
+        width: 100%;
+        height: calc(100% - 40px);
+        overflow: hidden;
+      }
+    }
+  }
+  :global {
+    :where(.css-dev-only-do-not-override-1vjf2v5).ant-pagination
+      .ant-pagination-total-text {
+      position: absolute;
+      left: 5px;
     }
   }
 }

web-fe/src/pages/userList/index.tsx

@@ -1,89 +1,90 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import CustomTree from '@/pages/components/customTree';
+import { deleteUser } from '@/services/userList';
 import { DeleteOutlined, PlusOutlined, TeamOutlined } from '@ant-design/icons';
-import { Button, Col, Input, Pagination, Row, Table, Tree } from 'antd';
+import { Button, Input, Popconfirm, Table, message } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import type { DataNode } from 'antd/es/tree';
 import React, { useEffect, useState } from 'react';
-import CreatGroup from './mod/group';
+import { OrganizationNode, User } from './contast';
 import styles from './index.less';
-
+import UserEditModal from './mod/eidtUser';
-interface User {
+import CreatGroup from './mod/group';
-  id: string;
+import PasswordResetModal from './mod/passwordEdit';
-  username: string;
-  loginName: string;
-  userGroup: string;
-  userType: string;
-}
-
-interface OrganizationNode {
-  id: string;
-  name: string;
-  children?: OrganizationNode[];
-}
 
 const UserListPage: React.FC = () => {
-  // State for organization tree
+  const [orgTreeData, setOrgTreeData] = useState<OrganizationNode[]>([]);
-  const [orgTreeData, setOrgTreeData] = useState<DataNode[]>([]);
   const [selectedOrg, setSelectedOrg] = useState<string>('');
 
-  // State for user list
+  // 用户列表
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [searchText, setSearchText] = useState<string>('');
-  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<[]>([]);
 
-  // State for pagination
+  // 分页参数
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(10);
   const [totalUsers, setTotalUsers] = useState<number>(0);
+  // 编辑用户
+  const [currentUserInfo, setCurrentUserInfo] = useState<any>({
+    visible: false,
+  });
+  // 重置密码
+  const [eidtPassword, setEidtPassword] = useState<any>({
+    visible: false,
+  });
 
   // 添加分组
-   const [visible, setVisible] = useState<boolean>(false);
+  const [visible, setVisible] = useState<boolean>(false);
 
-  // Mock data for organization tree
+  // 获取用户分组组织树
   useEffect(() => {
-    // In a real application, this would come from an API
+    getUserGroupList();
-    const mockOrgData: DataNode[] = [
+  }, []);
+
+  // 获取用户列表数据
+  useEffect(() => {
+    getUserListInit();
+  }, [selectedOrg, currentPage, pageSize]);
+
+  const getUserGroupList = () => {
+    const mockOrgData: OrganizationNode[] = [
       {
-        title: 'Headquarters',
+        name: 'Headquarters',
-        key: '1',
+        id: '1',
         children: [
           {
-            title: 'HR Department',
+            name: 'HR Department',
-            key: '2',
+            id: '2',
           },
           {
-            title: 'IT Department',
+            name: 'IT Department',
-            key: '3',
+            id: '3',
             children: [
               {
-                title: 'Frontend Team',
+                name: 'Frontend Team',
-                key: '4',
+                id: '4',
               },
               {
-                title: 'Backend Team',
+                name: 'Backend Team',
-                key: '5',
+                id: '5',
               },
             ],
           },
           {
-            title: 'Finance Department',
+            name: 'Finance Department',
-            key: '6',
+            id: '6',
           },
         ],
       },
     ];
-    setSelectedOrg(mockOrgData[0].key as string);
+    setSelectedOrg(mockOrgData[0].id as string);
     setOrgTreeData(mockOrgData);
-  }, []);
+  };
 
-  // Mock data for users with pagination
+  const getUserListInit = () => {
-  useEffect(() => {
-    // In a real application, this would come from an API based on selected organization
     setLoading(true);
-
-    // Simulate API call delay
     setTimeout(() => {
-      // Generate mock users based on current page and page size
       const startIndex = (currentPage - 1) * pageSize;
       const mockUsers: User[] = Array.from(
         { length: pageSize },
@@ -105,12 +106,47 @@ const UserListPage: React.FC = () => {
       );
 
       setUsers(mockUsers);
-      setTotalUsers(100); // Mock total count
+      setTotalUsers(100);
       setLoading(false);
     }, 300);
-  }, [selectedOrg, currentPage, pageSize]);
+  };
+
+  const onDelete = (user?: User) => {
+    const { user_id } = user || {};
+    const payload = {
+      ids: user_id ? [user_id] : selectedRowKeys,
+    };
+    deleteUser(payload as any).then((res) => {
+      console.log('res=====', res);
+      const { success } = res || {};
+      if (success) {
+        message.success('删除成功');
+        setSelectedRowKeys([]);
+        getUserListInit();
+      }
+    });
+  };
+
+  const handlePassword = (user: User) => {
+    setEidtPassword({
+      recordData: { ...user },
+      visible: true,
+    });
+  };
+
+  const handleCreatUserInfo = () => {
+    setCurrentUserInfo({
+      visible: true,
+    });
+  };
+
+  const handleEditUserInfo = (user: User) => {
+    setCurrentUserInfo({
+      recordData: { ...user },
+      visible: true,
+    });
+  };
 
-  // Define columns for the user table
   const columns: ColumnsType<User> = [
     {
       title: '登录名',
@@ -145,31 +181,33 @@ const UserListPage: React.FC = () => {
     {
       title: '操作',
       key: 'actions',
+      align: 'center',
       render: (_, record) => (
-        <div>
+        <div style={{ display: 'flex' }}>
-          <Button type="link" onClick={() => handleUserAction(record)}>
+          <Button type="link" onClick={() => handlePassword(record)}>
             重置密码
           </Button>
-          <Button type="link" onClick={() => handleUserAction(record)}>
+          <Button type="link" onClick={() => handleEditUserInfo(record)}>
             编辑
           </Button>
-          <Button type="link" onClick={() => handleUserAction(record)}>
+          <Popconfirm
-            删除
+            title=""
-          </Button>
+            description="删除操作不可逆，请确认是否删除?"
+            onConfirm={() => onDelete(record)}
+            // onCancel={cancel}
+            okText="删除"
+            cancelText="取消"
+          >
+            <Button type="link">删除</Button>
+          </Popconfirm>
         </div>
       ),
     },
   ];
 
-  const handleUserAction = (user: User) => {
-    console.log('Editing user:', user);
-    // Implement user edit logic here
-  };
-
   const onOrgSelect = (selectedKeys: React.Key[]) => {
     if (selectedKeys.length > 0) {
       setSelectedOrg(selectedKeys[0] as string);
-      // Reset to first page when organization changes
       setCurrentPage(1);
     }
   };
@@ -180,118 +218,172 @@ const UserListPage: React.FC = () => {
   };
 
   const handlePageSizeChange = (current: number, size: number) => {
-    setCurrentPage(1); // Reset to first page when page size changes
+    setCurrentPage(1);
     setPageSize(size);
   };
 
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     console.log('selectedRowKeys changed: ', newSelectedRowKeys);
-    setSelectedRowKeys(newSelectedRowKeys);
+    setSelectedRowKeys(newSelectedRowKeys as any);
   };
 
+  const onDeleteGroup = () => {};
+
   return (
     <div className={styles.user_content}>
-      <Row gutter={8} style={{ height: '100%' }}>
+      <div className={styles.left_content}>
-        <Col span={5}>
+        <div className={styles.search}>
-          <div className={styles.left_content}>
+          <div style={{ paddingBottom: '5px' }}>
-            <div className={styles.search}>
+            <Button
-              <div style={{ paddingBottom: '5px' }}>
+              type="text"
-                <Button
+              style={{ marginRight: '8px', fontSize: '16px' }}
-                  type="text"
+              icon={<PlusOutlined />}
-                  style={{ marginRight: '8px', fontSize: '16px' }}
+              onClick={() => setVisible(true)}
-                  icon={<PlusOutlined />}
+            />
-                  onClick={() => setVisible(true)}  
+            <Popconfirm
-                />
+              title=""
-                <Button
+              description="删除操作不可逆，请确认是否删除?"
-                  type="text"
+              onConfirm={() => onDeleteGroup()}
-                  style={{ fontSize: '16px' }}
+              // onCancel={cancel}
-                  icon={<DeleteOutlined />}
+              okText="删除"
-                />
+              cancelText="取消"
-              </div>
+              disabled={selectedOrg === ''}
-              <Input.Search
+            >
-                placeholder="请输入名称"
+              <Button
-                style={{ marginBottom: 6 }}
+                type="text"
-                onSearch={(value) => console.log('Search org:', value)}
+                style={{ fontSize: '16px' }}
+                icon={<DeleteOutlined />}
               />
-            </div>
+            </Popconfirm>
-            <div className={styles.tree_box}>
-              <Tree
-                showIcon={true}
-                treeData={orgTreeData}
-                defaultExpandAll
-                onSelect={onOrgSelect}
-                selectedKeys={[selectedOrg]}
-                icon={<TeamOutlined style={{fontSize:"15px"}} />}
-              />
-            </div>
           </div>
-        </Col>
+          <Input.Search
-        <Col span={19}>
+            placeholder="请输入名称"
-          <div className={styles.right_content}>
+            style={{ marginBottom: 6 }}
-            <div className={styles.teble_content}>
+            onSearch={(value) => console.log('Search org:', value)}
-              <div
+          />
-                style={{
+        </div>
-                  marginBottom: 16,
+        <div className={styles.tree_box}>
-                  display: 'flex',
+          <CustomTree
-                  justifyContent: 'space-between',
+            treeData={orgTreeData}
-                }}
+            titleField="name"
+            keyField="id"
+            childrenField="children"
+            defaultExpandAll
+            onSelect={onOrgSelect}
+            selectedKeys={[selectedOrg]}
+            icon={<TeamOutlined style={{ fontSize: '15px' }} />}
+          />
+        </div>
+      </div>
+      <div className={styles.right_content}>
+        <div className={styles.teble_content}>
+          <div
+            style={{
+              marginBottom: 16,
+              display: 'flex',
+              justifyContent: 'space-between',
+            }}
+          >
+            <div>
+              <Button
+                style={{ marginRight: '8px' }}
+                onClick={() => handleCreatUserInfo()}
               >
-                <div>
+                新建用户
-                  <Button style={{ marginRight: '8px' }}>刷新</Button>
+              </Button>
-                  <Button
+              <Popconfirm
-                    disabled={selectedRowKeys.length === 0}
+                title=""
-                    style={{ marginRight: '8px' }}
+                description="删除操作不可逆，请确认是否删除?"
-                  >
+                onConfirm={() => onDelete()}
-                    删除
+                // onCancel={cancel}
-                  </Button>
+                okText="删除"
-                </div>
+                cancelText="取消"
-                <div>
+                disabled={selectedRowKeys.length === 0}
-                  <div>
+              >
-                    <Input.Search
+                <Button
-                      placeholder="Search users"
+                  disabled={selectedRowKeys.length === 0}
-                      value={searchText}
+                  style={{ marginRight: '8px' }}
-                      onChange={(e) => setSearchText(e.target.value)}
+                >
-                      style={{ width: 300 }}
+                  删除
-                      onSearch={(value) => {
+                </Button>
-                        console.log('Search user:', value);
+              </Popconfirm>
-                        setCurrentPage(1); // Reset to first page when searching
+              <Button style={{ marginRight: '8px' }} onClick={getUserListInit}>
-                      }}
+                刷新
-                    />
+              </Button>
-                  </div>
+            </div>
-                </div>
+            <div>
-              </div>
+              <div>
-
+                <Input.Search
-              <Table
+                  placeholder="Search users"
-                columns={columns}
+                  value={searchText}
-                dataSource={users}
+                  onChange={(e) => setSearchText(e.target.value)}
-                loading={loading}
+                  style={{ width: 300 }}
-                rowKey="id"
+                  onSearch={(value) => {
-                pagination={false}
+                    console.log('Search user:', value);
-                rowSelection={{
+                    setCurrentPage(1); // Reset to first page when searching
-                  selectedRowKeys,
+                  }}
-                  onChange: onSelectChange,
-                }}
-              />
-
-              <div style={{ marginTop: 16, textAlign: 'right' }}>
-                <Pagination
-                  current={currentPage}
-                  pageSize={pageSize}
-                  total={totalUsers}
-                  onChange={handlePageChange}
-                  onShowSizeChange={handlePageSizeChange}
-                  showSizeChanger
-                  showQuickJumper
-                  showTotal={(total, range) =>
-                    `Showing ${range[0]}-${range[1]} of ${total} items`
-                  }
                 />
               </div>
             </div>
           </div>
-        </Col>
+          <div className={styles.teble_box}>
-      </Row>
+            <Table
-      <CreatGroup visible={visible} onCancel={()=>{setVisible(false)}} onOk={()=>{}} orgTreeData={[]}/>
+              columns={columns}
+              dataSource={users}
+              loading={loading}
+              rowKey="id"
+              pagination={{
+                current: currentPage,
+                pageSize: pageSize,
+                total: totalUsers,
+                onChange: handlePageChange,
+                onShowSizeChange: handlePageSizeChange,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                showTotal: (total) => {
+                  return `共${total}条数据`;
+                },
+              }}
+              rowSelection={{
+                selectedRowKeys,
+                onChange: onSelectChange,
+              }}
+              scroll={{ x: 'max-content', y: 55 * 12 }}
+            />
+          </div>
+        </div>
+      </div>
+      <CreatGroup
+        visible={visible}
+        selectedOrg={selectedOrg}
+        onCancel={() => {
+          setVisible(false);
+        }}
+        onOk={() => {}}
+        orgTreeData={orgTreeData}
+      />
+      <UserEditModal
+        selectedOrg={selectedOrg}
+        orgTreeData={orgTreeData}
+        currentUserInfo={currentUserInfo}
+        onCancel={() => {
+          setCurrentUserInfo({
+            recordData: {},
+            visible: false,
+          });
+        }}
+        onOk={() => {}}
+      />
+      <PasswordResetModal
+        visible={eidtPassword.visible}
+        onCancel={() => {
+          setEidtPassword({
+            recordData: {},
+            visible: false,
+          });
+        }}
+        onOk={() => {}}
+      />
     </div>
   );
 };

web-fe/src/pages/userList/mod/eidtUser/index.tsx

@@ -0,0 +1,209 @@
+// index.tsx
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Radio,
+  Select,
+  TreeSelect,
+} from 'antd';
+import React, { useEffect } from 'react';
+import { ModalBaseNode, OrganizationNode } from '../../contast';
+
+const { Option } = Select;
+
+interface UserEditModalProps {
+  //   visible: boolean;
+  orgTreeData: OrganizationNode[];
+  onCancel: () => void;
+  onOk: (values: any) => void;
+  confirmLoading?: boolean;
+  currentUserInfo?: ModalBaseNode;
+  selectedOrg?: string;
+}
+
+const UserEditModal: React.FC<UserEditModalProps> = ({
+  orgTreeData,
+  onCancel,
+  onOk,
+  confirmLoading = false,
+  currentUserInfo,
+}) => {
+  const { recordData, visible, selectedOrg } = currentUserInfo || {};
+  const { user_id } = recordData || {};
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    const initialValues = { user_group_id: [selectedOrg], status: 1 };
+    form.setFieldsValue(initialValues);
+  }, [visible, form,recordData, selectedOrg]);
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      onOk(values);
+    } catch (error) {
+      message.error('请检查表单字段');
+    }
+  };
+
+  const validateMessages = {
+    required: '${label} is required!',
+    types: {
+      email: '${label} is not a valid email!',
+      number: '${label} is not a valid number!',
+      cell_phone: '${label} is not a valid cell phone number!',
+    },
+    number: {
+      range: '${label} must be between ${min} and ${max}',
+    },
+  };
+
+  return (
+    <Modal
+      title={user_id ? '编辑用户信息' : '新增用户'}
+      open={visible}
+      onCancel={onCancel}
+      onOk={handleOk}
+      confirmLoading={confirmLoading}
+      width={600}
+      maskClosable={false}
+      centered={true}
+      destroyOnHidden={true}
+      cancelText="取消"
+      okText="确定"
+      //   按钮居中对其
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'right' }}>
+          <Button
+            type="primary"
+            onClick={handleOk}
+            style={{ marginRight: '20px' }}
+          >
+            确定
+          </Button>
+          <Button onClick={onCancel} style={{ marginRight: '20px' }}>
+            取消
+          </Button>
+        </div>
+      }
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        layout="horizontal"
+        style={{ paddingTop: '20px', paddingBottom: '20px' }}
+        validateMessages={validateMessages}
+      >
+        <Form.Item
+          name="loginName"
+          label="登录名"
+          rules={[
+            { required: true, message: '请输入登录名' },
+            { min: 3, message: '登录名至少3个字符' },
+          ]}
+        >
+          <Input placeholder="请输入登录名" />
+        </Form.Item>
+
+        <Form.Item
+          name="userName"
+          label="用户姓名"
+          rules={[{ required: true, message: '请输入用户姓名' }]}
+        >
+          <Input placeholder="请输入用户姓名" />
+        </Form.Item>
+
+        <Form.Item
+          name="user_group_id"
+          label="用户分组"
+          rules={[{ required: true, message: '请选择用户分组' }]}
+        >
+          <TreeSelect
+            showSearch
+            allowClear={false}
+            treeDefaultExpandAll
+            placeholder="请选择用户分组"
+            treeData={orgTreeData}
+            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="status"
+          label="状态"
+          rules={[{ required: true, message: '请选择状态' }]}
+        >
+          <Radio.Group>
+            <Radio value={1}>启用</Radio>
+            <Radio value={2}>禁用</Radio>
+          </Radio.Group>
+        </Form.Item>
+
+        <Form.Item
+          name="userType"
+          label="用户类别"
+          rules={[{ required: true, message: '请选择用户类别' }]}
+        >
+          <Select placeholder="请选择用户类别">
+            <Option value="internal">内部员工</Option>
+            <Option value="external">外部用户</Option>
+            <Option value="partner">合作伙伴</Option>
+            <Option value="temporary">临时用户</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="idCard"
+          label="身份证号"
+          rules={[
+            { required: true, message: '请输入身份证号' },
+            {
+              pattern:
+                /^[1-9]\d{5}(18|19|20|21|22|23|24|25|26|27|28|29|30|31)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20)$/,
+              message: '请输入有效的身份证号',
+            },
+          ]}
+        >
+          <Input placeholder="请输入身份证号" />
+        </Form.Item>
+
+        <Form.Item
+          name="gender"
+          label="性别"
+          rules={[{ required: false, message: '请选择性别' }]}
+        >
+          <Select placeholder="请选择性别">
+            <Option value="male">男</Option>
+            <Option value="female">女</Option>
+            <Option value="other">其他</Option>
+            <Option value="prefer-not-to-say">不愿透露</Option>
+          </Select>
+        </Form.Item>
+        {/* 电话号码 */}
+        <Form.Item
+          name="cell_phone"
+          label="电话号码"
+          rules={[{ required: false, message: '请输入电话号码' }]}
+        >
+          <Input placeholder="请输入电话号码" />
+        </Form.Item>
+        {/* 邮箱 */}
+        <Form.Item
+          name="email"
+          label="邮箱"
+          rules={[
+            { required: false, message: '请输入邮箱' },
+            { type: 'email', message: '请输入有效的邮箱地址' },
+          ]}
+        >
+          <Input placeholder="请输入邮箱" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default UserEditModal;

web-fe/src/pages/userList/mod/group/index.tsx

@@ -1,31 +1,38 @@
 // d:\VDI\vdi\web-fe\src\pages\userList\mod\group\index.tsx
-import React from 'react';
+import { Button, Form, Input, Modal, TreeSelect } from 'antd';
-import { Modal, Form, Input, Select } from 'antd';
+import React, { useEffect } from 'react';
-import type { DataNode } from 'antd/es/tree';
+// import type { DataNode } from 'antd/es/tree';
+import { OrganizationNode } from '../../contast';
 
 interface CreatGroupProps {
   visible: boolean;
+  selectedOrg: string;
   onCancel: () => void;
   onOk: (values: any) => void;
-  orgTreeData: DataNode[];
+  orgTreeData: OrganizationNode[];
 }
 
 const CreatGroup: React.FC<CreatGroupProps> = (props) => {
-  const { visible, onCancel, onOk, orgTreeData } = props;
+  const { visible, onCancel, onOk, orgTreeData, selectedOrg } = props;
   const [form] = Form.useForm();
 
-  // Flatten tree data for parent group selection
+  useEffect(() => {
-  const flattenTreeData = (data: DataNode[], result: { value: string; label: string }[] = []) => {
+    const initialValues = { parent_id: [selectedOrg] };
-    data.forEach(item => {
+    form.setFieldsValue(initialValues);
-      result.push({ value: item.key as string, label: item.title as string });
+  }, [visible, form, selectedOrg]);
-      if (item.children) {
-        flattenTreeData(item.children, result);
-      }
-    });
-    return result;
-  };
 
-  const parentGroupOptions = flattenTreeData(orgTreeData);
+  // Flatten tree data for parent group selection
+  // const flattenTreeData = (data: OrganizationNode[], result: { value: string; label: string }[] = []) => {
+  //   data.forEach(item => {
+  //     result.push({ value: item.id as string, label: item.name as string });
+  //     if (item.children) {
+  //       flattenTreeData(item.children, result);
+  //     }
+  //   });
+  //   return result;
+  // };
+
+  // const parentGroupOptions = flattenTreeData(orgTreeData);
 
   const handleOk = () => {
     form.submit();
@@ -49,32 +56,54 @@ const CreatGroup: React.FC<CreatGroupProps> = (props) => {
       onCancel={handleCancel}
       okText="确认"
       cancelText="取消"
+      centered={true}
+      destroyOnHidden={true}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'right' }}>
+          <Button
+            type="primary"
+            onClick={handleOk}
+            style={{ marginRight: '20px' }}
+          >
+            确定
+          </Button>
+          <Button onClick={onCancel} style={{ marginRight: '20px' }}>
+            取消
+          </Button>
+        </div>
+      }
     >
-      <Form
+      <div style={{ height: '300px' }}>
-        form={form}
+        <Form
-        layout="vertical"
+          form={form}
-        onFinish={handleFinish}
+          labelCol={{ span: 5 }}
-      >
+          wrapperCol={{ span: 18 }}
-        <Form.Item
+          layout="horizontal"
-          name="groupName"
+          onFinish={handleFinish}
-          label="分组名"
+          style={{ paddingTop: '20px', paddingBottom: '20px' }}
-          rules={[{ required: true, message: '请输入分组名!' }]}
         >
-          <Input placeholder="请输入分组名" />
+          <Form.Item
-        </Form.Item>
+            name="groupName"
-        
+            label="分组名"
-        <Form.Item
+            rules={[{ required: true, message: '请输入分组名!' }]}
-          name="parentGroup"
+          >
-          label="父分组名"
+            <Input placeholder="请输入分组名" />
-        >
+          </Form.Item>
-          <Select
+
-            placeholder="请选择父分组"
+          <Form.Item name="parent_id" label="父分组名">
-            options={parentGroupOptions}
+            <TreeSelect
-          />
+              showSearch
-        </Form.Item>
+              allowClear={false}
-      </Form>
+              treeDefaultExpandAll
+              placeholder="请选择父分组名"
+              treeData={orgTreeData}
+              fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+            />
+          </Form.Item>
+        </Form>
+      </div>
     </Modal>
   );
 };
 
-export default CreatGroup;
+export default CreatGroup;

web-fe/src/pages/userList/mod/passwordEdit/index.tsx

@@ -0,0 +1,114 @@
+// index.tsx
+import { Button, Form, Input, message, Modal } from 'antd';
+import React, { useEffect } from 'react';
+
+interface PasswordResetModalProps {
+  visible: boolean;
+  onCancel: () => void;
+  onOk: (values: { password: string }) => void;
+  confirmLoading?: boolean;
+  username?: string;
+}
+
+const PasswordResetModal: React.FC<PasswordResetModalProps> = ({
+  visible,
+  onCancel,
+  onOk,
+  confirmLoading = false,
+  username,
+}) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (!visible) {
+      form.resetFields();
+    }
+  }, [visible, form]);
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      onOk(values);
+    } catch (error) {
+      message.error('请检查表单字段');
+    }
+  };
+
+  // Password validation rule
+  const passwordValidator = (_: any, value: string) => {
+    if (!value) {
+      return Promise.reject('请输入新密码');
+    }
+
+    if (value.length < 6) {
+      return Promise.reject('密码长度至少6位');
+    }
+
+    const hasNumber = /\d/.test(value);
+    const hasLetter = /[a-zA-Z]/.test(value);
+    // const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
+
+    if (!hasNumber) {
+      return Promise.reject('密码必须包含数字');
+    }
+
+    if (!hasLetter) {
+      return Promise.reject('密码必须包含字母');
+    }
+
+    // if (!hasSpecialChar) {
+    //   return Promise.reject('密码必须包含特殊字符');
+    // }
+
+    return Promise.resolve();
+  };
+
+  return (
+    <Modal
+      title={username ? `重置密码 - ${username}` : '重置密码'}
+      open={visible}
+      onCancel={onCancel}
+      onOk={handleOk}
+      confirmLoading={confirmLoading}
+      width={600}
+      maskClosable={false}
+      centered={true}
+      okText="确定"
+      cancelText="取消"
+      destroyOnHidden={true}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'right' }}>
+          <Button
+            type="primary"
+            onClick={handleOk}
+            style={{ marginRight: '20px' }}
+          >
+            确定
+          </Button>
+          <Button onClick={onCancel} style={{ marginRight: '20px' }}>
+            取消
+          </Button>
+        </div>
+      }
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        layout="horizontal"
+        style={{ paddingTop: '20px', paddingBottom: '20px' }}
+      >
+        <Form.Item
+          name="password"
+          label="密码重置为"
+          rules={[{ required: true, validator: passwordValidator }]}
+          help="密码必须包含数字和字母，字母区分大小写，且至少6位"
+        >
+          <Input.Password placeholder="请输入新密码" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default PasswordResetModal;

web-fe/src/services/userList/index.ts

@@ -0,0 +1,89 @@
+import { request } from '@umijs/max';
+
+// 新建用户分组
+export async function addUserGroup(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+// 获取用户分组
+export async function getUserGroup(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+
+// 删除用户分组
+export async function deleteUserGroup(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+
+// 查询用户分组
+export async function getUserList(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+
+// 新建用户
+export async function addUser(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+
+// 编辑用户
+export async function editUser(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+
+//获取某个用户信息
+export async function getUserById(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+
+//删除用户
+export async function deleteUser(body?: APIS.UserInfoVO) {
+  return request<APIS.Result_UserInfo_>('/api/v1/user', {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+  });
+}
+

web-fe/src/services/userList/typings.d.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+// 该文件由 OneAPI 自动生成，请勿手动修改！
+
+declare namespace APIS {
+  interface PageInfo {
+    /** 
+1 */
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    list?: Array<Record<string, any>>;
+  }
+
+  interface PageInfo_UserInfo_ {
+    /** 
+1 */
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    list?: Array<UserInfo>;
+  }
+
+  interface Result {
+    success?: boolean;
+    errorMessage?: string;
+    data?: Record<string, any>;
+  }
+
+  interface Result_PageInfo_UserInfo__ {
+    success?: boolean;
+    errorMessage?: string;
+    data?: PageInfo_UserInfo_;
+  }
+
+  interface Result_UserInfo_ {
+    success?: boolean;
+    errorMessage?: string;
+    data?: UserInfo;
+  }
+
+  interface Result_string_ {
+    success?: boolean;
+    errorMessage?: string;
+    data?: string;
+  }
+
+  type UserGenderEnum = 'MALE' | 'FEMALE';
+
+  interface UserInfo {
+    id?: string;
+    name?: string;
+    /** nick */
+    nickName?: string;
+    /** email */
+    email?: string;
+    gender?: UserGenderEnum;
+  }
+
+  interface UserInfoVO {
+    name?: string;
+    /** nick */
+    nickName?: string;
+    /** email */
+    email?: string;
+  }
+
+  type definitions_0 = null;
+}

web-fe/yarn.lock

@@ -1898,7 +1898,7 @@
 
 "@types/spark-md5@^3.0.5":
   version "3.0.5"
-  resolved "http://10.208.10.36:8080/repository/npm/@types/spark-md5/-/spark-md5-3.0.5.tgz#eddec8639217e518c26e9e221ff56bf5f5f5c900"
+  resolved "https://registry.npmmirror.com/@types/spark-md5/-/spark-md5-3.0.5.tgz#eddec8639217e518c26e9e221ff56bf5f5f5c900"
   integrity sha512-lWf05dnD42DLVKQJZrDHtWFidcLrHuip01CtnC2/S6AMhX4t9ZlEUj4iuRlAnts0PQk7KESOqKxeGE/b6sIPGg==
 
 "@types/stylis@^4.0.2":
@@ -9278,7 +9278,7 @@ source-map@^0.7.3, source-map@^0.7.4:
 
 spark-md5@^3.0.2:
   version "3.0.2"
-  resolved "http://10.208.10.36:8080/repository/npm/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
+  resolved "https://registry.npmmirror.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
   integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==
 
 spdx-correct@^3.0.0:
@@ -9412,7 +9412,16 @@ string-convert@^0.2.0:
   resolved "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
   integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9502,7 +9511,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10102,7 +10118,7 @@ utils-merge@1.0.1:
 
 uuid@^11.1.0:
   version "11.1.0"
-  resolved "http://10.208.10.36:8080/repository/npm/uuid/-/uuid-11.1.0.tgz#9549028be1753bb934fc96e2bca09bb4105ae912"
+  resolved "https://registry.npmmirror.com/uuid/-/uuid-11.1.0.tgz#9549028be1753bb934fc96e2bca09bb4105ae912"
   integrity sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==
 
 v8-compile-cache@^2.3.0:
@@ -10260,7 +10276,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==