From 632adf11e18348f99efa8347f6fba88ffd2f052a Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Tue, 23 Jan 2024 00:03:34 +0800
Subject: [PATCH] =?UTF-8?q?MonocaEditor=E9=87=87=E7=94=A8=E5=BC=82?=
 =?UTF-8?q?=E6=AD=A5=E5=8A=A0=E8=BD=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B4?=
 =?UTF-8?q?=E4=BD=93=E5=8A=A0=E8=BD=BD=E9=80=9F=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue | 33 ++++++++++++++++++++++++--------
 src/components/MonacoEditor.vue  | 12 ++++++++----
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index 606771e..faca166 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -211,7 +211,8 @@
       class="absolute-bottom"
       :placeholder="true"
       ref="editor"
-      @typing="(val) => (quickcommandInfo.cmd = val)"
+      @loaded="monacoInit"
+      @typing="(val) => monacoTyping(val)"
       @keyStroke="monacoKeyStroke"
       :style="{
         top: languageBarHeight + 'px',
@@ -225,11 +226,15 @@
 </template>
 
 <script>
-import MonacoEditor from "components/MonacoEditor";
+import { defineAsyncComponent } from "vue";
 import CommandSideBar from "components/CommandSideBar";
 import CommandRunResult from "components/CommandRunResult";
 import QuickAction from "components/popup/QuickAction";
 import KeyRecorder from "components/popup/KeyRecorder";
+// Monaco改用异步加载
+const MonacoEditor = defineAsyncComponent(() =>
+  import("components/MonacoEditor")
+);
 
 export default {
   components: {
@@ -270,8 +275,11 @@ export default {
   props: {
     action: Object,
   },
+  created() {
+    this.commandInit();
+  },
   mounted() {
-    this.init();
+    this.sidebarInit();
   },
   computed: {
     configurationPage() {
@@ -288,23 +296,29 @@ export default {
     },
   },
   methods: {
-    init() {
+    // 命令初始化
+    commandInit() {
       let quickCommandInfo =
         this.action.type === "run"
           ? this.$root.utools.getDB("cfg_codeHistory")
           : this.action.data;
       quickCommandInfo?.program &&
         Object.assign(this.quickcommandInfo, _.cloneDeep(quickCommandInfo));
-      // monaco 相关
-      this.$refs.editor.setEditorValue(this.quickcommandInfo.cmd);
-      this.setLanguage(this.quickcommandInfo.program);
-      this.$refs.editor.setCursorPosition(this.quickcommandInfo.cursorPosition);
       // 默认命令不可编辑
       if (this.quickcommandInfo.tags?.includes("默认") && !utools.isDev()) {
         this.canCommandSave = false;
       }
+    },
+    // 侧边栏初始化
+    sidebarInit() {
       this.$refs.sidebar?.init();
     },
+    // Monaco编辑器初始化，Monaco异步加载完执行
+    monacoInit() {
+      this.$refs.editor.setEditorValue(this.quickcommandInfo.cmd);
+      this.setLanguage(this.quickcommandInfo.program);
+      this.$refs.editor.setCursorPosition(this.quickcommandInfo.cursorPosition);
+    },
     programChanged(value) {
       this.setLanguage(value);
       if (value === "custom") this.$refs.settings.show();
@@ -373,6 +387,9 @@ export default {
       command.cursorPosition = this.$refs.editor.getCursorPosition();
       this.$root.utools.putDB(command, "cfg_codeHistory");
     },
+    monacoTyping(val) {
+      this.quickcommandInfo.cmd = val;
+    },
     monacoKeyStroke(event, data) {
       switch (event) {
         case "run":
diff --git a/src/components/MonacoEditor.vue b/src/components/MonacoEditor.vue
index 31ed8d0..c3cc376 100644
--- a/src/components/MonacoEditor.vue
+++ b/src/components/MonacoEditor.vue
@@ -46,6 +46,7 @@ export default {
   },
   mounted() {
     this.initEditor();
+    this.$emit("loaded");
   },
   props: {
     placeholder: Boolean,
@@ -213,10 +214,13 @@ export default {
         }
       );
       // alt + z 换行
-      this.rawEditor().addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyZ, () => {
-        that.wordWrap = that.wordWrap === "off" ? "on" : "off";
-        that.rawEditor.updateOptions({ wordWrap: that.wordWrap });
-      });
+      this.rawEditor().addCommand(
+        monaco.KeyMod.Alt | monaco.KeyCode.KeyZ,
+        () => {
+          that.wordWrap = that.wordWrap === "off" ? "on" : "off";
+          that.rawEditor.updateOptions({ wordWrap: that.wordWrap });
+        }
+      );
       // ctrl + s 保存
       this.rawEditor().addCommand(
         monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,