dns-server/static/js/config.js

// 配置管理页面功能实现

// 初始化配置管理页面
function initConfigPage() {
  loadConfig();
  setupConfigEventListeners();
}

// 加载系统配置
async function loadConfig() {
  try {
    const config = await api.getConfig();
    populateConfigForm(config);
  } catch (error) {
    showErrorMessage('加载配置失败: ' + error.message);
  }
}

// 填充配置表单
function populateConfigForm(config) {
  // DNS配置
  document.getElementById('dns-port')?.value = config.DNSServer.Port || 53;
  document.getElementById('dns-upstream-servers')?.value = (config.DNSServer.UpstreamServers || []).join(', ');
  document.getElementById('dns-timeout')?.value = config.DNSServer.Timeout || 5;
  document.getElementById('dns-stats-file')?.value = config.DNSServer.StatsFile || './stats.json';
  document.getElementById('dns-save-interval')?.value = config.DNSServer.SaveInterval || 300;
  
  // HTTP配置
  document.getElementById('http-port')?.value = config.HTTPServer.Port || 8080;
  document.getElementById('http-host')?.value = config.HTTPServer.Host || '0.0.0.0';
  document.getElementById('http-api-enabled')?.checked = config.HTTPServer.APIEnabled !== false;
  
  // 屏蔽配置
  document.getElementById('shield-local-rules-file')?.value = config.Shield.LocalRulesFile || './rules.txt';
  document.getElementById('shield-remote-rules-urls')?.value = (config.Shield.RemoteRulesURLs || []).join('\n');
  document.getElementById('shield-update-interval')?.value = config.Shield.UpdateInterval || 3600;
  document.getElementById('shield-hosts-file')?.value = config.Shield.HostsFile || '/etc/hosts';
  document.getElementById('shield-block-method')?.value = config.Shield.BlockMethod || '0.0.0.0';
}

// 保存配置
async function handleSaveConfig() {
  const formData = collectFormData();
  
  try {
    await api.saveConfig(formData);
    showSuccessMessage('配置保存成功');
  } catch (error) {
    showErrorMessage('保存配置失败: ' + error.message);
  }
}

// 重启服务
async function handleRestartService() {
  if (confirm('确定要重启DNS服务吗？重启期间服务可能会短暂不可用。')) {
    try {
      await api.restartService();
      showSuccessMessage('服务重启成功');
    } catch (error) {
      showErrorMessage('重启服务失败: ' + error.message);
    }
  }
}

// 收集表单数据
function collectFormData() {
  return {
    DNSServer: {
      Port: parseInt(document.getElementById('dns-port')?.value) || 53,
      UpstreamServers: document.getElementById('dns-upstream-servers')?.value.split(',').map(s => s.trim()).filter(Boolean) || [],
      Timeout: parseInt(document.getElementById('dns-timeout')?.value) || 5,
      StatsFile: document.getElementById('dns-stats-file')?.value || './stats.json',
      SaveInterval: parseInt(document.getElementById('dns-save-interval')?.value) || 300
    },
    HTTPServer: {
      Port: parseInt(document.getElementById('http-port')?.value) || 8080,
      Host: document.getElementById('http-host')?.value || '0.0.0.0',
      APIEnabled: document.getElementById('http-api-enabled')?.checked !== false
    },
    Shield: {
      LocalRulesFile: document.getElementById('shield-local-rules-file')?.value || './rules.txt',
      RemoteRulesURLs: document.getElementById('shield-remote-rules-urls')?.value.split('\n').map(s => s.trim()).filter(Boolean) || [],
      UpdateInterval: parseInt(document.getElementById('shield-update-interval')?.value) || 3600,
      HostsFile: document.getElementById('shield-hosts-file')?.value || '/etc/hosts',
      BlockMethod: document.getElementById('shield-block-method')?.value || '0.0.0.0'
    }
  };
}

// 设置事件监听器
function setupConfigEventListeners() {
  // 保存配置按钮
  document.getElementById('save-config-btn')?.addEventListener('click', handleSaveConfig);
  
  // 重启服务按钮
  document.getElementById('restart-service-btn')?.addEventListener('click', handleRestartService);
}

// 显示成功消息
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', initConfigPage);
} else {
  initConfigPage();
}