From 9444b0e518d2ffb873fae306e7684c5e72010ba3 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 13 May 2025 13:37:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=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=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=8F=98=E5=8C=96=E6=97=B6=E6=B8=85=E7=A9=BA?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87=E6=95=B0=E7=BB=84=E7=9A=84?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=EF=BC=8C=E5=B9=B6=E6=9B=B4=E6=96=B0=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=9C=B0=E5=9D=80=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BB=A5=E6=94=AF=E6=8C=81=E7=BC=93=E5=AD=98=E5=92=8C=E5=8E=9F?=
 =?UTF-8?q?=E5=A7=8B=E5=9C=B0=E5=9D=80=E7=9A=84=E9=80=89=E6=8B=A9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c17f24ce..11ac6aa7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,15 @@ const show = ref(false)
 const authStore = useAuthStore()
 const isLogin = computed(() => authStore.token)
 
+// 生成背景图片key
+const loginStateKey = computed(() => (isLogin.value ? 'logged-in' : 'logged-out'))
+
 // 监听登录状态变化
 watch(isLogin, newValue => {
   if (newValue) {
-    // 登录后重新加载背景图片
+    // 登录后先清空背景图片数组，强制视图更新
+    backgroundImages.value = []
+    // 然后重新加载背景图片
     fetchBackgroundImages().then(() => startBackgroundRotation())
   }
 })
@@ -136,8 +141,10 @@ function preloadImage(url: string): Promise<boolean> {
 // 计算图片地址
 function getImgUrl(url: string) {
   // 使用图片缓存
-  if (globalSettings.GLOBAL_IMAGE_CACHE && isLogin.value)
-    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  if (globalSettings.GLOBAL_IMAGE_CACHE && isLogin.value) {
+    const cacheUrl = `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+    return cacheUrl
+  }
   return url
 }
 
@@ -230,7 +237,7 @@ onUnmounted(() => {
       <div class="background-container">
         <div
           v-for="(imageUrl, index) in backgroundImages"
-          :key="index"
+          :key="`bg-${index}-${loginStateKey}`"
           class="background-image"
           :class="{ 'active': index === activeImageIndex }"
           :style="{ backgroundImage: `url(${getImgUrl(imageUrl)})` }"