Refactor background image rotation in login.vue

src/pages/login.vue

@@ -32,9 +32,8 @@ const isPasswordVisible = ref(false)
 const errorMessage = ref('')
 
 // 背景图片 URL 和预加载 URL
-const backgroundImageUrl = ref('')
 const backgroundImages = ref<string[]>([])
-const isImageLoaded = ref(false)
+const activeImageIndex = ref(0)
 
 // 是否开启双重验证
 const isOTP = ref(false)
@@ -49,43 +48,11 @@ let intervalTimer: NodeJS.Timeout | null = null
 async function fetchBackgroundImage() {
   try {
     backgroundImages.value = await api.get('/login/wallpapers')
-    if (backgroundImages.value && backgroundImages.value.length > 0) {
-      backgroundImages.value.sort(() => Math.random() - 0.5)
-      backgroundImageUrl.value = backgroundImages.value[0]
-    }
   } catch (e) {
     console.log(e)
   }
 }
 
-// 切换背景图片函数
-function startBackgroundImageRotation() {
-  let currentIndex = 0
-
-  intervalTimer = setInterval(() => {
-    if (backgroundImages.value.length > 1) {
-      // 更新下一张图片索引
-      const nextIndex = (currentIndex + 1) % backgroundImages.value.length
-      const nextImageUrl = backgroundImages.value[nextIndex]
-      // 使用预加载机制确保下一张图片已加载完成
-      const img = new Image()
-      img.src = nextImageUrl
-      img.onload = () => {
-        // 开始淡入过渡
-        isImageLoaded.value = false
-        // 延迟一小段时间触发淡入效果
-        setTimeout(() => {
-          // 更新当前索引并切换背景图片 URL
-          currentIndex = nextIndex
-          backgroundImageUrl.value = nextImageUrl
-          // 切换完成后显示图片
-          isImageLoaded.value = true
-        }, 1000)
-      }
-    }
-  }, 5000)
-}
-
 // 查询是否开启双重验证
 const fetchOTP = debounce(async () => {
   const userid = usernameInput.value?.value
@@ -216,6 +183,13 @@ function login() {
     })
 }
 
+// 初始化背景图片轮循
+function startBackgroundRotation() {
+  intervalTimer = setInterval(() => {
+    activeImageIndex.value = (activeImageIndex.value + 1) % backgroundImages.value.length
+  }, 5000) // 每5秒切换一次图片
+}
+
 // 自动登录
 onMounted(async () => {
   // 从Vuex Store中获取token和remember状态
@@ -228,8 +202,9 @@ onMounted(async () => {
   } else {
     // 获取背景图片
     await fetchBackgroundImage()
-    // 开始背景图片定时切换
+    if (backgroundImages.value.length > 1) {
-    startBackgroundImageRotation()
+      startBackgroundRotation()
+    }
   }
 })
 
@@ -240,36 +215,31 @@ onUnmounted(() => {
 
 <template>
   <!-- 当前背景图片 -->
-  <div class="absolute inset-0 w-full h-full overflow-hidden">
+  <div class="relative flex min-h-screen flex-col bg-gray-900 py-14">
-    <VImg
+    <div>
-      :src="backgroundImageUrl"
+      <div
-      :class="{ 'opacity-0': !isImageLoaded, 'opacity-100': isImageLoaded }"
+        v-for="(imageUrl, index) in backgroundImages"
-      class="absolute inset-0 transition-opacity duration-1000"
+        class="absolute-top-shift absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in"
-      cover
+        :class="{ 'opacity-100': index === activeImageIndex, 'opacity-0': index !== activeImageIndex }"
-      position="center top"
+      >
-    />
+        <VImg :src="imageUrl" class="absolute inset-0 transition-opacity duration-1000" cover position="center top" />
         <div
           class="absolute inset-0"
-      style="background-image: linear-gradient(rgba(45, 55, 72, 33%) 0%, rgb(26, 32, 46) 100%)"
+          style="background-image: linear-gradient(rgba(45, 55, 72, 47%) 0%, rgb(26, 32, 46) 100%)"
         />
       </div>
-
+    </div>
+    <!-- 登录表单 -->
     <div class="auth-wrapper d-flex align-center justify-center pa-4">
-    <VCard
+      <VCard class="auth-card px-7 py-3 w-full h-full rounded-lg opacity-85" max-width="24rem">
-      class="auth-card px-7 py-3 w-full h-full rounded-lg"
-      :class="{ 'opacity-85': isImageLoaded }"
-      max-width="24rem"
-    >
         <VCardItem class="justify-center">
           <template #prepend>
             <div class="d-flex pe-0">
               <VImg :src="logo" width="64" height="64" />
             </div>
           </template>
-
+          <VCardTitle class="font-weight-bold text-2xl text-uppercase"> MoviePilot </VCardTitle>
-        <VCardTitle class="font-weight-semibold text-2xl text-uppercase"> MoviePilot </VCardTitle>
         </VCardItem>
-
         <VCardText>
           <VForm ref="refForm" @submit.prevent="() => {}">
             <VRow>
@@ -314,6 +284,7 @@ onUnmounted(() => {
         </VCardText>
       </VCard>
     </div>
+  </div>
 </template>
 
 <style lang="scss">
@@ -322,4 +293,8 @@ onUnmounted(() => {
 .v-card-item__prepend {
   padding-inline-end: 0 !important;
 }
+
+.absolute-top-shift {
+  inset-block-start: calc(-4rem - env(safe-area-inset-top));
+}
 </style>