远程列表web
This commit is contained in:
Alex Yang
@@ -1559,7 +1559,7 @@ function loadRules() {
|
||||
console.error('保存黑名单设置失败:', error);
|
||||
showNotification('danger', '保存失败: ' + error.message);
|
||||
});
|
||||
.then(data => {
|
||||
then(data => {
|
||||
// 重置按钮状态
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
@@ -1591,22 +1591,40 @@ function loadRules() {
|
||||
fetch('/api/shield/hosts')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// 注意这需要在shieldManager中添加一个获取所有hosts条目的方法
|
||||
// 暂时返回统计信息
|
||||
const hostsCount = data.hostsCount || 0;
|
||||
const hostsList = data.hosts || [];
|
||||
|
||||
if (hostsCount > 0) {
|
||||
hostsContainer.innerHTML = `<div class="list-item">
|
||||
<div class="list-content">
|
||||
<div class="list-title">Hosts概览</div>
|
||||
<div class="list-description">共 ${hostsCount} 个Hosts条目</div>
|
||||
</div>
|
||||
<div class="list-actions">
|
||||
<button class="btn-outline btn-sm" onclick="location.reload()">刷新</button>
|
||||
</div>
|
||||
if (hostsCount > 0 && hostsList.length > 0) {
|
||||
// 构建hosts列表HTML
|
||||
let hostsHTML = `<div class="list-header">
|
||||
<div class="list-title">Hosts条目列表</div>
|
||||
<div class="list-description">共 ${hostsCount} 个Hosts条目</div>
|
||||
</div>`;
|
||||
|
||||
hostsList.forEach(item => {
|
||||
hostsHTML += `<div class="list-item">
|
||||
<div class="list-content">
|
||||
<div class="list-title">${item.domain}</div>
|
||||
<div class="list-description">IP: ${item.ip}</div>
|
||||
</div>
|
||||
<div class="list-actions">
|
||||
<button class="btn-danger btn-sm" onclick="deleteHostsEntry('${item.domain}')">删除</button>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
hostsHTML += `<div class="list-footer">
|
||||
<button class="btn-primary btn-sm" onclick="showAddHostsModal()">添加Hosts条目</button>
|
||||
<button class="btn-outline btn-sm" onclick="loadHostsList()">刷新</button>
|
||||
</div>`;
|
||||
|
||||
hostsContainer.innerHTML = hostsHTML;
|
||||
} else {
|
||||
hostsContainer.innerHTML = '<div class="empty-state"><i class="fas fa-info-circle"></i><p>暂无Hosts条目</p></div>';
|
||||
hostsContainer.innerHTML = `<div class="empty-state">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<p>暂无Hosts条目</p>
|
||||
<button class="btn-primary btn-sm" onclick="showAddHostsModal()">添加Hosts条目</button>
|
||||
</div>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -2095,10 +2113,178 @@ function loadRules() {
|
||||
blacklists.push({ name, URL: url, enabled });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 加载hosts列表
|
||||
function loadHostsList() {
|
||||
const hostsContainer = document.getElementById('hosts-container');
|
||||
hostsContainer.innerHTML = '<div class="loading-state"><i class="fas fa-spinner fa-spin"></i><p>加载中...</p></div>';
|
||||
|
||||
fetch('/api/shield/hosts')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const hostsCount = data.hostsCount || 0;
|
||||
const hostsList = data.hosts || [];
|
||||
|
||||
if (hostsCount > 0 && hostsList.length > 0) {
|
||||
// 构建hosts列表HTML
|
||||
let hostsHTML = `<div class="list-header">
|
||||
<div class="list-title">Hosts条目列表</div>
|
||||
<div class="list-description">共 ${hostsCount} 个Hosts条目</div>
|
||||
</div>`;
|
||||
|
||||
hostsList.forEach(item => {
|
||||
hostsHTML += `<div class="list-item">
|
||||
<div class="list-content">
|
||||
<div class="list-title">${item.domain}</div>
|
||||
<div class="list-description">IP: ${item.ip}</div>
|
||||
</div>
|
||||
<div class="list-actions">
|
||||
<button class="btn-danger btn-sm" onclick="deleteHostsEntry('${item.domain}')">删除</button>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
hostsHTML += `<div class="list-footer">
|
||||
<button class="btn-primary btn-sm" onclick="showAddHostsModal()">添加Hosts条目</button>
|
||||
<button class="btn-outline btn-sm" onclick="loadHostsList()">刷新</button>
|
||||
</div>`;
|
||||
|
||||
hostsContainer.innerHTML = hostsHTML;
|
||||
} else {
|
||||
hostsContainer.innerHTML = `<div class="empty-state">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<p>暂无Hosts条目</p>
|
||||
<button class="btn-primary btn-sm" onclick="showAddHostsModal()">添加Hosts条目</button>
|
||||
</div>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
hostsContainer.innerHTML = `<div class="error-state"><i class="fas fa-exclamation-circle"></i><p>加载失败: ${error.message}</p></div>`;
|
||||
console.error('加载hosts列表失败:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示添加hosts条目的模态框
|
||||
function showAddHostsModal() {
|
||||
// 创建模态框HTML
|
||||
const modalHTML = `
|
||||
<div class="modal-overlay" onclick="closeAddHostsModal()">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h3>添加Hosts条目</h3>
|
||||
<button class="modal-close" onclick="closeAddHostsModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="hosts-domain">域名</label>
|
||||
<input type="text" id="hosts-domain" placeholder="请输入域名，如 example.com" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hosts-ip">IP地址</label>
|
||||
<input type="text" id="hosts-ip" placeholder="请输入IP地址，如 192.168.1.1" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-outline" onclick="closeAddHostsModal()">取消</button>
|
||||
<button class="btn-primary" onclick="addHostsEntry()">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
// 添加模态框到页面
|
||||
const modalDiv = document.createElement('div');
|
||||
modalDiv.id = 'add-hosts-modal';
|
||||
modalDiv.innerHTML = modalHTML;
|
||||
document.body.appendChild(modalDiv);
|
||||
}
|
||||
|
||||
// 关闭添加hosts条目的模态框
|
||||
function closeAddHostsModal() {
|
||||
const modal = document.getElementById('add-hosts-modal');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 添加hosts条目
|
||||
function addHostsEntry() {
|
||||
const domain = document.getElementById('hosts-domain').value.trim();
|
||||
const ip = document.getElementById('hosts-ip').value.trim();
|
||||
|
||||
if (!domain || !ip) {
|
||||
alert('请填写域名和IP地址');
|
||||
return;
|
||||
}
|
||||
|
||||
// 简单的IP地址验证
|
||||
const ipRegex = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
|
||||
if (!ipRegex.test(ip)) {
|
||||
alert('请输入有效的IP地址');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/shield/hosts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ domain, ip })
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('添加失败');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
alert('添加成功');
|
||||
closeAddHostsModal();
|
||||
loadHostsList();
|
||||
} else {
|
||||
alert('添加失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加hosts条目失败:', error);
|
||||
alert('添加失败: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
// 删除hosts条目
|
||||
function deleteHostsEntry(domain) {
|
||||
if (confirm(`确定要删除域名 ${domain} 的hosts条目吗？`)) {
|
||||
fetch('/api/shield/hosts', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ domain })
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('删除失败');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
loadHostsList();
|
||||
} else {
|
||||
alert('删除失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除hosts条目失败:', error);
|
||||
alert('删除失败: ' + error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderBlacklistsList(blacklists);
|
||||
showNotification('success', '黑名单已删除');
|
||||
}
|
||||
|
||||
|
||||
// 保存黑名单设置
|
||||
function saveBlacklistsSettings() {
|
||||
|
||||
Reference in New Issue
Block a user