// main.js - 主脚本文件 // 页面导航功能 function setupNavigation() { // 侧边栏菜单项 const menuItems = document.querySelectorAll('nav a'); const contentSections = [ document.getElementById('dashboard-content'), document.getElementById('shield-content'), document.getElementById('hosts-content'), document.getElementById('query-content'), document.getElementById('config-content') ]; const pageTitle = document.getElementById('page-title'); menuItems.forEach((item, index) => { item.addEventListener('click', (e) => { // 允许浏览器自动更新地址栏中的hash,不阻止默认行为 // 移动端点击菜单项后自动关闭侧边栏 if (window.innerWidth < 768) { closeSidebar(); } // 页面特定初始化 - 保留这部分逻辑,因为它不会与hashchange事件处理逻辑冲突 const target = item.getAttribute('href').substring(1); if (target === 'shield' && typeof initShieldPage === 'function') { initShieldPage(); } else if (target === 'hosts' && typeof initHostsPage === 'function') { initHostsPage(); } }); }); // 移动端侧边栏切换 const toggleSidebar = document.getElementById('toggle-sidebar'); const closeSidebarBtn = document.getElementById('close-sidebar'); const sidebar = document.getElementById('sidebar'); const sidebarOverlay = document.getElementById('sidebar-overlay'); // 打开侧边栏函数 function openSidebar() { if (sidebar) { sidebar.classList.remove('-translate-x-full'); } if (sidebarOverlay) { sidebarOverlay.classList.remove('hidden'); } // 防止页面滚动 document.body.style.overflow = 'hidden'; } // 关闭侧边栏函数 function closeSidebar() { if (sidebar) { sidebar.classList.add('-translate-x-full'); } if (sidebarOverlay) { sidebarOverlay.classList.add('hidden'); } // 恢复页面滚动 document.body.style.overflow = ''; } // 切换侧边栏函数 function toggleSidebarVisibility() { if (sidebar && sidebar.classList.contains('-translate-x-full')) { openSidebar(); } else { closeSidebar(); } } // 绑定切换按钮事件 if (toggleSidebar) { toggleSidebar.addEventListener('click', openSidebar); } // 绑定关闭按钮事件 if (closeSidebarBtn) { closeSidebarBtn.addEventListener('click', closeSidebar); } // 绑定遮罩层点击事件 if (sidebarOverlay) { sidebarOverlay.addEventListener('click', closeSidebar); } // 移动端点击菜单项后自动关闭侧边栏 menuItems.forEach(item => { item.addEventListener('click', () => { // 检查是否是移动设备视图 if (window.innerWidth < 768) { closeSidebar(); } }); }); // 添加键盘事件监听,按ESC键关闭侧边栏 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeSidebar(); } }); } // 初始化函数 function init() { // 设置导航 setupNavigation(); // 加载仪表盘数据 if (typeof loadDashboardData === 'function') { loadDashboardData(); } // 定期更新系统状态 setInterval(updateSystemStatus, 5000); } // 更新系统状态 function updateSystemStatus() { fetch('/api/status') .then(response => response.json()) .then(data => { const uptimeElement = document.getElementById('uptime'); if (uptimeElement) { uptimeElement.textContent = `正常运行中 | ${formatUptime(data.uptime)}`; } }) .catch(error => { console.error('更新系统状态失败:', error); const uptimeElement = document.getElementById('uptime'); if (uptimeElement) { uptimeElement.textContent = '连接异常'; uptimeElement.classList.add('text-danger'); } }); } // 格式化运行时间 function formatUptime(milliseconds) { // 简化版的格式化,实际使用时需要根据API返回的数据格式调整 const seconds = Math.floor(milliseconds / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (days > 0) { return `${days}天${hours % 24}小时`; } else if (hours > 0) { return `${hours}小时${minutes % 60}分钟`; } else if (minutes > 0) { return `${minutes}分钟${seconds % 60}秒`; } else { return `${seconds}秒`; } } // 页面加载完成后执行初始化 window.addEventListener('DOMContentLoaded', init);