fix: 优化搜索进度条,避免卡”正在搜索,请稍候...“

1、通过进度有无变化来判定超时,避免误判
2、避免搜索期间误判完成,导致SSE被提前终止
This commit is contained in:
景大侠
2025-06-05 20:29:51 +08:00
parent e853851933
commit ec1926ba60

View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { debounce } from 'lodash-es'
import NoDataFound from '@/components/NoDataFound.vue'
import api from '@/api'
import type { Context } from '@/api/types'
@@ -51,6 +52,9 @@ const progressText = ref('')
// 加载进度
const progressValue = ref(0)
// 进度是否有效
const progressEnabled = ref(false)
// 加载进度SSE
const progressEventSource = ref<EventSource>()
@@ -60,23 +64,28 @@ const errorTitle = ref(t('resource.noData'))
// 错误描述
const errorDescription = ref(t('resource.noResourceFound'))
// 添加安全超时,确保进度条不会永远卡住
const watchProgressValue = watch(progressValue,
debounce(async () => {
if (progressEventSource.value && progressValue.value < 100) {
console.warn("卡进度超时 关闭进度条")
stopLoadingProgress()
}
}, 60_000))
// 使用SSE监听加载进度
function startLoadingProgress() {
watchProgressValue.resume()
progressText.value = t('resource.searching')
progressValue.value = 10 // 初始进度设为10%,确保进度条显示
progressValue.value = 0
progressEnabled.value = true
progressEventSource.value = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/progress/search`)
progressEventSource.value.onmessage = event => {
const progress = JSON.parse(event.data)
if (progress) {
progressText.value = progress.text
progressValue.value = progress.value
// 搜索完成条件调整:只有明确完成时才关闭
if (progress.text.includes('完成') && progress.value >= 99) {
setTimeout(() => {
stopLoadingProgress()
}, 1000) // 延迟1秒关闭确保用户能看到100%
}
progressEnabled.value = progress.enable
}
}
@@ -86,26 +95,22 @@ function startLoadingProgress() {
stopLoadingProgress()
}, 1000)
}
// 添加安全超时,确保不会永远卡住
setTimeout(() => {
if (progressEventSource.value && progressValue.value < 100) {
stopLoadingProgress()
}
}, 60000) // 60秒超时
}
// 停止监听加载进度
function stopLoadingProgress() {
watchProgressValue.pause()
if (progressEventSource.value) {
progressEventSource.value.close()
progressEventSource.value = undefined
// 确保进度显示100%,然后再渐进清零
progressValue.value = 100
setTimeout(() => {
progressValue.value = 0
progressEnabled.value = false
}, 1500) // 延长到1.5秒,让用户有足够时间看到完成状态
}
// 确保进度显示100%,然后再渐进清零
progressValue.value = 100
setTimeout(() => {
progressValue.value = 0
}, 1500) // 延长到1.5秒,让用户有足够时间看到完成状态
}
// 设置视图类型
@@ -186,7 +191,7 @@ onUnmounted(() => {
<div>
<!-- 加载进度条 -->
<VFadeTransition>
<div v-if="progressValue > 0" class="search-progress-container">
<div v-if="progressValue > 0 || progressEnabled" class="search-progress-container">
<VCard elevation="3" class="search-progress-card">
<div class="progress-header">
<VIcon icon="mdi-movie-search" color="primary" size="small" class="me-2" />