新增二维码延迟倒计时功能，优化状态管理逻辑，添加旋转动画样式，提升用户体验

src/components/play/ScanPage.vue

@@ -266,6 +266,11 @@ export default {
   margin-bottom: 16px;
 }
 
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .notice-text {
   text-align: center;
   padding: 20px;

src/composables/useQrCode.js

@@ -106,7 +106,7 @@ export function useQrCode() {
     }
   }
 
-  const processSelectRegionResponse = async (state, countdown, data, startCountdown, startLoginPolling, updateStateFromResponse) => {
+  const processSelectRegionResponse = async (state, countdown, data, startCountdown, startLoginPolling, updateStateFromResponse, startQrDelayCountdown, clearQrDelayCountdown) => {
     if (data.qrDelaySeconds && data.qrDelaySeconds > 0 && data.mecmachineId) {
       console.log('进入延迟分支')
       await updateStateFromResponse(data, true)
@@ -116,8 +116,17 @@ export function useQrCode() {
       console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr })
       ElMessage.info(`正在准备二维码，请等待 ${data.qrDelaySeconds} 秒...`)
       
+      // 启动等待秒数的本地倒计时
+      if (typeof startQrDelayCountdown === 'function') {
+        startQrDelayCountdown(state, data.qrDelaySeconds)
+      }
+      
       setTimeout(async () => {
         state.isWaitingQr = false
+        // 清理等待倒计时定时器
+        if (typeof clearQrDelayCountdown === 'function') {
+          clearQrDelayCountdown()
+        }
         
         await fetchQrCodeAfterDelay(state, countdown, data.mecmachineId, data.qrCreatedAt, data.qrExpireAt)
         
@@ -131,6 +140,10 @@ export function useQrCode() {
       await updateStateFromResponse(data)
       state.isWaitingQr = false
       console.log('设置状态:', { status: state.status, isWaitingQr: state.isWaitingQr, qrInfo: !!state.qrInfo })
+      // 进入立即分支时，确保清理等待倒计时（如果之前存在）
+      if (typeof clearQrDelayCountdown === 'function') {
+        clearQrDelayCountdown()
+      }
       
       if (state.qrInfo && state.qrInfo.url) {
         const isUrlValid = await validateQrCodeUrl(state.qrInfo.url)

src/composables/useTimers.js

@@ -9,7 +9,8 @@ export function useTimers() {
     loginPoll: null,
     countdown: null,
     refreshCooldown: null,
-    progressPoll: null
+    progressPoll: null,
+    qrDelay: null
   })
 
   const clearTimer = (name) => {
@@ -98,6 +99,24 @@ export function useTimers() {
     }, 1000)
   }
 
+  const startQrDelayCountdown = (state, seconds = null) => {
+    clearTimer('qrDelay')
+    if (seconds !== null) {
+      state.qrDelaySeconds = seconds
+    }
+    timers.qrDelay = setInterval(() => {
+      if (state.qrDelaySeconds > 0) {
+        state.qrDelaySeconds--
+      } else {
+        clearTimer('qrDelay')
+      }
+    }, 1000)
+  }
+
+  const clearQrDelayCountdown = () => {
+    clearTimer('qrDelay')
+  }
+
   return {
     countdown,
     refreshCooldown,
@@ -107,6 +126,8 @@ export function useTimers() {
     startCountdown,
     startLoginPolling,
     startProgressPolling,
-    startRefreshCooldown
+    startRefreshCooldown,
+    startQrDelayCountdown,
+    clearQrDelayCountdown
   }
 }

src/views/Play.vue

@@ -263,7 +263,9 @@ export default {
       startCountdown,
       startLoginPolling,
       startRefreshCooldown,
-      startProgressPolling
+      startProgressPolling,
+      startQrDelayCountdown,
+      clearQrDelayCountdown
     } = useTimers()
     
     const {
@@ -311,7 +313,9 @@ export default {
               }
             })
           },
-          updateStateFromResponse
+          updateStateFromResponse,
+          startQrDelayCountdown,
+          clearQrDelayCountdown
         )
       } catch (error) {
         console.error('处理选择区域失败:', error)