feat(update): 添加版本更新提示红点功能
- 新增小红点标识新版本可用状态 - 实现点击版本号直接显示更新对话框- 优化更新逻辑,区分首次发现、跳过版本和稍后提醒状态- 添加脉冲动画效果增强视觉提示- 完善本地存储判断避免重复提示
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user