新增二维码加载状态管理,优化二维码获取逻辑,支持提前获取二维码并清理定时器,提升用户体验

This commit is contained in:
yahaozhang
2025-09-16 01:20:46 +08:00
parent f250fd07c4
commit de107c0f06
4 changed files with 111 additions and 6 deletions

View File

@@ -25,6 +25,7 @@
:submitting="state.submitting"
:mecmachine-id="state.mecmachineId || state.machineId"
@qr-image-error="handleQrImageError"
@qr-image-load="handleQrReadyEarly"
@retry-qr-code="retryGetQrCode"
@page-refresh="handlePageRefresh"
/>
@@ -134,7 +135,9 @@ export default {
const {
processSelectRegionResponse,
handleQrImageError,
retryGetQrCode
retryGetQrCode,
fetchQrCodeAfterDelay,
clearQrDelayTimeout
} = useQrCode()
onMounted(() => {
@@ -193,6 +196,41 @@ export default {
}
}
const handleQrReadyEarly = async () => {
try {
if (!state.isWaitingQr) return
if (!state.mecmachineId) return
if (state.qrInfo && state.qrInfo.url) return
// 结束等待并清理相关定时器
state.isWaitingQr = false
clearQrDelayCountdown()
if (typeof clearQrDelayTimeout === 'function') {
clearQrDelayTimeout(state)
}
// 立即拉取二维码并开始倒计时与登录轮询
await fetchQrCodeAfterDelay(
state,
countdown,
state.mecmachineId,
state.qrCreatedAt,
state.qrExpireAt
)
if (state.status === 'USING') {
startCountdown()
startLoginPolling(state.code, handleLoggedInStatus, handleCompletedStatus)
startProgressPolling(state.code, (progressData) => {
state.currentPoints = progressData.currentPoints || state.currentPoints
state.totalPoints = progressData.totalPoints || state.totalPoints
if (progressData.completedPoints !== undefined) {
state.completedPoints = progressData.completedPoints
}
})
}
} catch (error) {
console.error('提前获取二维码失败:', error)
}
}
return {
state,
countdown,
@@ -202,6 +240,7 @@ export default {
handlePageRefresh,
handleQrImageError,
retryGetQrCode,
handleQrReadyEarly,
handleRetry,
getRegionName,
getDisplayStatus,