feat(ops): 添加自动刷新配置功能
功能特性: - 支持配置启用/禁用自动刷新 - 可配置刷新间隔(15秒/30秒/60秒) - 实时倒计时显示,用户可见下次刷新时间 - 手动刷新自动重置倒计时 - 页面卸载时自动清理定时器 用户体验: - 默认禁用,用户可根据需求开启 - 与现有 OpsConcurrencyCard 5秒刷新保持一致 - 倒计时带旋转动画,视觉反馈清晰 - 配置修改后立即生效,无需刷新页面 技术实现: - ops.ts: 添加 auto_refresh_enabled 和 auto_refresh_interval_seconds 配置 - OpsSettingsDialog.vue: 添加自动刷新配置界面 - OpsDashboard.vue: 实现主刷新逻辑和双定时器设计 - OpsDashboardHeader.vue: 倒计时显示组件 配置说明: - auto_refresh_enabled: 是否启用(默认 false) - auto_refresh_interval_seconds: 刷新间隔(默认 30 秒,范围 15-300 秒)
This commit is contained in:
@@ -23,6 +23,8 @@ interface Props {
|
||||
loading: boolean
|
||||
lastUpdated: Date | null
|
||||
thresholds?: OpsMetricThresholds | null // 阈值配置
|
||||
autoRefreshEnabled?: boolean
|
||||
autoRefreshCountdown?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
@@ -839,6 +841,17 @@ function handleToolbarRefresh() {
|
||||
<span>·</span>
|
||||
<span>{{ t('common.refresh') }}: {{ updatedAtLabel }}</span>
|
||||
|
||||
<template v-if="props.autoRefreshEnabled && props.autoRefreshCountdown !== undefined">
|
||||
<span>·</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="h-3 w-3 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>自动刷新: {{ props.autoRefreshCountdown }}s</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-if="systemMetrics">
|
||||
<span>·</span>
|
||||
<span>
|
||||
|
||||
Reference in New Issue
Block a user