@tmagic/editor 1.4.0-beta.2 → 1.4.1

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/form'), require('moveable'), require('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('@tmagic/dep'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/schema', '@tmagic/form', 'moveable', '@tmagic/table', '@tmagic/utils', 'gesto', '@tmagic/dep', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.VanillaMoveable, global.table, global.utils, global.Gesto, global.dep, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, VanillaMoveable, table, utils, Gesto, dep, StageCore, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/form'), require('moveable'), require('@tmagic/table'), require('@tmagic/utils'), require('@tmagic/dep'), require('gesto'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/schema', '@tmagic/form', 'moveable', '@tmagic/table', '@tmagic/utils', '@tmagic/dep', 'gesto', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.VanillaMoveable, global.table, global.utils, global.dep, global.Gesto, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, VanillaMoveable, table, utils, dep, Gesto, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,6 +23,50 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
+  const _hoisted_1$t = ["src"];
+  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorIcon"
+    },
+    __name: "Icon",
+    props: {
+      icon: {}
+    },
+    setup(__props) {
+      const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
+      return (_ctx, _cache) => {
+        return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 0,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.Edit))
+          ]),
+          _: 1
+        })) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 1,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$t)
+          ]),
+          _: 1
+        })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+          key: 2,
+          class: vue.normalizeClass(["magic-editor-icon", _ctx.icon])
+        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 3,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(_ctx.icon))))
+          ]),
+          _: 1
+        }));
+      };
+    }
+  });
+
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
     $TMAGIC_EDITOR = option;
@@ -32,10 +76,10 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$t = {
+  const _hoisted_1$s = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -193,7 +237,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -206,9 +250,13 @@
                 class: "magic-code-editor-full-screen-icon",
                 circle: "",
                 size: "small",
-                icon: vue.unref(iconsVue.FullScreen),
                 onClick: fullScreenHandler
-              }, null, 8, ["icon"]),
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.FullScreen) }, null, 8, ["icon"])
+                ]),
+                _: 1
+              }),
               vue.createElementVNode("div", {
                 ref_key: "codeEditor",
                 ref: codeEditor,
@@ -221,7 +269,7 @@
     }
   });
 
-  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsVsCode"
     },
@@ -246,7 +294,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$U, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$T, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -261,7 +309,7 @@
     }
   });
 
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeLink"
     },
@@ -341,7 +389,7 @@
     }
   });
 
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelect"
     },
@@ -459,7 +507,7 @@
     }
   });
 
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
     props: /* @__PURE__ */ vue.mergeModels({
       position: { default: () => ({ left: 0, top: 0 }) },
@@ -482,7 +530,7 @@
       const target = vue.ref();
       const titleEl = vue.ref();
       const zIndex = design.useZIndex();
-      const curZIndex = vue.ref(zIndex.nextZIndex());
+      const curZIndex = vue.ref(0);
       const titleHeight = vue.ref(0);
       const bodyHeight = vue.computed(() => {
         if (height.value) {
@@ -493,12 +541,20 @@
         }
         return "auto";
       });
-      const style = vue.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 = vue.inject("services");
+      const frameworkWidth = vue.computed(() => services?.uiService.get("frameworkRect").width || 0);
+      const style = vue.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, {
@@ -536,6 +592,7 @@
         async (visible2) => {
           if (visible2) {
             await vue.nextTick();
+            curZIndex.value = zIndex.nextZIndex();
             const targetRect = target.value?.getBoundingClientRect();
             if (targetRect) {
               width.value = targetRect.width;
@@ -572,6 +629,7 @@
       const nextZIndex = () => {
         curZIndex.value = zIndex.nextZIndex();
       };
+      vue.provide("parentFloating", target);
       __expose({
         bodyHeight,
         target,
@@ -601,9 +659,13 @@
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   link: "",
                   size: "small",
-                  icon: vue.unref(iconsVue.Close),
                   onClick: closeHandler
-                }, null, 8, ["icon"])
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                })
               ])
             ], 512),
             vue.createElementVNode("div", {
@@ -625,7 +687,7 @@
     const editorContentHeight = vue.computed(() => frameworkHeight.value - navMenuHeight.value);
     const height = vue.ref(0);
     vue.watchEffect(() => {
-      if (height.value > 0)
+      if (height.value > 0 && height.value === editorContentHeight.value)
         return;
       height.value = editorContentHeight.value;
     });
@@ -634,6 +696,30 @@
     };
   };
 
+  const useNextFloatBoxPosition = (uiService, parent) => {
+    const boxPosition = vue.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 = vue.reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
     const windowResizeHandler = () => {
@@ -649,11 +735,11 @@
     };
   };
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -662,8 +748,7 @@
       content: {},
       disabled: { type: Boolean },
       isDataSource: { type: Boolean },
-      dataSourceType: {},
-      slideType: {}
+      dataSourceType: {}
     }, {
       "width": { default: 670 },
       "widthModifiers": {},
@@ -796,7 +881,6 @@
       };
       const beforeClose = (done) => {
         if (!changedValue.value) {
-          editVisible.value = false;
           done();
           return;
         }
@@ -807,170 +891,142 @@
           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 = vue.ref(false);
-      const floatingBoxBody = vue.ref();
-      const boxPosition = vue.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 = vue.inject("parentFloating", vue.ref(null));
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       __expose({
         async show() {
-          if (props.slideType !== "box") {
-            boxVisible.value = true;
-            await vue.nextTick();
-          }
-          editVisible.value = true;
+          calcBoxPosition();
+          boxVisible.value = true;
         },
         async hide() {
-          editVisible.value = false;
-          if (props.slideType !== "box") {
-            await vue.nextTick();
-            boxVisible.value = false;
-          }
+          boxVisible.value = false;
         }
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(_sfc_main$Q, {
+          vue.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: vue.unref(codeBlockEditorHeight),
-            "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+            "onUpdate:height": _cache[3] || (_cache[3] = ($event) => vue.isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
             title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
-            position: boxPosition.value,
+            position: vue.unref(boxPosition),
             "before-close": beforeClose
           }, {
             body: vue.withCtx(() => [
-              vue.createElementVNode("div", {
-                ref_key: "floatingBoxBody",
-                ref: floatingBoxBody,
-                style: { "height": "100%" }
-              }, null, 512)
+              vue.createVNode(vue.unref(form.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: vue.withCtx(() => [
+                  !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                    key: 0,
+                    type: "primary",
+                    link: "",
+                    onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode("查看修改")
+                    ]),
+                    _: 1
+                  })) : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["title", "config", "values", "disabled"])
             ]),
             _: 1
           }, 8, ["visible", "width", "height", "title", "position"]),
-          editVisible.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
-            key: 0,
-            to: floatingBoxBody.value,
-            disabled: _ctx.slideType === "box"
-          }, [
-            vue.createVNode(vue.unref(form.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
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            vue.createVNode(vue.unref(design.TMagicDialog), {
+              title: "查看修改",
+              modelValue: difVisible.value,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
+              fullscreen: ""
             }, {
-              left: vue.withCtx(() => [
-                !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                  key: 0,
-                  type: "primary",
-                  link: "",
-                  onClick: _cache[3] || (_cache[3] = ($event) => difVisible.value = true)
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode("查看修改")
-                  ]),
-                  _: 1
-                })) : vue.createCommentVNode("", true)
-              ]),
-              _: 1
-            }, 8, ["title", "config", "values", "disabled", "height"])
-          ], 8, ["to", "disabled"])) : vue.createCommentVNode("", true),
-          vue.createVNode(vue.unref(design.TMagicDialog), {
-            modelValue: difVisible.value,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
-            title: "查看修改",
-            fullscreen: ""
-          }, {
-            footer: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_4$7, [
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  size: "small",
-                  onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode("取消")
-                  ]),
-                  _: 1
-                }),
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  size: "small",
-                  type: "primary",
-                  onClick: diffChange
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode("确定")
-                  ]),
-                  _: 1
-                })
-              ])
-            ]),
-            default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$s, [
-                vue.createElementVNode("div", _hoisted_2$k, [
-                  vue.createVNode(vue.unref(design.TMagicTag), {
+              footer: vue.withCtx(() => [
+                vue.createElementVNode("span", _hoisted_4$7, [
+                  vue.createVNode(vue.unref(design.TMagicButton), {
                     size: "small",
-                    type: "info"
+                    onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createTextVNode("修改前")
+                      vue.createTextVNode("取消")
                     ]),
                     _: 1
-                  })
-                ]),
-                vue.createElementVNode("div", _hoisted_3$8, [
-                  vue.createVNode(vue.unref(design.TMagicTag), {
+                  }),
+                  vue.createVNode(vue.unref(design.TMagicButton), {
                     size: "small",
-                    type: "success"
+                    type: "primary",
+                    onClick: diffChange
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createTextVNode("修改后")
+                      vue.createTextVNode("确定")
                     ]),
                     _: 1
                   })
                 ])
               ]),
-              difVisible.value ? (vue.openBlock(), vue.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: vue.normalizeStyle(`height: ${vue.unref(windowRect).height - 150}px`)
-              }, null, 8, ["initValues", "modifiedValues", "style"])) : vue.createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["modelValue"])
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_1$r, [
+                  vue.createElementVNode("div", _hoisted_2$k, [
+                    vue.createVNode(vue.unref(design.TMagicTag), {
+                      size: "small",
+                      type: "info"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("修改前")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  vue.createElementVNode("div", _hoisted_3$8, [
+                    vue.createVNode(vue.unref(design.TMagicTag), {
+                      size: "small",
+                      type: "success"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("修改后")
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                difVisible.value ? (vue.openBlock(), vue.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: vue.normalizeStyle(`height: ${vue.unref(windowRect).height - 150}px`)
+                }, null, 8, ["initValues", "modifiedValues", "style"])) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]))
         ], 64);
       };
     }
@@ -3646,7 +3702,7 @@
     return newNode;
   };
 
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3696,50 +3752,6 @@
     }
   });
 
-  const _hoisted_1$r = ["src"];
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorIcon"
-    },
-    __name: "Icon",
-    props: {
-      icon: {}
-    },
-    setup(__props) {
-      const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
-      return (_ctx, _cache) => {
-        return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 0,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(iconsVue.Edit))
-          ]),
-          _: 1
-        })) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 1,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$r)
-          ]),
-          _: 1
-        })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
-          key: 2,
-          class: vue.normalizeClass(["magic-editor-icon", _ctx.icon])
-        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 3,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(_ctx.icon))))
-          ]),
-          _: 1
-        }));
-      };
-    }
-  });
-
   const useCodeBlockEdit = (codeBlockService) => {
     const codeConfig = vue.ref();
     const codeId = vue.ref();
@@ -3886,14 +3898,14 @@
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
               key: 0,
               class: "icon",
               icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             name: "params",
             key: _ctx.model[_ctx.name],
             model: _ctx.model,
@@ -3901,7 +3913,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3914,64 +3926,408 @@
     }
   });
 
-  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__ */ vue.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 = vue.inject("services");
-      const addDialog = vue.ref();
-      const fieldValues = vue.ref({});
-      const fieldTitle = vue.ref("");
-      const width = vue.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: "默认值",
-          prop: "defaultValue",
-          formatter(item, row) {
+  const useDataSourceMethod = () => {
+    const codeConfig = vue.ref();
+    const codeBlockEditor = vue.ref();
+    const dataSource = vue.ref();
+    const dataSourceMethod = vue.ref("");
+    return {
+      codeConfig,
+      codeBlockEditor,
+      createCode: async (model) => {
+        codeConfig.value = {
+          name: "",
+          content: `({ params, dataSource, app }) => {
+  // place your code here
+}`,
+          params: []
+        };
+        await vue.nextTick();
+        dataSource.value = model;
+        dataSourceMethod.value = "";
+        codeBlockEditor.value?.show();
+      },
+      editCode: async (model, methodName) => {
+        const method = model.methods?.find((method2) => method2.name === methodName);
+        if (!method) {
+          design.tMagicMessage.error("获取数据源方法失败");
+          return;
+        }
+        let codeContent = method.content;
+        if (typeof codeContent !== "string") {
+          codeContent = codeContent.toString();
+        }
+        codeConfig.value = {
+          ...lodashEs.cloneDeep(method),
+          content: codeContent
+        };
+        await vue.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 = vue.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 = utils.convertToNumber(stageRect.width, width);
+      let stageHeight = utils.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 = vue.computed(() => editorService.get("root"));
+  const page = vue.computed(() => editorService.get("page"));
+  const zoom = vue.computed(() => uiService.get("zoom") || 1);
+  const uiSelectMode = vue.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
+    });
+    vue.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 === StageCore.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 = vue.inject("services");
+    const floatBoxStates = vue.ref(
+      slideKeys.value.reduce(
+        (total, cur) => ({
+          ...total,
+          [cur]: {
+            status: false,
+            top: 0,
+            left: 0
+          }
+        }),
+        {}
+      )
+    );
+    const showingBoxKeys = vue.computed(
+      () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
+    );
+    const isDragging = vue.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();
+    });
+    vue.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__ */ vue.defineComponent({
+    ...{
+      name: "MFieldsDataSourceFields"
+    },
+    __name: "DataSourceFields",
+    props: /* @__PURE__ */ vue.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__ */ vue.mergeModels(["change"], ["update:width", "update:visible", "update:visible1"]),
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const services = vue.inject("services");
+      const fieldValues = vue.ref({});
+      const fieldTitle = vue.ref("");
+      const width = vue.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 {
               return JSON.stringify(row.defaultValue);
             } catch (e) {
@@ -3991,7 +4347,8 @@
                   index
                 };
                 fieldTitle.value = `编辑${row.title}`;
-                addDialog.value?.show();
+                calcBoxPosition();
+                addDialogVisible.value = true;
               }
             },
             {
@@ -4089,7 +4446,6 @@
           display: (formState, { model }) => model.type === "object" || model.type === "array"
         }
       ];
-      const addFromJsonDialog = vue.ref();
       const jsonFromConfig = [
         {
           name: "data",
@@ -4105,7 +4461,8 @@
       });
       const newFromJsonHandler = () => {
         jsonFromValues.value.data = utils.getDefaultValueFromFields(props.model[props.name]);
-        addFromJsonDialog.value?.show();
+        calcBoxPosition();
+        addFromJsonDialogVisible.value = true;
       };
       const getValueType = (value) => {
         if (Array.isArray(value))
@@ -4151,12 +4508,17 @@
         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) {
           design.tMagicMessage.error(e.message);
         }
       };
+      const addDialogVisible = vue.useModel(__props, "visible");
+      const addFromJsonDialogVisible = vue.useModel(__props, "visible1");
+      const { height: editorHeight } = useEditorContentHeight();
+      const parentFloating = vue.inject("parentFloating", vue.ref(null));
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
           vue.createVNode(vue.unref(table.MagicTable), {
@@ -4188,28 +4550,49 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(vue.unref(form.MFormDrawer), {
-            ref_key: "addDialog",
-            ref: addDialog,
-            "label-width": "80px",
+          vue.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: vue.unref(editorHeight),
+            "onUpdate:height": _cache[4] || (_cache[4] = ($event) => vue.isRef(editorHeight) ? editorHeight.value = $event : null),
             title: fieldTitle.value,
-            config: dataSourceFieldsConfig,
-            values: fieldValues.value,
-            parentValues: _ctx.model[_ctx.name],
-            disabled: _ctx.disabled,
+            position: vue.unref(boxPosition)
+          }, {
+            body: vue.withCtx(() => [
+              vue.createVNode(vue.unref(form.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"]),
+          vue.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"]),
-          vue.createVNode(vue.unref(form.MFormDrawer), {
-            ref_key: "addFromJsonDialog",
-            ref: addFromJsonDialog,
+            "onUpdate:width": _cache[6] || (_cache[6] = ($event) => width.value = $event),
+            height: vue.unref(editorHeight),
+            "onUpdate:height": _cache[7] || (_cache[7] = ($event) => vue.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: vue.unref(boxPosition)
+          }, {
+            body: vue.withCtx(() => [
+              vue.createVNode(vue.unref(form.MFormBox), {
+                config: jsonFromConfig,
+                values: jsonFromValues.value,
+                disabled: _ctx.disabled,
+                onSubmit: addFromJsonFromChange
+              }, null, 8, ["values", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["visible", "width", "height", "position"])
         ]);
       };
     }
@@ -4334,10 +4717,14 @@
             style: { "margin-left": "5px" },
             link: "",
             type: showDataSourceFieldSelect.value ? "primary" : "default",
-            icon: vue.unref(iconsVue.Coin),
             size: _ctx.size,
             onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
-          }, null, 8, ["type", "icon", "size"])) : vue.createCommentVNode("", true)
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["type", "size"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -4345,7 +4732,7 @@
 
   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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceInput"
@@ -4536,7 +4923,7 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$n, [
@@ -4547,7 +4934,7 @@
           _: 1
         }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
-          class: vue.normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
+          class: vue.normalizeClass(`tmagic-data-source-input-text el-input t-input t-size-${_ctx.size?.[0]} el-input--${_ctx.size}`),
           onMouseup: mouseupHandler
         }, [
           vue.createElementVNode("div", {
@@ -4571,7 +4958,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$N, {
+              vue.createVNode(_sfc_main$U, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -4582,78 +4969,6 @@
     }
   });
 
-  const useDataSourceMethod = () => {
-    const codeConfig = vue.ref();
-    const codeBlockEditor = vue.ref();
-    const dataSource = vue.ref();
-    const dataSourceMethod = vue.ref("");
-    return {
-      codeConfig,
-      codeBlockEditor,
-      createCode: async (model) => {
-        codeConfig.value = {
-          name: "",
-          content: `({ params, dataSource, app }) => {
-  // place your code here
-}`,
-          params: []
-        };
-        await vue.nextTick();
-        dataSource.value = model;
-        dataSourceMethod.value = "";
-        codeBlockEditor.value?.show();
-      },
-      editCode: async (model, methodName) => {
-        const method = model.methods?.find((method2) => method2.name === methodName);
-        if (!method) {
-          design.tMagicMessage.error("获取数据源方法失败");
-          return;
-        }
-        let codeContent = method.content;
-        if (typeof codeContent !== "string") {
-          codeContent = codeContent.toString();
-        }
-        codeConfig.value = {
-          ...lodashEs.cloneDeep(method),
-          content: codeContent
-        };
-        await vue.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__ */ vue.defineComponent({
@@ -4745,7 +5060,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4861,14 +5176,14 @@
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
               key: 0,
               class: "icon",
               icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCodeHandler
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -4877,7 +5192,7 @@
             "params-config": paramsConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4897,7 +5212,7 @@
       name: "MFieldsDataSourceMocks"
     },
     __name: "DataSourceMocks",
-    props: {
+    props: /* @__PURE__ */ vue.mergeModels({
       config: {},
       model: {},
       initValues: {},
@@ -4907,14 +5222,18 @@
       disabled: { type: Boolean, default: false },
       size: {},
       lastValues: {}
-    },
-    emits: ["change"],
+    }, {
+      "width": { default: 670 },
+      "widthModifiers": {},
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:width", "update:visible"]),
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
       const services = vue.inject("services");
-      const width = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
-      const addDialog = vue.ref();
+      const width = vue.useModel(__props, "width");
       const drawerTitle = vue.ref("");
       const formValues = vue.ref({});
       const formConfig = [
@@ -4979,7 +5298,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$U,
+          component: _sfc_main$T,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -5041,7 +5360,8 @@
                   index
                 };
                 drawerTitle.value = `编辑${row.title}`;
-                addDialog.value?.show();
+                calcBoxPosition();
+                addDialogVisible.value = true;
               }
             },
             {
@@ -5064,7 +5384,8 @@
           enable: isFirstRow
         };
         drawerTitle.value = "新增Mock";
-        addDialog.value?.show();
+        calcBoxPosition();
+        addDialogVisible.value = true;
       };
       const formChangeHandler = ({ index, ...value }) => {
         if (index > -1) {
@@ -5072,7 +5393,7 @@
         } 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) => {
@@ -5087,6 +5408,10 @@
           index
         });
       };
+      const addDialogVisible = vue.useModel(__props, "visible");
+      const { height: editorHeight } = useEditorContentHeight();
+      const parentFloating = vue.inject("parentFloating", vue.ref(null));
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createVNode(vue.unref(table.MagicTable), {
@@ -5107,18 +5432,29 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(vue.unref(form.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,
+          vue.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: vue.unref(editorHeight),
+            "onUpdate:height": _cache[3] || (_cache[3] = ($event) => vue.isRef(editorHeight) ? editorHeight.value = $event : null),
+            title: drawerTitle.value,
+            position: vue.unref(boxPosition)
+          }, {
+            body: vue.withCtx(() => [
+              vue.createVNode(vue.unref(form.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"])
         ]);
       };
     }
@@ -5583,7 +5919,7 @@
               _: 1
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("", true),
-          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
+          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
@@ -5664,7 +6000,7 @@
               size: _ctx.size,
               onChange: changeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
               key: 0,
               class: "icon",
               icon: vue.unref(iconsVue.Edit),
@@ -6149,7 +6485,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -6167,7 +6503,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -6255,7 +6591,7 @@
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+          vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
         ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d));
       };
     }
@@ -6367,7 +6703,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           _ctx.type === vue.unref(schema.NodeType).PAGE && pageLength.value || _ctx.type === vue.unref(schema.NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
@@ -6383,7 +6719,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -6623,7 +6959,7 @@
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$4
             ]),
@@ -6633,7 +6969,7 @@
               onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE_FRAGMENT))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_4$4
             ])) : vue.createCommentVNode("", true)
@@ -6724,7 +7060,7 @@
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$U, {
+            vue.createVNode(_sfc_main$T, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
@@ -7062,87 +7398,33 @@
             onChange: submit,
             onError: errorHandler
           }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"]),
-          vue.createVNode(vue.unref(design.TMagicButton), {
-            class: "m-editor-props-panel-src-icon",
-            circle: "",
-            size: "large",
-            title: "源码",
-            icon: vue.unref(iconsVue.Document),
-            type: showSrc.value ? "primary" : "",
-            onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
-          }, null, 8, ["icon", "type"]),
-          showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
-            key: 0,
-            height: `${vue.unref(editorContentHeight)}px`,
-            "init-values": values.value,
-            options: vue.unref(codeOptions),
-            parse: true,
-            onSave: saveCode
-          }, null, 8, ["height", "init-values", "options"])) : vue.createCommentVNode("", true)
-        ], 512)), [
-          [vue.vShow, nodes.value.length === 1]
-        ]);
-      };
-    }
-  });
-
-  const useFloatBox = (slideKeys) => {
-    const floatBoxStates = vue.ref(
-      slideKeys.value.reduce(
-        (total, cur) => ({
-          ...total,
-          [cur]: {
-            status: false,
-            top: 0,
-            left: 0
-          }
-        }),
-        {}
-      )
-    );
-    const showingBoxKeys = vue.computed(
-      () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
-    );
-    const isDragging = vue.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();
-    });
-    vue.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
-    };
-  };
+          vue.createVNode(vue.unref(design.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: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Document) }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["type"]),
+          showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+            key: 0,
+            height: `${vue.unref(editorContentHeight)}px`,
+            "init-values": values.value,
+            options: vue.unref(codeOptions),
+            parse: true,
+            onSave: saveCode
+          }, null, 8, ["height", "init-values", "options"])) : vue.createCommentVNode("", true)
+        ], 512)), [
+          [vue.vShow, nodes.value.length === 1]
+        ]);
+      };
+    }
+  });
 
   const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -7269,7 +7551,7 @@
             onContextmenu: nodeContentmenuHandler,
             onMouseenter: mouseenterHandler
           }, [
-            vue.createVNode(_sfc_main$N, {
+            vue.createVNode(_sfc_main$U, {
               class: "expand-icon",
               style: vue.normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
               icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
@@ -7548,7 +7830,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$U, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -7563,7 +7845,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$U, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -7589,8 +7871,7 @@
     },
     __name: "CodeBlockListPanel",
     props: {
-      customError: { type: Function },
-      slideType: {}
+      customError: { type: Function }
     },
     setup(__props) {
       const { codeBlockService } = vue.inject("services") || {};
@@ -7640,15 +7921,14 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
             disabled: !editable.value,
             content: vue.unref(codeConfig),
-            slideType: _ctx.slideType,
             onSubmit: vue.unref(submitCodeBlockHandler)
-          }, null, 8, ["disabled", "content", "slideType", "onSubmit"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("", true)
         ], 64);
       };
     }
@@ -7659,21 +7939,28 @@
       name: "MEditorDataSourceConfigPanel"
     },
     __name: "DataSourceConfigPanel",
-    props: {
+    props: /* @__PURE__ */ vue.mergeModels({
       title: {},
       values: {},
-      disabled: { type: Boolean },
-      slideType: {}
-    },
-    emits: ["submit"],
+      disabled: { type: Boolean }
+    }, {
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {},
+      "width": { default: 670 },
+      "widthModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:visible", "update:width"]),
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
+      const boxVisible = vue.useModel(__props, "visible");
+      const width = vue.useModel(__props, "width");
       const emit = __emit;
       const services = vue.inject("services");
-      const size = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
-      const fomDrawer = vue.ref();
       const initValues = vue.ref({});
       const dataSourceConfig = vue.ref([]);
+      const { height: editorHeight } = useEditorContentHeight();
+      const parentFloating = vue.inject("parentFloating", vue.ref(null));
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       vue.watchEffect(() => {
         initValues.value = props.values;
         dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
@@ -7686,26 +7973,38 @@
       };
       __expose({
         show() {
-          fomDrawer.value?.show();
+          calcBoxPosition();
+          boxVisible.value = true;
         },
         hide() {
-          fomDrawer.value?.hide();
+          boxVisible.value = false;
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slideType === "box" ? vue.unref(form.MFormBox) : vue.unref(form.MFormDrawer)), {
-          ref_key: "fomDrawer",
-          ref: fomDrawer,
-          "label-width": "80px",
-          "close-on-press-escape": false,
+        return vue.openBlock(), vue.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: vue.unref(editorHeight),
+          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.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: vue.unref(boxPosition)
+        }, {
+          body: vue.withCtx(() => [
+            vue.createVNode(vue.unref(form.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"]);
       };
     }
   });
@@ -7821,7 +8120,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$U, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -7836,7 +8135,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$U, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -7859,9 +8158,6 @@
       name: "MEditorDataSourceListPanel"
     },
     __name: "DataSourceListPanel",
-    props: {
-      slideType: {}
-    },
     setup(__props) {
       const { dataSourceService } = vue.inject("services") || {};
       const editDialog = vue.ref();
@@ -7956,9 +8252,11 @@
                 vue.renderSlot(_ctx.$slots, "data-source-panel-search")
               ]),
               vue.createVNode(_sfc_main$i, {
+                ref_key: "dataSourceList",
+                ref: dataSourceList,
                 onEdit: editHandler,
                 onRemove: removeHandler
-              })
+              }, null, 512)
             ]),
             _: 3
           }),
@@ -7968,9 +8266,8 @@
             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);
       };
     }
@@ -8372,12 +8669,12 @@
       };
       return (_ctx, _cache) => {
         return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
             key: 0,
             icon: vue.unref(iconsVue.Hide),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
             title: "点击显示"
-          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$U, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -9018,7 +9315,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -9039,7 +9336,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$N, {
+                                  vue.createVNode(_sfc_main$U, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -9090,7 +9387,8 @@
     setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
-      const columnLeftWitch = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
+      const columnLeftWidth = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
+      const { height: columnLeftHeight } = useEditorContentHeight();
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -9120,12 +9418,7 @@
             icon: iconsVue.EditPen,
             text: "代码编辑",
             component: _sfc_main$k,
-            slots: {},
-            boxComponentConfig: {
-              props: {
-                slideType: "box"
-              }
-            }
+            slots: {}
           },
           "data-source": {
             $key: "data-source",
@@ -9182,7 +9475,7 @@
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
                 }, [
-                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -9315,12 +9608,13 @@
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
               return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
-                  width: columnLeftWitch.value,
-                  height: 600,
+                  height: vue.unref(columnLeftHeight),
+                  "onUpdate:height": _cache[1] || (_cache[1] = ($event) => vue.isRef(columnLeftHeight) ? columnLeftHeight.value = $event : null),
+                  width: columnLeftWidth.value,
                   title: config.text,
                   position: {
                     left: vue.unref(floatBoxStates)[config.$key].left,
@@ -9329,11 +9623,11 @@
                 }, {
                   body: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_5$1, [
-                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.boxComponentConfig?.component || config.component), vue.mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
+                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
                     ])
                   ]),
                   _: 2
-                }, 1032, ["visible", "onUpdate:visible", "width", "title", "position"])) : vue.createCommentVNode("", true)
+                }, 1032, ["visible", "onUpdate:visible", "height", "width", "title", "position"])) : vue.createCommentVNode("", true)
               ], 64);
             }), 256))
           ]))
@@ -9665,211 +9959,6 @@
     }
   });
 
-  const state = vue.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 = utils.convertToNumber(stageRect.width, width);
-      let stageHeight = utils.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 = vue.computed(() => editorService.get("root"));
-  const page = vue.computed(() => editorService.get("page"));
-  const zoom = vue.computed(() => uiService.get("zoom") || 1);
-  const uiSelectMode = vue.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
-    });
-    vue.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 === StageCore.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__ */ vue.defineComponent({
     __name: "NodeListMenu",
     setup(__props) {
@@ -9952,7 +10041,7 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -10025,7 +10114,7 @@
         }, [
           vue.createVNode(vue.unref(design.TMagicIcon), {
             class: "m-editor-stage-overlay-close",
-            size: 20,
+            size: "20",
             onClick: closeOverlayHandler
           }, {
             default: vue.withCtx(() => [
@@ -11672,11 +11761,11 @@
       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);
@@ -11697,11 +11786,11 @@
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$P;
+  exports.CodeBlockEditor = _sfc_main$O;
   exports.CodeBlockList = _sfc_main$l;
   exports.CodeBlockListPanel = _sfc_main$k;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$R;
+  exports.CodeSelect = _sfc_main$Q;
   exports.CodeSelectCol = _sfc_main$M;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$b;
@@ -11718,7 +11807,7 @@
   exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$N;
+  exports.Icon = _sfc_main$U;
   exports.KeyBindingCommand = KeyBindingCommand;
   exports.KeyValue = _sfc_main$C;
   exports.Keys = Keys;
@@ -11730,7 +11819,7 @@
   exports.PropsPanel = _sfc_main$p;
   exports.Resizer = _sfc_main$z;
   exports.SplitView = _sfc_main$y;
-  exports.TMagicCodeEditor = _sfc_main$U;
+  exports.TMagicCodeEditor = _sfc_main$T;
   exports.TMagicEditor = _sfc_main;
   exports.ToolButton = _sfc_main$x;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;