CakeCN/hsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可以跑了 准备做系统

Browse Source
This commit is contained in:
CakeCN
2024-12-28 17:11:24 +08:00
parent f3791850b0
commit 1280a978f5
24 changed files with 2053 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
Html/templates/desktop.html Normal file
View File

@@ -0,0 +1,211 @@
<!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">
<script>
document.cookie = "vscode-tkn=44edc269-6f88-46ab-9790-dc253f66ac36; path=/; SameSite=None; Secure";
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/marked/13.0.2/marked.min.js"></script>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>
</head>
<body>
<div class="maxcontainer" id="maxcontainer">
<!-- 左侧内容 -->
<div class="sidebar" id="leftSidebar" style="width: 100%;height: 100%;">
<div id="markdown-content"style="width: 100%;height: 95%;">
<!-- 动态加载的 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"></div>
<!-- 中间嵌入的 Vscode-web 窗口，带有 tkn 参数 -->
<div class="vscode-web"id="vscodeWeb">
<!-- <iframe src="http://127.0.0.1:9888/?workspace=/mnt/c/CAKE/vscode/example_folder&folder=/mnt/c/CAKE/vscode/example_folder" style="width: 100%;height: 100%;"></iframe> -->
</div>
<div id="dragbar2"></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" style="width: 100%;height: 80%;">
<!-- 消息会在这里显示 -->
</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 = {
username:"{{user_id}}",
folder:"{{path}}",
}
</script>
<script src="/static/js/chatbox.js"></script>
</div>
</div>
<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;
dragbar.addEventListener('mousedown', function() {
isDraggingLeft = true;
});
dragbar2.addEventListener('mousedown', function() {
isDraggingRight = true;
});
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;
});
// 使用 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 = 'http://127.0.0.1:9090/?workspace=/mnt/c/CAKE/vscode/{{user_id}}/{{path}}&folder=/mnt/c/CAKE/vscode/{{user_id}}/{{path}}';
iframe.style.width = '100%';
iframe.style.height = '100%';
// 将 iframe 插入到指定的 div 中
document.getElementById('vscodeWeb').appendChild(iframe);
})
.catch(error => {
console.error('Error fetching session:', error);
});
// 动态加载 Markdown 文件
function loadMarkdown(filename) {
fetch(`/${filename}-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('{{path}}');
});
// function next_chapter(data) {
// // 获取所有的 h3 元素
// var iframe = document.getElementById('markdown-content-iframe');
// // 访问 iframe 的文档对象
// var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
// var h3Elements = iframeDocument.querySelectorAll('h3');
// console.log("h3Elements next")
// console.log(iframeDocument)
// if (currentChapterIndex >= h3Elements.length) {
// return; // 如果已经到了最后一个章节，则不进行任何操作
// }
// // 隐藏当前章节及其后的内容
// for (let i = 0; i < h3Elements.length; i++) {
// h3Elements[i].style.display = 'none';
// 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++;
// }
</script>
</body>
</html>