DNS/dns-server
1
0
Fork 0
Code Issues Pull Requests 1 Releases 4 Wiki Activity

修复暗色模式

Browse Source
This commit is contained in:
Alex Yang
2026-01-28 12:48:18 +08:00
parent 2e85bbe7c7
commit 62bfb883ff
1 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
static/js/logs.js
View File

@@ -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>
`;