From 03b04eea6bf4c3391c95fb1c2adb44a2c7c10e76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:19:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E6=96=B0=E5=A2=9E=E5=8F=B3=E4=BE=A7=E7=BC=A9=E7=95=A5?=
 =?UTF-8?q?=E5=9B=BE=E5=BC=80=E5=85=B3=20(#5781)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |  1 +
 frontend/src/lang/modules/tw.ts               |  1 +
 frontend/src/lang/modules/zh.ts               |  1 +
 frontend/src/styles/common.scss               |  4 ++++
 .../file-management/code-editor/index.vue     | 22 +++++++++++++++++++
 5 files changed, 29 insertions(+)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 93af6aa2a..832264e7e 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -1262,6 +1262,7 @@ const message = {
         noEdit: 'The file has not been modified, no need to do this!',
         noNameFolder: 'Untitled Folder',
         noNameFile: 'Untitled File',
+        minimap: 'Code Mini Map',
     },
     ssh: {
         autoStart: 'Auto Start',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index bece7ee46..1ab29e2b4 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1199,6 +1199,7 @@ const message = {
         noEdit: '檔案未修改，無需此操作！',
         noNameFolder: '未命名資料夾',
         noNameFile: '未命名檔案',
+        minimap: '縮略圖',
     },
     ssh: {
         autoStart: '開機自啟',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 3e11f5e89..5503b1f3a 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1201,6 +1201,7 @@ const message = {
         noEdit: '文件未修改,无需此操作！',
         noNameFolder: '未命名文件夹',
         noNameFile: '未命名文件',
+        minimap: '缩略图',
     },
     ssh: {
         autoStart: '开机自启',
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index d65a732e7..f6a3cead5 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -447,6 +447,10 @@ html {
     background-color: #e5eefd;
 }
 
+.monaco-editor-tree-light .el-tree-node.is-current > .el-tree-node__content {
+    background-color: #e5eefd;
+}
+
 .monaco-editor-tree-dark .el-tree-node__content:hover {
     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 3e35680bd..ca0676ec9 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -57,6 +57,12 @@
                         <el-option :label="$t('commons.button.disable')" value="off"></el-option>
                     </el-select>
                 </el-form-item>
+                <el-form-item :label="$t('file.minimap')">
+                    <el-select v-model="config.minimap" @change="changeMinimap()" class="p-w-100">
+                        <el-option :label="$t('commons.button.enable')" :value="true"></el-option>
+                        <el-option :label="$t('commons.button.disable')" :value="false"></el-option>
+                    </el-select>
+                </el-form-item>
             </el-form>
         </div>
         <div v-loading="loading">
@@ -209,6 +215,7 @@ interface EditorConfig {
     language: string;
     eol: number;
     wordWrap: WordWrapOptions;
+    minimap: boolean;
 }
 
 interface TreeNode {
@@ -227,6 +234,7 @@ const loading = ref(false);
 const fileName = ref('');
 const codeThemeKey = 'code-theme';
 const warpKey = 'code-warp';
+const minimapKey = 'code-minimap';
 const directoryPath = ref('');
 const fileExtension = ref('');
 const baseDir = ref();
@@ -261,6 +269,7 @@ const config = reactive<EditorConfig>({
     language: 'plaintext',
     eol: monaco.editor.EndOfLineSequence.LF,
     wordWrap: 'on',
+    minimap: false,
 });
 
 const eols = [
@@ -403,6 +412,15 @@ const changeWarp = () => {
     });
 };
 
+const changeMinimap = () => {
+    localStorage.setItem(minimapKey, JSON.stringify(config.minimap));
+    editor.updateOptions({
+        minimap: {
+            enabled: config.minimap,
+        },
+    });
+};
+
 const initEditor = () => {
     if (editor) {
         editor.dispose();
@@ -418,6 +436,9 @@ const initEditor = () => {
             roundedSelection: false,
             overviewRulerBorder: false,
             wordWrap: config.wordWrap,
+            minimap: {
+                enabled: config.minimap,
+            },
         });
         if (editor.getModel().getValue() === '') {
             let defaultContent = '\n\n\n\n';
@@ -470,6 +491,7 @@ const acceptParams = (props: EditProps) => {
     config.eol = monaco.editor.EndOfLineSequence.LF;
     config.theme = localStorage.getItem(codeThemeKey) || 'vs-dark';
     config.wordWrap = (localStorage.getItem(warpKey) as WordWrapOptions) || 'on';
+    config.minimap = localStorage.getItem(minimapKey) !== null ? localStorage.getItem(minimapKey) === 'true' : true;
     open.value = true;
 };