feat: 文本编辑器新增右侧缩略图开关 (#5781)

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',

frontend/src/lang/modules/tw.ts

@@ -1199,6 +1199,7 @@ const message = {
         noEdit: '檔案未修改，無需此操作！',
         noNameFolder: '未命名資料夾',
         noNameFile: '未命名檔案',
+        minimap: '縮略圖',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -1201,6 +1201,7 @@ const message = {
         noEdit: '文件未修改,无需此操作！',
         noNameFolder: '未命名文件夹',
         noNameFile: '未命名文件',
+        minimap: '缩略图',
     },
     ssh: {
         autoStart: '开机自启',

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

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