cn/com allow all

Html/apps/static/css/process_show_floating_window.css

@@ -0,0 +1,70 @@
+.floating-window {
+    position: fixed;
+    top: 10%; /* 距离页面顶部 10% */
+    right: 5%; /* 距离页面右边 5%，固定在右侧 */
+    width: 10vw; /* 根据视窗宽度动态调整 */
+    height: 7vh; /* 根据视窗高度动态调整 */
+    max-width: 300px; /* 最大宽度 */
+    max-height: 200px; /* 最大高度 */
+    min-width: 100px; /* 最小宽度 */
+    min-height: 50px; /* 最小高度 */
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    z-index: 999;
+}
+
+.header {
+    background-color: #f0f0f0;
+    cursor: move;
+    height: 10%; /* 让头部高度为浮动窗口高度的10% */
+    text-align: center;
+    line-height: 20px;
+}
+
+.draggable {
+    display: inline-block;
+    width: 30px;
+    height: 100%; /* 占满头部的高度 */
+    text-align: center;
+    font-size: 1.2vw; /* 字体大小根据窗口宽度变化 */
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.content {
+    padding-top: 10%; /* 留出顶部空间，防止内容与头部重叠 */
+    height: 90%; /* 占剩余空间 */
+    overflow-y: auto;
+}
+
+.entry {
+    display: flex;
+    align-items: center;
+    height: 15%; /* 每个条目的高度占浮动窗口高度的15% */
+    border-bottom: 1px solid #e0e0e0;
+    padding: 2px 5px;
+}
+
+.status-dot {
+    width: 2vw; /* 根据视窗宽度动态调整 */
+    height: 2vw; /* 根据视窗宽度动态调整 */
+    border-radius: 50%;
+    margin-right: 5px;
+    background-color: blue; /* 默认蓝色 */
+}
+
+.node-name {
+    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;
+}

Html/apps/static/js/chatbox.js

@@ -136,6 +136,17 @@ document.addEventListener('DOMContentLoaded', function() {
             $(systemMessage.id).remove();
         }, 5000); // 5000 毫秒 = 5 秒
     })
+    socket.on('process',function(data){
+        if (typeof data === 'string'){
+            data = JSON.parse(data);
+        }
+
+        // 遍历每个节点，并更新相应的条目
+        for (const nodeName in data) {
+            const statusData = data[nodeName];
+            updateEntry(nodeName, statusData);  // 更新每个节点的条目
+        }
+    });
 });
 
 

Html/apps/static/js/process_show_floating_window.js

@@ -0,0 +1,81 @@
+// 拖动浮动窗口功能
+const floatingWindow = document.getElementById('floatingWindow');
+const header = document.querySelector('.header');
+const draggable = document.querySelector('.draggable');
+
+let isDragging = false;
+let offsetX, offsetY;
+
+// 开始拖动
+draggable.addEventListener('mousedown', (e) => {
+    isDragging = true;
+    offsetX = e.clientX - floatingWindow.getBoundingClientRect().left;
+    offsetY = e.clientY - floatingWindow.getBoundingClientRect().top;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', () => {
+        isDragging = false;
+        document.removeEventListener('mousemove', onMouseMove);
+    });
+});
+
+// 拖动中
+function onMouseMove(e) {
+    if (isDragging) {
+        floatingWindow.style.left = e.clientX - offsetX + 'px';
+        floatingWindow.style.top = e.clientY - offsetY + 'px';
+    }
+}
+
+// 动态生成新条目
+function createEntry(nodeName) {
+    const entry = document.createElement('div');
+    entry.classList.add('entry');
+
+    const statusDot = document.createElement('div');
+    statusDot.classList.add('status-dot');
+
+    const nodeNameElement = document.createElement('div');
+    nodeNameElement.classList.add('node-name');
+    nodeNameElement.textContent = nodeName;
+
+    const statusData = document.createElement('div');
+    statusData.classList.add('status-data');
+    statusData.textContent = '流式数据...';
+
+    entry.appendChild(statusDot);
+    entry.appendChild(nodeNameElement);
+    entry.appendChild(statusData);
+
+    return entry;
+}
+
+// 更新条目内容
+function updateEntry(nodeName, statusData) {
+    const contentDiv = document.getElementById('content');
+    const entries = contentDiv.children;
+
+    // 查找对应的条目
+    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');
+
+            // 更新状态圆点颜色（根据状态来决定颜色，可以根据后端发送的状态修改）
+            statusDot.style.backgroundColor = 'green';  // 假设状态是正常的，暂时设置为绿色
+
+            // 更新流式数据
+            statusDataElement.textContent = statusData;
+            return;  // 找到对应的条目后退出
+        }
+    }
+
+    // 如果没有找到对应条目，创建一个新的条目并添加到页面
+    contentDiv.appendChild(createEntry(nodeName));
+    updateEntry(nodeName, statusData); // 立即更新新条目
+}
+
+// 模拟后端数据流
+// const socket = new WebSocket('ws://localhost:8080');  // 连接后端 WebSocket
+
+