优化 App.vue 中的背景图片加载逻辑,添加登录状态变化时清空背景图片数组的处理,并更新图片地址获取逻辑以支持缓存和原始地址的选择。

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