ms-vite-plugin 1.1.1 → 1.1.3

package/docs/apicn/ui.md

@@ -0,0 +1,933 @@
+# UI 模块 ($视图)
+
+UI 模块提供了 WebView 相关功能，支持事件通信和 JavaScript 交互。该模块使用共享的 WebView 实例，通过静态方法进行操作。
+
+## UI 设计器
+
+- <a href="/designer/index.html" target="_blank">在线设计器</a>
+
+## 注意事项
+
+- UI 相关方法仅 app 在前台可用
+
+## 配置
+
+### UI 配置 网页会自动加载 package.json 中的配置
+
+在 package.json 中添加以下配置：
+
+```json
+{
+  "ui": {
+    "tabs": [
+      {
+        "name": "快点JS",
+        "file": "index.html"
+      }
+    ]
+  }
+}
+```
+
+### 配置项
+
+- `tabs` - 网页标签配置数组
+  - `name` - 标签名称
+  - `file` - 网页文件路径 基于 res 目录
+
+### 多个标签页
+
+如果配置了多个标签页，每个标签页会对应一个网页文件。在 package.json 中添加多个标签页配置即可。
+
+```json
+{
+  "ui": {
+    "tabs": [
+      {
+        "name": "快点JS",
+        "file": "index.html"
+      },
+      {
+        "name": "设置",
+        "file": "settings.html"
+      }
+    ]
+  }
+}
+```
+
+## 核心方法
+
+### 监听事件回调 - 设置事件回调函数
+
+```typescript
+function 监听事件回调(
+  回调函数: (事件名称: 字符串, 数据: 字典<任意类型>) => 无返回值
+): 无返回值;
+```
+
+**参数：**
+
+| 参数名     | 类型                                                 | 是否必填 | 默认值 | 描述                                 |
+| ---------- | ---------------------------------------------------- | -------- | ------ | ------------------------------------ |
+| `回调函数` | (事件名称: 字符串, 数据: 字典<任意类型>) => 无返回值 | 是       |        | 事件回调函数，用于处理来自网页的事件 |
+
+**示例：**
+
+```typescript
+// 设置事件回调
+$视图.监听事件回调((事件名称, 数据) => {
+  logi(`收到事件: ${事件名称}, 数据: ${JSON.stringify(数据)}`);
+});
+```
+
+### 调用函数 - 调用 WebView 中的 JavaScript 函数
+
+```typescript
+function 调用函数(函数名: 字符串, 数据: 字典<任意类型>): 无返回值;
+```
+
+**参数：**
+
+| 参数名   | 类型           | 是否必填 | 默认值 | 描述              |
+| -------- | -------------- | -------- | ------ | ----------------- |
+| `函数名` | 字符串         | 是       |        | JavaScript 方法名 |
+| `数据`   | 字典<任意类型> | 是       |        | 传递给方法的参数  |
+
+**示例：**
+
+```typescript
+// 调用网页中的方法
+$视图.调用函数("updateStatus", { status: "running", progress: 50 });
+$视图.调用函数("loadData", {
+  items: ["item1", "item2", "item3"],
+  timestamp: Date.now(),
+});
+```
+
+### 显示 Toast 提示 - 显示 Toast 提示消息
+
+```typescript
+function 显示Toast提示(消息内容: 字符串): 无返回值;
+```
+
+**参数：**
+
+| 参数名     | 类型   | 是否必填 | 默认值 | 描述         |
+| ---------- | ------ | -------- | ------ | ------------ |
+| `消息内容` | 字符串 | 是       |        | 提示消息内容 |
+
+**示例：**
+
+```typescript
+// 显示成功提示
+$视图.显示Toast提示("操作成功");
+
+// 显示错误提示
+$视图.显示Toast提示("网络连接失败，请重试");
+
+// 显示信息提示
+$视图.显示Toast提示("数据已保存");
+```
+
+### 显示确认对话框
+
+```typescript
+function 显示确认对话框(标题: 字符串, 消息内容: 字符串): 布尔值;
+```
+
+**参数：**
+
+| 参数名     | 类型   | 是否必填 | 默认值 | 描述       |
+| ---------- | ------ | -------- | ------ | ---------- |
+| `标题`     | 字符串 | 是       |        | 对话框标题 |
+| `消息内容` | 字符串 | 是       |        | 对话框内容 |
+
+**返回值：**
+
+| 类型     | 描述                                        |
+| -------- | ------------------------------------------- |
+| `布尔值` | 用户选择结果，确定返回 true，取消返回 false |
+
+**示例：**
+
+```typescript
+// 显示确认对话框
+const result = $视图.显示确认对话框("确认删除", "是否确定要删除这个文件？");
+if (result) {
+  $打印信息日志("用户确认删除");
+  // 执行删除操作
+  $文件.删除所有文件("temp.txt");
+} else {
+  $打印信息日志("用户取消删除");
+}
+
+// 确认退出应用
+const shouldExit = $视图.显示确认对话框("退出应用", "确定要退出快点JS吗？");
+if (shouldExit) {
+  // 执行退出逻辑
+}
+```
+
+### 显示输入对话框
+
+```typescript
+function 显示输入对话框(标题: 字符串, 消息内容: 字符串): 字符串;
+```
+
+**参数：**
+
+| 参数名     | 类型   | 是否必填 | 默认值 | 描述       |
+| ---------- | ------ | -------- | ------ | ---------- |
+| `标题`     | 字符串 | 是       |        | 对话框标题 |
+| `消息内容` | 字符串 | 是       |        | 对话框内容 |
+
+**返回值：**
+
+| 类型     | 描述                             |
+| -------- | -------------------------------- |
+| `字符串` | 用户输入的内容，取消返回空字符串 |
+
+**示例：**
+
+```typescript
+// 获取用户输入
+const username = $视图.显示输入对话框("用户登录", "请输入您的用户名：");
+if (username) {
+  $打印信息日志(`用户输入的用户名：${username}`);
+  // 继续登录流程
+} else {
+  $打印信息日志("用户取消了输入");
+}
+
+// 获取配置值
+const apiUrl = $视图.显示输入对话框("API配置", "请输入API服务器地址：");
+if (apiUrl) {
+  $配置.更新配置("apiUrl", apiUrl);
+  $视图.显示Toast提示("API地址配置成功");
+}
+```
+
+### 显示警告对话框
+
+```typescript
+function 显示警告对话框(标题: 字符串, 消息内容: 字符串): 无返回值;
+```
+
+**参数：**
+
+| 参数名     | 类型   | 是否必填 | 默认值 | 描述       |
+| ---------- | ------ | -------- | ------ | ---------- |
+| `标题`     | 字符串 | 是       |        | 对话框标题 |
+| `消息内容` | 字符串 | 是       |        | 对话框内容 |
+
+**示例：**
+
+```typescript
+// 显示错误警告
+$视图.显示警告对话框("错误", "网络连接失败，请检查网络设置");
+
+// 显示重要提示
+$视图.显示警告对话框("重要提示", "请确保设备已连接到电脑并信任此设备");
+
+// 显示操作结果
+$视图.显示警告对话框("操作完成", "脚本执行完成，共处理了100个项目");
+```
+
+## 网页端 API
+
+### registerUIFunc() - 在网页中注册函数，供主进程调用
+
+```typescript
+declare function registerUIFunc(
+  name: string,
+  func: (data: Record<string, any>) => void
+): void;
+```
+
+**参数：**
+
+| 参数名 | 类型     | 是否必填 | 默认值 | 描述     |
+| ------ | -------- | -------- | ------ | -------- |
+| `name` | string   | 是       |        | 函数名称 |
+| `func` | function | 是       |        | 函数实现 |
+
+**网页端示例：**
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>快点JS UI</title>
+  </head>
+  <body>
+    <div id="status">等待中...</div>
+    <button onclick="sendMessage()">发送消息</button>
+
+    <script>
+      // 注册供主进程调用的函数
+      ms.registerUIFunc("updateStatus", function (data) {
+        document.getElementById(
+          "status"
+        ).textContent = `状态: ${data.status}, 进度: ${data.progress}%`;
+      });
+
+      ms.registerUIFunc("loadData", function (data) {
+        console.log(`收到数据: ${JSON.stringify(data)}`);
+        // 更新界面显示数据
+        updateUI(data.items);
+      });
+
+      function sendMessage() {
+        ms.emitEvent("button.click", {
+          buttonId: "send",
+          timestamp: Date.now(),
+        });
+      }
+
+      function updateUI(items) {
+        // 更新界面逻辑
+      }
+    </script>
+  </body>
+</html>
+```
+
+### emitEvent() - 从网页向主进程发送事件
+
+```typescript
+declare function emitEvent(event: string, data: Record<string, any>): void;
+```
+
+**参数：**
+
+- `event` - 事件名称
+- `data` - 事件数据
+
+**网页端示例：**
+
+```javascript
+// 发送自定义事件
+ms.emitEvent("user.login", { username: "admin", timestamp: Date.now() });
+
+// 发送操作完成事件
+ms.emitEvent("task.completed", { taskId: "task001", result: "success" });
+
+// 发送错误事件
+ms.emitEvent("error.occurred", { message: "网络连接失败", code: 500 });
+```
+
+### startTask() - 启动脚本
+
+```typescript
+declare function startTask(): Promise<boolean>;
+```
+
+**返回值：**
+
+| 类型               | 描述                                  |
+| ------------------ | ------------------------------------- |
+| `Promise<boolean>` | 如果启动成功返回 true，否则返回 false |
+
+**说明：**
+
+启动脚本任务。
+
+**网页端示例：**
+
+```javascript
+// 启动脚本
+ms.startTask()
+  .then((result) => {
+    if (result) {
+      console.log("脚本启动成功");
+    } else {
+      console.log("脚本启动失败");
+    }
+  })
+  .catch((error) => {
+    console.error("启动脚本出错:", error);
+  });
+```
+
+### stopTask() - 停止脚本
+
+```typescript
+declare function stopTask(): Promise<boolean>;
+```
+
+**返回值：**
+
+| 类型               | 描述                                  |
+| ------------------ | ------------------------------------- |
+| `Promise<boolean>` | 如果停止成功返回 false，否则返回 true |
+
+**说明：**
+
+停止当前运行的脚本任务。
+
+**网页端示例：**
+
+```javascript
+// 停止脚本
+ms.stopTask()
+  .then((result) => {
+    if (!result) {
+      console.log("脚本停止成功");
+    } else {
+      console.log("脚本停止失败");
+    }
+  })
+  .catch((error) => {
+    console.error("停止脚本出错:", error);
+  });
+```
+
+### isTaskRunning() - 检查脚本运行状态
+
+```typescript
+declare function isTaskRunning(): Promise<boolean>;
+```
+
+**返回值：**
+
+| 类型               | 描述                                      |
+| ------------------ | ----------------------------------------- |
+| `Promise<boolean>` | 如果脚本正在运行返回 true，否则返回 false |
+
+**说明：**
+
+检查脚本是否正在运行。
+
+**网页端示例：**
+
+```javascript
+// 检查脚本状态
+ms.isTaskRunning()
+  .then((isRunning) => {
+    if (isRunning) {
+      console.log("脚本正在运行");
+      document.getElementById("task-status").textContent = "运行中";
+    } else {
+      console.log("脚本未运行");
+      document.getElementById("task-status").textContent = "已停止";
+    }
+  })
+  .catch((error) => {
+    console.error("获取脚本状态出错:", error);
+  });
+```
+
+### 配置管理方法
+
+#### setConfig() - 设置配置项
+
+```typescript
+declare function setConfig(key: string, value: any): Promise<boolean>;
+```
+
+**参数：**
+
+| 参数名  | 类型   | 是否必填 | 默认值 | 描述     |
+| ------- | ------ | -------- | ------ | -------- |
+| `key`   | string | 是       |        | 配置项键 |
+| `value` | any    | 是       |        | 配置项值 |
+
+**返回值：**
+
+| 类型               | 描述                                  |
+| ------------------ | ------------------------------------- |
+| `Promise<boolean>` | 如果设置成功返回 true，否则返回 false |
+
+**网页端示例：**
+
+```javascript
+// 设置配置项
+ms.setConfig("theme", "dark").then((success) => {
+  if (success) {
+    console.log("配置设置成功");
+  }
+});
+```
+
+#### getConfig() - 获取配置项
+
+```typescript
+declare function getConfig(key: string): Promise<any>;
+```
+
+**参数：**
+
+| 参数名 | 类型   | 是否必填 | 默认值 | 描述     |
+| ------ | ------ | -------- | ------ | -------- |
+| `key`  | string | 是       |        | 配置项键 |
+
+**返回值：**
+
+| 类型           | 描述     |
+| -------------- | -------- |
+| `Promise<any>` | 配置项值 |
+
+**网页端示例：**
+
+```javascript
+// 获取配置项
+ms.getConfig("theme").then((value) => {
+  console.log("当前主题:", value);
+});
+```
+
+#### removeConfig() - 移除配置项
+
+```typescript
+declare function removeConfig(key: string): Promise<boolean>;
+```
+
+**参数：**
+
+| 参数名 | 类型   | 是否必填 | 默认值 | 描述     |
+| ------ | ------ | -------- | ------ | -------- |
+| `key`  | string | 是       |        | 配置项键 |
+
+**返回值：**
+
+| 类型               | 描述                                  |
+| ------------------ | ------------------------------------- |
+| `Promise<boolean>` | 如果移除成功返回 true，否则返回 false |
+
+**网页端示例：**
+
+```javascript
+// 移除配置项
+ms.removeConfig("theme").then((success) => {
+  if (success) {
+    console.log("配置移除成功");
+  }
+});
+```
+
+#### getAllConfig() - 获取所有配置
+
+```typescript
+declare function getAllConfig(): Promise<Record<string, any>>;
+```
+
+**返回值：**
+
+| 类型                           | 描述               |
+| ------------------------------ | ------------------ |
+| `Promise<Record<string, any>>` | 包含所有配置的字典 |
+
+**网页端示例：**
+
+```javascript
+// 获取所有配置
+ms.getAllConfig().then((configs) => {
+  console.log("所有配置:", configs);
+});
+```
+
+### 快点 Agent 控制方法
+
+#### startAgent() - 启动 快点 Agent 服务
+
+```typescript
+declare function startAgent(): Promise<boolean>;
+```
+
+**返回值：**
+
+| 类型               | 描述                                  |
+| ------------------ | ------------------------------------- |
+| `Promise<boolean>` | 如果调用成功返回 true，否则返回 false |
+
+**说明：**
+
+启动 快点 Agent 服务。注意：返回值仅表示调用是否成功，不代表 快点 Agent 服务是否启动成功。
+
+**网页端示例：**
+
+```javascript
+// 启动 快点 Agent 服务
+ms.startAgent()
+  .then((result) => {
+    if (result) {
+      console.log("快点 Agent 启动调用成功");
+      // 可以通过 getAgentStatus() 检查实际状态
+      checkAgentStatus();
+    } else {
+      console.log("快点 Agent 启动调用失败");
+    }
+  })
+  .catch((error) => {
+    console.error("快点 Agent 启动出错:", error);
+  });
+```
+
+#### getAgentStatus() - 获取 快点 Agent 状态
+
+```typescript
+declare function getAgentStatus(): Promise<boolean>;
+```
+
+**返回值：**
+
+| 类型               | 描述                                              |
+| ------------------ | ------------------------------------------------- |
+| `Promise<boolean>` | 如果 快点 Agent 正在运行返回 true，否则返回 false |
+
+**说明：**
+
+检查 快点 Agent 服务的当前运行状态。
+
+**网页端示例：**
+
+```javascript
+// 检查 快点 Agent 状态
+ms.getAgentStatus()
+  .then((isRunning) => {
+    if (isRunning) {
+      console.log("快点 Agent 服务正在运行");
+      document.getElementById("agent-status").textContent = "已连接";
+      document.getElementById("agent-status").className = "status-online";
+    } else {
+      console.log("快点 Agent 服务未运行");
+      document.getElementById("agent-status").textContent = "未连接";
+      document.getElementById("agent-status").className = "status-offline";
+    }
+  })
+  .catch((error) => {
+    console.error("检查 快点 Agent 状态出错:", error);
+  });
+
+// 定期检查 快点 Agent 状态
+function checkAgentStatus() {
+  ms.getAgentStatus().then((isRunning) => {
+    updateAgentStatusUI(isRunning);
+  });
+}
+
+// 每 5 秒检查一次状态
+setInterval(checkAgentStatus, 5000);
+```
+
+### 系统功能
+
+#### getServerDeviceId() - 获取服务器设备 ID
+
+```typescript
+declare function getServerDeviceId(): Promise<string>;
+```
+
+**返回值：**
+
+| 类型              | 描述          |
+| ----------------- | ------------- |
+| `Promise<string>` | 服务器设备 ID |
+
+**说明：**
+
+获取当前运行脚本的服务器设备 ID。
+
+**网页端示例：**
+
+```javascript
+// 获取服务器设备ID
+ms.getServerDeviceId()
+  .then((deviceId) => {
+    console.log("当前服务器设备ID:", deviceId);
+  })
+  .catch((error) => {
+    console.error("获取服务器设备ID出错:", error);
+  });
+```
+
+#### openURL() - 调用浏览器打开 URL
+
+```typescript
+declare function openURL(url: string): Promise<boolean>;
+```
+
+**参数：**
+
+| 参数名 | 类型   | 是否必填 | 默认值 | 描述              |
+| ------ | ------ | -------- | ------ | ----------------- |
+| `url`  | string | 是       |        | 要打开的 URL 地址 |
+
+**返回值：**
+
+| 类型               | 描述                                  |
+| ------------------ | ------------------------------------- |
+| `Promise<boolean>` | 如果调用成功返回 true，否则返回 false |
+
+**说明：**
+
+打开指定的 URL 地址。
+
+**网页端示例：**
+
+```javascript
+// 打开URL
+ms.openURL("https://www.baidu.com")
+  .then((success) => {
+    if (success) {
+      console.log("URL打开成功");
+    } else {
+      console.log("URL打开失败");
+    }
+  })
+  .catch((error) => {
+    console.error("打开URL出错:", error);
+  });
+```
+
+### 完整示例
+
+**完整的控制面板示例：**
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>快点JS 控制面板</title>
+    <style>
+      .status-online {
+        color: green;
+      }
+      .status-offline {
+        color: red;
+      }
+      .button {
+        padding: 10px 20px;
+        margin: 5px;
+        cursor: pointer;
+      }
+      .panel {
+        margin: 20px 0;
+        padding: 15px;
+        border: 1px solid #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>快点JS 控制面板</h1>
+
+    <!-- 脚本控制 -->
+    <div class="panel">
+      <h3>脚本控制</h3>
+      <p>脚本状态: <span id="task-status">检查中...</span></p>
+      <button class="button" onclick="startScript()">启动脚本</button>
+      <button class="button" onclick="stopScript()">停止脚本</button>
+      <button class="button" onclick="checkTaskStatus()">检查状态</button>
+    </div>
+
+    <!-- 快点 Agent 控制 -->
+    <div class="panel">
+      <h3>快点 Agent 控制</h3>
+      <p>快点 Agent 状态: <span id="agent-status">检查中...</span></p>
+      <button class="button" onclick="startAgentService()">启动 快点 Agent</button> 
+      <button class="button" onclick="checkAgentStatus()">检查状态</button>
+    </div>
+
+    <!-- 配置管理 -->
+    <div class="panel">
+      <h3>配置管理</h3>
+      <input type="text" id="config-key" placeholder="配置键" />
+      <input type="text" id="config-value" placeholder="配置值" />
+      <button class="button" onclick="setConfigItem()">设置配置</button>
+      <button class="button" onclick="getConfigItem()">获取配置</button>
+      <button class="button" onclick="showAllConfigs()">显示所有配置</button>
+    </div>
+
+    <!-- 对话框测试 -->
+    <div class="panel">
+      <h3>对话框测试</h3>
+      <button class="button" onclick="showToastMessage()">显示Toast</button>
+      <button class="button" onclick="showConfirmDialog()">
+        显示确认对话框
+      </button>
+      <button class="button" onclick="showInputDialog()">显示输入对话框</button>
+      <button class="button" onclick="showAlertDialog()">显示警告对话框</button>
+    </div>
+
+    <div id="log-container"></div>
+
+    <script>
+      // 脚本控制函数
+      function startScript() {
+        addLog("正在启动脚本...");
+        ms.startTask()
+          .then((result) => {
+            addLog(result ? "脚本启动成功" : "脚本启动失败");
+            checkTaskStatus();
+          })
+          .catch((error) => {
+            addLog("启动脚本出错: " + error);
+          });
+      }
+
+      function stopScript() {
+        addLog("正在停止脚本...");
+        ms.stopTask()
+          .then((result) => {
+            addLog(!result ? "脚本停止成功" : "脚本停止失败");
+            checkTaskStatus();
+          })
+          .catch((error) => {
+            addLog("停止脚本出错: " + error);
+          });
+      }
+
+      function checkTaskStatus() {
+        ms.isTaskRunning()
+          .then((isRunning) => {
+            const statusElement = document.getElementById("task-status");
+            statusElement.textContent = isRunning ? "运行中" : "已停止";
+            statusElement.className = isRunning
+              ? "status-online"
+              : "status-offline";
+            addLog("脚本状态: " + (isRunning ? "运行中" : "已停止"));
+          })
+          .catch((error) => {
+            addLog("获取脚本状态出错: " + error);
+          });
+      }
+
+      // 快点 Agent 控制函数
+      function startAgentService() {
+        addLog("正在启动 快点 Agent 服务...");
+        ms.startAgent()
+          .then((result) => {
+            if (result) {
+              addLog("快点 Agent 启动调用成功");
+              setTimeout(() => {
+                checkAgentStatus();
+              }, 2000);
+            } else {
+              addLog("快点 Agent 启动调用失败");
+            }
+          })
+          .catch((error) => {
+            addLog("启动 快点 Agent 服务出错: " + error);
+          });
+      }
+
+      function checkAgentStatus() {
+        ms.getAgentStatus()
+          .then((isRunning) => {
+            updateAgentStatusUI(isRunning);
+            addLog("快点 Agent 状态: " + (isRunning ? "运行中" : "未运行"));
+          })
+          .catch((error) => {
+            addLog("获取 快点 Agent 状态出错: " + error);
+          });
+      }
+
+      function updateAgentStatusUI(isRunning) {
+        const statusElement = document.getElementById("agent-status");
+        if (isRunning) {
+          statusElement.textContent = "已连接";
+          statusElement.className = "status-online";
+        } else {
+          statusElement.textContent = "未连接";
+          statusElement.className = "status-offline";
+        }
+      }
+
+      // 配置管理函数
+      function setConfigItem() {
+        const key = document.getElementById("config-key").value;
+        const value = document.getElementById("config-value").value;
+        if (!key) {
+          addLog("请输入配置键");
+          return;
+        }
+        ms.setConfig(key, value)
+          .then((success) => {
+            addLog(success ? `配置 ${key} 设置成功` : `配置 ${key} 设置失败`);
+          })
+          .catch((error) => {
+            addLog("设置配置出错: " + error);
+          });
+      }
+
+      function getConfigItem() {
+        const key = document.getElementById("config-key").value;
+        if (!key) {
+          addLog("请输入配置键");
+          return;
+        }
+        ms.getConfig(key)
+          .then((value) => {
+            addLog(`配置 ${key} 的值: ${JSON.stringify(value)}`);
+          })
+          .catch((error) => {
+            addLog("获取配置出错: " + error);
+          });
+      }
+
+      function showAllConfigs() {
+        ms.getAllConfig()
+          .then((configs) => {
+            addLog("所有配置: " + JSON.stringify(configs, null, 2));
+          })
+          .catch((error) => {
+            addLog("获取所有配置出错: " + error);
+          });
+      }
+
+      // 对话框测试函数
+      function showToastMessage() {
+        // 注意：这些方法需要在主进程中调用，网页端无法直接调用
+        // 这里通过emitEvent发送事件给主进程处理
+        ms.emitEvent("show.toast", { message: "这是一个Toast消息" });
+        addLog("已发送Toast显示请求");
+      }
+
+      function showConfirmDialog() {
+        ms.emitEvent("show.confirm", {
+          title: "确认操作",
+          message: "您确定要执行这个操作吗？",
+        });
+        addLog("已发送确认对话框显示请求");
+      }
+
+      function showInputDialog() {
+        ms.emitEvent("show.input", {
+          title: "输入信息",
+          message: "请输入您的姓名：",
+        });
+        addLog("已发送输入对话框显示请求");
+      }
+
+      function showAlertDialog() {
+        ms.emitEvent("show.alert", {
+          title: "重要提示",
+          message: "这是一个重要的提示信息！",
+        });
+        addLog("已发送警告对话框显示请求");
+      }
+
+      // 工具函数
+      function addLog(message) {
+        const logContainer = document.getElementById("log-container");
+        const logEntry = document.createElement("div");
+        logEntry.textContent = new Date().toLocaleTimeString() + ": " + message;
+        logContainer.appendChild(logEntry);
+        logContainer.scrollTop = logContainer.scrollHeight;
+      }
+
+      // 页面加载完成后检查状态
+      window.onload = function () {
+        checkTaskStatus();
+        checkAgentStatus();
+        // 每 10 秒自动检查一次状态
+        setInterval(() => {
+          checkTaskStatus();
+          checkAgentStatus();
+        }, 10000);
+      };
+    </script>
+  </body>
+</html>
+```