修复暗色模式显示

static/css/style.css

@@ -1362,6 +1362,13 @@ tr:hover {
     /* 添加箭头 */
 }
 
+/* 显示跟踪器浮窗 */
+.tracker-tooltip.visible {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+}
+
 /* 浮窗箭头 */
 .tracker-tooltip::before {
     content: '';

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 = '<i class="fa fa-times text-xl"></i>';
-        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 = `
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">日期</div>
-                <div class="text-sm font-medium text-gray-900">${dateStr}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">日期</div>
+                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${dateStr}</div>
             </div>
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">时间</div>
-                <div class="text-sm font-medium text-gray-900">${timeStr}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">时间</div>
+                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${timeStr}</div>
             </div>
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">状态</div>
-                <div class="text-sm font-medium ${result === 'blocked' ? 'text-red-600' : result === 'allowed' ? 'text-green-600' : 'text-gray-500'}">
+                <div class="text-xs text-gray-500 dark:text-gray-400">状态</div>
+                <div class="text-sm font-medium ${result === 'blocked' ? 'text-red-600 dark:text-red-400' : result === 'allowed' ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}">
                     ${result === 'blocked' ? '已拦截' : result === 'allowed' ? '允许' : result}
                 </div>
             </div>
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">域名</div>
-                <div class="text-sm font-medium text-gray-900 break-all">${domain}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">域名</div>
+                <div class="text-sm font-medium text-gray-900 dark:text-gray-100 break-all">${domain}</div>
             </div>
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">类型</div>
-                <div class="text-sm font-medium text-gray-900">${queryType}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">类型</div>
+                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${queryType}</div>
             </div>
         `;
         
@@ -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 = `
-            <div class="text-xs text-gray-500">DNS特性</div>
-            <div class="text-sm font-medium text-gray-900">
-                ${dnssec ? '<i class="fa fa-lock text-green-500 mr-1" title="DNSSEC已启用"></i>DNSSEC ' : ''}
-                ${edns ? '<i class="fa fa-exchange text-blue-500 mr-1" title="EDNS已启用"></i>EDNS' : ''}
+            <div class="text-xs text-gray-500 dark:text-gray-400">DNS特性</div>
+            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                ${dnssec ? '<i class="fa fa-lock text-green-500 dark:text-green-400 mr-1" title="DNSSEC已启用"></i>DNSSEC ' : ''}
+                ${edns ? '<i class="fa fa-exchange text-blue-500 dark:text-blue-400 mr-1" title="EDNS已启用"></i>EDNS' : ''}
                 ${!dnssec && !edns ? '无' : ''}
             </div>
         `;
@@ -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 = `
-            <div class="text-xs text-gray-500">域名信息</div>
-            <div class="text-sm font-medium text-gray-900 p-3 bg-gray-50 rounded-md border border-gray-200 w-full">
+            <div class="text-xs text-gray-500 dark:text-gray-400">域名信息</div>
+            <div class="text-sm font-medium text-gray-900 dark:text-gray-100 p-3 bg-gray-50 dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 w-full">
                 ${domainInfo ? `
                     <div class="flex items-center mb-2">
                         ${domainInfo.icon ? `<img src="${domainInfo.icon}" alt="${domainInfo.name}" class="w-6 h-6 mr-2 rounded-sm" onerror="this.style.display='none'" />` : ''}
@@ -1866,11 +1866,11 @@ async function showLogDetailModal(log) {
                     </div>
                     <div class="mt-1">
                         <div class="flex items-center mb-1 flex-wrap">
-                            <span class="text-gray-500 mr-2">类别：</span>
+                            <span class="text-gray-500 dark:text-gray-400 mr-2">类别：</span>
                             <span class="flex-grow">${domainInfo.categoryName || '未知'}</span>
                         </div>
                         <div class="flex items-center flex-wrap">
-                            <span class="text-gray-500 mr-2">所属单位/公司：</span>
+                            <span class="text-gray-500 dark:text-gray-400 mr-2">所属单位/公司：</span>
                             <span class="flex-grow">${domainInfo.company || '未知'}</span>
                         </div>
                     </div>
@@ -1880,11 +1880,11 @@ async function showLogDetailModal(log) {
         
         // 构建跟踪器浮窗内容
         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="tracker-tooltip absolute z-50 bg-white dark:bg-gray-800 shadow-lg rounded-md border border-gray-200 dark:border-gray-700 p-3 min-w-64 text-sm text-gray-900 dark:text-gray-100">
                 <div class="font-semibold mb-2">已知跟踪器</div>
                 <div class="mb-1"><strong>名称:</strong> ${trackerInfo.name || '未知'}</div>
                 <div class="mb-1"><strong>类别:</strong> ${trackerInfo.categoryId && trackersDatabase && trackersDatabase.categories ? trackersDatabase.categories[trackerInfo.categoryId] : '未知'}</div>
-                ${trackerInfo.url ? `<div class="mb-1"><strong>URL:</strong> <a href="${trackerInfo.url}" target="_blank" class="text-blue-500 hover:underline">${trackerInfo.url}</a></div>` : ''}
+                ${trackerInfo.url ? `<div class="mb-1"><strong>URL:</strong> <a href="${trackerInfo.url}" target="_blank" class="text-blue-500 dark:text-blue-400 hover:underline">${trackerInfo.url}</a></div>` : ''}
                 ${trackerInfo.source ? `<div class="mb-1"><strong>源:</strong> ${trackerInfo.source}</div>` : ''}
             </div>
         ` : '';
@@ -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 = `
-            <div class="text-xs text-gray-500">跟踪器信息</div>
-            <div class="text-sm font-medium text-gray-900">
+            <div class="text-xs text-gray-500 dark:text-gray-400">跟踪器信息</div>
+            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                 ${isTracker ? `
                     <div class="flex items-center">
                         <div class="tracker-icon-container relative">
-                            <i class="fa fa-eye text-red-500 mr-1" title="已知跟踪器"></i>
+                            <i class="fa fa-eye text-red-500 dark:text-red-400 mr-1" title="已知跟踪器"></i>
                             ${trackerTooltip}
                         </div>
                         <span>${trackerInfo.name} (${trackerInfo.categoryId && trackersDatabase && trackersDatabase.categories ? trackersDatabase.categories[trackerInfo.categoryId] : '未知'})</span>
@@ -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 = `
-            <div class="text-xs text-gray-500">解析记录</div>
-            <div class="text-sm font-medium text-gray-900 whitespace-pre-wrap break-all bg-gray-50 p-3 rounded-md border border-gray-200">${dnsRecords}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">解析记录</div>
+            <div class="text-sm font-medium text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-all bg-gray-50 dark:bg-gray-700 p-3 rounded-md border border-gray-200 dark:border-gray-600">${dnsRecords}</div>
         `;
         
         // DNS服务器
         const dnsServerDiv = document.createElement('div');
         dnsServerDiv.className = 'col-span-1 md:col-span-2 space-y-1';
         dnsServerDiv.innerHTML = `
-            <div class="text-xs text-gray-500">DNS服务器</div>
-            <div class="text-sm font-medium text-gray-900">${dnsServer}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">DNS服务器</div>
+            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${dnsServer}</div>
         `;
         
         // DNSSEC专用服务器
         const dnssecServerDiv = document.createElement('div');
         dnssecServerDiv.className = 'col-span-1 md:col-span-2 space-y-1';
         dnssecServerDiv.innerHTML = `
-            <div class="text-xs text-gray-500">DNSSEC专用服务器</div>
-            <div class="text-sm font-medium text-gray-900">${dnssecServer}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">DNSSEC专用服务器</div>
+            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${dnssecServer}</div>
         `;
         
         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 = `
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">响应时间</div>
-                <div class="text-sm font-medium text-gray-900">${responseTime}毫秒</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">响应时间</div>
+                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${responseTime}毫秒</div>
             </div>
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">响应代码</div>
-                <div class="text-sm font-medium text-gray-900">${getResponseCodeText(log.responseCode)}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">响应代码</div>
+                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${getResponseCodeText(log.responseCode)}</div>
             </div>
             <div class="space-y-1">
-                <div class="text-xs text-gray-500">缓存状态</div>
-                <div class="text-sm font-medium ${fromCache ? 'text-primary' : 'text-gray-500'}">
+                <div class="text-xs text-gray-500 dark:text-gray-400">缓存状态</div>
+                <div class="text-sm font-medium ${fromCache ? 'text-primary dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}">
                     ${fromCache ? '缓存' : '非缓存'}
                 </div>
             </div>
@@ -1989,8 +1989,8 @@ async function showLogDetailModal(log) {
         if (result === 'blocked') {
             responseDetailsHTML += `
                 <div class="space-y-1">
-                    <div class="text-xs text-gray-500">规则</div>
-                    <div class="text-sm font-medium text-gray-900">${blockRule || '-'}</div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400">规则</div>
+                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">${blockRule || '-'}</div>
                 </div>
             `;
         }
@@ -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} <span id="modal-location-${clientIP.replace(/[.:]/g, '-')}">(${location})</span>`;
         
         const clientIPDiv = document.createElement('div');
         clientIPDiv.className = 'space-y-1';
         clientIPDiv.innerHTML = `
-            <div class="text-xs text-gray-500">IP地址</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">IP地址</div>
         `;
         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 = `
             <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-semibold text-gray-900">错误</h3>
-                <button onclick="closeErrorModal()" class="text-gray-500 hover:text-gray-700 focus:outline-none transition-colors">
+                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">错误</h3>
+                <button onclick="closeErrorModal()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none transition-colors">
                     <i class="fa fa-times text-xl"></i>
                 </button>
             </div>
-            <div class="text-red-600 text-sm">
+            <div class="text-red-600 dark:text-red-400 text-sm">
                 加载日志详情失败: ${error.message}
             </div>
         `;