perf: 优化编辑器的页面

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

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>

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>