可以跑了 准备做系统

Html/static/js/chatbox.js

@@ -3,7 +3,7 @@ var socket;
 document.addEventListener('DOMContentLoaded', function() {
     data = window.appData;
     console.log(data);
-    socket = io('http://localhost:5000/agent?username='+data.username+'&folder='+data.folder);
+    socket = io('/agent?username='+data.username+'&folder='+data.folder);
     socket.on('connect', function() {
         console.log('Connected to server');
         socket.emit('login',JSON.stringify(data));
@@ -18,6 +18,49 @@ document.addEventListener('DOMContentLoaded', function() {
         // 滚动到最新消息
         document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
     });
+    socket.on('request_function', function(data){
+        try {
+            console.log("request_function", data);
+            if (typeof data === 'string') {
+                data = JSON.parse(data);
+            }
+            for (let i = 0; i < data.length; i++) {
+                const element = data[i]
+                const requestMessage = document.createElement('div');
+                requestMessage.className = 'chat-message server-message';
+                const approveButton = document.createElement('button');
+                approveButton.innerText = '批准';
+                approveButton.data = element;
+                approveButton.onclick = function(event) {
+                    console.log(element)
+                    socket.emit('message', JSON.stringify({type:'function', data:element}));
+                    event.currentTarget.disabled = true;
+                };
+                // 将按钮添加到消息气泡中
+                requestMessage.innerHTML = `<b>Function:</b> ${element.name}(${JSON.stringify(element.arguments)})<br>`;
+                requestMessage.appendChild(approveButton);
+                document.getElementById('chatbox').appendChild(requestMessage);
+                document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
+            }
+        } catch (error) {
+            console.log(error)
+        }
+    });
+    socket.on('next_chapter', function(data){
+        next_chapter(data);
+    });
+    socket.on('chapter_score',function(data){
+        if (typeof data === 'string'){
+            data = JSON.parse(data);
+        }
+        console.log(data)
+        const scoreMessage = document.createElement('div');
+        scoreMessage.className = 'chat-message server-message';
+        scoreMessage.innerHTML = `<b>Chapter ${data.chapter_id} Score:</b> ${data.data}`;
+        document.getElementById('chatbox').appendChild(scoreMessage);
+        document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
+    })
+
 });
 
 
@@ -33,19 +76,32 @@ fontSizeSlider.addEventListener('input', function() {
 // 语言切换按钮
 const englishRadio = document.getElementById('english');
 const chineseRadio = document.getElementById('chinese');
-let language = 'en';  // 默认语言
+
+const englishLabel = document.getElementById('label_for_en');
+const chineseLabel = document.getElementById('label_for_zh');
+let language = 'zh';  // 默认语言
 
 // 切换语言事件
 englishRadio.addEventListener('change', function() {
-    if (englishRadio.checked) language = 'en';
+    if (englishRadio.checked) {
+        language = 'en';
+        englishLabel.classList.add('active');
+        chineseLabel.classList.remove('active');
+    }
+    socket.emit('language',language);
 });
 
 chineseRadio.addEventListener('change', function() {
-    if (chineseRadio.checked) language = 'zn';
+    if (chineseRadio.checked) {
+        language = 'zh';
+        chineseLabel.classList.add('active');
+        englishLabel.classList.remove('active');
+    }
+    socket.emit('language',language);
 });
 
 
-        
+
 // 发送消息
 function sendMessage() {
     const input = document.getElementById('messageInput').value;
@@ -60,7 +116,7 @@ function sendMessage() {
     document.getElementById('chatbox').appendChild(userMessage);
 
     // 发送消息到服务器
-    socket.emit('message', input);
+    socket.emit('message', JSON.stringify({data: input, type:'text'}));
 
     // 清空输入框
     document.getElementById('messageInput').value = '';
@@ -69,3 +125,95 @@ function sendMessage() {
     document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
 }
 
+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")
+    if (currentChapterIndex >= h3Elements.length) {
+        return; // 如果已经到了最后一个章节，则不进行任何操作
+    }
+
+    // 隐藏当前章节及其后的内容
+    for (let i = 0; i < h3Elements.length; i++) {
+        h3Elements[i].style.display = 'none';
+        titles.push(h3Elements[i].innerText)
+        let nextSibling = h3Elements[i].nextElementSibling;
+        while (nextSibling && nextSibling.tagName !== 'H3') {
+            nextSibling.style.display = 'none';
+            nextSibling = nextSibling.nextElementSibling;
+        }
+    }
+
+    // 显示下一个章节及其后的内容，直到再下一个h3元素或结束
+    if (currentChapterIndex + 1 < h3Elements.length) {
+        h3Elements[currentChapterIndex + 1].style.display = 'block';
+        let nextSibling = h3Elements[currentChapterIndex + 1].nextElementSibling;
+        while (nextSibling && nextSibling.tagName !== 'H3') {
+            nextSibling.style.display = 'block';
+            nextSibling = nextSibling.nextElementSibling;
+        }
+    }
+    currentChapterIndex++;
+
+    generateProgressBar(h3Elements.length, currentChapterIndex, titles);
+}
+
+function generateProgressBar(N, idx, titles) {
+    const container = document.getElementById('markdown-content-process');
+    container.innerHTML = ''; // 清空内容
+    
+    // 创建进度条的外框
+    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'); // 已完成部分
+        } else {
+            titleBox.classList.add('white'); // 未完成部分
+        }
+
+        // 设置每个子框的标题
+        titleBox.innerHTML = titles[i] || `Step ${i + 1}`;
+
+        // 设置每个进度节点的宽度
+        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';
+        });
+
+        progressBox.appendChild(titleBox);
+    }
+
+    // 将生成的进度条添加到容器中
+    container.appendChild(progressBox);
+}

Html/static/js/dashboard.js

@@ -0,0 +1,123 @@
+// dashboard.js
+
+function openCourseProgress(courseId) {
+    const courseData = {
+        'algorithm': {
+            title: '算法分析与设计',
+            progress: '50%',
+            chapters: [
+                {
+                    title: '第一章: 算法基础',
+                    subChapters: [
+                        { title: '子章节1: 算法介绍', path: 'introduction' },
+                        { title: '子章节2: 时间复杂度分析', path: 'time-complexity' }
+                    ]
+                },
+                {
+                    title: '第二章: 排序与查找',
+                    subChapters: [
+                        { title: '子章节1: 排序算法', path: 'sorting-algorithms' },
+                        { title: '子章节2: 查找算法', path: 'searching-algorithms' }
+                    ]
+                },
+                {
+                    title: '第三章: 图算法',
+                    subChapters: [
+                        { title: '子章节1: 图的表示', path: 'graph-representation' },
+                        { title: '子章节2: DFS 与 BFS', path: 'dfs-bfs' }
+                    ]
+                }
+            ]
+        },
+        'data-structures': {
+            title: '数据结构与算法',
+            progress: '30%',
+            chapters: [
+                {
+                    title: '第一章: 数组与链表',
+                    subChapters: [
+                        { title: '子章节1: 数组基础', path: 'array-basics' },
+                        { title: '子章节2: 链表实现', path: 'linked-list' }
+                    ]
+                },
+                {
+                    title: '第二章: 栈与队列',
+                    subChapters: [
+                        { title: '子章节1: 栈的实现', path: 'stack-implementation' },
+                        { title: '子章节2: 队列的应用', path: 'queue-application' }
+                    ]
+                },
+                {
+                    title: '第三章: 二叉树',
+                    subChapters: [
+                        { title: '子章节1: 二叉树的遍历', path: 'binary-tree-traversal' },
+                        { title: '子章节2: 二叉查找树', path: 'binary-search-tree' }
+                    ]
+                }
+            ]
+        }
+        // 可以继续添加其他课程的数据
+    };
+
+    // 获取对应课程的数据
+    const course = courseData[courseId];
+    if (!course) return;
+
+    // 更新右侧滑出卡片的内容
+    document.getElementById('course-title').textContent = course.title;
+    document.getElementById('progress').textContent = course.progress;
+
+    // 更新章节列表
+    const chapterList = document.getElementById('chapter-list');
+    chapterList.innerHTML = '';  // 清空之前的章节
+
+    course.chapters.forEach(chapter => {
+        const chapterItem = document.createElement('li');
+        chapterItem.classList.add('chapter-item');
+        
+        const chapterTitle = document.createElement('div');
+        chapterTitle.classList.add('chapter-title');
+        chapterTitle.textContent = chapter.title;
+        chapterItem.appendChild(chapterTitle);
+
+        // 创建子章节
+        if (chapter.subChapters && chapter.subChapters.length > 0) {
+            const subChapterList = document.createElement('ul');
+            subChapterList.classList.add('sub-chapter-list');
+            
+            chapter.subChapters.forEach(subChapter => {
+                const subChapterItem = document.createElement('li');
+                subChapterItem.classList.add('sub-chapter-item');
+                subChapterItem.textContent = subChapter.title;
+                
+                // 添加点击事件跳转到学习页面
+                subChapterItem.addEventListener('click', () => {
+                    const userId = 'userid'; // 这里可以动态传入当前用户ID
+                    const courseName = encodeURIComponent(course.title); // 对课程名称进行编码
+                    const subChapterPath = subChapter.path;  // 子章节路径
+                    const url = `/desktop/${userId}/${courseName}/${subChapterPath}`;
+                    window.location.href = url;  // 跳转到该学习页面
+                });
+
+                subChapterList.appendChild(subChapterItem);
+            });
+
+            chapterItem.appendChild(subChapterList);
+
+            // 添加点击事件切换子章节显示
+            chapterItem.addEventListener('click', () => {
+                chapterItem.classList.toggle('open');
+            });
+        }
+
+        chapterList.appendChild(chapterItem);
+    });
+
+    // 打开滑出卡片
+    document.getElementById('courseProgress').classList.add('open');
+}
+
+function closeCourseProgress() {
+    // 关闭滑出卡片
+    document.getElementById('courseProgress').classList.remove('open');
+}

Html/static/js/login.js

@@ -0,0 +1,60 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 获取登录表单及按钮
+    const loginForm = document.querySelector('.login-form');
+    const loginButton = document.querySelector('.login-btn');
+    const usernameInput = document.getElementById('username');
+    const passwordInput = document.getElementById('password');
+    
+    // 在点击登录按钮时提交表单
+    loginButton.addEventListener('click', function(event) {
+        event.preventDefault();  // 防止表单的默认提交行为
+        
+        // 获取输入框的值
+        const username = usernameInput.value.trim();
+        const password = passwordInput.value.trim();
+        
+        // 检查输入框是否为空
+        if (!username || !password) {
+            alert('用户名和密码不能为空');
+            return;
+        }
+
+        // 显示加载提示
+        loginButton.innerHTML = '登录中...';
+        loginButton.disabled = true;
+        
+        // 创建一个请求对象
+        const data = {
+            username: username,
+            password: password
+        };
+        
+        // 使用 Fetch API 发送 POST 请求到 Flask 后端
+        fetch('/login_post', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)  // 将数据转换为 JSON 格式发送
+        })
+        .then(response => response.json())  // 解析响应数据
+        .then(data => {
+            if (data.success) {
+                // 登录成功，跳转到主页
+                window.location.href = '/dashboard';  // 根据需要修改跳转的路径
+            } else {
+                // 登录失败，提示错误信息
+                alert('登录失败: ' + data.message);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('登录请求失败，请稍后重试');
+        })
+        .finally(() => {
+            // 恢复按钮状态
+            loginButton.innerHTML = '登录';
+            loginButton.disabled = false;
+        });
+    });
+});