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

beta1

Browse Source
This commit is contained in:
Alex Yang
2025-11-23 19:35:02 +08:00
parent d870f6bfcc
commit 5a1d44c3b3
10 changed files with 4783 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
static/index.html
View File

@@ -312,16 +312,29 @@
background-color: #c0392b;
}
.btn-outline {
background-color: transparent;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.btn-outline { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); }
.btn-outline:hover {
background-color: var(--primary-color);
color: white;
}
.btn-outline:hover { background-color: var(--primary-color); color: white; }
.btn-secondary { background-color: var(--secondary-color); color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.btn-secondary:hover { background-color: #1a252f; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 4px 8px; font-size: 0.875rem; }
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
.form-text { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--gray-600); }
.mb-3 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1rem; }
.rule-items { display: flex; flex-direction: column; gap: 0.5rem; }
.rule-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background-color: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 4px; }
.rule-text { flex: 1; word-break: break-all; margin-right: 0.5rem; }
/* 悬浮通知样式 */
.notification {
@@ -800,6 +813,39 @@
</small>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title"><i class="fas fa-globe"></i> 远程规则管理</h3>
</div>
<div class="card-body">
<div class="mb-3">
<label for="update-interval" class="form-label">更新间隔 (秒)</label>
<input type="number" id="update-interval" min="60" max="86400" placeholder="3600">
<small class="form-text">远程规则自动更新的时间间隔，建议至少60秒</small>
</div>
<div class="mb-3">
<div class="input-group">
<input type="text" id="remote-rule-url" placeholder="输入远程规则URL">
<button id="add-remote-rule" class="btn-secondary">
<i class="fas fa-plus"></i> 添加规则
</button>
</div>
</div>
<div class="list-container" id="remote-rules-list">
<div class="empty-state">
<i class="fas fa-info-circle"></i>
<p>加载中...</p>
</div>
</div>
<button id="save-remote-settings" class="btn-primary mt-3">
<i class="fas fa-save"></i> 保存远程设置
</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title"><i class="fas fa-plus-circle"></i> 添加屏蔽规则</h3>
@@ -1719,6 +1765,13 @@ function loadRules() {
// 加载当前屏蔽设置
loadBlockSettings();
// 远程规则相关事件监听
document.getElementById('add-remote-rule').addEventListener('click', addRemoteRule);
document.getElementById('save-remote-settings').addEventListener('click', saveRemoteSettings);
// 加载远程规则设置
loadRemoteSettings();
};
// 加载当前屏蔽设置
@@ -1782,6 +1835,169 @@ function loadRules() {
});
}
// 加载远程规则设置
function loadRemoteSettings() {
fetch('/api/config', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.shield) {
// 设置更新间隔
document.getElementById('update-interval').value = data.shield.updateInterval || 3600;
// 加载远程规则列表
renderRemoteRulesList(data.shield.remoteRules || []);
}
})
.catch(error => {
console.error('加载远程规则设置失败:', error);
showNotification('danger', '加载远程规则设置失败');
renderRemoteRulesList([]);
});
}
// 渲染远程规则列表
function renderRemoteRulesList(rules) {
const listContainer = document.getElementById('remote-rules-list');
if (rules.length === 0) {
listContainer.innerHTML = `
<div class="empty-state">
<i class="fas fa-info-circle"></i>
<p>暂无远程规则</p>
</div>
`;
return;
}
let html = '<div class="list-container">';
rules.forEach((rule, index) => {
html += `
<div class="list-item">
<div class="list-content">
<div class="list-title">远程规则 ${index + 1}</div>
<div class="list-description">${rule}</div>
</div>
<div class="list-actions">
<span class="badge badge-primary">远程</span>
<button class="btn-danger btn-sm delete-rule" data-index="${index}">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
`;
});
html += '</div>';
listContainer.innerHTML = html;
// 添加删除按钮事件监听
document.querySelectorAll('.delete-rule').forEach(btn => {
btn.addEventListener('click', function() {
const index = parseInt(this.getAttribute('data-index'));
deleteRemoteRule(index);
});
});
}
// 添加远程规则
function addRemoteRule() {
const urlInput = document.getElementById('remote-rule-url');
const url = urlInput.value.trim();
if (!url) {
showNotification('warning', '请输入有效的URL');
return;
}
// 简单的URL验证
try {
new URL(url);
} catch (e) {
showNotification('warning', '请输入有效的URL格式');
return;
}
// 获取当前列表中的规则
const ruleItems = document.querySelectorAll('.list-item');
const rules = Array.from(ruleItems).map(item =>
item.querySelector('.list-description').textContent
);
// 检查是否已存在
if (rules.includes(url)) {
showNotification('warning', '该规则已存在');
return;
}
// 添加新规则
rules.push(url);
renderRemoteRulesList(rules);
urlInput.value = '';
showNotification('success', '规则已添加');
}
// 删除远程规则
function deleteRemoteRule(index) {
const ruleItems = document.querySelectorAll('.list-item');
const rules = Array.from(ruleItems).map(item =>
item.querySelector('.list-description').textContent
);
// 移除指定索引的规则
rules.splice(index, 1);
renderRemoteRulesList(rules);
showNotification('success', '规则已删除');
}
// 保存远程规则设置
function saveRemoteSettings() {
const updateInterval = parseInt(document.getElementById('update-interval').value);
// 验证更新间隔
if (isNaN(updateInterval) || updateInterval < 60) {
showNotification('warning', '更新间隔必须大于等于60秒');
return;
}
// 获取当前列表中的规则
const ruleItems = document.querySelectorAll('.list-item');
const remoteRules = Array.from(ruleItems).map(item =>
item.querySelector('.list-description').textContent
);
fetch('/api/config', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
shield: {
remoteRules: remoteRules,
updateInterval: updateInterval
}
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showNotification('success', '远程规则设置已保存');
} else {
showNotification('danger', '保存失败: ' + (data.error || '未知错误'));
}
})
.catch(error => {
console.error('保存远程规则设置失败:', error);
showNotification('danger', '保存远程规则设置失败: ' + error.message);
});
}
// 显示悬浮通知
function showNotification(type, message) {
// 创建通知元素