AMAZEHOME/dns-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加查询日志详情界面点击域名列表，显示解析日志的详细信息.

Browse Source
This commit is contained in:
Alex Yang
2025-12-25 20:33:07 +08:00
parent 151042e675
commit 01f2152e46
17 changed files with 1138 additions and 3480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
static/js/config.js
View File

@@ -61,18 +61,20 @@ function populateConfigForm(config) {
// DNS配置 - 使用函数安全设置值，避免 || 操作符可能的错误处理
setElementValue('dns-port', getSafeValue(dnsServerConfig.Port, 53));
setElementValue('dns-upstream-servers', getSafeArray(dnsServerConfig.UpstreamServers).join(', '));
setElementValue('dns-dnssec-upstream-servers', getSafeArray(dnsServerConfig.DNSSECUpstreamServers).join(', '));
setElementValue('dns-timeout', getSafeValue(dnsServerConfig.Timeout, 5));
setElementValue('dns-stats-file', getSafeValue(dnsServerConfig.StatsFile, 'data/stats.json'));
setElementValue('dns-save-interval', getSafeValue(dnsServerConfig.SaveInterval, 300));
//setElementValue('dns-stats-file', getSafeValue(dnsServerConfig.StatsFile, 'data/stats.json'));
setElementValue('dns-save-interval', getSafeValue(dnsServerConfig.SaveInterval, 30));
//setElementValue('dns-cache-ttl', getSafeValue(dnsServerConfig.CacheTTL, 10));
setElementValue('dns-enable-ipv6', getSafeValue(dnsServerConfig.EnableIPv6, false));
// HTTP配置
setElementValue('http-port', getSafeValue(httpServerConfig.Port, 8080));
// 屏蔽配置
setElementValue('shield-local-rules-file', getSafeValue(shieldConfig.LocalRulesFile, 'data/rules.txt'));
//setElementValue('shield-local-rules-file', getSafeValue(shieldConfig.LocalRulesFile, 'data/rules.txt'));
setElementValue('shield-update-interval', getSafeValue(shieldConfig.UpdateInterval, 3600));
setElementValue('shield-hosts-file', getSafeValue(shieldConfig.HostsFile, 'data/hosts.txt'));
// 使用服务器端接受的屏蔽方法值，默认使用NXDOMAIN
//setElementValue('shield-hosts-file', getSafeValue(shieldConfig.HostsFile, 'data/hosts.txt'));
// 使用服务器端接受的屏蔽方法值，默认使用NXDOMAIN, 可选值: NXDOMAIN, NULL, REFUSED
setElementValue('shield-block-method', getSafeValue(shieldConfig.BlockMethod, 'NXDOMAIN'));
}
@@ -80,7 +82,11 @@ function populateConfigForm(config) {
function setElementValue(elementId, value) {
const element = document.getElementById(elementId);
if (element && element.tagName === 'INPUT') {
element.value = value;
if (element.type === 'checkbox') {
element.checked = value;
} else {
element.value = value;
}
} else if (!element) {
console.warn(`Element with id "${elementId}" not found for setting value: ${value}`);
}
@@ -163,6 +169,12 @@ function collectFormData() {
upstreamServersText.split(',').map(function(s) { return s.trim(); }).filter(function(s) { return s !== ''; }) :
[];
// 安全获取DNSSEC上游服务器列表
const dnssecUpstreamServersText = getElementValue('dns-dnssec-upstream-servers');
const dnssecUpstreamServers = dnssecUpstreamServersText ?
dnssecUpstreamServersText.split(',').map(function(s) { return s.trim(); }).filter(function(s) { return s !== ''; }) :
[];
// 安全获取并转换整数值
const timeoutValue = getElementValue('dns-timeout');
const timeout = timeoutValue ? parseInt(timeoutValue, 10) : 5;
@@ -174,21 +186,20 @@ function collectFormData() {
const updateInterval = updateIntervalValue ? parseInt(updateIntervalValue, 10) : 3600;
return {
DNSServer: {
Port: dnsPort,
UpstreamServers: upstreamServers,
Timeout: timeout,
StatsFile: getElementValue('dns-stats-file') || './data/stats.json',
SaveInterval: saveInterval
dnsserver: {
port: dnsPort,
upstreamServers: upstreamServers,
dnssecUpstreamServers: dnssecUpstreamServers,
timeout: timeout,
saveInterval: saveInterval,
enableIPv6: getElementValue('dns-enable-ipv6')
},
HTTPServer: {
Port: httpPort
httpserver: {
port: httpPort
},
Shield: {
LocalRulesFile: getElementValue('shield-local-rules-file') || './data/rules.txt',
UpdateInterval: updateInterval,
HostsFile: getElementValue('shield-hosts-file') || './data/hosts.txt',
BlockMethod: getElementValue('shield-block-method') || 'NXDOMAIN'
shield: {
updateInterval: updateInterval,
blockMethod: getElementValue('shield-block-method') || 'NXDOMAIN'
}
};
}
@@ -197,6 +208,9 @@ function collectFormData() {
function getElementValue(elementId) {
const element = document.getElementById(elementId);
if (element && element.tagName === 'INPUT') {
if (element.type === 'checkbox') {
return element.checked;
}
return element.value;
}
return ''; // 默认返回空字符串

0
static/js/guide.js Normal file
View File

756
static/js/logs.js
View File

@@ -107,6 +107,9 @@ function initLogsPage() {
// 绑定事件
bindLogsEvents();
// 初始化日志详情弹窗
initLogDetailModal();
// 建立WebSocket连接，用于实时更新统计数据和图表
connectLogsWebSocket();
@@ -425,6 +428,9 @@ async function updateLogsTable(logs) {
return;
}
// 检测是否为移动设备
const isMobile = window.innerWidth <= 768;
// 填充表格
for (const log of logs) {
const row = document.createElement('tr');
@@ -491,7 +497,7 @@ async function updateLogsTable(logs) {
const trackerInfo = await isDomainInTrackerDatabase(log.Domain);
const isTracker = trackerInfo !== null;
// 构建行内容 - 两行显示，时间列显示时间和日期，请求列显示域名和类型状态
// 构建行内容 - 根据设备类型决定显示内容
// 添加缓存状态显示
const cacheStatusClass = log.FromCache ? 'text-primary' : 'text-gray-500';
const cacheStatusText = log.FromCache ? '缓存' : '非缓存';
@@ -510,36 +516,59 @@ async function updateLogsTable(logs) {
</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}
if (isMobile) {
// 移动设备只显示时间和请求信息
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" colspan="5">
<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>
${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>
`;
<div class="text-xs text-gray-500 mt-1">类型: ${log.QueryType}, <span class="${statusClass}">${statusText}</span></div>
<div class="text-xs text-gray-500 mt-1">客户端: ${log.ClientIP}</div>
</td>
`;
} else {
// 桌面设备显示完整信息
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) {
@@ -576,6 +605,16 @@ async function updateLogsTable(logs) {
unblockDomain(domain);
});
}
// 绑定日志详情点击事件
row.addEventListener('click', (e) => {
// 如果点击的是按钮，不触发详情弹窗
if (e.target.closest('button')) {
return;
}
console.log('Row clicked, log object:', log);
showLogDetailModal(log);
});
tableBody.appendChild(row);
}
@@ -932,6 +971,663 @@ async function unblockDomain(domain) {
}
}
// 显示日志详情弹窗
async function showLogDetailModal(log) {
console.log('showLogDetailModal called with log:', JSON.stringify(log, null, 2)); // 输出完整的log对象
// 确保log对象存在
if (!log) {
console.error('No log data provided!');
return;
}
try {
// 简化版本，直接创建一个新的模态框
const modalContainer = document.createElement('div');
modalContainer.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center';
modalContainer.style.zIndex = '9999'; // 确保z-index足够高
// 创建模态框内容
const modalContent = document.createElement('div');
modalContent.className = 'bg-white rounded-lg shadow-xl p-6 w-full max-w-md';
// 添加关闭按钮
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 ml-auto';
closeButton.onclick = function() {
document.body.removeChild(modalContainer);
};
// 创建标题栏
const titleBar = document.createElement('div');
titleBar.className = 'flex justify-between items-center mb-4';
// 添加标题
const title = document.createElement('h3');
title.className = 'text-xl font-semibold';
title.textContent = '日志详情';
// 将标题和关闭按钮添加到标题栏
titleBar.appendChild(title);
titleBar.appendChild(closeButton);
// 创建详情内容
const details = document.createElement('div');
details.className = 'space-y-4';
// 安全获取log属性，提供默认值
const timestamp = log.Timestamp ? new Date(log.Timestamp) : null;
const dateStr = timestamp ? timestamp.toLocaleDateString() : '未知';
const timeStr = timestamp ? timestamp.toLocaleTimeString() : '未知';
const domain = log.Domain || '未知';
const queryType = log.QueryType || '未知';
const result = log.Result || '未知';
const responseTime = log.ResponseTime || '未知';
const clientIP = log.ClientIP || '未知';
const location = log.Location || '未知';
const fromCache = log.FromCache || false;
const dnssec = log.DNSSEC || false;
const edns = log.EDNS || false;
const dnsServer = log.DNSServer || '无';
const dnssecServer = log.DNSSECServer || '无';
const blockRule = log.BlockRule || '无';
// 检查域名是否在跟踪器数据库中
const trackerInfo = await isDomainInTrackerDatabase(log.Domain);
const isTracker = trackerInfo !== null;
// 获取DNS响应内容（如果有）
const dnsResponse = log.Response || '无';
// 添加调试信息，查看log对象结构
console.log('=== DNS日志对象结构 ===');
console.log('log对象:', log);
console.log('log字段列表:', Object.keys(log));
console.log('Answers字段值:', log.Answers);
console.log('answers字段值:', log.answers);
console.log('Response字段值:', log.Response);
console.log('Answer字段值:', log.Answer);
// 处理Answers字段，确保正确解析
let dnsAnswers = log.Answers || log.answers || [];
// 添加更多调试信息
console.log('=== 解析记录提取调试信息 ===');
console.log('日志对象:', log);
console.log('日志字段:', Object.keys(log));
// 检查所有可能的解析记录字段
const potentialFields = ['Answers', 'answers', 'Answer', 'answer', 'Records', 'records', 'Response'];
potentialFields.forEach(field => {
console.log(`${field}:`, log[field]);
});
// 关键修复：如果Answers是字符串类型的JSON数组，强制解析
if (typeof dnsAnswers === 'string') {
// 先检查是否是有效的JSON数组格式
if (dnsAnswers.startsWith('[') && dnsAnswers.endsWith(']')) {
try {
dnsAnswers = JSON.parse(dnsAnswers);
} catch (e) {
console.error('解析Answers JSON数组失败:', e);
dnsAnswers = [];
}
} else {
// 如果不是数组格式，尝试解析为单个对象
try {
dnsAnswers = JSON.parse(dnsAnswers);
// 如果解析后是单个对象，转换为数组
if (typeof dnsAnswers === 'object' && !Array.isArray(dnsAnswers)) {
dnsAnswers = [dnsAnswers];
}
} catch (e) {
console.error('解析Answers JSON失败:', e);
dnsAnswers = [];
}
}
}
console.log('处理后的dnsAnswers:', dnsAnswers);
// 添加基本信息，使用安全获取的值
details.innerHTML = `
<!-- 第1组：基本信息 -->
<div class="text-xs">
<div class="font-medium text-gray-700 mb-2">基本信息</div>
<div class="grid grid-cols-2 gap-y-2 gap-x-4">
<div>
<div class="text-gray-500">日期:</div>
<div class="text-gray-800">${dateStr}</div>
</div>
<div>
<div class="text-gray-500">时间:</div>
<div class="text-gray-800">${timeStr}</div>
</div>
<div>
<div class="text-gray-500">状态:</div>
<div class="${result === 'blocked' ? 'text-red-600' : result === 'allowed' ? 'text-green-600' : 'text-gray-500'}">
${result === 'blocked' ? '已拦截' : result === 'allowed' ? '允许' : result}
</div>
</div>
<div>
<div class="text-gray-500">域名:</div>
<div class="text-gray-800">${domain}</div>
</div>
<div>
<div class="text-gray-500">类型:</div>
<div class="text-gray-800">${queryType}</div>
</div>
<div class="col-span-2">
<div class="text-gray-500">DNS特性:</div>
<div class="text-gray-800">
${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' : ''}
${!dnssec && !edns ? '无' : ''}
</div>
</div>
<div class="col-span-2">
<div class="text-gray-500">跟踪器信息:</div>
<div class="text-gray-800">
${isTracker ? `
<div class="flex items-center">
<i class="fa fa-eye text-red-500 mr-1"></i>
<span>${trackerInfo.name} (${trackersDatabase.categories[trackerInfo.categoryId] || '未知'})</span>
</div>
` : '无'}
</div>
</div>
<div class="col-span-2">
<div class="text-gray-500">解析记录:</div>
<div class="text-gray-800 whitespace-pre-wrap break-all text-left">
${result === 'blocked' ? '无' : (() => {
// 尝试从不同字段获取解析记录
let records = '';
// 1. 尝试使用Answers数组 - 始终优先使用Answers
if (dnsAnswers && Array.isArray(dnsAnswers) && dnsAnswers.length > 0) {
records = dnsAnswers.map(answer => {
// 处理不同格式的answer对象
const type = answer.type || answer.Type || '未知';
let value = answer.value || answer.Value || answer.data || answer.Data || '未知';
const ttl = answer.TTL || answer.ttl || answer.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 如果value是JSON字符串，尝试解析
else if (value.startsWith('{') && value.endsWith('}')) {
try {
const parsedValue = JSON.parse(value);
value = parsedValue.data || parsedValue.value || value;
// 解析后的值也需要trim
if (typeof value === 'string') {
value = value.trim();
}
} catch (e) {
// 解析失败，保持原值但trim
value = value.trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
}
// 2. 尝试解析字符串类型的Answers - 增强的容错处理
else if (typeof dnsAnswers === 'string') {
try {
const parsedAnswers = JSON.parse(dnsAnswers);
if (Array.isArray(parsedAnswers)) {
records = parsedAnswers.map(answer => {
const type = answer.type || answer.Type || '未知';
let value = answer.value || answer.Value || answer.data || answer.Data || '未知';
const ttl = answer.TTL || answer.ttl || answer.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
}
} catch (e) {
// 解析失败，继续尝试其他字段
}
}
// 3. 尝试从log.Answer字段获取（单数形式）
if (!records && log.Answer) {
if (Array.isArray(log.Answer)) {
records = log.Answer.map(answer => {
const type = answer.type || answer.Type || '未知';
let value = answer.value || answer.Value || answer.data || answer.Data || '未知';
const ttl = answer.TTL || answer.ttl || answer.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
} else if (typeof log.Answer === 'object') {
// 单个answer对象
const type = log.Answer.type || log.Answer.Type || '未知';
let value = log.Answer.value || log.Answer.Value || log.Answer.data || log.Answer.Data || '未知';
const ttl = log.Answer.TTL || log.Answer.ttl || log.Answer.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
records = `${type}: ${value} (ttl=${ttl})`;
} else if (typeof log.Answer === 'string') {
// 字符串类型的Answer - 处理每行缩进
records = log.Answer.split('\n').map(line => line.trim()).filter(line => line !== '').join('\n');
}
}
// 4. 尝试从log.answer字段获取（小写单数形式）
if (!records && log.answer) {
if (Array.isArray(log.answer)) {
records = log.answer.map(answer => {
const type = answer.type || answer.Type || '未知';
let value = answer.value || answer.Value || answer.data || answer.Data || '未知';
const ttl = answer.TTL || answer.ttl || answer.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
} else if (typeof log.answer === 'object') {
// 单个answer对象
const type = log.answer.type || log.answer.Type || '未知';
let value = log.answer.value || log.answer.Value || log.answer.data || log.answer.Data || '未知';
const ttl = log.answer.TTL || log.answer.ttl || log.answer.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
records = `${type}: ${value} (ttl=${ttl})`;
} else if (typeof log.answer === 'string') {
// 字符串类型的answer - 处理每行缩进
records = log.answer.split('\n').map(line => line.trim()).filter(line => line !== '').join('\n');
}
}
// 5. 尝试从log.Records字段获取
if (!records && log.Records) {
if (Array.isArray(log.Records)) {
records = log.Records.map(record => {
const type = record.type || record.Type || '未知';
let value = record.value || record.Value || record.data || record.Data || '未知';
const ttl = record.TTL || record.ttl || record.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
} else if (typeof log.Records === 'string') {
// 字符串类型的Records - 处理每行缩进
records = log.Records.split('\n').map(line => line.trim()).filter(line => line !== '').join('\n');
}
}
// 6. 尝试从log.records字段获取（小写形式）
if (!records && log.records) {
if (Array.isArray(log.records)) {
records = log.records.map(record => {
const type = record.type || record.Type || '未知';
let value = record.value || record.Value || record.data || record.Data || '未知';
const ttl = record.TTL || record.ttl || record.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
} else if (typeof log.records === 'string') {
// 字符串类型的records - 处理每行缩进
records = log.records.split('\n').map(line => line.trim()).filter(line => line !== '').join('\n');
}
}
// 7. 尝试从Response字段获取（兼容旧格式）
if (!records && dnsResponse && dnsResponse !== '无') {
// 如果Response是JSON字符串，尝试解析
if (dnsResponse.startsWith('[') && dnsResponse.endsWith(']')) {
try {
const parsedResponse = JSON.parse(dnsResponse);
if (Array.isArray(parsedResponse)) {
records = parsedResponse.map(item => {
const type = item.type || item.Type || '未知';
let value = item.value || item.Value || item.data || item.Data || '未知';
const ttl = item.TTL || item.ttl || item.expires || '未知';
// 增强的记录值提取逻辑：处理多种DNS记录格式
if (typeof value === 'string') {
// 如果value是完整的DNS记录字符串，提取出实际值
if (value.includes('\t') || value.includes('\\t')) {
// 处理实际制表符或转义的制表符
const parts = value.replace(/\\t/g, '\t').split('\t');
// 兼容不同长度的记录格式
if (parts.length >= 4) {
// 对于标准DNS响应格式：domain\tttl\tIN\ttype\tvalue
value = parts[parts.length - 1].trim();
} else if (parts.length >= 2) {
// 对于其他格式，使用最后一个字段
value = parts[parts.length - 1].trim();
}
}
// 如果value是JSON字符串，尝试解析
else if (value.startsWith('{') && value.endsWith('}')) {
try {
const parsedValue = JSON.parse(value);
value = parsedValue.data || parsedValue.value || value;
// 解析后的值也需要trim
if (typeof value === 'string') {
value = value.trim();
}
} catch (e) {
// 解析失败，保持原值但trim
value = value.trim();
}
}
// 对于其他所有字符串类型的值，直接trim
else {
value = value.trim();
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
}
} catch (e) {
// 解析失败，直接显示Response内容 - 处理每行缩进
records = dnsResponse.split('\n').map(line => line.trim()).filter(line => line !== '').join('\n');
}
} else {
// Response不是JSON数组 - 处理每行缩进
records = dnsResponse.split('\n').map(line => line.trim()).filter(line => line !== '').join('\n');
}
}
// 8. 如果还是没有解析记录，显示友好提示
if (!records) {
records = '无解析记录';
}
return records;
})()}
</div>
</div>
<div class="col-span-2">
<div class="text-gray-500">DNS服务器:</div>
<div class="text-gray-800">${dnsServer}</div>
</div>
<div class="col-span-2">
<div class="text-gray-500">DNSSEC专用服务器:</div>
<div class="text-gray-800">${dnssecServer}</div>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="border-t border-gray-200 my-3"></div>
<!-- 第2组：响应细节 -->
<div class="text-xs">
<div class="font-medium text-gray-700 mb-2">响应细节</div>
<div class="grid grid-cols-2 gap-y-2 gap-x-4">
<div>
<div class="text-gray-500">响应时间:</div>
<div class="text-gray-800">${responseTime}毫秒</div>
</div>
<div>
<div class="text-gray-500">规则:</div>
<div class="text-gray-800">${blockRule}</div>
</div>
<div>
<div class="text-gray-500">响应代码:</div>
<div class="text-gray-800">无</div>
</div>
<div>
<div class="text-gray-500">缓存状态:</div>
<div class="${fromCache ? 'text-primary' : 'text-gray-500'}">
${fromCache ? '缓存' : '非缓存'}
</div>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="border-t border-gray-200 my-3"></div>
<!-- 第3组：客户端详情 -->
<div class="text-xs">
<div class="font-medium text-gray-700 mb-2">客户端详情</div>
<div>
<div class="text-gray-500">IP地址:</div>
<div class="text-gray-800">${clientIP} (${location})</div>
</div>
</div>
`;
// 组装模态框
modalContent.appendChild(titleBar);
modalContent.appendChild(details);
modalContainer.appendChild(modalContent);
// 添加到页面
document.body.appendChild(modalContainer);
// 点击外部关闭
modalContainer.addEventListener('click', function(e) {
if (e.target === modalContainer) {
document.body.removeChild(modalContainer);
}
});
// ESC键关闭
document.addEventListener('keydown', function handleEsc(e) {
if (e.key === 'Escape') {
document.body.removeChild(modalContainer);
document.removeEventListener('keydown', handleEsc);
}
});
} catch (error) {
console.error('Error in showLogDetailModal:', error);
// 显示错误提示
const errorModal = document.createElement('div');
errorModal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center';
errorModal.style.zIndex = '9999';
const errorContent = document.createElement('div');
errorContent.className = 'bg-white rounded-lg shadow-xl p-6 w-full max-w-md';
errorContent.innerHTML = `
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">错误</h3>
<button onclick="document.body.removeChild(errorModal)" class="text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<div class="text-red-600">
加载日志详情失败: ${error.message}
</div>
`;
errorModal.appendChild(errorContent);
document.body.appendChild(errorModal);
}
}
// 关闭日志详情弹窗
function closeLogDetailModal() {
const modal = document.getElementById('log-detail-modal');
modal.classList.add('hidden');
}
// 初始化日志详情弹窗事件
function initLogDetailModal() {
// 关闭按钮事件
const closeBtn = document.getElementById('close-log-modal-btn');
if (closeBtn) {
closeBtn.addEventListener('click', closeLogDetailModal);
}
// 点击模态框外部关闭
const modal = document.getElementById('log-detail-modal');
if (modal) {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeLogDetailModal();
}
});
}
// ESC键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeLogDetailModal();
}
});
}
// 定期更新日志统计数据（备用方案）
setInterval(() => {
// 只有在查询日志页面时才更新