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; // 失败
     }
 }