// 初始化DNS查询面板 function initQueryPanel() { // 初始化事件监听器 initQueryEventListeners(); } // 初始化事件监听器 function initQueryEventListeners() { // 查询按钮 document.getElementById('run-query').addEventListener('click', runDnsQuery); // 按Enter键执行查询 document.getElementById('query-domain').addEventListener('keypress', function(e) { if (e.key === 'Enter') { runDnsQuery(); } }); } // 执行DNS查询 function runDnsQuery() { const domainInput = document.getElementById('query-domain'); const domain = domainInput.value.trim(); if (!domain) { window.showNotification('请输入要查询的域名', 'warning'); domainInput.focus(); return; } // 显示查询中状态 showQueryLoading(); apiRequest('/query?domain=' + domain, 'GET', { domain: domain }) .then(data => { renderQueryResult(data); }) .catch(error => { console.error('DNS查询失败:', error); showQueryError('查询失败,请稍后重试'); window.showNotification('DNS查询失败', 'error'); }); } // 显示查询加载状态 function showQueryLoading() { const resultContainer = document.getElementById('query-result-container'); resultContainer.classList.remove('hidden'); // 清空之前的结果 const resultHeader = resultContainer.querySelector('.result-header h3'); const resultContent = resultContainer.querySelector('.result-content'); resultHeader.textContent = '查询中...'; resultContent.innerHTML = '
'; } // 显示查询错误 function showQueryError(message) { const resultContainer = document.getElementById('query-result-container'); resultContainer.classList.remove('hidden'); const resultHeader = resultContainer.querySelector('.result-header h3'); const resultContent = resultContainer.querySelector('.result-content'); resultHeader.textContent = '查询错误'; resultContent.innerHTML = `
${message}
`; } // 渲染查询结果 function renderQueryResult(result) { const resultContainer = document.getElementById('query-result-container'); resultContainer.classList.remove('hidden'); const resultHeader = resultContainer.querySelector('.result-header h3'); const resultContent = resultContainer.querySelector('.result-content'); resultHeader.textContent = '查询结果'; // 根据查询结果构建内容 let content = ''; // 域名 content += `
域名: ${result.domain || ''}
`; // 状态 const statusText = result.isBlocked ? '被屏蔽' : result.isAllowed ? '允许访问' : '未知'; const statusClass = result.isBlocked ? 'status-error' : result.isAllowed ? 'status-success' : ''; content += `
状态: ${statusText}
`; // 规则类型 let ruleType = ''; if (result.isBlocked) { if (result.isRegexMatch) { ruleType = '正则表达式规则'; } else if (result.isDomainMatch) { ruleType = '域名规则'; } else { ruleType = '未知规则类型'; } } else { ruleType = result.isWhitelist ? '白名单规则' : result.isHosts ? 'Hosts记录' : '未匹配任何规则'; } content += `
规则类型: ${ruleType}
`; // 匹配规则 const matchedRule = result.matchedRule || '无'; content += `
匹配规则: ${matchedRule}
`; // Hosts记录 const hostsRecord = result.hostsRecord ? `${result.hostsRecord.ip} ${result.hostsRecord.domain}` : '无'; content += `
Hosts记录: ${hostsRecord}
`; // 查询时间 const queryTime = `${(result.queryTime || 0).toFixed(2)} ms`; content += `
查询时间: ${queryTime}
`; // DNS响应(如果有) if (result.dnsResponse) { content += '
DNS响应:
'; content += '
'; if (result.dnsResponse.answers && result.dnsResponse.answers.length > 0) { content += ''; } else { content += '

无DNS响应记录

'; } content += '
'; } resultContent.innerHTML = content; // 更新结果元素的内容(确保数据一致性) document.getElementById('result-domain').textContent = result.domain || ''; document.getElementById('result-status').textContent = statusText; document.getElementById('result-status').className = statusClass; document.getElementById('result-rule-type').textContent = ruleType; document.getElementById('result-rule').textContent = matchedRule; document.getElementById('result-hosts').textContent = hostsRecord; document.getElementById('result-time').textContent = queryTime; }