web增加恢复解析统计图表

static/index.html

@@ -210,6 +210,22 @@
                     
                     <!-- 图表和数据表格 -->
                     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <!-- DNS请求趋势图表 -->
+                        <div class="bg-white rounded-lg p-6 card-shadow lg:col-span-3">
+                            <div class="flex items-center justify-between mb-6">
+                                <h3 class="text-lg font-semibold">DNS请求趋势</h3>
+                                <!-- 时间范围切换按钮 -->
+                                <div class="flex space-x-2">
+                                    <button class="time-range-btn px-4 py-2 rounded-md bg-primary text-white" data-range="24h">24小时</button>
+                                    <button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="7d">7天</button>
+                                    <button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="30d">30天</button>
+                                </div>
+                            </div>
+                            <div class="h-80">
+                                <canvas id="dns-requests-chart"></canvas>
+                            </div>
+                        </div>
+                        
                         <!-- 解析与屏蔽比例 -->
                         <div class="bg-white rounded-lg p-6 card-shadow lg:col-span-3">
                             <h3 class="text-lg font-semibold mb-6">解析与屏蔽比例</h3>

static/js/api.js

@@ -103,6 +103,12 @@ const api = {
   // 获取小时统计
   getHourlyStats: () => apiRequest('/hourly-stats?t=' + Date.now()),
   
+  // 获取每日统计数据（7天）
+  getDailyStats: () => apiRequest('/daily-stats?t=' + Date.now()),
+  
+  // 获取每月统计数据（30天）
+  getMonthlyStats: () => apiRequest('/monthly-stats?t=' + Date.now()),
+  
   // 获取屏蔽规则 - 已禁用
   getShieldRules: () => {
     console.log('屏蔽规则功能已禁用');

static/js/dashboard.js

@@ -2,6 +2,7 @@
 
 // 全局变量
 let ratioChart = null;
+let dnsRequestsChart = null;
 let intervalId = null;
 
 // 初始化仪表盘
@@ -13,6 +14,9 @@ async function initDashboard() {
         // 初始化图表
         initCharts();
         
+        // 初始化时间范围切换
+        initTimeRangeToggle();
+        
         // 设置定时更新
         intervalId = setInterval(loadDashboardData, 5000); // 每5秒更新一次
     } catch (error) {
@@ -211,6 +215,28 @@ function updateRecentBlockedTable(domains) {
     tableBody.innerHTML = html;
 }
 
+// 当前选中的时间范围
+let currentTimeRange = '24h'; // 默认为24小时
+
+// 初始化时间范围切换
+function initTimeRangeToggle() {
+    const timeRangeButtons = document.querySelectorAll('.time-range-btn');
+    timeRangeButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // 移除所有按钮的激活状态
+            timeRangeButtons.forEach(btn => btn.classList.remove('active'));
+            // 添加当前按钮的激活状态
+            button.classList.add('active');
+            // 更新当前时间范围
+            currentTimeRange = button.dataset.range;
+            // 重新加载数据
+            loadDashboardData();
+            // 更新DNS请求图表
+            drawDNSRequestsChart();
+        });
+    });
+}
+
 // 初始化图表
 function initCharts() {
     // 初始化比例图表
@@ -241,6 +267,86 @@ function initCharts() {
             cutout: '70%'
         }
     });
+    
+    // 初始化DNS请求统计图表
+    drawDNSRequestsChart();
+}
+
+// 绘制DNS请求统计图表
+function drawDNSRequestsChart() {
+    const ctx = document.getElementById('dns-requests-chart');
+    if (!ctx) {
+        console.error('未找到DNS请求图表元素');
+        return;
+    }
+    
+    const chartContext = ctx.getContext('2d');
+    let apiFunction;
+    
+    // 根据当前时间范围选择API函数
+    switch (currentTimeRange) {
+        case '7d':
+            apiFunction = api.getDailyStats;
+            break;
+        case '30d':
+            apiFunction = api.getMonthlyStats;
+            break;
+        default: // 24h
+            apiFunction = api.getHourlyStats;
+    }
+    
+    // 获取统计数据
+    apiFunction().then(data => {
+        // 创建或更新图表
+        if (dnsRequestsChart) {
+            dnsRequestsChart.data.labels = data.labels;
+            dnsRequestsChart.data.datasets[0].data = data.data;
+            dnsRequestsChart.update();
+        } else {
+            dnsRequestsChart = new Chart(chartContext, {
+                type: 'line',
+                data: {
+                    labels: data.labels,
+                    datasets: [{
+                        label: 'DNS请求数量',
+                        data: data.data,
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.1)'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }).catch(error => {
+        console.error('绘制DNS请求图表失败:', error);
+    });
 }
 
 // 更新图表数据