@tmagic/editor 1.7.6 → 1.7.7

package/dist/tmagic-editor.js

@@ -11,8 +11,6 @@ import { defineComponent, createBlock, createElementBlock, openBlock, unref, wit
 import { Edit, FullScreen, View, Close, Coin, Delete, Plus, Grid, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, DocumentCopy, CaretBottom, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, EditPen, List, Goods, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, isObject, cloneDeep, mergeWith, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
-import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
-import * as monaco from 'monaco-editor';
 import { HookCodeType, HookType, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY, NODE_CONDS_RESULT_KEY, NODE_CONDS_KEY, Target, Watcher, NodeType, ActionType, DepTargetType, traverseTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceCondTarget, createDataSourceMethodTarget, updateNode } from '@tmagic/core';
 export { DepTargetType } from '@tmagic/core';
 import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, isValueIncludeDataSource, toLine, guid, getValueByKeyPath, setValueByKeyPath, getNodeInfo, dataSourceTemplateRegExp, getKeysArray, getKeys, convertToNumber, getIdFromEl, traverseNode, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName, getNodes, getDepNodeIds } from '@tmagic/utils';
@@ -86,8 +84,18 @@ const setEditorConfig = (option) => {
 };
 const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 
-emmetHTML(monaco);
-emmetCSS(monaco, ["css", "scss"]);
+let cached;
+const loadMonaco = () => {
+  if (!cached) {
+    cached = Promise.all([import('emmet-monaco-es'), import('monaco-editor')]).then(([emmet, monaco]) => {
+      const { emmetHTML, emmetCSS } = emmet;
+      emmetHTML(monaco);
+      emmetCSS(monaco, ["css", "scss"]);
+      return monaco;
+    });
+  }
+  return cached;
+};
 
 const _hoisted_1$_ = { class: "magic-code-editor" };
 const _hoisted_2$o = {
@@ -142,7 +150,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
             const editorRect = editorElement.getBoundingClientRect();
             const scrollableRect = scrollableElement.getBoundingClientRect();
             extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
-            if (extraHeight === 0) {
+            if (extraHeight === 0 && monaco) {
               const editorOptions = vsEditor.getOptions();
               const scrollBeyondLastLine = editorOptions.get(monaco.editor.EditorOption.scrollBeyondLastLine);
               const padding = editorOptions.get(monaco.editor.EditorOption.padding);
@@ -164,7 +172,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
         }
       }
       let lineHeight = 20;
-      if (vsEditor) {
+      if (vsEditor && monaco) {
         const editorOptions = vsEditor.getOptions();
         lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
       }
@@ -211,6 +219,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       }
       return getEditorConfig("parseDSL")(v);
     };
+    let monaco = null;
     let vsEditor = null;
     let vsDiffEditor = null;
     const values = ref("");
@@ -225,6 +234,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     const setEditorValue = (v, m) => {
       values.value = toString(v, props.language.toLocaleLowerCase());
       setAutoHeight(values.value);
+      if (!monaco) return;
       if (props.type === "diff") {
         const originalModel = monaco.editor.createModel(values.value, "text/javascript");
         const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
@@ -263,6 +273,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
         await nextTick();
       }
       cachedExtraHeight = null;
+      monaco = await loadMonaco();
       const options = {
         value: values.value,
         language: props.language,
@@ -271,14 +282,14 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
         ...props.options
       };
       if (props.type === "diff") {
-        vsDiffEditor = getEditorConfig("customCreateMonacoDiffEditor")(monaco, codeEditorEl.value, options);
+        vsDiffEditor = await getEditorConfig("customCreateMonacoDiffEditor")(monaco, codeEditorEl.value, options);
         vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
           if (props.autosize) {
             setAutoHeight(getEditorValue());
           }
         });
       } else {
-        vsEditor = getEditorConfig("customCreateMonacoEditor")(monaco, codeEditorEl.value, options);
+        vsEditor = await getEditorConfig("customCreateMonacoEditor")(monaco, codeEditorEl.value, options);
         vsEditor.onDidChangeModelContent(() => {
           if (props.autosize) {
             setAutoHeight(getEditorValue());
@@ -332,6 +343,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       vsDiffEditor?.dispose();
       vsEditor = null;
       vsDiffEditor = null;
+      monaco = null;
       cachedExtraHeight = null;
     });
     onUnmounted(() => {
@@ -686,6 +698,7 @@ const numberOptions = [
 ];
 const styleTabConfig = {
   title: "样式",
+  lazy: true,
   display: ({ services }) => !(services.uiService.get("showStylePanel") ?? true),
   items: [
     {
@@ -752,6 +765,7 @@ const styleTabConfig = {
 };
 const eventTabConfig = {
   title: "事件",
+  lazy: true,
   items: [
     {
       name: "events",
@@ -9726,8 +9740,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               options: unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : (openBlock(), createBlock(_sfc_main$B, {
-            key: 1,
+          ]) : createCommentVNode("v-if", true),
+          withDirectives(createVNode(_sfc_main$B, {
             ref: "splitView",
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -9781,7 +9795,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["left", "right", "min-left", "min-right", "min-center", "width"])),
+          ]), 1032, ["left", "right", "min-left", "min-right", "min-center", "width"]), [
+            [vShow, !showSrc.value]
+          ]),
           renderSlot(_ctx.$slots, "content-after"),
           renderSlot(_ctx.$slots, "footer")
         ],

package/dist/tmagic-editor.umd.cjs

@@ -1,27 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/table'), require('vue'), require('@element-plus/icons-vue'), require('serialize-javascript'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('@tmagic/stage'), require('events'), require('gesto'), require('deep-object-diff'), require('sortablejs'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tmagic/design', '@tmagic/form', '@tmagic/table', 'vue', '@element-plus/icons-vue', 'serialize-javascript', 'emmet-monaco-es', 'monaco-editor', '@tmagic/core', '@tmagic/utils', 'moveable', '@tmagic/stage', 'events', 'gesto', 'deep-object-diff', 'sortablejs', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.designPlugin, global.formPlugin, global.tablePlugin, global.Vue, global.iconsVue, global.serialize, global.emmetMonacoEs, global.monaco, global.core, global.utils, global.VanillaMoveable, global.StageCore, global.events, global.Gesto, global.deepObjectDiff, global.Sortable, global.KeyController));
-})(this, (function (exports, designPlugin, formPlugin, tablePlugin, vue, iconsVue, serialize, emmetMonacoEs, monaco, core, utils, VanillaMoveable, StageCore, events, Gesto, deepObjectDiff, Sortable, KeyController) { 'use strict';
-
-  function _interopNamespaceDefault(e) {
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-      for (const k in e) {
-        if (k !== 'default') {
-          const d = Object.getOwnPropertyDescriptor(e, k);
-          Object.defineProperty(n, k, d.get ? d : {
-            enumerable: true,
-            get: () => e[k]
-          });
-        }
-      }
-    }
-    n.default = e;
-    return Object.freeze(n);
-  }
-
-  const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/table'), require('vue'), require('@element-plus/icons-vue'), require('serialize-javascript'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('@tmagic/stage'), require('events'), require('gesto'), require('deep-object-diff'), require('sortablejs'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tmagic/design', '@tmagic/form', '@tmagic/table', 'vue', '@element-plus/icons-vue', 'serialize-javascript', '@tmagic/core', '@tmagic/utils', 'moveable', '@tmagic/stage', 'events', 'gesto', 'deep-object-diff', 'sortablejs', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.designPlugin, global.formPlugin, global.tablePlugin, global.Vue, global.iconsVue, global.serialize, global.core, global.utils, global.VanillaMoveable, global.StageCore, global.events, global.Gesto, global.deepObjectDiff, global.Sortable, global.KeyController));
+})(this, (function (exports, designPlugin, formPlugin, tablePlugin, vue, iconsVue, serialize, core, utils, VanillaMoveable, StageCore, events, Gesto, deepObjectDiff, Sortable, KeyController) { 'use strict';
 
   /** Detect free variable `global` from Node.js. */
   var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -4879,8 +4860,18 @@
   };
   const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 
-  emmetMonacoEs.emmetHTML(monaco__namespace);
-  emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
+  let cached;
+  const loadMonaco = () => {
+    if (!cached) {
+      cached = Promise.all([import('emmet-monaco-es'), import('monaco-editor')]).then(([emmet, monaco]) => {
+        const { emmetHTML, emmetCSS } = emmet;
+        emmetHTML(monaco);
+        emmetCSS(monaco, ["css", "scss"]);
+        return monaco;
+      });
+    }
+    return cached;
+  };
 
   const _hoisted_1$_ = { class: "magic-code-editor" };
   const _hoisted_2$o = {
@@ -4935,11 +4926,11 @@
               const editorRect = editorElement.getBoundingClientRect();
               const scrollableRect = scrollableElement.getBoundingClientRect();
               extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
-              if (extraHeight === 0) {
+              if (extraHeight === 0 && monaco) {
                 const editorOptions = vsEditor.getOptions();
-                const scrollBeyondLastLine = editorOptions.get(monaco__namespace.editor.EditorOption.scrollBeyondLastLine);
-                const padding = editorOptions.get(monaco__namespace.editor.EditorOption.padding);
-                const lineHeight = editorOptions.get(monaco__namespace.editor.EditorOption.lineHeight) || 20;
+                const scrollBeyondLastLine = editorOptions.get(monaco.editor.EditorOption.scrollBeyondLastLine);
+                const padding = editorOptions.get(monaco.editor.EditorOption.padding);
+                const lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
                 extraHeight = (scrollBeyondLastLine ? lineHeight : 0) + (padding?.top || 0) + (padding?.bottom || 0) + 10;
               }
             }
@@ -4957,9 +4948,9 @@
           }
         }
         let lineHeight = 20;
-        if (vsEditor) {
+        if (vsEditor && monaco) {
           const editorOptions = vsEditor.getOptions();
-          lineHeight = editorOptions.get(monaco__namespace.editor.EditorOption.lineHeight) || 20;
+          lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
         }
         if (cachedExtraHeight === null) {
           cachedExtraHeight = calculateExtraHeight();
@@ -5004,6 +4995,7 @@
         }
         return getEditorConfig("parseDSL")(v);
       };
+      let monaco = null;
       let vsEditor = null;
       let vsDiffEditor = null;
       const values = vue.ref("");
@@ -5018,9 +5010,10 @@
       const setEditorValue = (v, m) => {
         values.value = toString(v, props.language.toLocaleLowerCase());
         setAutoHeight(values.value);
+        if (!monaco) return;
         if (props.type === "diff") {
-          const originalModel = monaco__namespace.editor.createModel(values.value, "text/javascript");
-          const modifiedModel = monaco__namespace.editor.createModel(toString(m, props.language), "text/javascript");
+          const originalModel = monaco.editor.createModel(values.value, "text/javascript");
+          const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
           const position2 = vsDiffEditor?.getPosition();
           const result2 = vsDiffEditor?.setModel({
             original: originalModel,
@@ -5056,6 +5049,7 @@
           await vue.nextTick();
         }
         cachedExtraHeight = null;
+        monaco = await loadMonaco();
         const options = {
           value: values.value,
           language: props.language,
@@ -5064,14 +5058,14 @@
           ...props.options
         };
         if (props.type === "diff") {
-          vsDiffEditor = getEditorConfig("customCreateMonacoDiffEditor")(monaco__namespace, codeEditorEl.value, options);
+          vsDiffEditor = await getEditorConfig("customCreateMonacoDiffEditor")(monaco, codeEditorEl.value, options);
           vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
             if (props.autosize) {
               setAutoHeight(getEditorValue());
             }
           });
         } else {
-          vsEditor = getEditorConfig("customCreateMonacoEditor")(monaco__namespace, codeEditorEl.value, options);
+          vsEditor = await getEditorConfig("customCreateMonacoEditor")(monaco, codeEditorEl.value, options);
           vsEditor.onDidChangeModelContent(() => {
             if (props.autosize) {
               setAutoHeight(getEditorValue());
@@ -5125,6 +5119,7 @@
         vsDiffEditor?.dispose();
         vsEditor = null;
         vsDiffEditor = null;
+        monaco = null;
         cachedExtraHeight = null;
       });
       vue.onUnmounted(() => {
@@ -5479,6 +5474,7 @@
   ];
   const styleTabConfig = {
     title: "样式",
+    lazy: true,
     display: ({ services }) => !(services.uiService.get("showStylePanel") ?? true),
     items: [
       {
@@ -5545,6 +5541,7 @@
   };
   const eventTabConfig = {
     title: "事件",
+    lazy: true,
     items: [
       {
         name: "events",
@@ -14519,8 +14516,8 @@
                 options: vue.unref(codeOptions),
                 onSave: saveCode
               }, null, 8, ["init-values", "options"])
-            ]) : (vue.openBlock(), vue.createBlock(_sfc_main$B, {
-              key: 1,
+            ]) : vue.createCommentVNode("v-if", true),
+            vue.withDirectives(vue.createVNode(_sfc_main$B, {
               ref: "splitView",
               class: "m-editor-content",
               "left-class": "m-editor-framework-left",
@@ -14574,7 +14571,9 @@
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["left", "right", "min-left", "min-right", "min-center", "width"])),
+            ]), 1032, ["left", "right", "min-left", "min-right", "min-center", "width"]), [
+              [vue.vShow, !showSrc.value]
+            ]),
             vue.renderSlot(_ctx.$slots, "content-after"),
             vue.renderSlot(_ctx.$slots, "footer")
           ],

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.6",
+  "version": "1.7.7",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -49,7 +49,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "buffer": "^6.0.3",
     "deep-object-diff": "^1.1.9",
-    "emmet-monaco-es": "^5.6.1",
+    "emmet-monaco-es": "^5.7.0",
     "events": "^3.3.0",
     "gesto": "^1.19.4",
     "keycon": "^1.4.0",
@@ -57,11 +57,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.6",
-    "@tmagic/form": "1.7.6",
-    "@tmagic/utils": "1.7.6",
-    "@tmagic/stage": "1.7.6",
-    "@tmagic/table": "1.7.6"
+    "@tmagic/design": "1.7.7",
+    "@tmagic/table": "1.7.7",
+    "@tmagic/stage": "1.7.7",
+    "@tmagic/form": "1.7.7",
+    "@tmagic/utils": "1.7.7"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -75,7 +75,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
-    "@tmagic/core": "1.7.6"
+    "@tmagic/core": "1.7.7"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/layouts/CodeEditor.vue

@@ -20,13 +20,14 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
+import type * as Monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
 import { getEditorConfig } from '@editor/utils/config';
-import monaco from '@editor/utils/monaco-editor';
+import loadMonaco from '@editor/utils/monaco-editor';
 
 defineOptions({
   name: 'MEditorCodeEditor',
@@ -38,7 +39,7 @@ const props = withDefaults(
     modifiedValues?: any;
     type?: 'diff';
     language?: string;
-    options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
     height?: string;
     autoSave?: boolean;
     parse?: boolean;
@@ -99,7 +100,7 @@ const calculateExtraHeight = (): number => {
         extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
 
         // 如果无法获取到有效的差值，使用编辑器配置中的相关选项
-        if (extraHeight === 0) {
+        if (extraHeight === 0 && monaco) {
           const editorOptions = vsEditor.getOptions();
           const scrollBeyondLastLine = editorOptions.get(monaco.editor.EditorOption.scrollBeyondLastLine);
           const padding = editorOptions.get(monaco.editor.EditorOption.padding);
@@ -127,7 +128,7 @@ const setAutoHeight = (v = '') => {
 
   // 获取编辑器实际行高，如果编辑器还未初始化则使用默认值
   let lineHeight = 20;
-  if (vsEditor) {
+  if (vsEditor && monaco) {
     const editorOptions = vsEditor.getOptions();
     lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
   }
@@ -188,8 +189,9 @@ const parseCode = (v: string | any, language: string): any => {
   return getEditorConfig('parseDSL')(v);
 };
 
-let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
-let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
+let monaco: typeof import('monaco-editor') | null = null;
+let vsEditor: Monaco.editor.IStandaloneCodeEditor | null = null;
+let vsDiffEditor: Monaco.editor.IStandaloneDiffEditor | null = null;
 
 const values = ref('');
 const loading = ref(false);
@@ -207,6 +209,8 @@ const setEditorValue = (v: string | any, m: string | any) => {
 
   setAutoHeight(values.value);
 
+  if (!monaco) return;
+
   if (props.type === 'diff') {
     const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
     const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
@@ -255,6 +259,8 @@ const init = async () => {
   // 重置缓存的额外高度，因为编辑器重新初始化
   cachedExtraHeight = null;
 
+  monaco = await loadMonaco();
+
   const options = {
     value: values.value,
     language: props.language,
@@ -264,7 +270,7 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = getEditorConfig('customCreateMonacoDiffEditor')(monaco, codeEditorEl.value, options);
+    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, codeEditorEl.value, options);
 
     // 监听diff编辑器内容变化
     vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
@@ -274,7 +280,7 @@ const init = async () => {
       }
     });
   } else {
-    vsEditor = getEditorConfig('customCreateMonacoEditor')(monaco, codeEditorEl.value, options);
+    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, codeEditorEl.value, options);
 
     // 监听编辑器内容变化
     vsEditor.onDidChangeModelContent(() => {
@@ -343,6 +349,7 @@ onBeforeUnmount(() => {
 
   vsEditor = null;
   vsDiffEditor = null;
+  monaco = null;
 
   // 重置缓存
   cachedExtraHeight = null;

package/src/layouts/Framework.vue

@@ -17,7 +17,7 @@
     </slot>
 
     <SplitView
-      v-else
+      v-show="!showSrc"
       ref="splitView"
       class="m-editor-content"
       left-class="m-editor-framework-left"

package/src/type.ts

@@ -18,6 +18,7 @@
 
 import type { Component } from 'vue';
 import type EventEmitter from 'events';
+import type * as Monaco from 'monaco-editor';
 import Sortable, { type Options, type SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
 
@@ -32,8 +33,6 @@ import type {
   UpdateDragEl,
 } from '@tmagic/stage';
 
-import Monaco from '@editor/utils/monaco-editor';
-
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
 import type { DataSourceService } from './services/dataSource';
@@ -121,15 +120,15 @@ export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig
 export interface EditorInstallOptions {
   parseDSL: <T = any>(dsl: string) => T;
   customCreateMonacoEditor: (
-    monaco: typeof Monaco,
+    monaco: typeof import('monaco-editor'),
     codeEditorEl: HTMLElement,
     options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
-  ) => Monaco.editor.IStandaloneCodeEditor;
+  ) => Promise<Monaco.editor.IStandaloneCodeEditor> | Monaco.editor.IStandaloneCodeEditor;
   customCreateMonacoDiffEditor: (
-    monaco: typeof Monaco,
+    monaco: typeof import('monaco-editor'),
     codeEditorEl: HTMLElement,
     options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
-  ) => Monaco.editor.IStandaloneDiffEditor;
+  ) => Promise<Monaco.editor.IStandaloneDiffEditor> | Monaco.editor.IStandaloneDiffEditor;
   [key: string]: any;
 }
 

package/src/utils/monaco-editor.ts

@@ -1,8 +1,15 @@
-import { emmetCSS, emmetHTML } from 'emmet-monaco-es';
-import * as monaco from 'monaco-editor';
+let cached: Promise<typeof import('monaco-editor')> | undefined;
 
-// 注册emmet插件
-emmetHTML(monaco);
-emmetCSS(monaco, ['css', 'scss']);
+export default () => {
+  if (!cached) {
+    cached = Promise.all([import('emmet-monaco-es'), import('monaco-editor')]).then(([emmet, monaco]) => {
+      const { emmetHTML, emmetCSS } = emmet;
+      emmetHTML(monaco);
+      emmetCSS(monaco, ['css', 'scss']);
 
-export default monaco;
+      return monaco;
+    });
+  }
+
+  return cached;
+};

package/src/utils/props.ts

@@ -47,6 +47,7 @@ export const numberOptions = [
 
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
+  lazy: true,
   display: ({ services }: any) => !(services.uiService.get('showStylePanel') ?? true),
   items: [
     {
@@ -114,6 +115,7 @@ export const styleTabConfig: TabPaneConfig = {
 
 export const eventTabConfig: TabPaneConfig = {
   title: '事件',
+  lazy: true,
   items: [
     {
       name: 'events',

package/types/index.d.ts

@@ -5,6 +5,7 @@ export { default as designPlugin } from '@tmagic/design';
 import { TableColumnConfig, FormConfig, ChangeRecord as ChangeRecord$1, TabPaneConfig, CascaderOption, FormState, FieldProps, CodeSelectConfig, ContainerChangeEventData as ContainerChangeEventData$1, CodeSelectColConfig, DataSourceFieldsConfig, DataSourceMocksConfig, DataSourceMethodsConfig, DataSourceInputConfig, DataSourceSelect, DataSourceMethodSelectConfig, DataSourceFieldSelectConfig, EventSelectConfig, KeyValueConfig, FormValue, PageFragmentSelectConfig, DisplayCondsConfig, CondOpSelectConfig, FormInstallOptions } from '@tmagic/form';
 export * from '@tmagic/form';
 export { default as formPlugin } from '@tmagic/form';
+import * as Monaco from 'monaco-editor';
 import EventEmitter$1, { EventEmitter } from 'events';
 import Sortable, { Options as Options$1, SortableEvent } from 'sortablejs';
 import { Writable, PascalCasedProperties } from 'type-fest';
@@ -15,7 +16,6 @@ import * as StageCore from '@tmagic/stage';
 import StageCore__default, { ContainerHighlightType, CustomizeMoveableOptions, UpdateDragEl, RenderType, GuidesOptions } from '@tmagic/stage';
 export * from '@tmagic/stage';
 export { default as StageCore } from '@tmagic/stage';
-import * as monaco from 'monaco-editor';
 import * as _tmagic_schema from '@tmagic/schema';
 import { StyleSchema } from '@tmagic/schema';
 import * as _vue_reactivity from '@vue/reactivity';
@@ -900,12 +900,12 @@ type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 interface EditorInstallOptions {
     parseDSL: <T = any>(dsl: string) => T;
-    customCreateMonacoEditor: (monaco: typeof monaco, codeEditorEl: HTMLElement, options: monaco.editor.IStandaloneEditorConstructionOptions & {
+    customCreateMonacoEditor: (monaco: typeof Monaco, codeEditorEl: HTMLElement, options: Monaco.editor.IStandaloneEditorConstructionOptions & {
         editorCustomType?: string;
-    }) => monaco.editor.IStandaloneCodeEditor;
-    customCreateMonacoDiffEditor: (monaco: typeof monaco, codeEditorEl: HTMLElement, options: monaco.editor.IStandaloneEditorConstructionOptions & {
+    }) => Promise<Monaco.editor.IStandaloneCodeEditor> | Monaco.editor.IStandaloneCodeEditor;
+    customCreateMonacoDiffEditor: (monaco: typeof Monaco, codeEditorEl: HTMLElement, options: Monaco.editor.IStandaloneEditorConstructionOptions & {
         editorCustomType?: string;
-    }) => monaco.editor.IStandaloneDiffEditor;
+    }) => Promise<Monaco.editor.IStandaloneDiffEditor> | Monaco.editor.IStandaloneDiffEditor;
     [key: string]: any;
 }
 interface Services {
@@ -2479,7 +2479,7 @@ type __VLS_Props$u = {
     modifiedValues?: any;
     type?: 'diff';
     language?: string;
-    options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
     height?: string;
     autoSave?: boolean;
     parse?: boolean;
@@ -2492,10 +2492,10 @@ type __VLS_Props$u = {
 };
 declare const __VLS_export$w: _vue_runtime_core.DefineComponent<__VLS_Props$u, {
     values: _vue_reactivity.Ref<string, string>;
-    getEditor(): monaco.editor.IStandaloneCodeEditor | monaco.editor.IStandaloneDiffEditor | null;
-    getVsEditor(): monaco.editor.IStandaloneCodeEditor | null;
-    getVsDiffEditor(): monaco.editor.IStandaloneDiffEditor | null;
-    setEditorValue: (v: string | any, m: string | any) => void | undefined;
+    getEditor(): Monaco.editor.IStandaloneCodeEditor | Monaco.editor.IStandaloneDiffEditor | null;
+    getVsEditor(): Monaco.editor.IStandaloneCodeEditor | null;
+    getVsDiffEditor(): Monaco.editor.IStandaloneDiffEditor | null;
+    setEditorValue: (v: string | any, m: string | any) => void;
     getEditorValue: () => string;
     focus(): void;
 }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
@@ -2505,7 +2505,7 @@ declare const __VLS_export$w: _vue_runtime_core.DefineComponent<__VLS_Props$u, {
     onSave?: ((...args: any[]) => any) | undefined;
     onInitd?: ((...args: any[]) => any) | undefined;
 }>, {
-    options: monaco.editor.IStandaloneEditorConstructionOptions;
+    options: Monaco.editor.IStandaloneEditorConstructionOptions;
     language: string;
     parse: boolean;
     initValues: any;