From a0d94b2c7080838b1558aacbe1439fc22fe5ed2f Mon Sep 17 00:00:00 2001
From: ZiJIe <17738440858@163.com>
Date: Fri, 10 Oct 2025 14:00:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(update):=20=E6=B7=BB=E5=8A=A0=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E6=9B=B4=E6=96=B0=E6=8F=90=E7=A4=BA=E7=BA=A2=E7=82=B9?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增小红点标识新版本可用状态
- 实现点击版本号直接显示更新对话框- 优化更新逻辑，区分首次发现、跳过版本和稍后提醒状态- 添加脉冲动画效果增强视觉提示- 完善本地存储判断避免重复提示
---
 .../components/common/UpdateDialog.vue        | 71 +++++++++++++++----
 1 file changed, 58 insertions(+), 13 deletions(-)

diff --git a/electron-vue-template/src/renderer/components/common/UpdateDialog.vue b/electron-vue-template/src/renderer/components/common/UpdateDialog.vue
index a533ab5..61da0ef 100644
--- a/electron-vue-template/src/renderer/components/common/UpdateDialog.vue
+++ b/electron-vue-template/src/renderer/components/common/UpdateDialog.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="version-info" @click="autoCheck">v{{ version || '-' }}</div>
+    <div class="version-info" @click="handleVersionClick">
+      v{{ version || '-' }}
+      <span v-if="hasNewVersion" class="update-badge"></span>
+    </div>
     <el-dialog v-model="show" width="522px" :close-on-click-modal="false" align-center class="update-dialog"
                :title="stage === 'downloading' ? `正在更新 ${appName}` : '软件更新'">
       <div v-if="stage === 'check'" class="update-content">
@@ -105,6 +108,7 @@ type Stage = 'check' | 'downloading' | 'completed'
 const stage = ref<Stage>('check')
 const appName = ref('我了个电商')
 const version = ref('')
+const hasNewVersion = ref(false) // 控制小红点显示
 const prog = ref({percentage: 0, current: '0 MB', total: '0 MB', speed: ''})
 const info = ref({
   latestVersion: '2.4.8',
@@ -124,24 +128,14 @@ async function autoCheck(silent = false) {
     const result = checkRes?.data || checkRes
 
     if (!result.needUpdate) {
+      hasNewVersion.value = false
       if (!silent) {
         ElMessage.info('当前已是最新版本')
       }
       return
     }
 
-    // 检查是否跳过此版本
-    const skippedVersion = localStorage.getItem(SKIP_VERSION_KEY)
-    if (skippedVersion === result.latestVersion) {
-      return
-    }
-
-    // 检查是否在稍后提醒时间内
-    const remindLater = localStorage.getItem(REMIND_LATER_KEY)
-    if (remindLater && Date.now() < parseInt(remindLater)) {
-      return
-    }
-
+    // 发现新版本，更新信息并显示小红点
     info.value = {
       currentVersion: result.currentVersion,
       latestVersion: result.latestVersion,
@@ -149,6 +143,23 @@ async function autoCheck(silent = false) {
       updateNotes: '• 优化了用户界面体验\n• 修复了已知问题\n• 提升了系统稳定性\n• 轻量级更新（仅替换app.asar）',
       hasUpdate: true
     }
+    hasNewVersion.value = true
+
+    // 检查是否跳过此版本
+    const skippedVersion = localStorage.getItem(SKIP_VERSION_KEY)
+    if (skippedVersion === result.latestVersion) {
+      // 跳过的版本：显示小红点，但不弹框
+      return
+    }
+
+    // 检查是否在稍后提醒时间内
+    const remindLater = localStorage.getItem(REMIND_LATER_KEY)
+    if (remindLater && Date.now() < parseInt(remindLater)) {
+      // 稍后提醒期间：显示小红点，但不弹框
+      return
+    }
+
+    // 首次发现新版本：显示小红点并弹框
     show.value = true
     stage.value = 'check'
     if (!silent) {
@@ -162,6 +173,17 @@ async function autoCheck(silent = false) {
   }
 }
 
+function handleVersionClick() {
+  // 如果有新版本，直接显示更新对话框
+  if (hasNewVersion.value) {
+    show.value = true
+    stage.value = 'check'
+  } else {
+    // 没有新版本，执行检查更新
+    autoCheck(false)
+  }
+}
+
 function skipVersion() {
   localStorage.setItem(SKIP_VERSION_KEY, info.value.latestVersion)
   show.value = false
@@ -270,6 +292,29 @@ onUnmounted(() => {
   user-select: none;
 }
 
+.update-badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 8px;
+  height: 8px;
+  background: #f56c6c;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
 :deep(.update-dialog .el-dialog) {
   border-radius: 16px;
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);