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