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
2025-12-26 09:02:59 +08:00
parent 356310ae75
commit b48dc4ed27
18 changed files with 1178 additions and 348 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 ''; // 默认返回空字符串

23
static/js/dashboard.js
View File

@@ -2964,33 +2964,10 @@ window.addEventListener('hashchange', handleHashChange);
// 初始化hash路由 - 确保在页面加载时就能被调用
initHashRoute();
// 侧边栏切换
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('-translate-x-full');
}
// 响应式处理
function handleResponsive() {
const toggleBtn = document.getElementById('toggle-sidebar');
const sidebar = document.getElementById('sidebar');
toggleBtn.addEventListener('click', toggleSidebar);
// 初始状态处理
function updateSidebarState() {
if (window.innerWidth < 1024) {
sidebar.classList.add('-translate-x-full');
} else {
sidebar.classList.remove('-translate-x-full');
}
}
updateSidebarState();
// 窗口大小改变时处理
window.addEventListener('resize', () => {
updateSidebarState();
// 更新所有图表大小
if (dnsRequestsChart) {

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

587
static/js/logs.js
View File

@@ -107,13 +107,25 @@ function initLogsPage() {
// 绑定事件
bindLogsEvents();
// 初始化日志详情弹窗
initLogDetailModal();
// 建立WebSocket连接，用于实时更新统计数据和图表
connectLogsWebSocket();
// 窗口大小改变时重新加载日志表格
window.addEventListener('resize', handleWindowResize);
// 在页面卸载时清理资源
window.addEventListener('beforeunload', cleanupLogsResources);
}
// 处理窗口大小改变
function handleWindowResize() {
// 重新加载日志表格，以适应新的屏幕尺寸
loadLogs();
}
// 清理资源
function cleanupLogsResources() {
// 清除WebSocket连接
@@ -127,6 +139,9 @@ function cleanupLogsResources() {
clearTimeout(logsWsReconnectTimer);
logsWsReconnectTimer = null;
}
// 清除窗口大小改变事件监听器
window.removeEventListener('resize', handleWindowResize);
}
// 绑定事件
@@ -425,13 +440,16 @@ async function updateLogsTable(logs) {
return;
}
// 检测是否为移动设备
const isMobile = window.innerWidth <= 768;
// 填充表格
for (const log of logs) {
const row = document.createElement('tr');
row.className = 'border-b border-gray-100 hover:bg-gray-50 transition-colors';
// 格式化时间 - 两行显示，第一行显示时间，第二行显示日期
const time = new Date(log.Timestamp);
const time = new Date(log.timestamp);
const formattedDate = time.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
@@ -445,13 +463,13 @@ async function updateLogsTable(logs) {
// 根据结果添加不同的背景色
let rowClass = '';
switch (log.Result) {
switch (log.result) {
case 'blocked':
rowClass = 'bg-red-50'; // 淡红色填充
break;
case 'allowed':
// 检查是否是规则允许项目
if (log.BlockRule && log.BlockRule.includes('allow')) {
if (log.blockRule && log.blockRule.includes('allow')) {
rowClass = 'bg-green-50'; // 规则允许项目用淡绿色填充
} else {
rowClass = ''; // 允许的不填充
@@ -469,7 +487,7 @@ async function updateLogsTable(logs) {
// 添加被屏蔽或允许显示，并增加颜色
let statusText = '';
let statusClass = '';
switch (log.Result) {
switch (log.result) {
case 'blocked':
statusText = '被屏蔽';
statusClass = 'text-danger';
@@ -488,16 +506,16 @@ async function updateLogsTable(logs) {
}
// 检查域名是否在跟踪器数据库中
const trackerInfo = await isDomainInTrackerDatabase(log.Domain);
const trackerInfo = await isDomainInTrackerDatabase(log.domain);
const isTracker = trackerInfo !== null;
// 构建行内容 - 两行显示，时间列显示时间和日期，请求列显示域名和类型状态
// 构建行内容 - 根据设备类型决定显示内容
// 添加缓存状态显示
const cacheStatusClass = log.FromCache ? 'text-primary' : 'text-gray-500';
const cacheStatusText = log.FromCache ? '缓存' : '非缓存';
const cacheStatusClass = log.fromCache ? 'text-primary' : 'text-gray-500';
const cacheStatusText = log.fromCache ? '缓存' : '非缓存';
// 检查域名是否被拦截
const isBlocked = log.Result === 'blocked';
const isBlocked = log.result === 'blocked';
// 构建跟踪器浮窗内容
const trackerTooltip = isTracker ? `
@@ -510,36 +528,58 @@ 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="4">
<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-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 +616,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 +982,467 @@ async function unblockDomain(domain) {
}
}
// 独立的DNS记录格式化函数
function formatDNSRecords(log, result) {
if (result === 'blocked') return '无';
let records = '';
const sources = [
log.answers,
log.answer,
log.Records,
log.records,
log.response
];
for (const source of sources) {
if (records) break;
if (!source || source === '无') continue;
// 处理数组类型
if (Array.isArray(source)) {
records = source.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 || '未知';
// 增强的记录值提取逻辑
if (typeof value === 'string') {
value = value.trim();
// 处理制表符分隔的格式
if (value.includes('\t') || value.includes('\\t')) {
const parts = value.replace(/\\t/g, '\t').split('\t');
if (parts.length >= 4) {
value = parts[parts.length - 1].trim();
}
}
// 处理JSON格式
else if (value.startsWith('{') && value.endsWith('}')) {
try {
const parsed = JSON.parse(value);
value = parsed.data || parsed.value || value;
} catch (e) {}
}
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
}
// 处理字符串类型
else if (typeof source === 'string') {
// 尝试解析为JSON数组
if (source.startsWith('[') && source.endsWith(']')) {
try {
const parsed = JSON.parse(source);
if (Array.isArray(parsed)) {
records = parsed.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 || '未知';
if (typeof value === 'string') {
value = value.trim();
}
return `${type}: ${value} (ttl=${ttl})`;
}).join('\n').trim();
}
} catch (e) {
// 解析失败，尝试直接格式化
records = formatDNSString(source);
}
} else {
// 直接格式化字符串
records = formatDNSString(source);
}
}
}
return records || '无解析记录';
}
// 格式化DNS字符串记录
function formatDNSString(str) {
// 处理可能的转义字符并分割行
const recordLines = str.split(/\r?\n/).map(line => line.replace(/^\s+/, '')).filter(line => line.trim() !== '');
return recordLines.map(line => {
// 检查是否已经是标准格式
if (line.includes(':') && line.includes('(')) {
return line;
}
// 尝试解析为标准DNS格式
const parts = line.split(/\s+/);
if (parts.length >= 5) {
const type = parts[3];
const value = parts.slice(4).join(' ');
const ttl = parts[1];
return `${type}: ${value} (ttl=${ttl})`;
}
// 无法解析，返回原始行但移除前导空格
return line.replace(/^\s+/, '');
}).join('\n');
}
// 显示日志详情弹窗
async function showLogDetailModal(log) {
console.log('showLogDetailModal called with log:', JSON.stringify(log, null, 2)); // 输出完整的log对象
if (!log) {
console.error('No log data provided!');
return;
}
try {
// 安全获取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 dnsRecords = formatDNSRecords(log, result);
// 创建模态框容器
const modalContainer = document.createElement('div');
modalContainer.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 animate-fade-in';
modalContainer.style.zIndex = '9999';
// 创建模态框内容
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';
// 创建标题栏
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';
const title = document.createElement('h3');
title.className = 'text-xl font-semibold text-gray-900';
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.onclick = () => closeModal();
header.appendChild(title);
header.appendChild(closeButton);
// 创建内容区域
const content = document.createElement('div');
content.className = 'p-6 space-y-6';
// 基本信息部分
const basicInfo = document.createElement('div');
basicInfo.className = 'space-y-4';
const basicInfoTitle = document.createElement('h4');
basicInfoTitle.className = 'text-sm font-medium text-gray-700 uppercase tracking-wider';
basicInfoTitle.textContent = '基本信息';
const basicInfoGrid = document.createElement('div');
basicInfoGrid.className = 'grid grid-cols-1 md:grid-cols-2 gap-4';
// 添加基本信息项
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>
<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>
<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'}">
${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>
<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>
`;
// DNS特性
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' : ''}
${!dnssec && !edns ? '无' : ''}
</div>
`;
// 跟踪器信息
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">
${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>
`;
// 解析记录
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>
`;
// 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>
`;
// 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>
`;
basicInfoGrid.appendChild(dnsFeatures);
basicInfoGrid.appendChild(trackerDiv);
basicInfoGrid.appendChild(recordsDiv);
basicInfoGrid.appendChild(dnsServerDiv);
basicInfoGrid.appendChild(dnssecServerDiv);
basicInfo.appendChild(basicInfoTitle);
basicInfo.appendChild(basicInfoGrid);
// 响应细节部分
const responseDetails = document.createElement('div');
responseDetails.className = 'space-y-4 pt-4 border-t border-gray-200';
const responseDetailsTitle = document.createElement('h4');
responseDetailsTitle.className = 'text-sm font-medium text-gray-700 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>
<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>
<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'}">
${fromCache ? '缓存' : '非缓存'}
</div>
</div>
`;
// 只有被屏蔽或者有自定义规则时才显示规则信息
if (result === 'blocked' || (blockRule && blockRule !== '无' && blockRule !== '-')) {
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>
`;
}
const responseGrid = document.createElement('div');
responseGrid.className = 'grid grid-cols-1 md:grid-cols-2 gap-4';
responseGrid.innerHTML = responseDetailsHTML;
responseDetails.appendChild(responseDetailsTitle);
responseDetails.appendChild(responseGrid);
// 客户端详情部分
const clientDetails = document.createElement('div');
clientDetails.className = 'space-y-4 pt-4 border-t border-gray-200';
const clientDetailsTitle = document.createElement('h4');
clientDetailsTitle.className = 'text-sm font-medium text-gray-700 uppercase tracking-wider';
clientDetailsTitle.textContent = '客户端详情';
const clientIPDiv = document.createElement('div');
clientIPDiv.className = 'space-y-1';
clientIPDiv.innerHTML = `
<div class="text-xs text-gray-500">IP地址</div>
<div class="text-sm font-medium text-gray-900">${clientIP} (${location})</div>
`;
clientDetails.appendChild(clientDetailsTitle);
clientDetails.appendChild(clientIPDiv);
// 组装内容
content.appendChild(basicInfo);
content.appendChild(responseDetails);
content.appendChild(clientDetails);
// 组装模态框
modalContent.appendChild(header);
modalContent.appendChild(content);
modalContainer.appendChild(modalContent);
// 添加到页面
document.body.appendChild(modalContainer);
// 关闭模态框函数
function closeModal() {
modalContainer.classList.add('animate-fade-out');
modalContent.classList.add('animate-slide-out');
// 等待动画结束后移除元素
setTimeout(() => {
document.body.removeChild(modalContainer);
}, 300);
}
// 点击外部关闭
modalContainer.addEventListener('click', (e) => {
if (e.target === modalContainer) {
closeModal();
}
});
// ESC键关闭
const handleEsc = (e) => {
if (e.key === 'Escape') {
closeModal();
document.removeEventListener('keydown', handleEsc);
}
};
document.addEventListener('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 p-4 animate-fade-in';
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.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">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<div class="text-red-600 text-sm">
加载日志详情失败: ${error.message}
</div>
`;
errorModal.appendChild(errorContent);
document.body.appendChild(errorModal);
// 关闭错误模态框函数
function closeErrorModal() {
errorModal.classList.add('animate-fade-out');
errorContent.classList.add('animate-slide-out');
// 等待动画结束后移除元素
setTimeout(() => {
document.body.removeChild(errorModal);
}, 300);
}
// ESC键关闭错误模态框
const handleErrorEsc = (e) => {
if (e.key === 'Escape') {
closeErrorModal();
document.removeEventListener('keydown', handleErrorEsc);
}
};
document.addEventListener('keydown', handleErrorEsc);
}
}
// 关闭日志详情弹窗
// 获取响应代码文本
function getResponseCodeText(rcode) {
const rcodeMap = {
0: 'NOERROR',
1: 'FORMERR',
2: 'SERVFAIL',
3: 'NXDOMAIN',
4: 'NOTIMP',
5: 'REFUSED',
6: 'YXDOMAIN',
7: 'YXRRSET',
8: 'NXRRSET',
9: 'NOTAUTH',
10: 'NOTZONE'
};
return rcodeMap[rcode] || `UNKNOWN(${rcode})`;
}
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(() => {
// 只有在查询日志页面时才更新

2
static/js/main.js
View File

@@ -28,7 +28,7 @@ function setupNavigation() {
// 移动端侧边栏切换
const toggleSidebar = document.getElementById('toggle-sidebar');
const closeSidebarBtn = document.getElementById('close-sidebar');
const sidebar = document.getElementById('sidebar');
const sidebar = document.getElementById('mobile-sidebar');
const sidebarOverlay = document.getElementById('sidebar-overlay');
// 打开侧边栏函数