mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
优化 App.vue 中的背景图片加载逻辑,添加登录状态变化时清空背景图片数组的处理,并更新图片地址获取逻辑以支持缓存和原始地址的选择。
This commit is contained in:
+11
-4
@@ -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)})` }"
|
||||||
|
|||||||
Reference in New Issue
Block a user