From c7392dcf5a49b7e0a5f8040b1aba1b4fb16aec0d Mon Sep 17 00:00:00 2001
From: JianYu Zheng <2375294554@qq.com>
Date: Mon, 11 Aug 2025 17:44:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E6=8B=86=E5=88=86te?=
 =?UTF-8?q?st=5Fpage.html,=E6=8A=8A=E4=B8=80=E9=83=A8=E5=88=86document?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E7=9A=84=E4=BB=A3=E7=A0=81=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E5=87=BA=E6=9D=A5=EF=BC=8C=E5=87=8F=E5=B0=91=E5=8D=95=E4=B8=AA?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=A7=E5=B0=8F=EF=BC=8C=E4=B8=94=E6=8A=8A?=
 =?UTF-8?q?logger.js=E5=92=8CxiaoZhiConnect.js=E4=B9=9F=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E5=87=BA=E6=9D=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/xiaozhi-server/test/js/document.js       | 28 +++++++++++++++++++
 main/xiaozhi-server/test/js/utils/logger.js   |  5 +++-
 main/xiaozhi-server/test/js/xiaoZhiConnect.js |  7 ++---
 3 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 main/xiaozhi-server/test/js/document.js

diff --git a/main/xiaozhi-server/test/js/document.js b/main/xiaozhi-server/test/js/document.js
new file mode 100644
index 00000000..508a1463
--- /dev/null
+++ b/main/xiaozhi-server/test/js/document.js
@@ -0,0 +1,28 @@
+// DOM元素
+const connectButton = document.getElementById('connectButton');
+const serverUrlInput = document.getElementById('serverUrl');
+const connectionStatus = document.getElementById('connectionStatus');
+const messageInput = document.getElementById('messageInput');
+const sendTextButton = document.getElementById('sendTextButton');
+const recordButton = document.getElementById('recordButton');
+const stopButton = document.getElementById('stopButton');
+const conversationDiv = document.getElementById('conversation');
+const logContainer = document.getElementById('logContainer');
+let visualizerCanvas = document.getElementById('audioVisualizer');
+
+// ota 是否连接成功，修改成对应的样式
+export function otaStatusStyle (flan) {
+    if(flan){
+        document.getElementById('otaStatus').textContent = 'ota已连接';
+        document.getElementById('otaStatus').style.color = 'green';
+    }else{
+        document.getElementById('otaStatus').textContent = 'ota未连接';
+        document.getElementById('otaStatus').style.color = 'red';
+    }
+}
+
+// ota 是否连接成功，修改成对应的样式
+export function getLogContainer (flan) {
+    return  logContainer;
+}
+
diff --git a/main/xiaozhi-server/test/js/utils/logger.js b/main/xiaozhi-server/test/js/utils/logger.js
index 38e43150..913c2c9a 100644
--- a/main/xiaozhi-server/test/js/utils/logger.js
+++ b/main/xiaozhi-server/test/js/utils/logger.js
@@ -1,4 +1,7 @@
-const logContainer = document.getElementById('logContainer');
+import { getLogContainer } from '../document.js'
+
+const logContainer = getLogContainer();
+// 日志记录函数
 export function log(message, type = 'info') {
     // 将消息按换行符分割成多行
     const lines = message.split('\n');
diff --git a/main/xiaozhi-server/test/js/xiaoZhiConnect.js b/main/xiaozhi-server/test/js/xiaoZhiConnect.js
index 6270cf83..606d615b 100644
--- a/main/xiaozhi-server/test/js/xiaoZhiConnect.js
+++ b/main/xiaozhi-server/test/js/xiaoZhiConnect.js
@@ -1,4 +1,5 @@
 import { log } from './utils/logger.js';
+import { otaStatusStyle } from './document.js'
 
 // WebSocket 连接
 export async function webSocketConnect(otaUrl,wsUrl,config){
@@ -88,12 +89,10 @@ async function sendOTA(otaUrl, config) {
         if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
 
         const result = await res.json();
-        document.getElementById('otaStatus').textContent = 'ota已连接';
-        document.getElementById('otaStatus').style.color = 'green';
+        otaStatusStyle(true)
         return true; // 成功
     } catch (err) {
-        document.getElementById('otaStatus').textContent = 'ota未连接';
-        document.getElementById('otaStatus').style.color = 'red';
+        otaStatusStyle(false)
         return false; // 失败
     }
 }