// server-status.js - 服务器状态组件功能实现 // 全局变量 let serverStatusUpdateTimer = null; let previousServerData = { cpu: 0, queries: 0 }; // 初始化服务器状态组件 function initServerStatusWidget() { console.log('初始化服务器状态组件'); // 确保组件存在 if (!document.getElementById('server-status-widget')) { console.warn('服务器状态组件不存在'); return; } // 监听页面切换事件 handlePageSwitchEvents(); // 初始加载数据 loadServerStatusData(); // 监听WebSocket连接事件 monitorWebSocketConnection(); } // 处理页面切换事件 function handlePageSwitchEvents() { // 监听导航点击事件 document.querySelectorAll('.sidebar-link').forEach(link => { link.addEventListener('click', () => { // 页面切换后重新初始化组件 setTimeout(() => { if (document.getElementById('server-status-widget')) { loadServerStatusData(); } }, 300); }); }); } // 监听WebSocket连接 function monitorWebSocketConnection() { // 检查全局WebSocket连接 if (window.wsConnection && window.wsConnection.readyState === WebSocket.OPEN) { setupWebSocketListeners(); } else { // 如果WebSocket未连接,尝试监听其连接状态 const originalOnOpen = window.wsConnection?.onopen; if (window.wsConnection) { window.wsConnection.onopen = function(event) { if (originalOnOpen) originalOnOpen(event); setupWebSocketListeners(); }; } } } // 设置WebSocket监听器 function setupWebSocketListeners() { // 保存原始的onmessage函数 const originalOnMessage = window.wsConnection.onmessage; // 重写onmessage函数 window.wsConnection.onmessage = function(event) { // 调用原始函数 if (originalOnMessage) originalOnMessage(event); // 处理服务器状态数据 try { const data = JSON.parse(event.data); if (data.type === 'initial_data' || data.type === 'stats_update') { updateServerStatusWidget(data.data); } } catch (error) { console.error('处理服务器状态WebSocket消息失败:', error); } }; } // 加载服务器状态数据 async function loadServerStatusData() { try { // 使用现有的API获取系统状态 const statusData = await window.api?.getStatus(); if (statusData && !statusData.error) { updateServerStatusWidget(statusData); } } catch (error) { console.error('加载服务器状态数据失败:', error); } } // 更新服务器状态组件 function updateServerStatusWidget(stats) { // 确保组件存在 const widget = document.getElementById('server-status-widget'); if (!widget) return; // 提取CPU使用率 let cpuUsage = 0; if (stats.system && stats.system.cpu) { cpuUsage = stats.system.cpu; } else if (stats.cpuUsage) { cpuUsage = stats.cpuUsage; } // 提取查询量 let queryCount = 0; if (stats.dns) { queryCount = (stats.dns.Allowed || 0) + (stats.dns.Blocked || 0) + (stats.dns.Errors || 0); } else if (stats.totalQueries) { queryCount = stats.totalQueries; } // 更新CPU使用率 if (document.getElementById('server-cpu-value')) { document.getElementById('server-cpu-value').textContent = cpuUsage.toFixed(1) + '%'; } if (document.getElementById('server-cpu-bar')) { document.getElementById('server-cpu-bar').style.width = Math.min(cpuUsage, 100) + '%'; // 根据CPU使用率改变颜色 const cpuBar = document.getElementById('server-cpu-bar'); if (cpuUsage > 80) { cpuBar.className = 'h-full bg-danger rounded-full'; } else if (cpuUsage > 50) { cpuBar.className = 'h-full bg-warning rounded-full'; } else { cpuBar.className = 'h-full bg-success rounded-full'; } } // 更新查询量 if (document.getElementById('server-queries-value')) { document.getElementById('server-queries-value').textContent = formatNumber(queryCount); } // 计算查询量百分比(假设最大查询量为10000) const queryPercentage = Math.min((queryCount / 10000) * 100, 100); if (document.getElementById('server-queries-bar')) { document.getElementById('server-queries-bar').style.width = queryPercentage + '%'; } // 添加光晕提示效果 if (previousServerData.cpu !== cpuUsage || previousServerData.queries !== queryCount) { addGlowEffect(); } // 更新服务器状态指示器 if (document.getElementById('server-status-indicator')) { const indicator = document.getElementById('server-status-indicator'); // 检查系统状态 if (stats.system && stats.system.status === 'error') { indicator.className = 'inline-block w-2 h-2 bg-danger rounded-full'; } else { indicator.className = 'inline-block w-2 h-2 bg-success rounded-full'; } } // 保存当前数据用于下次比较 previousServerData = { cpu: cpuUsage, queries: queryCount }; } // 添加光晕提示效果 function addGlowEffect() { const widget = document.getElementById('server-status-widget'); if (!widget) return; // 添加光晕类 widget.classList.add('glow-effect'); // 2秒后移除光晕 setTimeout(() => { widget.classList.remove('glow-effect'); }, 2000); } // 格式化数字(添加千位分隔符) function formatNumber(num) { if (num >= 1000000) { return (num / 1000000).toFixed(1) + 'M'; } else if (num >= 1000) { return (num / 1000).toFixed(1) + 'K'; } return num.toString(); } // 在DOM加载完成后初始化 window.addEventListener('DOMContentLoaded', () => { // 延迟初始化,确保页面完全加载 setTimeout(initServerStatusWidget, 500); // 监听页面切换事件(已在handlePageSwitchEvents中处理) }); // 在页面卸载时清理资源 window.addEventListener('beforeunload', () => { if (serverStatusUpdateTimer) { clearInterval(serverStatusUpdateTimer); serverStatusUpdateTimer = null; } }); // 导出函数供其他模块使用 window.serverStatusWidget = { init: initServerStatusWidget, update: updateServerStatusWidget };