feat: 优化更新通知以及全局消息表现形式

src-electron/main/update.ts

@@ -21,31 +21,31 @@ export async function useUpdater(win: BrowserWindow, store: ElectronStore<Settin
         autoUpdater.checkForUpdates()
     }
 
-    function sendUpdateMessageToWindow(body: { type: MessageType; text: string }) {
-        log.info(`${body.type}: ${body.text}`)
+    function sendUpdateMessageToWindow(body: { type: MessageType; message: string }) {
+        log.info(`[检查更新] ${body.type}: ${body.message}`)
         win.webContents.send('updater:message', body)
     }
 
     autoUpdater.on('checking-for-update', () => {
-        sendUpdateMessageToWindow({ type: 'checking-for-update', text: '正在检查更新...' })
+        sendUpdateMessageToWindow({ type: 'checking-for-update', message: '正在检查更新...' })
     })
     autoUpdater.on('update-available', (info) => {
-        sendUpdateMessageToWindow({ type: 'update-available', text: `发现新版本 v${info.version}` })
+        sendUpdateMessageToWindow({ type: 'update-available', message: `发现新版本 v${info.version}` })
     })
     autoUpdater.on('update-not-available', () => {
-        sendUpdateMessageToWindow({ type: 'update-not-available', text: '当前已是最新版本~' })
+        sendUpdateMessageToWindow({ type: 'update-not-available', message: '当前已是最新版本~' })
     })
     autoUpdater.on('error', (err) => {
-        sendUpdateMessageToWindow({ type: 'error', text: err.message })
+        sendUpdateMessageToWindow({ type: 'error', message: err.message })
     })
     autoUpdater.on('download-progress', (progress) => {
         sendUpdateMessageToWindow({
             type: 'download-progress',
-            text: `正在下载新版本 ${Number(progress.percent).toFixed(2)}%`,
+            message: `正在下载新版本 ${Number(progress.percent).toFixed(2)}%`,
         })
     })
     autoUpdater.on('update-downloaded', () => {
-        sendUpdateMessageToWindow({ type: 'update-downloaded', text: '下载完成' })
+        sendUpdateMessageToWindow({ type: 'update-downloaded', message: '下载完成' })
 
         setTimeout(() => {
             // 退出并安装更新包
@@ -72,10 +72,6 @@ export async function useUpdater(win: BrowserWindow, store: ElectronStore<Settin
             checkForUpdate()
         }
     } catch (error: any) {
-        log.info(`[检查更新] 出现异常: ${error}`)
-        win.webContents.send('app:notify', {
-            type: 'error',
-            message: error.message,
-        })
+        sendUpdateMessageToWindow({ type: 'error', message: error.message })
     }
 }

src/store/modules/client.ts

@@ -20,24 +20,21 @@ export const useClientStore = defineStore('app-client', () => {
 
     function setSystem(value: ISystem) {
         // 保留 machineId 不允许修改
-        const machineId = system.value.machineId
-        system.value = value
-        system.value.machineId = machineId
+        system.value = { ...value, machineId: system.value.machineId }
         ipc.invoke('store:set', 'system', toRaw(system.value))
     }
 
     function setDebug(debug: boolean): void {
-        system.value.debug = debug
-        ipc.invoke('store:set', 'system', toRaw(system.value))
+        ipc.invoke('store:set', 'system.debug', debug)
     }
 
     function setAlwaysOnTop(alwaysOnTop: boolean): void {
         system.value.alwaysOnTop = alwaysOnTop
-        ipc.invoke('store:set', 'system', toRaw(system.value))
+        ipc.invoke('store:set', 'system.alwaysOnTop', alwaysOnTop)
     }
 
     async function reset(...keys: ['system']) {
-        ipc.invoke('store:reset', keys)
+        await ipc.invokeAsync('store:reset', keys)
         await init()
     }
 

src/views/main/components/AboutModal.vue

@@ -26,26 +26,27 @@
     // 监听检查更新事件
     let hide = null
     onMounted(() => {
-        ipc.on('updater:message', (_e, body: { type: MessageType; text: string }) => {
+        ipc.on('updater:message', (_e, body: { type: MessageType; message: string }) => {
             console.log('updater:message', body)
 
-            const { type, text } = body
+            const { type, message } = body
             if (type === 'checking-for-update' || type === 'download-progress') {
                 loading.value = true
                 hide = createMessage.loading({
                     key: 'updating',
-                    content: text,
+                    content: message,
                     duration: 0,
                 })
             } else if (type === 'update-available' || type === 'update-not-available' || type === 'update-downloaded') {
-                createMessage.success(text)
+                createMessage.success(message)
             } else if (type === 'error') {
-                if (text.startsWith('net::') || text.includes('HttpError')) {
+                console.error(`检查更新失败: ${message}`)
+
+                if (message?.startsWith('net::') || message?.includes('HttpError')) {
                     createMessage.warn('检查更新失败，请确认网络或者更新源配置是否正常')
                 } else {
-                    createMessage.error(`检查更新失败: ${text}`)
+                    createMessage.error(message)
                 }
-                console.error(text)
             }
 
             if (type === 'error' || type === 'update-downloaded' || type === 'update-not-available') {

src/views/main/components/Header.vue

@@ -9,7 +9,7 @@
 
     const clientStore = useClientStoreWithOut()
     const { ipcRenderer: ipc } = useElectron()
-    const { createConfirm, createMessage } = useMessage()
+    const { createConfirm, createMessage, notification } = useMessage()
 
     const isDebug = computed(() => clientStore.system?.debug)
     const isAlwaysOnTop = computed(() => clientStore.system?.alwaysOnTop)
@@ -22,17 +22,13 @@
             createConfirm({
                 iconType: 'warning',
                 content: '确认关闭应用吗？',
-                onOk() {
-                    ipc.invoke('window:action', action)
-                },
+                onOk: () => ipc.invoke('window:action', action),
             })
             return
         }
 
         if (action === 'top') {
             clientStore.setAlwaysOnTop(!isAlwaysOnTop.value)
-            createMessage.success(`应用${isAlwaysOnTop.value ? '' : '取消'}置顶`)
-            return
         }
 
         ipc.invoke('window:action', action)
@@ -46,16 +42,34 @@
         openSettingModal()
     }
 
+    onMounted(() => {
         // 监听全局通知
-    ipc.on('app:notify', (_, body) => {
+        ipc.on(
+            'app:notify',
+            (
+                _,
+                body: {
+                    type: 'notify' | 'message'
+                    icon: 'success' | 'warning' | 'info'
+                    message: string
+                    title?: string
+                    duration?: number
+                },
+            ) => {
                 console.log('app:notify', body)
 
-        if (body?.message.startsWith('net::') || body?.message.includes('HttpError')) {
-            createMessage.warn('检查更新失败，请确认网络或者更新源配置是否正常')
-            return
+                if (body.type === 'message') {
+                    createMessage[body.icon](body.message, body.duration ?? 3)
+                } else if (body.type === 'notify') {
+                    notification[body.icon]({
+                        message: body.title,
+                        description: body.message,
+                        duration: body.duration ?? 5,
+                        placement: 'bottomRight',
+                    })
                 }
-
-        createMessage[body.type](body.message)
+            },
+        )
     })
 </script>
 
@@ -93,7 +107,7 @@
                     <Icon
                         :icon="isAlwaysOnTop ? 'ph:push-pin-fill' : 'ph:push-pin'"
                         :size="22"
-                        :color="isAlwaysOnTop ? 'green' : '#000'"
+                        :color="isAlwaysOnTop ? '#6ea2d7' : '#000'"
                     />
                 </a-button>
             </a-tooltip>
@@ -128,7 +142,7 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
-        background-color: white;
+        background-color: #fbfbfb;
 
         .title {
             -webkit-app-region: drag;
@@ -143,6 +157,7 @@
 
             .title-text {
                 letter-spacing: 1px;
+                font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
             }
 
             .title-icon {

src/views/main/index.vue

@@ -25,6 +25,6 @@
     .main-wrap {
         width: 100vw;
         height: 100vh;
-        background-color: #fbfbfb;
+        background-color: white;
     }
 </style>