1

- 新增小红点标识新版本可用状态
- 实现点击版本号直接显示更新对话框- 优化更新逻辑，区分首次发现、跳过版本和稍后提醒状态- 添加脉冲动画效果增强视觉提示- 完善本地存储判断避免重复提示

electron-vue-template/package.json

@@ -19,8 +19,9 @@
     "@vitejs/plugin-vue": "^4.4.1",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
-    "electron": "^28.3.3",
+    "electron": "^38.2.2",
     "electron-builder": "^25.1.6",
+    "electron-rebuild": "^3.2.9",
     "express": "^5.1.0",
     "fs-extra": "^11.3.2",
     "typescript": "^5.2.2",

electron-vue-template/src/renderer/components/amazon/AmazonDashboard.vue

@@ -219,7 +219,6 @@ async function exportToExcel() {
   exportLoading.value = false
 }
 
-// 获取卖家/配送方信息 - 数据处理辅助函数
 function getSellerShipperText(product: any) {
   let text = product.seller || '无货'
   if (product.shipper && product.shipper !== product.seller) {

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);

electron-vue-template/vite.config.js

@@ -1,14 +1,12 @@
 const Path = require('path');
 const vuePlugin = require('@vitejs/plugin-vue')
-
 const { defineConfig } = require('vite');
-
 /**
  * https://vitejs.dev/config
  */
 const config = defineConfig({
     root: Path.join(__dirname, 'src', 'renderer'),
-    publicDir: Path.join(__dirname, 'src', 'renderer', 'public'), // 使用renderer下的public目录
+    publicDir: Path.join(__dirname, 'src', 'renderer', 'public'),
     server: {
         port: 8083,
     },