@tmagic/editor 1.5.0-beta.0 → 1.5.0-beta.10

package/dist/tmagic-editor.js

@@ -1,22 +1,29 @@
+import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, getDesignConfig, TMagicSelect, useZIndex, tMagicMessage, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+export * from '@tmagic/design';
+export { default as designPlugin } from '@tmagic/design';
+import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel } from '@tmagic/form';
+export * from '@tmagic/form';
+export { default as formPlugin } from '@tmagic/form';
+import tablePlugin__default, { MagicTable } from '@tmagic/table';
+export * from '@tmagic/table';
+export { default as tablePlugin } from '@tmagic/table';
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, Transition, mergeDefaults } from 'vue';
 import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
-import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
+import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys, debounce } from 'lodash-es';
 import serialize from 'serialize-javascript';
-import { TMagicIcon, TMagicButton, TMagicCard, getConfig as getConfig$1, TMagicSelect, useZIndex, tMagicMessage, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
-import { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel } from '@tmagic/form';
-import { HookCodeType, HookType, NODE_CONDS_KEY, NodeType, ActionType } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
-import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { HookCodeType, HookType, NODE_CONDS_KEY, Target, Watcher, NodeType, ActionType, DepTargetType, DEFAULT_EVENTS, DEFAULT_METHODS, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/core';
+export { DepTargetType } from '@tmagic/core';
+import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, traverseNode, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
+export * from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
-import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
-export { DepTargetType } from '@tmagic/dep';
+import StageCore__default, { isFixed, GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+export * from '@tmagic/stage';
+export { default as StageCore } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
 import Sortable from 'sortablejs';
-import StageCore, { GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
-import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
 const _hoisted_1$w = ["src"];
@@ -64,10 +71,10 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
 });
 
 let $TMAGIC_EDITOR = {};
-const setConfig = (option) => {
+const setEditorConfig = (option) => {
   $TMAGIC_EDITOR = option;
 };
-const getConfig = (key) => $TMAGIC_EDITOR[key];
+const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
@@ -115,14 +122,14 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       }
       return value;
     };
-    const parse = (v, language) => {
+    const parseCode = (v, language) => {
       if (typeof v !== "string") {
         return v;
       }
       if (language === "json") {
         return JSON.parse(v);
       }
-      return getConfig("parseDSL")(v);
+      return getEditorConfig("parseDSL")(v);
     };
     let vsEditor = null;
     let vsDiffEditor = null;
@@ -170,7 +177,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           e.stopPropagation();
           const newValue = getEditorValue();
           values.value = newValue;
-          emit("save", props.parse ? parse(newValue, props.language) : newValue);
+          emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
         }
       });
       if (props.type !== "diff" && props.autoSave) {
@@ -178,7 +185,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           const newValue = getEditorValue();
           if (values.value !== newValue) {
             values.value = newValue;
-            emit("save", props.parse ? parse(newValue, props.language) : newValue);
+            emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
           }
         });
       }
@@ -364,7 +371,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     const changeHandler = (v) => {
       if (!props.name || !props.model) return;
       try {
-        const parseDSL = getConfig("parseDSL");
+        const parseDSL = getEditorConfig("parseDSL");
         props.model[props.name] = parseDSL(`(${v[props.name]})`);
         emit("change", props.model[props.name]);
       } catch (e) {
@@ -994,7 +1001,6 @@ const generatePageName = (pageNameList, type) => {
   return pageName;
 };
 const generatePageNameByApp = (app, type) => generatePageName(getPageNameList(type === "page" ? getPageList(app) : getPageFragmentList(app)), type);
-const isFixed = (node) => node.style?.position === "fixed";
 const getNodeIndex = (id, parent) => {
   const items = parent?.items || [];
   return items.findIndex((item) => `${item.id}` === `${id}`);
@@ -1012,11 +1018,14 @@ const getMiddleTop = (node, parentNode, stage) => {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+  let wrapperHeightDeal = parentHeight;
+  if (stage.mask && stage.renderer) {
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+    const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+    if (isPage(parentNode)) {
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    }
   }
   return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
@@ -1131,22 +1140,13 @@ const fixNodePosition = (config, parent, stage) => {
   return {
     ...config.style || {},
     top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+    left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
   };
 };
 const serializeConfig = (config) => serialize(config, {
   space: 2,
   unsafe: true
 }).replace(/"(\w+)":\s/g, "$1: ");
-const traverseNode = (node, cb, parents = []) => {
-  cb(node, parents);
-  if (Array.isArray(node.items) && node.items.length) {
-    parents.push(node);
-    node.items.forEach((item) => {
-      traverseNode(item, cb, [...parents]);
-    });
-  }
-};
 const moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
   sourceIndices.sort((a, b) => a - b);
   for (let i = sourceIndices.length - 1; i >= 0; i--) {
@@ -1703,7 +1703,7 @@ class WebStorage extends BaseService {
     if (item === null) return null;
     switch (protocol) {
       case "object" /* OBJECT */:
-        return getConfig("parseDSL")(`(${item})`);
+        return getEditorConfig("parseDSL")(`(${item})`);
       case "json" /* JSON */:
         return JSON.parse(item);
       case "number" /* NUMBER */:
@@ -1915,7 +1915,7 @@ class Editor extends BaseService {
    * 只有容器拥有布局
    */
   async getLayout(parent, node) {
-    if (node && typeof node !== "function" && isFixed(node)) return Layout.FIXED;
+    if (node && typeof node !== "function" && isFixed(node.style || {})) return Layout.FIXED;
     if (parent.layout) {
       return parent.layout;
     }
@@ -1940,7 +1940,7 @@ class Editor extends BaseService {
       historyService.resetState();
     }
     if (node?.id) {
-      this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
+      this.get("stage")?.renderer?.runtime?.getApp?.()?.page?.emit(
         "editor:select",
         {
           node,
@@ -2294,7 +2294,7 @@ class Editor extends BaseService {
   }
   async doPaste(config, position = {}) {
     propsService.clearRelateId();
-    const doc = this.get("stage")?.renderer.contentWindow?.document;
+    const doc = this.get("stage")?.renderer?.contentWindow?.document;
     const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
@@ -2308,7 +2308,7 @@ class Editor extends BaseService {
     }
     if (!node.style) return config;
     const stage = this.get("stage");
-    const doc = stage?.renderer.contentWindow?.document;
+    const doc = stage?.renderer?.contentWindow?.document;
     if (doc) {
       const el = getElById()(doc, node.id);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
@@ -2583,9 +2583,9 @@ class Editor extends BaseService {
   async toggleFixedPosition(dist, src, root) {
     const newConfig = cloneDeep(dist);
     if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig) && !isFixed(src)) {
+      if (isFixed(newConfig.style) && !isFixed(src.style || {})) {
         newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig) && isFixed(src)) {
+      } else if (!isFixed(newConfig.style) && isFixed(src.style || {})) {
         newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
       }
     }
@@ -3230,7 +3230,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$u = { class: "m-fields-code-select-col" };
-const _hoisted_2$k = { class: "code-select-container" };
+const _hoisted_2$g = { class: "code-select-container" };
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelectCol"
@@ -3311,7 +3311,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        createElementVNode("div", _hoisted_2$k, [
+        createElementVNode("div", _hoisted_2$g, [
           createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
@@ -3367,7 +3367,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const { dataSourceService } = inject("services") || {};
     const props = __props;
-    const optionComponent = getConfig$1("components")?.option;
+    const optionComponent = getDesignConfig("components")?.option;
     const options = computed(() => {
       const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field];
       const ds = dataSourceService?.getDataSourceById(id);
@@ -3718,7 +3718,7 @@ const useDataSourceMethod = () => {
         dataSource.value.methods = [];
       }
       if (values.content) {
-        const parseDSL = getConfig("parseDSL");
+        const parseDSL = getEditorConfig("parseDSL");
         if (typeof values.content === "string") {
           values.content = parseDSL(values.content);
         }
@@ -3846,7 +3846,7 @@ const zoom = computed(() => uiService.get("zoom") || 1);
 const uiSelectMode = computed(() => uiService.get("uiSelectMode"));
 const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
 const useStage = (stageOptions) => {
-  const stage = new StageCore({
+  const stage = new StageCore__default({
     render: stageOptions.render,
     runtimeUrl: stageOptions.runtimeUrl,
     zoom: stageOptions.zoom ?? zoom.value,
@@ -3881,7 +3881,7 @@ const useStage = (stageOptions) => {
       }
     }
   );
-  stage.mask.setGuides([
+  stage.mask?.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
   ]);
@@ -4061,6 +4061,68 @@ const useEditorContentHeight = () => {
   };
 };
 
+const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
+  const filterIsMatch = (value, data) => {
+    const string = !Array.isArray(value) ? [value] : value;
+    if (!string.length) {
+      return true;
+    }
+    return string.some((v) => filterNodeMethod(v, data));
+  };
+  const filter = (text) => {
+    if (!nodeData.value.length) return;
+    nodeData.value.forEach((node) => {
+      traverseNode(node, (node2, parents) => {
+        if (!nodeStatusMap.value) return;
+        const visible = filterIsMatch(text, node2);
+        if (visible && parents.length) {
+          parents.forEach((parent) => {
+            updateStatus(nodeStatusMap.value, parent.id, {
+              visible,
+              expand: true
+            });
+          });
+        }
+        updateStatus(nodeStatusMap.value, node2.id, {
+          visible
+        });
+      });
+    });
+  };
+  return {
+    filterText: ref(""),
+    filterTextChangeHandler(text) {
+      filter(text);
+    }
+  };
+};
+
+const useGetSo = (target, emit) => {
+  let getso;
+  const isDraging = ref(false);
+  onMounted(() => {
+    if (!target.value) return;
+    getso = new Gesto(target.value, {
+      container: window,
+      pinchOutside: true
+    }).on("drag", (e) => {
+      if (!target.value) return;
+      emit("change", e);
+    }).on("dragStart", () => {
+      isDraging.value = true;
+    }).on("dragEnd", () => {
+      isDraging.value = false;
+    });
+  });
+  onBeforeUnmount(() => {
+    getso?.unset();
+    isDraging.value = false;
+  });
+  return {
+    isDraging
+  };
+};
+
 const useNextFloatBoxPosition = (uiService, parent) => {
   const boxPosition = ref({
     left: 0,
@@ -4085,8 +4147,42 @@ const useNextFloatBoxPosition = (uiService, parent) => {
   };
 };
 
+const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
+  const map = /* @__PURE__ */ new Map();
+  nodeData.forEach(
+    (node) => traverseNode(node, (node2) => {
+      map.set(
+        node2.id,
+        initialLayerNodeStatus?.get(node2.id) || {
+          visible: true,
+          expand: false,
+          selected: false,
+          draggable: false
+        }
+      );
+    })
+  );
+  return map;
+};
+const useNodeStatus$1 = (nodeData) => {
+  const nodeStatusMap = ref(/* @__PURE__ */ new Map());
+  watch(
+    nodeData,
+    (nodeData2) => {
+      nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  return {
+    nodeStatusMap
+  };
+};
+
 const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
+const _hoisted_2$f = { class: "m-editor-data-source-fields-footer" };
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFields"
@@ -4343,16 +4439,16 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$j, [
+        createElementVNode("div", _hoisted_2$f, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
             plain: "",
             onClick: _cache[0] || (_cache[0] = ($event) => newFromJsonHandler())
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[8] || (_cache[8] = [
               createTextVNode("快速添加")
-            ]),
+            ])),
             _: 1
           }, 8, ["disabled"]),
           createVNode(unref(TMagicButton), {
@@ -4362,9 +4458,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             plain: "",
             onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[9] || (_cache[9] = [
               createTextVNode("添加")
-            ]),
+            ])),
             _: 1
           }, 8, ["disabled"])
         ]),
@@ -4435,7 +4531,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
-    const optionComponent = getConfig$1("components")?.option;
+    const optionComponent = getDesignConfig("components")?.option;
     const services = inject("services");
     const mForm = inject("mForm");
     const eventBus = inject("eventBus");
@@ -4702,7 +4798,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           "last-values": _ctx.lastValues,
           "init-values": _ctx.initValues,
           values: _ctx.values,
-          prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
+          prop: _ctx.prop,
           onChange: onChangeHandler
         }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
         _ctx.config.fieldConfig ? (openBlock(), createBlock(unref(TMagicTooltip), {
@@ -4731,8 +4827,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$q = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$i = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$8 = { class: "el-input__inner t-input__inner" };
+const _hoisted_2$e = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_3$4 = { class: "el-input__inner t-input__inner" };
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceInput"
@@ -4909,7 +5005,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       changeHandler(state.value);
     };
     return (_ctx, _cache) => {
-      return _ctx.disabled || isFocused.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(getConfig$1)("components")?.autocomplete.component || "el-autocomplete"), mergeProps(
+      return _ctx.disabled || isFocused.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(getDesignConfig)("components")?.autocomplete.component || "el-autocomplete"), mergeProps(
         {
           key: 0,
           class: "tmagic-design-auto-complete",
@@ -4918,7 +5014,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           modelValue: state.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
         },
-        unref(getConfig$1)("components")?.autocomplete.props({
+        unref(getDesignConfig)("components")?.autocomplete.props({
           disabled: _ctx.disabled,
           size: _ctx.size,
           fetchSuggestions: querySearch,
@@ -4938,7 +5034,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         default: withCtx(({ item }) => [
           createElementVNode("div", _hoisted_1$q, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$i, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$e, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -4950,7 +5046,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$8, [
+          createElementVNode("div", _hoisted_3$4, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -4980,9 +5076,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$p = { style: { "display": "flex", "margin-bottom": "10px" } };
-const _hoisted_2$h = { style: { "flex": "1" } };
-const _hoisted_3$7 = { style: { "flex": "1" } };
-const _hoisted_4$7 = { class: "dialog-footer" };
+const _hoisted_2$d = { style: { "flex": "1" } };
+const _hoisted_3$3 = { style: { "flex": "1" } };
+const _hoisted_4$3 = { class: "dialog-footer" };
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
@@ -5102,7 +5198,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         height: "500px",
         onChange: (formState, code) => {
           try {
-            getConfig("parseDSL")(code);
+            getEditorConfig("parseDSL")(code);
             return code;
           } catch (error) {
             tMagicMessage.error(error.message);
@@ -5191,9 +5287,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                   link: "",
                   onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
                 }, {
-                  default: withCtx(() => [
+                  default: withCtx(() => _cache[6] || (_cache[6] = [
                     createTextVNode("查看修改")
-                  ]),
+                  ])),
                   _: 1
                 })) : createCommentVNode("", true)
               ]),
@@ -5210,14 +5306,14 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             fullscreen: ""
           }, {
             footer: withCtx(() => [
-              createElementVNode("span", _hoisted_4$7, [
+              createElementVNode("span", _hoisted_4$3, [
                 createVNode(unref(TMagicButton), {
                   size: "small",
                   onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
                 }, {
-                  default: withCtx(() => [
+                  default: withCtx(() => _cache[9] || (_cache[9] = [
                     createTextVNode("取消")
-                  ]),
+                  ])),
                   _: 1
                 }),
                 createVNode(unref(TMagicButton), {
@@ -5225,34 +5321,34 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                   type: "primary",
                   onClick: diffChange
                 }, {
-                  default: withCtx(() => [
+                  default: withCtx(() => _cache[10] || (_cache[10] = [
                     createTextVNode("确定")
-                  ]),
+                  ])),
                   _: 1
                 })
               ])
             ]),
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1$p, [
-                createElementVNode("div", _hoisted_2$h, [
+                createElementVNode("div", _hoisted_2$d, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "info"
                   }, {
-                    default: withCtx(() => [
+                    default: withCtx(() => _cache[7] || (_cache[7] = [
                       createTextVNode("修改前")
-                    ]),
+                    ])),
                     _: 1
                   })
                 ]),
-                createElementVNode("div", _hoisted_3$7, [
+                createElementVNode("div", _hoisted_3$3, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "success"
                   }, {
-                    default: withCtx(() => [
+                    default: withCtx(() => _cache[8] || (_cache[8] = [
                       createTextVNode("修改后")
-                    ]),
+                    ])),
                     _: 1
                   })
                 ])
@@ -5277,7 +5373,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$o = { class: "m-editor-data-source-methods" };
-const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
+const _hoisted_2$c = { class: "m-editor-data-source-methods-footer" };
 const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
@@ -5353,7 +5449,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$c, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5361,9 +5457,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             plain: "",
             onClick: createCodeHandler
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[0] || (_cache[0] = [
               createTextVNode("添加")
-            ]),
+            ])),
             _: 1
           }, 8, ["disabled"])
         ]),
@@ -5383,7 +5479,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$n = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$f = { class: "data-source-method-select-container" };
+const _hoisted_2$b = { class: "data-source-method-select-container" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
@@ -5471,7 +5567,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$b, [
           createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
@@ -5515,7 +5611,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$m = { class: "m-editor-data-source-fields" };
-const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
+const _hoisted_2$a = { class: "m-editor-data-source-fields-footer" };
 const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
@@ -5725,7 +5821,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$e, [
+        createElementVNode("div", _hoisted_2$a, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5733,9 +5829,9 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             plain: "",
             onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[4] || (_cache[4] = [
               createTextVNode("添加")
-            ]),
+            ])),
             _: 1
           }, 8, ["disabled"])
         ]),
@@ -5990,7 +6086,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$k = { class: "m-fields-event-select" };
-const _hoisted_2$d = {
+const _hoisted_2$9 = {
   key: 1,
   class: "fullWidth"
 };
@@ -6278,7 +6374,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$9, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -6286,9 +6382,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             disabled: _ctx.disabled,
             onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[1] || (_cache[1] = [
               createTextVNode("添加事件")
-            ]),
+            ])),
             _: 1
           }, 8, ["size", "disabled"]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model[_ctx.name], (cardItem, index) => {
@@ -6334,10 +6430,6 @@ const _hoisted_1$j = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-const _hoisted_4$6 = [
-  _hoisted_2$c
-];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
@@ -6345,14 +6437,15 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$j, _hoisted_4$6);
+      return openBlock(), createElementBlock("svg", _hoisted_1$j, _cache[0] || (_cache[0] = [
+        createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2)
+      ]));
     };
   }
 });
 
 const _hoisted_1$i = { class: "m-fields-key-value" };
-const _hoisted_2$b = { key: 0 };
-const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _hoisted_2$8 = { key: 0 };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
@@ -6412,7 +6505,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -6426,7 +6519,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_3$6,
+              _cache[1] || (_cache[1] = createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1)),
               createVNode(unref(TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -6455,9 +6548,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             icon: unref(Plus),
             onClick: addHandler
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[2] || (_cache[2] = [
               createTextVNode("添加")
-            ]),
+            ])),
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
@@ -6486,7 +6579,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-const _hoisted_2$a = { class: "page-fragment-select-container" };
+const _hoisted_2$7 = { class: "page-fragment-select-container" };
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
@@ -6534,7 +6627,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$a, [
+        createElementVNode("div", _hoisted_2$7, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -6649,9 +6742,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           link: "",
           style: { "padding": "0" }
         }, {
-          default: withCtx(() => [
+          default: withCtx(() => _cache[2] || (_cache[2] = [
             createTextVNode("取消")
-          ]),
+          ])),
           _: 1
         }, 8, ["icon", "disabled", "size"])
       ])) : (openBlock(), createElementBlock("div", _hoisted_1$g, [
@@ -6708,9 +6801,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               size: _ctx.size,
               onClick: startSelect
             }, {
-              default: withCtx(() => [
+              default: withCtx(() => _cache[3] || (_cache[3] = [
                 createTextVNode("点击此处选择")
-              ]),
+              ])),
               _: 1
             }, 8, ["disabled", "size"])
           ]),
@@ -6721,32 +6814,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useGetSo = (target, emit) => {
-  let getso;
-  const isDraging = ref(false);
-  onMounted(() => {
-    if (!target.value) return;
-    getso = new Gesto(target.value, {
-      container: window,
-      pinchOutside: true
-    }).on("drag", (e) => {
-      if (!target.value) return;
-      emit("change", e);
-    }).on("dragStart", () => {
-      isDraging.value = true;
-    }).on("dragEnd", () => {
-      isDraging.value = false;
-    });
-  });
-  onBeforeUnmount(() => {
-    getso?.unset();
-    isDraging.value = false;
-  });
-  return {
-    isDraging
-  };
-};
-
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
@@ -6933,7 +7000,7 @@ const _hoisted_1$f = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
+const _hoisted_2$6 = { class: "el-dropdown-link menubar-menu-button" };
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
@@ -7070,7 +7137,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$9, [
+            createElementVNode("span", _hoisted_2$6, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -7315,8 +7382,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicPopover), {
           "popper-class": "page-bar-popover",
           placement: "top",
+          trigger: "hover",
           width: 160,
-          trigger: "hover"
+          "destroy-on-close": true
         }, {
           reference: withCtx(() => [
             createVNode(unref(TMagicIcon), { class: "m-editor-page-list-menu-icon" }, {
@@ -7394,9 +7462,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
-const _hoisted_2$8 = ["page-id", "onClick"];
-const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
-const _hoisted_4$5 = ["title"];
+const _hoisted_2$5 = ["page-id", "onClick"];
+const _hoisted_3$2 = { class: "m-editor-page-bar-title" };
+const _hoisted_4$2 = ["title"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBar"
@@ -7503,18 +7571,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 "page-id": item.id,
                 onClick: ($event) => switchPage(item.id)
               }, [
-                createElementVNode("div", _hoisted_3$5, [
+                createElementVNode("div", _hoisted_3$2, [
                   renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                     createElementVNode("span", {
                       title: item.name
-                    }, toDisplayString(item.name || item.id), 9, _hoisted_4$5)
+                    }, toDisplayString(item.name || item.id), 9, _hoisted_4$2)
                   ])
                 ]),
                 createVNode(unref(TMagicPopover), {
                   "popper-class": "page-bar-popover",
                   placement: "top",
+                  trigger: "hover",
                   width: 160,
-                  trigger: "hover"
+                  "destroy-on-close": true
                 }, {
                   reference: withCtx(() => [
                     createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
@@ -7548,7 +7617,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_2$8);
+              ], 10, _hoisted_2$5);
             }), 128))
           ]),
           _: 3
@@ -7559,9 +7628,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$b = { class: "m-editor-empty-panel" };
-const _hoisted_2$7 = { class: "m-editor-empty-content" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面片", -1);
+const _hoisted_2$4 = { class: "m-editor-empty-content" };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
@@ -7585,7 +7652,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$7, [
+        createElementVNode("div", _hoisted_2$4, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
@@ -7593,7 +7660,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             createElementVNode("div", null, [
               createVNode(_sfc_main$Y, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$4
+            _cache[2] || (_cache[2] = createElementVNode("p", null, "新增页面", -1))
           ]),
           !_ctx.disabledPageFragment ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -7603,7 +7670,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             createElementVNode("div", null, [
               createVNode(_sfc_main$Y, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_4$4
+            _cache[3] || (_cache[3] = createElementVNode("p", null, "新增页面片", -1))
           ])) : createCommentVNode("", true)
         ])
       ]);
@@ -7676,7 +7743,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     });
     const saveCode = (value) => {
       try {
-        const parseDSL = getConfig("parseDSL");
+        const parseDSL = getEditorConfig("parseDSL");
         editorService?.set("root", parseDSL(value));
       } catch (e) {
         console.error(e);
@@ -8083,6 +8150,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       timer && clearTimeout(timer);
       timer = setTimeout(() => {
         emit("search", filterText.value);
+        timer = null;
       }, 300);
     };
     return (_ctx, _cache) => {
@@ -8110,9 +8178,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$9 = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
-const _hoisted_2$6 = { class: "tree-node-label" };
-const _hoisted_3$3 = { class: "tree-node-tool" };
-const _hoisted_4$3 = {
+const _hoisted_2$3 = { class: "tree-node-label" };
+const _hoisted_3$1 = { class: "tree-node-tool" };
+const _hoisted_4$1 = {
   key: 0,
   class: "m-editor-tree-node-children"
 };
@@ -8126,7 +8194,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     parent: {},
     parentsId: { default: () => [] },
     nodeStatusMap: {},
-    indent: { default: 0 }
+    indent: { default: 0 },
+    nextLevelIndentIncrement: { default: 11 }
   },
   emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
   setup(__props, { emit: __emit }) {
@@ -8200,18 +8269,18 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             onClick: nodeClickHandler
           }, [
             renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-              createElementVNode("div", _hoisted_2$6, [
+              createElementVNode("div", _hoisted_2$3, [
                 renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
                   createTextVNode(toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_3$3, [
+              createElementVNode("div", _hoisted_3$1, [
                 renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
               ])
             ])
           ])
         ], 38),
-        hasChildren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+        hasChildren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
             return openBlock(), createBlock(_component_TreeNode, {
               key: item.id,
@@ -8219,7 +8288,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               parent: _ctx.data,
               parentsId: [..._ctx.parentsId, _ctx.data.id],
               "node-status-map": _ctx.nodeStatusMap,
-              indent: _ctx.indent + 11
+              indent: _ctx.indent + _ctx.nextLevelIndentIncrement
             }, {
               "tree-node-content": withCtx(({ data: nodeData }) => [
                 renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
@@ -8254,6 +8323,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     data: {},
     nodeStatusMap: {},
     indent: { default: 0 },
+    nextLevelIndentIncrement: {},
     emptyText: { default: "暂无数据" }
   },
   emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
@@ -8273,6 +8343,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             key: item.id,
             data: item,
             indent: _ctx.indent,
+            "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
             "node-status-map": _ctx.nodeStatusMap
           }, {
             "tree-node-content": withCtx(({ data: nodeData }) => [
@@ -8285,7 +8356,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
             ]),
             _: 2
-          }, 1032, ["data", "indent", "node-status-map"]);
+          }, 1032, ["data", "indent", "next-level-indent-increment", "node-status-map"]);
         }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$8, [
           createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
         ]))
@@ -8294,82 +8365,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
-  const filterIsMatch = (value, data) => {
-    const string = !Array.isArray(value) ? [value] : value;
-    if (!string.length) {
-      return true;
-    }
-    return string.some((v) => filterNodeMethod(v, data));
-  };
-  const filter = (text) => {
-    if (!nodeData.value.length) return;
-    nodeData.value.forEach((node) => {
-      traverseNode(node, (node2, parents) => {
-        if (!nodeStatusMap.value) return;
-        const visible = filterIsMatch(text, node2);
-        if (visible && parents.length) {
-          parents.forEach((parent) => {
-            updateStatus(nodeStatusMap.value, parent.id, {
-              visible,
-              expand: true
-            });
-          });
-        }
-        updateStatus(nodeStatusMap.value, node2.id, {
-          visible
-        });
-      });
-    });
-  };
-  return {
-    filterText: ref(""),
-    filterTextChangeHandler(text) {
-      filter(text);
-    }
-  };
-};
-
-const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
-  const map = /* @__PURE__ */ new Map();
-  nodeData.forEach(
-    (node) => traverseNode(node, (node2) => {
-      map.set(
-        node2.id,
-        initialLayerNodeStatus?.get(node2.id) || {
-          visible: true,
-          expand: false,
-          selected: false,
-          draggable: false
-        }
-      );
-    })
-  );
-  return map;
-};
-const useNodeStatus$1 = (nodeData) => {
-  const nodeStatusMap = ref(/* @__PURE__ */ new Map());
-  watch(
-    nodeData,
-    (nodeData2) => {
-      nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  );
-  return {
-    nodeStatusMap
-  };
-};
-
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
   __name: "CodeBlockList",
   props: {
+    indent: {},
+    nextLevelIndentIncrement: {},
     customError: { type: Function }
   },
   emits: ["edit", "remove"],
@@ -8463,6 +8466,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$m, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
+        indent: _ctx.indent,
+        "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
         onNodeClick: clickHandler
       }, {
         "tree-node-label": withCtx(({ data }) => [
@@ -8511,7 +8516,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["data", "node-status-map"]);
+      }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment"]);
     };
   }
 });
@@ -8523,6 +8528,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   },
   __name: "CodeBlockListPanel",
   props: {
+    indent: {},
+    nextLevelIndentIncrement: {},
     customError: { type: Function }
   },
   setup(__props) {
@@ -8551,9 +8558,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   size: "small",
                   onClick: unref(createCodeBlock)
                 }, {
-                  default: withCtx(() => [
+                  default: withCtx(() => _cache[0] || (_cache[0] = [
                     createTextVNode("新增")
-                  ]),
+                  ])),
                   _: 1
                 }, 8, ["onClick"])) : createCommentVNode("", true),
                 renderSlot(_ctx.$slots, "code-block-panel-search")
@@ -8563,6 +8570,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
+              indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
               onEdit: unref(editCode),
               onRemove: unref(deleteCode)
             }, {
@@ -8573,7 +8582,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 3
-            }, 8, ["custom-error", "onEdit", "onRemove"])
+            }, 8, ["custom-error", "indent", "next-level-indent-increment", "onEdit", "onRemove"])
           ]),
           _: 3
         }),
@@ -8701,6 +8710,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     name: "MEditorDataSourceList"
   },
   __name: "DataSourceList",
+  props: {
+    indent: {},
+    nextLevelIndentIncrement: {}
+  },
   emits: ["edit", "remove"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
@@ -8796,6 +8809,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$m, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
+        indent: _ctx.indent,
+        "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
         onNodeClick: clickHandler
       }, {
         "tree-node-label": withCtx(({ data }) => [
@@ -8841,18 +8856,21 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
         ]),
         _: 3
-      }, 8, ["data", "node-status-map"]);
+      }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment"]);
     };
   }
 });
 
 const _hoisted_1$6 = { class: "search-wrapper" };
-const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
   __name: "DataSourceListPanel",
+  props: {
+    indent: {},
+    nextLevelIndentIncrement: {}
+  },
   setup(__props) {
     const eventBus = inject("eventBus");
     const { dataSourceService } = inject("services") || {};
@@ -8896,34 +8914,35 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               unref(editable) ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
-                placement: "right"
+                placement: "right",
+                trigger: "hover",
+                "popper-class": "data-source-list-panel-add-menu",
+                "destroy-on-close": true
               }, {
                 reference: withCtx(() => [
                   createVNode(unref(TMagicButton), {
                     type: "primary",
                     size: "small"
                   }, {
-                    default: withCtx(() => [
+                    default: withCtx(() => _cache[0] || (_cache[0] = [
                       createTextVNode("新增")
-                    ]),
+                    ])),
                     _: 1
                   })
                 ]),
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_2$5, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$y, {
-                        data: {
-                          type: "button",
-                          text: item.text,
-                          handler: () => {
-                            addHandler(item.type);
-                          }
-                        },
-                        key: index
-                      }, null, 8, ["data"]);
-                    }), 128))
-                  ])
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
+                    return openBlock(), createBlock(_sfc_main$y, {
+                      data: {
+                        type: "button",
+                        text: item.text,
+                        handler: () => {
+                          addHandler(item.type);
+                        }
+                      },
+                      key: index
+                    }, null, 8, ["data"]);
+                  }), 128))
                 ]),
                 _: 1
               })) : createCommentVNode("", true),
@@ -8932,9 +8951,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$i, {
               ref_key: "dataSourceList",
               ref: dataSourceList,
+              indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
               onEdit: unref(editHandler),
               onRemove: removeHandler
-            }, null, 8, ["onEdit"])
+            }, null, 8, ["indent", "next-level-indent-increment", "onEdit"])
           ]),
           _: 3
         }),
@@ -9124,18 +9145,6 @@ const _hoisted_1$5 = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
-}, null, -1);
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
-}, null, -1);
-const _hoisted_4$2 = [
-  _hoisted_2$4,
-  _hoisted_3$2
-];
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
@@ -9143,7 +9152,16 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$5, _hoisted_4$2);
+      return openBlock(), createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
+        createElementVNode("path", {
+          "fill-rule": "evenodd",
+          d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
+        }, null, -1),
+        createElementVNode("path", {
+          "fill-rule": "evenodd",
+          d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
+        }, null, -1)
+      ]));
     };
   }
 });
@@ -9182,8 +9200,8 @@ const usePasteMenu = (menu) => ({
       const stage = services?.editorService?.get("stage");
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
-      const initialLeft = calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
-      const initialTop = calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
+      const initialLeft = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+      const initialTop = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {
       services?.editorService?.paste();
@@ -9828,6 +9846,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "LayerPanel",
   props: {
     layerContentMenu: {},
+    indent: {},
+    nextLevelIndentIncrement: {},
     customContentMenu: { type: Function }
   },
   setup(__props) {
@@ -9877,6 +9897,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             ref: tree,
             data: nodeData.value,
             "node-status-map": unref(nodeStatusMap),
+            indent: _ctx.indent,
+            "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
             onNodeDragover: unref(handleDragOver),
             onNodeDragstart: unref(handleDragStart),
             onNodeDragleave: unref(handleDragLeave),
@@ -9897,7 +9919,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData2 })
             ]),
             _: 3
-          }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
+          }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             createVNode(_sfc_main$e, {
               ref_key: "menu",
@@ -9915,7 +9937,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$4 = ["onClick", "onDragstart"];
-const _hoisted_2$3 = ["title"];
+const _hoisted_2$2 = ["title"];
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
@@ -9966,7 +9988,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         globalThis.clearTimeout(timeout);
         timeout = void 0;
       }
-      const doc = stage.value?.renderer.getDocument();
+      const doc = stage.value?.renderer?.getDocument();
       if (doc && stageOptions?.containerHighlightClassName) {
         removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
       }
@@ -10033,7 +10055,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                               }, 1032, ["disabled", "content"]),
                               createElementVNode("span", {
                                 title: item.text
-                              }, toDisplayString(item.text), 9, _hoisted_2$3)
+                              }, toDisplayString(item.text), 9, _hoisted_2$2)
                             ])
                           ], 40, _hoisted_1$4);
                         }), 128))
@@ -10057,13 +10079,13 @@ const _hoisted_1$3 = {
   key: 0,
   class: "m-editor-sidebar"
 };
-const _hoisted_2$2 = { class: "m-editor-sidebar-header" };
-const _hoisted_3$1 = ["draggable", "onClick", "onDragend"];
-const _hoisted_4$1 = {
+const _hoisted_2$1 = { class: "m-editor-sidebar-header" };
+const _hoisted_3 = ["draggable", "onClick", "onDragend"];
+const _hoisted_4 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-const _hoisted_5$1 = { class: "m-editor-slide-list-box" };
+const _hoisted_5 = { class: "m-editor-slide-list-box" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSidebar"
@@ -10076,13 +10098,30 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE]
     }) },
     layerContentMenu: {},
+    indent: {},
+    nextLevelIndentIncrement: {},
     customContentMenu: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const columnLeftWidth = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
-    const { height: columnLeftHeight } = useEditorContentHeight();
+    const { height: editorContentHeight } = useEditorContentHeight();
+    const columnLeftHeight = ref(0);
+    const unWatchEditorContentHeight = watch(
+      editorContentHeight,
+      (height) => {
+        if (height) {
+          columnLeftHeight.value = height * 0.5;
+          nextTick().then(() => {
+            unWatchEditorContentHeight();
+          });
+        }
+      },
+      {
+        immediate: true
+      }
+    );
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -10101,7 +10140,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           text: "已选组件",
           props: {
             layerContentMenu: props.layerContentMenu,
-            customContentMenu: props.customContentMenu
+            customContentMenu: props.customContentMenu,
+            indent: props.indent,
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement
           },
           component: _sfc_main$c,
           slots: {}
@@ -10112,6 +10153,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           icon: EditPen,
           text: "代码编辑",
           component: _sfc_main$k,
+          props: {
+            indent: props.indent,
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement
+          },
           slots: {}
         },
         [SideItemKey.DATA_SOURCE]: {
@@ -10120,6 +10165,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           icon: Coin,
           text: "数据源",
           component: _sfc_main$h,
+          props: {
+            indent: props.indent,
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement
+          },
           slots: {}
         }
       };
@@ -10174,7 +10223,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-          createElementVNode("div", _hoisted_2$2, [
+          createElementVNode("div", _hoisted_2$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
               return withDirectives((openBlock(), createElementBlock("div", {
                 class: normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
@@ -10190,8 +10239,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
-                config.text ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(config.text), 1)) : createCommentVNode("", true)
-              ], 46, _hoisted_3$1)), [
+                config.text ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+              ], 46, _hoisted_3)), [
                 [vShow, !unref(floatBoxStates)[config.$key]?.status]
               ]);
             }), 128))
@@ -10336,8 +10385,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
-                height: unref(columnLeftHeight),
-                "onUpdate:height": _cache[1] || (_cache[1] = ($event) => isRef(columnLeftHeight) ? columnLeftHeight.value = $event : null),
+                height: columnLeftHeight.value,
+                "onUpdate:height": _cache[1] || (_cache[1] = ($event) => columnLeftHeight.value = $event),
                 width: columnLeftWidth.value,
                 title: config.text,
                 position: {
@@ -10346,7 +10395,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 }
               }, {
                 body: withCtx(() => [
-                  createElementVNode("div", _hoisted_5$1, [
+                  createElementVNode("div", _hoisted_5, [
                     config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
                       key: 0,
                       ref_for: true
@@ -10577,7 +10626,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         if (!stage2) return;
         nextTick(() => unWatch());
         stage2.on("select", (el, event) => {
-          const els = stage2.renderer.getElementsFromPoint(event) || [];
+          const els = stage2.renderer?.getElementsFromPoint(event) || [];
           const ids = els.map((el2) => getIdFromEl()(el2)).filter((id) => Boolean(id));
           buttonVisible.value = ids.length > 3;
           filterTextChangeHandler(ids);
@@ -10676,7 +10725,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     watch(stage, (stage2) => {
       if (stage2) {
         stage2.on("dblclick", async (event) => {
-          const el = await stage2.actionManager.getElementFromPoint(event);
+          const el = await stage2.actionManager?.getElementFromPoint(event) || null;
           services?.stageOverlayService.openOverlay(el);
         });
       } else {
@@ -10691,11 +10740,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         subStage.mount(stageOverlay2);
         const { mask, renderer } = subStage;
         const { contentWindow } = renderer;
-        mask.showRule(false);
+        mask?.showRule(false);
         services?.stageOverlayService.updateOverlay();
         contentWindow?.magic.onRuntimeReady({});
       }
     });
+    onBeforeUnmount(() => {
+      services?.stageOverlayService.get("stage")?.destroy();
+      services?.stageOverlayService.set("stage", null);
+    });
     const closeOverlayHandler = () => {
       services?.stageOverlayService.closeOverlay();
     };
@@ -10733,32 +10786,6 @@ const _hoisted_1$2 = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M2 4H21V6H2V4Z",
-  fill: "black",
-  "fill-opacity": "0.9"
-}, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M5 11H18V13H5V11Z",
-  fill: "black",
-  "fill-opacity": "0.9"
-}, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M2 18H21V20H2V18Z",
-  fill: "black",
-  "fill-opacity": "0.9"
-}, null, -1);
-const _hoisted_5 = [
-  _hoisted_2$1,
-  _hoisted_3,
-  _hoisted_4
-];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCenterIcon"
@@ -10766,7 +10793,29 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "CenterIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_5);
+      return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
+        createElementVNode("path", {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          d: "M2 4H21V6H2V4Z",
+          fill: "black",
+          "fill-opacity": "0.9"
+        }, null, -1),
+        createElementVNode("path", {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          d: "M5 11H18V13H5V11Z",
+          fill: "black",
+          "fill-opacity": "0.9"
+        }, null, -1),
+        createElementVNode("path", {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          d: "M2 18H21V20H2V18Z",
+          fill: "black",
+          "fill-opacity": "0.9"
+        }, null, -1)
+      ]));
     };
   }
 });
@@ -10947,6 +10996,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         });
       });
     });
+    onBeforeUnmount(() => {
+      stage?.destroy();
+    });
     watch(zoom, (zoom2) => {
       if (!stage || !zoom2) return;
       stage.setZoom(zoom2);
@@ -10987,7 +11039,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       services?.keybindingService.unregisterEl("stage");
       services?.editorService.off("root-change", rootChangeHandler);
     });
-    const parseDSL = getConfig("parseDSL");
+    const parseDSL = getEditorConfig("parseDSL");
     const contextmenuHandler = (e) => {
       e.preventDefault();
       menu.value?.show(e);
@@ -11004,7 +11056,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const config = parseDSL(`(${data})`);
       if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
       e.preventDefault();
-      const doc = stage?.renderer.contentWindow?.document;
+      const doc = stage?.renderer?.contentWindow?.document;
       const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
       let parent = page.value;
       const parentId = getIdFromEl()(parentEl);
@@ -11238,7 +11290,7 @@ class CodeBlock extends BaseService {
     if (codeDsl[id] && !force) return;
     const codeConfigProcessed = cloneDeep(codeConfig);
     if (codeConfigProcessed.content) {
-      const parseDSL = getConfig("parseDSL");
+      const parseDSL = getEditorConfig("parseDSL");
       if (typeof codeConfigProcessed.content === "string") {
         codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
       }
@@ -11947,6 +11999,10 @@ class StageOverlay extends BaseService {
     const subStage = this.get("stage");
     const wrapDiv = this.get("wrapDiv");
     subStage?.destroy();
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
     wrapDiv.remove();
     this.set("stage", null);
     this.set("sourceEl", null);
@@ -11972,7 +12028,7 @@ class StageOverlay extends BaseService {
       autoScrollIntoView: false,
       render: async (stage) => {
         this.copyDocumentElement();
-        const rootEls = stage.renderer.getDocument()?.body.children;
+        const rootEls = stage.renderer?.getDocument()?.body.children;
         if (rootEls) {
           Array.from(rootEls).forEach((element) => {
             if (["SCRIPT", "STYLE"].includes(element.tagName)) {
@@ -12001,8 +12057,8 @@ class StageOverlay extends BaseService {
   copyDocumentElement() {
     const subStage = this.get("stage");
     const stage = editorService.get("stage");
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage?.renderer.getDocument()?.documentElement;
+    const doc = subStage?.renderer?.getDocument();
+    const documentElement = stage?.renderer?.getDocument()?.documentElement;
     if (doc && documentElement) {
       doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
     }
@@ -12020,12 +12076,13 @@ class StageOverlay extends BaseService {
       height: ${sourceEl?.scrollHeight}px;
       background-color: #fff;
     `;
-    Array.from(wrapDiv.children).forEach((element) => {
-      element.remove();
-    });
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
     wrapDiv.appendChild(contentEl);
     setTimeout(() => {
-      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+      subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
     if (await stageOptions?.canSelect?.(contentEl)) {
       const id = getIdFromEl()(contentEl);
@@ -12265,7 +12322,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   };
   const getApp = () => {
     const stage = editorService.get("stage");
-    return stage?.renderer.runtime?.getApp?.();
+    return stage?.renderer?.runtime?.getApp?.();
   };
   const updateDataSourceSchema = () => {
     const root = editorService.get("root");
@@ -12298,7 +12355,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       delete root.dataSourceCondDeps[id];
     }
   };
-  const collectedHandler = (nodes, deep) => {
+  const collectedHandler = debounce((nodes, deep) => {
     const root = editorService.get("root");
     const stage = editorService.get("stage");
     if (!root || !stage) return;
@@ -12333,7 +12390,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
         });
       });
     });
-  };
+  }, 300);
   depService.on("add-target", targetAddHandler);
   depService.on("remove-target", targetRemoveHandler);
   depService.on("collected", collectedHandler);
@@ -12457,6 +12514,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabledPageFragment: { type: Boolean },
     disabledStageOverlay: { type: Boolean },
     disabledShowSrc: { type: Boolean },
+    treeIndent: {},
+    treeNextLevelIndentIncrement: {},
     render: { type: Function },
     updateDragEl: { type: Function },
     canSelect: { type: Function },
@@ -12533,7 +12592,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$a, {
               data: _ctx.sidebar,
               "layer-content-menu": _ctx.layerContentMenu,
-              "custom-content-menu": _ctx.customContentMenu
+              "custom-content-menu": _ctx.customContentMenu,
+              indent: _ctx.treeIndent,
+              "next-level-indent-increment": _ctx.treeNextLevelIndentIncrement
             }, {
               "layer-panel-header": withCtx(() => [
                 renderSlot(_ctx.$slots, "layer-panel-header")
@@ -12575,7 +12636,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "data-source-panel-search")
               ]),
               _: 3
-            }, 8, ["data", "layer-content-menu", "custom-content-menu"])
+            }, 8, ["data", "layer-content-menu", "custom-content-menu", "indent", "next-level-indent-increment"])
           ])
         ]),
         workspace: withCtx(() => [
@@ -12645,8 +12706,11 @@ const defaultInstallOpt = {
 const index = {
   install: (app, opt) => {
     const option = Object.assign(defaultInstallOpt, opt || {});
+    app.use(designPlugin__default, opt || {});
+    app.use(formPlugin__default, opt || {});
+    app.use(tablePlugin__default);
     app.config.globalProperties.$TMAGIC_EDITOR = option;
-    setConfig(option);
+    setEditorConfig(option);
     app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
     app.component("magic-code-editor", _sfc_main$X);
     app.component("m-fields-ui-select", _sfc_main$B);
@@ -12669,4 +12733,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, updateStatus, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };