From d4013ea55680287cbbeb5ba3f634e7f9241ccdf0 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 10 Dec 2025 17:29:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=80=BB=E6=8E=92=E8=A1=8C=E6=A6=9C):=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=97=B6=E9=97=B4=E9=A1=B9=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E8=8A=82=E6=B5=81=E5=8A=9F=E8=83=BD=EF=BC=8C=E9=98=B2=E6=AD=A2?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=BF=AB=E9=80=9F=E9=A2=91=E7=B9=81=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=EF=BC=8C=E5=8F=91=E9=80=81=E5=A4=9A=E6=AC=A1=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/Overall/Ranking.vue | 60 +++++++++++++++++++++------
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index 1729a6c..e747959 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/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 changeType = (type) => {
+const ThrottleChangeType = (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')