mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-14 05:25:19 +08:00
feat(ui): 优化熔断状态显示和健康度格式
- 健康度格式统一为 0-1 小数格式(前后端同步) - 添加熔断倒计时显示,支持实时更新 - 新增 useCountdownTimer composable 用于倒计时逻辑 - 添加 Key 健康恢复功能(按 API 格式恢复) - 优化 UI 布局:简化链路预览标题、调整 Key 信息为两行显示 - 修复错误处理顺序(先刷新数据再显示成功提示) - 减少模板中函数重复调用
This commit is contained in:
69
frontend/src/composables/useCountdownTimer.ts
Normal file
69
frontend/src/composables/useCountdownTimer.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
/**
|
||||
* 倒计时定时器 composable
|
||||
* 用于触发组件的定期响应式更新(如熔断探测倒计时)
|
||||
*/
|
||||
export function useCountdownTimer() {
|
||||
const tick = ref(0)
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function start() {
|
||||
if (timer) return
|
||||
timer = setInterval(() => {
|
||||
tick.value++
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function stop() {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(stop)
|
||||
|
||||
return { tick, start, stop }
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化倒计时时间
|
||||
* @param diffMs 剩余毫秒数
|
||||
* @returns 格式化的倒计时字符串(如 "1:30" 或 "1:02:30")
|
||||
*/
|
||||
export function formatCountdown(diffMs: number): string {
|
||||
const totalSeconds = Math.ceil(diffMs / 1000)
|
||||
if (totalSeconds <= 0) return '探测中'
|
||||
|
||||
const hours = Math.floor(totalSeconds / 3600)
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
||||
const seconds = totalSeconds % 60
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||
}
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算探测倒计时
|
||||
* @param nextProbeAt ISO 格式的探测时间字符串
|
||||
* @param _tick 响应式触发器(传入 tick.value 以触发响应式更新)
|
||||
* @returns 倒计时字符串,或 null(如果无需显示)
|
||||
*/
|
||||
export function getProbeCountdown(nextProbeAt: string | null | undefined, _tick: number): string | null {
|
||||
// _tick 参数用于触发响应式更新,实际使用时传入 tick.value
|
||||
void _tick
|
||||
|
||||
if (!nextProbeAt) return null
|
||||
|
||||
const nextProbe = new Date(nextProbeAt)
|
||||
const now = new Date()
|
||||
const diffMs = nextProbe.getTime() - now.getTime()
|
||||
|
||||
if (diffMs > 0) {
|
||||
return formatCountdown(diffMs)
|
||||
}
|
||||
return '探测中'
|
||||
}
|
||||
Reference in New Issue
Block a user