@tmagic/editor 1.4.3 → 1.4.5

package/dist/tmagic-editor.js

@@ -1,24 +1,24 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createCommentVNode, watchEffect, Fragment, isRef, createTextVNode, mergeProps, renderList, createStaticVNode, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, Transition, mergeDefaults } from 'vue';
-import { Edit, FullScreen, Close, View, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, mergeProps, Fragment, renderList, createStaticVNode, watchEffect, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, Transition, mergeDefaults } from 'vue';
+import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
-import { TMagicIcon, TMagicButton, TMagicCard, useZIndex, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import { TMagicIcon, TMagicButton, TMagicCard, useZIndex, tMagicMessage, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
-import { MContainer, MFormBox, MForm, filterFunction, createValues, MCascader, MSelect } from '@tmagic/form';
+import { MContainer, MForm, filterFunction, createValues, MFormBox, MCascader, MSelect, MPanel } from '@tmagic/form';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
-import VanillaMoveable from 'moveable';
 import { MagicTable } from '@tmagic/table';
-import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, calcValueByFontsize, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import VanillaMoveable from 'moveable';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
-import Gesto from 'gesto';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
+import Gesto from 'gesto';
+import StageCore, { GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
-const _hoisted_1$t = ["src"];
+const _hoisted_1$u = ["src"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
@@ -43,7 +43,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$t)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$u)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -71,7 +71,7 @@ const getConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$s = {
+const _hoisted_1$t = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
@@ -232,7 +232,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -505,689 +505,163 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
-  __name: "FloatingBox",
-  props: /* @__PURE__ */ mergeModels({
-    position: { default: () => ({ left: 0, top: 0 }) },
-    title: { default: "" },
-    beforeClose: {}
-  }, {
-    "width": { default: 0 },
-    "widthModifiers": {},
-    "height": { default: 0 },
-    "heightModifiers": {},
-    "visible": { type: Boolean, ...{ default: false } },
-    "visibleModifiers": {}
-  }),
-  emits: ["update:width", "update:height", "update:visible"],
-  setup(__props, { expose: __expose }) {
-    const width = useModel(__props, "width");
-    const height = useModel(__props, "height");
-    const visible = useModel(__props, "visible");
-    const props = __props;
-    const target = ref();
-    const titleEl = ref();
-    const zIndex = useZIndex();
-    const curZIndex = ref(0);
-    const titleHeight = ref(0);
-    const bodyHeight = 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 = inject("services");
-    const frameworkWidth = computed(() => services?.uiService.get("frameworkRect").width || 0);
-    const style = 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;
-    };
-    watch(
-      visible,
-      async (visible2) => {
-        if (visible2) {
-          await 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
-      }
-    );
-    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();
-    };
-    provide("parentFloating", target);
-    __expose({
-      bodyHeight,
-      target,
-      titleEl
-    });
-    return (_ctx, _cache) => {
-      return visible.value ? (openBlock(), createBlock(Teleport, {
-        key: 0,
-        to: "body"
-      }, [
-        createElementVNode("div", {
-          ref_key: "target",
-          ref: target,
-          class: "m-editor-float-box",
-          style: normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
-          onMousedown: nextZIndex
-        }, [
-          createElementVNode("div", {
-            ref_key: "titleEl",
-            ref: titleEl,
-            class: "m-editor-float-box-title"
-          }, [
-            renderSlot(_ctx.$slots, "title", {}, () => [
-              createElementVNode("span", null, toDisplayString(_ctx.title), 1)
-            ]),
-            createElementVNode("div", null, [
-              createVNode(unref(TMagicButton), {
-                link: "",
-                size: "small",
-                onClick: closeHandler
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$U, { icon: unref(Close) }, null, 8, ["icon"])
-                ]),
-                _: 1
-              })
-            ])
-          ], 512),
-          createElementVNode("div", {
-            class: "m-editor-float-box-body",
-            style: normalizeStyle({ height: `${bodyHeight.value}px` })
-          }, [
-            renderSlot(_ctx.$slots, "body")
-          ], 4)
-        ], 36)
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-
-const useEditorContentHeight = () => {
-  const services = inject("services");
-  const frameworkHeight = computed(() => services?.uiService.get("frameworkRect").height || 0);
-  const navMenuHeight = computed(() => services?.uiService.get("navMenuRect").height || 0);
-  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
-  const height = ref(0);
-  watchEffect(() => {
-    if (height.value > 0 && height.value === editorContentHeight.value)
-      return;
-    height.value = editorContentHeight.value;
-  });
-  return {
-    height
-  };
-};
-
-const useNextFloatBoxPosition = (uiService, parent) => {
-  const boxPosition = 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 = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
-  const windowResizeHandler = () => {
-    rect.width = globalThis.innerWidth;
-    rect.height = globalThis.innerHeight;
-  };
-  globalThis.addEventListener("resize", windowResizeHandler);
-  onBeforeUnmount(() => {
-    globalThis.removeEventListener("resize", windowResizeHandler);
-  });
-  return {
-    rect
-  };
-};
-
-const _hoisted_1$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__ */ defineComponent({
-  ...{
-    name: "MEditorCodeBlockEditor"
-  },
-  __name: "CodeBlockEditor",
-  props: /* @__PURE__ */ mergeModels({
-    content: {},
-    disabled: { type: Boolean },
-    isDataSource: { type: Boolean },
-    dataSourceType: {}
-  }, {
-    "width": { default: 670 },
-    "widthModifiers": {},
-    "visible": { type: Boolean, ...{ default: false } },
-    "visibleModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:width", "update:visible"]),
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const width = useModel(__props, "width");
-    const boxVisible = useModel(__props, "visible");
-    const props = __props;
-    const emit = __emit;
-    const services = inject("services");
-    const { height: codeBlockEditorHeight } = useEditorContentHeight();
-    const difVisible = ref(false);
-    const { rect: windowRect } = useWindowRect();
-    const magicVsEditor = 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 = 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: inject("codeOptions", {}),
-        height: "500px",
-        onChange: (formState, code) => {
-          try {
-            getConfig("parseDSL")(code);
-            return code;
-          } catch (error) {
-            tMagicMessage.error(error.message);
-            throw error;
-          }
-        }
-      }
-    ]);
-    const submitForm = (values) => {
-      changedValue.value = void 0;
-      emit("submit", values);
-    };
-    const errorHandler = (error) => {
-      tMagicMessage.error(error.message);
-    };
-    const formBox = ref();
-    const changedValue = ref();
-    const changeHandler = (values) => {
-      changedValue.value = values;
-    };
-    const beforeClose = (done) => {
-      if (!changedValue.value) {
-        done();
-        return;
-      }
-      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 = inject("parentFloating", 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 openBlock(), createElementBlock(Fragment, null, [
-        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: unref(codeBlockEditorHeight),
-          "onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
-          title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
-          position: unref(boxPosition),
-          "before-close": beforeClose
-        }, {
-          body: withCtx(() => [
-            createVNode(unref(MFormBox), {
-              class: "m-editor-code-block-editor",
-              ref_key: "formBox",
-              ref: formBox,
-              "label-width": "80px",
-              "close-on-press-escape": false,
-              title: _ctx.content.name,
-              config: functionConfig.value,
-              values: _ctx.content,
-              disabled: _ctx.disabled,
-              style: { "height": "100%" },
-              onChange: changeHandler,
-              onSubmit: submitForm,
-              onError: errorHandler,
-              onClosed: closedHandler
-            }, {
-              left: withCtx(() => [
-                !_ctx.disabled ? (openBlock(), createBlock(unref(TMagicButton), {
-                  key: 0,
-                  type: "primary",
-                  link: "",
-                  onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("查看修改")
-                  ]),
-                  _: 1
-                })) : createCommentVNode("", true)
-              ]),
-              _: 1
-            }, 8, ["title", "config", "values", "disabled"])
-          ]),
-          _: 1
-        }, 8, ["visible", "width", "height", "title", "position"]),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(unref(TMagicDialog), {
-            title: "查看修改",
-            modelValue: difVisible.value,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
-            fullscreen: ""
-          }, {
-            footer: withCtx(() => [
-              createElementVNode("span", _hoisted_4$7, [
-                createVNode(unref(TMagicButton), {
-                  size: "small",
-                  onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("取消")
-                  ]),
-                  _: 1
-                }),
-                createVNode(unref(TMagicButton), {
-                  size: "small",
-                  type: "primary",
-                  onClick: diffChange
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("确定")
-                  ]),
-                  _: 1
-                })
-              ])
-            ]),
-            default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$r, [
-                createElementVNode("div", _hoisted_2$k, [
-                  createVNode(unref(TMagicTag), {
-                    size: "small",
-                    type: "info"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode("修改前")
-                    ]),
-                    _: 1
-                  })
-                ]),
-                createElementVNode("div", _hoisted_3$8, [
-                  createVNode(unref(TMagicTag), {
-                    size: "small",
-                    type: "success"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode("修改后")
-                    ]),
-                    _: 1
-                  })
-                ])
-              ]),
-              difVisible.value ? (openBlock(), 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: normalizeStyle(`height: ${unref(windowRect).height - 150}px`)
-              }, null, 8, ["initValues", "modifiedValues", "style"])) : 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"
+          }
+        ]
       }
     ]
   }
@@ -1297,6 +771,33 @@ const getDisplayField = (dataSources, key) => {
   }
   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))
@@ -2052,6 +1553,13 @@ var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
   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";
@@ -2152,11 +1660,13 @@ const getMiddleTop = (node, parentNode, stage) => {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
+  const { scrollTop = 0, wrapperHeight } = stage.mask;
+  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
   if (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) {
@@ -2257,8 +1767,12 @@ const fixNodeLeft = (config, parent, doc) => {
   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 = calcValueByFontsize(doc, parentEl.offsetWidth);
+    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
+    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+      return calcParentOffsetWidth - calcElOffsetWidth;
+    }
   }
   return config.style.left;
 };
@@ -3345,7 +2859,7 @@ class Editor extends BaseService {
       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 = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
         node.style.right = "";
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
@@ -3703,7 +3217,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3753,68 +3267,9 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useCodeBlockEdit = (codeBlockService) => {
-  const codeConfig = ref();
-  const codeId = ref();
-  const codeBlockEditor = ref();
-  const createCodeBlock = async () => {
-    if (!codeBlockService) {
-      tMagicMessage.error("新增代码块失败");
-      return;
-    }
-    codeConfig.value = {
-      name: "",
-      content: `({app, params}) => {
-  // place your code here
-}`,
-      params: []
-    };
-    codeId.value = await codeBlockService.getUniqueId();
-    await nextTick();
-    codeBlockEditor.value?.show();
-  };
-  const editCode = async (id) => {
-    const codeBlock = await codeBlockService?.getCodeContentById(id);
-    if (!codeBlock) {
-      tMagicMessage.error("获取代码块内容失败");
-      return;
-    }
-    let codeContent = codeBlock.content;
-    if (typeof codeContent !== "string") {
-      codeContent = codeContent.toString();
-    }
-    codeConfig.value = {
-      ...cloneDeep(codeBlock),
-      content: codeContent
-    };
-    codeId.value = id;
-    await 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);
-    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__ */ defineComponent({
+const _hoisted_1$s = { class: "m-fields-code-select-col" };
+const _hoisted_2$k = { class: "code-select-container" };
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelectCol"
   },
@@ -3834,9 +3289,13 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const mForm = inject("mForm");
     const services = inject("services");
+    const eventBus = inject("eventBus");
     const emit = __emit;
-    const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
     const props = __props;
+    const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+    const hasCodeBlockSidePanel = computed(
+      () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
+    );
     const getParamItemsConfig = (codeId) => {
       if (!codeDsl.value || !codeId)
         return [];
@@ -3887,46 +3346,278 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       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 = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
-        createElementVNode("div", _hoisted_2$j, [
-          createVNode(_component_m_form_container, {
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+        createElementVNode("div", _hoisted_2$k, [
+          createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
             model: _ctx.model,
             size: _ctx.size,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$U, {
+          _ctx.model[_ctx.name] && hasCodeBlockSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
             key: 0,
-            class: "icon",
-            icon: !notEditable.value ? unref(Edit) : unref(View),
-            onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
-          }, null, 8, ["icon"])) : createCommentVNode("", true)
+            class: "m-fields-select-action-button",
+            size: _ctx.size,
+            onClick: _cache[0] || (_cache[0] = ($event) => editCode(_ctx.model[_ctx.name]))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$U, {
+                icon: !notEditable.value ? unref(Edit) : unref(View)
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["size"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$N, {
+        paramsConfig.value.length ? (openBlock(), 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"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
-          key: 1,
-          ref_key: "codeBlockEditor",
-          ref: codeBlockEditor,
-          disabled: notEditable.value,
-          content: unref(codeConfig),
-          onSubmit: unref(submitCodeBlockHandler)
-        }, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true)
+        }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
+  __name: "FloatingBox",
+  props: /* @__PURE__ */ mergeModels({
+    position: { default: () => ({ left: 0, top: 0 }) },
+    title: { default: "" },
+    beforeClose: {}
+  }, {
+    "width": { default: 0 },
+    "widthModifiers": {},
+    "height": { default: 0 },
+    "heightModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: ["update:width", "update:height", "update:visible"],
+  setup(__props, { expose: __expose }) {
+    const width = useModel(__props, "width");
+    const height = useModel(__props, "height");
+    const visible = useModel(__props, "visible");
+    const props = __props;
+    const target = ref();
+    const titleEl = ref();
+    const zIndex = useZIndex();
+    const curZIndex = ref(0);
+    const titleHeight = ref(0);
+    const bodyHeight = computed(() => {
+      if (height.value) {
+        return height.value - titleHeight.value;
+      }
+      if (target.value) {
+        return target.value.clientHeight - titleHeight.value;
+      }
+      return "auto";
+    });
+    const services = inject("services");
+    const frameworkWidth = computed(() => services?.uiService.get("frameworkRect").width || 0);
+    const style = 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;
+    };
+    watch(
+      visible,
+      async (visible2) => {
+        if (visible2) {
+          await 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
+      }
+    );
+    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();
+    };
+    provide("parentFloating", target);
+    __expose({
+      bodyHeight,
+      target,
+      titleEl
+    });
+    return (_ctx, _cache) => {
+      return visible.value ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: "body"
+      }, [
+        createElementVNode("div", {
+          ref_key: "target",
+          ref: target,
+          class: "m-editor-float-box",
+          style: normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
+          onMousedown: nextZIndex
+        }, [
+          createElementVNode("div", {
+            ref_key: "titleEl",
+            ref: titleEl,
+            class: "m-editor-float-box-title"
+          }, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createElementVNode("span", null, toDisplayString(_ctx.title), 1)
+            ]),
+            createElementVNode("div", null, [
+              createVNode(unref(TMagicButton), {
+                link: "",
+                size: "small",
+                onClick: closeHandler
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$U, { icon: unref(Close) }, null, 8, ["icon"])
+                ]),
+                _: 1
+              })
+            ])
+          ], 512),
+          createElementVNode("div", {
+            class: "m-editor-float-box-body",
+            style: normalizeStyle({ height: `${bodyHeight.value}px` })
+          }, [
+            renderSlot(_ctx.$slots, "body")
+          ], 4)
+        ], 36)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
+const useCodeBlockEdit = (codeBlockService) => {
+  const codeConfig = ref();
+  const codeId = ref();
+  const codeBlockEditor = ref();
+  const createCodeBlock = async () => {
+    if (!codeBlockService) {
+      tMagicMessage.error("新增代码块失败");
+      return;
+    }
+    codeConfig.value = {
+      name: "",
+      content: `({app, params}) => {
+  // place your code here
+}`,
+      params: []
+    };
+    codeId.value = await codeBlockService.getUniqueId();
+    await nextTick();
+    codeBlockEditor.value?.show();
+  };
+  const editCode = async (id) => {
+    const codeBlock = await codeBlockService?.getCodeContentById(id);
+    if (!codeBlock) {
+      tMagicMessage.error("获取代码块内容失败");
+      return;
+    }
+    let codeContent = codeBlock.content;
+    if (typeof codeContent !== "string") {
+      codeContent = codeContent.toString();
+    }
+    codeConfig.value = {
+      ...cloneDeep(codeBlock),
+      content: codeContent
+    };
+    codeId.value = id;
+    await 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);
+    tMagicMessage.success("代码块保存成功");
+    codeBlockEditor.value?.hide();
+  };
+  return {
+    codeId,
+    codeConfig,
+    codeBlockEditor,
+    createCodeBlock,
+    editCode,
+    deleteCode,
+    submitCodeBlockHandler
+  };
+};
+
 const useDataSourceMethod = () => {
   const codeConfig = ref();
   const codeBlockEditor = ref();
@@ -4021,6 +3712,7 @@ const state = reactive({
   propsPanelSize: "small",
   showAddPageButton: true,
   hideSlideBar: false,
+  sideBarItems: [],
   navMenuRect: {
     left: 0,
     top: 0,
@@ -4264,9 +3956,70 @@ const useFloatBox = (slideKeys) => {
   };
 };
 
-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__ */ defineComponent({
+const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+  globalThis.addEventListener("resize", windowResizeHandler);
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener("resize", windowResizeHandler);
+  });
+  return {
+    rect
+  };
+};
+
+const useEditorContentHeight = () => {
+  const services = inject("services");
+  const frameworkHeight = computed(() => services?.uiService.get("frameworkRect").height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get("navMenuRect").height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+  const height = ref(0);
+  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 = 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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFields"
   },
@@ -4521,12 +4274,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+      return openBlock(), createElementBlock("div", _hoisted_1$r, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$j, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -4551,7 +4304,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$P, {
+        createVNode(_sfc_main$N, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -4574,7 +4327,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["visible", "width", "height", "title", "position"]),
-        createVNode(_sfc_main$P, {
+        createVNode(_sfc_main$N, {
           visible: addFromJsonDialogVisible.value,
           "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
           width: width.value,
@@ -4599,115 +4352,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useDataSourceEdit = (dataSourceService) => {
-  const dialogTitle = ref("");
-  const editDialog = ref();
-  const dataSourceValues = ref({});
-  const editable = 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__ */ defineComponent({
-  ...{
-    name: "MEditorDataSourceConfigPanel"
-  },
-  __name: "DataSourceConfigPanel",
-  props: /* @__PURE__ */ mergeModels({
-    title: {},
-    values: {},
-    disabled: { type: Boolean }
-  }, {
-    "visible": { type: Boolean, ...{ default: false } },
-    "visibleModifiers": {},
-    "width": { default: 670 },
-    "widthModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:visible", "update:width"]),
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const boxVisible = useModel(__props, "visible");
-    const width = useModel(__props, "width");
-    const emit = __emit;
-    const services = inject("services");
-    const initValues = ref({});
-    const dataSourceConfig = ref([]);
-    const { height: editorHeight } = useEditorContentHeight();
-    const parentFloating = inject("parentFloating", ref(null));
-    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-    watchEffect(() => {
-      initValues.value = props.values;
-      dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
-    });
-    const submitHandler = (values) => {
-      emit("submit", values);
-    };
-    const errorHandler = (error) => {
-      tMagicMessage.error(error.message);
-    };
-    __expose({
-      show() {
-        calcBoxPosition();
-        boxVisible.value = true;
-      },
-      hide() {
-        boxVisible.value = false;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), 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: unref(editorHeight),
-        "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
-        title: _ctx.title,
-        position: unref(boxPosition)
-      }, {
-        body: withCtx(() => [
-          createVNode(unref(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__ */ defineComponent({
+const _hoisted_1$q = { class: "m-fields-data-source-field-select" };
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFieldSelect"
   },
@@ -4726,8 +4372,13 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const services = inject("services");
+    const eventBus = inject("eventBus");
     const emit = __emit;
     const props = __props;
+    const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+    const hasDataSourceSidePanel = computed(
+      () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+    );
     const selectedDataSourceId = computed(() => {
       const value = props.model[props.name];
       if (!Array.isArray(value) || !value.length) {
@@ -4736,33 +4387,6 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
     });
     const dataSources = 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 = computed(() => {
       const valueIsKey = props.config.value === "key";
       return {
@@ -4773,7 +4397,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           const options = dataSources.value?.map((ds) => ({
             label: ds.title || ds.id,
             value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-            children: getOptionChildren(ds.fields, props.config.dataSourceFieldType)
+            children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType)
           })) || [];
           return options.filter((option) => option.children.length);
         }
@@ -4819,13 +4443,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     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 openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
         (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-          style: { "width": "100%" },
           config: showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? cascaderConfig.value : _ctx.config.fieldConfig,
           model: _ctx.model,
           name: _ctx.name,
@@ -4837,14 +4460,16 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           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 ? (openBlock(), createBlock(unref(TMagicButton), {
+        (showDataSourceFieldSelect.value || !_ctx.config.fieldConfig) && selectedDataSourceId.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
           key: 0,
-          style: { "margin-left": "5px" },
+          class: "m-fields-select-action-button",
           size: _ctx.size,
-          onClick: _cache[0] || (_cache[0] = ($event) => unref(editHandler)(selectedDataSourceId.value))
+          onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectedDataSourceId.value))
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$U, { icon: unref(Edit) }, null, 8, ["icon"])
+            createVNode(_sfc_main$U, {
+              icon: !notEditable.value ? unref(Edit) : unref(View)
+            }, null, 8, ["icon"])
           ]),
           _: 1
         }, 8, ["size"])) : createCommentVNode("", true),
@@ -4859,24 +4484,16 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$U, { icon: unref(Coin) }, null, 8, ["icon"])
           ]),
           _: 1
-        }, 8, ["type", "size"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$K, {
-          ref_key: "editDialog",
-          ref: editDialog,
-          disabled: !unref(editable),
-          values: unref(dataSourceValues),
-          title: unref(dialogTitle),
-          onSubmit: unref(submitDataSourceHandler)
-        }, null, 8, ["disabled", "values", "title", "onSubmit"])
+        }, 8, ["type", "size"])) : 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__ */ 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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceInput"
   },
@@ -4983,138 +4600,435 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           }
         }
       }
-      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 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 ? (openBlock(), createBlock(resolveDynamicComponent(unref(getConfig$1)("components")?.autocomplete.component || "el-autocomplete"), 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)
+        },
+        unref(getConfig$1)("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: withCtx(() => [
+          createVNode(_sfc_main$U, { icon: unref(Coin) }, null, 8, ["icon"])
+        ]),
+        default: withCtx(({ item }) => [
+          createElementVNode("div", _hoisted_1$p, [
+            createElementVNode("div", null, toDisplayString(item.text), 1),
+            createElementVNode("span", _hoisted_2$i, toDisplayString(item.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(`tmagic-data-source-input-text el-input t-input t-size-${_ctx.size?.[0]} el-input--${_ctx.size}`),
+        onMouseup: mouseupHandler
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+        }, [
+          createElementVNode("div", _hoisted_3$8, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
+              return openBlock(), createElementBlock(Fragment, null, [
+                item.type === "text" ? (openBlock(), createElementBlock("span", {
+                  key: index,
+                  style: { "margin-right": "2px" }
+                }, toDisplayString(item.value), 1)) : createCommentVNode("", true),
+                item.type === "var" ? (openBlock(), createBlock(unref(TMagicTag), {
+                  key: index,
+                  size: _ctx.size
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["size"])) : createCommentVNode("", true)
+              ], 64);
+            }), 256)),
+            createVNode(_sfc_main$U, {
+              class: "tmagic-data-source-input-icon",
+              icon: unref(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__ */ defineComponent({
+  ...{
+    name: "MEditorCodeBlockEditor"
+  },
+  __name: "CodeBlockEditor",
+  props: /* @__PURE__ */ mergeModels({
+    content: {},
+    disabled: { type: Boolean },
+    isDataSource: { type: Boolean },
+    dataSourceType: {}
+  }, {
+    "width": { default: 670 },
+    "widthModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:width", "update:visible"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const width = useModel(__props, "width");
+    const boxVisible = useModel(__props, "visible");
+    const props = __props;
+    const emit = __emit;
+    const services = inject("services");
+    const { height: codeBlockEditorHeight } = useEditorContentHeight();
+    const difVisible = ref(false);
+    const { rect: windowRect } = useWindowRect();
+    const magicVsEditor = 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 = 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: inject("codeOptions", {}),
+        height: "500px",
+        onChange: (formState, code) => {
+          try {
+            getConfig("parseDSL")(code);
+            return code;
+          } catch (error) {
+            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) => {
+      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 nextTick();
-      let newSelectionStart = 0;
-      if (isDataSource) {
-        newSelectionStart = leftCurlyBracketIndex + suggestText.length;
-      } else {
-        newSelectionStart = dotIndex + suggestText.length + 1;
+    const formBox = ref();
+    const changedValue = ref();
+    const changeHandler = (values) => {
+      changedValue.value = values;
+    };
+    const beforeClose = (done) => {
+      if (!changedValue.value) {
+        done();
+        return;
       }
-      input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
-      changeHandler(state.value);
+      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 = inject("parentFloating", 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 ? (openBlock(), createBlock(resolveDynamicComponent(unref(getConfig$1)("components")?.autocomplete.component || "el-autocomplete"), 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)
-        },
-        unref(getConfig$1)("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: withCtx(() => [
-          createVNode(_sfc_main$U, { icon: unref(Coin) }, null, 8, ["icon"])
-        ]),
-        default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$n, [
-            createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$h, toDisplayString(item.value), 1)
-          ])
-        ]),
-        _: 1
-      }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
-        key: 1,
-        class: normalizeClass(`tmagic-data-source-input-text el-input t-input t-size-${_ctx.size?.[0]} el-input--${_ctx.size}`),
-        onMouseup: mouseupHandler
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
-        }, [
-          createElementVNode("div", _hoisted_3$7, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
-              return openBlock(), createElementBlock(Fragment, null, [
-                item.type === "text" ? (openBlock(), createElementBlock("span", {
-                  key: index,
-                  style: { "margin-right": "2px" }
-                }, toDisplayString(item.value), 1)) : createCommentVNode("", true),
-                item.type === "var" ? (openBlock(), createBlock(unref(TMagicTag), {
-                  key: index,
-                  size: _ctx.size
+      return openBlock(), createElementBlock(Fragment, null, [
+        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: unref(codeBlockEditorHeight),
+          "onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+          title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
+          position: unref(boxPosition),
+          "before-close": beforeClose
+        }, {
+          body: withCtx(() => [
+            createVNode(unref(MFormBox), {
+              class: "m-editor-code-block-editor",
+              ref_key: "formBox",
+              ref: formBox,
+              "label-width": "80px",
+              "close-on-press-escape": false,
+              title: _ctx.content.name,
+              config: functionConfig.value,
+              values: _ctx.content,
+              disabled: _ctx.disabled,
+              style: { "height": "100%" },
+              onChange: changeHandler,
+              onSubmit: submitForm,
+              onError: errorHandler,
+              onClosed: closedHandler
+            }, {
+              left: withCtx(() => [
+                !_ctx.disabled ? (openBlock(), createBlock(unref(TMagicButton), {
+                  key: 0,
+                  type: "primary",
+                  link: "",
+                  onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
                 }, {
                   default: withCtx(() => [
-                    createTextVNode(toDisplayString(item.value), 1)
+                    createTextVNode("查看修改")
                   ]),
-                  _: 2
-                }, 1032, ["size"])) : createCommentVNode("", true)
-              ], 64);
-            }), 256)),
-            createVNode(_sfc_main$U, {
-              class: "tmagic-data-source-input-icon",
-              icon: unref(Coin)
-            }, null, 8, ["icon"])
-          ])
-        ], 2)
-      ], 34));
+                  _: 1
+                })) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["title", "config", "values", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["visible", "width", "height", "title", "position"]),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(unref(TMagicDialog), {
+            title: "查看修改",
+            modelValue: difVisible.value,
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
+            fullscreen: ""
+          }, {
+            footer: withCtx(() => [
+              createElementVNode("span", _hoisted_4$7, [
+                createVNode(unref(TMagicButton), {
+                  size: "small",
+                  onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("取消")
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(TMagicButton), {
+                  size: "small",
+                  type: "primary",
+                  onClick: diffChange
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("确定")
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1$o, [
+                createElementVNode("div", _hoisted_2$h, [
+                  createVNode(unref(TMagicTag), {
+                    size: "small",
+                    type: "info"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("修改前")
+                    ]),
+                    _: 1
+                  })
+                ]),
+                createElementVNode("div", _hoisted_3$7, [
+                  createVNode(unref(TMagicTag), {
+                    size: "small",
+                    type: "success"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("修改后")
+                    ]),
+                    _: 1
+                  })
+                ])
+              ]),
+              difVisible.value ? (openBlock(), 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: normalizeStyle(`height: ${unref(windowRect).height - 150}px`)
+              }, null, 8, ["initValues", "modifiedValues", "style"])) : 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__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
   },
@@ -5184,7 +5098,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
@@ -5203,7 +5117,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$J, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -5218,9 +5132,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
   },
@@ -5240,9 +5154,13 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const mForm = inject("mForm");
     const services = inject("services");
+    const eventBus = inject("eventBus");
     const emit = __emit;
     const dataSourceService = services?.dataSourceService;
     const props = __props;
+    const hasDataSourceSidePanel = computed(
+      () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+    );
     const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
     const dataSources = computed(() => dataSourceService?.get("dataSources"));
     const isCustomMethod = computed(() => {
@@ -5297,36 +5215,38 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       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 = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createElementVNode("div", _hoisted_2$f, [
-          createVNode(_component_m_form_container, {
+          createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
             model: _ctx.model,
+            size: _ctx.size,
             onChange: onChangeHandler
-          }, null, 8, ["config", "model"]),
-          _ctx.model[_ctx.name] && isCustomMethod.value ? (openBlock(), createBlock(_sfc_main$U, {
+          }, null, 8, ["config", "model", "size"]),
+          _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
             key: 0,
-            class: "icon",
-            icon: !notEditable.value ? unref(Edit) : unref(View),
+            class: "m-fields-select-action-button",
+            size: _ctx.size,
             onClick: editCodeHandler
-          }, null, 8, ["icon"])) : createCommentVNode("", true)
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$U, {
+                icon: !notEditable.value ? unref(Edit) : unref(View)
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["size"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$N, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -5334,23 +5254,15 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           disabled: _ctx.disabled,
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
-          key: 1,
-          ref_key: "codeBlockEditor",
-          ref: codeBlockEditor,
-          disabled: notEditable.value,
-          content: unref(codeConfig),
-          onSubmit: submitCodeBlockHandler
-        }, null, 8, ["disabled", "content"])) : createCommentVNode("", true)
+        }, null, 8, ["model", "size", "disabled", "params-config"])) : 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__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
   },
@@ -5556,7 +5468,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
@@ -5575,7 +5487,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$P, {
+        createVNode(_sfc_main$N, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -5603,7 +5515,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = { class: "m-fields-data-source-select" };
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceSelect"
   },
@@ -5623,8 +5536,14 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const { dataSourceService } = inject("services") || {};
+    const mForm = inject("mForm");
+    const { dataSourceService, uiService } = inject("services") || {};
+    const eventBus = inject("eventBus");
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+    const hasDataSourceSidePanel = computed(
+      () => (uiService?.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+    );
     const selectConfig = computed(() => {
       const { type, dataSourceType, value, ...config } = props.config;
       const valueIsId = props.config.value === "id";
@@ -5645,17 +5564,42 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     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 openBlock(), createBlock(unref(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 openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createVNode(unref(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 ? (openBlock(), createBlock(unref(TMagicButton), {
+          key: 0,
+          class: "m-fields-select-action-button",
+          size: _ctx.size,
+          onClick: editHandler
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$U, {
+              icon: !notEditable.value ? unref(Edit) : unref(View)
+            }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["size"])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
@@ -5665,7 +5609,7 @@ const _hoisted_2$d = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsEventSelect"
   },
@@ -5691,24 +5635,41 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const eventsService = services?.eventsService;
     const codeBlockService = services?.codeBlockService;
     const eventNameConfig = 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: 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 };
@@ -5823,6 +5784,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       ]
     }));
     const actionsConfig = computed(() => ({
+      type: "panel",
       items: [
         {
           type: "group-list",
@@ -5867,8 +5829,6 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
-      const _component_m_form_container = resolveComponent("m-form-container");
-      const _component_m_form_panel = resolveComponent("m-form-panel");
       return openBlock(), createElementBlock("div", _hoisted_1$j, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
@@ -5893,7 +5853,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled"]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model[_ctx.name], (cardItem, index) => {
-            return openBlock(), createBlock(_component_m_form_panel, {
+            return openBlock(), createBlock(unref(MPanel), {
               key: index,
               disabled: _ctx.disabled,
               size: _ctx.size,
@@ -5903,7 +5863,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               onChange: onChangeHandler
             }, {
               header: withCtx(() => [
-                createVNode(_component_m_form_container, {
+                createVNode(unref(MContainer), {
                   class: "fullWidth",
                   config: eventNameConfig.value,
                   model: cardItem,
@@ -5939,7 +5899,7 @@ const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1"
 const _hoisted_4$6 = [
   _hoisted_2$c
 ];
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
@@ -5954,7 +5914,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
 const _hoisted_1$h = { class: "m-fields-key-value" };
 const _hoisted_2$b = { key: 0 };
 const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
   },
@@ -6078,7 +6038,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           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"])) : createCommentVNode("", true)
       ]);
@@ -6088,7 +6048,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$g = { class: "m-fields-page-fragment-select" };
 const _hoisted_2$a = { class: "page-fragment-select-container" };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
   },
@@ -6160,7 +6120,7 @@ const _hoisted_1$f = {
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsUISelect"
   },
@@ -6348,7 +6308,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -6370,7 +6330,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSplitView"
   },
@@ -6511,7 +6471,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$y, { onChange: changeLeft })
+          createVNode(_sfc_main$z, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -6520,7 +6480,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$y, { onChange: changeRight }),
+          createVNode(_sfc_main$z, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -6538,7 +6498,7 @@ const _hoisted_1$e = {
   class: "menu-item-text"
 };
 const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -6703,7 +6663,7 @@ const _hoisted_1$d = {
   key: 1,
   style: { "width": "21px" }
 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarAddButton"
   },
@@ -6743,7 +6703,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarScrollContainer"
   },
@@ -6872,7 +6832,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarSwitchTypeButton"
   },
@@ -6920,7 +6880,7 @@ const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
 const _hoisted_2$8 = ["onClick"];
 const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
 const _hoisted_4$5 = ["title"];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBar"
   },
@@ -6999,14 +6959,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$t, {
+        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$u, {
           key: 0,
           modelValue: active.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
         }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$u, { type: active.value }, {
+        createVNode(_sfc_main$v, { type: active.value }, {
           prepend: withCtx(() => [
-            createVNode(_sfc_main$v, { type: active.value }, null, 8, ["type"])
+            createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
           ]),
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
@@ -7039,7 +6999,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => [
                     createElementVNode("div", null, [
                       renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        createVNode(_sfc_main$w, {
+                        createVNode(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -7047,7 +7007,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        createVNode(_sfc_main$w, {
+                        createVNode(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -7074,7 +7034,7 @@ const _hoisted_1$b = { class: "m-editor-empty-panel" };
 const _hoisted_2$7 = { class: "m-editor-empty-content" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
 const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面片", -1);
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -7129,7 +7089,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -7213,7 +7173,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : withDirectives((openBlock(), createBlock(_sfc_main$x, {
+        ]) : withDirectives((openBlock(), createBlock(_sfc_main$y, {
           key: 1,
           "element-loading-text": "Runtime 加载中...",
           ref_key: "splitView",
@@ -7237,10 +7197,10 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
             ]),
             renderSlot(_ctx.$slots, "page-bar", {}, () => [
-              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                 "page-bar-title": withCtx(({ page: page2 }) => [
                   renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                 ]),
@@ -7275,7 +7235,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -7457,7 +7417,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$w, {
+              return openBlock(), createBlock(_sfc_main$x, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -7470,12 +7430,13 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$a = { class: "m-editor-props-panel" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
   __name: "PropsPanel",
   props: {
+    disabledShowSrc: { type: Boolean },
     extendState: { type: Function }
   },
   emits: ["mounted", "submit-error", "form-error"],
@@ -7536,7 +7497,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         createVNode(unref(MForm), {
           ref_key: "configForm",
           ref: configForm,
-          class: normalizeClass(`m-editor-props-panel ${propsPanelSize.value}`),
+          class: normalizeClass(propsPanelSize.value),
           "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
           size: propsPanelSize.value,
           "init-values": values.value,
@@ -7545,7 +7506,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           onChange: submit,
           onError: errorHandler
         }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"]),
-        createVNode(unref(TMagicButton), {
+        !_ctx.disabledShowSrc ? (openBlock(), createBlock(unref(TMagicButton), {
+          key: 0,
           class: "m-editor-props-panel-src-icon",
           circle: "",
           size: "large",
@@ -7557,9 +7519,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$U, { icon: unref(Document) }, null, 8, ["icon"])
           ]),
           _: 1
-        }, 8, ["type"]),
+        }, 8, ["type"])) : createCommentVNode("", true),
         showSrc.value ? (openBlock(), createBlock(_sfc_main$T, {
-          key: 0,
+          key: 1,
           height: `${unref(editorContentHeight)}px`,
           "init-values": values.value,
           options: unref(codeOptions),
@@ -7573,7 +7535,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -7631,7 +7593,7 @@ const _hoisted_4$3 = {
   key: 0,
   class: "m-editor-tree-node-children"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTreeNode"
   },
@@ -7752,7 +7714,7 @@ const _hoisted_1$8 = {
   key: 1,
   class: "m-editor-tree-empty"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
   },
@@ -7776,7 +7738,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         onDragover: handleDragOver
       }, [
         _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
-          return openBlock(), createBlock(_sfc_main$m, {
+          return openBlock(), createBlock(_sfc_main$n, {
             key: item.id,
             data: item,
             indent: _ctx.indent,
@@ -7873,7 +7835,7 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -7955,7 +7917,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$l, {
+      return openBlock(), createBlock(_sfc_main$m, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -8012,7 +7974,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$7 = { class: "search-wrapper" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -8021,6 +7983,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     customError: { type: Function }
   },
   setup(__props) {
+    const eventBus = inject("eventBus");
     const { codeBlockService } = inject("services") || {};
     const editable = computed(() => codeBlockService?.getEditStatus());
     const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
@@ -8028,13 +7991,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const filterTextChangeHandler = (val) => {
       codeBlockList.value?.filter(val);
     };
+    eventBus?.on("edit-code", (id) => {
+      editCode(id);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
               createElementVNode("div", _hoisted_1$7, [
-                createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+                createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -8050,7 +8016,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            createVNode(_sfc_main$k, {
+            createVNode(_sfc_main$l, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -8068,7 +8034,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$O, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$J, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -8081,6 +8047,113 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
+const useDataSourceEdit = (dataSourceService) => {
+  const dialogTitle = ref("");
+  const editDialog = ref();
+  const dataSourceValues = ref({});
+  const editable = 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__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceConfigPanel"
+  },
+  __name: "DataSourceConfigPanel",
+  props: /* @__PURE__ */ mergeModels({
+    title: {},
+    values: {},
+    disabled: { type: Boolean }
+  }, {
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {},
+    "width": { default: 670 },
+    "widthModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:visible", "update:width"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const boxVisible = useModel(__props, "visible");
+    const width = useModel(__props, "width");
+    const emit = __emit;
+    const services = inject("services");
+    const initValues = ref({});
+    const dataSourceConfig = ref([]);
+    const { height: editorHeight } = useEditorContentHeight();
+    const parentFloating = inject("parentFloating", ref(null));
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+    watchEffect(() => {
+      initValues.value = props.values;
+      dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
+    });
+    const submitHandler = (values) => {
+      emit("submit", values);
+    };
+    const errorHandler = (error) => {
+      tMagicMessage.error(error.message);
+    };
+    __expose({
+      show() {
+        calcBoxPosition();
+        boxVisible.value = true;
+      },
+      hide() {
+        boxVisible.value = false;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), 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: unref(editorHeight),
+        "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
+        title: _ctx.title,
+        position: unref(boxPosition)
+      }, {
+        body: withCtx(() => [
+          createVNode(unref(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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
@@ -8170,7 +8243,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$l, {
+      return openBlock(), createBlock(_sfc_main$m, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -8231,6 +8304,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   },
   __name: "DataSourceListPanel",
   setup(__props) {
+    const eventBus = inject("eventBus");
     const { dataSourceService } = inject("services") || {};
     const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
     const datasourceTypeList = computed(
@@ -8262,12 +8336,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const filterTextChangeHandler = (val) => {
       dataSourceList.value?.filter(val);
     };
+    eventBus?.on("edit-data-source", (id) => {
+      editHandler(id);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1$6, [
-              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               unref(editable) ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -8286,7 +8363,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", _hoisted_2$5, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$w, {
+                      return openBlock(), createBlock(_sfc_main$x, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -8312,7 +8389,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        createVNode(_sfc_main$K, {
+        createVNode(_sfc_main$j, {
           ref_key: "editDialog",
           ref: editDialog,
           disabled: !unref(editable),
@@ -8456,7 +8533,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$w, {
+                return openBlock(), createBlock(_sfc_main$x, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -8558,8 +8635,8 @@ const usePasteMenu = (menu) => ({
       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 = calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+      const initialTop = 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();
@@ -9232,8 +9309,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$n, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
+          createVNode(_sfc_main$o, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$m, {
             key: 0,
             tabindex: "-1",
             ref_key: "tree",
@@ -9359,7 +9436,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -9432,7 +9509,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   __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: {}
   },
@@ -9444,8 +9525,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
-        "component-list": {
-          $key: "component-list",
+        [SideItemKey.COMPONENT_LIST]: {
+          $key: SideItemKey.COMPONENT_LIST,
           type: "component",
           icon: Goods,
           text: "组件",
@@ -9464,16 +9545,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           component: _sfc_main$c,
           slots: {}
         },
-        "code-block": {
+        [SideItemKey.CODE_BLOCK]: {
           $key: "code-block",
           type: "component",
           icon: 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: Coin,
           text: "数据源",
@@ -9484,6 +9565,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return typeof data === "string" ? map[data] : data;
     };
     const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
+    watch(
+      sideBarItems,
+      (items) => {
+        services?.uiService.set("sideBarItems", items);
+      },
+      {
+        immediate: true
+      }
+    );
     watch(
       () => props.data.status,
       (status) => {
@@ -9522,7 +9612,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 class: 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: normalizeStyle(config.tabStyle || {}),
+                onClick: ($event) => activeTabName.value = config.text || config.$key || `${index}`,
                 onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
@@ -9532,7 +9623,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
                 config.text ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(config.text), 1)) : createCommentVNode("", true)
-              ], 42, _hoisted_3$1)), [
+              ], 46, _hoisted_3$1)), [
                 [vShow, !unref(floatBoxStates)[config.$key]?.status]
               ]);
             }), 128))
@@ -9542,7 +9633,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               class: "m-editor-sidebar-content",
               key: config.$key ?? index
             }, [
-              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+                key: 0,
+                ref_for: true
+              }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
                 config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                   name: "component-list-panel-header",
                   fn: withCtx(() => [
@@ -9653,14 +9747,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 } : void 0
               ]), 1040)) : createCommentVNode("", true)
             ])), [
-              [vShow, activeTabName.value === config.text]
+              [vShow, [config.text, config.$key, `${index}`].includes(activeTabName.value)]
             ]);
           }), 128))
         ])) : createCommentVNode("", true),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return openBlock(), createElementBlock(Fragment, null, [
-              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$P, {
+              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$N, {
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
@@ -9675,7 +9769,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               }, {
                 body: withCtx(() => [
                   createElementVNode("div", _hoisted_5$1, [
-                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
+                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+                      key: 0,
+                      ref_for: true
+                    }, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
                   ])
                 ]),
                 _: 2
@@ -10093,7 +10190,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$P, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$N, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -10103,7 +10200,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           position: menuPosition.value
         }, {
           body: withCtx(() => [
-            createVNode(_sfc_main$l, {
+            createVNode(_sfc_main$m, {
               class: "m-editor-node-list-menu magic-editor-layer-tree",
               data: nodeData.value,
               "node-status-map": unref(nodeStatusMap),
@@ -10496,17 +10593,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           position = "absolute";
           top = e.clientY - containerRect.top + scrollTop;
           left = e.clientX - containerRect.left + scrollLeft;
-          if (parentEl && doc) {
+          if (parentEl) {
             const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-            left = left - calcValueByFontsize(doc, parentLeft) * zoom.value;
-            top = top - 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: calcValueByFontsize(doc, top / zoom.value),
+          left: calcValueByFontsize(doc, left / zoom.value)
         };
         config.data.inputEvent = e;
         services?.editorService.add(config.data, parent);
@@ -11253,6 +11350,7 @@ const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  disabledShowSrc: false,
   componentGroupList: () => [],
   datasourceList: () => [],
   menu: () => ({ left: [], right: [] }),
@@ -11634,6 +11732,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabledMultiSelect: { type: Boolean },
     disabledPageFragment: { type: Boolean },
     disabledStageOverlay: { type: Boolean },
+    disabledShowSrc: { type: Boolean },
     render: { type: Function },
     updateDragEl: { type: Function },
     canSelect: { type: Function },
@@ -11683,15 +11782,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     provide("services", services);
     provide("codeOptions", props.codeOptions);
     provide("stageOptions", stageOptions);
+    provide("eventBus", new EventEmitter());
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$q, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+      return openBlock(), createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$p, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -11766,8 +11866,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$o, {
+            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))
@@ -11776,7 +11877,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "props-panel-header")
               ]),
               _: 3
-            }, 8, ["extend-state"])
+            }, 8, ["extend-state", "disabled-show-src"])
           ])
         ]),
         empty: withCtx(() => [
@@ -11814,22 +11915,22 @@ const index = {
     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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$O as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$K as DataSourceConfigPanel, _sfc_main$J as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$I as DataSourceInput, _sfc_main$G as DataSourceMethodSelect, _sfc_main$H as DataSourceMethods, _sfc_main$F as DataSourceMocks, _sfc_main$E as DataSourceSelect, DragType, _sfc_main$D as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$B as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$x as LayoutContainer, _sfc_main$A as PageFragmentSelect, _sfc_main$o as PropsPanel, _sfc_main$y as Resizer, _sfc_main$x as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$w as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };