Merge branch 'test'

修复progress Bar和提示美化
2025-12-12 16:59:58 +08:00
parent fc7c6708b4 ac74c28f64
commit ae9f7b84f4
19 changed files with 640 additions and 270 deletions
--- a/Html/apps/_docs/前端/helpTip.md
+++ b/Html/apps/_docs/前端/helpTip.md
@@ -0,0 +1,165 @@
+# HelpTip 组件文档
+
+## 功能介绍
+
+HelpTip 是一个通用的提示框组件，用于在鼠标悬停时显示提示信息。它具有以下特点：
+
+- 提示框跟随鼠标移动
+- 支持多行文本
+- 自动防出界
+- 平滑的显示/隐藏动画
+- 支持在不同页面复用
+- 代码标准化，易于维护
+
+## 文件结构
+
+```
+/static/
+├── css/
+│   └── helpTip.css    # 样式文件
+└── js/
+    └── helpTip.js     # 核心功能文件
+```
+
+## 使用方法
+
+### 1. 引入文件
+
+在需要使用 HelpTip 的 HTML 页面中引入以下文件：
+
+```html
+<!-- 样式文件 -->
+<link rel="stylesheet" href="/static/css/helpTip.css">
+
+<!-- 功能文件 -->
+<script src="/static/js/helpTip.js"></script>
+```
+
+### 2. 基本用法
+
+```javascript
+// 获取需要绑定提示框的元素
+const element = document.getElementById('target-element');
+
+// 绑定提示框
+attachImmediateTooltip(element, '这是一条提示信息');
+```
+
+### 3. 支持换行的提示信息
+
+```javascript
+attachImmediateTooltip(element, `这是一条\n多行提示信息\n\n支持换行符`);
+```
+
+### 4. 与问号图标配合使用
+
+```html
+<!-- HTML -->
+<span>这是一个元素<span class="help-icon">?</span></span>
+```
+
+```javascript
+// JavaScript
+const helpIcon = document.querySelector('.help-icon');
+attachImmediateTooltip(helpIcon, '这是一条详细的提示信息');
+```
+
+## API 说明
+
+### attachImmediateTooltip(anchorEl, text)
+
+绑定提示框到指定元素。
+
+#### 参数
+
+- `anchorEl` (HTMLElement): 触发提示框的元素
+- `text` (string): 提示框显示的文本内容，支持换行符 `\n`
+
+#### 返回值
+
+- `Function`: 清理函数，用于移除事件监听器
+
+## 样式说明
+
+### 问号图标样式
+
+| 类名 | 说明 |
+|------|------|
+| `.help-icon` | 问号图标基础样式 |
+| `.help-icon:hover` | 问号图标悬停样式 |
+
+### 提示框样式
+
+| 类名 | 说明 |
+|------|------|
+| `.tooltip-portal` | 提示框基础样式 |
+| `.tooltip-portal.show` | 提示框显示状态 |
+| `.tooltip-portal.fade` | 提示框动画效果 |
+
+## 示例场景
+
+### 1. 进度条提示
+
+```javascript
+// 为进度条的每个阶段绑定提示框
+for (let i = 0; i < progressItems.length; i++) {
+    const item = progressItems[i];
+    attachImmediateTooltip(item, `阶段 ${i + 1}: ${item.title}`);
+}
+```
+
+### 2. 表单字段提示
+
+```javascript
+// 为表单字段绑定提示框
+const formFields = document.querySelectorAll('.form-field');
+formFields.forEach(field => {
+    const tip = field.getAttribute('data-tip');
+    if (tip) {
+        attachImmediateTooltip(field, tip);
+    }
+});
+```
+
+### 3. 工具栏图标提示
+
+```javascript
+// 为工具栏图标绑定提示框
+const toolbarIcons = document.querySelectorAll('.toolbar-icon');
+toolbarIcons.forEach(icon => {
+    const title = icon.getAttribute('title');
+    if (title) {
+        attachImmediateTooltip(icon, title);
+    }
+});
+```
+
+## 注意事项
+
+1. 确保在 DOM 加载完成后再调用 `attachImmediateTooltip` 函数
+2. 如果元素是动态生成的，需要在元素生成后再绑定提示框
+3. 提示框会自动添加到 `document.body` 中，不会被父元素的 `overflow` 属性裁切
+4. 提示框的 `z-index` 为 999999，确保它能覆盖所有元素
+5. 提示框默认支持多行文本，使用 `white-space: pre-wrap` 样式
+
+## 浏览器兼容性
+
+- Chrome/Edge (最新版)
+- Firefox (最新版)
+- Safari (最新版)
+
+## 代码优化建议
+
+1. 对于大量元素需要绑定提示框的情况，建议使用事件委托
+2. 如果页面中不再需要使用提示框，可以调用返回的清理函数移除事件监听器
+3. 提示文本应简洁明了，避免过长
+
+## 更新日志
+
+- v1.0.0: 初始版本，实现了基本的提示框功能
+- v1.0.1: 优化了样式，增加了动画效果
+- v1.0.2: 支持多行文本，自动防出界
+
+## 贡献指南
+
+如果您发现问题或有改进建议，欢迎提出 Issue 或 Pull Request。
--- a/Html/apps/extension_ase/ase_client/client.py
+++ b/Html/apps/extension_ase/ase_client/client.py
@@ -70,10 +70,8 @@ class ASEngineClient:
        # ACK事件处理
        @self.sio.on('ack', namespace=self.namespace)
        def on_ack(data):
-            print(f"Received ACK: {data}")
            ack_id = data.get('ack_id')
            if ack_id and ack_id in self.ack_events:
-                print(f"Received ACK for message: {ack_id}")
                event = self.ack_events[ack_id]
                event.set()  # 触发事件，通知等待的线程
            
--- a/Html/apps/extension_ase/ase_client/manager.py
+++ b/Html/apps/extension_ase/ase_client/manager.py
@@ -49,7 +49,8 @@ class ChatManager:
        self.chapter_chain = None
        self.function_manager = FunctionManager()
        self.bb = None
-        self.chat_historys = None
+        self.chat_historys = []
+        self.scores = []
        self.vscode_ws = None
        self._vscode_queue = deque()
        self._lock = Semaphore(1)
@@ -129,10 +130,11 @@ class ChatManager:
        self.chapter_chain_now = chapter_index
        self.chapter_chain[chapter_index].Focus()

-    def load_now_chapter(self):
+    def load_now_chapter(self, load_code = True):
        print(f"now load now chapter markdown {self.chapter_chain_now}")
        self.ase_client.loadmarkdown(self.chapter_chain[self.chapter_chain_now].chapter, self.chapter_chain[self.chapter_chain_now].chapter_prompt, self.chapter_chain[self.chapter_chain_now].score_prompt)
-        self.load_code_in_markdown()
+        if load_code:
+            self.load_code_in_markdown()


    def upload_bb(self):
--- a/Html/apps/services/asectrl_service.py
+++ b/Html/apps/services/asectrl_service.py
@@ -2,6 +2,28 @@ import requests
 from flask_socketio import Namespace


+def clear_user_session(asengine_url, asengine_token, user_id):
+    '''
+    快速清理用户会话的函数
+    '''
+    try:
+        base_url = asengine_url
+        clear_url = f"{base_url}/api/sync/clear_user_session"
+        payload = {
+            'namespace_url': asengine_token,  # WebSocket命名空间URL
+            'user_id': user_id,  # 用户ID，对应session_info.id
+            'clear_type': 'all'  # 清理类型，默认为全部
+        }
+        headers = {
+            'Content-Type': 'application/json'
+        }
+        response = requests.post(clear_url, json=payload, headers=headers)
+        response.raise_for_status()  # 检查请求是否成功
+        print(f"User session {user_id} cleared successfully. Response: {response.json()}")
+    except Exception as e:
+        print(f"Error clearing user session: {e}")
+
+
 def on_connect_to_ase(client, entry, init_data, **kwargs):
    '''
    此时刚刚建立好aseclient连接，并向前端发送打开code-server-like指令。
@@ -9,25 +31,14 @@ def on_connect_to_ase(client, entry, init_data, **kwargs):
    namespace_entry, ase_client = entry
    namespace_entry.emit('open-iframe',"", room=init_data['room'], namespace='/agent')
    namespace_entry.emit('message', "Agents服务已连接, 加载教案中", room=init_data['room'], namespace='/agent')
-    
-    if init_data.get("restart", False):
-        try:
-            base_url = namespace_entry.app.config['ASE_ENGINE_URL']
-            clear_url = f"{base_url}/clear_user_session"
-            payload = {
-                'namespace_url': namespace_entry.app.config['ASE_ENGINE_URL_TOKEN'],  # WebSocket命名空间URL
-                'user_id': init_data['room'],  # 用户ID，对应session_info.id
-                'clear_type': 'all'  # 清理类型，默认为全部
-            }
-            headers = {
-                'Content-Type': 'application/json'
-            }
-            response = requests.post(clear_url, json=payload, headers=headers)
-            response.raise_for_status()  # 检查请求是否成功
-        except Exception as e:
-            print(f"Error clearing user session: {e}")
-    ase_client.chatmanager.load_now_chapter()
-    ase_client.send_text("chapter-start", "")
+        
+    restart = init_data.get("restart", False)
+    if restart: # 重启时，从-1章进入 0章
+        ase_client.chatmanager.next_chapter()
+    ase_client.chatmanager.load_now_chapter(load_code=restart)
+    print("load_now_chapter with restart:", restart)
+    if restart: 
+        ase_client.send_text("chapter-start", "")
    namespace_entry.emit('message', "教案加载完毕", room=init_data['room'], namespace='/agent')


--- a/Html/apps/services/course_services/learning_progess_process.py
+++ b/Html/apps/services/course_services/learning_progess_process.py
@@ -92,6 +92,7 @@ def get_multiagents_dialog_list(user_id: str) -> List[Dict]:
        
        # 检查响应
        if response.status_code == 200:
+            current_app.logger.info(f"获取MultiAgents对话列表成功: user_id={user_id}, json={response.json()}")
            return response.json()
        else:
            current_app.logger.error(f"获取MultiAgents对话列表失败: HTTP {response.status_code}")
--- a/Html/apps/services/markdown_service.py
+++ b/Html/apps/services/markdown_service.py
@@ -24,7 +24,6 @@ def load_markdown_file(course_id, chapter_name, lesson_name):
            break
    if file_link is None:
        return None
-    print(f"load_markdown_file: {file_link}")
    return get_text_file(file_link)

 def convert_markdown_to_html(md_file: str) -> str:
--- a/Html/apps/sockets/namespaces.py
+++ b/Html/apps/sockets/namespaces.py
@@ -23,7 +23,8 @@ from ..services.asectrl_service import (
    receive_ase_process,
    receive_ase_judge,
    receive_ase_next_chapter,
-    receive_ase_chapter_score
+    receive_ase_chapter_score,
+    clear_user_session
 )


@@ -62,32 +63,24 @@ class VSCodeNamespace(Namespace):


 class AgentNamespace(Namespace):
-    def on_login(self, data):
-        self.app = current_app
-        ex = current_app.extensions
-        uuid2username    = ex["uuid2username"]
-        backboard_manager = ex["backboard_manager"]
-        data = json.loads(data)
-        user_uuid = data['user_uuid']
-        course_id = data['course_id']
-        lesson_name = data['lesson_name']
-        chapter_name = data['chapter_name']
-        user_id = uuid2username[user_uuid]
-        session['user_uuid'] = user_uuid
-        join_room(user_uuid, namespace='/agent')  # 将该用户加入以user_id为名的room
-        print(f'User connected with session user_uuid: {user_uuid}')
-
-        user_uuid2chatmanager = ex["user_uuid2chatmanager"]
-        user_uuid2ase_client = ex["user_uuid2ase_client"]
-        if (user_uuid2ase_client.get(user_uuid,None) is not None and user_uuid2ase_client[user_uuid].connected):
-            user_uuid2ase_client[user_uuid].disconnect()
-        chatmanager = user_uuid2chatmanager[user_uuid]
-        chatmanager.function_manager.add_function(judge, {'course_id': course_id, 'root_path': f'/home/{user_id}/{course_id}/{chapter_name}/{lesson_name}'})
-        chatmanager.function_manager.add_function(next_chapter, {'user_uuid': user_uuid})
+    def _load_learning_progress(self, chatmanager, user_id, course_id, chapter_name, lesson_name, continue_learn):
+        """加载并恢复用户学习进度
        
-        if not chatmanager.restart:# 尝试加载用户学习进度
+        Args:
+            chatmanager: 聊天管理器实例
+            user_id: 用户ID
+            course_id: 课程ID
+            chapter_name: 章节名称
+            lesson_name: 课时名称
+            continue_learn: 是否继续学习
+            
+        Returns:
+            int: 需要跳过的章节数
+        """
+        need_skip_chapters = 0
+        
+        if continue_learn:  # 尝试加载用户学习进度
            progress_result = load_learning_progress(user_id, course_id, chapter_name, lesson_name)
-            need_skip_chapters = 0
            
            if progress_result['exists']:
                progress = progress_result['data']
@@ -111,18 +104,52 @@ class AgentNamespace(Namespace):
                # 使用默认值，确保有完整的结构
                chatmanager.chat_historys = progress_result['data']['chat_historys']
                chatmanager.scores = progress_result['data']['scores']
+        
+        return need_skip_chapters
+    
+    def on_login(self, data):
+        self.app = current_app
+        ex = current_app.extensions
+        uuid2username    = ex["uuid2username"]
+        backboard_manager = ex["backboard_manager"]
+        data = json.loads(data)
+        user_uuid = data['user_uuid']
+        course_id = data['course_id']
+        lesson_name = data['lesson_name']
+        chapter_name = data['chapter_name']
+        user_id = uuid2username[user_uuid]
+        session['user_uuid'] = user_uuid
+        join_room(user_uuid, namespace='/agent')  # 将该用户加入以user_id为名的room
+        print(f'User connected with session user_uuid: {user_uuid}')
+
+        user_uuid2chatmanager = ex["user_uuid2chatmanager"]
+        user_uuid2ase_client = ex["user_uuid2ase_client"]
+        if (user_uuid2ase_client.get(user_uuid,None) is not None and user_uuid2ase_client[user_uuid].connected):
+            user_uuid2ase_client[user_uuid].disconnect()
+        chatmanager = user_uuid2chatmanager[user_uuid]
+        chatmanager.function_manager.add_function(judge, {'course_id': course_id, 'root_path': f'/home/{user_id}/{course_id}/{chapter_name}/{lesson_name}'})
+        chatmanager.function_manager.add_function(next_chapter, {'user_uuid': user_uuid})
+
+        clear_user_session(current_app.config["ASE_ENGINE_URL"], current_app.config["ASE_ENGINE_URL_TOKEN"], user_id)
+        continue_learn = not chatmanager.restart
+        need_skip_chapters = self._load_learning_progress(chatmanager, user_id, course_id, chapter_name, lesson_name, continue_learn)

        fmd,fmdp,fsp = load_full_markdown_file(course_id, chapter_name, lesson_name)
        user_uuid2ase_client[user_uuid] = HSAEngineClient(current_app.config["ASE_ENGINE_URL"], current_app.config["ASE_ENGINE_NAMESPACE"],id=user_id, chatmanager = chatmanager)
-        chatmanager.init(user_uuid, user_uuid2ase_client[user_uuid], fmd, fmdp, fsp, course_id, chapter_name, lesson_name, max_iter=5, app=current_app, socketio=self)
-        backboard_manager.add_backboard(user_uuid, user_id, course_id, lesson_name, root_path=f'/home/{user_id}/{course_id}/{chapter_name}/{lesson_name}')
+        chatmanager.init(user_uuid, user_uuid2ase_client[user_uuid], 
+                        fmd,   fmdp, fsp, course_id, chapter_name, lesson_name, max_iter=5, app=current_app, socketio=self)
+        backboard_manager.add_backboard(user_uuid, user_id, course_id,
+                                         lesson_name, root_path=f'/home/{user_id}/{course_id}/{chapter_name}/{lesson_name}')
        chatmanager.bb = backboard_manager.get_backboard(user_uuid)
-        if not progress:
-            chatmanager.next_chapter()
+        # 如果有保存的进度，需要跳过已经完成的章节、无需清空代码、对话历史恢复
+        if continue_learn:
+            for _ in range(need_skip_chapters):
+                chatmanager.next_chapter()
+                emit('next_chapter', room=user_uuid, namespace='/agent')
+            # 恢复对话历史到前端 - 使用批量发送消息列表
+            if chatmanager.chat_historys:
+                emit('messages', chatmanager.chat_historys, room=user_uuid, namespace='/agent')
        
-        # 如果有保存的进度，需要跳过已经完成的章节
-        for _ in range(need_skip_chapters):
-            chatmanager.next_chapter()
        self.chatmanager = chatmanager
        self.ase_client = user_uuid2ase_client[user_uuid]
        user_uuid2ase_client[user_uuid].register_on_connect_entry(
--- a/Html/apps/static/cdnback/js/tex-mml-chtml.js
+++ b/Html/apps/static/cdnback/js/tex-mml-chtml.js
--- a/Html/apps/static/css/desktop.css
+++ b/Html/apps/static/css/desktop.css
@@ -107,13 +107,7 @@
        .btn-group-toggle .btn {
            padding: 5px 10px;
        }
-        #leftSidebar, .vscode-web, #rightSidebar {
-            height: 100%;
-            overflow: auto;
-          }
-        
-
-          /* 主容器，使用 grid 布局 */
+        /* 主容器，使用 grid 布局 */
        #maxcontainer {
            display: grid;
            grid-template-columns: 2fr 5px 3fr 5px 2fr; /* 默认宽度比例 */
@@ -122,7 +116,20 @@
        
        /* 各区域基础样式 */
        .sidebar {
-            overflow: auto; /* 确保内容可以滚动 */
+            display: flex;
+            flex-direction: column;
+            overflow: hidden; /* 隐藏溢出内容，让内部元素单独滚动 */
+        }
+        
+        /* 左侧边栏样式 */
+        #leftSidebar {
+            height: 100%;
+        }
+        
+        /* 中间和右侧边栏样式 */
+        .vscode-web, #rightSidebar {
+            height: 100%;
+            overflow: auto;
        }
        
        .vscode-web {
@@ -162,55 +169,75 @@



+/* Markdown内容区域样式 */
+#markdown-content {
+    flex: 1; /* 占满剩余空间 */
+    overflow-y: auto; /* 只有内容区域可以垂直滚动 */
+    overflow-x: hidden; /* 隐藏水平滚动条 */
+}
+
+/* 设置进度条容器样式 */
+#markdown-content-process {
+    display: flex;
+    align-items: flex-end; /* 让进度条靠底部对齐 */
+    padding: 0 10px 10px 10px; /* 添加底部内边距，调整与底部的距离 */
+    box-sizing: border-box;
+    flex-shrink: 0; /* 防止进度条被压缩 */
+}
+
 /* 设置每个子框的基本样式 */
 .progress-box {
-    height: 100%;  /* 高度为 100%，撑满容器 */
+    width: 100%;  /* 宽度为 100%，撑满容器 */
    display: flex;
    flex-direction: row;  /* 使子框横向排列 */
    justify-content: flex-start;
+    gap: 2px; /* 进度条之间的间距 */
+    margin-bottom: 0; /* 移除底部边距 */
 }

 .progress-title {
-    height: 60px;
-    text-align: center;
-    line-height: 60px;
-    margin-right: 2px;
-    border: 1px solid #ddd;
-    transition: background-color 0.3s ease;
+    height: 8px; /* 更细的进度条 */
+    flex: 1; /* 均匀分配宽度 */
+    border-radius: 4px; /* 圆角设计，更扁平化 */
+    transition: all 0.3s ease; /* 平滑过渡效果 */
    position: relative;
-    
-    /* 新增以下属性实现文字溢出省略 */
-    white-space: nowrap;  /* 防止文字换行 */
-    overflow: hidden;     /* 隐藏溢出内容 */
-    text-overflow: ellipsis;  /* 溢出部分显示为省略号 */
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 轻微阴影，增加层次感 */
+    overflow: visible; /* 允许文字溢出 */
 }

+/* 颜色方案：已学习为蓝色，当前学习为绿色，未学习为白色 */
+.blue {
+    background-color: #007bff; /* 蓝色 - 已学习 */
+}

 .green {
-    background-color: green;
-    color: white;
+    background-color: #28a745; /* 绿色 - 当前学习 */
 }

 .white {
-    background-color: white;
-    color: black;
+    background-color: #e9ecef; /* 浅灰色 - 未学习，比纯白色更美观 */
 }

-.progress-box > .progress-title:last-child {
-    margin-bottom: 0; /* 防止最后一个子框出现多余的间距 */
+/* 进度条悬停效果 */
+.progress-title:hover {
+    transform: translateY(-1px); /* 轻微上浮效果 */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 增强阴影 */
 }

 /* 进度条详细信息的样式 */
 #progress-detail {
    position: absolute;
-    top: 0;
-    left: 0;
    display: none;
    padding: 10px;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.8);
    color: white;
-    border-radius: 5px;
+    border-radius: 6px;
    max-width: 200px;
+    font-size: 14px;
+    z-index: 1000;
+    pointer-events: none; /* 防止干扰鼠标事件 */
+    box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* 增强阴影 */
 }

 .button {
--- a/Html/apps/static/css/helpTip.css
+++ b/Html/apps/static/css/helpTip.css
@@ -0,0 +1,51 @@
+/* HelpTip 组件样式 */
+
+/* 问号图标样式 */
+.help-icon {
+  display: inline-block;
+  margin-left: 8px;
+  color: #888;
+  font-weight: bold;
+  cursor: help;
+  font-size: 14px;
+  line-height: 1;
+  transition: color 0.2s ease;
+}
+
+.help-icon:hover {
+  color: #4CAF50;
+}
+
+/* 全局提示框样式（挂在 body 下） */
+.tooltip-portal {
+  position: fixed;   /* 不受父级 overflow 影响 */
+  left: 0;
+  top: 0;
+  z-index: 999999;   /* 足够高，覆盖所有元素 */
+  display: none;
+  opacity: 0;
+  transition: opacity 0.08s linear;
+
+  background: rgba(0, 0, 0, 0.9);
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.4;
+  pointer-events: none; /* 鼠标穿透，避免闪烁 */
+  white-space: pre-wrap; /* 支持换行符 */
+  max-width: 300px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  word-wrap: break-word;
+}
+
+/* 提示框显示状态 */
+.tooltip-portal.show {
+  display: block;
+  opacity: 1;
+}
+
+/* 提示框动画效果 */
+.tooltip-portal.fade {
+  transition: opacity 0.2s ease;
+}
--- a/Html/apps/static/css/lesson.css
+++ b/Html/apps/static/css/lesson.css
@@ -1,34 +1,3 @@
-/* 问号图标 */
-.help-icon {
-  display: inline-block;
-  margin-left: 8px;
-  color: #888;
-  font-weight: bold;
-  cursor: help;
-}
-.help-icon:hover { color: #4CAF50; }
-
-/* Portal Tooltip（挂在 body 下） */
-.tooltip-portal {
-  position: fixed;   /* 不受父级 overflow 影响 */
-  left: 0; top: 0;
-  z-index: 999999;   /* 足够高，覆盖侧栏等 */
-  display: none;
-  opacity: 0;
-  transition: opacity .08s linear;
-
-  background: rgba(0,0,0,.9);
-  color: #fff;
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-size: 13px;
-  line-height: 1.4;
-  pointer-events: none; /* 鼠标穿透，避免闪烁 */
-  white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0,0,0,.25);
-}
-
-

 .add-step-btn, .add-phase-btn {
  background-color: #4CAF50;
--- a/Html/apps/static/js/chatbox.js
+++ b/Html/apps/static/js/chatbox.js
@@ -2,6 +2,57 @@
 var socket;
 let system_message_idx = 0
 const activeApprovals = {};
+let chatManager; // 全局聊天管理器实例
+
+// 聊天消息管理器 - 更现代的数据结构
+class ChatMessageManager {
+    constructor() {
+        this.chatbox = document.getElementById('chatbox');
+        this.messageTemplate = {
+            user: `<div class="chat-message user-message"><b>你:</b> {{content}}</div>`,
+            assistant: `<div><b>华实君:</b></div><div class="chat-message server-message"> {{content}}</div>`
+        };
+    }
+
+    // 渲染单个消息
+    renderMessage(message) {
+        let html;
+        let content;
+
+        // 处理不同的数据格式
+        if (typeof message === 'string') {
+            // 旧格式：直接字符串
+            content = marked.parse(message);
+            html = this.messageTemplate.assistant.replace('{{content}}', content);
+        } else if (typeof message === 'object' && message !== null) {
+            // 新格式：{role, content} 对象
+            content = marked.parse(message.content);
+            if (message.role === 'user') {
+                html = this.messageTemplate.user.replace('{{content}}', content);
+            } else {
+                html = this.messageTemplate.assistant.replace('{{content}}', content);
+            }
+        }
+
+        if (html) {
+            const messageDiv = document.createElement('div');
+            messageDiv.innerHTML = html;
+            this.chatbox.appendChild(messageDiv);
+            this.scrollToBottom();
+        }
+    }
+
+    // 渲染多条消息（用于恢复历史）
+    renderMessages(messages) {
+        messages.forEach(message => this.renderMessage(message));
+    }
+
+    // 滚动到底部
+    scrollToBottom() {
+        this.chatbox.scrollTop = this.chatbox.scrollHeight;
+    }
+}
+
 // 清理过期的批准记录
 function cleanupExpiredApprovals() {
  const now = Date.now();
@@ -24,6 +75,10 @@ document.addEventListener('DOMContentLoaded', function () {
            folder: data.folder
        }
    });
+
+    // 初始化聊天消息管理器
+    chatManager = new ChatMessageManager();
+
    socket.on('connect', function () {
        console.log('Connected to server');
        socket.emit('login',JSON.stringify(data));
@@ -38,12 +93,13 @@ document.addEventListener('DOMContentLoaded', function () {
        input.value += data;
    });
    socket.on('message', function (data) {
-        // 显示服务器的回复消息
-        const serverMessage = document.createElement('div');
-        serverMessage.innerHTML = `<div><b>华实君:</b></div><div class="chat-message server-message"> ${marked.parse(data)}</div>`;
-        document.getElementById('chatbox').appendChild(serverMessage);
-        // 滚动到最新消息
-        document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
+        // 显示服务器的回复消息 - 单个消息
+        chatManager.renderMessage(data);
+    });
+    
+    socket.on('messages', function (data) {
+        // 显示服务器发送的消息列表 - 用于恢复对话历史
+        chatManager.renderMessages(data);
    });
    socket.on('message-hint', function(data){
        console.log('get message-hint');
@@ -90,7 +146,7 @@ document.addEventListener('DOMContentLoaded', function () {
                }

                const approveButton = document.createElement('button');
-                approveButton.innerHTML = '<i class="fas fa-check-circle-check"></i>';
+                approveButton.innerHTML = '<i class="bi bi-check-circle-fill"></i>';
                approveButton.data = element;
                approveButton.className = 'approve-button';
                approveButton.onclick = function (event) {
@@ -210,22 +266,14 @@ function sendMessage() {
    const input = document.getElementById('messageInput').value;
    if (input.trim() === '') return;

-    // 使用 marked.js 解析 markdown
-    const markdownHtml = marked.parse(input);
-
-    // 显示用户发送的消息
-    const userMessage = document.createElement('div');
-    userMessage.innerHTML = `<div class="chat-message user-message"><b>你:</b> ${markdownHtml}</div>`;
-    document.getElementById('chatbox').appendChild(userMessage);
-
    // 发送消息到服务器
    socket.emit('message', JSON.stringify({ data: input, type: 'text' }));

+    // 使用聊天管理器显示用户消息
+    chatManager.renderMessage({ role: 'user', content: input });
+
    // 清空输入框
    document.getElementById('messageInput').value = '';
-
-    // 滚动到最新消息
-    document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
 }


@@ -376,14 +424,11 @@ window.addEventListener('beforeunload', () => {

 let currentChapterIndex = -1;
 function next_chapter(data) {
-    // 获取所有的 h3 元素
-    var iframe = document.getElementById('markdown-content-iframe');
-
-    // 访问 iframe 的文档对象
-    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
-    var titles = []
-    var h3Elements = iframeDocument.querySelectorAll('h3');
-    console.log("h3Elements next")
+    var container = document.getElementById('markdown-content-container');
+    var titles = [];
+    var h3Elements = container.querySelectorAll('h3');
+    console.log("h3Elements next");
+    
    if (currentChapterIndex >= h3Elements.length) {
        return; // 如果已经到了最后一个章节，则不进行任何操作
    }
@@ -391,7 +436,7 @@ function next_chapter(data) {
    // 隐藏当前章节及其后的内容
    for (let i = 0; i < h3Elements.length; i++) {
        h3Elements[i].style.display = 'none';
-        titles.push(h3Elements[i].innerText)
+        titles.push(h3Elements[i].innerText);
        let nextSibling = h3Elements[i].nextElementSibling;
        while (nextSibling && nextSibling.tagName !== 'H3') {
            nextSibling.style.display = 'none';
@@ -421,48 +466,31 @@ function generateProgressBar(N, idx, titles) {
    const progressBox = document.createElement('div');
    progressBox.className = 'progress-box';

-    // 获取详细信息容器
-    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.innerHTML = '';

-        // 设置每个进度节点的宽度
-        titleBox.style.width = `${nodeWidth}%`;
-
-        // 监听鼠标移入事件来显示详情
-        titleBox.addEventListener('mouseenter', function () {
-            detailBox.innerHTML = `Step ${i + 1}: ${titles[i] || "No title"}`;// - Additional details here...`;
-            detailBox.style.display = 'block';
-            // 根据进度条位置显示详情
-            const rect = titleBox.getBoundingClientRect();
-            detailBox.style.top = `${rect.top + window.scrollY - 100}px`;  // 微调位置
-            detailBox.style.left = `${rect.left + window.scrollX + rect.width / 2 - detailBox.offsetWidth / 2}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);
+
 }
--- a/Html/apps/static/js/helpTip.js
+++ b/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;
--- a/Html/apps/static/js/lesson.js
+++ b/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({
--- a/Html/apps/static/js/render-desktop-markdown.js
+++ b/Html/apps/static/js/render-desktop-markdown.js
@@ -0,0 +1,116 @@
+// 动态加载 Markdown 文件
+function loadMarkdown(course_id, chapter_name, lesson_name) {
+    fetch(`/${course_id}-${chapter_name}-${lesson_name}-markdown`)
+    .then(response => response.json())
+    .then(data => {
+        if (data.markdown_content) {
+            // 使用 marked 解析 Markdown 内容
+            const html = marked.parse(data.markdown_content);
+            
+            // 创建包含 MathJax 支持的 HTML 结构
+            const markdownContainer = document.createElement('div');
+            markdownContainer.id = 'markdown-content-container';
+            markdownContainer.innerHTML = html;
+            
+            // 处理代码块，实现缩略显示
+            const codeBlocks = markdownContainer.querySelectorAll('pre code');
+            codeBlocks.forEach(codeBlock => {
+                const preBlock = codeBlock.parentElement;
+                
+                // 保存原始代码内容
+                const originalContent = preBlock.innerHTML;
+                
+                // 创建缩略提示元素
+                const codeHint = document.createElement('div');
+                codeHint.className = 'code-hint';
+                codeHint.innerHTML = '<div style="padding: 10px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; color: #666; font-size: 14px; text-align: center;">💡 代码已放置在代码区中，点击展开查看</div>';
+                
+                // 创建展开/折叠按钮
+                const toggleButton = document.createElement('button');
+                toggleButton.className = 'toggle-code';
+                toggleButton.innerHTML = '展开代码';
+                toggleButton.style.cssText = 'margin: 5px; padding: 5px 10px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px;';
+                
+                // 添加到提示元素中
+                codeHint.appendChild(toggleButton);
+                
+                // 替换原始代码块为提示
+                preBlock.innerHTML = '';
+                preBlock.appendChild(codeHint);
+                
+                // 保存原始代码，用于切换
+                preBlock.dataset.originalContent = originalContent;
+                preBlock.dataset.isExpanded = 'false';
+                
+                // 添加切换事件
+                toggleButton.addEventListener('click', () => {
+                    if (preBlock.dataset.isExpanded === 'false') {
+                        // 展开代码
+                        preBlock.innerHTML = preBlock.dataset.originalContent;
+                        toggleButton.innerHTML = '折叠代码';
+                        preBlock.appendChild(toggleButton);
+                        preBlock.dataset.isExpanded = 'true';
+                        // 如果MathJax已加载，重新排版
+                        if (typeof MathJax !== 'undefined') {
+                            MathJax.typesetPromise([preBlock]);
+                        }
+                    } else {
+                        // 折叠代码
+                        preBlock.innerHTML = '';
+                        preBlock.appendChild(codeHint.cloneNode(true));
+                        preBlock.appendChild(toggleButton.cloneNode(true));
+                        preBlock.dataset.isExpanded = 'false';
+                        // 重新添加事件监听
+                        const newToggleButton = preBlock.querySelector('.toggle-code');
+                        newToggleButton.addEventListener('click', arguments.callee);
+                    }
+                });
+            });
+            
+            // 清空内容容器并添加渲染后的内容
+            const contentElement = document.getElementById('markdown-content');
+            contentElement.innerHTML = '';
+            contentElement.appendChild(markdownContainer);
+            
+            // 配置并加载 MathJax
+            if (typeof MathJax === 'undefined') {
+                // 动态加载 MathJax
+                const script = document.createElement('script');
+                script.src = '/static/cdnback/js/tex-mml-chtml.js';
+                script.async = true;
+                script.onload = function() {
+                    MathJax.config = {
+                        tex: {
+                            inlineMath: [['$', '$'], ['\\(', '\\)']]
+                        },
+                        svg: {
+                            fontCache: 'global'
+                        }
+                    };
+                    MathJax.typesetPromise([markdownContainer]);
+                    // 初始化课程进度
+                    next_chapter();
+                };
+                document.head.appendChild(script);
+            } else {
+                // MathJax 已加载，直接排版
+                MathJax.typesetPromise([markdownContainer]);
+                // 初始化课程进度
+                next_chapter();
+            }
+        } else {
+            console.error('Markdown file not found');
+        }
+    })
+    .catch(error => {
+        console.error('Error loading markdown:', error);
+    });
+}
+
+// 文档加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 从全局变量获取课程信息
+    if (window.appData) {
+        loadMarkdown(window.appData.course_id, window.appData.chapter_name, window.appData.lesson_name);
+    }
+});
--- a/Html/apps/templates/code-like-desktop.html
+++ b/Html/apps/templates/code-like-desktop.html
@@ -8,6 +8,7 @@
    </style>
    <link rel="stylesheet" href="/static/css/desktop.css">
    <link rel="stylesheet" href="/static/css/chatbox_approve_icon.css">
+    <link rel="stylesheet" href="/static/css/helpTip.css">
    <script>
        document.cookie = "vscode-tkn=44edc269-6f88-46ab-9790-dc253f66ac36; path=/; SameSite=None; Secure";
    </script>
@@ -140,9 +141,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>
@@ -193,7 +192,6 @@



-
        // 使用 fetch 发送请求到 Flask 服务器，获取 session 信息
        fetch('/get_session', {
            method: 'GET',
@@ -230,31 +228,6 @@
        }

        
-    // 动态加载 Markdown 文件
-    function loadMarkdown(course_id, chapter_name, lesson_name) {
-        fetch(`/${course_id}-${chapter_name}-${lesson_name}-markdown`)
-        .then(response => response.json())
-        .then(data => {
-            if (data.html_url) {
-                document.getElementById('markdown-content').innerHTML = `<iframe id="markdown-content-iframe" src="${data.html_url}"style="width: 100%;height: 100%;"></iframe>`;
-                document.getElementById('markdown-content-iframe').addEventListener('load', function() {
-                    // 在这里执行你想要的操作
-                    console.log('Iframe has finished loading');
-                    next_chapter();
-                });
-            } else {
-                console.error('Markdown file not found');
-            }
-        })
-        .catch(error => {
-            console.error('Error loading markdown:', error);
-        });
-    }
-    document.addEventListener('DOMContentLoaded', function() {
-        loadMarkdown('{{course_id}}','{{chapter_name}}','{{lesson_name}}');
-    });
-
-
 // 侧边工具栏切换
        const sidebarTools = document.getElementById('sidebarTools');
        const toggleButton = document.getElementById('toggleButton');
@@ -270,5 +243,7 @@
        });

    </script>
+    <!-- 引入 Markdown 渲染脚本 -->
+    <script src="/static/js/render-desktop-markdown.js"></script>
 </body>
 </html>
--- a/Html/apps/templates/lesson.html
+++ b/Html/apps/templates/lesson.html
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="/static/css/teacherboard.css">
    <link rel="stylesheet" href="/static/css/dashboard.css">
    <link rel="stylesheet" href="/static/css/lesson.css">
+    <link rel="stylesheet" href="/static/css/helpTip.css">
    <link rel="stylesheet" href="/static/css/teacher_course_setting.css">
    <link rel="stylesheet" href="/static/css/lesson_setting.css">
    <link rel="stylesheet" href="/static/css/modelinput.css">
@@ -100,6 +101,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>
--- a/Html/apps/views/markdown.py
+++ b/Html/apps/views/markdown.py
@@ -14,17 +14,8 @@ bp = Blueprint("markdown", __name__)
 def convert_md(course_id, chapter_name, lesson_name):
    print(f"convert_md: {course_id}, {chapter_name}, {lesson_name}")
    md_file = load_markdown_file(course_id, chapter_name, lesson_name)
-    # 配置Markdown解析器，启用数学公式支持
-    md = MarkdownIt()
-    md.use(texmath.texmath_plugin)  # 添加数学公式插件
-    # 转换markdown为html（包含公式标记）
-    html = md.render(md_file)
-    # 包装样式时添加MathJax支持，用于在浏览器中渲染公式
-    html_with_styles = wrap_with_styles(html)
-    # 保存HTML文件到static
-    html_output_path = os.path.join(current_app.config["STATIC_DIR"], f"{course_id}-{chapter_name}-{lesson_name}.html")
-    save_html(html_with_styles, html_output_path)
-    return jsonify({"html_url": f"/static/{course_id}-{chapter_name}-{lesson_name}.html"})
+    # 直接返回Markdown源文件内容，不进行服务器端渲染
+    return jsonify({"markdown_content": md_file})

 # 提供静态文件访问
@bp.route("/static/<path:filename>")
--- a/Html/apps/views/vscode.py
+++ b/Html/apps/views/vscode.py
@@ -19,11 +19,14 @@ def desktop(user_uuid, course_id, chapter_name, lesson_name):
        return redirect(url_for("auth.login"))
    
    # 检查是否有 load_history 参数
-    load_history = request.args.get('load_history')
-    if load_history is None:
+    load_history_str = request.args.get('load_history')
+    if load_history_str is None:
        # 如果没有参数，跳转到确认页面
        return redirect(url_for("vscode.desktop_nouser", course_id=course_id, chapter_name=chapter_name, lesson_name=lesson_name))
    
+    # 将字符串转换为布尔值
+    load_history = load_history_str.lower() == 'true'
+    
    # 全局映射
    user_id = uuid2username[user_uuid]
    userid_recorder[f"{user_id}&{course_id}"] = session["user_uuid"]
@@ -66,7 +69,6 @@ def desktop(user_uuid, course_id, chapter_name, lesson_name):


    chatmanager = ChatManager(restart=not load_history)
-    print(f"now user uuid {user_uuid}")
    current_app.extensions["user_uuid2chatmanager"][user_uuid] = chatmanager
    code_server_port = 10000 + int(uuid.uuid4().int % 10000)
    # chatmanager.start_code_server(user_uuid, user_id, path_dir, code_server_port)