dns-server/static/js/shield.js

// 屏蔽管理页面功能实现

// 初始化屏蔽管理页面
function initShieldPage() {
  loadShieldRules();
  setupShieldEventListeners();
}

// 加载屏蔽规则
async function loadShieldRules() {
  try {
    const rules = await api.getShieldRules();
    updateShieldRulesTable(rules);
  } catch (error) {
    showErrorMessage('加载屏蔽规则失败: ' + error.message);
  }
}

// 更新屏蔽规则表格
function updateShieldRulesTable(rules) {
  const tbody = document.getElementById('shield-rules-tbody');
  tbody.innerHTML = '';
  
  if (!rules || rules.length === 0) {
    tbody.innerHTML = '<tr><td colspan="4" class="text-center py-4 text-gray-500">暂无屏蔽规则</td></tr>';
    return;
  }
  
  rules.forEach((rule, index) => {
    const tr = document.createElement('tr');
    tr.className = 'border-b border-gray-200 hover:bg-gray-50';
    tr.innerHTML = `
      <td class="py-3 px-4">${index + 1}</td>
      <td class="py-3 px-4">${rule}</td>
      <td class="py-3 px-4">
        <button data-rule="${rule}" class="delete-rule-btn text-red-500 hover:text-red-700">
          <i class="fa fa-trash-o"></i>
        </button>
      </td>
    `;
    tbody.appendChild(tr);
  });
  
  // 添加删除按钮事件监听器
  document.querySelectorAll('.delete-rule-btn').forEach(btn => {
    btn.addEventListener('click', handleDeleteRule);
  });
}

// 处理删除规则
async function handleDeleteRule(e) {
  const rule = e.currentTarget.getAttribute('data-rule');
  
  if (confirm(`确定要删除规则: ${rule} 吗？`)) {
    try {
      await api.deleteShieldRule(rule);
      showSuccessMessage('规则删除成功');
      loadShieldRules();
    } catch (error) {
      showErrorMessage('删除规则失败: ' + error.message);
    }
  }
}

// 添加新规则
async function handleAddRule() {
  const ruleInput = document.getElementById('new-rule-input');
  const rule = ruleInput.value.trim();
  
  if (!rule) {
    showErrorMessage('规则不能为空');
    return;
  }
  
  try {
    await api.addShieldRule(rule);
    showSuccessMessage('规则添加成功');
    loadShieldRules();
    ruleInput.value = '';
  } catch (error) {
    showErrorMessage('添加规则失败: ' + error.message);
  }
}

// 更新远程规则
async function handleUpdateRemoteRules() {
  try {
    await api.updateRemoteRules();
    showSuccessMessage('远程规则更新成功');
    loadShieldRules();
  } catch (error) {
    showErrorMessage('远程规则更新失败: ' + error.message);
  }
}

// 设置事件监听器
function setupShieldEventListeners() {
  // 添加规则按钮
  document.getElementById('add-rule-btn')?.addEventListener('click', handleAddRule);
  
  // 按回车键添加规则
  document.getElementById('new-rule-input')?.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      handleAddRule();
    }
  });
  
  // 更新远程规则按钮
  document.getElementById('update-remote-rules-btn')?.addEventListener('click', handleUpdateRemoteRules);
}

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