From fa37937410df9a5c1862b0c4e43f4bb00836af3e Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Sat, 5 Nov 2022 22:18:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20monaco=E4=B8=BB=E9=A2=98=E7=A7=BB?=
 =?UTF-8?q?=E8=87=B3=E5=85=A8=E5=B1=80=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/monaco/MonacoEditor.vue    | 31 ++++++++++---------
 mayfly_go_web/src/store/interface/index.ts    |  1 +
 .../src/store/modules/themeConfig.ts          |  3 ++
 .../layout/navBars/breadcrumb/setings.vue     | 12 +++++++
 mayfly_go_web/src/views/ops/db/SqlExec.vue    | 23 +++++---------
 5 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/mayfly_go_web/src/components/monaco/MonacoEditor.vue b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
index 3fd3c09c..e3f01717 100644
--- a/mayfly_go_web/src/components/monaco/MonacoEditor.vue
+++ b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="monaco-editor">
+    <div class="monaco-editor" style="border: 1px solid #ccc;">
         <div ref="monacoTextarea" :style="{ height: height }"></div>
         <el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage">
             <el-option v-for="mode in languages" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
@@ -23,7 +23,6 @@ import { editor } from 'monaco-editor';
 // import Dracula from 'monaco-themes/themes/Dracula.json'
 import SolarizedLight from 'monaco-themes/themes/Solarized-light.json'
 import { language as shellLan } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
-
 import { ElOption, ElSelect } from 'element-plus';
 
 const props = defineProps({
@@ -138,14 +137,14 @@ const {
 
 onMounted(() => {
     state.languageMode = props.language;
-    initMonacoEditor();
+    initMonacoEditorIns();
     setEditorValue(props.modelValue);
     registerCompletionItemProvider();
 });
 
 onBeforeUnmount(() => {
-    if (monacoEditor) {
-        monacoEditor.dispose();
+    if (monacoEditorIns) {
+        monacoEditorIns.dispose();
     }
     if (completionItemProvider) {
         completionItemProvider.dispose();
@@ -153,9 +152,9 @@ onBeforeUnmount(() => {
 })
 
 watch(() => props.modelValue, (newValue: any) => {
-    if (!monacoEditor.hasTextFocus()) {
+    if (!monacoEditorIns.hasTextFocus()) {
         state.languageMode = props.language
-        monacoEditor?.setValue(newValue)
+        monacoEditorIns?.setValue(newValue)
         changeLanguage(state.languageMode)
     }
 })
@@ -163,7 +162,7 @@ watch(() => props.modelValue, (newValue: any) => {
 
 const monacoTextarea: any = ref(null);
 
-let monacoEditor: editor.IStandaloneCodeEditor = null;
+let monacoEditorIns: editor.IStandaloneCodeEditor = null;
 let completionItemProvider: any = null;
 
 self.MonacoEnvironment = {
@@ -172,17 +171,19 @@ self.MonacoEnvironment = {
     }
 };
 
-const initMonacoEditor = () => {
+const initMonacoEditorIns = () => {
     console.log('初始化monaco编辑器')
     // options参数参考 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#language
     // 初始化一些主题
     monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
     options.language = state.languageMode;
-    monacoEditor = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options));
+    // 从localStorage中获取，通过store可能存在父子组件都使用store报错
+    options.theme = JSON.parse(localStorage.getItem('themeConfig') as string).editorTheme || 'vs';
+    monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options));
 
     // 监听内容改变,双向绑定
-    monacoEditor.onDidChangeModelContent(() => {
-        emit('update:modelValue', monacoEditor.getModel().getValue());
+    monacoEditorIns.onDidChangeModelContent(() => {
+        emit('update:modelValue', monacoEditorIns.getModel().getValue());
     })
 
     // 动态设置主题
@@ -192,11 +193,11 @@ const initMonacoEditor = () => {
 const changeLanguage = (value: any) => {
     console.log('change lan');
     // 获取当前的文档模型
-    let oldModel = monacoEditor.getModel()
+    let oldModel = monacoEditorIns.getModel()
     // 创建一个新的文档模型
     let newModel = monaco.editor.createModel(oldModel.getValue(), value)
     // 设置成新的
-    monacoEditor.setModel(newModel)
+    monacoEditorIns.setModel(newModel)
     // 销毁旧的模型
     if (oldModel) {
         oldModel.dispose()
@@ -206,7 +207,7 @@ const changeLanguage = (value: any) => {
 }
 
 const setEditorValue = (value: any) => {
-    monacoEditor.getModel().setValue(value)
+    monacoEditorIns.getModel().setValue(value)
 }
 
 /**
diff --git a/mayfly_go_web/src/store/interface/index.ts b/mayfly_go_web/src/store/interface/index.ts
index 3ae8a915..eb4979c8 100644
--- a/mayfly_go_web/src/store/interface/index.ts
+++ b/mayfly_go_web/src/store/interface/index.ts
@@ -53,6 +53,7 @@ export interface ThemeConfigState {
         terminalCursor: string;
         terminalFontSize: number;
         terminalFontWeight: string;
+        editorTheme: string;
     };
 }
 
diff --git a/mayfly_go_web/src/store/modules/themeConfig.ts b/mayfly_go_web/src/store/modules/themeConfig.ts
index ebdb9a01..0575779e 100644
--- a/mayfly_go_web/src/store/modules/themeConfig.ts
+++ b/mayfly_go_web/src/store/modules/themeConfig.ts
@@ -115,6 +115,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
             terminalFontSize: 15,
             terminalFontWeight: 'normal',
 
+            // 编辑器主题
+            editorTheme: 'vs',
+
 
             /* 后端控制路由
             ------------------------------- */
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
index 0f9126ed..62d2c12f 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
@@ -50,6 +50,18 @@
                     </div>
                 </div>
 
+                <el-divider content-position="left">monaco editor</el-divider>
+                <div class="layout-breadcrumb-seting-bar-flex">
+                    <div class="layout-breadcrumb-seting-bar-flex-label">主题</div>
+                    <div class="layout-breadcrumb-seting-bar-flex-value">
+                        <el-select @change="setLocalThemeConfig" v-model="getThemeConfig.editorTheme" size="small" style="width: 130px">
+                            <el-option label="vs" value="vs"> </el-option>
+                            <el-option label="vs-dark" value="vs-dark"> </el-option>
+                            <el-option label="SolarizedLight" value="SolarizedLight"> </el-option>
+                        </el-select>
+                    </div>
+                </div>
+
                 <!-- 全局主题 -->
                 <el-divider content-position="left">全局主题</el-divider>
                 <div class="layout-breadcrumb-seting-bar-flex">
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 86415fcf..1e153e77 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -87,14 +87,6 @@
                                 </div>
 
                                 <div style="float: right" class="fl">
-                                    <el-select v-model="monacoOptions.theme" placeholder="切换编辑器主题"
-                                        @change="changeEditorTheme" filterable allow-create default-first-option
-                                        size="small" class="mr10">
-                                        <el-option v-for="item in monacoOptions.defaultThemes as string" :key="item"
-                                            :label="item" :value="item">
-                                            {{ item }}
-                                        </el-option>
-                                    </el-select>
                                     <el-select v-model="sqlName" placeholder="选择or输入SQL模板名" @change="changeSqlTemplate"
                                         filterable allow-create default-first-option size="small" class="mr10">
                                         <el-option v-for="item in sqlNames as any" :key="item" :label="item.database"
@@ -254,7 +246,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, toRefs, reactive, ref, watch } from 'vue';
+import { onMounted, computed, toRefs, reactive, ref, watch } from 'vue';
 import { dbApi } from './api';
 
 import { format as sqlFormatter } from 'sql-formatter';
@@ -342,8 +334,6 @@ const state = reactive({
         height: '',
         tableMaxHeight: 250,
         dbTables: {},
-        theme: 'vs',
-        defaultThemes: ['SolarizedLight', 'vs', 'vs-dark'],
     }
 });
 const {
@@ -367,6 +357,11 @@ const {
     monacoOptions
 } = toRefs(state)
 
+// 获取布局配置信息
+const getThemeConfig: any = computed(() => {
+    return store.state.themeConfig.themeConfig;
+});
+
 let monacoEditor = {} as editor.IStandaloneCodeEditor;
 let completionItemProvider: any = null;
 
@@ -382,7 +377,7 @@ const initMonacoEditor = () => {
     monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
     monacoEditor = monaco.editor.create(monacoTextarea.value, {
         language: 'sql',
-        theme: state.monacoOptions.theme,
+        theme: getThemeConfig.value.editorTheme,
         automaticLayout: true, //自适应宽高布局
         folding: false,
         roundedSelection: false, // 禁用选择文本背景的圆角
@@ -1179,10 +1174,6 @@ const changeSqlTemplate = () => {
     getUserSql();
 };
 
-const changeEditorTheme = () => {
-    monaco.editor.setTheme(state.monacoOptions.theme);
-};
-
 /**
  * 获取用户保存的sql模板内容
  */