添加依赖管理

src/pages/setting/checkUpdate.tsx

@@ -6,8 +6,9 @@ import { version } from '../../version';
 
 const { Countdown } = Statistic;
 
-const CheckUpdate = ({ ws }: any) => {
+const CheckUpdate = ({ socketMessage }: any) => {
   const [updateLoading, setUpdateLoading] = useState(false);
+  const [value, setValue] = useState('');
   const modalRef = useRef<any>();
 
   const checkUpgrade = () => {
@@ -95,7 +96,7 @@ const CheckUpdate = ({ ws }: any) => {
               fontWeight: 400,
             }}
           >
-            更新中...
+            {value}
           </pre>
         </div>
       ),
@@ -103,55 +104,60 @@ const CheckUpdate = ({ ws }: any) => {
   };
 
   useEffect(() => {
-    let _message = '';
-    ws.onmessage = (e: any) => {
-      if (!modalRef.current) {
-        return;
-      }
-      _message = `${_message}\n${e.data}`;
-      modalRef.current.update({
-        content: (
-          <div style={{ height: '60vh', overflowY: 'auto' }}>
-            <pre
-              style={{
-                wordBreak: 'break-all',
-                whiteSpace: 'pre-wrap',
-                fontSize: 12,
-                fontWeight: 400,
-              }}
-            >
-              {_message}
-            </pre>
-            <div id="log-identifier" style={{ paddingBottom: 5 }}></div>
-          </div>
-        ),
-      });
-      document.getElementById('log-identifier') &&
-        document
-          .getElementById('log-identifier')!
-          .scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    if (!modalRef.current || !socketMessage) {
+      return;
+    }
+    const { type, message, references } = socketMessage;
 
-      if (e.data.includes('重启面板')) {
-        message.warning({
-          content: (
-            <span>
-              系统将在
-              <Countdown
-                className="inline-countdown"
-                format="ss"
-                value={Date.now() + 1000 * 10}
-              />
-              秒后自动刷新
-            </span>
-          ),
-          duration: 10,
-        });
-        setTimeout(() => {
-          window.location.reload();
-        }, 10000);
-      }
-    };
-  }, []);
+    if (type !== 'updateSystemVersion') {
+      return;
+    }
+
+    const newMessage = `${value} \n ${message}`;
+    modalRef.current.update({
+      content: (
+        <div style={{ height: '60vh', overflowY: 'auto' }}>
+          <pre
+            style={{
+              wordBreak: 'break-all',
+              whiteSpace: 'pre-wrap',
+              fontSize: 12,
+              fontWeight: 400,
+            }}
+          >
+            {newMessage}
+          </pre>
+          <div id="log-identifier" style={{ paddingBottom: 5 }}></div>
+        </div>
+      ),
+    });
+    setValue(newMessage);
+
+    document.getElementById('log-identifier') &&
+      document
+        .getElementById('log-identifier')!
+        .scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+    if (newMessage.includes('重启面板')) {
+      message.warning({
+        content: (
+          <span>
+            系统将在
+            <Countdown
+              className="inline-countdown"
+              format="ss"
+              value={Date.now() + 1000 * 10}
+            />
+            秒后自动刷新
+          </span>
+        ),
+        duration: 10,
+      });
+      setTimeout(() => {
+        window.location.reload();
+      }, 10000);
+    }
+  }, [socketMessage]);
 
   return (
     <>

src/pages/setting/index.tsx

@@ -47,7 +47,7 @@ const Setting = ({
   user,
   reloadUser,
   reloadTheme,
-  ws,
+  socketMessage,
 }: any) => {
   const columns = [
     {
@@ -377,7 +377,7 @@ const Setting = ({
               />
             </Form.Item>
             <Form.Item label="检查更新" name="update">
-              <CheckUpdate ws={ws} />
+              <CheckUpdate socketMessage={socketMessage} />
             </Form.Item>
           </Form>
         </Tabs.TabPane>