@tmagic/editor 1.4.0-beta.1 → 1.4.0

package/dist/tmagic-editor.js

@@ -1,23 +1,67 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, watchEffect, nextTick, renderSlot, toDisplayString, createCommentVNode, Fragment, createTextVNode, toRaw, resolveDynamicComponent, mergeProps, renderList, createStaticVNode, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, mergeDefaults } from 'vue';
-import { FullScreen, Close, Edit, View, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createCommentVNode, watchEffect, Fragment, isRef, createTextVNode, mergeProps, renderList, createStaticVNode, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, Transition, mergeDefaults } from 'vue';
+import { Edit, FullScreen, Close, View, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Files, 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 serialize from 'serialize-javascript';
-import { TMagicButton, TMagicCard, useZIndex, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import { TMagicIcon, TMagicButton, TMagicCard, useZIndex, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, 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 { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
-import { MFormBox, MForm, filterFunction, createValues, MFormDrawer, MCascader, MSelect } from '@tmagic/form';
+import { MFormBox, MForm, filterFunction, createValues, MCascader, MSelect } from '@tmagic/form';
 import VanillaMoveable from 'moveable';
 import { MagicTable } from '@tmagic/table';
-import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, getValueByKeyPath, setValueByKeyPath, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
-import Gesto from 'gesto';
+import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
+import Gesto from 'gesto';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
+const _hoisted_1$t = ["src"];
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorIcon"
+  },
+  __name: "Icon",
+  props: {
+    icon: {}
+  },
+  setup(__props) {
+    const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
+    return (_ctx, _cache) => {
+      return !_ctx.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 0,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Edit))
+        ]),
+        _: 1
+      })) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 1,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$t)
+        ]),
+        _: 1
+      })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+        key: 2,
+        class: normalizeClass(["magic-editor-icon", _ctx.icon])
+      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 3,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(toRaw(_ctx.icon))))
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+
 let $TMAGIC_EDITOR = {};
 const setConfig = (option) => {
   $TMAGIC_EDITOR = option;
@@ -27,10 +71,10 @@ const getConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$u = {
+const _hoisted_1$s = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -188,7 +232,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -201,9 +245,13 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
               class: "magic-code-editor-full-screen-icon",
               circle: "",
               size: "small",
-              icon: unref(FullScreen),
               onClick: fullScreenHandler
-            }, null, 8, ["icon"]),
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$U, { icon: unref(FullScreen) }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }),
             createElementVNode("div", {
               ref_key: "codeEditor",
               ref: codeEditor,
@@ -216,7 +264,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsVsCode"
   },
@@ -241,7 +289,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$U, {
+      return openBlock(), createBlock(_sfc_main$T, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -256,7 +304,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeLink"
   },
@@ -336,7 +384,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelect"
   },
@@ -454,40 +502,54 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$t = { class: "m-editor-float-box-body" };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
-  props: {
-    visible: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     position: { default: () => ({ left: 0, top: 0 }) },
-    rect: { default: () => ({ width: "auto", height: "auto" }) },
     title: { default: "" },
     beforeClose: {}
-  },
-  emits: ["update:visible"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  }, {
+    "width": { default: 0 },
+    "widthModifiers": {},
+    "height": { default: 0 },
+    "heightModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: ["update:width", "update:height", "update:visible"],
+  setup(__props, { expose: __expose }) {
+    const width = useModel(__props, "width");
+    const height = useModel(__props, "height");
+    const visible = useModel(__props, "visible");
     const props = __props;
-    const emit = __emit;
     const target = ref();
-    const dragTarget = ref();
+    const titleEl = ref();
     const zIndex = useZIndex();
-    const curZIndex = ref(zIndex.nextZIndex());
-    const rect = ref({
-      width: props.rect.width,
-      height: props.rect.height
+    const curZIndex = ref(0);
+    const titleHeight = ref(0);
+    const bodyHeight = computed(() => {
+      if (height.value) {
+        return height.value - titleHeight.value;
+      }
+      if (target.value) {
+        return target.value.clientHeight - titleHeight.value;
+      }
+      return "auto";
     });
-    watchEffect(() => {
-      rect.value = {
-        width: props.rect.width,
-        height: props.rect.height
+    const services = inject("services");
+    const frameworkWidth = computed(() => services?.uiService.get("frameworkRect").width || 0);
+    const style = computed(() => {
+      let { left } = props.position;
+      if (width.value) {
+        left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+      }
+      return {
+        left: `${left}px`,
+        top: `${props.position.top}px`,
+        width: width.value ? `${width.value}px` : "auto",
+        height: height.value ? `${height.value}px` : "auto"
       };
     });
-    const style = computed(() => ({
-      left: `${props.position.left}px`,
-      top: `${props.position.top}px`,
-      width: typeof rect.value.width === "string" ? rect.value.width : `${rect.value.width}px`,
-      height: typeof rect.value.height === "string" ? rect.value.height : `${rect.value.height}px`
-    }));
     let moveable = null;
     const initMoveable = () => {
       moveable = new VanillaMoveable(globalThis.document.body, {
@@ -499,7 +561,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         keepRatio: false,
         origin: false,
         snappable: true,
-        dragTarget: dragTarget.value,
+        dragTarget: titleEl.value,
         dragTargetSelf: false,
         linePadding: 10,
         controlPadding: 10,
@@ -509,8 +571,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         e.target.style.transform = e.transform;
       });
       moveable.on("resize", (e) => {
-        rect.value.width = e.width;
-        rect.value.height = e.height;
+        width.value = e.width;
+        height.value = e.height;
         e.target.style.width = `${e.width}px`;
         e.target.style.height = `${e.height}px`;
         e.target.style.transform = e.drag.transform;
@@ -521,11 +583,21 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       moveable = null;
     };
     watch(
-      () => props.visible,
-      async (visible) => {
-        if (visible) {
+      visible,
+      async (visible2) => {
+        if (visible2) {
           await nextTick();
-          initMoveable();
+          curZIndex.value = zIndex.nextZIndex();
+          const targetRect = target.value?.getBoundingClientRect();
+          if (targetRect) {
+            width.value = targetRect.width;
+            height.value = targetRect.height;
+            initMoveable();
+          }
+          if (titleEl.value) {
+            const titleRect = titleEl.value.getBoundingClientRect();
+            titleHeight.value = titleRect.height;
+          }
         } else {
           destroyMoveable();
         }
@@ -539,7 +611,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     });
     const hide = (cancel) => {
       if (cancel !== false) {
-        emit("update:visible", false);
+        visible.value = false;
       }
     };
     const closeHandler = () => {
@@ -552,11 +624,14 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const nextZIndex = () => {
       curZIndex.value = zIndex.nextZIndex();
     };
+    provide("parentFloating", target);
     __expose({
-      target
+      bodyHeight,
+      target,
+      titleEl
     });
     return (_ctx, _cache) => {
-      return _ctx.visible ? (openBlock(), createBlock(Teleport, {
+      return visible.value ? (openBlock(), createBlock(Teleport, {
         key: 0,
         to: "body"
       }, [
@@ -568,8 +643,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           onMousedown: nextZIndex
         }, [
           createElementVNode("div", {
-            ref_key: "dragTarget",
-            ref: dragTarget,
+            ref_key: "titleEl",
+            ref: titleEl,
             class: "m-editor-float-box-title"
           }, [
             renderSlot(_ctx.$slots, "title", {}, () => [
@@ -579,63 +654,120 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
               createVNode(unref(TMagicButton), {
                 link: "",
                 size: "small",
-                icon: unref(Close),
                 onClick: closeHandler
-              }, null, 8, ["icon"])
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$U, { icon: unref(Close) }, null, 8, ["icon"])
+                ]),
+                _: 1
+              })
             ])
           ], 512),
-          createElementVNode("div", _hoisted_1$t, [
+          createElementVNode("div", {
+            class: "m-editor-float-box-body",
+            style: normalizeStyle({ height: `${bodyHeight.value}px` })
+          }, [
             renderSlot(_ctx.$slots, "body")
-          ])
+          ], 4)
         ], 36)
       ])) : createCommentVNode("", true);
     };
   }
 });
 
-const _hoisted_1$s = { style: { "display": "flex", "margin-bottom": "10px" } };
+const useEditorContentHeight = () => {
+  const services = inject("services");
+  const frameworkHeight = computed(() => services?.uiService.get("frameworkRect").height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get("navMenuRect").height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+  const height = ref(0);
+  watchEffect(() => {
+    if (height.value > 0 && height.value === editorContentHeight.value)
+      return;
+    height.value = editorContentHeight.value;
+  });
+  return {
+    height
+  };
+};
+
+const useNextFloatBoxPosition = (uiService, parent) => {
+  const boxPosition = ref({
+    left: 0,
+    top: 0
+  });
+  const calcBoxPosition = () => {
+    const columnWidth = uiService?.get("columnWidth");
+    const navMenuRect = uiService?.get("navMenuRect");
+    let left = columnWidth?.left ?? 0;
+    if (parent?.value) {
+      const rect = parent?.value?.getBoundingClientRect();
+      left = (rect?.left ?? 0) + (rect?.width ?? 0);
+    }
+    boxPosition.value = {
+      left,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
+    };
+  };
+  return {
+    boxPosition,
+    calcBoxPosition
+  };
+};
+
+const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+  globalThis.addEventListener("resize", windowResizeHandler);
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener("resize", windowResizeHandler);
+  });
+  return {
+    rect
+  };
+};
+
+const _hoisted_1$r = { style: { "display": "flex", "margin-bottom": "10px" } };
 const _hoisted_2$k = { style: { "flex": "1" } };
 const _hoisted_3$8 = { style: { "flex": "1" } };
 const _hoisted_4$7 = { class: "dialog-footer" };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
   __name: "CodeBlockEditor",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     content: {},
     disabled: { type: Boolean },
     isDataSource: { type: Boolean },
-    dataSourceType: {},
-    slideType: {}
-  },
-  emits: ["submit"],
+    dataSourceType: {}
+  }, {
+    "width": { default: 670 },
+    "widthModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:width", "update:visible"]),
   setup(__props, { expose: __expose, emit: __emit }) {
+    const width = useModel(__props, "width");
+    const boxVisible = useModel(__props, "visible");
     const props = __props;
     const emit = __emit;
     const services = inject("services");
+    const { height: codeBlockEditorHeight } = useEditorContentHeight();
     const difVisible = ref(false);
-    const height = ref(globalThis.innerHeight);
-    const windowReizehandler = () => {
-      height.value = globalThis.innerHeight;
-    };
-    globalThis.addEventListener("resize", windowReizehandler);
-    onBeforeUnmount(() => {
-      globalThis.removeEventListener("resize", windowReizehandler);
-    });
+    const { rect: windowRect } = useWindowRect();
     const magicVsEditor = ref();
     const diffChange = () => {
-      if (!magicVsEditor.value || !fomDrawer.value?.form) {
+      if (!magicVsEditor.value || !formBox.value?.form) {
         return;
       }
-      fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue();
+      formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
       difVisible.value = false;
     };
-    const columnWidth = computed(() => services?.uiService.get("columnWidth"));
-    const size = computed(
-      () => columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600
-    );
-    const codeEditorHeight = ref("600px");
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -718,7 +850,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         name: "content",
         type: "vs-code",
         options: inject("codeOptions", {}),
-        height: codeEditorHeight.value,
+        height: "500px",
         onChange: (formState, code) => {
           try {
             getConfig("parseDSL")(code);
@@ -731,20 +863,13 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       }
     ]);
     const submitForm = (values) => {
+      changedValue.value = void 0;
       emit("submit", values);
     };
     const errorHandler = (error) => {
       tMagicMessage.error(error.message);
     };
-    const fomDrawer = ref();
-    const openHandler = () => {
-      setTimeout(() => {
-        if (fomDrawer.value) {
-          const height2 = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
-          codeEditorHeight.value = `${height2 > 100 ? height2 : 600}px`;
-        }
-      });
-    };
+    const formBox = ref();
     const changedValue = ref();
     const changeHandler = (values) => {
       changedValue.value = values;
@@ -769,151 +894,134 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const closedHandler = () => {
       changedValue.value = void 0;
     };
-    const boxVisible = ref(false);
-    const editVisible = ref(false);
-    const floatingBoxBody = ref();
-    const boxPosition = computed(() => {
-      const columnWidth2 = services?.uiService?.get("columnWidth");
-      const navMenuRect = services?.uiService?.get("navMenuRect");
-      return {
-        left: columnWidth2?.left ?? 0,
-        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
-      };
-    });
+    const parentFloating = inject("parentFloating", ref(null));
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     __expose({
       async show() {
-        if (props.slideType !== "box") {
-          boxVisible.value = true;
-        }
-        await nextTick();
-        editVisible.value = true;
-        fomDrawer.value?.show();
+        calcBoxPosition();
+        boxVisible.value = true;
       },
-      hide() {
-        fomDrawer.value?.hide();
+      async hide() {
+        boxVisible.value = false;
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$Q, {
+        createVNode(_sfc_main$P, {
           visible: boxVisible.value,
-          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
-          title: "代码编辑",
-          position: boxPosition.value,
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
+          width: width.value,
+          "onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
+          height: unref(codeBlockEditorHeight),
+          "onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+          title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
+          position: unref(boxPosition),
           "before-close": beforeClose
         }, {
           body: withCtx(() => [
-            createElementVNode("div", {
-              ref_key: "floatingBoxBody",
-              ref: floatingBoxBody
-            }, null, 512)
+            createVNode(unref(MFormBox), {
+              class: "m-editor-code-block-editor",
+              ref_key: "formBox",
+              ref: formBox,
+              "label-width": "80px",
+              "close-on-press-escape": false,
+              title: _ctx.content.name,
+              config: functionConfig.value,
+              values: _ctx.content,
+              disabled: _ctx.disabled,
+              style: { "height": "100%" },
+              onChange: changeHandler,
+              onSubmit: submitForm,
+              onError: errorHandler,
+              onClosed: closedHandler
+            }, {
+              left: withCtx(() => [
+                !_ctx.disabled ? (openBlock(), createBlock(unref(TMagicButton), {
+                  key: 0,
+                  type: "primary",
+                  link: "",
+                  onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("查看修改")
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["title", "config", "values", "disabled"])
           ]),
           _: 1
-        }, 8, ["visible", "position"]),
-        editVisible.value ? (openBlock(), createBlock(Teleport, {
-          key: 0,
-          to: floatingBoxBody.value,
-          disabled: _ctx.slideType === "box"
-        }, [
-          createVNode(unref(MFormBox), {
-            class: "m-editor-code-block-editor",
-            ref_key: "fomDrawer",
-            ref: fomDrawer,
-            "label-width": "80px",
-            "close-on-press-escape": false,
-            title: _ctx.content.name,
-            width: size.value,
-            config: functionConfig.value,
-            values: _ctx.content,
-            disabled: _ctx.disabled,
-            onChange: changeHandler,
-            onSubmit: submitForm,
-            onError: errorHandler,
-            onOpen: openHandler,
-            onClosed: closedHandler
+        }, 8, ["visible", "width", "height", "title", "position"]),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(unref(TMagicDialog), {
+            title: "查看修改",
+            modelValue: difVisible.value,
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
+            fullscreen: ""
           }, {
-            left: withCtx(() => [
-              createVNode(unref(TMagicButton), {
-                type: "primary",
-                link: "",
-                onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = true)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("查看修改")
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }, 8, ["title", "width", "config", "values", "disabled"])
-        ], 8, ["to", "disabled"])) : createCommentVNode("", true),
-        createVNode(unref(TMagicDialog), {
-          modelValue: difVisible.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => difVisible.value = $event),
-          title: "查看修改",
-          fullscreen: ""
-        }, {
-          footer: withCtx(() => [
-            createElementVNode("span", _hoisted_4$7, [
-              createVNode(unref(TMagicButton), {
-                size: "small",
-                onClick: _cache[2] || (_cache[2] = ($event) => difVisible.value = false)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("取消")
-                ]),
-                _: 1
-              }),
-              createVNode(unref(TMagicButton), {
-                size: "small",
-                type: "primary",
-                onClick: diffChange
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("确定")
-                ]),
-                _: 1
-              })
-            ])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$s, [
-              createElementVNode("div", _hoisted_2$k, [
-                createVNode(unref(TMagicTag), {
+            footer: withCtx(() => [
+              createElementVNode("span", _hoisted_4$7, [
+                createVNode(unref(TMagicButton), {
                   size: "small",
-                  type: "info"
+                  onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
                 }, {
                   default: withCtx(() => [
-                    createTextVNode("修改前")
+                    createTextVNode("取消")
                   ]),
                   _: 1
-                })
-              ]),
-              createElementVNode("div", _hoisted_3$8, [
-                createVNode(unref(TMagicTag), {
+                }),
+                createVNode(unref(TMagicButton), {
                   size: "small",
-                  type: "success"
+                  type: "primary",
+                  onClick: diffChange
                 }, {
                   default: withCtx(() => [
-                    createTextVNode("修改后")
+                    createTextVNode("确定")
                   ]),
                   _: 1
                 })
               ])
             ]),
-            difVisible.value ? (openBlock(), createBlock(_sfc_main$U, {
-              key: 0,
-              ref_key: "magicVsEditor",
-              ref: magicVsEditor,
-              type: "diff",
-              language: "json",
-              initValues: _ctx.content.content,
-              modifiedValues: fomDrawer.value?.form?.values.content,
-              style: normalizeStyle(`height: ${height.value - 200}px`)
-            }, null, 8, ["initValues", "modifiedValues", "style"])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["modelValue"])
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1$r, [
+                createElementVNode("div", _hoisted_2$k, [
+                  createVNode(unref(TMagicTag), {
+                    size: "small",
+                    type: "info"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("修改前")
+                    ]),
+                    _: 1
+                  })
+                ]),
+                createElementVNode("div", _hoisted_3$8, [
+                  createVNode(unref(TMagicTag), {
+                    size: "small",
+                    type: "success"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("修改后")
+                    ]),
+                    _: 1
+                  })
+                ])
+              ]),
+              difVisible.value ? (openBlock(), createBlock(_sfc_main$T, {
+                key: 0,
+                ref_key: "magicVsEditor",
+                ref: magicVsEditor,
+                type: "diff",
+                language: "json",
+                initValues: _ctx.content.content,
+                modifiedValues: formBox.value?.form?.values.content,
+                style: normalizeStyle(`height: ${unref(windowRect).height - 150}px`)
+              }, null, 8, ["initValues", "modifiedValues", "style"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]))
       ], 64);
     };
   }
@@ -3589,7 +3697,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3639,50 +3747,6 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$r = ["src"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorIcon"
-  },
-  __name: "Icon",
-  props: {
-    icon: {}
-  },
-  setup(__props) {
-    const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
-    return (_ctx, _cache) => {
-      return !_ctx.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 0,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(Edit))
-        ]),
-        _: 1
-      })) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 1,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$r)
-        ]),
-        _: 1
-      })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
-        key: 2,
-        class: normalizeClass(["magic-editor-icon", _ctx.icon])
-      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 3,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(toRaw(_ctx.icon))))
-        ]),
-        _: 1
-      }));
-    };
-  }
-});
-
 const useCodeBlockEdit = (codeBlockService) => {
   const codeConfig = ref();
   const codeId = ref();
@@ -3693,7 +3757,7 @@ const useCodeBlockEdit = (codeBlockService) => {
       return;
     }
     codeConfig.value = {
-      name: "代码块",
+      name: "",
       content: `({app, params}) => {
   // place your code here
 }`,
@@ -3829,14 +3893,14 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$U, {
             key: 0,
             class: "icon",
             icon: !notEditable.value ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$N, {
           name: "params",
           key: _ctx.model[_ctx.name],
           model: _ctx.model,
@@ -3844,7 +3908,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3857,37 +3921,381 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = { class: "m-editor-data-source-fields" };
-const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MFieldsDataSourceFields"
-  },
-  __name: "DataSourceFields",
-  props: {
-    config: {},
-    model: {},
-    initValues: {},
-    values: {},
-    name: {},
-    prop: {},
-    disabled: { type: Boolean, default: false },
-    size: {},
-    lastValues: {}
+const useDataSourceMethod = () => {
+  const codeConfig = ref();
+  const codeBlockEditor = ref();
+  const dataSource = ref();
+  const dataSourceMethod = ref("");
+  return {
+    codeConfig,
+    codeBlockEditor,
+    createCode: async (model) => {
+      codeConfig.value = {
+        name: "",
+        content: `({ params, dataSource, app }) => {
+  // place your code here
+}`,
+        params: []
+      };
+      await nextTick();
+      dataSource.value = model;
+      dataSourceMethod.value = "";
+      codeBlockEditor.value?.show();
+    },
+    editCode: async (model, methodName) => {
+      const method = model.methods?.find((method2) => method2.name === methodName);
+      if (!method) {
+        tMagicMessage.error("获取数据源方法失败");
+        return;
+      }
+      let codeContent = method.content;
+      if (typeof codeContent !== "string") {
+        codeContent = codeContent.toString();
+      }
+      codeConfig.value = {
+        ...cloneDeep(method),
+        content: codeContent
+      };
+      await nextTick();
+      dataSource.value = model;
+      dataSourceMethod.value = methodName;
+      codeBlockEditor.value?.show();
+    },
+    deleteCode: async (model, methodName) => {
+      if (!model.methods)
+        return;
+      const index = model.methods.findIndex((method) => method.name === methodName);
+      if (index === -1) {
+        return;
+      }
+      model.methods.splice(index, 1);
+    },
+    submitCode: (values) => {
+      if (!dataSource.value)
+        return;
+      if (!dataSource.value.methods) {
+        dataSource.value.methods = [];
+      }
+      if (values.content) {
+        const parseDSL = getConfig("parseDSL");
+        if (typeof values.content === "string") {
+          values.content = parseDSL(values.content);
+        }
+      }
+      if (dataSourceMethod.value) {
+        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
+        dataSource.value.methods.splice(index, 1, values);
+      } else {
+        dataSource.value.methods.push(values);
+      }
+      codeBlockEditor.value?.hide();
+    }
+  };
+};
+
+const state = reactive({
+  uiSelectMode: false,
+  showSrc: false,
+  zoom: 1,
+  stageContainerRect: {
+    width: 0,
+    height: 0
+  },
+  stageRect: {
+    width: 375,
+    height: 817
+  },
+  columnWidth: {
+    left: 0,
+    right: 0,
+    center: 0
+  },
+  showGuides: true,
+  showRule: true,
+  propsPanelSize: "small",
+  showAddPageButton: true,
+  hideSlideBar: false,
+  navMenuRect: {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  },
+  frameworkRect: {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0
+  }
+});
+const canUsePluginMethods$2 = {
+  async: ["zoom", "calcZoom"],
+  sync: []
+};
+class Ui extends BaseService {
+  constructor() {
+    super(canUsePluginMethods$2.async.map((methodName) => ({ name: methodName, isAsync: true })));
+  }
+  set(name, value) {
+    const mask = editorService.get("stage")?.mask;
+    if (name === "stageRect") {
+      this.setStageRect(value);
+      return;
+    }
+    if (name === "showGuides") {
+      mask?.showGuides(value);
+    }
+    if (name === "showRule") {
+      mask?.showRule(value);
+    }
+    state[name] = value;
+  }
+  get(name) {
+    return state[name];
+  }
+  async zoom(zoom) {
+    this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
+    if (this.get("zoom") < 0.1)
+      this.set("zoom", 0.1);
+  }
+  async calcZoom() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height)
+      return 1;
+    let stageWidth = convertToNumber(stageRect.width, width);
+    let stageHeight = convertToNumber(stageRect.height, height);
+    stageWidth = stageWidth + 30;
+    stageHeight = stageHeight + 30;
+    if (width > stageWidth && height > stageHeight) {
+      return 1;
+    }
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+  }
+  resetState() {
+    this.set("showSrc", false);
+    this.set("uiSelectMode", false);
+    this.set("zoom", 1);
+    this.set("stageContainerRect", {
+      width: 0,
+      height: 0
+    });
+  }
+  destroy() {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
+  async setStageRect(value) {
+    state.stageRect = {
+      ...state.stageRect,
+      ...value
+    };
+    state.zoom = await this.calcZoom();
+  }
+}
+const uiService = new Ui();
+
+const root = computed(() => editorService.get("root"));
+const page = computed(() => editorService.get("page"));
+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({
+    render: stageOptions.render,
+    runtimeUrl: stageOptions.runtimeUrl,
+    zoom: zoom.value,
+    autoScrollIntoView: stageOptions.autoScrollIntoView,
+    isContainer: stageOptions.isContainer,
+    containerHighlightClassName: stageOptions.containerHighlightClassName,
+    containerHighlightDuration: stageOptions.containerHighlightDuration,
+    containerHighlightType: stageOptions.containerHighlightType,
+    disabledDragStart: stageOptions.disabledDragStart,
+    renderType: stageOptions.renderType,
+    canSelect: (el, event, stop) => {
+      if (!stageOptions.canSelect)
+        return true;
+      const elCanSelect = stageOptions.canSelect?.(el);
+      if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
+        document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
+        return stop();
+      }
+      return elCanSelect;
+    },
+    moveableOptions: stageOptions.moveableOptions,
+    updateDragEl: stageOptions.updateDragEl,
+    guidesOptions: stageOptions.guidesOptions,
+    disabledMultiSelect: stageOptions.disabledMultiSelect
+  });
+  watch(
+    () => editorService.get("disabledMultiSelect"),
+    (disabledMultiSelect) => {
+      if (disabledMultiSelect) {
+        stage.disableMultiSelect();
+      } else {
+        stage.enableMultiSelect();
+      }
+    }
+  );
+  stage.mask.setGuides([
+    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
+  ]);
+  stage.on("page-el-update", () => {
+    editorService.set("stageLoading", false);
+  });
+  stage.on("select", (el) => {
+    if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
+      return;
+    editorService.select(el.id);
+  });
+  stage.on("highlight", (el) => {
+    editorService.highlight(el.id);
+  });
+  stage.on("multi-select", (els) => {
+    editorService.multiSelect(els.map((el) => el.id));
+  });
+  stage.on("update", (ev) => {
+    if (ev.parentEl) {
+      for (const data of ev.data) {
+        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+      }
+      return;
+    }
+    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+  });
+  stage.on("sort", (ev) => {
+    editorService.sort(ev.src, ev.dist);
+  });
+  stage.on("remove", (ev) => {
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    editorService.remove(nodes.filter((node) => Boolean(node)));
+  });
+  stage.on("select-parent", () => {
+    const parent = editorService.get("parent");
+    if (!parent)
+      throw new Error("父节点为空");
+    editorService.select(parent);
+    editorService.get("stage")?.select(parent.id);
+  });
+  stage.on("change-guides", (e) => {
+    uiService.set("showGuides", true);
+    if (!root.value || !page.value)
+      return;
+    const storageKey = getGuideLineKey(
+      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
+    );
+    if (e.guides.length) {
+      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+    } else {
+      globalThis.localStorage.removeItem(storageKey);
+    }
+  });
+  return stage;
+};
+
+const useFloatBox = (slideKeys) => {
+  const services = inject("services");
+  const floatBoxStates = ref(
+    slideKeys.value.reduce(
+      (total, cur) => ({
+        ...total,
+        [cur]: {
+          status: false,
+          top: 0,
+          left: 0
+        }
+      }),
+      {}
+    )
+  );
+  const showingBoxKeys = computed(
+    () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
+  );
+  const isDragging = ref(false);
+  const dragstartHandler = () => isDragging.value = true;
+  const dragendHandler = (key, e) => {
+    const navMenuRect = services?.uiService?.get("navMenuRect");
+    floatBoxStates.value[key] = {
+      left: e.clientX,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+      status: true
+    };
+    isDragging.value = false;
+  };
+  document.body.addEventListener("dragover", (e) => {
+    if (!isDragging.value)
+      return;
+    e.preventDefault();
+  });
+  watch(
+    () => slideKeys.value,
+    (slideKeys2) => {
+      slideKeys2.forEach((key) => {
+        if (!floatBoxStates.value[key]) {
+          floatBoxStates.value[key] = {
+            status: false,
+            top: 0,
+            left: 0
+          };
+        }
+      });
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+  return {
+    dragstartHandler,
+    dragendHandler,
+    floatBoxStates,
+    showingBoxKeys
+  };
+};
+
+const _hoisted_1$p = { class: "m-editor-data-source-fields" };
+const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFieldsDataSourceFields"
   },
-  emits: ["change"],
+  __name: "DataSourceFields",
+  props: /* @__PURE__ */ mergeModels({
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean, default: false },
+    size: {},
+    lastValues: {}
+  }, {
+    "width": { default: 670 },
+    "widthModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {},
+    "visible1": { type: Boolean, ...{ default: false } },
+    "visible1Modifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["change"], ["update:width", "update:visible", "update:visible1"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const services = inject("services");
-    const addDialog = ref();
     const fieldValues = ref({});
     const fieldTitle = ref("");
-    const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
+    const width = useModel(__props, "width");
     const newHandler = () => {
       fieldValues.value = {};
       fieldTitle.value = "新增属性";
-      addDialog.value?.show();
+      calcBoxPosition();
+      addDialogVisible.value = true;
     };
     const fieldChange = ({ index, ...value }) => {
       if (index > -1) {
@@ -3895,7 +4303,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       } else {
         props.model[props.name].push(value);
       }
-      addDialog.value?.hide();
+      addDialogVisible.value = false;
       emit("change", props.model[props.name]);
     };
     const fieldColumns = [
@@ -3934,7 +4342,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 index
               };
               fieldTitle.value = `编辑${row.title}`;
-              addDialog.value?.show();
+              calcBoxPosition();
+              addDialogVisible.value = true;
             }
           },
           {
@@ -4032,7 +4441,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         display: (formState, { model }) => model.type === "object" || model.type === "array"
       }
     ];
-    const addFromJsonDialog = ref();
     const jsonFromConfig = [
       {
         name: "data",
@@ -4048,7 +4456,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     });
     const newFromJsonHandler = () => {
       jsonFromValues.value.data = getDefaultValueFromFields(props.model[props.name]);
-      addFromJsonDialog.value?.show();
+      calcBoxPosition();
+      addFromJsonDialogVisible.value = true;
     };
     const getValueType = (value) => {
       if (Array.isArray(value))
@@ -4094,12 +4503,17 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       try {
         const value = JSON.parse(data);
         props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
-        addFromJsonDialog.value?.hide();
+        addFromJsonDialogVisible.value = false;
         emit("change", props.model[props.name]);
       } catch (e) {
         tMagicMessage.error(e.message);
       }
     };
+    const addDialogVisible = useModel(__props, "visible");
+    const addFromJsonDialogVisible = useModel(__props, "visible1");
+    const { height: editorHeight } = useEditorContentHeight();
+    const parentFloating = inject("parentFloating", ref(null));
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$p, [
         createVNode(unref(MagicTable), {
@@ -4131,28 +4545,49 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(unref(MFormDrawer), {
-          ref_key: "addDialog",
-          ref: addDialog,
-          "label-width": "80px",
+        createVNode(_sfc_main$P, {
+          visible: addDialogVisible.value,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
+          width: width.value,
+          "onUpdate:width": _cache[3] || (_cache[3] = ($event) => width.value = $event),
+          height: unref(editorHeight),
+          "onUpdate:height": _cache[4] || (_cache[4] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
           title: fieldTitle.value,
-          config: dataSourceFieldsConfig,
-          values: fieldValues.value,
-          parentValues: _ctx.model[_ctx.name],
-          disabled: _ctx.disabled,
+          position: unref(boxPosition)
+        }, {
+          body: withCtx(() => [
+            createVNode(unref(MFormBox), {
+              "label-width": "80px",
+              title: fieldTitle.value,
+              config: dataSourceFieldsConfig,
+              values: fieldValues.value,
+              parentValues: _ctx.model[_ctx.name],
+              disabled: _ctx.disabled,
+              onSubmit: fieldChange
+            }, null, 8, ["title", "values", "parentValues", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["visible", "width", "height", "title", "position"]),
+        createVNode(_sfc_main$P, {
+          visible: addFromJsonDialogVisible.value,
+          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
           width: width.value,
-          onSubmit: fieldChange
-        }, null, 8, ["title", "values", "parentValues", "disabled", "width"]),
-        createVNode(unref(MFormDrawer), {
-          ref_key: "addFromJsonDialog",
-          ref: addFromJsonDialog,
+          "onUpdate:width": _cache[6] || (_cache[6] = ($event) => width.value = $event),
+          height: unref(editorHeight),
+          "onUpdate:height": _cache[7] || (_cache[7] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
           title: "快速添加数据定义",
-          config: jsonFromConfig,
-          values: jsonFromValues.value,
-          disabled: _ctx.disabled,
-          width: width.value,
-          onSubmit: addFromJsonFromChange
-        }, null, 8, ["values", "disabled", "width"])
+          position: unref(boxPosition)
+        }, {
+          body: withCtx(() => [
+            createVNode(unref(MFormBox), {
+              config: jsonFromConfig,
+              values: jsonFromValues.value,
+              disabled: _ctx.disabled,
+              onSubmit: addFromJsonFromChange
+            }, null, 8, ["values", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["visible", "width", "height", "position"])
       ]);
     };
   }
@@ -4277,10 +4712,14 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           style: { "margin-left": "5px" },
           link: "",
           type: showDataSourceFieldSelect.value ? "primary" : "default",
-          icon: unref(Coin),
           size: _ctx.size,
           onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
-        }, null, 8, ["type", "icon", "size"])) : createCommentVNode("", true)
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$U, { icon: unref(Coin) }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["type", "size"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -4288,7 +4727,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
 const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$7 = { class: "el-input__inner" };
+const _hoisted_3$7 = { class: "el-input__inner t-input__inner" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceInput"
@@ -4479,7 +4918,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$N, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$U, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
           createElementVNode("div", _hoisted_1$n, [
@@ -4490,7 +4929,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         _: 1
       }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
         key: 1,
-        class: normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
+        class: normalizeClass(`tmagic-data-source-input-text el-input t-input t-size-${_ctx.size?.[0]} el-input--${_ctx.size}`),
         onMouseup: mouseupHandler
       }, [
         createElementVNode("div", {
@@ -4514,7 +4953,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$N, {
+            createVNode(_sfc_main$U, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -4525,78 +4964,6 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useDataSourceMethod = () => {
-  const codeConfig = ref();
-  const codeBlockEditor = ref();
-  const dataSource = ref();
-  const dataSourceMethod = ref("");
-  return {
-    codeConfig,
-    codeBlockEditor,
-    createCode: async (model) => {
-      codeConfig.value = {
-        name: "",
-        content: `({ params, dataSource, app }) => {
-  // place your code here
-}`,
-        params: []
-      };
-      await nextTick();
-      dataSource.value = model;
-      dataSourceMethod.value = "";
-      codeBlockEditor.value?.show();
-    },
-    editCode: async (model, methodName) => {
-      const method = model.methods?.find((method2) => method2.name === methodName);
-      if (!method) {
-        tMagicMessage.error("获取数据源方法失败");
-        return;
-      }
-      let codeContent = method.content;
-      if (typeof codeContent !== "string") {
-        codeContent = codeContent.toString();
-      }
-      codeConfig.value = {
-        ...cloneDeep(method),
-        content: codeContent
-      };
-      await nextTick();
-      dataSource.value = model;
-      dataSourceMethod.value = methodName;
-      codeBlockEditor.value?.show();
-    },
-    deleteCode: async (model, methodName) => {
-      if (!model.methods)
-        return;
-      const index = model.methods.findIndex((method) => method.name === methodName);
-      if (index === -1) {
-        return;
-      }
-      model.methods.splice(index, 1);
-    },
-    submitCode: (values) => {
-      if (!dataSource.value)
-        return;
-      if (!dataSource.value.methods) {
-        dataSource.value.methods = [];
-      }
-      if (values.content) {
-        const parseDSL = getConfig("parseDSL");
-        if (typeof values.content === "string") {
-          values.content = parseDSL(values.content);
-        }
-      }
-      if (dataSourceMethod.value) {
-        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
-        dataSource.value.methods.splice(index, 1, values);
-      } else {
-        dataSource.value.methods.push(values);
-      }
-      codeBlockEditor.value?.hide();
-    }
-  };
-};
-
 const _hoisted_1$m = { class: "m-editor-data-source-methods" };
 const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
 const _sfc_main$I = /* @__PURE__ */ defineComponent({
@@ -4688,7 +5055,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4804,14 +5171,14 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["config", "model"]),
-          _ctx.model[_ctx.name] && isCustomMethod.value ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] && isCustomMethod.value ? (openBlock(), createBlock(_sfc_main$U, {
             key: 0,
             class: "icon",
             icon: !notEditable.value ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$N, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -4820,7 +5187,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4840,7 +5207,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     name: "MFieldsDataSourceMocks"
   },
   __name: "DataSourceMocks",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     config: {},
     model: {},
     initValues: {},
@@ -4850,14 +5217,18 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     size: {},
     lastValues: {}
-  },
-  emits: ["change"],
+  }, {
+    "width": { default: 670 },
+    "widthModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["change"], ["update:width", "update:visible"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const services = inject("services");
-    const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
-    const addDialog = ref();
+    const width = useModel(__props, "width");
     const drawerTitle = ref("");
     const formValues = ref({});
     const formConfig = [
@@ -4922,7 +5293,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$U,
+        component: _sfc_main$T,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -4984,7 +5355,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 index
               };
               drawerTitle.value = `编辑${row.title}`;
-              addDialog.value?.show();
+              calcBoxPosition();
+              addDialogVisible.value = true;
             }
           },
           {
@@ -5007,7 +5379,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         enable: isFirstRow
       };
       drawerTitle.value = "新增Mock";
-      addDialog.value?.show();
+      calcBoxPosition();
+      addDialogVisible.value = true;
     };
     const formChangeHandler = ({ index, ...value }) => {
       if (index > -1) {
@@ -5015,7 +5388,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       } else {
         props.model[props.name].push(value);
       }
-      addDialog.value?.hide();
+      addDialogVisible.value = false;
       emit("change", props.model[props.name]);
     };
     const toggleValue = (row, key, value, index) => {
@@ -5030,6 +5403,10 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         index
       });
     };
+    const addDialogVisible = useModel(__props, "visible");
+    const { height: editorHeight } = useEditorContentHeight();
+    const parentFloating = inject("parentFloating", ref(null));
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createVNode(unref(MagicTable), {
@@ -5050,18 +5427,29 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(unref(MFormDrawer), {
-          ref_key: "addDialog",
-          ref: addDialog,
-          "label-width": "120px",
-          title: drawerTitle.value,
-          config: formConfig,
-          values: formValues.value,
-          parentValues: _ctx.model[_ctx.name],
-          disabled: _ctx.disabled,
+        createVNode(_sfc_main$P, {
+          visible: addDialogVisible.value,
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
           width: width.value,
-          onSubmit: formChangeHandler
-        }, null, 8, ["title", "values", "parentValues", "disabled", "width"])
+          "onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
+          height: unref(editorHeight),
+          "onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
+          title: drawerTitle.value,
+          position: unref(boxPosition)
+        }, {
+          body: withCtx(() => [
+            createVNode(unref(MFormBox), {
+              ref: "addDialog",
+              "label-width": "120px",
+              config: formConfig,
+              values: formValues.value,
+              parentValues: _ctx.model[_ctx.name],
+              disabled: _ctx.disabled,
+              onSubmit: formChangeHandler
+            }, null, 8, ["values", "parentValues", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["visible", "width", "height", "title", "position"])
       ]);
     };
   }
@@ -5526,7 +5914,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
-        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$U, {
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$T, {
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
@@ -5607,7 +5995,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: changeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$U, {
             key: 0,
             class: "icon",
             icon: unref(Edit),
@@ -5840,6 +6228,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   },
   __name: "SplitView",
   props: {
+    width: {},
     left: {},
     right: {},
     minLeft: { default: 46 },
@@ -5856,17 +6245,19 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const el = ref();
     const hasLeft = computed(() => typeof props.left !== "undefined");
     const hasRight = computed(() => typeof props.right !== "undefined");
-    const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
+    const center = ref(0);
+    let clientWidth = 0;
+    const getCenterWidth = (l = 0, r = 0) => {
       let right = r > 0 ? r : 0;
       let left = l > 0 ? l : 0;
-      let center2 = clientWidth2 - left - right;
+      let center2 = clientWidth - left - right;
       if (center2 < props.minCenter) {
         center2 = props.minCenter;
         if (right > center2 + props.minRight) {
-          right = clientWidth2 - left - center2;
+          right = clientWidth - left - center2;
         } else {
           right = props.minRight;
-          left = clientWidth2 - right - center2;
+          left = clientWidth - right - center2;
         }
       }
       return {
@@ -5875,36 +6266,43 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         right
       };
     };
-    let clientWidth = 0;
-    const resizerObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        clientWidth = contentRect.width;
-        let left = props.left || 0;
-        let right = props.right || 0;
-        if (left > clientWidth) {
-          left = clientWidth / 3;
-        }
-        if (right > clientWidth) {
-          right = clientWidth / 3;
-        }
-        const columnWidth = getCenterWidth(clientWidth, left, right);
-        center.value = columnWidth.center;
-        emit("change", {
-          left: columnWidth.left,
-          center: center.value,
-          right: columnWidth.right
-        });
+    const widthChange = (width) => {
+      if (width <= 0) {
+        return;
       }
-    });
-    onMounted(() => {
-      if (el.value) {
-        resizerObserver.observe(el.value);
+      clientWidth = width;
+      let left = props.left || 0;
+      let right = props.right || 0;
+      if (left > clientWidth) {
+        left = clientWidth / 3;
       }
-    });
-    onBeforeUnmount(() => {
-      resizerObserver.disconnect();
-    });
-    const center = ref(0);
+      if (right > clientWidth) {
+        right = clientWidth / 3;
+      }
+      const columnWidth = getCenterWidth(left, right);
+      center.value = columnWidth.center;
+      emit("change", columnWidth);
+    };
+    if (typeof props.width !== "number") {
+      const resizerObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          widthChange(contentRect.width);
+        }
+      });
+      onMounted(() => {
+        if (el.value) {
+          resizerObserver.observe(el.value);
+        }
+      });
+      onBeforeUnmount(() => {
+        resizerObserver.disconnect();
+      });
+    } else {
+      watchEffect(() => {
+        if (typeof props.width === "number")
+          widthChange(props.width);
+      });
+    }
     const changeLeft = ({ deltaX }) => {
       if (typeof props.left === "undefined")
         return;
@@ -5913,7 +6311,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       if (clientWidth - left - (props.right || 0) <= 0) {
         left = props.left;
       }
-      const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+      const columnWidth = getCenterWidth(left, props.right || 0);
       center.value = columnWidth.center;
       emit("change", {
         left: columnWidth.left,
@@ -5929,7 +6327,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       if (clientWidth - (props.left || 0) - right <= 0) {
         right = props.right;
       }
-      const columnWidth = getCenterWidth(clientWidth, props.left, right);
+      const columnWidth = getCenterWidth(props.left, right);
       center.value = columnWidth.center;
       emit("change", {
         left: columnWidth.left,
@@ -5939,7 +6337,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
     __expose({
       updateWidth() {
-        const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+        clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+        const columnWidth = getCenterWidth(props.left, props.right);
         emit("change", {
           left: columnWidth.left,
           center: center.value,
@@ -6081,7 +6480,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$U, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -6099,7 +6498,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$U, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -6187,7 +6586,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
         onClick: addPage
       }, [
-        createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+        createVNode(_sfc_main$U, { icon: unref(Plus) }, null, 8, ["icon"])
       ])) : (openBlock(), createElementBlock("div", _hoisted_1$d));
     };
   }
@@ -6299,7 +6698,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$N, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$U, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         _ctx.type === unref(NodeType).PAGE && pageLength.value || _ctx.type === unref(NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -6315,7 +6714,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$N, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$U, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -6555,7 +6954,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$U, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$4
           ]),
@@ -6565,7 +6964,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$U, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_4$4
           ])) : createCommentVNode("", true)
@@ -6598,36 +6997,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const stageLoading = computed(() => editorService?.get("stageLoading") || false);
     const showSrc = computed(() => uiService?.get("showSrc"));
     const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-    const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-    const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
     const columnWidth = ref({
-      left: leftColumnWidthCacheData,
+      left: getLeftColumnWidthCacheData(),
       center: 0,
-      right: RightColumnWidthCacheData
+      right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+    });
+    watch(pageLength, () => {
+      splitView.value?.updateWidth();
     });
-    watch(
-      [pageLength, splitView],
-      () => {
-        splitView.value?.updateWidth();
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => columnWidth.value.right,
-      (right) => {
-        if (typeof right === "undefined")
-          return;
-        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-      }
-    );
-    watch(
-      () => columnWidth.value.left,
-      (left) => {
-        globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-      }
-    );
     watch(
       () => uiService?.get("hideSlideBar"),
       (hideSlideBar) => {
@@ -6635,11 +7012,29 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       }
     );
     const columnWidthChange = (columnW) => {
-      columnWidth.value.left = columnW.left;
-      columnWidth.value.center = columnW.center;
-      columnWidth.value.right = columnW.right;
+      columnWidth.value = columnW;
+      globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+      globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
       uiService?.set("columnWidth", columnW);
     };
+    const frameworkRect = computed(() => uiService?.get("frameworkRect"));
+    const resizerObserver = new ResizeObserver((entries) => {
+      const { contentRect } = entries[0];
+      uiService?.set("frameworkRect", {
+        width: contentRect.width,
+        height: contentRect.height,
+        left: contentRect.left,
+        top: contentRect.top
+      });
+    });
+    onMounted(() => {
+      if (content.value) {
+        resizerObserver.observe(content.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      resizerObserver.disconnect();
+    });
     const saveCode = (value) => {
       try {
         const parseDSL = getConfig("parseDSL");
@@ -6660,7 +7055,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$U, {
+          createVNode(_sfc_main$T, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
@@ -6682,6 +7077,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           "min-left": 65,
           "min-right": 20,
           "min-center": 100,
+          width: frameworkRect.value?.width || 0,
           onChange: columnWidthChange
         }, createSlots({
           left: withCtx(() => [
@@ -6717,7 +7113,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["left", "right"])), [
+        ]), 1032, ["left", "right", "width"])), [
           [_directive_loading, stageLoading.value]
         ]),
         renderSlot(_ctx.$slots, "content-after"),
@@ -6932,7 +7328,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   },
   emits: ["mounted", "submit-error", "form-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const codeOptions = inject("codeOptions", {});
     const emit = __emit;
+    const showSrc = ref(false);
     const internalInstance = getCurrentInstance();
     const values = ref({});
     const configForm = ref();
@@ -6942,6 +7340,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const nodes = computed(() => services?.editorService.get("nodes") || []);
     const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const stage = computed(() => services?.editorService.get("stage"));
+    const { height: editorContentHeight } = useEditorContentHeight();
     const init = async () => {
       if (!node.value) {
         curFormConfig.value = [];
@@ -6975,6 +7374,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const errorHandler = (e) => {
       emit("form-error", e);
     };
+    const saveCode = (values2) => {
+      services?.editorService.update(values2);
+    };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$a, [
@@ -6990,71 +7392,34 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           "extend-state": _ctx.extendState,
           onChange: submit,
           onError: errorHandler
-        }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"])
-      ], 512)), [
-        [vShow, nodes.value.length === 1]
-      ]);
-    };
-  }
-});
-
-const useFloatBox = (slideKeys) => {
-  const floatBoxStates = ref(
-    slideKeys.value.reduce(
-      (total, cur) => ({
-        ...total,
-        [cur]: {
-          status: false,
-          top: 0,
-          left: 0
-        }
-      }),
-      {}
-    )
-  );
-  const showingBoxKeys = computed(
-    () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
-  );
-  const isDraging = ref(false);
-  const dragstartHandler = () => isDraging.value = true;
-  const dragendHandler = (key, e) => {
-    floatBoxStates.value[key] = {
-      left: e.clientX,
-      top: e.clientY,
-      status: true
+        }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"]),
+        createVNode(unref(TMagicButton), {
+          class: "m-editor-props-panel-src-icon",
+          circle: "",
+          size: "large",
+          title: "源码",
+          type: showSrc.value ? "primary" : "",
+          onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$U, { icon: unref(Document) }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["type"]),
+        showSrc.value ? (openBlock(), createBlock(_sfc_main$T, {
+          key: 0,
+          height: `${unref(editorContentHeight)}px`,
+          "init-values": values.value,
+          options: unref(codeOptions),
+          parse: true,
+          onSave: saveCode
+        }, null, 8, ["height", "init-values", "options"])) : createCommentVNode("", true)
+      ], 512)), [
+        [vShow, nodes.value.length === 1]
+      ]);
     };
-    isDraging.value = false;
-  };
-  document.body.addEventListener("dragover", (e) => {
-    if (!isDraging.value)
-      return;
-    e.preventDefault();
-  });
-  watch(
-    () => slideKeys.value,
-    () => {
-      for (const key in slideKeys.value) {
-        if (floatBoxStates.value[key])
-          continue;
-        floatBoxStates.value[key] = {
-          status: false,
-          top: 0,
-          left: 0
-        };
-      }
-    },
-    {
-      deep: true,
-      immediate: true
-    }
-  );
-  return {
-    dragstartHandler,
-    dragendHandler,
-    floatBoxStates,
-    showingBoxKeys
-  };
-};
+  }
+});
 
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
@@ -7181,7 +7546,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           onContextmenu: nodeContentmenuHandler,
           onMouseenter: mouseenterHandler
         }, [
-          createVNode(_sfc_main$N, {
+          createVNode(_sfc_main$U, {
             class: "expand-icon",
             style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
             icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
@@ -7460,7 +7825,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$U, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -7475,7 +7840,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$U, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -7501,8 +7866,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   },
   __name: "CodeBlockListPanel",
   props: {
-    customError: { type: Function },
-    slideType: {}
+    customError: { type: Function }
   },
   setup(__props) {
     const { codeBlockService } = inject("services") || {};
@@ -7552,15 +7916,14 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
           disabled: !editable.value,
           content: unref(codeConfig),
-          slideType: _ctx.slideType,
           onSubmit: unref(submitCodeBlockHandler)
-        }, null, 8, ["disabled", "content", "slideType", "onSubmit"])) : createCommentVNode("", true)
+        }, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true)
       ], 64);
     };
   }
@@ -7571,21 +7934,28 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     name: "MEditorDataSourceConfigPanel"
   },
   __name: "DataSourceConfigPanel",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     title: {},
     values: {},
-    disabled: { type: Boolean },
-    slideType: {}
-  },
-  emits: ["submit"],
+    disabled: { type: Boolean }
+  }, {
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {},
+    "width": { default: 670 },
+    "widthModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:visible", "update:width"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const boxVisible = useModel(__props, "visible");
+    const width = useModel(__props, "width");
     const emit = __emit;
     const services = inject("services");
-    const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
-    const fomDrawer = ref();
     const initValues = ref({});
     const dataSourceConfig = ref([]);
+    const { height: editorHeight } = useEditorContentHeight();
+    const parentFloating = inject("parentFloating", ref(null));
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     watchEffect(() => {
       initValues.value = props.values;
       dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
@@ -7598,26 +7968,38 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
     __expose({
       show() {
-        fomDrawer.value?.show();
+        calcBoxPosition();
+        boxVisible.value = true;
       },
       hide() {
-        fomDrawer.value?.hide();
+        boxVisible.value = false;
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(_ctx.slideType === "box" ? unref(MFormBox) : unref(MFormDrawer)), {
-        ref_key: "fomDrawer",
-        ref: fomDrawer,
-        "label-width": "80px",
-        "close-on-press-escape": false,
+      return openBlock(), createBlock(_sfc_main$P, {
+        visible: boxVisible.value,
+        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
+        width: width.value,
+        "onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
+        height: unref(editorHeight),
+        "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
         title: _ctx.title,
-        width: size.value,
-        config: dataSourceConfig.value,
-        values: initValues.value,
-        disabled: _ctx.disabled,
-        onSubmit: submitHandler,
-        onError: errorHandler
-      }, null, 40, ["title", "width", "config", "values", "disabled"]);
+        position: unref(boxPosition)
+      }, {
+        body: withCtx(() => [
+          createVNode(unref(MFormBox), {
+            "label-width": "80px",
+            title: _ctx.title,
+            config: dataSourceConfig.value,
+            values: initValues.value,
+            disabled: _ctx.disabled,
+            style: { "height": "100%" },
+            onSubmit: submitHandler,
+            onError: errorHandler
+          }, null, 8, ["title", "config", "values", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["visible", "width", "height", "title", "position"]);
     };
   }
 });
@@ -7733,7 +8115,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$U, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -7748,7 +8130,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$U, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -7771,9 +8153,6 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     name: "MEditorDataSourceListPanel"
   },
   __name: "DataSourceListPanel",
-  props: {
-    slideType: {}
-  },
   setup(__props) {
     const { dataSourceService } = inject("services") || {};
     const editDialog = ref();
@@ -7880,9 +8259,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           disabled: !editable.value,
           values: dataSourceValues.value,
           title: dialogTitle.value,
-          slideType: _ctx.slideType,
           onSubmit: submitDataSourceHandler
-        }, null, 8, ["disabled", "values", "title", "slideType"])
+        }, null, 8, ["disabled", "values", "title"])
       ], 64);
     };
   }
@@ -8284,12 +8662,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$N, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$U, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$N, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$U, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -8930,7 +9308,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$N, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$U, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -8951,7 +9329,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                               content: item.desc
                             }, {
                               default: withCtx(() => [
-                                createVNode(_sfc_main$N, {
+                                createVNode(_sfc_main$U, {
                                   icon: item.icon
                                 }, null, 8, ["icon"])
                               ]),
@@ -9002,6 +9380,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   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 activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -9031,12 +9411,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           icon: EditPen,
           text: "代码编辑",
           component: _sfc_main$k,
-          slots: {},
-          boxComponentConfig: {
-            props: {
-              slideType: "box"
-            }
-          }
+          slots: {}
         },
         "data-source": {
           $key: "data-source",
@@ -9093,7 +9468,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$U, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -9226,10 +9601,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return openBlock(), createElementBlock(Fragment, null, [
-              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$Q, {
+              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$P, {
                 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),
+                width: columnLeftWidth.value,
                 title: config.text,
                 position: {
                   left: unref(floatBoxStates)[config.$key].left,
@@ -9238,11 +9616,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               }, {
                 body: withCtx(() => [
                   createElementVNode("div", _hoisted_5$1, [
-                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.boxComponentConfig?.component || config.component), mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
+                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
                   ])
                 ]),
                 _: 2
-              }, 1032, ["visible", "onUpdate:visible", "title", "position"])) : createCommentVNode("", true)
+              }, 1032, ["visible", "onUpdate:visible", "height", "width", "title", "position"])) : createCommentVNode("", true)
             ], 64);
           }), 256))
         ]))
@@ -9574,205 +9952,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const state = reactive({
-  uiSelectMode: false,
-  showSrc: false,
-  zoom: 1,
-  stageContainerRect: {
-    width: 0,
-    height: 0
-  },
-  stageRect: {
-    width: 375,
-    height: 817
-  },
-  columnWidth: {
-    left: 0,
-    right: 0,
-    center: 0
-  },
-  showGuides: true,
-  showRule: true,
-  propsPanelSize: "small",
-  showAddPageButton: true,
-  hideSlideBar: false,
-  navMenuRect: {
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0
-  }
-});
-const canUsePluginMethods$2 = {
-  async: ["zoom", "calcZoom"],
-  sync: []
-};
-class Ui extends BaseService {
-  constructor() {
-    super(canUsePluginMethods$2.async.map((methodName) => ({ name: methodName, isAsync: true })));
-  }
-  set(name, value) {
-    const mask = editorService.get("stage")?.mask;
-    if (name === "stageRect") {
-      this.setStageRect(value);
-      return;
-    }
-    if (name === "showGuides") {
-      mask?.showGuides(value);
-    }
-    if (name === "showRule") {
-      mask?.showRule(value);
-    }
-    state[name] = value;
-  }
-  get(name) {
-    return state[name];
-  }
-  async zoom(zoom) {
-    this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
-    if (this.get("zoom") < 0.1)
-      this.set("zoom", 0.1);
-  }
-  async calcZoom() {
-    const { stageRect, stageContainerRect } = state;
-    const { height, width } = stageContainerRect;
-    if (!width || !height)
-      return 1;
-    let stageWidth = convertToNumber(stageRect.width, width);
-    let stageHeight = convertToNumber(stageRect.height, height);
-    stageWidth = stageWidth + 30;
-    stageHeight = stageHeight + 30;
-    if (width > stageWidth && height > stageHeight) {
-      return 1;
-    }
-    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
-  }
-  resetState() {
-    this.set("showSrc", false);
-    this.set("uiSelectMode", false);
-    this.set("zoom", 1);
-    this.set("stageContainerRect", {
-      width: 0,
-      height: 0
-    });
-  }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-  usePlugin(options) {
-    super.usePlugin(options);
-  }
-  async setStageRect(value) {
-    state.stageRect = {
-      ...state.stageRect,
-      ...value
-    };
-    state.zoom = await this.calcZoom();
-  }
-}
-const uiService = new Ui();
-
-const root = computed(() => editorService.get("root"));
-const page = computed(() => editorService.get("page"));
-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({
-    render: stageOptions.render,
-    runtimeUrl: stageOptions.runtimeUrl,
-    zoom: zoom.value,
-    autoScrollIntoView: stageOptions.autoScrollIntoView,
-    isContainer: stageOptions.isContainer,
-    containerHighlightClassName: stageOptions.containerHighlightClassName,
-    containerHighlightDuration: stageOptions.containerHighlightDuration,
-    containerHighlightType: stageOptions.containerHighlightType,
-    disabledDragStart: stageOptions.disabledDragStart,
-    renderType: stageOptions.renderType,
-    canSelect: (el, event, stop) => {
-      if (!stageOptions.canSelect)
-        return true;
-      const elCanSelect = stageOptions.canSelect?.(el);
-      if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
-        document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
-        return stop();
-      }
-      return elCanSelect;
-    },
-    moveableOptions: stageOptions.moveableOptions,
-    updateDragEl: stageOptions.updateDragEl,
-    guidesOptions: stageOptions.guidesOptions,
-    disabledMultiSelect: stageOptions.disabledMultiSelect
-  });
-  watch(
-    () => editorService.get("disabledMultiSelect"),
-    (disabledMultiSelect) => {
-      if (disabledMultiSelect) {
-        stage.disableMultiSelect();
-      } else {
-        stage.enableMultiSelect();
-      }
-    }
-  );
-  stage.mask.setGuides([
-    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
-  ]);
-  stage.on("page-el-update", () => {
-    editorService.set("stageLoading", false);
-  });
-  stage.on("select", (el) => {
-    if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
-      return;
-    editorService.select(el.id);
-  });
-  stage.on("highlight", (el) => {
-    editorService.highlight(el.id);
-  });
-  stage.on("multi-select", (els) => {
-    editorService.multiSelect(els.map((el) => el.id));
-  });
-  stage.on("update", (ev) => {
-    if (ev.parentEl) {
-      for (const data of ev.data) {
-        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
-      }
-      return;
-    }
-    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
-  });
-  stage.on("sort", (ev) => {
-    editorService.sort(ev.src, ev.dist);
-  });
-  stage.on("remove", (ev) => {
-    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
-    editorService.remove(nodes.filter((node) => Boolean(node)));
-  });
-  stage.on("select-parent", () => {
-    const parent = editorService.get("parent");
-    if (!parent)
-      throw new Error("父节点为空");
-    editorService.select(parent);
-    editorService.get("stage")?.select(parent.id);
-  });
-  stage.on("change-guides", (e) => {
-    uiService.set("showGuides", true);
-    if (!root.value || !page.value)
-      return;
-    const storageKey = getGuideLineKey(
-      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
-    );
-    if (e.guides.length) {
-      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
-    } else {
-      globalThis.localStorage.removeItem(storageKey);
-    }
-  });
-  return stage;
-};
-
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
   setup(__props) {
@@ -9855,7 +10034,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$Q, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$P, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -9928,7 +10107,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }, [
         createVNode(unref(TMagicIcon), {
           class: "m-editor-stage-overlay-close",
-          size: 20,
+          size: "20",
           onClick: closeOverlayHandler
         }, {
           default: withCtx(() => [
@@ -10975,7 +11154,7 @@ class StageOverlay extends BaseService {
       subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl);
+      subStage?.select(contentEl.id);
     }
   }
   updateHandler = () => {
@@ -11575,11 +11754,11 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
-    app.component("magic-code-editor", _sfc_main$U);
+    app.component("magic-code-editor", _sfc_main$T);
     app.component("m-fields-ui-select", _sfc_main$A);
-    app.component("m-fields-code-link", _sfc_main$S);
-    app.component("m-fields-vs-code", _sfc_main$T);
-    app.component("m-fields-code-select", _sfc_main$R);
+    app.component("m-fields-code-link", _sfc_main$R);
+    app.component("m-fields-vs-code", _sfc_main$S);
+    app.component("m-fields-code-select", _sfc_main$Q);
     app.component("m-fields-code-select-col", _sfc_main$M);
     app.component("m-fields-event-select", _sfc_main$E);
     app.component("m-fields-data-source-fields", _sfc_main$L);
@@ -11594,4 +11773,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$O as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };