From d6481c1b27830fb01e2fcb7810b93cd5698cb574 Mon Sep 17 00:00:00 2001 From: hzj <1304805162@qq.com> Date: Mon, 22 Dec 2025 15:14:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E7=89=87=E7=BC=93=E5=AD=98?= =?UTF-8?q?=E5=8A=9F=E8=83=BD):=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E8=A7=A3=E5=86=B3=E4=BA=86=E6=9C=89=E6=97=B6=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=B2=A1=E9=A1=BA=E5=88=A9=E6=B8=85=E9=99=A4=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E5=90=8C=E6=AD=A5=E4=BA=86=E4=B8=A4?= =?UTF-8?q?=E4=B8=AA=E7=BC=93=E5=AD=98=E6=9C=BA=E5=88=B6=E7=9A=84=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 6 +- src/main.js | 10 +- src/utils/imageCacheManager.js | 5 +- src/utils/versionChecker.js | 166 +++++++++++++-------------------- 4 files changed, 76 insertions(+), 111 deletions(-) diff --git a/.env b/.env index d41201a..4d9503a 100644 --- a/.env +++ b/.env @@ -1,10 +1,10 @@ # 应用版本号 -VITE_APP_VERSION=2.0.3 +VITE_APP_VERSION=2.0.4 # 版本类型 # major:重大更新(清空用户缓存) -# minor:一般更新(仅清空图片缓存) -# patch:日常小更新(不清空用户缓存) +# minor:一般更新(只清除图片和assets缓存) +# patch:日常小更新(只清除图片缓存) VITE_VERSION_TYPE=minor # 是否启用版本检查 diff --git a/src/main.js b/src/main.js index a012e71..0274000 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import './assets/main.css' import { logEnvInfo } from './utils/env.js' import { versionChecker } from './utils/versionChecker.js' +import { imageCacheManager } from '@/utils/imageCacheManager' import { smartImage } from './directives/smartImage.js' import { createPinia } from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' @@ -14,8 +15,11 @@ import { useLangStore } from '@/stores/lang' // 移动到顶部 // 初始化环境信息 logEnvInfo() -// 版本检查 - 不需要处理返回结果，因为会自动处理 -versionChecker.checkVersion() +// 版本检查后添加 +versionChecker.checkVersion().then(() => { + // 主动清理过期的图片缓存 + imageCacheManager.clearOldCaches() +}) // 初始化权限系统 console.debug('🔐 Permission system initialized') @@ -100,7 +104,7 @@ if (versionChecker.enableCheck) { const versionResult = await versionChecker.checkServerVersion() if (versionResult.shouldUpdate) { // 自动处理更新，不需要用户交互 - versionChecker.handleVersionUpdate(versionResult.versionType) + await versionChecker.handleVersionUpdate(versionResult.versionType) } }, 5 * 60 * 1000) } diff --git a/src/utils/imageCacheManager.js b/src/utils/imageCacheManager.js index 05624fa..2f2cb2a 100644 --- a/src/utils/imageCacheManager.js +++ b/src/utils/imageCacheManager.js @@ -50,6 +50,7 @@ class ImageCacheManager { cachesToClear = cacheNames.filter((name) => name.startsWith('likei-images-v')) } + // 等待所有清除操作完成 await Promise.all(cachesToClear.map((name) => caches.delete(name))) console.log(`已清理${clearType}类型缓存:`, cachesToClear) } catch (error) { @@ -256,7 +257,7 @@ class ImageCacheManager { try { // 只从缓存获取本地资源 if (this.isBuildAsset(url)) { - const cache = await caches.open(this.imageCacheName) + const cache = await this.getCacheForUrl(url) // 使用相同的逻辑选择缓存 return await cache.match(url) } return null @@ -381,7 +382,7 @@ class ImageCacheManager { // 检查浏览器是否支持缓存API以及资源是否适合缓存 if (!('caches' in window) || !this.isBuildAsset(src)) return - const cache = await caches.open(this.imageCacheName) + const cache = await this.getCacheForUrl(src) const cachedResponse = await cache.match(src) // 只有当图片尚未缓存时才进行缓存操作 diff --git a/src/utils/versionChecker.js b/src/utils/versionChecker.js index 665b1f4..6a1a937 100644 --- a/src/utils/versionChecker.js +++ b/src/utils/versionChecker.js @@ -1,5 +1,7 @@ // 版本检查工具 +import { imageCacheManager } from '@/utils/imageCacheManager' + const PERSISTENT_KEYS = [ 'preferred-language', // 语言设置 'userProfile', // 用户资料 @@ -70,6 +72,7 @@ export class VersionChecker { if (versionResult.shouldUpdate) { this.handleVersionUpdate() + localStorage.setItem('likei-image-cache-version', this.currentVersion) // 同步 imageCacheManager 的版本信息 return true } @@ -79,6 +82,7 @@ export class VersionChecker { if (storedLocalVersion !== this.currentVersion) { // 本地版本变化，可能是首次加载或本地版本升级 localStorage.setItem(this.storageKey, this.currentVersion) + localStorage.setItem('likei-image-cache-version', this.currentVersion) console.log(`本地版本更新到: ${this.currentVersion}`) } @@ -86,138 +90,94 @@ export class VersionChecker { } // 处理版本更新 - handleVersionUpdate(updateType = 'major') { + async handleVersionUpdate(updateType = 'major') { console.log(`检测到${updateType}版本更新，正在清理缓存...`) // 根据更新类型决定清除策略 switch (updateType) { case 'major': - // 重大更新：清除所有缓存 - this.clearCache() + await this.clearCache() // 重大更新：清除所有缓存 break case 'minor': - // 一般更新：只清除图片和assets缓存 - this.clearCacheSelective('all') + await imageCacheManager.clearCacheSelective('all') // 一般更新：清除图片和assets缓存 + this.clearSessionData() // 清除 session 数据 break case 'patch': - // 小更新：只清除图片缓存 - this.clearCacheSelective('images') + await imageCacheManager.clearCacheSelective('images') // 小更新：只清除图片缓存 break default: // 默认：清除所有缓存 - this.clearCache() + await this.clearCache() } localStorage.setItem(this.storageKey, this.currentVersion) localStorage.setItem(this.serverVersionKey, this.currentVersion) + localStorage.setItem('likei-image-cache-version', this.currentVersion) // 直接刷新页面 this.forceReload() } - // 添加选择性清除缓存方法 - clearCacheSelective(clearType = 'images') { - // 保存需要保留的数据 - const preservedData = {} + // 添加专门处理 session 数据的方法 + clearSessionData() { + try { + // 保存需要保留的数据 + const preservedData = {} + PERSISTENT_KEYS.forEach((key) => { + const value = localStorage.getItem(key) + if (value !== null) { + preservedData[key] = value + } + }) - PERSISTENT_KEYS.forEach((key) => { - const value = localStorage.getItem(key) - if (value !== null) { - preservedData[key] = value - } - }) + // 清除 sessionStorage + sessionStorage.clear() - // 清除sessionStorage - sessionStorage.clear() - - // 清除指定类型的缓存 - if ('caches' in window) { - caches - .keys() - .then((names) => { - let cachesToClear = [] - switch (clearType) { - case 'images': - cachesToClear = names.filter((name) => name.startsWith('likei-images-v')) - break - case 'assets': - cachesToClear = names.filter((name) => name.startsWith('likei-assets-v')) - break - case 'all': - cachesToClear = names.filter( - (name) => name.startsWith('likei-images-v') || name.startsWith('likei-assets-v') - ) - break - default: - cachesToClear = names.filter((name) => name.startsWith('likei-images-v')) - } - - cachesToClear.forEach((name) => { - caches.delete(name) - }) - - console.log(`已选择性清除${clearType}缓存:`, cachesToClear) - }) - .catch((err) => { - console.warn('清除缓存失败:', err) - }) + // 恢复保留的数据 + Object.keys(preservedData).forEach((key) => { + localStorage.setItem(key, preservedData[key]) + }) + } catch (error) { + console.warn('清理 session 数据失败:', error) } - - // 恢复保留的数据 - Object.keys(preservedData).forEach((key) => { - localStorage.setItem(key, preservedData[key]) - }) } - // 清除应用缓存 - clearCache() { - // 保存需要保留的数据 - const preservedData = {} + // 建议改为 async/await 风格以保持一致性 + async clearCache() { + try { + // 保存需要保留的数据 + const preservedData = {} + PERSISTENT_KEYS.forEach((key) => { + const value = localStorage.getItem(key) + if (value !== null) { + preservedData[key] = value + } + }) - PERSISTENT_KEYS.forEach((key) => { - const value = localStorage.getItem(key) - if (value !== null) { - preservedData[key] = value + // 清除所有localStorage + localStorage.clear() + + // 恢复保留的数据 + Object.keys(preservedData).forEach((key) => { + localStorage.setItem(key, preservedData[key]) + }) + + // 清除sessionStorage + sessionStorage.clear() + + // 清除所有缓存 + if ('caches' in window) { + const cacheNames = await caches.keys() + await Promise.all(cacheNames.map((name) => caches.delete(name))) } - }) - // 清除所有localStorage - localStorage.clear() - - // 恢复保留的数据 - Object.keys(preservedData).forEach((key) => { - localStorage.setItem(key, preservedData[key]) - }) - - // 清除sessionStorage - sessionStorage.clear() - - // 清除所有缓存 - if ('caches' in window) { - caches - .keys() - .then((names) => { - names.forEach((name) => { - caches.delete(name) - }) - }) - .catch((err) => { - console.warn('清除缓存失败:', err) - }) - } - - // 注销Service Worker（如果存在） - if ('serviceWorker' in navigator) { - navigator.serviceWorker - .getRegistrations() - .then((registrations) => { - registrations.forEach((registration) => { - registration.unregister() - }) - }) - .catch((err) => { - console.warn('注销Service Worker失败:', err) - }) + // 注销Service Worker（如果存在） + if ('serviceWorker' in navigator) { + const registrations = await navigator.serviceWorker.getRegistrations() + await Promise.all(registrations.map((reg) => reg.unregister())) + } + } catch (error) { + console.warn('清除缓存失败:', error) } }