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()
-    // 开始背景图片定时切换
-    startBackgroundImageRotation()
+    if (backgroundImages.value.length > 1) {
+      startBackgroundRotation()
+    }
   }
 })
 
@@ -240,79 +215,75 @@ onUnmounted(() => {
 
 <template>
   <!-- 当前背景图片 -->
-  <div class="absolute inset-0 w-full h-full overflow-hidden">
-    <VImg
-      :src="backgroundImageUrl"
-      :class="{ 'opacity-0': !isImageLoaded, 'opacity-100': isImageLoaded }"
-      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%)"
-    />
-  </div>
-
-  <div class="auth-wrapper d-flex align-center justify-center pa-4">
-    <VCard
-      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-semibold text-2xl text-uppercase"> MoviePilot </VCardTitle>
-      </VCardItem>
-
-      <VCardText>
-        <VForm ref="refForm" @submit.prevent="() => {}">
-          <VRow>
-            <!-- username -->
-            <VCol cols="12">
-              <VTextField
-                ref="usernameInput"
-                v-model="form.username"
-                label="用户名"
-                type="text"
-                :rules="[requiredValidator]"
-                @input="fetchOTP"
-              />
-            </VCol>
-            <!-- password -->
-            <VCol cols="12">
-              <VTextField
-                v-model="form.password"
-                label="密码"
-                :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
-                :rules="[requiredValidator]"
-                @click:append-inner="isPasswordVisible = !isPasswordVisible"
-              />
-            </VCol>
-            <VCol cols="12">
-              <VTextField v-if="isOTP" v-model="form.otp_password" label="双重验证码" type="input" />
-              <!-- remember me checkbox -->
-              <div class="d-flex align-center justify-space-between flex-wrap">
-                <VCheckbox v-model="form.remember" label="保持登录" required />
-              </div>
-            </VCol>
-            <VCol cols="12">
-              <!-- login button -->
-              <VBtn block type="submit" @click="login"> 登录 </VBtn>
-              <div v-if="errorMessage" class="text-error mt-2 text-shadow">
-                {{ errorMessage }}
-              </div>
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-    </VCard>
+  <div class="relative flex min-h-screen flex-col bg-gray-900 py-14">
+    <div>
+      <div
+        v-for="(imageUrl, index) in backgroundImages"
+        class="absolute-top-shift absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in"
+        :class="{ 'opacity-100': index === activeImageIndex, 'opacity-0': index !== activeImageIndex }"
+      >
+        <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, 47%) 0%, rgb(26, 32, 46) 100%)"
+        />
+      </div>
+    </div>
+    <!-- 登录表单 -->
+    <div class="auth-wrapper d-flex align-center justify-center pa-4">
+      <VCard class="auth-card px-7 py-3 w-full h-full rounded-lg opacity-85" 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>
+        </VCardItem>
+        <VCardText>
+          <VForm ref="refForm" @submit.prevent="() => {}">
+            <VRow>
+              <!-- username -->
+              <VCol cols="12">
+                <VTextField
+                  ref="usernameInput"
+                  v-model="form.username"
+                  label="用户名"
+                  type="text"
+                  :rules="[requiredValidator]"
+                  @input="fetchOTP"
+                />
+              </VCol>
+              <!-- password -->
+              <VCol cols="12">
+                <VTextField
+                  v-model="form.password"
+                  label="密码"
+                  :type="isPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                  :rules="[requiredValidator]"
+                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VTextField v-if="isOTP" v-model="form.otp_password" label="双重验证码" type="input" />
+                <!-- remember me checkbox -->
+                <div class="d-flex align-center justify-space-between flex-wrap">
+                  <VCheckbox v-model="form.remember" label="保持登录" required />
+                </div>
+              </VCol>
+              <VCol cols="12">
+                <!-- login button -->
+                <VBtn block type="submit" @click="login"> 登录 </VBtn>
+                <div v-if="errorMessage" class="text-error mt-2 text-shadow">
+                  {{ errorMessage }}
+                </div>
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+      </VCard>
+    </div>
   </div>
 </template>
 
@@ -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>