feat: refactor app upgrade

TrumanDu · TrumanDu · commit 484d922e704a · 2024-12-30T18:03:56.000+08:00
diff --git a/src/main/app_updater.ts b/src/main/app_updater.ts
@@ -1,40 +1,98 @@
-import { dialog } from 'electron';
+/* eslint-disable class-methods-use-this */
+import { dialog, BrowserWindow } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 
 export default class AppUpdater {
-  constructor() {
+  private mainWindow: BrowserWindow;
+
+  constructor(window: BrowserWindow) {
+    this.mainWindow = window;
+    this.init();
+  }
+
+  private init() {
     log.transports.file.level = 'info';
     autoUpdater.logger = log;
-    autoUpdater.checkForUpdatesAndNotify();
+
+    // 检查更新出错
     autoUpdater.on('error', (error) => {
       log.error(['检查更新失败', error]);
+      dialog.showErrorBox('更新出错', error.message);
     });
-    autoUpdater.on('update-available', (info) => {
-      log.info('检查到有更新，开始下载新版本');
-      log.info(info);
+
+    // 检测到新版本
+    autoUpdater.on('update-available', async (info) => {
+      log.info('检测到新版本:', info);
+
+      // 显示更新确认对话框
+      const { response } = await dialog.showMessageBox({
+        type: 'info',
+        title: '发现新版本',
+        message: `发现新版本 ${info.version}\n是否现在更新?`,
+        detail: info.releaseNotes?.toString() || '暂无更新说明',
+        buttons: ['现在更新', '暂不更新'],
+        cancelId: 1,
+      });
+
+      if (response === 0) {
+        // 用户同意更新，开始下载
+        autoUpdater.downloadUpdate();
+
+        // 显示进度条窗口
+        this.mainWindow.webContents.send('show-progress-window');
+      }
     });
+
+    // 没有可用更新
     autoUpdater.on('update-not-available', () => {
-      log.info('没有可用更新');
+      log.info('当前已是最新版本');
+      dialog.showMessageBox({
+        title: '检查更新',
+        message: '当前已是最新版本',
+      });
     });
-    // 在更新下载完成的时候触发。
-    autoUpdater.on('update-downloaded', (res) => {
-      log.info('下载完毕！提示安装更新');
-      log.info(res);
-      dialog
-        .showMessageBox({
-          title: '升级提示！',
-          message: '已为您下载最新应用，点击确定马上替换为最新版本！',
-        })
-        .then(() => {
-          log.info('退出应用，安装开始！');
-          // 重启应用并在下载后安装更新。 它只应在发出 update-downloaded 后方可被调用。
-          autoUpdater.quitAndInstall();
-          return null;
-        })
-        .catch((e) => {
-          log.error(e);
-        });
+
+    // 更新下载进度
+    autoUpdater.on('download-progress', (progressObj) => {
+      this.mainWindow.webContents.send('update-progress', {
+        percent: progressObj.percent,
+        transferred: progressObj.transferred,
+        total: progressObj.total,
+        bytesPerSecond: progressObj.bytesPerSecond,
+      });
+    });
+
+    // 更新下载完成
+    autoUpdater.on('update-downloaded', async (info) => {
+      log.info('更新包下载完成:', info);
+
+      // 关闭进度条窗口
+      this.mainWindow.webContents.send('close-progress-window');
+
+      // 显示安装确认对话框
+      const { response } = await dialog.showMessageBox({
+        type: 'info',
+        title: '更新就绪',
+        message: '新版本已下载完成，是否现在安装？',
+        detail: '点击确定将重启应用并安装更新',
+        buttons: ['现在安装', '稍后安装'],
+        cancelId: 1,
+      });
+
+      if (response === 0) {
+        // 用户同意安装，退出并安装
+        log.info('开始安装更新...');
+        autoUpdater.quitAndInstall(false, true);
+      }
+    });
+  }
+
+  // 检查更新
+  public checkForUpdates(): void {
+    log.info('开始检查更新...');
+    autoUpdater.checkForUpdates().catch((error: Error) => {
+      log.error('检查更新失败:', error);
     });
   }
 }
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -61,9 +61,8 @@ const createWindow = async () => {
     await installExtensions();
   }
 
-  // eslint-disable-next-line no-new
-  new AppUpdater();
   dashboardWindow = await createDashboardWindow();
+  new AppUpdater(dashboardWindow);
   const api = new API(dashboardWindow, initCheck);
   api.listen();
   // 创建系统托盘图标
diff --git a/src/renderer/Dashboard/components/UpdateProgress.tsx b/src/renderer/Dashboard/components/UpdateProgress.tsx
@@ -0,0 +1,29 @@
+import { Modal, Progress } from 'antd';
+
+interface UpdateProgressProps {
+  visible: boolean;
+  progress: number;
+  status: {
+    transferred: number;
+    total: number;
+    bytesPerSecond: number;
+  };
+}
+
+function UpdateProgress({ visible, progress, status }: UpdateProgressProps) {
+  return (
+    <Modal title="下载更新" open={visible} footer={null} closable={false}>
+      <Progress percent={progress} status="active" />
+      <div style={{ marginTop: 10 }}>
+        已下载: {(status.transferred / 1024 / 1024).toFixed(2)} MB / 总大小:{' '}
+        {(status.total / 1024 / 1024).toFixed(2)} MB
+        <br />
+        下载速度: {(status.bytesPerSecond / 1024 / 1024).toFixed(
+          2,
+        )} MB/s
+      </div>
+    </Modal>
+  );
+}
+
+export default UpdateProgress;
diff --git a/src/renderer/Dashboard/index.tsx b/src/renderer/Dashboard/index.tsx
@@ -52,6 +52,7 @@ import {
 import { Footer } from 'antd/es/layout/layout';
 import Meta from 'antd/es/card/Meta';
 import baiduAnalyticsRenderer from './baiduAnalytics';
+import UpdateProgress from './components/UpdateProgress';
 
 const { Title } = Typography;
 const { Sider, Content } = Layout;
@@ -68,6 +69,13 @@ function Dashboard() {
   const [installing, setInstalling] = useState(new Map());
   const [selectPluginName, setSelectPluginName] = useState('');
   const [setting, SetSetting] = useState(null);
+  const [progressVisible, setProgressVisible] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [progressStatus, setProgressStatus] = useState({
+    transferred: 0,
+    total: 0,
+    bytesPerSecond: 0,
+  });
 
   const refreshResult = (plugins: any[]) => {
     if (plugins.length == 0) {
@@ -196,6 +204,26 @@ function Dashboard() {
       }
     };
     baiduAnalytics();
+
+    // 监听显示进度条窗口
+    window.electron.ipcRenderer.on('show-progress-window', () => {
+      setProgressVisible(true);
+    });
+
+    // 监听更新进度
+    window.electron.ipcRenderer.on('update-progress', (data: any) => {
+      setProgress(Math.floor(data.percent));
+      setProgressStatus({
+        transferred: data.transferred,
+        total: data.total,
+        bytesPerSecond: data.bytesPerSecond,
+      });
+    });
+
+    // 监听关闭进度条窗口
+    window.electron.ipcRenderer.on('close-progress-window', () => {
+      setProgressVisible(false);
+    });
   }, []);
 
   const onMenu = (item: any) => {
@@ -569,6 +597,11 @@ function Dashboard() {
           <a href="https://www.trumandu.top">TrumanDu</a>
         </Footer>
       </Layout>
+      <UpdateProgress
+        visible={progressVisible}
+        progress={progress}
+        status={progressStatus}
+      />
     </Layout>
   );
 }
