web重做

2025-11-24 01:53:26 +08:00
parent f499a4a84a
commit 85320611cb
17 changed files with 4936 additions and 2346 deletions
--- a/static/js/modules/query.js
+++ b/static/js/modules/query.js
@@ -0,0 +1,145 @@
+// 初始化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 = '<div class="loading"></div>';
+}
+
+// 显示查询错误
+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 = `<div class="result-item" style="color: #e74c3c;">${message}</div>`;
+}
+
+// 渲染查询结果
+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 += `<div class="result-item"><strong>域名:</strong> <span id="result-domain">${result.domain || ''}</span></div>`;
+    
+    // 状态
+    const statusText = result.isBlocked ? '被屏蔽' : result.isAllowed ? '允许访问' : '未知';
+    const statusClass = result.isBlocked ? 'status-error' : result.isAllowed ? 'status-success' : '';
+    content += `<div class="result-item"><strong>状态:</strong> <span id="result-status" class="${statusClass}">${statusText}</span></div>`;
+    
+    // 规则类型
+    let ruleType = '';
+    if (result.isBlocked) {
+        if (result.isRegexMatch) {
+            ruleType = '正则表达式规则';
+        } else if (result.isDomainMatch) {
+            ruleType = '域名规则';
+        } else {
+            ruleType = '未知规则类型';
+        }
+    } else {
+        ruleType = result.isWhitelist ? '白名单规则' : result.isHosts ? 'Hosts记录' : '未匹配任何规则';
+    }
+    content += `<div class="result-item"><strong>规则类型:</strong> <span id="result-rule-type">${ruleType}</span></div>`;
+    
+    // 匹配规则
+    const matchedRule = result.matchedRule || '无';
+    content += `<div class="result-item"><strong>匹配规则:</strong> <span id="result-rule">${matchedRule}</span></div>`;
+    
+    // Hosts记录
+    const hostsRecord = result.hostsRecord ? `${result.hostsRecord.ip} ${result.hostsRecord.domain}` : '无';
+    content += `<div class="result-item"><strong>Hosts记录:</strong> <span id="result-hosts">${hostsRecord}</span></div>`;
+    
+    // 查询时间
+    const queryTime = `${(result.queryTime || 0).toFixed(2)} ms`;
+    content += `<div class="result-item"><strong>查询时间:</strong> <span id="result-time">${queryTime}</span></div>`;
+    
+    // DNS响应（如果有）
+    if (result.dnsResponse) {
+        content += '<div class="result-item"><strong>DNS响应:</strong></div>';
+        content += '<div class="dns-response">';
+        
+        if (result.dnsResponse.answers && result.dnsResponse.answers.length > 0) {
+            content += '<ul>';
+            result.dnsResponse.answers.forEach(answer => {
+                content += `<li>${answer.name} ${answer.type} ${answer.value}</li>`;
+            });
+            content += '</ul>';
+        } else {
+            content += '<p>无DNS响应记录</p>';
+        }
+        content += '</div>';
+    }
+    
+    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;
+}