116 lines
3.8 KiB
JavaScript
116 lines
3.8 KiB
JavaScript
// 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('blacklists-content'),
|
||
document.getElementById('query-content'),
|
||
document.getElementById('config-content')
|
||
];
|
||
const pageTitle = document.getElementById('page-title');
|
||
|
||
menuItems.forEach((item, index) => {
|
||
item.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
|
||
// 更新活跃状态
|
||
menuItems.forEach(menuItem => {
|
||
menuItem.classList.remove('sidebar-item-active');
|
||
});
|
||
item.classList.add('sidebar-item-active');
|
||
|
||
// 隐藏所有内容部分
|
||
contentSections.forEach(section => {
|
||
section.classList.add('hidden');
|
||
});
|
||
|
||
// 显示对应内容部分
|
||
const target = item.getAttribute('href').substring(1);
|
||
const activeContent = document.getElementById(`${target}-content`);
|
||
if (activeContent) {
|
||
activeContent.classList.remove('hidden');
|
||
}
|
||
|
||
// 更新页面标题
|
||
pageTitle.textContent = item.querySelector('span').textContent;
|
||
|
||
// 页面特定初始化
|
||
if (target === 'shield' && typeof initShieldPage === 'function') {
|
||
initShieldPage();
|
||
} else if (target === 'hosts' && typeof initHostsPage === 'function') {
|
||
initHostsPage();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 移动端侧边栏切换
|
||
const toggleSidebar = document.getElementById('toggle-sidebar');
|
||
const sidebar = document.getElementById('sidebar');
|
||
|
||
if (toggleSidebar && sidebar) {
|
||
toggleSidebar.addEventListener('click', () => {
|
||
sidebar.classList.toggle('-translate-x-full');
|
||
});
|
||
}
|
||
}
|
||
|
||
// 初始化函数
|
||
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); |