在 App.vue 中添加页面可见性变化处理逻辑，优化背景图片轮换功能；在 _misc.scss 中调整背景渐变透明度和样式，提升视觉效果。

src/@core/scss/base/placeholders/_misc.scss

@@ -1,29 +1,29 @@
 %blurry-bg {
+    position: relative;
     /* stylelint-disable property-no-vendor-prefix */
-    // -webkit-backdrop-filter: blur(6px);
+    // -webkit-backdrop-filter: blur(6px);-webkit-backdrop-filter-webkit-backdrop-filter
-    // backdrop-filter: blur(6px);
+    // backdrop-filter: blur(6px);backdrop-filterbackdrop-filter
     /* stylelint-enable */
     background-color: transparent;
-
+    box-shadow: none;
-    position: relative;
     
     &::before {
-      content: "";
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: calc(env(safe-area-inset-top) + 5rem);
-      pointer-events: none;
       z-index: -1;
+      block-size: calc(env(safe-area-inset-top) + 5rem);
+      content: "";
+      inset-block-start: 0;
+      inset-inline: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
       
       .v-theme--light & {
         background: linear-gradient(
           to bottom,
-          rgba(var(--v-theme-background), 0.9) 0%,
+          rgba(var(--v-theme-background), 0.85) 0%,
-          rgba(var(--v-theme-background), 0.7) 20%,
+          rgba(var(--v-theme-background), 0.65) 20%,
-          rgba(var(--v-theme-background), 0.5) 40%,
+          rgba(var(--v-theme-background), 0.45) 40%,
-          rgba(var(--v-theme-background), 0.3) 60%,
+          rgba(var(--v-theme-background), 0.25) 60%,
           rgba(var(--v-theme-background), 0.1) 80%,
           rgba(var(--v-theme-background), 0.0) 100%
         );
@@ -32,11 +32,11 @@
       .v-theme--dark & {
         background: linear-gradient(
           to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
+          rgba(var(--v-theme-background), 0.9) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
+          rgba(var(--v-theme-background), 0.7) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
+          rgba(var(--v-theme-background), 0.5) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
+          rgba(var(--v-theme-background), 0.3) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
+          rgba(var(--v-theme-background), 0.15) 80%,
           rgba(var(--v-theme-background), 0.0) 100%
         );
       }
@@ -44,11 +44,11 @@
       .v-theme--purple & {
         background: linear-gradient(
           to bottom,
-          rgba(var(--v-theme-background), 1) 0%,
+          rgba(var(--v-theme-background), 0.9) 0%,
-          rgba(var(--v-theme-background), 0.8) 20%,
+          rgba(var(--v-theme-background), 0.7) 20%,
-          rgba(var(--v-theme-background), 0.6) 40%,
+          rgba(var(--v-theme-background), 0.5) 40%,
-          rgba(var(--v-theme-background), 0.4) 60%,
+          rgba(var(--v-theme-background), 0.3) 60%,
-          rgba(var(--v-theme-background), 0.2) 80%,
+          rgba(var(--v-theme-background), 0.15) 80%,
           rgba(var(--v-theme-background), 0.0) 100%
         );
       }
@@ -56,14 +56,65 @@
       .v-theme--transparent & {
         background: linear-gradient(
           to bottom,
-          rgba(11, 11, 11, 0.8) 0%,
+          rgba(11, 11, 11, 70%) 0%,
-          rgba(11, 11, 11, 0.7) 20%,
+          rgba(11, 11, 11, 60%) 20%,
-          rgba(11, 11, 11, 0.6) 40%,
+          rgba(11, 11, 11, 50%) 40%,
-          rgba(11, 11, 11, 0.4) 60%,
+          rgba(11, 11, 11, 30%) 60%,
-          rgba(11, 11, 11, 0.2) 80%,
+          rgba(11, 11, 11, 15%) 80%,
-          rgba(11, 11, 11, 0.0) 100%
+          rgba(11, 11, 11, 0%) 100%
         );
       }
     }
-    box-shadow: none;
+    
+    .window-scrolled & {
+      &::before {
+        .v-theme--light & {
+          background: linear-gradient(
+            to bottom,
+            rgba(var(--v-theme-background), 0.95) 0%,
+            rgba(var(--v-theme-background), 0.85) 20%,
+            rgba(var(--v-theme-background), 0.7) 40%,
+            rgba(var(--v-theme-background), 0.5) 60%,
+            rgba(var(--v-theme-background), 0.2) 80%,
+            rgba(var(--v-theme-background), 0.0) 100%
+          );
+        }
+        
+        .v-theme--dark & {
+          background: linear-gradient(
+            to bottom,
+            rgba(var(--v-theme-background), 1) 0%,
+            rgba(var(--v-theme-background), 0.9) 20%,
+            rgba(var(--v-theme-background), 0.75) 40%,
+            rgba(var(--v-theme-background), 0.55) 60%,
+            rgba(var(--v-theme-background), 0.3) 80%,
+            rgba(var(--v-theme-background), 0.0) 100%
+          );
+        }
+  
+        .v-theme--purple & {
+          background: linear-gradient(
+            to bottom,
+            rgba(var(--v-theme-background), 1) 0%,
+            rgba(var(--v-theme-background), 0.9) 20%,
+            rgba(var(--v-theme-background), 0.75) 40%,
+            rgba(var(--v-theme-background), 0.55) 60%,
+            rgba(var(--v-theme-background), 0.3) 80%,
+            rgba(var(--v-theme-background), 0.0) 100%
+          );
+        }
+  
+        .v-theme--transparent & {
+          background: linear-gradient(
+            to bottom,
+            rgba(11, 11, 11, 90%) 0%,
+            rgba(11, 11, 11, 80%) 20%,
+            rgba(11, 11, 11, 70%) 40%,
+            rgba(11, 11, 11, 50%) 60%,
+            rgba(11, 11, 11, 30%) 80%,
+            rgba(11, 11, 11, 0%) 100%
+          );
+        }
+      }
+    }
 }

src/App.vue

@@ -60,6 +60,20 @@ function getImgUrl(url: string) {
   return url
 }
 
+// 处理页面可见性变化
+function handleVisibilityChange() {
+  if (document.visibilityState === 'visible' && isTransparentTheme.value) {
+    // 如果已有背景图片数据，直接重启轮换
+    if (backgroundImages.value.length > 0) {
+      startBackgroundRotation()
+    }
+    // 如果没有背景图片数据，重新获取
+    else {
+      fetchBackgroundImages().then(() => startBackgroundRotation())
+    }
+  }
+}
+
 // 监听主题变化
 watch(
   () => globalTheme.name.value,
@@ -112,6 +126,9 @@ onMounted(() => {
   // 初始化data-theme属性
   updateHtmlThemeAttribute(globalTheme.name.value)
 
+  // 添加页面可见性变化监听
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+
   ensureRenderComplete(() => {
     nextTick(() => {
       setTimeout(() => {
@@ -125,6 +142,17 @@ onMounted(() => {
     })
   })
 })
+
+onUnmounted(() => {
+  // 移除页面可见性监听
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+
+  // 清除轮换定时器
+  if (backgroundRotationTimer) {
+    clearInterval(backgroundRotationTimer)
+    backgroundRotationTimer = null
+  }
+})
 </script>
 
 <template>