🐛 优化监控页面初始状态设置

- 将adminTab计算提取为initialAdminTab变量
- healthCheck.loading和systemLogs.loading根据initialAdminTab设置初始值
- 确保data()执行时所有状态一致,避免刷新闪烁

🤖 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:50:59 +08:00
parent 702cf6e9b4
commit 21ceff64f8

View File

@@ -2,6 +2,12 @@ const { createApp } = Vue;
createApp({ createApp({
data() { data() {
// 预先确定管理员标签页,避免刷新时状态丢失导致闪烁
const initialAdminTab = (() => {
const saved = localStorage.getItem('adminTab');
return (saved && ['overview', 'settings', 'monitor', 'users', 'tools'].includes(saved)) ? saved : 'overview';
})();
return { return {
// API配置 // API配置
// API配置 - 通过nginx代理访问 // API配置 - 通过nginx代理访问
@@ -22,11 +28,7 @@ createApp({
fileViewMode: 'grid', // 文件显示模式: grid 大图标, list 列表 fileViewMode: 'grid', // 文件显示模式: grid 大图标, list 列表
shareViewMode: 'list', // 分享显示模式: grid 大图标, list 列表 shareViewMode: 'list', // 分享显示模式: grid 大图标, list 列表
debugMode: false, // 调试模式(管理员可切换) debugMode: false, // 调试模式(管理员可切换)
adminTab: (() => { adminTab: initialAdminTab, // 管理员页面当前标签overview, settings, monitor, users, tools
// 从localStorage恢复管理员标签页防止刷新时UI闪烁
const saved = localStorage.getItem('adminTab');
return (saved && ['overview', 'settings', 'monitor', 'users', 'tools'].includes(saved)) ? saved : 'overview';
})(), // 管理员页面当前标签overview, settings, monitor, users, tools
// 表单数据 // 表单数据
loginForm: { loginForm: {
@@ -165,7 +167,7 @@ createApp({
// 健康检测 // 健康检测
healthCheck: { healthCheck: {
loading: false, loading: initialAdminTab === 'monitor',
lastCheck: null, lastCheck: null,
overallStatus: null, // healthy, warning, critical overallStatus: null, // healthy, warning, critical
summary: { total: 0, pass: 0, warning: 0, fail: 0, info: 0 }, summary: { total: 0, pass: 0, warning: 0, fail: 0, info: 0 },
@@ -174,7 +176,7 @@ createApp({
// 系统日志 // 系统日志
systemLogs: { systemLogs: {
loading: false, loading: initialAdminTab === 'monitor',
logs: [], logs: [],
total: 0, total: 0,
page: 1, page: 1,