revert

2025-12-16 00:17:05 +08:00
parent 11d39d6b76
commit c0ddaf8b44
49 changed files with 1514 additions and 941752 deletions
--- a/static/js/api.js
+++ b/static/js/api.js
@@ -38,6 +38,13 @@ async function apiRequest(endpoint, method = 'GET', data = null) {
      // 优化错误响应处理
      console.warn(`API请求失败: ${response.status}`);
      
+      // 处理401未授权错误，重定向到登录页面
+      if (response.status === 401) {
+        console.warn('未授权访问，重定向到登录页面');
+        window.location.href = '/login';
+        return { error: '未授权访问' };
+      }
+      
      // 尝试解析JSON，但如果失败，直接使用原始文本作为错误信息
      try {
        const errorData = JSON.parse(responseText);
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -6,12 +6,18 @@ let dnsRequestsChart = null;
 let detailedDnsRequestsChart = null; // 详细DNS请求趋势图表(浮窗)
 let queryTypeChart = null; // 解析类型统计饼图
 let intervalId = null;
-let wsConnection = null;
-let wsReconnectTimer = null;
+let dashboardWsConnection = null;
+let dashboardWsReconnectTimer = null;
 // 存储统计卡片图表实例
 let statCardCharts = {};
 // 存储统计卡片历史数据
 let statCardHistoryData = {};
+// 存储仪表盘历史数据，用于计算趋势
+window.dashboardHistoryData = window.dashboardHistoryData || {
+    prevResponseTime: null,
+    prevActiveIPs: null,
+    prevTopQueryTypeCount: null
+};

 // 引入颜色配置文件
 const COLOR_CONFIG = window.COLOR_CONFIG || {};
@@ -53,22 +59,22 @@ function connectWebSocket() {
        console.log('正在连接WebSocket:', wsUrl);
        
        // 创建WebSocket连接
-        wsConnection = new WebSocket(wsUrl);
+        dashboardWsConnection = new WebSocket(wsUrl);
        
        // 连接打开事件
-        wsConnection.onopen = function() {
+        dashboardWsConnection.onopen = function() {
            console.log('WebSocket连接已建立');
            showNotification('数据更新成功', 'success');
            
            // 清除重连计时器
-            if (wsReconnectTimer) {
-                clearTimeout(wsReconnectTimer);
-                wsReconnectTimer = null;
+            if (dashboardWsReconnectTimer) {
+                clearTimeout(dashboardWsReconnectTimer);
+                dashboardWsReconnectTimer = null;
            }
        };
        
        // 接收消息事件
-        wsConnection.onmessage = function(event) {
+        dashboardWsConnection.onmessage = function(event) {
            try {
                const data = JSON.parse(event.data);
                
@@ -82,16 +88,16 @@ function connectWebSocket() {
        };
        
        // 连接关闭事件
-        wsConnection.onclose = function(event) {
+        dashboardWsConnection.onclose = function(event) {
            console.warn('WebSocket连接已关闭，代码:', event.code);
-            wsConnection = null;
+            dashboardWsConnection = null;
            
            // 设置重连
            setupReconnect();
        };
        
        // 连接错误事件
-        wsConnection.onerror = function(error) {
+        dashboardWsConnection.onerror = function(error) {
            console.error('WebSocket连接错误:', error);
        };
        
@@ -104,14 +110,14 @@ function connectWebSocket() {

 // 设置重连逻辑
 function setupReconnect() {
-    if (wsReconnectTimer) {
+    if (dashboardWsReconnectTimer) {
        return; // 已经有重连计时器在运行
    }
    
    const reconnectDelay = 5000; // 5秒后重连
    console.log(`将在${reconnectDelay}ms后尝试重新连接WebSocket`);
    
-    wsReconnectTimer = setTimeout(() => {
+    dashboardWsReconnectTimer = setTimeout(() => {
        connectWebSocket();
    }, reconnectDelay);
 }
@@ -192,14 +198,42 @@ function processRealTimeData(stats) {
        
        if (document.getElementById('top-query-type')) {
            const queryType = stats.topQueryType || '---';
+            document.getElementById('top-query-type').textContent = queryType;
            
            const queryPercentElem = document.getElementById('query-type-percentage');
            if (queryPercentElem) {
-                queryPercentElem.textContent = '• ---';
-                queryPercentElem.className = 'text-sm flex items-center text-gray-500';
+                // 计算查询类型趋势
+                let queryPercent = '---';
+                let trendClass = 'text-gray-400';
+                let trendIcon = '---';
+                
+                if (stats.topQueryTypeCount !== undefined && stats.topQueryTypeCount !== null) {
+                    // 存储当前值用于下次计算趋势
+                    const prevTopQueryTypeCount = window.dashboardHistoryData.prevTopQueryTypeCount || stats.topQueryTypeCount;
+                    window.dashboardHistoryData.prevTopQueryTypeCount = stats.topQueryTypeCount;
+                    
+                    // 计算变化百分比
+                    if (prevTopQueryTypeCount > 0) {
+                        const changePercent = ((stats.topQueryTypeCount - prevTopQueryTypeCount) / prevTopQueryTypeCount) * 100;
+                        queryPercent = Math.abs(changePercent).toFixed(1) + '%';
+                        
+                        // 设置趋势图标和颜色
+                        if (changePercent > 0) {
+                            trendIcon = '↑';
+                            trendClass = 'text-primary';
+                        } else if (changePercent < 0) {
+                            trendIcon = '↓';
+                            trendClass = 'text-secondary';
+                        } else {
+                            trendIcon = '•';
+                            trendClass = 'text-gray-500';
+                        }
+                    }
+                }
+                
+                queryPercentElem.textContent = trendIcon + ' ' + queryPercent;
+                queryPercentElem.className = `text-sm flex items-center ${trendClass}`;
            }
-            
-            document.getElementById('top-query-type').textContent = queryType;
        }
        
        if (document.getElementById('active-ips')) {
@@ -362,15 +396,15 @@ function fallbackToIntervalRefresh() {
 // 清理资源
 function cleanupResources() {
    // 清除WebSocket连接
-    if (wsConnection) {
-        wsConnection.close();
-        wsConnection = null;
+    if (dashboardWsConnection) {
+        dashboardWsConnection.close();
+        dashboardWsConnection = null;
    }
    
    // 清除重连计时器
-    if (wsReconnectTimer) {
-        clearTimeout(wsReconnectTimer);
-        wsReconnectTimer = null;
+    if (dashboardWsReconnectTimer) {
+        clearTimeout(dashboardWsReconnectTimer);
+        dashboardWsReconnectTimer = null;
    }
    
    // 清除定时刷新
@@ -797,17 +831,20 @@ function updateStatsCards(stats) {
        const originalStyle = element.getAttribute('style') || '';
        
        try {
+            // 复制原始元素的样式到新元素，确保大小完全一致
+            const computedStyle = getComputedStyle(element);
+            
            // 配置翻页容器样式，确保与原始元素大小完全一致
            const containerStyle = 
-                'position: relative; '
-                + 'display: ' + computedStyle.display + '; '
-                + 'overflow: hidden; '
-                + 'height: ' + element.offsetHeight + 'px; '
-                + 'width: ' + element.offsetWidth + 'px; '
-                + 'margin: ' + computedStyle.margin + '; '
-                + 'padding: ' + computedStyle.padding + '; '
-                + 'box-sizing: ' + computedStyle.boxSizing + '; '
-                + 'line-height: ' + computedStyle.lineHeight + ';';
+                'position: relative; ' +
+                'display: ' + computedStyle.display + '; ' +
+                'overflow: hidden; ' +
+                'height: ' + element.offsetHeight + 'px; ' +
+                'width: ' + element.offsetWidth + 'px; ' +
+                'margin: ' + computedStyle.margin + '; ' +
+                'padding: ' + computedStyle.padding + '; ' +
+                'box-sizing: ' + computedStyle.boxSizing + '; ' +
+                'line-height: ' + computedStyle.lineHeight + ';';
            
            // 创建翻页容器
            const flipContainer = document.createElement('div');
@@ -844,9 +881,6 @@ function updateStatsCards(stats) {
                'transition: transform 400ms ease-in-out; ' +
                'transform-origin: center; ' +
                'transform: translateY(100%);';
-            
-            // 复制原始元素的样式到新元素，确保大小完全一致
-            const computedStyle = getComputedStyle(element);
            [oldValueElement, newValueElement].forEach(el => {
                el.style.fontSize = computedStyle.fontSize;
                el.style.fontWeight = computedStyle.fontWeight;
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -9,6 +9,7 @@ function setupNavigation() {
        document.getElementById('shield-content'),
        document.getElementById('hosts-content'),
        document.getElementById('query-content'),
+        document.getElementById('logs-content'),
        document.getElementById('config-content')
    ];
    const pageTitle = document.getElementById('page-title');
@@ -21,14 +22,6 @@ function setupNavigation() {
            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();
-            }
        });
    });
    
@@ -116,15 +109,84 @@ function setupNavigation() {
    });
 }

+// 页面初始化函数 - 根据当前hash值初始化对应页面
+function initPageByHash() {
+    const hash = window.location.hash.substring(1);
+    
+    // 隐藏所有内容区域
+    const contentSections = [
+        document.getElementById('dashboard-content'),
+        document.getElementById('shield-content'),
+        document.getElementById('hosts-content'),
+        document.getElementById('query-content'),
+        document.getElementById('logs-content'),
+        document.getElementById('config-content')
+    ];
+    
+    contentSections.forEach(section => {
+        if (section) {
+            section.classList.add('hidden');
+        }
+    });
+    
+    // 显示当前页面内容
+    const currentSection = document.getElementById(`${hash}-content`);
+    if (currentSection) {
+        currentSection.classList.remove('hidden');
+    }
+    
+    // 更新页面标题
+    const pageTitle = document.getElementById('page-title');
+    if (pageTitle) {
+        const titles = {
+            'dashboard': '仪表盘',
+            'shield': '屏蔽管理',
+            'hosts': 'Hosts管理',
+            'query': 'DNS屏蔽查询',
+            'logs': '查询日志',
+            'config': '系统设置'
+        };
+        pageTitle.textContent = titles[hash] || '仪表盘';
+    }
+    
+    // 页面特定初始化 - 使用setTimeout延迟调用，确保所有脚本文件都已加载完成
+    if (hash === 'shield') {
+        setTimeout(() => {
+            if (typeof initShieldPage === 'function') {
+                initShieldPage();
+            }
+        }, 0);
+    } else if (hash === 'hosts') {
+        setTimeout(() => {
+            if (typeof initHostsPage === 'function') {
+                initHostsPage();
+            }
+        }, 0);
+    } else if (hash === 'logs') {
+        setTimeout(() => {
+            if (typeof initLogsPage === 'function') {
+                initLogsPage();
+            }
+        }, 0);
+    } else if (hash === 'dashboard') {
+        setTimeout(() => {
+            if (typeof loadDashboardData === 'function') {
+                loadDashboardData();
+            }
+        }, 0);
+    }
+}
+
 // 初始化函数
 function init() {
    // 设置导航
    setupNavigation();
    
-    // 加载仪表盘数据
-    if (typeof loadDashboardData === 'function') {
-        loadDashboardData();
-    }
+    // 初始化页面
+    initPageByHash();
+    
+    // 添加hashchange事件监听，处理浏览器前进/后退按钮
+    window.addEventListener('hashchange', initPageByHash);
    
    // 定期更新系统状态
    setInterval(updateSystemStatus, 5000);
@@ -169,5 +231,175 @@ function formatUptime(milliseconds) {
    }
 }

+// 账户功能 - 下拉菜单、注销和修改密码
+function setupAccountFeatures() {
+    // 下拉菜单功能
+    const accountDropdown = document.getElementById('account-dropdown');
+    const accountMenu = document.getElementById('account-menu');
+    const changePasswordBtn = document.getElementById('change-password-btn');
+    const logoutBtn = document.getElementById('logout-btn');
+    const changePasswordModal = document.getElementById('change-password-modal');
+    const closeModalBtn = document.getElementById('close-modal-btn');
+    const cancelChangePasswordBtn = document.getElementById('cancel-change-password');
+    const changePasswordForm = document.getElementById('change-password-form');
+    const passwordMismatch = document.getElementById('password-mismatch');
+    const newPassword = document.getElementById('new-password');
+    const confirmPassword = document.getElementById('confirm-password');
+    
+    // 点击外部关闭下拉菜单
+    document.addEventListener('click', (e) => {
+        if (accountDropdown && !accountDropdown.contains(e.target)) {
+            accountMenu.classList.add('hidden');
+        }
+    });
+    
+    // 点击账户区域切换下拉菜单
+    if (accountDropdown) {
+        accountDropdown.addEventListener('click', (e) => {
+            e.stopPropagation();
+            accountMenu.classList.toggle('hidden');
+        });
+    }
+    
+    // 打开修改密码模态框
+    if (changePasswordBtn) {
+        changePasswordBtn.addEventListener('click', () => {
+            accountMenu.classList.add('hidden');
+            changePasswordModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+    }
+    
+    // 关闭修改密码模态框
+    function closeModal() {
+        changePasswordModal.classList.add('hidden');
+        document.body.style.overflow = '';
+        changePasswordForm.reset();
+        passwordMismatch.classList.add('hidden');
+    }
+    
+    // 绑定关闭模态框事件
+    if (closeModalBtn) {
+        closeModalBtn.addEventListener('click', closeModal);
+    }
+    
+    if (cancelChangePasswordBtn) {
+        cancelChangePasswordBtn.addEventListener('click', closeModal);
+    }
+    
+    // 点击模态框外部关闭模态框
+    if (changePasswordModal) {
+        changePasswordModal.addEventListener('click', (e) => {
+            if (e.target === changePasswordModal) {
+                closeModal();
+            }
+        });
+    }
+    
+    // 按ESC键关闭模态框
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !changePasswordModal.classList.contains('hidden')) {
+            closeModal();
+        }
+    });
+    
+    // 密码匹配验证
+    if (newPassword && confirmPassword) {
+        confirmPassword.addEventListener('input', () => {
+            if (newPassword.value !== confirmPassword.value) {
+                passwordMismatch.classList.remove('hidden');
+            } else {
+                passwordMismatch.classList.add('hidden');
+            }
+        });
+        
+        newPassword.addEventListener('input', () => {
+            if (newPassword.value !== confirmPassword.value) {
+                passwordMismatch.classList.remove('hidden');
+            } else {
+                passwordMismatch.classList.add('hidden');
+            }
+        });
+    }
+    
+    // 修改密码表单提交
+    if (changePasswordForm) {
+        changePasswordForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            // 验证密码匹配
+            if (newPassword.value !== confirmPassword.value) {
+                passwordMismatch.classList.remove('hidden');
+                return;
+            }
+            
+            const formData = new FormData(changePasswordForm);
+            const data = {
+                currentPassword: formData.get('currentPassword'),
+                newPassword: formData.get('newPassword')
+            };
+            
+            try {
+                const response = await fetch('/api/change-password', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.status === 'success') {
+                    // 密码修改成功
+                    alert('密码修改成功');
+                    closeModal();
+                } else {
+                    // 密码修改失败
+                    alert(result.error || '密码修改失败');
+                }
+            } catch (error) {
+                console.error('修改密码失败:', error);
+                alert('修改密码失败，请稍后重试');
+            }
+        });
+    }
+    
+    // 注销功能
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', async () => {
+            try {
+                await fetch('/api/logout', {
+                    method: 'POST'
+                });
+                
+                // 重定向到登录页面
+                window.location.href = '/login';
+            } catch (error) {
+                console.error('注销失败:', error);
+                alert('注销失败，请稍后重试');
+            }
+        });
+    }
+}
+
+// 初始化函数
+function init() {
+    // 设置导航
+    setupNavigation();
+    
+    // 设置账户功能
+    setupAccountFeatures();
+    
+    // 初始化页面
+    initPageByHash();
+    
+    // 添加hashchange事件监听，处理浏览器前进/后退按钮
+    window.addEventListener('hashchange', initPageByHash);
+    
+    // 定期更新系统状态
+    setInterval(updateSystemStatus, 5000);
+}
+
 // 页面加载完成后执行初始化
 window.addEventListener('DOMContentLoaded', init);