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

src/layouts/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import ProLayout, { PageLoading } from '@ant-design/pro-layout';
 import {
   enable as enableDarkMode,
@@ -16,6 +16,8 @@ import vhCheck from 'vh-check';
 import { version, changeLogLink, changeLog } from '../version';
 import { useCtx, useTheme } from '@/utils/hooks';
 import { message, Badge, Modal } from 'antd';
+// @ts-ignore
+import SockJS from 'sockjs-client';
 
 export default function (props: any) {
   const ctx = useCtx();
@@ -23,6 +25,7 @@ export default function (props: any) {
   const [user, setUser] = useState<any>();
   const [loading, setLoading] = useState<boolean>(true);
   const [systemInfo, setSystemInfo] = useState<{ isInitialized: boolean }>();
+  const ws = useRef<any>(null);
 
   const logout = () => {
     request.post(`${config.apiPrefix}logout`).then(() => {
@@ -152,12 +155,44 @@ export default function (props: any) {
     }
   }, []);
 
+  useEffect(() => {
+    ws.current = new SockJS(
+      `http://127.0.0.1:5600/ws?token=${localStorage.getItem(config.authKey)}`,
+    );
+    ws.current.onopen = () => {
+      console.log('ws opened');
+    };
+
+    ws.current.onclose = () => console.log('ws closed');
+    const wsCurrent = ws.current;
+
+    return () => {
+      wsCurrent.close();
+    };
+  }, []);
+
   if (['/login', '/initialization'].includes(props.location.pathname)) {
     document.title = `${
       (config.documentTitleMap as any)[props.location.pathname]
     } - 控制面板`;
+    if (
+      systemInfo?.isInitialized &&
+      props.location.pathname === '/initialization'
+    ) {
+      history.push('/crontab');
+    }
+
     if (systemInfo) {
-      return props.children;
+      return React.Children.map(props.children, (child) => {
+        return React.cloneElement(child, {
+          ...ctx,
+          ...theme,
+          user,
+          reloadUser,
+          reloadTheme: setTheme,
+          ws: ws.current,
+        });
+      });
     }
   }
 
@@ -247,6 +282,7 @@ export default function (props: any) {
           user,
           reloadUser,
           reloadTheme: setTheme,
+          ws: ws.current,
         });
       })}
     </ProLayout>

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>