更新beta2

2025-11-25 01:34:20 +08:00
parent 9f92dcb86d
commit d9a8462cf6
8 changed files with 1395 additions and 719 deletions
--- a/static/js/query.js
+++ b/static/js/query.js
@@ -0,0 +1,157 @@
+// 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();
+}