feat(总排行榜): 切换时间项使用节流功能，防止用户快速频繁切换，发送多次请求

src/views/Ranking/Overall/Ranking.vue

@@ -190,7 +190,7 @@
               display: flex;
               justify-content: space-between;
               align-items: center;
-              gap: 4px;
+              gap: 8px;
             "
             :style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
             @click="gotoAppPage(userInfo.id)"
@@ -297,7 +297,7 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
-          gap: 4px;
+          gap: 8px;
         "
         :style="{
           background: rankItemBackground,
@@ -309,33 +309,54 @@
         <!-- 基本信息 -->
         <div
           style="
-            width: 80%;
+            flex: 1;
             min-width: 0;
+            align-self: stretch;
+
             display: flex;
             justify-content: space-around;
             align-items: center;
-            gap: 4px;
+            gap: 8px;
           "
         >
           <!-- 排名 -->
-          <div style="width: 10%; display: flex; justify-content: center; align-items: center">
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
             <div style="font-weight: 700">{{ myRanking.rank || 999 }}</div>
           </div>
+
           <!-- 头像 -->
           <img
             v-smart-img
             :src="myRanking.avatar || ''"
             alt=""
-            style="display: block; width: 15%; aspect-ratio: 1/1"
+            style="
+              display: block;
+              width: 3em;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+              object-fit: cover;
+            "
             :style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
             @error="handleAvatarImageError"
           />
+
           <!-- 名称 -->
           <div
             style="
+              flex: 1;
               min-width: 0;
-              width: calc(100% - 10% - 15% - 8px);
               font-weight: 700;
+
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
@@ -346,12 +367,21 @@
         </div>
 
         <!-- 贡献值 -->
-        <div style="flex: 1; min-width: 0; display: flex; align-items: center">
+        <div
+          style="
+            width: auto;
+            min-width: 0;
+            align-self: stretch;
+
+            display: flex;
+            align-items: center;
+          "
+        >
           <img
             v-smart-img
             src="/src/assets/icon/coin.png"
             alt=""
-            style="display: block; width: 30%; aspect-ratio: 1/1"
+            style="display: block; width: 1.3em; aspect-ratio: 1/1"
           />
           <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
             {{ myRanking.quantityFormat || 0 }}
@@ -371,6 +401,7 @@ import { connectToApp } from '@/utils/appConnector.js'
 import { preloadImages } from '@/utils/imagePreloader'
 import { getPngUrl } from '@/config/imagePaths.js'
 import { handleAvatarImageError } from '@/utils/imageHandler.js'
+import { useThrottle } from '@/utils/useDebounce'
 
 import { getWealthRanking, getCharmRanking, getRoomRanking, getMyRanking } from '@/api/ranking'
 
@@ -427,9 +458,7 @@ const updateTimeRanking = () => {
     showRanking.value = totalRanking.value.monthly
   }
 }
-
+const ThrottleChangeType = (type) => {
-// 改变排行榜类型
-const changeType = (type) => {
   if (rankingType.value != type) {
     console.log('改变rankingType')
     rankingType.value = type
@@ -454,8 +483,11 @@ const changeType = (type) => {
   }
 }
 
+// 改变排行榜类型
+const changeType = useThrottle(ThrottleChangeType, 1000)
+
 // 改变时间类型
-const changeDateType = (dateType) => {
+const ThrottleChangeDateType = (dateType) => {
   if (selectedTimeTab.value != dateType) {
     console.log('改变rankingType')
     selectedTimeTab.value = dateType
@@ -479,6 +511,8 @@ const changeDateType = (dateType) => {
   }
 }
 
+const changeDateType = useThrottle(ThrottleChangeDateType, 500)
+
 // 前三名榜单
 const RankingTop3 = computed(() => {
   console.log('刷新RankingTop3')