help tips 标准化

Html/apps/static/js/chatbox.js

@@ -466,9 +466,6 @@ function generateProgressBar(N, idx, titles) {
     const progressBox = document.createElement('div');
     progressBox.className = 'progress-box';
 
-    // 获取详细信息容器
-    const detailBox = document.getElementById('progress-detail');
-
     // 根据N值生成子框并设置颜色
     for (let i = 0; i < N; i++) {
         const titleBox = document.createElement('div');
@@ -486,31 +483,14 @@ function generateProgressBar(N, idx, titles) {
         // 移除进度条上的文字，因为现在进度条很细
         titleBox.innerHTML = '';
 
-        // 监听鼠标移入事件来显示详情
-        titleBox.addEventListener('mouseenter', function () {
-            detailBox.innerHTML = `Step ${i + 1}: ${titles[i] || "No title"}`;
-            detailBox.style.display = 'block';
-            // 根据进度条位置显示详情
-            const rect = titleBox.getBoundingClientRect();
-            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`;
-            }
-        });
-
-        // 监听鼠标移出事件来隐藏详情
-        titleBox.addEventListener('mouseleave', function () {
-            detailBox.style.display = 'none';
-        });
+        // 使用attachImmediateTooltip函数，使提示框跟随鼠标移动
+        const tooltipText = `Step ${i + 1}: ${titles[i] || "No title"}`;
+        attachImmediateTooltip(titleBox, tooltipText);
 
         progressBox.appendChild(titleBox);
     }
 
     // 将生成的进度条添加到容器中
     container.appendChild(progressBox);
+
 }

Html/apps/static/js/helpTip.js

@@ -0,0 +1,58 @@
+// helpTip.js - 全局tooltip功能，可在不同页面复用
+
+// 在页面里复用一个全局 tooltip 节点
+let __globalTooltip;
+
+// 确保tooltip节点存在
+function ensureTooltip() {
+  if (!__globalTooltip) {
+    __globalTooltip = document.createElement('div');
+    __globalTooltip.className = 'tooltip-portal';
+    document.body.appendChild(__globalTooltip);
+  }
+  return __globalTooltip;
+}
+
+// 绑定到任意图标：移入→显示；移动→跟随；移出→隐藏
+function attachImmediateTooltip(anchorEl, text) {
+  const tip = ensureTooltip();
+  let shown = false;
+
+  function show(e) {
+    tip.textContent = text;
+    tip.style.display = 'block';
+    tip.style.opacity = '1';
+    position(e);
+    shown = true;
+  }
+  
+  function position(e) {
+    // 以鼠标位置为准
+    const padding = 8;
+    const tipRect = tip.getBoundingClientRect();
+    let x = e.clientX + 12;
+    let y = e.clientY - tipRect.height - 12;
+
+    // 简易防出界
+    const vw = window.innerWidth, vh = window.innerHeight;
+    if (x + tipRect.width + padding > vw) x = vw - tipRect.width - padding;
+    if (y < padding) y = e.clientY + 16; // 放到下面
+
+    tip.style.left = `${x}px`;
+    tip.style.top  = `${y}px`;
+  }
+  
+  function hide() {
+    tip.style.opacity = '0';
+    // 用小延迟避免闪烁
+    setTimeout(() => { if (!shown) return; tip.style.display = 'none'; }, 100);
+    shown = false;
+  }
+
+  anchorEl.addEventListener('mouseenter', show);
+  anchorEl.addEventListener('mousemove', position);
+  anchorEl.addEventListener('mouseleave', hide);
+}
+
+// 导出函数，供其他文件使用
+window.attachImmediateTooltip = attachImmediateTooltip;

Html/apps/static/js/lesson.js

@@ -4,60 +4,6 @@ window.addEventListener('load', ()=>{
     editLesson(window.material.material_id, window.chapter.chapter_name, window.lesson.lesson_name);
 });
 
-// 在页面里复用一个全局 tooltip 节点
-let __globalTooltip;
-function ensureTooltip() {
-  if (!__globalTooltip) {
-    __globalTooltip = document.createElement('div');
-    __globalTooltip.className = 'tooltip-portal';
-    document.body.appendChild(__globalTooltip);
-  }
-  return __globalTooltip;
-}
-
-// 绑定到任意图标：移入→显示；移动→跟随；移出→隐藏
-function attachImmediateTooltip(anchorEl, text) {
-  const tip = ensureTooltip();
-  let shown = false;
-
-  function show(e) {
-    tip.textContent = text;
-    tip.style.display = 'block';
-    tip.style.opacity = '1';
-    position(e);
-    shown = true;
-  }
-  function position(e) {
-    // 以鼠标位置为准（也可用 anchorEl.getBoundingClientRect()）
-    const padding = 8;
-    const tipRect = tip.getBoundingClientRect();
-    let x = e.clientX + 12;
-    let y = e.clientY - tipRect.height - 12;
-
-    // 简易防出界
-    const vw = window.innerWidth, vh = window.innerHeight;
-    if (x + tipRect.width + padding > vw) x = vw - tipRect.width - padding;
-    if (y < padding) y = e.clientY + 16; // 放到下面
-
-    tip.style.left = `${x}px`;
-    tip.style.top  = `${y}px`;
-  }
-  function hide() {
-    tip.style.opacity = '0';
-    // 用小延迟避免闪烁
-    setTimeout(() => { if (!shown) return; tip.style.display = 'none'; }, 100);
-    shown = false;
-  }
-
-  anchorEl.addEventListener('mouseenter', show);
-  anchorEl.addEventListener('mousemove', position);
-  anchorEl.addEventListener('mouseleave', hide);
-}
-
-// 你的 renderOutline 里调用：
-// if (outline.theme) addThemeWithHelp(tree, outline.theme);
-
-
 
 
 
@@ -196,6 +142,7 @@ function parseHeadings(mdText) {
     help.className = 'help-icon';
     help.textContent = ' ?';
     li.appendChild(help);
+
     // 新增：铅笔编辑按钮
     const editBtn = createEditButton(() => {
       openTitleEditor({

Html/apps/templates/code-like-desktop.html

@@ -140,9 +140,7 @@
         </div>
     </div>
     <script src="/static/js/process_show_floating_window.js"></script>
-
-
-
+    <script src="/static/js/helpTip.js"></script>
     <script src="/static/js/chatbox.js"></script>
     
     <script>

Html/apps/templates/lesson.html

@@ -100,6 +100,7 @@
     <script src="/static/js/teacherboard.js"></script>
     <script src="/static/js/teacher_course_setting.js"></script>
     <script src="/static/js/lesson_markdown.js"></script>
+    <script src="/static/js/helpTip.js"></script>
     <script src="/static/js/lesson.js"></script>
 
     <script>