@tmagic/editor 1.4.0-beta.1 → 1.4.0-beta.2

package/dist/tmagic-editor.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, watchEffect, nextTick, renderSlot, toDisplayString, createCommentVNode, Fragment, createTextVNode, toRaw, resolveDynamicComponent, mergeProps, renderList, createStaticVNode, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, mergeDefaults } from 'vue';
-import { FullScreen, Close, Edit, View, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, mergeModels, useModel, nextTick, renderSlot, toDisplayString, createCommentVNode, watchEffect, Fragment, isRef, createTextVNode, toRaw, resolveDynamicComponent, mergeProps, renderList, createStaticVNode, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, mergeDefaults } from 'vue';
+import { FullScreen, Close, Edit, View, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
 import { TMagicButton, TMagicCard, useZIndex, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
@@ -27,7 +27,7 @@ const getConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$u = {
+const _hoisted_1$t = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
@@ -188,7 +188,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -454,39 +454,45 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$t = { class: "m-editor-float-box-body" };
 const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
-  props: {
-    visible: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     position: { default: () => ({ left: 0, top: 0 }) },
-    rect: { default: () => ({ width: "auto", height: "auto" }) },
     title: { default: "" },
     beforeClose: {}
-  },
-  emits: ["update:visible"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  }, {
+    "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 emit = __emit;
     const target = ref();
-    const dragTarget = ref();
+    const titleEl = ref();
     const zIndex = useZIndex();
     const curZIndex = ref(zIndex.nextZIndex());
-    const rect = ref({
-      width: props.rect.width,
-      height: props.rect.height
-    });
-    watchEffect(() => {
-      rect.value = {
-        width: props.rect.width,
-        height: props.rect.height
-      };
+    const titleHeight = ref(0);
+    const bodyHeight = computed(() => {
+      if (height.value) {
+        return height.value - titleHeight.value;
+      }
+      if (target.value) {
+        return target.value.clientHeight - titleHeight.value;
+      }
+      return "auto";
     });
     const style = computed(() => ({
       left: `${props.position.left}px`,
       top: `${props.position.top}px`,
-      width: typeof rect.value.width === "string" ? rect.value.width : `${rect.value.width}px`,
-      height: typeof rect.value.height === "string" ? rect.value.height : `${rect.value.height}px`
+      width: width.value ? `${width.value}px` : "auto",
+      height: height.value ? `${height.value}px` : "auto"
     }));
     let moveable = null;
     const initMoveable = () => {
@@ -499,7 +505,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         keepRatio: false,
         origin: false,
         snappable: true,
-        dragTarget: dragTarget.value,
+        dragTarget: titleEl.value,
         dragTargetSelf: false,
         linePadding: 10,
         controlPadding: 10,
@@ -509,8 +515,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         e.target.style.transform = e.transform;
       });
       moveable.on("resize", (e) => {
-        rect.value.width = e.width;
-        rect.value.height = e.height;
+        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;
@@ -521,11 +527,20 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       moveable = null;
     };
     watch(
-      () => props.visible,
-      async (visible) => {
-        if (visible) {
+      visible,
+      async (visible2) => {
+        if (visible2) {
           await nextTick();
-          initMoveable();
+          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();
         }
@@ -539,7 +554,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     });
     const hide = (cancel) => {
       if (cancel !== false) {
-        emit("update:visible", false);
+        visible.value = false;
       }
     };
     const closeHandler = () => {
@@ -553,10 +568,12 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       curZIndex.value = zIndex.nextZIndex();
     };
     __expose({
-      target
+      bodyHeight,
+      target,
+      titleEl
     });
     return (_ctx, _cache) => {
-      return _ctx.visible ? (openBlock(), createBlock(Teleport, {
+      return visible.value ? (openBlock(), createBlock(Teleport, {
         key: 0,
         to: "body"
       }, [
@@ -568,8 +585,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           onMousedown: nextZIndex
         }, [
           createElementVNode("div", {
-            ref_key: "dragTarget",
-            ref: dragTarget,
+            ref_key: "titleEl",
+            ref: titleEl,
             class: "m-editor-float-box-title"
           }, [
             renderSlot(_ctx.$slots, "title", {}, () => [
@@ -584,15 +601,49 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
               }, null, 8, ["icon"])
             ])
           ], 512),
-          createElementVNode("div", _hoisted_1$t, [
+          createElementVNode("div", {
+            class: "m-editor-float-box-body",
+            style: normalizeStyle({ height: `${bodyHeight.value}px` })
+          }, [
             renderSlot(_ctx.$slots, "body")
-          ])
+          ], 4)
         ], 36)
       ])) : createCommentVNode("", true);
     };
   }
 });
 
+const useEditorContentHeight = () => {
+  const services = inject("services");
+  const frameworkHeight = computed(() => services?.uiService.get("frameworkRect").height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get("navMenuRect").height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+  const height = ref(0);
+  watchEffect(() => {
+    if (height.value > 0)
+      return;
+    height.value = editorContentHeight.value;
+  });
+  return {
+    height
+  };
+};
+
+const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+  globalThis.addEventListener("resize", windowResizeHandler);
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener("resize", windowResizeHandler);
+  });
+  return {
+    rect
+  };
+};
+
 const _hoisted_1$s = { style: { "display": "flex", "margin-bottom": "10px" } };
 const _hoisted_2$k = { style: { "flex": "1" } };
 const _hoisted_3$8 = { style: { "flex": "1" } };
@@ -602,40 +653,36 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     name: "MEditorCodeBlockEditor"
   },
   __name: "CodeBlockEditor",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     content: {},
     disabled: { type: Boolean },
     isDataSource: { type: Boolean },
     dataSourceType: {},
     slideType: {}
-  },
-  emits: ["submit"],
+  }, {
+    "width": { default: 670 },
+    "widthModifiers": {},
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:width", "update:visible"]),
   setup(__props, { expose: __expose, emit: __emit }) {
+    const width = useModel(__props, "width");
+    const boxVisible = useModel(__props, "visible");
     const props = __props;
     const emit = __emit;
     const services = inject("services");
+    const { height: codeBlockEditorHeight } = useEditorContentHeight();
     const difVisible = ref(false);
-    const height = ref(globalThis.innerHeight);
-    const windowReizehandler = () => {
-      height.value = globalThis.innerHeight;
-    };
-    globalThis.addEventListener("resize", windowReizehandler);
-    onBeforeUnmount(() => {
-      globalThis.removeEventListener("resize", windowReizehandler);
-    });
+    const { rect: windowRect } = useWindowRect();
     const magicVsEditor = ref();
     const diffChange = () => {
-      if (!magicVsEditor.value || !fomDrawer.value?.form) {
+      if (!magicVsEditor.value || !formBox.value?.form) {
         return;
       }
-      fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue();
+      formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
       difVisible.value = false;
     };
-    const columnWidth = computed(() => services?.uiService.get("columnWidth"));
-    const size = computed(
-      () => columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600
-    );
-    const codeEditorHeight = ref("600px");
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -718,7 +765,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         name: "content",
         type: "vs-code",
         options: inject("codeOptions", {}),
-        height: codeEditorHeight.value,
+        height: "500px",
         onChange: (formState, code) => {
           try {
             getConfig("parseDSL")(code);
@@ -731,26 +778,20 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       }
     ]);
     const submitForm = (values) => {
+      changedValue.value = void 0;
       emit("submit", values);
     };
     const errorHandler = (error) => {
       tMagicMessage.error(error.message);
     };
-    const fomDrawer = ref();
-    const openHandler = () => {
-      setTimeout(() => {
-        if (fomDrawer.value) {
-          const height2 = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
-          codeEditorHeight.value = `${height2 > 100 ? height2 : 600}px`;
-        }
-      });
-    };
+    const formBox = ref();
     const changedValue = ref();
     const changeHandler = (values) => {
       changedValue.value = values;
     };
     const beforeClose = (done) => {
       if (!changedValue.value) {
+        editVisible.value = false;
         done();
         return;
       }
@@ -761,22 +802,25 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         distinguishCancelAndClose: true
       }).then(() => {
         changedValue.value && submitForm(changedValue.value);
+        editVisible.value = false;
         done();
       }).catch((action) => {
+        if (action === "cancel") {
+          editVisible.value = false;
+        }
         done(action === "cancel");
       });
     };
     const closedHandler = () => {
       changedValue.value = void 0;
     };
-    const boxVisible = ref(false);
     const editVisible = ref(false);
     const floatingBoxBody = ref();
     const boxPosition = computed(() => {
-      const columnWidth2 = services?.uiService?.get("columnWidth");
+      const columnWidth = services?.uiService?.get("columnWidth");
       const navMenuRect = services?.uiService?.get("navMenuRect");
       return {
-        left: columnWidth2?.left ?? 0,
+        left: columnWidth?.left ?? 0,
         top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
       };
     });
@@ -784,13 +828,16 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       async show() {
         if (props.slideType !== "box") {
           boxVisible.value = true;
+          await nextTick();
         }
-        await nextTick();
         editVisible.value = true;
-        fomDrawer.value?.show();
       },
-      hide() {
-        fomDrawer.value?.hide();
+      async hide() {
+        editVisible.value = false;
+        if (props.slideType !== "box") {
+          await nextTick();
+          boxVisible.value = false;
+        }
       }
     });
     return (_ctx, _cache) => {
@@ -798,18 +845,23 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         createVNode(_sfc_main$Q, {
           visible: boxVisible.value,
           "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
-          title: "代码编辑",
+          width: width.value,
+          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
+          height: unref(codeBlockEditorHeight),
+          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+          title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
           position: boxPosition.value,
           "before-close": beforeClose
         }, {
           body: withCtx(() => [
             createElementVNode("div", {
               ref_key: "floatingBoxBody",
-              ref: floatingBoxBody
+              ref: floatingBoxBody,
+              style: { "height": "100%" }
             }, null, 512)
           ]),
           _: 1
-        }, 8, ["visible", "position"]),
+        }, 8, ["visible", "width", "height", "title", "position"]),
         editVisible.value ? (openBlock(), createBlock(Teleport, {
           key: 0,
           to: floatingBoxBody.value,
@@ -817,39 +869,39 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         }, [
           createVNode(unref(MFormBox), {
             class: "m-editor-code-block-editor",
-            ref_key: "fomDrawer",
-            ref: fomDrawer,
+            ref_key: "formBox",
+            ref: formBox,
             "label-width": "80px",
             "close-on-press-escape": false,
             title: _ctx.content.name,
-            width: size.value,
             config: functionConfig.value,
             values: _ctx.content,
             disabled: _ctx.disabled,
+            height: floatingBoxBody.value?.clientHeight,
             onChange: changeHandler,
             onSubmit: submitForm,
             onError: errorHandler,
-            onOpen: openHandler,
             onClosed: closedHandler
           }, {
             left: withCtx(() => [
-              createVNode(unref(TMagicButton), {
+              !_ctx.disabled ? (openBlock(), createBlock(unref(TMagicButton), {
+                key: 0,
                 type: "primary",
                 link: "",
-                onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = true)
+                onClick: _cache[3] || (_cache[3] = ($event) => difVisible.value = true)
               }, {
                 default: withCtx(() => [
                   createTextVNode("查看修改")
                 ]),
                 _: 1
-              })
+              })) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["title", "width", "config", "values", "disabled"])
+          }, 8, ["title", "config", "values", "disabled", "height"])
         ], 8, ["to", "disabled"])) : createCommentVNode("", true),
         createVNode(unref(TMagicDialog), {
           modelValue: difVisible.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => difVisible.value = $event),
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
           title: "查看修改",
           fullscreen: ""
         }, {
@@ -857,7 +909,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             createElementVNode("span", _hoisted_4$7, [
               createVNode(unref(TMagicButton), {
                 size: "small",
-                onClick: _cache[2] || (_cache[2] = ($event) => difVisible.value = false)
+                onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
               }, {
                 default: withCtx(() => [
                   createTextVNode("取消")
@@ -908,8 +960,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               type: "diff",
               language: "json",
               initValues: _ctx.content.content,
-              modifiedValues: fomDrawer.value?.form?.values.content,
-              style: normalizeStyle(`height: ${height.value - 200}px`)
+              modifiedValues: formBox.value?.form?.values.content,
+              style: normalizeStyle(`height: ${unref(windowRect).height - 150}px`)
             }, null, 8, ["initValues", "modifiedValues", "style"])) : createCommentVNode("", true)
           ]),
           _: 1
@@ -3693,7 +3745,7 @@ const useCodeBlockEdit = (codeBlockService) => {
       return;
     }
     codeConfig.value = {
-      name: "代码块",
+      name: "",
       content: `({app, params}) => {
   // place your code here
 }`,
@@ -5840,6 +5892,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   },
   __name: "SplitView",
   props: {
+    width: {},
     left: {},
     right: {},
     minLeft: { default: 46 },
@@ -5856,17 +5909,19 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const el = ref();
     const hasLeft = computed(() => typeof props.left !== "undefined");
     const hasRight = computed(() => typeof props.right !== "undefined");
-    const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
+    const center = ref(0);
+    let clientWidth = 0;
+    const getCenterWidth = (l = 0, r = 0) => {
       let right = r > 0 ? r : 0;
       let left = l > 0 ? l : 0;
-      let center2 = clientWidth2 - left - right;
+      let center2 = clientWidth - left - right;
       if (center2 < props.minCenter) {
         center2 = props.minCenter;
         if (right > center2 + props.minRight) {
-          right = clientWidth2 - left - center2;
+          right = clientWidth - left - center2;
         } else {
           right = props.minRight;
-          left = clientWidth2 - right - center2;
+          left = clientWidth - right - center2;
         }
       }
       return {
@@ -5875,36 +5930,43 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         right
       };
     };
-    let clientWidth = 0;
-    const resizerObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        clientWidth = contentRect.width;
-        let left = props.left || 0;
-        let right = props.right || 0;
-        if (left > clientWidth) {
-          left = clientWidth / 3;
-        }
-        if (right > clientWidth) {
-          right = clientWidth / 3;
-        }
-        const columnWidth = getCenterWidth(clientWidth, left, right);
-        center.value = columnWidth.center;
-        emit("change", {
-          left: columnWidth.left,
-          center: center.value,
-          right: columnWidth.right
-        });
+    const widthChange = (width) => {
+      if (width <= 0) {
+        return;
       }
-    });
-    onMounted(() => {
-      if (el.value) {
-        resizerObserver.observe(el.value);
+      clientWidth = width;
+      let left = props.left || 0;
+      let right = props.right || 0;
+      if (left > clientWidth) {
+        left = clientWidth / 3;
       }
-    });
-    onBeforeUnmount(() => {
-      resizerObserver.disconnect();
-    });
-    const center = ref(0);
+      if (right > clientWidth) {
+        right = clientWidth / 3;
+      }
+      const columnWidth = getCenterWidth(left, right);
+      center.value = columnWidth.center;
+      emit("change", columnWidth);
+    };
+    if (typeof props.width !== "number") {
+      const resizerObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          widthChange(contentRect.width);
+        }
+      });
+      onMounted(() => {
+        if (el.value) {
+          resizerObserver.observe(el.value);
+        }
+      });
+      onBeforeUnmount(() => {
+        resizerObserver.disconnect();
+      });
+    } else {
+      watchEffect(() => {
+        if (typeof props.width === "number")
+          widthChange(props.width);
+      });
+    }
     const changeLeft = ({ deltaX }) => {
       if (typeof props.left === "undefined")
         return;
@@ -5913,7 +5975,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       if (clientWidth - left - (props.right || 0) <= 0) {
         left = props.left;
       }
-      const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+      const columnWidth = getCenterWidth(left, props.right || 0);
       center.value = columnWidth.center;
       emit("change", {
         left: columnWidth.left,
@@ -5929,7 +5991,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       if (clientWidth - (props.left || 0) - right <= 0) {
         right = props.right;
       }
-      const columnWidth = getCenterWidth(clientWidth, props.left, right);
+      const columnWidth = getCenterWidth(props.left, right);
       center.value = columnWidth.center;
       emit("change", {
         left: columnWidth.left,
@@ -5939,7 +6001,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
     __expose({
       updateWidth() {
-        const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+        clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+        const columnWidth = getCenterWidth(props.left, props.right);
         emit("change", {
           left: columnWidth.left,
           center: center.value,
@@ -6598,36 +6661,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const stageLoading = computed(() => editorService?.get("stageLoading") || false);
     const showSrc = computed(() => uiService?.get("showSrc"));
     const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-    const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-    const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
     const columnWidth = ref({
-      left: leftColumnWidthCacheData,
+      left: getLeftColumnWidthCacheData(),
       center: 0,
-      right: RightColumnWidthCacheData
+      right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+    });
+    watch(pageLength, () => {
+      splitView.value?.updateWidth();
     });
-    watch(
-      [pageLength, splitView],
-      () => {
-        splitView.value?.updateWidth();
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => columnWidth.value.right,
-      (right) => {
-        if (typeof right === "undefined")
-          return;
-        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-      }
-    );
-    watch(
-      () => columnWidth.value.left,
-      (left) => {
-        globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-      }
-    );
     watch(
       () => uiService?.get("hideSlideBar"),
       (hideSlideBar) => {
@@ -6635,11 +6676,29 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       }
     );
     const columnWidthChange = (columnW) => {
-      columnWidth.value.left = columnW.left;
-      columnWidth.value.center = columnW.center;
-      columnWidth.value.right = columnW.right;
+      columnWidth.value = columnW;
+      globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+      globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
       uiService?.set("columnWidth", columnW);
     };
+    const frameworkRect = computed(() => uiService?.get("frameworkRect"));
+    const resizerObserver = new ResizeObserver((entries) => {
+      const { contentRect } = entries[0];
+      uiService?.set("frameworkRect", {
+        width: contentRect.width,
+        height: contentRect.height,
+        left: contentRect.left,
+        top: contentRect.top
+      });
+    });
+    onMounted(() => {
+      if (content.value) {
+        resizerObserver.observe(content.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      resizerObserver.disconnect();
+    });
     const saveCode = (value) => {
       try {
         const parseDSL = getConfig("parseDSL");
@@ -6682,6 +6741,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           "min-left": 65,
           "min-right": 20,
           "min-center": 100,
+          width: frameworkRect.value?.width || 0,
           onChange: columnWidthChange
         }, createSlots({
           left: withCtx(() => [
@@ -6717,7 +6777,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["left", "right"])), [
+        ]), 1032, ["left", "right", "width"])), [
           [_directive_loading, stageLoading.value]
         ]),
         renderSlot(_ctx.$slots, "content-after"),
@@ -6932,7 +6992,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   },
   emits: ["mounted", "submit-error", "form-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const codeOptions = inject("codeOptions", {});
     const emit = __emit;
+    const showSrc = ref(false);
     const internalInstance = getCurrentInstance();
     const values = ref({});
     const configForm = ref();
@@ -6942,6 +7004,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const nodes = computed(() => services?.editorService.get("nodes") || []);
     const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const stage = computed(() => services?.editorService.get("stage"));
+    const { height: editorContentHeight } = useEditorContentHeight();
     const init = async () => {
       if (!node.value) {
         curFormConfig.value = [];
@@ -6975,6 +7038,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const errorHandler = (e) => {
       emit("form-error", e);
     };
+    const saveCode = (values2) => {
+      services?.editorService.update(values2);
+    };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$a, [
@@ -6990,7 +7056,24 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           "extend-state": _ctx.extendState,
           onChange: submit,
           onError: errorHandler
-        }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"])
+        }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"]),
+        createVNode(unref(TMagicButton), {
+          class: "m-editor-props-panel-src-icon",
+          circle: "",
+          size: "large",
+          title: "源码",
+          icon: unref(Document),
+          type: showSrc.value ? "primary" : "",
+          onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
+        }, null, 8, ["icon", "type"]),
+        showSrc.value ? (openBlock(), createBlock(_sfc_main$U, {
+          key: 0,
+          height: `${unref(editorContentHeight)}px`,
+          "init-values": values.value,
+          options: unref(codeOptions),
+          parse: true,
+          onSave: saveCode
+        }, null, 8, ["height", "init-values", "options"])) : createCommentVNode("", true)
       ], 512)), [
         [vShow, nodes.value.length === 1]
       ]);
@@ -7015,33 +7098,33 @@ const useFloatBox = (slideKeys) => {
   const showingBoxKeys = computed(
     () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
   );
-  const isDraging = ref(false);
-  const dragstartHandler = () => isDraging.value = true;
+  const isDragging = ref(false);
+  const dragstartHandler = () => isDragging.value = true;
   const dragendHandler = (key, e) => {
     floatBoxStates.value[key] = {
       left: e.clientX,
       top: e.clientY,
       status: true
     };
-    isDraging.value = false;
+    isDragging.value = false;
   };
   document.body.addEventListener("dragover", (e) => {
-    if (!isDraging.value)
+    if (!isDragging.value)
       return;
     e.preventDefault();
   });
   watch(
     () => slideKeys.value,
-    () => {
-      for (const key in slideKeys.value) {
+    (slideKeys2) => {
+      slideKeys2.forEach((key) => {
         if (floatBoxStates.value[key])
-          continue;
+          return;
         floatBoxStates.value[key] = {
           status: false,
           top: 0,
           left: 0
         };
-      }
+      });
     },
     {
       deep: true,
@@ -9002,6 +9085,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
+    const columnLeftWitch = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -9230,6 +9314,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
+                width: columnLeftWitch.value,
+                height: 600,
                 title: config.text,
                 position: {
                   left: unref(floatBoxStates)[config.$key].left,
@@ -9242,7 +9328,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 2
-              }, 1032, ["visible", "onUpdate:visible", "title", "position"])) : createCommentVNode("", true)
+              }, 1032, ["visible", "onUpdate:visible", "width", "title", "position"])) : createCommentVNode("", true)
             ], 64);
           }), 256))
         ]))
@@ -9601,6 +9687,12 @@ const state = reactive({
     top: 0,
     width: 0,
     height: 0
+  },
+  frameworkRect: {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0
   }
 });
 const canUsePluginMethods$2 = {
@@ -10975,7 +11067,7 @@ class StageOverlay extends BaseService {
       subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl);
+      subStage?.select(contentEl.id);
     }
   }
   updateHandler = () => {
@@ -11594,4 +11686,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };