fix some bug

code-server-like/static/css/index.css

@@ -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;

code-server-like/static/css/notification.css

@@ -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;
+}

code-server-like/static/js/file.js

@@ -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) {

code-server-like/static/js/notification.js

@@ -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', '有新通知！');