style(总排行榜及其组件): 样式更新

src/views/Ranking/Overall/Ranking.vue

@@ -10,7 +10,6 @@
         position: sticky;
         top: 0;
         z-index: 999;
-        padding-bottom: 10px;
         border-radius: 0 0 12px 12px;
         transition: all 0.3s;
       "
@@ -48,6 +47,7 @@
 
           <!-- 推出键 -->
           <img
+            v-smart-img
             src="../../../assets/icon/arrowBack.png"
             alt=""
             style="position: absolute; left: 0; top: 50%; transform: translateY(-50%)"
@@ -108,7 +108,7 @@
         <!-- 第一 -->
         <div style="display: flex; justify-content: center">
           <TopUser
-            :isRoom="rankingType === 'Room'"
+            :Type="rankingType"
             :isTopOne="true"
             :BorderImgUrl="topBorderBg"
             :avatarUrl="RankingTop3[0].avatar || ''"
@@ -119,23 +119,23 @@
           />
         </div>
         <!-- 第二三 -->
-        <div style="display: flex; justify-content: space-between; margin-top: -20%">
+        <div style="display: flex; justify-content: space-between; margin-top: -45%">
           <TopUser
-            :isRoom="rankingType === 'Room'"
+            :Type="rankingType"
             :BorderImgUrl="top2BorderBg"
             :avatarUrl="RankingTop3[1].avatar || ''"
             :name="RankingTop3[1].nickname || ''"
             :distributionValue="RankingTop3[1].quantityFormat || ''"
-            style="width: 30%"
+            style="width: 32%"
             @click="gotoAppPage(RankingTop3[1].id)"
           />
           <TopUser
-            :isRoom="rankingType === 'Room'"
+            :Type="rankingType"
             :BorderImgUrl="top3BorderBg"
             :avatarUrl="RankingTop3[2].avatar || ''"
             :name="RankingTop3[2].nickname || ''"
             :distributionValue="RankingTop3[2].quantityFormat || ''"
-            style="width: 30%"
+            style="width: 32%"
             @click="gotoAppPage(RankingTop3[2].id)"
           />
         </div>
@@ -150,32 +150,49 @@
             border-radius: 12px;
             backdrop-filter: blur(32px);
             margin: 5px 0;
-            padding: 12px;
+            padding: 3%;
+
             display: flex;
             justify-content: space-between;
             align-items: center;
+            gap: 4px;
           "
           :style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
           @click="gotoAppPage(userInfo.id)"
         >
-          <div style="display: flex; align-items: center; width: 70%">
-            <div style="font-weight: 700">{{ index + 4 }}</div>
+          <!-- 基本信息 -->
+          <div
+            style="
+              width: 75%;
+              min-width: 0;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              gap: 4px;
+            "
+          >
+            <!-- 排名 -->
+            <div style="width: 10%; display: flex; justify-content: center; align-items: center">
+              <div style="font-weight: 700">{{ index + 4 }}</div>
+            </div>
+            <!-- 头像 -->
             <img
               :src="userInfo.avatar || ''"
               alt=""
-              width="20%"
               style="
                 display: block;
+                width: 15%;
+                aspect-ratio: 1/1;
                 border-radius: 50%;
                 object-fit: cover;
-                aspect-ratio: 1/1;
-                margin: 0 4px;
               "
               :style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
               @error="defaultAvatarUrl"
             />
             <div
               style="
+                min-width: 0;
+                width: calc(100% - 10% - 15% - 8px);
                 font-weight: 700;
                 overflow: hidden;
                 white-space: nowrap;
@@ -185,22 +202,16 @@
               {{ userInfo.nickname }}
             </div>
           </div>
-          <div style="display: flex; align-items: center; width: 30%">
+
+          <!-- 贡献值 -->
+          <div style="flex: 1; min-width: 0; display: flex; align-items: center; width: 30%">
             <img
+              v-smart-img
               src="/src/assets/icon/coin.png"
               alt=""
-              width="20%"
-              style="display: block; aspect-ratio: 1/1"
+              style="display: block; width: 25%; aspect-ratio: 1/1"
             />
-            <div
-              style="
-                font-weight: 500;
-                color: rgba(248, 182, 45, 1);
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              "
-            >
+            <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
               {{ userInfo.quantityFormat }}
             </div>
           </div>
@@ -217,14 +228,12 @@
     <div
       style="
         border-radius: 12px 12px 0 0;
-        border-top: 2px solid #ffa166;
-        border-right: 1px solid #ffa166;
-        border-left: 1px solid #ffa166;
         backdrop-filter: blur(32px);
-        padding: 12px;
+        padding: 2%;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        gap: 4px;
       "
       :style="{
         background: rankItemBackground,
@@ -233,38 +242,54 @@
         borderRight: '1px ' + rankItemBorder,
       }"
     >
-      <div style="display: flex; align-items: center; width: 70%">
-        <div style="font-weight: 700">{{ myRanking.rank || 0 }}</div>
+      <!-- 基本信息 -->
+      <div
+        style="
+          width: 80%;
+          min-width: 0;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          gap: 4px;
+        "
+      >
+        <!-- 排名 -->
+        <div style="width: 10%; 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=""
-          width="20%"
-          style="display: block; aspect-ratio: 1/1; margin: 0 4px"
-          :style="{ borderRadius: rankingType === 'Room' ? '0' : '50%' }"
+          style="display: block; width: 15%; aspect-ratio: 1/1"
+          :style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
           @error="defaultAvatarUrl"
         />
-        <div
-          style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
-        >
-          {{ myRanking.nickname || '' }}
-        </div>
-      </div>
-      <div style="display: flex; align-items: center; width: 30%">
-        <img
-          src="/src/assets/icon/coin.png"
-          alt=""
-          width="20%"
-          style="display: block; aspect-ratio: 1/1"
-        />
+        <!-- 名称 -->
         <div
           style="
-            font-weight: 500;
-            color: rgba(248, 182, 45, 1);
+            min-width: 0;
+            width: calc(100% - 10% - 15% - 8px);
+            font-weight: 700;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
           "
         >
+          {{ myRanking.nickname || '' }}
+        </div>
+      </div>
+
+      <!-- 贡献值 -->
+      <div style="flex: 1; min-width: 0; 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"
+        />
+        <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
           {{ myRanking.quantityFormat || 0 }}
         </div>
       </div>
@@ -273,25 +298,15 @@
 </template>
 
 <script setup>
-import {
-  connectApplication,
-  parseAccessOrigin,
-  parseHeader,
-  setHttpHeaders,
-  isInApp,
-  closePage,
-  viewUserInfo,
-  gotoRoom,
-} from '@/utils/appBridge.js'
-import {
-  appConnectionManager,
-  isAppConnected,
-  getAppHeaderInfo,
-} from '@/utils/appConnectionManager.js'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
-import TopUser from '@/components/Ranking/topUser.vue'
-import { getWealthRanking, getCharmRanking, getRoomRanking, getMyRanking } from '@/api/ranking'
 import { useRoute } from 'vue-router'
+import { isInApp, closePage, viewUserInfo, gotoRoom } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+
+import { getWealthRanking, getCharmRanking, getRoomRanking, getMyRanking } from '@/api/ranking'
+
+import TopUser from './components/topUser.vue'
+
 const route = useRoute()
 
 //vite动态批量导入图片
@@ -316,8 +331,9 @@ const totalRanking = ref({})
 const showRanking = ref([])
 const myRanking = ref({}) //我的排名
 
+// 筛选展示榜单
 const updateTimeRanking = () => {
-  console.log('updateTimeRanking()')
+  console.log('updateTimeRanking()//筛选展示榜单')
 
   if (selectedTimeTab.value == 'Hourly' && totalRanking.value.hourly) {
     showRanking.value = totalRanking.value.hourly
@@ -338,6 +354,7 @@ const changeType = (type) => {
     rankingType.value = type
     selectedTimeTab.value = 'Hourly'
     params_dateType.value = 'HOUR'
+
     if (type == 'Wealth') {
       params_type.value = 'GIFTS_SEND'
     } else if (type == 'Charm') {
@@ -345,9 +362,12 @@ const changeType = (type) => {
     } else if (type == 'Room') {
       params_type.value = 'ROOM_GIFTS'
     }
+
+    // 清空数据
     totalRanking.value = {}
     showRanking.value = []
     myRanking.value = {}
+
     getRanking() // 获取榜单
     getMyRankingInfo() //获取我的排名
   }
@@ -358,6 +378,7 @@ const changeDateType = (dateType) => {
   if (selectedTimeTab.value != dateType) {
     console.log('改变rankingType')
     selectedTimeTab.value = dateType
+
     if (dateType == 'Hourly') {
       params_dateType.value = 'HOUR'
     } else if (dateType == 'Daily') {
@@ -367,9 +388,12 @@ const changeDateType = (dateType) => {
     } else if (dateType == 'Monthly') {
       params_dateType.value = 'MONTH'
     }
+
+    // 清空数据
     showRanking.value = []
     myRanking.value = {}
-    updateTimeRanking() //刷新展示榜单
+
+    updateTimeRanking() //筛选展示榜单
     getMyRankingInfo() //获取我的排名
   }
 }
@@ -497,7 +521,7 @@ const getRanking = async () => {
   }
   if (resRanking.status && resRanking.body) {
     totalRanking.value = resRanking.body
-    updateTimeRanking()
+    updateTimeRanking() //筛选展示榜单
   }
 }
 
@@ -512,134 +536,25 @@ const getMyRankingInfo = async () => {
   }
 }
 
-const appConnected = ref(false)
-const headerInfo = ref({})
+// 刷新页面数据
+const initData = () => {
+  getRanking() // 获取榜单
+  getMyRankingInfo() //获取我的排名
+}
 
-/**
- * 连接APP并获取认证信息（优化版 - 仅专注连接）
- */
-const connectToApp = async () => {
-  console.group('🔗 APP Connection Process')
-  console.debug('🚀 Starting APP connection...')
-
-  try {
-    // 检查是否在APP环境中
-    if (!isInApp()) {
-      console.debug('🌐 Browser environment detected')
-      appConnected.value = true
-      console.groupEnd()
-
-      // 触发连接成功回调
-      // getUserInfo()
-
-      return { success: true, environment: 'browser' }
-    }
-
-    // 检查是否已经连接且未过期
-    if (isAppConnected()) {
-      console.debug('✅ APP already connected and valid')
-      appConnected.value = true
-
-      // 使用缓存的头部信息
-      const cachedHeaderInfo = getAppHeaderInfo()
-      if (cachedHeaderInfo) {
-        headerInfo.value = cachedHeaderInfo
-        console.debug('🔧 Using cached HTTP headers')
-      }
-
-      console.groupEnd()
-
-      // 触发连接成功回调
-      // getUserInfo()
-
-      return { success: true, environment: 'app', fromCache: true }
-    }
-
-    // 检查是否有正在进行的连接
-    if (appConnectionManager.isConnecting()) {
-      console.debug('⏳ Connection already in progress, waiting...')
-      await appConnectionManager.getConnectionPromise()
-      appConnected.value = true
-      console.debug('✅ Connected via existing process')
-      console.groupEnd()
-
-      // 触发连接成功回调
-      // getUserInfo()
-
-      return { success: true, environment: 'app', fromCache: true }
-    }
-
-    // 建立新的APP连接
-    console.debug('📱 Establishing new APP connection...')
-
-    const connectionResult = await new Promise((resolve, reject) => {
-      const connectionPromise = new Promise((connectResolve, connectReject) => {
-        connectApplication(async (access) => {
-          try {
-            const result = parseAccessOrigin(access)
-
-            if (result.success) {
-              // 解析头部信息
-              headerInfo.value = parseHeader(result.data)
-
-              // 设置HTTP请求头
-              console.debug('🔧 Setting HTTP headers...')
-              await setHttpHeaders(headerInfo.value)
-
-              // 标记连接成功
-              appConnected.value = true
-              appConnectionManager.setConnected(headerInfo.value)
-
-              console.debug('🎉 APP connection established successfully')
-              connectResolve({ success: true, environment: 'app', fromCache: false })
-            } else {
-              console.error('❌ Failed to parse access origin:', result.error)
-              appConnectionManager.reset()
-              connectReject(new Error(result.error))
-            }
-          } catch (error) {
-            console.error('❌ Connection process failed:', error)
-            appConnectionManager.reset()
-            connectReject(error)
-          }
-        })
-      })
-
-      // 设置连接状态
-      appConnectionManager.setConnecting(connectionPromise)
-
-      connectionPromise.then(resolve).catch(reject)
-    })
-
-    console.debug('✅ Connection completed successfully')
-    console.groupEnd()
-
-    // 触发连接成功回调
-    // getUserInfo()
-
-    return connectionResult
-  } catch (error) {
-    console.error('❌ Connection failed:', error)
-    appConnected.value = false
-    console.groupEnd()
-
-    // 连接失败的特殊处理
-    if (error.message && error.message.includes('parse access')) {
-      router.push({ path: '/not_app', query: { message: error.message } })
-    }
-
-    return { success: false, error: error.message }
-  }
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    initData() //初始化数据
+  })
 }
 
 onMounted(() => {
-  connectToApp()
+  connectToAppHandler()
   isInAppEnvironment.value = isInApp()
 
   observer.observe(sentinel.value)
-
-  getRanking() // 获取榜单
-  getMyRankingInfo() //获取我的排名
 })
 </script>
 
@@ -693,7 +608,7 @@ onMounted(() => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
+    font-size: 14px;
   }
 }
 

src/views/Ranking/Overall/components/topUser.vue

@@ -2,6 +2,7 @@
   <div style="width: 100%">
     <div style="position: relative">
       <img
+        v-smart-img
         :src="BorderImgUrl"
         alt=""
         width="100%"
@@ -19,20 +20,20 @@
           justify-content: center;
           align-items: center;
         "
-        :style="{ height: isTopOne ? '55%' : '60%' }"
+        :style="avatarBoxHeight"
       >
-        <div style="width: 75%">
+        <div style="width: 70%">
           <img
-            v-if="avatarUrl"
             :src="avatarUrl || ''"
             alt=""
             width="100%"
-            style="aspect-ratio: 1/1; object-fit: cover"
-            :style="{ borderRadius: isRoom ? '0' : '50%' }"
+            style="display: block; aspect-ratio: 1/1; object-fit: cover"
+            :style="{ borderRadius: Type == 'Room' ? '0' : '50%' }"
             @error="defaultAvatarUrl"
           />
         </div>
       </div>
+
       <!-- 用户名和贡献值 -->
       <div
         style="
@@ -40,13 +41,13 @@
           bottom: 0;
           left: 0;
           right: 0;
-          height: 40%;
           z-index: 3;
 
           display: flex;
           flex-direction: column;
           align-items: center;
         "
+        :style="InfoBoxHeight"
       >
         <div
           style="
@@ -63,6 +64,7 @@
         </div>
         <div style="width: 60%; position: relative">
           <img
+            v-smart-img
             src="/src/assets/images/Ranking/coinNumBg.png"
             alt=""
             width="100%"
@@ -71,7 +73,13 @@
           <div
             style="position: absolute; inset: 0; display: flex; align-items: center; padding: 3% 5%"
           >
-            <img src="/src/assets/icon/coin.png" alt="" width="25%" style="display: block" />
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              width="25%"
+              style="display: block"
+            />
             <div
               style="
                 font-weight: 700;
@@ -93,12 +101,12 @@
 </template>
 
 <script setup>
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
 
 const props = defineProps({
-  isRoom: {
+  Type: {
     type: Boolean,
-    default: false,
+    default: '',
   },
 
   isTopOne: {
@@ -128,12 +136,58 @@ const props = defineProps({
 })
 
 watch(
-  () => props.isRoom,
+  () => props.Type,
   (newVal, oldVal) => {
-    console.log('isRoom 变化 =>', '新值:', newVal, '旧值:', oldVal)
+    console.log('Type 变化 =>', '新值:', newVal, '旧值:', oldVal)
   }
 )
 
+// 头像盒子高度
+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 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 defaultAvatarUrl = (e) => {
   console.log('头像资源出错')
   e.target.onerror = null //防止循环
@@ -171,7 +225,7 @@ const defaultAvatarUrl = (e) => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 14px;
+    font-size: 12px;
   }
 }