style(周星排行榜): 文件结构调整、样式更新

src/router/index.js

@@ -206,7 +206,7 @@ const router = createRouter({
     {
       path: '/weekly-star',
       name: 'weekly-star',
-      component: () => import('../views/Activities/WeeklyStar/WeeklyStar.vue'),
+      component: () => import('../views/Ranking/WeeklyStar/WeeklyStar.vue'),
       meta: { requiresAuth: true },
     },
     {

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -142,66 +142,79 @@
           </div>
 
           <!-- 第四名开始 -->
-          <div
+          <itemCenter
             v-for="listItem in showRanking"
             style="margin-top: 3%; position: relative"
             @click="viewUserInfo(listItem.userId)"
+            :imgUrl="images.itemUser"
+            :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 4px;`"
           >
-            <img :src="images.itemUser" alt="" width="100%;" style="display: block" />
+            <!-- 基本信息 -->
             <div
               style="
-                position: absolute;
+                width: 75%;
-                inset: 0;
+                min-width: 0;
                 display: flex;
+                justify-content: space-around;
                 align-items: center;
-                padding: 0 3%;
+                gap: 4px;
               "
             >
-              <div style="flex: 1; min-width: 0; display: flex; align-items: center">
+              <!-- 排名 -->
-                <div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
+              <div style="width: 15%; display: flex; justify-content: center; align-items: center">
-                  {{ listItem.rank }}
+                <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
-                </div>
-                <img
-                  :src="listItem.userAvatar || ''"
-                  alt=""
-                  style="
-                    width: 20%;
-                    margin: 0 2%;
-                    aspect-ratio: 1/1;
-                    border-radius: 50%;
-                    object-fit: cover;
-                  "
-                  @error="defaultAvatarUrl"
-                />
-
-                <div style="width: calc(100% - 10% - 24%); display: flex; flex-direction: column">
-                  <div
-                    style="
-                      color: #fff;
-                      font-weight: 860;
-                      overflow: hidden;
-                      white-space: nowrap;
-                      text-overflow: ellipsis;
-                      width: 100%;
-                    "
-                    class="UserNickname"
-                  >
-                    {{ listItem.userNickname }}
-                  </div>
-                  <div style="color: #fff; font-weight: 590" class="UserNickname">
-                    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: 30%" />
+              <img
-                <div style="color: #edb247; font-weight: 700" class="UserNickname">
+                v-smart-img
-                  {{ listItem.quantity }}
+                :src="listItem.userAvatar || ''"
+                alt=""
+                style="
+                  width: 25%;
+                  margin: 0 2%;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                  object-fit: cover;
+                "
+                @error="defaultAvatarUrl"
+              />
+
+              <!-- 名称、id -->
+              <div
+                style="
+                  min-width: 0;
+                  width: calc(100% - 15% - 25% - 8px);
+                  display: flex;
+                  flex-direction: column;
+                "
+              >
+                <div
+                  style="
+                    color: #fff;
+                    font-weight: 860;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  "
+                  class="UserNickname"
+                >
+                  {{ listItem.userNickname }}
+                </div>
+                <div style="color: #fff; font-weight: 590" class="UserNickname">
+                  ID:{{ listItem.account }}
                 </div>
               </div>
             </div>
-          </div>
+
+            <!-- 贡献值 -->
+            <div style="flex: 1; min-width: 0; display: flex; align-items: center">
+              <img src="/src/assets/icon/coin.png" alt="" style="width: 30%" />
+              <div style="color: #edb247; font-weight: 700" class="UserNickname">
+                {{ listItem.quantity }}
+              </div>
+            </div>
+          </itemCenter>
           <!-- 触发加载功能 -->
           <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
         </div>
@@ -238,10 +251,7 @@
           <div
             style="
               position: absolute;
-              top: 0;
+              inset: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
               padding: 30% 6% 13%;
               display: grid;
               grid-template-columns: repeat(2, 1fr);
@@ -251,56 +261,21 @@
               v-for="gift in topItem.propsGroup.activityRewardProps"
               style="display: flex; flex-direction: column; align-items: center"
             >
-              <div
+              <itemCenter :imgUrl="images.giftItemBg" style="width: 90%; margin-bottom: 3px">
-                style="
+                <!-- gift图 -->
-                  display: flex;
+                <img
-                  justify-content: center;
+                  :src="gift.cover || ''"
-                  align-items: center;
+                  alt=""
-                  position: relative;
+                  style="width: 50%; display: block"
-                  margin-bottom: 3px;
+                  @error="(e) => handleImageError(e, gift.type)"
-                "
+                />
-              >
+              </itemCenter>
-                <!-- gift背景图 -->
+
-                <img :src="images.giftItemBg" alt="" style="width: 90%; display: block" />
+              <itemCenter :imgUrl="images.btBg" style="width: 75%">
-                <div
+                <div style="font-weight: 700">
-                  style="
-                    position: absolute;
-                    top: 0;
-                    bottom: 0;
-                    left: 0;
-                    right: 0;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <!-- gift图 -->
-                  <img
-                    :src="gift.cover || ''"
-                    alt=""
-                    style="width: 50%; display: block"
-                    @error="(e) => handleImageError(e, gift.type)"
-                  />
-                </div>
-              </div>
-              <div style="position: relative; width: 75%">
-                <img :src="images.btBg" alt="" width="100%" />
-                <div
-                  style="
-                    position: absolute;
-                    top: 0;
-                    bottom: 8%;
-                    left: 0;
-                    right: 0;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    font-weight: 700;
-                  "
-                >
                   {{ showDetail(gift.type, gift.quantity) }}
                 </div>
-              </div>
+              </itemCenter>
             </div>
           </div>
         </div>
@@ -359,57 +334,21 @@
                 :key="goodsIndex"
                 style="display: flex; flex-direction: column; align-items: center"
               >
-                <div
+                <itemCenter :imgUrl="images.giftItemBg">
-                  style="
+                  <!-- gift图 -->
-                    position: relative;
+                  <img
-                    display: flex;
+                    :src="goods.propsGroup.activityRewardProps[0].cover"
-                    justify-content: center;
+                    alt=""
-                    align-items: center;
+                    style="width: 68%; display: block; margin-bottom: 7%"
-                  "
+                  />
-                >
+                </itemCenter>
-                  <img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
-                  <div
-                    style="
-                      position: absolute;
-                      top: 0;
-                      bottom: 0;
-                      left: 0;
-                      right: 0;
-                      display: flex;
-                      justify-content: center;
-                      align-items: center;
-                    "
-                  >
-                    <!-- gift图 -->
-                    <img
-                      :src="goods.propsGroup.activityRewardProps[0].cover"
-                      alt=""
-                      style="width: 68%; display: block; margin-bottom: 7%"
-                    />
-                  </div>
-                </div>
                 <div class="needDebris">
                   Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
                 </div>
-                <div style="position: relative; width: 75%" @click="selectGood(goods)">
+
-                  <img :src="images.btBg" alt="" width="100%" style="display: block" />
+                <itemCenter style="width: 75%" @click="selectGood(goods)" :imgUrl="images.btBg">
-                  <div
+                  <div style="font-weight: 700" class="needDebris">Redeem</div>
-                    style="
+                </itemCenter>
-                      position: absolute;
-                      top: 0;
-                      bottom: 8%;
-                      left: 0;
-                      right: 0;
-                      display: flex;
-                      justify-content: center;
-                      align-items: center;
-                      font-weight: 700;
-                    "
-                    class="needDebris"
-                  >
-                    Redeem
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -436,34 +375,52 @@
       <div
         style="
           position: absolute;
-          top: 0;
+          inset: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
           display: flex;
           align-items: center;
           justify-content: center;
-          padding: 0 8%;
+          padding: 4% 2%;
+          gap: 4px;
         "
       >
-        <div style="width: 70%; display: flex; justify-content: space-around; align-items: center">
+        <!-- 基本信息 -->
+        <div
+          style="
+            width: 79%;
+            min-width: 0;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            gap: 4px;
+          "
+        >
           <!-- 排名 -->
-          <div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
+          <div style="width: 15%; display: flex; justify-content: center; align-items: center">
+            <div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
+          </div>
           <!-- 头像 -->
           <img
+            v-smart-img
             :src="myRanking.userAvatar || ''"
             alt=""
             style="
-              width: 30%;
+              display: block;
+              width: 20%;
               aspect-ratio: 1/1;
               border-radius: 50%;
               object-fit: cover;
-              margin: 0 12px;
             "
             @error="defaultAvatarUrl"
           />
           <!-- 名称 -->
-          <div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
+          <div
+            style="
+              min-width: 0;
+              width: calc(100% - 15% - 20% - 8px);
+              display: flex;
+              flex-direction: column;
+            "
+          >
             <div
               style="
                 color: #fff;
@@ -480,8 +437,13 @@
         </div>
 
         <!-- 贡献值 -->
-        <div style="width: 30%; display: flex; justify-content: center; align-items: center">
+        <div style="flex: 1; min-width: 0; display: flex; align-items: center">
-          <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
+          <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">
             {{ myRanking.quantity || 0 }}
           </div>
@@ -632,62 +594,38 @@
       </div>
 
       <!-- gifts弹窗 -->
-      <div v-if="giftsShow" style="position: relative; margin: 20% 0" @click.stop>
+      <itemCenter
-        <!-- 背景图 -->
+        v-if="giftsShow"
-        <img :src="images.giftsBg" alt="" style="width: 100%; display: block" />
+        style="margin: 20% 0"
-        <!-- 内容 -->
+        @click.stop
-        <div
+        :imgUrl="images.giftsBg"
-          style="
+        :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
-            position: absolute;
+      >
-            top: 0;
+        <!-- 礼物单元 -->
-            bottom: 0;
+        <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
-            left: 0;
+          <!-- 礼物背景 -->
-            right: 0;
+          <itemCenter :imgUrl="images.giftItemBg">
-            padding: 30% 5% 12%;
+            <!-- 礼物 -->
-            display: flex;
+            <img
-            justify-content: space-between;
+              :src="gift.giftPhoto"
-          "
+              alt=""
-        >
+              style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
-          <!-- 礼物单元 -->
+            />
-          <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
+          </itemCenter>
-            <!-- 礼物背景 -->
-            <div style="position: relative">
-              <img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
-              <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=""
-                  style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
-                />
-              </div>
-            </div>
 
-            <!-- 礼物价值 -->
+          <!-- 礼物价值 -->
-            <div style="display: flex; justify-content: center">
+          <div style="display: flex; justify-content: center">
-              <img
+            <img
-                src="/src/assets/icon/coin.png"
+              src="/src/assets/icon/coin.png"
-                alt=""
+              alt=""
-                style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+              style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
-              />
+            />
-              <div style="color: #fff; font-weight: 590; margin-left: 2px">
+            <div style="color: #fff; font-weight: 590; margin-left: 2px">
-                {{ gift.giftCandy }}
+              {{ gift.giftCandy }}
-              </div>
             </div>
           </div>
         </div>
-      </div>
+      </itemCenter>
 
       <!-- 交易商品弹窗 -->
       <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
@@ -745,26 +683,13 @@
 </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 itemCenter from '@/components/itemCenter.vue'
+import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
-import TopUser from '@/components/WeeklyStar/topUser.vue'
+import { connectToApp } from '@/utils/appConnector.js'
-import maskLayer from '@/components/MaskLayer.vue'
+import { useThrottle } from '@/utils/useDebounce'
-import { useDebounce, useThrottle } from '@/utils/useDebounce'
+import { showWarning } from '@/utils/toast.js'
+
 import { getMemberProfile } from '@/api/wallet'
-import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 import {
   getWeekStarRanking,
   getWeekRewards,
@@ -775,6 +700,11 @@ import {
   getExchangeGoods,
   exchangeGood,
 } from '@/api/weeklyStar.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+import TopUser from './components/topUser.vue'
+
 //vite动态批量导入图片
 const imageModules = import.meta.glob('@/assets/images/WeeklyStar/*.{png,jpg,svg}', { eager: true })
 // 生成文件名映射对象（自动移除路径和扩展名）
@@ -785,129 +715,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 (onConnectionFailed) {
-    //   onConnectionFailed(error)
-    // }
-
-    // 连接失败的特殊处理
-    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({})
@@ -1231,14 +1045,12 @@ const observer = new IntersectionObserver((entries) => {
 
 // 组件挂载时检测环境
 onMounted(() => {
-  connectToApp()
+  connectToAppHandler()
   isInAppEnvironment.value = isInApp()
 
   getCountdown()
   timer = setInterval(getCountdown, 1000) //每秒更新
 
-  updatePageData() // 刷新页面数据
-
   // 监听加载模块
   if (RankingLoadmore.value) {
     observer.observe(RankingLoadmore.value)