@tmagic/editor 1.3.15 → 1.4.0-beta.1

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/form'), require('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('moveable'), require('@tmagic/dep'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/schema', '@tmagic/form', '@tmagic/table', '@tmagic/utils', 'gesto', 'moveable', '@tmagic/dep', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.table, global.utils, global.Gesto, global.VanillaMoveable, global.dep, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, table, utils, Gesto, VanillaMoveable, dep, StageCore, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/form'), require('moveable'), require('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('@tmagic/dep'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/schema', '@tmagic/form', 'moveable', '@tmagic/table', '@tmagic/utils', 'gesto', '@tmagic/dep', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.VanillaMoveable, global.table, global.utils, global.Gesto, global.dep, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, VanillaMoveable, table, utils, Gesto, dep, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,7 +32,7 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$t = {
+  const _hoisted_1$u = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
   const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
@@ -193,7 +193,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -223,7 +223,7 @@
 
   const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCode"
+      name: "MFieldsVsCode"
     },
     __name: "Code",
     props: {
@@ -263,7 +263,7 @@
 
   const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCodeLink"
+      name: "MFieldsCodeLink"
     },
     __name: "CodeLink",
     props: {
@@ -343,7 +343,7 @@
 
   const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCodeSelect"
+      name: "MFieldsCodeSelect"
     },
     __name: "CodeSelect",
     props: {
@@ -459,11 +459,150 @@
     }
   });
 
+  const _hoisted_1$t = { class: "m-editor-float-box-body" };
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+    __name: "FloatingBox",
+    props: {
+      visible: { type: Boolean, default: false },
+      position: { default: () => ({ left: 0, top: 0 }) },
+      rect: { default: () => ({ width: "auto", height: "auto" }) },
+      title: { default: "" },
+      beforeClose: {}
+    },
+    emits: ["update:visible"],
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const target = vue.ref();
+      const dragTarget = vue.ref();
+      const zIndex = design.useZIndex();
+      const curZIndex = vue.ref(zIndex.nextZIndex());
+      const rect = vue.ref({
+        width: props.rect.width,
+        height: props.rect.height
+      });
+      vue.watchEffect(() => {
+        rect.value = {
+          width: props.rect.width,
+          height: props.rect.height
+        };
+      });
+      const style = vue.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;
+      };
+      vue.watch(
+        () => props.visible,
+        async (visible) => {
+          if (visible) {
+            await vue.nextTick();
+            initMoveable();
+          } else {
+            destroyMoveable();
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.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 ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          key: 0,
+          to: "body"
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "target",
+            ref: target,
+            class: "m-editor-float-box",
+            style: vue.normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
+            onMousedown: nextZIndex
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "dragTarget",
+              ref: dragTarget,
+              class: "m-editor-float-box-title"
+            }, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+              ]),
+              vue.createElementVNode("div", null, [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  link: "",
+                  size: "small",
+                  icon: vue.unref(iconsVue.Close),
+                  onClick: closeHandler
+                }, null, 8, ["icon"])
+              ])
+            ], 512),
+            vue.createElementVNode("div", _hoisted_1$t, [
+              vue.renderSlot(_ctx.$slots, "body")
+            ])
+          ], 36)
+        ])) : vue.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__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -629,14 +768,30 @@
           changedValue.value && submitForm(changedValue.value);
           done();
         }).catch((action) => {
-          done(action === "close");
+          done(action === "cancel");
         });
       };
       const closedHandler = () => {
         changedValue.value = void 0;
       };
+      const boxVisible = vue.ref(false);
+      const editVisible = vue.ref(false);
+      const floatingBoxBody = vue.ref();
+      const boxPosition = vue.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 vue.nextTick();
+          editVisible.value = true;
           fomDrawer.value?.show();
         },
         hide() {
@@ -645,41 +800,61 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slideType === "box" ? vue.unref(form.MFormBox) : vue.unref(form.MFormDrawer)), {
-            class: "m-editor-code-block-editor",
-            ref_key: "fomDrawer",
-            ref: fomDrawer,
-            "label-width": "80px",
-            "close-on-press-escape": false,
-            title: _ctx.content.name,
-            width: size.value,
-            config: functionConfig.value,
-            values: _ctx.content,
-            disabled: _ctx.disabled,
-            "before-close": beforeClose,
-            onChange: changeHandler,
-            onSubmit: submitForm,
-            onError: errorHandler,
-            onOpen: openHandler,
-            onClosed: closedHandler
+          vue.createVNode(_sfc_main$Q, {
+            visible: boxVisible.value,
+            "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
+            title: "代码编辑",
+            position: boxPosition.value,
+            "before-close": beforeClose
           }, {
-            left: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
-                type: "primary",
-                link: "",
-                onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode("查看修改")
-                ]),
-                _: 1
-              })
+            body: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                ref_key: "floatingBoxBody",
+                ref: floatingBoxBody
+              }, null, 512)
             ]),
             _: 1
-          }, 40, ["title", "width", "config", "values", "disabled"])),
+          }, 8, ["visible", "position"]),
+          editVisible.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            key: 0,
+            to: floatingBoxBody.value,
+            disabled: _ctx.slideType === "box"
+          }, [
+            vue.createVNode(vue.unref(form.MFormBox), {
+              class: "m-editor-code-block-editor",
+              ref_key: "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: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  type: "primary",
+                  link: "",
+                  onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = true)
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode("查看修改")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["title", "width", "config", "values", "disabled"])
+          ], 8, ["to", "disabled"])) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(design.TMagicDialog), {
             modelValue: difVisible.value,
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => difVisible.value = $event),
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => difVisible.value = $event),
             title: "查看修改",
             fullscreen: ""
           }, {
@@ -687,7 +862,7 @@
               vue.createElementVNode("span", _hoisted_4$7, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
-                  onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
+                  onClick: _cache[2] || (_cache[2] = ($event) => difVisible.value = false)
                 }, {
                   default: vue.withCtx(() => [
                     vue.createTextVNode("取消")
@@ -1146,6 +1321,9 @@
         });
       });
     }
+    /**
+     * @deprecated 请使用usePlugin代替
+     */
     use(options) {
       Object.entries(options).forEach(([methodName2, method]) => {
         if (typeof method === "function")
@@ -1177,6 +1355,23 @@
     }
   }
 
+  const canUsePluginMethods$6 = {
+    async: [],
+    sync: [
+      "getFormConfig",
+      "setFormConfig",
+      "getFormValue",
+      "setFormValue",
+      "getFormEvent",
+      "setFormEvent",
+      "getFormMethod",
+      "setFormMethod",
+      "add",
+      "update",
+      "remove",
+      "createId"
+    ]
+  };
   class DataSource extends BaseService {
     state = vue.reactive({
       datasourceTypeList: [],
@@ -1188,20 +1383,7 @@
       methods: {}
     });
     constructor() {
-      super([
-        { name: "getFormConfig", isAsync: false },
-        { name: "setFormConfig", isAsync: false },
-        { name: "getFormValue", isAsync: false },
-        { name: "setFormValue", isAsync: false },
-        { name: "getFormEvent", isAsync: false },
-        { name: "setFormEvent", isAsync: false },
-        { name: "getFormMethod", isAsync: false },
-        { name: "setFormMethod", isAsync: false },
-        { name: "add", isAsync: false },
-        { name: "update", isAsync: false },
-        { name: "remove", isAsync: false },
-        { name: "createId", isAsync: false }
-      ]);
+      super(canUsePluginMethods$6.sync.map((methodName) => ({ name: methodName, isAsync: false })));
     }
     set(name, value) {
       this.state[name] = value;
@@ -1210,28 +1392,28 @@
       return this.state[name];
     }
     getFormConfig(type = "base") {
-      return getFormConfig(type, this.get("configs"));
+      return getFormConfig(utils.toLine(type), this.get("configs"));
     }
     setFormConfig(type, config) {
-      this.get("configs")[type] = config;
+      this.get("configs")[utils.toLine(type)] = config;
     }
     getFormValue(type = "base") {
-      return getFormValue(type, this.get("values")[type]);
+      return getFormValue(utils.toLine(type), this.get("values")[type]);
     }
     setFormValue(type, value) {
-      this.get("values")[type] = value;
+      this.get("values")[utils.toLine(type)] = value;
     }
     getFormEvent(type = "base") {
-      return this.get("events")[type] || [];
+      return this.get("events")[utils.toLine(type)] || [];
     }
     setFormEvent(type, value = []) {
-      this.get("events")[type] = value;
+      this.get("events")[utils.toLine(type)] = value;
     }
     getFormMethod(type = "base") {
-      return this.get("methods")[type] || [];
+      return this.get("methods")[utils.toLine(type)] || [];
     }
     setFormMethod(type, value = []) {
-      this.get("methods")[type] = value;
+      this.get("methods")[utils.toLine(type)] = value;
     }
     add(config) {
       const newConfig = {
@@ -1255,6 +1437,9 @@
       dataSources.splice(index, 1);
       this.emit("remove", id);
     }
+    createId() {
+      return `ds_${utils.guid()}`;
+    }
     getDataSourceById(id) {
       return this.get("dataSources").find((ds) => ds.id === id);
     }
@@ -1266,8 +1451,8 @@
       this.resetState();
       this.removeAllPlugins();
     }
-    createId() {
-      return `ds_${utils.guid()}`;
+    usePlugin(options) {
+      super.usePlugin(options);
     }
   }
   const dataSourceService = new DataSource();
@@ -1290,7 +1475,6 @@
   ];
   const styleTabConfig = {
     title: "样式",
-    labelWidth: "80px",
     items: [
       {
         name: "style",
@@ -1300,29 +1484,58 @@
             legend: "位置",
             items: [
               {
+                type: "data-source-field-select",
                 name: "position",
-                type: "checkbox",
-                activeValue: "fixed",
-                inactiveValue: "absolute",
-                defaultValue: "absolute",
-                text: "固定定位"
+                text: "固定定位",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "checkbox",
+                  activeValue: "fixed",
+                  inactiveValue: "absolute",
+                  defaultValue: "absolute"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "left",
-                text: "left"
+                text: "left",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "top",
                 text: "top",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                },
                 disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
               },
               {
+                type: "data-source-field-select",
                 name: "right",
-                text: "right"
+                text: "right",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "bottom",
                 text: "bottom",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                },
                 disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
               }
             ]
@@ -1332,12 +1545,42 @@
             legend: "盒子",
             items: [
               {
+                type: "data-source-field-select",
                 name: "width",
-                text: "宽度"
+                text: "宽度",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "height",
-                text: "高度"
+                text: "高度",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
+              },
+              {
+                type: "data-source-field-select",
+                text: "overflow",
+                name: "overflow",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "select",
+                  options: [
+                    { text: "visible", value: "visible" },
+                    { text: "hidden", value: "hidden" },
+                    { text: "clip", value: "clip" },
+                    { text: "scroll", value: "scroll" },
+                    { text: "auto", value: "auto" },
+                    { text: "overlay", value: "overlay" }
+                  ]
+                }
               }
             ]
           },
@@ -1346,32 +1589,48 @@
             legend: "边框",
             items: [
               {
+                type: "data-source-field-select",
                 name: "borderWidth",
                 text: "宽度",
-                defaultValue: "0"
+                defaultValue: "0",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "borderColor",
                 text: "颜色",
-                type: "colorPicker"
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "borderStyle",
                 text: "样式",
-                type: "select",
                 defaultValue: "none",
-                options: [
-                  { text: "none", value: "none" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "dotted", value: "dotted" },
-                  { text: "dashed", value: "dashed" },
-                  { text: "solid", value: "solid" },
-                  { text: "double", value: "double" },
-                  { text: "groove", value: "groove" },
-                  { text: "ridge", value: "ridge" },
-                  { text: "inset", value: "inset" },
-                  { text: "outset", value: "outset" }
-                ]
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "select",
+                  options: [
+                    { text: "none", value: "none" },
+                    { text: "hidden", value: "hidden" },
+                    { text: "dotted", value: "dotted" },
+                    { text: "dashed", value: "dashed" },
+                    { text: "solid", value: "solid" },
+                    { text: "double", value: "double" },
+                    { text: "groove", value: "groove" },
+                    { text: "ridge", value: "ridge" },
+                    { text: "inset", value: "inset" },
+                    { text: "outset", value: "outset" }
+                  ]
+                }
               }
             ]
           },
@@ -1380,31 +1639,53 @@
             legend: "背景",
             items: [
               {
+                type: "data-source-field-select",
                 name: "backgroundImage",
-                text: "背景图"
+                text: "背景图",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "backgroundColor",
                 text: "背景颜色",
-                type: "colorPicker"
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "colorPicker"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "backgroundRepeat",
                 text: "背景图重复",
-                type: "select",
                 defaultValue: "no-repeat",
-                options: [
-                  { text: "repeat", value: "repeat" },
-                  { text: "repeat-x", value: "repeat-x" },
-                  { text: "repeat-y", value: "repeat-y" },
-                  { text: "no-repeat", value: "no-repeat" },
-                  { text: "inherit", value: "inherit" }
-                ]
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "select",
+                  options: [
+                    { text: "repeat", value: "repeat" },
+                    { text: "repeat-x", value: "repeat-x" },
+                    { text: "repeat-y", value: "repeat-y" },
+                    { text: "no-repeat", value: "no-repeat" },
+                    { text: "inherit", value: "inherit" }
+                  ]
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "backgroundSize",
                 text: "背景图大小",
-                defaultValue: "100% 100%"
+                defaultValue: "100% 100%",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               }
             ]
           },
@@ -1413,17 +1694,34 @@
             legend: "字体",
             items: [
               {
+                type: "data-source-field-select",
                 name: "color",
                 text: "颜色",
-                type: "colorPicker"
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "colorPicker"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "fontSize",
-                text: "大小"
+                text: "大小",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "fontWeight",
-                text: "粗细"
+                text: "粗细",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number"],
+                fieldConfig: {
+                  type: "text"
+                }
               }
             ]
           },
@@ -1433,12 +1731,24 @@
             name: "transform",
             items: [
               {
+                type: "data-source-field-select",
                 name: "rotate",
-                text: "旋转角度"
+                text: "旋转角度",
+                checkStrictly: false,
+                dataSourceFieldType: ["string"],
+                fieldConfig: {
+                  type: "text"
+                }
               },
               {
+                type: "data-source-field-select",
                 name: "scale",
-                text: "缩放"
+                text: "缩放",
+                checkStrictly: false,
+                dataSourceFieldType: ["number", "string"],
+                fieldConfig: {
+                  type: "text"
+                }
               }
             ]
           }
@@ -1464,13 +1774,11 @@
       {
         name: "created",
         text: "created",
-        labelWidth: "100px",
         type: "code-select"
       },
       {
         name: "mounted",
         text: "mounted",
-        labelWidth: "100px",
         type: "code-select"
       }
     ]
@@ -1493,14 +1801,22 @@
                 type: "data-source-field-select",
                 name: "field",
                 value: "key",
-                label: "字段"
+                label: "字段",
+                checkStrictly: false,
+                dataSourceFieldType: ["string", "number", "boolean", "any"]
               },
               {
                 type: "select",
                 options: (mForm, { model }) => {
-                  const [id, field] = model.field;
+                  const [id, ...fieldNames] = model.field;
                   const ds = dataSourceService.getDataSourceById(id);
-                  const type = ds?.fields.find((f) => f.name === field)?.type;
+                  let fields = ds?.fields || [];
+                  let type = "";
+                  (fieldNames || []).forEach((fieldName) => {
+                    const field = fields.find((f) => f.name === fieldName);
+                    fields = field?.fields || [];
+                    type = field?.type || "";
+                  });
                   if (type === "array") {
                     return arrayOptions;
                   }
@@ -1527,9 +1843,15 @@
                   {
                     name: "value",
                     type: (mForm, { model }) => {
-                      const [id, field] = model.field;
+                      const [id, ...fieldNames] = model.field;
                       const ds = dataSourceService.getDataSourceById(id);
-                      const type = ds?.fields.find((f) => f.name === field)?.type;
+                      let fields = ds?.fields || [];
+                      let type = "";
+                      (fieldNames || []).forEach((fieldName) => {
+                        const field = fields.find((f) => f.name === fieldName);
+                        fields = field?.fields || [];
+                        type = field?.type || "";
+                      });
                       if (type === "number") {
                         return "number";
                       }
@@ -1557,13 +1879,13 @@
       }
     ]
   };
-  const fillConfig = (config = []) => [
+  const fillConfig = (config = [], labelWidth = "80px") => [
     {
       type: "tab",
+      labelWidth,
       items: [
         {
           title: "属性",
-          labelWidth: "80px",
           items: [
             // 组件类型，必须要有
             {
@@ -1900,6 +2222,17 @@
   }
   const depService = new Dep();
 
+  const canUsePluginMethods$5 = {
+    async: [
+      "setPropsConfig",
+      "getPropsConfig",
+      "setPropsValue",
+      "getPropsValue",
+      "fillConfig",
+      "getDefaultPropsValue"
+    ],
+    sync: ["createId", "setNewItemId"]
+  };
   class Props extends BaseService {
     state = vue.reactive({
       propsConfigMap: {},
@@ -1908,14 +2241,8 @@
     });
     constructor() {
       super([
-        { name: "setPropsConfig", isAsync: true },
-        { name: "getPropsConfig", isAsync: true },
-        { name: "setPropsValue", isAsync: true },
-        { name: "getPropsValue", isAsync: true },
-        { name: "createId", isAsync: false },
-        { name: "setNewItemId", isAsync: true },
-        { name: "fillConfig", isAsync: true },
-        { name: "getDefaultPropsValue", isAsync: true }
+        ...canUsePluginMethods$5.async.map((methodName) => ({ name: methodName, isAsync: true })),
+        ...canUsePluginMethods$5.sync.map((methodName) => ({ name: methodName, isAsync: false }))
       ]);
     }
     setPropsConfigs(configs) {
@@ -1924,16 +2251,11 @@
       });
       this.emit("props-configs-change");
     }
-    async fillConfig(config) {
-      return fillConfig(config);
+    async fillConfig(config, labelWidth) {
+      return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
     }
-    /**
-     * 为指定类型组件设置组件属性表单配置
-     * @param type 组件类型
-     * @param config 组件属性表单配置
-     */
     async setPropsConfig(type, config) {
-      this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
     }
     /**
      * 获取指点类型的组件属性表单配置
@@ -1944,7 +2266,7 @@
       if (type === "area") {
         return await this.getPropsConfig("button");
       }
-      return lodashEs.cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+      return lodashEs.cloneDeep(this.state.propsConfigMap[utils.toLine(type)] || await this.fillConfig([]));
     }
     setPropsValues(values) {
       Object.keys(values).forEach((type) => {
@@ -1957,14 +2279,15 @@
      * @param value 组件初始值
      */
     async setPropsValue(type, value) {
-      this.state.propsValueMap[type] = value;
+      this.state.propsValueMap[utils.toLine(type)] = value;
     }
     /**
      * 获取指定类型的组件初始值
      * @param type 组件类型
      * @returns 组件初始值
      */
-    async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
+    async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+      const type = utils.toLine(componentType);
       if (type === "area") {
         const value = await this.getPropsValue("button");
         value.className = "action-area";
@@ -1974,23 +2297,21 @@
         }
         return value;
       }
-      const [id, defaultPropsValue, data] = await Promise.all([
-        this.createId(type),
-        this.getDefaultPropsValue(type),
-        this.setNewItemId(
-          lodashEs.cloneDeep({
-            type,
-            ...defaultValue
-          })
-        )
-      ]);
+      const id = this.createId(type);
+      const defaultPropsValue = this.getDefaultPropsValue(type);
+      const data = this.setNewItemId(
+        lodashEs.cloneDeep({
+          type,
+          ...defaultValue
+        })
+      );
       return {
         id,
         ...defaultPropsValue,
         ...lodashEs.mergeWith({}, lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
       };
     }
-    async createId(type) {
+    createId(type) {
       return `${type}_${utils.guid()}`;
     }
     /**
@@ -2000,15 +2321,15 @@
      * @param {Boolean} force 是否强制设置新的ID
      */
     /* eslint no-param-reassign: ["error", { "props": false }] */
-    async setNewItemId(config, force = true) {
+    setNewItemId(config, force = true) {
       if (force || editorService.getNodeById(config.id)) {
-        const newId = await this.createId(config.type || "component");
+        const newId = this.createId(config.type || "component");
         this.setRelateId(config.id, newId);
         config.id = newId;
       }
       if (config.items && Array.isArray(config.items)) {
         for (const item of config.items) {
-          await this.setNewItemId(item);
+          this.setNewItemId(item);
         }
       }
       return config;
@@ -2018,7 +2339,7 @@
      * @param type 组件类型
      * @returns Object
      */
-    async getDefaultPropsValue(type) {
+    getDefaultPropsValue(type) {
       return ["page", "container"].includes(type) ? {
         type,
         layout: "absolute",
@@ -2072,6 +2393,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     /**
      * 获取setNewItemId前后映射关系
      * @param oldId 原组件ID
@@ -2231,18 +2555,15 @@
     Protocol2["BOOLEAN"] = "boolean";
     return Protocol2;
   })(Protocol || {});
+  const canUsePluginMethods$4 = {
+    async: [],
+    sync: ["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]
+  };
   class WebStorage extends BaseService {
     storage = globalThis.localStorage;
     namespace = "tmagic";
     constructor() {
-      super([
-        { name: "getStorage", isAsync: false },
-        { name: "getNamespace", isAsync: false },
-        { name: "clear", isAsync: false },
-        { name: "getItem", isAsync: false },
-        { name: "removeItem", isAsync: false },
-        { name: "setItem", isAsync: false }
-      ]);
+      super(canUsePluginMethods$4.sync.map((methodName) => ({ name: methodName, isAsync: false })));
     }
     /**
      * 获取数据存储对象，可以通过
@@ -2325,6 +2646,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     getValueAndProtocol(value) {
       let protocol = "";
       if (value === null) {
@@ -2345,6 +2669,33 @@
   }
   const storageService = new WebStorage();
 
+  const canUsePluginMethods$3 = {
+    async: [
+      "getLayout",
+      "highlight",
+      "select",
+      "multiSelect",
+      "doAdd",
+      "add",
+      "doRemove",
+      "remove",
+      "doUpdate",
+      "update",
+      "sort",
+      "copy",
+      "paste",
+      "doPaste",
+      "doAlignCenter",
+      "alignCenter",
+      "moveLayer",
+      "moveToContainer",
+      "dragTo",
+      "undo",
+      "redo",
+      "move"
+    ],
+    sync: []
+  };
   class Editor extends BaseService {
     state = vue.reactive({
       root: null,
@@ -2363,29 +2714,7 @@
     isHistoryStateChange = false;
     constructor() {
       super(
-        [
-          { name: "getLayout", isAsync: true },
-          { name: "select", isAsync: true },
-          { name: "doAdd", isAsync: true },
-          { name: "add", isAsync: true },
-          { name: "doRemove", isAsync: true },
-          { name: "remove", isAsync: true },
-          { name: "doUpdate", isAsync: true },
-          { name: "update", isAsync: true },
-          { name: "sort", isAsync: true },
-          { name: "copy", isAsync: true },
-          { name: "paste", isAsync: true },
-          { name: "doPaste", isAsync: true },
-          { name: "doAlignCenter", isAsync: true },
-          { name: "alignCenter", isAsync: true },
-          { name: "moveLayer", isAsync: true },
-          { name: "moveToContainer", isAsync: true },
-          { name: "move", isAsync: true },
-          { name: "undo", isAsync: true },
-          { name: "redo", isAsync: true },
-          { name: "highlight", isAsync: true },
-          { name: "dragTo", isAsync: true }
-        ],
+        canUsePluginMethods$3.async.map((methodName) => ({ name: methodName, isAsync: true })),
         // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
         ["select", "update", "moveLayer"]
       );
@@ -2887,7 +3216,7 @@
     }
     async doPaste(config, position = {}) {
       propsService.clearRelateId();
-      const pasteConfigs = await beforePaste(position, lodashEs.cloneDeep(config));
+      const pasteConfigs = beforePaste(position, lodashEs.cloneDeep(config));
       return pasteConfigs;
     }
     async doAlignCenter(config) {
@@ -3125,6 +3454,9 @@
     resetModifiedNodeId() {
       this.get("modifiedNodeIds").clear();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     addModifiedNodeId(id) {
       if (!this.isHistoryStateChange) {
         this.get("modifiedNodeIds").set(id, id);
@@ -3192,45 +3524,43 @@
   }
   const editorService = new Editor();
 
-  const beforePaste = async (position, config) => {
+  const beforePaste = (position, config) => {
     if (!config[0]?.style)
       return config;
     const curNode = editorService.get("node");
     const { left: referenceLeft, top: referenceTop } = config[0].style;
-    const pasteConfigs = await Promise.all(
-      config.map(async (configItem) => {
-        const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-        let pastePosition = positionClone;
-        if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
-          pastePosition = getPositionInContainer(pastePosition, curNode.id);
-        }
-        if (pastePosition.left && configItem.style?.left) {
-          pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-        }
-        if (pastePosition.top && configItem.style?.top) {
-          pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-        }
-        const pasteConfig = await propsService.setNewItemId(configItem, false);
-        if (pasteConfig.style) {
-          const { left, top } = pasteConfig.style;
-          if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-            pasteConfig.style.left = Number(left) + offsetX;
-          }
-          if (typeof top === "number" || !!top && !isNaN(Number(top))) {
-            pasteConfig.style.top = Number(top) + offsetY;
-          }
-          pasteConfig.style = {
-            ...pasteConfig.style,
-            ...pastePosition
-          };
-        }
-        const root = editorService.get("root");
-        if ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
-          pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.NodeType.PAGE_FRAGMENT);
-        }
-        return pasteConfig;
-      })
-    );
+    const pasteConfigs = config.map((configItem) => {
+      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+      let pastePosition = positionClone;
+      if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
+        pastePosition = getPositionInContainer(pastePosition, curNode.id);
+      }
+      if (pastePosition.left && configItem.style?.left) {
+        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+      }
+      if (pastePosition.top && configItem.style?.top) {
+        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+      }
+      const pasteConfig = propsService.setNewItemId(configItem, false);
+      if (pasteConfig.style) {
+        const { left, top } = pasteConfig.style;
+        if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+          pasteConfig.style.left = Number(left) + offsetX;
+        }
+        if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+          pasteConfig.style.top = Number(top) + offsetY;
+        }
+        pasteConfig.style = {
+          ...pasteConfig.style,
+          ...pastePosition
+        };
+      }
+      const root = editorService.get("root");
+      if ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
+        pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.NodeType.PAGE_FRAGMENT);
+      }
+      return pasteConfig;
+    });
     return pasteConfigs;
   };
   const getPositionInContainer = (position = {}, id) => {
@@ -3264,7 +3594,7 @@
     return newNode;
   };
 
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3315,7 +3645,7 @@
   });
 
   const _hoisted_1$r = ["src"];
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -3419,9 +3749,9 @@
 
   const _hoisted_1$q = { class: "m-fields-code-select-col" };
   const _hoisted_2$j = { class: "code-select-container" };
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorCodeSelectCol"
+      name: "MFieldsCodeSelectCol"
     },
     __name: "CodeSelectCol",
     props: {
@@ -3504,14 +3834,14 @@
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             name: "params",
             key: _ctx.model[_ctx.name],
             model: _ctx.model,
@@ -3519,7 +3849,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3534,9 +3864,9 @@
 
   const _hoisted_1$p = { class: "m-editor-data-source-fields" };
   const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceFields"
+      name: "MFieldsDataSourceFields"
     },
     __name: "DataSourceFields",
     props: {
@@ -3588,7 +3918,14 @@
         },
         {
           label: "默认值",
-          prop: "defaultValue"
+          prop: "defaultValue",
+          formatter(item, row) {
+            try {
+              return JSON.stringify(row.defaultValue);
+            } catch (e) {
+              return row.defaultValue;
+            }
+          }
         },
         {
           label: "操作",
@@ -3826,7 +4163,11 @@
     }
   });
 
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MFieldsDataSourceFieldSelect"
+    },
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3845,48 +4186,117 @@
       const emit = __emit;
       const props = __props;
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
-      const getOptionChildren = (fields = []) => fields.map((field) => ({
-        label: field.title || field.name,
-        value: field.name,
-        children: field.type === "array" ? [] : getOptionChildren(field.fields)
-      }));
+      const getOptionChildren = (fields = [], dataSourceFieldType = ["any"]) => {
+        const child = [];
+        fields.forEach((field) => {
+          if (!dataSourceFieldType.length) {
+            dataSourceFieldType.push("any");
+          }
+          const children = getOptionChildren(field.fields, dataSourceFieldType);
+          const item = {
+            label: field.title || field.name,
+            value: field.name,
+            children
+          };
+          const fieldType = field.type || "any";
+          if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
+            child.push(item);
+            return;
+          }
+          if (!dataSourceFieldType.includes(fieldType) && fieldType !== "object") {
+            return;
+          }
+          if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+            return;
+          }
+          child.push(item);
+        });
+        return child;
+      };
       const cascaderConfig = vue.computed(() => {
         const valueIsKey = props.config.value === "key";
         return {
           type: "cascader",
-          name: props.name,
-          checkStrictly: !valueIsKey,
-          text: "",
-          options: () => dataSources.value?.filter((ds) => ds.fields?.length)?.map((ds) => ({
-            label: ds.title || ds.id,
-            value: valueIsKey ? ds.id : `${utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-            children: getOptionChildren(ds.fields)
-          })) || []
+          checkStrictly: props.config.checkStrictly ?? !valueIsKey,
+          popperClass: "m-editor-data-source-field-select-popper",
+          options: () => {
+            const options = dataSources.value?.map((ds) => ({
+              label: ds.title || ds.id,
+              value: valueIsKey ? ds.id : `${utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+              children: getOptionChildren(ds.fields, props.config.dataSourceFieldType)
+            })) || [];
+            return options.filter((option) => option.children.length);
+          }
         };
       });
+      const showDataSourceFieldSelect = vue.ref(false);
+      vue.onMounted(() => {
+        const value = props.model[props.name];
+        if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
+          return showDataSourceFieldSelect.value = true;
+        }
+      });
+      const mForm = vue.inject("mForm");
+      const type = vue.computed(() => {
+        let type2 = props.config.fieldConfig?.type;
+        if (typeof type2 === "function") {
+          type2 = type2(mForm, {
+            model: props.model
+          });
+        }
+        if (type2 === "form")
+          return "";
+        if (type2 === "container")
+          return "";
+        return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (props.config.items ? "" : "text");
+      });
+      const tagName = vue.computed(() => {
+        if (showDataSourceFieldSelect.value || !props.config.fieldConfig) {
+          return form.MCascader;
+        }
+        const component = vue.resolveComponent(`m-${props.config.items ? "form" : "fields"}-${type.value}`);
+        if (typeof component !== "string")
+          return component;
+        return "m-fields-text";
+      });
       const onChangeHandler = (value) => {
         emit("change", value);
       };
       return (_ctx, _cache) => {
-        const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createBlock(_component_m_form_container, {
-          config: {
-            ..._ctx.config,
-            ...cascaderConfig.value
-          },
-          model: _ctx.model,
-          onChange: onChangeHandler
-        }, null, 8, ["config", "model"]);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
+            style: { "width": "100%" },
+            config: showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? cascaderConfig.value : _ctx.config.fieldConfig,
+            model: _ctx.model,
+            name: _ctx.name,
+            disabled: _ctx.disabled,
+            size: _ctx.size,
+            "last-values": _ctx.lastValues,
+            "init-values": _ctx.initValues,
+            values: _ctx.values,
+            prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
+            onChange: onChangeHandler
+          }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
+          _ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 0,
+            style: { "margin-left": "5px" },
+            link: "",
+            type: showDataSourceFieldSelect.value ? "primary" : "default",
+            icon: vue.unref(iconsVue.Coin),
+            size: _ctx.size,
+            onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+          }, null, 8, ["type", "icon", "size"])) : vue.createCommentVNode("", true)
+        ]);
       };
     }
   });
 
-  const _hoisted_1$o = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$7 = { class: "el-input__inner" };
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceInput"
+      name: "MFieldsDataSourceInput"
     },
     __name: "DataSourceInput",
     props: {
@@ -4074,10 +4484,10 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$o, [
+            vue.createElementVNode("div", _hoisted_1$n, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$h, vue.toDisplayString(item.value), 1)
             ])
@@ -4109,7 +4519,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$O, {
+              vue.createVNode(_sfc_main$N, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -4192,11 +4602,11 @@
     };
   };
 
-  const _hoisted_1$n = { class: "m-editor-data-source-methods" };
+  const _hoisted_1$m = { class: "m-editor-data-source-methods" };
   const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceMethods"
+      name: "MFieldsDataSourceMethods"
     },
     __name: "DataSourceMethods",
     props: {
@@ -4264,7 +4674,7 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
@@ -4283,7 +4693,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4298,11 +4708,11 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-data-source-method-select" };
+  const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
   const _hoisted_2$f = { class: "data-source-method-select-container" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceMethodSelect"
+      name: "MFieldsDataSourceMethodSelect"
     },
     __name: "DataSourceMethodSelect",
     props: {
@@ -4391,7 +4801,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -4399,14 +4809,14 @@
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            _ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCodeHandler
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -4415,7 +4825,7 @@
             "params-config": paramsConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4428,11 +4838,11 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$k = { class: "m-editor-data-source-fields" };
   const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceMocks"
+      name: "MFieldsDataSourceMocks"
     },
     __name: "DataSourceMocks",
     props: {
@@ -4626,7 +5036,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
@@ -4662,9 +5072,9 @@
     }
   });
 
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorDataSourceSelect"
+      name: "MFieldsDataSourceSelect"
     },
     __name: "DataSourceSelect",
     props: {
@@ -4719,14 +5129,14 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-fields-event-select" };
+  const _hoisted_1$j = { class: "m-fields-event-select" };
   const _hoisted_2$d = {
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorEventSelect"
+      name: "MFieldsEventSelect"
     },
     __name: "EventSelect",
     props: {
@@ -4928,7 +5338,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -4988,7 +5398,7 @@
     }
   });
 
-  const _hoisted_1$j = {
+  const _hoisted_1$i = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4998,24 +5408,24 @@
   const _hoisted_4$6 = [
     _hoisted_2$c
   ];
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$j, _hoisted_4$6);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$i, _hoisted_4$6);
       };
     }
   });
 
-  const _hoisted_1$i = { class: "m-fields-key-value" };
+  const _hoisted_1$h = { class: "m-fields-key-value" };
   const _hoisted_2$b = { key: 0 };
   const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorKeyValue"
+      name: "MFieldsKeyValue"
     },
     __name: "KeyValue",
     props: {
@@ -5071,7 +5481,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
@@ -5137,7 +5547,7 @@
             size: "default",
             disabled: _ctx.disabled,
             link: "",
-            icon: _sfc_main$E,
+            icon: _sfc_main$D,
             onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
           }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
@@ -5145,11 +5555,11 @@
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
+  const _hoisted_1$g = { class: "m-fields-page-fragment-select" };
   const _hoisted_2$a = { class: "page-fragment-select-container" };
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorPageFragmentSelect"
+      name: "MFieldsPageFragmentSelect"
     },
     __name: "PageFragmentSelect",
     props: {
@@ -5193,7 +5603,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.createElementVNode("div", _hoisted_2$a, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -5202,7 +5612,7 @@
               size: _ctx.size,
               onChange: changeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: vue.unref(iconsVue.Edit),
@@ -5214,14 +5624,14 @@
     }
   });
 
-  const _hoisted_1$g = {
+  const _hoisted_1$f = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorUISelect"
+      name: "MFieldsUISelect"
     },
     __name: "UISelect",
     props: {
@@ -5288,7 +5698,7 @@
         services?.editorService.get("stage")?.highlight(id);
         services?.stageOverlayService.get("stage")?.highlight(id);
       }, 150);
-      const unhightlight = () => {
+      const unhighlight = () => {
         services?.editorService.set("highlightNode", null);
         services?.editorService.get("stage")?.clearHighlight();
         services?.stageOverlayService.get("stage")?.clearHighlight();
@@ -5312,7 +5722,7 @@
             ]),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
               content: "清除",
@@ -5327,7 +5737,7 @@
                   size: _ctx.size,
                   link: "",
                   onClick: vue.withModifiers(deleteHandler, ["stop"])
-                }, null, 8, ["icon", "disabled", "size", "onClick"])
+                }, null, 8, ["icon", "disabled", "size"])
               ]),
               _: 1
             }),
@@ -5343,7 +5753,7 @@
                   size: _ctx.size,
                   onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
                   onMouseenter: _cache[1] || (_cache[1] = ($event) => vue.unref(highlight)(val.value)),
-                  onMouseleave: unhightlight
+                  onMouseleave: unhighlight
                 }, {
                   default: vue.withCtx(() => [
                     vue.createTextVNode(vue.toDisplayString(`${toName.value}_${val.value}`), 1)
@@ -5407,7 +5817,7 @@
     };
   };
 
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -5429,7 +5839,7 @@
     }
   });
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSplitView"
     },
@@ -5556,7 +5966,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$A, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$z, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5565,7 +5975,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$A, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$z, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -5578,12 +5988,12 @@
     }
   });
 
-  const _hoisted_1$f = {
+  const _hoisted_1$e = {
     key: 1,
     class: "menu-item-text"
   };
   const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -5662,7 +6072,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -5676,7 +6086,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5694,7 +6104,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5744,11 +6154,11 @@
     }
   });
 
-  const _hoisted_1$e = {
+  const _hoisted_1$d = {
     key: 1,
     style: { "width": "21px" }
   };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarAddButton"
     },
@@ -5782,13 +6192,13 @@
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e));
+          vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d));
       };
     }
   });
 
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
     },
@@ -5894,7 +6304,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           _ctx.type === vue.unref(schema.NodeType).PAGE && pageLength.value || _ctx.type === vue.unref(schema.NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
@@ -5910,14 +6320,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarSwitchTypeButton"
     },
@@ -5961,11 +6371,11 @@
     }
   });
 
-  const _hoisted_1$d = { class: "m-editor-page-bar-tabs" };
+  const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
   const _hoisted_2$8 = ["onClick"];
   const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$5 = ["title"];
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBar"
     },
@@ -6043,15 +6453,15 @@
         editorService?.remove(node);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
             key: 0,
             modelValue: active.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
           }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$w, { type: active.value }, {
+          vue.createVNode(_sfc_main$v, { type: active.value }, {
             prepend: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"])
+              vue.createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
             ]),
             default: vue.withCtx(() => [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item) => {
@@ -6084,7 +6494,7 @@
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", null, [
                         vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                          vue.createVNode(_sfc_main$y, {
+                          vue.createVNode(_sfc_main$x, {
                             data: {
                               type: "button",
                               text: "复制",
@@ -6092,7 +6502,7 @@
                               handler: () => copy(item)
                             }
                           }, null, 8, ["data"]),
-                          vue.createVNode(_sfc_main$y, {
+                          vue.createVNode(_sfc_main$x, {
                             data: {
                               type: "button",
                               text: "删除",
@@ -6115,11 +6525,11 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-editor-empty-panel" };
+  const _hoisted_1$b = { class: "m-editor-empty-panel" };
   const _hoisted_2$7 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -6143,14 +6553,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.createElementVNode("div", _hoisted_2$7, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$4
             ]),
@@ -6160,7 +6570,7 @@
               onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE_FRAGMENT))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_4$4
             ])) : vue.createCommentVNode("", true)
@@ -6174,7 +6584,7 @@
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
   const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -6261,7 +6671,7 @@
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$z, {
+          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$y, {
             key: 1,
             "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
@@ -6284,10 +6694,10 @@
             ]),
             center: vue.withCtx(() => [
               page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+                vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
               ]),
               vue.renderSlot(_ctx.$slots, "page-bar", {}, () => [
-                vue.createVNode(_sfc_main$u, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                   "page-bar-title": vue.withCtx(({ page: page2 }) => [
                     vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                   ]),
@@ -6322,7 +6732,7 @@
     }
   });
 
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -6472,10 +6882,30 @@
         });
         return data;
       });
+      const resizeObserver = new ResizeObserver(() => {
+        const rect = navMenu.value?.getBoundingClientRect();
+        if (rect) {
+          uiService?.set("navMenuRect", {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height
+          });
+        }
+      });
+      const navMenu = vue.ref();
+      vue.onMounted(() => {
+        navMenu.value && resizeObserver.observe(navMenu.value);
+      });
+      vue.onBeforeUnmount(() => {
+        resizeObserver.disconnect();
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-nav-menu",
-          style: vue.normalizeStyle({ height: `${_ctx.height}px` })
+          style: vue.normalizeStyle({ height: `${_ctx.height}px` }),
+          ref_key: "navMenu",
+          ref: navMenu
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(keys), (key) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -6484,7 +6914,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -6496,8 +6926,8 @@
     }
   });
 
-  const _hoisted_1$b = { class: "m-editor-props-panel" };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "m-editor-props-panel" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -6552,7 +6982,7 @@
       };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -6573,116 +7003,6 @@
     }
   });
 
-  const _hoisted_1$a = { class: "m-editor-float-box-body" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    __name: "FloatingBox",
-    props: {
-      visible: { type: Boolean, default: false },
-      position: { default: () => ({ left: 0, top: 0 }) },
-      rect: { default: () => ({ width: "auto", height: "auto" }) },
-      title: { default: "" }
-    },
-    emits: ["update:visible"],
-    setup(__props, { expose: __expose, emit: __emit }) {
-      const props = __props;
-      const emit = __emit;
-      const target = vue.ref();
-      const dragTarget = vue.ref();
-      const style = vue.computed(() => ({
-        left: `${props.position.left}px`,
-        top: `${props.position.top}px`,
-        width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
-        height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
-      }));
-      let moveable = null;
-      const initMoveable = () => {
-        moveable = new VanillaMoveable(globalThis.document.body, {
-          className: "m-editor-floating-box-moveable",
-          target: target.value,
-          draggable: true,
-          resizable: true,
-          edge: true,
-          keepRatio: false,
-          origin: false,
-          snappable: true,
-          dragTarget: dragTarget.value,
-          dragTargetSelf: false,
-          linePadding: 10,
-          controlPadding: 10
-        });
-        moveable.on("drag", (e) => {
-          e.target.style.transform = e.transform;
-        });
-        moveable.on("resize", (e) => {
-          e.target.style.width = `${e.width}px`;
-          e.target.style.height = `${e.height}px`;
-          e.target.style.transform = e.drag.transform;
-        });
-      };
-      const destroyMoveable = () => {
-        moveable?.destroy();
-        moveable = null;
-      };
-      vue.watch(
-        () => props.visible,
-        async (visible) => {
-          if (visible) {
-            await vue.nextTick();
-            initMoveable();
-          } else {
-            destroyMoveable();
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.onBeforeUnmount(() => {
-        destroyMoveable();
-      });
-      const closeHandler = () => {
-        emit("update:visible", false);
-      };
-      __expose({
-        target
-      });
-      return (_ctx, _cache) => {
-        return _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
-          key: 0,
-          to: "body"
-        }, [
-          vue.createElementVNode("div", {
-            ref_key: "target",
-            ref: target,
-            class: "m-editor-float-box",
-            style: vue.normalizeStyle(style.value)
-          }, [
-            vue.createElementVNode("div", {
-              ref_key: "dragTarget",
-              ref: dragTarget,
-              class: "m-editor-float-box-title"
-            }, [
-              vue.renderSlot(_ctx.$slots, "title", {}, () => [
-                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
-              ]),
-              vue.createElementVNode("div", null, [
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  link: "",
-                  size: "small",
-                  icon: vue.unref(iconsVue.Close),
-                  onClick: closeHandler
-                }, null, 8, ["icon"])
-              ])
-            ], 512),
-            vue.createElementVNode("div", _hoisted_1$a, [
-              vue.renderSlot(_ctx.$slots, "body")
-            ])
-          ], 4)
-        ])) : vue.createCommentVNode("", true);
-      };
-    }
-  });
-
   const useFloatBox = (slideKeys) => {
     const floatBoxStates = vue.ref(
       slideKeys.value.reduce(
@@ -6866,7 +7186,7 @@
             onContextmenu: nodeContentmenuHandler,
             onMouseenter: mouseenterHandler
           }, [
-            vue.createVNode(_sfc_main$O, {
+            vue.createVNode(_sfc_main$N, {
               class: "expand-icon",
               style: vue.normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
               icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
@@ -7145,7 +7465,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -7160,7 +7480,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -7237,7 +7557,7 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -7418,7 +7738,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -7433,7 +7753,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$O, {
+                vue.createVNode(_sfc_main$N, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -7535,7 +7855,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_2$5, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                        return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                        return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: item.text,
@@ -7549,14 +7869,15 @@
                     ])
                   ]),
                   _: 1
-                })) : vue.createCommentVNode("", true)
+                })) : vue.createCommentVNode("", true),
+                vue.renderSlot(_ctx.$slots, "data-source-panel-search")
               ]),
               vue.createVNode(_sfc_main$i, {
                 onEdit: editHandler,
                 onRemove: removeHandler
               })
             ]),
-            _: 1
+            _: 3
           }),
           vue.createVNode(_sfc_main$j, {
             ref_key: "editDialog",
@@ -7703,7 +8024,7 @@
               vue.renderSlot(_ctx.$slots, "title"),
               vue.createElementVNode("div", null, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -7968,12 +8289,12 @@
       };
       return (_ctx, _cache) => {
         return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 0,
             icon: vue.unref(iconsVue.Hide),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
             title: "点击显示"
-          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -8614,7 +8935,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -8635,7 +8956,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$O, {
+                                  vue.createVNode(_sfc_main$N, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -8715,7 +9036,12 @@
             icon: iconsVue.EditPen,
             text: "代码编辑",
             component: _sfc_main$k,
-            slots: {}
+            slots: {},
+            boxComponentConfig: {
+              props: {
+                slideType: "box"
+              }
+            }
           },
           "data-source": {
             $key: "data-source",
@@ -8772,7 +9098,7 @@
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
                 }, [
-                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -8833,6 +9159,13 @@
                     ]),
                     key: "4"
                   } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelSearch ? {
+                    name: "code-block-panel-search",
+                    fn: vue.withCtx(() => [
+                      config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-search", { key: 0 }) : config.slots?.codeBlockPanelSearch ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "5"
+                  } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeContent ? {
                     name: "layer-node-content",
                     fn: vue.withCtx(({ data: nodeData }) => [
@@ -8844,7 +9177,7 @@
                         data: nodeData
                       }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "5"
+                    key: "6"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeLabel ? {
                     name: "layer-node-label",
@@ -8857,7 +9190,7 @@
                         data: nodeData
                       }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "6"
+                    key: "7"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeTool ? {
                     name: "layer-node-tool",
@@ -8870,9 +9203,9 @@
                         data: nodeData
                       }, null, 8, ["data"])) : vue.createCommentVNode("", true)
                     ]),
-                    key: "7"
+                    key: "8"
                   } : void 0,
-                  config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
+                  config.$key === "data-source" || config.slots?.dataSourcePanelTool ? {
                     name: "data-source-panel-tool",
                     fn: vue.withCtx(({ data }) => [
                       config.$key === "data-source" ? vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
@@ -8880,7 +9213,14 @@
                         data
                       }) : config.slots?.DataSourcePanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : vue.createCommentVNode("", true)
                     ]),
-                    key: "8"
+                    key: "9"
+                  } : void 0,
+                  config.$key === "data-source" || config.slots?.dataSourcePanelSearch ? {
+                    name: "data-source-panel-search",
+                    fn: vue.withCtx(() => [
+                      config.$key === "data-source" ? vue.renderSlot(_ctx.$slots, "data-source-panel-search", { key: 0 }) : config.slots?.dataSourcePanelSearch ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "10"
                   } : void 0
                 ]), 1040)) : vue.createCommentVNode("", true)
               ])), [
@@ -8891,7 +9231,7 @@
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
               return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
@@ -9260,15 +9600,21 @@
     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;
@@ -9306,19 +9652,6 @@
       }
       return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
     }
-    async setFloatBox(keys) {
-      const map = state.floatBox;
-      for (const key of keys) {
-        if (map.get(key))
-          continue;
-        map.set(key, {
-          status: false,
-          zIndex: 99,
-          top: 0,
-          left: 0
-        });
-      }
-    }
     resetState() {
       this.set("showSrc", false);
       this.set("uiSelectMode", false);
@@ -9333,6 +9666,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     async setStageRect(value) {
       state.stageRect = {
         ...state.stageRect,
@@ -9524,7 +9860,7 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -10066,6 +10402,10 @@
     }
   });
 
+  const canUsePluginMethods$1 = {
+    async: ["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"],
+    sync: []
+  };
   class CodeBlock extends BaseService {
     state = vue.reactive({
       codeDsl: null,
@@ -10075,13 +10415,7 @@
       paramsColConfig: void 0
     });
     constructor() {
-      super([
-        { name: "setCodeDslById", isAsync: true },
-        { name: "setEditStatus", isAsync: true },
-        { name: "setCombineIds", isAsync: true },
-        { name: "setUndeleteableList", isAsync: true },
-        { name: "deleteCodeDslByIds", isAsync: true }
-      ]);
+      super(canUsePluginMethods$1.async.map((methodName) => ({ name: methodName, isAsync: true })));
     }
     /**
      * 设置活动的代码块dsl数据源
@@ -10254,6 +10588,9 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
   }
   const codeBlockService = new CodeBlock();
 
@@ -10309,10 +10646,10 @@
       });
     }
     setEvent(type, events) {
-      eventMap[type] = [...core.DEFAULT_EVENTS, ...events];
+      eventMap[utils.toLine(type)] = [...core.DEFAULT_EVENTS, ...events];
     }
     getEvent(type) {
-      return lodashEs.cloneDeep(eventMap[type] || core.DEFAULT_EVENTS);
+      return lodashEs.cloneDeep(eventMap[utils.toLine(type)] || core.DEFAULT_EVENTS);
     }
     setMethods(methods) {
       Object.keys(methods).forEach((type) => {
@@ -10320,10 +10657,10 @@
       });
     }
     setMethod(type, method) {
-      methodMap[type] = [...core.DEFAULT_METHODS, ...method];
+      methodMap[utils.toLine(type)] = [...core.DEFAULT_METHODS, ...method];
     }
     getMethod(type) {
-      return lodashEs.cloneDeep(methodMap[type] || core.DEFAULT_METHODS);
+      return lodashEs.cloneDeep(methodMap[utils.toLine(type)] || core.DEFAULT_METHODS);
     }
     resetState() {
       eventMap = vue.reactive({});
@@ -10517,6 +10854,10 @@
   }
   const keybindingService = new Keybinding();
 
+  const canUsePluginMethods = {
+    async: [],
+    sync: ["openOverlay", "closeOverlay", "updateOverlay", "createStage"]
+  };
   class StageOverlay extends BaseService {
     state = vue.reactive({
       wrapDiv: document.createElement("div"),
@@ -10529,12 +10870,7 @@
       stageOverlayVisible: false
     });
     constructor() {
-      super([
-        { name: "openOverlay", isAsync: false },
-        { name: "closeOverlay", isAsync: false },
-        { name: "updateOverlay", isAsync: false },
-        { name: "createStage", isAsync: false }
-      ]);
+      super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
       this.get("wrapDiv").classList.add("tmagic-editor-sub-stage-wrap");
     }
     get(name) {
@@ -10601,6 +10937,9 @@
         }
       });
     }
+    usePlugin(options) {
+      super.usePlugin(options);
+    }
     createContentEl() {
       const sourceEl = this.get("sourceEl");
       if (!sourceEl)
@@ -11032,7 +11371,7 @@
       name: "MEditor"
     },
     __name: "Editor",
-    props: vue.mergeDefaults({
+    props: /* @__PURE__ */ vue.mergeDefaults({
       modelValue: {},
       componentGroupList: {},
       datasourceList: {},
@@ -11049,7 +11388,7 @@
       datasourceValues: {},
       datasourceConfigs: {},
       datasourceEventMethodList: {},
-      moveableOptions: { type: Function },
+      moveableOptions: { type: [Object, Function] },
       defaultSelected: {},
       containerHighlightClassName: {},
       containerHighlightDuration: {},
@@ -11113,13 +11452,13 @@
       vue.provide("stageOptions", stageOptions);
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
           header: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "header")
           ]),
           nav: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$r, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -11162,9 +11501,15 @@
                     data
                   })
                 ]),
+                "code-block-panel-search": vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "code-block-panel-search")
+                ]),
                 "data-source-panel-tool": vue.withCtx(({ data }) => [
                   vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
                 ]),
+                "data-source-panel-search": vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "data-source-panel-search")
+                ]),
                 _: 3
               }, 8, ["data", "layer-content-menu", "custom-content-menu"])
             ])
@@ -11188,7 +11533,7 @@
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$q, {
+              vue.createVNode(_sfc_main$p, {
                 "extend-state": _ctx.extendFormState,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
                 onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
@@ -11234,23 +11579,23 @@
       const option = Object.assign(defaultInstallOpt, opt || {});
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
-      app.component(_sfc_main.name, _sfc_main);
-      app.component("m-fields-ui-select", _sfc_main$B);
+      app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
+      app.component("magic-code-editor", _sfc_main$U);
+      app.component("m-fields-ui-select", _sfc_main$A);
       app.component("m-fields-code-link", _sfc_main$S);
       app.component("m-fields-vs-code", _sfc_main$T);
-      app.component("magic-code-editor", _sfc_main$U);
       app.component("m-fields-code-select", _sfc_main$R);
-      app.component("m-fields-code-select-col", _sfc_main$N);
-      app.component("m-fields-event-select", _sfc_main$F);
-      app.component("m-fields-data-source-fields", _sfc_main$M);
-      app.component("m-fields-data-source-mocks", _sfc_main$H);
-      app.component("m-fields-key-value", _sfc_main$D);
-      app.component("m-fields-data-source-input", _sfc_main$K);
-      app.component("m-fields-data-source-select", _sfc_main$G);
-      app.component("m-fields-data-source-methods", _sfc_main$J);
-      app.component("m-fields-data-source-method-select", _sfc_main$I);
-      app.component("m-fields-data-source-field-select", _sfc_main$L);
-      app.component("m-fields-page-fragment-select", _sfc_main$C);
+      app.component("m-fields-code-select-col", _sfc_main$M);
+      app.component("m-fields-event-select", _sfc_main$E);
+      app.component("m-fields-data-source-fields", _sfc_main$L);
+      app.component("m-fields-data-source-mocks", _sfc_main$G);
+      app.component("m-fields-key-value", _sfc_main$C);
+      app.component("m-fields-data-source-input", _sfc_main$J);
+      app.component("m-fields-data-source-select", _sfc_main$F);
+      app.component("m-fields-data-source-methods", _sfc_main$I);
+      app.component("m-fields-data-source-method-select", _sfc_main$H);
+      app.component("m-fields-data-source-field-select", _sfc_main$K);
+      app.component("m-fields-page-fragment-select", _sfc_main$B);
     }
   };
 
@@ -11260,41 +11605,42 @@
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$Q;
+  exports.CodeBlockEditor = _sfc_main$P;
   exports.CodeBlockList = _sfc_main$l;
   exports.CodeBlockListPanel = _sfc_main$k;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
   exports.CodeSelect = _sfc_main$R;
-  exports.CodeSelectCol = _sfc_main$N;
+  exports.CodeSelectCol = _sfc_main$M;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$b;
   exports.ContentMenu = _sfc_main$g;
-  exports.DataSourceFieldSelect = _sfc_main$L;
-  exports.DataSourceFields = _sfc_main$M;
-  exports.DataSourceInput = _sfc_main$K;
-  exports.DataSourceMethodSelect = _sfc_main$I;
-  exports.DataSourceMethods = _sfc_main$J;
-  exports.DataSourceMocks = _sfc_main$H;
-  exports.DataSourceSelect = _sfc_main$G;
+  exports.DataSourceConfigPanel = _sfc_main$j;
+  exports.DataSourceFieldSelect = _sfc_main$K;
+  exports.DataSourceFields = _sfc_main$L;
+  exports.DataSourceInput = _sfc_main$J;
+  exports.DataSourceMethodSelect = _sfc_main$H;
+  exports.DataSourceMethods = _sfc_main$I;
+  exports.DataSourceMocks = _sfc_main$G;
+  exports.DataSourceSelect = _sfc_main$F;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$F;
+  exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$O;
+  exports.Icon = _sfc_main$N;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$D;
+  exports.KeyValue = _sfc_main$C;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$z;
-  exports.PageFragmentSelect = _sfc_main$C;
-  exports.PropsPanel = _sfc_main$q;
-  exports.Resizer = _sfc_main$A;
-  exports.SplitView = _sfc_main$z;
+  exports.LayoutContainer = _sfc_main$y;
+  exports.PageFragmentSelect = _sfc_main$B;
+  exports.PropsPanel = _sfc_main$p;
+  exports.Resizer = _sfc_main$z;
+  exports.SplitView = _sfc_main$y;
   exports.TMagicCodeEditor = _sfc_main$U;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$y;
+  exports.ToolButton = _sfc_main$x;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;