@tmagic/editor 1.3.16 → 1.4.0-beta.2

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('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('moveable'), 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', '@tmagic/table', '@tmagic/utils', 'gesto', 'moveable', '@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.table, global.utils, global.Gesto, global.VanillaMoveable, global.dep, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, table, utils, Gesto, VanillaMoveable, 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('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';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -223,7 +223,7 @@
 
   const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCode"
+      name: "MFieldsVsCode"
     },
     __name: "Code",
     props: {
@@ -263,7 +263,7 @@
 
   const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCodeLink"
+      name: "MFieldsCodeLink"
     },
     __name: "CodeLink",
     props: {
@@ -343,7 +343,7 @@
 
   const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCodeSelect"
+      name: "MFieldsCodeSelect"
     },
     __name: "CodeSelect",
     props: {
@@ -459,49 +459,235 @@
     }
   });
 
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+    __name: "FloatingBox",
+    props: /* @__PURE__ */ vue.mergeModels({
+      position: { default: () => ({ left: 0, top: 0 }) },
+      title: { default: "" },
+      beforeClose: {}
+    }, {
+      "width": { default: 0 },
+      "widthModifiers": {},
+      "height": { default: 0 },
+      "heightModifiers": {},
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {}
+    }),
+    emits: ["update:width", "update:height", "update:visible"],
+    setup(__props, { expose: __expose }) {
+      const width = vue.useModel(__props, "width");
+      const height = vue.useModel(__props, "height");
+      const visible = vue.useModel(__props, "visible");
+      const props = __props;
+      const target = vue.ref();
+      const titleEl = vue.ref();
+      const zIndex = design.useZIndex();
+      const curZIndex = vue.ref(zIndex.nextZIndex());
+      const titleHeight = vue.ref(0);
+      const bodyHeight = vue.computed(() => {
+        if (height.value) {
+          return height.value - titleHeight.value;
+        }
+        if (target.value) {
+          return target.value.clientHeight - titleHeight.value;
+        }
+        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"
+      }));
+      let moveable = null;
+      const initMoveable = () => {
+        moveable = new VanillaMoveable(globalThis.document.body, {
+          className: "m-editor-floating-box-moveable",
+          target: target.value,
+          draggable: true,
+          resizable: true,
+          edge: true,
+          keepRatio: false,
+          origin: false,
+          snappable: true,
+          dragTarget: titleEl.value,
+          dragTargetSelf: false,
+          linePadding: 10,
+          controlPadding: 10,
+          bounds: { left: 0, top: 0, right: 0, bottom: 0, position: "css" }
+        });
+        moveable.on("drag", (e) => {
+          e.target.style.transform = e.transform;
+        });
+        moveable.on("resize", (e) => {
+          width.value = e.width;
+          height.value = e.height;
+          e.target.style.width = `${e.width}px`;
+          e.target.style.height = `${e.height}px`;
+          e.target.style.transform = e.drag.transform;
+        });
+      };
+      const destroyMoveable = () => {
+        moveable?.destroy();
+        moveable = null;
+      };
+      vue.watch(
+        visible,
+        async (visible2) => {
+          if (visible2) {
+            await vue.nextTick();
+            const targetRect = target.value?.getBoundingClientRect();
+            if (targetRect) {
+              width.value = targetRect.width;
+              height.value = targetRect.height;
+              initMoveable();
+            }
+            if (titleEl.value) {
+              const titleRect = titleEl.value.getBoundingClientRect();
+              titleHeight.value = titleRect.height;
+            }
+          } else {
+            destroyMoveable();
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.onBeforeUnmount(() => {
+        destroyMoveable();
+      });
+      const hide = (cancel) => {
+        if (cancel !== false) {
+          visible.value = false;
+        }
+      };
+      const closeHandler = () => {
+        if (typeof props.beforeClose === "function") {
+          props.beforeClose(hide);
+        } else {
+          hide();
+        }
+      };
+      const nextZIndex = () => {
+        curZIndex.value = zIndex.nextZIndex();
+      };
+      __expose({
+        bodyHeight,
+        target,
+        titleEl
+      });
+      return (_ctx, _cache) => {
+        return visible.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          key: 0,
+          to: "body"
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "target",
+            ref: target,
+            class: "m-editor-float-box",
+            style: vue.normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
+            onMousedown: nextZIndex
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "titleEl",
+              ref: titleEl,
+              class: "m-editor-float-box-title"
+            }, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+              ]),
+              vue.createElementVNode("div", null, [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  link: "",
+                  size: "small",
+                  icon: vue.unref(iconsVue.Close),
+                  onClick: closeHandler
+                }, null, 8, ["icon"])
+              ])
+            ], 512),
+            vue.createElementVNode("div", {
+              class: "m-editor-float-box-body",
+              style: vue.normalizeStyle({ height: `${bodyHeight.value}px` })
+            }, [
+              vue.renderSlot(_ctx.$slots, "body")
+            ], 4)
+          ], 36)
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const useEditorContentHeight = () => {
+    const services = vue.inject("services");
+    const frameworkHeight = vue.computed(() => services?.uiService.get("frameworkRect").height || 0);
+    const navMenuHeight = vue.computed(() => services?.uiService.get("navMenuRect").height || 0);
+    const editorContentHeight = vue.computed(() => frameworkHeight.value - navMenuHeight.value);
+    const height = vue.ref(0);
+    vue.watchEffect(() => {
+      if (height.value > 0)
+        return;
+      height.value = editorContentHeight.value;
+    });
+    return {
+      height
+    };
+  };
+
+  const useWindowRect = () => {
+    const rect = vue.reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+    const windowResizeHandler = () => {
+      rect.width = globalThis.innerWidth;
+      rect.height = globalThis.innerHeight;
+    };
+    globalThis.addEventListener("resize", windowResizeHandler);
+    vue.onBeforeUnmount(() => {
+      globalThis.removeEventListener("resize", windowResizeHandler);
+    });
+    return {
+      rect
+    };
+  };
+
   const _hoisted_1$s = { 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$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
     __name: "CodeBlockEditor",
-    props: {
+    props: /* @__PURE__ */ vue.mergeModels({
       content: {},
       disabled: { type: Boolean },
       isDataSource: { type: Boolean },
       dataSourceType: {},
       slideType: {}
-    },
-    emits: ["submit"],
+    }, {
+      "width": { default: 670 },
+      "widthModifiers": {},
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:width", "update:visible"]),
     setup(__props, { expose: __expose, emit: __emit }) {
+      const width = vue.useModel(__props, "width");
+      const boxVisible = vue.useModel(__props, "visible");
       const props = __props;
       const emit = __emit;
       const services = vue.inject("services");
+      const { height: codeBlockEditorHeight } = useEditorContentHeight();
       const difVisible = vue.ref(false);
-      const height = vue.ref(globalThis.innerHeight);
-      const windowReizehandler = () => {
-        height.value = globalThis.innerHeight;
-      };
-      globalThis.addEventListener("resize", windowReizehandler);
-      vue.onBeforeUnmount(() => {
-        globalThis.removeEventListener("resize", windowReizehandler);
-      });
+      const { rect: windowRect } = useWindowRect();
       const magicVsEditor = vue.ref();
       const diffChange = () => {
-        if (!magicVsEditor.value || !fomDrawer.value?.form) {
+        if (!magicVsEditor.value || !formBox.value?.form) {
           return;
         }
-        fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue();
+        formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
         difVisible.value = false;
       };
-      const columnWidth = vue.computed(() => services?.uiService.get("columnWidth"));
-      const size = vue.computed(
-        () => columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600
-      );
-      const codeEditorHeight = vue.ref("600px");
       const defaultParamColConfig = {
         type: "row",
         label: "参数类型",
@@ -584,7 +770,7 @@
           name: "content",
           type: "vs-code",
           options: vue.inject("codeOptions", {}),
-          height: codeEditorHeight.value,
+          height: "500px",
           onChange: (formState, code) => {
             try {
               getConfig("parseDSL")(code);
@@ -597,26 +783,20 @@
         }
       ]);
       const submitForm = (values) => {
+        changedValue.value = void 0;
         emit("submit", values);
       };
       const errorHandler = (error) => {
         design.tMagicMessage.error(error.message);
       };
-      const fomDrawer = vue.ref();
-      const openHandler = () => {
-        setTimeout(() => {
-          if (fomDrawer.value) {
-            const height2 = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
-            codeEditorHeight.value = `${height2 > 100 ? height2 : 600}px`;
-          }
-        });
-      };
+      const formBox = vue.ref();
       const changedValue = vue.ref();
       const changeHandler = (values) => {
         changedValue.value = values;
       };
       const beforeClose = (done) => {
         if (!changedValue.value) {
+          editVisible.value = false;
           done();
           return;
         }
@@ -627,59 +807,106 @@
           distinguishCancelAndClose: true
         }).then(() => {
           changedValue.value && submitForm(changedValue.value);
+          editVisible.value = false;
           done();
         }).catch((action) => {
-          done(action === "close");
+          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)
+        };
+      });
       __expose({
-        show() {
-          fomDrawer.value?.show();
+        async show() {
+          if (props.slideType !== "box") {
+            boxVisible.value = true;
+            await vue.nextTick();
+          }
+          editVisible.value = true;
         },
-        hide() {
-          fomDrawer.value?.hide();
+        async hide() {
+          editVisible.value = false;
+          if (props.slideType !== "box") {
+            await vue.nextTick();
+            boxVisible.value = false;
+          }
         }
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slideType === "box" ? vue.unref(form.MFormBox) : vue.unref(form.MFormDrawer)), {
-            class: "m-editor-code-block-editor",
-            ref_key: "fomDrawer",
-            ref: fomDrawer,
-            "label-width": "80px",
-            "close-on-press-escape": false,
-            title: _ctx.content.name,
-            width: size.value,
-            config: functionConfig.value,
-            values: _ctx.content,
-            disabled: _ctx.disabled,
-            "before-close": beforeClose,
-            onChange: changeHandler,
-            onSubmit: submitForm,
-            onError: errorHandler,
-            onOpen: openHandler,
-            onClosed: closedHandler
+          vue.createVNode(_sfc_main$Q, {
+            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(codeBlockEditorHeight),
+            "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+            title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
+            position: boxPosition.value,
+            "before-close": beforeClose
           }, {
-            left: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
-                type: "primary",
-                link: "",
-                onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode("查看修改")
-                ]),
-                _: 1
-              })
+            body: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                ref_key: "floatingBoxBody",
+                ref: floatingBoxBody,
+                style: { "height": "100%" }
+              }, null, 512)
             ]),
             _: 1
-          }, 40, ["title", "width", "config", "values", "disabled"])),
+          }, 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
+            }, {
+              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[2] || (_cache[2] = ($event) => difVisible.value = $event),
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
             title: "查看修改",
             fullscreen: ""
           }, {
@@ -687,7 +914,7 @@
               vue.createElementVNode("span", _hoisted_4$7, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
-                  onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
+                  onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
                 }, {
                   default: vue.withCtx(() => [
                     vue.createTextVNode("取消")
@@ -738,8 +965,8 @@
                 type: "diff",
                 language: "json",
                 initValues: _ctx.content.content,
-                modifiedValues: fomDrawer.value?.form?.values.content,
-                style: vue.normalizeStyle(`height: ${height.value - 200}px`)
+                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
@@ -1146,6 +1373,9 @@
         });
       });
     }
+    /**
+     * @deprecated 请使用usePlugin代替
+     */
     use(options) {
       Object.entries(options).forEach(([methodName2, method]) => {
         if (typeof method === "function")
@@ -1177,6 +1407,23 @@
     }
   }
 
+  const canUsePluginMethods$6 = {
+    async: [],
+    sync: [
+      "getFormConfig",
+      "setFormConfig",
+      "getFormValue",
+      "setFormValue",
+      "getFormEvent",
+      "setFormEvent",
+      "getFormMethod",
+      "setFormMethod",
+      "add",
+      "update",
+      "remove",
+      "createId"
+    ]
+  };
   class DataSource extends BaseService {
     state = vue.reactive({
       datasourceTypeList: [],
@@ -1188,20 +1435,7 @@
       methods: {}
     });
     constructor() {
-      super([
-        { name: "getFormConfig", isAsync: false },
-        { name: "setFormConfig", isAsync: false },
-        { name: "getFormValue", isAsync: false },
-        { name: "setFormValue", isAsync: false },
-        { name: "getFormEvent", isAsync: false },
-        { name: "setFormEvent", isAsync: false },
-        { name: "getFormMethod", isAsync: false },
-        { name: "setFormMethod", isAsync: false },
-        { name: "add", isAsync: false },
-        { name: "update", isAsync: false },
-        { name: "remove", isAsync: false },
-        { name: "createId", isAsync: false }
-      ]);
+      super(canUsePluginMethods$6.sync.map((methodName) => ({ name: methodName, isAsync: false })));
     }
     set(name, value) {
       this.state[name] = value;
@@ -1210,28 +1444,28 @@
       return this.state[name];
     }
     getFormConfig(type = "base") {
-      return getFormConfig(type, this.get("configs"));
+      return getFormConfig(utils.toLine(type), this.get("configs"));
     }
     setFormConfig(type, config) {
-      this.get("configs")[type] = config;
+      this.get("configs")[utils.toLine(type)] = config;
     }
     getFormValue(type = "base") {
-      return getFormValue(type, this.get("values")[type]);
+      return getFormValue(utils.toLine(type), this.get("values")[type]);
     }
     setFormValue(type, value) {
-      this.get("values")[type] = value;
+      this.get("values")[utils.toLine(type)] = value;
     }
     getFormEvent(type = "base") {
-      return this.get("events")[type] || [];
+      return this.get("events")[utils.toLine(type)] || [];
     }
     setFormEvent(type, value = []) {
-      this.get("events")[type] = value;
+      this.get("events")[utils.toLine(type)] = value;
     }
     getFormMethod(type = "base") {
-      return this.get("methods")[type] || [];
+      return this.get("methods")[utils.toLine(type)] || [];
     }
     setFormMethod(type, value = []) {
-      this.get("methods")[type] = value;
+      this.get("methods")[utils.toLine(type)] = value;
     }
     add(config) {
       const newConfig = {
@@ -1255,6 +1489,9 @@
       dataSources.splice(index, 1);
       this.emit("remove", id);
     }
+    createId() {
+      return `ds_${utils.guid()}`;
+    }
     getDataSourceById(id) {
       return this.get("dataSources").find((ds) => ds.id === id);
     }
@@ -1266,8 +1503,8 @@
       this.resetState();
       this.removeAllPlugins();
     }
-    createId() {
-      return `ds_${utils.guid()}`;
+    usePlugin(options) {
+      super.usePlugin(options);
     }
   }
   const dataSourceService = new DataSource();
@@ -1290,7 +1527,6 @@
   ];
   const styleTabConfig = {
     title: "样式",
-    labelWidth: "80px",
     items: [
       {
         name: "style",
@@ -1300,29 +1536,58 @@
             legend: "位置",
             items: [
               {
+                type: "data-source-field-select",
                 name: "position",
-                type: "checkbox",
-                activeValue: "fixed",
-                inactiveValue: "absolute",
-                defaultValue: "absolute",
-                text: "固定定位"
+                text: "固定定位",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "checkbox",
+                  activeValue: "fixed",
+                  inactiveValue: "absolute",
+                  defaultValue: "absolute"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "left",
-                text: "left"
+                text: "left",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "top",
                 text: "top",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                },
                 disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
               },
               {
+                type: "data-source-field-select",
                 name: "right",
-                text: "right"
+                text: "right",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "bottom",
                 text: "bottom",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                },
                 disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
               }
             ]
@@ -1332,12 +1597,42 @@
             legend: "盒子",
             items: [
               {
+                type: "data-source-field-select",
                 name: "width",
-                text: "宽度"
+                text: "宽度",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "height",
-                text: "高度"
+                text: "高度",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
+              },
+              {
+                type: "data-source-field-select",
+                text: "overflow",
+                name: "overflow",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "select",
+                  options: [
+                    { text: "visible", value: "visible" },
+                    { text: "hidden", value: "hidden" },
+                    { text: "clip", value: "clip" },
+                    { text: "scroll", value: "scroll" },
+                    { text: "auto", value: "auto" },
+                    { text: "overlay", value: "overlay" }
+                  ]
+                }
               }
             ]
           },
@@ -1346,32 +1641,48 @@
             legend: "边框",
             items: [
               {
+                type: "data-source-field-select",
                 name: "borderWidth",
                 text: "宽度",
-                defaultValue: "0"
+                defaultValue: "0",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "borderColor",
                 text: "颜色",
-                type: "colorPicker"
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "borderStyle",
                 text: "样式",
-                type: "select",
                 defaultValue: "none",
-                options: [
-                  { text: "none", value: "none" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "dotted", value: "dotted" },
-                  { text: "dashed", value: "dashed" },
-                  { text: "solid", value: "solid" },
-                  { text: "double", value: "double" },
-                  { text: "groove", value: "groove" },
-                  { text: "ridge", value: "ridge" },
-                  { text: "inset", value: "inset" },
-                  { text: "outset", value: "outset" }
-                ]
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "select",
+                  options: [
+                    { text: "none", value: "none" },
+                    { text: "hidden", value: "hidden" },
+                    { text: "dotted", value: "dotted" },
+                    { text: "dashed", value: "dashed" },
+                    { text: "solid", value: "solid" },
+                    { text: "double", value: "double" },
+                    { text: "groove", value: "groove" },
+                    { text: "ridge", value: "ridge" },
+                    { text: "inset", value: "inset" },
+                    { text: "outset", value: "outset" }
+                  ]
+                }
               }
             ]
           },
@@ -1380,31 +1691,53 @@
             legend: "背景",
             items: [
               {
+                type: "data-source-field-select",
                 name: "backgroundImage",
-                text: "背景图"
+                text: "背景图",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "backgroundColor",
                 text: "背景颜色",
-                type: "colorPicker"
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "colorPicker"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "backgroundRepeat",
                 text: "背景图重复",
-                type: "select",
                 defaultValue: "no-repeat",
-                options: [
-                  { text: "repeat", value: "repeat" },
-                  { text: "repeat-x", value: "repeat-x" },
-                  { text: "repeat-y", value: "repeat-y" },
-                  { text: "no-repeat", value: "no-repeat" },
-                  { text: "inherit", value: "inherit" }
-                ]
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "select",
+                  options: [
+                    { text: "repeat", value: "repeat" },
+                    { text: "repeat-x", value: "repeat-x" },
+                    { text: "repeat-y", value: "repeat-y" },
+                    { text: "no-repeat", value: "no-repeat" },
+                    { text: "inherit", value: "inherit" }
+                  ]
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "backgroundSize",
                 text: "背景图大小",
-                defaultValue: "100% 100%"
+                defaultValue: "100% 100%",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               }
             ]
           },
@@ -1413,17 +1746,34 @@
             legend: "字体",
             items: [
               {
+                type: "data-source-field-select",
                 name: "color",
                 text: "颜色",
-                type: "colorPicker"
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "colorPicker"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "fontSize",
-                text: "大小"
+                text: "大小",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "fontWeight",
-                text: "粗细"
+                text: "粗细",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               }
             ]
           },
@@ -1433,12 +1783,24 @@
             name: "transform",
             items: [
               {
+                type: "data-source-field-select",
                 name: "rotate",
-                text: "旋转角度"
+                text: "旋转角度",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "scale",
-                text: "缩放"
+                text: "缩放",
+                checkStrictly: false,
+                dataSourceFieldType: ["number", "string"],
+                fieldConfig: {
+                  type: "text"
+                }
               }
             ]
           }
@@ -1464,13 +1826,11 @@
       {
         name: "created",
         text: "created",
-        labelWidth: "100px",
         type: "code-select"
       },
       {
         name: "mounted",
         text: "mounted",
-        labelWidth: "100px",
         type: "code-select"
       }
     ]
@@ -1493,14 +1853,22 @@
                 type: "data-source-field-select",
                 name: "field",
                 value: "key",
-                label: "字段"
+                label: "字段",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number", "boolean", "any"]
               },
               {
                 type: "select",
                 options: (mForm, { model }) => {
-                  const [id, field] = model.field;
+                  const [id, ...fieldNames] = model.field;
                   const ds = dataSourceService.getDataSourceById(id);
-                  const type = ds?.fields.find((f) => f.name === field)?.type;
+                  let fields = ds?.fields || [];
+                  let type = "";
+                  (fieldNames || []).forEach((fieldName) => {
+                    const field = fields.find((f) => f.name === fieldName);
+                    fields = field?.fields || [];
+                    type = field?.type || "";
+                  });
                   if (type === "array") {
                     return arrayOptions;
                   }
@@ -1527,9 +1895,15 @@
                   {
                     name: "value",
                     type: (mForm, { model }) => {
-                      const [id, field] = model.field;
+                      const [id, ...fieldNames] = model.field;
                       const ds = dataSourceService.getDataSourceById(id);
-                      const type = ds?.fields.find((f) => f.name === field)?.type;
+                      let fields = ds?.fields || [];
+                      let type = "";
+                      (fieldNames || []).forEach((fieldName) => {
+                        const field = fields.find((f) => f.name === fieldName);
+                        fields = field?.fields || [];
+                        type = field?.type || "";
+                      });
                       if (type === "number") {
                         return "number";
                       }
@@ -1557,13 +1931,13 @@
       }
     ]
   };
-  const fillConfig = (config = []) => [
+  const fillConfig = (config = [], labelWidth = "80px") => [
     {
       type: "tab",
+      labelWidth,
       items: [
         {
           title: "属性",
-          labelWidth: "80px",
           items: [
             // 组件类型，必须要有
             {
@@ -1900,6 +2274,17 @@
   }
   const depService = new Dep();
 
+  const canUsePluginMethods$5 = {
+    async: [
+      "setPropsConfig",
+      "getPropsConfig",
+      "setPropsValue",
+      "getPropsValue",
+      "fillConfig",
+      "getDefaultPropsValue"
+    ],
+    sync: ["createId", "setNewItemId"]
+  };
   class Props extends BaseService {
     state = vue.reactive({
       propsConfigMap: {},
@@ -1908,14 +2293,8 @@
     });
     constructor() {
       super([
-        { name: "setPropsConfig", isAsync: true },
-        { name: "getPropsConfig", isAsync: true },
-        { name: "setPropsValue", isAsync: true },
-        { name: "getPropsValue", isAsync: true },
-        { name: "createId", isAsync: false },
-        { name: "setNewItemId", isAsync: true },
-        { name: "fillConfig", isAsync: true },
-        { name: "getDefaultPropsValue", isAsync: true }
+        ...canUsePluginMethods$5.async.map((methodName) => ({ name: methodName, isAsync: true })),
+        ...canUsePluginMethods$5.sync.map((methodName) => ({ name: methodName, isAsync: false }))
       ]);
     }
     setPropsConfigs(configs) {
@@ -1924,16 +2303,11 @@
       });
       this.emit("props-configs-change");
     }
-    async fillConfig(config) {
-      return fillConfig(config);
+    async fillConfig(config, labelWidth) {
+      return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
     }
-    /**
-     * 为指定类型组件设置组件属性表单配置
-     * @param type 组件类型
-     * @param config 组件属性表单配置
-     */
     async setPropsConfig(type, config) {
-      this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
     }
     /**
      * 获取指点类型的组件属性表单配置
@@ -1944,7 +2318,7 @@
       if (type === "area") {
         return await this.getPropsConfig("button");
       }
-      return lodashEs.cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+      return lodashEs.cloneDeep(this.state.propsConfigMap[utils.toLine(type)] || await this.fillConfig([]));
     }
     setPropsValues(values) {
       Object.keys(values).forEach((type) => {
@@ -1957,14 +2331,15 @@
      * @param value 组件初始值
      */
     async setPropsValue(type, value) {
-      this.state.propsValueMap[type] = value;
+      this.state.propsValueMap[utils.toLine(type)] = value;
     }
     /**
      * 获取指定类型的组件初始值
      * @param type 组件类型
      * @returns 组件初始值
      */
-    async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
+    async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+      const type = utils.toLine(componentType);
       if (type === "area") {
         const value = await this.getPropsValue("button");
         value.className = "action-area";
@@ -1974,23 +2349,21 @@
         }
         return value;
       }
-      const [id, defaultPropsValue, data] = await Promise.all([
-        this.createId(type),
-        this.getDefaultPropsValue(type),
-        this.setNewItemId(
-          lodashEs.cloneDeep({
-            type,
-            ...defaultValue
-          })
-        )
-      ]);
+      const id = this.createId(type);
+      const defaultPropsValue = this.getDefaultPropsValue(type);
+      const data = this.setNewItemId(
+        lodashEs.cloneDeep({
+          type,
+          ...defaultValue
+        })
+      );
       return {
         id,
         ...defaultPropsValue,
         ...lodashEs.mergeWith({}, lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
       };
     }
-    async createId(type) {
+    createId(type) {
       return `${type}_${utils.guid()}`;
     }
     /**
@@ -2000,15 +2373,15 @@
      * @param {Boolean} force 是否强制设置新的ID
      */
     /* eslint no-param-reassign: ["error", { "props": false }] */
-    async setNewItemId(config, force = true) {
+    setNewItemId(config, force = true) {
       if (force || editorService.getNodeById(config.id)) {
-        const newId = await this.createId(config.type || "component");
+        const newId = this.createId(config.type || "component");
         this.setRelateId(config.id, newId);
         config.id = newId;
       }
       if (config.items && Array.isArray(config.items)) {
         for (const item of config.items) {
-          await this.setNewItemId(item);
+          this.setNewItemId(item);
         }
       }
       return config;
@@ -2018,7 +2391,7 @@
      * @param type 组件类型
      * @returns Object
      */
-    async getDefaultPropsValue(type) {
+    getDefaultPropsValue(type) {
       return ["page", "container"].includes(type) ? {
         type,
         layout: "absolute",
@@ -2072,6 +2445,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     /**
      * 获取setNewItemId前后映射关系
      * @param oldId 原组件ID
@@ -2231,18 +2607,15 @@
     Protocol2["BOOLEAN"] = "boolean";
     return Protocol2;
   })(Protocol || {});
+  const canUsePluginMethods$4 = {
+    async: [],
+    sync: ["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]
+  };
   class WebStorage extends BaseService {
     storage = globalThis.localStorage;
     namespace = "tmagic";
     constructor() {
-      super([
-        { name: "getStorage", isAsync: false },
-        { name: "getNamespace", isAsync: false },
-        { name: "clear", isAsync: false },
-        { name: "getItem", isAsync: false },
-        { name: "removeItem", isAsync: false },
-        { name: "setItem", isAsync: false }
-      ]);
+      super(canUsePluginMethods$4.sync.map((methodName) => ({ name: methodName, isAsync: false })));
     }
     /**
      * 获取数据存储对象，可以通过
@@ -2325,6 +2698,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     getValueAndProtocol(value) {
       let protocol = "";
       if (value === null) {
@@ -2345,6 +2721,33 @@
   }
   const storageService = new WebStorage();
 
+  const canUsePluginMethods$3 = {
+    async: [
+      "getLayout",
+      "highlight",
+      "select",
+      "multiSelect",
+      "doAdd",
+      "add",
+      "doRemove",
+      "remove",
+      "doUpdate",
+      "update",
+      "sort",
+      "copy",
+      "paste",
+      "doPaste",
+      "doAlignCenter",
+      "alignCenter",
+      "moveLayer",
+      "moveToContainer",
+      "dragTo",
+      "undo",
+      "redo",
+      "move"
+    ],
+    sync: []
+  };
   class Editor extends BaseService {
     state = vue.reactive({
       root: null,
@@ -2363,29 +2766,7 @@
     isHistoryStateChange = false;
     constructor() {
       super(
-        [
-          { name: "getLayout", isAsync: true },
-          { name: "select", isAsync: true },
-          { name: "doAdd", isAsync: true },
-          { name: "add", isAsync: true },
-          { name: "doRemove", isAsync: true },
-          { name: "remove", isAsync: true },
-          { name: "doUpdate", isAsync: true },
-          { name: "update", isAsync: true },
-          { name: "sort", isAsync: true },
-          { name: "copy", isAsync: true },
-          { name: "paste", isAsync: true },
-          { name: "doPaste", isAsync: true },
-          { name: "doAlignCenter", isAsync: true },
-          { name: "alignCenter", isAsync: true },
-          { name: "moveLayer", isAsync: true },
-          { name: "moveToContainer", isAsync: true },
-          { name: "move", isAsync: true },
-          { name: "undo", isAsync: true },
-          { name: "redo", isAsync: true },
-          { name: "highlight", isAsync: true },
-          { name: "dragTo", isAsync: true }
-        ],
+        canUsePluginMethods$3.async.map((methodName) => ({ name: methodName, isAsync: true })),
         // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
         ["select", "update", "moveLayer"]
       );
@@ -2887,7 +3268,7 @@
     }
     async doPaste(config, position = {}) {
       propsService.clearRelateId();
-      const pasteConfigs = await beforePaste(position, lodashEs.cloneDeep(config));
+      const pasteConfigs = beforePaste(position, lodashEs.cloneDeep(config));
       return pasteConfigs;
     }
     async doAlignCenter(config) {
@@ -3125,6 +3506,9 @@
     resetModifiedNodeId() {
       this.get("modifiedNodeIds").clear();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     addModifiedNodeId(id) {
       if (!this.isHistoryStateChange) {
         this.get("modifiedNodeIds").set(id, id);
@@ -3192,45 +3576,43 @@
   }
   const editorService = new Editor();
 
-  const beforePaste = async (position, config) => {
+  const beforePaste = (position, config) => {
     if (!config[0]?.style)
       return config;
     const curNode = editorService.get("node");
     const { left: referenceLeft, top: referenceTop } = config[0].style;
-    const pasteConfigs = await Promise.all(
-      config.map(async (configItem) => {
-        const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-        let pastePosition = positionClone;
-        if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
-          pastePosition = getPositionInContainer(pastePosition, curNode.id);
-        }
-        if (pastePosition.left && configItem.style?.left) {
-          pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-        }
-        if (pastePosition.top && configItem.style?.top) {
-          pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-        }
-        const pasteConfig = await propsService.setNewItemId(configItem, false);
-        if (pasteConfig.style) {
-          const { left, top } = pasteConfig.style;
-          if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-            pasteConfig.style.left = Number(left) + offsetX;
-          }
-          if (typeof top === "number" || !!top && !isNaN(Number(top))) {
-            pasteConfig.style.top = Number(top) + offsetY;
-          }
-          pasteConfig.style = {
-            ...pasteConfig.style,
-            ...pastePosition
-          };
-        }
-        const root = editorService.get("root");
-        if ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
-          pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.NodeType.PAGE_FRAGMENT);
-        }
-        return pasteConfig;
-      })
-    );
+    const pasteConfigs = config.map((configItem) => {
+      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+      let pastePosition = positionClone;
+      if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
+        pastePosition = getPositionInContainer(pastePosition, curNode.id);
+      }
+      if (pastePosition.left && configItem.style?.left) {
+        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+      }
+      if (pastePosition.top && configItem.style?.top) {
+        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+      }
+      const pasteConfig = propsService.setNewItemId(configItem, false);
+      if (pasteConfig.style) {
+        const { left, top } = pasteConfig.style;
+        if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+          pasteConfig.style.left = Number(left) + offsetX;
+        }
+        if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+          pasteConfig.style.top = Number(top) + offsetY;
+        }
+        pasteConfig.style = {
+          ...pasteConfig.style,
+          ...pastePosition
+        };
+      }
+      const root = editorService.get("root");
+      if ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
+        pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.NodeType.PAGE_FRAGMENT);
+      }
+      return pasteConfig;
+    });
     return pasteConfigs;
   };
   const getPositionInContainer = (position = {}, id) => {
@@ -3264,7 +3646,7 @@
     return newNode;
   };
 
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3315,7 +3697,7 @@
   });
 
   const _hoisted_1$r = ["src"];
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -3368,7 +3750,7 @@
         return;
       }
       codeConfig.value = {
-        name: "代码块",
+        name: "",
         content: `({app, params}) => {
   // place your code here
 }`,
@@ -3419,9 +3801,9 @@
 
   const _hoisted_1$q = { class: "m-fields-code-select-col" };
   const _hoisted_2$j = { class: "code-select-container" };
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCodeSelectCol"
+      name: "MFieldsCodeSelectCol"
     },
     __name: "CodeSelectCol",
     props: {
@@ -3504,14 +3886,14 @@
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               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$P, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             name: "params",
             key: _ctx.model[_ctx.name],
             model: _ctx.model,
@@ -3519,7 +3901,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$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3534,9 +3916,9 @@
 
   const _hoisted_1$p = { class: "m-editor-data-source-fields" };
   const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceFields"
+      name: "MFieldsDataSourceFields"
     },
     __name: "DataSourceFields",
     props: {
@@ -3588,7 +3970,14 @@
         },
         {
           label: "默认值",
-          prop: "defaultValue"
+          prop: "defaultValue",
+          formatter(item, row) {
+            try {
+              return JSON.stringify(row.defaultValue);
+            } catch (e) {
+              return row.defaultValue;
+            }
+          }
         },
         {
           label: "操作",
@@ -3826,7 +4215,11 @@
     }
   });
 
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MFieldsDataSourceFieldSelect"
+    },
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3845,48 +4238,117 @@
       const emit = __emit;
       const props = __props;
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
-      const getOptionChildren = (fields = []) => fields.map((field) => ({
-        label: field.title || field.name,
-        value: field.name,
-        children: field.type === "array" ? [] : getOptionChildren(field.fields)
-      }));
+      const getOptionChildren = (fields = [], dataSourceFieldType = ["any"]) => {
+        const child = [];
+        fields.forEach((field) => {
+          if (!dataSourceFieldType.length) {
+            dataSourceFieldType.push("any");
+          }
+          const children = getOptionChildren(field.fields, dataSourceFieldType);
+          const item = {
+            label: field.title || field.name,
+            value: field.name,
+            children
+          };
+          const fieldType = field.type || "any";
+          if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
+            child.push(item);
+            return;
+          }
+          if (!dataSourceFieldType.includes(fieldType) && fieldType !== "object") {
+            return;
+          }
+          if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+            return;
+          }
+          child.push(item);
+        });
+        return child;
+      };
       const cascaderConfig = vue.computed(() => {
         const valueIsKey = props.config.value === "key";
         return {
           type: "cascader",
-          name: props.name,
-          checkStrictly: !valueIsKey,
-          text: "",
-          options: () => dataSources.value?.filter((ds) => ds.fields?.length)?.map((ds) => ({
-            label: ds.title || ds.id,
-            value: valueIsKey ? ds.id : `${utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-            children: getOptionChildren(ds.fields)
-          })) || []
+          checkStrictly: props.config.checkStrictly ?? !valueIsKey,
+          popperClass: "m-editor-data-source-field-select-popper",
+          options: () => {
+            const options = dataSources.value?.map((ds) => ({
+              label: ds.title || ds.id,
+              value: valueIsKey ? ds.id : `${utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+              children: getOptionChildren(ds.fields, props.config.dataSourceFieldType)
+            })) || [];
+            return options.filter((option) => option.children.length);
+          }
         };
       });
+      const showDataSourceFieldSelect = vue.ref(false);
+      vue.onMounted(() => {
+        const value = props.model[props.name];
+        if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
+          return showDataSourceFieldSelect.value = true;
+        }
+      });
+      const mForm = vue.inject("mForm");
+      const type = vue.computed(() => {
+        let type2 = props.config.fieldConfig?.type;
+        if (typeof type2 === "function") {
+          type2 = type2(mForm, {
+            model: props.model
+          });
+        }
+        if (type2 === "form")
+          return "";
+        if (type2 === "container")
+          return "";
+        return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (props.config.items ? "" : "text");
+      });
+      const tagName = vue.computed(() => {
+        if (showDataSourceFieldSelect.value || !props.config.fieldConfig) {
+          return form.MCascader;
+        }
+        const component = vue.resolveComponent(`m-${props.config.items ? "form" : "fields"}-${type.value}`);
+        if (typeof component !== "string")
+          return component;
+        return "m-fields-text";
+      });
       const onChangeHandler = (value) => {
         emit("change", value);
       };
       return (_ctx, _cache) => {
-        const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createBlock(_component_m_form_container, {
-          config: {
-            ..._ctx.config,
-            ...cascaderConfig.value
-          },
-          model: _ctx.model,
-          onChange: onChangeHandler
-        }, null, 8, ["config", "model"]);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
+            style: { "width": "100%" },
+            config: showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? cascaderConfig.value : _ctx.config.fieldConfig,
+            model: _ctx.model,
+            name: _ctx.name,
+            disabled: _ctx.disabled,
+            size: _ctx.size,
+            "last-values": _ctx.lastValues,
+            "init-values": _ctx.initValues,
+            values: _ctx.values,
+            prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
+            onChange: onChangeHandler
+          }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
+          _ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 0,
+            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)
+        ]);
       };
     }
   });
 
-  const _hoisted_1$o = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  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 _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceInput"
+      name: "MFieldsDataSourceInput"
     },
     __name: "DataSourceInput",
     props: {
@@ -4074,10 +4536,10 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$o, [
+            vue.createElementVNode("div", _hoisted_1$n, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$h, vue.toDisplayString(item.value), 1)
             ])
@@ -4109,7 +4571,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$O, {
+              vue.createVNode(_sfc_main$N, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -4192,11 +4654,11 @@
     };
   };
 
-  const _hoisted_1$n = { class: "m-editor-data-source-methods" };
+  const _hoisted_1$m = { class: "m-editor-data-source-methods" };
   const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceMethods"
+      name: "MFieldsDataSourceMethods"
     },
     __name: "DataSourceMethods",
     props: {
@@ -4264,7 +4726,7 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
@@ -4283,7 +4745,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4298,11 +4760,11 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-data-source-method-select" };
+  const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
   const _hoisted_2$f = { class: "data-source-method-select-container" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceMethodSelect"
+      name: "MFieldsDataSourceMethodSelect"
     },
     __name: "DataSourceMethodSelect",
     props: {
@@ -4391,7 +4853,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -4399,14 +4861,14 @@
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            _ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               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$P, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -4415,7 +4877,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$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4428,11 +4890,11 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$k = { class: "m-editor-data-source-fields" };
   const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceMocks"
+      name: "MFieldsDataSourceMocks"
     },
     __name: "DataSourceMocks",
     props: {
@@ -4626,7 +5088,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
@@ -4662,9 +5124,9 @@
     }
   });
 
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceSelect"
+      name: "MFieldsDataSourceSelect"
     },
     __name: "DataSourceSelect",
     props: {
@@ -4719,14 +5181,14 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-fields-event-select" };
+  const _hoisted_1$j = { class: "m-fields-event-select" };
   const _hoisted_2$d = {
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorEventSelect"
+      name: "MFieldsEventSelect"
     },
     __name: "EventSelect",
     props: {
@@ -4928,7 +5390,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -4988,7 +5450,7 @@
     }
   });
 
-  const _hoisted_1$j = {
+  const _hoisted_1$i = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4998,24 +5460,24 @@
   const _hoisted_4$6 = [
     _hoisted_2$c
   ];
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$j, _hoisted_4$6);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$i, _hoisted_4$6);
       };
     }
   });
 
-  const _hoisted_1$i = { class: "m-fields-key-value" };
+  const _hoisted_1$h = { class: "m-fields-key-value" };
   const _hoisted_2$b = { key: 0 };
   const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorKeyValue"
+      name: "MFieldsKeyValue"
     },
     __name: "KeyValue",
     props: {
@@ -5071,7 +5533,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
@@ -5137,7 +5599,7 @@
             size: "default",
             disabled: _ctx.disabled,
             link: "",
-            icon: _sfc_main$E,
+            icon: _sfc_main$D,
             onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
           }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
@@ -5145,11 +5607,11 @@
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
+  const _hoisted_1$g = { class: "m-fields-page-fragment-select" };
   const _hoisted_2$a = { class: "page-fragment-select-container" };
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorPageFragmentSelect"
+      name: "MFieldsPageFragmentSelect"
     },
     __name: "PageFragmentSelect",
     props: {
@@ -5193,7 +5655,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.createElementVNode("div", _hoisted_2$a, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -5202,7 +5664,7 @@
               size: _ctx.size,
               onChange: changeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: vue.unref(iconsVue.Edit),
@@ -5214,14 +5676,14 @@
     }
   });
 
-  const _hoisted_1$g = {
+  const _hoisted_1$f = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorUISelect"
+      name: "MFieldsUISelect"
     },
     __name: "UISelect",
     props: {
@@ -5288,7 +5750,7 @@
         services?.editorService.get("stage")?.highlight(id);
         services?.stageOverlayService.get("stage")?.highlight(id);
       }, 150);
-      const unhightlight = () => {
+      const unhighlight = () => {
         services?.editorService.set("highlightNode", null);
         services?.editorService.get("stage")?.clearHighlight();
         services?.stageOverlayService.get("stage")?.clearHighlight();
@@ -5312,7 +5774,7 @@
             ]),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
               content: "清除",
@@ -5327,7 +5789,7 @@
                   size: _ctx.size,
                   link: "",
                   onClick: vue.withModifiers(deleteHandler, ["stop"])
-                }, null, 8, ["icon", "disabled", "size", "onClick"])
+                }, null, 8, ["icon", "disabled", "size"])
               ]),
               _: 1
             }),
@@ -5343,7 +5805,7 @@
                   size: _ctx.size,
                   onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
                   onMouseenter: _cache[1] || (_cache[1] = ($event) => vue.unref(highlight)(val.value)),
-                  onMouseleave: unhightlight
+                  onMouseleave: unhighlight
                 }, {
                   default: vue.withCtx(() => [
                     vue.createTextVNode(vue.toDisplayString(`${toName.value}_${val.value}`), 1)
@@ -5407,7 +5869,7 @@
     };
   };
 
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -5429,12 +5891,13 @@
     }
   });
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSplitView"
     },
     __name: "SplitView",
     props: {
+      width: {},
       left: {},
       right: {},
       minLeft: { default: 46 },
@@ -5451,17 +5914,19 @@
       const el = vue.ref();
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
       const hasRight = vue.computed(() => typeof props.right !== "undefined");
-      const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
+      const center = vue.ref(0);
+      let clientWidth = 0;
+      const getCenterWidth = (l = 0, r = 0) => {
         let right = r > 0 ? r : 0;
         let left = l > 0 ? l : 0;
-        let center2 = clientWidth2 - left - right;
+        let center2 = clientWidth - left - right;
         if (center2 < props.minCenter) {
           center2 = props.minCenter;
           if (right > center2 + props.minRight) {
-            right = clientWidth2 - left - center2;
+            right = clientWidth - left - center2;
           } else {
             right = props.minRight;
-            left = clientWidth2 - right - center2;
+            left = clientWidth - right - center2;
           }
         }
         return {
@@ -5470,36 +5935,43 @@
           right
         };
       };
-      let clientWidth = 0;
-      const resizerObserver = new ResizeObserver((entries) => {
-        for (const { contentRect } of entries) {
-          clientWidth = contentRect.width;
-          let left = props.left || 0;
-          let right = props.right || 0;
-          if (left > clientWidth) {
-            left = clientWidth / 3;
-          }
-          if (right > clientWidth) {
-            right = clientWidth / 3;
-          }
-          const columnWidth = getCenterWidth(clientWidth, left, right);
-          center.value = columnWidth.center;
-          emit("change", {
-            left: columnWidth.left,
-            center: center.value,
-            right: columnWidth.right
-          });
+      const widthChange = (width) => {
+        if (width <= 0) {
+          return;
         }
-      });
-      vue.onMounted(() => {
-        if (el.value) {
-          resizerObserver.observe(el.value);
+        clientWidth = width;
+        let left = props.left || 0;
+        let right = props.right || 0;
+        if (left > clientWidth) {
+          left = clientWidth / 3;
         }
-      });
-      vue.onBeforeUnmount(() => {
-        resizerObserver.disconnect();
-      });
-      const center = vue.ref(0);
+        if (right > clientWidth) {
+          right = clientWidth / 3;
+        }
+        const columnWidth = getCenterWidth(left, right);
+        center.value = columnWidth.center;
+        emit("change", columnWidth);
+      };
+      if (typeof props.width !== "number") {
+        const resizerObserver = new ResizeObserver((entries) => {
+          for (const { contentRect } of entries) {
+            widthChange(contentRect.width);
+          }
+        });
+        vue.onMounted(() => {
+          if (el.value) {
+            resizerObserver.observe(el.value);
+          }
+        });
+        vue.onBeforeUnmount(() => {
+          resizerObserver.disconnect();
+        });
+      } else {
+        vue.watchEffect(() => {
+          if (typeof props.width === "number")
+            widthChange(props.width);
+        });
+      }
       const changeLeft = ({ deltaX }) => {
         if (typeof props.left === "undefined")
           return;
@@ -5508,7 +5980,7 @@
         if (clientWidth - left - (props.right || 0) <= 0) {
           left = props.left;
         }
-        const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+        const columnWidth = getCenterWidth(left, props.right || 0);
         center.value = columnWidth.center;
         emit("change", {
           left: columnWidth.left,
@@ -5524,7 +5996,7 @@
         if (clientWidth - (props.left || 0) - right <= 0) {
           right = props.right;
         }
-        const columnWidth = getCenterWidth(clientWidth, props.left, right);
+        const columnWidth = getCenterWidth(props.left, right);
         center.value = columnWidth.center;
         emit("change", {
           left: columnWidth.left,
@@ -5534,7 +6006,8 @@
       };
       __expose({
         updateWidth() {
-          const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+          clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+          const columnWidth = getCenterWidth(props.left, props.right);
           emit("change", {
             left: columnWidth.left,
             center: center.value,
@@ -5556,7 +6029,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$A, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$z, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5565,7 +6038,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$A, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$z, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -5578,12 +6051,12 @@
     }
   });
 
-  const _hoisted_1$f = {
+  const _hoisted_1$e = {
     key: 1,
     class: "menu-item-text"
   };
   const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -5662,7 +6135,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -5676,7 +6149,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5694,7 +6167,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5744,11 +6217,11 @@
     }
   });
 
-  const _hoisted_1$e = {
+  const _hoisted_1$d = {
     key: 1,
     style: { "width": "21px" }
   };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarAddButton"
     },
@@ -5782,13 +6255,13 @@
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e));
+          vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d));
       };
     }
   });
 
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
     },
@@ -5894,7 +6367,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$O, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { 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,
@@ -5910,14 +6383,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarSwitchTypeButton"
     },
@@ -5961,11 +6434,11 @@
     }
   });
 
-  const _hoisted_1$d = { class: "m-editor-page-bar-tabs" };
+  const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
   const _hoisted_2$8 = ["onClick"];
   const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$5 = ["title"];
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBar"
     },
@@ -6043,15 +6516,15 @@
         editorService?.remove(node);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
             key: 0,
             modelValue: active.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
           }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$w, { type: active.value }, {
+          vue.createVNode(_sfc_main$v, { type: active.value }, {
             prepend: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"])
+              vue.createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
             ]),
             default: vue.withCtx(() => [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item) => {
@@ -6084,7 +6557,7 @@
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", null, [
                         vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                          vue.createVNode(_sfc_main$y, {
+                          vue.createVNode(_sfc_main$x, {
                             data: {
                               type: "button",
                               text: "复制",
@@ -6092,7 +6565,7 @@
                               handler: () => copy(item)
                             }
                           }, null, 8, ["data"]),
-                          vue.createVNode(_sfc_main$y, {
+                          vue.createVNode(_sfc_main$x, {
                             data: {
                               type: "button",
                               text: "删除",
@@ -6115,11 +6588,11 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-editor-empty-panel" };
+  const _hoisted_1$b = { class: "m-editor-empty-panel" };
   const _hoisted_2$7 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -6143,14 +6616,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.createElementVNode("div", _hoisted_2$7, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$4
             ]),
@@ -6160,7 +6633,7 @@
               onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE_FRAGMENT))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_4$4
             ])) : vue.createCommentVNode("", true)
@@ -6174,7 +6647,7 @@
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
   const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -6193,36 +6666,14 @@
       const stageLoading = vue.computed(() => editorService?.get("stageLoading") || false);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
       const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-      const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-      const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
       const columnWidth = vue.ref({
-        left: leftColumnWidthCacheData,
+        left: getLeftColumnWidthCacheData(),
         center: 0,
-        right: RightColumnWidthCacheData
+        right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+      });
+      vue.watch(pageLength, () => {
+        splitView.value?.updateWidth();
       });
-      vue.watch(
-        [pageLength, splitView],
-        () => {
-          splitView.value?.updateWidth();
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.watch(
-        () => columnWidth.value.right,
-        (right) => {
-          if (typeof right === "undefined")
-            return;
-          globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-        }
-      );
-      vue.watch(
-        () => columnWidth.value.left,
-        (left) => {
-          globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-        }
-      );
       vue.watch(
         () => uiService?.get("hideSlideBar"),
         (hideSlideBar) => {
@@ -6230,11 +6681,29 @@
         }
       );
       const columnWidthChange = (columnW) => {
-        columnWidth.value.left = columnW.left;
-        columnWidth.value.center = columnW.center;
-        columnWidth.value.right = columnW.right;
+        columnWidth.value = columnW;
+        globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
         uiService?.set("columnWidth", columnW);
       };
+      const frameworkRect = vue.computed(() => uiService?.get("frameworkRect"));
+      const resizerObserver = new ResizeObserver((entries) => {
+        const { contentRect } = entries[0];
+        uiService?.set("frameworkRect", {
+          width: contentRect.width,
+          height: contentRect.height,
+          left: contentRect.left,
+          top: contentRect.top
+        });
+      });
+      vue.onMounted(() => {
+        if (content.value) {
+          resizerObserver.observe(content.value);
+        }
+      });
+      vue.onBeforeUnmount(() => {
+        resizerObserver.disconnect();
+      });
       const saveCode = (value) => {
         try {
           const parseDSL = getConfig("parseDSL");
@@ -6261,7 +6730,7 @@
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$z, {
+          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$y, {
             key: 1,
             "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
@@ -6277,6 +6746,7 @@
             "min-left": 65,
             "min-right": 20,
             "min-center": 100,
+            width: frameworkRect.value?.width || 0,
             onChange: columnWidthChange
           }, vue.createSlots({
             left: vue.withCtx(() => [
@@ -6284,10 +6754,10 @@
             ]),
             center: vue.withCtx(() => [
               page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+                vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
               ]),
               vue.renderSlot(_ctx.$slots, "page-bar", {}, () => [
-                vue.createVNode(_sfc_main$u, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                   "page-bar-title": vue.withCtx(({ page: page2 }) => [
                     vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                   ]),
@@ -6312,7 +6782,7 @@
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["left", "right"])), [
+          ]), 1032, ["left", "right", "width"])), [
             [_directive_loading, stageLoading.value]
           ]),
           vue.renderSlot(_ctx.$slots, "content-after"),
@@ -6322,7 +6792,7 @@
     }
   });
 
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -6472,10 +6942,30 @@
         });
         return data;
       });
+      const resizeObserver = new ResizeObserver(() => {
+        const rect = navMenu.value?.getBoundingClientRect();
+        if (rect) {
+          uiService?.set("navMenuRect", {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height
+          });
+        }
+      });
+      const navMenu = vue.ref();
+      vue.onMounted(() => {
+        navMenu.value && resizeObserver.observe(navMenu.value);
+      });
+      vue.onBeforeUnmount(() => {
+        resizeObserver.disconnect();
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-nav-menu",
-          style: vue.normalizeStyle({ height: `${_ctx.height}px` })
+          style: vue.normalizeStyle({ height: `${_ctx.height}px` }),
+          ref_key: "navMenu",
+          ref: navMenu
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(keys), (key) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -6484,7 +6974,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -6496,8 +6986,8 @@
     }
   });
 
-  const _hoisted_1$b = { class: "m-editor-props-panel" };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "m-editor-props-panel" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -6507,7 +6997,9 @@
     },
     emits: ["mounted", "submit-error", "form-error"],
     setup(__props, { expose: __expose, emit: __emit }) {
+      const codeOptions = vue.inject("codeOptions", {});
       const emit = __emit;
+      const showSrc = vue.ref(false);
       const internalInstance = vue.getCurrentInstance();
       const values = vue.ref({});
       const configForm = vue.ref();
@@ -6517,6 +7009,7 @@
       const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const stage = vue.computed(() => services?.editorService.get("stage"));
+      const { height: editorContentHeight } = useEditorContentHeight();
       const init = async () => {
         if (!node.value) {
           curFormConfig.value = [];
@@ -6550,9 +7043,12 @@
       const errorHandler = (e) => {
         emit("form-error", e);
       };
+      const saveCode = (values2) => {
+        services?.editorService.update(values2);
+      };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -6565,7 +7061,24 @@
             "extend-state": _ctx.extendState,
             onChange: submit,
             onError: errorHandler
-          }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"])
+          }, 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]
         ]);
@@ -6573,116 +7086,6 @@
     }
   });
 
-  const _hoisted_1$a = { class: "m-editor-float-box-body" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    __name: "FloatingBox",
-    props: {
-      visible: { type: Boolean, default: false },
-      position: { default: () => ({ left: 0, top: 0 }) },
-      rect: { default: () => ({ width: "auto", height: "auto" }) },
-      title: { default: "" }
-    },
-    emits: ["update:visible"],
-    setup(__props, { expose: __expose, emit: __emit }) {
-      const props = __props;
-      const emit = __emit;
-      const target = vue.ref();
-      const dragTarget = vue.ref();
-      const style = vue.computed(() => ({
-        left: `${props.position.left}px`,
-        top: `${props.position.top}px`,
-        width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
-        height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
-      }));
-      let moveable = null;
-      const initMoveable = () => {
-        moveable = new VanillaMoveable(globalThis.document.body, {
-          className: "m-editor-floating-box-moveable",
-          target: target.value,
-          draggable: true,
-          resizable: true,
-          edge: true,
-          keepRatio: false,
-          origin: false,
-          snappable: true,
-          dragTarget: dragTarget.value,
-          dragTargetSelf: false,
-          linePadding: 10,
-          controlPadding: 10
-        });
-        moveable.on("drag", (e) => {
-          e.target.style.transform = e.transform;
-        });
-        moveable.on("resize", (e) => {
-          e.target.style.width = `${e.width}px`;
-          e.target.style.height = `${e.height}px`;
-          e.target.style.transform = e.drag.transform;
-        });
-      };
-      const destroyMoveable = () => {
-        moveable?.destroy();
-        moveable = null;
-      };
-      vue.watch(
-        () => props.visible,
-        async (visible) => {
-          if (visible) {
-            await vue.nextTick();
-            initMoveable();
-          } else {
-            destroyMoveable();
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.onBeforeUnmount(() => {
-        destroyMoveable();
-      });
-      const closeHandler = () => {
-        emit("update:visible", false);
-      };
-      __expose({
-        target
-      });
-      return (_ctx, _cache) => {
-        return _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
-          key: 0,
-          to: "body"
-        }, [
-          vue.createElementVNode("div", {
-            ref_key: "target",
-            ref: target,
-            class: "m-editor-float-box",
-            style: vue.normalizeStyle(style.value)
-          }, [
-            vue.createElementVNode("div", {
-              ref_key: "dragTarget",
-              ref: dragTarget,
-              class: "m-editor-float-box-title"
-            }, [
-              vue.renderSlot(_ctx.$slots, "title", {}, () => [
-                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
-              ]),
-              vue.createElementVNode("div", null, [
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  link: "",
-                  size: "small",
-                  icon: vue.unref(iconsVue.Close),
-                  onClick: closeHandler
-                }, null, 8, ["icon"])
-              ])
-            ], 512),
-            vue.createElementVNode("div", _hoisted_1$a, [
-              vue.renderSlot(_ctx.$slots, "body")
-            ])
-          ], 4)
-        ])) : vue.createCommentVNode("", true);
-      };
-    }
-  });
-
   const useFloatBox = (slideKeys) => {
     const floatBoxStates = vue.ref(
       slideKeys.value.reduce(
@@ -6700,33 +7103,33 @@
     const showingBoxKeys = vue.computed(
       () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
     );
-    const isDraging = vue.ref(false);
-    const dragstartHandler = () => isDraging.value = true;
+    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
       };
-      isDraging.value = false;
+      isDragging.value = false;
     };
     document.body.addEventListener("dragover", (e) => {
-      if (!isDraging.value)
+      if (!isDragging.value)
         return;
       e.preventDefault();
     });
     vue.watch(
       () => slideKeys.value,
-      () => {
-        for (const key in slideKeys.value) {
+      (slideKeys2) => {
+        slideKeys2.forEach((key) => {
           if (floatBoxStates.value[key])
-            continue;
+            return;
           floatBoxStates.value[key] = {
             status: false,
             top: 0,
             left: 0
           };
-        }
+        });
       },
       {
         deep: true,
@@ -6866,7 +7269,7 @@
             onContextmenu: nodeContentmenuHandler,
             onMouseenter: mouseenterHandler
           }, [
-            vue.createVNode(_sfc_main$O, {
+            vue.createVNode(_sfc_main$N, {
               class: "expand-icon",
               style: vue.normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
               icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
@@ -7145,7 +7548,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -7160,7 +7563,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -7237,7 +7640,7 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -7418,7 +7821,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -7433,7 +7836,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -7535,7 +7938,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_2$5, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                        return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                        return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: item.text,
@@ -7704,7 +8107,7 @@
               vue.renderSlot(_ctx.$slots, "title"),
               vue.createElementVNode("div", null, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -7969,12 +8372,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$O, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             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$O, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -8615,7 +9018,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -8636,7 +9039,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$O, {
+                                  vue.createVNode(_sfc_main$N, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -8687,6 +9090,7 @@
     setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
+      const columnLeftWitch = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -8716,7 +9120,12 @@
             icon: iconsVue.EditPen,
             text: "代码编辑",
             component: _sfc_main$k,
-            slots: {}
+            slots: {},
+            boxComponentConfig: {
+              props: {
+                slideType: "box"
+              }
+            }
           },
           "data-source": {
             $key: "data-source",
@@ -8773,7 +9182,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$O, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -8906,10 +9315,12 @@
           (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$p, {
+                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
                   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,
                   title: config.text,
                   position: {
                     left: vue.unref(floatBoxStates)[config.$key].left,
@@ -8922,7 +9333,7 @@
                     ])
                   ]),
                   _: 2
-                }, 1032, ["visible", "onUpdate:visible", "title", "position"])) : vue.createCommentVNode("", true)
+                }, 1032, ["visible", "onUpdate:visible", "width", "title", "position"])) : vue.createCommentVNode("", true)
               ], 64);
             }), 256))
           ]))
@@ -9275,15 +9686,27 @@
     showRule: true,
     propsPanelSize: "small",
     showAddPageButton: true,
-    floatBox: /* @__PURE__ */ new Map(),
-    hideSlideBar: false
+    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([
-        { name: "zoom", isAsync: true },
-        { name: "calcZoom", isAsync: true }
-      ]);
+      super(canUsePluginMethods$2.async.map((methodName) => ({ name: methodName, isAsync: true })));
     }
     set(name, value) {
       const mask = editorService.get("stage")?.mask;
@@ -9321,19 +9744,6 @@
       }
       return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
     }
-    async setFloatBox(keys) {
-      const map = state.floatBox;
-      for (const key of keys) {
-        if (map.get(key))
-          continue;
-        map.set(key, {
-          status: false,
-          zIndex: 99,
-          top: 0,
-          left: 0
-        });
-      }
-    }
     resetState() {
       this.set("showSrc", false);
       this.set("uiSelectMode", false);
@@ -9348,6 +9758,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     async setStageRect(value) {
       state.stageRect = {
         ...state.stageRect,
@@ -9539,7 +9952,7 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -10081,6 +10494,10 @@
     }
   });
 
+  const canUsePluginMethods$1 = {
+    async: ["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"],
+    sync: []
+  };
   class CodeBlock extends BaseService {
     state = vue.reactive({
       codeDsl: null,
@@ -10090,13 +10507,7 @@
       paramsColConfig: void 0
     });
     constructor() {
-      super([
-        { name: "setCodeDslById", isAsync: true },
-        { name: "setEditStatus", isAsync: true },
-        { name: "setCombineIds", isAsync: true },
-        { name: "setUndeleteableList", isAsync: true },
-        { name: "deleteCodeDslByIds", isAsync: true }
-      ]);
+      super(canUsePluginMethods$1.async.map((methodName) => ({ name: methodName, isAsync: true })));
     }
     /**
      * 设置活动的代码块dsl数据源
@@ -10269,6 +10680,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
   }
   const codeBlockService = new CodeBlock();
 
@@ -10324,10 +10738,10 @@
       });
     }
     setEvent(type, events) {
-      eventMap[type] = [...core.DEFAULT_EVENTS, ...events];
+      eventMap[utils.toLine(type)] = [...core.DEFAULT_EVENTS, ...events];
     }
     getEvent(type) {
-      return lodashEs.cloneDeep(eventMap[type] || core.DEFAULT_EVENTS);
+      return lodashEs.cloneDeep(eventMap[utils.toLine(type)] || core.DEFAULT_EVENTS);
     }
     setMethods(methods) {
       Object.keys(methods).forEach((type) => {
@@ -10335,10 +10749,10 @@
       });
     }
     setMethod(type, method) {
-      methodMap[type] = [...core.DEFAULT_METHODS, ...method];
+      methodMap[utils.toLine(type)] = [...core.DEFAULT_METHODS, ...method];
     }
     getMethod(type) {
-      return lodashEs.cloneDeep(methodMap[type] || core.DEFAULT_METHODS);
+      return lodashEs.cloneDeep(methodMap[utils.toLine(type)] || core.DEFAULT_METHODS);
     }
     resetState() {
       eventMap = vue.reactive({});
@@ -10532,6 +10946,10 @@
   }
   const keybindingService = new Keybinding();
 
+  const canUsePluginMethods = {
+    async: [],
+    sync: ["openOverlay", "closeOverlay", "updateOverlay", "createStage"]
+  };
   class StageOverlay extends BaseService {
     state = vue.reactive({
       wrapDiv: document.createElement("div"),
@@ -10544,12 +10962,7 @@
       stageOverlayVisible: false
     });
     constructor() {
-      super([
-        { name: "openOverlay", isAsync: false },
-        { name: "closeOverlay", isAsync: false },
-        { name: "updateOverlay", isAsync: false },
-        { name: "createStage", isAsync: false }
-      ]);
+      super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
       this.get("wrapDiv").classList.add("tmagic-editor-sub-stage-wrap");
     }
     get(name) {
@@ -10616,6 +11029,9 @@
         }
       });
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     createContentEl() {
       const sourceEl = this.get("sourceEl");
       if (!sourceEl)
@@ -10656,7 +11072,7 @@
         subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
       });
       if (await stageOptions?.canSelect?.(contentEl)) {
-        subStage?.select(contentEl);
+        subStage?.select(contentEl.id);
       }
     }
     updateHandler = () => {
@@ -11047,7 +11463,7 @@
       name: "MEditor"
     },
     __name: "Editor",
-    props: vue.mergeDefaults({
+    props: /* @__PURE__ */ vue.mergeDefaults({
       modelValue: {},
       componentGroupList: {},
       datasourceList: {},
@@ -11064,7 +11480,7 @@
       datasourceValues: {},
       datasourceConfigs: {},
       datasourceEventMethodList: {},
-      moveableOptions: { type: Function },
+      moveableOptions: { type: [Object, Function] },
       defaultSelected: {},
       containerHighlightClassName: {},
       containerHighlightDuration: {},
@@ -11128,13 +11544,13 @@
       vue.provide("stageOptions", stageOptions);
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
           header: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "header")
           ]),
           nav: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$r, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -11209,7 +11625,7 @@
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$q, {
+              vue.createVNode(_sfc_main$p, {
                 "extend-state": _ctx.extendFormState,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
                 onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
@@ -11255,23 +11671,23 @@
       const option = Object.assign(defaultInstallOpt, opt || {});
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
-      app.component(_sfc_main.name, _sfc_main);
-      app.component("m-fields-ui-select", _sfc_main$B);
+      app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
+      app.component("magic-code-editor", _sfc_main$U);
+      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("magic-code-editor", _sfc_main$U);
       app.component("m-fields-code-select", _sfc_main$R);
-      app.component("m-fields-code-select-col", _sfc_main$N);
-      app.component("m-fields-event-select", _sfc_main$F);
-      app.component("m-fields-data-source-fields", _sfc_main$M);
-      app.component("m-fields-data-source-mocks", _sfc_main$H);
-      app.component("m-fields-key-value", _sfc_main$D);
-      app.component("m-fields-data-source-input", _sfc_main$K);
-      app.component("m-fields-data-source-select", _sfc_main$G);
-      app.component("m-fields-data-source-methods", _sfc_main$J);
-      app.component("m-fields-data-source-method-select", _sfc_main$I);
-      app.component("m-fields-data-source-field-select", _sfc_main$L);
-      app.component("m-fields-page-fragment-select", _sfc_main$C);
+      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);
+      app.component("m-fields-data-source-mocks", _sfc_main$G);
+      app.component("m-fields-key-value", _sfc_main$C);
+      app.component("m-fields-data-source-input", _sfc_main$J);
+      app.component("m-fields-data-source-select", _sfc_main$F);
+      app.component("m-fields-data-source-methods", _sfc_main$I);
+      app.component("m-fields-data-source-method-select", _sfc_main$H);
+      app.component("m-fields-data-source-field-select", _sfc_main$K);
+      app.component("m-fields-page-fragment-select", _sfc_main$B);
     }
   };
 
@@ -11281,42 +11697,42 @@
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$Q;
+  exports.CodeBlockEditor = _sfc_main$P;
   exports.CodeBlockList = _sfc_main$l;
   exports.CodeBlockListPanel = _sfc_main$k;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
   exports.CodeSelect = _sfc_main$R;
-  exports.CodeSelectCol = _sfc_main$N;
+  exports.CodeSelectCol = _sfc_main$M;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$b;
   exports.ContentMenu = _sfc_main$g;
   exports.DataSourceConfigPanel = _sfc_main$j;
-  exports.DataSourceFieldSelect = _sfc_main$L;
-  exports.DataSourceFields = _sfc_main$M;
-  exports.DataSourceInput = _sfc_main$K;
-  exports.DataSourceMethodSelect = _sfc_main$I;
-  exports.DataSourceMethods = _sfc_main$J;
-  exports.DataSourceMocks = _sfc_main$H;
-  exports.DataSourceSelect = _sfc_main$G;
+  exports.DataSourceFieldSelect = _sfc_main$K;
+  exports.DataSourceFields = _sfc_main$L;
+  exports.DataSourceInput = _sfc_main$J;
+  exports.DataSourceMethodSelect = _sfc_main$H;
+  exports.DataSourceMethods = _sfc_main$I;
+  exports.DataSourceMocks = _sfc_main$G;
+  exports.DataSourceSelect = _sfc_main$F;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$F;
+  exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$O;
+  exports.Icon = _sfc_main$N;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$D;
+  exports.KeyValue = _sfc_main$C;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$z;
-  exports.PageFragmentSelect = _sfc_main$C;
-  exports.PropsPanel = _sfc_main$q;
-  exports.Resizer = _sfc_main$A;
-  exports.SplitView = _sfc_main$z;
+  exports.LayoutContainer = _sfc_main$y;
+  exports.PageFragmentSelect = _sfc_main$B;
+  exports.PropsPanel = _sfc_main$p;
+  exports.Resizer = _sfc_main$z;
+  exports.SplitView = _sfc_main$y;
   exports.TMagicCodeEditor = _sfc_main$U;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$y;
+  exports.ToolButton = _sfc_main$x;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
@@ -11367,8 +11783,10 @@
   exports.uiService = uiService;
   exports.useCodeBlockEdit = useCodeBlockEdit;
   exports.useDataSourceMethod = useDataSourceMethod;
+  exports.useEditorContentHeight = useEditorContentHeight;
   exports.useFloatBox = useFloatBox;
   exports.useStage = useStage;
+  exports.useWindowRect = useWindowRect;
   exports.warn = warn;
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });