// 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(); }