diff --git a/react-ui/src/pages/System/Config/edit.tsx b/react-ui/src/pages/System/Config/edit.tsx
new file mode 100644
index 0000000..6cb3942
--- /dev/null
+++ b/react-ui/src/pages/System/Config/edit.tsx
@@ -0,0 +1,172 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormTextArea,
+  ProFormRadio,
+  } from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type ConfigFormData = Record<string, unknown> & Partial<API.System.Config>;
+
+export type ConfigFormProps = {
+  onCancel: (flag?: boolean, formVals?: ConfigFormData) => void;
+  onSubmit: (values: ConfigFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.Config>;
+  configTypeOptions: DictValueEnumObj;
+};
+
+const ConfigForm: React.FC<ConfigFormProps> = (props) => {
+  const [form] = Form.useForm();
+  
+  const { configTypeOptions } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+			configId: props.values.configId,
+			configName: props.values.configName,
+			configKey: props.values.configKey,
+			configValue: props.values.configValue,
+			configType: props.values.configType,
+			createBy: props.values.createBy,
+			createTime: props.values.createTime,
+			updateBy: props.values.updateBy,
+			updateTime: props.values.updateTime,
+			remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as ConfigFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.config.title',
+        defaultMessage: '编辑参数配置',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+		  <ProForm 
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal" 
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="configId"
+          label={intl.formatMessage({
+            id: 'system.config.config_id',
+            defaultMessage: '参数主键',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入参数主键"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入参数主键！" defaultMessage="请输入参数主键！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="configName"
+          label={intl.formatMessage({
+            id: 'system.config.config_name',
+            defaultMessage: '参数名称',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入参数名称"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入参数名称！" defaultMessage="请输入参数名称！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="configKey"
+          label={intl.formatMessage({
+            id: 'system.config.config_key',
+            defaultMessage: '参数键名',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入参数键名"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入参数键名！" defaultMessage="请输入参数键名！" />,                  
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="configValue"
+          label={intl.formatMessage({
+            id: 'system.config.config_value',
+            defaultMessage: '参数键值',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入参数键值"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入参数键值！" defaultMessage="请输入参数键值！" />,                  
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={configTypeOptions}
+          name="configType"
+          label={intl.formatMessage({
+            id: 'system.config.config_type',
+            defaultMessage: '系统内置',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入系统内置"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入系统内置！" defaultMessage="请输入系统内置！" />,                  
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="remark"
+          label={intl.formatMessage({
+            id: 'system.config.remark',
+            defaultMessage: '备注',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入备注"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,                  
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default ConfigForm;
diff --git a/react-ui/src/pages/System/Config/index.tsx b/react-ui/src/pages/System/Config/index.tsx
new file mode 100644
index 0000000..1428891
--- /dev/null
+++ b/react-ui/src/pages/System/Config/index.tsx
@@ -0,0 +1,397 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, ReloadOutlined, DownloadOutlined } from '@ant-design/icons';
+import { getConfigList, removeConfig, addConfig, updateConfig, exportConfig, refreshConfigCache } from '@/services/system/config';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.Config) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addConfig({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.Config) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateConfig(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.Config[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeConfig(selectedRows.map((row) => row.configId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.Config) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.configId];
+    const resp = await removeConfig(params.join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 导出数据
+ *
+ *
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportConfig();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+const handleRefreshCache = async () => {
+  const hide = message.loading('正在刷新');
+  try {
+    await refreshConfigCache();
+    hide();
+    message.success('刷新成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('刷新失败，请重试');
+    return false;
+  }
+};
+
+const ConfigTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.Config>();
+  const [selectedRows, setSelectedRows] = useState<API.System.Config[]>([]);
+
+  const [configTypeOptions, setConfigTypeOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_yes_no').then((data) => {
+      setConfigTypeOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.System.Config>[] = [
+    {
+      title: <FormattedMessage id="system.config.config_id" defaultMessage="参数主键" />,
+      dataIndex: 'configId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.config.config_name" defaultMessage="参数名称" />,
+      dataIndex: 'configName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.config.config_key" defaultMessage="参数键名" />,
+      dataIndex: 'configKey',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.config.config_value" defaultMessage="参数键值" />,
+      dataIndex: 'configValue',
+      valueType: 'textarea',
+    },
+    {
+      title: <FormattedMessage id="system.config.config_type" defaultMessage="系统内置" />,
+      dataIndex: 'configType',
+      valueType: 'select',
+      valueEnum: configTypeOptions,
+      render: (_, record) => {
+        return (<DictTag enums={configTypeOptions} value={record.configType} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="system.config.remark" defaultMessage="备注" />,
+      dataIndex: 'remark',
+      valueType: 'textarea',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '120px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:config:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('system:config:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.Config>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="configId"
+          key="configList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:config:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:config:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+            <Button
+              type="primary"
+              key="export"
+              hidden={!access.hasPerms('system:config:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <DownloadOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+            <Button
+              type="primary"
+              key="refresh"
+              danger
+              hidden={!access.hasPerms('system:config:remove')}
+              onClick={async () => {
+                handleRefreshCache();
+              }}
+            >
+              <ReloadOutlined />
+              <FormattedMessage id="system.config.refreshCache" defaultMessage="刷新缓存" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getConfigList({ ...params } as API.System.ConfigListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:config:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.configId) {
+            success = await handleUpdate({ ...values } as API.System.Config);
+          } else {
+            success = await handleAdd({ ...values } as API.System.Config);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        configTypeOptions={configTypeOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default ConfigTableList;
diff --git a/react-ui/src/pages/System/Dept/edit.tsx b/react-ui/src/pages/System/Dept/edit.tsx
new file mode 100644
index 0000000..cb64813
--- /dev/null
+++ b/react-ui/src/pages/System/Dept/edit.tsx
@@ -0,0 +1,212 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormRadio,
+  ProFormTreeSelect,
+} from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DataNode } from 'antd/es/tree';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type DeptFormData = Record<string, unknown> & Partial<API.System.Dept>;
+
+export type DeptFormProps = {
+  onCancel: (flag?: boolean, formVals?: DeptFormData) => void;
+  onSubmit: (values: DeptFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.Dept>;
+  deptTree: DataNode[];
+  statusOptions: DictValueEnumObj;
+};
+
+const DeptForm: React.FC<DeptFormProps> = (props) => {
+  const [form] = Form.useForm();
+
+  const { statusOptions, deptTree } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+      deptId: props.values.deptId,
+      parentId: props.values.parentId,
+      ancestors: props.values.ancestors,
+      deptName: props.values.deptName,
+      orderNum: props.values.orderNum,
+      leader: props.values.leader,
+      phone: props.values.phone,
+      email: props.values.email,
+      status: props.values.status,
+      delFlag: props.values.delFlag,
+      createBy: props.values.createBy,
+      createTime: props.values.createTime,
+      updateBy: props.values.updateBy,
+      updateTime: props.values.updateTime,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as DeptFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.dept.title',
+        defaultMessage: '编辑部门',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProForm
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal"
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="deptId"
+          label={intl.formatMessage({
+            id: 'system.dept.dept_id',
+            defaultMessage: '部门id',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入部门id"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入部门id！" defaultMessage="请输入部门id！" />,
+            },
+          ]}
+        />
+        <ProFormTreeSelect
+          name="parentId"
+          label={intl.formatMessage({
+            id: 'system.dept.parent_dept',
+            defaultMessage: '上级部门:',
+          })}
+          request={async () => {
+            return deptTree;
+          }}
+          placeholder="请选择上级部门"
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage id="请输入用户昵称！" defaultMessage="请选择上级部门!" />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          name="deptName"
+          label={intl.formatMessage({
+            id: 'system.dept.dept_name',
+            defaultMessage: '部门名称',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入部门名称"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入部门名称！" defaultMessage="请输入部门名称！" />,
+            },
+          ]}
+        />
+        <ProFormDigit
+          name="orderNum"
+          label={intl.formatMessage({
+            id: 'system.dept.order_num',
+            defaultMessage: '显示顺序',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入显示顺序"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入显示顺序！" defaultMessage="请输入显示顺序！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="leader"
+          label={intl.formatMessage({
+            id: 'system.dept.leader',
+            defaultMessage: '负责人',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入负责人"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入负责人！" defaultMessage="请输入负责人！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="phone"
+          label={intl.formatMessage({
+            id: 'system.dept.phone',
+            defaultMessage: '联系电话',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入联系电话"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入联系电话！" defaultMessage="请输入联系电话！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="email"
+          label={intl.formatMessage({
+            id: 'system.dept.email',
+            defaultMessage: '邮箱',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入邮箱"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入邮箱！" defaultMessage="请输入邮箱！" />,
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.dept.status',
+            defaultMessage: '部门状态',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入部门状态"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入部门状态！" defaultMessage="请输入部门状态！" />,
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default DeptForm;
diff --git a/react-ui/src/pages/System/Dept/index.tsx b/react-ui/src/pages/System/Dept/index.tsx
new file mode 100644
index 0000000..3a1c5de
--- /dev/null
+++ b/react-ui/src/pages/System/Dept/index.tsx
@@ -0,0 +1,346 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { getDeptList, removeDept, addDept, updateDept, getDeptListExcludeChild } from '@/services/system/dept';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import { buildTreeData } from '@/utils/tree';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.Dept) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addDept({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.Dept) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateDept(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.Dept[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeDept(selectedRows.map((row) => row.deptId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.Dept) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.deptId];
+    const resp = await removeDept(params.join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+
+const DeptTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.Dept>();
+  const [selectedRows, setSelectedRows] = useState<API.System.Dept[]>([]);
+
+  const [deptTree, setDeptTree] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.System.Dept>[] = [
+    {
+      title: <FormattedMessage id="system.dept.dept_name" defaultMessage="部门名称" />,
+      dataIndex: 'deptName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.dept.order_num" defaultMessage="显示顺序" />,
+      dataIndex: 'orderNum',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.dept.status" defaultMessage="部门状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '220px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:dept:edit')}
+          onClick={() => {
+            getDeptListExcludeChild(record.deptId).then((res) => {
+              if (res.code === 200) {
+                let depts = buildTreeData(res.data, 'deptId', 'deptName', '', '', '');
+                if(depts.length === 0) {
+                  depts = [{ id: 0, title: '无上级', children: undefined, key: 0, value: 0 }];
+                }
+                setDeptTree(depts);
+                setModalVisible(true);
+                setCurrentRow(record);
+              } else {
+                message.warning(res.msg);
+              }
+            });
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('system:dept:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.Dept>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="deptId"
+          key="deptList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:dept:add')}
+              onClick={async () => {
+                getDeptList().then((res) => {
+                  if (res.code === 200) {
+                    setDeptTree(buildTreeData(res.data, 'deptId', 'deptName', '', '', ''));
+                    setCurrentRow(undefined);
+                    setModalVisible(true);
+                  } else {
+                    message.warning(res.msg);
+                  }
+                });
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:dept:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() {},
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getDeptList({ ...params } as API.System.DeptListParams).then((res) => {
+              const result = {
+                data: buildTreeData(res.data, 'deptId', '', '', '', ''),
+                total: res.data.length,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:dept:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.deptId) {
+            success = await handleUpdate({ ...values } as API.System.Dept);
+          } else {
+            success = await handleAdd({ ...values } as API.System.Dept);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        deptTree={deptTree}
+        statusOptions={statusOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default DeptTableList;
diff --git a/react-ui/src/pages/System/Dict/edit.tsx b/react-ui/src/pages/System/Dict/edit.tsx
new file mode 100644
index 0000000..882c1cb
--- /dev/null
+++ b/react-ui/src/pages/System/Dict/edit.tsx
@@ -0,0 +1,152 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormRadio,
+  ProFormTextArea,
+  } from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type DictTypeFormData = Record<string, unknown> & Partial<API.System.DictType>;
+
+export type DictTypeFormProps = {
+  onCancel: (flag?: boolean, formVals?: DictTypeFormData) => void;
+  onSubmit: (values: DictTypeFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.DictType>;
+  statusOptions: DictValueEnumObj;
+};
+
+const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
+  const [form] = Form.useForm();
+
+  const { statusOptions } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+			dictId: props.values.dictId,
+			dictName: props.values.dictName,
+			dictType: props.values.dictType,
+			status: props.values.status,
+			createBy: props.values.createBy,
+			createTime: props.values.createTime,
+			updateBy: props.values.updateBy,
+			updateTime: props.values.updateTime,
+			remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as DictTypeFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.dict.title',
+        defaultMessage: '编辑字典类型',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+		  <ProForm
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal"
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="dictId"
+          label={intl.formatMessage({
+            id: 'system.dict.dict_id',
+            defaultMessage: '字典主键',
+          })}
+          placeholder="请输入字典主键"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典主键！" defaultMessage="请输入字典主键！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="dictName"
+          label={intl.formatMessage({
+            id: 'system.dict.dict_name',
+            defaultMessage: '字典名称',
+          })}
+          placeholder="请输入字典名称"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典名称！" defaultMessage="请输入字典名称！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="dictType"
+          label={intl.formatMessage({
+            id: 'system.dict.dict_type',
+            defaultMessage: '字典类型',
+          })}
+          placeholder="请输入字典类型"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典类型！" defaultMessage="请输入字典类型！" />,
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.dict.status',
+            defaultMessage: '状态',
+          })}
+          initialValue={'0'}
+          placeholder="请输入状态"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入状态！" defaultMessage="请输入状态！" />,
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="remark"
+          label={intl.formatMessage({
+            id: 'system.dict.remark',
+            defaultMessage: '备注',
+          })}
+          placeholder="请输入备注"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default DictTypeForm;
diff --git a/react-ui/src/pages/System/Dict/index.tsx b/react-ui/src/pages/System/Dict/index.tsx
new file mode 100644
index 0000000..ccdbc2a
--- /dev/null
+++ b/react-ui/src/pages/System/Dict/index.tsx
@@ -0,0 +1,394 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess, history } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { getDictTypeList, removeDictType, addDictType, updateDictType, exportDictType } from '@/services/system/dict';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.DictType) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addDictType({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.DictType) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateDictType(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.DictType[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeDictType(selectedRows.map((row) => row.dictId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.DictType) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.dictId];
+    const resp = await removeDictType(params.join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 导出数据
+ *
+ *
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportDictType();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+
+const DictTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.DictType>();
+  const [selectedRows, setSelectedRows] = useState<API.System.DictType[]>([]);
+
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.System.DictType>[] = [
+    {
+      title: <FormattedMessage id="system.dict.dict_id" defaultMessage="字典编号" />,
+      dataIndex: 'dictId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.dict.dict_name" defaultMessage="字典名称" />,
+      dataIndex: 'dictName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.dict.dict_type" defaultMessage="字典类型" />,
+      dataIndex: 'dictType',
+      valueType: 'text',
+      render: (dom, record) => {
+        return (
+          <a
+            onClick={() => {
+              history.push(`/system/dict-data/index/${record.dictId}`);
+            }}
+          >
+            {dom}
+          </a>
+        );
+      },
+    },
+    {
+      title: <FormattedMessage id="system.dict.status" defaultMessage="状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="system.dict.remark" defaultMessage="备注" />,
+      dataIndex: 'remark',
+      valueType: 'textarea',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.role.create_time" defaultMessage="创建时间" />,
+      dataIndex: 'createTime',
+      valueType: 'dateRange',
+      render: (_, record) => {
+        return (<span>{record.createTime.toString()} </span>);
+      },
+      search: {
+        transform: (value) => {
+          return {
+            'params[beginTime]': value[0],
+            'params[endTime]': value[1],
+          };
+        },
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '220px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:dictType:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('system:dictType:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.DictType>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="dictId"
+          key="dictTypeList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:dictType:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:dictType:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() {},
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+            <Button
+              type="primary"
+              key="export"
+              hidden={!access.hasPerms('system:dictType:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getDictTypeList({ ...params } as API.System.DictTypeListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:dictType:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.dictId) {
+            success = await handleUpdate({ ...values } as API.System.DictType);
+          } else {
+            success = await handleAdd({ ...values } as API.System.DictType);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        statusOptions={statusOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default DictTableList;
diff --git a/react-ui/src/pages/System/DictData/edit.tsx b/react-ui/src/pages/System/DictData/edit.tsx
new file mode 100644
index 0000000..188e01b
--- /dev/null
+++ b/react-ui/src/pages/System/DictData/edit.tsx
@@ -0,0 +1,252 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormSelect,
+  ProFormRadio,
+  ProFormTextArea,
+} from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type DataFormData = Record<string, unknown> & Partial<API.System.DictData>;
+
+export type DataFormProps = {
+  onCancel: (flag?: boolean, formVals?: DataFormData) => void;
+  onSubmit: (values: DataFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.DictData>;
+  statusOptions: DictValueEnumObj;
+};
+
+const DictDataForm: React.FC<DataFormProps> = (props) => {
+  const [form] = Form.useForm();
+
+  const { statusOptions } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+      dictCode: props.values.dictCode,
+      dictSort: props.values.dictSort,
+      dictLabel: props.values.dictLabel,
+      dictValue: props.values.dictValue,
+      dictType: props.values.dictType,
+      cssClass: props.values.cssClass,
+      listClass: props.values.listClass,
+      isDefault: props.values.isDefault,
+      status: props.values.status,
+      createBy: props.values.createBy,
+      createTime: props.values.createTime,
+      updateBy: props.values.updateBy,
+      updateTime: props.values.updateTime,
+      remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as DataFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.dict.data.title',
+        defaultMessage: '编辑字典数据',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProForm
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal"
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="dictCode"
+          label={intl.formatMessage({
+            id: 'system.dict.data.dict_code',
+            defaultMessage: '字典编码',
+          })}
+          colProps={{ md: 24, xl: 24 }}
+          placeholder="请输入字典编码"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典编码！" defaultMessage="请输入字典编码！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="dictType"
+          label={intl.formatMessage({
+            id: 'system.dict.data.dict_type',
+            defaultMessage: '字典类型',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入字典类型"
+          disabled
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典类型！" defaultMessage="请输入字典类型！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="dictLabel"
+          label={intl.formatMessage({
+            id: 'system.dict.data.dict_label',
+            defaultMessage: '字典标签',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入字典标签"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典标签！" defaultMessage="请输入字典标签！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="dictValue"
+          label={intl.formatMessage({
+            id: 'system.dict.data.dict_value',
+            defaultMessage: '字典键值',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入字典键值"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典键值！" defaultMessage="请输入字典键值！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="cssClass"
+          label={intl.formatMessage({
+            id: 'system.dict.data.css_class',
+            defaultMessage: '样式属性',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入样式属性"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入样式属性！" defaultMessage="请输入样式属性！" />,
+            },
+          ]}
+        />
+        <ProFormSelect
+          name="listClass"
+          label={intl.formatMessage({
+            id: 'system.dict.data.list_class',
+            defaultMessage: '回显样式',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入回显样式"
+          valueEnum={{
+            'default': '默认',
+            'primary': '主要',
+            'success': '成功',
+            'info': '信息',
+            'warning': '警告',
+            'danger': '危险',
+          }}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入回显样式！" defaultMessage="请输入回显样式！" />,
+            },
+          ]}
+        />
+        <ProFormDigit
+          name="dictSort"
+          label={intl.formatMessage({
+            id: 'system.dict.data.dict_sort',
+            defaultMessage: '字典排序',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入字典排序"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入字典排序！" defaultMessage="请输入字典排序！" />,
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          name="isDefault"
+          label={intl.formatMessage({
+            id: 'system.dict.data.is_default',
+            defaultMessage: '是否默认',
+          })}
+          valueEnum={{
+            'Y': '是',
+            'N': '否',
+          }}
+          initialValue={'N'}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入是否默认"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入是否默认！" defaultMessage="请输入是否默认！" />,
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.dict.data.status',
+            defaultMessage: '状态',
+          })}
+          initialValue={'0'}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入状态"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入状态！" defaultMessage="请输入状态！" />,
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="remark"
+          label={intl.formatMessage({
+            id: 'system.dict.data.remark',
+            defaultMessage: '备注',
+          })}
+          colProps={{ md: 24, xl: 24 }}
+          placeholder="请输入备注"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default DictDataForm;
diff --git a/react-ui/src/pages/System/DictData/index.tsx b/react-ui/src/pages/System/DictData/index.tsx
new file mode 100644
index 0000000..2bf1069
--- /dev/null
+++ b/react-ui/src/pages/System/DictData/index.tsx
@@ -0,0 +1,439 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess, history, useParams } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { getDictDataList, removeDictData, addDictData, updateDictData, exportDictData } from '@/services/system/dictdata';
+import UpdateForm from './edit';
+import { getDictValueEnum, getDictType, getDictTypeOptionSelect } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.DictData) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addDictData({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.DictData) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateDictData(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.DictData[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeDictData(selectedRows.map((row) => row.dictCode).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.DictData) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.dictCode];
+    const resp = await removeDictData(params.join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 导出数据
+ *
+ *
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportDictData();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+export type DictTypeArgs = {
+  id: string;
+};
+
+
+const DictDataTableList: React.FC = () => {
+
+  const formTableRef = useRef<FormInstance>();
+
+  const [dictId, setDictId] = useState<string>('');
+  const [dictType, setDictType] = useState<string>('');
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.DictData>();
+  const [selectedRows, setSelectedRows] = useState<API.System.DictData[]>([]);
+
+  const [dictTypeOptions, setDictTypeOptions] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  const params = useParams();
+  if (params.id === undefined) {
+    history.push('/system/dict');
+  }
+  const id = params.id || '0';
+
+  useEffect(() => {
+    if (dictId !== id) {
+      setDictId(id);
+      getDictTypeOptionSelect().then((res) => {
+        if (res.code === 200) {
+          const opts: any = {};
+          res.data.forEach((item: any) => {
+            opts[item.dictType] = item.dictName;
+          });
+          setDictTypeOptions(opts);
+        }
+      });
+      getDictValueEnum('sys_normal_disable').then((data) => {
+        setStatusOptions(data);
+      });
+      getDictType(id).then((res) => {
+        if (res.code === 200) {
+          setDictType(res.data.dictType);
+          formTableRef.current?.setFieldsValue({
+            dictType: res.data.dictType,
+          });
+          actionRef.current?.reloadAndRest?.();
+        } else {
+          message.error(res.msg);
+        }
+      });
+    }
+  }, [dictId, dictType, params]);
+
+  const columns: ProColumns<API.System.DictData>[] = [
+    {
+      title: <FormattedMessage id="system.dict.data.dict_code" defaultMessage="字典编码" />,
+      dataIndex: 'dictCode',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.dict.data.dict_label" defaultMessage="字典标签" />,
+      dataIndex: 'dictLabel',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.dict.data.dict_type" defaultMessage="字典类型" />,
+      dataIndex: 'dictType',
+      valueType: 'select',
+      hideInTable: true,
+      valueEnum: dictTypeOptions,
+      search: {
+        transform: (value) => {
+          setDictType(value);
+          return value;
+        },
+      },
+    },
+    {
+      title: <FormattedMessage id="system.dict.data.dict_value" defaultMessage="字典键值" />,
+      dataIndex: 'dictValue',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.dict.data.dict_sort" defaultMessage="字典排序" />,
+      dataIndex: 'dictSort',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.dict.data.status" defaultMessage="状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="system.dict.data.remark" defaultMessage="备注" />,
+      dataIndex: 'remark',
+      valueType: 'textarea',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.dict.data.create_time" defaultMessage="创建时间" />,
+      dataIndex: 'createTime',
+      valueType: 'dateRange',
+      render: (_, record) => {
+        return (<span>{record.createTime.toString()} </span>);
+      },
+      search: {
+        transform: (value) => {
+          return {
+            'params[beginTime]': value[0],
+            'params[endTime]': value[1],
+          };
+        },
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '120px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:data:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('system:data:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.DictData>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="dictCode"
+          key="dataList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:data:add')}
+              onClick={async () => {
+                setCurrentRow({ dictType: dictType, isDefault: 'N', status: '0' } as API.System.DictData);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:data:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+            <Button
+              type="primary"
+              key="export"
+              hidden={!access.hasPerms('system:data:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getDictDataList({ ...params, dictType } as API.System.DictDataListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:data:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.dictCode) {
+            success = await handleUpdate({ ...values } as API.System.DictData);
+          } else {
+            success = await handleAdd({ ...values } as API.System.DictData);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        statusOptions={statusOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default DictDataTableList;
diff --git a/react-ui/src/pages/System/Logininfor/edit.tsx b/react-ui/src/pages/System/Logininfor/edit.tsx
new file mode 100644
index 0000000..5243191
--- /dev/null
+++ b/react-ui/src/pages/System/Logininfor/edit.tsx
@@ -0,0 +1,216 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormRadio,
+  ProFormTimePicker,
+  } from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type LogininforFormData = Record<string, unknown> & Partial<API.Monitor.Logininfor>;
+
+export type LogininforFormProps = {
+  onCancel: (flag?: boolean, formVals?: LogininforFormData) => void;
+  onSubmit: (values: LogininforFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.Monitor.Logininfor>;
+  statusOptions: DictValueEnumObj;
+};
+
+const LogininforForm: React.FC<LogininforFormProps> = (props) => {
+  const [form] = Form.useForm();
+  
+  const { statusOptions, } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+			infoId: props.values.infoId,
+			userName: props.values.userName,
+			ipaddr: props.values.ipaddr,
+			loginLocation: props.values.loginLocation,
+			browser: props.values.browser,
+			os: props.values.os,
+			status: props.values.status,
+			msg: props.values.msg,
+			loginTime: props.values.loginTime,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+    form.resetFields();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as LogininforFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.logininfor.title',
+        defaultMessage: '编辑系统访问记录',
+      })}
+      open={props.open}
+      destroyOnClose
+      forceRender
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+		  <ProForm 
+        form={form}
+        grid={true}
+        layout="horizontal" 
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="infoId"
+          label={intl.formatMessage({
+            id: 'system.logininfor.info_id',
+            defaultMessage: '访问编号',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入访问编号"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入访问编号！" defaultMessage="请输入访问编号！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="userName"
+          label={intl.formatMessage({
+            id: 'system.logininfor.user_name',
+            defaultMessage: '用户账号',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入用户账号"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入用户账号！" defaultMessage="请输入用户账号！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="ipaddr"
+          label={intl.formatMessage({
+            id: 'system.logininfor.ipaddr',
+            defaultMessage: '登录IP地址',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入登录IP地址"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入登录IP地址！" defaultMessage="请输入登录IP地址！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="loginLocation"
+          label={intl.formatMessage({
+            id: 'system.logininfor.login_location',
+            defaultMessage: '登录地点',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入登录地点"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入登录地点！" defaultMessage="请输入登录地点！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="browser"
+          label={intl.formatMessage({
+            id: 'system.logininfor.browser',
+            defaultMessage: '浏览器类型',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入浏览器类型"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入浏览器类型！" defaultMessage="请输入浏览器类型！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="os"
+          label={intl.formatMessage({
+            id: 'system.logininfor.os',
+            defaultMessage: '操作系统',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入操作系统"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入操作系统！" defaultMessage="请输入操作系统！" />,                  
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.logininfor.status',
+            defaultMessage: '登录状态',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入登录状态"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入登录状态！" defaultMessage="请输入登录状态！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="msg"
+          label={intl.formatMessage({
+            id: 'system.logininfor.msg',
+            defaultMessage: '提示消息',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入提示消息"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入提示消息！" defaultMessage="请输入提示消息！" />,                  
+            },
+          ]}
+        />
+        <ProFormTimePicker
+          name="loginTime"
+          label={intl.formatMessage({
+            id: 'system.logininfor.login_time',
+            defaultMessage: '访问时间',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入访问时间"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入访问时间！" defaultMessage="请输入访问时间！" />,                  
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default LogininforForm;
diff --git a/react-ui/src/pages/System/Logininfor/index.tsx b/react-ui/src/pages/System/Logininfor/index.tsx
new file mode 100644
index 0000000..ee5c1e5
--- /dev/null
+++ b/react-ui/src/pages/System/Logininfor/index.tsx
@@ -0,0 +1,321 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, UnlockOutlined } from '@ant-design/icons';
+import { getLogininforList, removeLogininfor, exportLogininfor, unlockLogininfor, cleanLogininfor } from '@/services/monitor/logininfor';
+import DictTag from '@/components/DictTag';
+import { getDictValueEnum } from '@/services/system/dict';
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.Monitor.Logininfor[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeLogininfor(selectedRows.map((row) => row.infoId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleClean = async () => {
+  const hide = message.loading('请稍候');
+  try {
+    const resp = await cleanLogininfor();
+    hide();
+    if (resp.code === 200) {
+      message.success('清空成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('请求失败，请重试');
+    return false;
+  }
+};
+
+const handleUnlock = async (userName: string) => {
+  const hide = message.loading('正在解锁');
+  try {
+    const resp = await unlockLogininfor(userName);
+    hide();
+    if (resp.code === 200) {
+      message.success('解锁成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('解锁失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 导出数据
+ *
+ * @param id
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportLogininfor();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+
+const LogininforTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const actionRef = useRef<ActionType>();
+  const [selectedRows, setSelectedRows] = useState<API.Monitor.Logininfor[]>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_common_status', true).then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.Monitor.Logininfor>[] = [
+    {
+      title: <FormattedMessage id="monitor.logininfor.info_id" defaultMessage="访问编号" />,
+      dataIndex: 'infoId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.user_name" defaultMessage="用户账号" />,
+      dataIndex: 'userName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.ipaddr" defaultMessage="登录IP地址" />,
+      dataIndex: 'ipaddr',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.login_location" defaultMessage="登录地点" />,
+      dataIndex: 'loginLocation',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.browser" defaultMessage="浏览器类型" />,
+      dataIndex: 'browser',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.os" defaultMessage="操作系统" />,
+      dataIndex: 'os',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.status" defaultMessage="登录状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.msg" defaultMessage="提示消息" />,
+      dataIndex: 'msg',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.logininfor.login_time" defaultMessage="访问时间" />,
+      dataIndex: 'loginTime',
+      valueType: 'dateTime',
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.Monitor.Logininfor>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="infoId"
+          key="logininforList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('monitor:logininfor:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+            <Button
+              type="primary"
+              key="clean"
+              danger
+              hidden={!access.hasPerms('monitor:logininfor:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认清空所有数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleClean();
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.cleanAll" defaultMessage="清空" />
+            </Button>,
+            <Button
+              type="primary"
+              key="unlock"
+              hidden={selectedRows?.length === 0 || !access.hasPerms('monitor:logininfor:unlock')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认解锁该用户的数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleUnlock(selectedRows[0].userName);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <UnlockOutlined />
+              <FormattedMessage id="monitor.logininfor.unlock" defaultMessage="解锁" />
+            </Button>,
+            <Button
+              type="primary"
+              key="export"
+              hidden={!access.hasPerms('monitor:logininfor:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getLogininforList({ ...params } as API.Monitor.LogininforListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('monitor:logininfor:remove')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+    </PageContainer>
+  );
+};
+
+export default LogininforTableList;
diff --git a/react-ui/src/pages/System/Menu/edit.tsx b/react-ui/src/pages/System/Menu/edit.tsx
new file mode 100644
index 0000000..e094255
--- /dev/null
+++ b/react-ui/src/pages/System/Menu/edit.tsx
@@ -0,0 +1,386 @@
+import React, { useEffect, useState } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormRadio,
+  ProFormTreeSelect,
+  ProFormSelect,
+} from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DataNode } from 'antd/es/tree';
+import { createIcon } from '@/utils/IconUtil';
+import { DictValueEnumObj } from '@/components/DictTag';
+import IconSelector from '@/components/IconSelector';
+
+export type MenuFormData = Record<string, unknown> & Partial<API.System.Menu>;
+
+export type MenuFormProps = {
+  onCancel: (flag?: boolean, formVals?: MenuFormData) => void;
+  onSubmit: (values: MenuFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.Menu>;
+  visibleOptions: DictValueEnumObj;
+  statusOptions: DictValueEnumObj;
+  menuTree: DataNode[];
+};
+
+const MenuForm: React.FC<MenuFormProps> = (props) => {
+
+  const [form] = Form.useForm();
+
+  const [menuTypeId, setMenuTypeId] = useState<any>('M');
+  const [menuIconName, setMenuIconName] = useState<any>();
+  const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);
+
+  const { menuTree, visibleOptions, statusOptions } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    setMenuIconName(props.values.icon);
+    form.setFieldsValue({
+      menuId: props.values.menuId,
+      menuName: props.values.menuName,
+      parentId: props.values.parentId,
+      orderNum: props.values.orderNum,
+      path: props.values.path,
+      component: props.values.component,
+      query: props.values.query,
+      isFrame: props.values.isFrame,
+      isCache: props.values.isCache,
+      menuType: props.values.menuType,
+      visible: props.values.visible,
+      status: props.values.status,
+      perms: props.values.perms,
+      icon: props.values.icon,
+      createBy: props.values.createBy,
+      createTime: props.values.createTime,
+      updateBy: props.values.updateBy,
+      updateTime: props.values.updateTime,
+      remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as MenuFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.menu.title',
+        defaultMessage: '编辑菜单权限',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProForm
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal"
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="menuId"
+          label={intl.formatMessage({
+            id: 'system.menu.menu_id',
+            defaultMessage: '菜单编号',
+          })}
+          placeholder="请输入菜单编号"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入菜单编号！" defaultMessage="请输入菜单编号！" />,
+            },
+          ]}
+        />
+        <ProFormTreeSelect
+          name="parentId"
+          label={intl.formatMessage({
+            id: 'system.menu.parent_id',
+            defaultMessage: '上级菜单',
+          })}
+          params={{menuTree}}
+          request={async () => {
+            return menuTree;
+          }}
+          placeholder="请输入父菜单编号"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入父菜单编号！" defaultMessage="请输入父菜单编号！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: 0
+          }}
+        />
+        <ProFormRadio.Group
+          name="menuType"
+          valueEnum={{
+            M: '目录',
+            C: '菜单',
+            F: '按钮',
+          }}
+          label={intl.formatMessage({
+            id: 'system.menu.menu_type',
+            defaultMessage: '菜单类型',
+          })}
+          placeholder="请输入菜单类型"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入菜单类型！" defaultMessage="请输入菜单类型！" />,
+            },
+          ]}
+          fieldProps={{
+            defaultValue: 'M',
+            onChange: (e) => {
+              setMenuTypeId(e.target.value);
+            },
+          }}
+        />
+        <ProFormSelect
+          name="icon"
+          label={intl.formatMessage({
+            id: 'system.menu.icon',
+            defaultMessage: '菜单图标',
+          })}
+          valueEnum={{}}
+          hidden={menuTypeId === 'F'}
+          addonBefore={createIcon(menuIconName)}
+          fieldProps={{
+            onClick: () => {
+              setIconSelectorOpen(true);
+            },
+          }}
+          placeholder="请输入菜单图标"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入菜单图标！" defaultMessage="请输入菜单图标！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="menuName"
+          label={intl.formatMessage({
+            id: 'system.menu.menu_name',
+            defaultMessage: '菜单名称',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入菜单名称"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入菜单名称！" defaultMessage="请输入菜单名称！" />,
+            },
+          ]}
+        />
+        <ProFormDigit
+          name="orderNum"
+          label={intl.formatMessage({
+            id: 'system.menu.order_num',
+            defaultMessage: '显示顺序',
+          })}
+          width="lg"
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入显示顺序"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入显示顺序！" defaultMessage="请输入显示顺序！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: 1
+          }}
+        />
+        <ProFormRadio.Group
+          name="isFrame"
+          valueEnum={{
+            0: '是',
+            1: '否',
+          }}
+          initialValue="1"
+          label={intl.formatMessage({
+            id: 'system.menu.is_frame',
+            defaultMessage: '是否为外链',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入是否为外链"
+          hidden={menuTypeId === 'F'}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入是否为外链！" defaultMessage="请输入是否为外链！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: '1'
+          }}
+        />
+        <ProFormText
+          name="path"
+          label={intl.formatMessage({
+            id: 'system.menu.path',
+            defaultMessage: '路由地址',
+          })}
+          width="lg"
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入路由地址"
+          hidden={menuTypeId === 'F'}
+          rules={[
+            {
+              required: menuTypeId !== 'F',
+              message: <FormattedMessage id="请输入路由地址！" defaultMessage="请输入路由地址！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="component"
+          label={intl.formatMessage({
+            id: 'system.menu.component',
+            defaultMessage: '组件路径',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入组件路径"
+          hidden={menuTypeId !== 'C'}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入组件路径！" defaultMessage="请输入组件路径！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="query"
+          label={intl.formatMessage({
+            id: 'system.menu.query',
+            defaultMessage: '路由参数',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入路由参数"
+          hidden={menuTypeId !== 'C'}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入路由参数！" defaultMessage="请输入路由参数！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="perms"
+          label={intl.formatMessage({
+            id: 'system.menu.perms',
+            defaultMessage: '权限标识',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入权限标识"
+          hidden={menuTypeId === 'M'}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入权限标识！" defaultMessage="请输入权限标识！" />,
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          name="isCache"
+          valueEnum={{
+            0: '缓存',
+            1: '不缓存',
+          }}
+          label={intl.formatMessage({
+            id: 'system.menu.is_cache',
+            defaultMessage: '是否缓存',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入是否缓存"
+          hidden={menuTypeId !== 'C'}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入是否缓存！" defaultMessage="请输入是否缓存！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: 0
+          }}
+        />
+        <ProFormRadio.Group
+          name="visible"
+          valueEnum={visibleOptions}
+          label={intl.formatMessage({
+            id: 'system.menu.visible',
+            defaultMessage: '显示状态',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入显示状态"
+          hidden={menuTypeId === 'F'}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入显示状态！" defaultMessage="请输入显示状态！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: '0'
+          }}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.menu.status',
+            defaultMessage: '菜单状态',
+          })}
+          colProps={{ md: 12, xl: 12 }}
+          placeholder="请输入菜单状态"
+          hidden={menuTypeId === 'F'}
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入菜单状态！" defaultMessage="请输入菜单状态！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: '0'
+          }}
+        />
+      </ProForm>
+      <Modal
+        width={800}
+        open={iconSelectorOpen}
+        onCancel={() => {
+          setIconSelectorOpen(false);
+        }}
+        footer={null}
+      >
+        <IconSelector
+          onSelect={(name: string) => {
+            form.setFieldsValue({ icon: name });
+            setMenuIconName(name);
+            setIconSelectorOpen(false);
+          }}
+        />
+      </Modal>
+    </Modal>
+  );
+};
+
+export default MenuForm;
diff --git a/react-ui/src/pages/System/Menu/index.tsx b/react-ui/src/pages/System/Menu/index.tsx
new file mode 100644
index 0000000..95ca2de
--- /dev/null
+++ b/react-ui/src/pages/System/Menu/index.tsx
@@ -0,0 +1,339 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { getMenuList, removeMenu, addMenu, updateMenu } from '@/services/system/menu';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import { buildTreeData } from '@/utils/tree';
+import { DataNode } from 'antd/es/tree';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.Menu) => {
+  const hide = message.loading('正在添加');
+  try {
+    await addMenu({ ...fields });
+    hide();
+    message.success('添加成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.Menu) => {
+  const hide = message.loading('正在配置');
+  try {
+    await updateMenu(fields);
+    hide();
+    message.success('配置成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.Menu[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    await removeMenu(selectedRows.map((row) => row.menuId).join(','));
+    hide();
+    message.success('删除成功，即将刷新');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.Menu) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.menuId];
+    await removeMenu(params.join(','));
+    hide();
+    message.success('删除成功，即将刷新');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+
+const MenuTableList: React.FC = () => {
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.Menu>();
+  const [selectedRows, setSelectedRows] = useState<API.System.Menu[]>([]);
+
+  const [menuTree, setMenuTree] = useState<DataNode[]>([]);
+  const [visibleOptions, setVisibleOptions] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_show_hide').then((data) => {
+      setVisibleOptions(data);
+    });
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.System.Menu>[] = [
+    {
+      title: <FormattedMessage id="system.menu.menu_name" defaultMessage="菜单名称" />,
+      dataIndex: 'menuName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.menu.icon" defaultMessage="菜单图标" />,
+      dataIndex: 'icon',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.menu.order_num" defaultMessage="显示顺序" />,
+      dataIndex: 'orderNum',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.menu.component" defaultMessage="组件路径" />,
+      dataIndex: 'component',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.menu.perms" defaultMessage="权限标识" />,
+      dataIndex: 'perms',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.menu.status" defaultMessage="菜单状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '220px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:menu:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('system:menu:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.Menu>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          rowKey="menuId"
+          key="menuList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:menu:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:menu:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() {},
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getMenuList({ ...params } as API.System.MenuListParams).then((res) => {
+              const rootMenu = { id: 0, label: '主类目', children: [] as DataNode[], value: 0 };
+              const memuData = buildTreeData(res.data, 'menuId', 'menuName', '', '', '');
+              rootMenu.children = memuData;
+              const treeData: any = [];
+              treeData.push(rootMenu);
+              setMenuTree(treeData);
+              return {
+                data: memuData,
+                total: res.data.length,
+                success: true,
+              };
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:menu:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.menuId) {
+            success = await handleUpdate({ ...values } as API.System.Menu);
+          } else {
+            success = await handleAdd({ ...values } as API.System.Menu);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        visibleOptions={visibleOptions}
+        statusOptions={statusOptions}
+        menuTree={menuTree}
+      />
+    </PageContainer>
+  );
+};
+
+export default MenuTableList;
diff --git a/react-ui/src/pages/System/Notice/edit.tsx b/react-ui/src/pages/System/Notice/edit.tsx
new file mode 100644
index 0000000..0b111ce
--- /dev/null
+++ b/react-ui/src/pages/System/Notice/edit.tsx
@@ -0,0 +1,174 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormSelect,
+  ProFormTextArea,
+  ProFormRadio,
+  } from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type NoticeFormData = Record<string, unknown> & Partial<API.System.Notice>;
+
+export type NoticeFormProps = {
+  onCancel: (flag?: boolean, formVals?: NoticeFormData) => void;
+  onSubmit: (values: NoticeFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.Notice>;
+  noticeTypeOptions: DictValueEnumObj;
+  statusOptions: DictValueEnumObj;
+};
+
+const NoticeForm: React.FC<NoticeFormProps> = (props) => {
+  const [form] = Form.useForm();
+  
+  const { noticeTypeOptions,statusOptions, } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+			noticeId: props.values.noticeId,
+			noticeTitle: props.values.noticeTitle,
+			noticeType: props.values.noticeType,
+			noticeContent: props.values.noticeContent,
+			status: props.values.status,
+			createBy: props.values.createBy,
+			createTime: props.values.createTime,
+			updateBy: props.values.updateBy,
+			updateTime: props.values.updateTime,
+			remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as NoticeFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.notice.title',
+        defaultMessage: '编辑通知公告',
+      })}
+      forceRender
+      open={props.open}
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+		  <ProForm 
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal" 
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="noticeId"
+          label={intl.formatMessage({
+            id: 'system.notice.notice_id',
+            defaultMessage: '公告编号',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入公告编号"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入公告编号！" defaultMessage="请输入公告编号！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="noticeTitle"
+          label={intl.formatMessage({
+            id: 'system.notice.notice_title',
+            defaultMessage: '公告标题',
+          })}
+          placeholder="请输入公告标题"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入公告标题！" defaultMessage="请输入公告标题！" />,                  
+            },
+          ]}
+        />
+        <ProFormSelect
+          valueEnum={noticeTypeOptions}
+          name="noticeType"
+          label={intl.formatMessage({
+            id: 'system.notice.notice_type',
+            defaultMessage: '公告类型',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入公告类型"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入公告类型！" defaultMessage="请输入公告类型！" />,                  
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.notice.status',
+            defaultMessage: '公告状态',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入公告状态"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入公告状态！" defaultMessage="请输入公告状态！" />,                  
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="noticeContent"
+          label={intl.formatMessage({
+            id: 'system.notice.notice_content',
+            defaultMessage: '公告内容',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入公告内容"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入公告内容！" defaultMessage="请输入公告内容！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="remark"
+          label={intl.formatMessage({
+            id: 'system.notice.remark',
+            defaultMessage: '备注',
+          })}
+          colProps={{ md: 12, xl: 24 }}
+          placeholder="请输入备注"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,                  
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default NoticeForm;
diff --git a/react-ui/src/pages/System/Notice/index.tsx b/react-ui/src/pages/System/Notice/index.tsx
new file mode 100644
index 0000000..ea5b063
--- /dev/null
+++ b/react-ui/src/pages/System/Notice/index.tsx
@@ -0,0 +1,366 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { getNoticeList, removeNotice, addNotice, updateNotice } from '@/services/system/notice';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.Notice) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addNotice({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.Notice) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateNotice(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.Notice[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeNotice(selectedRows.map((row) => row.noticeId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.Notice) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.noticeId];
+    const resp = await removeNotice(params.join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+
+
+const NoticeTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.Notice>();
+  const [selectedRows, setSelectedRows] = useState<API.System.Notice[]>([]);
+
+  const [noticeTypeOptions, setNoticeTypeOptions] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_notice_type').then((data) => {
+      setNoticeTypeOptions(data);
+    });
+    getDictValueEnum('sys_notice_status').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.System.Notice>[] = [
+    {
+      title: <FormattedMessage id="system.notice.notice_id" defaultMessage="公告编号" />,
+      dataIndex: 'noticeId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.notice.notice_title" defaultMessage="公告标题" />,
+      dataIndex: 'noticeTitle',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.notice.notice_type" defaultMessage="公告类型" />,
+      dataIndex: 'noticeType',
+      valueType: 'select',
+      valueEnum: noticeTypeOptions,
+    },
+    {
+      title: <FormattedMessage id="system.notice.notice_content" defaultMessage="公告内容" />,
+      dataIndex: 'noticeContent',
+      valueType: 'text',
+      hideInTable: true,
+    },
+    {
+      title: <FormattedMessage id="system.notice.status" defaultMessage="公告状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="system.notice.remark" defaultMessage="备注" />,
+      dataIndex: 'remark',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.notice.create_time" defaultMessage="创建时间" />,
+      dataIndex: 'createTime',
+      valueType: 'dateRange',
+      render: (_, record) => {
+        return (<span>{record.createTime.toString()} </span>);
+      },
+      search: {
+        transform: (value) => {
+          return {
+            'params[beginTime]': value[0],
+            'params[endTime]': value[1],
+          };
+        },
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '120px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:notice:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('system:notice:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.Notice>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="noticeId"
+          key="noticeList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:notice:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:notice:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() {},
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getNoticeList({ ...params } as API.System.NoticeListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:notice:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.noticeId) {
+            success = await handleUpdate({ ...values } as API.System.Notice);
+          } else {
+            success = await handleAdd({ ...values } as API.System.Notice);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        noticeTypeOptions={noticeTypeOptions}
+        statusOptions={statusOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default NoticeTableList;
diff --git a/react-ui/src/pages/System/Operlog/detail.tsx b/react-ui/src/pages/System/Operlog/detail.tsx
new file mode 100644
index 0000000..f5b4f65
--- /dev/null
+++ b/react-ui/src/pages/System/Operlog/detail.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { Descriptions, Modal } from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictValueEnumObj } from '@/components/DictTag';
+import { getValueEnumLabel } from '@/utils/options';
+
+export type OperlogFormData = Record<string, unknown> & Partial<API.Monitor.Operlog>;
+
+export type OperlogFormProps = {
+  onCancel: (flag?: boolean, formVals?: OperlogFormData) => void;
+  onSubmit: (values: OperlogFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.Monitor.Operlog>;
+  businessTypeOptions: DictValueEnumObj;
+  operatorTypeOptions: DictValueEnumObj;
+  statusOptions: DictValueEnumObj;
+};
+
+const OperlogDetailForm: React.FC<OperlogFormProps> = (props) => {
+
+  const { values, businessTypeOptions, operatorTypeOptions, statusOptions, } = props;
+
+  const intl = useIntl();
+  const handleOk = () => {
+    console.log("handle ok");
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'monitor.operlog.title',
+        defaultMessage: '编辑操作日志记录',
+      })}
+      open={props.open}
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <Descriptions column={24}>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.operlog.module" defaultMessage="操作模块" />}
+        >
+          {`${values.title}/${getValueEnumLabel(businessTypeOptions, values.businessType)}`}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.operlog.request_method" defaultMessage="请求方式" />}
+        >
+          {values.requestMethod}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.operlog.oper_name" defaultMessage="操作人员" />}
+        >
+          {`${values.operName}/${values.operIp}`}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.operlog.operator_type" defaultMessage="操作类别" />}
+        >
+          {getValueEnumLabel(operatorTypeOptions, values.operatorType)}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.operlog.method" defaultMessage="方法名称" />}
+        >
+          {values.method}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.operlog.oper_url" defaultMessage="请求URL" />}
+        >
+          {values.operUrl}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.operlog.oper_param" defaultMessage="请求参数" />}
+        >
+          {values.operParam}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.operlog.json_result" defaultMessage="返回参数" />}
+        >
+          {values.jsonResult}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.operlog.error_msg" defaultMessage="错误消息" />}
+        >
+          {values.errorMsg}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.operlog.status" defaultMessage="操作状态" />}
+        >
+          {getValueEnumLabel(statusOptions, values.status)}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.operlog.oper_time" defaultMessage="操作时间" />}
+        >
+          {values.operTime?.toString()}
+        </Descriptions.Item>
+      </Descriptions>
+    </Modal>
+  );
+};
+
+export default OperlogDetailForm;
diff --git a/react-ui/src/pages/System/Operlog/index.tsx b/react-ui/src/pages/System/Operlog/index.tsx
new file mode 100644
index 0000000..be46709
--- /dev/null
+++ b/react-ui/src/pages/System/Operlog/index.tsx
@@ -0,0 +1,411 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { getOperlogList, removeOperlog, addOperlog, updateOperlog, cleanAllOperlog, exportOperlog } from '@/services/monitor/operlog';
+import UpdateForm from './detail';
+import { getDictValueEnum } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.Monitor.Operlog) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addOperlog({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.Monitor.Operlog) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateOperlog(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.Monitor.Operlog[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeOperlog(selectedRows.map((row) => row.operId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 清空所有记录
+ *
+ */
+const handleCleanAll = async () => {
+  const hide = message.loading('正在清空');
+  try {
+    const resp = await cleanAllOperlog();
+    hide();
+    if (resp.code === 200) {
+      message.success('清空成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('清空失败，请重试');
+    return false;
+  }
+};
+
+
+/**
+ * 导出数据
+ *
+ *
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportOperlog();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+
+const OperlogTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.Monitor.Operlog>();
+  const [selectedRows, setSelectedRows] = useState<API.Monitor.Operlog[]>([]);
+
+  const [businessTypeOptions, setBusinessTypeOptions] = useState<any>([]);
+  const [operatorTypeOptions, setOperatorTypeOptions] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_oper_type', true).then((data) => {
+      setBusinessTypeOptions(data);
+    });
+    getDictValueEnum('sys_oper_type', true).then((data) => {
+      setOperatorTypeOptions(data);
+    });
+    getDictValueEnum('sys_common_status', true).then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.Monitor.Operlog>[] = [
+    {
+      title: <FormattedMessage id="monitor.operlog.oper_id" defaultMessage="日志主键" />,
+      dataIndex: 'operId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.title" defaultMessage="操作模块" />,
+      dataIndex: 'title',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.business_type" defaultMessage="业务类型" />,
+      dataIndex: 'businessType',
+      valueType: 'select',
+      valueEnum: businessTypeOptions,
+      render: (_, record) => {
+        return (<DictTag enums={businessTypeOptions} value={record.businessType} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.request_method" defaultMessage="请求方式" />,
+      dataIndex: 'requestMethod',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.operator_type" defaultMessage="操作类别" />,
+      dataIndex: 'operatorType',
+      valueType: 'select',
+      valueEnum: operatorTypeOptions,
+      render: (_, record) => {
+        return (<DictTag enums={operatorTypeOptions} value={record.operatorType} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.oper_name" defaultMessage="操作人员" />,
+      dataIndex: 'operName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.oper_ip" defaultMessage="主机地址" />,
+      dataIndex: 'operIp',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.oper_location" defaultMessage="操作地点" />,
+      dataIndex: 'operLocation',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.status" defaultMessage="操作状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag key="status" enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="monitor.operlog.oper_time" defaultMessage="操作时间" />,
+      dataIndex: 'operTime',
+      valueType: 'dateTime',
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '120px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:operlog:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          详细
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.Monitor.Operlog>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="operId"
+          key="operlogList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:operlog:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:operlog:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+            <Button
+              type="primary"
+              key="clean"
+              danger
+              hidden={!access.hasPerms('system:operlog:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认清空所有数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleCleanAll();
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.cleanAll" defaultMessage="清空" />
+            </Button>,
+            <Button
+              type="primary"
+              key="export"
+              hidden={!access.hasPerms('system:operlog:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getOperlogList({ ...params } as API.Monitor.OperlogListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:operlog:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.operId) {
+            success = await handleUpdate({ ...values } as API.Monitor.Operlog);
+          } else {
+            success = await handleAdd({ ...values } as API.Monitor.Operlog);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        businessTypeOptions={businessTypeOptions}
+        operatorTypeOptions={operatorTypeOptions}
+        statusOptions={statusOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default OperlogTableList;
diff --git a/react-ui/src/pages/System/Post/edit.tsx b/react-ui/src/pages/System/Post/edit.tsx
new file mode 100644
index 0000000..555fcde
--- /dev/null
+++ b/react-ui/src/pages/System/Post/edit.tsx
@@ -0,0 +1,166 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormRadio,
+  ProFormTextArea,
+  } from '@ant-design/pro-components';
+import { Form, Modal} from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type PostFormData = Record<string, unknown> & Partial<API.System.Post>;
+
+export type PostFormProps = {
+  onCancel: (flag?: boolean, formVals?: PostFormData) => void;
+  onSubmit: (values: PostFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.Post>;
+  statusOptions: DictValueEnumObj;
+};
+
+const PostForm: React.FC<PostFormProps> = (props) => {
+  const [form] = Form.useForm();
+
+  const { statusOptions, } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+			postId: props.values.postId,
+			postCode: props.values.postCode,
+			postName: props.values.postName,
+			postSort: props.values.postSort,
+			status: props.values.status,
+			createBy: props.values.createBy,
+			createTime: props.values.createTime,
+			updateBy: props.values.updateBy,
+			updateTime: props.values.updateTime,
+			remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as PostFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.post.title',
+        defaultMessage: '编辑岗位信息',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+		  <ProForm 
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal" 
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="postId"
+          label={intl.formatMessage({
+            id: 'system.post.post_id',
+            defaultMessage: '岗位编号',
+          })}
+          placeholder="请输入岗位编号"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入岗位编号！" defaultMessage="请输入岗位编号！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="postName"
+          label={intl.formatMessage({
+            id: 'system.post.post_name',
+            defaultMessage: '岗位名称',
+          })}
+          placeholder="请输入岗位名称"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入岗位名称！" defaultMessage="请输入岗位名称！" />,                  
+            },
+          ]}
+        />
+        <ProFormText
+          name="postCode"
+          label={intl.formatMessage({
+            id: 'system.post.post_code',
+            defaultMessage: '岗位编码',
+          })}
+          placeholder="请输入岗位编码"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入岗位编码！" defaultMessage="请输入岗位编码！" />,                  
+            },
+          ]}
+        />
+        <ProFormDigit
+          name="postSort"
+          label={intl.formatMessage({
+            id: 'system.post.post_sort',
+            defaultMessage: '显示顺序',
+          })}
+          placeholder="请输入显示顺序"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入显示顺序！" defaultMessage="请输入显示顺序！" />,                  
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.post.status',
+            defaultMessage: '状态',
+          })}
+          placeholder="请输入状态"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入状态！" defaultMessage="请输入状态！" />,                  
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="remark"
+          label={intl.formatMessage({
+            id: 'system.post.remark',
+            defaultMessage: '备注',
+          })}
+          placeholder="请输入备注"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,                  
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default PostForm;
diff --git a/react-ui/src/pages/System/Post/index.tsx b/react-ui/src/pages/System/Post/index.tsx
new file mode 100644
index 0000000..ad98aae
--- /dev/null
+++ b/react-ui/src/pages/System/Post/index.tsx
@@ -0,0 +1,366 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { getPostList, removePost, addPost, updatePost, exportPost } from '@/services/system/post';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.Post) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addPost({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.Post) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updatePost(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.Post[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removePost(selectedRows.map((row) => row.postId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.Post) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.postId];
+    const resp = await removePost(params.join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 导出数据
+ *
+ *
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportPost();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+
+const PostTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.Post>();
+  const [selectedRows, setSelectedRows] = useState<API.System.Post[]>([]);
+
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.System.Post>[] = [
+    {
+      title: <FormattedMessage id="system.post.post_id" defaultMessage="岗位编号" />,
+      dataIndex: 'postId',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.post.post_code" defaultMessage="岗位编码" />,
+      dataIndex: 'postCode',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.post.post_name" defaultMessage="岗位名称" />,
+      dataIndex: 'postName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.post.post_sort" defaultMessage="显示顺序" />,
+      dataIndex: 'postSort',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.post.status" defaultMessage="状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '220px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          hidden={!access.hasPerms('system:post:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('system:post:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.Post>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="postId"
+          key="postList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:post:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:post:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() {},
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+            <Button
+              type="primary"
+              key="export"
+              hidden={!access.hasPerms('system:post:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getPostList({ ...params } as API.System.PostListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:post:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.postId) {
+            success = await handleUpdate({ ...values } as API.System.Post);
+          } else {
+            success = await handleAdd({ ...values } as API.System.Post);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        statusOptions={statusOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default PostTableList;
diff --git a/react-ui/src/pages/System/Role/authUser.tsx b/react-ui/src/pages/System/Role/authUser.tsx
new file mode 100644
index 0000000..c553d99
--- /dev/null
+++ b/react-ui/src/pages/System/Role/authUser.tsx
@@ -0,0 +1,274 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess, history, useParams } from '@umijs/max';
+import { Button, Modal, message } from 'antd';
+import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, RollbackOutlined } from '@ant-design/icons';
+import { authUserSelectAll, authUserCancel, authUserCancelAll, allocatedUserList, unallocatedUserList } from '@/services/system/role';
+import { getDictValueEnum } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+import UserSelectorModal from './components/UserSelectorModal';
+import { HttpResult } from '@/enums/httpEnum';
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const cancelAuthUserAll = async (roleId: string, selectedRows: API.System.User[]) => {
+	const hide = message.loading('正在取消授权');
+	if (!selectedRows) return true;
+	try {
+		const userIds = selectedRows.map((row) => row.userId).join(',');
+		const resp = await authUserCancelAll({roleId, userIds});
+		hide();
+		if (resp.code === 200) {
+			message.success('取消授权成功，即将刷新');
+		} else {
+			message.error(resp.msg);
+		}
+		return true;
+	} catch (error) {
+		hide();
+		message.error('取消授权失败，请重试');
+		return false;
+	}
+};
+
+const cancelAuthUser = async (roleId: string, userId: number) => {
+	const hide = message.loading('正在取消授权');
+	try {
+		const resp = await authUserCancel({ userId, roleId });
+		hide();
+		if (resp.code === 200) {
+			message.success('取消授权成功，即将刷新');
+		} else {
+			message.error(resp.msg);
+		}
+		return true;
+	} catch (error) {
+		hide();
+		message.error('取消授权失败，请重试');
+		return false;
+	}
+};
+
+
+const AuthUserTableList: React.FC = () => {
+
+	const [modalVisible, setModalVisible] = useState<boolean>(false);
+
+	const actionRef = useRef<ActionType>();
+	const [selectedRows, setSelectedRows] = useState<API.System.User[]>([]);
+	const [statusOptions, setStatusOptions] = useState<any>([]);
+
+	const access = useAccess();
+
+	/** 国际化配置 */
+	const intl = useIntl();
+
+	const params = useParams();
+	if (params.id === undefined) {
+		history.back();
+	}
+	const roleId = params.id || '0';
+
+	useEffect(() => {
+		getDictValueEnum('sys_normal_disable').then((data) => {
+			setStatusOptions(data);
+		});
+	}, []);
+
+	const columns: ProColumns<API.System.User>[] = [
+		{
+			title: <FormattedMessage id="system.user.user_id" defaultMessage="用户编号" />,
+			dataIndex: 'deptId',
+			valueType: 'text',
+		},
+		{
+			title: <FormattedMessage id="system.user.user_name" defaultMessage="用户账号" />,
+			dataIndex: 'userName',
+			valueType: 'text',
+		},
+		{
+			title: <FormattedMessage id="system.user.nick_name" defaultMessage="用户昵称" />,
+			dataIndex: 'nickName',
+			valueType: 'text',
+		},
+		{
+			title: <FormattedMessage id="system.user.phonenumber" defaultMessage="手机号码" />,
+			dataIndex: 'phonenumber',
+			valueType: 'text',
+		},
+		{
+			title: <FormattedMessage id="system.role.create_time" defaultMessage="创建时间" />,
+			dataIndex: 'createTime',
+			valueType: 'dateRange',
+			render: (_, record) => {
+				return (<span>{record.createTime.toString()} </span>);
+			},
+			hideInSearch: true,
+		},
+		{
+			title: <FormattedMessage id="system.user.status" defaultMessage="帐号状态" />,
+			dataIndex: 'status',
+			valueType: 'select',
+			valueEnum: statusOptions,
+			render: (_, record) => {
+				return (<DictTag enums={statusOptions} value={record.status} />);
+			},
+		},
+		{
+			title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+			dataIndex: 'option',
+			width: '60px',
+			valueType: 'option',
+			render: (_, record) => [
+				<Button
+					type="link"
+					size="small"
+					danger
+					icon={<DeleteOutlined />}
+					key="remove"
+					hidden={!access.hasPerms('system:role:remove')}
+					onClick={async () => {
+						Modal.confirm({
+							title: '删除',
+							content: '确认要取消该用户' + record.userName + '"角色授权吗？',
+							okText: '确认',
+							cancelText: '取消',
+							onOk: async () => {
+								const success = await cancelAuthUser(roleId, record.userId);
+								if (success) {
+									if (actionRef.current) {
+										actionRef.current.reload();
+									}
+								}
+							},
+						});
+					}}
+				>
+					取消授权
+				</Button>,
+			],
+		},
+	];
+
+	return (
+		<PageContainer>
+			<div style={{ width: '100%', float: 'right' }}>
+				<ProTable<API.System.User>
+					headerTitle={intl.formatMessage({
+						id: 'pages.searchTable.title',
+						defaultMessage: '信息',
+					})}
+					actionRef={actionRef}
+					rowKey="userId"
+					key="userList"
+					search={{
+						labelWidth: 120,
+					}}
+					toolBarRender={() => [
+						<Button
+							type="primary"
+							key="add"
+							hidden={!access.hasPerms('system:role:add')}
+							onClick={async () => {
+								setModalVisible(true);
+							}}
+						>
+							<PlusOutlined /> <FormattedMessage id="system.role.auth.addUser" defaultMessage="添加用户" />
+						</Button>,
+						<Button
+							type="primary"
+							key="remove"
+              danger
+							hidden={selectedRows?.length === 0 || !access.hasPerms('system:role:remove')}
+							onClick={async () => {
+								Modal.confirm({
+									title: '是否确认删除所选数据项?',
+									icon: <ExclamationCircleOutlined />,
+									content: '请谨慎操作',
+									async onOk() {
+										const success = await cancelAuthUserAll(roleId, selectedRows);
+										if (success) {
+											setSelectedRows([]);
+											actionRef.current?.reloadAndRest?.();
+										}
+									},
+									onCancel() { },
+								});
+							}}
+						>
+							<DeleteOutlined />
+							<FormattedMessage id="system.role.auth.cancelAll" defaultMessage="批量取消授权" />
+						</Button>,
+						<Button
+							type="primary"
+							key="back"
+							onClick={async () => {
+								history.back();
+							}}
+						>
+							<RollbackOutlined />
+							<FormattedMessage id="pages.goback" defaultMessage="返回" />
+						</Button>,
+					]}
+					request={(params) =>
+						allocatedUserList({ ...params, roleId } as API.System.RoleListParams).then((res) => {
+							const result = {
+								data: res.rows,
+								total: res.total,
+								success: true,
+							};
+							return result;
+						})
+					}
+					columns={columns}
+					rowSelection={{
+						onChange: (_, selectedRows) => {
+							setSelectedRows(selectedRows);
+						},
+					}}
+				/>
+			</div>
+			<UserSelectorModal
+				open={modalVisible}
+				onSubmit={(values: React.Key[]) => {
+					const userIds = values.join(",");
+					if (userIds === "") {
+						message.warning("请选择要分配的用户");
+						return;
+					}
+					authUserSelectAll({ roleId: roleId, userIds: userIds }).then(resp => {
+						if (resp.code === HttpResult.SUCCESS) {
+							message.success('更新成功！');
+							if (actionRef.current) {
+								actionRef.current.reload();
+							}
+						} else {
+							message.warning(resp.msg);
+						}
+					})
+					setModalVisible(false);
+				}}
+				onCancel={() => {
+					setModalVisible(false);
+				}}
+				params={{roleId}}
+				request={(params) =>
+					unallocatedUserList({ ...params } as API.System.RoleListParams).then((res) => {
+						const result = {
+							data: res.rows,
+							total: res.rows.length,
+							success: true,
+						};
+						return result;
+					})
+				}
+			/>
+		</PageContainer>
+	);
+};
+
+export default AuthUserTableList;
diff --git a/react-ui/src/pages/System/Role/components/DataScope.tsx b/react-ui/src/pages/System/Role/components/DataScope.tsx
new file mode 100644
index 0000000..a3dcce0
--- /dev/null
+++ b/react-ui/src/pages/System/Role/components/DataScope.tsx
@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from 'react';
+import { Checkbox, Col, Form, Modal, Row, Tree } from 'antd';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Key, ProForm, ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-components';
+import { DataNode } from 'antd/es/tree';
+import { CheckboxValueType } from 'antd/es/checkbox/Group';
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/06
+ * 
+ * */
+
+export type FormValueType = any & Partial<API.System.Dept>;
+
+export type DataScopeFormProps = {
+    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
+    onSubmit: (values: FormValueType) => Promise<void>;
+    open: boolean;
+    values: Partial<API.System.Role>;
+    deptTree: DataNode[];
+    deptCheckedKeys: string[];
+};
+
+const DataScopeForm: React.FC<DataScopeFormProps> = (props) => {
+    const [form] = Form.useForm();
+
+    const { deptTree, deptCheckedKeys } = props;
+    const [dataScopeType, setDataScopeType] = useState<string | undefined>('1');
+    const [deptIds, setDeptIds] = useState<string[] | {checked: string[], halfChecked: string[]}>([]);
+    const [deptTreeExpandKey, setDeptTreeExpandKey] = useState<Key[]>([]);
+    const [checkStrictly, setCheckStrictly] = useState<boolean>(true);
+
+
+    useEffect(() => {
+        setDeptIds(deptCheckedKeys);
+        form.resetFields();
+        form.setFieldsValue({
+            roleId: props.values.roleId,
+            roleName: props.values.roleName,
+            roleKey: props.values.roleKey,
+            dataScope: props.values.dataScope,
+        });
+        setDataScopeType(props.values.dataScope);
+    }, [props.values]);
+
+    const intl = useIntl();
+    const handleOk = () => {
+        form.submit();
+    };
+    const handleCancel = () => {
+        props.onCancel();
+    };
+    const handleFinish = async (values: Record<string, any>) => {
+        props.onSubmit({ ...values, deptIds } as FormValueType);
+    };
+
+    const getAllDeptNode = (node: DataNode[]) => {
+        let keys: any[] = [];
+        node.forEach(value => {
+            keys.push(value.key);
+            if(value.children) {
+                keys = keys.concat(getAllDeptNode(value.children));
+            }
+        });
+        return keys;
+    }
+
+    const deptAllNodes = getAllDeptNode(deptTree);
+
+
+    const onDeptOptionChange = (checkedValues: CheckboxValueType[]) => {
+        if(checkedValues.includes('deptExpand')) {
+            setDeptTreeExpandKey(deptAllNodes);
+        } else {
+            setDeptTreeExpandKey([]);
+        }
+        if(checkedValues.includes('deptNodeAll')) {
+            setDeptIds(deptAllNodes);
+        } else {
+            setDeptIds([]);
+        }
+        
+        if(checkedValues.includes('deptCheckStrictly')) {
+            setCheckStrictly(false);
+        } else {
+            setCheckStrictly(true);
+        }
+    };
+
+    return (
+        <Modal
+            width={640}
+            title={intl.formatMessage({
+                id: 'system.user.auth.role',
+                defaultMessage: '分配角色',
+            })}
+            open={props.open}
+            destroyOnClose
+            forceRender
+            onOk={handleOk}
+            onCancel={handleCancel}
+        >
+            <ProForm
+                form={form}
+                grid={true}
+                layout="horizontal"
+                onFinish={handleFinish}
+                initialValues={{
+                    login_password: '',
+                    confirm_password: '',
+                }}
+            >
+
+                <ProFormDigit
+                    name="roleId"
+                    label={intl.formatMessage({
+                        id: 'system.role.role_id',
+                        defaultMessage: '角色编号',
+                    })}
+                    colProps={{ md: 12, xl: 12 }}
+                    placeholder="请输入角色编号"
+                    disabled
+                    hidden={true}
+                    rules={[
+                        {
+                            required: false,
+                            message: <FormattedMessage id="请输入角色编号！" defaultMessage="请输入角色编号！" />,
+                        },
+                    ]}
+                />
+                <ProFormText
+                    name="roleName"
+                    label={intl.formatMessage({
+                        id: 'system.role.role_name',
+                        defaultMessage: '角色名称',
+                    })}
+                    disabled
+                    placeholder="请输入角色名称"
+                    rules={[
+                        {
+                            required: true,
+                            message: <FormattedMessage id="请输入角色名称！" defaultMessage="请输入角色名称！" />,
+                        },
+                    ]}
+                />
+                <ProFormText
+                    name="roleKey"
+                    label={intl.formatMessage({
+                        id: 'system.role.role_key',
+                        defaultMessage: '权限字符串',
+                    })}
+                    disabled
+                    placeholder="请输入角色权限字符串"
+                    rules={[
+                        {
+                            required: true,
+                            message: <FormattedMessage id="请输入角色权限字符串！" defaultMessage="请输入角色权限字符串！" />,
+                        },
+                    ]}
+                />
+                <ProFormSelect
+                    name="dataScope"
+                    label='权限范围'
+                    initialValue={'1'}
+                    placeholder="请输入用户性别"
+                    valueEnum={{
+                        "1": "全部数据权限",
+                        "2": "自定数据权限",
+                        "3": "本部门数据权限",
+                        "4": "本部门及以下数据权限",
+                        "5": "仅本人数据权限"
+                    }}
+                    rules={[
+                        {
+                            required: true,
+                        },
+                    ]}
+                    fieldProps={{
+                        onChange: (value) => {
+                            setDataScopeType(value);
+                        },
+                    }}
+                />
+                <ProForm.Item
+                    name="deptIds"
+                    label={intl.formatMessage({
+                        id: 'system.role.auth',
+                        defaultMessage: '菜单权限',
+                    })}
+                    required={dataScopeType === '1'}
+                    hidden={dataScopeType !== '1'}
+                >
+                    <Row gutter={[16, 16]}>
+                        <Col md={24}>
+                            <Checkbox.Group
+                                options={[
+                                    { label: '展开/折叠', value: 'deptExpand' },
+                                    { label: '全选/全不选', value: 'deptNodeAll' },
+                                    // { label: '父子联动', value: 'deptCheckStrictly' },
+                                ]}
+                                onChange={onDeptOptionChange} />
+                        </Col>
+                        <Col md={24}>
+                            <Tree
+                                checkable={true}
+                                checkStrictly={checkStrictly}
+                                expandedKeys={deptTreeExpandKey}
+                                treeData={deptTree}
+                                checkedKeys={deptIds}
+                                defaultCheckedKeys={deptCheckedKeys}
+                                onCheck={(checkedKeys: any, checkInfo: any) => {
+                                    console.log(checkedKeys, checkInfo);
+                                    if(checkStrictly) {
+                                        return setDeptIds(checkedKeys.checked);
+                                    } else {
+                                        return setDeptIds({checked: checkedKeys, halfChecked: checkInfo.halfCheckedKeys});
+                                    }
+                                }}
+                                onExpand={(expandedKeys: Key[]) => {
+                                    setDeptTreeExpandKey(deptTreeExpandKey.concat(expandedKeys));
+                                }}
+                            />
+                        </Col>
+                    </Row>
+                </ProForm.Item>
+            </ProForm>
+        </Modal>
+    );
+};
+
+export default DataScopeForm;
diff --git a/react-ui/src/pages/System/Role/components/UserSelectorModal.tsx b/react-ui/src/pages/System/Role/components/UserSelectorModal.tsx
new file mode 100644
index 0000000..fdcfb85
--- /dev/null
+++ b/react-ui/src/pages/System/Role/components/UserSelectorModal.tsx
@@ -0,0 +1,125 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Modal } from 'antd';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { ActionType, ParamsType, ProColumns, ProTable, RequestData } from '@ant-design/pro-components';
+import { getDictValueEnum } from '@/services/system/dict';
+import DictTag from '@/components/DictTag';
+
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/10
+ * 
+ * */
+
+export type DataScopeFormProps = {
+  onCancel: () => void;
+  onSubmit: (values: React.Key[]) => void;
+  open: boolean;
+  params: ParamsType;
+  request?: (params: Record<string, any>) => Promise<Partial<RequestData<API.System.User>>>;
+};
+
+const UserSelectorModal: React.FC<DataScopeFormProps> = (props) => {
+  
+  const actionRef = useRef<ActionType>();
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  useEffect(() => {
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, [props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    props.onSubmit(selectedRowKeys);
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+
+  const columns: ProColumns<API.System.User>[] = [
+    {
+      title: <FormattedMessage id="system.user.user_id" defaultMessage="用户编号" />,
+      dataIndex: 'userId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.user.user_name" defaultMessage="用户账号" />,
+      dataIndex: 'userName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.user.nick_name" defaultMessage="用户昵称" />,
+      dataIndex: 'nickName',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.user.phonenumber" defaultMessage="手机号码" />,
+      dataIndex: 'phonenumber',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.user.status" defaultMessage="帐号状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      hideInSearch: true,
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="system.user.create_time" defaultMessage="创建时间" />,
+      dataIndex: 'createTime',
+      valueType: 'dateRange',
+      hideInSearch: true,
+      render: (_, record) => {
+        return (<span>{record.createTime.toString()} </span>);
+      },
+    }
+  ];
+
+  return (
+    <Modal
+      width={800}
+      title={intl.formatMessage({
+        id: 'system.role.auth.user',
+        defaultMessage: '选择用户',
+      })}
+      open={props.open}
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProTable<API.System.User>
+        headerTitle={intl.formatMessage({
+          id: 'pages.searchTable.title',
+          defaultMessage: '信息',
+        })}
+        actionRef={actionRef}
+        rowKey="userId"
+        key="userList"
+        search={{
+          labelWidth: 120,
+        }}
+        toolbar={{}}
+        params={props.params}
+        request={props.request}
+        columns={columns}
+        rowSelection={{
+          onChange: (selectedRowKeys: React.Key[]) => {
+            setSelectedRowKeys(selectedRowKeys);
+          },
+        }}
+      />
+    </Modal>
+  );
+};
+
+export default UserSelectorModal;
diff --git a/react-ui/src/pages/System/Role/edit.tsx b/react-ui/src/pages/System/Role/edit.tsx
new file mode 100644
index 0000000..580493a
--- /dev/null
+++ b/react-ui/src/pages/System/Role/edit.tsx
@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormRadio,
+  ProFormTextArea,
+} from '@ant-design/pro-components';
+import { Form, Modal } from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import Tree, { DataNode } from 'antd/es/tree';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+export type RoleFormData = Record<string, unknown> & Partial<API.System.Role>;
+
+export type RoleFormProps = {
+  onCancel: (flag?: boolean, formVals?: RoleFormData) => void;
+  onSubmit: (values: RoleFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.Role>;
+  menuTree: DataNode[];
+  menuCheckedKeys: string[];
+  statusOptions: DictValueEnumObj;
+};
+
+const RoleForm: React.FC<RoleFormProps> = (props) => {
+  const [form] = Form.useForm();
+  const { menuTree, menuCheckedKeys } = props;
+  const [menuIds, setMenuIds] = useState<string[]>([]);
+  const { statusOptions } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+      roleId: props.values.roleId,
+      roleName: props.values.roleName,
+      roleKey: props.values.roleKey,
+      roleSort: props.values.roleSort,
+      dataScope: props.values.dataScope,
+      menuCheckStrictly: props.values.menuCheckStrictly,
+      deptCheckStrictly: props.values.deptCheckStrictly,
+      status: props.values.status,
+      delFlag: props.values.delFlag,
+      createBy: props.values.createBy,
+      createTime: props.values.createTime,
+      updateBy: props.values.updateBy,
+      updateTime: props.values.updateTime,
+      remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit({ ...values, menuIds } as RoleFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.role.title',
+        defaultMessage: '编辑角色信息',
+      })}
+      forceRender
+      open={props.open}
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProForm
+        form={form}
+        grid={true}
+        layout="horizontal"
+        submitter={false}
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="roleId"
+          label={intl.formatMessage({
+            id: 'system.role.role_id',
+            defaultMessage: '角色编号',
+          })}
+          placeholder="请输入角色编号"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入角色编号！" defaultMessage="请输入角色编号！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="roleName"
+          label={intl.formatMessage({
+            id: 'system.role.role_name',
+            defaultMessage: '角色名称',
+          })}
+          placeholder="请输入角色名称"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入角色名称！" defaultMessage="请输入角色名称！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="roleKey"
+          label={intl.formatMessage({
+            id: 'system.role.role_key',
+            defaultMessage: '权限字符串',
+          })}
+          placeholder="请输入角色权限字符串"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入角色权限字符串！" defaultMessage="请输入角色权限字符串！" />,
+            },
+          ]}
+        />
+        <ProFormDigit
+          name="roleSort"
+          label={intl.formatMessage({
+            id: 'system.role.role_sort',
+            defaultMessage: '显示顺序',
+          })}
+          placeholder="请输入显示顺序"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入显示顺序！" defaultMessage="请输入显示顺序！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: 1
+          }}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.role.status',
+            defaultMessage: '角色状态',
+          })}
+          placeholder="请输入角色状态"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入角色状态！" defaultMessage="请输入角色状态！" />,
+            },
+          ]}
+          fieldProps = {{
+            defaultValue: "0"
+          }}
+        />
+        <ProForm.Item
+          name="menuIds"
+          label={intl.formatMessage({
+            id: 'system.role.auth',
+            defaultMessage: '菜单权限',
+          })}
+        >
+          <Tree
+            checkable={true}
+            multiple={true}
+            checkStrictly={true}
+            defaultExpandAll={false}
+            treeData={menuTree}
+            defaultCheckedKeys={menuCheckedKeys}
+            onCheck={(checkedKeys: any) => {             
+              return setMenuIds(checkedKeys.checked);
+            }}
+          />
+        </ProForm.Item>
+        <ProFormTextArea
+          name="remark"
+          label={intl.formatMessage({
+            id: 'system.role.remark',
+            defaultMessage: '备注',
+          })}
+          placeholder="请输入备注"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default RoleForm;
diff --git a/react-ui/src/pages/System/Role/index.tsx b/react-ui/src/pages/System/Role/index.tsx
new file mode 100644
index 0000000..ea15b2e
--- /dev/null
+++ b/react-ui/src/pages/System/Role/index.tsx
@@ -0,0 +1,513 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess, history } from '@umijs/max';
+import { DataNode } from 'antd/es/tree';
+import { Button, message, Modal, Dropdown, FormInstance, Space, Switch } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons';
+import { getRoleList, removeRole, addRole, updateRole, exportRole, getRoleMenuList, changeRoleStatus, updateRoleDataScope, getDeptTreeSelect, getRole } from '@/services/system/role';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import { formatTreeData } from '@/utils/tree';
+import { getMenuTree } from '@/services/system/menu';
+import DataScopeForm from './components/DataScope';
+
+const { confirm } = Modal;
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.Role) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addRole({ ...fields });
+    hide();
+    if (resp.code === 200) {
+      message.success('添加成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.Role) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateRole(fields);
+    hide();
+    if (resp.code === 200) {
+      message.success('更新成功');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.Role[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeRole(selectedRows.map((row) => row.roleId).join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.Role) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.roleId];
+    const resp = await removeRole(params.join(','));
+    hide();
+    if (resp.code === 200) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(resp.msg);
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 导出数据
+ *
+ *
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportRole();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+
+const RoleTableList: React.FC = () => {
+
+  const [messageApi, contextHolder] = message.useMessage();
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [dataScopeModalOpen, setDataScopeModalOpen] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.Role>();
+  const [selectedRows, setSelectedRows] = useState<API.System.Role[]>([]);
+
+  const [menuTree, setMenuTree] = useState<DataNode[]>();
+  const [menuIds, setMenuIds] = useState<string[]>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const showChangeStatusConfirm = (record: API.System.Role) => {
+    let text = record.status === "1" ? "启用" : "停用";
+    const newStatus = record.status === '0' ? '1' : '0';
+    confirm({
+      title: `确认要${text}${record.roleName}角色吗？`,
+      onOk() {
+        changeRoleStatus(record.roleId, newStatus).then(resp => {
+          if (resp.code === 200) {
+            messageApi.open({
+              type: 'success',
+              content: '更新成功！',
+            });
+            actionRef.current?.reload();
+          } else {
+            messageApi.open({
+              type: 'error',
+              content: '更新失败！',
+            });
+          }
+        });
+      },
+    });
+  };
+
+  const columns: ProColumns<API.System.Role>[] = [
+    {
+      title: <FormattedMessage id="system.role.role_id" defaultMessage="角色编号" />,
+      dataIndex: 'roleId',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.role.role_name" defaultMessage="角色名称" />,
+      dataIndex: 'roleName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.role.role_key" defaultMessage="角色权限字符串" />,
+      dataIndex: 'roleKey',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.role.role_sort" defaultMessage="显示顺序" />,
+      dataIndex: 'roleSort',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="system.role.status" defaultMessage="角色状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (
+          <Switch
+            checked={record.status === '0'}
+            checkedChildren="正常"
+            unCheckedChildren="停用"
+            defaultChecked
+            onClick={() => showChangeStatusConfirm(record)}
+          />)
+      },
+    },
+    {
+      title: <FormattedMessage id="system.role.create_time" defaultMessage="创建时间" />,
+      dataIndex: 'createTime',
+      valueType: 'dateRange',
+      render: (_, record) => {
+        return (<span>{record.createTime.toString()} </span>);
+      },
+      search: {
+        transform: (value) => {
+          return {
+            'params[beginTime]': value[0],
+            'params[endTime]': value[1],
+          };
+        },
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '220px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          icon=<EditOutlined />
+          hidden={!access.hasPerms('system:role:edit')}
+          onClick={() => {
+            getRoleMenuList(record.roleId).then((res) => {
+              if (res.code === 200) {
+                const treeData = formatTreeData(res.menus);
+                setMenuTree(treeData);
+                setMenuIds(res.checkedKeys.map(item => {
+                  return `${item}`
+                }));
+                setModalVisible(true);
+                setCurrentRow(record);
+              } else {
+                message.warning(res.msg);
+              }
+            });
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          icon=<DeleteOutlined />
+          hidden={!access.hasPerms('system:role:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+        <Dropdown
+          key="more"
+          menu={{
+            items: [
+              {
+                label: '数据权限',
+                key: 'datascope',
+                disabled: !access.hasPerms('system:role:edit'),
+              },
+              {
+                label: '分配用户',
+                key: 'authUser',
+                disabled: !access.hasPerms('system:role:edit'),
+              },
+            ],
+            onClick: ({ key }: any) => {
+              if (key === 'datascope') {
+                getRole(record.roleId).then(resp => {
+                  if(resp.code === 200) {
+                    setCurrentRow(resp.data);
+                    setDataScopeModalOpen(true);
+                  }
+                })
+                getDeptTreeSelect(record.roleId).then(resp => {
+                  if (resp.code === 200) {
+                    setMenuTree(formatTreeData(resp.depts));
+                    setMenuIds(resp.checkedKeys.map((item:number) => {
+                      return `${item}`
+                    }));
+                  }
+                })
+              }
+              else if (key === 'authUser') {
+                history.push(`/system/role-auth/user/${record.roleId}`);
+              }
+            }
+          }}
+        >
+          <a onClick={(e) => e.preventDefault()}>
+            <Space>
+              <DownOutlined />
+              更多
+            </Space>
+          </a>
+        </Dropdown>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      {contextHolder}
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.System.Role>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="roleId"
+          key="roleList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('system:role:add')}
+              onClick={async () => {
+                getMenuTree().then((res: any) => {
+                  if (res.code === 200) {
+                    const treeData = formatTreeData(res.data);
+                    setMenuTree(treeData);
+                    setMenuIds([]);
+                    setModalVisible(true);
+                    setCurrentRow(undefined);
+                  } else {
+                    message.warning(res.msg);
+                  }
+                });
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('system:role:remove')}
+              onClick={async () => {
+                Modal.confirm({
+                  title: '是否确认删除所选数据项?',
+                  icon: <ExclamationCircleOutlined />,
+                  content: '请谨慎操作',
+                  async onOk() {
+                    const success = await handleRemove(selectedRows);
+                    if (success) {
+                      setSelectedRows([]);
+                      actionRef.current?.reloadAndRest?.();
+                    }
+                  },
+                  onCancel() { },
+                });
+              }}
+            >
+              <DeleteOutlined />
+              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+            </Button>,
+            <Button
+              type="primary"
+              key="export"
+              hidden={!access.hasPerms('system:role:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getRoleList({ ...params } as API.System.RoleListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+          rowSelection={{
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
+        />
+      </div>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:role:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.roleId) {
+            success = await handleUpdate({ ...values } as API.System.Role);
+          } else {
+            success = await handleAdd({ ...values } as API.System.Role);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        menuTree={menuTree || []}
+        menuCheckedKeys={menuIds || []}
+        statusOptions={statusOptions}
+      />
+      <DataScopeForm
+        onSubmit={async (values: any) => {
+          const success = await updateRoleDataScope(values);
+          if (success) {
+            setDataScopeModalOpen(false);
+            setSelectedRows([]);
+            setCurrentRow(undefined);
+            message.success('配置成功。');
+          }
+        }}
+        onCancel={() => {
+          setDataScopeModalOpen(false);
+          setSelectedRows([]);
+          setCurrentRow(undefined);
+        }}
+        open={dataScopeModalOpen}
+        values={currentRow || {}}
+        deptTree={menuTree || []}
+        deptCheckedKeys={menuIds || []}
+      />
+    </PageContainer>
+  );
+};
+
+export default RoleTableList;
diff --git a/react-ui/src/pages/System/User/components/AuthRole.tsx b/react-ui/src/pages/System/User/components/AuthRole.tsx
new file mode 100644
index 0000000..120d966
--- /dev/null
+++ b/react-ui/src/pages/System/User/components/AuthRole.tsx
@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { Form, Modal } from 'antd';
+import { useIntl } from '@umijs/max';
+import { ProForm, ProFormSelect } from '@ant-design/pro-components';
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/06
+ * 
+ * */
+
+export type FormValueType = any & Partial<API.System.Dept>;
+
+export type AuthRoleFormProps = {
+    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
+    onSubmit: (values: FormValueType) => Promise<void>;
+    open: boolean;
+    roleIds: number[];
+    roles: string[];
+};
+
+const AuthRoleForm: React.FC<AuthRoleFormProps> = (props) => {
+    const [form] = Form.useForm();
+
+    useEffect(() => {
+        form.resetFields();
+        form.setFieldValue( 'roleIds', props.roleIds);
+    });
+
+    const intl = useIntl();
+    const handleOk = () => {
+        form.submit();
+    };
+    const handleCancel = () => {
+        props.onCancel();
+    };
+    const handleFinish = async (values: Record<string, any>) => {
+        props.onSubmit(values as FormValueType);
+    };
+
+    return (
+        <Modal
+            width={640}
+            title={intl.formatMessage({
+                id: 'system.user.auth.role',
+                defaultMessage: '分配角色',
+            })}
+            open={props.open}
+            destroyOnClose
+            forceRender
+            onOk={handleOk}
+            onCancel={handleCancel}
+        >
+            <ProForm
+                form={form}
+                grid={true}
+                layout="horizontal"
+                onFinish={handleFinish}
+                initialValues={{
+                    login_password: '',
+                    confirm_password: '',
+                }}
+            >
+                <ProFormSelect
+                    name="roleIds"
+                    mode="multiple"
+                    label={intl.formatMessage({
+                        id: 'system.user.role',
+                        defaultMessage: '角色',
+                    })}
+                    options={props.roles}
+                    placeholder="请选择角色"
+                    rules={[{ required: true, message: '请选择角色!' }]}
+                />
+            </ProForm>
+        </Modal>
+    );
+};
+
+export default AuthRoleForm;
diff --git a/react-ui/src/pages/System/User/components/DeptTree.tsx b/react-ui/src/pages/System/User/components/DeptTree.tsx
new file mode 100644
index 0000000..d1a085c
--- /dev/null
+++ b/react-ui/src/pages/System/User/components/DeptTree.tsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import { Tree, message } from 'antd';
+import { getDeptTree } from '@/services/system/user';
+
+const { DirectoryTree } = Tree;
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/06
+ * 
+ * */
+
+
+export type TreeProps = {
+  onSelect: (values: any) => Promise<void>;
+};
+
+const DeptTree: React.FC<TreeProps> = (props) => {
+  const [treeData, setTreeData] = useState<any>([]);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
+
+  const fetchDeptList = async () => {
+    const hide = message.loading('正在查询');
+    try {
+      await getDeptTree({}).then((res: any) => {
+        const exKeys = [];
+        exKeys.push('1');
+        setTreeData(res);
+        exKeys.push(res[0].children[0].id);
+        setExpandedKeys(exKeys);
+        props.onSelect(res[0].children[0]);
+      });
+      hide();
+      return true;
+    } catch (error) {
+      hide();
+      return false;
+    }
+  };
+
+  useEffect(() => {
+    fetchDeptList();
+  }, []);
+
+  const onSelect = (keys: React.Key[], info: any) => {
+    props.onSelect(info.node);
+  };
+
+  const onExpand = (expandedKeysValue: React.Key[]) => {
+    setExpandedKeys(expandedKeysValue);
+    setAutoExpandParent(false);
+  };
+
+  return (
+    <DirectoryTree
+      // multiple
+      defaultExpandAll
+      onExpand={onExpand}
+      expandedKeys={expandedKeys}
+      autoExpandParent={autoExpandParent}
+      onSelect={onSelect}
+      treeData={treeData}
+    />
+  );
+};
+
+export default DeptTree;
diff --git a/react-ui/src/pages/System/User/components/ResetPwd.tsx b/react-ui/src/pages/System/User/components/ResetPwd.tsx
new file mode 100644
index 0000000..5523cd6
--- /dev/null
+++ b/react-ui/src/pages/System/User/components/ResetPwd.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Form, Modal } from 'antd';
+import { useIntl } from '@umijs/max';
+import { ProForm, ProFormText } from '@ant-design/pro-components';
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/06
+ * 
+ * */
+
+export type FormValueType = any & Partial<API.System.User>;
+
+export type UpdateFormProps = {
+  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
+  onSubmit: (values: FormValueType) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.User>;
+};
+
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const [form] = Form.useForm();
+  const loginPassword = Form.useWatch('password', form);
+  const userId = props.values.userId;
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit({ ...values, userId } as FormValueType);
+  };
+
+  const checkPassword = (rule: any, value: string) => {
+    if (value === loginPassword) {
+      // 校验条件自定义
+      return Promise.resolve();
+    }
+    return Promise.reject(new Error('两次密码输入不一致'));
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.user.reset.password',
+        defaultMessage: '密码重置',
+      })}
+      open={props.open}
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProForm
+        grid={true}
+        form={form}
+        layout="horizontal"
+        onFinish={handleFinish}
+        initialValues={{
+          password: '',
+          confirm_password: '',
+        }}
+      >
+        <p>请输入用户{props.values.userName}的新密码！</p>
+        <ProFormText.Password
+          name="password"
+          label="登录密码"
+          rules={[
+            {
+              required: true,
+              message: '登录密码不可为空。',
+            },
+          ]}
+        />
+        <ProFormText.Password
+          name="confirm_password"
+          label="确认密码"
+          rules={[
+            {
+              required: true,
+              message: "确认密码",
+            },
+            { validator: checkPassword },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default UpdateForm;
diff --git a/react-ui/src/pages/System/User/edit.tsx b/react-ui/src/pages/System/User/edit.tsx
new file mode 100644
index 0000000..31d442b
--- /dev/null
+++ b/react-ui/src/pages/System/User/edit.tsx
@@ -0,0 +1,279 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormText,
+  ProFormSelect,
+  ProFormRadio,
+  ProFormTextArea,
+  ProFormTreeSelect,
+} from '@ant-design/pro-components';
+import { Form, Modal } from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DataNode } from 'antd/es/tree';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/06
+ * 
+ * */
+
+
+export type UserFormData = Record<string, unknown> & Partial<API.System.User>;
+
+export type UserFormProps = {
+  onCancel: (flag?: boolean, formVals?: UserFormData) => void;
+  onSubmit: (values: UserFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.System.User>;
+  sexOptions: DictValueEnumObj;
+  statusOptions: DictValueEnumObj;
+  postIds: number[];
+  posts: string[];
+  roleIds: number[];
+  roles: string[];
+  depts: DataNode[];
+};
+
+const UserForm: React.FC<UserFormProps> = (props) => {
+  const [form] = Form.useForm();
+  const userId = Form.useWatch('userId', form);
+  const { sexOptions, statusOptions, } = props;
+  const { roles, posts, depts } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+      userId: props.values.userId,
+      deptId: props.values.deptId,
+      postIds: props.postIds,
+      roleIds: props.roleIds,
+      userName: props.values.userName,
+      nickName: props.values.nickName,
+      email: props.values.email,
+      phonenumber: props.values.phonenumber,
+      sex: props.values.sex,
+      avatar: props.values.avatar,
+      status: props.values.status,
+      delFlag: props.values.delFlag,
+      loginIp: props.values.loginIp,
+      loginDate: props.values.loginDate,
+      remark: props.values.remark,
+    });
+  }, [form, props]);
+
+  const intl = useIntl();
+  const handleOk = () => {
+    form.submit();
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as UserFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'system.user.title',
+        defaultMessage: '编辑用户信息',
+      })}
+      open={props.open}
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProForm
+        grid={true}
+        form={form}
+        layout="horizontal"
+        submitter={false}
+        onFinish={handleFinish}>
+        <ProFormText
+          name="nickName"
+          label={intl.formatMessage({
+            id: 'system.user.nick_name',
+            defaultMessage: '用户昵称',
+          })}
+          placeholder="请输入用户昵称"
+          colProps={{ xs: 24, md: 12, xl: 12 }}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage id="请输入用户昵称！" defaultMessage="请输入用户昵称！" />
+              ),
+            },
+          ]}
+        />
+        <ProFormTreeSelect
+          name="deptId"
+          label={intl.formatMessage({
+            id: 'system.user.dept_name',
+            defaultMessage: '部门',
+          })}
+          request={async () => {
+            return depts;
+          }}
+          placeholder="请输入用户部门"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage id="请输入用户部门！" defaultMessage="请输入用户部门！" />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          name="phonenumber"
+          label={intl.formatMessage({
+            id: 'system.user.phonenumber',
+            defaultMessage: '手机号码',
+          })}
+          placeholder="请输入手机号码"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[
+            {
+              required: false,
+              message: (
+                <FormattedMessage id="请输入手机号码！" defaultMessage="请输入手机号码！" />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          name="email"
+          label={intl.formatMessage({
+            id: 'system.user.email',
+            defaultMessage: '用户邮箱',
+          })}
+          placeholder="请输入用户邮箱"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[
+            {
+              required: false,
+              message: (
+                <FormattedMessage id="请输入用户邮箱！" defaultMessage="请输入用户邮箱！" />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          name="userName"
+          label={intl.formatMessage({
+            id: 'system.user.user_name',
+            defaultMessage: '用户账号',
+          })}
+          hidden={userId}
+          placeholder="请输入用户账号"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        />
+        <ProFormText.Password
+          name="password"
+          label={intl.formatMessage({
+            id: 'system.user.password',
+            defaultMessage: '密码',
+          })}
+          hidden={userId}
+          placeholder="请输入密码"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入密码！" defaultMessage="请输入密码！" />,
+            },
+          ]}
+        />
+        <ProFormSelect
+          valueEnum={sexOptions}
+          name="sex"
+          label={intl.formatMessage({
+            id: 'system.user.sex',
+            defaultMessage: '用户性别',
+          })}
+          initialValue={'0'}
+          placeholder="请输入用户性别"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[
+            {
+              required: false,
+              message: (
+                <FormattedMessage id="请输入用户性别！" defaultMessage="请输入用户性别！" />
+              ),
+            },
+          ]}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'system.user.status',
+            defaultMessage: '帐号状态',
+          })}
+          initialValue={'0'}
+          placeholder="请输入帐号状态"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[
+            {
+              required: false,
+              message: (
+                <FormattedMessage id="请输入帐号状态！" defaultMessage="请输入帐号状态！" />
+              ),
+            },
+          ]}
+        />
+        <ProFormSelect
+          name="postIds"
+          mode="multiple"
+          label={intl.formatMessage({
+            id: 'system.user.post',
+            defaultMessage: '岗位',
+          })}
+          options={posts}
+          placeholder="请选择岗位"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[{ required: true, message: '请选择岗位!' }]}
+        />
+        <ProFormSelect
+          name="roleIds"
+          mode="multiple"
+          label={intl.formatMessage({
+            id: 'system.user.role',
+            defaultMessage: '角色',
+          })}
+          options={roles}
+          placeholder="请选择角色"
+          colProps={{ md: 12, xl: 12 }}
+          rules={[{ required: true, message: '请选择角色!' }]}
+        />
+        <ProFormTextArea
+          name="remark"
+          label={intl.formatMessage({
+            id: 'system.user.remark',
+            defaultMessage: '备注',
+          })}
+          placeholder="请输入备注"
+          colProps={{ md: 24, xl: 24 }}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入备注！" defaultMessage="请输入备注！" />,
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default UserForm;
diff --git a/react-ui/src/pages/System/User/index.tsx b/react-ui/src/pages/System/User/index.tsx
new file mode 100644
index 0000000..6435787
--- /dev/null
+++ b/react-ui/src/pages/System/User/index.tsx
@@ -0,0 +1,561 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import { Card, Col, Dropdown, FormInstance, Row, Space, Switch } from 'antd';
+import { Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined } from '@ant-design/icons';
+import { getUserList, removeUser, addUser, updateUser, exportUser, getUser, changeUserStatus, updateAuthRole, resetUserPwd } from '@/services/system/user';
+import UpdateForm from './edit';
+import { getDictValueEnum } from '@/services/system/dict';
+import { DataNode } from 'antd/es/tree';
+import { getDeptTree } from '@/services/system/user';
+import DeptTree from './components/DeptTree';
+import ResetPwd from './components/ResetPwd';
+import { getPostList } from '@/services/system/post';
+import { getRoleList } from '@/services/system/role';
+import AuthRoleForm from './components/AuthRole';
+
+const { confirm } = Modal;
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/06
+ *
+ * */
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.System.User) => {
+  const hide = message.loading('正在添加');
+  try {
+    await addUser({ ...fields });
+    hide();
+    message.success('添加成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('添加失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 更新节点
+ *
+ * @param fields
+ */
+const handleUpdate = async (fields: API.System.User) => {
+  const hide = message.loading('正在配置');
+  try {
+    await updateUser(fields);
+    hide();
+    message.success('配置成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('配置失败请重试！');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.System.User[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    await removeUser(selectedRows.map((row) => row.userId).join(','));
+    hide();
+    message.success('删除成功，即将刷新');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+const handleRemoveOne = async (selectedRow: API.System.User) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.userId];
+    await removeUser(params.join(','));
+    hide();
+    message.success('删除成功，即将刷新');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 导出数据
+ *
+ *
+ */
+const handleExport = async () => {
+  const hide = message.loading('正在导出');
+  try {
+    await exportUser();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+const UserTableList: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [resetPwdModalVisible, setResetPwdModalVisible] = useState<boolean>(false);
+  const [authRoleModalVisible, setAuthRoleModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.System.User>();
+  const [selectedRows, setSelectedRows] = useState<API.System.User[]>([]);
+
+  const [selectDept, setSelectDept] = useState<any>({ id: 0 });
+  const [sexOptions, setSexOptions] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const [postIds, setPostIds] = useState<number[]>();
+  const [postList, setPostList] = useState<any[]>();
+  const [roleIds, setRoleIds] = useState<number[]>();
+  const [roleList, setRoleList] = useState<any[]>();
+  const [deptTree, setDeptTree] = useState<DataNode[]>();
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictValueEnum('sys_user_sex').then((data) => {
+      setSexOptions(data);
+    });
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const showChangeStatusConfirm = (record: API.System.User) => {
+    let text = record.status === "1" ? "启用" : "停用";
+    const newStatus = record.status === '0' ? '1' : '0';
+    confirm({
+      title: `确认要${text}${record.userName}用户吗？`,
+      onOk() {
+        changeUserStatus(record.userId, newStatus).then(resp => {
+          if (resp.code === 200) {
+            messageApi.open({
+              type: 'success',
+              content: '更新成功！',
+            });
+            actionRef.current?.reload();
+          } else {
+            messageApi.open({
+              type: 'error',
+              content: '更新失败！',
+            });
+          }
+        });
+      },
+    });
+  };
+
+  const fetchUserInfo = async (userId: number) => {
+    const res = await getUser(userId);
+    setPostIds(res.postIds);
+    setPostList(
+      res.posts.map((item: any) => {
+        return {
+          value: item.postId,
+          label: item.postName,
+        };
+      }),
+    );
+    setRoleIds(res.roleIds);
+    setRoleList(
+      res.roles.map((item: any) => {
+        return {
+          value: item.roleId,
+          label: item.roleName,
+        };
+      }),
+    );
+  };
+
+  const columns: ProColumns<API.System.User>[] = [
+    {
+      title: <FormattedMessage id="system.user.user_id" defaultMessage="用户编号" />,
+      dataIndex: 'deptId',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.user.user_name" defaultMessage="用户账号" />,
+      dataIndex: 'userName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.user.nick_name" defaultMessage="用户昵称" />,
+      dataIndex: 'nickName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.user.dept_name" defaultMessage="部门" />,
+      dataIndex: ['dept', 'deptName'],
+      valueType: 'text',
+      hideInSearch: true
+    },
+    {
+      title: <FormattedMessage id="system.user.phonenumber" defaultMessage="手机号码" />,
+      dataIndex: 'phonenumber',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="system.user.status" defaultMessage="帐号状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (
+          <Switch
+            checked={record.status === '0'}
+            checkedChildren="正常"
+            unCheckedChildren="停用"
+            defaultChecked
+            onClick={() => showChangeStatusConfirm(record)}
+          />)
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '220px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="edit"
+          icon=<EditOutlined />
+          hidden={!access.hasPerms('system:user:edit')}
+          onClick={async () => {
+            fetchUserInfo(record.userId);
+            const treeData = await getDeptTree({});
+            setDeptTree(treeData);
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          icon=<DeleteOutlined />
+          key="batchRemove"
+          hidden={!access.hasPerms('system:user:remove')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '删除',
+              content: '确定删除该项吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleRemoveOne(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          删除
+        </Button>,
+        <Dropdown
+          key="more"
+          menu={{
+            items: [
+              {
+                label: <FormattedMessage id="system.user.reset.password" defaultMessage="密码重置" />,
+                key: 'reset',
+                disabled: !access.hasPerms('system:user:edit'),
+              },
+              {
+                label: '分配角色',
+                key: 'authRole',
+                disabled: !access.hasPerms('system:user:edit'),
+              },
+            ],
+            onClick: ({ key }) => {
+              if (key === 'reset') {
+                setResetPwdModalVisible(true);
+                setCurrentRow(record);
+              }
+              else if (key === 'authRole') {
+                fetchUserInfo(record.userId);
+                setAuthRoleModalVisible(true);
+                setCurrentRow(record);
+              }
+            }
+          }}
+        >
+          <a onClick={(e) => e.preventDefault()}>
+            <Space>
+              <DownOutlined />
+              更多
+            </Space>
+          </a>
+        </Dropdown>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      {contextHolder}
+      <Row gutter={[16, 24]}>
+        <Col lg={6} md={24}>
+          <Card>
+            <DeptTree
+              onSelect={async (value: any) => {
+                setSelectDept(value);
+                if (actionRef.current) {
+                  formTableRef?.current?.submit();
+                }
+              }}
+            />
+          </Card>
+        </Col>
+        <Col lg={18} md={24}>
+          <ProTable<API.System.User>
+            headerTitle={intl.formatMessage({
+              id: 'pages.searchTable.title',
+              defaultMessage: '信息',
+            })}
+            actionRef={actionRef}
+            formRef={formTableRef}
+            rowKey="userId"
+            key="userList"
+            search={{
+              labelWidth: 120,
+            }}
+            toolBarRender={() => [
+              <Button
+                type="primary"
+                key="add"
+                hidden={!access.hasPerms('system:user:add')}
+                onClick={async () => {
+                  const treeData = await getDeptTree({});
+                  setDeptTree(treeData);
+
+                  const postResp = await getPostList()
+                  if (postResp.code === 200) {
+                    setPostList(
+                      postResp.rows.map((item: any) => {
+                        return {
+                          value: item.postId,
+                          label: item.postName,
+                        };
+                      }),
+                    );
+                  }
+
+                  const roleResp = await getRoleList()
+                  if (roleResp.code === 200) {
+                    setRoleList(
+                      roleResp.rows.map((item: any) => {
+                        return {
+                          value: item.roleId,
+                          label: item.roleName,
+                        };
+                      }),
+                    );
+                  }
+                  setCurrentRow(undefined);
+                  setModalVisible(true);
+                }}
+              >
+                <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+              </Button>,
+              <Button
+                type="primary"
+                key="remove"
+                danger
+                hidden={selectedRows?.length === 0 || !access.hasPerms('system:user:remove')}
+                onClick={async () => {
+                  Modal.confirm({
+                    title: '是否确认删除所选数据项?',
+                    icon: <ExclamationCircleOutlined />,
+                    content: '请谨慎操作',
+                    async onOk() {
+                      const success = await handleRemove(selectedRows);
+                      if (success) {
+                        setSelectedRows([]);
+                        actionRef.current?.reloadAndRest?.();
+                      }
+                    },
+                    onCancel() { },
+                  });
+                }}
+              >
+                <DeleteOutlined />
+                <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+              </Button>,
+              <Button
+                type="primary"
+                key="export"
+                hidden={!access.hasPerms('system:user:export')}
+                onClick={async () => {
+                  handleExport();
+                }}
+              >
+                <PlusOutlined />
+                <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+              </Button>,
+            ]}
+            request={(params) =>
+              getUserList({ ...params, deptId: selectDept.id } as API.System.UserListParams).then((res) => {
+                const result = {
+                  data: res.rows,
+                  total: res.total,
+                  success: true,
+                };
+                return result;
+              })
+            }
+            columns={columns}
+            rowSelection={{
+              onChange: (_, selectedRows) => {
+                setSelectedRows(selectedRows);
+              },
+            }}
+          />
+        </Col>
+      </Row>
+      {selectedRows?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" />
+              <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
+            </div>
+          }
+        >
+          <Button
+            key="remove"
+            danger
+            hidden={!access.hasPerms('system:user:del')}
+            onClick={async () => {
+              Modal.confirm({
+                title: '删除',
+                content: '确定删除该项吗？',
+                okText: '确认',
+                cancelText: '取消',
+                onOk: async () => {
+                  const success = await handleRemove(selectedRows);
+                  if (success) {
+                    setSelectedRows([]);
+                    actionRef.current?.reloadAndRest?.();
+                  }
+                },
+              });
+            }}
+          >
+            <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
+          </Button>
+        </FooterToolbar>
+      )}
+      <UpdateForm
+        onSubmit={async (values) => {
+          let success = false;
+          if (values.userId) {
+            success = await handleUpdate({ ...values } as API.System.User);
+          } else {
+            success = await handleAdd({ ...values } as API.System.User);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        sexOptions={sexOptions}
+        statusOptions={statusOptions}
+        posts={postList || []}
+        postIds={postIds || []}
+        roles={roleList || []}
+        roleIds={roleIds || []}
+        depts={deptTree || []}
+      />
+      <ResetPwd
+        onSubmit={async (values: any) => {
+          const success = await resetUserPwd(values.userId, values.password);
+          if (success) {
+            setResetPwdModalVisible(false);
+            setSelectedRows([]);
+            setCurrentRow(undefined);
+            message.success('密码重置成功。');
+          }
+        }}
+        onCancel={() => {
+          setResetPwdModalVisible(false);
+          setSelectedRows([]);
+          setCurrentRow(undefined);
+        }}
+        open={resetPwdModalVisible}
+        values={currentRow || {}}
+      />
+      <AuthRoleForm
+        onSubmit={async (values: any) => {
+          const success = await updateAuthRole(values);
+          if (success) {
+            setAuthRoleModalVisible(false);
+            setSelectedRows([]);
+            setCurrentRow(undefined);
+            message.success('配置成功。');
+          }
+        }}
+        onCancel={() => {
+          setAuthRoleModalVisible(false);
+          setSelectedRows([]);
+          setCurrentRow(undefined);
+        }}
+        open={authRoleModalVisible}
+        roles={roleList || []}
+        roleIds={roleIds || []}
+      />
+    </PageContainer>
+  );
+};
+
+export default UserTableList;