From bd63169cbb805044d4c94b0555c149110230b7a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 6 Jul 2022 20:48:59 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E7=9A=84=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/MonacoEditor/index.hook.ts          | 26 ++++++++++++++-----
 src/components/Pages/MonacoEditor/index.vue   | 20 ++++++++++++--
 .../ChartDataMonacoEditor/index.vue           |  2 +-
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/Pages/MonacoEditor/index.hook.ts b/src/components/Pages/MonacoEditor/index.hook.ts
index ddd3512e..89b5a752 100644
--- a/src/components/Pages/MonacoEditor/index.hook.ts
+++ b/src/components/Pages/MonacoEditor/index.hook.ts
@@ -1,7 +1,10 @@
 import { ref, onBeforeUnmount, nextTick } from 'vue'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
 
 export const useMonacoEditor = (language = 'javascript') => {
+const designStore = useDesignStore()
+
   let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
   let initReadOnly = false
   const el = ref<HTMLElement | null>(null)
@@ -29,18 +32,29 @@ export const useMonacoEditor = (language = 'javascript') => {
     // 创建
     monacoEditor = monaco.editor.create(el.value, {
       model: javascriptModel,
-      minimap: { enabled: true },
-      roundedSelection: false,
-      theme: 'vs-dark',
+      // 是否启用预览图
+      minimap: { enabled: false },
+      // 圆角
+      roundedSelection: true,
+      // 主题
+      theme: designStore.getDarkTheme ? 'vs-dark' : 'vs',
+      // 主键
       multiCursorModifier: 'ctrlCmd',
+      // 滚动条
       scrollbar: {
         verticalScrollbarSize: 8,
         horizontalScrollbarSize: 8
       },
+      // 行号
+      lineNumbers: 'off',
+      // tab大小
       tabSize: 2,
-      fontSize: 16, //字体大小
-      autoIndent: 'advanced', //自动布局
-      automaticLayout: true, // 自适应宽高
+      //字体大小
+      fontSize: 16,
+      // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
+      autoIndent: 'advanced',
+      // 自动布局
+      automaticLayout: true,
       ...editorOption
     })
 
diff --git a/src/components/Pages/MonacoEditor/index.vue b/src/components/Pages/MonacoEditor/index.vue
index 81d655e0..1a1349ce 100644
--- a/src/components/Pages/MonacoEditor/index.vue
+++ b/src/components/Pages/MonacoEditor/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="editor-area" :style="{ width, height }"></div>
+  <div ref="el" class="go-editor-area" :style="{ width, height }"></div>
   <EditorWorker></EditorWorker>
 </template>
 
@@ -65,12 +65,28 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.editor-area {
+.go-editor-area {
   position: relative;
   border-radius: 4px;
   overflow: hidden;
   padding: 5px;
   padding-left: 0;
   box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0);
+  @include deep() {
+    .margin,
+    .monaco-editor,
+    .inputarea.ime-input {
+      background-color: rgba(0, 0, 0, 0);
+    }
+
+    .monaco-editor-background {
+      background-color: rgba(0, 0, 0, 0);
+      @include fetch-bg-color('filter-color-shallow');
+    }
+    .margin {
+      @include fetch-bg-color('filter-color-shallow');
+    }
+  }
 }
 </style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
index 80fe5c97..dd07e151 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
@@ -90,7 +90,7 @@
               </template>
               规则
             </n-tag>
-            <n-text class="go-ml-2" depth="3">过滤器将对接口返回值的「data」字段进行处理</n-text>
+            <n-text class="go-ml-2" depth="2">过滤器将对接口返回值的「data」字段进行处理</n-text>
           </div>
 
           <n-space>