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

Merge branch 'feature/voice_send'

Browse Source
This commit is contained in:
Cai
2025-10-19 20:30:51 +08:00
parent 3c9c7553b7 58a95e9f63
commit 6766ca859d
15 changed files with 674 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Html/apps/templates/code-like-desktop.html
View File

@@ -16,6 +16,7 @@
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="maxcontainer" id="maxcontainer" style="height: 100%;">
@@ -61,7 +62,12 @@
</div>
<div class="input-area">
<textarea id="messageInput" rows="2" class="form-control" placeholder="输入你的消息 (支持 Markdown 语法)"></textarea>
<button class="btn btn-primary" onclick="sendMessage()">发送</button>
<button class="btn btn-primary" onclick="sendMessage()">
<i class="bi bi-send"></i>
</button>
<button class="btn btn-secondary" onclick="sendVoiceMessage()">
<i class="bi bi-mic" id = "recordIcon"></i>
</button>
</div>
<script type="text/javascript">

18
Html/apps/templates/dashboard.html
View File

@@ -9,20 +9,18 @@
<body>
{% include 'navbar.html' %} <!-- 引入navbar.html -->
<!-- 主页主体部分 -->
<div class="dashboard">
<h2 class="dashboard-title">—— 我的选课 ——</h2>
<div class="course-cards" id="course-cards">
<!-- 可以继续添加课程卡片 -->
<!-- 循环生成课程卡片 -->
{% for course in user_selected_course %}
<div class="course-card"onclick="openCourseProgress('{{course._id}}')">
<div class="course-card" onclick="openCourseProgress('{{course._id}}')">
<img src="{{course.image_url}}" alt="课程封面" class="course-image">
<div class="course-info">
<h3 class="course-name">{{course.name}}</h3>
<p class="course-description">{{course.description}}</p>
</div>
</div>
</div> <!-- 补充闭合标签 -->
</div> <!-- 补充闭合标签 -->
{% endfor %}
</div>
</div>
@@ -37,7 +35,7 @@
<div class="progress-content">
<p>当前学习进度: <span id="progress"></span></p>
<hr/>
<h3>章节列表：</h3>
<h3>章节列表：</h3>
<ul id="chapter-list">
<!-- 章节列表会在点击课程时动态生成 -->
</ul>
@@ -45,11 +43,11 @@
</div>
<script src="/static/js/dashboard.js"></script>
<script>
// 解析用户数据和课程数据
console.log(`{{user_data}}`.replaceAll("&#39;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
console.log(`{{user_course_data}}`.replaceAll("&#34;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
let user_data = JSON.parse(`{{user_data}}`.replaceAll("&#39;", "\"").replaceAll("True", "true").replaceAll("False", "false"));
let user_course_data = JSON.parse(`{{user_course_data}}`.replaceAll("&#34;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
let user_data = JSON.parse(`{{user_data}}`.replaceAll("&#39;", "\"").replaceAll("True", "true").replaceAll("False", "false"));
let user_course_data = JSON.parse(`{{user_course_data}}`.replaceAll("&#34;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
console.log(user_data)
console.log(user_course_data)
show_user_data(user_data, user_course_data)

133
Html/apps/templates/desktop.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,30 +18,32 @@
<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%;">
<div id="markdown-content" style="width: 100%;height: 93%;">
<!-- 动态加载的 HTML 会显示在这里 -->
</div>
<div id="markdown-content-process"style="width: 100%;height: 5%;">
<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 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>
<div id="dragbar" class="resizer"></div>
<!-- 中间嵌入的 Vscode-web 窗口，带有 tkn 参数 -->
<div class="vscode-web"id="vscodeWeb" >
</div>
<div id="dragbar2" class="resizer"></div>
<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="sidebar" id="rightSidebar" style="width: 100%;height: 100%;">
<div class="chatbox-header">
<div class="slider-container">
<label for="fontSizeSlider">Aa</label>
@@ -48,7 +51,7 @@
</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
<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
@@ -56,27 +59,34 @@
</div>
</div>
<div class="chatbox" id="chatbox" >
<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>
<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="sendVoiceMessage()">
<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}}"
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')">
@@ -101,36 +111,36 @@
<div class="toggle-button" id="toggleButton">
<div class="icon" id="toggleButton_icon">❮</div>
</div>
<script>
// 实现左右边栏可拖动
const dragbar = document.getElementById('dragbar');
const dragbar2 = document.getElementById('dragbar2');
const container = document.getElementById('maxcontainer');
let leftWidth = 500;
let rightWidth = 400;
let leftWidth = 500;
let rightWidth = 400;
let isDraggingLeft = false;
let isDraggingRight = false;
// 当鼠标按下时，禁用 iframe 的鼠标事件
dragbar.addEventListener('mousedown', function(e) {
dragbar.addEventListener('mousedown', function (e) {
isDraggingLeft = true;
document.querySelectorAll('iframe').forEach(function(iframe) {
document.querySelectorAll('iframe').forEach(function (iframe) {
iframe.style.pointerEvents = 'none'; // 禁止 iframe 捕获鼠标事件
});
});
dragbar2.addEventListener('mousedown', function(e) {
dragbar2.addEventListener('mousedown', function (e) {
isDraggingRight = true;
document.querySelectorAll('iframe').forEach(function(iframe) {
document.querySelectorAll('iframe').forEach(function (iframe) {
iframe.style.pointerEvents = 'none'; // 禁止 iframe 捕获鼠标事件
});
});
document.addEventListener('mousemove', function(e) {
document.addEventListener('mousemove', function (e) {
if (isDraggingLeft) {
leftWidth = e.clientX; // 更新左侧栏宽度
container.style.gridTemplateColumns = `${leftWidth}px 5px 2fr 5px ${rightWidth}px`;
@@ -140,10 +150,10 @@
}
});
document.addEventListener('mouseup', function() {
document.addEventListener('mouseup', function () {
isDraggingLeft = false;
isDraggingRight = false;
document.querySelectorAll('iframe').forEach(function(iframe) {
document.querySelectorAll('iframe').forEach(function (iframe) {
iframe.style.pointerEvents = 'auto'; // 恢复 iframe 的鼠标事件
});
});
@@ -191,42 +201,42 @@
// 动态加载 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();
// 动态加载 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);
});
} 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}}');
});
}
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() {
toggleButton.addEventListener('click', function () {
sidebarTools.classList.toggle('open');
toggleButton.classList.toggle('open');
if (document.getElementById('toggleButton_icon').innerText === '❮'){
if (document.getElementById('toggleButton_icon').innerText === '❮') {
document.getElementById('toggleButton_icon').innerText = '❯';
}else{
} else {
document.getElementById('toggleButton_icon').innerText = '❮';
}
});
@@ -235,4 +245,5 @@
<script src="/static/js/chatbox.js"></script>
</body>
</html>
</html>

102
Html/apps/templates/navbar.html
View File

@@ -1,100 +1,22 @@
<!-- 页眉导航栏 -->
<link rel="stylesheet" href="/static/css/navbar.css">
<header class="navbar">
<style>
/* 页眉导航栏 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2575fc;
padding: 10px 30px;
color: white;
border-radius: 10px;
margin: 20px;
margin-bottom: 30px;
}
.navbar .logo h1 {
font-size: 24px;
font-weight: bold;
}
.navbar-links a {
color: white;
text-decoration: none;
margin: 0 20px;
font-size: 16px;
transition: color 0.3s;
}
.navbar-links a:hover {
color: #f1c40f;
}
.navbar .avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
}
.avatar {
margin-left: 200px;
}
/* 控制浮框 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: white;
color: black;
min-width: 200px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
border-radius: 10px;
z-index: 1;
padding: 10px;
font-size: 14px;
}
.dropdown-content a {
color: black;
text-decoration: none;
padding: 10px;
display: block;
transition: background-color 0.3s;
}
.dropdown-content a:hover {
background-color: #f1c40f;
}
/* 显示浮框 */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="logo">
<h1>华实君：教学练评一体的虚拟助教</h1>
</div>
{% if role == 'teacher' %}
<!-- 如果是教师角色 -->
<a href="/teacherindex">首页</a>
<a href="/teacherdashboard">课程</a>
<a href="/teachergrades">成绩</a>
<div class="navbar-links">
<a href="/teacherindex">首页</a>
<a href="/teacherdashboard">课程</a>
<a href="/teachergrades">成绩</a>
</div>
{% else %}
<!-- 如果是学生角色 -->
<a href="/">首页</a>
<a href="/dashboard">课程</a>
<a href="/grades">成绩</a>
<div class="navbar-links">
<a href="/">首页</a>
<a href="/dashboard">课程</a>
<a href="/grades">成绩</a>
</div>
{% endif %}
<div class="avatar dropdown">
@@ -104,4 +26,4 @@
<a href="/logout" id="logout">注销</a>
</div>
</div>
</header>
</header>