美化processbar

Html/apps/static/js/chatbox.js

@@ -469,35 +469,38 @@ function generateProgressBar(N, idx, titles) {
     // 获取详细信息容器
     const detailBox = document.getElementById('progress-detail');
 
-    // 根据N值动态调整每个进度节点的宽度
-    const nodeWidth = 100 / N;  // 每个节点的宽度为 100% / N
-
     // 根据N值生成子框并设置颜色
     for (let i = 0; i < N; i++) {
         const titleBox = document.createElement('div');
         titleBox.className = 'progress-title';
 
-        // 设置进度条的颜色
+        // 设置进度条的颜色：已学习为蓝色，当前学习为绿色，未学习为白色
         if (i < idx) {
-            titleBox.classList.add('green'); // 已完成部分
+            titleBox.classList.add('blue'); // 已完成部分 - 蓝色
+        } else if (i === idx) {
+            titleBox.classList.add('green'); // 当前正在学习 - 绿色
         } else {
-            titleBox.classList.add('white'); // 未完成部分
+            titleBox.classList.add('white'); // 未完成部分 - 白色
         }
 
-        // 设置每个子框的标题
-        titleBox.innerHTML = titles[i] || `Step ${i + 1}`;
-
-        // 设置每个进度节点的宽度
-        titleBox.style.width = `${nodeWidth}%`;
+        // 移除进度条上的文字，因为现在进度条很细
+        titleBox.innerHTML = '';
 
         // 监听鼠标移入事件来显示详情
         titleBox.addEventListener('mouseenter', function () {
-            detailBox.innerHTML = `Step ${i + 1}: ${titles[i] || "No title"}`;// - Additional details here...`;
+            detailBox.innerHTML = `Step ${i + 1}: ${titles[i] || "No title"}`;
             detailBox.style.display = 'block';
             // 根据进度条位置显示详情
             const rect = titleBox.getBoundingClientRect();
-            detailBox.style.top = `${rect.top + window.scrollY - 100}px`;  // 微调位置
+            detailBox.style.top = `${rect.top + window.scrollY - 10}px`;  // 调整位置到进度条上方
             detailBox.style.left = `${rect.left + window.scrollX + rect.width / 2 - detailBox.offsetWidth / 2}px`;
+            // 确保详情框不会超出视口
+            if (detailBox.getBoundingClientRect().left < 0) {
+                detailBox.style.left = '10px';
+            }
+            if (detailBox.getBoundingClientRect().right > window.innerWidth) {
+                detailBox.style.left = `${window.innerWidth - detailBox.offsetWidth - 10}px`;
+            }
         });
 
         // 监听鼠标移出事件来隐藏详情