ready to code-like

2025-09-21 14:03:40 +08:00
parent b1f832a2fb
commit 588fc3b697
14 changed files with 562 additions and 20 deletions
--- a/Html/apps/config.py
+++ b/Html/apps/config.py
@@ -13,6 +13,7 @@ class Config:
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    SECRET_KEY = os.getenv("SECRET_KEY", "cakebaker")  # 覆盖优先
    VSCODE_WEB_URL = GLOBAL_CONFIG['VSCODE_WEB']['url']
+    CODE_LIKE_URL = GLOBAL_CONFIG['CODE_LIKE']['url']
    USER_DATA_DIR = GLOBAL_CONFIG['USER_DATA']['dir']
    COURSE_DATA_DIR = GLOBAL_CONFIG['COURSE_DATA']['dir']

--- a/Html/apps/extension_ase/ase_client/manager.py
+++ b/Html/apps/extension_ase/ase_client/manager.py
@@ -158,7 +158,13 @@ class ChatManager:
            path_dir,
            "--extensions-dir", "/share/extension/"
        ]
-
+        try:# 创建.config,.local文件夹
+            subprocess.run(["sudo", "mkdir", "-p", f"/home/{user_id}/.config"], check=True)
+            subprocess.run(["sudo", "mkdir", "-p", f"/home/{user_id}/.local"], check=True)
+            subprocess.run(["sudo", "chown", "-R", f"{user_id}:shared_group_{user_id}", f"/home/{user_id}/.config", f"/home/{user_id}/.local"], check=True)
+        except Exception as e:
+            print("mkdir .config .local error"+str(e))
+            
        pop = subprocess.Popen(
            cmd,
            stdout=subprocess.DEVNULL,
--- a/Html/apps/static/js/chatbox.js
+++ b/Html/apps/static/js/chatbox.js
@@ -4,7 +4,7 @@ let system_message_idx=0
 document.addEventListener('DOMContentLoaded', function() {
    data = window.appData;
    console.log(data);
-    socket = io('wss://hsamooc.cn/agent',{
+    socket = io('wss://hsamooc.com/agent',{
        query:{
            user_uuid:data.user_uuid,
            folder:data.folder
@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', function() {
    socket.on('connect', function() {
        console.log('Connected to server');
        socket.emit('login',JSON.stringify(data));
+        OpenIframe();
    });
    // 监听来自服务器的消息
    socket.on('message', function(data) {
--- a/Html/apps/static/基础算法-二分.html
+++ b/Html/apps/static/基础算法-二分.html
@@ -10,11 +10,8 @@
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css">
    </head>
    <body class="markdown-body">
-        <h1>二分</h1>
-<blockquote>
-<p>Auto-generated at 2025-09-05 19:48</p>
-</blockquote>
-<h2>阶段一：示例阶段</h2>
+        <h1>二分查找与二分答案</h1>
+<h2>二分查找</h2>
 <h3>引入</h3>
 <p>二分是一个很简单基础，但很重要的知识点，为以后许多高级的数据结构与算法铺垫。</p>
 <p>下面是一个用二分的简单场景：</p>
@@ -47,7 +44,7 @@
 <p>第三行一个整数q，表示询问的次数。(1&lt;=q&lt;=10^4)</p>
 <p>后q行，每行一个整数b，表示询问的数。(0&lt;=b&lt;=10^8)</p>
 <h5>输出</h5>
-<p>q行，每行一个整数，对应每次询问的返回结果。</p>
+<p>q行，每行一个整数，对应每次询问的返回结果</p>
 <h5>提示：</h5>
 <p>完成代码后，通知Agent进行评测。</p>
 <p>如果你还不完全会这个算法，询问Agent获取提示并进行学习。</p>
--- a/Html/apps/templates/code-like-desktop.html
+++ b/Html/apps/templates/code-like-desktop.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Development Platform</title>
+    <style>
+    </style>
+    <link rel="stylesheet" href="/static/css/desktop.css">
+    <link rel="stylesheet" href="/static/css/chatbox_approve_icon.css">
+    <script>
+        document.cookie = "vscode-tkn=44edc269-6f88-46ab-9790-dc253f66ac36; path=/; SameSite=None; Secure";
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
+    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/split.js/dist/split.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+</head>
+<body>
+    <div class="maxcontainer" id="maxcontainer" style="height: 100%;">
+        <!-- 左侧内容 -->
+        <div class="sidebar" id="leftSidebar" style="width: 100%;height: 100%;">
+            <div id="markdown-content"style="width: 100%;height: 93%;">
+                <!-- 动态加载的 HTML 会显示在这里 -->
+            </div>
+            <div id="markdown-content-process"style="width: 100%;height: 5%;">
+
+            </div>
+            <div id="progress-detail" style="position: absolute; top: 0; left: 0; display: none; padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; border-radius: 5px;">
+                <!-- 这里将显示鼠标悬停的详情 -->
+            </div>
+        </div>
+    <div id="dragbar" class="resizer"></div>
+    
+        <!-- 中间嵌入的 Vscode-web 窗口，带有 tkn 参数 -->
+         <div  class="vscode-web"id="vscodeWeb" >
+    </div>
+        
+    
+  <div id="dragbar2" class="resizer"></div>
+        <!-- 右侧内容 -->
+        <div class="sidebar" id="rightSidebar"style="width: 100%;height: 100%;">
+            <div class="chatbox-header">
+                <div class="slider-container">
+                    <label for="fontSizeSlider">Aa</label>
+                    <input type="range" id="fontSizeSlider" min="12" max="24" value="16" />
+                </div>
+                <div class="language-toggle btn-group btn-group-toggle" data-toggle="buttons">
+                    <label class="btn btn-outline-secondary " id="label_for_en">
+                        <input type="radio" name="language" id="english" autocomplete="off" > En
+                    </label>
+                    <label class="btn btn-outline-secondary active" id="label_for_zh">
+                        <input type="radio" name="language" id="chinese" autocomplete="off" checked> Zn
+                    </label>
+                </div>
+            </div>
+
+            <div class="chatbox" id="chatbox" >
+                <!-- 消息会在这里显示 -->
+            </div>
+            <div class="input-area">
+                <textarea id="messageInput" rows="2" class="form-control" placeholder="输入你的消息 (支持 Markdown 语法)"></textarea>
+                <button class="btn btn-primary" onclick="sendMessage()">发送</button>
+            </div>
+            
+            <script type="text/javascript">
+                window.appData = {
+                    user_uuid:"{{user_uuid}}",
+                    course_id:"{{course_id}}",
+                    lesson_name:"{{lesson_name}}",
+                    chapter_name:"{{chapter_name}}",
+                    folder:"{{workspace_path}}"
+                }
+            </script>
+        </div>
+    </div>
+
+    
+    <!-- 侧边工具栏 -->
+    <div class="sidebar-tools" id="sidebarTools">
+        <div class="tool-button" onclick="sendInitiativeFunctionCall('sample_judge')">
+            <div class="icon">+</div>
+            <div class="description">代码试运行</div>
+        </div>
+        <div class="tool-button" onclick="sendInitiativeFunctionCall('judge')">
+            <div class="icon">√</div>
+            <div class="description">代码提交</div>
+        </div>
+        <!-- <div class="tool-button">
+            <div class="icon">-</div>
+            <div class="description">工具2</div>
+        </div>
+        <div class="tool-button">
+            <div class="icon">?</div>
+            <div class="description">工具3</div>
+        </div> -->
+    </div>
+
+    <!-- 切换按钮 -->
+    <div class="toggle-button" id="toggleButton">
+        <div class="icon" id="toggleButton_icon">❮</div>
+    </div>
+    
+    <script src="/static/js/chatbox.js"></script>
+    
+    <script>
+        // 实现左右边栏可拖动
+        
+        const dragbar = document.getElementById('dragbar');
+        const dragbar2 = document.getElementById('dragbar2');
+        const container = document.getElementById('maxcontainer');
+        let leftWidth = 300;  // 设置左侧栏的初始宽度
+        let rightWidth = 300; // 设置右侧栏的初始宽度
+
+        let isDraggingLeft = false;
+        let isDraggingRight = false;
+
+        // 当鼠标按下时，禁用 iframe 的鼠标事件
+        dragbar.addEventListener('mousedown', function(e) {
+            isDraggingLeft = true;
+            document.querySelectorAll('iframe').forEach(function(iframe) {
+                iframe.style.pointerEvents = 'none'; // 禁止 iframe 捕获鼠标事件
+            });
+        });
+
+        dragbar2.addEventListener('mousedown', function(e) {
+            isDraggingRight = true;
+            document.querySelectorAll('iframe').forEach(function(iframe) {
+                iframe.style.pointerEvents = 'none'; // 禁止 iframe 捕获鼠标事件
+            });
+        });
+
+        document.addEventListener('mousemove', function(e) {
+            if (isDraggingLeft) {
+                leftWidth = e.clientX;  // 更新左侧栏宽度
+                container.style.gridTemplateColumns = `${leftWidth}px 5px 1fr 5px ${rightWidth}px`;
+            } else if (isDraggingRight) {
+                rightWidth = window.innerWidth - e.clientX;  // 更新右侧栏宽度
+                container.style.gridTemplateColumns = `${leftWidth}px 5px 1fr 5px ${rightWidth}px`;
+            }
+        });
+
+        document.addEventListener('mouseup', function() {
+            isDraggingLeft = false;
+            isDraggingRight = false;
+            document.querySelectorAll('iframe').forEach(function(iframe) {
+                iframe.style.pointerEvents = 'auto'; // 恢复 iframe 的鼠标事件
+            });
+        });
+
+
+
+
+
+        // 使用 fetch 发送请求到 Flask 服务器，获取 session 信息
+        fetch('/get_session', {
+            method: 'GET',
+            credentials: 'include'  // 包含 Cookie，确保 Flask 可以识别 session
+        })
+        .then(response => {
+            if (response.ok) return response.json();
+            throw new Error('Failed to fetch session');
+        })
+        .then(data => {
+            console.log('Session data:', data);
+        })
+        .catch(error => {
+            console.error('Error fetching session:', error);
+        });
+
+        function OpenIframe(){
+            // 等待1s再加载
+            setTimeout(() => {
+                // 在成功获取 session 后创建并插入 iframe
+                const iframe = document.createElement('iframe');
+                const sessionInfo = data
+                iframe.src = '{{vscode_web_url}}/{{user_uuid}}/{{user_id}}/{{course_id}}/{{chapter_name}}/{{lesson_name}}/22';
+                iframe.style.width = '100%';
+                iframe.style.height = '99%';
+
+                // 将 iframe 插入到指定的 div 中
+                document.getElementById('vscodeWeb').appendChild(iframe);
+            },1500);
+        }
+
+
+
+
+
+
+        
+    // 动态加载 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');
+
+        toggleButton.addEventListener('click', function() {
+            sidebarTools.classList.toggle('open');
+            toggleButton.classList.toggle('open');
+            if (document.getElementById('toggleButton_icon').innerText === '❮'){
+                document.getElementById('toggleButton_icon').innerText = '❯';
+            }else{
+                document.getElementById('toggleButton_icon').innerText = '❮';
+            }
+        });
+
+    </script>
+</body>
+</html>
--- a/Html/apps/views/vscode.py
+++ b/Html/apps/views/vscode.py
@@ -5,10 +5,12 @@ from flask import Blueprint, current_app, session, redirect, url_for, render_tem
 from ..services.backboard_service import realtime_response
 from ..extension_ase.ase_client.manager import ChatManager
 import subprocess
+from ..auth.decorators import require_role

 bp = Blueprint("vscode", __name__)

@bp.route("/desktop/<user_uuid>/<course_id>/<chapter_name>/<lesson_name>")
+@require_role
 def desktop(user_uuid, course_id, chapter_name, lesson_name):
    username2uuid = current_app.extensions["username2uuid"]
    uuid2username = current_app.extensions["uuid2username"]
@@ -117,13 +119,18 @@ def desktop(user_uuid, course_id, chapter_name, lesson_name):
    )
    # 确保文件的所有权归 user_id
    subprocess.run(
-        ["sudo", "chown", f"{user_id}:{user_id}", config_path],
+        ["sudo", "chown", f"{user_id}:shared_group_{user_id}", config_path],
+        check=True
+    )
+    subprocess.run(
+        ["sudo", "chmod", "-R", "770", config_path],
        check=True
    )
    return render_template(
-        "desktop.html",
-        vscode_web_url=current_app.config["VSCODE_WEB_URL"]+f"/vsc{user_id}",
-        user_uuid=session["user_uuid"], course_id=course_id, chapter_name=chapter_name, lesson_name=lesson_name,
+        "code-like-desktop.html",
+        # vscode_web_url=current_app.config["VSCODE_WEB_URL"]+f"/vsc{user_id}",
+        vscode_web_url=current_app.config["CODE_LIKE_URL"],
+        user_uuid=session["user_uuid"], course_id=course_id, chapter_name=chapter_name, lesson_name=lesson_name,user_id=user_id,
        workspace_path=path_for_vscode,
    )