From c332d0284b7fdf0d47d7d1a7d62f3582fd3201c0 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Mon, 13 Mar 2023 17:00:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=20code-editor=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/global/mimetype.ts               | 59 +++++++++++++++++++
 frontend/src/lang/modules/en.ts               |  2 +
 frontend/src/lang/modules/zh.ts               |  2 +
 .../file-management/code-editor/index.vue     | 53 ++++++++++++++---
 .../src/views/host/file-management/index.vue  | 29 ++++++---
 5 files changed, 129 insertions(+), 16 deletions(-)

diff --git a/frontend/src/global/mimetype.ts b/frontend/src/global/mimetype.ts
index 38b3d46b5..327846a60 100644
--- a/frontend/src/global/mimetype.ts
+++ b/frontend/src/global/mimetype.ts
@@ -15,3 +15,62 @@ export const Mimetypes = new Map([
     ['gzip/document', CompressType.TarGz],
     ['application/x-xz', CompressType.Xz],
 ]);
+
+export const Languages = [
+    {
+        label: 'go',
+        value: 'go',
+    },
+    {
+        label: 'html',
+        value: 'html',
+    },
+    {
+        label: 'javascript',
+        value: 'javascript',
+    },
+    {
+        label: 'java',
+        value: 'java',
+    },
+    {
+        label: 'kotlin',
+        value: 'kotlin',
+    },
+    {
+        label: 'markdown',
+        value: 'markdown',
+    },
+    {
+        label: 'mysql',
+        value: 'mysql',
+    },
+    {
+        label: 'php',
+        value: 'php',
+    },
+    {
+        label: 'redis',
+        value: 'redis',
+    },
+    {
+        label: 'shell',
+        value: 'shell',
+    },
+    {
+        label: 'sql',
+        value: 'sql',
+    },
+    {
+        label: 'yaml',
+        value: 'yaml',
+    },
+    {
+        label: 'json',
+        value: 'json',
+    },
+    {
+        label: 'css',
+        value: 'css',
+    },
+];
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 0b6b7d395..39c62cab2 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -748,6 +748,8 @@ export default {
         list: 'File List',
         sub: 'Include subdirectory',
         downlodSuccess: 'Download Success',
+        theme: 'Theme',
+        language: 'Language',
     },
     setting: {
         all: 'All',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 710639f34..4568d0ad5 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -755,6 +755,8 @@ export default {
         list: '文件列表',
         sub: '包含子目录',
         downlodSuccess: '下载完成',
+        theme: '主题',
+        language: '语言',
     },
     setting: {
         all: '全部',
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 db19d8fa7..5cc3c5565 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -6,9 +6,20 @@
         destroy-on-close
         width="70%"
         @opened="onOpen"
-        class="coder-dialog"
     >
-        <div v-loading="loading">
+        <el-form :inline="true" :model="config">
+            <el-form-item :label="$t('file.theme')">
+                <el-select v-model="config.theme" @change="initEditor()">
+                    <el-option v-for="item in themes" :key="item.label" :value="item.value" :label="item.label" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('file.language')">
+                <el-select v-model="config.language" @change="initEditor()">
+                    <el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div class="coder-editor" v-loading="loading">
             <div id="codeBox" style="height: 60vh"></div>
         </div>
         <template #footer>
@@ -25,7 +36,8 @@ import { SaveFileContent } from '@/api/modules/files';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import * as monaco from 'monaco-editor';
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
+import { Languages } from '@/global/mimetype';
 
 let editor: monaco.editor.IStandaloneCodeEditor | undefined;
 
@@ -36,9 +48,33 @@ interface EditProps {
     name: string;
 }
 
+interface EditorConfig {
+    theme: string;
+    language: string;
+}
+
 let open = ref(false);
 let loading = ref(false);
-let language = ref('json');
+
+let config = reactive<EditorConfig>({
+    theme: 'vs-dark',
+    language: 'json',
+});
+
+const themes = [
+    {
+        label: 'Visual Studio',
+        value: 'vs',
+    },
+    {
+        label: 'Visual Studio Dark',
+        value: 'vs-dark',
+    },
+    {
+        label: 'High Contrast Dark',
+        value: 'hc-black',
+    },
+];
 
 let form = ref({
     content: '',
@@ -61,11 +97,11 @@ const initEditor = () => {
     }
     const codeBox = document.getElementById('codeBox');
     editor = monaco.editor.create(codeBox as HTMLElement, {
-        theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
+        theme: config.theme, //官方自带三种主题vs, hc-black, or vs-dark
         value: form.value.content,
         readOnly: false,
         automaticLayout: true,
-        language: language.value,
+        language: config.language,
         folding: true, //代码折叠
         roundedSelection: false, // 右侧不显示编辑器预览框
     });
@@ -95,6 +131,7 @@ const saveContent = (closePage: boolean) => {
 const acceptParams = (props: EditProps) => {
     form.value.content = props.content;
     form.value.path = props.path;
+    config.language = props.language;
     open.value = true;
 };
 
@@ -106,7 +143,7 @@ defineExpose({ acceptParams });
 </script>
 
 <style lang="scss">
-.coder-dialog {
-    --el-dialog-margin-top: 10vh;
+.coder-editor {
+    margin-top: 10px;
 }
 </style>
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index c4003a505..dfbc6fe9f 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -165,7 +165,7 @@ import CodeEditor from './code-editor/index.vue';
 import Wget from './wget/index.vue';
 import Move from './move/index.vue';
 import Download from './download/index.vue';
-import { Mimetypes } from '@/global/mimetype';
+import { Mimetypes, Languages } from '@/global/mimetype';
 import Process from './process/index.vue';
 // import Detail from './detail/index.vue';
 import { useRouter } from 'vue-router';
@@ -196,7 +196,7 @@ let pathWidth = ref(0);
 const fileCreate = reactive({ path: '/', isDir: false, mode: 0o755 });
 const fileCompress = reactive({ files: [''], name: '', dst: '', operate: 'compress' });
 const fileDeCompress = reactive({ path: '', name: '', dst: '', mimeType: '' });
-const fileEdit = reactive({ content: '', path: '', name: '' });
+const fileEdit = reactive({ content: '', path: '', name: '', language: 'json' });
 const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 });
 const fileUpload = reactive({ path: '' });
 const fileRename = reactive({ path: '', oldName: '' });
@@ -382,12 +382,25 @@ const openDeCompress = (item: File.File) => {
 const openCodeEditor = (row: File.File) => {
     codeReq.path = row.path;
     codeReq.expand = true;
-    GetFileContent(codeReq).then((res) => {
-        fileEdit.content = res.data.content;
-        fileEdit.path = res.data.path;
-        fileEdit.name = res.data.name;
-        codeEditorRef.value.acceptParams(fileEdit);
-    });
+
+    if (row.extension != '') {
+        Languages.forEach((language) => {
+            const ext = row.extension.substring(1);
+            if (language.value == ext) {
+                fileEdit.language = language.value;
+            }
+        });
+    }
+
+    GetFileContent(codeReq)
+        .then((res) => {
+            fileEdit.content = res.data.content;
+            fileEdit.path = res.data.path;
+            fileEdit.name = res.data.name;
+
+            codeEditorRef.value.acceptParams(fileEdit);
+        })
+        .catch(() => {});
 };
 
 const openUpload = () => {