main.js

@@ -517,6 +517,11 @@ app.on('ready', () => {
                 downloadUpdate()
             } else if (data === '2') { // 下载完成 点击安装
                 quitAndInstall()
+            } else if (data === '3') { // 打开弹窗
+                let message = JSON.stringify({
+                    type: '3',
+                })
+                sendUpdateMessage(message)
             }
         });
         // 选择文件夹
@@ -766,9 +771,14 @@ function updateHandle() {
     autoUpdater.on('update-available', function (info) {
         let messageStr = JSON.stringify({ type: '0' })
         sendUpdateMessage(messageStr)
+        mainWindow.webContents.send('changeLocalStorage', {
+            isUpdate: true,
+        });
     })
     autoUpdater.on('update-not-available', function (info) {
-
+        mainWindow.webContents.send('changeLocalStorage', {
+            isUpdate: false,
+        });
     })
     // 更新下载进度事件
     autoUpdater.on('download-progress', function (progressObj) {

src/components/UpdateModal/index.tsx

@@ -4,7 +4,7 @@ import { getUpdateUrl } from '@/utils/package/public';
 import { Button, Flex, Modal, Progress } from 'antd';
 import { forwardRef, useImperativeHandle, useState, memo } from "react";
 
-const UpdateModal = forwardRef((props: any, ref: any) => {
+const UpdateModal = forwardRef((_props: any, ref: any) => {
     useImperativeHandle(ref, () => ({
         changeModal: (data: any) => {
             try {
@@ -30,6 +30,9 @@ const UpdateModal = forwardRef((props: any, ref: any) => {
                         setIsUpdateModal(true)
                     }
                     setProgress(100)
+                } else if (dataJson.type === '3') {
+                    getContent()
+                    setIsUpdateModal(true)
                 }
             } catch (error) {
 
@@ -51,9 +54,9 @@ const UpdateModal = forwardRef((props: any, ref: any) => {
                 }
                 throw new Error('Network response was not ok.');
             })
-            .then(textContent => {
+            .then(_textContent => {
             })
-            .catch(error => {
+            .catch(_error => {
             });
     }
 

src/page/Home/index.module.scss

@@ -120,8 +120,25 @@
 
         @else if $i ==4 {
           flex-shrink: 0;
+
+          >div:nth-child(1) {
             color: #ccc;
             font-size: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            >span:nth-child(2) {
+              background-color: red;
+              padding: 2px 8px;
+              border-radius: 10px;
+            }
+          }
+
+          >div:nth-child(2) {
+            width: 100%;
+            margin-top: 10px;
+          }
         }
 
         @else if $i ==5 {

src/page/Home/index.tsx

@@ -1,7 +1,7 @@
 import styles from '@/page/Home/index.module.scss'
 import { useEffect, useState, useRef } from "react";
 import { Outlet, useNavigate } from 'react-router-dom';
-import { Popconfirm, Popover } from 'antd';
+import { Button, Popconfirm, Popover } from 'antd';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn'
 import { storage } from '@/utils';
@@ -45,6 +45,7 @@ const Home: React.FC = () => {
   ]);
   const [userInfo, setUserInfo] = useState<any>({})
   const [version, setVersion] = useState<string>('')
+  const [update, setUpdate] = useState(false)
   const [dateInfo, setDateInfo] = useState<{
     work: string;
     time: string;
@@ -67,11 +68,18 @@ const Home: React.FC = () => {
       })
     };
     const timer = setInterval(updateTime, 1000);
+    window.addEventListener('customStorageChange', handleCustomStorageChange);
     return () => {
+      window.removeEventListener('customStorageChange', handleCustomStorageChange);
       clearInterval(timer);
     };
   }, []);
 
+  const handleCustomStorageChange = (e: any): void => {
+    if (e.key === 'isUpdate') {
+      setUpdate(e.value)
+    }
+  };
   const changtNavList = (index: number, bool?: boolean): void => {
     const newNavList = [...navList];
     if (typeof bool === 'boolean') {
@@ -126,9 +134,16 @@ const Home: React.FC = () => {
               )
             })}
           </div>
+          <div className='drag'>
             <div>
               <span>版本号:{version}</span>
-            {/* <span>new</span> */}
+              {update ? <span>new</span> : null}
+            </div>
+            {update ? <div>
+              <Button type="primary" className='m-ant-btn' style={{ width: '100%' }} onClick={() => {
+                window.electron.onDownload('3')
+              }}>立即更新</Button>
+            </div> : null}
           </div>
           <div>
             <Popover