@tmagic/editor 1.4.0-beta.2 → 1.4.1

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, mergeModels, useModel, nextTick, renderSlot, toDisplayString, createCommentVNode, watchEffect, Fragment, isRef, 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, Document, 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$t = {
+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$t, [
+      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,7 +502,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
   props: /* @__PURE__ */ mergeModels({
     position: { default: () => ({ left: 0, top: 0 }) },
@@ -477,7 +525,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const target = ref();
     const titleEl = ref();
     const zIndex = useZIndex();
-    const curZIndex = ref(zIndex.nextZIndex());
+    const curZIndex = ref(0);
     const titleHeight = ref(0);
     const bodyHeight = computed(() => {
       if (height.value) {
@@ -488,12 +536,20 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }
       return "auto";
     });
-    const style = computed(() => ({
-      left: `${props.position.left}px`,
-      top: `${props.position.top}px`,
-      width: width.value ? `${width.value}px` : "auto",
-      height: height.value ? `${height.value}px` : "auto"
-    }));
+    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"
+      };
+    });
     let moveable = null;
     const initMoveable = () => {
       moveable = new VanillaMoveable(globalThis.document.body, {
@@ -531,6 +587,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       async (visible2) => {
         if (visible2) {
           await nextTick();
+          curZIndex.value = zIndex.nextZIndex();
           const targetRect = target.value?.getBoundingClientRect();
           if (targetRect) {
             width.value = targetRect.width;
@@ -567,6 +624,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const nextZIndex = () => {
       curZIndex.value = zIndex.nextZIndex();
     };
+    provide("parentFloating", target);
     __expose({
       bodyHeight,
       target,
@@ -596,9 +654,13 @@ 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", {
@@ -620,7 +682,7 @@ const useEditorContentHeight = () => {
   const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
   const height = ref(0);
   watchEffect(() => {
-    if (height.value > 0)
+    if (height.value > 0 && height.value === editorContentHeight.value)
       return;
     height.value = editorContentHeight.value;
   });
@@ -629,6 +691,30 @@ const useEditorContentHeight = () => {
   };
 };
 
+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 = () => {
@@ -644,11 +730,11 @@ const useWindowRect = () => {
   };
 };
 
-const _hoisted_1$s = { style: { "display": "flex", "margin-bottom": "10px" } };
+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"
   },
@@ -657,8 +743,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     content: {},
     disabled: { type: Boolean },
     isDataSource: { type: Boolean },
-    dataSourceType: {},
-    slideType: {}
+    dataSourceType: {}
   }, {
     "width": { default: 670 },
     "widthModifiers": {},
@@ -791,7 +876,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
     const beforeClose = (done) => {
       if (!changedValue.value) {
-        editVisible.value = false;
         done();
         return;
       }
@@ -802,170 +886,142 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         distinguishCancelAndClose: true
       }).then(() => {
         changedValue.value && submitForm(changedValue.value);
-        editVisible.value = false;
         done();
       }).catch((action) => {
-        if (action === "cancel") {
-          editVisible.value = false;
-        }
         done(action === "cancel");
       });
     };
     const closedHandler = () => {
       changedValue.value = void 0;
     };
-    const editVisible = ref(false);
-    const floatingBoxBody = ref();
-    const boxPosition = computed(() => {
-      const columnWidth = services?.uiService?.get("columnWidth");
-      const navMenuRect = services?.uiService?.get("navMenuRect");
-      return {
-        left: columnWidth?.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;
+        calcBoxPosition();
+        boxVisible.value = true;
       },
       async hide() {
-        editVisible.value = false;
-        if (props.slideType !== "box") {
-          await nextTick();
-          boxVisible.value = false;
-        }
+        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),
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
           width: width.value,
-          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
+          "onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
           height: unref(codeBlockEditorHeight),
-          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+          "onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
           title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
-          position: boxPosition.value,
+          position: unref(boxPosition),
           "before-close": beforeClose
         }, {
           body: withCtx(() => [
-            createElementVNode("div", {
-              ref_key: "floatingBoxBody",
-              ref: floatingBoxBody,
-              style: { "height": "100%" }
-            }, 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", "width", "height", "title", "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: "formBox",
-            ref: formBox,
-            "label-width": "80px",
-            "close-on-press-escape": false,
-            title: _ctx.content.name,
-            config: functionConfig.value,
-            values: _ctx.content,
-            disabled: _ctx.disabled,
-            height: floatingBoxBody.value?.clientHeight,
-            onChange: changeHandler,
-            onSubmit: submitForm,
-            onError: errorHandler,
-            onClosed: closedHandler
+        (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(() => [
-              !_ctx.disabled ? (openBlock(), createBlock(unref(TMagicButton), {
-                key: 0,
-                type: "primary",
-                link: "",
-                onClick: _cache[3] || (_cache[3] = ($event) => difVisible.value = true)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("查看修改")
-                ]),
-                _: 1
-              })) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["title", "config", "values", "disabled", "height"])
-        ], 8, ["to", "disabled"])) : createCommentVNode("", true),
-        createVNode(unref(TMagicDialog), {
-          modelValue: difVisible.value,
-          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
-          title: "查看修改",
-          fullscreen: ""
-        }, {
-          footer: withCtx(() => [
-            createElementVNode("span", _hoisted_4$7, [
-              createVNode(unref(TMagicButton), {
-                size: "small",
-                onClick: _cache[4] || (_cache[4] = ($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: formBox.value?.form?.values.content,
-              style: normalizeStyle(`height: ${unref(windowRect).height - 150}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);
     };
   }
@@ -3641,7 +3697,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3691,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();
@@ -3881,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,
@@ -3896,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,
@@ -3909,62 +3921,406 @@ 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: {}
-  },
-  emits: ["change"],
-  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 newHandler = () => {
-      fieldValues.value = {};
-      fieldTitle.value = "新增属性";
-      addDialog.value?.show();
-    };
-    const fieldChange = ({ index, ...value }) => {
-      if (index > -1) {
-        props.model[props.name][index] = value;
-      } else {
-        props.model[props.name].push(value);
-      }
-      addDialog.value?.hide();
-      emit("change", props.model[props.name]);
-    };
-    const fieldColumns = [
-      {
-        label: "属性名称",
-        prop: "title"
-      },
-      {
-        label: "属性key",
-        prop: "name"
-      },
-      {
-        label: "属性描述",
-        prop: "description"
-      },
-      {
-        label: "默认值",
+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"
+  },
+  __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 fieldValues = ref({});
+    const fieldTitle = ref("");
+    const width = useModel(__props, "width");
+    const newHandler = () => {
+      fieldValues.value = {};
+      fieldTitle.value = "新增属性";
+      calcBoxPosition();
+      addDialogVisible.value = true;
+    };
+    const fieldChange = ({ index, ...value }) => {
+      if (index > -1) {
+        props.model[props.name][index] = value;
+      } else {
+        props.model[props.name].push(value);
+      }
+      addDialogVisible.value = false;
+      emit("change", props.model[props.name]);
+    };
+    const fieldColumns = [
+      {
+        label: "属性名称",
+        prop: "title"
+      },
+      {
+        label: "属性key",
+        prop: "name"
+      },
+      {
+        label: "属性描述",
+        prop: "description"
+      },
+      {
+        label: "默认值",
         prop: "defaultValue",
         formatter(item, row) {
           try {
@@ -3986,7 +4342,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 index
               };
               fieldTitle.value = `编辑${row.title}`;
-              addDialog.value?.show();
+              calcBoxPosition();
+              addDialogVisible.value = true;
             }
           },
           {
@@ -4084,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",
@@ -4100,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))
@@ -4146,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), {
@@ -4183,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"])
       ]);
     };
   }
@@ -4329,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)
       ]);
     };
   }
@@ -4340,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"
@@ -4531,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, [
@@ -4542,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", {
@@ -4566,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"])
@@ -4577,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({
@@ -4740,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,
@@ -4856,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,
@@ -4872,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,
@@ -4892,7 +5207,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     name: "MFieldsDataSourceMocks"
   },
   __name: "DataSourceMocks",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     config: {},
     model: {},
     initValues: {},
@@ -4902,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 = [
@@ -4974,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",
@@ -5036,7 +5355,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 index
               };
               drawerTitle.value = `编辑${row.title}`;
-              addDialog.value?.show();
+              calcBoxPosition();
+              addDialogVisible.value = true;
             }
           },
           {
@@ -5059,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) {
@@ -5067,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) => {
@@ -5082,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), {
@@ -5102,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"])
       ]);
     };
   }
@@ -5578,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],
@@ -5659,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),
@@ -6144,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),
@@ -6162,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),
@@ -6250,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));
     };
   }
@@ -6362,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,
@@ -6378,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);
     };
@@ -6618,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
           ]),
@@ -6628,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)
@@ -6719,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),
@@ -7057,87 +7393,33 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           onChange: submit,
           onError: errorHandler
         }, 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: "源码",
-          icon: unref(Document),
-          type: showSrc.value ? "primary" : "",
-          onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
-        }, null, 8, ["icon", "type"]),
-        showSrc.value ? (openBlock(), createBlock(_sfc_main$U, {
-          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]
-      ]);
-    };
-  }
-});
-
-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 isDragging = ref(false);
-  const dragstartHandler = () => isDragging.value = true;
-  const dragendHandler = (key, e) => {
-    floatBoxStates.value[key] = {
-      left: e.clientX,
-      top: e.clientY,
-      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])
-          return;
-        floatBoxStates.value[key] = {
-          status: false,
-          top: 0,
-          left: 0
-        };
-      });
-    },
-    {
-      deep: true,
-      immediate: true
-    }
-  );
-  return {
-    dragstartHandler,
-    dragendHandler,
-    floatBoxStates,
-    showingBoxKeys
-  };
-};
+        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]
+      ]);
+    };
+  }
+});
 
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
@@ -7264,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),
@@ -7543,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"])
@@ -7558,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"])
@@ -7584,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") || {};
@@ -7635,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);
     };
   }
@@ -7654,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) || [];
@@ -7681,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"]);
     };
   }
 });
@@ -7816,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"])
@@ -7831,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"])
@@ -7854,9 +8153,6 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     name: "MEditorDataSourceListPanel"
   },
   __name: "DataSourceListPanel",
-  props: {
-    slideType: {}
-  },
   setup(__props) {
     const { dataSourceService } = inject("services") || {};
     const editDialog = ref();
@@ -7951,9 +8247,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "data-source-panel-search")
             ]),
             createVNode(_sfc_main$i, {
+              ref_key: "dataSourceList",
+              ref: dataSourceList,
               onEdit: editHandler,
               onRemove: removeHandler
-            })
+            }, null, 512)
           ]),
           _: 3
         }),
@@ -7963,9 +8261,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);
     };
   }
@@ -8367,12 +8664,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"])),
@@ -9013,7 +9310,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(() => [
@@ -9034,7 +9331,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"])
                               ]),
@@ -9085,7 +9382,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
-    const columnLeftWitch = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
+    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 = {
@@ -9115,12 +9413,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",
@@ -9177,7 +9470,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),
@@ -9310,12 +9603,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,
-                width: columnLeftWitch.value,
-                height: 600,
+                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,
@@ -9324,11 +9618,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", "width", "title", "position"])) : createCommentVNode("", true)
+              }, 1032, ["visible", "onUpdate:visible", "height", "width", "title", "position"])) : createCommentVNode("", true)
             ], 64);
           }), 256))
         ]))
@@ -9660,211 +9954,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
-  },
-  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 _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
   setup(__props) {
@@ -9947,7 +10036,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,
@@ -10020,7 +10109,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }, [
         createVNode(unref(TMagicIcon), {
           class: "m-editor-stage-overlay-close",
-          size: 20,
+          size: "20",
           onClick: closeOverlayHandler
         }, {
           default: withCtx(() => [
@@ -11667,11 +11756,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);
@@ -11686,4 +11775,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, useEditorContentHeight, useFloatBox, useStage, useWindowRect, 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 };