150 lines
4.0 KiB
JavaScript
150 lines
4.0 KiB
JavaScript
// 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();
|
|
} |