完成关于页面的升级

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "automate",
-  "version": "2.2.2",
+  "version": "2.2.1",
   "description": "An Electron application with React and TypeScript",
   "main": "./out/main/index.js",
   "author": "example.com",

app/src/main/autoUpdater.ts

@@ -1,66 +0,0 @@
-import { is } from '@electron-toolkit/utils'
-import { BrowserWindow, dialog, shell } from 'electron'
-import { autoUpdater } from 'electron-updater'
-//自动下载更新
-autoUpdater.autoDownload = false
-//退出时自动安装更新
-autoUpdater.autoInstallOnAppQuit = false
-
-export default (win: BrowserWindow) => {
-  //检查是否有更新
-  if (!is.dev) autoUpdater.checkForUpdates()
-
-  //有新版本时
-  autoUpdater.on('update-available', (_info) => {
-    dialog
-      .showMessageBox({
-        type: 'warning',
-        title: '更新提示',
-        message: '有新版本发布了',
-        buttons: ['更新', '取消'],
-        cancelId: 1
-      })
-      .then((res) => {
-        if (res.response == 0) {
-          //开始下载更新
-          autoUpdater.downloadUpdate()
-        }
-      })
-  })
-
-  //没有新版本时
-  autoUpdater.on('update-not-available', (_info) => {
-    // dialog.showMessageBox({
-    //   type: 'info',
-    //   message: `你已经是最新版本`
-    // })
-  })
-
-  //更新下载完毕
-  autoUpdater.on('update-downloaded', (_info) => {
-    //退出并安装更新
-    autoUpdater.quitAndInstall()
-  })
-
-  //更新发生错误
-  autoUpdater.on('error', (_info) => {
-    dialog
-      .showMessageBox({
-        type: 'warning',
-        title: '更新提示',
-        message: `软件更新失败,消息为：${_info.message}`,
-        buttons: ['网站下载', '取消更新'],
-        cancelId: 1
-      })
-      .then((res) => {
-        if (res.response == 0) {
-          shell.openExternal('https://github.com/yuruotong1/autoMate/releases')
-        }
-      })
-  })
-
-  // 监听下载进度
-  autoUpdater.on('download-progress', (progress) => {
-    win.webContents.send('downloadProgress', progress)
-  })
-}

app/src/main/ipc.ts

@@ -1,5 +1,7 @@
 import {app, ipcMain, IpcMainEvent } from "electron"
 import { getWindowByName, getWindowByEvent} from "./windows"
+import { autoUpdater } from 'electron-updater'
+
 
 ipcMain.on('openWindow', (_event: IpcMainEvent, name: WindowNameType, router_url="") => {
     const win = getWindowByName(name, router_url)
@@ -17,4 +19,38 @@ ipcMain.on('setIgnoreMouseEvents',
 
 ipcMain.handle('getVersion', async (_event) => {
     return app.getVersion()
+})
+
+ipcMain.on('checkUpdate', (event) => {
+    //自动下载更新
+    autoUpdater.autoDownload = false
+    //退出时自动安装更新
+    autoUpdater.autoInstallOnAppQuit = true
+    const win = getWindowByEvent(event);
+    autoUpdater.checkForUpdates();
+    win.webContents.send('updateInfo', `正在检查更新...`)
+    autoUpdater.on('update-available', (_info) => {
+        win.webContents.send('updateInfo', `发现新的版本!}`)
+        autoUpdater.downloadUpdate()
+        })
+
+    //没有新版本时
+  autoUpdater.on('update-not-available', (_info) => {
+    win.webContents.send('updateInfo', '当前为最新版本')
+  })
+
+    autoUpdater.on('update-downloaded', async () => {
+        win.webContents.send('updateInfo', `下载完成，请重启程序完成更新！`)
+    });
+
+      // 监听下载进度
+  autoUpdater.on('download-progress', (progress) => {
+    win.webContents.send('updateInfo', `发现新的版本，下载进度: ${progress.percent}%`)
+  })
+
+    //更新发生错误
+    autoUpdater.on('error', (info) => {
+        win.webContents.send('updateInfo', `软件更新失败,消息为：${info.message}\n请手动下载最新版本\nhttps://github.com/yuruotong1/autoMate/releases`)
+      })
+    
 })

app/src/main/windows.ts

@@ -2,7 +2,6 @@ import { BrowserWindow, IpcMainEvent, IpcMainInvokeEvent, Menu, Tray, app } from
 import { OptionsType, createWindow} from "./createWindow"
 const { exec } = require('child_process');
 import { is } from '@electron-toolkit/utils'
-import autoUpdater from './autoUpdater'
 export const config = {
     search: {
         id: 0,
@@ -39,10 +38,10 @@ export const config = {
     about: {
         id: 0,
         options: {
-            initShow: true,
-            width: 830,
-            height: 670,
-            openDevTools: true,
+            initShow: false,
+            width: 500,
+            height: 300,
+            openDevTools: false,
             frame: true,
             transparent: false,
             hash: '/#about'
@@ -122,9 +121,7 @@ app.whenReady().then(() => {
         console.error(`stderr: ${stderr}`);
       });}
     
-    autoUpdater(win)
-    
     // getWindowByName('code')
-    // getWindowByName('config')
+    // getWindowByName('about')
 
 })

app/src/preload/index.d.ts

@@ -8,12 +8,14 @@ declare global {
       shortcut: () => Promise<boolean>,
       setIgnoreMouseEvents: (ignore: boolean, options?: { forward: boolean }) => void,
       openConfigWindow: () => void,
-      sql: <T>(sql: string, type: SqlActionType, params?: Record<string, any>) => Promise<T>
+      sql: <T>(sql: string, type: SqlActionType, params?: Record<string, any>) => Promise<T>,
       openWindow: (name: WindowNameType, router_url?: string) => BrowserWindow,
       closeWindow: (name: WindowNameType) => void,
       initTable: () => void,
-      getConfig: () => Promise<ConfigType>
-      getVersion: () => string
+      getConfig: () => Promise<ConfigType>,
+      getVersion: () => Promise<string>,
+      checkUpdate: () => void,
+      updateInfo: (fn: (value: string) => void) => void,
     }
   }
 }

app/src/preload/index.ts

@@ -28,13 +28,19 @@ const api = {
   getConfig: () => {
     return (ipcRenderer.invoke("getConfig") as Promise<ConfigType>)
   },
-  getVersion: async() => {
-
-    const version = await ipcRenderer.invoke("getVersion")
-    return version
+  getVersion: () => {
+    return ipcRenderer.invoke("getVersion")
+  },
+  checkUpdate: () => {
+    ipcRenderer.send("checkUpdate")
+  },
+  updateInfo: (fn: (value: string) => void)=> {
+    ipcRenderer.on("updateInfo", (_event, value)=> fn(value))
   }
 }
 
+
+
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
 // just add to the DOM global.
@@ -42,6 +48,7 @@ if (process.contextIsolated) {
   try {
     contextBridge.exposeInMainWorld('electron', electronAPI)
     contextBridge.exposeInMainWorld('api', api)
+  
   } catch (error) {
     console.error(error)
   }

app/src/renderer/src/layouts/About/index.tsx

@@ -2,18 +2,31 @@ import { useEffect, useState } from "react";
 
 function About() {
     const [version, setVersion] = useState('');
+    const [updateInfo, setUpdateInfo] = useState('');
+    window.api.updateInfo((value)=>{
+        setUpdateInfo(value)
+    })
     useEffect(() => {
-    async function fetchVersion() {
-        const version = await window.api.getVersion();
-        setVersion(version);
-    }
-    fetchVersion();
+        window.api.checkUpdate();
+        
+        window.api.getVersion().then((res) => {
+            setVersion(res)
+        })
     }, []);
-  return (
-    <h5>
-      autoMate v{version}
-    </h5>
-  );
+    
+    return (
+        <main className="flex items-center justify-center h-screen">
+            <div className="flex flex-col items-center">
+                <h1 className="text-2xl">
+                    autoMate
+                </h1>
+                v{version}
+                <div className="text-sm mt-5">
+                    {updateInfo}
+                </div>
+            </div>
+        </main>
+    );
 }
 
 export default About;