@tmagic/editor 1.3.16 → 1.4.0-beta.1

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, watchEffect, nextTick, renderSlot, toDisplayString, createCommentVNode, Fragment, createTextVNode, toRaw, resolveDynamicComponent, mergeProps, renderList, createStaticVNode, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, mergeDefaults } from 'vue';
+import { FullScreen, Close, Edit, View, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { 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';
@@ -27,7 +27,7 @@ const getConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$t = {
+const _hoisted_1$u = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
@@ -188,7 +188,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$u, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -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,11 +454,150 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$t = { class: "m-editor-float-box-body" };
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+  __name: "FloatingBox",
+  props: {
+    visible: { type: Boolean, default: false },
+    position: { default: () => ({ left: 0, top: 0 }) },
+    rect: { default: () => ({ width: "auto", height: "auto" }) },
+    title: { default: "" },
+    beforeClose: {}
+  },
+  emits: ["update:visible"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const target = ref();
+    const dragTarget = ref();
+    const zIndex = useZIndex();
+    const curZIndex = ref(zIndex.nextZIndex());
+    const rect = ref({
+      width: props.rect.width,
+      height: props.rect.height
+    });
+    watchEffect(() => {
+      rect.value = {
+        width: props.rect.width,
+        height: props.rect.height
+      };
+    });
+    const style = computed(() => ({
+      left: `${props.position.left}px`,
+      top: `${props.position.top}px`,
+      width: typeof rect.value.width === "string" ? rect.value.width : `${rect.value.width}px`,
+      height: typeof rect.value.height === "string" ? rect.value.height : `${rect.value.height}px`
+    }));
+    let moveable = null;
+    const initMoveable = () => {
+      moveable = new VanillaMoveable(globalThis.document.body, {
+        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,
+        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) => {
+        rect.value.width = e.width;
+        rect.value.height = 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(
+      () => props.visible,
+      async (visible) => {
+        if (visible) {
+          await nextTick();
+          initMoveable();
+        } else {
+          destroyMoveable();
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    onBeforeUnmount(() => {
+      destroyMoveable();
+    });
+    const hide = (cancel) => {
+      if (cancel !== false) {
+        emit("update:visible", false);
+      }
+    };
+    const closeHandler = () => {
+      if (typeof props.beforeClose === "function") {
+        props.beforeClose(hide);
+      } else {
+        hide();
+      }
+    };
+    const nextZIndex = () => {
+      curZIndex.value = zIndex.nextZIndex();
+    };
+    __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, zIndex: curZIndex.value }),
+          onMousedown: nextZIndex
+        }, [
+          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$t, [
+            renderSlot(_ctx.$slots, "body")
+          ])
+        ], 36)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
 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"
   },
@@ -624,14 +763,30 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         changedValue.value && submitForm(changedValue.value);
         done();
       }).catch((action) => {
-        done(action === "close");
+        done(action === "cancel");
       });
     };
     const closedHandler = () => {
       changedValue.value = void 0;
     };
+    const boxVisible = ref(false);
+    const editVisible = ref(false);
+    const floatingBoxBody = ref();
+    const boxPosition = computed(() => {
+      const columnWidth2 = services?.uiService?.get("columnWidth");
+      const navMenuRect = services?.uiService?.get("navMenuRect");
+      return {
+        left: columnWidth2?.left ?? 0,
+        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
+      };
+    });
     __expose({
-      show() {
+      async show() {
+        if (props.slideType !== "box") {
+          boxVisible.value = true;
+        }
+        await nextTick();
+        editVisible.value = true;
         fomDrawer.value?.show();
       },
       hide() {
@@ -640,41 +795,61 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     });
     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),
+          title: "代码编辑",
+          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
+            }, null, 512)
           ]),
           _: 1
-        }, 40, ["title", "width", "config", "values", "disabled"])),
+        }, 8, ["visible", "position"]),
+        editVisible.value ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          to: floatingBoxBody.value,
+          disabled: _ctx.slideType === "box"
+        }, [
+          createVNode(unref(MFormBox), {
+            class: "m-editor-code-block-editor",
+            ref_key: "fomDrawer",
+            ref: fomDrawer,
+            "label-width": "80px",
+            "close-on-press-escape": false,
+            title: _ctx.content.name,
+            width: size.value,
+            config: functionConfig.value,
+            values: _ctx.content,
+            disabled: _ctx.disabled,
+            onChange: changeHandler,
+            onSubmit: submitForm,
+            onError: errorHandler,
+            onOpen: openHandler,
+            onClosed: closedHandler
+          }, {
+            left: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                type: "primary",
+                link: "",
+                onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = true)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("查看修改")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["title", "width", "config", "values", "disabled"])
+        ], 8, ["to", "disabled"])) : createCommentVNode("", true),
         createVNode(unref(TMagicDialog), {
           modelValue: difVisible.value,
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => difVisible.value = $event),
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => difVisible.value = $event),
           title: "查看修改",
           fullscreen: ""
         }, {
@@ -682,7 +857,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[2] || (_cache[2] = ($event) => difVisible.value = false)
               }, {
                 default: withCtx(() => [
                   createTextVNode("取消")
@@ -1141,6 +1316,9 @@ class BaseService extends EventEmitter {
       });
     });
   }
+  /**
+   * @deprecated 请使用usePlugin代替
+   */
   use(options) {
     Object.entries(options).forEach(([methodName2, method]) => {
       if (typeof method === "function")
@@ -1172,6 +1350,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 +1378,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 +1387,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 +1432,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 +1446,8 @@ class DataSource extends BaseService {
     this.resetState();
     this.removeAllPlugins();
   }
-  createId() {
-    return `ds_${guid()}`;
+  usePlugin(options) {
+    super.usePlugin(options);
   }
 }
 const dataSourceService = new DataSource();
@@ -1285,7 +1470,6 @@ const numberOptions = [
 ];
 const styleTabConfig = {
   title: "样式",
-  labelWidth: "80px",
   items: [
     {
       name: "style",
@@ -1295,29 +1479,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 +1540,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 +1584,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 +1634,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 +1689,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 +1726,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 +1769,11 @@ const advancedTabConfig = {
     {
       name: "created",
       text: "created",
-      labelWidth: "100px",
       type: "code-select"
     },
     {
       name: "mounted",
       text: "mounted",
-      labelWidth: "100px",
       type: "code-select"
     }
   ]
@@ -1488,14 +1796,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 +1838,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 +1874,13 @@ const displayTabConfig = {
     }
   ]
 };
-const fillConfig = (config = []) => [
+const fillConfig = (config = [], labelWidth = "80px") => [
   {
     type: "tab",
+    labelWidth,
     items: [
       {
         title: "属性",
-        labelWidth: "80px",
         items: [
           // 组件类型，必须要有
           {
@@ -1895,6 +2217,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 +2236,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 +2246,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 +2261,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 +2274,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 +2292,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 +2316,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 +2334,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns Object
    */
-  async getDefaultPropsValue(type) {
+  getDefaultPropsValue(type) {
     return ["page", "container"].includes(type) ? {
       type,
       layout: "absolute",
@@ -2067,6 +2388,9 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   /**
    * 获取setNewItemId前后映射关系
    * @param oldId 原组件ID
@@ -2226,18 +2550,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 +2641,9 @@ class WebStorage extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   getValueAndProtocol(value) {
     let protocol = "";
     if (value === null) {
@@ -2340,6 +2664,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 +2709,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 +3211,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 +3449,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 +3519,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 +3589,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3310,7 +3640,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"
   },
@@ -3414,9 +3744,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 +3829,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 +3844,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 +3859,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 +3913,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 +4158,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 +4181,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 +4479,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 +4514,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 +4597,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 +4669,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 +4688,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 +4703,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 +4796,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 +4804,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 +4820,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 +4833,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 +5031,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 +5067,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 +5124,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 +5333,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 +5393,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 +5403,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 +5476,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 +5542,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 +5550,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 +5598,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 +5607,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 +5619,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 +5693,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 +5717,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 +5732,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 +5748,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 +5812,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -5424,7 +5834,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSplitView"
   },
@@ -5551,7 +5961,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 +5970,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 +5983,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 +6067,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 +6081,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 +6099,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 +6149,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 +6187,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 +6299,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 +6315,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 +6366,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 +6448,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 +6489,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 +6497,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 +6520,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 +6548,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 +6565,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 +6579,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"
   },
@@ -6256,7 +6666,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",
@@ -6279,10 +6689,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 })
                 ]),
@@ -6317,7 +6727,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -6467,10 +6877,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 +6909,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 +6921,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"
   },
@@ -6547,7 +6977,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
     __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",
@@ -6568,116 +6998,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(
@@ -6861,7 +7181,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 +7460,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 +7475,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 +7552,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 +7733,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 +7748,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 +7850,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 +8019,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 +8284,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 +8930,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 +8951,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"])
                               ]),
@@ -8711,7 +9031,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 +9093,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,7 +9226,7 @@ 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,
@@ -9270,15 +9595,21 @@ 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
+  }
 });
+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 +9647,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 +9661,9 @@ class Ui extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   async setStageRect(value) {
     state.stageRect = {
       ...state.stageRect,
@@ -9534,7 +9855,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 +10397,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 +10410,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 +10583,9 @@ class CodeBlock extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
 }
 const codeBlockService = new CodeBlock();
 
@@ -10319,10 +10641,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 +10652,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 +10849,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 +10865,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 +10932,9 @@ class StageOverlay extends BaseService {
       }
     });
   }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
   createContentEl() {
     const sourceEl = this.get("sourceEl");
     if (!sourceEl)
@@ -11042,7 +11366,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     name: "MEditor"
   },
   __name: "Editor",
-  props: mergeDefaults({
+  props: /* @__PURE__ */ mergeDefaults({
     modelValue: {},
     componentGroupList: {},
     datasourceList: {},
@@ -11059,7 +11383,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     datasourceValues: {},
     datasourceConfigs: {},
     datasourceEventMethodList: {},
-    moveableOptions: { type: Function },
+    moveableOptions: { type: [Object, Function] },
     defaultSelected: {},
     containerHighlightClassName: {},
     containerHighlightDuration: {},
@@ -11123,13 +11447,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 +11528,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 +11574,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, useFloatBox, useStage, warn };