many ok

Html/apps/static/css/process_show_floating_window.css

@@ -1,9 +1,9 @@
 .floating-window {
     position: fixed;
-    top: 10%; /* 距离页面顶部 10% */
-    right: 5%; /* 距离页面右边 5%，固定在右侧 */
+    top: 8%; /* 距离页面顶部 8% */
+    right: 1%; /* 距离页面右边 1%，固定在右侧 */
     width: 10vw; /* 根据视窗宽度动态调整 */
-    height: 7vh; /* 根据视窗高度动态调整 */
+    height: 8vh; /* 根据视窗高度动态调整 */
     max-width: 300px; /* 最大宽度 */
     max-height: 200px; /* 最大高度 */
     min-width: 100px; /* 最小宽度 */
@@ -14,7 +14,7 @@
     z-index: 999;
 }
 
-.header {
+.floating-header {
     background-color: #f0f0f0;
     cursor: move;
     height: 10%; /* 让头部高度为浮动窗口高度的10% */
@@ -27,44 +27,49 @@
     width: 30px;
     height: 100%; /* 占满头部的高度 */
     text-align: center;
-    font-size: 1.2vw; /* 字体大小根据窗口宽度变化 */
+    font-size: 0.8vw; /* 字体大小根据窗口宽度变化 */
     font-weight: bold;
     cursor: pointer;
 }
 
-.content {
-    padding-top: 10%; /* 留出顶部空间，防止内容与头部重叠 */
-    height: 90%; /* 占剩余空间 */
+.entry-content {
+    padding-top: 5%; /* 留出顶部空间，防止内容与头部重叠 */
+    height: 95%; /* 占剩余空间 */
     overflow-y: auto;
+    font-size: 0.8vw;
 }
 
 .entry {
     display: flex;
     align-items: center;
-    height: 15%; /* 每个条目的高度占浮动窗口高度的15% */
+    height: 33%; /* 每个条目的高度占浮动窗口高度的15% */
     border-bottom: 1px solid #e0e0e0;
-    padding: 2px 5px;
+    padding-left: 2px;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .status-dot {
-    width: 2vw; /* 根据视窗宽度动态调整 */
-    height: 2vw; /* 根据视窗宽度动态调整 */
+    text-align: right; /* 文本右对齐 */
+    width: 0.5vw; /* 根据视窗宽度动态调整 */
+    height: 0.5vw; /* 根据视窗宽度动态调整 */
     border-radius: 50%;
     margin-right: 5px;
     background-color: blue; /* 默认蓝色 */
 }
 
 .node-name {
+    max-width: 30%;
     flex: 3;
-    font-size: 2vw; /* 根据浮动窗口宽度调整字体大小 */
     color: #333;
-}
-
-.status-data {
-    flex: 6;
-    font-size: 1.8vw; /* 根据浮动窗口宽度调整字体大小 */
-    color: #666;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+
+.status-data {
+    flex: 6;
+    color: #666;
+    overflow: hidden;
+    white-space: nowrap;
+}

Html/apps/static/js/chatbox.js

@@ -19,9 +19,9 @@ document.addEventListener('DOMContentLoaded', function () {
     });
     // 监听来自服务器的消息
     socket.on('voiceMessage', function (data) {
-        console.log(data)
-        const input =  document.createElement('messageInput');
-        input.data = data['data'];
+        console.log(data);
+        const input =  document.getElementById('messageInput');
+        input.value += data;
     });
     socket.on('message', function (data) {
         // 显示服务器的回复消息

Html/apps/static/js/process_show_floating_window.js

@@ -48,28 +48,50 @@ function createEntry(nodeName) {
 
     return entry;
 }
-
+function cleanString(str) {
+    // 去除所有空白字符（包括中间的）
+    return str.replace(/\s+/g, '');
+}
 // 更新条目内容
 function updateEntry(nodeName, statusData) {
-    const contentDiv = document.getElementById('content');
-    const entries = contentDiv.children;
-
+    const contentDiv = document.getElementById('entry-content');
+    const entries = [...contentDiv.children];
+    entries.forEach(entry => {
+        entry.style.display = 'none';
+    });
+    // 只显示前8个条目
+    const displayEntries = entries.slice(0, 8);
+    displayEntries.forEach(entry => {
+        entry.style.display = ''; // 恢复默认显示
+    });
     // 查找对应的条目
     for (let entry of entries) {
         const nodeNameElement = entry.querySelector('.node-name');
         if (nodeNameElement.textContent === nodeName) {
-            const statusDot = entry.querySelector('.status-dot');
-            const statusDataElement = entry.querySelector('.status-data');
+            let statusDataElement = entry.querySelector('.status-data');
+            // 如果内容和要更新的内容一样,跳过
+            if (!statusData)return;
+            if (cleanString(statusData) === cleanString(statusDataElement.textContent)) {
+                return;
+            }
 
+            // 将元素滚动到最底部
+            const parent = entry.parentElement; // 获取条目所在的父容器
+            parent.appendChild(entry); // 移动到父容器末尾（自动移除原有位置）
+            const statusDot = entry.querySelector('.status-dot');
+            statusDataElement = entry.querySelector('.status-data');
             // 更新状态圆点颜色（根据状态来决定颜色，可以根据后端发送的状态修改）
             statusDot.style.backgroundColor = 'green';  // 假设状态是正常的，暂时设置为绿色
 
             // 更新流式数据
             statusDataElement.textContent = statusData;
+            statusDataElement.scrollLeft = statusDataElement.scrollWidth - statusDataElement.clientWidth
+            contentDiv.scrollTop = contentDiv.scrollHeight;
             return;  // 找到对应的条目后退出
         }
     }
 
+
     // 如果没有找到对应条目，创建一个新的条目并添加到页面
     contentDiv.appendChild(createEntry(nodeName));
     updateEntry(nodeName, statusData); // 立即更新新条目