feat: 添加更新管理功能，重构更新通知组件，优化 Toast 消息显示

src/renderer/components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     Sidebar: typeof import('./src/components/Sidebar.vue')['default']
     Toast: typeof import('primevue/toast')['default']
     ToggleSwitch: typeof import('primevue/toggleswitch')['default']
+    Update: typeof import('./src/components/Update.vue')['default']
     UpdateNotification: typeof import('./src/components/UpdateNotification.vue')['default']
   }
   export interface GlobalDirectives {

src/renderer/src/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <Toast />
+  <Toast
+    position="top-right"
+    group="tr" />
+  <Toast
+    position="bottom-right"
+    group="br" />
   <RouterView />
 </template>
 
@@ -10,7 +15,7 @@ import { mittbus } from './ipc'
 
 const toast = useToast()
 
-mittbus.on('toast:add', payload => toast.add(payload))
+mittbus.on('toast:add', payload => toast.add({ ...{ group: 'tr' }, ...payload }))
 
 onUnmounted(() => {
   toast.removeAllGroups()

src/renderer/src/components/About.vue

@@ -19,8 +19,6 @@ const handleCheckUpdate = async () => {
     const result = await checkForUpdate()
     if (result && result.updateInfo) {
       logger.info('Update available:', result.updateInfo)
-      // Here you might want to show a dialog or notification
-      // For now, we just log it as per request "add function"
     } else {
       logger.info('No update available')
     }

src/renderer/src/components/Layout.vue

@@ -2,7 +2,7 @@
 import logger from 'electron-log/renderer'
 import { onUnmounted } from 'vue'
 import Sidebar from './Sidebar.vue'
-import UpdateNotification from './UpdateNotification.vue'
+import UpdateNotification from './Update.vue'
 logger.debug('Layout created')
 onUnmounted(() => {
   logger.debug('Layout unmounted')

src/renderer/src/components/Sidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full bg-dark-500">
     <div class="h-full flex flex-col justify-between flex-items-center pb-6 pt-16">
-      <div class="flex flex-col items-center gap-4">
+      <div class="flex flex-col items-center gap-2">
         <RouterLink
           v-for="item in hItems"
           :key="item.to.name"
@@ -15,7 +15,7 @@
           <span :class="item.icon"></span>
         </RouterLink>
       </div>
-      <div class="flex flex-col items-center gap-4">
+      <div class="flex flex-col items-center gap-2">
         <RouterLink
           v-for="item in fItems"
           :key="item.to.name"

src/renderer/src/components/Update.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useUpdateStore } from '@renderer/store/update'
+import { storeToRefs } from 'pinia'
+import { onMounted, onUnmounted } from 'vue'
+
+const updateStore = useUpdateStore()
+const { updateAvailable, updateDownloaded, downloading, downloadProgress } = storeToRefs(updateStore)
+const { startDownload, quitAndInstall, init, destroy } = updateStore
+
+onMounted(() => {
+  init()
+})
+
+onUnmounted(() => {
+  destroy()
+})
+</script>
+
+<template>
+  <div
+    v-if="updateAvailable"
+    class="fixed right-4 top-4 z-50 h-8 w-25 select-none">
+    <div
+      class="relative h-full w-full cursor-pointer overflow-hidden backdrop-blur"
+      :class="{ 'bg-transparent pointer-events-none': downloading }"
+      ring="~ 1 pink/40"
+      hover="ring-pink"
+      text="sm pink"
+      transition="~ all 300 ease"
+      flex="~ justify-center items-center gap-2"
+      bg="pink/10"
+      border="rounded-full">
+      <div
+        v-if="downloading"
+        class="absolute bottom-0 left-0 top-0 bg-pink/30"
+        :style="{ width: `${downloadProgress}%` }"></div>
+
+      <div
+        v-if="downloading"
+        class="text-light">
+        <span>下载中</span>
+      </div>
+
+      <div v-else>
+        <span
+          v-if="updateDownloaded"
+          @click="quitAndInstall">
+          重启安装
+        </span>
+
+        <span
+          v-else
+          @click="startDownload">
+          新版本可用
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Add any specific animations or transitions if needed */
+</style>

src/renderer/src/store/preference.ts

@@ -5,7 +5,7 @@ import { reactive, toRaw, watch } from 'vue'
 
 interface UserPreference extends UserStore {}
 
-export const usePreferenceStore = defineStore('setting', () => {
+export const usePreferenceStore = defineStore('preference', () => {
   const preference = reactive<UserPreference>({
     'convert-config': {
       cachePath: '',