添加系统更新操作和设置删除日志频率

src/pages/initialization/index.tsx

@@ -19,7 +19,7 @@ const { Step } = Steps;
 const { Option } = Select;
 const { Link } = Typography;
 
-const Login = () => {
+const Initialization = () => {
   const [loading, setLoading] = useState(false);
   const [current, setCurrent] = React.useState(0);
   const [fields, setFields] = useState<any[]>([]);
@@ -241,4 +241,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default Initialization;

src/pages/setting/checkUpdate.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Typography, Modal, Tag, Button, Spin, message } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import { version } from '../../version';
+
+const { Text, Link } = Typography;
+
+const CheckUpdate = ({ ws }: any) => {
+  const [updateLoading, setUpdateLoading] = useState(false);
+  const [value, setValue] = useState('');
+  const modalRef = useRef<any>();
+
+  const checkUpgrade = () => {
+    if (updateLoading) return;
+    setUpdateLoading(true);
+    const hide = message.loading('检查更新中...', 0);
+    request
+      .put(`${config.apiPrefix}system/update-check`)
+      .then((_data: any) => {
+        const { code, data } = _data;
+        if (code === 200 && !data.hasNewVersion) {
+          showConfirmUpdateModal(data);
+        } else {
+          message.success('已经是最新版了！');
+        }
+      })
+      .catch((error: any) => {
+        console.log(error);
+      })
+      .finally(() => {
+        setUpdateLoading(false);
+        hide();
+      });
+  };
+
+  const showConfirmUpdateModal = (data: any) => {
+    const { version: newVersion, changeLog } = data;
+    Modal.confirm({
+      width: 500,
+      title: (
+        <>
+          <div>更新可用</div>
+          <div style={{ fontSize: 12, fontWeight: 400, marginTop: 5 }}>
+            新版本{newVersion}可用。你使用的版本为{version}。
+          </div>
+        </>
+      ),
+      content: (
+        <pre
+          style={{
+            wordBreak: 'break-all',
+            whiteSpace: 'pre-wrap',
+            paddingTop: 15,
+            fontSize: 12,
+            fontWeight: 400,
+          }}
+        >
+          {changeLog}
+        </pre>
+      ),
+      okText: '更新',
+      cancelText: '以后再说',
+      onOk() {
+        showUpdatingModal();
+        request
+          .put(`${config.apiPrefix}system/update`)
+          .then((_data: any) => {})
+          .catch((error: any) => {
+            console.log(error);
+          });
+      },
+    });
+  };
+
+  const showUpdatingModal = () => {
+    modalRef.current = Modal.info({
+      width: 600,
+      maskClosable: false,
+      closable: false,
+      okButtonProps: { disabled: true },
+      title: <span></span>,
+      centered: true,
+      content: (
+        <pre
+          style={{
+            wordBreak: 'break-all',
+            whiteSpace: 'pre-wrap',
+            paddingTop: 15,
+            fontSize: 12,
+            fontWeight: 400,
+            minHeight: '60vh',
+          }}
+        >
+          {value}
+        </pre>
+      ),
+    });
+  };
+
+  useEffect(() => {
+    ws.onmessage = (e) => {
+      modalRef.current.update({
+        content: (
+          <pre
+            style={{
+              wordBreak: 'break-all',
+              whiteSpace: 'pre-wrap',
+              paddingTop: 15,
+              fontSize: 12,
+              fontWeight: 400,
+              minHeight: '60vh',
+            }}
+          >
+            {e.data + value}
+          </pre>
+        ),
+      });
+      setValue(e.data);
+    };
+  }, []);
+
+  return (
+    <>
+      {value}
+      <Button type="primary" onClick={checkUpgrade}>
+        检查更新
+      </Button>
+    </>
+  );
+};
+
+export default CheckUpdate;

src/pages/setting/index.tsx

@@ -31,6 +31,7 @@ import {
 import SecuritySettings from './security';
 import LoginLog from './loginLog';
 import NotificationSetting from './notification';
+import CheckUpdate from './checkUpdate';
 
 const { Text } = Typography;
 const optionsWithDisabled = [
@@ -45,6 +46,7 @@ const Setting = ({
   user,
   reloadUser,
   reloadTheme,
+  ws,
 }: any) => {
   const columns = [
     {
@@ -328,11 +330,16 @@ const Setting = ({
                 buttonStyle="solid"
               />
             </Form.Item>
-            <Form.Item label="日志删除频率" name="frequency" initialValue={0}>
-              <Input addonBefore="每" addonAfter="天" style={{ width: 300 }} />
+            <Form.Item
+              label="日志删除频率"
+              name="frequency"
+              initialValue={0}
+              tooltip="每x天自动删除x天以前的日志"
+            >
+              <Input addonBefore="每" addonAfter="天" style={{ width: 150 }} />
             </Form.Item>
-            <Form.Item label="检查更新" name="theme" initialValue={theme}>
-              <Button type="primary">检查更新</Button>
+            <Form.Item label="检查更新" name="update">
+              <CheckUpdate ws={ws} />
             </Form.Item>
           </Form>
         </Tabs.TabPane>