dns-server/.trae/documents/在查询日志详情界面增加操作列.md

实现计划

1. 分析当前代码结构

• HTML结构：日志表格在updateLogsTable函数中动态生成
• 数据处理：每条日志包含Result字段，表示查询结果（allowed, blocked, error）
• API需求：需要拦截/放行域名的API接口

2. 修改内容

2.1 修改updateLogsTable函数

• 在表格中添加操作列
• 根据log.Result字段决定显示哪个按钮：
  • 如果log.Result为blocked，显示"放行"按钮
  • 否则，显示"拦截"按钮
• 为按钮添加点击事件处理函数

2.2 实现拦截/放行功能

• 添加blockDomain函数：调用API拦截域名
• 添加allowDomain函数：调用API放行域名
• 实现按钮点击事件的处理逻辑
• 添加操作成功后的反馈机制

2.3 更新表格头部

• 在表格头部添加"操作"列
• 确保表格的colspan属性正确更新

3. 实现细节

• 按钮样式：使用现有的样式类，保持界面一致性
• 事件绑定：为动态生成的按钮绑定点击事件
• API调用：使用现有的apiRequest函数进行API调用
• 反馈机制：操作成功后显示提示信息
• 数据刷新：操作完成后刷新日志列表，显示最新状态

4. 预期效果

• 日志详情表格右侧增加"操作"列
• 对于被拦截的域名，显示"放行"按钮
• 对于未被拦截的域名，显示"拦截"按钮
• 点击按钮后，成功执行相应操作并刷新列表
• 操作过程中显示反馈信息

5. 实现步骤

1. 修改updateLogsTable函数，添加操作列
2. 更新表格头部，添加"操作"列
3. 实现blockDomain和allowDomain函数
4. 为按钮绑定点击事件
5. 添加操作反馈机制
6. 测试功能完整性

关键代码修改点

• updateLogsTable函数：在生成表格行时添加操作列
• 表格头部：添加"操作"列标题
• 新增函数：blockDomain和allowDomain
• 事件绑定：为动态生成的按钮添加点击事件处理

技术要点

• 动态生成元素的事件绑定
• API调用的错误处理
• 操作反馈机制的实现
• 数据刷新逻辑
• 保持界面样式一致性