DNS/dns-server
1
0
Fork 0
Code Pull Requests Activity

web异常待修复

Browse Source
This commit is contained in:
Alex Yang
2025-11-24 10:50:03 +08:00
parent 534878fa4d
commit 4467a0bf4c
14 changed files with 30715 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
static/js/modules/hosts.js
View File

@@ -28,14 +28,42 @@ function loadHosts() {
const tbody = document.getElementById('hosts-table').querySelector('tbody');
showLoading(tbody);
// 更新API路径，使用完整路径
apiRequest('/shield/hosts', 'GET')
.then(data => {
renderHosts(data);
// 处理不同格式的响应数据
let hostsData;
if (Array.isArray(data)) {
hostsData = data;
} else if (data && data.hosts) {
hostsData = data.hosts;
} else {
hostsData = [];
}
renderHosts(hostsData);
// 更新Hosts数量统计
if (window.updateHostsCount && typeof window.updateHostsCount === 'function') {
window.updateHostsCount(hostsData.length);
}
})
.catch(error => {
console.error('获取Hosts列表失败:', error);
showError(tbody, '获取Hosts列表失败');
window.showNotification('获取Hosts列表失败', 'error');
if (tbody) {
tbody.innerHTML = '<tr><td colspan="3" class="text-center py-4">' +
'<div class="empty-state">' +
'<div class="empty-icon"><i class="fas fa-server text-muted"></i></div>' +
'<div class="empty-title text-muted">加载失败</div>' +
'<div class="empty-description text-muted">无法获取Hosts列表，请稍后重试</div>' +
'</div>' +
'</td></tr>';
}
if (typeof window.showNotification === 'function') {
window.showNotification('获取Hosts列表失败', 'danger');
}
});
}
@@ -45,7 +73,14 @@ function renderHosts(hosts) {
if (!tbody) return;
if (!hosts || hosts.length === 0) {
showEmpty(tbody, '暂无Hosts条目');
// 使用更友好的空状态显示
tbody.innerHTML = '<tr><td colspan="3" class="text-center py-4">' +
'<div class="empty-state">' +
'<div class="empty-icon"><i class="fas fa-file-alt text-muted"></i></div>' +
'<div class="empty-title text-muted">暂无Hosts条目</div>' +
'<div class="empty-description text-muted">添加自定义Hosts条目以控制DNS解析</div>' +
'</div>' +
'</td></tr>';
return;
}
@@ -55,9 +90,6 @@ function renderHosts(hosts) {
addHostsToTable(entry.ip, entry.domain);
});
// 初始化表格排序
initTableSort('hosts-table');
// 初始化删除按钮监听器
initDeleteHostsListeners();
}
@@ -77,7 +109,17 @@ function addHostsToTable(ip, domain) {
</td>
`;
// 添加行动画效果
row.style.opacity = '0';
row.style.transform = 'translateY(10px)';
tbody.appendChild(row);
// 使用requestAnimationFrame确保动画平滑
requestAnimationFrame(() => {
row.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
row.style.opacity = '1';
row.style.transform = 'translateY(0)';
});
}
// 添加Hosts条目
@@ -89,56 +131,123 @@ function addHostsEntry() {
const domain = domainInput.value.trim();
if (!ip) {
window.showNotification('请输入IP地址', 'warning');
if (typeof window.showNotification === 'function') {
window.showNotification('请输入IP地址', 'warning');
}
ipInput.focus();
return;
}
if (!domain) {
window.showNotification('请输入域名', 'warning');
if (typeof window.showNotification === 'function') {
window.showNotification('请输入域名', 'warning');
}
domainInput.focus();
return;
}
// 简单的IP地址格式验证
if (!isValidIp(ip)) {
window.showNotification('请输入有效的IP地址', 'warning');
if (typeof window.showNotification === 'function') {
window.showNotification('请输入有效的IP地址', 'warning');
}
ipInput.focus();
return;
}
apiRequest('/shield/hosts', 'POST', { ip: ip, domain: domain });
// 修复重复API调用问题，只调用一次
apiRequest('/shield/hosts', 'POST', { ip: ip, domain: domain })
.then(data => {
if (data.success) {
window.showNotification('Hosts条目添加成功', 'success');
// 处理不同的响应格式
if (data.success || data.status === 'success') {
if (typeof window.showNotification === 'function') {
window.showNotification('Hosts条目添加成功', 'success');
}
// 清空输入框并聚焦到域名输入
ipInput.value = '';
domainInput.value = '';
domainInput.focus();
// 重新加载Hosts列表
loadHosts();
// 触发数据刷新事件
if (typeof window.triggerDataRefresh === 'function') {
window.triggerDataRefresh('hosts');
}
} else {
window.showNotification(`添加失败: ${data.message || '未知错误'}`, 'error');
if (typeof window.showNotification === 'function') {
window.showNotification(`添加失败: ${data.message || '未知错误'}`, 'danger');
}
}
})
.catch(error => {
console.error('添加Hosts条目失败:', error);
window.showNotification('添加Hosts条目失败', 'error');
if (typeof window.showNotification === 'function') {
window.showNotification('添加Hosts条目失败', 'danger');
}
});
}
// 删除Hosts条目
function deleteHostsEntry(ip, domain) {
// 找到要删除的行并添加删除动画
const rows = document.querySelectorAll('#hosts-table tbody tr');
let targetRow = null;
rows.forEach(row => {
if (row.cells[0].textContent === ip && row.cells[1].textContent === domain) {
targetRow = row;
}
});
if (targetRow) {
targetRow.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
targetRow.style.opacity = '0';
targetRow.style.transform = 'translateX(-20px)';
}
// 更新API路径
apiRequest('/shield/hosts', 'DELETE', { ip: ip, domain: domain })
.then(data => {
if (data.success) {
window.showNotification('Hosts条目删除成功', 'success');
loadHosts();
// 处理不同的响应格式
if (data.success || data.status === 'success') {
// 等待动画完成后重新加载列表
setTimeout(() => {
if (typeof window.showNotification === 'function') {
window.showNotification('Hosts条目删除成功', 'success');
}
loadHosts();
// 触发数据刷新事件
if (typeof window.triggerDataRefresh === 'function') {
window.triggerDataRefresh('hosts');
}
}, 300);
} else {
window.showNotification(`删除失败: ${data.message || '未知错误'}`, 'error');
// 恢复行样式
if (targetRow) {
targetRow.style.opacity = '1';
targetRow.style.transform = 'translateX(0)';
}
if (typeof window.showNotification === 'function') {
window.showNotification(`删除失败: ${data.message || '未知错误'}`, 'danger');
}
}
})
.catch(error => {
// 恢复行样式
if (targetRow) {
targetRow.style.opacity = '1';
targetRow.style.transform = 'translateX(0)';
}
console.error('删除Hosts条目失败:', error);
window.showNotification('删除Hosts条目失败', 'error');
if (typeof window.showNotification === 'function') {
window.showNotification('删除Hosts条目失败', 'danger');
}
});
}
@@ -162,10 +271,10 @@ function initDeleteHostsListeners() {
const ip = this.getAttribute('data-ip');
const domain = this.getAttribute('data-domain');
confirmAction(
`确定要删除这条Hosts条目吗？\n${ip} ${domain}`,
() => deleteHostsEntry(ip, domain)
);
// 使用标准confirm对话框
if (confirm(`确定要删除这条Hosts条目吗？\n${ip} ${domain}`)) {
deleteHostsEntry(ip, domain);
}
});
});
}
@@ -177,4 +286,23 @@ function isValidIp(ip) {
const ipv6Regex = /^([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}$/;
return ipv4Regex.test(ip) || ipv6Regex.test(ip);
}
// 导出函数，供其他模块调用
window.updateHostsCount = function(count) {
const hostsCountElement = document.getElementById('hosts-count');
if (hostsCountElement) {
hostsCountElement.textContent = count;
}
}
// 导出初始化函数
window.initHostsPanel = initHostsPanel;
// 注册到面板导航系统
if (window.registerPanelModule) {
window.registerPanelModule('hosts-panel', {
init: initHostsPanel,
refresh: loadHosts
});
}