@tmagic/editor 1.3.10 → 1.3.11

package/dist/tmagic-editor.umd.cjs

@@ -35,7 +35,7 @@
   const _hoisted_1$t = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -221,7 +221,7 @@
     }
   });
 
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -246,7 +246,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$T, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$U, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -261,7 +261,7 @@
     }
   });
 
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -341,7 +341,7 @@
     }
   });
 
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -418,7 +418,7 @@
   const _hoisted_2$k = { style: { "flex": "1" } };
   const _hoisted_3$8 = { style: { "flex": "1" } };
   const _hoisted_4$7 = { class: "dialog-footer" };
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -686,7 +686,7 @@
                   })
                 ])
               ]),
-              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
@@ -3218,7 +3218,7 @@
     return newNode;
   };
 
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3269,7 +3269,7 @@
   });
 
   const _hoisted_1$r = ["src"];
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -3373,7 +3373,7 @@
 
   const _hoisted_1$q = { class: "m-fields-code-select-col" };
   const _hoisted_2$j = { class: "code-select-container" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -3455,14 +3455,14 @@
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3470,7 +3470,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3485,7 +3485,7 @@
 
   const _hoisted_1$p = { class: "m-editor-data-source-fields" };
   const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -3777,7 +3777,7 @@
     }
   });
 
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3835,7 +3835,7 @@
   const _hoisted_1$o = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$7 = { class: "el-input__inner" };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
     },
@@ -4025,7 +4025,7 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$o, [
@@ -4060,7 +4060,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$N, {
+              vue.createVNode(_sfc_main$O, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -4145,7 +4145,7 @@
 
   const _hoisted_1$n = { class: "m-editor-data-source-methods" };
   const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
     },
@@ -4234,7 +4234,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4251,7 +4251,7 @@
 
   const _hoisted_1$m = { class: "m-fields-data-source-method-select" };
   const _hoisted_2$f = { class: "data-source-method-select-container" };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
     },
@@ -4342,14 +4342,14 @@
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCodeHandler
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -4358,7 +4358,7 @@
             "params-config": paramsConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4373,7 +4373,7 @@
 
   const _hoisted_1$l = { class: "m-editor-data-source-fields" };
   const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMocks"
     },
@@ -4460,7 +4460,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$T,
+          component: _sfc_main$U,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -4605,7 +4605,7 @@
     }
   });
 
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceSelect"
     },
@@ -4667,7 +4667,7 @@
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorEventSelect"
     },
@@ -4940,7 +4940,7 @@
   const _hoisted_4$6 = [
     _hoisted_2$c
   ];
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
@@ -4955,7 +4955,7 @@
   const _hoisted_1$i = { class: "m-fields-key-value" };
   const _hoisted_2$b = { key: 0 };
   const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -5063,7 +5063,7 @@
               _: 1
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("", true),
-          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
@@ -5079,7 +5079,7 @@
             size: "default",
             disabled: _ctx.disabled,
             link: "",
-            icon: _sfc_main$D,
+            icon: _sfc_main$E,
             onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
           }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
@@ -5089,7 +5089,7 @@
 
   const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
   const _hoisted_2$a = { class: "page-fragment-select-container" };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageFragmentSelect"
     },
@@ -5144,7 +5144,7 @@
               size: _ctx.size,
               onChange: changeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: 0,
               class: "icon",
               icon: vue.unref(iconsVue.Edit),
@@ -5161,7 +5161,7 @@
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -5346,7 +5346,7 @@
     };
   };
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -5368,7 +5368,7 @@
     }
   });
 
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -5495,7 +5495,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$z, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$A, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5504,7 +5504,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$z, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$A, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -5522,7 +5522,7 @@
     class: "menu-item-text"
   };
   const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -5615,7 +5615,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5633,7 +5633,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5687,7 +5687,7 @@
     key: 1,
     style: { "width": "21px" }
   };
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarAddButton"
     },
@@ -5721,13 +5721,13 @@
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+          vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
         ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e));
       };
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
     },
@@ -5833,7 +5833,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           _ctx.type === vue.unref(schema.NodeType).PAGE && pageLength.value || _ctx.type === vue.unref(schema.NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
@@ -5849,14 +5849,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
     }
   });
 
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarSwitchTypeButton"
     },
@@ -5904,7 +5904,7 @@
   const _hoisted_2$8 = ["onClick"];
   const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$5 = ["title"];
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBar"
     },
@@ -5983,14 +5983,14 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
+          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
             key: 0,
             modelValue: active.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
           }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$v, { type: active.value }, {
+          vue.createVNode(_sfc_main$w, { type: active.value }, {
             prepend: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
+              vue.createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"])
             ]),
             default: vue.withCtx(() => [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item) => {
@@ -6023,7 +6023,7 @@
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", null, [
                         vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                          vue.createVNode(_sfc_main$x, {
+                          vue.createVNode(_sfc_main$y, {
                             data: {
                               type: "button",
                               text: "复制",
@@ -6031,7 +6031,7 @@
                               handler: () => copy(item)
                             }
                           }, null, 8, ["data"]),
-                          vue.createVNode(_sfc_main$x, {
+                          vue.createVNode(_sfc_main$y, {
                             data: {
                               type: "button",
                               text: "删除",
@@ -6058,7 +6058,7 @@
   const _hoisted_2$7 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -6089,7 +6089,7 @@
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$4
             ]),
@@ -6099,7 +6099,7 @@
               onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE_FRAGMENT))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_4$4
             ])) : vue.createCommentVNode("", true)
@@ -6113,7 +6113,7 @@
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
   const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -6194,13 +6194,13 @@
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$T, {
+            vue.createVNode(_sfc_main$U, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$y, {
+          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$z, {
             key: 1,
             "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
@@ -6223,10 +6223,10 @@
             ]),
             center: vue.withCtx(() => [
               page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
               ]),
               vue.renderSlot(_ctx.$slots, "page-bar", {}, () => [
-                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                vue.createVNode(_sfc_main$u, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                   "page-bar-title": vue.withCtx(({ page: page2 }) => [
                     vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                   ]),
@@ -6261,7 +6261,7 @@
     }
   });
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -6423,7 +6423,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -6436,7 +6436,7 @@
   });
 
   const _hoisted_1$b = { class: "m-editor-props-panel" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -6643,7 +6643,7 @@
     };
   };
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -6701,7 +6701,7 @@
     key: 0,
     class: "m-editor-tree-node-children"
   };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTreeNode"
     },
@@ -6768,7 +6768,7 @@
             onContextmenu: nodeContentmenuHandler,
             onMouseenter: mouseenterHandler
           }, [
-            vue.createVNode(_sfc_main$N, {
+            vue.createVNode(_sfc_main$O, {
               class: "expand-icon",
               style: vue.normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
               icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
@@ -6822,7 +6822,7 @@
     key: 1,
     class: "m-editor-tree-empty"
   };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTree"
     },
@@ -6846,7 +6846,7 @@
           onDragover: handleDragOver
         }, [
           _ctx.data?.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$o, {
               key: item.id,
               data: item,
               indent: _ctx.indent,
@@ -6909,13 +6909,13 @@
     };
   };
 
-  const createPageNodeStatus$1 = (nodeData, initalLayerNodeStatus) => {
+  const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
     const map = /* @__PURE__ */ new Map();
     nodeData.forEach(
       (node) => traverseNode(node, (node2) => {
         map.set(
           node2.id,
-          initalLayerNodeStatus?.get(node2.id) || {
+          initialLayerNodeStatus?.get(node2.id) || {
             visible: true,
             expand: false,
             selected: false,
@@ -6943,7 +6943,7 @@
     };
   };
 
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -7025,7 +7025,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$n, {
           data: codeList.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -7047,7 +7047,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$O, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -7062,7 +7062,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$O, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -7082,7 +7082,7 @@
   });
 
   const _hoisted_1$8 = { class: "search-wrapper" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -7105,7 +7105,7 @@
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
                 vue.createElementVNode("div", _hoisted_1$8, [
-                  vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                  vue.createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
@@ -7121,7 +7121,7 @@
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                 ])
               ]),
-              vue.createVNode(_sfc_main$l, {
+              vue.createVNode(_sfc_main$m, {
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
@@ -7139,7 +7139,7 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -7153,7 +7153,7 @@
     }
   });
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -7209,7 +7209,7 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -7298,7 +7298,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$n, {
           data: list.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -7320,7 +7320,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$O, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -7335,7 +7335,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$O, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -7353,7 +7353,7 @@
 
   const _hoisted_1$7 = { class: "search-wrapper" };
   const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
@@ -7418,7 +7418,7 @@
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", _hoisted_1$7, [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
                   placement: "right"
@@ -7437,7 +7437,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_2$5, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                        return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                        return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                           data: {
                             type: "button",
                             text: item.text,
@@ -7453,14 +7453,14 @@
                   _: 1
                 })) : vue.createCommentVNode("", true)
               ]),
-              vue.createVNode(_sfc_main$i, {
+              vue.createVNode(_sfc_main$j, {
                 onEdit: editHandler,
                 onRemove: removeHandler
               })
             ]),
             _: 1
           }),
-          vue.createVNode(_sfc_main$j, {
+          vue.createVNode(_sfc_main$k, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !editable.value,
@@ -7474,7 +7474,7 @@
     }
   });
 
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorContentMenu"
     },
@@ -7605,7 +7605,7 @@
               vue.renderSlot(_ctx.$slots, "title"),
               vue.createElementVNode("div", null, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -7660,7 +7660,7 @@
     _hoisted_2$4,
     _hoisted_3$2
   ];
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
     },
@@ -7745,7 +7745,7 @@
     };
   };
 
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -7812,7 +7812,7 @@
             {
               type: "button",
               text: "全部折叠",
-              icon: _sfc_main$f,
+              icon: _sfc_main$g,
               display: () => utils.isPage(node.value) || utils.isPageFragment(node.value),
               handler: () => {
                 emit("collapse-all");
@@ -7841,7 +7841,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$h, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -7851,7 +7851,7 @@
     }
   });
 
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerNodeTool",
     props: {
       data: {}
@@ -7870,12 +7870,12 @@
       };
       return (_ctx, _cache) => {
         return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             icon: vue.unref(iconsVue.Hide),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
             title: "点击显示"
-          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -8327,7 +8327,7 @@
     };
   };
 
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerPanel"
     },
@@ -8376,8 +8376,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$o, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+            vue.createVNode(_sfc_main$p, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
               key: 0,
               tabindex: "-1",
               ref_key: "tree",
@@ -8397,7 +8397,7 @@
               ]),
               "tree-node-tool": vue.withCtx(({ data: nodeData2 }) => [
                 vue.renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
-                  vue.createVNode(_sfc_main$d, { data: nodeData2 }, null, 8, ["data"])
+                  vue.createVNode(_sfc_main$e, { data: nodeData2 }, null, 8, ["data"])
                 ])
               ]),
               "tree-node-label": vue.withCtx(({ data: nodeData2 }) => [
@@ -8406,7 +8406,7 @@
               _: 3
             }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$e, {
+              vue.createVNode(_sfc_main$f, {
                 ref_key: "menu",
                 ref: menu,
                 "layer-content-menu": _ctx.layerContentMenu,
@@ -8423,7 +8423,7 @@
 
   const _hoisted_1$5 = ["onClick", "onDragstart"];
   const _hoisted_2$3 = ["title"];
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
     },
@@ -8503,7 +8503,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -8511,7 +8511,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$O, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -8532,7 +8532,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$N, {
+                                  vue.createVNode(_sfc_main$O, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -8572,7 +8572,7 @@
   const _hoisted_5$1 = { class: "m-editor-float-box-list" };
   const _hoisted_6 = ["onClick"];
   const _hoisted_7 = { class: "m-editor-float-box-body" };
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
     },
@@ -8593,7 +8593,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$b,
+            component: _sfc_main$c,
             slots: {}
           },
           layer: {
@@ -8605,7 +8605,7 @@
               layerContentMenu: props.layerContentMenu,
               customContentMenu: props.customContentMenu
             },
-            component: _sfc_main$c,
+            component: _sfc_main$d,
             slots: {}
           },
           "code-block": {
@@ -8613,7 +8613,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$k,
+            component: _sfc_main$l,
             slots: {},
             boxComponentConfig: {
               props: {
@@ -8626,7 +8626,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$h,
+            component: _sfc_main$i,
             slots: {},
             boxComponentConfig: {
               props: {
@@ -8681,7 +8681,7 @@
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
                 }, [
-                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -8817,7 +8817,7 @@
                     onClick: ($event) => vue.unref(showFloatBox)(config.$key)
                   }, [
                     vue.createElementVNode("div", null, vue.toDisplayString(config.text), 1),
-                    vue.createVNode(_sfc_main$N, {
+                    vue.createVNode(_sfc_main$O, {
                       class: "m-editor-float-box-close",
                       icon: vue.unref(iconsVue.Close),
                       onClick: vue.withModifiers(($event) => vue.unref(closeFloatBox)(config.$key), ["stop"])
@@ -8965,7 +8965,7 @@
     };
   }
 
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollBar"
     },
@@ -9053,7 +9053,7 @@
     }
   });
 
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollViewer"
     },
@@ -9139,14 +9139,15 @@
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 4),
-          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+          vue.renderSlot(_ctx.$slots, "content"),
+          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$a, {
             key: 0,
             "scroll-size": scrollHeight.value,
-            size: _ctx.wrapHeight,
             pos: vOffset.value,
+            size: _ctx.wrapHeight,
             onScroll: vScrollHandler
-          }, null, 8, ["scroll-size", "size", "pos"])) : vue.createCommentVNode("", true),
-          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+          }, null, 8, ["scroll-size", "pos", "size"])) : vue.createCommentVNode("", true),
+          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$a, {
             key: 1,
             "is-horizontal": true,
             "scroll-size": scrollWidth.value,
@@ -9361,7 +9362,7 @@
   };
 
   const _hoisted_1$3 = { class: "m-editor-float-box-body" };
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
     props: {
       visible: { type: Boolean, default: false },
@@ -9470,7 +9471,7 @@
     }
   });
 
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "NodeListMenu",
     setup(__props) {
       const services = vue.inject("services");
@@ -9552,7 +9553,7 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -9562,7 +9563,7 @@
             position: menuPosition.value
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$m, {
+              vue.createVNode(_sfc_main$n, {
                 class: "m-editor-node-list-menu magic-editor-layer-tree",
                 data: nodeData.value,
                 "node-status-map": vue.unref(nodeStatusMap),
@@ -9576,6 +9577,157 @@
     }
   });
 
+  const useStageOverlay = () => {
+    const services = vue.inject("services");
+    const stageOptions = vue.inject("stageOptions");
+    const wrapWidth = vue.ref(0);
+    const wrapHeight = vue.ref(0);
+    const stageOverlayVisible = vue.ref(false);
+    const stageOverlay = vue.ref();
+    const stage = vue.computed(() => services?.editorService.get("stage"));
+    let subStage = null;
+    const div = document.createElement("div");
+    let selectEl = null;
+    const render = () => {
+      if (!selectEl)
+        return;
+      const content = selectEl.cloneNode(true);
+      content.style.position = "static";
+      Array.from(div.children).forEach((element) => {
+        element.remove();
+      });
+      div.appendChild(content);
+      subStage?.renderer.contentWindow?.magic.onPageElUpdate(div);
+      subStage?.select(content);
+    };
+    const copyDocumentElement = () => {
+      const doc = subStage?.renderer.getDocument();
+      const documentElement = stage.value?.renderer.getDocument()?.documentElement;
+      if (doc && documentElement) {
+        doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
+      }
+    };
+    const updateOverlay = () => {
+      if (!selectEl)
+        return;
+      const { scrollWidth, scrollHeight } = selectEl;
+      stageOverlay.value.style.width = `${scrollWidth}px`;
+      stageOverlay.value.style.height = `${scrollHeight}px`;
+      wrapWidth.value = scrollWidth;
+      wrapHeight.value = scrollHeight;
+    };
+    const updateHandler = () => {
+      render();
+      updateOverlay();
+    };
+    const addHandler = () => {
+      render();
+      updateOverlay();
+    };
+    const removeHandler = () => {
+      render();
+      updateOverlay();
+    };
+    const openOverlay = async (el) => {
+      selectEl = el;
+      stageOverlayVisible.value = true;
+      if (!stageOverlay.value) {
+        await vue.nextTick();
+      }
+      if (!stageOptions) {
+        return;
+      }
+      subStage = useStage({
+        ...stageOptions,
+        runtimeUrl: "",
+        autoScrollIntoView: false,
+        render(stage2) {
+          copyDocumentElement();
+          const rootEl = stage2.renderer.getDocument()?.getElementById("app");
+          if (rootEl) {
+            rootEl.remove();
+          }
+          div.style.cssText = `
+          width: ${el.scrollWidth}px;
+          height: ${el.scrollHeight}px;
+          background-color: #fff;
+        `;
+          render();
+          return div;
+        }
+      });
+      subStage.mount(stageOverlay.value);
+      const { mask, renderer } = subStage;
+      const { contentWindow } = renderer;
+      mask.showRule(false);
+      updateOverlay();
+      contentWindow?.magic.onRuntimeReady({});
+      services?.editorService.on("update", updateHandler);
+      services?.editorService.on("add", addHandler);
+      services?.editorService.on("remove", removeHandler);
+    };
+    const closeOverlay = () => {
+      stageOverlayVisible.value = false;
+      subStage?.destroy();
+      subStage = null;
+      services?.editorService.off("update", updateHandler);
+      services?.editorService.off("add", addHandler);
+      services?.editorService.off("remove", removeHandler);
+    };
+    vue.watch(stage, (stage2) => {
+      if (stage2) {
+        stage2.on("dblclick", async (event) => {
+          const el = await stage2.actionManager.getElementFromPoint(event);
+          if (el) {
+            openOverlay(el);
+          }
+        });
+      } else if (subStage) {
+        closeOverlay();
+      }
+    });
+    return {
+      wrapWidth,
+      wrapHeight,
+      stageOverlayVisible,
+      stageOverlay,
+      closeOverlay
+    };
+  };
+
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    __name: "StageOverlay",
+    setup(__props) {
+      const { stageOverlayVisible, stageOverlay, closeOverlay } = useStageOverlay();
+      return (_ctx, _cache) => {
+        return vue.unref(stageOverlayVisible) ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "m-editor-stage-overlay",
+          onClick: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => vue.unref(closeOverlay) && vue.unref(closeOverlay)(...args))
+        }, [
+          vue.createVNode(vue.unref(design.TMagicIcon), {
+            class: "m-editor-stage-overlay-close",
+            size: 20,
+            onClick: vue.unref(closeOverlay)
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(iconsVue.CloseBold))
+            ]),
+            _: 1
+          }, 8, ["onClick"]),
+          vue.createElementVNode("div", {
+            ref_key: "stageOverlay",
+            ref: stageOverlay,
+            class: "m-editor-stage-overlay-container",
+            onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+            }, ["stop"]))
+          }, null, 512)
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
   const _hoisted_1$2 = {
     viewBox: "0 0 24 24",
     fill: "none",
@@ -9741,7 +9893,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$h, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -9787,10 +9939,11 @@
           stageWrap.value?.container?.focus();
         });
         services?.editorService.set("stage", vue.markRaw(stage));
-        stage?.mount(stageContainer.value);
-        if (!node.value?.id)
+        stage.mount(stageContainer.value);
+        if (!node.value?.id) {
           return;
-        stage?.on("runtime-ready", (rt) => {
+        }
+        stage.on("runtime-ready", (rt) => {
           runtime = rt;
           root.value && runtime?.updateRootConfig?.(lodashEs.cloneDeep(vue.toRaw(root.value)));
           page.value?.id && runtime?.updatePageId?.(page.value.id);
@@ -9885,8 +10038,8 @@
             left = e.clientX - containerRect.left + scrollLeft;
             if (parentEl && doc) {
               const { left: parentLeft, top: parentTop } = StageCore.getOffset(parentEl);
-              left = left - StageCore.calcValueByFontsize(doc, parentLeft);
-              top = top - StageCore.calcValueByFontsize(doc, parentTop);
+              left = left - StageCore.calcValueByFontsize(doc, parentLeft) * zoom.value;
+              top = top - StageCore.calcValueByFontsize(doc, parentTop) * zoom.value;
             }
           }
           config.data.style = {
@@ -9900,7 +10053,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$8, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$9, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
@@ -9916,16 +10069,7 @@
           },
           onClick: _cache[0] || (_cache[0] = ($event) => stageWrap.value?.container?.focus())
         }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", {
-              class: "m-editor-stage-container",
-              ref_key: "stageContainer",
-              ref: stageContainer,
-              style: vue.normalizeStyle(`transform: scale(${zoom.value});`),
-              onContextmenu: contextmenuHandler,
-              onDrop: dropHandler,
-              onDragover: dragoverHandler
-            }, null, 36),
+          content: vue.withCtx(() => [
             vue.createVNode(_sfc_main$6),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$4, {
@@ -9937,6 +10081,18 @@
               }, null, 8, ["is-multi-select", "stage-content-menu", "custom-content-menu"])
             ]))
           ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: "m-editor-stage-container",
+              ref_key: "stageContainer",
+              ref: stageContainer,
+              style: vue.normalizeStyle(`transform: scale(${zoom.value});`),
+              onContextmenu: contextmenuHandler,
+              onDrop: dropHandler,
+              onDragover: dragoverHandler
+            }, null, 36),
+            vue.createVNode(_sfc_main$7)
+          ]),
           _: 1
         }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"]);
       };
@@ -10906,13 +11062,13 @@
       );
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
           header: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "header")
           ]),
           nav: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$r, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -10923,7 +11079,7 @@
           ]),
           sidebar: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "sidebar", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$a, {
+              vue.createVNode(_sfc_main$b, {
                 data: _ctx.sidebar,
                 "layer-content-menu": _ctx.layerContentMenu,
                 "custom-content-menu": _ctx.customContentMenu
@@ -10980,7 +11136,7 @@
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$p, {
+              vue.createVNode(_sfc_main$q, {
                 "extend-state": _ctx.extendFormState,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
                 onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
@@ -11027,22 +11183,22 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(_sfc_main.name, _sfc_main);
-      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("magic-code-editor", _sfc_main$T);
-      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$E);
-      app.component("m-fields-data-source-fields", _sfc_main$L);
-      app.component("m-fields-data-source-mocks", _sfc_main$G);
-      app.component("m-fields-key-value", _sfc_main$C);
-      app.component("m-fields-data-source-input", _sfc_main$J);
-      app.component("m-fields-data-source-select", _sfc_main$F);
-      app.component("m-fields-data-source-methods", _sfc_main$I);
-      app.component("m-fields-data-source-method-select", _sfc_main$H);
-      app.component("m-fields-data-source-field-select", _sfc_main$K);
-      app.component("m-fields-page-fragment-select", _sfc_main$B);
+      app.component("m-fields-ui-select", _sfc_main$B);
+      app.component("m-fields-code-link", _sfc_main$S);
+      app.component("m-fields-vs-code", _sfc_main$T);
+      app.component("magic-code-editor", _sfc_main$U);
+      app.component("m-fields-code-select", _sfc_main$R);
+      app.component("m-fields-code-select-col", _sfc_main$N);
+      app.component("m-fields-event-select", _sfc_main$F);
+      app.component("m-fields-data-source-fields", _sfc_main$M);
+      app.component("m-fields-data-source-mocks", _sfc_main$H);
+      app.component("m-fields-key-value", _sfc_main$D);
+      app.component("m-fields-data-source-input", _sfc_main$K);
+      app.component("m-fields-data-source-select", _sfc_main$G);
+      app.component("m-fields-data-source-methods", _sfc_main$J);
+      app.component("m-fields-data-source-method-select", _sfc_main$I);
+      app.component("m-fields-data-source-field-select", _sfc_main$L);
+      app.component("m-fields-page-fragment-select", _sfc_main$C);
     }
   };
 
@@ -11052,41 +11208,41 @@
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$P;
-  exports.CodeBlockList = _sfc_main$l;
-  exports.CodeBlockListPanel = _sfc_main$k;
+  exports.CodeBlockEditor = _sfc_main$Q;
+  exports.CodeBlockList = _sfc_main$m;
+  exports.CodeBlockListPanel = _sfc_main$l;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$Q;
-  exports.CodeSelectCol = _sfc_main$M;
+  exports.CodeSelect = _sfc_main$R;
+  exports.CodeSelectCol = _sfc_main$N;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$b;
-  exports.ContentMenu = _sfc_main$g;
-  exports.DataSourceFieldSelect = _sfc_main$K;
-  exports.DataSourceFields = _sfc_main$L;
-  exports.DataSourceInput = _sfc_main$J;
-  exports.DataSourceMethodSelect = _sfc_main$H;
-  exports.DataSourceMethods = _sfc_main$I;
-  exports.DataSourceMocks = _sfc_main$G;
-  exports.DataSourceSelect = _sfc_main$F;
+  exports.ComponentListPanel = _sfc_main$c;
+  exports.ContentMenu = _sfc_main$h;
+  exports.DataSourceFieldSelect = _sfc_main$L;
+  exports.DataSourceFields = _sfc_main$M;
+  exports.DataSourceInput = _sfc_main$K;
+  exports.DataSourceMethodSelect = _sfc_main$I;
+  exports.DataSourceMethods = _sfc_main$J;
+  exports.DataSourceMocks = _sfc_main$H;
+  exports.DataSourceSelect = _sfc_main$G;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$E;
+  exports.EventSelect = _sfc_main$F;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$N;
+  exports.Icon = _sfc_main$O;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$C;
+  exports.KeyValue = _sfc_main$D;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$c;
+  exports.LayerPanel = _sfc_main$d;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$y;
-  exports.PageFragmentSelect = _sfc_main$B;
-  exports.PropsPanel = _sfc_main$p;
-  exports.Resizer = _sfc_main$z;
-  exports.SplitView = _sfc_main$y;
-  exports.TMagicCodeEditor = _sfc_main$T;
+  exports.LayoutContainer = _sfc_main$z;
+  exports.PageFragmentSelect = _sfc_main$C;
+  exports.PropsPanel = _sfc_main$q;
+  exports.Resizer = _sfc_main$A;
+  exports.SplitView = _sfc_main$z;
+  exports.TMagicCodeEditor = _sfc_main$U;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$x;
+  exports.ToolButton = _sfc_main$y;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
@@ -11143,4 +11299,3 @@
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
-//# sourceMappingURL=tmagic-editor.umd.cjs.map