From 4507fb25b11ada32f8cfefb6ea8d01488477f5fb Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 22 Apr 2026 19:15:51 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E6=80=BB=E6=8E=92=E8=A1=8C=E6=A6=9C):=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=9B=BE=E6=BA=90=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/Overall/Ranking.vue         | 882 ++++++++----------
 .../Ranking/Overall/components/topUser.vue    | 307 +++---
 2 files changed, 556 insertions(+), 633 deletions(-)

diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index d230440..5efa496 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/src/views/Ranking/Overall/Ranking.vue
@@ -1,31 +1,21 @@
 <!-- src/views/Ranking/Overall/Ranking.vue -->
 <template>
-  <div class="fullPage" :style="{ backgroundColor }">
-    <!-- 预加载状态 -->
+  <div class="fullPage" :style="{ backgroundColor: currentRankingConfig.backgroundColor }">
     <div v-if="isLoading" class="loading-container">
-      <!-- 背景图 -->
       <BackgroundLayer :useCanvas="true" :backgroundImages="[currentBgImage]" />
-
-      <!-- 加载动画 -->
       <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <p>{{ t('loading') }}...</p>
     </div>
 
-    <!-- 主要内容 -->
-    <div v-if="!isLoading" style="position: relative; z-index: 4">
-      <!-- 背景图 -->
+    <div v-else style="position: relative; z-index: 4">
       <BackgroundLayer
         :useCanvas="true"
         :backgroundImages="[currentBgImage]"
-        :layerStyle="{
-          zIndex: -1,
-        }"
+        :layerStyle="{ zIndex: -1 }"
       />
 
-      <!-- 哨兵元素 -->
       <div ref="sentinel"></div>
 
-      <!-- 粘性布局贴顶部 -->
       <div
         ref="stickyHeader"
         style="
@@ -34,212 +24,148 @@
           z-index: 999;
           border-radius: 0 0 12px 12px;
           transition: all 0.3s;
+          padding-bottom: 1vw;
         "
       >
-        <!-- 状态栏占位区域（仅在APP中显示） -->
-        <div style="height: 60px"></div>
+        <div style="height: 13vw"></div>
 
-        <!-- 顶部导航栏 -->
         <div style="padding: 4px 8%">
           <div style="display: flex; justify-content: space-around; position: relative">
             <div
-              class="ovr-x1"
-              @click="changeType('Wealth')"
-              style=""
-              :style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
+              v-for="tab in rankingTabs"
+              :key="tab.value"
+              class="tab"
+              :style="{ color: rankingType === tab.value ? tab.activeColor : '#fff' }"
+              @click="changeType(tab.value)"
             >
-              {{ t('ranking_wealth') }}
-            </div>
-            <div
-              class="ovr-x1"
-              @click="changeType('Charm')"
-              style=""
-              :style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
-            >
-              {{ t('ranking_charm') }}
-            </div>
-            <div
-              class="ovr-x1"
-              @click="changeType('Room')"
-              style=""
-              :style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
-            >
-              {{ t('ranking_room') }}
+              {{ t(tab.labelKey) }}
             </div>
 
-            <!-- 推出键 -->
             <img
               v-smart-img
               src="../../../assets/icon/Azizi/arrowBack.png"
               alt=""
-              style="position: absolute; left: 0; top: 50%; transform: translateY(-50%)"
+              style="position: absolute; left: -4%; top: 45%; transform: translateY(-50%)"
               width="6%"
               @click="closePage"
             />
           </div>
         </div>
 
-        <!-- 排行榜时间选择 -->
         <div
           style="
-            margin: 10px 4% 0;
-            padding: 4px 16px;
+            margin: 1vw 6vw 4vw;
+            padding: 4px;
             border-radius: 32px;
+            border: 1px solid #b2a67d;
+            background: linear-gradient(90deg, #0d0d0d 0%, #232323 100%);
             backdrop-filter: blur(32px);
-
             display: grid;
             grid-template-columns: repeat(3, 1fr);
           "
-          :style="{ border, background }"
         >
-          <!-- <div
-          class="ovr-x3"
-          :class="{ 'ovr-x4': selectedTimeTab == 'Hourly' }"
-          @click="changeDateType('Hourly')"
-        >
-          {{ t('ranking_hourly') }}
-        </div> -->
-          <div class="ovr-x2">
+          <div
+            v-for="tab in timeTabs"
+            :key="tab.value"
+            class="tabItem"
+            :style="selectedTimeTab === tab.value ? selectedTimeTabStyle : undefined"
+          >
             <div
-              class="ovr-x3"
-              :class="{ 'ovr-x4': selectedTimeTab == 'Daily' }"
-              @click="changeDateType('Daily')"
+              class="tag"
+              :class="{ tagActive: selectedTimeTab === tab.value }"
+              @click="changeDateType(tab.value)"
             >
-              {{ t('ranking_daily') }}
-            </div>
-          </div>
-
-          <div class="ovr-x2">
-            <div
-              class="ovr-x3"
-              :class="{ 'ovr-x4': selectedTimeTab == 'Weekly' }"
-              @click="changeDateType('Weekly')"
-            >
-              {{ t('ranking_weekly') }}
-            </div>
-          </div>
-
-          <div class="ovr-x2">
-            <div
-              class="ovr-x3"
-              :class="{ 'ovr-x4': selectedTimeTab == 'Monthly' }"
-              @click="changeDateType('Monthly')"
-            >
-              {{ t('ranking_monthly') }}
+              {{ t(tab.labelKey) }}
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 排行榜模块 -->
-      <div style="padding: 10px 0">
-        <!-- 前3名 -->
-        <div style="margin: 3% 10px 0; min-height: 70vw">
-          <!-- 第一 -->
+      <div>
+        <div style="margin: 0 10px">
           <div style="display: flex; justify-content: center">
             <TopUser
               :Type="rankingType"
+              :rank="1"
               :isTopOne="true"
-              :BorderImgUrl="topBorderBg"
-              :avatarUrl="RankingTop3[0].avatar || ''"
-              :name="RankingTop3[0].nickname || ''"
-              :distributionValue="RankingTop3[0].quantityFormat || ''"
-              style="width: 40%"
-              @click="gotoAppPage(RankingTop3[0].id)"
+              :BorderImgUrl="topBorderUrls[0]"
+              :avatarUrl="topUsers[0].avatar || ''"
+              :name="topUsers[0].nickname || ''"
+              :distributionValue="topUsers[0].quantityFormat || ''"
+              style="width: 85%"
+              @click="gotoAppPage(topUsers[0].id)"
             />
           </div>
-          <!-- 第二三 -->
-          <div style="display: flex; justify-content: space-between; margin-top: -45%">
+
+          <div style="display: flex; justify-content: space-between; margin-top: 0">
             <TopUser
+              v-for="user in sideTopUsers"
+              :key="user.key"
               :Type="rankingType"
-              :BorderImgUrl="top2BorderBg"
-              :avatarUrl="RankingTop3[1].avatar || ''"
-              :name="RankingTop3[1].nickname || ''"
-              :distributionValue="RankingTop3[1].quantityFormat || ''"
-              style="width: 32%"
-              @click="gotoAppPage(RankingTop3[1].id)"
-            />
-            <TopUser
-              :Type="rankingType"
-              :BorderImgUrl="top3BorderBg"
-              :avatarUrl="RankingTop3[2].avatar || ''"
-              :name="RankingTop3[2].nickname || ''"
-              :distributionValue="RankingTop3[2].quantityFormat || ''"
-              style="width: 32%"
-              @click="gotoAppPage(RankingTop3[2].id)"
+              :rank="user.rank"
+              :BorderImgUrl="topBorderUrls[user.rank - 1]"
+              :avatarUrl="user.avatar || ''"
+              :name="user.nickname || ''"
+              :distributionValue="user.quantityFormat || ''"
+              style="width: 43%"
+              @click="gotoAppPage(user.id)"
             />
           </div>
         </div>
 
-        <!-- 第四名开始 -->
         <div style="padding: 3vw 3vw 0; display: flex; flex-direction: column; gap: 2vw">
-          <div
-            v-for="(userInfo, index) in RankingFromTop4"
+          <itemCenter
+            v-for="(userInfo, index) in rankingFromTop4"
             :key="userInfo.id"
-            style="
-              border-radius: 12px;
-              backdrop-filter: blur(32px);
-              padding: 3vw;
-
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              gap: 8px;
-            "
-            :style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
+            style="min-height: 19vw"
+            :imgUrl="currentRankingConfig.rankingItemBg"
+            :contentStyle="`padding: 3vw;justify-content: space-between;gap: 8px;`"
+            :lazy="true"
+            :immediate="index < 10"
             @click="gotoAppPage(userInfo.id)"
           >
-            <!-- 基本信息 -->
             <div
               style="
                 flex: 1;
                 min-width: 0;
                 align-self: stretch;
-
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
                 gap: 8px;
               "
             >
-              <!-- 排名 -->
               <div
                 style="
                   width: auto;
                   min-width: 0;
                   align-self: stretch;
-
                   display: flex;
                   justify-content: center;
                   align-items: center;
                 "
               >
-                <div style="font-weight: 700">{{ index + 4 }}</div>
+                <div style="font-size: 1.2em; font-weight: 700">{{ index + 4 }}</div>
               </div>
 
-              <!-- 头像 -->
               <img
                 :src="userInfo.avatar || ''"
                 alt=""
                 style="
                   display: block;
-                  width: 3em;
-
+                  width: 5em;
                   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;
                   padding: 0 4px;
-
                   font-weight: 700;
                   overflow: hidden;
                   white-space: nowrap;
@@ -250,13 +176,11 @@
               </div>
             </div>
 
-            <!-- 贡献值 -->
             <div
               style="
                 width: auto;
                 min-width: 0;
                 align-self: stretch;
-
                 display: flex;
                 align-items: center;
               "
@@ -271,378 +195,353 @@
                 {{ userInfo.quantityFormat }}
               </div>
             </div>
-          </div>
+          </itemCenter>
 
-          <!-- 触发加载功能 -->
           <div ref="RankingLoadmore" v-show="showRankingLoading"></div>
         </div>
       </div>
     </div>
 
-    <!-- 我的排名占位 -->
-    <div v-if="!isLoading" style="height: 15vw"></div>
+    <div v-if="!isLoading" style="height: 22vw"></div>
 
-    <!-- 我的排名 -->
-    <div
+    <itemCenter
       v-if="!isLoading"
-      style="position: fixed; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
-      :style="{ backgroundColor }"
+      style="min-height: 15vw; position: fixed; bottom: 0; z-index: 999"
+      :imgUrl="currentRankingConfig.myRankingBg"
+      :contentStyle="`padding:2vw 4vw 0;justify-content: space-between;gap: 8px;`"
     >
       <div
         style="
-          border-radius: 12px 12px 0 0;
-          backdrop-filter: blur(32px);
-          padding: 2%;
+          flex: 1;
+          min-width: 0;
+          align-self: stretch;
           display: flex;
-          justify-content: space-between;
+          justify-content: space-around;
           align-items: center;
           gap: 8px;
         "
-        :style="{
-          background: rankItemBackground,
-          borderTop: '2px ' + rankItemBorder,
-          borderLeft: '1px ' + rankItemBorder,
-          borderRight: '1px ' + rankItemBorder,
-        }"
       >
-        <!-- 基本信息 -->
-        <div
-          style="
-            flex: 1;
-            min-width: 0;
-            align-self: stretch;
-
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            gap: 8px;
-          "
-        >
-          <!-- 排名 -->
-          <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
-            :src="myRanking.avatar || ''"
-            alt=""
-            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;
-              font-weight: 700;
-              padding: 0 4px;
-
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            "
-          >
-            {{ myRanking.nickname || '' }}
-          </div>
-        </div>
-
-        <!-- 贡献值 -->
         <div
           style="
             width: auto;
             min-width: 0;
             align-self: stretch;
-
             display: flex;
+            justify-content: center;
             align-items: center;
           "
         >
-          <img
-            v-smart-img
-            src="/src/assets/icon/Azizi/coin.png"
-            alt=""
-            style="display: block; width: 1.3em; aspect-ratio: 1/1"
-          />
-          <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
-            {{ myRanking.quantityFormat || 0 }}
-          </div>
+          <div style="font-size: 1.2em; font-weight: 700">{{ myRanking.rank || 999 }}</div>
+        </div>
+
+        <img
+          :src="myRanking.avatar || ''"
+          alt=""
+          style="
+            display: block;
+            width: 5em;
+            aspect-ratio: 1/1;
+            border-radius: 50%;
+            object-fit: cover;
+          "
+          @error="handleAvatarImageError"
+        />
+
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            font-weight: 700;
+            padding: 0 4px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          "
+        >
+          {{ myRanking.nickname || '' }}
         </div>
       </div>
-    </div>
+
+      <div
+        style="
+          width: auto;
+          min-width: 0;
+          align-self: stretch;
+          display: flex;
+          align-items: center;
+        "
+      >
+        <img
+          v-smart-img
+          src="/src/assets/icon/Azizi/coin.png"
+          alt=""
+          style="display: block; width: 1.3em; aspect-ratio: 1/1"
+        />
+        <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
+          {{ myRanking.quantityFormat || 0 }}
+        </div>
+      </div>
+    </itemCenter>
   </div>
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { isInApp, closePage, viewUserInfo, gotoRoom } from '@/utils/appBridge.js'
 import { connectToApp } from '@/utils/appConnector.js'
 import { preloadImages } from '@/utils/image/imagePreloader'
 import { getPngUrl } from '@/config/imagePaths.js'
+import { toCssBackgroundImage } from '@/utils/protectedAssets.js'
 import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
 import { useThrottle } from '@/utils/useDebounce'
 
 import { getWealthRanking, getCharmRanking, getRoomRanking, getMyRanking } from '@/api/ranking'
 
 import BackgroundLayer from '@/components/BackgroundLayer.vue'
+import itemCenter from '@/components/itemCenter.vue'
 import TopUser from './components/topUser.vue'
 
+const imageUrl = (filename) => getPngUrl('Ranking/OverallTemp/', filename)
+
+const RANKING_CONFIG = {
+  Wealth: {
+    labelKey: 'ranking_wealth',
+    activeColor: '#FF9A60',
+    backgroundColor: '#3E1308',
+    backgroundImage: imageUrl('bgWealth'),
+    paramsType: 'GIFTS_SEND',
+    topBorders: [
+      imageUrl('top1-wealth'),
+      imageUrl('top2-wealth'),
+      imageUrl('top3-wealth'),
+    ],
+    rankingItemBg: imageUrl('RankingItem-wealth'),
+    myRankingBg: imageUrl('myRankingBg-wealth'),
+  },
+  Charm: {
+    labelKey: 'ranking_charm',
+    activeColor: '#60FF83',
+    backgroundColor: '#242A2A',
+    backgroundImage: imageUrl('bgCharm'),
+    paramsType: 'GIFTS_RECEIVED',
+    topBorders: [imageUrl('top1-charm'), imageUrl('top2-charm'), imageUrl('top3-charm')],
+    rankingItemBg: imageUrl('RankingItem-charm'),
+    myRankingBg: imageUrl('myRankingBg-charm'),
+  },
+  Room: {
+    labelKey: 'ranking_room',
+    activeColor: '#AA60FF',
+    backgroundColor: '#2B2022',
+    backgroundImage: imageUrl('bgRoom'),
+    paramsType: 'ROOM_GIFTS',
+    topBorders: [imageUrl('top1-room'), imageUrl('top2-room'), imageUrl('top3-room')],
+    rankingItemBg: imageUrl('RankingItem-room'),
+    myRankingBg: imageUrl('myRankingBg-room'),
+  },
+}
+
+const TIME_TABS = [
+  { value: 'Daily', labelKey: 'ranking_daily', paramsDateType: 'DAY', responseKey: 'daily' },
+  { value: 'Weekly', labelKey: 'ranking_weekly', paramsDateType: 'WEEK', responseKey: 'weekly' },
+  { value: 'Monthly', labelKey: 'ranking_monthly', paramsDateType: 'MONTH', responseKey: 'monthly' },
+]
+
+const RANKING_API_MAP = {
+  Wealth: getWealthRanking,
+  Charm: getCharmRanking,
+  Room: getRoomRanking,
+}
+
+const DEFAULT_TOP_USER = {
+  id: '',
+  avatar: '',
+  nickname: '',
+  quantityFormat: '',
+}
+
 const route = useRoute()
-const { t, locale } = useI18n()
+const { t } = useI18n()
 
-// 获取OSS图片URL的函数
-const imageUrl = (filename) => getPngUrl('Ranking/Overall/', filename)
-
-const isInAppEnvironment = ref(false) // 检测是否在APP环境中
-const rankingType = ref(route.query.first || 'Wealth') //榜单类型
-const selectedTimeTab = ref('Daily') //时间标签
-
-// 接口参数
-const params_type = ref('GIFTS_SEND') //排行榜类型
-const params_dateType = ref('DAY') //时间类型
+const normalizeRankingType = (value) => {
+  return Object.hasOwn(RANKING_CONFIG, value) ? value : 'Wealth'
+}
 
+const rankingType = ref(normalizeRankingType(route.query.first))
+const selectedTimeTab = ref('Daily')
 const totalRanking = ref({})
 const showRanking = ref([])
-const myRanking = ref({}) //我的排名
-
-// 预加载状态
+const myRanking = ref({})
+const isInAppEnvironment = ref(false)
 const isLoading = ref(true)
-const RankingLoadmore = ref(null) // 触底模块
-const showRankingLoading = ref(false) // 触底加载功能
-const loadedCount = ref(10) // 初始加载 10 条
+const showRankingLoading = ref(false)
+const loadedCount = ref(10)
+const paramsDateType = ref('DAY')
 
-const currentBgImage = computed(() => {
-  if (rankingType.value == 'Wealth') {
-    return imageUrl('bgWealth')
-  } else if (rankingType.value == 'Charm') {
-    return imageUrl('bgCharm')
-  } else if (rankingType.value == 'Room') {
-    return imageUrl('bgRoom')
-  }
-  return '' // 默认返回空字符串
+const sentinel = ref(null)
+const stickyHeader = ref(null)
+const RankingLoadmore = ref(null)
+
+const rankingTabs = Object.entries(RANKING_CONFIG).map(([value, config]) => ({
+  value,
+  labelKey: config.labelKey,
+  activeColor: config.activeColor,
+}))
+
+const timeTabs = TIME_TABS
+const tabSelectedBg = imageUrl('tabSelectedBg')
+
+const currentRankingConfig = computed(() => {
+  return RANKING_CONFIG[rankingType.value]
+})
+
+const currentBgImage = computed(() => {
+  return currentRankingConfig.value.backgroundImage
+})
+
+const topBorderUrls = computed(() => {
+  return currentRankingConfig.value.topBorders
+})
+
+const selectedTimeTabStyle = computed(() => {
+  return {
+    backgroundImage: toCssBackgroundImage(tabSelectedBg),
+    backgroundSize: '100% 100%',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+  }
+})
+
+const rankingTop3 = computed(() => {
+  const topUsers = showRanking.value.slice(0, 3)
+
+  while (topUsers.length < 3) {
+    topUsers.push({ ...DEFAULT_TOP_USER })
+  }
+
+  return topUsers
+})
+
+const topUsers = computed(() => {
+  return rankingTop3.value
+})
+
+const sideTopUsers = computed(() => {
+  return rankingTop3.value.slice(1, 3).map((user, index) => ({
+    ...user,
+    rank: index + 2,
+    key: user.id || `top-${index + 2}`,
+  }))
+})
+
+const rankingFromTop4 = computed(() => {
+  return showRanking.value.slice(3, loadedCount.value + 3)
+})
+
+const remainingRankingCount = computed(() => {
+  return Math.max(showRanking.value.length - 3, 0)
+})
+
+const currentTimeTabConfig = computed(() => {
+  return TIME_TABS.find((tab) => tab.value === selectedTimeTab.value) || TIME_TABS[0]
 })
 
-// 预加载关键图片
 const preloadCriticalImages = async () => {
   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'),
+    tabSelectedBg,
+    ...Object.values(RANKING_CONFIG).flatMap((config) => [
+      config.backgroundImage,
+      ...config.topBorders,
+      config.rankingItemBg,
+      config.myRankingBg,
+    ]),
   ]
 
   await preloadImages(criticalImages)
 }
 
-// 筛选展示榜单
-const updateTimeRanking = () => {
-  console.log('updateTimeRanking()//筛选展示榜单')
-
-  if (selectedTimeTab.value == 'Hourly' && totalRanking.value.hourly) {
-    showRanking.value = totalRanking.value.hourly
-    console.log('showRanking.value:', showRanking.value)
-  } else if (selectedTimeTab.value == 'Daily' && totalRanking.value.daily) {
-    showRanking.value = totalRanking.value.daily
-  } else if (selectedTimeTab.value == 'Weekly' && totalRanking.value.weekly) {
-    showRanking.value = totalRanking.value.weekly
-  } else if (selectedTimeTab.value == 'Monthly' && totalRanking.value.monthly) {
-    showRanking.value = totalRanking.value.monthly
-  }
-
+const resetLoadedState = () => {
   loadedCount.value = 10
-  showRankingLoading.value = showRanking.value.length > 13
+  showRankingLoading.value = false
 }
-const ThrottleChangeType = (type) => {
-  if (rankingType.value != type) {
-    console.log('改变rankingType')
-    rankingType.value = type
-    selectedTimeTab.value = 'Daily'
-    params_dateType.value = 'DAY'
 
-    if (type == 'Wealth') {
-      params_type.value = 'GIFTS_SEND'
-    } else if (type == 'Charm') {
-      params_type.value = 'GIFTS_RECEIVED'
-    } else if (type == 'Room') {
-      params_type.value = 'ROOM_GIFTS'
-    }
+const syncLoadMoreState = () => {
+  showRankingLoading.value = remainingRankingCount.value > loadedCount.value
+}
 
-    // 清空数据
+const updateTimeRanking = () => {
+  const rankingList = totalRanking.value[currentTimeTabConfig.value.responseKey] || []
+  showRanking.value = rankingList
+  resetLoadedState()
+  syncLoadMoreState()
+}
+
+const fetchRanking = async () => {
+  const requestRanking = RANKING_API_MAP[rankingType.value]
+  const response = await requestRanking()
+
+  if (response.status && response.body) {
+    totalRanking.value = response.body
+    updateTimeRanking()
+  } else {
     totalRanking.value = {}
     showRanking.value = []
-    myRanking.value = {}
-    loadedCount.value = 10
-    showRankingLoading.value = false
-
-    getRanking() // 获取榜单
-    getMyRankingInfo() //获取我的排名
+    syncLoadMoreState()
   }
 }
 
-// 改变排行榜类型
-const changeType = useThrottle(ThrottleChangeType, 1000)
+const fetchMyRanking = async () => {
+  const response = await getMyRanking(
+    currentRankingConfig.value.paramsType,
+    paramsDateType.value,
+  )
 
-// 改变时间类型
-const ThrottleChangeDateType = (dateType) => {
-  if (selectedTimeTab.value != dateType) {
-    console.log('改变rankingType')
-    selectedTimeTab.value = dateType
-
-    if (dateType == 'Hourly') {
-      params_dateType.value = 'HOUR'
-    } else if (dateType == 'Daily') {
-      params_dateType.value = 'DAY'
-    } else if (dateType == 'Weekly') {
-      params_dateType.value = 'WEEK'
-    } else if (dateType == 'Monthly') {
-      params_dateType.value = 'MONTH'
-    }
-
-    // 清空数据
-    showRanking.value = []
-    myRanking.value = {}
-    loadedCount.value = 10
-    showRankingLoading.value = false
-
-    updateTimeRanking() //筛选展示榜单
-    getMyRankingInfo() //获取我的排名
-  }
+  myRanking.value = response.status && response.body ? response.body : {}
 }
 
-const changeDateType = useThrottle(ThrottleChangeDateType, 500)
+const initData = async () => {
+  await Promise.all([fetchRanking(), fetchMyRanking()])
+}
 
-// 前三名榜单
-const RankingTop3 = computed(() => {
-  console.log('刷新RankingTop3')
-
-  let RankingShow = [...showRanking.value]
-  if (showRanking.value.length < 3) {
-    let addNullUser = Array.from({ length: 3 - showRanking.value.length }, () => ({
-      avatar: '',
-      nickname: '',
-      quantityFormat: '',
-    }))
-    RankingShow.push(...addNullUser)
+const gotoAppPage = (id) => {
+  if (!id || !isInAppEnvironment.value) {
+    return
   }
-  return RankingShow
-})
 
-// 从第四名开始榜单
-const RankingFromTop4 = computed(() => {
-  const allItems = showRanking.value.filter((_, index) => index >= 3)
-  return allItems.slice(0, loadedCount.value)
-  // return []
-})
-
-// 动态样式
-const backgroundColor = ref('') //页面样式
-const border = ref('') //时间标签样式
-const background = ref('') //时间标签样式
-const rankItemBackground = ref('') //排名项背景
-const rankItemBorder = ref('') //排名项边框
-
-const topBorderBg = ref('') //top1头像框
-const top2BorderBg = ref('') //top2头像框
-const top3BorderBg = ref('') //top3头像框
-
-const sentinel = ref(null)
-const stickyHeader = ref(null)
-
-watchEffect(() => {
-  if (rankingType.value == 'Wealth') {
-    backgroundColor.value = '#230F0A'
-    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 =
-      'linear-gradient(97deg, rgba(50, 34, 21, 0.60) 12.03%, rgba(99, 52, 33, 0.60) 100.37%)'
-    rankItemBorder.value = 'solid #FFA166'
-
-    params_type.value = 'GIFTS_SEND'
+  if (rankingType.value === 'Room') {
+    gotoRoom(id)
+    return
   }
-  if (rankingType.value == 'Charm') {
-    backgroundColor.value = '#112C1E'
-    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 =
-      'linear-gradient(97deg, rgba(21, 50, 22, 0.60) 12.03%, rgba(33, 99, 40, 0.60) 100.37%)'
-    rankItemBorder.value = 'solid #66FF82'
 
-    params_type.value = 'GIFTS_RECEIVED'
+  viewUserInfo(id)
+}
+
+const loadMoreRanking = () => {
+  if (!showRankingLoading.value) {
+    return
   }
-  if (rankingType.value == 'Room') {
-    backgroundColor.value = '#211031'
-    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 =
-      'linear-gradient(97deg, rgba(33, 21, 50, 0.60) 12.03%, rgba(60, 33, 99, 0.60) 100.37%)'
-    rankItemBorder.value = 'solid #A366FF'
 
-    params_type.value = 'ROOM_GIFTS'
-  }
-})
+  loadedCount.value = Math.min(loadedCount.value + 10, remainingRankingCount.value)
+  syncLoadMoreState()
+}
 
-const observer = new IntersectionObserver((entries) => {
+const stickyObserver = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
-    // 哨兵元素离开视口
-    if (!entry.isIntersecting) {
-      console.log('哨兵元素离开视口')
-      if (stickyHeader.value) {
-        stickyHeader.value.classList.add('stuck')
-        console.log('添加stuck类')
-      } else {
-        console.log('元素未找到！')
-      }
-    } else {
-      stickyHeader.value.classList.remove('stuck')
+    if (!stickyHeader.value) {
+      return
     }
+
+    stickyHeader.value.classList.toggle('stuck', !entry.isIntersecting)
   })
 })
 
 const loadMoreObserver = new IntersectionObserver(
   (entries) => {
     entries.forEach((entry) => {
-      if (!entry.isIntersecting || !showRankingLoading.value) return
-
-      const totalItems = showRanking.value.filter((_, index) => index >= 3).length
-      const nextLoadedCount = Math.min(loadedCount.value + 10, totalItems)
-
-      loadedCount.value = nextLoadedCount
-      showRankingLoading.value = nextLoadedCount < totalItems
+      if (entry.isIntersecting) {
+        loadMoreRanking()
+      }
     })
   },
   {
@@ -650,96 +549,94 @@ const loadMoreObserver = new IntersectionObserver(
   },
 )
 
-// 跳转app
-const gotoAppPage = (id) => {
-  if (isInAppEnvironment.value) {
-    if (rankingType.value == 'Room') {
-      gotoRoom(id)
-    } else {
-      viewUserInfo(id)
-    }
-  }
-}
-
-// 获取榜单
-const getRanking = async () => {
-  console.log('获取榜单')
-
-  let resRanking = {}
-  if (rankingType.value == 'Wealth') {
-    resRanking = await getWealthRanking()
-  } else if (rankingType.value == 'Charm') {
-    resRanking = await getCharmRanking()
-  } else if (rankingType.value == 'Room') {
-    resRanking = await getRoomRanking()
-  }
-  if (resRanking.status && resRanking.body) {
-    totalRanking.value = resRanking.body
-    updateTimeRanking() //筛选展示榜单
-  }
-}
-
-//获取我的排名
-const getMyRankingInfo = async () => {
-  console.log('获取我的排名')
-  const resMyRanking = await getMyRanking(params_type.value, params_dateType.value)
-  if (resMyRanking.status && resMyRanking.body) {
-    myRanking.value = resMyRanking.body
-  } else {
-    myRanking.value = {}
-  }
-}
-
-// 刷新页面数据
-const initData = async () => {
-  await Promise.all([
-    getRanking(), // 获取榜单
-    getMyRankingInfo(), //获取我的排名
-  ])
-}
-
-// 完成预加载
-const completePreloading = async () => {
-  try {
-    // 执行所有初始化操作
-    await Promise.all([initData(), preloadCriticalImages()])
-  } catch (error) {
-    console.error('预加载过程中发生错误:', error)
-  } finally {
-    isLoading.value = false
-    await registerViewportObservers()
-  }
-}
-
 const registerViewportObservers = async () => {
   await nextTick()
-  observer.disconnect()
+
+  stickyObserver.disconnect()
   loadMoreObserver.disconnect()
 
   if (sentinel.value) {
-    observer.observe(sentinel.value)
+    stickyObserver.observe(sentinel.value)
   }
 
-  if (RankingLoadmore.value) {
+  if (RankingLoadmore.value && showRankingLoading.value) {
     loadMoreObserver.observe(RankingLoadmore.value)
   }
 }
 
-// 使用工具函数连接APP
+const completePreloading = async () => {
+  try {
+    await Promise.all([initData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('preload ranking overall assets failed:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
 const connectToAppHandler = async () => {
   await connectToApp(() => {
-    // 连接成功回调
-    completePreloading() // 完成预加载
+    completePreloading()
   })
 }
 
+const handleChangeType = async (type) => {
+  if (rankingType.value === type) {
+    return
+  }
+
+  rankingType.value = type
+  selectedTimeTab.value = 'Daily'
+  paramsDateType.value = 'DAY'
+  totalRanking.value = {}
+  showRanking.value = []
+  myRanking.value = {}
+  resetLoadedState()
+
+  await Promise.all([fetchRanking(), fetchMyRanking()])
+}
+
+const handleChangeDateType = async (tab) => {
+  if (selectedTimeTab.value === tab) {
+    return
+  }
+
+  const timeTab = TIME_TABS.find((item) => item.value === tab)
+
+  if (!timeTab) {
+    return
+  }
+
+  selectedTimeTab.value = timeTab.value
+  paramsDateType.value = timeTab.paramsDateType
+  showRanking.value = []
+  myRanking.value = {}
+  updateTimeRanking()
+  await fetchMyRanking()
+}
+
+const changeType = useThrottle(handleChangeType, 1000)
+const changeDateType = useThrottle(handleChangeDateType, 500)
+
 onMounted(() => {
   connectToAppHandler()
   isInAppEnvironment.value = isInApp()
 })
 
+watch(isLoading, async (newValue) => {
+  if (!newValue) {
+    await registerViewportObservers()
+  }
+})
+
+watch(showRankingLoading, async () => {
+  if (!isLoading.value) {
+    await registerViewportObservers()
+  }
+})
+
 onUnmounted(() => {
-  observer.disconnect()
+  stickyObserver.disconnect()
   loadMoreObserver.disconnect()
 })
 </script>
@@ -755,32 +652,27 @@ onUnmounted(() => {
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;
+  background: #000;
 }
 
-.ovr-x1 {
+.tab {
   font-weight: 700;
   font-size: 1em;
 }
 
-.ovr-x2 {
+.tabItem {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.ovr-x3 {
+.tag {
   font-weight: 510;
-  padding: 4px 10%;
+  padding: 4px 10px;
 }
 
-.ovr-x4 {
+.tagActive {
   color: black;
-  border-radius: 32px;
-  border: 1px solid #f5f54c;
-  box-sizing: border-box;
-  background: #fcfc93;
-  box-shadow: 0 0 8.6px 3px #fc8b02 inset;
-
   display: flex;
   justify-content: center;
   align-items: center;
@@ -791,7 +683,6 @@ onUnmounted(() => {
   backdrop-filter: blur(32px);
 }
 
-/* 添加加载动画样式 */
 .loading-container {
   width: 100vw;
   height: 100vh;
@@ -800,7 +691,6 @@ onUnmounted(() => {
   justify-content: center;
   align-items: center;
   color: #666;
-
   overflow: hidden;
   position: relative;
 }
diff --git a/src/views/Ranking/Overall/components/topUser.vue b/src/views/Ranking/Overall/components/topUser.vue
index 89facbf..9b6a33a 100644
--- a/src/views/Ranking/Overall/components/topUser.vue
+++ b/src/views/Ranking/Overall/components/topUser.vue
@@ -1,7 +1,7 @@
 <!-- src/views/Ranking/Overall/components/topUser.vue -->
 <template>
   <div style="width: 100%">
-    <div style="position: relative" :style="{ minHeight: minHeight }">
+    <div style="position: relative" :style="{ minHeight: currentLayout.minHeight }">
       <img
         v-smart-img
         :src="BorderImgUrl"
@@ -10,11 +10,10 @@
         width="100%"
         style="display: block; position: relative; z-index: 2"
       />
-      <!-- 头像 -->
+
       <div
         style="
           position: absolute;
-          top: 0;
           left: 0;
           right: 0;
           z-index: 1;
@@ -22,80 +21,93 @@
           justify-content: center;
           align-items: center;
         "
-        :style="avatarBoxHeight"
+        :style="currentLayout.avatarBox"
       >
-        <div style="width: 70%">
+        <div :style="currentLayout.avatarImage">
           <img
             :src="avatarUrl || ''"
             alt=""
             width="100%"
             style="display: block; aspect-ratio: 1/1; object-fit: cover"
-            :style="{ borderRadius: Type == 'Room' ? '0' : '50%' }"
+            :style="{ borderRadius: avatarBorderRadius }"
             @error="handleAvatarImageError"
           />
         </div>
       </div>
 
-      <!-- 用户名和贡献值 -->
-      <div
-        style="
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          z-index: 3;
-
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        "
-        :style="InfoBoxHeight"
-      >
+      <template v-if="isFirst">
         <div
           style="
-            height: 28%;
-            width: 60%;
+            position: absolute;
+            left: 50%;
+            z-index: 3;
             display: flex;
             justify-content: center;
             align-items: center;
+            transform: translateX(-50%);
           "
+          :style="currentLayout.name"
         >
-          <div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+          <div style="font-weight: 860" class="showText top1Text">
             {{ name }}
           </div>
         </div>
-        <div style="width: 60%; position: relative">
-          <img v-smart-img :src="coinNumBgUrl" alt="" width="100%" style="display: block" />
-          <div
-            v-if="distributionValue"
-            style="
-              position: absolute;
-              inset: 0;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding: 3% 5%;
-            "
-          >
-            <img
-              v-smart-img
-              src="/src/assets/icon/Azizi/coin.png"
-              alt=""
-              style="display: block; width: 1.3em"
-            />
-            <div
-              style="
-                font-weight: 700;
-                background: linear-gradient(180deg, #ffe656 0%, #fff 100%);
-                background-clip: text;
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-              "
-              class="showText"
-              :class="isTopOne ? 'top1Text' : 'text'"
-            >
-              {{ distributionValue }}
-            </div>
+
+        <div
+          v-if="displayValue"
+          style="
+            position: absolute;
+            left: 50%;
+            z-index: 3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.2em;
+            transform: translateX(-50%);
+          "
+          :style="currentLayout.value"
+        >
+          <img
+            v-smart-img
+            src="/src/assets/icon/Azizi/coin.png"
+            alt=""
+            style="display: block; width: 1.1em; flex-shrink: 0"
+          />
+          <div style="font-weight: 700; color: white" class="showText top1ValueText">
+            {{ displayValue }}
+          </div>
+        </div>
+      </template>
+
+      <div
+        v-else
+        style="
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 3;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 0.35em;
+        "
+        :style="currentLayout.info"
+      >
+        <div style="display: flex; justify-content: center; align-items: center; min-width: 0">
+          <div style="font-weight: 860" class="showText text">
+            {{ name }}
+          </div>
+        </div>
+
+        <div style="display: flex; align-items: center">
+          <img
+            v-smart-img
+            src="/src/assets/icon/Azizi/coin.png"
+            alt=""
+            style="display: block; width: 0.95em; flex-shrink: 0"
+          />
+          <div style="font-weight: 700; color: white" class="showText valueText">
+            {{ displayValue }}
           </div>
         </div>
       </div>
@@ -104,119 +116,132 @@
 </template>
 
 <script setup>
-import { computed, watch } from 'vue'
-import { getPngUrl } from '@/config/imagePaths.js'
+import { computed } from 'vue'
 import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
 
-// 获取OSS图片URL的函数
-const coinNumBgUrl = getPngUrl('Ranking/Overall/', 'coinNumBg')
+const TOP_USER_LAYOUTS = {
+  Wealth: {
+    1: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '36%' },
+      name: { bottom: '16%', width: '38%', maxWidth: '38%', height: '7.2%' },
+      value: { bottom: '2%', width: '34%', maxWidth: '34%', height: '10%' },
+    },
+    2: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+    3: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+  },
+  Charm: {
+    1: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '110%' },
+      avatarImage: { width: '36%' },
+      name: { bottom: '14%', width: '30%', height: '7.2%' },
+      value: { bottom: '2%', width: '34%', height: '10%' },
+    },
+    2: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+    3: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+  },
+  Room: {
+    1: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '100%' },
+      avatarImage: { width: '27%' },
+      name: { bottom: '24%', width: '30%', height: '7.2%' },
+      value: { bottom: '3%', width: '34%', height: '10%' },
+    },
+    2: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+    3: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+  },
+}
 
 const props = defineProps({
   Type: {
-    type: Boolean,
+    type: String,
     default: '',
   },
-
+  rank: {
+    type: Number,
+    default: 1,
+  },
   isTopOne: {
     type: Boolean,
     default: false,
   },
-
   avatarUrl: {
     type: String,
     default: '/src/assets/icon/Azizi/defaultAvatar.png',
   },
-
   BorderImgUrl: {
     type: String,
     required: true,
   },
-
   name: {
     type: String,
     default: '',
   },
-
   distributionValue: {
     type: String,
     default: '',
   },
 })
 
-watch(
-  () => props.Type,
-  (newVal, oldVal) => {
-    console.log('Type 变化 =>', '新值:', newVal, '旧值:', oldVal)
-  },
-)
-
-// 盒子最小高度
-const minHeight = computed(() => {
-  if (props.Type == 'Wealth') {
-    if (props.isTopOne) {
-      return `64.11vw`
-    } else {
-      return `50.20vw`
-    }
-  } else if (props.Type == 'Charm') {
-    if (props.isTopOne) {
-      return `64.11vw`
-    } else {
-      return `50.20vw`
-    }
-  } else if (props.Type == 'Room') {
-    if (props.isTopOne) {
-      return `67.19vw`
-    } else {
-      return `49.68vw`
-    }
-  }
+const currentType = computed(() => {
+  return TOP_USER_LAYOUTS[props.Type] ? props.Type : 'Wealth'
 })
 
-// 头像盒子高度
-const avatarBoxHeight = computed(() => {
-  if (props.Type == 'Wealth') {
-    if (props.isTopOne) {
-      return `height:60%`
-    } else {
-      return `height:60%`
-    }
-  } else if (props.Type == 'Charm') {
-    if (props.isTopOne) {
-      return `height:55%`
-    } else {
-      return `height:60%`
-    }
-  } else if (props.Type == 'Room') {
-    if (props.isTopOne) {
-      return `height:50%`
-    } else {
-      return `height:55%`
-    }
+const currentRank = computed(() => {
+  if (props.isTopOne) {
+    return 1
   }
+
+  return props.rank === 3 ? 3 : 2
 })
 
-// 信息盒子高度
-const InfoBoxHeight = computed(() => {
-  if (props.Type == 'Wealth') {
-    if (props.isTopOne) {
-      return `height:40%`
-    } else {
-      return `height:40%`
-    }
-  } else if (props.Type == 'Charm') {
-    if (props.isTopOne) {
-      return `height:42%`
-    } else {
-      return `height:41%`
-    }
-  } else if (props.Type == 'Room') {
-    if (props.isTopOne) {
-      return `height:45%`
-    } else {
-      return `height:42%`
-    }
-  }
+const isFirst = computed(() => {
+  return currentRank.value === 1
+})
+
+const currentLayout = computed(() => {
+  return TOP_USER_LAYOUTS[currentType.value][currentRank.value]
+})
+
+const avatarBorderRadius = computed(() => {
+  return props.Type === 'Room' ? '0' : '50%'
+})
+
+const displayValue = computed(() => {
+  return props.distributionValue || '0'
 })
 </script>
 
@@ -234,11 +259,19 @@ const InfoBoxHeight = computed(() => {
 }
 
 .top1Text {
-  font-size: 0.9em;
+  font-size: 0.86em;
+}
+
+.top1ValueText {
+  font-size: 0.72em;
 }
 
 .text {
-  font-size: 0.8em;
+  font-size: 0.74em;
+}
+
+.valueText {
+  font-size: 0.68em;
 }
 
 @media screen and (max-width: 360px) {