优化：拆分test_page.html,把一部分document操作的代码提取出来，减少单个文件大小，且把logger.js和xiaoZhiConnect.js也提取出来

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;
+}
+

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');

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已连接';
+        otaStatusStyle(true)
-        document.getElementById('otaStatus').style.color = 'green';
         return true; // 成功
     } catch (err) {
-        document.getElementById('otaStatus').textContent = 'ota未连接';
+        otaStatusStyle(false)
-        document.getElementById('otaStatus').style.color = 'red';
         return false; // 失败
     }
 }