feat(国王女皇榜): 使用网络图片，并对接图片的缓存，预加载等功能

src/views/Ranking/KingAndQueen/TopList.vue

@@ -1,13 +1,14 @@
+<!-- src/views/Ranking/KingAndQueen/TopList.vue -->
 <template>
   <div class="fullPage">
-    <div class="bg">
+    <div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
       <!-- 状态栏占位区域（仅在APP中显示） -->
       <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
       <!-- 帮助按钮 -->
       <img
         v-smart-img
-        :src="images.help"
+        :src="imageUrl('help')"
         alt=""
         style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
         @click="helpInfoShow = true"
@@ -16,7 +17,7 @@
       <!-- history按钮 -->
       <img
         v-smart-img
-        :src="images.history"
+        :src="imageUrl('history')"
         alt=""
         style="width: 20%; margin-top: 20px"
         @click="historyShow = true"
@@ -25,7 +26,7 @@
       <!-- 每周榜首 -->
       <div style="display: flex; flex-direction: column; align-items: center">
         <!-- 主标题 -->
-        <img v-smart-img :src="images.listTitle" alt="" style="width: 90%" />
+        <img v-smart-img :src="imageUrl('listTitle')" alt="" style="width: 90%" />
         <!-- 榜首 -->
         <div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
           <div
@@ -103,12 +104,12 @@
       <!-- 刷新倒计时 -->
       <div style="display: flex; justify-content: center; margin-top: 20px">
         <!-- 天数 -->
-        <itemCenter :imgUrl="images.dayBg" style="width: 10%; margin-right: 10px">
+        <itemCenter :imgUrl="imageUrl('dayBg')" style="width: 10%; margin-right: 10px">
           <div class="time">{{ Days }}D</div>
         </itemCenter>
 
         <!-- 当天时间倒计时 -->
-        <itemCenter :imgUrl="images.timeBg" style="width: 23.75%">
+        <itemCenter :imgUrl="imageUrl('timeBg')" style="width: 23.75%">
           <div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
         </itemCenter>
       </div>
@@ -117,7 +118,7 @@
       <div style="display: flex; justify-content: flex-end; margin-top: -8%">
         <img
           v-smart-img
-          :src="images.rewards"
+          :src="imageUrl('rewards')"
           alt=""
           style="width: 20%"
           @click="rewardsShow = true"
@@ -126,15 +127,15 @@
 
       <!-- 每周礼物 -->
       <div style="display: flex; justify-content: center">
-        <itemCenter :imgUrl="images.eventGifts">
+        <itemCenter :imgUrl="imageUrl('eventGifts')">
           <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
             <div
               v-for="(gift, index) in gifts"
               :key="index"
               style="width: 30%; display: flex; flex-direction: column"
             >
-              <itemCenter :imgUrl="images.gift">
-                <img :src="gift.giftPhoto" alt="" width="50%" />
+              <itemCenter :imgUrl="imageUrl('gift')">
+                <img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
               </itemCenter>
               <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
                 <img
@@ -160,10 +161,10 @@
             v-show="visibleKingList"
             style="width: 100%; display: flex; justify-content: space-around"
           >
-            <img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" />
+            <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
             <img
               v-smart-img
-              :src="images.queenBt"
+              :src="imageUrl('queenBt')"
               alt=""
               style="width: 40%"
               @click="visibleKingList = false"
@@ -176,12 +177,12 @@
           >
             <img
               v-smart-img
-              :src="images.kingBt"
+              :src="imageUrl('kingBt')"
               alt=""
               style="width: 40%"
               @click="visibleKingList = true"
             />
-            <img v-smart-img :src="images.queenBtActive" alt="" style="width: 40%" />
+            <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
           </div>
         </div>
 
@@ -189,7 +190,7 @@
         <div style="width: 100%">
           <borderImg title="Ranking">
             <itemCenter
-              :imgUrl="images['border-item-user']"
+              :imgUrl="imageUrl('border-item-user')"
               style="margin: -2px 0"
               :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 4px;`"
               v-for="(listItem, index) in topList"
@@ -300,7 +301,7 @@
     <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
       <!-- help弹窗 -->
       <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
-        <img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" />
+        <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="width: 100%" />
       </div>
 
       <!-- history弹窗 -->
@@ -314,7 +315,7 @@
                 margin: -10px 0;
                 padding: 10px 10%;
               "
-              :style="{ backgroundImage: `url(${images['border-item']})` }"
+              :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
             >
               <!-- 内容 -->
               <div
@@ -405,7 +406,7 @@
               >
                 <img
                   v-smart-img
-                  :src="images.timeBack"
+                  :src="imageUrl('timeBack')"
                   alt=""
                   width="18px"
                   height="18px"
@@ -431,7 +432,7 @@
                 </div>
                 <img
                   v-smart-img
-                  :src="images.timeNext"
+                  :src="imageUrl('timeNext')"
                   alt=""
                   width="18px"
                   height="18px"
@@ -449,7 +450,7 @@
           <!-- 取消按钮 -->
           <img
             v-smart-img
-            :src="images.cancel"
+            :src="imageUrl('cancel')"
             alt=""
             style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
             @click="closedPopup"
@@ -463,7 +464,7 @@
                   margin: -20px 0;
                   padding: 20px 10%;
                 "
-                :style="{ backgroundImage: `url(${images['border-item']})` }"
+                :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
               >
                 <!-- 奖励榜切换按钮 -->
                 <div style="width: 100%">
@@ -471,10 +472,10 @@
                     v-show="visibleKingRewards"
                     style="width: 100%; display: flex; justify-content: space-around"
                   >
-                    <img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" />
+                    <img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
                     <img
                       v-smart-img
-                      :src="images.queenBt"
+                      :src="imageUrl('queenBt')"
                       alt=""
                       style="width: 40%"
                       @click="visibleKingRewards = false"
@@ -486,12 +487,12 @@
                   >
                     <img
                       v-smart-img
-                      :src="images.kingBt"
+                      :src="imageUrl('kingBt')"
                       alt=""
                       style="width: 40%"
                       @click="visibleKingRewards = true"
                     />
-                    <img v-smart-img :src="images.queenBtActive" alt="" style="width: 40%" />
+                    <img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
                   </div>
                 </div>
 
@@ -521,7 +522,7 @@
                         :key="rewardIndex"
                         style="width: 100%"
                       >
-                        <itemCenter :imgUrl="images.gift">
+                        <itemCenter :imgUrl="imageUrl('gift')">
                           <img
                             v-smart-img
                             :src="reward.cover || ''"
@@ -569,7 +570,7 @@
     >
       <img
         v-smart-img
-        :src="images.myRankingBg"
+        :src="imageUrl('myRankingBg')"
         alt=""
         style="width: calc(100% - 1px); display: block"
       />
@@ -678,6 +679,8 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
 import { useDebounce, useThrottle } from '@/utils/useDebounce'
 import { connectToApp } from '@/utils/appConnector.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
 
 import {
   getWeekTopList,
@@ -691,15 +694,8 @@ import borderImg from './components/borderImg.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
-//vite动态批量导入图片
-const imageModules = import.meta.glob('@/assets/images/TopList/*.{png,jpg,svg}', { eager: true })
-// 生成文件名映射对象（自动移除路径和扩展名）
-const images = Object.fromEntries(
-  Object.entries(imageModules).map(([path, module]) => {
-    const fileName = path.split('/').pop().split('.')[0]
-    return [fileName, module.default]
-  })
-)
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
 
 // 使用工具函数连接APP
 const connectToAppHandler = async () => {
@@ -707,6 +703,7 @@ const connectToAppHandler = async () => {
     // 连接成功回调
     getUserInfo()
     updatePageData() // 刷新页面数据
+    preloadCriticalImages() // 预加载关键图片
   })
 }
 
@@ -722,13 +719,13 @@ const showTopOne = computed(() => {
   if (historyList.value[historyIndex.value]?.wealth)
     topNew.push({
       type: 'topKing',
-      Frame: images.kingFrame,
+      Frame: imageUrl('kingFrame'),
       userInfo: historyList.value[historyIndex.value].wealth || {},
     })
   if (historyList.value[historyIndex.value]?.charm) {
     topNew.push({
       type: 'topQueen',
-      Frame: images.queenFrame,
+      Frame: imageUrl('queenFrame'),
       userInfo: historyList.value[historyIndex.value].charm || {},
     })
   }
@@ -770,12 +767,12 @@ const queenList = ref([]) // 女王榜
 const listTop = ref([
   {
     type: 'topKing',
-    Frame: images.kingFrame,
+    Frame: imageUrl('kingFrame'),
     userInfo: {},
   },
   {
     type: 'topQueen',
-    Frame: images.queenFrame,
+    Frame: imageUrl('queenFrame'),
     userInfo: {},
   },
 ]) //本周的top1国王和女王
@@ -788,7 +785,7 @@ const topList = computed(() => {
 const showKingLoading = ref(true) //触底加载功能
 const showQueenLoading = ref(true) //触底加载功能
 
-const topImg = ref([images.top1, images.top2, images.top3]) // top图片
+const topImg = ref([imageUrl('top1'), imageUrl('top2'), imageUrl('top3')]) // top图片
 
 const visibleKingRewards = ref(true) // 展示奖励榜标签
 const kingRewards = ref([]) //国王奖励列表
@@ -987,6 +984,39 @@ const updatePageData = () => {
   getAllTopOne() //获取近几个月的榜首国王女王
 }
 
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [
+    imageUrl('bg'),
+    imageUrl('help'),
+    imageUrl('history'),
+    imageUrl('listTitle'),
+    imageUrl('dayBg'),
+    imageUrl('timeBg'),
+    imageUrl('rewards'),
+    imageUrl('eventGifts'),
+    imageUrl('gift'),
+    imageUrl('kingBtActive'),
+    imageUrl('queenBt'),
+    imageUrl('kingBt'),
+    imageUrl('queenBtActive'),
+    imageUrl('border-item-user'),
+    imageUrl('helpInfo'),
+    imageUrl('border-item'),
+    imageUrl('timeBack'),
+    imageUrl('timeNext'),
+    imageUrl('cancel'),
+    imageUrl('myRankingBg'),
+    imageUrl('kingFrame'),
+    imageUrl('queenFrame'),
+    imageUrl('top1'),
+    imageUrl('top2'),
+    imageUrl('top3'),
+  ]
+
+  preloadImages(criticalImages, { useSmartCache: true })
+}
+
 // 组件挂载时检测环境
 onMounted(() => {
   isInAppEnvironment.value = isInApp()
@@ -1023,7 +1053,7 @@ onUnmounted(() => {
 
 .bg {
   width: 100vw;
-  background-image: url('@/assets/images/TopList/bg.png');
+  background-image: var(--bg-url);
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;

src/views/Ranking/KingAndQueen/components/borderImg.vue

@@ -1,13 +1,9 @@
+<!-- src/views/Ranking/KingAndQueen/components/borderImg.vue -->
 <template>
   <div style="width: 100%">
     <!-- 头部 -->
     <div style="position: relative; margin-bottom: -2px">
-      <img
-        v-smart-img
-        src="/src/assets/images/TopList/border-top.png"
-        alt=""
-        style="width: 100%; display: block"
-      />
+      <img v-smart-img :src="borderTopUrl" alt="" style="width: 100%; display: block" />
       <div
         style="
           position: absolute;
@@ -40,16 +36,17 @@
     <slot></slot>
 
     <!-- 尾部 -->
-    <img
-      v-smart-img
-      src="/src/assets/images/TopList/border-bottom.png"
-      alt=""
-      style="width: 100%; display: block"
-    />
+    <img v-smart-img :src="borderBottomUrl" alt="" style="width: 100%; display: block" />
   </div>
 </template>
 
 <script setup>
+import { getPngUrl } from '@/config/imagePaths.js'
+
+// 获取OSS图片URL的函数
+const borderTopUrl = getPngUrl('Ranking/KingQueen/', 'border-top')
+const borderBottomUrl = getPngUrl('Ranking/KingQueen/', 'border-bottom')
+
 const props = defineProps({
   title: {
     type: String,