@tmagic/editor 1.4.3 → 1.4.5

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/form'), require('@tmagic/schema'), require('moveable'), require('@tmagic/table'), require('@tmagic/utils'), require('@tmagic/dep'), require('gesto'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/form', '@tmagic/schema', 'moveable', '@tmagic/table', '@tmagic/utils', '@tmagic/dep', 'gesto', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.form, global.schema, global.VanillaMoveable, global.table, global.utils, global.dep, global.Gesto, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, form, schema, VanillaMoveable, table, utils, dep, Gesto, 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/form'), require('@tmagic/schema'), require('@tmagic/table'), require('@tmagic/utils'), require('moveable'), require('@tmagic/dep'), require('events'), require('gesto'), require('@tmagic/stage'), 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/form', '@tmagic/schema', '@tmagic/table', '@tmagic/utils', 'moveable', '@tmagic/dep', 'events', 'gesto', '@tmagic/stage', '@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.form, global.schema, global.table, global.utils, global.VanillaMoveable, global.dep, global.events, global.Gesto, global.StageCore, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, form, schema, table, utils, VanillaMoveable, dep, events, Gesto, StageCore, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,7 +23,7 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _hoisted_1$t = ["src"];
+  const _hoisted_1$u = ["src"];
   const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
@@ -48,7 +48,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$t)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$u)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -76,7 +76,7 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$s = {
+  const _hoisted_1$t = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
   const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
@@ -237,7 +237,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -510,689 +510,163 @@
     }
   });
 
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
-    __name: "FloatingBox",
-    props: /* @__PURE__ */ vue.mergeModels({
-      position: { default: () => ({ left: 0, top: 0 }) },
-      title: { default: "" },
-      beforeClose: {}
-    }, {
-      "width": { default: 0 },
-      "widthModifiers": {},
-      "height": { default: 0 },
-      "heightModifiers": {},
-      "visible": { type: Boolean, ...{ default: false } },
-      "visibleModifiers": {}
-    }),
-    emits: ["update:width", "update:height", "update:visible"],
-    setup(__props, { expose: __expose }) {
-      const width = vue.useModel(__props, "width");
-      const height = vue.useModel(__props, "height");
-      const visible = vue.useModel(__props, "visible");
-      const props = __props;
-      const target = vue.ref();
-      const titleEl = vue.ref();
-      const zIndex = design.useZIndex();
-      const curZIndex = vue.ref(0);
-      const titleHeight = vue.ref(0);
-      const bodyHeight = vue.computed(() => {
-        if (height.value) {
-          return height.value - titleHeight.value;
-        }
-        if (target.value) {
-          return target.value.clientHeight - titleHeight.value;
+  function BaseFormConfig() {
+    return [
+      {
+        name: "id",
+        type: "hidden"
+      },
+      {
+        name: "type",
+        text: "类型",
+        type: "hidden",
+        defaultValue: "base"
+      },
+      {
+        name: "title",
+        text: "名称",
+        rules: [
+          {
+            required: true,
+            message: "请输入名称"
+          }
+        ]
+      },
+      {
+        name: "description",
+        text: "描述"
+      }
+    ];
+  }
+
+  const HttpFormConfig = [
+    {
+      name: "autoFetch",
+      text: "自动请求",
+      type: "switch",
+      defaultValue: true
+    },
+    {
+      name: "responseOptions",
+      items: [
+        {
+          name: "dataPath",
+          text: "数据路径"
         }
-        return "auto";
-      });
-      const services = vue.inject("services");
-      const frameworkWidth = vue.computed(() => services?.uiService.get("frameworkRect").width || 0);
-      const style = vue.computed(() => {
-        let { left } = props.position;
-        if (width.value) {
-          left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+      ]
+    },
+    {
+      type: "fieldset",
+      name: "options",
+      legend: "HTTP 配置",
+      items: [
+        {
+          name: "url",
+          text: "URL"
+        },
+        {
+          name: "method",
+          text: "Method",
+          type: "select",
+          options: [
+            { text: "GET", value: "GET" },
+            { text: "POST", value: "POST" },
+            { text: "PUT", value: "PUT" },
+            { text: "DELETE", value: "DELETE" }
+          ]
+        },
+        {
+          name: "params",
+          type: "key-value",
+          defaultValue: {},
+          text: "参数"
+        },
+        {
+          name: "data",
+          type: "key-value",
+          defaultValue: {},
+          advanced: true,
+          text: "请求体"
+        },
+        {
+          name: "headers",
+          type: "key-value",
+          defaultValue: {},
+          text: "请求头"
         }
-        return {
-          left: `${left}px`,
-          top: `${props.position.top}px`,
-          width: width.value ? `${width.value}px` : "auto",
-          height: height.value ? `${height.value}px` : "auto"
-        };
-      });
-      let moveable = null;
-      const initMoveable = () => {
-        moveable = new VanillaMoveable(globalThis.document.body, {
-          className: "m-editor-floating-box-moveable",
-          target: target.value,
-          draggable: true,
-          resizable: true,
-          edge: true,
-          keepRatio: false,
-          origin: false,
-          snappable: true,
-          dragTarget: titleEl.value,
-          dragTargetSelf: false,
-          linePadding: 10,
-          controlPadding: 10,
-          bounds: { left: 0, top: 0, right: 0, bottom: 0, position: "css" }
-        });
-        moveable.on("drag", (e) => {
-          e.target.style.transform = e.transform;
-        });
-        moveable.on("resize", (e) => {
-          width.value = e.width;
-          height.value = e.height;
-          e.target.style.width = `${e.width}px`;
-          e.target.style.height = `${e.height}px`;
-          e.target.style.transform = e.drag.transform;
-        });
-      };
-      const destroyMoveable = () => {
-        moveable?.destroy();
-        moveable = null;
-      };
-      vue.watch(
-        visible,
-        async (visible2) => {
-          if (visible2) {
-            await vue.nextTick();
-            curZIndex.value = zIndex.nextZIndex();
-            const targetRect = target.value?.getBoundingClientRect();
-            if (targetRect) {
-              width.value = targetRect.width;
-              height.value = targetRect.height;
-              initMoveable();
+      ]
+    }
+  ];
+
+  const fillConfig$1 = (config) => [
+    ...BaseFormConfig(),
+    ...config,
+    {
+      type: "tab",
+      items: [
+        {
+          title: "数据定义",
+          items: [
+            {
+              name: "fields",
+              type: "data-source-fields",
+              defaultValue: () => []
             }
-            if (titleEl.value) {
-              const titleRect = titleEl.value.getBoundingClientRect();
-              titleHeight.value = titleRect.height;
+          ]
+        },
+        {
+          title: "方法定义",
+          items: [
+            {
+              name: "methods",
+              type: "data-source-methods",
+              defaultValue: () => []
             }
-          } else {
-            destroyMoveable();
-          }
+          ]
         },
         {
-          immediate: true
-        }
-      );
-      vue.onBeforeUnmount(() => {
-        destroyMoveable();
-      });
-      const hide = (cancel) => {
-        if (cancel !== false) {
-          visible.value = false;
-        }
-      };
-      const closeHandler = () => {
-        if (typeof props.beforeClose === "function") {
-          props.beforeClose(hide);
-        } else {
-          hide();
-        }
-      };
-      const nextZIndex = () => {
-        curZIndex.value = zIndex.nextZIndex();
-      };
-      vue.provide("parentFloating", target);
-      __expose({
-        bodyHeight,
-        target,
-        titleEl
-      });
-      return (_ctx, _cache) => {
-        return visible.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
-          key: 0,
-          to: "body"
-        }, [
-          vue.createElementVNode("div", {
-            ref_key: "target",
-            ref: target,
-            class: "m-editor-float-box",
-            style: vue.normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
-            onMousedown: nextZIndex
-          }, [
-            vue.createElementVNode("div", {
-              ref_key: "titleEl",
-              ref: titleEl,
-              class: "m-editor-float-box-title"
-            }, [
-              vue.renderSlot(_ctx.$slots, "title", {}, () => [
-                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
-              ]),
-              vue.createElementVNode("div", null, [
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  link: "",
-                  size: "small",
-                  onClick: closeHandler
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
-                  ]),
-                  _: 1
-                })
-              ])
-            ], 512),
-            vue.createElementVNode("div", {
-              class: "m-editor-float-box-body",
-              style: vue.normalizeStyle({ height: `${bodyHeight.value}px` })
-            }, [
-              vue.renderSlot(_ctx.$slots, "body")
-            ], 4)
-          ], 36)
-        ])) : vue.createCommentVNode("", true);
-      };
-    }
-  });
-
-  const useEditorContentHeight = () => {
-    const services = vue.inject("services");
-    const frameworkHeight = vue.computed(() => services?.uiService.get("frameworkRect").height || 0);
-    const navMenuHeight = vue.computed(() => services?.uiService.get("navMenuRect").height || 0);
-    const editorContentHeight = vue.computed(() => frameworkHeight.value - navMenuHeight.value);
-    const height = vue.ref(0);
-    vue.watchEffect(() => {
-      if (height.value > 0 && height.value === editorContentHeight.value)
-        return;
-      height.value = editorContentHeight.value;
-    });
-    return {
-      height
-    };
-  };
-
-  const useNextFloatBoxPosition = (uiService, parent) => {
-    const boxPosition = vue.ref({
-      left: 0,
-      top: 0
-    });
-    const calcBoxPosition = () => {
-      const columnWidth = uiService?.get("columnWidth");
-      const navMenuRect = uiService?.get("navMenuRect");
-      let left = columnWidth?.left ?? 0;
-      if (parent?.value) {
-        const rect = parent?.value?.getBoundingClientRect();
-        left = (rect?.left ?? 0) + (rect?.width ?? 0);
-      }
-      boxPosition.value = {
-        left,
-        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
-      };
-    };
-    return {
-      boxPosition,
-      calcBoxPosition
-    };
-  };
-
-  const useWindowRect = () => {
-    const rect = vue.reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
-    const windowResizeHandler = () => {
-      rect.width = globalThis.innerWidth;
-      rect.height = globalThis.innerHeight;
-    };
-    globalThis.addEventListener("resize", windowResizeHandler);
-    vue.onBeforeUnmount(() => {
-      globalThis.removeEventListener("resize", windowResizeHandler);
-    });
-    return {
-      rect
-    };
-  };
-
-  const _hoisted_1$r = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$k = { style: { "flex": "1" } };
-  const _hoisted_3$8 = { style: { "flex": "1" } };
-  const _hoisted_4$7 = { class: "dialog-footer" };
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorCodeBlockEditor"
-    },
-    __name: "CodeBlockEditor",
-    props: /* @__PURE__ */ vue.mergeModels({
-      content: {},
-      disabled: { type: Boolean },
-      isDataSource: { type: Boolean },
-      dataSourceType: {}
-    }, {
-      "width": { default: 670 },
-      "widthModifiers": {},
-      "visible": { type: Boolean, ...{ default: false } },
-      "visibleModifiers": {}
-    }),
-    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:width", "update:visible"]),
-    setup(__props, { expose: __expose, emit: __emit }) {
-      const width = vue.useModel(__props, "width");
-      const boxVisible = vue.useModel(__props, "visible");
-      const props = __props;
-      const emit = __emit;
-      const services = vue.inject("services");
-      const { height: codeBlockEditorHeight } = useEditorContentHeight();
-      const difVisible = vue.ref(false);
-      const { rect: windowRect } = useWindowRect();
-      const magicVsEditor = vue.ref();
-      const diffChange = () => {
-        if (!magicVsEditor.value || !formBox.value?.form) {
-          return;
-        }
-        formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
-        difVisible.value = false;
-      };
-      const defaultParamColConfig = {
-        type: "row",
-        label: "参数类型",
-        items: [
-          {
-            text: "参数类型",
-            labelWidth: "70px",
-            type: "select",
-            name: "type",
-            options: [
-              {
-                text: "数字",
-                label: "数字",
-                value: "number"
-              },
-              {
-                text: "字符串",
-                label: "字符串",
-                value: "text"
-              },
-              {
-                text: "组件",
-                label: "组件",
-                value: "ui-select"
-              }
-            ]
-          }
-        ]
-      };
-      const functionConfig = vue.computed(() => [
-        {
-          text: "名称",
-          name: "name",
-          rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
-        },
-        {
-          text: "描述",
-          name: "desc"
-        },
-        {
-          text: "执行时机",
-          name: "timing",
-          type: "select",
-          options: () => {
-            const options = [
-              { text: "初始化前", value: "beforeInit" },
-              { text: "初始化后", value: "afterInit" }
-            ];
-            if (props.dataSourceType !== "base") {
-              options.push({ text: "请求前", value: "beforeRequest" });
-              options.push({ text: "请求后", value: "afterRequest" });
-            }
-            return options;
-          },
-          display: () => props.isDataSource
-        },
-        {
-          type: "table",
-          border: true,
-          text: "参数",
-          enableFullscreen: false,
-          enableToggleMode: false,
-          name: "params",
-          dropSort: false,
-          items: [
-            {
-              type: "text",
-              label: "参数名",
-              name: "name"
-            },
-            {
-              type: "text",
-              label: "描述",
-              name: "extra"
-            },
-            services?.codeBlockService.getParamsColConfig() || defaultParamColConfig
-          ]
-        },
-        {
-          name: "content",
-          type: "vs-code",
-          options: vue.inject("codeOptions", {}),
-          height: "500px",
-          onChange: (formState, code) => {
-            try {
-              getConfig("parseDSL")(code);
-              return code;
-            } catch (error) {
-              design.tMagicMessage.error(error.message);
-              throw error;
-            }
-          }
-        }
-      ]);
-      const submitForm = (values) => {
-        changedValue.value = void 0;
-        emit("submit", values);
-      };
-      const errorHandler = (error) => {
-        design.tMagicMessage.error(error.message);
-      };
-      const formBox = vue.ref();
-      const changedValue = vue.ref();
-      const changeHandler = (values) => {
-        changedValue.value = values;
-      };
-      const beforeClose = (done) => {
-        if (!changedValue.value) {
-          done();
-          return;
-        }
-        design.tMagicMessageBox.confirm("当前代码块已修改，是否保存？", "提示", {
-          confirmButtonText: "保存并关闭",
-          cancelButtonText: "不保存并关闭",
-          type: "warning",
-          distinguishCancelAndClose: true
-        }).then(() => {
-          changedValue.value && submitForm(changedValue.value);
-          done();
-        }).catch((action) => {
-          done(action === "cancel");
-        });
-      };
-      const closedHandler = () => {
-        changedValue.value = void 0;
-      };
-      const parentFloating = vue.inject("parentFloating", vue.ref(null));
-      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-      __expose({
-        async show() {
-          calcBoxPosition();
-          boxVisible.value = true;
-        },
-        async hide() {
-          boxVisible.value = false;
-        }
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(_sfc_main$P, {
-            visible: boxVisible.value,
-            "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
-            width: width.value,
-            "onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
-            height: vue.unref(codeBlockEditorHeight),
-            "onUpdate:height": _cache[3] || (_cache[3] = ($event) => vue.isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
-            title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
-            position: vue.unref(boxPosition),
-            "before-close": beforeClose
-          }, {
-            body: vue.withCtx(() => [
-              vue.createVNode(vue.unref(form.MFormBox), {
-                class: "m-editor-code-block-editor",
-                ref_key: "formBox",
-                ref: formBox,
-                "label-width": "80px",
-                "close-on-press-escape": false,
-                title: _ctx.content.name,
-                config: functionConfig.value,
-                values: _ctx.content,
-                disabled: _ctx.disabled,
-                style: { "height": "100%" },
-                onChange: changeHandler,
-                onSubmit: submitForm,
-                onError: errorHandler,
-                onClosed: closedHandler
-              }, {
-                left: vue.withCtx(() => [
-                  !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                    key: 0,
-                    type: "primary",
-                    link: "",
-                    onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("查看修改")
-                    ]),
-                    _: 1
-                  })) : vue.createCommentVNode("", true)
-                ]),
-                _: 1
-              }, 8, ["title", "config", "values", "disabled"])
-            ]),
-            _: 1
-          }, 8, ["visible", "width", "height", "title", "position"]),
-          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            vue.createVNode(vue.unref(design.TMagicDialog), {
-              title: "查看修改",
-              modelValue: difVisible.value,
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
-              fullscreen: ""
-            }, {
-              footer: vue.withCtx(() => [
-                vue.createElementVNode("span", _hoisted_4$7, [
-                  vue.createVNode(vue.unref(design.TMagicButton), {
-                    size: "small",
-                    onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("取消")
-                    ]),
-                    _: 1
-                  }),
-                  vue.createVNode(vue.unref(design.TMagicButton), {
-                    size: "small",
-                    type: "primary",
-                    onClick: diffChange
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("确定")
-                    ]),
-                    _: 1
-                  })
-                ])
-              ]),
-              default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$r, [
-                  vue.createElementVNode("div", _hoisted_2$k, [
-                    vue.createVNode(vue.unref(design.TMagicTag), {
-                      size: "small",
-                      type: "info"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode("修改前")
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  vue.createElementVNode("div", _hoisted_3$8, [
-                    vue.createVNode(vue.unref(design.TMagicTag), {
-                      size: "small",
-                      type: "success"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode("修改后")
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ]),
-                difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
-                  key: 0,
-                  ref_key: "magicVsEditor",
-                  ref: magicVsEditor,
-                  type: "diff",
-                  language: "json",
-                  initValues: _ctx.content.content,
-                  modifiedValues: formBox.value?.form?.values.content,
-                  style: vue.normalizeStyle(`height: ${vue.unref(windowRect).height - 150}px`)
-                }, null, 8, ["initValues", "modifiedValues", "style"])) : vue.createCommentVNode("", true)
-              ]),
-              _: 1
-            }, 8, ["modelValue"])
-          ]))
-        ], 64);
-      };
-    }
-  });
-
-  function BaseFormConfig() {
-    return [
-      {
-        name: "id",
-        type: "hidden"
-      },
-      {
-        name: "type",
-        text: "类型",
-        type: "hidden",
-        defaultValue: "base"
-      },
-      {
-        name: "title",
-        text: "名称",
-        rules: [
-          {
-            required: true,
-            message: "请输入名称"
-          }
-        ]
-      },
-      {
-        name: "description",
-        text: "描述"
-      }
-    ];
-  }
-
-  const HttpFormConfig = [
-    {
-      name: "autoFetch",
-      text: "自动请求",
-      type: "switch",
-      defaultValue: true
-    },
-    {
-      name: "responseOptions",
-      items: [
-        {
-          name: "dataPath",
-          text: "数据路径"
-        }
-      ]
-    },
-    {
-      type: "fieldset",
-      name: "options",
-      legend: "HTTP 配置",
-      items: [
-        {
-          name: "url",
-          text: "URL"
-        },
-        {
-          name: "method",
-          text: "Method",
-          type: "select",
-          options: [
-            { text: "GET", value: "GET" },
-            { text: "POST", value: "POST" },
-            { text: "PUT", value: "PUT" },
-            { text: "DELETE", value: "DELETE" }
-          ]
-        },
-        {
-          name: "params",
-          type: "key-value",
-          defaultValue: {},
-          text: "参数"
-        },
-        {
-          name: "data",
-          type: "key-value",
-          defaultValue: {},
-          advanced: true,
-          text: "请求体"
-        },
-        {
-          name: "headers",
-          type: "key-value",
-          defaultValue: {},
-          text: "请求头"
-        }
-      ]
-    }
-  ];
-
-  const fillConfig$1 = (config) => [
-    ...BaseFormConfig(),
-    ...config,
-    {
-      type: "tab",
-      items: [
-        {
-          title: "数据定义",
-          items: [
-            {
-              name: "fields",
-              type: "data-source-fields",
-              defaultValue: () => []
-            }
-          ]
-        },
-        {
-          title: "方法定义",
-          items: [
-            {
-              name: "methods",
-              type: "data-source-methods",
-              defaultValue: () => []
-            }
-          ]
-        },
-        {
-          title: "事件配置",
-          display: false,
-          items: [
-            {
-              name: "events",
-              src: "datasource",
-              type: "event-select"
-            }
-          ]
-        },
-        {
-          title: "mock数据",
-          items: [
-            {
-              name: "mocks",
-              type: "data-source-mocks",
-              defaultValue: () => []
-            }
-          ]
-        },
-        {
-          title: "请求参数裁剪",
-          display: (formState, { model }) => model.type === "http",
-          items: [
-            {
-              name: "beforeRequest",
-              type: "vs-code",
-              parse: true,
-              height: "600px"
-            }
-          ]
-        },
-        {
-          title: "响应数据裁剪",
-          display: (formState, { model }) => model.type === "http",
-          items: [
-            {
-              name: "afterResponse",
-              type: "vs-code",
-              parse: true,
-              height: "600px"
-            }
-          ]
+          title: "事件配置",
+          items: [
+            {
+              name: "events",
+              src: "datasource",
+              type: "event-select"
+            }
+          ]
+        },
+        {
+          title: "mock数据",
+          items: [
+            {
+              name: "mocks",
+              type: "data-source-mocks",
+              defaultValue: () => []
+            }
+          ]
+        },
+        {
+          title: "请求参数裁剪",
+          display: (formState, { model }) => model.type === "http",
+          items: [
+            {
+              name: "beforeRequest",
+              type: "vs-code",
+              parse: true,
+              height: "600px"
+            }
+          ]
+        },
+        {
+          title: "响应数据裁剪",
+          display: (formState, { model }) => model.type === "http",
+          items: [
+            {
+              name: "afterResponse",
+              type: "vs-code",
+              parse: true,
+              height: "600px"
+            }
+          ]
         }
       ]
     }
@@ -1302,6 +776,33 @@
     }
     return displayState;
   };
+  const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
+    const child = [];
+    fields.forEach((field) => {
+      if (!dataSourceFieldType.length) {
+        dataSourceFieldType.push("any");
+      }
+      const children = getCascaderOptionsFromFields(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) && !["array", "object", "any"].includes(fieldType)) {
+        return;
+      }
+      if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+        return;
+      }
+      child.push(item);
+    });
+    return child;
+  };
 
   const compose = (middleware, isAsync) => {
     if (!Array.isArray(middleware))
@@ -2057,6 +1558,13 @@
     ColumnLayout2["RIGHT"] = "right";
     return ColumnLayout2;
   })(ColumnLayout || {});
+  var SideItemKey = /* @__PURE__ */ ((SideItemKey2) => {
+    SideItemKey2["COMPONENT_LIST"] = "component-list";
+    SideItemKey2["LAYER"] = "layer";
+    SideItemKey2["CODE_BLOCK"] = "code-block";
+    SideItemKey2["DATA_SOURCE"] = "data-source";
+    return SideItemKey2;
+  })(SideItemKey || {});
   var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
     LayerOffset2["TOP"] = "top";
     LayerOffset2["BOTTOM"] = "bottom";
@@ -2157,11 +1665,13 @@
       height = 0;
     }
     const { height: parentHeight } = parentNode.style;
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    const wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+    const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
     if (utils.isPage(parentNode)) {
-      const { scrollTop = 0, wrapperHeight } = stage.mask;
-      return (wrapperHeight - height) / 2 + scrollTop;
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
     }
-    return (parentHeight - height) / 2;
+    return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
   };
   const getInitPositionStyle = (style = {}, layout) => {
     if (layout === Layout.ABSOLUTE) {
@@ -2262,8 +1772,12 @@
     const el = doc.getElementById(`${config.id}`);
     const parentEl = doc.getElementById(`${parent.id}`);
     const left = Number(config.style?.left) || 0;
-    if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
-      return parentEl.offsetWidth - el.offsetWidth;
+    if (el && parentEl) {
+      const calcParentOffsetWidth = utils.calcValueByFontsize(doc, parentEl.offsetWidth);
+      const calcElOffsetWidth = utils.calcValueByFontsize(doc, el.offsetWidth);
+      if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+        return calcParentOffsetWidth - calcElOffsetWidth;
+      }
     }
     return config.style.left;
   };
@@ -3350,7 +2864,7 @@
         const el = doc.getElementById(`${node.id}`);
         const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
         if (parentEl && el) {
-          node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+          node.style.left = utils.calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
           node.style.right = "";
         }
       } else if (parent.style && utils.isNumber(parent.style?.width) && utils.isNumber(node.style?.width)) {
@@ -3708,7 +3222,7 @@
     return newNode;
   };
 
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3758,68 +3272,9 @@
     }
   });
 
-  const useCodeBlockEdit = (codeBlockService) => {
-    const codeConfig = vue.ref();
-    const codeId = vue.ref();
-    const codeBlockEditor = vue.ref();
-    const createCodeBlock = async () => {
-      if (!codeBlockService) {
-        design.tMagicMessage.error("新增代码块失败");
-        return;
-      }
-      codeConfig.value = {
-        name: "",
-        content: `({app, params}) => {
-  // place your code here
-}`,
-        params: []
-      };
-      codeId.value = await codeBlockService.getUniqueId();
-      await vue.nextTick();
-      codeBlockEditor.value?.show();
-    };
-    const editCode = async (id) => {
-      const codeBlock = await codeBlockService?.getCodeContentById(id);
-      if (!codeBlock) {
-        design.tMagicMessage.error("获取代码块内容失败");
-        return;
-      }
-      let codeContent = codeBlock.content;
-      if (typeof codeContent !== "string") {
-        codeContent = codeContent.toString();
-      }
-      codeConfig.value = {
-        ...lodashEs.cloneDeep(codeBlock),
-        content: codeContent
-      };
-      codeId.value = id;
-      await vue.nextTick();
-      codeBlockEditor.value?.show();
-    };
-    const deleteCode = async (key) => {
-      codeBlockService?.deleteCodeDslByIds([key]);
-    };
-    const submitCodeBlockHandler = async (values) => {
-      if (!codeId.value)
-        return;
-      await codeBlockService?.setCodeDslById(codeId.value, values);
-      design.tMagicMessage.success("代码块保存成功");
-      codeBlockEditor.value?.hide();
-    };
-    return {
-      codeId,
-      codeConfig,
-      codeBlockEditor,
-      createCodeBlock,
-      editCode,
-      deleteCode,
-      submitCodeBlockHandler
-    };
-  };
-
-  const _hoisted_1$q = { class: "m-fields-code-select-col" };
-  const _hoisted_2$j = { class: "code-select-container" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$s = { class: "m-fields-code-select-col" };
+  const _hoisted_2$k = { class: "code-select-container" };
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
     },
@@ -3839,9 +3294,13 @@
     setup(__props, { emit: __emit }) {
       const mForm = vue.inject("mForm");
       const services = vue.inject("services");
+      const eventBus = vue.inject("eventBus");
       const emit = __emit;
-      const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
       const props = __props;
+      const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
+      const hasCodeBlockSidePanel = vue.computed(
+        () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
+      );
       const getParamItemsConfig = (codeId) => {
         if (!codeDsl.value || !codeId)
           return [];
@@ -3892,46 +3351,278 @@
         props.model.params = value.params;
         emit("change", props.model);
       };
-      const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
+      const editCode = (id) => {
+        eventBus?.emit("edit-code", id);
+      };
       return (_ctx, _cache) => {
-        const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$j, [
-            vue.createVNode(_component_m_form_container, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+          vue.createElementVNode("div", _hoisted_2$k, [
+            vue.createVNode(vue.unref(form.MContainer), {
               class: "select",
               config: selectConfig,
               model: _ctx.model,
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
+            _ctx.model[_ctx.name] && hasCodeBlockSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
               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)
+              class: "m-fields-select-action-button",
+              size: _ctx.size,
+              onClick: _cache[0] || (_cache[0] = ($event) => editCode(_ctx.model[_ctx.name]))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$U, {
+                  icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }, 8, ["size"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             name: "params",
             key: _ctx.model[_ctx.name],
             model: _ctx.model,
             size: _ctx.size,
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
-          }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
-            key: 1,
-            ref_key: "codeBlockEditor",
-            ref: codeBlockEditor,
-            disabled: notEditable.value,
-            content: vue.unref(codeConfig),
-            onSubmit: vue.unref(submitCodeBlockHandler)
-          }, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
 
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+    __name: "FloatingBox",
+    props: /* @__PURE__ */ vue.mergeModels({
+      position: { default: () => ({ left: 0, top: 0 }) },
+      title: { default: "" },
+      beforeClose: {}
+    }, {
+      "width": { default: 0 },
+      "widthModifiers": {},
+      "height": { default: 0 },
+      "heightModifiers": {},
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {}
+    }),
+    emits: ["update:width", "update:height", "update:visible"],
+    setup(__props, { expose: __expose }) {
+      const width = vue.useModel(__props, "width");
+      const height = vue.useModel(__props, "height");
+      const visible = vue.useModel(__props, "visible");
+      const props = __props;
+      const target = vue.ref();
+      const titleEl = vue.ref();
+      const zIndex = design.useZIndex();
+      const curZIndex = vue.ref(0);
+      const titleHeight = vue.ref(0);
+      const bodyHeight = vue.computed(() => {
+        if (height.value) {
+          return height.value - titleHeight.value;
+        }
+        if (target.value) {
+          return target.value.clientHeight - titleHeight.value;
+        }
+        return "auto";
+      });
+      const services = vue.inject("services");
+      const frameworkWidth = vue.computed(() => services?.uiService.get("frameworkRect").width || 0);
+      const style = vue.computed(() => {
+        let { left } = props.position;
+        if (width.value) {
+          left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+        }
+        return {
+          left: `${left}px`,
+          top: `${props.position.top}px`,
+          width: width.value ? `${width.value}px` : "auto",
+          height: height.value ? `${height.value}px` : "auto"
+        };
+      });
+      let moveable = null;
+      const initMoveable = () => {
+        moveable = new VanillaMoveable(globalThis.document.body, {
+          className: "m-editor-floating-box-moveable",
+          target: target.value,
+          draggable: true,
+          resizable: true,
+          edge: true,
+          keepRatio: false,
+          origin: false,
+          snappable: true,
+          dragTarget: titleEl.value,
+          dragTargetSelf: false,
+          linePadding: 10,
+          controlPadding: 10,
+          bounds: { left: 0, top: 0, right: 0, bottom: 0, position: "css" }
+        });
+        moveable.on("drag", (e) => {
+          e.target.style.transform = e.transform;
+        });
+        moveable.on("resize", (e) => {
+          width.value = e.width;
+          height.value = e.height;
+          e.target.style.width = `${e.width}px`;
+          e.target.style.height = `${e.height}px`;
+          e.target.style.transform = e.drag.transform;
+        });
+      };
+      const destroyMoveable = () => {
+        moveable?.destroy();
+        moveable = null;
+      };
+      vue.watch(
+        visible,
+        async (visible2) => {
+          if (visible2) {
+            await vue.nextTick();
+            curZIndex.value = zIndex.nextZIndex();
+            const targetRect = target.value?.getBoundingClientRect();
+            if (targetRect) {
+              width.value = targetRect.width;
+              height.value = targetRect.height;
+              initMoveable();
+            }
+            if (titleEl.value) {
+              const titleRect = titleEl.value.getBoundingClientRect();
+              titleHeight.value = titleRect.height;
+            }
+          } else {
+            destroyMoveable();
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.onBeforeUnmount(() => {
+        destroyMoveable();
+      });
+      const hide = (cancel) => {
+        if (cancel !== false) {
+          visible.value = false;
+        }
+      };
+      const closeHandler = () => {
+        if (typeof props.beforeClose === "function") {
+          props.beforeClose(hide);
+        } else {
+          hide();
+        }
+      };
+      const nextZIndex = () => {
+        curZIndex.value = zIndex.nextZIndex();
+      };
+      vue.provide("parentFloating", target);
+      __expose({
+        bodyHeight,
+        target,
+        titleEl
+      });
+      return (_ctx, _cache) => {
+        return visible.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          key: 0,
+          to: "body"
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "target",
+            ref: target,
+            class: "m-editor-float-box",
+            style: vue.normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
+            onMousedown: nextZIndex
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "titleEl",
+              ref: titleEl,
+              class: "m-editor-float-box-title"
+            }, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+              ]),
+              vue.createElementVNode("div", null, [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  link: "",
+                  size: "small",
+                  onClick: closeHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ], 512),
+            vue.createElementVNode("div", {
+              class: "m-editor-float-box-body",
+              style: vue.normalizeStyle({ height: `${bodyHeight.value}px` })
+            }, [
+              vue.renderSlot(_ctx.$slots, "body")
+            ], 4)
+          ], 36)
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const useCodeBlockEdit = (codeBlockService) => {
+    const codeConfig = vue.ref();
+    const codeId = vue.ref();
+    const codeBlockEditor = vue.ref();
+    const createCodeBlock = async () => {
+      if (!codeBlockService) {
+        design.tMagicMessage.error("新增代码块失败");
+        return;
+      }
+      codeConfig.value = {
+        name: "",
+        content: `({app, params}) => {
+  // place your code here
+}`,
+        params: []
+      };
+      codeId.value = await codeBlockService.getUniqueId();
+      await vue.nextTick();
+      codeBlockEditor.value?.show();
+    };
+    const editCode = async (id) => {
+      const codeBlock = await codeBlockService?.getCodeContentById(id);
+      if (!codeBlock) {
+        design.tMagicMessage.error("获取代码块内容失败");
+        return;
+      }
+      let codeContent = codeBlock.content;
+      if (typeof codeContent !== "string") {
+        codeContent = codeContent.toString();
+      }
+      codeConfig.value = {
+        ...lodashEs.cloneDeep(codeBlock),
+        content: codeContent
+      };
+      codeId.value = id;
+      await vue.nextTick();
+      codeBlockEditor.value?.show();
+    };
+    const deleteCode = async (key) => {
+      codeBlockService?.deleteCodeDslByIds([key]);
+    };
+    const submitCodeBlockHandler = async (values) => {
+      if (!codeId.value)
+        return;
+      await codeBlockService?.setCodeDslById(codeId.value, values);
+      design.tMagicMessage.success("代码块保存成功");
+      codeBlockEditor.value?.hide();
+    };
+    return {
+      codeId,
+      codeConfig,
+      codeBlockEditor,
+      createCodeBlock,
+      editCode,
+      deleteCode,
+      submitCodeBlockHandler
+    };
+  };
+
   const useDataSourceMethod = () => {
     const codeConfig = vue.ref();
     const codeBlockEditor = vue.ref();
@@ -4026,6 +3717,7 @@
     propsPanelSize: "small",
     showAddPageButton: true,
     hideSlideBar: false,
+    sideBarItems: [],
     navMenuRect: {
       left: 0,
       top: 0,
@@ -4269,9 +3961,70 @@
     };
   };
 
-  const _hoisted_1$p = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const useWindowRect = () => {
+    const rect = vue.reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+    const windowResizeHandler = () => {
+      rect.width = globalThis.innerWidth;
+      rect.height = globalThis.innerHeight;
+    };
+    globalThis.addEventListener("resize", windowResizeHandler);
+    vue.onBeforeUnmount(() => {
+      globalThis.removeEventListener("resize", windowResizeHandler);
+    });
+    return {
+      rect
+    };
+  };
+
+  const useEditorContentHeight = () => {
+    const services = vue.inject("services");
+    const frameworkHeight = vue.computed(() => services?.uiService.get("frameworkRect").height || 0);
+    const navMenuHeight = vue.computed(() => services?.uiService.get("navMenuRect").height || 0);
+    const editorContentHeight = vue.computed(() => frameworkHeight.value - navMenuHeight.value);
+    const height = vue.ref(0);
+    vue.watch(
+      editorContentHeight,
+      () => {
+        if (height.value > 0 && height.value === editorContentHeight.value)
+          return;
+        height.value = editorContentHeight.value;
+      },
+      {
+        immediate: true
+      }
+    );
+    return {
+      height
+    };
+  };
+
+  const useNextFloatBoxPosition = (uiService, parent) => {
+    const boxPosition = vue.ref({
+      left: 0,
+      top: 0
+    });
+    const calcBoxPosition = () => {
+      const columnWidth = uiService?.get("columnWidth");
+      const navMenuRect = uiService?.get("navMenuRect");
+      let left = columnWidth?.left ?? 0;
+      if (parent?.value) {
+        const rect = parent?.value?.getBoundingClientRect();
+        left = (rect?.left ?? 0) + (rect?.width ?? 0);
+      }
+      boxPosition.value = {
+        left,
+        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
+      };
+    };
+    return {
+      boxPosition,
+      calcBoxPosition
+    };
+  };
+
+  const _hoisted_1$r = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
     },
@@ -4526,12 +4279,12 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$i, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4556,7 +4309,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(_sfc_main$P, {
+          vue.createVNode(_sfc_main$N, {
             visible: addDialogVisible.value,
             "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
             width: width.value,
@@ -4579,7 +4332,7 @@
             ]),
             _: 1
           }, 8, ["visible", "width", "height", "title", "position"]),
-          vue.createVNode(_sfc_main$P, {
+          vue.createVNode(_sfc_main$N, {
             visible: addFromJsonDialogVisible.value,
             "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
             width: width.value,
@@ -4604,115 +4357,8 @@
     }
   });
 
-  const useDataSourceEdit = (dataSourceService) => {
-    const dialogTitle = vue.ref("");
-    const editDialog = vue.ref();
-    const dataSourceValues = vue.ref({});
-    const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
-    const editHandler = (id) => {
-      if (!editDialog.value)
-        return;
-      dataSourceValues.value = {
-        ...dataSourceService?.getDataSourceById(id)
-      };
-      dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
-      editDialog.value.show();
-    };
-    const submitDataSourceHandler = (value) => {
-      if (value.id) {
-        dataSourceService?.update(value);
-      } else {
-        dataSourceService?.add(value);
-      }
-      editDialog.value?.hide();
-    };
-    return {
-      dialogTitle,
-      editDialog,
-      dataSourceValues,
-      editable,
-      editHandler,
-      submitDataSourceHandler
-    };
-  };
-
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorDataSourceConfigPanel"
-    },
-    __name: "DataSourceConfigPanel",
-    props: /* @__PURE__ */ vue.mergeModels({
-      title: {},
-      values: {},
-      disabled: { type: Boolean }
-    }, {
-      "visible": { type: Boolean, ...{ default: false } },
-      "visibleModifiers": {},
-      "width": { default: 670 },
-      "widthModifiers": {}
-    }),
-    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:visible", "update:width"]),
-    setup(__props, { expose: __expose, emit: __emit }) {
-      const props = __props;
-      const boxVisible = vue.useModel(__props, "visible");
-      const width = vue.useModel(__props, "width");
-      const emit = __emit;
-      const services = vue.inject("services");
-      const initValues = vue.ref({});
-      const dataSourceConfig = vue.ref([]);
-      const { height: editorHeight } = useEditorContentHeight();
-      const parentFloating = vue.inject("parentFloating", vue.ref(null));
-      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-      vue.watchEffect(() => {
-        initValues.value = props.values;
-        dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
-      });
-      const submitHandler = (values) => {
-        emit("submit", values);
-      };
-      const errorHandler = (error) => {
-        design.tMagicMessage.error(error.message);
-      };
-      __expose({
-        show() {
-          calcBoxPosition();
-          boxVisible.value = true;
-        },
-        hide() {
-          boxVisible.value = false;
-        }
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$P, {
-          visible: boxVisible.value,
-          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
-          width: width.value,
-          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
-          height: vue.unref(editorHeight),
-          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.isRef(editorHeight) ? editorHeight.value = $event : null),
-          title: _ctx.title,
-          position: vue.unref(boxPosition)
-        }, {
-          body: vue.withCtx(() => [
-            vue.createVNode(vue.unref(form.MFormBox), {
-              "label-width": "80px",
-              title: _ctx.title,
-              config: dataSourceConfig.value,
-              values: initValues.value,
-              disabled: _ctx.disabled,
-              style: { "height": "100%" },
-              onSubmit: submitHandler,
-              onError: errorHandler
-            }, null, 8, ["title", "config", "values", "disabled"])
-          ]),
-          _: 1
-        }, 8, ["visible", "width", "height", "title", "position"]);
-      };
-    }
-  });
-
-  const _hoisted_1$o = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$q = { class: "m-fields-data-source-field-select" };
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
     },
@@ -4731,8 +4377,13 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const services = vue.inject("services");
+      const eventBus = vue.inject("eventBus");
       const emit = __emit;
       const props = __props;
+      const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
+      const hasDataSourceSidePanel = vue.computed(
+        () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+      );
       const selectedDataSourceId = vue.computed(() => {
         const value = props.model[props.name];
         if (!Array.isArray(value) || !value.length) {
@@ -4741,33 +4392,6 @@
         return value[0].replace(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
       });
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
-      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) && !["array", "object", "any"].includes(fieldType)) {
-            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 {
@@ -4778,7 +4402,7 @@
             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)
+              children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType)
             })) || [];
             return options.filter((option) => option.children.length);
           }
@@ -4824,13 +4448,12 @@
       const onChangeHandler = (value) => {
         emit("change", value);
       };
-      const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
-        services?.dataSourceService
-      );
+      const editHandler = (id) => {
+        eventBus?.emit("edit-data-source", id);
+      };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           (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,
@@ -4842,14 +4465,16 @@
             prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
             onChange: onChangeHandler
           }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
-          (showDataSourceFieldSelect.value || !_ctx.config.fieldConfig) && selectedDataSourceId.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          (showDataSourceFieldSelect.value || !_ctx.config.fieldConfig) && selectedDataSourceId.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
             key: 0,
-            style: { "margin-left": "5px" },
+            class: "m-fields-select-action-button",
             size: _ctx.size,
-            onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editHandler)(selectedDataSourceId.value))
+            onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectedDataSourceId.value))
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Edit) }, null, 8, ["icon"])
+              vue.createVNode(_sfc_main$U, {
+                icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
+              }, null, 8, ["icon"])
             ]),
             _: 1
           }, 8, ["size"])) : vue.createCommentVNode("", true),
@@ -4864,24 +4489,16 @@
               vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
             ]),
             _: 1
-          }, 8, ["type", "size"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$K, {
-            ref_key: "editDialog",
-            ref: editDialog,
-            disabled: !vue.unref(editable),
-            values: vue.unref(dataSourceValues),
-            title: vue.unref(dialogTitle),
-            onSubmit: vue.unref(submitDataSourceHandler)
-          }, null, 8, ["disabled", "values", "title", "onSubmit"])
+          }, 8, ["type", "size"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
 
-  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 t-input__inner" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$p = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_2$i = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_3$8 = { class: "el-input__inner t-input__inner" };
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceInput"
     },
@@ -4988,138 +4605,435 @@
             }
           }
         }
-        if (curCharIsDot(dotIndex)) {
-          result = fields || [];
-        } else if (dotIndex > -1) {
-          const queryName = queryString.substring(dotIndex + 1).toLowerCase();
-          result = fields.filter(
-            (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName)
-          ) || [];
-        }
-        cb(
-          result.map((field) => ({
-            value: field.name,
-            text: field.title,
-            type: "field"
-          }))
-        );
+        if (curCharIsDot(dotIndex)) {
+          result = fields || [];
+        } else if (dotIndex > -1) {
+          const queryName = queryString.substring(dotIndex + 1).toLowerCase();
+          result = fields.filter(
+            (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName)
+          ) || [];
+        }
+        cb(
+          result.map((field) => ({
+            value: field.name,
+            text: field.title,
+            type: "field"
+          }))
+        );
+      };
+      const querySearch = (queryString, cb) => {
+        inputText = queryString;
+        const selectionStart = getSelectionStart();
+        const curQueryString = queryString.substring(0, selectionStart);
+        const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
+        const dsKeyStringLastIndex = curQueryString.lastIndexOf("${") + 1;
+        const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
+        if (isFieldTip) {
+          fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
+        } else {
+          dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
+        }
+      };
+      const selectHandler = async ({ value, type }) => {
+        const isDataSource = type === "dataSource";
+        const selectionStart = input.value?.selectionStart || 0;
+        let startText = inputText.substring(0, selectionStart);
+        const dotIndex = startText.lastIndexOf(".");
+        const leftCurlyBracketIndex = startText.lastIndexOf("${") + 1;
+        const endText = inputText.substring(selectionStart);
+        let suggestText = value;
+        if (isDataSource) {
+          if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+            startText = startText.substring(0, leftCurlyBracketIndex + 1);
+          }
+          if (!isRightCurlyBracket(selectionStart + 1)) {
+            suggestText = `${suggestText}}`;
+          }
+        } else if (!curCharIsDot(dotIndex)) {
+          startText = startText.substring(0, dotIndex + 1);
+        }
+        state.value = `${startText}${suggestText}${endText}`;
+        await vue.nextTick();
+        let newSelectionStart = 0;
+        if (isDataSource) {
+          newSelectionStart = leftCurlyBracketIndex + suggestText.length;
+        } else {
+          newSelectionStart = dotIndex + suggestText.length + 1;
+        }
+        input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+        changeHandler(state.value);
+      };
+      return (_ctx, _cache) => {
+        return _ctx.disabled || isFocused.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(design.getConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.mergeProps(
+          {
+            key: 0,
+            class: "tmagic-design-auto-complete",
+            ref_key: "autocomplete",
+            ref: autocomplete,
+            modelValue: state.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
+          },
+          vue.unref(design.getConfig)("components")?.autocomplete.props({
+            disabled: _ctx.disabled,
+            size: _ctx.size,
+            fetchSuggestions: querySearch,
+            triggerOnFocus: false,
+            clearable: true
+          }) || {},
+          {
+            style: { "width": "100%" },
+            onBlur: blurHandler,
+            onInput: inputHandler,
+            onSelect: selectHandler
+          }
+        ), {
+          suffix: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+          ]),
+          default: vue.withCtx(({ item }) => [
+            vue.createElementVNode("div", _hoisted_1$p, [
+              vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
+              vue.createElementVNode("span", _hoisted_2$i, vue.toDisplayString(item.value), 1)
+            ])
+          ]),
+          _: 1
+        }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(`tmagic-data-source-input-text el-input t-input t-size-${_ctx.size?.[0]} el-input--${_ctx.size}`),
+          onMouseup: mouseupHandler
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+          }, [
+            vue.createElementVNode("div", _hoisted_3$8, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                  item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: index,
+                    style: { "margin-right": "2px" }
+                  }, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
+                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
+                    key: index,
+                    size: _ctx.size
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(item.value), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["size"])) : vue.createCommentVNode("", true)
+                ], 64);
+              }), 256)),
+              vue.createVNode(_sfc_main$U, {
+                class: "tmagic-data-source-input-icon",
+                icon: vue.unref(iconsVue.Coin)
+              }, null, 8, ["icon"])
+            ])
+          ], 2)
+        ], 34));
+      };
+    }
+  });
+
+  const _hoisted_1$o = { style: { "display": "flex", "margin-bottom": "10px" } };
+  const _hoisted_2$h = { style: { "flex": "1" } };
+  const _hoisted_3$7 = { style: { "flex": "1" } };
+  const _hoisted_4$7 = { class: "dialog-footer" };
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeBlockEditor"
+    },
+    __name: "CodeBlockEditor",
+    props: /* @__PURE__ */ vue.mergeModels({
+      content: {},
+      disabled: { type: Boolean },
+      isDataSource: { type: Boolean },
+      dataSourceType: {}
+    }, {
+      "width": { default: 670 },
+      "widthModifiers": {},
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:width", "update:visible"]),
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const width = vue.useModel(__props, "width");
+      const boxVisible = vue.useModel(__props, "visible");
+      const props = __props;
+      const emit = __emit;
+      const services = vue.inject("services");
+      const { height: codeBlockEditorHeight } = useEditorContentHeight();
+      const difVisible = vue.ref(false);
+      const { rect: windowRect } = useWindowRect();
+      const magicVsEditor = vue.ref();
+      const diffChange = () => {
+        if (!magicVsEditor.value || !formBox.value?.form) {
+          return;
+        }
+        formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
+        difVisible.value = false;
+      };
+      const defaultParamColConfig = {
+        type: "row",
+        label: "参数类型",
+        items: [
+          {
+            text: "参数类型",
+            labelWidth: "70px",
+            type: "select",
+            name: "type",
+            options: [
+              {
+                text: "数字",
+                label: "数字",
+                value: "number"
+              },
+              {
+                text: "字符串",
+                label: "字符串",
+                value: "text"
+              },
+              {
+                text: "组件",
+                label: "组件",
+                value: "ui-select"
+              }
+            ]
+          }
+        ]
+      };
+      const functionConfig = vue.computed(() => [
+        {
+          text: "名称",
+          name: "name",
+          rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
+        },
+        {
+          text: "描述",
+          name: "desc"
+        },
+        {
+          text: "执行时机",
+          name: "timing",
+          type: "select",
+          options: () => {
+            const options = [
+              { text: "初始化前", value: "beforeInit" },
+              { text: "初始化后", value: "afterInit" }
+            ];
+            if (props.dataSourceType !== "base") {
+              options.push({ text: "请求前", value: "beforeRequest" });
+              options.push({ text: "请求后", value: "afterRequest" });
+            }
+            return options;
+          },
+          display: () => props.isDataSource
+        },
+        {
+          type: "table",
+          border: true,
+          text: "参数",
+          enableFullscreen: false,
+          enableToggleMode: false,
+          name: "params",
+          dropSort: false,
+          items: [
+            {
+              type: "text",
+              label: "参数名",
+              name: "name"
+            },
+            {
+              type: "text",
+              label: "描述",
+              name: "extra"
+            },
+            services?.codeBlockService.getParamsColConfig() || defaultParamColConfig
+          ]
+        },
+        {
+          name: "content",
+          type: "vs-code",
+          options: vue.inject("codeOptions", {}),
+          height: "500px",
+          onChange: (formState, code) => {
+            try {
+              getConfig("parseDSL")(code);
+              return code;
+            } catch (error) {
+              design.tMagicMessage.error(error.message);
+              throw error;
+            }
+          }
+        }
+      ]);
+      const submitForm = (values) => {
+        changedValue.value = void 0;
+        emit("submit", values);
       };
-      const querySearch = (queryString, cb) => {
-        inputText = queryString;
-        const selectionStart = getSelectionStart();
-        const curQueryString = queryString.substring(0, selectionStart);
-        const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
-        const dsKeyStringLastIndex = curQueryString.lastIndexOf("${") + 1;
-        const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
-        if (isFieldTip) {
-          fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
-        } else {
-          dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
-        }
+      const errorHandler = (error) => {
+        design.tMagicMessage.error(error.message);
       };
-      const selectHandler = async ({ value, type }) => {
-        const isDataSource = type === "dataSource";
-        const selectionStart = input.value?.selectionStart || 0;
-        let startText = inputText.substring(0, selectionStart);
-        const dotIndex = startText.lastIndexOf(".");
-        const leftCurlyBracketIndex = startText.lastIndexOf("${") + 1;
-        const endText = inputText.substring(selectionStart);
-        let suggestText = value;
-        if (isDataSource) {
-          if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
-            startText = startText.substring(0, leftCurlyBracketIndex + 1);
-          }
-          if (!isRightCurlyBracket(selectionStart + 1)) {
-            suggestText = `${suggestText}}`;
-          }
-        } else if (!curCharIsDot(dotIndex)) {
-          startText = startText.substring(0, dotIndex + 1);
-        }
-        state.value = `${startText}${suggestText}${endText}`;
-        await vue.nextTick();
-        let newSelectionStart = 0;
-        if (isDataSource) {
-          newSelectionStart = leftCurlyBracketIndex + suggestText.length;
-        } else {
-          newSelectionStart = dotIndex + suggestText.length + 1;
+      const formBox = vue.ref();
+      const changedValue = vue.ref();
+      const changeHandler = (values) => {
+        changedValue.value = values;
+      };
+      const beforeClose = (done) => {
+        if (!changedValue.value) {
+          done();
+          return;
         }
-        input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
-        changeHandler(state.value);
+        design.tMagicMessageBox.confirm("当前代码块已修改，是否保存？", "提示", {
+          confirmButtonText: "保存并关闭",
+          cancelButtonText: "不保存并关闭",
+          type: "warning",
+          distinguishCancelAndClose: true
+        }).then(() => {
+          changedValue.value && submitForm(changedValue.value);
+          done();
+        }).catch((action) => {
+          done(action === "cancel");
+        });
+      };
+      const closedHandler = () => {
+        changedValue.value = void 0;
       };
+      const parentFloating = vue.inject("parentFloating", vue.ref(null));
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+      __expose({
+        async show() {
+          calcBoxPosition();
+          boxVisible.value = true;
+        },
+        async hide() {
+          boxVisible.value = false;
+        }
+      });
       return (_ctx, _cache) => {
-        return _ctx.disabled || isFocused.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(design.getConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.mergeProps(
-          {
-            key: 0,
-            class: "tmagic-design-auto-complete",
-            ref_key: "autocomplete",
-            ref: autocomplete,
-            modelValue: state.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
-          },
-          vue.unref(design.getConfig)("components")?.autocomplete.props({
-            disabled: _ctx.disabled,
-            size: _ctx.size,
-            fetchSuggestions: querySearch,
-            triggerOnFocus: false,
-            clearable: true
-          }) || {},
-          {
-            style: { "width": "100%" },
-            onBlur: blurHandler,
-            onInput: inputHandler,
-            onSelect: selectHandler
-          }
-        ), {
-          suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
-          ]),
-          default: vue.withCtx(({ item }) => [
-            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)
-            ])
-          ]),
-          _: 1
-        }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: vue.normalizeClass(`tmagic-data-source-input-text el-input t-input t-size-${_ctx.size?.[0]} el-input--${_ctx.size}`),
-          onMouseup: mouseupHandler
-        }, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
-          }, [
-            vue.createElementVNode("div", _hoisted_3$7, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
-                return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                  item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
-                    key: index,
-                    style: { "margin-right": "2px" }
-                  }, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
-                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
-                    key: index,
-                    size: _ctx.size
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(_sfc_main$N, {
+            visible: boxVisible.value,
+            "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
+            width: width.value,
+            "onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
+            height: vue.unref(codeBlockEditorHeight),
+            "onUpdate:height": _cache[3] || (_cache[3] = ($event) => vue.isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+            title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
+            position: vue.unref(boxPosition),
+            "before-close": beforeClose
+          }, {
+            body: vue.withCtx(() => [
+              vue.createVNode(vue.unref(form.MFormBox), {
+                class: "m-editor-code-block-editor",
+                ref_key: "formBox",
+                ref: formBox,
+                "label-width": "80px",
+                "close-on-press-escape": false,
+                title: _ctx.content.name,
+                config: functionConfig.value,
+                values: _ctx.content,
+                disabled: _ctx.disabled,
+                style: { "height": "100%" },
+                onChange: changeHandler,
+                onSubmit: submitForm,
+                onError: errorHandler,
+                onClosed: closedHandler
+              }, {
+                left: vue.withCtx(() => [
+                  !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                    key: 0,
+                    type: "primary",
+                    link: "",
+                    onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString(item.value), 1)
+                      vue.createTextVNode("查看修改")
                     ]),
-                    _: 2
-                  }, 1032, ["size"])) : vue.createCommentVNode("", true)
-                ], 64);
-              }), 256)),
-              vue.createVNode(_sfc_main$U, {
-                class: "tmagic-data-source-input-icon",
-                icon: vue.unref(iconsVue.Coin)
-              }, null, 8, ["icon"])
-            ])
-          ], 2)
-        ], 34));
+                    _: 1
+                  })) : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["title", "config", "values", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["visible", "width", "height", "title", "position"]),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            vue.createVNode(vue.unref(design.TMagicDialog), {
+              title: "查看修改",
+              modelValue: difVisible.value,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
+              fullscreen: ""
+            }, {
+              footer: vue.withCtx(() => [
+                vue.createElementVNode("span", _hoisted_4$7, [
+                  vue.createVNode(vue.unref(design.TMagicButton), {
+                    size: "small",
+                    onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode("取消")
+                    ]),
+                    _: 1
+                  }),
+                  vue.createVNode(vue.unref(design.TMagicButton), {
+                    size: "small",
+                    type: "primary",
+                    onClick: diffChange
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode("确定")
+                    ]),
+                    _: 1
+                  })
+                ])
+              ]),
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_1$o, [
+                  vue.createElementVNode("div", _hoisted_2$h, [
+                    vue.createVNode(vue.unref(design.TMagicTag), {
+                      size: "small",
+                      type: "info"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("修改前")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  vue.createElementVNode("div", _hoisted_3$7, [
+                    vue.createVNode(vue.unref(design.TMagicTag), {
+                      size: "small",
+                      type: "success"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("修改后")
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+                  key: 0,
+                  ref_key: "magicVsEditor",
+                  ref: magicVsEditor,
+                  type: "diff",
+                  language: "json",
+                  initValues: _ctx.content.content,
+                  modifiedValues: formBox.value?.form?.values.content,
+                  style: vue.normalizeStyle(`height: ${vue.unref(windowRect).height - 150}px`)
+                }, null, 8, ["initValues", "modifiedValues", "style"])) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]))
+        ], 64);
       };
     }
   });
 
-  const _hoisted_1$m = { class: "m-editor-data-source-methods" };
+  const _hoisted_1$n = { class: "m-editor-data-source-methods" };
   const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
     },
@@ -5189,7 +5103,7 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
@@ -5208,7 +5122,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$J, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -5223,9 +5137,9 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
+  const _hoisted_1$m = { class: "m-fields-data-source-method-select" };
   const _hoisted_2$f = { class: "data-source-method-select-container" };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
     },
@@ -5245,9 +5159,13 @@
     setup(__props, { emit: __emit }) {
       const mForm = vue.inject("mForm");
       const services = vue.inject("services");
+      const eventBus = vue.inject("eventBus");
       const emit = __emit;
       const dataSourceService = services?.dataSourceService;
       const props = __props;
+      const hasDataSourceSidePanel = vue.computed(
+        () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+      );
       const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources"));
       const isCustomMethod = vue.computed(() => {
@@ -5302,36 +5220,38 @@
         props.model.params = value.params;
         emit("change", props.model);
       };
-      const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
       const editCodeHandler = () => {
-        const [id, name] = props.model[props.name];
+        const [id] = props.model[props.name];
         const dataSource = dataSourceService?.getDataSourceById(id);
         if (!dataSource)
           return;
-        editCode(dataSource, name);
-        setParamsConfig([id, name]);
-      };
-      const submitCodeBlockHandler = (value) => {
-        submitCode(value);
+        eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createElementVNode("div", _hoisted_2$f, [
-            vue.createVNode(_component_m_form_container, {
+            vue.createVNode(vue.unref(form.MContainer), {
               class: "select",
               config: cascaderConfig.value,
               model: _ctx.model,
+              size: _ctx.size,
               onChange: onChangeHandler
-            }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
+            }, null, 8, ["config", "model", "size"]),
+            _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
               key: 0,
-              class: "icon",
-              icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+              class: "m-fields-select-action-button",
+              size: _ctx.size,
               onClick: editCodeHandler
-            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$U, {
+                  icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }, 8, ["size"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -5339,23 +5259,15 @@
             disabled: _ctx.disabled,
             "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$O, {
-            key: 1,
-            ref_key: "codeBlockEditor",
-            ref: codeBlockEditor,
-            disabled: notEditable.value,
-            content: vue.unref(codeConfig),
-            onSubmit: submitCodeBlockHandler
-          }, null, 8, ["disabled", "content"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
 
-  const _hoisted_1$k = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
   const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
     },
@@ -5561,7 +5473,7 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
@@ -5580,7 +5492,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(_sfc_main$P, {
+          vue.createVNode(_sfc_main$N, {
             visible: addDialogVisible.value,
             "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
             width: width.value,
@@ -5608,7 +5520,8 @@
     }
   });
 
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$k = { class: "m-fields-data-source-select" };
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
     },
@@ -5628,8 +5541,14 @@
     setup(__props, { emit: __emit }) {
       const emit = __emit;
       const props = __props;
-      const { dataSourceService } = vue.inject("services") || {};
+      const mForm = vue.inject("mForm");
+      const { dataSourceService, uiService } = vue.inject("services") || {};
+      const eventBus = vue.inject("eventBus");
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
+      const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
+      const hasDataSourceSidePanel = vue.computed(
+        () => (uiService?.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+      );
       const selectConfig = vue.computed(() => {
         const { type, dataSourceType, value, ...config } = props.config;
         const valueIsId = props.config.value === "id";
@@ -5650,17 +5569,42 @@
       const changeHandler = (value) => {
         emit("change", value);
       };
+      const editHandler = () => {
+        const value = props.model[props.name];
+        if (!value)
+          return;
+        const id = typeof value === "string" ? value : value.dataSourceId;
+        const dataSource = dataSourceService?.getDataSourceById(id);
+        if (!dataSource)
+          return;
+        eventBus?.emit("edit-data-source", id);
+      };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(form.MSelect), {
-          model: _ctx.model,
-          name: _ctx.name,
-          size: _ctx.size,
-          prop: _ctx.prop,
-          disabled: _ctx.disabled,
-          config: selectConfig.value,
-          "last-values": _ctx.lastValues,
-          onChange: changeHandler
-        }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+          vue.createVNode(vue.unref(form.MSelect), {
+            model: _ctx.model,
+            name: _ctx.name,
+            size: _ctx.size,
+            prop: _ctx.prop,
+            disabled: _ctx.disabled,
+            config: selectConfig.value,
+            "last-values": _ctx.lastValues,
+            onChange: changeHandler
+          }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]),
+          _ctx.model[_ctx.name] && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 0,
+            class: "m-fields-select-action-button",
+            size: _ctx.size,
+            onClick: editHandler
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$U, {
+                icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["size"])) : vue.createCommentVNode("", true)
+        ]);
       };
     }
   });
@@ -5670,7 +5614,7 @@
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsEventSelect"
     },
@@ -5696,24 +5640,41 @@
       const eventsService = services?.eventsService;
       const codeBlockService = services?.codeBlockService;
       const eventNameConfig = vue.computed(() => {
+        const fieldType = props.config.src === "component" ? "select" : "cascader";
         const defaultEventNameConfig = {
           name: "name",
           text: "事件",
-          type: "select",
+          type: fieldType,
           labelWidth: "40px",
+          checkStrictly: true,
+          valueSeparator: ".",
           options: (mForm, { formValue }) => {
             let events = [];
             if (!eventsService || !dataSourceService)
               return events;
             if (props.config.src === "component") {
               events = eventsService.getEvent(formValue.type);
-            } else if (props.config.src === "datasource") {
+              return events.map((option) => ({
+                text: option.label,
+                value: option.value
+              }));
+            }
+            if (props.config.src === "datasource") {
               events = dataSourceService.getFormEvent(formValue.type);
+              const dataSource = dataSourceService.getDataSourceById(formValue.id);
+              const fields = dataSource?.fields || [];
+              if (fields.length > 0) {
+                return [
+                  ...events,
+                  {
+                    label: "数据变化",
+                    value: utils.DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+                    children: getCascaderOptionsFromFields(fields)
+                  }
+                ];
+              }
+              return events;
             }
-            return events.map((option) => ({
-              text: option.label,
-              value: option.value
-            }));
           }
         };
         return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
@@ -5828,6 +5789,7 @@
         ]
       }));
       const actionsConfig = vue.computed(() => ({
+        type: "panel",
         items: [
           {
             type: "group-list",
@@ -5872,8 +5834,6 @@
       };
       return (_ctx, _cache) => {
         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$j, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
@@ -5898,7 +5858,7 @@
               _: 1
             }, 8, ["size", "disabled"]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.model[_ctx.name], (cardItem, index) => {
-              return vue.openBlock(), vue.createBlock(_component_m_form_panel, {
+              return vue.openBlock(), vue.createBlock(vue.unref(form.MPanel), {
                 key: index,
                 disabled: _ctx.disabled,
                 size: _ctx.size,
@@ -5908,7 +5868,7 @@
                 onChange: onChangeHandler
               }, {
                 header: vue.withCtx(() => [
-                  vue.createVNode(_component_m_form_container, {
+                  vue.createVNode(vue.unref(form.MContainer), {
                     class: "fullWidth",
                     config: eventNameConfig.value,
                     model: cardItem,
@@ -5944,7 +5904,7 @@
   const _hoisted_4$6 = [
     _hoisted_2$c
   ];
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
@@ -5959,7 +5919,7 @@
   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$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
     },
@@ -6083,7 +6043,7 @@
             size: "default",
             disabled: _ctx.disabled,
             link: "",
-            icon: _sfc_main$C,
+            icon: _sfc_main$D,
             onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
           }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
@@ -6093,7 +6053,7 @@
 
   const _hoisted_1$g = { class: "m-fields-page-fragment-select" };
   const _hoisted_2$a = { class: "page-fragment-select-container" };
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
     },
@@ -6165,7 +6125,7 @@
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsUISelect"
     },
@@ -6353,7 +6313,7 @@
     };
   };
 
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -6375,7 +6335,7 @@
     }
   });
 
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSplitView"
     },
@@ -6516,7 +6476,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$y, { 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]),
@@ -6525,7 +6485,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$y, { 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`)
@@ -6543,7 +6503,7 @@
     class: "menu-item-text"
   };
   const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -6708,7 +6668,7 @@
     key: 1,
     style: { "width": "21px" }
   };
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarAddButton"
     },
@@ -6748,7 +6708,7 @@
     }
   });
 
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
     },
@@ -6877,7 +6837,7 @@
     }
   });
 
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarSwitchTypeButton"
     },
@@ -6925,7 +6885,7 @@
   const _hoisted_2$8 = ["onClick"];
   const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$5 = ["title"];
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBar"
     },
@@ -7004,14 +6964,14 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
+          !_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$u, { type: active.value }, {
+          vue.createVNode(_sfc_main$v, { type: active.value }, {
             prepend: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$v, { 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) => {
@@ -7044,7 +7004,7 @@
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", null, [
                         vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                          vue.createVNode(_sfc_main$w, {
+                          vue.createVNode(_sfc_main$x, {
                             data: {
                               type: "button",
                               text: "复制",
@@ -7052,7 +7012,7 @@
                               handler: () => copy(item)
                             }
                           }, null, 8, ["data"]),
-                          vue.createVNode(_sfc_main$w, {
+                          vue.createVNode(_sfc_main$x, {
                             data: {
                               type: "button",
                               text: "删除",
@@ -7079,7 +7039,7 @@
   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$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -7134,7 +7094,7 @@
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
   const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -7218,7 +7178,7 @@
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$x, {
+          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$y, {
             key: 1,
             "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
@@ -7242,10 +7202,10 @@
             ]),
             center: vue.withCtx(() => [
               page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$r, { "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$s, { "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 })
                   ]),
@@ -7280,7 +7240,7 @@
     }
   });
 
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -7462,7 +7422,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$w, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -7475,12 +7435,13 @@
   });
 
   const _hoisted_1$a = { class: "m-editor-props-panel" };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
     __name: "PropsPanel",
     props: {
+      disabledShowSrc: { type: Boolean },
       extendState: { type: Function }
     },
     emits: ["mounted", "submit-error", "form-error"],
@@ -7541,7 +7502,7 @@
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
             ref: configForm,
-            class: vue.normalizeClass(`m-editor-props-panel ${propsPanelSize.value}`),
+            class: vue.normalizeClass(propsPanelSize.value),
             "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
             size: propsPanelSize.value,
             "init-values": values.value,
@@ -7550,7 +7511,8 @@
             onChange: submit,
             onError: errorHandler
           }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"]),
-          vue.createVNode(vue.unref(design.TMagicButton), {
+          !_ctx.disabledShowSrc ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 0,
             class: "m-editor-props-panel-src-icon",
             circle: "",
             size: "large",
@@ -7562,9 +7524,9 @@
               vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Document) }, null, 8, ["icon"])
             ]),
             _: 1
-          }, 8, ["type"]),
+          }, 8, ["type"])) : vue.createCommentVNode("", true),
           showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
-            key: 0,
+            key: 1,
             height: `${vue.unref(editorContentHeight)}px`,
             "init-values": values.value,
             options: vue.unref(codeOptions),
@@ -7578,7 +7540,7 @@
     }
   });
 
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -7636,7 +7598,7 @@
     key: 0,
     class: "m-editor-tree-node-children"
   };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTreeNode"
     },
@@ -7757,7 +7719,7 @@
     key: 1,
     class: "m-editor-tree-empty"
   };
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTree"
     },
@@ -7781,7 +7743,7 @@
           onDragover: handleDragOver
         }, [
           _ctx.data?.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$n, {
               key: item.id,
               data: item,
               indent: _ctx.indent,
@@ -7878,7 +7840,7 @@
     };
   };
 
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -7960,7 +7922,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: codeList.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -8017,7 +7979,7 @@
   });
 
   const _hoisted_1$7 = { class: "search-wrapper" };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -8026,6 +7988,7 @@
       customError: { type: Function }
     },
     setup(__props) {
+      const eventBus = vue.inject("eventBus");
       const { codeBlockService } = vue.inject("services") || {};
       const editable = vue.computed(() => codeBlockService?.getEditStatus());
       const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
@@ -8033,13 +7996,16 @@
       const filterTextChangeHandler = (val) => {
         codeBlockList.value?.filter(val);
       };
+      eventBus?.on("edit-code", (id) => {
+        editCode(id);
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
                 vue.createElementVNode("div", _hoisted_1$7, [
-                  vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+                  vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
@@ -8055,7 +8021,7 @@
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                 ])
               ]),
-              vue.createVNode(_sfc_main$k, {
+              vue.createVNode(_sfc_main$l, {
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
@@ -8073,7 +8039,7 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$J, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -8086,6 +8052,113 @@
     }
   });
 
+  const useDataSourceEdit = (dataSourceService) => {
+    const dialogTitle = vue.ref("");
+    const editDialog = vue.ref();
+    const dataSourceValues = vue.ref({});
+    const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
+    const editHandler = (id) => {
+      if (!editDialog.value)
+        return;
+      dataSourceValues.value = {
+        ...dataSourceService?.getDataSourceById(id)
+      };
+      dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
+      editDialog.value.show();
+    };
+    const submitDataSourceHandler = (value) => {
+      if (value.id) {
+        dataSourceService?.update(value);
+      } else {
+        dataSourceService?.add(value);
+      }
+      editDialog.value?.hide();
+    };
+    return {
+      dialogTitle,
+      editDialog,
+      dataSourceValues,
+      editable,
+      editHandler,
+      submitDataSourceHandler
+    };
+  };
+
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorDataSourceConfigPanel"
+    },
+    __name: "DataSourceConfigPanel",
+    props: /* @__PURE__ */ vue.mergeModels({
+      title: {},
+      values: {},
+      disabled: { type: Boolean }
+    }, {
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {},
+      "width": { default: 670 },
+      "widthModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:visible", "update:width"]),
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
+      const boxVisible = vue.useModel(__props, "visible");
+      const width = vue.useModel(__props, "width");
+      const emit = __emit;
+      const services = vue.inject("services");
+      const initValues = vue.ref({});
+      const dataSourceConfig = vue.ref([]);
+      const { height: editorHeight } = useEditorContentHeight();
+      const parentFloating = vue.inject("parentFloating", vue.ref(null));
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+      vue.watchEffect(() => {
+        initValues.value = props.values;
+        dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
+      });
+      const submitHandler = (values) => {
+        emit("submit", values);
+      };
+      const errorHandler = (error) => {
+        design.tMagicMessage.error(error.message);
+      };
+      __expose({
+        show() {
+          calcBoxPosition();
+          boxVisible.value = true;
+        },
+        hide() {
+          boxVisible.value = false;
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          visible: boxVisible.value,
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
+          width: width.value,
+          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
+          height: vue.unref(editorHeight),
+          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.isRef(editorHeight) ? editorHeight.value = $event : null),
+          title: _ctx.title,
+          position: vue.unref(boxPosition)
+        }, {
+          body: vue.withCtx(() => [
+            vue.createVNode(vue.unref(form.MFormBox), {
+              "label-width": "80px",
+              title: _ctx.title,
+              config: dataSourceConfig.value,
+              values: initValues.value,
+              disabled: _ctx.disabled,
+              style: { "height": "100%" },
+              onSubmit: submitHandler,
+              onError: errorHandler
+            }, null, 8, ["title", "config", "values", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["visible", "width", "height", "title", "position"]);
+      };
+    }
+  });
+
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
@@ -8175,7 +8248,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: list.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -8236,6 +8309,7 @@
     },
     __name: "DataSourceListPanel",
     setup(__props) {
+      const eventBus = vue.inject("eventBus");
       const { dataSourceService } = vue.inject("services") || {};
       const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
       const datasourceTypeList = vue.computed(
@@ -8267,12 +8341,15 @@
       const filterTextChangeHandler = (val) => {
         dataSourceList.value?.filter(val);
       };
+      eventBus?.on("edit-data-source", (id) => {
+        editHandler(id);
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", _hoisted_1$6, [
-                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
                   placement: "right"
@@ -8291,7 +8368,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$w, {
+                        return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: item.text,
@@ -8317,7 +8394,7 @@
             ]),
             _: 3
           }),
-          vue.createVNode(_sfc_main$K, {
+          vue.createVNode(_sfc_main$j, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !vue.unref(editable),
@@ -8461,7 +8538,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$w, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -8563,8 +8640,8 @@
         const stage = services?.editorService?.get("stage");
         const rect = menu.value.$el.getBoundingClientRect();
         const parentRect = stage?.container?.getBoundingClientRect();
-        const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
-        const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+        const initialLeft = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+        const initialTop = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
         services?.editorService?.paste({ left: initialLeft, top: initialTop });
       } else {
         services?.editorService?.paste();
@@ -9237,8 +9314,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$n, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+            vue.createVNode(_sfc_main$o, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
               key: 0,
               tabindex: "-1",
               ref_key: "tree",
@@ -9364,7 +9441,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -9437,7 +9514,11 @@
     },
     __name: "Sidebar",
     props: {
-      data: { default: () => ({ type: "tabs", status: "组件", items: ["component-list", "layer", "code-block", "data-source"] }) },
+      data: { default: () => ({
+        type: "tabs",
+        status: "组件",
+        items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE]
+      }) },
       layerContentMenu: {},
       customContentMenu: {}
     },
@@ -9449,8 +9530,8 @@
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
-          "component-list": {
-            $key: "component-list",
+          [SideItemKey.COMPONENT_LIST]: {
+            $key: SideItemKey.COMPONENT_LIST,
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
@@ -9469,16 +9550,16 @@
             component: _sfc_main$c,
             slots: {}
           },
-          "code-block": {
+          [SideItemKey.CODE_BLOCK]: {
             $key: "code-block",
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$j,
+            component: _sfc_main$k,
             slots: {}
           },
-          "data-source": {
-            $key: "data-source",
+          [SideItemKey.DATA_SOURCE]: {
+            $key: SideItemKey.DATA_SOURCE,
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
@@ -9489,6 +9570,15 @@
         return typeof data === "string" ? map[data] : data;
       };
       const sideBarItems = vue.computed(() => props.data.items.map((item) => getItemConfig(item)));
+      vue.watch(
+        sideBarItems,
+        (items) => {
+          services?.uiService.set("sideBarItems", items);
+        },
+        {
+          immediate: true
+        }
+      );
       vue.watch(
         () => props.data.status,
         (status) => {
@@ -9527,7 +9617,8 @@
                   class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
                   draggable: "true",
                   key: config.$key ?? index,
-                  onClick: ($event) => activeTabName.value = config.text || `${index}`,
+                  style: vue.normalizeStyle(config.tabStyle || {}),
+                  onClick: ($event) => activeTabName.value = config.text || config.$key || `${index}`,
                   onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
@@ -9537,7 +9628,7 @@
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
                   config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
-                ], 42, _hoisted_3$1)), [
+                ], 46, _hoisted_3$1)), [
                   [vue.vShow, !vue.unref(floatBoxStates)[config.$key]?.status]
                 ]);
               }), 128))
@@ -9547,7 +9638,10 @@
                 class: "m-editor-sidebar-content",
                 key: config.$key ?? index
               }, [
-                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
                   config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                     name: "component-list-panel-header",
                     fn: vue.withCtx(() => [
@@ -9658,14 +9752,14 @@
                   } : void 0
                 ]), 1040)) : vue.createCommentVNode("", true)
               ])), [
-                [vue.vShow, activeTabName.value === config.text]
+                [vue.vShow, [config.text, config.$key, `${index}`].includes(activeTabName.value)]
               ]);
             }), 128))
           ])) : vue.createCommentVNode("", true),
           (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$N, {
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
@@ -9680,7 +9774,10 @@
                 }, {
                   body: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_5$1, [
-                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
+                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
+                        key: 0,
+                        ref_for: true
+                      }, config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
                     ])
                   ]),
                   _: 2
@@ -10098,7 +10195,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$N, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -10108,7 +10205,7 @@
             position: menuPosition.value
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$l, {
+              vue.createVNode(_sfc_main$m, {
                 class: "m-editor-node-list-menu magic-editor-layer-tree",
                 data: nodeData.value,
                 "node-status-map": vue.unref(nodeStatusMap),
@@ -10501,17 +10598,17 @@
             position = "absolute";
             top = e.clientY - containerRect.top + scrollTop;
             left = e.clientX - containerRect.left + scrollLeft;
-            if (parentEl && doc) {
+            if (parentEl) {
               const { left: parentLeft, top: parentTop } = StageCore.getOffset(parentEl);
-              left = left - StageCore.calcValueByFontsize(doc, parentLeft) * zoom.value;
-              top = top - StageCore.calcValueByFontsize(doc, parentTop) * zoom.value;
+              left = left - parentLeft * zoom.value;
+              top = top - parentTop * zoom.value;
             }
           }
           config.data.style = {
             ...style,
             position,
-            top: top / zoom.value,
-            left: left / zoom.value
+            top: utils.calcValueByFontsize(doc, top / zoom.value),
+            left: utils.calcValueByFontsize(doc, left / zoom.value)
           };
           config.data.inputEvent = e;
           services?.editorService.add(config.data, parent);
@@ -11258,6 +11355,7 @@
     containerHighlightClassName: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME,
     containerHighlightDuration: 800,
     containerHighlightType: StageCore.ContainerHighlightType.DEFAULT,
+    disabledShowSrc: false,
     componentGroupList: () => [],
     datasourceList: () => [],
     menu: () => ({ left: [], right: [] }),
@@ -11639,6 +11737,7 @@
       disabledMultiSelect: { type: Boolean },
       disabledPageFragment: { type: Boolean },
       disabledStageOverlay: { type: Boolean },
+      disabledShowSrc: { type: Boolean },
       render: { type: Function },
       updateDragEl: { type: Function },
       canSelect: { type: Function },
@@ -11688,15 +11787,16 @@
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
       vue.provide("stageOptions", stageOptions);
+      vue.provide("eventBus", new events.EventEmitter());
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$q, { "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$p, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -11771,8 +11871,9 @@
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$o, {
+              vue.createVNode(_sfc_main$p, {
                 "extend-state": _ctx.extendFormState,
+                "disabled-show-src": _ctx.disabledShowSrc,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
                 onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
                 onSubmitError: _cache[2] || (_cache[2] = (e) => _ctx.$emit("props-submit-error", e))
@@ -11781,7 +11882,7 @@
                   vue.renderSlot(_ctx.$slots, "props-panel-header")
                 ]),
                 _: 3
-              }, 8, ["extend-state"])
+              }, 8, ["extend-state", "disabled-show-src"])
             ])
           ]),
           empty: vue.withCtx(() => [
@@ -11819,66 +11920,67 @@
       setConfig(option);
       app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
       app.component("magic-code-editor", _sfc_main$T);
-      app.component("m-fields-ui-select", _sfc_main$z);
+      app.component("m-fields-ui-select", _sfc_main$A);
       app.component("m-fields-code-link", _sfc_main$R);
       app.component("m-fields-vs-code", _sfc_main$S);
       app.component("m-fields-code-select", _sfc_main$Q);
-      app.component("m-fields-code-select-col", _sfc_main$M);
-      app.component("m-fields-event-select", _sfc_main$D);
-      app.component("m-fields-data-source-fields", _sfc_main$L);
-      app.component("m-fields-data-source-mocks", _sfc_main$F);
-      app.component("m-fields-key-value", _sfc_main$B);
-      app.component("m-fields-data-source-input", _sfc_main$I);
-      app.component("m-fields-data-source-select", _sfc_main$E);
-      app.component("m-fields-data-source-methods", _sfc_main$H);
-      app.component("m-fields-data-source-method-select", _sfc_main$G);
-      app.component("m-fields-data-source-field-select", _sfc_main$J);
-      app.component("m-fields-page-fragment-select", _sfc_main$A);
+      app.component("m-fields-code-select-col", _sfc_main$O);
+      app.component("m-fields-event-select", _sfc_main$E);
+      app.component("m-fields-data-source-fields", _sfc_main$M);
+      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$K);
+      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$L);
+      app.component("m-fields-page-fragment-select", _sfc_main$B);
     }
   };
 
-  Object.defineProperty(exports, 'DepTargetType', {
+  Object.defineProperty(exports, "DepTargetType", {
     enumerable: true,
     get: () => dep.DepTargetType
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$O;
-  exports.CodeBlockList = _sfc_main$k;
-  exports.CodeBlockListPanel = _sfc_main$j;
+  exports.CodeBlockEditor = _sfc_main$J;
+  exports.CodeBlockList = _sfc_main$l;
+  exports.CodeBlockListPanel = _sfc_main$k;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
   exports.CodeSelect = _sfc_main$Q;
-  exports.CodeSelectCol = _sfc_main$M;
+  exports.CodeSelectCol = _sfc_main$O;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$b;
   exports.ContentMenu = _sfc_main$g;
-  exports.DataSourceConfigPanel = _sfc_main$K;
-  exports.DataSourceFieldSelect = _sfc_main$J;
-  exports.DataSourceFields = _sfc_main$L;
-  exports.DataSourceInput = _sfc_main$I;
-  exports.DataSourceMethodSelect = _sfc_main$G;
-  exports.DataSourceMethods = _sfc_main$H;
-  exports.DataSourceMocks = _sfc_main$F;
-  exports.DataSourceSelect = _sfc_main$E;
+  exports.DataSourceConfigPanel = _sfc_main$j;
+  exports.DataSourceFieldSelect = _sfc_main$L;
+  exports.DataSourceFields = _sfc_main$M;
+  exports.DataSourceInput = _sfc_main$K;
+  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$D;
+  exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
   exports.Icon = _sfc_main$U;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$B;
+  exports.KeyValue = _sfc_main$C;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$x;
-  exports.PageFragmentSelect = _sfc_main$A;
-  exports.PropsPanel = _sfc_main$o;
-  exports.Resizer = _sfc_main$y;
-  exports.SplitView = _sfc_main$x;
+  exports.LayoutContainer = _sfc_main$y;
+  exports.PageFragmentSelect = _sfc_main$B;
+  exports.PropsPanel = _sfc_main$p;
+  exports.Resizer = _sfc_main$z;
+  exports.SideItemKey = SideItemKey;
+  exports.SplitView = _sfc_main$y;
   exports.TMagicCodeEditor = _sfc_main$T;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$w;
+  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;
@@ -11900,6 +12002,7 @@
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getAddParent = getAddParent;
+  exports.getCascaderOptionsFromFields = getCascaderOptionsFromFields;
   exports.getConfig = getConfig;
   exports.getDefaultConfig = getDefaultConfig;
   exports.getDisplayField = getDisplayField;