更新beta2

2025-11-25 01:34:20 +08:00
parent 9f92dcb86d
commit d9a8462cf6
8 changed files with 1395 additions and 719 deletions
--- a/static/js/shield.js
+++ b/static/js/shield.js
@@ -0,0 +1,167 @@
+// 屏蔽管理页面功能实现
+
+// 初始化屏蔽管理页面
+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();
+}