From 8466a404553038c41ff285f886ff4053c5652fe4 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 12 May 2025 13:51:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20App.vue=20=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 58 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f8a207df..366ce1a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -90,6 +90,7 @@ async function fetchBackgroundImages() {
 
 // 开始背景图片轮换
 function startBackgroundRotation() {
+  // 清除轮换定时器
   if (backgroundRotationTimer) clearInterval(backgroundRotationTimer)
 
   if (backgroundImages.value.length > 1) {
@@ -140,20 +141,6 @@ function getImgUrl(url: string) {
   return url
 }
 
-// 处理页面可见性变化
-function handleVisibilityChange() {
-  if (document.visibilityState === 'visible') {
-    // 强制重新获取背景图片
-    fetchBackgroundImages().then(() => {
-      // 确保在获取到新图片后重新开始轮换
-      if (backgroundRotationTimer) {
-        clearInterval(backgroundRotationTimer)
-      }
-      startBackgroundRotation()
-    })
-  }
-}
-
 // 添加logo动画效果并延迟移除加载界面
 function animateAndRemoveLoader() {
   const loadingBg = document.querySelector('#loading-bg') as HTMLElement
@@ -172,29 +159,58 @@ function animateAndRemoveLoader() {
   }
 }
 
+// 加载背景图片
+function loadBackgroundImages() {
+  fetchBackgroundImages()
+    .then(() => {
+      startBackgroundRotation()
+    })
+    .catch(() => {
+      console.error('加载背景图片失败')
+    })
+}
+
 onMounted(() => {
   // 初始化data-theme属性
   updateHtmlThemeAttribute(globalTheme.name.value)
 
-  // 加载背景图片并开始轮换
-  fetchBackgroundImages().then(() => startBackgroundRotation())
+  // 默认隐藏页面
+  show.value = false
 
-  // 添加页面可见性变化监听
-  document.addEventListener('visibilitychange', handleVisibilityChange)
+  // 加载背景图片
+  loadBackgroundImages()
 
+  // 移除加载动画
   ensureRenderComplete(() => {
     nextTick(() => {
       setTimeout(() => {
-        // 移除加载动画
+        // 移除加载动画，显示页面
         animateAndRemoveLoader()
       }, 1500)
     })
   })
+
+  // 添加页面可见性变化监听
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      loadBackgroundImages()
+    }
+  })
+
+  // 添加PWA的页面恢复事件监听
+  window.addEventListener('pageshow', event => {
+    // persisted属性为true表示页面是从bfcache中恢复的
+    if (event.persisted) {
+      loadBackgroundImages()
+    }
+  })
 })
 
 onUnmounted(() => {
   // 移除页面可见性监听
-  document.removeEventListener('visibilitychange', handleVisibilityChange)
+  document.removeEventListener('visibilitychange', () => {})
+  // 移除PWA的页面恢复事件监听
+  window.removeEventListener('pageshow', () => {})
 
   // 清除轮换定时器
   if (backgroundRotationTimer) {
@@ -217,7 +233,7 @@ onUnmounted(() => {
           :style="{ backgroundImage: `url(${getImgUrl(imageUrl)})` }"
         ></div>
         <!-- 全局磨砂层 -->
-        <div v-if="isLogin" class="global-blur-layer"></div>
+        <div v-if="isLogin && isTransparentTheme" class="global-blur-layer"></div>
       </div>
     </template>