🐛 修复监控页面刷新时的"没有数据"闪烁

- 健康检测:添加loading状态显示,使用v-else-if链
- 系统日志:修复v-if逻辑,loading优先于空状态显示
- 确保在数据加载完成前显示"加载中"而不是"暂无数据"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-30 11:24:07 +08:00
parent 3b8714c93c
commit 62044ca98d

View File

@@ -2355,6 +2355,12 @@
</div> </div>
</div> </div>
<!-- 加载中 -->
<div v-else-if="healthCheck.loading" style="text-align: center; padding: 40px; color: var(--text-muted);">
<i class="fas fa-spinner fa-spin" style="font-size: 48px; margin-bottom: 15px;"></i>
<p>正在检测系统健康状态...</p>
</div>
<!-- 未检测提示 --> <!-- 未检测提示 -->
<div v-else style="text-align: center; padding: 40px; color: var(--text-muted);"> <div v-else style="text-align: center; padding: 40px; color: var(--text-muted);">
<i class="fas fa-stethoscope" style="font-size: 48px; margin-bottom: 15px;"></i> <i class="fas fa-stethoscope" style="font-size: 48px; margin-bottom: 15px;"></i>
@@ -2448,18 +2454,18 @@
</div> </div>
</div> </div>
<!-- 空状态 -->
<div v-else-if="!systemLogs.loading" style="text-align: center; padding: 40px; color: var(--text-muted);">
<i class="fas fa-clipboard" style="font-size: 48px; margin-bottom: 15px;"></i>
<p>暂无日志记录</p>
</div>
<!-- 加载中 --> <!-- 加载中 -->
<div v-if="systemLogs.loading" style="text-align: center; padding: 40px; color: var(--text-muted);"> <div v-else-if="systemLogs.loading" style="text-align: center; padding: 40px; color: var(--text-muted);">
<i class="fas fa-spinner fa-spin" style="font-size: 24px;"></i> <i class="fas fa-spinner fa-spin" style="font-size: 24px;"></i>
<p>加载中...</p> <p>加载中...</p>
</div> </div>
<!-- 空状态 -->
<div v-else style="text-align: center; padding: 40px; color: var(--text-muted);">
<i class="fas fa-clipboard" style="font-size: 48px; margin-bottom: 15px;"></i>
<p>暂无日志记录</p>
</div>
<!-- 分页 --> <!-- 分页 -->
<div v-if="systemLogs.totalPages > 1" style="display: flex; justify-content: center; gap: 8px; margin-top: 15px;"> <div v-if="systemLogs.totalPages > 1" style="display: flex; justify-content: center; gap: 8px; margin-top: 15px;">
<button class="btn btn-secondary" @click="loadSystemLogs(systemLogs.page - 1)" :disabled="systemLogs.page <= 1" style="padding: 6px 12px;"> <button class="btn btn-secondary" @click="loadSystemLogs(systemLogs.page - 1)" :disabled="systemLogs.page <= 1" style="padding: 6px 12px;">