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

package/dist/tmagic-editor.umd.cjs

@@ -32,7 +32,7 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$u = {
+  const _hoisted_1$t = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
   const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
@@ -193,7 +193,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -459,39 +459,45 @@
     }
   });
 
-  const _hoisted_1$t = { class: "m-editor-float-box-body" };
   const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
-    props: {
-      visible: { type: Boolean, default: false },
+    props: /* @__PURE__ */ vue.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 = vue.useModel(__props, "width");
+      const height = vue.useModel(__props, "height");
+      const visible = vue.useModel(__props, "visible");
       const props = __props;
-      const emit = __emit;
       const target = vue.ref();
-      const dragTarget = vue.ref();
+      const titleEl = vue.ref();
       const zIndex = design.useZIndex();
       const curZIndex = vue.ref(zIndex.nextZIndex());
-      const rect = vue.ref({
-        width: props.rect.width,
-        height: props.rect.height
-      });
-      vue.watchEffect(() => {
-        rect.value = {
-          width: props.rect.width,
-          height: props.rect.height
-        };
+      const titleHeight = vue.ref(0);
+      const bodyHeight = vue.computed(() => {
+        if (height.value) {
+          return height.value - titleHeight.value;
+        }
+        if (target.value) {
+          return target.value.clientHeight - titleHeight.value;
+        }
+        return "auto";
       });
       const style = vue.computed(() => ({
         left: `${props.position.left}px`,
         top: `${props.position.top}px`,
-        width: typeof rect.value.width === "string" ? rect.value.width : `${rect.value.width}px`,
-        height: typeof rect.value.height === "string" ? rect.value.height : `${rect.value.height}px`
+        width: width.value ? `${width.value}px` : "auto",
+        height: height.value ? `${height.value}px` : "auto"
       }));
       let moveable = null;
       const initMoveable = () => {
@@ -504,7 +510,7 @@
           keepRatio: false,
           origin: false,
           snappable: true,
-          dragTarget: dragTarget.value,
+          dragTarget: titleEl.value,
           dragTargetSelf: false,
           linePadding: 10,
           controlPadding: 10,
@@ -514,8 +520,8 @@
           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;
@@ -526,11 +532,20 @@
         moveable = null;
       };
       vue.watch(
-        () => props.visible,
-        async (visible) => {
-          if (visible) {
+        visible,
+        async (visible2) => {
+          if (visible2) {
             await vue.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();
           }
@@ -544,7 +559,7 @@
       });
       const hide = (cancel) => {
         if (cancel !== false) {
-          emit("update:visible", false);
+          visible.value = false;
         }
       };
       const closeHandler = () => {
@@ -558,10 +573,12 @@
         curZIndex.value = zIndex.nextZIndex();
       };
       __expose({
-        target
+        bodyHeight,
+        target,
+        titleEl
       });
       return (_ctx, _cache) => {
-        return _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+        return visible.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
           key: 0,
           to: "body"
         }, [
@@ -573,8 +590,8 @@
             onMousedown: nextZIndex
           }, [
             vue.createElementVNode("div", {
-              ref_key: "dragTarget",
-              ref: dragTarget,
+              ref_key: "titleEl",
+              ref: titleEl,
               class: "m-editor-float-box-title"
             }, [
               vue.renderSlot(_ctx.$slots, "title", {}, () => [
@@ -589,15 +606,49 @@
                 }, null, 8, ["icon"])
               ])
             ], 512),
-            vue.createElementVNode("div", _hoisted_1$t, [
+            vue.createElementVNode("div", {
+              class: "m-editor-float-box-body",
+              style: vue.normalizeStyle({ height: `${bodyHeight.value}px` })
+            }, [
               vue.renderSlot(_ctx.$slots, "body")
-            ])
+            ], 4)
           ], 36)
         ])) : vue.createCommentVNode("", true);
       };
     }
   });
 
+  const useEditorContentHeight = () => {
+    const services = vue.inject("services");
+    const frameworkHeight = vue.computed(() => services?.uiService.get("frameworkRect").height || 0);
+    const navMenuHeight = vue.computed(() => services?.uiService.get("navMenuRect").height || 0);
+    const editorContentHeight = vue.computed(() => frameworkHeight.value - navMenuHeight.value);
+    const height = vue.ref(0);
+    vue.watchEffect(() => {
+      if (height.value > 0)
+        return;
+      height.value = editorContentHeight.value;
+    });
+    return {
+      height
+    };
+  };
+
+  const useWindowRect = () => {
+    const rect = vue.reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+    const windowResizeHandler = () => {
+      rect.width = globalThis.innerWidth;
+      rect.height = globalThis.innerHeight;
+    };
+    globalThis.addEventListener("resize", windowResizeHandler);
+    vue.onBeforeUnmount(() => {
+      globalThis.removeEventListener("resize", windowResizeHandler);
+    });
+    return {
+      rect
+    };
+  };
+
   const _hoisted_1$s = { style: { "display": "flex", "margin-bottom": "10px" } };
   const _hoisted_2$k = { style: { "flex": "1" } };
   const _hoisted_3$8 = { style: { "flex": "1" } };
@@ -607,40 +658,36 @@
       name: "MEditorCodeBlockEditor"
     },
     __name: "CodeBlockEditor",
-    props: {
+    props: /* @__PURE__ */ vue.mergeModels({
       content: {},
       disabled: { type: Boolean },
       isDataSource: { type: Boolean },
       dataSourceType: {},
       slideType: {}
-    },
-    emits: ["submit"],
+    }, {
+      "width": { default: 670 },
+      "widthModifiers": {},
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:width", "update:visible"]),
     setup(__props, { expose: __expose, emit: __emit }) {
+      const width = vue.useModel(__props, "width");
+      const boxVisible = vue.useModel(__props, "visible");
       const props = __props;
       const emit = __emit;
       const services = vue.inject("services");
+      const { height: codeBlockEditorHeight } = useEditorContentHeight();
       const difVisible = vue.ref(false);
-      const height = vue.ref(globalThis.innerHeight);
-      const windowReizehandler = () => {
-        height.value = globalThis.innerHeight;
-      };
-      globalThis.addEventListener("resize", windowReizehandler);
-      vue.onBeforeUnmount(() => {
-        globalThis.removeEventListener("resize", windowReizehandler);
-      });
+      const { rect: windowRect } = useWindowRect();
       const magicVsEditor = vue.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 = vue.computed(() => services?.uiService.get("columnWidth"));
-      const size = vue.computed(
-        () => columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600
-      );
-      const codeEditorHeight = vue.ref("600px");
       const defaultParamColConfig = {
         type: "row",
         label: "参数类型",
@@ -723,7 +770,7 @@
           name: "content",
           type: "vs-code",
           options: vue.inject("codeOptions", {}),
-          height: codeEditorHeight.value,
+          height: "500px",
           onChange: (formState, code) => {
             try {
               getConfig("parseDSL")(code);
@@ -736,26 +783,20 @@
         }
       ]);
       const submitForm = (values) => {
+        changedValue.value = void 0;
         emit("submit", values);
       };
       const errorHandler = (error) => {
         design.tMagicMessage.error(error.message);
       };
-      const fomDrawer = vue.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 = vue.ref();
       const changedValue = vue.ref();
       const changeHandler = (values) => {
         changedValue.value = values;
       };
       const beforeClose = (done) => {
         if (!changedValue.value) {
+          editVisible.value = false;
           done();
           return;
         }
@@ -766,22 +807,25 @@
           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 = vue.ref(false);
       const editVisible = vue.ref(false);
       const floatingBoxBody = vue.ref();
       const boxPosition = vue.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)
         };
       });
@@ -789,13 +833,16 @@
         async show() {
           if (props.slideType !== "box") {
             boxVisible.value = true;
+            await vue.nextTick();
           }
-          await vue.nextTick();
           editVisible.value = true;
-          fomDrawer.value?.show();
         },
-        hide() {
-          fomDrawer.value?.hide();
+        async hide() {
+          editVisible.value = false;
+          if (props.slideType !== "box") {
+            await vue.nextTick();
+            boxVisible.value = false;
+          }
         }
       });
       return (_ctx, _cache) => {
@@ -803,18 +850,23 @@
           vue.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: vue.unref(codeBlockEditorHeight),
+            "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+            title: _ctx.content.name ? `${_ctx.disabled ? "查看" : "编辑"}${_ctx.content.name}` : "新增代码",
             position: boxPosition.value,
             "before-close": beforeClose
           }, {
             body: vue.withCtx(() => [
               vue.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 ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
             key: 0,
             to: floatingBoxBody.value,
@@ -822,39 +874,39 @@
           }, [
             vue.createVNode(vue.unref(form.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: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicButton), {
+                !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
                     vue.createTextVNode("查看修改")
                   ]),
                   _: 1
-                })
+                })) : vue.createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["title", "width", "config", "values", "disabled"])
+            }, 8, ["title", "config", "values", "disabled", "height"])
           ], 8, ["to", "disabled"])) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(design.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: ""
           }, {
@@ -862,7 +914,7 @@
               vue.createElementVNode("span", _hoisted_4$7, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
-                  onClick: _cache[2] || (_cache[2] = ($event) => difVisible.value = false)
+                  onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
                 }, {
                   default: vue.withCtx(() => [
                     vue.createTextVNode("取消")
@@ -913,8 +965,8 @@
                 type: "diff",
                 language: "json",
                 initValues: _ctx.content.content,
-                modifiedValues: fomDrawer.value?.form?.values.content,
-                style: vue.normalizeStyle(`height: ${height.value - 200}px`)
+                modifiedValues: formBox.value?.form?.values.content,
+                style: vue.normalizeStyle(`height: ${vue.unref(windowRect).height - 150}px`)
               }, null, 8, ["initValues", "modifiedValues", "style"])) : vue.createCommentVNode("", true)
             ]),
             _: 1
@@ -3698,7 +3750,7 @@
         return;
       }
       codeConfig.value = {
-        name: "代码块",
+        name: "",
         content: `({app, params}) => {
   // place your code here
 }`,
@@ -5845,6 +5897,7 @@
     },
     __name: "SplitView",
     props: {
+      width: {},
       left: {},
       right: {},
       minLeft: { default: 46 },
@@ -5861,17 +5914,19 @@
       const el = vue.ref();
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
       const hasRight = vue.computed(() => typeof props.right !== "undefined");
-      const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
+      const center = vue.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 {
@@ -5880,36 +5935,43 @@
           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;
         }
-      });
-      vue.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;
         }
-      });
-      vue.onBeforeUnmount(() => {
-        resizerObserver.disconnect();
-      });
-      const center = vue.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);
+          }
+        });
+        vue.onMounted(() => {
+          if (el.value) {
+            resizerObserver.observe(el.value);
+          }
+        });
+        vue.onBeforeUnmount(() => {
+          resizerObserver.disconnect();
+        });
+      } else {
+        vue.watchEffect(() => {
+          if (typeof props.width === "number")
+            widthChange(props.width);
+        });
+      }
       const changeLeft = ({ deltaX }) => {
         if (typeof props.left === "undefined")
           return;
@@ -5918,7 +5980,7 @@
         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,
@@ -5934,7 +5996,7 @@
         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,
@@ -5944,7 +6006,8 @@
       };
       __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,
@@ -6603,36 +6666,14 @@
       const stageLoading = vue.computed(() => editorService?.get("stageLoading") || false);
       const showSrc = vue.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 = vue.ref({
-        left: leftColumnWidthCacheData,
+        left: getLeftColumnWidthCacheData(),
         center: 0,
-        right: RightColumnWidthCacheData
+        right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+      });
+      vue.watch(pageLength, () => {
+        splitView.value?.updateWidth();
       });
-      vue.watch(
-        [pageLength, splitView],
-        () => {
-          splitView.value?.updateWidth();
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.watch(
-        () => columnWidth.value.right,
-        (right) => {
-          if (typeof right === "undefined")
-            return;
-          globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-        }
-      );
-      vue.watch(
-        () => columnWidth.value.left,
-        (left) => {
-          globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-        }
-      );
       vue.watch(
         () => uiService?.get("hideSlideBar"),
         (hideSlideBar) => {
@@ -6640,11 +6681,29 @@
         }
       );
       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 = vue.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
+        });
+      });
+      vue.onMounted(() => {
+        if (content.value) {
+          resizerObserver.observe(content.value);
+        }
+      });
+      vue.onBeforeUnmount(() => {
+        resizerObserver.disconnect();
+      });
       const saveCode = (value) => {
         try {
           const parseDSL = getConfig("parseDSL");
@@ -6687,6 +6746,7 @@
             "min-left": 65,
             "min-right": 20,
             "min-center": 100,
+            width: frameworkRect.value?.width || 0,
             onChange: columnWidthChange
           }, vue.createSlots({
             left: vue.withCtx(() => [
@@ -6722,7 +6782,7 @@
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["left", "right"])), [
+          ]), 1032, ["left", "right", "width"])), [
             [_directive_loading, stageLoading.value]
           ]),
           vue.renderSlot(_ctx.$slots, "content-after"),
@@ -6937,7 +6997,9 @@
     },
     emits: ["mounted", "submit-error", "form-error"],
     setup(__props, { expose: __expose, emit: __emit }) {
+      const codeOptions = vue.inject("codeOptions", {});
       const emit = __emit;
+      const showSrc = vue.ref(false);
       const internalInstance = vue.getCurrentInstance();
       const values = vue.ref({});
       const configForm = vue.ref();
@@ -6947,6 +7009,7 @@
       const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const stage = vue.computed(() => services?.editorService.get("stage"));
+      const { height: editorContentHeight } = useEditorContentHeight();
       const init = async () => {
         if (!node.value) {
           curFormConfig.value = [];
@@ -6980,6 +7043,9 @@
       const errorHandler = (e) => {
         emit("form-error", e);
       };
+      const saveCode = (values2) => {
+        services?.editorService.update(values2);
+      };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
@@ -6995,7 +7061,24 @@
             "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"]),
+          vue.createVNode(vue.unref(design.TMagicButton), {
+            class: "m-editor-props-panel-src-icon",
+            circle: "",
+            size: "large",
+            title: "源码",
+            icon: vue.unref(iconsVue.Document),
+            type: showSrc.value ? "primary" : "",
+            onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
+          }, null, 8, ["icon", "type"]),
+          showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
+            key: 0,
+            height: `${vue.unref(editorContentHeight)}px`,
+            "init-values": values.value,
+            options: vue.unref(codeOptions),
+            parse: true,
+            onSave: saveCode
+          }, null, 8, ["height", "init-values", "options"])) : vue.createCommentVNode("", true)
         ], 512)), [
           [vue.vShow, nodes.value.length === 1]
         ]);
@@ -7020,33 +7103,33 @@
     const showingBoxKeys = vue.computed(
       () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
     );
-    const isDraging = vue.ref(false);
-    const dragstartHandler = () => isDraging.value = true;
+    const isDragging = vue.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();
     });
     vue.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,
@@ -9007,6 +9090,7 @@
     setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
+      const columnLeftWitch = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -9235,6 +9319,8 @@
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
+                  width: columnLeftWitch.value,
+                  height: 600,
                   title: config.text,
                   position: {
                     left: vue.unref(floatBoxStates)[config.$key].left,
@@ -9247,7 +9333,7 @@
                     ])
                   ]),
                   _: 2
-                }, 1032, ["visible", "onUpdate:visible", "title", "position"])) : vue.createCommentVNode("", true)
+                }, 1032, ["visible", "onUpdate:visible", "width", "title", "position"])) : vue.createCommentVNode("", true)
               ], 64);
             }), 256))
           ]))
@@ -9606,6 +9692,12 @@
       top: 0,
       width: 0,
       height: 0
+    },
+    frameworkRect: {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
     }
   });
   const canUsePluginMethods$2 = {
@@ -10980,7 +11072,7 @@
         subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
       });
       if (await stageOptions?.canSelect?.(contentEl)) {
-        subStage?.select(contentEl);
+        subStage?.select(contentEl.id);
       }
     }
     updateHandler = () => {
@@ -11691,8 +11783,10 @@
   exports.uiService = uiService;
   exports.useCodeBlockEdit = useCodeBlockEdit;
   exports.useDataSourceMethod = useDataSourceMethod;
+  exports.useEditorContentHeight = useEditorContentHeight;
   exports.useFloatBox = useFloatBox;
   exports.useStage = useStage;
+  exports.useWindowRect = useWindowRect;
   exports.warn = warn;
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });