## 实现计划 ### 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调用的错误处理 * 操作反馈机制的实现 * 数据刷新逻辑 * 保持界面样式一致性