feat(周星排行榜页): 新增图片预加载缓冲动画，并修复切换按钮的显示问题

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -1,6 +1,14 @@
 <!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
 <template>
   <div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div v-else>
       <!-- 状态栏占位区域（仅在APP中显示） -->
       <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -124,7 +132,9 @@
           </div>
 
           <!-- 主体内容 -->
-        <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%">
+          <div
+            style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
+          >
             <!-- 前3名 -->
             <div style="margin-top: 3%">
               <!-- 第一 -->
@@ -397,7 +407,9 @@
                   alt=""
                   style="width: 15%; display: block; margin-right: 5px"
                 />
-              <div style="font-weight: 590; font-size: 1.3em">:{{ myFragment.quantity || 0 }}</div>
+                <div style="font-weight: 590; font-size: 1.3em">
+                  :{{ myFragment.quantity || 0 }}
+                </div>
               </div>
 
               <!-- 礼品 -->
@@ -616,7 +628,12 @@
             <!-- 名字 -->
             <div style="position: relative; width: 25%">
               <!-- 背景图 -->
-            <img v-smart-img :src="imageUrl('nameBg')" alt="" style="width: 100%; display: block" />
+              <img
+                v-smart-img
+                :src="imageUrl('nameBg')"
+                alt=""
+                style="width: 100%; display: block"
+              />
               <div
                 style="
                   position: absolute;
@@ -776,6 +793,7 @@
         </div>
       </maskLayer>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -804,6 +822,9 @@ import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import TopUser from './components/topUser.vue'
 
+// 预加载状态
+const isLoading = ref(true)
+
 // 获取OSS图片URL的函数
 const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename)
 
@@ -811,9 +832,7 @@ const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename)
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    getUserInfo()
+    completePreloading() // 完成预加载
-    updatePageData() // 刷新页面数据
-    preloadCriticalImages() // 预加载关键图片
   })
 }
 
@@ -1097,19 +1116,20 @@ const getThisWeekMyFragment = async () => {
 }
 
 // 刷新页面数据
-const updatePageData = () => {
+const updatePageData = async () => {
-  getThisWeekRanking() // 获取本周排名
+  await Promise.all([
-  getHistoryRankingTop1() // 获取历史top1
+    getThisWeekRanking(), // 获取本周排名
-
+    getHistoryRankingTop1(), // 获取历史top1
-  getThisWeekRewards() // 获取本周奖励
+    getThisWeekRewards(), // 获取本周奖励
-  getThisWeekGifts() // 获取本周礼物
+    getThisWeekGifts(), // 获取本周礼物
-  getThisWeekExchangeGoods() // 获取本周可兑换商品
+    getThisWeekExchangeGoods(), // 获取本周可兑换商品
+  ])
 }
 
 // 预加载关键图片
-const preloadCriticalImages = () => {
+const preloadCriticalImages = async () => {
   const criticalImages = [
-    imageUrl('bg'),
+    // imageUrl('bg'),
     imageUrl('history'),
     imageUrl('gifts'),
     imageUrl('dayBg'),
@@ -1140,7 +1160,7 @@ const preloadCriticalImages = () => {
     imageUrl('timeNext'),
   ]
 
-  preloadImages(criticalImages)
+  await preloadImages(criticalImages)
 }
 
 const debouceGetThisWeekRanking = useThrottle(() => {
@@ -1158,6 +1178,19 @@ const observer = new IntersectionObserver((entries) => {
   })
 })
 
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([getUserInfo(), updatePageData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
+}
+
 // 组件挂载时检测环境
 onMounted(() => {
   connectToAppHandler()
@@ -1226,6 +1259,36 @@ onUnmounted(() => {
   font-size: 0.8em;
 }
 
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;