diff --git a/react-ui/src/pages/Monitor/Cache/List.tsx b/react-ui/src/pages/Monitor/Cache/List.tsx
new file mode 100644
index 0000000..af6147a
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Cache/List.tsx
@@ -0,0 +1,240 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { clearCacheAll, clearCacheKey, clearCacheName, getCacheValue, listCacheKey, listCacheName } from '@/services/monitor/cachelist';
+import { Button, Card, Col, Form, FormInstance, Input, message, Row, Table } from 'antd';
+import styles from './index.less';
+import { FormattedMessage } from '@umijs/max';
+import { ReloadOutlined } from '@ant-design/icons';
+import { ProForm } from '@ant-design/pro-components';
+
+const { TextArea } = Input;
+
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2022/06/27
+ *
+ * */
+
+
+
+const CacheList: React.FC = () => {
+  const [cacheNames, setCacheNames] = useState<any>([]);
+  const [currentCacheName, setCurrentCacheName] = useState<any>([]);
+  const [cacheKeys, setCacheKeys] = useState<any>([]);
+  const [form] = Form.useForm();
+
+  const getCacheNames = () => {
+    listCacheName().then((res) => {
+      if (res.code === 200) {
+        setCacheNames(res.data);
+      }
+    });
+  }
+
+  useEffect(() => {
+    getCacheNames();
+  }, []);
+
+  const getCacheKeys = (cacheName: string) => {
+    listCacheKey(cacheName).then(res => {
+      if (res.code === 200) {
+        let index = 0;
+        const keysData = res.data.map((item: any) => {
+          return {
+            index: index++,
+            cacheKey: item
+          }
+        })
+        setCacheKeys(keysData);
+      }
+    });
+  };
+
+  const onClearAll = async () => {
+    clearCacheAll().then(res => {
+      if(res.code === 200) {
+        message.success("清理全部缓存成功");
+      }
+    });
+  };
+
+  const onClearAllFailed = (errorInfo: any) => {
+    message.error('Failed:', errorInfo);
+  };
+
+  const refreshCacheNames = () => {
+    getCacheNames();
+    message.success("刷新缓存列表成功");
+  };
+
+  const refreshCacheKeys = () => {
+    getCacheKeys(currentCacheName);
+    message.success("刷新键名列表成功");
+  };
+
+  const columns = [
+    {
+      title: '缓存名称',
+      dataIndex: 'cacheName',
+      key: 'cacheName',
+      render: (_: any, record: any) => {
+        return record.cacheName.replace(":", "");
+      }
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      key: 'remark',
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '40px',
+      valueType: 'option',
+      render: (_: any, record: API.Monitor.CacheContent) => [
+        <Button
+          type="link"
+          size="small"
+          key="remove"
+          danger
+          onClick={() => {
+            clearCacheName(record.cacheName).then(res => {
+              if(res.code === 200) {
+                message.success("清理缓存名称[" + record.cacheName + "]成功");
+                getCacheKeys(currentCacheName);
+              }
+            });
+          }}
+        >
+          <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+        </Button>,
+      ]
+    }
+  ];
+
+  const cacheKeysColumns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      key: 'index'
+    },
+    {
+      title: '缓存键名',
+      dataIndex: 'cacheKey',
+      key: 'cacheKey',
+      render: (_: any, record: any) => {
+        return record.cacheKey.replace(currentCacheName, "");
+      }
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '40px',
+      valueType: 'option',
+      render: (_: any, record: API.Monitor.CacheContent) => [
+        <Button
+          type="link"
+          size="small"
+          key="remove"
+          danger
+          onClick={() => {
+            console.log(record)
+            clearCacheKey(record.cacheKey).then(res => {
+              if(res.code === 200) {
+                message.success("清理缓存键名[" + record.cacheKey + "]成功");
+                getCacheKeys(currentCacheName);
+              }
+            });
+          }}
+        >
+          <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
+        </Button>,
+      ]
+    }
+  ];
+
+  return (
+    <div>
+      <Row gutter={[24, 24]}>
+        <Col span={8}>
+          <Card title="缓存列表" extra={<Button icon={<ReloadOutlined />} onClick={()=>{ refreshCacheNames()}} type="link" />} className={styles.card}>
+            <Table
+              rowKey="cacheName"
+              dataSource={cacheNames}
+              columns={columns}
+              onRow={(record: API.Monitor.CacheContent) => {
+                return {
+                  onClick: () => {
+                    setCurrentCacheName(record.cacheName);
+                    getCacheKeys(record.cacheName);
+                  },
+                };
+              }}
+            />
+          </Card>
+        </Col>
+        <Col span={8}>
+          <Card title="键名列表" extra={<Button icon={<ReloadOutlined />} onClick={()=>{ refreshCacheKeys()}} type="link" />} className={styles.card}>
+            <Table
+              rowKey="index"
+              dataSource={cacheKeys}
+              columns={cacheKeysColumns}
+              onRow={(record: any) => {
+                return {
+                  onClick: () => {
+                    getCacheValue(currentCacheName, record.cacheKey).then(res => {
+                      if (res.code === 200) {
+                        form.resetFields();
+                        form.setFieldsValue({
+                          cacheName: res.data.cacheName,
+                          cacheKey: res.data.cacheKey,
+                          cacheValue: res.data.cacheValue,
+                          remark: res.data.remark,
+                        });
+                      }
+                    });
+                  },
+                };
+              }}
+            />
+          </Card>
+        </Col>
+        <Col span={8}>
+          <Card title="缓存内容" extra={<Button icon={<ReloadOutlined />} onClick={()=>{ onClearAll()}} type="link" >清理全部</Button>} className={styles.card}>
+            <ProForm
+              name="basic"
+              form={form}
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              onFinish={onClearAll}
+              onFinishFailed={onClearAllFailed}
+              autoComplete="off"
+            >
+              <Form.Item
+                label="缓存名称"
+                name="cacheName"
+              >
+                <Input />
+              </Form.Item>
+              <Form.Item
+                label="缓存键名"
+                name="cacheKey"
+              >
+                <Input />
+              </Form.Item>
+              <Form.Item
+                label="缓存内容"
+                name="cacheValue"
+              >
+                <TextArea autoSize={{ minRows: 2 }} />
+              </Form.Item>
+            </ProForm>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default CacheList;
diff --git a/react-ui/src/pages/Monitor/Cache/List/index.less b/react-ui/src/pages/Monitor/Cache/List/index.less
new file mode 100644
index 0000000..0c5aace
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Cache/List/index.less
@@ -0,0 +1,10 @@
+
+
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2021/09/16
+ *
+ * */
+
diff --git a/react-ui/src/pages/Monitor/Cache/index.less b/react-ui/src/pages/Monitor/Cache/index.less
new file mode 100644
index 0000000..7112c50
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Cache/index.less
@@ -0,0 +1,33 @@
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2021/09/16
+ * 
+ * */
+
+ 
+.card {
+  margin-bottom: 12px;
+}
+
+
+.miniChart {
+  position: relative;
+  width: 100%;
+  .chartContent {
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+    > div {
+      margin: 0 -5px;
+      overflow: hidden;
+    }
+  }
+  .chartLoading {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    margin-left: -7px;
+  }
+}
diff --git a/react-ui/src/pages/Monitor/Cache/index.tsx b/react-ui/src/pages/Monitor/Cache/index.tsx
new file mode 100644
index 0000000..4c247ee
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Cache/index.tsx
@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from 'react';
+import { Card, Col, Row, Table } from 'antd';
+import { DataItem } from '@antv/g2plot/esm/interface/config';
+import { Gauge, Pie } from '@ant-design/plots';
+import styles from './index.less';
+import { getCacheInfo } from '@/services/monitor/cache';
+
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2021/09/16
+ *
+ * */
+
+
+const columns = [
+  {
+    title: 'col1',
+    dataIndex: 'col1',
+    key: 'col1',
+  },
+  {
+    title: 'col2',
+    dataIndex: 'col2',
+    key: 'col2',
+  },
+  {
+    title: 'col3',
+    dataIndex: 'col3',
+    key: 'col3',
+  },
+  {
+    title: 'col4',
+    dataIndex: 'col4',
+    key: 'col4',
+  },
+  {
+    title: 'col5',
+    dataIndex: 'col5',
+    key: 'col5',
+  },
+  {
+    title: 'col6',
+    dataIndex: 'col6',
+    key: 'col6',
+  },
+  {
+    title: 'col7',
+    dataIndex: 'col7',
+    key: 'col7',
+  },
+  {
+    title: 'col8',
+    dataIndex: 'col8',
+    key: 'col8',
+  },
+];
+
+const usageFormatter = (val: string): string => {
+  switch (val) {
+    case '10':
+      return '100%';
+    case '8':
+      return '80%';
+    case '6':
+      return '60%';
+    case '4':
+      return '40%';
+    case '2':
+      return '20%';
+    case '0':
+      return '0%';
+    default:
+      return '';
+  }
+};
+
+const CacheInfo: React.FC = () => {
+  const [baseInfoData, setBaseInfoData] = useState<any>([]);
+  const [memUsage, setMemUsage] = useState<Number>(0);
+  const [memUsageTitle, setMemUsageTitle] = useState<any>([]);
+  const [cmdInfoData, setCmdInfoData] = useState<DataItem[]>([]);
+  useEffect(() => {
+    getCacheInfo().then((res) => {
+      if (res.code === 200) {
+        const baseinfo = [];
+        baseinfo.push({
+          col1: 'Redis版本',
+          col2: res.data.info.redis_version,
+          col3: '运行模式',
+          col4: res.data.info.redis_mode === 'standalone' ? '单机' : '集群',
+          col5: '端口',
+          col6: res.data.info.tcp_port,
+          col7: '客户端数',
+          col8: res.data.info.connected_clients,
+        });
+        baseinfo.push({
+          col1: '运行时间(天)',
+          col2: res.data.info.uptime_in_days,
+          col3: '使用内存',
+          col4: res.data.info.used_memory_human,
+          col5: '使用CPU',
+          col6: `${res.data.info.used_cpu_user_children}%`,
+          col7: '内存配置',
+          col8: res.data.info.maxmemory_human,
+        });
+        baseinfo.push({
+          col1: 'AOF是否开启',
+          col2: res.data.info.aof_enabled === '0' ? '否' : '是',
+          col3: 'RDB是否成功',
+          col4: res.data.info.rdb_last_bgsave_status,
+          col5: 'Key数量',
+          col6: res.data.dbSize,
+          col7: '网络入口/出口',
+          col8: `${res.data.info.instantaneous_input_kbps}/${res.data.info.instantaneous_output_kbps}kps`,
+        });
+        setBaseInfoData(baseinfo);
+
+        const data: VisitDataType[] = res.data.commandStats.map((item) => {
+          return {
+            x: item.name,
+            y: Number(item.value),
+          };
+        });
+
+        setCmdInfoData(data);
+        setMemUsageTitle(res.data.info.used_memory_human);
+        setMemUsage(res.data.info.used_memory / res.data.info.total_system_memory);
+      }
+    });
+  }, []);
+
+  return (
+    <div>
+      <Row gutter={[24, 24]}>
+        <Col span={24}>
+          <Card title="基本信息" className={styles.card}>
+            <Table
+              rowKey="col1"
+              pagination={false}
+              showHeader={false}
+              dataSource={baseInfoData}
+              columns={columns}
+            />
+          </Card>
+        </Col>
+      </Row>
+      <Row gutter={[24, 24]}>
+        <Col span={12}>
+          <Card title="命令统计" className={styles.card}>
+            <Pie
+              height={320}
+              radius={0.8}
+              innerRadius={0.5}
+              angleField="y"
+              colorField="x"
+              data={cmdInfoData as any}
+              legend={false}
+              label={{
+                position: 'spider',
+                text: (item: { x: number; y: number }) => {
+                  return `${item.x}: ${item.y}`;
+                },
+              }}
+            />
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card title="内存信息" className={styles.card}>
+            <Gauge
+              title={memUsageTitle}
+              height={320}
+              percent={memUsage}
+              formatter={usageFormatter}
+              padding={-16}
+              style={{
+                textContent: () => { return memUsage.toFixed(2).toString() + '%'},
+              }}
+              data={
+                {
+                  target: memUsage,
+                  total: 100,
+                  name: 'score',
+                  thresholds: [20, 40, 60, 80, 100],
+                } as any
+              }
+              meta={{
+                color: {
+                  range: ['#C3F71F', '#B5E61D', '#FFC90E', '#FF7F27', '#FF2518'],
+                },
+              }}
+            />
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default CacheInfo;
diff --git a/react-ui/src/pages/Monitor/Druid/index.tsx b/react-ui/src/pages/Monitor/Druid/index.tsx
new file mode 100644
index 0000000..55692d2
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Druid/index.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react'; 
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/07
+ * 
+ * */
+
+const DruidInfo: React.FC = () => {
+  useEffect(() => {
+    const frame = document.getElementById('bdIframe');
+    if (frame) {
+      const deviceWidth = document.documentElement.clientWidth;
+      const deviceHeight = document.documentElement.clientHeight;
+      frame.style.width = `${Number(deviceWidth) - 220}px`;
+      frame.style.height = `${Number(deviceHeight) - 120}px`;
+    }
+  });
+
+  return (
+    <iframe
+      style={{ width: '100%', border: '0px', height: '100%' }}
+      src={`/api/druid/login.html`}
+      id="bdIframe"
+     />
+    // </WrapContent>
+  );
+};
+
+export default DruidInfo;
diff --git a/react-ui/src/pages/Monitor/Job/detail.tsx b/react-ui/src/pages/Monitor/Job/detail.tsx
new file mode 100644
index 0000000..e27bfb7
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Job/detail.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect } from 'react';
+import { Modal, Descriptions, Button } from 'antd';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { getValueEnumLabel } from '@/utils/options';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/07
+ * 
+ * */
+
+export type OperlogFormValueType = Record<string, unknown> & Partial<API.Monitor.Job>;
+
+export type OperlogFormProps = {
+  onCancel: (flag?: boolean, formVals?: OperlogFormValueType) => void;
+  open: boolean;
+  values: Partial<API.Monitor.Job>;
+  statusOptions: DictValueEnumObj;
+};
+
+const OperlogForm: React.FC<OperlogFormProps> = (props) => {
+  const { values, statusOptions } = props;
+
+  useEffect(() => {}, [props]);
+
+  const intl = useIntl();
+
+  const misfirePolicy: any = {
+    '0': '默认策略',
+    '1': '立即执行',
+    '2': '执行一次',
+    '3': '放弃执行',
+  };
+
+  const handleCancel = () => {
+    props.onCancel();
+  };
+
+  return (
+    <Modal
+      width={800}
+      title={intl.formatMessage({
+        id: 'monitor.job.detail',
+        defaultMessage: '操作日志详细信息',
+      })}
+      open={props.open}
+      destroyOnClose
+      onCancel={handleCancel}
+      footer={[
+        <Button key="back" onClick={handleCancel}>
+          关闭
+        </Button>,
+      ]}
+    >
+      <Descriptions column={24}>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.job_id" defaultMessage="任务编号" />}
+        >
+          {values.jobId}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.job_name" defaultMessage="任务名称" />}
+        >
+          {values.jobName}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.job_group" defaultMessage="任务组名" />}
+        >
+          {values.jobGroup}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.concurrent" defaultMessage="是否并发执行" />}
+        >
+          {values.concurrent === '1' ? '禁止' : '允许'}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={
+            <FormattedMessage id="monitor.job.misfire_policy" defaultMessage="计划执行错误策略" />
+          }
+        >
+          {misfirePolicy[values.misfirePolicy ? values.misfirePolicy : '0']}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.create_time" defaultMessage="创建时间" />}
+        >
+          {values.createTime?.toString()}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.status" defaultMessage="状态" />}
+        >
+          {getValueEnumLabel(statusOptions, values.status, '未知')}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={
+            <FormattedMessage id="monitor.job.next_valid_time" defaultMessage="下次执行时间" />
+          }
+        >
+          {values.nextValidTime}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={
+            <FormattedMessage id="monitor.job.cron_expression" defaultMessage="cron执行表达式" />
+          }
+        >
+          {values.cronExpression}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={
+            <FormattedMessage id="monitor.job.invoke_target" defaultMessage="调用目标字符串" />
+          }
+        >
+          {values.invokeTarget}
+        </Descriptions.Item>
+      </Descriptions>
+    </Modal>
+  );
+};
+
+export default OperlogForm;
diff --git a/react-ui/src/pages/Monitor/Job/edit.tsx b/react-ui/src/pages/Monitor/Job/edit.tsx
new file mode 100644
index 0000000..e4bfc74
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Job/edit.tsx
@@ -0,0 +1,232 @@
+import React, { useEffect } from 'react';
+import {
+  ProForm,
+  ProFormDigit,
+  ProFormText,
+  ProFormTextArea,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormCaptcha,
+} from '@ant-design/pro-components';
+import { Form, Modal } from 'antd';
+import { useIntl, FormattedMessage } from '@umijs/max';
+import { DictOptionType, DictValueEnumObj } from '@/components/DictTag';
+
+/**
+ * 定时任务调度 Edit Form
+ * 
+ * @author whiteshader
+ * @date 2023-02-07
+ */
+
+export type JobFormData = Record<string, unknown> & Partial<API.Monitor.Job>;
+
+export type JobFormProps = {
+  onCancel: (flag?: boolean, formVals?: JobFormData) => void;
+  onSubmit: (values: JobFormData) => Promise<void>;
+  open: boolean;
+  values: Partial<API.Monitor.Job>;
+  jobGroupOptions: DictOptionType[];
+  statusOptions: DictValueEnumObj;
+};
+
+const JobForm: React.FC<JobFormProps> = (props) => {
+  const [form] = Form.useForm();
+  const { jobGroupOptions, statusOptions } = props;
+
+  useEffect(() => {
+    form.resetFields();
+    form.setFieldsValue({
+      jobId: props.values.jobId,
+      jobName: props.values.jobName,
+      jobGroup: props.values.jobGroup,
+      invokeTarget: props.values.invokeTarget,
+      cronExpression: props.values.cronExpression,
+      misfirePolicy: props.values.misfirePolicy,
+      concurrent: props.values.concurrent,
+      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();
+    form.resetFields();
+  };
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as JobFormData);
+  };
+
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'monitor.job.title',
+        defaultMessage: '编辑定时任务调度',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <ProForm
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal"
+        onFinish={handleFinish}>
+        <ProFormDigit
+          name="jobId"
+          label={intl.formatMessage({
+            id: 'monitor.job.job_id',
+            defaultMessage: '任务编号',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入任务编号"
+          disabled
+          hidden={true}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入任务编号！" defaultMessage="请输入任务编号！" />,
+            },
+          ]}
+        />
+        <ProFormText
+          name="jobName"
+          label={intl.formatMessage({
+            id: 'monitor.job.job_name',
+            defaultMessage: '任务名称',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入任务名称"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入任务名称！" defaultMessage="请输入任务名称！" />,
+            },
+          ]}
+        />
+        <ProFormSelect
+          name="jobGroup"
+          options={jobGroupOptions}
+          label={intl.formatMessage({
+            id: 'monitor.job.job_group',
+            defaultMessage: '任务组名',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入任务组名"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入任务组名！" defaultMessage="请输入任务组名！" />,
+            },
+          ]}
+        />
+        <ProFormTextArea
+          name="invokeTarget"
+          label={intl.formatMessage({
+            id: 'monitor.job.invoke_target',
+            defaultMessage: '调用目标字符串',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入调用目标字符串"
+          rules={[
+            {
+              required: true,
+              message: <FormattedMessage id="请输入调用目标字符串！" defaultMessage="请输入调用目标字符串！" />,
+            },
+          ]}
+        />
+        <ProFormCaptcha
+          name="cronExpression"
+          label={intl.formatMessage({
+            id: 'monitor.job.cron_expression',
+            defaultMessage: 'cron执行表达式',
+          })}
+          captchaTextRender={() => "生成表达式"}
+          onGetCaptcha={() => {
+            // form.setFieldValue('cronExpression', '0/20 * * * * ?');
+            return new Promise((resolve, reject) => {
+              reject();
+            });
+          }}
+        />
+        <ProFormRadio.Group
+          name="misfirePolicy"
+          label={intl.formatMessage({
+            id: 'monitor.job.misfire_policy',
+            defaultMessage: '计划执行错误策略',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入计划执行错误策略"
+          valueEnum={{
+            0: '立即执行',
+            1: '执行一次',
+            3: '放弃执行'
+          }}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入计划执行错误策略！" defaultMessage="请输入计划执行错误策略！" />,
+            },
+          ]}
+          fieldProps={{
+            optionType: "button",
+            buttonStyle: "solid"
+          }}
+        />
+        <ProFormRadio.Group
+          name="concurrent"
+          label={intl.formatMessage({
+            id: 'monitor.job.concurrent',
+            defaultMessage: '是否并发执行',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入是否并发执行"
+          valueEnum={{
+            0: '允许',
+            1: '禁止',
+          }}
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入是否并发执行！" defaultMessage="请输入是否并发执行！" />,
+            },
+          ]}
+          fieldProps={{
+            optionType: "button",
+            buttonStyle: "solid"
+          }}
+        />
+        <ProFormRadio.Group
+          valueEnum={statusOptions}
+          name="status"
+          label={intl.formatMessage({
+            id: 'monitor.job.status',
+            defaultMessage: '状态',
+          })}
+          colProps={{ md: 24 }}
+          placeholder="请输入状态"
+          rules={[
+            {
+              required: false,
+              message: <FormattedMessage id="请输入状态！" defaultMessage="请输入状态！" />,
+            },
+          ]}
+        />
+      </ProForm>
+    </Modal>
+  );
+};
+
+export default JobForm;
diff --git a/react-ui/src/pages/Monitor/Job/index.tsx b/react-ui/src/pages/Monitor/Job/index.tsx
new file mode 100644
index 0000000..43030d9
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Job/index.tsx
@@ -0,0 +1,460 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess, history } from '@umijs/max';
+import { Dropdown, FormInstance, Space } 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 { getJobList, removeJob, addJob, updateJob, exportJob, runJob } from '@/services/monitor/job';
+import { getDictSelectOption, getDictValueEnum } from '@/services/system/dict';
+import UpdateForm from './edit';
+import DetailForm from './detail';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 定时任务调度 List Page
+ *
+ * @author whiteshader
+ * @date 2023-02-07
+ */
+
+/**
+ * 添加节点
+ *
+ * @param fields
+ */
+const handleAdd = async (fields: API.Monitor.Job) => {
+  const hide = message.loading('正在添加');
+  try {
+    const resp = await addJob({ ...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.Job) => {
+  const hide = message.loading('正在更新');
+  try {
+    const resp = await updateJob(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.Job[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeJob(selectedRows.map((row) => row.jobId).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.Monitor.Job) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.jobId];
+    const resp = await removeJob(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 exportJob();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+
+const JobTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.Monitor.Job>();
+  const [selectedRows, setSelectedRows] = useState<API.Monitor.Job[]>([]);
+
+  const [jobGroupOptions, setJobGroupOptions] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+    getDictSelectOption('sys_job_group').then((data) => {
+      setJobGroupOptions(data);
+    });
+    getDictValueEnum('sys_normal_disable').then((data) => {
+      setStatusOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.Monitor.Job>[] = [
+    {
+      title: <FormattedMessage id="monitor.job.job_id" defaultMessage="任务编号" />,
+      dataIndex: 'jobId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.job.job_name" defaultMessage="任务名称" />,
+      dataIndex: 'jobName',
+      valueType: 'text',
+      render: (dom, record) => {
+        return (
+          <a
+            onClick={() => {
+              setDetailModalVisible(true);
+              setCurrentRow(record);
+            }}
+          >
+            {dom}
+          </a>
+        );
+      },
+    },
+    {
+      title: <FormattedMessage id="monitor.job.job_group" defaultMessage="任务组名" />,
+      dataIndex: 'jobGroup',
+      valueType: 'text',
+      valueEnum: jobGroupOptions,
+      render: (_, record) => {
+        return (<DictTag options={jobGroupOptions} value={record.jobGroup} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="monitor.job.invoke_target" defaultMessage="调用目标字符串" />,
+      dataIndex: 'invokeTarget',
+      valueType: 'textarea',
+    },
+    {
+      title: <FormattedMessage id="monitor.job.cron_expression" defaultMessage="cron执行表达式" />,
+      dataIndex: 'cronExpression',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.job.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"
+          icon = <EditOutlined />
+          hidden={!access.hasPerms('monitor:job:edit')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          icon = <DeleteOutlined />
+          hidden={!access.hasPerms('monitor:job: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: 'runOnce',
+              },
+              {
+                label: '详细',
+                key: 'detail',
+              },
+              {
+                label: '历史',
+                key: 'log',
+              },
+            ],
+            onClick: ({ key }) => {
+              if (key === 'runOnce') {
+                Modal.confirm({
+                  title: '警告',
+                  content: '确认要立即执行一次？',
+                  okText: '确认',
+                  cancelText: '取消',
+                  onOk: async () => {
+                    const success = await runJob(record.jobId, record.jobGroup);
+                    if (success) {
+                      message.success('执行成功');
+                    }
+                  },
+                });
+              }
+              else if (key === 'detail') {
+                setDetailModalVisible(true);
+                setCurrentRow(record);
+              }
+              else if( key === 'log') {
+                history.push(`/monitor/job-log/index/${record.jobId}`);
+              }
+            }
+          }}
+        >
+          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
+            <Space>
+              <DownOutlined />
+              更多
+            </Space>
+          </a>
+        </Dropdown>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.Monitor.Job>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="jobId"
+          key="jobList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('monitor:job: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('monitor:job: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('monitor:job:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          request={(params) =>
+            getJobList({ ...params } as API.Monitor.JobListParams).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:job: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.jobId) {
+            success = await handleUpdate({ ...values } as API.Monitor.Job);
+          } else {
+            success = await handleAdd({ ...values } as API.Monitor.Job);
+          }
+          if (success) {
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            if (actionRef.current) {
+              actionRef.current.reload();
+            }
+          }
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalVisible}
+        values={currentRow || {}}
+        jobGroupOptions={jobGroupOptions||{}}
+        statusOptions={statusOptions}
+      />
+      <DetailForm
+        onCancel={() => {
+          setDetailModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        open={detailModalVisible}
+        values={currentRow || {}}
+        statusOptions={statusOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default JobTableList;
diff --git a/react-ui/src/pages/Monitor/JobLog/detail.tsx b/react-ui/src/pages/Monitor/JobLog/detail.tsx
new file mode 100644
index 0000000..560889c
--- /dev/null
+++ b/react-ui/src/pages/Monitor/JobLog/detail.tsx
@@ -0,0 +1,105 @@
+import { getValueEnumLabel } from '@/utils/options';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Descriptions, Modal } from 'antd';
+import React, { useEffect } from 'react';
+import { DictValueEnumObj } from '@/components/DictTag';
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2021/09/16
+ * 
+ * */
+
+export type JobLogFormValueType = Record<string, unknown> & Partial<API.Monitor.JobLog>;
+
+export type JobLogFormProps = {
+  onCancel: (flag?: boolean, formVals?: JobLogFormValueType) => void;
+  open: boolean;
+  values: Partial<API.Monitor.JobLog>;
+  statusOptions: DictValueEnumObj;
+  jobGroupOptions: DictValueEnumObj;
+};
+
+const JobLogDetailForm: React.FC<JobLogFormProps> = (props) => {
+
+  const { values, statusOptions, jobGroupOptions } = props;
+
+  useEffect(() => {
+  }, []);
+
+  const intl = useIntl();
+  const handleOk = () => {
+  };
+  const handleCancel = () => {
+    props.onCancel();
+  };
+  
+  return (
+    <Modal
+      width={640}
+      title={intl.formatMessage({
+        id: 'monitor.job.log.title',
+        defaultMessage: '定时任务调度日志',
+      })}
+      open={props.open}
+      forceRender
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <Descriptions column={24}>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.job_id" defaultMessage="任务编号" />}
+        >
+          {values.jobLogId}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.create_time" defaultMessage="执行时间" />}
+        >
+          {values.createTime?.toString()}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.job_name" defaultMessage="任务名称" />}
+        >
+          {values.jobName}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.job_group" defaultMessage="任务组名" />}
+        >
+          {getValueEnumLabel(jobGroupOptions, values.jobGroup, '无')}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.job.invoke_target" defaultMessage="调用目标" />}
+        >
+          {values.invokeTarget}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.job.log.job_message" defaultMessage="日志信息" />}
+        >
+          {values.jobMessage}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={24}
+          label={<FormattedMessage id="monitor.job.log.exception_info" defaultMessage="异常信息" />}
+        >
+          {values.exceptionInfo}
+        </Descriptions.Item>
+        <Descriptions.Item
+          span={12}
+          label={<FormattedMessage id="monitor.job.status" defaultMessage="执行状态" />}
+        >
+          {getValueEnumLabel(statusOptions, values.status, '未知')}
+        </Descriptions.Item>
+      </Descriptions>
+    </Modal>
+  );
+};
+
+export default JobLogDetailForm;
diff --git a/react-ui/src/pages/Monitor/JobLog/index.tsx b/react-ui/src/pages/Monitor/JobLog/index.tsx
new file mode 100644
index 0000000..46e3313
--- /dev/null
+++ b/react-ui/src/pages/Monitor/JobLog/index.tsx
@@ -0,0 +1,343 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess, useParams, 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 { getJobLogList, removeJobLog, exportJobLog } from '@/services/monitor/jobLog';
+import DetailForm from './detail';
+import { getDictValueEnum } from '@/services/system/dict';
+import { getJob } from '@/services/monitor/job';
+import DictTag from '@/components/DictTag';
+
+/**
+ * 定时任务调度日志 List Page
+ *
+ * @author whiteshader
+ * @date 2023-02-07
+ */
+
+/**
+ * 删除节点
+ *
+ * @param selectedRows
+ */
+const handleRemove = async (selectedRows: API.Monitor.JobLog[]) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRows) return true;
+  try {
+    const resp = await removeJobLog(selectedRows.map((row) => row.jobLogId).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.Monitor.JobLog) => {
+  const hide = message.loading('正在删除');
+  if (!selectedRow) return true;
+  try {
+    const params = [selectedRow.jobLogId];
+    const resp = await removeJobLog(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 exportJobLog();
+    hide();
+    message.success('导出成功');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('导出失败，请重试');
+    return false;
+  }
+};
+
+
+const JobLogTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+  const actionRef = useRef<ActionType>();
+  const [currentRow, setCurrentRow] = useState<API.Monitor.JobLog>();
+  const [selectedRows, setSelectedRows] = useState<API.Monitor.JobLog[]>([]);
+
+  const [jobGroupOptions, setJobGroupOptions] = useState<any>([]);
+  const [statusOptions, setStatusOptions] = useState<any>([]);
+
+  const [queryParams, setQueryParams] = useState<any>([]);
+
+  const access = useAccess();
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  const params = useParams();
+  if (params.id === undefined) {
+    history.push('/monitor/job');
+  }
+  const jobId = params.id || 0;
+  useEffect(() => {
+    if (jobId !== undefined && jobId !== 0) {
+      getJob(Number(jobId)).then(response => {
+        setQueryParams({
+          jobName: response.data.jobName,
+          jobGroup: response.data.jobGroup
+        });
+      });
+    }
+    getDictValueEnum('sys_job_status').then((data) => {
+      setStatusOptions(data);
+    });
+    getDictValueEnum('sys_job_group').then((data) => {
+      setJobGroupOptions(data);
+    });
+  }, []);
+
+  const columns: ProColumns<API.Monitor.JobLog>[] = [
+    {
+      title: <FormattedMessage id="monitor.job.log.job_log_id" defaultMessage="任务日志编号" />,
+      dataIndex: 'jobLogId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.job.log.job_name" defaultMessage="任务名称" />,
+      dataIndex: 'jobName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.job.log.job_group" defaultMessage="任务组名" />,
+      dataIndex: 'jobGroup',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.job.log.invoke_target" defaultMessage="调用目标字符串" />,
+      dataIndex: 'invokeTarget',
+      valueType: 'textarea',
+    },
+    {
+      title: <FormattedMessage id="monitor.job.log.job_message" defaultMessage="日志信息" />,
+      dataIndex: 'jobMessage',
+      valueType: 'textarea',
+    },
+    {
+      title: <FormattedMessage id="monitor.job.log.status" defaultMessage="执行状态" />,
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: statusOptions,
+      render: (_, record) => {
+        return (<DictTag enums={statusOptions} value={record.status} />);
+      },
+    },
+    {
+      title: <FormattedMessage id="monitor.job.log.create_time" defaultMessage="异常信息" />,
+      dataIndex: 'createTime',
+      valueType: 'text',
+    },
+    {
+      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('monitor:job-log:edit')}
+          onClick={() => {
+            setModalOpen(true);
+            setCurrentRow(record);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          hidden={!access.hasPerms('monitor:job-log: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.Monitor.JobLog>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="jobLogId"
+          key="job-logList"
+          search={{
+            labelWidth: 120,
+          }}
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('monitor:job-log:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalOpen(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
+            </Button>,
+            <Button
+              type="primary"
+              key="remove"
+              danger
+              hidden={selectedRows?.length === 0 || !access.hasPerms('monitor:job-log: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('monitor:job-log:export')}
+              onClick={async () => {
+                handleExport();
+              }}
+            >
+              <PlusOutlined />
+              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
+            </Button>,
+          ]}
+          params={queryParams}
+          request={(params) =>
+            getJobLogList({ ...params } as API.Monitor.JobLogListParams).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:job-log: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>
+      )}
+      <DetailForm
+        onCancel={() => {
+          setModalOpen(false);
+          setCurrentRow(undefined);
+        }}
+        open={modalOpen}
+        values={currentRow || {}}
+        statusOptions={statusOptions}
+        jobGroupOptions={jobGroupOptions}
+      />
+    </PageContainer>
+  );
+};
+
+export default JobLogTableList;
diff --git a/react-ui/src/pages/Monitor/Logininfor/edit.tsx b/react-ui/src/pages/Monitor/Logininfor/edit.tsx
new file mode 100644
index 0000000..5243191
--- /dev/null
+++ b/react-ui/src/pages/Monitor/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/Monitor/Logininfor/index.tsx b/react-ui/src/pages/Monitor/Logininfor/index.tsx
new file mode 100644
index 0000000..5a39281
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Logininfor/index.tsx
@@ -0,0 +1,335 @@
+
+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';
+
+/**
+ * 删除节点
+ *
+ * @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 access = useAccess();
+
+  const statusOptions = {
+    0: {
+      label: '成功',
+      key: '0',
+      value: '0',
+      text: '成功',
+      status: 'success',
+      listClass: 'success'
+    },
+    1: {
+      label: '失败',
+      key: '1',
+      value: '1',
+      text: '失败',
+      status: 'error',
+      listClass: 'danger'
+    },
+  };
+
+  /** 国际化配置 */
+  const intl = useIntl();
+
+  useEffect(() => {
+
+  }, []);
+
+  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',
+      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={selectedRows?.length === 0 || !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/Monitor/Online/index.tsx b/react-ui/src/pages/Monitor/Online/index.tsx
new file mode 100644
index 0000000..2f81e3b
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Online/index.tsx
@@ -0,0 +1,162 @@
+import type { FormInstance } from 'antd';
+import { Button, message, Modal } from 'antd';
+import React, { useRef, useEffect } from 'react';
+import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
+import { getOnlineUserList, forceLogout } from '@/services/monitor/online';
+import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
+import { DeleteOutlined } from '@ant-design/icons';
+ 
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/07
+ * 
+ * */
+
+
+const handleForceLogout = async (selectedRow: API.Monitor.OnlineUserType) => {
+  const hide = message.loading('正在强制下线');
+  try {
+    await forceLogout(selectedRow.tokenId);
+    hide();
+    message.success('强制下线成功，即将刷新');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('强制下线失败，请重试');
+    return false;
+  }
+};
+
+const OnlineUserTableList: React.FC = () => {
+  const formTableRef = useRef<FormInstance>();
+  const actionRef = useRef<ActionType>();
+  const access = useAccess();
+  const intl = useIntl();
+
+  useEffect(() => {}, []);
+
+  const columns: ProColumns<API.Monitor.OnlineUserType>[] = [
+    {
+      title: <FormattedMessage id="monitor.online.user.token_id" defaultMessage="会话编号" />,
+      dataIndex: 'tokenId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.online.user.user_name" defaultMessage="用户账号" />,
+      dataIndex: 'userName',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.online.user.dept_name" defaultMessage="部门名称" />,
+      dataIndex: 'deptName',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.online.user.ipaddr" defaultMessage="登录IP地址" />,
+      dataIndex: 'ipaddr',
+      valueType: 'text',
+    },
+    {
+      title: <FormattedMessage id="monitor.online.user.login_location" defaultMessage="登录地点" />,
+      dataIndex: 'loginLocation',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.online.user.browser" defaultMessage="浏览器类型" />,
+      dataIndex: 'browser',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.online.user.os" defaultMessage="操作系统" />,
+      dataIndex: 'os',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="monitor.online.user.login_time" defaultMessage="登录时间" />,
+      dataIndex: 'loginTime',
+      valueType: 'dateRange',
+      render: (_, record) => <span>{record.loginTime}</span>,
+      hideInSearch: true,
+      search: {
+        transform: (value) => {
+          return {
+            'params[beginTime]': value[0],
+            'params[endTime]': value[1],
+          };
+        },
+      },
+    },
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+      dataIndex: 'option',
+      width: '60px',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          type="link"
+          size="small"
+          danger
+          key="batchRemove"
+          icon=<DeleteOutlined />
+          hidden={!access.hasPerms('monitor:online:forceLogout')}
+          onClick={async () => {
+            Modal.confirm({
+              title: '强踢',
+              content: '确定强制将该用户踢下线吗？',
+              okText: '确认',
+              cancelText: '取消',
+              onOk: async () => {
+                const success = await handleForceLogout(record);
+                if (success) {
+                  if (actionRef.current) {
+                    actionRef.current.reload();
+                  }
+                }
+              },
+            });
+          }}
+        >
+          强退
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.Monitor.OnlineUserType>
+          headerTitle={intl.formatMessage({
+            id: 'pages.searchTable.title',
+            defaultMessage: '信息',
+          })}
+          actionRef={actionRef}
+          formRef={formTableRef}
+          rowKey="tokenId"
+          key="logininforList"
+          search={{
+            labelWidth: 120,
+          }}
+          request={(params) =>
+            getOnlineUserList({ ...params } as API.Monitor.OnlineUserListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          columns={columns}
+        />
+      </div>
+  );
+};
+
+export default OnlineUserTableList;
diff --git a/react-ui/src/pages/Monitor/Operlog/detail.tsx b/react-ui/src/pages/Monitor/Operlog/detail.tsx
new file mode 100644
index 0000000..f247522
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Operlog/detail.tsx
@@ -0,0 +1,113 @@
+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 = () => {};
+  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/Monitor/Operlog/index.tsx b/react-ui/src/pages/Monitor/Operlog/index.tsx
new file mode 100644
index 0000000..9440bc8
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Operlog/index.tsx
@@ -0,0 +1,365 @@
+
+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, 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 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="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/Monitor/Server/index.tsx b/react-ui/src/pages/Monitor/Server/index.tsx
new file mode 100644
index 0000000..9ea3969
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Server/index.tsx
@@ -0,0 +1,267 @@
+import React, { useEffect, useState } from 'react';
+import { getServerInfo } from '@/services/monitor/server';
+import { Card, Col, Row, Table } from 'antd';
+import { FormattedMessage } from '@umijs/max';
+import styles from './style.less';
+
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2023/02/07
+ * 
+ * */
+
+
+const columns = [
+	{
+		title: '属性',
+		dataIndex: 'name',
+		key: 'name',
+	},
+	{
+		title: '值',
+		dataIndex: 'value',
+		key: 'value',
+	},
+];
+
+const memColumns = [
+	{
+		title: '属性',
+		dataIndex: 'name',
+		key: 'name',
+	},
+	{
+		title: '内存',
+		dataIndex: 'mem',
+		key: 'mem',
+	},
+	{
+		title: 'JVM',
+		dataIndex: 'jvm',
+		key: 'jvm',
+	},
+];
+
+const hostColumns = [
+	{
+		title: 'col1',
+		dataIndex: 'col1',
+		key: 'col1',
+	},
+	{
+		title: 'col2',
+		dataIndex: 'col2',
+		key: 'col2',
+	},
+	{
+		title: 'col3',
+		dataIndex: 'col3',
+		key: 'col3',
+	},
+	{
+		title: 'col4',
+		dataIndex: 'col4',
+		key: 'col4',
+	},
+];
+
+const diskColumns = [
+	{
+		title: <FormattedMessage id="monitor.server.disk.dirName" defaultMessage="盘符路径" />,
+		dataIndex: 'dirName',
+		key: 'dirName',
+	},
+	{
+		title: <FormattedMessage id="monitor.server.disk.sysTypeName" defaultMessage="文件系统" />,
+		dataIndex: 'sysTypeName',
+		key: 'sysTypeName',
+	},
+	{
+		title: <FormattedMessage id="monitor.server.disk.typeName" defaultMessage="盘符类型" />,
+		dataIndex: 'typeName',
+		key: 'typeName',
+	},
+	{
+		title: <FormattedMessage id="monitor.server.disk.total" defaultMessage="总大小" />,
+		dataIndex: 'total',
+		key: 'total',
+	},
+	{
+		title: <FormattedMessage id="monitor.server.disk.free" defaultMessage="可用大小" />,
+		dataIndex: 'free',
+		key: 'free',
+	},
+	{
+		title: <FormattedMessage id="monitor.server.disk.used" defaultMessage="已用大小" />,
+		dataIndex: 'used',
+		key: 'used',
+	},
+	{
+		title: <FormattedMessage id="monitor.server.disk.usage" defaultMessage="已用百分比" />,
+		dataIndex: 'usage',
+		key: 'usage',
+	},
+];
+
+const ServerInfo: React.FC = () => {
+	const [cpuData, setCpuData] = useState<API.Monitor.CpuRowType[]>([]);
+	const [memData, setMemData] = useState<API.Monitor.MemRowType[]>([]);
+	const [hostData, setHostData] = useState<any>([]);
+	const [jvmData, setJvmData] = useState<any>([]);
+	const [diskData, setDiskData] = useState<any>([]);
+
+	useEffect(() => {
+		getServerInfo().then((res: API.Monitor.ServerInfoResponseType) => {
+			if (res.code === 200) {
+				// const cpuinfo: CpuRowType[] = [];
+				// Object.keys(res.data.cpu).forEach((item: any) => {
+				//   cpuinfo.push({
+				//     name: item,
+				//     value: res.data.cpu[item],
+				//   });
+				// });
+				// setCpuData(cpuinfo);
+
+				const cpuinfo: API.Monitor.CpuRowType[] = [];
+				cpuinfo.push({ name: '核心数', value: res.data.cpu.cpuNum });
+				cpuinfo.push({ name: '用户使用率', value: `${res.data.cpu.used}%` });
+				cpuinfo.push({ name: '系统使用率', value: `${res.data.cpu.sys}%` });
+				cpuinfo.push({ name: '当前空闲率', value: `${res.data.cpu.free}%` });
+
+				setCpuData(cpuinfo);
+
+				const memDatas: API.Monitor.MemRowType[] = [];
+				memDatas.push({
+					name: '总内存',
+					mem: `${res.data.mem.total}G`,
+					jvm: `${res.data.jvm.total}M`,
+				});
+				memDatas.push({
+					name: '已用内存',
+					mem: `${res.data.mem.used}G`,
+					jvm: `${res.data.jvm.used}M`,
+				});
+				memDatas.push({
+					name: '剩余内存',
+					mem: `${res.data.mem.free}G`,
+					jvm: `${res.data.jvm.free}M`,
+				});
+				memDatas.push({
+					name: '使用率',
+					mem: `${res.data.mem.usage}%`,
+					jvm: `${res.data.jvm.usage}%`,
+				});
+				setMemData(memDatas);
+
+				const hostinfo = [];
+				hostinfo.push({
+					col1: '服务器名称',
+					col2: res.data.sys.computerName,
+					col3: '操作系统',
+					col4: res.data.sys.osName,
+				});
+				hostinfo.push({
+					col1: '服务器IP',
+					col2: res.data.sys.computerIp,
+					col3: '系统架构',
+					col4: res.data.sys.osArch,
+				});
+				setHostData(hostinfo);
+
+				const jvminfo = [];
+				jvminfo.push({
+					col1: 'Java名称',
+					col2: res.data.jvm.name,
+					col3: 'Java版本',
+					col4: res.data.jvm.version,
+				});
+				jvminfo.push({
+					col1: '启动时间',
+					col2: res.data.jvm.startTime,
+					col3: '运行时长',
+					col4: res.data.jvm.runTime,
+				});
+				jvminfo.push({
+					col1: '安装路径',
+					col2: res.data.jvm.home,
+					col3: '项目路径',
+					col4: res.data.sys.userDir,
+				});
+				setJvmData(jvminfo);
+
+				const diskinfo = res.data.sysFiles.map((item: API.Monitor.DiskInfoType) => {
+					return {
+						dirName: item.dirName,
+						sysTypeName: item.sysTypeName,
+						typeName: item.typeName,
+						total: item.total,
+						free: item.free,
+						used: item.used,
+						usage: `${item.usage}%`,
+					};
+				});
+				setDiskData(diskinfo);
+			}
+		});
+	}, []);
+
+	return (
+		<div>
+			<Row gutter={[24, 24]}>
+				<Col span={12}>
+					<Card title="CPU" className={styles.card}>
+						<Table rowKey="name" pagination={false} showHeader={false} dataSource={cpuData} columns={columns} />
+					</Card>
+				</Col>
+				<Col span={12}>
+					<Card title="内存" className={styles.card}>
+						<Table
+							rowKey="name"
+							pagination={false}
+							showHeader={false}
+							dataSource={memData}
+							columns={memColumns}
+						/>
+					</Card>
+				</Col>
+			</Row>
+			<Row gutter={[16, 16]}>
+				<Col span={24}>
+					<Card title="服务器信息" className={styles.card}>
+						<Table
+							rowKey="col1"
+							pagination={false}
+							showHeader={false}
+							dataSource={hostData}
+							columns={hostColumns}
+						/>
+					</Card>
+				</Col>
+			</Row>
+			<Row gutter={[16, 16]}>
+				<Col span={24}>
+					<Card title="Java虚拟机信息" className={styles.card}>
+						<Table
+							rowKey="col1"
+							pagination={false}
+							showHeader={false}
+							dataSource={jvmData}
+							columns={hostColumns}
+						/>
+					</Card>
+				</Col>
+			</Row>
+			<Row gutter={[16, 16]}>
+				<Col span={24}>
+					<Card title="磁盘状态" className={styles.card}>
+						<Table rowKey="dirName" pagination={false} dataSource={diskData} columns={diskColumns} />
+					</Card>
+				</Col>
+			</Row>
+		</div>
+	);
+};
+
+export default ServerInfo;
diff --git a/react-ui/src/pages/Monitor/Server/style.less b/react-ui/src/pages/Monitor/Server/style.less
new file mode 100644
index 0000000..d244a53
--- /dev/null
+++ b/react-ui/src/pages/Monitor/Server/style.less
@@ -0,0 +1,11 @@
+
+/* *
+ *
+ * @author whiteshader@163.com
+ * @datetime  2021/09/16
+ * 
+ * */
+
+.card {
+  margin-bottom: 12px;
+}