242 lines
9.6 KiB
HTML
242 lines
9.6 KiB
HTML
<!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()">
|
||
<i class="bi bi-send"></i>
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="sendAudioMessage()">
|
||
<i class="bi bi-mic" id = "recordIcon"></i>
|
||
</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 = 500;
|
||
let rightWidth = 400;
|
||
|
||
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 2fr 5px ${rightWidth}px`;
|
||
} else if (isDraggingRight) {
|
||
rightWidth = window.innerWidth - e.clientX; // 更新右侧栏宽度
|
||
container.style.gridTemplateColumns = `${leftWidth}px 5px 2fr 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);
|
||
|
||
// 在成功获取 session 后创建并插入 iframe
|
||
const iframe = document.createElement('iframe');
|
||
const sessionInfo = data
|
||
iframe.src = '{{vscode_web_url}}/?workspace={{workspace_path}}&folder={{workspace_path}}';
|
||
iframe.style.width = '100%';
|
||
iframe.style.height = '99%';
|
||
|
||
// 将 iframe 插入到指定的 div 中
|
||
document.getElementById('vscodeWeb').appendChild(iframe);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching session:', error);
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// 动态加载 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> |