增加日志查询页面跟踪器显示

static/css/style.css

@@ -1063,4 +1063,79 @@ tr:hover {
 .actions-cell {
     display: flex;
     gap: 0.5rem;
+}
+
+/* 跟踪器状态图标容器 */
+.tracker-icon-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: help;
+}
+
+/* 跟踪器浮窗样式 */
+.tracker-tooltip {
+    position: absolute;
+    top: -10px;
+    left: 100%;
+    margin-left: 10px;
+    background-color: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 12px;
+    min-width: 250px;
+    z-index: 50;
+    font-size: 14px;
+    color: #333;
+    /* 添加箭头 */
+}
+
+/* 浮窗箭头 */
+.tracker-tooltip::before {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: -10px;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid white;
+}
+
+.tracker-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: -11px;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid #e2e8f0;
+    z-index: -1;
+}
+
+/* 浮窗标题 */
+.tracker-tooltip .font-semibold {
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 8px;
+    display: block;
+}
+
+/* 浮窗内容项 */
+.tracker-tooltip > div {
+    margin-bottom: 6px;
+}
+
+/* 浮窗链接样式 */
+.tracker-tooltip a {
+    color: #3182ce;
+    text-decoration: none;
+}
+
+.tracker-tooltip a:hover {
+    text-decoration: underline;
 }

static/index.html

@@ -995,13 +995,32 @@
                             <div class="text-sm text-gray-500">
                                 显示 <span id="logs-current-page">1</span> / <span id="logs-total-pages">1</span> 页
                             </div>
-                            <div class="flex space-x-2">
-                                <button id="logs-prev-page" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent" disabled>
-                                    <i class="fa fa-chevron-left"></i>
-                                </button>
-                                <button id="logs-next-page" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent" disabled>
-                                    <i class="fa fa-chevron-right"></i>
-                                </button>
+                            <div class="flex items-center space-x-4">
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-sm text-gray-500">每页显示:</span>
+                                    <select id="logs-per-page" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
+                                        <option value="10">10条</option>
+                                        <option value="20">20条</option>
+                                        <option value="30" selected>30条</option>
+                                        <option value="50">50条</option>
+                                        <option value="100">100条</option>
+                                    </select>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-sm text-gray-500">页码:</span>
+                                    <input type="number" id="logs-page-input" min="1" max="1" value="1" class="w-16 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-center">
+                                    <button id="logs-go-page" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
+                                        前往
+                                    </button>
+                                </div>
+                                <div class="flex space-x-2">
+                                    <button id="logs-prev-page" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent" disabled>
+                                        <i class="fa fa-chevron-left"></i>
+                                    </button>
+                                    <button id="logs-next-page" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent" disabled>
+                                        <i class="fa fa-chevron-right"></i>
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </div>

static/js/logs.js

@@ -14,10 +14,83 @@ let currentSortDirection = 'desc'; // 默认降序
 let ipGeolocationCache = {};
 const GEOLOCATION_CACHE_EXPIRY = 24 * 60 * 60 * 1000; // 缓存有效期24小时
 
+// 跟踪器数据库缓存
+let trackersDatabase = null;
+let trackersLoaded = false;
+let trackersLoading = false;
+
 // WebSocket连接和重连计时器
 let logsWsConnection = null;
 let logsWsReconnectTimer = null;
 
+// 加载跟踪器数据库
+async function loadTrackersDatabase() {
+    if (trackersLoaded) return trackersDatabase;
+    if (trackersLoading) {
+        // 等待正在进行的加载完成
+        while (trackersLoading) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        return trackersDatabase;
+    }
+    
+    trackersLoading = true;
+    
+    try {
+        const response = await fetch('/tracker/trackers.json');
+        if (!response.ok) {
+            console.error('加载跟踪器数据库失败:', response.statusText);
+            trackersDatabase = { trackers: {} };
+            return trackersDatabase;
+        }
+        
+        trackersDatabase = await response.json();
+        trackersLoaded = true;
+        return trackersDatabase;
+    } catch (error) {
+        console.error('加载跟踪器数据库失败:', error);
+        trackersDatabase = { trackers: {} };
+        return trackersDatabase;
+    } finally {
+        trackersLoading = false;
+    }
+}
+
+// 检查域名是否在跟踪器数据库中，并返回跟踪器信息
+async function isDomainInTrackerDatabase(domain) {
+    if (!trackersDatabase || !trackersLoaded) {
+        await loadTrackersDatabase();
+    }
+    
+    if (!trackersDatabase || !trackersDatabase.trackers) {
+        return null;
+    }
+    
+    // 检查域名是否直接作为跟踪器键存在
+    if (trackersDatabase.trackers.hasOwnProperty(domain)) {
+        return trackersDatabase.trackers[domain];
+    }
+    
+    // 检查域名是否在跟踪器URL中
+    for (const trackerKey in trackersDatabase.trackers) {
+        if (trackersDatabase.trackers.hasOwnProperty(trackerKey)) {
+            const tracker = trackersDatabase.trackers[trackerKey];
+            if (tracker && tracker.url) {
+                try {
+                    const trackerUrl = new URL(tracker.url);
+                    if (trackerUrl.hostname === domain || trackerUrl.hostname.includes(domain)) {
+                        return tracker;
+                    }
+                } catch (e) {
+                    // 忽略无效URL
+                }
+            }
+        }
+    }
+    
+    return null;
+}
+
 // 初始化查询日志页面
 function initLogsPage() {
     console.log('初始化查询日志页面');
@@ -122,6 +195,34 @@ function bindLogsEvents() {
         });
     }
     
+    // 页码跳转
+    const pageInput = document.getElementById('logs-page-input');
+    const goBtn = document.getElementById('logs-go-page');
+    
+    if (pageInput) {
+        // 页码输入框回车事件
+        pageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                const page = parseInt(pageInput.value);
+                if (page >= 1 && page <= totalPages) {
+                    currentPage = page;
+                    loadLogs();
+                }
+            }
+        });
+    }
+    
+    if (goBtn) {
+        // 前往按钮点击事件
+        goBtn.addEventListener('click', () => {
+            const page = parseInt(pageInput.value);
+            if (page >= 1 && page <= totalPages) {
+                currentPage = page;
+                loadLogs();
+            }
+        });
+    }
+    
     // 时间范围切换
     const timeRangeBtns = document.querySelectorAll('.time-range-btn');
     timeRangeBtns.forEach(btn => {
@@ -304,7 +405,7 @@ function loadLogs() {
 }
 
 // 更新日志表格
-function updateLogsTable(logs) {
+async function updateLogsTable(logs) {
     const tableBody = document.getElementById('logs-table-body');
     if (!tableBody) return;
     
@@ -325,7 +426,7 @@ function updateLogsTable(logs) {
     }
     
     // 填充表格
-    logs.forEach(log => {
+    for (const log of logs) {
         const row = document.createElement('tr');
         row.className = 'border-b border-gray-100 hover:bg-gray-50 transition-colors';
         
@@ -386,37 +487,76 @@ function updateLogsTable(logs) {
                 statusClass = '';
         }
         
-        // 构建行内容 - 两行显示，时间列显示时间和日期，请求列显示域名和类型状态
-            // 添加缓存状态显示
-            const cacheStatusClass = log.FromCache ? 'text-primary' : 'text-gray-500';
-            const cacheStatusText = log.FromCache ? '缓存' : '非缓存';
+        // 检查域名是否在跟踪器数据库中
+            const trackerInfo = await isDomainInTrackerDatabase(log.Domain);
+            const isTracker = trackerInfo !== null;
             
-            // 检查域名是否被拦截
-            const isBlocked = log.Result === 'blocked';
-            
-            row.innerHTML = `
-                <td class="py-3 px-4">
-                    <div class="text-sm font-medium">${formattedTime}</div>
-                    <div class="text-xs text-gray-500 mt-1">${formattedDate}</div>
-                </td>
-                <td class="py-3 px-4 text-sm">
-                    <div class="font-medium">${log.ClientIP}</div>
-                    <div class="text-xs text-gray-500 mt-1">${log.Location || '未知 未知'}</div>
-                </td>
-                <td class="py-3 px-4 text-sm">
-                    <div class="font-medium">${log.Domain}</div>
-                    <div class="text-xs text-gray-500 mt-1">类型: ${log.QueryType}, <span class="${statusClass}">${statusText}</span>, <span class="${cacheStatusClass}">${log.FromCache ? '缓存' : '实时'}</span>${log.DNSSEC ? ', <span class="text-green-500"><i class="fa fa-lock"></i> DNSSEC</span>' : ''}${log.EDNS ? ', <span class="text-blue-500"><i class="fa fa-exchange"></i> EDNS</span>' : ''}</div>
-                    <div class="text-xs text-gray-500 mt-1">DNS 服务器: ${log.DNSServer || '无'}, DNSSEC专用: ${log.DNSSECServer || '无'}</div>
-                </td>
-                <td class="py-3 px-4 text-sm">${log.ResponseTime}ms</td>
-                <td class="py-3 px-4 text-sm text-gray-500">${log.BlockRule || '-'}</td>
-                <td class="py-3 px-4 text-sm text-center">
-                    ${isBlocked ? 
-                        `<button class="unblock-btn px-3 py-1 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors text-xs" data-domain="${log.Domain}">放行</button>` : 
-                        `<button class="block-btn px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors text-xs" data-domain="${log.Domain}">拦截</button>`
+            // 构建行内容 - 两行显示，时间列显示时间和日期，请求列显示域名和类型状态
+                // 添加缓存状态显示
+                const cacheStatusClass = log.FromCache ? 'text-primary' : 'text-gray-500';
+                const cacheStatusText = log.FromCache ? '缓存' : '非缓存';
+                
+                // 检查域名是否被拦截
+                const isBlocked = log.Result === 'blocked';
+                
+                // 构建跟踪器浮窗内容
+                const trackerTooltip = isTracker ? `
+                    <div class="tracker-tooltip absolute z-50 bg-white shadow-lg rounded-md border p-3 min-w-64 text-sm">
+                        <div class="font-semibold mb-1">已知跟踪器</div>
+                        <div class="mb-1">名称: ${trackerInfo.name}</div>
+                        <div class="mb-1">类别: ${trackersDatabase.categories[trackerInfo.categoryId] || '未知'}</div>
+                        ${trackerInfo.url ? `<div class="mb-1">URL: <a href="${trackerInfo.url}" target="_blank" class="text-blue-500 hover:underline">${trackerInfo.url}</a></div>` : ''}
+                        ${trackerInfo.source ? `<div class="mb-1">源: ${trackerInfo.source}</div>` : ''}
+                    </div>
+                ` : '';
+                
+                row.innerHTML = `
+                    <td class="py-3 px-4">
+                        <div class="text-sm font-medium">${formattedTime}</div>
+                        <div class="text-xs text-gray-500 mt-1">${formattedDate}</div>
+                    </td>
+                    <td class="py-3 px-4 text-sm">
+                        <div class="font-medium">${log.ClientIP}</div>
+                        <div class="text-xs text-gray-500 mt-1">${log.Location || '未知 未知'}</div>
+                    </td>
+                    <td class="py-3 px-4 text-sm">
+                        <div class="font-medium flex items-center relative">
+                            ${log.DNSSEC ? '<i class="fa fa-lock text-green-500 mr-1" title="DNSSEC已启用"></i>' : ''}
+                            <div class="tracker-icon-container relative">
+                                ${isTracker ? '<i class="fa fa-eye text-red-500 mr-1"></i>' : '<i class="fa fa-eye-slash text-gray-300 mr-1"></i>'}
+                                ${trackerTooltip}
+                            </div>
+                            ${log.Domain}
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1">类型: ${log.QueryType}, <span class="${statusClass}">${statusText}</span>, <span class="${cacheStatusClass}">${log.FromCache ? '缓存' : '实时'}</span>${log.DNSSEC ? ', <span class="text-green-500"><i class="fa fa-lock"></i> DNSSEC</span>' : ''}${log.EDNS ? ', <span class="text-blue-500"><i class="fa fa-exchange"></i> EDNS</span>' : ''}</div>
+                        <div class="text-xs text-gray-500 mt-1">DNS 服务器: ${log.DNSServer || '无'}, DNSSEC专用: ${log.DNSSECServer || '无'}</div>
+                    </td>
+                    <td class="py-3 px-4 text-sm">${log.ResponseTime}ms</td>
+                    <td class="py-3 px-4 text-sm text-gray-500">${log.BlockRule || '-'}</td>
+                    <td class="py-3 px-4 text-sm text-center">
+                        ${isBlocked ? 
+                            `<button class="unblock-btn px-3 py-1 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors text-xs" data-domain="${log.Domain}">放行</button>` : 
+                            `<button class="block-btn px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors text-xs" data-domain="${log.Domain}">拦截</button>`
+                        }
+                    </td>
+                `;
+                
+                // 添加跟踪器图标悬停事件
+                if (isTracker) {
+                    const iconContainer = row.querySelector('.tracker-icon-container');
+                    const tooltip = iconContainer.querySelector('.tracker-tooltip');
+                    if (iconContainer && tooltip) {
+                        tooltip.style.display = 'none';
+                        
+                        iconContainer.addEventListener('mouseenter', () => {
+                            tooltip.style.display = 'block';
+                        });
+                        
+                        iconContainer.addEventListener('mouseleave', () => {
+                            tooltip.style.display = 'none';
+                        });
                     }
-                </td>
-            `;
+                }
             
             // 绑定按钮事件
             const blockBtn = row.querySelector('.block-btn');
@@ -438,7 +578,7 @@ function updateLogsTable(logs) {
             }
         
         tableBody.appendChild(row);
-    });
+    }
 }
 
 // 更新分页信息
@@ -447,6 +587,13 @@ function updateLogsPagination() {
     document.getElementById('logs-current-page').textContent = currentPage;
     document.getElementById('logs-total-pages').textContent = totalPages;
     
+    // 更新页码输入框
+    const pageInput = document.getElementById('logs-page-input');
+    if (pageInput) {
+        pageInput.max = totalPages;
+        pageInput.value = currentPage;
+    }
+    
     // 更新按钮状态
     const prevBtn = document.getElementById('logs-prev-page');
     const nextBtn = document.getElementById('logs-next-page');