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

fix some bug

Browse Source
This commit is contained in:
Cai
2025-09-26 18:49:19 +08:00
parent 3ad36c29ed
commit a24df620b3
7 changed files with 303 additions and 2709 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
code-server-like/static/css/index.css
View File

@@ -49,22 +49,40 @@ body {
}
#searchSidebar { border-left: 1px solid #ddd; display: none; overflow-y: auto; }
/* 给按钮设置统一的样式 */
#topbar button {
background: none;
border: none;
font-size: 12px; /* 可以调整图标的大小 */
cursor: pointer;
padding: 2px;
color: #333;
transition: color 0.3s ease;
/* 按钮默认样式 */
#topbar button {
background: none;
border: none;
font-size: 12px;
cursor: pointer;
padding: 2px;
color: #333;
transition: color 0.3s ease;
}
/* 鼠标悬浮时改变图标的颜色 */
#topbar button:hover {
color: #007bff;
color: #007bff;
}
/* 按钮动画效果 */
@keyframes bounce {
0% { transform: scale(1);color: #007bff; }
30% { transform: scale(1.2); color: #007bff;}
50% { transform: scale(1); color: #007bff;}
70% { transform: scale(1.2); color: #007bff;}
100% { transform: scale(1); color: #007bff;}
}
.bounce-animation {
animation: bounce 0.5s ease-in-out; /* 持续0.5秒 */
}
.bigger-color {
color: #007bff; /* 点击后颜色变化 */
font-size: 14px; /* 放大字体 */
}
/* 可以根据需要设置按钮的大小和间距 */
#newFileBtn, #newFolderBtn, #toggleSearchBtn, #refreshBtn, #openTerminalBtn, #saveBtn {
margin-right: 10px;

72
code-server-like/static/css/notification.css Normal file
View File

@@ -0,0 +1,72 @@
/* 提示框容器：固定在右上角 */
#notificationsContainer {
position: fixed;
top: 20px;
right: 20px;
max-width: 300px; /* 最大宽度 */
z-index: 9999;
}
/* 每个提示框样式 */
.notification {
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 14px;
width: 100%;
opacity: 1;
transition: opacity 0.5s ease;
}
/* 提示框的不同颜色 */
.success {
background-color: #e7f9e7;
color: #2d6a3b;
border-left: 5px solid #2d6a3b;
}
.notification.success .icon {
background-color: #2d6a3b;
}
.info {
background-color: #e9ecef;
color: #007bff;
border-left: 5px solid #007bff;
}
.notification.info .icon {
background-color: #007bff;
}
.warning {
background-color: #fff3cd;
color: #856404;
border-left: 5px solid #856404;
}
.notification.warning .icon {
background-color: #856404;
}
.error {
background-color: #f8d7da;
color: #721c24;
border-left: 5px solid #721c24;
}
.notification.error .icon {
background-color: #721c24;
}
/* 圆形图标 */
.icon {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 10px;
display: inline-block;
flex-shrink: 0;
}

51
code-server-like/static/js/file.js
View File

@@ -124,6 +124,7 @@ document.getElementById("renameOption").onclick = () => {
selectedItem.name = newName;
selectedItem.div.textContent = newName;
loadFileTree();
showNotification('success', '文件已成功重命名！');
});
}
@@ -146,6 +147,7 @@ document.getElementById("copyOption").onclick = () => {
if (selectedItem) {
copiedItem = selectedItem;
console.log("Item copied:", copiedItem);
showNotification('info', '文件已成功复制！');
}
hideContextMenu();
};
@@ -160,7 +162,7 @@ document.getElementById("pasteOption").onclick = (event) => {
newPath = selectedItem.path;
}
fetch(`/vsc-like/copy-files`, { method: 'POST', body: JSON.stringify({ oldPath: copiedItem.path+'/'+copiedItem.name, newPath: newPath }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
.then(() => {loadFileTree();showNotification('success', '文件已成功粘贴！')});
console.log("Item pasted:", selectedItem);
}
hideContextMenu();
@@ -172,7 +174,7 @@ document.getElementById("deleteOption").onclick = (event) => {
if (confirm("Are you sure you want to delete selected file/folder?")) {
if (selectedItem) {
fetch(`/vsc-like/delete-file`, { method: 'POST', body: JSON.stringify({ path: selectedItem.path+'/'+selectedItem.name }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
.then(() => {loadFileTree();showNotification('success', '文件已成功删除！')});
}
}
hideContextMenu();
@@ -257,6 +259,8 @@ function loadFileContent(item) {
editor.setValue(data.content);
}
});
// 设置编辑器语言
setEditorLanguageBasedOnFile(item.name);
// code-like 打开文件
ChangeActiveTextEditor(item.path+'/'+item.name);
}
@@ -278,15 +282,15 @@ function createNewFile(event) {
if (selectedItem) {
if (selectedItem.type === 'directory') {
fetch(`/vsc-like/create-file`, { method: 'POST', body: JSON.stringify({ path: fileName, parent: selectedItem.path+'/'+selectedItem.name }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
.then(() => {loadFileTree();showNotification('success', '文件已成功创建！')});
} else {
console.log("selectedItem.path",selectedItem.path);
fetch(`/vsc-like/create-file`, { method: 'POST', body: JSON.stringify({ path: fileName, parent: selectedItem.path }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
.then(() => {loadFileTree();showNotification('success', '文件已成功创建！')});
}
}else{
fetch(`/vsc-like/create-file`, { method: 'POST', body: JSON.stringify({ path: fileName, parent: '.' }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
.then(() => {loadFileTree();showNotification('success', '文件已成功创建！')});
}
}
@@ -299,21 +303,48 @@ function createNewFolder(event) {
if (folderName) {
if (selectedItem) {
if (selectedItem.type === 'directory') {
fetch(`/vsc-like/create-folder`, { method: 'POST', body: JSON.stringify({ path: fileName, parent: selectedItem.path+'/'+selectedItem.name }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
fetch(`/vsc-like/create-folder`, { method: 'POST', body: JSON.stringify({ path: folderName, parent: selectedItem.path+'/'+selectedItem.name }) , headers: { 'Content-Type': 'application/json' } })
.then(() => {loadFileTree();showNotification('success', '文件夹已成功创建！')});
} else {
fetch(`/vsc-like/create-folder`, { method: 'POST', body: JSON.stringify({ path: fileName, parent: selectedItem.path }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
fetch(`/vsc-like/create-folder`, { method: 'POST', body: JSON.stringify({ path: folderName, parent: selectedItem.path }) , headers: { 'Content-Type': 'application/json' } })
.then(() => {loadFileTree();showNotification('success', '文件夹已成功创建！')});
}
}
}
}
// 触发保存成功时按钮的动画
function triggerSaveAnimation() {
const saveButton = document.getElementById('saveBtn');
// 先清除已有的动画类
saveButton.classList.remove('bounce-animation', 'bigger-color');
// 添加新的动画类
saveButton.classList.add('bounce-animation', 'bigger-color');
// 动画完成后移除动画类（确保可以重复触发动画）
setTimeout(() => {
saveButton.classList.remove('bounce-animation', 'bigger-color');
}, 500); // 500ms后移除动画
}
function postSaveFile(path, content){
fetch(`/vsc-like/save-file`, { method: 'POST', body: JSON.stringify({ path: path, content: content }) , headers: { 'Content-Type': 'application/json' } })
.then(() => loadFileTree());
.then(() => {
loadFileTree();
triggerSaveAnimation(); // 触发按钮动画
showNotification('success', '文件已成功保存！');
});
}
document.addEventListener('keydown', function(event) {
// 检查是否按下Ctrl+S
if (event.ctrlKey && event.key === 's') {
event.preventDefault(); // 阻止默认的保存操作
postSaveFile(selectedItem.path+'/'+selectedItem.name, editor.getValue()); // 手动保存
}
});
// 保存文件
function saveFile(event) {

46
code-server-like/static/js/notification.js Normal file
View File

@@ -0,0 +1,46 @@
let notificationCount = 0; // 当前显示的提示框数量
function showNotification(type, message) {
// 判断是否有超过3个提示框
if (notificationCount >= 3) {
// 删除第一个（最早的）提示框
const firstNotification = document.querySelector('.notification');
if (firstNotification) {
firstNotification.remove();
notificationCount--;
}
}
// 创建新的提示框
const notification = document.createElement('div');
notification.classList.add('notification', type);
// 设置提示框图标和文本
const icon = document.createElement('div');
icon.classList.add('icon');
notification.appendChild(icon);
const text = document.createElement('div');
text.textContent = message;
notification.appendChild(text);
// 添加提示框到页面
const container = document.getElementById('notificationsContainer');
container.appendChild(notification);
// 增加提示框数量
notificationCount++;
// 设置5秒后自动消失
setTimeout(() => {
notification.style.opacity = 0;
setTimeout(() => notification.remove(), 500); // 完全消失后移除
notificationCount--;
}, 5000); // 5秒后渐渐消失
}
// 示例：调用方法
// showNotification('success', '文件已成功保存！');
// showNotification('warning', '保存的文件有部分丢失数据！');
// showNotification('error', '文件保存失败，请重试！');
// showNotification('info', '有新通知！');

68
code-server-like/templates/index.html
View File

@@ -17,6 +17,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="/vsc-like/static/css/index.css">
<link rel="stylesheet" href="/vsc-like/static/css/notification.css">
<script src="/vsc-like/static/js/notification.js"></script>
</head>
<body>
<div id="container">
@@ -57,7 +59,7 @@
</div>
</div>
</div>
<div id="notificationsContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.js"></script>
<script src="/vsc-like/static/js/code-like-extension.js"></script>
@@ -72,11 +74,47 @@
let code_like_config = JSON.parse('{{code_like_config}}'.replace(/&#39;/g,'"'))
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' } });
let saveTimeout=null;
// 语言映射表，文件后缀与Monaco语言之间的映射
const languageMap = {
'.js': 'javascript',
'.ts': 'typescript',
'.html': 'html',
'.css': 'css',
'.json': 'json',
'.java': 'java',
'.py': 'python',
'.cpp': 'cpp',
'.c': 'c',
'.go': 'go',
'.ruby': 'ruby',
'.php': 'php',
'.xml': 'xml',
'.sql': 'sql',
'.sh': 'shell',
'.yaml': 'yaml',
'.md': 'markdown',
'.txt': 'plaintext',
};
// 缺省语言
const defaultLanguage = 'plaintext';
function getFileExtension(filename) {
return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
}
// 根据文件名设置语言
function setEditorLanguageBasedOnFile(filename) {
const fileExtension = '.' + getFileExtension(filename).toLowerCase();
const language = languageMap[fileExtension] || defaultLanguage; // 如果没有匹配，使用默认语言
// 设置Monaco Editor语言
editor.setModel(monaco.editor.createModel(editor.getModel().getValue(), language));
console.log(`Editor language set to: ${language}`);
}
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('editorContainer'), {
value: '',
language: 'javascript'
});
const fileTreeDiv = document.getElementById('fileTreeContent');
@@ -88,6 +126,10 @@
// 监听文本编辑事件
editor.onDidChangeModelContent(event => {
if (!selectedItem){
showNotification('warning', '未选中文件，修改将不会保存');
return;
}
const filePath = selectedItem.path + '/' +selectedItem.name;
const changes = event.changes;
console.log("changes",changes)
@@ -114,6 +156,11 @@
config: code_like_config,
}, 5000
);
// saveFile
if (saveTimeout) clearTimeout(saveTimeout);
saveTimeout = setTimeout(() => {
postSaveFile(selectedItem.path+'/'+selectedItem.name, editor.getValue());
}, 5000); // 5000ms = 5秒
});
// 监听粘贴事件
@@ -161,23 +208,6 @@
}else{
document.getElementById('terminal').style.display = 'none';
}
// event.stopPropagation();
// const terminalDiv = document.getElementById('terminal');
// terminalDiv.style.display = (terminalDiv.style.display === 'none' || terminalDiv.style.display === '') ? 'block' : 'none';
// if (socket == null) {
// socket = io.connect('http://' + document.domain + ':5200/vsc-like/terminal');
// }
// socket.on('connected', function(data) {
// console.log('Terminal connected');
// });
// socket.on('terminal_output', function(data) {
// const terminalDiv = document.getElementById('terminal');
// terminalDiv.textContent += data.data;
// });
// function sendTerminalInput(input) {
// socket.emit('send_input', { input: input });
// }
}
// 按钮绑定事件