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

---
 src/views/Ranking/WeeklyStar/WeeklyStar.vue   | 134 ++++++++++++------
 .../Ranking/WeeklyStar/components/topUser.vue |   3 +
 2 files changed, 94 insertions(+), 43 deletions(-)

diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index 8f1b259..224e0f1 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -1,5 +1,6 @@
+<!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
 <template>
-  <div class="fullPage">
+  <div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
     <!-- 状态栏占位区域（仅在APP中显示） -->
     <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -15,7 +16,7 @@
     <!-- history按钮 -->
     <img
       v-smart-img
-      :src="images.history"
+      :src="imageUrl('history')"
       alt=""
       style="width: 20%; margin-top: 20px"
       @click="historyShow = true"
@@ -30,31 +31,37 @@
           : 'calc(65vw - 10vw - 10vw - 20px)',
       }"
     >
-      <img v-smart-img :src="images.gifts" alt="" style="width: 20%" @click="giftsShow = true" />
+      <img
+        v-smart-img
+        :src="imageUrl('gifts')"
+        alt=""
+        style="width: 20%"
+        @click="giftsShow = true"
+      />
     </div>
 
     <!-- 倒计时 -->
     <div style="display: flex; justify-content: center; margin-top: -10%">
       <div style="width: 15%">
-        <itemCenter :imgUrl="images.dayBg">
+        <itemCenter :imgUrl="imageUrl('dayBg')">
           <div class="timeText">{{ Days }}D</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap" style="width: 6px"></div>
       <div style="width: 15%">
-        <itemCenter :imgUrl="images.hourAndMinBg">
+        <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
           <div class="timeText">{{ Hours }}</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap">:</div>
       <div style="width: 15%">
-        <itemCenter :imgUrl="images.hourAndMinBg">
+        <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
           <div class="timeText">{{ Minutes }}</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap">:</div>
       <div style="width: 15%">
-        <itemCenter :imgUrl="images.secBg">
+        <itemCenter :imgUrl="imageUrl('secBg')">
           <div class="timeText">{{ Second }}</div>
         </itemCenter>
       </div>
@@ -63,17 +70,17 @@
     <!-- 切换按钮 -->
     <div style="margin: 22% 0 8% 0; display: flex; justify-content: space-around">
       <div style="width: 30%" @click="handleBt('Ranking')">
-        <itemCenter :imgUrl="rankingShow ? images.btActive : images.btNoActive">
+        <itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
           <div class="btTitle">Ranking</div>
         </itemCenter>
       </div>
       <div style="width: 30%" @click="handleBt('Rewards')">
-        <itemCenter :imgUrl="rewardShow ? images.btActive : images.btNoActive">
+        <itemCenter :imgUrl="rewardShow ? imageUrl('btActive') : imageUrl('btNoActive')">
           <div class="btTitle">Rewards</div>
         </itemCenter>
       </div>
       <div style="width: 30%" @click="handleBt('Exchange')">
-        <itemCenter :imgUrl="exchargeShow ? images.btActive : images.btNoActive">
+        <itemCenter :imgUrl="exchargeShow ? imageUrl('btActive') : imageUrl('btNoActive')">
           <div class="btTitle">Exchange</div>
         </itemCenter>
       </div>
@@ -88,10 +95,16 @@
       >
         <!-- 背景板 -->
         <div>
-          <img v-smart-img :src="images.RankingMain" alt="" width="100%" style="display: block" />
           <img
             v-smart-img
-            :src="images.RankingItem"
+            :src="imageUrl('RankingMain')"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
+          <img
+            v-smart-img
+            :src="imageUrl('RankingItem')"
             alt=""
             width="100%"
             style="display: block; margin-top: -2px"
@@ -100,7 +113,7 @@
           />
           <img
             v-smart-img
-            :src="images.RankingBottomBorder"
+            :src="imageUrl('RankingBottomBorder')"
             alt=""
             width="100%"
             style="display: block; margin-top: -12%"
@@ -114,7 +127,7 @@
             <!-- 第一 -->
             <div style="display: flex; justify-content: center">
               <TopUser
-                :BorderImgUrl="images.topOne"
+                :BorderImgUrl="imageUrl('topOne')"
                 :avatarUrl="RankingHasTop3[0].userAvatar"
                 :name="RankingHasTop3[0].userNickname"
                 :distributionValue="RankingHasTop3[0].quantity"
@@ -126,7 +139,7 @@
             <div style="display: flex; justify-content: space-between; margin-top: -20%">
               <TopUser
                 :isTopOne="false"
-                :BorderImgUrl="images.topTwo"
+                :BorderImgUrl="imageUrl('topTwo')"
                 :avatarUrl="RankingHasTop3[1].userAvatar"
                 :name="RankingHasTop3[1].userNickname"
                 :distributionValue="RankingHasTop3[1].quantity"
@@ -135,7 +148,7 @@
               />
               <TopUser
                 :isTopOne="false"
-                :BorderImgUrl="images.topThree"
+                :BorderImgUrl="imageUrl('topThree')"
                 :avatarUrl="RankingHasTop3[2].userAvatar"
                 :name="RankingHasTop3[2].userNickname"
                 :distributionValue="RankingHasTop3[2].quantity"
@@ -150,7 +163,7 @@
             v-for="listItem in showRanking"
             style="margin-top: 3%; position: relative"
             @click="viewUserInfo(listItem.userId)"
-            :imgUrl="images.itemUser"
+            :imgUrl="imageUrl('itemUser')"
             :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 4px;`"
           >
             <!-- 基本信息 -->
@@ -232,7 +245,7 @@
         <!-- top模块 -->
         <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%">
           <!-- top背景图 -->
-          <img v-smart-img :src="images.topBg" alt="" style="width: 100%; display: block" />
+          <img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
           <!-- 标题 -->
           <div
             style="
@@ -265,7 +278,7 @@
               v-for="gift in topItem.propsGroup.activityRewardProps"
               style="display: flex; flex-direction: column; align-items: center"
             >
-              <itemCenter :imgUrl="images.giftItemBg" style="width: 90%; margin-bottom: 3px">
+              <itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 90%; margin-bottom: 3px">
                 <!-- gift图 -->
                 <img
                   v-smart-img
@@ -276,7 +289,7 @@
                 />
               </itemCenter>
 
-              <itemCenter :imgUrl="images.btBg" style="width: 75%">
+              <itemCenter :imgUrl="imageUrl('btBg')" style="width: 75%">
                 <div style="font-weight: 700">
                   {{ showDetail(gift.type, gift.quantity) }}
                 </div>
@@ -290,7 +303,7 @@
       <div v-show="exchargeShow" style="display: flex; justify-content: center">
         <div style="position: relative; width: 90%">
           <!-- 背景图 -->
-          <img v-smart-img :src="images.longBg" alt="" style="width: 100%; display: block" />
+          <img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
           <!-- 标题 -->
           <div
             style="
@@ -326,7 +339,7 @@
             <div style="display: flex; align-items: center">
               <img
                 v-smart-img
-                :src="images.debris"
+                :src="imageUrl('debris')"
                 alt=""
                 style="width: 15%; display: block; margin-right: 5px"
               />
@@ -340,7 +353,7 @@
                 :key="goodsIndex"
                 style="display: flex; flex-direction: column; align-items: center"
               >
-                <itemCenter :imgUrl="images.giftItemBg">
+                <itemCenter :imgUrl="imageUrl('giftItemBg')">
                   <!-- gift图 -->
                   <img
                     v-smart-img
@@ -353,7 +366,11 @@
                   Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
                 </div>
 
-                <itemCenter style="width: 75%" @click="selectGood(goods)" :imgUrl="images.btBg">
+                <itemCenter
+                  style="width: 75%"
+                  @click="selectGood(goods)"
+                  :imgUrl="imageUrl('btBg')"
+                >
                   <div style="font-weight: 700" class="needDebris">Redeem</div>
                 </itemCenter>
               </div>
@@ -381,7 +398,7 @@
     >
       <img
         v-smart-img
-        :src="images.myRankingBg"
+        :src="imageUrl('myRankingBg')"
         alt=""
         style="width: calc(100% - 1px); display: block"
       />
@@ -469,13 +486,13 @@
     <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弹窗 -->
       <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
         <!-- 背景图 -->
-        <img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
+        <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
         <!-- 标题 -->
         <div
           style="
@@ -514,7 +531,7 @@
             <!-- 头像框 -->
             <img
               v-smart-img
-              :src="images.topOneHistory"
+              :src="imageUrl('topOneHistory')"
               alt=""
               style="width: 100%; display: block; position: relative; z-index: 1"
             />
@@ -542,7 +559,7 @@
           <!-- 名字 -->
           <div style="position: relative; width: 25%">
             <!-- 背景图 -->
-            <img v-smart-img :src="images.nameBg" alt="" style="width: 100%; display: block" />
+            <img v-smart-img :src="imageUrl('nameBg')" alt="" style="width: 100%; display: block" />
             <div
               style="
                 position: absolute;
@@ -616,13 +633,13 @@
         v-show="giftsShow"
         style="margin: 20% 0"
         @click.stop
-        :imgUrl="images.giftsBg"
+        :imgUrl="imageUrl('giftsBg')"
         :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
       >
         <!-- 礼物单元 -->
         <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
           <!-- 礼物背景 -->
-          <itemCenter :imgUrl="images.giftItemBg">
+          <itemCenter :imgUrl="imageUrl('giftItemBg')">
             <!-- 礼物 -->
             <img
               v-smart-img
@@ -650,7 +667,7 @@
       <!-- 交易商品弹窗 -->
       <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
         <!-- 背景图 -->
-        <img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
+        <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
         <!-- 标题 -->
         <div
           style="
@@ -693,7 +710,7 @@
           <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
           <img
             v-smart-img
-            :src="images.ConfirmBt"
+            :src="imageUrl('ConfirmBt')"
             alt=""
             style="width: 30%; display: block"
             @click="exchangeSelectedGood(selectedGood.rule.id)"
@@ -710,6 +727,8 @@ import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
 import { connectToApp } from '@/utils/appConnector.js'
 import { useThrottle } from '@/utils/useDebounce'
 import { showWarning } from '@/utils/toast.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
 
 import { getMemberProfile } from '@/api/wallet'
 import {
@@ -727,15 +746,8 @@ import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import TopUser from './components/topUser.vue'
 
-//vite动态批量导入图片
-const imageModules = import.meta.glob('@/assets/images/WeeklyStar/*.{png,jpg,svg}', { eager: true })
-// 生成文件名映射对象（自动移除路径和扩展名）
-const images = Object.fromEntries(
-  Object.entries(imageModules).map(([Path2D, module]) => {
-    const fileName = Path2D.split('/').pop().split('.')[0]
-    return [fileName, module.default]
-  })
-)
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename)
 
 // 使用工具函数连接APP
 const connectToAppHandler = async () => {
@@ -743,6 +755,7 @@ const connectToAppHandler = async () => {
     // 连接成功回调
     getUserInfo()
     updatePageData() // 刷新页面数据
+    preloadCriticalImages() // 预加载关键图片
   })
 }
 
@@ -1050,6 +1063,41 @@ const updatePageData = () => {
   getThisWeekExchangeGoods() // 获取本周可兑换商品
 }
 
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [
+    imageUrl('bg'),
+    imageUrl('history'),
+    imageUrl('gifts'),
+    imageUrl('dayBg'),
+    imageUrl('hourAndMinBg'),
+    imageUrl('secBg'),
+    imageUrl('btActive'),
+    imageUrl('btNoActive'),
+    imageUrl('RankingMain'),
+    imageUrl('RankingItem'),
+    imageUrl('RankingBottomBorder'),
+    imageUrl('topOne'),
+    imageUrl('topTwo'),
+    imageUrl('topThree'),
+    imageUrl('itemUser'),
+    imageUrl('topBg'),
+    imageUrl('giftItemBg'),
+    imageUrl('btBg'),
+    imageUrl('longBg'),
+    imageUrl('debris'),
+    imageUrl('myRankingBg'),
+    imageUrl('helpInfo'),
+    imageUrl('mediumBg'),
+    imageUrl('topOneHistory'),
+    imageUrl('nameBg'),
+    imageUrl('giftsBg'),
+    imageUrl('ConfirmBt'),
+  ]
+
+  preloadImages(criticalImages, { useSmartCache: true })
+}
+
 const debouceGetThisWeekRanking = useThrottle(() => {
   getThisWeekRanking()
 }, 1000)
@@ -1094,7 +1142,7 @@ onUnmounted(() => {
   width: 100vw;
   min-height: 100vh;
   background-color: #311300;
-  background-image: url('@/assets/images/WeeklyStar/bg.png');
+  background-image: var(--bg-url);
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;
diff --git a/src/views/Ranking/WeeklyStar/components/topUser.vue b/src/views/Ranking/WeeklyStar/components/topUser.vue
index 44daea7..2478847 100644
--- a/src/views/Ranking/WeeklyStar/components/topUser.vue
+++ b/src/views/Ranking/WeeklyStar/components/topUser.vue
@@ -1,3 +1,4 @@
+<!-- src/views/Ranking/WeeklyStar/components/topUser.vue -->
 <template>
   <div style="width: 100%">
     <div style="position: relative">
@@ -74,6 +75,8 @@
 </template>
 
 <script setup>
+import { getPngUrl } from '@/config/imagePaths.js'
+
 const props = defineProps({
   isTopOne: {
     type: Boolean,