fix(version): 优化服务重启后页面刷新时机
- 将重启后等待时间从 3 秒增加到 8 秒 - 添加倒计时显示,提升用户体验 - 倒计时结束后先检测服务健康状态再刷新页面 - 避免刷新过早导致 502 错误
This commit is contained in:
@@ -109,7 +109,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Restart button -->
|
<!-- Restart button with countdown -->
|
||||||
<button
|
<button
|
||||||
@click="handleRestart"
|
@click="handleRestart"
|
||||||
:disabled="restarting"
|
:disabled="restarting"
|
||||||
@@ -122,7 +122,11 @@
|
|||||||
<svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
</svg>
|
</svg>
|
||||||
{{ restarting ? t('version.restarting') : t('version.restartNow') }}
|
<template v-if="restarting">
|
||||||
|
<span>{{ t('version.restarting') }}</span>
|
||||||
|
<span v-if="restartCountdown > 0" class="tabular-nums">({{ restartCountdown }}s)</span>
|
||||||
|
</template>
|
||||||
|
<span v-else>{{ t('version.restartNow') }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -266,6 +270,7 @@ const restarting = ref(false);
|
|||||||
const needRestart = ref(false);
|
const needRestart = ref(false);
|
||||||
const updateError = ref('');
|
const updateError = ref('');
|
||||||
const updateSuccess = ref(false);
|
const updateSuccess = ref(false);
|
||||||
|
const restartCountdown = ref(0);
|
||||||
|
|
||||||
// Only show update check for release builds (binary/docker deployment)
|
// Only show update check for release builds (binary/docker deployment)
|
||||||
const isReleaseBuild = computed(() => buildType.value === 'release');
|
const isReleaseBuild = computed(() => buildType.value === 'release');
|
||||||
@@ -314,6 +319,7 @@ async function handleRestart() {
|
|||||||
if (restarting.value) return;
|
if (restarting.value) return;
|
||||||
|
|
||||||
restarting.value = true;
|
restarting.value = true;
|
||||||
|
restartCountdown.value = 8;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await restartService();
|
await restartService();
|
||||||
@@ -323,10 +329,43 @@ async function handleRestart() {
|
|||||||
console.log('Service restarting...');
|
console.log('Service restarting...');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show restarting state for a while, then reload
|
// Start countdown
|
||||||
setTimeout(() => {
|
const countdownInterval = setInterval(() => {
|
||||||
window.location.reload();
|
restartCountdown.value--;
|
||||||
}, 3000);
|
if (restartCountdown.value <= 0) {
|
||||||
|
clearInterval(countdownInterval);
|
||||||
|
// Try to check if service is back before reload
|
||||||
|
checkServiceAndReload();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function checkServiceAndReload() {
|
||||||
|
const maxRetries = 5;
|
||||||
|
const retryDelay = 1000;
|
||||||
|
|
||||||
|
for (let i = 0; i < maxRetries; i++) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/health', {
|
||||||
|
method: 'GET',
|
||||||
|
cache: 'no-cache'
|
||||||
|
});
|
||||||
|
if (response.ok) {
|
||||||
|
// Service is back, reload page
|
||||||
|
window.location.reload();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Service not ready yet
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i < maxRetries - 1) {
|
||||||
|
await new Promise(resolve => setTimeout(resolve, retryDelay));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// After retries, reload anyway
|
||||||
|
window.location.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleClickOutside(event: MouseEvent) {
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
|||||||
Reference in New Issue
Block a user