From 63ec2371b7306c963f4a3ccf5804ea0da50fd38f Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 2 Dec 2025 18:44:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=80=BB=E6=8E=92=E8=A1=8C=E6=A6=9C):=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=BD=91=E7=BB=9C=E5=9B=BE=E7=89=87=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E5=AF=B9=E6=8E=A5=E5=9B=BE=E7=89=87=E7=9A=84=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=EF=BC=8C=E9=A2=84=E5=8A=A0=E8=BD=BD=E7=AD=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/Overall/Ranking.vue         | 65 +++++++++++--------
 .../Ranking/Overall/components/topUser.vue    | 13 ++--
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index 24afc80..1dd90f4 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/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>
 
diff --git a/src/views/Ranking/Overall/components/topUser.vue b/src/views/Ranking/Overall/components/topUser.vue
index a5af4df..006b4c9 100644
--- a/src/views/Ranking/Overall/components/topUser.vue
+++ b/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: {