From 00f635ebecc1cfcb21114d1a14315e441eca785b Mon Sep 17 00:00:00 2001 From: Alex Yang Date: Wed, 28 Jan 2026 12:49:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9A=97=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/style.css | 7 +++ static/js/logs.js | 106 +++++++++++++++++++++---------------------- 2 files changed, 60 insertions(+), 53 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 9dc4216..4d8db11 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1362,6 +1362,13 @@ tr:hover { /* 添加箭头 */ } +/* 显示跟踪器浮窗 */ +.tracker-tooltip.visible { + display: block; + opacity: 1; + visibility: visible; +} + /* 浮窗箭头 */ .tracker-tooltip::before { content: ''; diff --git a/static/js/logs.js b/static/js/logs.js index f64897e..d151f5c 100644 --- a/static/js/logs.js +++ b/static/js/logs.js @@ -1782,19 +1782,19 @@ async function showLogDetailModal(log) { // 创建模态框内容 const modalContent = document.createElement('div'); - modalContent.className = 'bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-slide-in'; + modalContent.className = 'bg-white dark:bg-gray-800 dark:text-gray-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-slide-in'; // 创建标题栏 const header = document.createElement('div'); - header.className = 'sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center'; + header.className = 'sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-between items-center'; const title = document.createElement('h3'); - title.className = 'text-xl font-semibold text-gray-900'; + title.className = 'text-xl font-semibold text-gray-900 dark:text-gray-100'; title.textContent = '日志详情'; const closeButton = document.createElement('button'); closeButton.innerHTML = ''; - closeButton.className = 'text-gray-500 hover:text-gray-700 focus:outline-none transition-colors'; + closeButton.className = 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none transition-colors'; closeButton.onclick = () => closeModal(); header.appendChild(title); @@ -1809,7 +1809,7 @@ async function showLogDetailModal(log) { basicInfo.className = 'space-y-4'; const basicInfoTitle = document.createElement('h4'); - basicInfoTitle.className = 'text-sm font-medium text-gray-700 uppercase tracking-wider'; + basicInfoTitle.className = 'text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'; basicInfoTitle.textContent = '基本信息'; const basicInfoGrid = document.createElement('div'); @@ -1818,26 +1818,26 @@ async function showLogDetailModal(log) { // 添加基本信息项 basicInfoGrid.innerHTML = `
-
日期
-
${dateStr}
+
日期
+
${dateStr}
-
时间
-
${timeStr}
+
时间
+
${timeStr}
-
状态
-
+
状态
+
${result === 'blocked' ? '已拦截' : result === 'allowed' ? '允许' : result}
-
域名
-
${domain}
+
域名
+
${domain}
-
类型
-
${queryType}
+
类型
+
${queryType}
`; @@ -1845,10 +1845,10 @@ async function showLogDetailModal(log) { const dnsFeatures = document.createElement('div'); dnsFeatures.className = 'col-span-1 md:col-span-2 space-y-1'; dnsFeatures.innerHTML = ` -
DNS特性
-
- ${dnssec ? 'DNSSEC ' : ''} - ${edns ? 'EDNS' : ''} +
DNS特性
+
+ ${dnssec ? 'DNSSEC ' : ''} + ${edns ? 'EDNS' : ''} ${!dnssec && !edns ? '无' : ''}
`; @@ -1857,8 +1857,8 @@ async function showLogDetailModal(log) { const domainInfoDiv = document.createElement('div'); domainInfoDiv.className = 'col-span-1 md:col-span-2 space-y-1'; domainInfoDiv.innerHTML = ` -
域名信息
-
+
域名信息
+
${domainInfo ? `
${domainInfo.icon ? `${domainInfo.name}` : ''} @@ -1866,11 +1866,11 @@ async function showLogDetailModal(log) {
- 类别： + 类别： ${domainInfo.categoryName || '未知'}
- 所属单位/公司： + 所属单位/公司： ${domainInfo.company || '未知'}
@@ -1880,11 +1880,11 @@ async function showLogDetailModal(log) { // 构建跟踪器浮窗内容 const trackerTooltip = isTracker ? ` -
+
已知跟踪器
名称: ${trackerInfo.name || '未知'}
类别: ${trackerInfo.categoryId && trackersDatabase && trackersDatabase.categories ? trackersDatabase.categories[trackerInfo.categoryId] : '未知'}
- ${trackerInfo.url ? `
URL: ${trackerInfo.url}
` : ''} + ${trackerInfo.url ? `
URL: ${trackerInfo.url}
` : ''} ${trackerInfo.source ? `
源: ${trackerInfo.source}
` : ''}
` : ''; @@ -1893,12 +1893,12 @@ async function showLogDetailModal(log) { const trackerDiv = document.createElement('div'); trackerDiv.className = 'col-span-1 md:col-span-2 space-y-1'; trackerDiv.innerHTML = ` -
跟踪器信息
-
+
跟踪器信息
+
${isTracker ? `
- + ${trackerTooltip}
${trackerInfo.name} (${trackerInfo.categoryId && trackersDatabase && trackersDatabase.categories ? trackersDatabase.categories[trackerInfo.categoryId] : '未知'}) @@ -1929,24 +1929,24 @@ async function showLogDetailModal(log) { const recordsDiv = document.createElement('div'); recordsDiv.className = 'col-span-1 md:col-span-2 space-y-1'; recordsDiv.innerHTML = ` -
解析记录
-
${dnsRecords}
+
解析记录
+
${dnsRecords}
`; // DNS服务器 const dnsServerDiv = document.createElement('div'); dnsServerDiv.className = 'col-span-1 md:col-span-2 space-y-1'; dnsServerDiv.innerHTML = ` -
DNS服务器
-
${dnsServer}
+
DNS服务器
+
${dnsServer}
`; // DNSSEC专用服务器 const dnssecServerDiv = document.createElement('div'); dnssecServerDiv.className = 'col-span-1 md:col-span-2 space-y-1'; dnssecServerDiv.innerHTML = ` -
DNSSEC专用服务器
-
${dnssecServer}
+
DNSSEC专用服务器
+
${dnssecServer}
`; basicInfoGrid.appendChild(dnsFeatures); @@ -1961,25 +1961,25 @@ async function showLogDetailModal(log) { // 响应细节部分 const responseDetails = document.createElement('div'); - responseDetails.className = 'space-y-4 pt-4 border-t border-gray-200'; + responseDetails.className = 'space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700'; const responseDetailsTitle = document.createElement('h4'); - responseDetailsTitle.className = 'text-sm font-medium text-gray-700 uppercase tracking-wider'; + responseDetailsTitle.className = 'text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'; responseDetailsTitle.textContent = '响应细节'; // 准备响应细节内容，根据条件添加规则信息 let responseDetailsHTML = `
-
响应时间
-
${responseTime}毫秒
+
响应时间
+
${responseTime}毫秒
-
响应代码
-
${getResponseCodeText(log.responseCode)}
+
响应代码
+
${getResponseCodeText(log.responseCode)}
-
缓存状态
-
+
缓存状态
+
${fromCache ? '缓存' : '非缓存'}
@@ -1989,8 +1989,8 @@ async function showLogDetailModal(log) { if (result === 'blocked') { responseDetailsHTML += `
-
规则
-
${blockRule || '-'}
+
规则
+
${blockRule || '-'}
`; } @@ -2004,21 +2004,21 @@ async function showLogDetailModal(log) { // 客户端详情部分 const clientDetails = document.createElement('div'); - clientDetails.className = 'space-y-4 pt-4 border-t border-gray-200'; + clientDetails.className = 'space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700'; const clientDetailsTitle = document.createElement('h4'); - clientDetailsTitle.className = 'text-sm font-medium text-gray-700 uppercase tracking-wider'; + clientDetailsTitle.className = 'text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'; clientDetailsTitle.textContent = '客户端详情'; // 创建客户端IP容器，为后续更新地理位置做准备 const clientIPContainer = document.createElement('div'); - clientIPContainer.className = 'text-sm font-medium text-gray-900'; + clientIPContainer.className = 'text-sm font-medium text-gray-900 dark:text-gray-100'; clientIPContainer.innerHTML = `${clientIP} (${location})`; const clientIPDiv = document.createElement('div'); clientIPDiv.className = 'space-y-1'; clientIPDiv.innerHTML = ` -
IP地址
+
IP地址
`; clientIPDiv.appendChild(clientIPContainer); @@ -2035,7 +2035,7 @@ async function showLogDetailModal(log) { // 操作按钮区域 const actionButtons = document.createElement('div'); - actionButtons.className = 'pt-4 border-t border-gray-200 flex justify-end space-x-2'; + actionButtons.className = 'pt-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-2'; // 根据域名状态显示不同的操作按钮 if (result === 'blocked') { @@ -2125,16 +2125,16 @@ async function showLogDetailModal(log) { errorModal.style.zIndex = '9999'; const errorContent = document.createElement('div'); - errorContent.className = 'bg-white rounded-xl shadow-2xl p-6 w-full max-w-md animate-slide-in'; + errorContent.className = 'bg-white dark:bg-gray-800 dark:text-gray-100 rounded-xl shadow-2xl p-6 w-full max-w-md animate-slide-in'; errorContent.innerHTML = `
-

错误

-
-
+
加载日志详情失败: ${error.message}
`;