feat(总排行榜): 使用网络图片，并对接图片的缓存，预加载等功能

src/views/Ranking/Overall/Ranking.vue

@@ -1,22 +1,26 @@
+<!-- src/views/Ranking/Overall/Ranking.vue -->
 <template>
   <div class="fullPage" :style="{ backgroundColor }">
     <!-- 背景图 -->
     <div style="position: absolute; top: 0; left: 0; width: 100vw; z-index: 3">
       <img
         v-show="rankingType == 'Wealth'"
-        :src="images.bgWealth"
+        v-smart-img
+        :src="imageUrl('bgWealth')"
         alt=""
         style="display: block; width: 100%; object-fit: cover"
       />
       <img
         v-show="rankingType == 'Charm'"
-        :src="images.bgCharm"
+        v-smart-img
+        :src="imageUrl('bgCharm')"
         alt=""
         style="display: block; width: 100%; object-fit: cover"
       />
       <img
         v-show="rankingType == 'Room'"
-        :src="images.bgRoom"
+        v-smart-img
+        :src="imageUrl('bgRoom')"
         alt=""
         style="display: block; width: 100%; object-fit: cover"
       />
@@ -332,6 +336,7 @@ import { useRoute } from 'vue-router'
 import { isInApp, closePage, viewUserInfo, gotoRoom } from '@/utils/appBridge.js'
 import { connectToApp } from '@/utils/appConnector.js'
 import { preloadImages } from '@/utils/imagePreloader'
+import { getPngUrl } from '@/config/imagePaths.js'
 
 import { getWealthRanking, getCharmRanking, getRoomRanking, getMyRanking } from '@/api/ranking'
 
@@ -339,19 +344,8 @@ import TopUser from './components/topUser.vue'
 
 const route = useRoute()
 
-//vite动态批量导入图片
-const imageModules = import.meta.glob('@/assets/images/Ranking/*.{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]
-  })
-)
-
-// const preloadAllRankingImages = () => {
-//   preloadImages(images, { useSmartCache: true })
-// }
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Overall/', filename)
 
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const rankingType = ref(route.query.first || 'Wealth') //榜单类型
@@ -365,6 +359,24 @@ const totalRanking = ref({})
 const showRanking = ref([])
 const myRanking = ref({}) //我的排名
 
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [
+    imageUrl('bgWealth'),
+    imageUrl('bgCharm'),
+    imageUrl('bgRoom'),
+    imageUrl('top1-wealth'),
+    imageUrl('top1-charm'),
+    imageUrl('top1-room'),
+    imageUrl('top2'),
+    imageUrl('top3'),
+    imageUrl('top2-room'),
+    imageUrl('top3-room'),
+  ]
+
+  preloadImages(criticalImages, { useSmartCache: true })
+}
+
 // 筛选展示榜单
 const updateTimeRanking = () => {
   console.log('updateTimeRanking()//筛选展示榜单')
@@ -470,9 +482,9 @@ const stickyHeader = ref(null)
 watchEffect(() => {
   if (rankingType.value == 'Wealth') {
     backgroundColor.value = '#230F0A'
-    topBorderBg.value = images['top1-wealth']
-    top2BorderBg.value = images['top2']
-    top3BorderBg.value = images['top3']
+    topBorderBg.value = imageUrl('top1-wealth')
+    top2BorderBg.value = imageUrl('top2')
+    top3BorderBg.value = imageUrl('top3')
     border.value = '1px solid rgba(221, 114, 0, 0.39)'
     background.value = 'rgba(252, 194, 147, 0.20)'
     rankItemBackground.value =
@@ -483,9 +495,9 @@ watchEffect(() => {
   }
   if (rankingType.value == 'Charm') {
     backgroundColor.value = '#112C1E'
-    topBorderBg.value = images['top1-charm']
-    top2BorderBg.value = images['top2']
-    top3BorderBg.value = images['top3']
+    topBorderBg.value = imageUrl('top1-charm')
+    top2BorderBg.value = imageUrl('top2')
+    top3BorderBg.value = imageUrl('top3')
     border.value = '1px solid rgba(0, 221, 74, 0.39)'
     background.value = 'rgba(147, 252, 166, 0.20)'
     rankItemBackground.value =
@@ -496,9 +508,9 @@ watchEffect(() => {
   }
   if (rankingType.value == 'Room') {
     backgroundColor.value = '#211031'
-    topBorderBg.value = images['top1-room']
-    top2BorderBg.value = images['top2-room']
-    top3BorderBg.value = images['top3-room']
+    topBorderBg.value = imageUrl('top1-room')
+    top2BorderBg.value = imageUrl('top2-room')
+    top3BorderBg.value = imageUrl('top3-room')
     border.value = '1px solid rgba(155, 0, 221, 0.39)'
     background.value = 'rgba(219, 147, 252, 0.20)'
     rankItemBackground.value =
@@ -583,6 +595,7 @@ const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
     initData() //初始化数据
+    preloadCriticalImages() //预加载关键图片
   })
 }
 
@@ -591,8 +604,6 @@ onMounted(() => {
   isInAppEnvironment.value = isInApp()
 
   observer.observe(sentinel.value)
-
-  // preloadAllRankingImages()
 })
 </script>
 

src/views/Ranking/Overall/components/topUser.vue

@@ -1,3 +1,4 @@
+<!-- src/views/Ranking/Overall/components/topUser.vue -->
 <template>
   <div style="width: 100%">
     <div style="position: relative">
@@ -65,13 +66,7 @@
           </div>
         </div>
         <div style="width: 60%; position: relative">
-          <img
-            v-smart-img
-            src="/src/assets/images/Ranking/coinNumBg.png"
-            alt=""
-            width="100%"
-            style="display: block"
-          />
+          <img v-smart-img :src="coinNumBgUrl" alt="" width="100%" style="display: block" />
           <div
             style="position: absolute; inset: 0; display: flex; align-items: center; padding: 3% 5%"
           >
@@ -104,6 +99,10 @@
 
 <script setup>
 import { computed, watch } from 'vue'
+import { getPngUrl } from '@/config/imagePaths.js'
+
+// 获取OSS图片URL的函数
+const coinNumBgUrl = getPngUrl('Ranking/Overall/', 'coinNumBg')
 
 const props = defineProps({
   Type: {