✨ Feature(custom): add custom update page

2026-05-06 20:42:57 +08:00 · 2026-01-09 15:51:49 +08:00
parent 357b8cc55b
commit a29c1fa93c
20 changed files with 1514 additions and 768 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,9 @@ docs/dist/
 !/build/icons/
 !/build/installer.nsh
 release-notes.md
+.github/prompts
+.shared/
+dev-app-update.yml

 test.js
 scripts/*.yml
--- a/package.json
+++ b/package.json
@@ -41,13 +41,13 @@
    "winget": "node ./scripts/auto-winget.js"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.962.0",
-    "@aws-sdk/lib-storage": "^3.962.0",
-    "@aws-sdk/s3-request-presigner": "^3.962.0",
+    "@aws-sdk/client-s3": "^3.965.0",
+    "@aws-sdk/lib-storage": "^3.965.0",
+    "@aws-sdk/s3-request-presigner": "^3.965.0",
    "@nodelib/fs.walk": "^3.0.1",
    "@octokit/rest": "^22.0.1",
    "@piclist/i18n": "^2.0.0",
-    "@piclist/store": "^3.0.0",
+    "@piclist/store": "^3.0.1",
    "@smithy/node-http-handler": "^4.4.7",
    "@vueuse/core": "^14.1.0",
    "ali-oss": "^6.23.0",
@@ -56,7 +56,7 @@
    "compare-versions": "^6.1.1",
    "cos-nodejs-sdk-v5": "^2.15.4",
    "dayjs": "^1.11.19",
-    "electron-updater": "^6.6.2",
+    "electron-updater": "^6.7.3",
    "fast-xml-parser": "^5.3.3",
    "fflate": "^0.8.2",
    "form-data": "^4.0.5",
@@ -70,7 +70,7 @@
    "multer": "^2.0.2",
    "node-ssh-no-cpu-features": "^2.0.0",
    "nodejs-file-downloader": "^4.13.0",
-    "piclist": "^2.0.5",
+    "piclist": "^2.1.0",
    "qiniu": "7.14.0",
    "semver": "^7.7.3",
    "shell-path": "3.0.0",
@@ -89,7 +89,7 @@
    "@headlessui/vue": "^1.7.23",
    "@highlightjs/vue-plugin": "^2.1.2",
    "@intlify/unplugin-vue-i18n": "^11.0.3",
-    "@types/ali-oss": "^6.16.13",
+    "@types/ali-oss": "^6.23.0",
    "@types/fs-extra": "^11.0.4",
    "@types/js-yaml": "^4.0.9",
    "@types/lodash-es": "^4.17.12",
@@ -102,13 +102,13 @@
    "@types/write-file-atomic": "^4.0.3",
    "@videojs-player/vue": "^1.0.0",
    "@vitejs/plugin-vue": "^6.0.3",
-    "baseline-browser-mapping": "^2.9.11",
+    "baseline-browser-mapping": "^2.9.13",
    "cross-env": "^10.1.0",
    "dexie": "^3.2.4",
    "dotenv": "^17.2.3",
    "dpdm": "^3.14.0",
    "electron": "^39.2.7",
-    "electron-builder": "^26.0.12",
+    "electron-builder": "^26.4.0",
    "electron-vite": "^5.0.0",
    "eslint": "^9.39.2",
    "eslint-config-prettier": "^10.1.8",
@@ -138,7 +138,7 @@
    "typescript": "5.8.2",
    "typescript-eslint": "^8.52.0",
    "video.js": "^8.23.4",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
    "vitest": "^4.0.16",
    "vue-eslint-parser": "^10.2.0",
    "vue-i18n": "^11.2.8",
@@ -147,7 +147,7 @@
    "vue3-lazyload": "^0.3.8"
  },
  "resolutions": {
-    "baseline-browser-mapping": "^2.9.11"
+    "baseline-browser-mapping": "^2.9.13"
  },
  "config": {
    "commitizen": {
--- a/resources/i18n/en.yml
+++ b/resources/i18n/en.yml
@@ -64,6 +64,7 @@ TIPS_SHORTCUT_MODIFIED_CONFLICT: Shortcut conflict, please reset
 TIPS_CUSTOM_CONFIG_FILE_PATH_ERROR: Custom config file parse error, please check the path content
 TIPS_FIND_NEW_VERSION: Find new version ${v}, update many new features, do you want to download the latest version in the background?
 UPDATE_DOWNLOADED: Update downloaded
+UPDATE: Update
 TIPS_UPDATE_DOWNLOADED: The update has been downloaded and will be installed on the next app restart. Would you like to restart now?
 QUIT: Quit
 OPERATION_SUCCEED: "Operation Succeed"
--- a/src/main/apis/app/window/windowList.ts
+++ b/src/main/apis/app/window/windowList.ts
@@ -271,4 +271,54 @@ windowList.set(IWindowList.TOOLBOX_WINDOW, {
  },
 })

+const updateWindowOptions = {
+  height: 600,
+  width: 900,
+  show: false,
+  frame: true,
+  center: true,
+  fullscreenable: false,
+  resizable: false,
+  title: 'PicList Update',
+  backgroundColor: '#ebeef5',
+  icon: logo,
+  webPreferences: {
+    sandbox: false,
+    backgroundThrottling: true,
+    preload: preloadPath,
+    nodeIntegration: false,
+    contextIsolation: true,
+    nodeIntegrationInWorker: false,
+    webSecurity: false,
+  },
+} as IBrowserWindowOptions
+
+if (process.platform !== 'darwin') {
+  updateWindowOptions.backgroundColor = '#3f3c37'
+  updateWindowOptions.autoHideMenuBar = true
+  updateWindowOptions.transparent = false
+}
+
+windowList.set(IWindowList.UPDATE_WINDOW, {
+  isValid: true,
+  multiple: false,
+  options: () => updateWindowOptions,
+  async callback(window, windowManager) {
+    if (!app.isPackaged && process.env.ELECTRON_RENDERER_URL) {
+      window.loadURL(`${process.env.ELECTRON_RENDERER_URL}#update-page`)
+    } else {
+      window.loadFile(path.join(dirname, '../renderer/index.html'), {
+        hash: 'update-page',
+      })
+    }
+    const currentWindow = windowManager.getAvailableWindow(true)
+    if (currentWindow && currentWindow.isVisible()) {
+      const { x, y, width, height } = currentWindow.getBounds()
+      const positionX = Math.floor(x + width / 2 - 450)
+      const positionY = Math.floor(y + height / 2 - 300)
+      window.setPosition(positionX, positionY, false)
+    }
+  },
+})
+
 export default windowList
--- a/src/main/events/rpc/index.ts
+++ b/src/main/events/rpc/index.ts
@@ -10,6 +10,7 @@ import { settingRouter } from '~/events/rpc/routes/setting'
 import { systemRouter } from '~/events/rpc/routes/system'
 import { toolboxRouter } from '~/events/rpc/routes/toolbox'
 import { trayRouter } from '~/events/rpc/routes/tray'
+import { updaterRouter } from '~/events/rpc/routes/updater'
 import { uploadRouter } from '~/events/rpc/routes/upload'
 import { IRPCType } from '~/utils/enum'

@@ -67,6 +68,7 @@ const routes = [
  toolboxRouter.routes(),
  trayRouter.routes(),
  uploadRouter.routes(),
+  updaterRouter.routes(),
  manageRouter.routes(),
 ]

--- a/src/main/events/rpc/routes/updater/index.ts
+++ b/src/main/events/rpc/routes/updater/index.ts
@@ -0,0 +1,49 @@
+import db from '@core/datastore'
+import { BrowserWindow, shell } from 'electron'
+import updater from 'electron-updater'
+
+import { RPCRouter } from '~/events/rpc/router'
+import { configPaths } from '~/utils/configPaths'
+import { IRPCActionType } from '~/utils/enum'
+
+const updaterRouter = new RPCRouter()
+
+const updaterRoutes = [
+  {
+    action: IRPCActionType.DOWNLOAD_UPDATE,
+    handler: async () => {
+      updater.autoUpdater.downloadUpdate()
+    },
+  },
+  {
+    action: IRPCActionType.GO_TO_DOWNLOAD_PAGE,
+    handler: async () => {
+      shell.openExternal('https://github.com/Kuingsmile/PicList/releases/latest')
+    },
+  },
+  {
+    action: IRPCActionType.INSTALL_UPDATE,
+    handler: async () => {
+      updater.autoUpdater.quitAndInstall()
+    },
+  },
+  {
+    action: IRPCActionType.SET_SHOW_UPDATE_TIP,
+    handler: async (_: IIPCEvent, args: [value: boolean]) => {
+      db.set(configPaths.settings.showUpdateTip, args[0])
+    },
+  },
+  {
+    action: IRPCActionType.CLOSE_CURRENT_WINDOW,
+    handler: async (event: IIPCEvent) => {
+      const window = BrowserWindow.fromWebContents(event.sender)
+      if (window) {
+        window.close()
+      }
+    },
+  },
+]
+
+updaterRouter.addBatch(updaterRoutes)
+
+export { updaterRouter }
--- a/src/main/lifeCycle/index.ts
+++ b/src/main/lifeCycle/index.ts
@@ -12,14 +12,13 @@ import { createTray, setDockMenu } from 'apis/app/system'
 import { uploadChoosedFiles, uploadClipboardFiles } from 'apis/app/uploader/apis'
 import windowManager from 'apis/app/window/windowManager'
 import axios from 'axios'
-import { app, dialog, globalShortcut, Notification, protocol, screen, shell } from 'electron'
+import { app, globalShortcut, Notification, protocol, screen } from 'electron'
 import updater from 'electron-updater'
 import fs from 'fs-extra'

 import busEventList from '~/events/busEventList'
 import { rpcServer } from '~/events/rpc'
 import { startFileServer, stopFileServer } from '~/fileServer'
-import { T as $t } from '~/i18n'
 import fixPath from '~/lifeCycle/fixPath'
 import UpDownTaskQueue from '~/manage/datastore/upDownTaskQueue'
 import getManageApi from '~/manage/Main'
@@ -66,6 +65,7 @@ updater.autoUpdater.setFeedURL({
  channel: 'latest',
 })

+updater.autoUpdater.forceDevUpdateConfig = true
 updater.autoUpdater.autoDownload = false

 updater.autoUpdater.on('update-available', async (info: updater.UpdateInfo) => {
@@ -82,7 +82,7 @@ updater.autoUpdater.on('update-available', async (info: updater.UpdateInfo) => {
    logger.error(e)
  }

-  const maxLogLength = 800
+  const maxLogLength = 8000
  let displayLog = updateLog
  let truncatedNote = ''

@@ -95,60 +95,64 @@ updater.autoUpdater.on('update-available', async (info: updater.UpdateInfo) => {
        : '\n\n... (See full changelog for more details)'
  }

-  dialog
-    .showMessageBox({
-      type: 'info',
-      title: $t('FIND_NEW_VERSION'),
-      buttons: ['Yes', 'Go to download page'],
-      message:
-        $t('TIPS_FIND_NEW_VERSION', {
-          v: info.version,
-        }) +
-        '\n\n' +
-        displayLog +
-        truncatedNote,
-      checkboxLabel: $t('NO_MORE_NOTICE'),
-      checkboxChecked: false,
+  windowManager.create(IWindowList.UPDATE_WINDOW)
+  const updateWindow = windowManager.get(IWindowList.UPDATE_WINDOW)!
+
+  updateWindow.webContents.once('did-finish-load', () => {
+    updateWindow.webContents.send('SHOW_UPDATE_INFO', {
+      type: 'update-available',
+      title: lang === II18nLanguage.ZH_CN ? '发现新版本' : 'New Update Available',
+      version: info.version,
+      releaseNotes: displayLog + truncatedNote,
    })
-    .then(result => {
-      if (result.response === 0) {
-        updater.autoUpdater.downloadUpdate()
-      } else {
-        shell.openExternal('https://github.com/Kuingsmile/PicList/releases/latest')
-      }
-      db.set(configPaths.settings.showUpdateTip, !result.checkboxChecked)
-    })
-    .catch(err => {
-      logger.error(err)
  })
+
+  updateWindow.show()
 })

 updater.autoUpdater.on('download-progress', progressObj => {
  const percent = {
    progress: progressObj.percent,
  }
-  const window = windowManager.get(IWindowList.SETTING_WINDOW)!
-  window.webContents.send('updateProgress', percent)
+  const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
+  const updateWindow = windowManager.get(IWindowList.UPDATE_WINDOW)
+
+  if (settingWindow) {
+    settingWindow.webContents.send('updateProgress', percent)
+  }
+  if (updateWindow) {
+    updateWindow.webContents.send('UPDATE_PROGRESS', percent)
+  }
 })

 updater.autoUpdater.on('update-downloaded', () => {
-  dialog
-    .showMessageBox({
-      type: 'info',
-      title: $t('UPDATE_DOWNLOADED'),
-      buttons: ['Yes', 'No'],
-      message: $t('TIPS_UPDATE_DOWNLOADED'),
-    })
-    .then(result => {
-      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
-      window.webContents.send('updateProgress', { progress: 100 })
-      if (result.response === 0) {
-        updater.autoUpdater.quitAndInstall()
+  const lang = db.get(configPaths.settings.language) || II18nLanguage.ZH_CN
+
+  if (!windowManager.has(IWindowList.UPDATE_WINDOW)) {
+    windowManager.create(IWindowList.UPDATE_WINDOW)
  }
+  const updateWindow = windowManager.get(IWindowList.UPDATE_WINDOW)!
+
+  const sendUpdateInfo = () => {
+    updateWindow.webContents.send('SHOW_UPDATE_INFO', {
+      type: 'update-downloaded',
+      title: lang === II18nLanguage.ZH_CN ? '更新已下载' : 'Update Downloaded',
+      message:
+        lang === II18nLanguage.ZH_CN
+          ? '更新已下载完成，将在下次重启应用时安装。是否立即重启？'
+          : 'The update has been downloaded and will be installed on the next app restart. Would you like to restart now?',
    })
-    .catch(err => {
-      logger.error(err)
-    })
+  }
+
+  if (updateWindow.webContents.isLoading()) {
+    updateWindow.webContents.once('did-finish-load', sendUpdateInfo)
+  } else {
+    sendUpdateInfo()
+  }
+
+  if (!updateWindow.isVisible()) {
+    updateWindow.show()
+  }
 })

 updater.autoUpdater.on('error', err => {
--- a/src/main/utils/configPaths.ts
+++ b/src/main/utils/configPaths.ts
@@ -8,6 +8,12 @@ export interface IConfigStruct {
  picBed: {
    uploader: string
    current?: string
+    secondUploader?: string
+    secondUploaderId?: string
+    secondUploaderConfig?: IStringKeyMap
+    proxy?: string
+    transformer?: string
+    list: IPicBedType[]
    smms?: ISMMSConfig
    qiniu?: IQiniuConfig
    upyun?: IUpYunConfig
@@ -20,9 +26,6 @@ export interface IConfigStruct {
    sftpplist?: ISftpPlistConfig
    lskyplist?: ILskyConfig
    'aws-s3-plist': IAwsS3PListUserConfig
-    proxy?: string
-    transformer?: string
-    list: IPicBedType[]
    [others: string]: any
  }
  settings: {
@@ -125,9 +128,9 @@ export const configPaths = {
    showUpdateTip: 'settings.showUpdateTip',
    miniWindowPosition: 'settings.miniWindowPosition',
    miniWindowOntop: 'settings.miniWindowOntop',
-    isHideDock: 'settings.isHideDock',
    mainWindowWidth: 'settings.mainWindowWidth',
    mainWindowHeight: 'settings.mainWindowHeight',
+    isHideDock: 'settings.isHideDock',
    autoCloseMiniWindow: 'settings.autoCloseMiniWindow',
    autoCloseMainWindow: 'settings.autoCloseMainWindow',
    isCustomMiniIcon: 'settings.isCustomMiniIcon',
--- a/src/main/utils/enum.ts
+++ b/src/main/utils/enum.ts
@@ -41,6 +41,7 @@ export const IWindowList = {
  MINI_WINDOW: 'MINI_WINDOW',
  RENAME_WINDOW: 'RENAME_WINDOW',
  TOOLBOX_WINDOW: 'TOOLBOX_WINDOW',
+  UPDATE_WINDOW: 'UPDATE_WINDOW',
 }

 export const IRemoteNoticeActionType = {
@@ -153,6 +154,13 @@ export const IRPCActionType = {
  PLUGIN_IMPORT_LOCAL: 'PLUGIN_IMPORT_LOCAL',
  PLUGIN_UPDATE_ALL: 'PLUGIN_UPDATE_ALL',

+  // updater rpc
+  DOWNLOAD_UPDATE: 'DOWNLOAD_UPDATE',
+  GO_TO_DOWNLOAD_PAGE: 'GO_TO_DOWNLOAD_PAGE',
+  INSTALL_UPDATE: 'INSTALL_UPDATE',
+  SET_SHOW_UPDATE_TIP: 'SET_SHOW_UPDATE_TIP',
+  CLOSE_CURRENT_WINDOW: 'CLOSE_CURRENT_WINDOW',
+
  // tray rpc
  TRAY_SET_TOOL_TIP: 'TRAY_SET_TOOL_TIP',
  TRAY_GET_SHORT_URL: 'TRAY_GET_SHORT_URL',
--- a/src/main/utils/handleUploaderConfig.ts
+++ b/src/main/utils/handleUploaderConfig.ts
@@ -27,28 +27,6 @@ export const completeUploaderMetaConfig = (originData: IStringKeyMap): IUploader
  }
 }

-/**
- * get picbed config by type
- * it will trigger the uploader config function & get the uploader config result
- * & not just read from
- */
-export const getPicBedConfig = (type: string) => {
-  const name = picgo.helper.uploader.get(type)?.name || type
-  if (picgo.helper.uploader.get(type)?.config) {
-    const _config = picgo.helper.uploader.get(type)!.config!(picgo)
-    const config = handleConfigWithFunction(_config)
-    return {
-      config,
-      name,
-    }
-  } else {
-    return {
-      config: [],
-      name,
-    }
-  }
-}
-
 export const changeSecondUploader = (type: string, config?: IStringKeyMap, id?: string) => {
  if (!type) {
    return
@@ -69,9 +47,7 @@ export const changeSecondUploader = (type: string, config?: IStringKeyMap, id?:
 }

 export const changeCurrentUploader = (type: string, config?: IStringKeyMap, id?: string) => {
-  if (!type) {
-    return
-  }
+  if (!type) return
  if (id) {
    picgo.saveConfig({
      [`uploader.${type}.defaultId`]: id,
--- a/src/renderer/i18n/locales/en.json
+++ b/src/renderer/i18n/locales/en.json
@@ -6,7 +6,8 @@
    "confirm": "Confirm",
    "import": "Import",
    "reset": "Reset",
-    "submit": "Submit"
+    "submit": "Submit",
+    "version": "Version"
  },
  "navigation": {
    "choosePicBed": "Choose PicBed",
@@ -931,6 +932,17 @@
      "uploaded": "Uploaded",
      "waitForUpload": "Waiting for Upload"
    },
+    "update": {
+      "download": "Download",
+      "downloading": "Downloading",
+      "goToDownloadPage": "Go to Download Page",
+      "installNow": "Install Now",
+      "later": "Later",
+      "newUpdateAvailable": "New Update Available",
+      "noMoreNotice": "Do not show this again",
+      "releaseNotes": "What's New",
+      "updateReady": "Update Ready to Install"
+    },
    "upload": {
      "changePicBed": "Change PicBed",
      "clickToUpload": "Click to Upload",
--- a/src/renderer/i18n/locales/zh-CN.json
+++ b/src/renderer/i18n/locales/zh-CN.json
@@ -6,7 +6,8 @@
    "confirm": "确认",
    "import": "导入",
    "reset": "重置",
-    "submit": "提交"
+    "submit": "提交",
+    "version": "版本"
  },
  "navigation": {
    "choosePicBed": "选择图床",
@@ -926,6 +927,17 @@
      "uploaded": "已上传",
      "waitForUpload": "等待上传"
    },
+    "update": {
+      "download": "下载",
+      "downloading": "下载中",
+      "goToDownloadPage": "前往下载页面",
+      "installNow": "立即安装",
+      "later": "稍后",
+      "newUpdateAvailable": "发现新版本",
+      "noMoreNotice": "不再提示",
+      "releaseNotes": "更新内容",
+      "updateReady": "更新已准备好"
+    },
    "upload": {
      "changePicBed": "切换图床",
      "clickToUpload": "点击上传",
--- a/src/renderer/i18n/locales/zh-TW.json
+++ b/src/renderer/i18n/locales/zh-TW.json
@@ -6,7 +6,8 @@
    "confirm": "確認",
    "import": "匯入",
    "reset": "重置",
-    "submit": "提交"
+    "submit": "提交",
+    "version": "版本"
  },
  "navigation": {
    "choosePicBed": "選擇圖床",
@@ -926,6 +927,17 @@
      "uploaded": "已上傳",
      "waitForUpload": "等待上傳"
    },
+    "update": {
+      "download": "下載",
+      "downloading": "下載中",
+      "goToDownloadPage": "前往下載頁面",
+      "installNow": "立即安裝",
+      "later": "稍後",
+      "newUpdateAvailable": "發現新版本",
+      "noMoreNotice": "不再提示",
+      "releaseNotes": "更新內容",
+      "updateReady": "更新已準備好"
+    },
    "upload": {
      "changePicBed": "切換圖床",
      "clickToUpload": "點擊上傳",
--- a/src/renderer/pages/UpdatePage.vue
+++ b/src/renderer/pages/UpdatePage.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="update-page">
+    <div class="update-dialog">
+      <!-- Header -->
+      <header class="dialog-header">
+        <h1 class="dialog-title">{{ updateInfo.title }}</h1>
+        <p v-if="updateInfo.version" class="dialog-version">
+          <span class="version-label">Version</span>
+          <span class="version-number">v{{ updateInfo.version }}</span>
+        </p>
+      </header>
+
+      <div v-if="updateInfo.type !== 'downloading' && downloadProgress !== null" class="progress-section">
+        <div class="progress-info">
+          <span class="progress-label">{{ $t('pages.update.downloading') }}</span>
+          <span class="progress-percentage">{{ Math.round(downloadProgress) }}%</span>
+        </div>
+        <div class="progress-track">
+          <div class="progress-fill" :style="{ width: `${downloadProgress}%` }"></div>
+        </div>
+      </div>
+
+      <div class="dialog-content">
+        <div v-if="updateInfo.releaseNotes" class="release-notes">
+          <h2 class="content-title">{{ $t('pages.update.releaseNotes') }}</h2>
+          <div class="notes-body" v-html="renderMarkdown(updateInfo.releaseNotes)"></div>
+        </div>
+
+        <div v-else-if="updateInfo.message" class="update-message">
+          <p>{{ updateInfo.message }}</p>
+        </div>
+
+        <!-- Checkbox (only for update-available) -->
+        <div v-if="updateInfo.type === 'update-available'" class="settings-section">
+          <label class="checkbox-wrapper">
+            <input v-model="dontShowAgain" type="checkbox" class="checkbox-input" />
+            <span class="checkbox-box">
+              <svg
+                class="checkbox-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </span>
+            <span class="checkbox-label">{{ $t('pages.update.noMoreNotice') }}</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <footer class="dialog-footer">
+        <template v-if="updateInfo.type === 'update-available'">
+          <button class="btn btn-ghost" @click="goToDownloadPage">
+            <Link2Icon class="btn-icon" />
+            {{ $t('pages.update.goToDownloadPage') }}
+          </button>
+          <button class="btn btn-primary" @click="downloadUpdate">
+            <DownloadIcon class="btn-icon" />
+            {{ $t('pages.update.download') }}
+          </button>
+        </template>
+        <template v-else-if="updateInfo.type === 'downloading'">
+          <button class="btn btn-ghost" @click="closeWindow">
+            <XIcon class="btn-icon" />
+            {{ $t('common.cancel') }}
+          </button>
+        </template>
+        <template v-else-if="updateInfo.type === 'update-downloaded'">
+          <button class="btn btn-ghost" @click="closeWindow">
+            {{ $t('pages.update.later') }}
+          </button>
+          <button class="btn btn-primary" @click="installUpdate">
+            <DownloadIcon class="btn-icon" />
+            {{ $t('pages.update.installNow') }}
+          </button>
+        </template>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { DownloadIcon, Link2Icon, XIcon } from 'lucide-vue-next'
+import { marked } from 'marked'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { SHOW_UPDATE_INFO, UPDATE_PROGRESS } from '@/utils/constant'
+import { IRPCActionType } from '@/utils/enum'
+
+interface UpdateInfo {
+  type: 'update-available' | 'downloading' | 'update-downloaded'
+  title: string
+  version?: string
+  message?: string
+  releaseNotes?: string
+}
+
+const updateInfo = ref<UpdateInfo>({
+  type: 'update-available',
+  title: 'New Update Available',
+})
+
+const dontShowAgain = ref(false)
+const downloadProgress = ref<number | null>(null)
+
+const handleUpdateInfo = (info: UpdateInfo) => {
+  updateInfo.value = info
+  if (info.type !== 'downloading') {
+    downloadProgress.value = null
+  }
+}
+
+const handleUpdateProgress = (progress: { progress: number }) => {
+  downloadProgress.value = progress.progress
+}
+
+const renderMarkdown = (content: string) => {
+  return marked(content, { breaks: true, gfm: true })
+}
+
+const downloadUpdate = () => {
+  updateInfo.value.type = 'downloading'
+  downloadProgress.value = 0
+  window.electron.sendRPC(IRPCActionType.DOWNLOAD_UPDATE)
+  if (dontShowAgain.value) {
+    window.electron.sendRPC(IRPCActionType.SET_SHOW_UPDATE_TIP, false)
+  }
+}
+
+const goToDownloadPage = () => {
+  window.electron.sendRPC(IRPCActionType.GO_TO_DOWNLOAD_PAGE)
+  if (dontShowAgain.value) {
+    window.electron.sendRPC(IRPCActionType.SET_SHOW_UPDATE_TIP, false)
+  }
+  closeWindow()
+}
+
+const installUpdate = () => {
+  window.electron.sendRPC(IRPCActionType.INSTALL_UPDATE)
+}
+
+const closeWindow = () => {
+  if (dontShowAgain.value && updateInfo.value.type === 'update-available') {
+    window.electron.sendRPC(IRPCActionType.SET_SHOW_UPDATE_TIP, false)
+  }
+  window.electron.sendRPC(IRPCActionType.CLOSE_CURRENT_WINDOW)
+}
+
+onMounted(() => {
+  window.electron.ipcRendererOn(SHOW_UPDATE_INFO, handleUpdateInfo)
+  window.electron.ipcRendererOn(UPDATE_PROGRESS, handleUpdateProgress)
+})
+
+onBeforeUnmount(() => {
+  window.electron.ipcRendererRemoveAllListeners(SHOW_UPDATE_INFO)
+  window.electron.ipcRendererRemoveAllListeners(UPDATE_PROGRESS)
+})
+</script>
+
+<style scoped src="./css/UpdatePage.css"></style>
--- a/src/renderer/pages/css/UpdatePage.css
+++ b/src/renderer/pages/css/UpdatePage.css
@@ -0,0 +1,546 @@
+/* stylelint-disable property-no-deprecated */
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+/* Reset & Base */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Page Container */
+.update-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Dialog Card */
+.update-dialog {
+  position: relative;
+  overflow: auto;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  width: 90%;
+  height: 90%;
+  flex-shrink: 0;
+  background: white;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 10%),
+    0 2px 4px -1px rgb(0 0 0 / 6%);
+  animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.status-icon {
+  flex-shrink: 0;
+}
+
+.status-icon-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.status-text {
+  line-height: 1;
+}
+
+/* Header */
+.dialog-header {
+  padding: 1.25rem 1.5rem 1rem;
+}
+
+.dialog-title {
+  margin-bottom: 0.625rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #1e293b;
+  letter-spacing: -0.025em;
+}
+
+.dialog-version {
+  display: flex;
+  align-items: center;
+  font-size: 0.9375rem;
+  gap: 0.5rem;
+}
+
+.version-label {
+  color: #64748b;
+}
+
+.version-number {
+  border-radius: 6px;
+  padding: 0.125rem 0.5rem;
+  font-weight: 600;
+  background: #f1f5f9;
+  color: #475569;
+}
+
+/* Progress Section */
+.progress-section {
+  padding: 1.5rem;
+  background: #f8fafc;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.progress-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #475569;
+}
+
+.progress-percentage {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #1e293b;
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+}
+
+.progress-track {
+  position: relative;
+  overflow: hidden;
+  border-radius: 9999px;
+  width: 100%;
+  height: 6px;
+  background: #e2e8f0;
+}
+
+.progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 9999px;
+  height: 100%;
+  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
+  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Content */
+.dialog-content {
+  padding: 1.5rem;
+}
+
+/* Release Notes */
+.release-notes {
+  margin-bottom: 1.5rem;
+}
+
+.content-title {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #1e293b;
+  letter-spacing: -0.01em;
+}
+
+.notes-body {
+  overflow-y: auto;
+  border-radius: 12px;
+  padding: 1.25rem;
+  max-height: 195px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  background: #f8fafc;
+  color: #475569;
+}
+
+.notes-body :deep(h1),
+.notes-body :deep(h2),
+.notes-body :deep(h3) {
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.notes-body :deep(h1:first-child),
+.notes-body :deep(h2:first-child),
+.notes-body :deep(h3:first-child) {
+  margin-top: 0;
+}
+
+.notes-body :deep(p) {
+  margin-bottom: 0.875rem;
+}
+
+.notes-body :deep(ul),
+.notes-body :deep(ol) {
+  padding-left: 1.5rem;
+  margin: 0.875rem 0;
+}
+
+.notes-body :deep(li) {
+  margin-bottom: 0.375rem;
+}
+
+.notes-body :deep(code) {
+  border-radius: 4px;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  background: #e2e8f0;
+  color: #334155;
+}
+
+.notes-body :deep(pre) {
+  overflow-x: auto;
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 0.875rem 0;
+  background: #e2e8f0;
+}
+
+.notes-body :deep(pre code) {
+  padding: 0;
+  background: transparent;
+}
+
+/* Update Message */
+.update-message {
+  margin-bottom: 1.5rem;
+}
+
+.update-message p {
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: #475569;
+}
+
+/* Settings Section */
+.settings-section {
+  border-top: 1px solid #e2e8f0;
+  padding-top: 1.25rem;
+}
+
+/* Custom Checkbox */
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 0.75rem;
+  user-select: none;
+}
+
+.checkbox-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.checkbox-box {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid #cbd5e1;
+  border-radius: 6px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  flex-shrink: 0;
+}
+
+.checkbox-icon {
+  opacity: 0;
+  transform: scale(0.8);
+  color: white;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.checkbox-input:checked + .checkbox-box {
+  border-color: #2563eb;
+  background: #2563eb;
+}
+
+.checkbox-input:checked + .checkbox-box .checkbox-icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.checkbox-wrapper:hover .checkbox-box {
+  border-color: #2563eb;
+}
+
+.checkbox-input:focus-visible + .checkbox-box {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.checkbox-label {
+  font-size: 0.9375rem;
+  color: #475569;
+}
+
+/* Footer */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid #e2e8f0;
+  padding: 1.25rem 1.5rem;
+  background: #f8fafc;
+  gap: 0.75rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 10px;
+  padding: 0.625rem 1.25rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  font-weight: 600;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: pointer;
+  gap: 0.5rem;
+  letter-spacing: -0.01em;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-icon {
+  flex-shrink: 0;
+}
+
+/* Primary Button */
+.btn-primary {
+  color: white;
+  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+  box-shadow: 0 1px 3px 0 rgb(249 115 22 / 30%);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px 0 rgb(249 115 22 / 40%);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-primary:focus-visible {
+  outline: 2px solid #f97316;
+  outline-offset: 2px;
+}
+
+/* Ghost Button */
+.btn-ghost {
+  border: 1px solid #e2e8f0;
+  background: white;
+  color: #475569;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  color: #1e293b;
+}
+
+.btn-ghost:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* Responsive Design */
+@media (width <= 640px) {
+  .update-page {
+    padding: 1rem;
+  }
+
+  .update-dialog {
+    max-width: 100%;
+  }
+
+  .dialog-title {
+    font-size: 1.5rem;
+  }
+
+  .dialog-footer {
+    flex-direction: column-reverse;
+  }
+
+  .btn {
+    width: 100%;
+  }
+}
+
+@media (width <= 480px) {
+  .dialog-header {
+    padding: 1rem 1rem 0.75rem;
+  }
+
+  .dialog-title {
+    font-size: 1.375rem;
+  }
+
+  .dialog-content {
+    padding: 1.25rem 1rem;
+  }
+
+  .dialog-footer {
+    padding: 1rem;
+  }
+
+  .notes-body {
+    max-height: 240px;
+    font-size: 0.875rem;
+  }
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .status-icon-spin {
+    animation: none;
+  }
+}
+
+/* Dark Mode Support (if needed) */
+@media (prefers-color-scheme: dark) {
+  .update-page {
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  }
+
+  .update-dialog {
+    border-color: #334155;
+    background: #1e293b;
+  }
+
+  .dialog-title {
+    color: #f8fafc;
+  }
+
+  .version-label {
+    color: #94a3b8;
+  }
+
+  .version-number {
+    background: #334155;
+    color: #cbd5e1;
+  }
+
+  .progress-section,
+  .dialog-footer {
+    background: #0f172a;
+  }
+
+  .progress-label {
+    color: #cbd5e1;
+  }
+
+  .progress-percentage {
+    color: #f8fafc;
+  }
+
+  .progress-track {
+    background: #334155;
+  }
+
+  .content-title {
+    color: #f8fafc;
+  }
+
+  .notes-body {
+    background: #0f172a;
+    color: #cbd5e1;
+  }
+
+  .notes-body :deep(h1),
+  .notes-body :deep(h2),
+  .notes-body :deep(h3) {
+    color: #f8fafc;
+  }
+
+  .notes-body :deep(code) {
+    background: #334155;
+    color: #e2e8f0;
+  }
+
+  .notes-body :deep(pre) {
+    background: #334155;
+  }
+
+  .update-message p {
+    color: #cbd5e1;
+  }
+
+  .settings-section {
+    border-top-color: #334155;
+  }
+
+  .checkbox-box {
+    border-color: #475569;
+    background: #0f172a;
+  }
+
+  .checkbox-wrapper:hover .checkbox-box {
+    border-color: #3b82f6;
+  }
+
+  .checkbox-label {
+    color: #cbd5e1;
+  }
+
+  .dialog-footer {
+    border-top-color: #334155;
+  }
+
+  .btn-ghost {
+    border-color: #334155;
+    background: #0f172a;
+    color: #cbd5e1;
+  }
+
+  .btn-ghost:hover:not(:disabled) {
+    border-color: #475569;
+    background: #334155;
+    color: #f8fafc;
+  }
+}
--- a/src/renderer/router/config.ts
+++ b/src/renderer/router/config.ts
@@ -14,5 +14,6 @@ export const SETTING_PAGE = 'SettingPage'
 export const SHORTKEY_PAGE = 'ShortkeyPage'
 export const TOOLBOX_CONFIG_PAGE = 'ToolBoxPage'
 export const TRAY_PAGE = 'TrayPage'
+export const UPDATE_PAGE = 'UpdatePage'
 export const UPLOAD_PAGE = 'UploadPage'
 export const UPLOADER_CONFIG_PAGE = 'UploaderConfigPage'
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -15,6 +15,7 @@ import RenamePage from '@/pages/RenamePage.vue'
 import ShortKeyPage from '@/pages/ShortKey.vue'
 import Toolbox from '@/pages/Toolbox.vue'
 import TrayPage from '@/pages/TrayPage.vue'
+import UpdatePage from '@/pages/UpdatePage.vue'
 import UploadPage from '@/pages/Upload.vue'
 import UploaderConfigPage from '@/pages/UploaderConfigPage.vue'
 import * as config from '@/router/config'
@@ -114,6 +115,11 @@ export default createRouter({
      name: config.TOOLBOX_CONFIG_PAGE,
      component: Toolbox,
    },
+    {
+      path: '/update-page',
+      name: config.UPDATE_PAGE,
+      component: UpdatePage,
+    },
    {
      path: '/:pathMatch(.*)*',
      redirect: '/main-page/upload',
--- a/src/renderer/utils/constant.ts
+++ b/src/renderer/utils/constant.ts
@@ -9,6 +9,9 @@ export const PICGO_TOGGLE_PLUGIN = 'PICGO_TOGGLE_PLUGIN'
 export const RENAME_FILE_NAME = 'RENAME_FILE_NAME'
 export const GET_RENAME_FILE_NAME = 'GET_RENAME_FILE_NAME'
 export const SHOW_MAIN_PAGE_QRCODE = 'SHOW_MAIN_PAGE_QRCODE'
+// update window
+export const SHOW_UPDATE_INFO = 'SHOW_UPDATE_INFO'
+export const UPDATE_PROGRESS = 'UPDATE_PROGRESS'
 // rpc
 export const RPC_ACTIONS = 'RPC_ACTIONS'
 export const RPC_ACTIONS_INVOKE = 'RPC_ACTIONS_INVOKE'
--- a/src/renderer/utils/enum.ts
+++ b/src/renderer/utils/enum.ts
@@ -100,6 +100,13 @@ export const IRPCActionType = {
  PLUGIN_IMPORT_LOCAL: 'PLUGIN_IMPORT_LOCAL',
  PLUGIN_UPDATE_ALL: 'PLUGIN_UPDATE_ALL',

+  // updater rpc
+  DOWNLOAD_UPDATE: 'DOWNLOAD_UPDATE',
+  GO_TO_DOWNLOAD_PAGE: 'GO_TO_DOWNLOAD_PAGE',
+  INSTALL_UPDATE: 'INSTALL_UPDATE',
+  SET_SHOW_UPDATE_TIP: 'SET_SHOW_UPDATE_TIP',
+  CLOSE_CURRENT_WINDOW: 'CLOSE_CURRENT_WINDOW',
+
  // tray rpc
  TRAY_SET_TOOL_TIP: 'TRAY_SET_TOOL_TIP',
  TRAY_GET_SHORT_URL: 'TRAY_GET_SHORT_URL',
--- a/yarn.lock
+++ b/yarn.lock