From f0fbb0249532421d8a73d8ad3e386fea9414440f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:48:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=8C=87=E4=B8=8A=E5=92=8C?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E6=96=87=E4=BB=B6=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=20(#5689)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/common.scss                  | 12 ++++++++++++
 .../host/file-management/code-editor/index.vue   | 16 ++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 5dbc9409e..d65a732e7 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -442,3 +442,15 @@ html {
 .el-tag {
     cursor: pointer;
 }
+
+.monaco-editor-tree-light .el-tree-node__content:hover {
+    background-color: #e5eefd;
+}
+
+.monaco-editor-tree-dark .el-tree-node__content:hover {
+    background-color: #111417;
+}
+
+.monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
+    background-color: #111417;
+}
diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index d2c94b780..99f717df5 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -344,6 +344,21 @@ const changeLanguage = () => {
 
 const changeTheme = () => {
     monaco.editor.setTheme(config.theme);
+    const themes = {
+        vs: 'monaco-editor-tree-light',
+        'vs-dark': 'monaco-editor-tree-dark',
+        'hc-black': 'monaco-editor-tree-dark',
+    };
+
+    if (treeRef.value) {
+        Object.values(themes).forEach((themeClass) => {
+            treeRef.value.$el.classList.remove(themeClass);
+        });
+        if (themes[config.theme]) {
+            treeRef.value.$el.classList.add(themes[config.theme]);
+        }
+    }
+
     localStorage.setItem(codeThemeKey, config.theme);
 };
 
@@ -455,6 +470,7 @@ const getDirectoryPath = (filePath: string) => {
 
 const onOpen = () => {
     initEditor();
+    changeTheme();
     search(directoryPath.value).then((res) => {
         handleSearchResult(res);
     });