feat(革命日): 优化代码和样式

src/views/Activities/RevolutionUnityDay/index.vue

@@ -136,11 +136,20 @@
           v-show="rankingShow"
           style="position: relative; width: 90%; left: 50%; transform: translateX(-50%)"
         >
-          <div>
+          <div
+            style="
+              position: absolute;
+              inset: 2;
+              background: radial-gradient(50% 50% at 50% 50%, #10614b 0%, #053126 100%);
+              z-index: 1;
+            "
+          ></div>
+          <div style="position: relative; z-index: 1">
             <!-- 前三名 -->
             <div style="position: relative">
+              <!-- 头像框 -->
               <img :src="images.RankingMain" alt="" width="100%" style="display: block" />
-              <!-- 前3名 -->
+              <!-- 用户信息 -->
               <div style="position: absolute; inset: 0; padding: 18% 5% 2%">
                 <div style="margin-top: 3%">
                   <!-- 第一 -->
@@ -349,7 +358,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 0 5%;
+            padding: 2% 5% 0;
           "
         >
           <div
@@ -362,7 +371,8 @@
               :src="myRanking.userAvatar || ''"
               alt=""
               style="
-                width: 30%;
+                display: block;
+                width: 25%;
                 aspect-ratio: 1/1;
                 border-radius: 50%;
                 object-fit: cover;
@@ -371,7 +381,7 @@
               @error="defaultAvatarUrl"
             />
             <!-- 名称 -->
-            <div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
+            <div style="display: flex; flex-direction: column; width: calc(75% - 24px - 20%)">
               <div
                 style="
                   color: #fff;
@@ -502,19 +512,7 @@
 </template>
 
 <script setup>
-import {
+import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
-  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/WeeklyStar/itemCenter.vue'
 import TopUser from '../RevolutionUnityDay/topUser.vue'
@@ -528,7 +526,7 @@ import {
   getMyWeekStarRanking,
   getHistoryTopOne,
 } from '@/api/weeklyStar.js'
-import { getWeekTopList, getThisWeekRewardsAndGifts } from '@/api/topList.js'
+import { connectToApp } from '@/utils/appConnector.js'
 
 // vite动态批量导入图片
 const imageModules = import.meta.glob('@/assets/images/Activities/revolution/*.{png,jpg,svg}', {
@@ -542,126 +540,6 @@ const images = Object.fromEntries(
   })
 )
 
-const appConnected = ref(false)
-const headerInfo = ref({})
-
-/**
- * 连接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 }
-  }
-}
-
 const userInfo = ref({})
 
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
@@ -806,7 +684,7 @@ const resetPage = () => {
 
   historyIndex.value = 0 //历史榜首重置展示当前
 
-  updatePageData() // 刷新页面数据
+  initData() // 刷新页面数据
 }
 
 // 格式化奖励的展示信息
@@ -869,28 +747,6 @@ const getMyThisWeekRanking = async () => {
   }
 }
 
-// 获取本周奖励
-// const getThisWeekRewards = async () => {
-//   const resThisWeekRewardsAndGifts = await getThisWeekRewardsAndGifts()
-//   console.log('resThisWeekRewardsAndGifts:', resThisWeekRewardsAndGifts)
-//   if (resThisWeekRewardsAndGifts.status && resThisWeekRewardsAndGifts.body) {
-//     rewardsList.value = [
-//       {
-//         rankRange: '1',
-//         rewards: resThisWeekRewardsAndGifts.body.butOneRewards || [],
-//       },
-//       {
-//         rankRange: '2',
-//         rewards: resThisWeekRewardsAndGifts.body.butTwoRewards || [],
-//       },
-//       {
-//         rankRange: '3',
-//         rewards: resThisWeekRewardsAndGifts.body.butThreeRewards || [],
-//       },
-//     ]
-//   }
-// }
-
 // 获取本周礼物
 const getThisWeekGifts = async () => {
   const resThisWeekGifts = await getWeekGifts('THIS_WEEK')
@@ -910,7 +766,8 @@ const getThisWeekRewards = async () => {
 }
 
 // 刷新页面数据
-const updatePageData = () => {
+const initData = () => {
+  getUserInfo()
   getThisWeekRanking() // 获取本周排名
   getHistoryRankingTop1() // 获取历史top1
   getThisWeekRewards() // 获取本周奖励
@@ -932,16 +789,22 @@ const observer = new IntersectionObserver((entries) => {
   })
 })
 
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    initData() //初始化数据
+  })
+}
+
 // 组件挂载时检测环境
 onMounted(() => {
-  connectToApp()
+  connectToAppHandler()
   isInAppEnvironment.value = isInApp()
 
   getCountdown()
   timer = setInterval(getCountdown, 1000) //每秒更新
 
-  updatePageData() // 刷新页面数据
-
   // 监听加载模块
   if (RankingLoadmore.value) {
     observer.observe(RankingLoadmore.value)

src/views/Activities/RevolutionUnityDay/topUser.vue

@@ -60,6 +60,7 @@
         </div>
         <div
           style="
+            width: 60%;
             border-radius: 40px;
             border: 0.64px solid #ffdf36;
             background: linear-gradient(
@@ -76,7 +77,6 @@
             justify-content: center;
             align-items: center;
           "
-          :style="{ width: isTopOne ? '60%' : '50%' }"
         >
           <img
             src="/src/assets/icon/coin.png"
@@ -147,30 +147,34 @@ const defaultAvatarUrl = (e) => {
 }
 
 .top1Text {
-  font-size: 12px;
+  font-size: 0.8em;
 }
 
 .text {
-  font-size: 10px;
+  font-size: 0.6em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
 }
 
 @media screen and (min-width: 768px) {
-  .top1Text {
+  * {
     font-size: 24px;
   }
-
-  .text {
-    font-size: 20px;
-  }
 }
 
 @media screen and (min-width: 1024px) {
-  .top1Text {
+  * {
     font-size: 32px;
   }
-
-  .text {
-    font-size: 28px;
-  }
 }
 </style>