页面数据更新优化

static/js/dashboard.js

@@ -357,9 +357,9 @@ function updateStatsCards(stats) {
             return;
         }
         
-        // 添加淡入淡出动画和光晕效果
+        // 添加淡入淡出动画和深色光晕效果
         // 先移除可能存在的光晕效果类
-        element.classList.remove('number-glow');
+        element.classList.remove('number-glow', 'number-glow-blue', 'number-glow-red', 'number-glow-green', 'number-glow-yellow');
         
         // 添加淡入淡出动画
         element.style.opacity = '0';
@@ -369,28 +369,48 @@ function updateStatsCards(stats) {
             element.textContent = formattedNewValue;
             element.style.opacity = '1';
             
-            // 添加光晕效果
+            // 添加当前卡片颜色的深色光晕效果
             // 根据父级卡片类型确定光晕颜色
             const card = element.closest('.stat-card, .bg-blue-50, .bg-red-50, .bg-green-50, .bg-yellow-50');
+            let glowColorClass = '';
+            
+            // 使用更精准的卡片颜色检测
             if (card) {
-                // 设置光晕颜色类
+                // 根据卡片类名确定深色光晕颜色
-                if (card.classList.contains('bg-blue-50') || card.id.includes('total')) {
+                if (card.classList.contains('bg-blue-50') || card.id.includes('total') || card.id.includes('response')) {
-                    element.classList.add('number-glow-blue');
+                    // 蓝色卡片 - 深蓝色光晕
+                    glowColorClass = 'number-glow-dark-blue';
                 } else if (card.classList.contains('bg-red-50') || card.id.includes('blocked')) {
-                    element.classList.add('number-glow-red');
+                    // 红色卡片 - 深红色光晕
-                } else if (card.classList.contains('bg-green-50') || card.id.includes('allowed')) {
+                    glowColorClass = 'number-glow-dark-red';
-                    element.classList.add('number-glow-green');
+                } else if (card.classList.contains('bg-green-50') || card.id.includes('allowed') || card.id.includes('active')) {
-                } else if (card.classList.contains('bg-yellow-50') || card.id.includes('error')) {
+                    // 绿色卡片 - 深绿色光晕
-                    element.classList.add('number-glow-yellow');
+                    glowColorClass = 'number-glow-dark-green';
+                } else if (card.classList.contains('bg-yellow-50') || card.id.includes('error') || card.id.includes('cpu')) {
+                    // 黄色卡片 - 深黄色光晕
+                    glowColorClass = 'number-glow-dark-yellow';
+                } else {
+                    // 其他卡片 - 根据背景色自动确定深色光晕
+                    const bgColor = getComputedStyle(card).backgroundColor;
+                    // 提取RGB值并转换为深色
+                    const rgbMatch = bgColor.match(/\d+/g);
+                    if (rgbMatch && rgbMatch.length >= 3) {
+                        // 直接添加自定义深色光晕样式
+                        element.style.boxShadow = `0 0 15px 3px rgba(${Math.floor(rgbMatch[0] * 0.7)}, ${Math.floor(rgbMatch[1] * 0.7)}, ${Math.floor(rgbMatch[2] * 0.7)}, 0.6)`;
+                        element.style.transition = 'box-shadow 300ms ease-in-out, opacity 200ms ease-out';
+                    }
                 }
-            } else {
+            }
-                // 默认光晕效果
+            
-                element.classList.add('number-glow');
+            // 如果确定了光晕颜色类，则添加它
+            if (glowColorClass) {
+                element.classList.add(glowColorClass);
             }
             
             // 2秒后移除光晕效果
             setTimeout(() => {
-                element.classList.remove('number-glow', 'number-glow-blue', 'number-glow-red', 'number-glow-green', 'number-glow-yellow');
+                element.classList.remove('number-glow-dark-blue', 'number-glow-dark-red', 'number-glow-dark-green', 'number-glow-dark-yellow');
+                element.style.boxShadow = 'none';
             }, 2000);
         }, 200);
     }
@@ -693,6 +713,11 @@ function initCharts() {
         options: {
             responsive: true,
             maintainAspectRatio: false,
+            // 添加全局动画配置，确保图表创建和更新时都平滑过渡
+            animation: {
+                duration: 500, // 延长动画时间，使过渡更平滑
+                easing: 'easeInOutQuart'
+            },
             plugins: {
                 legend: {
                     position: 'bottom',
@@ -722,6 +747,11 @@ function initCharts() {
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
+                // 添加全局动画配置，确保图表创建和更新时都平滑过渡
+                animation: {
+                    duration: 300,
+                    easing: 'easeInOutQuart'
+                },
                 plugins: {
                     legend: {
                         position: 'bottom',
@@ -800,7 +830,11 @@ function drawDNSRequestsChart() {
                 dnsRequestsChart.data.labels = results[0].labels; // 使用第一个数据集的标签
                 dnsRequestsChart.data.datasets = datasets;
                 dnsRequestsChart.options.plugins.legend.display = showLegend;
-                dnsRequestsChart.update();
+                // 使用平滑过渡动画更新图表
+                dnsRequestsChart.update({
+                    duration: 800,
+                    easing: 'easeInOutQuart'
+                });
             } else {
                 dnsRequestsChart = new Chart(chartContext, {
                     type: 'line',
@@ -811,6 +845,11 @@ function drawDNSRequestsChart() {
                     options: {
                         responsive: true,
                         maintainAspectRatio: false,
+                        // 添加动画配置，确保平滑过渡
+                        animation: {
+                            duration: 800,
+                            easing: 'easeInOutQuart'
+                        },
                         plugins: {
                             legend: {
                                 display: showLegend,
@@ -868,7 +907,11 @@ function drawDNSRequestsChart() {
                     fill: true
                 }];
                 dnsRequestsChart.options.plugins.legend.display = false;
-                dnsRequestsChart.update();
+                // 使用平滑过渡动画更新图表
+                dnsRequestsChart.update({
+                    duration: 800,
+                    easing: 'easeInOutQuart'
+                });
             } else {
                 dnsRequestsChart = new Chart(chartContext, {
                     type: 'line',
@@ -886,6 +929,11 @@ function drawDNSRequestsChart() {
                     options: {
                         responsive: true,
                         maintainAspectRatio: false,
+                        // 添加动画配置，确保平滑过渡
+                        animation: {
+                            duration: 800,
+                            easing: 'easeInOutQuart'
+                        },
                         plugins: {
                             legend: {
                                 display: false
@@ -955,7 +1003,11 @@ function updateCharts(stats, queryTypeStats) {
         }
         
         ratioChart.data.datasets[0].data = [allowed, blocked, error];
-        ratioChart.update();
+        // 使用自定义动画配置更新图表，确保平滑过渡
+        ratioChart.update({
+            duration: 500,
+            easing: 'easeInOutQuart'
+        });
     }
     
     // 更新解析类型统计饼图
@@ -984,7 +1036,11 @@ function updateCharts(stats, queryTypeStats) {
             queryTypeChart.data.datasets[0].backgroundColor = [queryTypeColors[0]];
         }
         
-        queryTypeChart.update();
+        // 使用自定义动画配置更新图表，确保平滑过渡
+        queryTypeChart.update({
+            duration: 500,
+            easing: 'easeInOutQuart'
+        });
     }
 }
 
@@ -1120,7 +1176,16 @@ function updateChartData(chartId, newValue) {
     // 更新图表数据
     chart.data.datasets[0].data = historyData;
     chart.data.labels = generateTimeLabels(historyData.length);
-    chart.update();
+    
+    // 使用自定义动画配置更新图表，确保平滑过渡，避免空白区域
+    chart.update({
+        duration: 300, // 增加动画持续时间
+        easing: 'easeInOutQuart', // 使用平滑的缓动函数
+        transition: {
+            duration: 300,
+            easing: 'easeInOutQuart'
+        }
+    });
 }
 
 // 从统计数据中获取规则数
@@ -1224,9 +1289,14 @@ function initStatCardCharts() {
                 }]
             },
             options: {
-                responsive: true,
+                        responsive: true,
-                maintainAspectRatio: false,
+                        maintainAspectRatio: false,
-                plugins: {
+                        // 添加动画配置，确保平滑过渡
+                        animation: {
+                            duration: 800,
+                            easing: 'easeInOutQuart'
+                        },
+                        plugins: {
                         legend: {
                             display: false
                         },