style(总排行榜及其组件): 文件结构调整、样式更新

src/router/index.js

@@ -200,7 +200,7 @@ const router = createRouter({
     {
       path: '/top-list',
       name: 'top-list',
-      component: () => import('../views/Activities/KingAndQueen/TopList.vue'),
+      component: () => import('../views/Ranking/KingAndQueen/TopList.vue'),
       meta: { requiresAuth: true },
     },
     {

src/views/Ranking/KingAndQueen/TopList.vue

@@ -100,16 +100,14 @@
       <!-- 刷新倒计时 -->
       <div style="display: flex; justify-content: center; margin-top: 20px">
         <!-- 天数 -->
-        <div style="width: 10%; position: relative; margin-right: 10px">
+        <itemCenter :imgUrl="images.dayBg" style="width: 10%; margin-right: 10px">
-          <img :src="images.dayBg" alt="" width="100%" style="display: block" />
           <div class="time">{{ Days }}D</div>
-        </div>
+        </itemCenter>
 
         <!-- 当天时间倒计时 -->
-        <div style="width: 23.75%; position: relative">
+        <itemCenter :imgUrl="images.timeBg" style="width: 23.75%">
-          <img :src="images.timeBg" alt="" width="100%" style="display: block" />
           <div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
-        </div>
+        </itemCenter>
       </div>
 
       <!-- rewards -->
@@ -119,57 +117,25 @@
 
       <!-- 每周礼物 -->
       <div style="display: flex; justify-content: center">
-        <div style="width: 100%; position: relative">
+        <itemCenter :imgUrl="images.eventGifts">
-          <img :src="images.eventGifts" alt="" style="width: 100%" />
+          <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
-          <div
+            <div
-            style="
+              v-for="(gift, index) in gifts"
-              position: absolute;
+              :key="index"
-              left: 0;
+              style="width: 30%; display: flex; flex-direction: column"
-              right: 0;
+            >
-              top: 0;
+              <itemCenter :imgUrl="images.gift">
-              bottom: 0;
+                <img :src="gift.giftPhoto" alt="" width="50%" />
-              display: flex;
+              </itemCenter>
-              justify-content: center;
+              <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
-              align-items: center;
+                <img src="/src/assets/icon/coin.png" alt="" style="width: 18%; aspect-ratio: 1/1" />
-            "
+                <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
-          >
+                  {{ gift.giftCandy }}
-            <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
-              <div
-                v-for="(gift, index) in gifts"
-                :key="index"
-                style="width: 30%; display: flex; flex-direction: column"
-              >
-                <div style="position: relative">
-                  <img style="" :src="images.gift" alt="" width="100%" />
-                  <div
-                    style="
-                      position: absolute;
-                      top: 0;
-                      bottom: 0;
-                      left: 0;
-                      right: 0;
-                      display: flex;
-                      justify-content: center;
-                      align-items: center;
-                    "
-                  >
-                    <img :src="gift.giftPhoto" alt="" width="50%" />
-                  </div>
-                </div>
-                <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
-                  <img
-                    src="/src/assets/icon/coin.png"
-                    alt=""
-                    style="width: 18%; aspect-ratio: 1/1"
-                  />
-                  <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
-                    {{ gift.giftCandy }}
-                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        </itemCenter>
       </div>
 
       <!-- 排行榜模块 -->
@@ -196,84 +162,105 @@
         <!-- 排行榜 -->
         <div style="width: 100%">
           <borderImg title="Ranking">
-            <div
+            <itemCenter
-              style="margin: -2px 0; position: relative"
+              :imgUrl="images['border-item-user']"
+              style="margin: -2px 0"
+              :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 4px;`"
               v-for="(listItem, index) in topList"
               :key="index"
               @click="viewUserInfo(listItem.userId)"
             >
-              <img :src="images['border-item-user']" alt="" style="width: 100%; display: block" />
+              <!-- 基本信息 -->
               <div
                 style="
-                  position: absolute;
+                  width: 75%;
-                  top: 0;
+                  min-width: 0;
-                  bottom: 0;
-                  left: 0;
-                  right: 0;
                   display: flex;
+                  justify-content: space-around;
                   align-items: center;
-                  padding: 0 15%;
+                  gap: 4px;
                 "
               >
-                <div style="width: 80%; display: flex; align-items: center">
+                <!-- 排名 -->
-                  <div style="color: #edb247; font-weight: 700; width: 28px">
+                <div
-                    {{ listItem.rank }}
+                  style="width: 15%; display: flex; justify-content: center; align-items: center"
-                  </div>
+                >
-                  <div
+                  <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
-                    style="
-                      width: 24%;
-                      aspect-ratio: 1/1;
-                      border-radius: 50%;
-                      margin: 0 5px;
-                      background: linear-gradient(
-                        to bottom,
-                        rgba(255, 224, 60, 1),
-                        rgba(255, 189, 19, 1)
-                      );
-
-                      display: flex;
-                      justify-content: center;
-                      align-items: center;
-                    "
-                  >
-                    <img
-                      :src="listItem.userAvatar || ''"
-                      alt=""
-                      style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
-                      @error="defaultAvatarUrl"
-                    />
-                  </div>
-
-                  <div
-                    style="width: calc(100% - 24% - 38px); display: flex; flex-direction: column"
-                  >
-                    <div
-                      style="
-                        color: #fff;
-                        font-weight: 860;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        width: 100%;
-                      "
-                      class="topUserNickname"
-                    >
-                      {{ listItem.userNickname }}
-                    </div>
-                    <div style="color: #fff; font-weight: 590" class="topUserNickname">
-                      ID:{{ listItem.account }}
-                    </div>
-                  </div>
                 </div>
 
-                <div style="display: flex; width: 20%; display: flex; align-items: center">
+                <!-- 头像 -->
-                  <img src="/src/assets/icon/coin.png" alt="" style="width: 25%" />
+                <div
-                  <div style="color: #edb247; font-weight: 700" class="topUserNickname">
+                  style="
-                    {{ listItem.quantity }}
+                    width: 24%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                    background: linear-gradient(
+                      to bottom,
+                      rgba(255, 224, 60, 1),
+                      rgba(255, 189, 19, 1)
+                    );
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    v-smart-img
+                    :src="listItem.userAvatar || ''"
+                    alt=""
+                    style="
+                      display: block;
+                      width: 90%;
+                      aspect-ratio: 1/1;
+                      border-radius: 50%;
+                      object-fit: cover;
+                    "
+                    @error="defaultAvatarUrl"
+                  />
+                </div>
+
+                <!-- 名称 -->
+                <div
+                  style="
+                    min-width: 0;
+                    width: calc(100% - 15% - 24% - 8px);
+                    display: flex;
+                    flex-direction: column;
+                  "
+                >
+                  <div
+                    style="
+                      width: 100%;
+                      color: #fff;
+                      font-weight: 860;
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                    "
+                    class="topUserNickname"
+                  >
+                    {{ listItem.userNickname }}
+                  </div>
+                  <div style="color: #fff; font-weight: 590" class="topUserNickname">
+                    ID:{{ listItem.account }}
                   </div>
                 </div>
               </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="color: #edb247; font-weight: 700" class="topUserNickname">
+                  {{ listItem.quantity }}
+                </div>
+              </div>
+            </itemCenter>
             <!-- 触发加载功能 -->
             <div ref="kingListLoadmore" v-show="showKingLoading && visibleKingList"></div>
             <!-- 触发加载功能 -->
@@ -501,29 +488,15 @@
                         :key="rewardIndex"
                         style="width: 100%"
                       >
-                        <div style="position: relative">
+                        <itemCenter :imgUrl="images.gift">
-                          <img :src="images.gift" style="" alt="" width="100%" />
+                          <img
-                          <div
+                            :src="reward.cover || ''"
-                            style="
+                            alt=""
-                              position: absolute;
+                            width="50%"
-                              top: 0;
+                            style="aspect-ratio: 1/1"
-                              bottom: 0;
+                            @error="(e) => handleImageError(e, reward.type)"
-                              left: 0;
+                          />
-                              right: 0;
+                        </itemCenter>
-                              display: flex;
-                              justify-content: center;
-                              align-items: center;
-                            "
-                          >
-                            <img
-                              :src="reward.cover || ''"
-                              alt=""
-                              width="50%"
-                              style="aspect-ratio: 1/1"
-                              @error="(e) => handleImageError(e, reward.type)"
-                            />
-                          </div>
-                        </div>
 
                         <div
                           style="
@@ -551,7 +524,7 @@
         position: sticky;
         bottom: 0;
         left: 0;
-        widows: 100vw;
+        width: 100vw;
         background-color: rgba(77, 30, 22, 1);
         display: flex;
         justify-content: center;
@@ -566,21 +539,32 @@
           inset: 0;
           display: flex;
           align-items: center;
-          justify-content: center;
+          justify-content: space-around;
-          padding: 0 8%;
+          padding: 2% 2% 0;
-          gap: 8px;
+          gap: 4px;
         "
       >
-        <div style="width: 80%; display: flex; align-items: center">
+        <!-- 基本信息 -->
+        <div
+          style="
+            width: 75%;
+            min-width: 0;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            gap: 4px;
+          "
+        >
           <!-- 排名 -->
-          <div style="color: #edb247; font-weight: 700">{{ myRanking.wealthRank || 0 }}</div>
+          <div style="width: 15%; display: flex; justify-content: center; align-items: center">
+            <div style="color: #edb247; font-weight: 700">{{ myRanking.wealthRank || 0 }}</div>
+          </div>
           <!-- 头像 -->
           <div
             style="
               width: 25%;
               aspect-ratio: 1/1;
               border-radius: 50%;
-              margin: 0 12px;
               background: linear-gradient(to bottom, rgba(255, 224, 60, 1), rgba(255, 189, 19, 1));
 
               display: flex;
@@ -589,14 +573,29 @@
             "
           >
             <img
+              v-smart-img
               :src="myRanking.userAvatar || ''"
               alt=""
-              style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+              style="
+                display: block;
+                width: 90%;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
+              "
               @error="defaultAvatarUrl"
             />
           </div>
+
           <!-- 名称 -->
-          <div style="display: flex; flex-direction: column; width: calc(100% - 30px - 24px - 25%)">
+          <div
+            style="
+              min-width: 0;
+              width: calc(100% - 15% - 25% - 8px);
+              display: flex;
+              flex-direction: column;
+            "
+          >
             <div
               style="
                 color: #fff;
@@ -611,7 +610,7 @@
           </div>
         </div>
 
-        <div style="width: 20%; display: flex; align-items: center; gap: 2px">
+        <div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px">
           <img
             src="/src/assets/icon/coin.png"
             alt=""
@@ -631,31 +630,23 @@
 </template>
 
 <script setup>
-import {
-  connectApplication,
-  parseAccessOrigin,
-  parseHeader,
-  setHttpHeaders,
-  isInApp,
-  viewUserInfo,
-} from '@/utils/appBridge.js'
-import {
-  appConnectionManager,
-  isAppConnected,
-  getAppHeaderInfo,
-} from '@/utils/appConnectionManager.js'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import borderImg from '@/components/TopList/borderImg.vue'
+import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
-import maskLayer from '@/components/MaskLayer.vue'
+import { useDebounce, useThrottle } from '@/utils/useDebounce'
+import { connectToApp } from '@/utils/appConnector.js'
+
 import {
   getWeekTopList,
   getWeekMyContribution,
   getThisWeekRewardsAndGifts,
   getHistoryTopOne,
 } from '@/api/topList.js'
-import { useDebounce, useThrottle } from '@/utils/useDebounce'
 import { getMemberProfile } from '@/api/wallet'
 
+import borderImg from './components/borderImg.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
 //vite动态批量导入图片
 const imageModules = import.meta.glob('@/assets/images/TopList/*.{png,jpg,svg}', { eager: true })
 // 生成文件名映射对象（自动移除路径和扩展名）
@@ -666,124 +657,13 @@ const images = Object.fromEntries(
   })
 )
 
-const appConnected = ref(false)
+// 使用工具函数连接APP
-const headerInfo = ref({})
+const connectToAppHandler = async () => {
-
+  await connectToApp(() => {
-/**
+    // 连接成功回调
- * 连接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()
-
+    updatePageData() // 刷新页面数据
-    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 }
-  }
 }
 
 const userInfo = ref({})
@@ -1066,13 +946,11 @@ const updatePageData = () => {
 // 组件挂载时检测环境
 onMounted(() => {
   isInAppEnvironment.value = isInApp()
-  connectToApp()
+  connectToAppHandler()
 
   getCountdown()
   timer = setInterval(getCountdown, 1000) //每秒更新
 
-  updatePageData() // 刷新页面数据
-
   if (kingListLoadmore.value) {
     observer.observe(kingListLoadmore.value)
   } //监控国王加载标志