From 181ad39e183962d3b7bcee8d0992c35097cfa644 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 30 Oct 2024 13:20:22 +0800
Subject: [PATCH] Refactor PluginCard.vue and login.vue components

---
 src/components/cards/PluginCard.vue | 19 ++++++--
 src/pages/login.vue                 | 73 ++++++++++++++++++-----------
 2 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 64791503..6dcf9749 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -61,6 +61,9 @@ const pluginInfoDialog = ref(false)
 // 进度框文本
 const progressText = ref('正在更新插件...')
 
+// 用户头像是否加载完成
+const isAvatarLoaded = ref(false)
+
 // 插件数据页面配置项
 let pluginPageItems = ref([])
 
@@ -218,7 +221,9 @@ const iconPath: Ref<string> = computed(() => {
 // 插件作者头像路径
 const authorPath: Ref<string> = computed(() => {
   // 网络图片则使用代理后返回
-  return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.author_url + '.png')}`
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
+    props.plugin?.author_url + '.png',
+  )}`
 })
 
 // 重置插件
@@ -443,7 +448,9 @@ watch(
     </div>
     <VCardText class="flex flex-none align-self-baseline py-3 w-full align-end">
       <span class="author-info">
-        <VImg :src="authorPath" class="author-avatar" />
+        <VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
+          <VIcon v-if="!isAvatarLoaded" icon="mdi-github" class="me-1" />
+        </VImg>
         <a :href="props.plugin?.author_url" target="_blank" @click.stop>
           {{ props.plugin?.plugin_author }}
         </a>
@@ -519,15 +526,17 @@ watch(
   content: '';
   inset: 0;
 }
+
 .author-info {
   display: flex;
   align-items: center;
 }
+
 .author-avatar {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
   border-radius: 50%;
+  block-size: 24px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
   object-fit: cover;
 }
 </style>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index f22a74f7..2b2985ab 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -31,13 +31,9 @@ const isPasswordVisible = ref(false)
 // 错误信息
 const errorMessage = ref('')
 
-// 背景图片
+// 背景图片 URL 和预加载 URL
 const backgroundImageUrl = ref('')
-
-// 所有的背景图片
 const backgroundImages = ref<string[]>([])
-
-// 背景图片加载状态
 const isImageLoaded = ref(false)
 
 // 是否开启双重验证
@@ -54,7 +50,6 @@ 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]
     }
@@ -63,6 +58,34 @@ async function fetchBackgroundImage() {
   }
 }
 
+// 切换背景图片函数
+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
@@ -205,14 +228,8 @@ onMounted(async () => {
   } else {
     // 获取背景图片
     await fetchBackgroundImage()
-
-    // 每隔5秒更换一次背景图片
-    intervalTimer = setInterval(() => {
-      if (backgroundImages.value.length > 0) {
-        const index = Math.floor(Math.random() * backgroundImages.value.length)
-        backgroundImageUrl.value = backgroundImages.value[index]
-      }
-    }, 5000)
+    // 开始背景图片定时切换
+    startBackgroundImageRotation()
   }
 })
 
@@ -222,19 +239,21 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <template v-for="image in backgroundImages">
-    <div v-if="backgroundImageUrl == image" class="absolute inset-0">
-      <VImg :src="image" class="w-full h-full" cover position="center top" @load="isImageLoaded = true">
-        <template #placeholder>
-          <VSkeletonLoader v-if="!isImageLoaded" class="object-cover" />
-        </template>
-        <div
-          class="absolute inset-0"
-          style="background-image: linear-gradient(rgba(45, 55, 72, 33%) 0%, rgb(26, 32, 46) 100%)"
-        />
-      </VImg>
-    </div>
-  </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"