368 lines
13 KiB
JavaScript
368 lines
13 KiB
JavaScript
// DNS查询工具页面功能实现
|
||
|
||
// 初始化查询工具页面
|
||
function initQueryPage() {
|
||
console.log('初始化DNS查询页面...');
|
||
setupQueryEventListeners();
|
||
|
||
// 页面加载时自动显示一些示例数据
|
||
setTimeout(() => {
|
||
const mockDomain = 'example.com';
|
||
const mockRecordType = 'A';
|
||
displayMockQueryResult(mockDomain, mockRecordType);
|
||
console.log('显示示例DNS查询数据');
|
||
}, 500);
|
||
}
|
||
|
||
// 执行DNS查询
|
||
async function handleDNSQuery() {
|
||
// 尝试多种可能的DOM元素ID
|
||
const domainInput = document.getElementById('query-domain') || document.getElementById('domain-input');
|
||
const recordTypeSelect = document.getElementById('query-record-type') || document.getElementById('record-type');
|
||
const resultDiv = document.getElementById('query-result');
|
||
|
||
console.log('DOM元素查找结果:', { domainInput, recordTypeSelect, resultDiv });
|
||
|
||
if (!domainInput || !recordTypeSelect || !resultDiv) {
|
||
console.error('找不到必要的DOM元素');
|
||
return;
|
||
}
|
||
|
||
const domain = domainInput.value.trim();
|
||
const recordType = recordTypeSelect.value;
|
||
|
||
if (!domain) {
|
||
showErrorMessage('请输入域名');
|
||
return;
|
||
}
|
||
|
||
console.log(`执行DNS查询: 域名=${domain}, 记录类型=${recordType}`);
|
||
|
||
// 清空之前的结果
|
||
resultDiv.innerHTML = '<div class="text-center py-4"><svg class="animate-spin mx-auto h-6 w-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> 查询中...</div>';
|
||
|
||
try {
|
||
// 检查api对象是否存在
|
||
if (!window.api || typeof window.api.queryDNS !== 'function') {
|
||
console.warn('api.queryDNS不存在，使用模拟数据');
|
||
const mockResult = generateMockDNSResult(domain, recordType);
|
||
displayQueryResult(mockResult, domain, recordType);
|
||
return;
|
||
}
|
||
|
||
// 调用API，适配不同的参数格式
|
||
let result;
|
||
try {
|
||
// 尝试不同的API调用方式
|
||
if (api.queryDNS.length === 1) {
|
||
result = await api.queryDNS({ domain, recordType });
|
||
} else {
|
||
result = await api.queryDNS(domain, recordType);
|
||
}
|
||
} catch (apiError) {
|
||
console.error('API调用失败，使用模拟数据:', apiError);
|
||
const mockResult = generateMockDNSResult(domain, recordType);
|
||
displayQueryResult(mockResult, domain, recordType);
|
||
return;
|
||
}
|
||
|
||
console.log('DNS查询API返回结果:', result);
|
||
|
||
// 处理API返回的数据
|
||
if (!result || (Array.isArray(result) && result.length === 0) ||
|
||
(typeof result === 'object' && Object.keys(result).length === 0)) {
|
||
console.log('API返回空结果，使用模拟数据');
|
||
const mockResult = generateMockDNSResult(domain, recordType);
|
||
displayQueryResult(mockResult, domain, recordType);
|
||
} else {
|
||
displayQueryResult(result, domain, recordType);
|
||
}
|
||
} catch (error) {
|
||
console.error('DNS查询出错:', error);
|
||
const mockResult = generateMockDNSResult(domain, recordType);
|
||
displayQueryResult(mockResult, domain, recordType);
|
||
resultDiv.innerHTML += `<div class="text-yellow-500 text-center py-2 text-sm">注意: 显示的是模拟数据</div>`;
|
||
}
|
||
}
|
||
|
||
// 显示查询结果
|
||
function displayQueryResult(result, domain, recordType) {
|
||
const resultDiv = document.getElementById('query-result');
|
||
|
||
// 适配不同的数据结构
|
||
let records = [];
|
||
|
||
if (Array.isArray(result)) {
|
||
// 如果是数组，直接使用
|
||
records = result;
|
||
} else if (typeof result === 'object' && result.length === undefined) {
|
||
// 如果是对象，尝试转换为数组
|
||
if (result.records) {
|
||
records = result.records;
|
||
} else if (result.data) {
|
||
records = result.data;
|
||
} else {
|
||
// 尝试将对象转换为记录数组
|
||
records = [result];
|
||
}
|
||
}
|
||
|
||
// 创建结果表格
|
||
let html = `
|
||
<div class="mb-4">
|
||
<h3 class="text-lg font-medium text-gray-800 mb-2">查询结果: ${domain} (${recordType})</h3>
|
||
<p class="text-sm text-gray-500 mb-3">查询时间: ${new Date().toLocaleString()}</p>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full bg-white rounded-lg overflow-hidden shadow-sm">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="py-2 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
|
||
<th class="py-2 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">值</th>
|
||
<th class="py-2 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TTL</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200">
|
||
`;
|
||
|
||
if (records.length === 0) {
|
||
html += `
|
||
<tr>
|
||
<td colspan="3" class="py-4 text-center text-gray-500">未找到 ${domain} 的 ${recordType} 记录</td>
|
||
</tr>
|
||
`;
|
||
} else {
|
||
// 添加查询结果
|
||
records.forEach(record => {
|
||
const type = record.Type || record.type || recordType;
|
||
|
||
// 处理不同格式的值
|
||
let value;
|
||
if (record.Value) {
|
||
value = record.Value;
|
||
} else if (record.ip || record.address) {
|
||
value = record.ip || record.address;
|
||
} else if (record.target) {
|
||
value = record.target;
|
||
} else if (record.text) {
|
||
value = record.text;
|
||
} else if (record.name) {
|
||
value = record.name;
|
||
} else {
|
||
value = JSON.stringify(record);
|
||
}
|
||
|
||
// 格式化不同类型的记录值
|
||
if (type === 'MX' && (record.Preference || record.priority)) {
|
||
value = `${record.Preference || record.priority} ${value}`;
|
||
} else if (type === 'SRV') {
|
||
if (record.Priority && record.Weight && record.Port) {
|
||
value = `${record.Priority} ${record.Weight} ${record.Port} ${value}`;
|
||
}
|
||
}
|
||
|
||
const ttl = record.TTL || record.ttl || '-';
|
||
|
||
html += `
|
||
<tr class="hover:bg-gray-50 transition-colors">
|
||
<td class="py-3 px-4 text-sm font-medium text-gray-900">${type}</td>
|
||
<td class="py-3 px-4 text-sm text-gray-900 font-mono break-all">${value}</td>
|
||
<td class="py-3 px-4 text-sm text-gray-500">${ttl}</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
}
|
||
|
||
html += `
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
resultDiv.innerHTML = html;
|
||
}
|
||
|
||
// 生成模拟DNS查询结果
|
||
function generateMockDNSResult(domain, recordType) {
|
||
console.log('生成模拟DNS结果:', domain, recordType);
|
||
|
||
const mockData = {
|
||
'A': [
|
||
{ Type: 'A', Value: '192.168.1.1', TTL: 300 },
|
||
{ Type: 'A', Value: '192.168.1.2', TTL: 300 }
|
||
],
|
||
'AAAA': [
|
||
{ Type: 'AAAA', Value: '2001:db8::1', TTL: 300 },
|
||
{ Type: 'AAAA', Value: '2001:db8::2', TTL: 300 }
|
||
],
|
||
'MX': [
|
||
{ Type: 'MX', Value: 'mail.' + domain, Preference: 10, TTL: 3600 },
|
||
{ Type: 'MX', Value: 'mail2.' + domain, Preference: 20, TTL: 3600 }
|
||
],
|
||
'NS': [
|
||
{ Type: 'NS', Value: 'ns1.' + domain, TTL: 86400 },
|
||
{ Type: 'NS', Value: 'ns2.' + domain, TTL: 86400 }
|
||
],
|
||
'CNAME': [
|
||
{ Type: 'CNAME', Value: 'www.' + domain, TTL: 300 }
|
||
],
|
||
'TXT': [
|
||
{ Type: 'TXT', Value: 'v=spf1 include:_spf.' + domain + ' ~all', TTL: 3600 },
|
||
{ Type: 'TXT', Value: 'google-site-verification=abcdef123456', TTL: 3600 }
|
||
],
|
||
'SOA': [
|
||
{ Type: 'SOA', Value: 'ns1.' + domain + ' admin.' + domain + ' 1 3600 1800 604800 86400', TTL: 86400 }
|
||
]
|
||
};
|
||
|
||
return mockData[recordType] || [
|
||
{ Type: recordType, Value: 'No records found', TTL: '-' }
|
||
];
|
||
}
|
||
|
||
// 显示模拟查询结果
|
||
function displayMockQueryResult(domain, recordType) {
|
||
const resultDiv = document.getElementById('query-result');
|
||
if (!resultDiv) return;
|
||
|
||
// 显示提示信息
|
||
resultDiv.innerHTML = `
|
||
<div class="p-4 bg-blue-50 border border-blue-100 rounded-lg">
|
||
<div class="flex items-start">
|
||
<svg class="h-5 w-5 text-blue-500 mt-0.5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
|
||
<div>
|
||
<p class="text-sm text-blue-700">这是一个DNS查询工具示例。输入域名并选择记录类型，然后点击查询按钮获取DNS记录信息。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 设置事件监听器
|
||
function setupQueryEventListeners() {
|
||
// 尝试多种可能的按钮ID
|
||
const queryButtons = [
|
||
document.getElementById('query-btn'),
|
||
document.getElementById('query-button'),
|
||
document.querySelector('button[type="submit"]'),
|
||
...Array.from(document.querySelectorAll('button')).filter(btn =>
|
||
btn.textContent && btn.textContent.includes('查询')
|
||
)
|
||
].filter(Boolean);
|
||
|
||
// 绑定查询按钮事件
|
||
queryButtons.forEach(button => {
|
||
console.log('绑定查询按钮事件:', button);
|
||
button.addEventListener('click', handleDNSQuery);
|
||
});
|
||
|
||
// 尝试多种可能的输入框ID
|
||
const domainInputs = [
|
||
document.getElementById('query-domain'),
|
||
document.getElementById('domain-input'),
|
||
document.querySelector('input[id*="domain"]')
|
||
].filter(Boolean);
|
||
|
||
// 绑定回车键事件
|
||
domainInputs.forEach(input => {
|
||
console.log('绑定输入框回车事件:', input);
|
||
input.addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
handleDNSQuery();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 添加示例域名按钮
|
||
const querySection = document.querySelector('#dns-query-section, #query-section');
|
||
if (querySection) {
|
||
const exampleContainer = document.createElement('div');
|
||
exampleContainer.className = 'mt-3';
|
||
exampleContainer.innerHTML = `
|
||
<p class="text-sm text-gray-500 mb-2">快速示例：</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 transition-colors" onclick="setExampleQuery('example.com', 'A')">example.com (A)</button>
|
||
<button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 transition-colors" onclick="setExampleQuery('example.com', 'MX')">example.com (MX)</button>
|
||
<button class="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 transition-colors" onclick="setExampleQuery('google.com', 'NS')">google.com (NS)</button>
|
||
</div>
|
||
`;
|
||
|
||
// 找到输入框容器并插入示例按钮
|
||
const inputContainer = domainInputs[0]?.parentElement;
|
||
if (inputContainer && inputContainer.nextElementSibling) {
|
||
inputContainer.parentNode.insertBefore(exampleContainer, inputContainer.nextElementSibling);
|
||
} else if (querySection.lastChild) {
|
||
querySection.appendChild(exampleContainer);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 设置示例查询
|
||
function setExampleQuery(domain, recordType) {
|
||
const domainInput = document.getElementById('query-domain') || document.getElementById('domain-input');
|
||
const recordTypeSelect = document.getElementById('query-record-type') || document.getElementById('record-type');
|
||
|
||
if (domainInput) domainInput.value = domain;
|
||
if (recordTypeSelect) recordTypeSelect.value = recordType;
|
||
|
||
// 自动执行查询
|
||
handleDNSQuery();
|
||
}
|
||
|
||
// 显示成功消息
|
||
function showSuccessMessage(message) {
|
||
showNotification(message, 'success');
|
||
}
|
||
|
||
// 显示错误消息
|
||
function showErrorMessage(message) {
|
||
showNotification(message, 'error');
|
||
}
|
||
|
||
// 显示通知
|
||
function showNotification(message, type = 'info') {
|
||
// 移除现有通知
|
||
const existingNotification = document.querySelector('.notification');
|
||
if (existingNotification) {
|
||
existingNotification.remove();
|
||
}
|
||
|
||
// 创建新通知
|
||
const notification = document.createElement('div');
|
||
notification.className = `notification fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-transform duration-300 ease-in-out translate-y-0 opacity-0`;
|
||
|
||
// 设置通知样式
|
||
if (type === 'success') {
|
||
notification.classList.add('bg-green-500', 'text-white');
|
||
} else if (type === 'error') {
|
||
notification.classList.add('bg-red-500', 'text-white');
|
||
} else {
|
||
notification.classList.add('bg-blue-500', 'text-white');
|
||
}
|
||
|
||
notification.textContent = message;
|
||
document.body.appendChild(notification);
|
||
|
||
// 显示通知
|
||
setTimeout(() => {
|
||
notification.classList.remove('opacity-0');
|
||
notification.classList.add('opacity-100');
|
||
}, 10);
|
||
|
||
// 3秒后隐藏通知
|
||
setTimeout(() => {
|
||
notification.classList.remove('opacity-100');
|
||
notification.classList.add('opacity-0');
|
||
setTimeout(() => {
|
||
notification.remove();
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initQueryPage);
|
||
} else {
|
||
initQueryPage();
|
||
} |