feat(update): 添加版本更新提示红点功能
- 新增小红点标识新版本可用状态 - 实现点击版本号直接显示更新对话框- 优化更新逻辑,区分首次发现、跳过版本和稍后提醒状态- 添加脉冲动画效果增强视觉提示- 完善本地存储判断避免重复提示
This commit is contained in:
@@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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"
|
<el-dialog v-model="show" width="522px" :close-on-click-modal="false" align-center class="update-dialog"
|
||||||
:title="stage === 'downloading' ? `正在更新 ${appName}` : '软件更新'">
|
:title="stage === 'downloading' ? `正在更新 ${appName}` : '软件更新'">
|
||||||
<div v-if="stage === 'check'" class="update-content">
|
<div v-if="stage === 'check'" class="update-content">
|
||||||
@@ -105,6 +108,7 @@ type Stage = 'check' | 'downloading' | 'completed'
|
|||||||
const stage = ref<Stage>('check')
|
const stage = ref<Stage>('check')
|
||||||
const appName = ref('我了个电商')
|
const appName = ref('我了个电商')
|
||||||
const version = ref('')
|
const version = ref('')
|
||||||
|
const hasNewVersion = ref(false) // 控制小红点显示
|
||||||
const prog = ref({percentage: 0, current: '0 MB', total: '0 MB', speed: ''})
|
const prog = ref({percentage: 0, current: '0 MB', total: '0 MB', speed: ''})
|
||||||
const info = ref({
|
const info = ref({
|
||||||
latestVersion: '2.4.8',
|
latestVersion: '2.4.8',
|
||||||
@@ -124,24 +128,14 @@ async function autoCheck(silent = false) {
|
|||||||
const result = checkRes?.data || checkRes
|
const result = checkRes?.data || checkRes
|
||||||
|
|
||||||
if (!result.needUpdate) {
|
if (!result.needUpdate) {
|
||||||
|
hasNewVersion.value = false
|
||||||
if (!silent) {
|
if (!silent) {
|
||||||
ElMessage.info('当前已是最新版本')
|
ElMessage.info('当前已是最新版本')
|
||||||
}
|
}
|
||||||
return
|
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 = {
|
info.value = {
|
||||||
currentVersion: result.currentVersion,
|
currentVersion: result.currentVersion,
|
||||||
latestVersion: result.latestVersion,
|
latestVersion: result.latestVersion,
|
||||||
@@ -149,6 +143,23 @@ async function autoCheck(silent = false) {
|
|||||||
updateNotes: '• 优化了用户界面体验\n• 修复了已知问题\n• 提升了系统稳定性\n• 轻量级更新(仅替换app.asar)',
|
updateNotes: '• 优化了用户界面体验\n• 修复了已知问题\n• 提升了系统稳定性\n• 轻量级更新(仅替换app.asar)',
|
||||||
hasUpdate: true
|
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
|
show.value = true
|
||||||
stage.value = 'check'
|
stage.value = 'check'
|
||||||
if (!silent) {
|
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() {
|
function skipVersion() {
|
||||||
localStorage.setItem(SKIP_VERSION_KEY, info.value.latestVersion)
|
localStorage.setItem(SKIP_VERSION_KEY, info.value.latestVersion)
|
||||||
show.value = false
|
show.value = false
|
||||||
@@ -270,6 +292,29 @@ onUnmounted(() => {
|
|||||||
user-select: none;
|
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) {
|
:deep(.update-dialog .el-dialog) {
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
|
||||||
|
|||||||
Reference in New Issue
Block a user