e475e84851
-将版本号从 0.0.2 修改为 0.1.2 - 移除了异常时抛出的 RuntimeException - 新增了 C 语言和 Java代码的执行功能 - 优化了 Python 代码的执行方式- 添加了代码编辑器的前端界面 - 新增了 QQ音乐文件解密工具的 UI 界面 - 添加了 C++ 解密库的框架
164 lines
4.7 KiB
HTML
164 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>在线代码编辑器</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg-dark: #2b2b2b;
|
|
--bg-light: #383838;
|
|
--text: #cccccc;
|
|
--blue: #569cd6;
|
|
--green: #6a9955;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-dark);
|
|
color: var(--text);
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#toolbar {
|
|
background: var(--bg-light);
|
|
padding: 10px;
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
background: var(--blue);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 15px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#language-select {
|
|
background: var(--bg-dark);
|
|
color: var(--text);
|
|
padding: 5px;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
#editor-container {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
#output {
|
|
background: #1e1e1e;
|
|
padding: 15px;
|
|
border-top: 2px solid #333;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.status-bar {
|
|
background: var(--bg-light);
|
|
padding: 5px 10px;
|
|
font-size: 0.9em;
|
|
border-top: 1px solid #444;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="toolbar">
|
|
<button class="btn" onclick="runCode()">▶ 运行 (Ctrl+Enter)</button>
|
|
<select id="language-select" onchange="changeLanguage()">
|
|
<option value="python">Python</option>
|
|
<option value="java">Java</option>
|
|
<option value="cpp">C++</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="editor-container"></div>
|
|
|
|
<div class="status-bar">
|
|
<span id="status">就绪</span>
|
|
</div>
|
|
|
|
<div id="output"></div>
|
|
|
|
<script>
|
|
let editor;
|
|
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' }});
|
|
require(['vs/editor/editor.main'], function() {
|
|
editor = monaco.editor.create(document.getElementById('editor-container'), {
|
|
value: getDefaultCode('python'),
|
|
language: 'python',
|
|
theme: 'vs-dark',
|
|
minimap: { enabled: true },
|
|
automaticLayout: true,
|
|
fontSize: 14,
|
|
scrollBeyondLastLine: false
|
|
});
|
|
|
|
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, runCode);
|
|
});
|
|
|
|
function getDefaultCode(lang) {
|
|
const templates = {
|
|
python: '# Python 示例\nprint("你好，世界！")\n',
|
|
java: '// Java 示例\npublic class Main {\n public static void main(String[] args) {\n System.out.println("你好，世界！");\n }\n}\n',
|
|
cpp: '// C++ 示例\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << "你好，世界！" << endl;\n return 0;\n}\n'
|
|
};
|
|
return templates[lang];
|
|
}
|
|
|
|
function changeLanguage() {
|
|
const lang = document.getElementById('language-select').value;
|
|
monaco.editor.setModelLanguage(editor.getModel(), lang);
|
|
editor.setValue(getDefaultCode(lang));
|
|
}
|
|
|
|
|
|
|
|
function runCode() {
|
|
const code = editor.getValue();
|
|
const language = document.getElementById('language-select').value;
|
|
const output = document.getElementById('output');
|
|
|
|
output.innerHTML = '正在执行...';
|
|
document.getElementById('status').textContent = '正在执行...';
|
|
|
|
const request = {
|
|
type: "executeCode",
|
|
code: code,
|
|
language: language
|
|
};
|
|
|
|
window.cefQuery({
|
|
request: JSON.stringify(request),
|
|
onSuccess: function(response) {
|
|
const result = JSON.parse(response);
|
|
output.innerHTML = result.output;
|
|
document.getElementById('status').textContent = '执行完成';
|
|
},
|
|
onFailure: function(errorCode, errorMsg) {
|
|
const error = JSON.parse(errorMsg);
|
|
output.innerHTML = `错误：${error.message}`;
|
|
document.getElementById('status').textContent = '执行失败';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |