From 37e56978b1d2bde0415888a6f9ae7e1fecf8dec2 Mon Sep 17 00:00:00 2001
From: zyh <zhangyahao530@163.com>
Date: Thu, 28 Aug 2025 22:20:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=8C=E7=BB=B4=E7=A0=81?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?URL=E9=AA=8C=E8=AF=81=E5=92=8C=E9=87=8D=E8=AF=95=E6=9C=BA?=
 =?UTF-8?q?=E5=88=B6=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=EF=BC=9B=E6=9B=B4=E6=96=B0Play.vue=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E9=87=8D=E8=AF=95=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=92=8C=E5=8C=BA=E5=9F=9F=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/http.js |  21 ++++-
 src/views/Play.vue  | 198 ++++++++++++++++++++++++++++++++++----------
 2 files changed, 172 insertions(+), 47 deletions(-)

diff --git a/src/plugins/http.js b/src/plugins/http.js
index 523fc11..c90db20 100644
--- a/src/plugins/http.js
+++ b/src/plugins/http.js
@@ -38,9 +38,13 @@ http.interceptors.request.use(
       '/api/link/status',
       '/api/link/select-region', 
       '/api/link/poll-login',
-      '/api/link/progress'
+      '/api/link/progress',
+      '/api/link/refresh',
+      '/api/link/qr.png'
     ]
-    const isPublicAPI = publicAPIs.some(api => config.url?.includes(api))
+    // 游戏界面接口使用动态路径，需要特殊处理
+    const isGameInterfaceAPI = /\/api\/link\/[^\/]+\/game-interface/.test(config.url || '')
+    const isPublicAPI = publicAPIs.some(api => config.url?.includes(api)) || isGameInterfaceAPI
     
     if (!isPublicAPI) {
       const token = getAccessToken()
@@ -81,11 +85,20 @@ http.interceptors.response.use(
       '/api/link/status',
       '/api/link/select-region', 
       '/api/link/poll-login',
-      '/api/link/progress'
+      '/api/link/progress',
+      '/api/link/refresh',
+      '/api/link/qr.png'
     ]
-    const isPublicAPI = publicAPIs.some(api => url?.includes(api))
+    // 游戏界面接口使用动态路径，需要特殊处理
+    const isGameInterfaceAPI = /\/api\/link\/[^\/]+\/game-interface/.test(url || '')
+    const isPublicAPI = publicAPIs.some(api => url?.includes(api)) || isGameInterfaceAPI
 
     if (status === 401 && !isAuthPath && !isPublicAPI) {
+      // 阻止浏览器显示基本认证弹窗
+      if (error.response && error.response.headers) {
+        delete error.response.headers['www-authenticate']
+      }
+      
       if (!isRefreshing) {
         isRefreshing = true
         try {
diff --git a/src/views/Play.vue b/src/views/Play.vue
index 6157b1d..582415f 100644
--- a/src/views/Play.vue
+++ b/src/views/Play.vue
@@ -51,6 +51,7 @@
         <div class="loading-spinner"></div>
         <p class="waiting-text">正在准备二维码...</p>
         <p class="waiting-desc">预计等待 {{ state.qrDelaySeconds }} 秒</p>
+        <p v-if="state.qrRetryCount > 0" class="retry-info">重试中... ({{ state.qrRetryCount }}/{{ state.maxQrRetries }})</p>
       </div>
 
       <!-- 二维码区域 -->
@@ -172,7 +173,7 @@
 
 <script>
 import { reactive, ref, onMounted, onUnmounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { 
   getLinkStatus, 
@@ -187,6 +188,7 @@ export default {
   name: 'Play',
   setup() {
     const route = useRoute()
+    const router = useRouter()
     
     // 状态管理
     const state = reactive({
@@ -202,7 +204,10 @@ export default {
       totalPoints: 1000,
       error: null,
       qrDelaySeconds: 0,
-      isWaitingQr: false
+      isWaitingQr: false,
+      qrRetryCount: 0,
+      maxQrRetries: 3,
+      qrRetryDelay: 2000
     })
 
     // 计时器
@@ -431,12 +436,38 @@ export default {
       }
     }
 
-    // 延迟获取二维码
-    const fetchQrCodeAfterDelay = async (qrCodeUrl, qrCreatedAt, qrExpireAt) => {
+    // 验证二维码URL是否可访问
+    const validateQrCodeUrl = async (url) => {
       try {
-        // 这里可以添加额外的验证或处理逻辑
-        // 比如检查 URL 是否可访问
+        const controller = new AbortController()
+        const timeoutId = setTimeout(() => controller.abort(), 5000)
         
+        const response = await fetch(url, { 
+          method: 'HEAD',
+          signal: controller.signal
+        })
+        
+        clearTimeout(timeoutId)
+        return response.ok
+      } catch (error) {
+        console.warn('二维码URL验证失败:', error)
+        return false
+      }
+    }
+
+    // 延迟获取二维码（带重试机制）
+    const fetchQrCodeAfterDelay = async (qrCodeUrl, qrCreatedAt, qrExpireAt, retryCount = 0) => {
+      try {
+        console.log(`尝试获取二维码 (第${retryCount + 1}次):`, qrCodeUrl)
+        
+        // 验证二维码URL是否可访问
+        const isUrlValid = await validateQrCodeUrl(qrCodeUrl)
+        
+        if (!isUrlValid) {
+          throw new Error('二维码URL无法访问')
+        }
+        
+        // URL验证通过，设置二维码信息
         state.qrInfo = {
           url: qrCodeUrl,
           createdAt: qrCreatedAt,
@@ -447,10 +478,104 @@ export default {
         const expireTime = new Date(qrExpireAt).getTime()
         countdown.value = Math.max(0, Math.floor((expireTime - now) / 1000))
         
+        // 重置重试计数
+        state.qrRetryCount = 0
+        
         ElMessage.success('二维码已准备就绪，请扫码登录')
+        console.log('二维码获取成功')
+        
       } catch (error) {
-        console.error('获取二维码失败:', error)
-        ElMessage.error('二维码获取失败，请重试')
+        console.error(`二维码获取失败 (第${retryCount + 1}次):`, error)
+        
+        // 如果还有重试次数，则进行重试
+        if (retryCount < state.maxQrRetries) {
+          state.qrRetryCount = retryCount + 1
+          const delay = state.qrRetryDelay * Math.pow(2, retryCount) // 指数退避
+          
+          console.log(`${delay}ms后进行第${retryCount + 2}次重试`)
+          ElMessage.warning(`二维码获取失败，${delay/1000}秒后重试...`)
+          
+          setTimeout(() => {
+            fetchQrCodeAfterDelay(qrCodeUrl, qrCreatedAt, qrExpireAt, retryCount + 1)
+          }, delay)
+        } else {
+          // 重试次数用完，重新请求新的二维码
+          console.error('二维码获取重试次数用完，重新请求区域选择')
+          ElMessage.error('二维码获取失败，正在重新请求...')
+          state.qrRetryCount = 0
+          
+          // 重新调用区域选择API
+          if (state.region) {
+            retrySelectRegion(state.region)
+          }
+        }
+      }
+    }
+
+    // 重试选择区域（内部使用，不显示loading状态）
+    const retrySelectRegion = async (region) => {
+      try {
+        console.log('重试选择区域:', region)
+        const response = await selectRegionAPI({ code: state.code, region })
+        const data = response.data
+        
+        console.log('retrySelectRegion 响应数据:', data)
+        
+        // 处理响应数据，使用重试逻辑
+        await processSelectRegionResponse(data)
+        
+      } catch (error) {
+        console.error('重试选择区域失败:', error)
+        ElMessage.error('重新请求二维码失败，请手动刷新页面')
+      }
+    }
+
+    // 处理选择区域响应的通用逻辑
+    const processSelectRegionResponse = async (data) => {
+      // 如果返回了延迟时间和二维码URL，需要延迟处理
+      if (data.qrDelaySeconds && data.qrDelaySeconds > 0 && data.qrCodeUrl) {
+        console.log('进入延迟分支')
+        // 跳过二维码处理，只更新基本状态
+        await updateStateFromResponse(data, true)
+        
+        state.qrDelaySeconds = data.qrDelaySeconds
+        state.isWaitingQr = true
+        console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr })
+        ElMessage.info(`正在准备二维码，请等待 ${data.qrDelaySeconds} 秒...`)
+        
+        setTimeout(async () => {
+          state.isWaitingQr = false
+          
+          // 延迟后获取二维码（带重试机制）
+          await fetchQrCodeAfterDelay(data.qrCodeUrl, data.qrCreatedAt, data.qrExpireAt)
+          
+          if (state.status === 'USING') {
+            startCountdown()
+            startLoginPolling()
+          }
+        }, data.qrDelaySeconds * 1000)
+      } else {
+        console.log('进入立即处理分支')
+        // 没有延迟时间，立即处理二维码
+        await updateStateFromResponse(data)
+        state.isWaitingQr = false
+        console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr, qrInfo: !!state.qrInfo })
+        
+        // 对于立即处理的二维码，也要进行验证
+        if (state.qrInfo && state.qrInfo.url) {
+          const isUrlValid = await validateQrCodeUrl(state.qrInfo.url)
+          if (!isUrlValid) {
+            console.warn('立即获取的二维码URL无法访问，尝试重试')
+            // 清除当前二维码信息，触发重试
+            state.qrInfo = null
+            await fetchQrCodeAfterDelay(data.qrCodeUrl, data.qrCreatedAt, data.qrExpireAt)
+          }
+        }
+        
+        if (state.status === 'USING') {
+          startCountdown()
+          startLoginPolling()
+        }
       }
     }
 
@@ -459,6 +584,7 @@ export default {
       if (state.submitting) return
       
       state.submitting = true
+      state.qrRetryCount = 0 // 重置重试计数
       
       try {
         const response = await selectRegionAPI({ code: state.code, region })
@@ -466,40 +592,8 @@ export default {
         
         console.log('selectRegion 响应数据:', data)
         
-        // 如果返回了延迟时间和二维码URL，需要延迟处理
-        if (data.qrDelaySeconds && data.qrDelaySeconds > 0 && data.qrCodeUrl) {
-          console.log('进入延迟分支')
-          // 跳过二维码处理，只更新基本状态
-          await updateStateFromResponse(data, true)
-          
-          state.qrDelaySeconds = data.qrDelaySeconds
-          state.isWaitingQr = true
-          console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr })
-          ElMessage.info(`正在准备二维码，请等待 ${data.qrDelaySeconds} 秒...`)
-          
-          setTimeout(async () => {
-            state.isWaitingQr = false
-            
-            // 延迟后获取二维码
-            await fetchQrCodeAfterDelay(data.qrCodeUrl, data.qrCreatedAt, data.qrExpireAt)
-            
-            if (state.status === 'USING') {
-              startCountdown()
-              startLoginPolling()
-            }
-          }, data.qrDelaySeconds * 1000)
-        } else {
-          console.log('进入立即处理分支')
-          // 没有延迟时间，立即处理二维码
-          await updateStateFromResponse(data)
-          state.isWaitingQr = false
-          console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr, qrInfo: !!state.qrInfo })
-          
-          if (state.status === 'USING') {
-            startCountdown()
-            startLoginPolling()
-          }
-        }
+        // 使用通用处理逻辑
+        await processSelectRegionResponse(data)
         
       } catch (error) {
         handleError(error)
@@ -628,8 +722,18 @@ export default {
       // 获取HTTP状态码
       const status = error?.response?.status
       
+      // 如果是认证相关错误，跳转到登录页面
+      if (status === 401) {
+        console.log('检测到401错误，跳转到登录页面')
+        router.replace({
+          name: 'Login',
+          query: { redirect: route.fullPath }
+        })
+        return
+      }
+      
       // 根据HTTP状态码设置错误状态
-      if (status === 400 || status === 401 || status === 403) {
+      if (status === 400 || status === 403) {
         state.error = 'INVALID_CODE'
       } else if (status === 410) {
         state.error = 'EXPIRED'
@@ -956,6 +1060,14 @@ export default {
   opacity: 0.8;
 }
 
+.retry-info {
+  font-size: 14px;
+  margin: 8px 0 0 0;
+  opacity: 0.9;
+  color: #ffd700;
+  font-weight: 500;
+}
+
 .qr-wrapper {
   background: white;
   padding: 20px;