dns-server/static/js/query.js

// DNS查询工具页面功能实现

// 初始化查询工具页面
function initQueryPage() {
  setupQueryEventListeners();
}

// 执行DNS查询
async function handleDNSQuery() {
  const domainInput = document.getElementById('query-domain');
  const recordTypeSelect = document.getElementById('query-record-type');
  const resultDiv = document.getElementById('query-result');
  
  const domain = domainInput.value.trim();
  const recordType = recordTypeSelect.value;
  
  if (!domain) {
    showErrorMessage('请输入域名');
    return;
  }
  
  // 清空之前的结果
  resultDiv.innerHTML = '<div class="text-center py-4"><i class="fa fa-spinner fa-spin text-primary"></i> 查询中...</div>';
  
  try {
    const result = await api.queryDNS(domain, recordType);
    displayQueryResult(result, domain, recordType);
  } catch (error) {
    resultDiv.innerHTML = `<div class="text-red-500 text-center py-4">查询失败: ${error.message}</div>`;
  }
}

// 显示查询结果
function displayQueryResult(result, domain, recordType) {
  const resultDiv = document.getElementById('query-result');
  
  if (!result || result.length === 0) {
    resultDiv.innerHTML = `<div class="text-gray-500 text-center py-4">未找到 ${domain} 的 ${recordType} 记录</div>`;
    return;
  }
  
  // 创建结果表格
  let html = `
    <div class="mb-4">
      <h3 class="text-lg font-medium text-gray-800 mb-2">查询结果: ${domain} (${recordType})</h3>
      <div class="overflow-x-auto">
        <table class="min-w-full bg-white rounded-lg overflow-hidden">
          <thead class="bg-gray-100">
            <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">
  `;
  
  // 添加查询结果
  result.forEach(record => {
    const type = record.Type || recordType;
    let value = record.Value;
    
    // 格式化不同类型的记录值
    if (type === 'MX' && record.Preference) {
      value = `${record.Preference} ${value}`;
    } else if (type === 'SRV') {
      value = `${record.Priority} ${record.Weight} ${record.Port} ${value}`;
    }
    
    html += `
      <tr>
        <td class="py-2 px-4 text-sm text-gray-900">${type}</td>
        <td class="py-2 px-4 text-sm text-gray-900 font-mono break-all">${value}</td>
        <td class="py-2 px-4 text-sm text-gray-500">${record.TTL || '-'}</td>
      </tr>
    `;
  });
  
  html += `
          </tbody>
        </table>
      </div>
    </div>
  `;
  
  resultDiv.innerHTML = html;
}

// 设置事件监听器
function setupQueryEventListeners() {
  // 查询按钮
  document.getElementById('query-btn')?.addEventListener('click', handleDNSQuery);
  
  // 按回车键查询
  document.getElementById('query-domain')?.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      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();
}