更新beta2
This commit is contained in:
Alex Yang
100
static/js/api.js
Normal file
100
static/js/api.js
Normal file
@@ -0,0 +1,100 @@
|
||||
// API模块 - 统一管理所有API调用
|
||||
|
||||
// API路径定义
|
||||
const API_BASE_URL = '/api';
|
||||
|
||||
// API请求封装
|
||||
async function apiRequest(endpoint, method = 'GET', data = null) {
|
||||
const url = `${API_BASE_URL}${endpoint}`;
|
||||
const options = {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
};
|
||||
|
||||
if (data) {
|
||||
options.body = JSON.stringify(data);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(url, options);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || `请求失败: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('API请求错误:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// API方法集合
|
||||
// API方法集合
|
||||
const api = {
|
||||
// 获取统计信息
|
||||
getStats: () => apiRequest('/stats'),
|
||||
|
||||
// 获取系统状态
|
||||
getStatus: () => apiRequest('/status'),
|
||||
|
||||
// 获取Top屏蔽域名
|
||||
getTopBlockedDomains: () => apiRequest('/top-blocked'),
|
||||
|
||||
// 获取Top解析域名
|
||||
getTopResolvedDomains: () => apiRequest('/top-resolved'),
|
||||
|
||||
// 获取最近屏蔽域名
|
||||
getRecentBlockedDomains: () => apiRequest('/recent-blocked'),
|
||||
|
||||
// 获取小时统计
|
||||
getHourlyStats: () => apiRequest('/hourly-stats'),
|
||||
|
||||
// 获取屏蔽规则
|
||||
getShieldRules: () => apiRequest('/shield'),
|
||||
|
||||
// 添加屏蔽规则
|
||||
addShieldRule: (rule) => apiRequest('/shield', 'POST', { rule }),
|
||||
|
||||
// 删除屏蔽规则
|
||||
deleteShieldRule: (rule) => apiRequest('/shield', 'DELETE', { rule }),
|
||||
|
||||
// 更新远程规则
|
||||
updateRemoteRules: () => apiRequest('/shield', 'PUT', { action: 'update' }),
|
||||
|
||||
// 获取黑名单列表
|
||||
getBlacklists: () => apiRequest('/shield/blacklists'),
|
||||
|
||||
// 添加黑名单
|
||||
addBlacklist: (url) => apiRequest('/shield/blacklists', 'POST', { url }),
|
||||
|
||||
// 删除黑名单
|
||||
deleteBlacklist: (url) => apiRequest('/shield/blacklists', 'DELETE', { url }),
|
||||
|
||||
// 获取Hosts内容
|
||||
getHosts: () => apiRequest('/shield/hosts'),
|
||||
|
||||
// 保存Hosts内容
|
||||
saveHosts: (content) => apiRequest('/shield/hosts', 'POST', { content }),
|
||||
|
||||
// 刷新Hosts
|
||||
refreshHosts: () => apiRequest('/shield/hosts', 'PUT', { action: 'refresh' }),
|
||||
|
||||
// 执行DNS查询
|
||||
queryDNS: (domain, recordType = 'A') => apiRequest(`/query?domain=${encodeURIComponent(domain)}&type=${recordType}`),
|
||||
|
||||
// 获取系统配置
|
||||
getConfig: () => apiRequest('/config'),
|
||||
|
||||
// 保存系统配置
|
||||
saveConfig: (config) => apiRequest('/config', 'POST', config),
|
||||
|
||||
// 重启服务
|
||||
restartService: () => apiRequest('/config/restart', 'POST'),
|
||||
};
|
||||
|
||||
// 导出API工具
|
||||
window.api = api;
|
||||
154
static/js/config.js
Normal file
154
static/js/config.js
Normal file
@@ -0,0 +1,154 @@
|
||||
// 配置管理页面功能实现
|
||||
|
||||
// 初始化配置管理页面
|
||||
function initConfigPage() {
|
||||
loadConfig();
|
||||
setupConfigEventListeners();
|
||||
}
|
||||
|
||||
// 加载系统配置
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const config = await api.getConfig();
|
||||
populateConfigForm(config);
|
||||
} catch (error) {
|
||||
showErrorMessage('加载配置失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 填充配置表单
|
||||
function populateConfigForm(config) {
|
||||
// DNS配置
|
||||
document.getElementById('dns-port')?.value = config.DNSServer.Port || 53;
|
||||
document.getElementById('dns-upstream-servers')?.value = (config.DNSServer.UpstreamServers || []).join(', ');
|
||||
document.getElementById('dns-timeout')?.value = config.DNSServer.Timeout || 5;
|
||||
document.getElementById('dns-stats-file')?.value = config.DNSServer.StatsFile || './stats.json';
|
||||
document.getElementById('dns-save-interval')?.value = config.DNSServer.SaveInterval || 300;
|
||||
|
||||
// HTTP配置
|
||||
document.getElementById('http-port')?.value = config.HTTPServer.Port || 8080;
|
||||
document.getElementById('http-host')?.value = config.HTTPServer.Host || '0.0.0.0';
|
||||
document.getElementById('http-api-enabled')?.checked = config.HTTPServer.APIEnabled !== false;
|
||||
|
||||
// 屏蔽配置
|
||||
document.getElementById('shield-local-rules-file')?.value = config.Shield.LocalRulesFile || './rules.txt';
|
||||
document.getElementById('shield-remote-rules-urls')?.value = (config.Shield.RemoteRulesURLs || []).join('\n');
|
||||
document.getElementById('shield-update-interval')?.value = config.Shield.UpdateInterval || 3600;
|
||||
document.getElementById('shield-hosts-file')?.value = config.Shield.HostsFile || '/etc/hosts';
|
||||
document.getElementById('shield-block-method')?.value = config.Shield.BlockMethod || '0.0.0.0';
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
async function handleSaveConfig() {
|
||||
const formData = collectFormData();
|
||||
|
||||
try {
|
||||
await api.saveConfig(formData);
|
||||
showSuccessMessage('配置保存成功');
|
||||
} catch (error) {
|
||||
showErrorMessage('保存配置失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 重启服务
|
||||
async function handleRestartService() {
|
||||
if (confirm('确定要重启DNS服务吗？重启期间服务可能会短暂不可用。')) {
|
||||
try {
|
||||
await api.restartService();
|
||||
showSuccessMessage('服务重启成功');
|
||||
} catch (error) {
|
||||
showErrorMessage('重启服务失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 收集表单数据
|
||||
function collectFormData() {
|
||||
return {
|
||||
DNSServer: {
|
||||
Port: parseInt(document.getElementById('dns-port')?.value) || 53,
|
||||
UpstreamServers: document.getElementById('dns-upstream-servers')?.value.split(',').map(s => s.trim()).filter(Boolean) || [],
|
||||
Timeout: parseInt(document.getElementById('dns-timeout')?.value) || 5,
|
||||
StatsFile: document.getElementById('dns-stats-file')?.value || './stats.json',
|
||||
SaveInterval: parseInt(document.getElementById('dns-save-interval')?.value) || 300
|
||||
},
|
||||
HTTPServer: {
|
||||
Port: parseInt(document.getElementById('http-port')?.value) || 8080,
|
||||
Host: document.getElementById('http-host')?.value || '0.0.0.0',
|
||||
APIEnabled: document.getElementById('http-api-enabled')?.checked !== false
|
||||
},
|
||||
Shield: {
|
||||
LocalRulesFile: document.getElementById('shield-local-rules-file')?.value || './rules.txt',
|
||||
RemoteRulesURLs: document.getElementById('shield-remote-rules-urls')?.value.split('\n').map(s => s.trim()).filter(Boolean) || [],
|
||||
UpdateInterval: parseInt(document.getElementById('shield-update-interval')?.value) || 3600,
|
||||
HostsFile: document.getElementById('shield-hosts-file')?.value || '/etc/hosts',
|
||||
BlockMethod: document.getElementById('shield-block-method')?.value || '0.0.0.0'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 设置事件监听器
|
||||
function setupConfigEventListeners() {
|
||||
// 保存配置按钮
|
||||
document.getElementById('save-config-btn')?.addEventListener('click', handleSaveConfig);
|
||||
|
||||
// 重启服务按钮
|
||||
document.getElementById('restart-service-btn')?.addEventListener('click', handleRestartService);
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
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', initConfigPage);
|
||||
} else {
|
||||
initConfigPage();
|
||||
}
|
||||
270
static/js/dashboard.js
Normal file
270
static/js/dashboard.js
Normal file
@@ -0,0 +1,270 @@
|
||||
// dashboard.js - 仪表盘页面功能
|
||||
|
||||
// 加载仪表盘数据
|
||||
async function loadDashboardData() {
|
||||
try {
|
||||
// 并行加载所有需要的数据
|
||||
const [statsData, topBlockedData, recentBlockedData, hourlyStatsData] = await Promise.all([
|
||||
api.getStats(),
|
||||
api.getTopBlockedDomains(),
|
||||
api.getRecentBlockedDomains(),
|
||||
api.getHourlyStats()
|
||||
]);
|
||||
|
||||
// 更新统计卡片
|
||||
updateStatsCards(statsData);
|
||||
|
||||
// 更新表格数据
|
||||
updateTopBlockedTable(topBlockedData);
|
||||
updateRecentBlockedTable(recentBlockedData);
|
||||
|
||||
// 更新图表
|
||||
updateQueryTrendChart(hourlyStatsData);
|
||||
updateRatioChart(statsData);
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载仪表盘数据失败:', error);
|
||||
showErrorMessage('数据加载失败，请刷新页面重试');
|
||||
}
|
||||
}
|
||||
|
||||
// 更新统计卡片
|
||||
function updateStatsCards(data) {
|
||||
const dnsStats = data.dns;
|
||||
|
||||
// 更新总查询数
|
||||
document.getElementById('total-queries').textContent = formatNumber(dnsStats.Queries);
|
||||
|
||||
// 更新屏蔽数量
|
||||
document.getElementById('blocked-queries').textContent = formatNumber(dnsStats.Blocked);
|
||||
|
||||
// 更新正常解析数量
|
||||
document.getElementById('allowed-queries').textContent = formatNumber(dnsStats.Allowed);
|
||||
|
||||
// 更新错误数量
|
||||
document.getElementById('error-queries').textContent = formatNumber(dnsStats.Errors);
|
||||
|
||||
// 计算百分比（简化计算，实际可能需要与历史数据比较）
|
||||
if (dnsStats.Queries > 0) {
|
||||
const blockedPercent = Math.round((dnsStats.Blocked / dnsStats.Queries) * 100);
|
||||
const allowedPercent = Math.round((dnsStats.Allowed / dnsStats.Queries) * 100);
|
||||
const errorPercent = Math.round((dnsStats.Errors / dnsStats.Queries) * 100);
|
||||
|
||||
document.getElementById('blocked-percent').textContent = `${blockedPercent}%`;
|
||||
document.getElementById('allowed-percent').textContent = `${allowedPercent}%`;
|
||||
document.getElementById('error-percent').textContent = `${errorPercent}%`;
|
||||
document.getElementById('queries-percent').textContent = '100%';
|
||||
}
|
||||
}
|
||||
|
||||
// 更新最常屏蔽域名表格
|
||||
function updateTopBlockedTable(data) {
|
||||
const tableBody = document.getElementById('top-blocked-table');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
if (data.length === 0) {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `<td colspan="2" class="py-4 text-center text-gray-500">暂无数据</td>`;
|
||||
tableBody.appendChild(row);
|
||||
return;
|
||||
}
|
||||
|
||||
data.forEach(item => {
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'border-b border-gray-100 hover:bg-gray-50';
|
||||
row.innerHTML = `
|
||||
<td class="py-3 px-4 text-sm text-gray-800">${item.domain}</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-800 text-right">${formatNumber(item.count)}</td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// 更新最近屏蔽域名表格
|
||||
function updateRecentBlockedTable(data) {
|
||||
const tableBody = document.getElementById('recent-blocked-table');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
if (data.length === 0) {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `<td colspan="2" class="py-4 text-center text-gray-500">暂无数据</td>`;
|
||||
tableBody.appendChild(row);
|
||||
return;
|
||||
}
|
||||
|
||||
data.forEach(item => {
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'border-b border-gray-100 hover:bg-gray-50';
|
||||
row.innerHTML = `
|
||||
<td class="py-3 px-4 text-sm text-gray-800">${item.domain}</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500 text-right">${item.time}</td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// 更新查询趋势图表
|
||||
function updateQueryTrendChart(data) {
|
||||
const ctx = document.getElementById('query-trend-chart').getContext('2d');
|
||||
|
||||
// 创建图表
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [{
|
||||
label: '查询数量',
|
||||
data: data.data,
|
||||
borderColor: '#165DFF',
|
||||
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||||
borderWidth: 2,
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#FFFFFF',
|
||||
pointBorderColor: '#165DFF',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
padding: 12,
|
||||
cornerRadius: 8,
|
||||
titleFont: {
|
||||
size: 14,
|
||||
weight: 'bold'
|
||||
},
|
||||
bodyFont: {
|
||||
size: 13
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.05)'
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 12
|
||||
},
|
||||
callback: function(value) {
|
||||
return formatNumber(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 更新比例图表
|
||||
function updateRatioChart(data) {
|
||||
const dnsStats = data.dns;
|
||||
const ctx = document.getElementById('ratio-chart').getContext('2d');
|
||||
|
||||
// 准备数据
|
||||
const chartData = [dnsStats.Allowed, dnsStats.Blocked, dnsStats.Errors];
|
||||
const chartColors = ['#00B42A', '#F53F3F', '#FF7D00'];
|
||||
const chartLabels = ['正常解析', '屏蔽', '错误'];
|
||||
|
||||
// 创建图表
|
||||
new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: chartLabels,
|
||||
datasets: [{
|
||||
data: chartData,
|
||||
backgroundColor: chartColors,
|
||||
borderWidth: 0,
|
||||
hoverOffset: 10
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',',\,
|
||||
labels: {
|
||||
padding: 20,
|
||||
font: {
|
||||
size: 13
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
padding: 12,
|
||||
cornerRadius: 8,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const value = context.parsed;
|
||||
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
||||
const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
|
||||
return `${context.label}: ${formatNumber(value)} (${percentage}%)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
cutout: '70%'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化数字
|
||||
function formatNumber(num) {
|
||||
if (num >= 1000000) {
|
||||
return (num / 1000000).toFixed(1) + 'M';
|
||||
} else if (num >= 1000) {
|
||||
return (num / 1000).toFixed(1) + 'K';
|
||||
}
|
||||
return num.toString();
|
||||
}
|
||||
|
||||
// 显示错误消息
|
||||
function showErrorMessage(message) {
|
||||
// 创建错误消息元素
|
||||
const errorElement = document.createElement('div');
|
||||
errorElement.className = 'fixed bottom-4 right-4 bg-danger text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center';
|
||||
errorElement.innerHTML = `
|
||||
<i class="fa fa-exclamation-circle mr-2"></i>
|
||||
<span>${message}</span>
|
||||
`;
|
||||
|
||||
document.body.appendChild(errorElement);
|
||||
|
||||
// 3秒后自动移除
|
||||
setTimeout(() => {
|
||||
errorElement.classList.add('opacity-0', 'transition-opacity', 'duration-300');
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(errorElement);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 定期刷新数据
|
||||
setInterval(loadDashboardData, 30000); // 每30秒刷新一次
|
||||
150
static/js/hosts.js
Normal file
150
static/js/hosts.js
Normal file
@@ -0,0 +1,150 @@
|
||||
// Hosts管理页面功能实现
|
||||
|
||||
// 初始化Hosts管理页面
|
||||
function initHostsPage() {
|
||||
loadHostsContent();
|
||||
setupHostsEventListeners();
|
||||
}
|
||||
|
||||
// 加载Hosts内容
|
||||
async function loadHostsContent() {
|
||||
try {
|
||||
const hostsContent = await api.getHosts();
|
||||
document.getElementById('hosts-content').value = hostsContent;
|
||||
} catch (error) {
|
||||
showErrorMessage('加载Hosts文件失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存Hosts内容
|
||||
async function handleSaveHosts() {
|
||||
const hostsContent = document.getElementById('hosts-content').value;
|
||||
|
||||
try {
|
||||
await api.saveHosts(hostsContent);
|
||||
showSuccessMessage('Hosts文件保存成功');
|
||||
} catch (error) {
|
||||
showErrorMessage('保存Hosts文件失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新Hosts
|
||||
async function handleRefreshHosts() {
|
||||
try {
|
||||
await api.refreshHosts();
|
||||
showSuccessMessage('Hosts刷新成功');
|
||||
loadHostsContent();
|
||||
} catch (error) {
|
||||
showErrorMessage('刷新Hosts失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新的Hosts条目
|
||||
function handleAddHostsEntry() {
|
||||
const ipInput = document.getElementById('hosts-ip');
|
||||
const domainInput = document.getElementById('hosts-domain');
|
||||
|
||||
const ip = ipInput.value.trim();
|
||||
const domain = domainInput.value.trim();
|
||||
|
||||
if (!ip || !domain) {
|
||||
showErrorMessage('IP和域名不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
// 简单的IP验证
|
||||
const ipRegex = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
|
||||
if (!ipRegex.test(ip)) {
|
||||
showErrorMessage('请输入有效的IP地址');
|
||||
return;
|
||||
}
|
||||
|
||||
const hostsTextarea = document.getElementById('hosts-content');
|
||||
const newEntry = `\n${ip} ${domain}`;
|
||||
hostsTextarea.value += newEntry;
|
||||
|
||||
// 清空输入框
|
||||
ipInput.value = '';
|
||||
domainInput.value = '';
|
||||
|
||||
// 滚动到文本区域底部
|
||||
hostsTextarea.scrollTop = hostsTextarea.scrollHeight;
|
||||
|
||||
showSuccessMessage('Hosts条目已添加到编辑器');
|
||||
}
|
||||
|
||||
// 设置事件监听器
|
||||
function setupHostsEventListeners() {
|
||||
// 保存按钮
|
||||
document.getElementById('save-hosts-btn')?.addEventListener('click', handleSaveHosts);
|
||||
|
||||
// 刷新按钮
|
||||
document.getElementById('refresh-hosts-btn')?.addEventListener('click', handleRefreshHosts);
|
||||
|
||||
// 添加Hosts条目按钮
|
||||
document.getElementById('add-hosts-entry-btn')?.addEventListener('click', handleAddHostsEntry);
|
||||
|
||||
// 按回车键添加条目
|
||||
document.getElementById('hosts-domain')?.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddHostsEntry();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
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', initHostsPage);
|
||||
} else {
|
||||
initHostsPage();
|
||||
}
|
||||
109
static/js/main.js
Normal file
109
static/js/main.js
Normal file
@@ -0,0 +1,109 @@
|
||||
// main.js - 主脚本文件
|
||||
|
||||
// 页面导航功能
|
||||
function setupNavigation() {
|
||||
// 侧边栏菜单项
|
||||
const menuItems = document.querySelectorAll('nav a');
|
||||
const contentSections = [
|
||||
document.getElementById('dashboard-content'),
|
||||
document.getElementById('shield-content'),
|
||||
document.getElementById('hosts-content'),
|
||||
document.getElementById('blacklists-content'),
|
||||
document.getElementById('query-content'),
|
||||
document.getElementById('config-content')
|
||||
];
|
||||
const pageTitle = document.getElementById('page-title');
|
||||
|
||||
menuItems.forEach((item, index) => {
|
||||
item.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// 更新活跃状态
|
||||
menuItems.forEach(menuItem => {
|
||||
menuItem.classList.remove('sidebar-item-active');
|
||||
});
|
||||
item.classList.add('sidebar-item-active');
|
||||
|
||||
// 隐藏所有内容部分
|
||||
contentSections.forEach(section => {
|
||||
section.classList.add('hidden');
|
||||
});
|
||||
|
||||
// 显示对应内容部分
|
||||
const target = item.getAttribute('href').substring(1);
|
||||
const activeContent = document.getElementById(`${target}-content`);
|
||||
if (activeContent) {
|
||||
activeContent.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 更新页面标题
|
||||
pageTitle.textContent = item.querySelector('span').textContent;
|
||||
});
|
||||
});
|
||||
|
||||
// 移动端侧边栏切换
|
||||
const toggleSidebar = document.getElementById('toggle-sidebar');
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
|
||||
if (toggleSidebar && sidebar) {
|
||||
toggleSidebar.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('-translate-x-full');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化函数
|
||||
function init() {
|
||||
// 设置导航
|
||||
setupNavigation();
|
||||
|
||||
// 加载仪表盘数据
|
||||
if (typeof loadDashboardData === 'function') {
|
||||
loadDashboardData();
|
||||
}
|
||||
|
||||
// 定期更新系统状态
|
||||
setInterval(updateSystemStatus, 5000);
|
||||
}
|
||||
|
||||
// 更新系统状态
|
||||
function updateSystemStatus() {
|
||||
fetch('/api/status')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const uptimeElement = document.getElementById('uptime');
|
||||
if (uptimeElement) {
|
||||
uptimeElement.textContent = `正常运行中 | ${formatUptime(data.uptime)}`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('更新系统状态失败:', error);
|
||||
const uptimeElement = document.getElementById('uptime');
|
||||
if (uptimeElement) {
|
||||
uptimeElement.textContent = '连接异常';
|
||||
uptimeElement.classList.add('text-danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化运行时间
|
||||
function formatUptime(milliseconds) {
|
||||
// 简化版的格式化，实际使用时需要根据API返回的数据格式调整
|
||||
const seconds = Math.floor(milliseconds / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}天${hours % 24}小时`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}小时${minutes % 60}分钟`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}分钟${seconds % 60}秒`;
|
||||
} else {
|
||||
return `${seconds}秒`;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后执行初始化
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
157
static/js/query.js
Normal file
157
static/js/query.js
Normal file
@@ -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();
|
||||
}
|
||||
167
static/js/shield.js
Normal file
167
static/js/shield.js
Normal file
@@ -0,0 +1,167 @@
|
||||
// 屏蔽管理页面功能实现
|
||||
|
||||
// 初始化屏蔽管理页面
|
||||
function initShieldPage() {
|
||||
loadShieldRules();
|
||||
setupShieldEventListeners();
|
||||
}
|
||||
|
||||
// 加载屏蔽规则
|
||||
async function loadShieldRules() {
|
||||
try {
|
||||
const rules = await api.getShieldRules();
|
||||
updateShieldRulesTable(rules);
|
||||
} catch (error) {
|
||||
showErrorMessage('加载屏蔽规则失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新屏蔽规则表格
|
||||
function updateShieldRulesTable(rules) {
|
||||
const tbody = document.getElementById('shield-rules-tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!rules || rules.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="text-center py-4 text-gray-500">暂无屏蔽规则</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
rules.forEach((rule, index) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = 'border-b border-gray-200 hover:bg-gray-50';
|
||||
tr.innerHTML = `
|
||||
<td class="py-3 px-4">${index + 1}</td>
|
||||
<td class="py-3 px-4">${rule}</td>
|
||||
<td class="py-3 px-4">
|
||||
<button data-rule="${rule}" class="delete-rule-btn text-red-500 hover:text-red-700">
|
||||
<i class="fa fa-trash-o"></i>
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
// 添加删除按钮事件监听器
|
||||
document.querySelectorAll('.delete-rule-btn').forEach(btn => {
|
||||
btn.addEventListener('click', handleDeleteRule);
|
||||
});
|
||||
}
|
||||
|
||||
// 处理删除规则
|
||||
async function handleDeleteRule(e) {
|
||||
const rule = e.currentTarget.getAttribute('data-rule');
|
||||
|
||||
if (confirm(`确定要删除规则: ${rule} 吗？`)) {
|
||||
try {
|
||||
await api.deleteShieldRule(rule);
|
||||
showSuccessMessage('规则删除成功');
|
||||
loadShieldRules();
|
||||
} catch (error) {
|
||||
showErrorMessage('删除规则失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新规则
|
||||
async function handleAddRule() {
|
||||
const ruleInput = document.getElementById('new-rule-input');
|
||||
const rule = ruleInput.value.trim();
|
||||
|
||||
if (!rule) {
|
||||
showErrorMessage('规则不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await api.addShieldRule(rule);
|
||||
showSuccessMessage('规则添加成功');
|
||||
loadShieldRules();
|
||||
ruleInput.value = '';
|
||||
} catch (error) {
|
||||
showErrorMessage('添加规则失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新远程规则
|
||||
async function handleUpdateRemoteRules() {
|
||||
try {
|
||||
await api.updateRemoteRules();
|
||||
showSuccessMessage('远程规则更新成功');
|
||||
loadShieldRules();
|
||||
} catch (error) {
|
||||
showErrorMessage('远程规则更新失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 设置事件监听器
|
||||
function setupShieldEventListeners() {
|
||||
// 添加规则按钮
|
||||
document.getElementById('add-rule-btn')?.addEventListener('click', handleAddRule);
|
||||
|
||||
// 按回车键添加规则
|
||||
document.getElementById('new-rule-input')?.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddRule();
|
||||
}
|
||||
});
|
||||
|
||||
// 更新远程规则按钮
|
||||
document.getElementById('update-remote-rules-btn')?.addEventListener('click', handleUpdateRemoteRules);
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
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', initShieldPage);
|
||||
} else {
|
||||
initShieldPage();
|
||||
}
|
||||
Reference in New Issue
Block a user