@tmagic/editor 1.3.16 → 1.4.0-beta.2

package/dist/tmagic-editor.js

@@ -1,16 +1,16 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, mergeDefaults } from 'vue';
-import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, mergeModels, useModel, nextTick, renderSlot, toDisplayString, createCommentVNode, watchEffect, Fragment, isRef, createTextVNode, toRaw, resolveDynamicComponent, mergeProps, renderList, createStaticVNode, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, mergeDefaults } from 'vue';
+import { FullScreen, Close, Edit, View, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
-import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import { TMagicButton, TMagicCard, useZIndex, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
-import { MFormBox, MFormDrawer, MForm, filterFunction, createValues, MSelect } from '@tmagic/form';
+import { MFormBox, MForm, filterFunction, createValues, MFormDrawer, MCascader, MSelect } from '@tmagic/form';
+import VanillaMoveable from 'moveable';
 import { MagicTable } from '@tmagic/table';
-import { guid, isPage, isPageFragment, isPop, getNodePath, isNumber, toLine, getValueByKeyPath, setValueByKeyPath, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
+import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, getValueByKeyPath, setValueByKeyPath, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
 import Gesto from 'gesto';
-import VanillaMoveable from 'moveable';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
@@ -218,7 +218,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
 
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorCode"
+    name: "MFieldsVsCode"
   },
   __name: "Code",
   props: {
@@ -258,7 +258,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
 
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorCodeLink"
+    name: "MFieldsCodeLink"
   },
   __name: "CodeLink",
   props: {
@@ -338,7 +338,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
 
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorCodeSelect"
+    name: "MFieldsCodeSelect"
   },
   __name: "CodeSelect",
   props: {
@@ -454,49 +454,235 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+  __name: "FloatingBox",
+  props: /* @__PURE__ */ 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 = useModel(__props, "width");
+    const height = useModel(__props, "height");
+    const visible = useModel(__props, "visible");
+    const props = __props;
+    const target = ref();
+    const titleEl = ref();
+    const zIndex = useZIndex();
+    const curZIndex = ref(zIndex.nextZIndex());
+    const titleHeight = ref(0);
+    const bodyHeight = computed(() => {
+      if (height.value) {
+        return height.value - titleHeight.value;
+      }
+      if (target.value) {
+        return target.value.clientHeight - titleHeight.value;
+      }
+      return "auto";
+    });
+    const style = computed(() => ({
+      left: `${props.position.left}px`,
+      top: `${props.position.top}px`,
+      width: width.value ? `${width.value}px` : "auto",
+      height: height.value ? `${height.value}px` : "auto"
+    }));
+    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;
+    };
+    watch(
+      visible,
+      async (visible2) => {
+        if (visible2) {
+          await 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
+      }
+    );
+    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 ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: "body"
+      }, [
+        createElementVNode("div", {
+          ref_key: "target",
+          ref: target,
+          class: "m-editor-float-box",
+          style: normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
+          onMousedown: nextZIndex
+        }, [
+          createElementVNode("div", {
+            ref_key: "titleEl",
+            ref: titleEl,
+            class: "m-editor-float-box-title"
+          }, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createElementVNode("span", null, toDisplayString(_ctx.title), 1)
+            ]),
+            createElementVNode("div", null, [
+              createVNode(unref(TMagicButton), {
+                link: "",
+                size: "small",
+                icon: unref(Close),
+                onClick: closeHandler
+              }, null, 8, ["icon"])
+            ])
+          ], 512),
+          createElementVNode("div", {
+            class: "m-editor-float-box-body",
+            style: normalizeStyle({ height: `${bodyHeight.value}px` })
+          }, [
+            renderSlot(_ctx.$slots, "body")
+          ], 4)
+        ], 36)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
+const useEditorContentHeight = () => {
+  const services = inject("services");
+  const frameworkHeight = computed(() => services?.uiService.get("frameworkRect").height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get("navMenuRect").height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+  const height = ref(0);
+  watchEffect(() => {
+    if (height.value > 0)
+      return;
+    height.value = editorContentHeight.value;
+  });
+  return {
+    height
+  };
+};
+
+const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+  globalThis.addEventListener("resize", windowResizeHandler);
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener("resize", windowResizeHandler);
+  });
+  return {
+    rect
+  };
+};
+
 const _hoisted_1$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__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
   __name: "CodeBlockEditor",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     content: {},
     disabled: { type: Boolean },
     isDataSource: { type: Boolean },
     dataSourceType: {},
     slideType: {}
-  },
-  emits: ["submit"],
+  }, {
+    "width": { default: 670 },
+    "widthModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:width", "update:visible"]),
   setup(__props, { expose: __expose, emit: __emit }) {
+    const width = useModel(__props, "width");
+    const boxVisible = useModel(__props, "visible");
     const props = __props;
     const emit = __emit;
     const services = inject("services");
+    const { height: codeBlockEditorHeight } = useEditorContentHeight();
     const difVisible = ref(false);
-    const height = ref(globalThis.innerHeight);
-    const windowReizehandler = () => {
-      height.value = globalThis.innerHeight;
-    };
-    globalThis.addEventListener("resize", windowReizehandler);
-    onBeforeUnmount(() => {
-      globalThis.removeEventListener("resize", windowReizehandler);
-    });
+    const { rect: windowRect } = useWindowRect();
     const magicVsEditor = ref();
     const diffChange = () => {
-      if (!magicVsEditor.value || !fomDrawer.value?.form) {
+      if (!magicVsEditor.value || !formBox.value?.form) {
         return;
       }
-      fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue();
+      formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
       difVisible.value = false;
     };
-    const columnWidth = computed(() => services?.uiService.get("columnWidth"));
-    const size = computed(
-      () => columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600
-    );
-    const codeEditorHeight = ref("600px");
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -579,7 +765,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         name: "content",
         type: "vs-code",
         options: inject("codeOptions", {}),
-        height: codeEditorHeight.value,
+        height: "500px",
         onChange: (formState, code) => {
           try {
             getConfig("parseDSL")(code);
@@ -592,26 +778,20 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }
     ]);
     const submitForm = (values) => {
+      changedValue.value = void 0;
       emit("submit", values);
     };
     const errorHandler = (error) => {
       tMagicMessage.error(error.message);
     };
-    const fomDrawer = ref();
-    const openHandler = () => {
-      setTimeout(() => {
-        if (fomDrawer.value) {
-          const height2 = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
-          codeEditorHeight.value = `${height2 > 100 ? height2 : 600}px`;
-        }
-      });
-    };
+    const formBox = ref();
     const changedValue = ref();
     const changeHandler = (values) => {
       changedValue.value = values;
     };
     const beforeClose = (done) => {
       if (!changedValue.value) {
+        editVisible.value = false;
         done();
         return;
       }
@@ -622,59 +802,106 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         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 = ref(false);
+    const floatingBoxBody = ref();
+    const boxPosition = computed(() => {
+      const columnWidth = services?.uiService?.get("columnWidth");
+      const navMenuRect = services?.uiService?.get("navMenuRect");
+      return {
+        left: columnWidth?.left ?? 0,
+        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
+      };
+    });
     __expose({
-      show() {
-        fomDrawer.value?.show();
+      async show() {
+        if (props.slideType !== "box") {
+          boxVisible.value = true;
+          await nextTick();
+        }
+        editVisible.value = true;
       },
-      hide() {
-        fomDrawer.value?.hide();
+      async hide() {
+        editVisible.value = false;
+        if (props.slideType !== "box") {
+          await nextTick();
+          boxVisible.value = false;
+        }
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.slideType === "box" ? unref(MFormBox) : unref(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
+        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: unref(codeBlockEditorHeight),
+          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+          title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
+          position: boxPosition.value,
+          "before-close": beforeClose
         }, {
-          left: withCtx(() => [
-            createVNode(unref(TMagicButton), {
-              type: "primary",
-              link: "",
-              onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
-            }, {
-              default: withCtx(() => [
-                createTextVNode("查看修改")
-              ]),
-              _: 1
-            })
+          body: withCtx(() => [
+            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 ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          to: floatingBoxBody.value,
+          disabled: _ctx.slideType === "box"
+        }, [
+          createVNode(unref(MFormBox), {
+            class: "m-editor-code-block-editor",
+            ref_key: "formBox",
+            ref: formBox,
+            "label-width": "80px",
+            "close-on-press-escape": false,
+            title: _ctx.content.name,
+            config: functionConfig.value,
+            values: _ctx.content,
+            disabled: _ctx.disabled,
+            height: floatingBoxBody.value?.clientHeight,
+            onChange: changeHandler,
+            onSubmit: submitForm,
+            onError: errorHandler,
+            onClosed: closedHandler
+          }, {
+            left: withCtx(() => [
+              !_ctx.disabled ? (openBlock(), createBlock(unref(TMagicButton), {
+                key: 0,
+                type: "primary",
+                link: "",
+                onClick: _cache[3] || (_cache[3] = ($event) => difVisible.value = true)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("查看修改")
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["title", "config", "values", "disabled", "height"])
+        ], 8, ["to", "disabled"])) : createCommentVNode("", true),
         createVNode(unref(TMagicDialog), {
           modelValue: difVisible.value,
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => difVisible.value = $event),
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
           title: "查看修改",
           fullscreen: ""
         }, {
@@ -682,7 +909,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             createElementVNode("span", _hoisted_4$7, [
               createVNode(unref(TMagicButton), {
                 size: "small",
-                onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
+                onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
               }, {
                 default: withCtx(() => [
                   createTextVNode("取消")
@@ -733,8 +960,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
               type: "diff",
               language: "json",
               initValues: _ctx.content.content,
-              modifiedValues: fomDrawer.value?.form?.values.content,
-              style: normalizeStyle(`height: ${height.value - 200}px`)
+              modifiedValues: formBox.value?.form?.values.content,
+              style: normalizeStyle(`height: ${unref(windowRect).height - 150}px`)
             }, null, 8, ["initValues", "modifiedValues", "style"])) : createCommentVNode("", true)
           ]),
           _: 1
@@ -1141,6 +1368,9 @@ class BaseService extends EventEmitter {
       });
     });
   }
+  /**
+   * @deprecated 请使用usePlugin代替
+   */
   use(options) {
     Object.entries(options).forEach(([methodName2, method]) => {
       if (typeof method === "function")
@@ -1172,6 +1402,23 @@ class BaseService extends EventEmitter {
   }
 }
 
+const canUsePluginMethods$6 = {
+  async: [],
+  sync: [
+    "getFormConfig",
+    "setFormConfig",
+    "getFormValue",
+    "setFormValue",
+    "getFormEvent",
+    "setFormEvent",
+    "getFormMethod",
+    "setFormMethod",
+    "add",
+    "update",
+    "remove",
+    "createId"
+  ]
+};
 class DataSource extends BaseService {
   state = reactive({
     datasourceTypeList: [],
@@ -1183,20 +1430,7 @@ class DataSource extends BaseService {
     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;
@@ -1205,28 +1439,28 @@ class DataSource extends BaseService {
     return this.state[name];
   }
   getFormConfig(type = "base") {
-    return getFormConfig(type, this.get("configs"));
+    return getFormConfig(toLine(type), this.get("configs"));
   }
   setFormConfig(type, config) {
-    this.get("configs")[type] = config;
+    this.get("configs")[toLine(type)] = config;
   }
   getFormValue(type = "base") {
-    return getFormValue(type, this.get("values")[type]);
+    return getFormValue(toLine(type), this.get("values")[type]);
   }
   setFormValue(type, value) {
-    this.get("values")[type] = value;
+    this.get("values")[toLine(type)] = value;
   }
   getFormEvent(type = "base") {
-    return this.get("events")[type] || [];
+    return this.get("events")[toLine(type)] || [];
   }
   setFormEvent(type, value = []) {
-    this.get("events")[type] = value;
+    this.get("events")[toLine(type)] = value;
   }
   getFormMethod(type = "base") {
-    return this.get("methods")[type] || [];
+    return this.get("methods")[toLine(type)] || [];
   }
   setFormMethod(type, value = []) {
-    this.get("methods")[type] = value;
+    this.get("methods")[toLine(type)] = value;
   }
   add(config) {
     const newConfig = {
@@ -1250,6 +1484,9 @@ class DataSource extends BaseService {
     dataSources.splice(index, 1);
     this.emit("remove", id);
   }
+  createId() {
+    return `ds_${guid()}`;
+  }
   getDataSourceById(id) {
     return this.get("dataSources").find((ds) => ds.id === id);
   }
@@ -1261,8 +1498,8 @@ class DataSource extends BaseService {
     this.resetState();
     this.removeAllPlugins();
   }
-  createId() {
-    return `ds_${guid()}`;
+  usePlugin(options) {
+    super.usePlugin(options);
   }
 }
 const dataSourceService = new DataSource();
@@ -1285,7 +1522,6 @@ const numberOptions = [
 ];
 const styleTabConfig = {
   title: "样式",
-  labelWidth: "80px",
   items: [
     {
       name: "style",
@@ -1295,29 +1531,58 @@ const styleTabConfig = {
           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"
             }
           ]
@@ -1327,12 +1592,42 @@ const styleTabConfig = {
           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" }
+                ]
+              }
             }
           ]
         },
@@ -1341,32 +1636,48 @@ const styleTabConfig = {
           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" }
+                ]
+              }
             }
           ]
         },
@@ -1375,31 +1686,53 @@ const styleTabConfig = {
           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"
+              }
             }
           ]
         },
@@ -1408,17 +1741,34 @@ const styleTabConfig = {
           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"
+              }
             }
           ]
         },
@@ -1428,12 +1778,24 @@ const styleTabConfig = {
           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"
+              }
             }
           ]
         }
@@ -1459,13 +1821,11 @@ const advancedTabConfig = {
     {
       name: "created",
       text: "created",
-      labelWidth: "100px",
       type: "code-select"
     },
     {
       name: "mounted",
       text: "mounted",
-      labelWidth: "100px",
       type: "code-select"
     }
   ]
@@ -1488,14 +1848,22 @@ const displayTabConfig = {
               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;
                 }
@@ -1522,9 +1890,15 @@ const displayTabConfig = {
                 {
                   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";
                     }
@@ -1552,13 +1926,13 @@ const displayTabConfig = {
     }
   ]
 };
-const fillConfig = (config = []) => [
+const fillConfig = (config = [], labelWidth = "80px") => [
   {
     type: "tab",
+    labelWidth,
     items: [
       {
         title: "属性",
-        labelWidth: "80px",
         items: [
           // 组件类型，必须要有
           {
@@ -1895,6 +2269,17 @@ class Dep extends BaseService {
 }
 const depService = new Dep();
 
+const canUsePluginMethods$5 = {
+  async: [
+    "setPropsConfig",
+    "getPropsConfig",
+    "setPropsValue",
+    "getPropsValue",
+    "fillConfig",
+    "getDefaultPropsValue"
+  ],
+  sync: ["createId", "setNewItemId"]
+};
 class Props extends BaseService {
   state = reactive({
     propsConfigMap: {},
@@ -1903,14 +2288,8 @@ class Props extends BaseService {
   });
   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) {
@@ -1919,16 +2298,11 @@ class Props extends BaseService {
     });
     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[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
   }
   /**
    * 获取指点类型的组件属性表单配置
@@ -1939,7 +2313,7 @@ class Props extends BaseService {
     if (type === "area") {
       return await this.getPropsConfig("button");
     }
-    return cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+    return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
   }
   setPropsValues(values) {
     Object.keys(values).forEach((type) => {
@@ -1952,14 +2326,15 @@ class Props extends BaseService {
    * @param value 组件初始值
    */
   async setPropsValue(type, value) {
-    this.state.propsValueMap[type] = value;
+    this.state.propsValueMap[toLine(type)] = value;
   }
   /**
    * 获取指定类型的组件初始值
    * @param type 组件类型
    * @returns 组件初始值
    */
-  async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
+  async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+    const type = toLine(componentType);
     if (type === "area") {
       const value = await this.getPropsValue("button");
       value.className = "action-area";
@@ -1969,23 +2344,21 @@ class Props extends BaseService {
       }
       return value;
     }
-    const [id, defaultPropsValue, data] = await Promise.all([
-      this.createId(type),
-      this.getDefaultPropsValue(type),
-      this.setNewItemId(
-        cloneDeep({
-          type,
-          ...defaultValue
-        })
-      )
-    ]);
+    const id = this.createId(type);
+    const defaultPropsValue = this.getDefaultPropsValue(type);
+    const data = this.setNewItemId(
+      cloneDeep({
+        type,
+        ...defaultValue
+      })
+    );
     return {
       id,
       ...defaultPropsValue,
       ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
     };
   }
-  async createId(type) {
+  createId(type) {
     return `${type}_${guid()}`;
   }
   /**
@@ -1995,15 +2368,15 @@ class Props extends BaseService {
    * @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;
@@ -2013,7 +2386,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns Object
    */
-  async getDefaultPropsValue(type) {
+  getDefaultPropsValue(type) {
     return ["page", "container"].includes(type) ? {
       type,
       layout: "absolute",
@@ -2067,6 +2440,9 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   /**
    * 获取setNewItemId前后映射关系
    * @param oldId 原组件ID
@@ -2226,18 +2602,15 @@ var Protocol = /* @__PURE__ */ ((Protocol2) => {
   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 })));
   }
   /**
    * 获取数据存储对象，可以通过
@@ -2320,6 +2693,9 @@ class WebStorage extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   getValueAndProtocol(value) {
     let protocol = "";
     if (value === null) {
@@ -2340,6 +2716,33 @@ class WebStorage extends BaseService {
 }
 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 = reactive({
     root: null,
@@ -2358,29 +2761,7 @@ class Editor extends BaseService {
   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"]
     );
@@ -2882,7 +3263,7 @@ class Editor extends BaseService {
   }
   async doPaste(config, position = {}) {
     propsService.clearRelateId();
-    const pasteConfigs = await beforePaste(position, cloneDeep(config));
+    const pasteConfigs = beforePaste(position, cloneDeep(config));
     return pasteConfigs;
   }
   async doAlignCenter(config) {
@@ -3120,6 +3501,9 @@ class Editor extends BaseService {
   resetModifiedNodeId() {
     this.get("modifiedNodeIds").clear();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   addModifiedNodeId(id) {
     if (!this.isHistoryStateChange) {
       this.get("modifiedNodeIds").set(id, id);
@@ -3187,45 +3571,43 @@ class Editor extends BaseService {
 }
 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 (!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 ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
-        pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
-      }
-      return pasteConfig;
-    })
-  );
+  const pasteConfigs = config.map((configItem) => {
+    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+    let pastePosition = positionClone;
+    if (!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 ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+    }
+    return pasteConfig;
+  });
   return pasteConfigs;
 };
 const getPositionInContainer = (position = {}, id) => {
@@ -3259,7 +3641,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3310,7 +3692,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$r = ["src"];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -3363,7 +3745,7 @@ const useCodeBlockEdit = (codeBlockService) => {
       return;
     }
     codeConfig.value = {
-      name: "代码块",
+      name: "",
       content: `({app, params}) => {
   // place your code here
 }`,
@@ -3414,9 +3796,9 @@ const useCodeBlockEdit = (codeBlockService) => {
 
 const _hoisted_1$q = { class: "m-fields-code-select-col" };
 const _hoisted_2$j = { class: "code-select-container" };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorCodeSelectCol"
+    name: "MFieldsCodeSelectCol"
   },
   __name: "CodeSelectCol",
   props: {
@@ -3499,14 +3881,14 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$O, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
             key: 0,
             class: "icon",
             icon: !notEditable.value ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$P, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
           name: "params",
           key: _ctx.model[_ctx.name],
           model: _ctx.model,
@@ -3514,7 +3896,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3529,9 +3911,9 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$p = { class: "m-editor-data-source-fields" };
 const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceFields"
+    name: "MFieldsDataSourceFields"
   },
   __name: "DataSourceFields",
   props: {
@@ -3583,7 +3965,14 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       },
       {
         label: "默认值",
-        prop: "defaultValue"
+        prop: "defaultValue",
+        formatter(item, row) {
+          try {
+            return JSON.stringify(row.defaultValue);
+          } catch (e) {
+            return row.defaultValue;
+          }
+        }
       },
       {
         label: "操作",
@@ -3821,7 +4210,11 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFieldsDataSourceFieldSelect"
+  },
   __name: "DataSourceFieldSelect",
   props: {
     config: {},
@@ -3840,48 +4233,117 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const props = __props;
     const dataSources = 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 = 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 : `${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 : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+            children: getOptionChildren(ds.fields, props.config.dataSourceFieldType)
+          })) || [];
+          return options.filter((option) => option.children.length);
+        }
       };
     });
+    const showDataSourceFieldSelect = ref(false);
+    onMounted(() => {
+      const value = props.model[props.name];
+      if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
+        return showDataSourceFieldSelect.value = true;
+      }
+    });
+    const mForm = inject("mForm");
+    const type = 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 = computed(() => {
+      if (showDataSourceFieldSelect.value || !props.config.fieldConfig) {
+        return MCascader;
+      }
+      const component = 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 = resolveComponent("m-form-container");
-      return openBlock(), createBlock(_component_m_form_container, {
-        config: {
-          ..._ctx.config,
-          ...cascaderConfig.value
-        },
-        model: _ctx.model,
-        onChange: onChangeHandler
-      }, null, 8, ["config", "model"]);
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+        (openBlock(), createBlock(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 ? (openBlock(), createBlock(unref(TMagicButton), {
+          key: 0,
+          style: { "margin-left": "5px" },
+          link: "",
+          type: showDataSourceFieldSelect.value ? "primary" : "default",
+          icon: unref(Coin),
+          size: _ctx.size,
+          onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+        }, null, 8, ["type", "icon", "size"])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceInput"
+    name: "MFieldsDataSourceInput"
   },
   __name: "DataSourceInput",
   props: {
@@ -4069,10 +4531,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$O, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$o, [
+          createElementVNode("div", _hoisted_1$n, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
             createElementVNode("span", _hoisted_2$h, toDisplayString(item.value), 1)
           ])
@@ -4104,7 +4566,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$O, {
+            createVNode(_sfc_main$N, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -4187,11 +4649,11 @@ const useDataSourceMethod = () => {
   };
 };
 
-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__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceMethods"
+    name: "MFieldsDataSourceMethods"
   },
   __name: "DataSourceMethods",
   props: {
@@ -4259,7 +4721,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
@@ -4278,7 +4740,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4293,11 +4755,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceMethodSelect"
+    name: "MFieldsDataSourceMethodSelect"
   },
   __name: "DataSourceMethodSelect",
   props: {
@@ -4386,7 +4848,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createElementVNode("div", _hoisted_2$f, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -4394,14 +4856,14 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["config", "model"]),
-          _ctx.model[_ctx.name] && isCustomMethod.value ? (openBlock(), createBlock(_sfc_main$O, {
+          _ctx.model[_ctx.name] && isCustomMethod.value ? (openBlock(), createBlock(_sfc_main$N, {
             key: 0,
             class: "icon",
             icon: !notEditable.value ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$P, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -4410,7 +4872,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4423,11 +4885,11 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceMocks"
+    name: "MFieldsDataSourceMocks"
   },
   __name: "DataSourceMocks",
   props: {
@@ -4621,7 +5083,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
@@ -4657,9 +5119,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorDataSourceSelect"
+    name: "MFieldsDataSourceSelect"
   },
   __name: "DataSourceSelect",
   props: {
@@ -4714,14 +5176,14 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorEventSelect"
+    name: "MFieldsEventSelect"
   },
   __name: "EventSelect",
   props: {
@@ -4923,7 +5385,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -4983,7 +5445,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = {
+const _hoisted_1$i = {
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
@@ -4993,24 +5455,24 @@ const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1"
 const _hoisted_4$6 = [
   _hoisted_2$c
 ];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$j, _hoisted_4$6);
+      return openBlock(), 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__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorKeyValue"
+    name: "MFieldsKeyValue"
   },
   __name: "KeyValue",
   props: {
@@ -5066,7 +5528,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
@@ -5132,7 +5594,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           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"])) : createCommentVNode("", true)
       ]);
@@ -5140,11 +5602,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorPageFragmentSelect"
+    name: "MFieldsPageFragmentSelect"
   },
   __name: "PageFragmentSelect",
   props: {
@@ -5188,7 +5650,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$a, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -5197,7 +5659,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: changeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$O, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
             key: 0,
             class: "icon",
             icon: unref(Edit),
@@ -5209,14 +5671,14 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = {
+const _hoisted_1$f = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorUISelect"
+    name: "MFieldsUISelect"
   },
   __name: "UISelect",
   props: {
@@ -5283,7 +5745,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       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();
@@ -5307,7 +5769,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$g, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$f, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -5322,7 +5784,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 size: _ctx.size,
                 link: "",
                 onClick: withModifiers(deleteHandler, ["stop"])
-              }, null, 8, ["icon", "disabled", "size", "onClick"])
+              }, null, 8, ["icon", "disabled", "size"])
             ]),
             _: 1
           }),
@@ -5338,7 +5800,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 size: _ctx.size,
                 onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
                 onMouseenter: _cache[1] || (_cache[1] = ($event) => unref(highlight)(val.value)),
-                onMouseleave: unhightlight
+                onMouseleave: unhighlight
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(`${toName.value}_${val.value}`), 1)
@@ -5402,7 +5864,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -5424,12 +5886,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSplitView"
   },
   __name: "SplitView",
   props: {
+    width: {},
     left: {},
     right: {},
     minLeft: { default: 46 },
@@ -5446,17 +5909,19 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     const el = ref();
     const hasLeft = computed(() => typeof props.left !== "undefined");
     const hasRight = computed(() => typeof props.right !== "undefined");
-    const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
+    const center = ref(0);
+    let clientWidth = 0;
+    const getCenterWidth = (l = 0, r = 0) => {
       let right = r > 0 ? r : 0;
       let left = l > 0 ? l : 0;
-      let center2 = clientWidth2 - left - right;
+      let center2 = clientWidth - left - right;
       if (center2 < props.minCenter) {
         center2 = props.minCenter;
         if (right > center2 + props.minRight) {
-          right = clientWidth2 - left - center2;
+          right = clientWidth - left - center2;
         } else {
           right = props.minRight;
-          left = clientWidth2 - right - center2;
+          left = clientWidth - right - center2;
         }
       }
       return {
@@ -5465,36 +5930,43 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
         right
       };
     };
-    let clientWidth = 0;
-    const resizerObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        clientWidth = contentRect.width;
-        let left = props.left || 0;
-        let right = props.right || 0;
-        if (left > clientWidth) {
-          left = clientWidth / 3;
-        }
-        if (right > clientWidth) {
-          right = clientWidth / 3;
-        }
-        const columnWidth = getCenterWidth(clientWidth, left, right);
-        center.value = columnWidth.center;
-        emit("change", {
-          left: columnWidth.left,
-          center: center.value,
-          right: columnWidth.right
-        });
+    const widthChange = (width) => {
+      if (width <= 0) {
+        return;
       }
-    });
-    onMounted(() => {
-      if (el.value) {
-        resizerObserver.observe(el.value);
+      clientWidth = width;
+      let left = props.left || 0;
+      let right = props.right || 0;
+      if (left > clientWidth) {
+        left = clientWidth / 3;
       }
-    });
-    onBeforeUnmount(() => {
-      resizerObserver.disconnect();
-    });
-    const center = ref(0);
+      if (right > clientWidth) {
+        right = clientWidth / 3;
+      }
+      const columnWidth = getCenterWidth(left, right);
+      center.value = columnWidth.center;
+      emit("change", columnWidth);
+    };
+    if (typeof props.width !== "number") {
+      const resizerObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          widthChange(contentRect.width);
+        }
+      });
+      onMounted(() => {
+        if (el.value) {
+          resizerObserver.observe(el.value);
+        }
+      });
+      onBeforeUnmount(() => {
+        resizerObserver.disconnect();
+      });
+    } else {
+      watchEffect(() => {
+        if (typeof props.width === "number")
+          widthChange(props.width);
+      });
+    }
     const changeLeft = ({ deltaX }) => {
       if (typeof props.left === "undefined")
         return;
@@ -5503,7 +5975,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       if (clientWidth - left - (props.right || 0) <= 0) {
         left = props.left;
       }
-      const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+      const columnWidth = getCenterWidth(left, props.right || 0);
       center.value = columnWidth.center;
       emit("change", {
         left: columnWidth.left,
@@ -5519,7 +5991,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       if (clientWidth - (props.left || 0) - right <= 0) {
         right = props.right;
       }
-      const columnWidth = getCenterWidth(clientWidth, props.left, right);
+      const columnWidth = getCenterWidth(props.left, right);
       center.value = columnWidth.center;
       emit("change", {
         left: columnWidth.left,
@@ -5529,7 +6001,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
     __expose({
       updateWidth() {
-        const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+        clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+        const columnWidth = getCenterWidth(props.left, props.right);
         emit("change", {
           left: columnWidth.left,
           center: center.value,
@@ -5551,7 +6024,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$A, { onChange: changeLeft })
+          createVNode(_sfc_main$z, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5560,7 +6033,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$A, { onChange: changeRight }),
+          createVNode(_sfc_main$z, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -5573,12 +6046,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -5657,7 +6130,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -5671,7 +6144,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$O, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5689,7 +6162,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$O, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5739,11 +6212,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = {
+const _hoisted_1$d = {
   key: 1,
   style: { "width": "21px" }
 };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarAddButton"
   },
@@ -5777,13 +6250,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
         onClick: addPage
       }, [
-        createVNode(_sfc_main$O, { icon: unref(Plus) }, null, 8, ["icon"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$e));
+        createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$d));
     };
   }
 });
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarScrollContainer"
   },
@@ -5889,7 +6362,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$O, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         _ctx.type === unref(NodeType).PAGE && pageLength.value || _ctx.type === unref(NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -5905,14 +6378,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$O, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
   }
 });
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarSwitchTypeButton"
   },
@@ -5956,11 +6429,11 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBar"
   },
@@ -6038,15 +6511,15 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       editorService?.remove(node);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$v, {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$u, {
           key: 0,
           modelValue: active.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
         }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$w, { type: active.value }, {
+        createVNode(_sfc_main$v, { type: active.value }, {
           prepend: withCtx(() => [
-            createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"])
+            createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
           ]),
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
@@ -6079,7 +6552,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => [
                     createElementVNode("div", null, [
                       renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        createVNode(_sfc_main$y, {
+                        createVNode(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -6087,7 +6560,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        createVNode(_sfc_main$y, {
+                        createVNode(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -6110,11 +6583,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createElementVNode("p", null, "新增页面", -1);
 const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面片", -1);
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -6138,14 +6611,14 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", _hoisted_2$7, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$O, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$4
           ]),
@@ -6155,7 +6628,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$O, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_4$4
           ])) : createCommentVNode("", true)
@@ -6169,7 +6642,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 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__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -6188,36 +6661,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const stageLoading = computed(() => editorService?.get("stageLoading") || false);
     const showSrc = computed(() => uiService?.get("showSrc"));
     const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-    const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-    const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
     const columnWidth = ref({
-      left: leftColumnWidthCacheData,
+      left: getLeftColumnWidthCacheData(),
       center: 0,
-      right: RightColumnWidthCacheData
+      right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+    });
+    watch(pageLength, () => {
+      splitView.value?.updateWidth();
     });
-    watch(
-      [pageLength, splitView],
-      () => {
-        splitView.value?.updateWidth();
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => columnWidth.value.right,
-      (right) => {
-        if (typeof right === "undefined")
-          return;
-        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-      }
-    );
-    watch(
-      () => columnWidth.value.left,
-      (left) => {
-        globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-      }
-    );
     watch(
       () => uiService?.get("hideSlideBar"),
       (hideSlideBar) => {
@@ -6225,11 +6676,29 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       }
     );
     const columnWidthChange = (columnW) => {
-      columnWidth.value.left = columnW.left;
-      columnWidth.value.center = columnW.center;
-      columnWidth.value.right = columnW.right;
+      columnWidth.value = columnW;
+      globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+      globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
       uiService?.set("columnWidth", columnW);
     };
+    const frameworkRect = computed(() => uiService?.get("frameworkRect"));
+    const resizerObserver = new ResizeObserver((entries) => {
+      const { contentRect } = entries[0];
+      uiService?.set("frameworkRect", {
+        width: contentRect.width,
+        height: contentRect.height,
+        left: contentRect.left,
+        top: contentRect.top
+      });
+    });
+    onMounted(() => {
+      if (content.value) {
+        resizerObserver.observe(content.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      resizerObserver.disconnect();
+    });
     const saveCode = (value) => {
       try {
         const parseDSL = getConfig("parseDSL");
@@ -6256,7 +6725,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : withDirectives((openBlock(), createBlock(_sfc_main$z, {
+        ]) : withDirectives((openBlock(), createBlock(_sfc_main$y, {
           key: 1,
           "element-loading-text": "Runtime 加载中...",
           ref_key: "splitView",
@@ -6272,6 +6741,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           "min-left": 65,
           "min-right": 20,
           "min-center": 100,
+          width: frameworkRect.value?.width || 0,
           onChange: columnWidthChange
         }, createSlots({
           left: withCtx(() => [
@@ -6279,10 +6749,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
             ]),
             renderSlot(_ctx.$slots, "page-bar", {}, () => [
-              createVNode(_sfc_main$u, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                 "page-bar-title": withCtx(({ page: page2 }) => [
                   renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                 ]),
@@ -6307,7 +6777,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["left", "right"])), [
+        ]), 1032, ["left", "right", "width"])), [
           [_directive_loading, stageLoading.value]
         ]),
         renderSlot(_ctx.$slots, "content-after"),
@@ -6317,7 +6787,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -6467,10 +6937,30 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
       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 = ref();
+    onMounted(() => {
+      navMenu.value && resizeObserver.observe(navMenu.value);
+    });
+    onBeforeUnmount(() => {
+      resizeObserver.disconnect();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "m-editor-nav-menu",
-        style: normalizeStyle({ height: `${_ctx.height}px` })
+        style: normalizeStyle({ height: `${_ctx.height}px` }),
+        ref_key: "navMenu",
+        ref: navMenu
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (key) => {
           return openBlock(), createElementBlock("div", {
@@ -6479,7 +6969,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$y, {
+              return openBlock(), createBlock(_sfc_main$x, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -6491,8 +6981,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$b = { class: "m-editor-props-panel" };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { class: "m-editor-props-panel" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -6502,7 +6992,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   },
   emits: ["mounted", "submit-error", "form-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const codeOptions = inject("codeOptions", {});
     const emit = __emit;
+    const showSrc = ref(false);
     const internalInstance = getCurrentInstance();
     const values = ref({});
     const configForm = ref();
@@ -6512,6 +7004,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const nodes = computed(() => services?.editorService.get("nodes") || []);
     const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const stage = computed(() => services?.editorService.get("stage"));
+    const { height: editorContentHeight } = useEditorContentHeight();
     const init = async () => {
       if (!node.value) {
         curFormConfig.value = [];
@@ -6545,9 +7038,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const errorHandler = (e) => {
       emit("form-error", e);
     };
+    const saveCode = (values2) => {
+      services?.editorService.update(values2);
+    };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -6560,7 +7056,24 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           "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"]),
+        createVNode(unref(TMagicButton), {
+          class: "m-editor-props-panel-src-icon",
+          circle: "",
+          size: "large",
+          title: "源码",
+          icon: unref(Document),
+          type: showSrc.value ? "primary" : "",
+          onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
+        }, null, 8, ["icon", "type"]),
+        showSrc.value ? (openBlock(), createBlock(_sfc_main$U, {
+          key: 0,
+          height: `${unref(editorContentHeight)}px`,
+          "init-values": values.value,
+          options: unref(codeOptions),
+          parse: true,
+          onSave: saveCode
+        }, null, 8, ["height", "init-values", "options"])) : createCommentVNode("", true)
       ], 512)), [
         [vShow, nodes.value.length === 1]
       ]);
@@ -6568,116 +7081,6 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "m-editor-float-box-body" };
-const _sfc_main$p = /* @__PURE__ */ 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 = ref();
-    const dragTarget = ref();
-    const style = 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;
-    };
-    watch(
-      () => props.visible,
-      async (visible) => {
-        if (visible) {
-          await nextTick();
-          initMoveable();
-        } else {
-          destroyMoveable();
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-    onBeforeUnmount(() => {
-      destroyMoveable();
-    });
-    const closeHandler = () => {
-      emit("update:visible", false);
-    };
-    __expose({
-      target
-    });
-    return (_ctx, _cache) => {
-      return _ctx.visible ? (openBlock(), createBlock(Teleport, {
-        key: 0,
-        to: "body"
-      }, [
-        createElementVNode("div", {
-          ref_key: "target",
-          ref: target,
-          class: "m-editor-float-box",
-          style: normalizeStyle(style.value)
-        }, [
-          createElementVNode("div", {
-            ref_key: "dragTarget",
-            ref: dragTarget,
-            class: "m-editor-float-box-title"
-          }, [
-            renderSlot(_ctx.$slots, "title", {}, () => [
-              createElementVNode("span", null, toDisplayString(_ctx.title), 1)
-            ]),
-            createElementVNode("div", null, [
-              createVNode(unref(TMagicButton), {
-                link: "",
-                size: "small",
-                icon: unref(Close),
-                onClick: closeHandler
-              }, null, 8, ["icon"])
-            ])
-          ], 512),
-          createElementVNode("div", _hoisted_1$a, [
-            renderSlot(_ctx.$slots, "body")
-          ])
-        ], 4)
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-
 const useFloatBox = (slideKeys) => {
   const floatBoxStates = ref(
     slideKeys.value.reduce(
@@ -6695,33 +7098,33 @@ const useFloatBox = (slideKeys) => {
   const showingBoxKeys = computed(
     () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
   );
-  const isDraging = ref(false);
-  const dragstartHandler = () => isDraging.value = true;
+  const isDragging = 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();
   });
   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,
@@ -6861,7 +7264,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           onContextmenu: nodeContentmenuHandler,
           onMouseenter: mouseenterHandler
         }, [
-          createVNode(_sfc_main$O, {
+          createVNode(_sfc_main$N, {
             class: "expand-icon",
             style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
             icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
@@ -7140,7 +7543,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$O, {
+              createVNode(_sfc_main$N, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -7155,7 +7558,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$O, {
+              createVNode(_sfc_main$N, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -7232,7 +7635,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -7413,7 +7816,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$O, {
+              createVNode(_sfc_main$N, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -7428,7 +7831,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$O, {
+              createVNode(_sfc_main$N, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -7530,7 +7933,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", _hoisted_2$5, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$y, {
+                      return openBlock(), createBlock(_sfc_main$x, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -7699,7 +8102,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$y, {
+                return openBlock(), createBlock(_sfc_main$x, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -7964,12 +8367,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$O, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$N, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$O, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$N, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -8610,7 +9013,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$O, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$N, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -8631,7 +9034,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                               content: item.desc
                             }, {
                               default: withCtx(() => [
-                                createVNode(_sfc_main$O, {
+                                createVNode(_sfc_main$N, {
                                   icon: item.icon
                                 }, null, 8, ["icon"])
                               ]),
@@ -8682,6 +9085,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
+    const columnLeftWitch = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -8711,7 +9115,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           icon: EditPen,
           text: "代码编辑",
           component: _sfc_main$k,
-          slots: {}
+          slots: {},
+          boxComponentConfig: {
+            props: {
+              slideType: "box"
+            }
+          }
         },
         "data-source": {
           $key: "data-source",
@@ -8768,7 +9177,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$O, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$N, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -8901,10 +9310,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return openBlock(), createElementBlock(Fragment, null, [
-              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$p, {
+              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$Q, {
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
+                width: columnLeftWitch.value,
+                height: 600,
                 title: config.text,
                 position: {
                   left: unref(floatBoxStates)[config.$key].left,
@@ -8917,7 +9328,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 2
-              }, 1032, ["visible", "onUpdate:visible", "title", "position"])) : createCommentVNode("", true)
+              }, 1032, ["visible", "onUpdate:visible", "width", "title", "position"])) : createCommentVNode("", true)
             ], 64);
           }), 256))
         ]))
@@ -9270,15 +9681,27 @@ const state = reactive({
   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;
@@ -9316,19 +9739,6 @@ class Ui extends BaseService {
     }
     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);
@@ -9343,6 +9753,9 @@ class Ui extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   async setStageRect(value) {
     state.stageRect = {
       ...state.stageRect,
@@ -9534,7 +9947,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$p, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$Q, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -10076,6 +10489,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const canUsePluginMethods$1 = {
+  async: ["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"],
+  sync: []
+};
 class CodeBlock extends BaseService {
   state = reactive({
     codeDsl: null,
@@ -10085,13 +10502,7 @@ class CodeBlock extends BaseService {
     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数据源
@@ -10264,6 +10675,9 @@ class CodeBlock extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
 }
 const codeBlockService = new CodeBlock();
 
@@ -10319,10 +10733,10 @@ class Events extends BaseService {
     });
   }
   setEvent(type, events) {
-    eventMap[type] = [...DEFAULT_EVENTS, ...events];
+    eventMap[toLine(type)] = [...DEFAULT_EVENTS, ...events];
   }
   getEvent(type) {
-    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
+    return cloneDeep(eventMap[toLine(type)] || DEFAULT_EVENTS);
   }
   setMethods(methods) {
     Object.keys(methods).forEach((type) => {
@@ -10330,10 +10744,10 @@ class Events extends BaseService {
     });
   }
   setMethod(type, method) {
-    methodMap[type] = [...DEFAULT_METHODS, ...method];
+    methodMap[toLine(type)] = [...DEFAULT_METHODS, ...method];
   }
   getMethod(type) {
-    return cloneDeep(methodMap[type] || DEFAULT_METHODS);
+    return cloneDeep(methodMap[toLine(type)] || DEFAULT_METHODS);
   }
   resetState() {
     eventMap = reactive({});
@@ -10527,6 +10941,10 @@ class Keybinding extends BaseService {
 }
 const keybindingService = new Keybinding();
 
+const canUsePluginMethods = {
+  async: [],
+  sync: ["openOverlay", "closeOverlay", "updateOverlay", "createStage"]
+};
 class StageOverlay extends BaseService {
   state = reactive({
     wrapDiv: document.createElement("div"),
@@ -10539,12 +10957,7 @@ class StageOverlay extends BaseService {
     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) {
@@ -10611,6 +11024,9 @@ class StageOverlay extends BaseService {
       }
     });
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   createContentEl() {
     const sourceEl = this.get("sourceEl");
     if (!sourceEl)
@@ -10651,7 +11067,7 @@ class StageOverlay extends BaseService {
       subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl);
+      subStage?.select(contentEl.id);
     }
   }
   updateHandler = () => {
@@ -11042,7 +11458,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     name: "MEditor"
   },
   __name: "Editor",
-  props: mergeDefaults({
+  props: /* @__PURE__ */ mergeDefaults({
     modelValue: {},
     componentGroupList: {},
     datasourceList: {},
@@ -11059,7 +11475,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     datasourceValues: {},
     datasourceConfigs: {},
     datasourceEventMethodList: {},
-    moveableOptions: { type: Function },
+    moveableOptions: { type: [Object, Function] },
     defaultSelected: {},
     containerHighlightClassName: {},
     containerHighlightDuration: {},
@@ -11123,13 +11539,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     provide("stageOptions", stageOptions);
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+      return openBlock(), createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$r, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -11204,7 +11620,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$q, {
+            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)),
@@ -11250,24 +11666,24 @@ const index = {
     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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$Q as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$N as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$I as DataSourceMethodSelect, _sfc_main$J as DataSourceMethods, _sfc_main$H as DataSourceMocks, _sfc_main$G as DataSourceSelect, DragType, _sfc_main$F as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$O as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$q as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };