@tmagic/editor 1.3.10 → 1.3.11

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, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, normalizeProps, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, toHandlers, mergeDefaults } from 'vue';
-import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, Top, Bottom } from '@element-plus/icons-vue';
+import { FullScreen, Edit, View, Coin, Delete, Plus, Close, 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 { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
 import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
@@ -30,7 +30,7 @@ emmetCSS(monaco, ["css", "scss"]);
 const _hoisted_1$t = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -216,7 +216,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -241,7 +241,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$T, {
+      return openBlock(), createBlock(_sfc_main$U, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -256,7 +256,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -336,7 +336,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -413,7 +413,7 @@ const _hoisted_1$s = { style: { "display": "flex", "margin-bottom": "10px" } };
 const _hoisted_2$k = { style: { "flex": "1" } };
 const _hoisted_3$8 = { style: { "flex": "1" } };
 const _hoisted_4$7 = { class: "dialog-footer" };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -681,7 +681,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            difVisible.value ? (openBlock(), createBlock(_sfc_main$T, {
+            difVisible.value ? (openBlock(), createBlock(_sfc_main$U, {
               key: 0,
               ref_key: "magicVsEditor",
               ref: magicVsEditor,
@@ -3213,7 +3213,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3264,7 +3264,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$r = ["src"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -3368,7 +3368,7 @@ const useCodeBlockEdit = (codeBlockService) => {
 
 const _hoisted_1$q = { class: "m-fields-code-select-col" };
 const _hoisted_2$j = { class: "code-select-container" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -3450,14 +3450,14 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$O, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -3465,7 +3465,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3480,7 +3480,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$p = { class: "m-editor-data-source-fields" };
 const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -3772,7 +3772,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "DataSourceFieldSelect",
   props: {
     config: {},
@@ -3830,7 +3830,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 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__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
   },
@@ -4020,7 +4020,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$N, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$O, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
           createElementVNode("div", _hoisted_1$o, [
@@ -4055,7 +4055,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$N, {
+            createVNode(_sfc_main$O, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -4140,7 +4140,7 @@ const useDataSourceMethod = () => {
 
 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__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethods"
   },
@@ -4229,7 +4229,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4246,7 +4246,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
 
 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__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethodSelect"
   },
@@ -4337,14 +4337,14 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["config", "model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$O, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -4353,7 +4353,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4368,7 +4368,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
 
 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__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMocks"
   },
@@ -4455,7 +4455,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$T,
+        component: _sfc_main$U,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -4600,7 +4600,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceSelect"
   },
@@ -4662,7 +4662,7 @@ const _hoisted_2$d = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorEventSelect"
   },
@@ -4935,7 +4935,7 @@ const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1"
 const _hoisted_4$6 = [
   _hoisted_2$c
 ];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
@@ -4950,7 +4950,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 const _hoisted_1$i = { class: "m-fields-key-value" };
 const _hoisted_2$b = { key: 0 };
 const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -5058,7 +5058,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
-        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$T, {
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$U, {
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
@@ -5074,7 +5074,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           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"])) : createCommentVNode("", true)
       ]);
@@ -5084,7 +5084,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
 const _hoisted_2$a = { class: "page-fragment-select-container" };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageFragmentSelect"
   },
@@ -5139,7 +5139,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: changeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$O, {
             key: 0,
             class: "icon",
             icon: unref(Edit),
@@ -5156,7 +5156,7 @@ const _hoisted_1$g = {
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -5341,7 +5341,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -5363,7 +5363,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -5490,7 +5490,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$z, { onChange: changeLeft })
+          createVNode(_sfc_main$A, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5499,7 +5499,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$z, { onChange: changeRight }),
+          createVNode(_sfc_main$A, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -5517,7 +5517,7 @@ const _hoisted_1$f = {
   class: "menu-item-text"
 };
 const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -5610,7 +5610,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$O, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5628,7 +5628,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$O, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5682,7 +5682,7 @@ const _hoisted_1$e = {
   key: 1,
   style: { "width": "21px" }
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarAddButton"
   },
@@ -5716,13 +5716,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
         onClick: addPage
       }, [
-        createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+        createVNode(_sfc_main$O, { icon: unref(Plus) }, null, 8, ["icon"])
       ])) : (openBlock(), createElementBlock("div", _hoisted_1$e));
     };
   }
 });
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarScrollContainer"
   },
@@ -5828,7 +5828,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$N, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$O, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         _ctx.type === unref(NodeType).PAGE && pageLength.value || _ctx.type === unref(NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -5844,14 +5844,14 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$N, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$O, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
   }
 });
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarSwitchTypeButton"
   },
@@ -5899,7 +5899,7 @@ const _hoisted_1$d = { class: "m-editor-page-bar-tabs" };
 const _hoisted_2$8 = ["onClick"];
 const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
 const _hoisted_4$5 = ["title"];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBar"
   },
@@ -5978,14 +5978,14 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$u, {
+        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$v, {
           key: 0,
           modelValue: active.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
         }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$v, { type: active.value }, {
+        createVNode(_sfc_main$w, { type: active.value }, {
           prepend: withCtx(() => [
-            createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
+            createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"])
           ]),
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
@@ -6018,7 +6018,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => [
                     createElementVNode("div", null, [
                       renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        createVNode(_sfc_main$x, {
+                        createVNode(_sfc_main$y, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -6026,7 +6026,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        createVNode(_sfc_main$x, {
+                        createVNode(_sfc_main$y, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -6053,7 +6053,7 @@ const _hoisted_1$c = { class: "m-editor-empty-panel" };
 const _hoisted_2$7 = { class: "m-editor-empty-content" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
 const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面片", -1);
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -6084,7 +6084,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$O, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$4
           ]),
@@ -6094,7 +6094,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$O, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_4$4
           ])) : createCommentVNode("", true)
@@ -6108,7 +6108,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -6189,13 +6189,13 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$T, {
+          createVNode(_sfc_main$U, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : withDirectives((openBlock(), createBlock(_sfc_main$y, {
+        ]) : withDirectives((openBlock(), createBlock(_sfc_main$z, {
           key: 1,
           "element-loading-text": "Runtime 加载中...",
           ref_key: "splitView",
@@ -6218,10 +6218,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
             ]),
             renderSlot(_ctx.$slots, "page-bar", {}, () => [
-              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+              createVNode(_sfc_main$u, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                 "page-bar-title": withCtx(({ page: page2 }) => [
                   renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                 ]),
@@ -6256,7 +6256,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -6418,7 +6418,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$x, {
+              return openBlock(), createBlock(_sfc_main$y, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -6431,7 +6431,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$b = { class: "m-editor-props-panel" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -6638,7 +6638,7 @@ const useFloatBox = (slideKeys) => {
   };
 };
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -6696,7 +6696,7 @@ const _hoisted_4$3 = {
   key: 0,
   class: "m-editor-tree-node-children"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTreeNode"
   },
@@ -6763,7 +6763,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           onContextmenu: nodeContentmenuHandler,
           onMouseenter: mouseenterHandler
         }, [
-          createVNode(_sfc_main$N, {
+          createVNode(_sfc_main$O, {
             class: "expand-icon",
             style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
             icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
@@ -6817,7 +6817,7 @@ const _hoisted_1$9 = {
   key: 1,
   class: "m-editor-tree-empty"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
   },
@@ -6841,7 +6841,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         onDragover: handleDragOver
       }, [
         _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
-          return openBlock(), createBlock(_sfc_main$n, {
+          return openBlock(), createBlock(_sfc_main$o, {
             key: item.id,
             data: item,
             indent: _ctx.indent,
@@ -6904,13 +6904,13 @@ const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
   };
 };
 
-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,
@@ -6938,7 +6938,7 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -7020,7 +7020,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, {
+      return openBlock(), createBlock(_sfc_main$n, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -7042,7 +7042,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$O, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -7057,7 +7057,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$O, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -7077,7 +7077,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$8 = { class: "search-wrapper" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -7100,7 +7100,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
               createElementVNode("div", _hoisted_1$8, [
-                createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -7116,7 +7116,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            createVNode(_sfc_main$l, {
+            createVNode(_sfc_main$m, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -7134,7 +7134,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$Q, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -7148,7 +7148,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -7204,7 +7204,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -7293,7 +7293,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, {
+      return openBlock(), createBlock(_sfc_main$n, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -7315,7 +7315,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$O, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -7330,7 +7330,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$O, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -7348,7 +7348,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$7 = { class: "search-wrapper" };
 const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
@@ -7413,7 +7413,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1$7, [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -7432,7 +7432,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", _hoisted_2$5, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$x, {
+                      return openBlock(), createBlock(_sfc_main$y, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -7448,14 +7448,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 _: 1
               })) : createCommentVNode("", true)
             ]),
-            createVNode(_sfc_main$i, {
+            createVNode(_sfc_main$j, {
               onEdit: editHandler,
               onRemove: removeHandler
             })
           ]),
           _: 1
         }),
-        createVNode(_sfc_main$j, {
+        createVNode(_sfc_main$k, {
           ref_key: "editDialog",
           ref: editDialog,
           disabled: !editable.value,
@@ -7469,7 +7469,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -7600,7 +7600,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$x, {
+                return openBlock(), createBlock(_sfc_main$y, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -7655,7 +7655,7 @@ const _hoisted_4$2 = [
   _hoisted_2$4,
   _hoisted_3$2
 ];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
   },
@@ -7740,7 +7740,7 @@ const useMoveToMenu = (services) => {
   };
 };
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
@@ -7807,7 +7807,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           {
             type: "button",
             text: "全部折叠",
-            icon: _sfc_main$f,
+            icon: _sfc_main$g,
             display: () => isPage(node.value) || isPageFragment(node.value),
             handler: () => {
               emit("collapse-all");
@@ -7836,7 +7836,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$g, {
+      return openBlock(), createBlock(_sfc_main$h, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -7846,7 +7846,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "LayerNodeTool",
   props: {
     data: {}
@@ -7865,12 +7865,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$N, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$N, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$O, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -8322,7 +8322,7 @@ const useNodeStatus = (services) => {
   };
 };
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerPanel"
   },
@@ -8371,8 +8371,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$o, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$m, {
+          createVNode(_sfc_main$p, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$n, {
             key: 0,
             tabindex: "-1",
             ref_key: "tree",
@@ -8392,7 +8392,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             ]),
             "tree-node-tool": withCtx(({ data: nodeData2 }) => [
               renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
-                createVNode(_sfc_main$d, { data: nodeData2 }, null, 8, ["data"])
+                createVNode(_sfc_main$e, { data: nodeData2 }, null, 8, ["data"])
               ])
             ]),
             "tree-node-label": withCtx(({ data: nodeData2 }) => [
@@ -8401,7 +8401,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$e, {
+            createVNode(_sfc_main$f, {
               ref_key: "menu",
               ref: menu,
               "layer-content-menu": _ctx.layerContentMenu,
@@ -8418,7 +8418,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$5 = ["onClick", "onDragstart"];
 const _hoisted_2$3 = ["title"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
   },
@@ -8498,7 +8498,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -8506,7 +8506,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$N, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$O, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -8527,7 +8527,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                               content: item.desc
                             }, {
                               default: withCtx(() => [
-                                createVNode(_sfc_main$N, {
+                                createVNode(_sfc_main$O, {
                                   icon: item.icon
                                 }, null, 8, ["icon"])
                               ]),
@@ -8567,7 +8567,7 @@ const _hoisted_4$1 = {
 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__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSidebar"
   },
@@ -8588,7 +8588,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$b,
+          component: _sfc_main$c,
           slots: {}
         },
         layer: {
@@ -8600,7 +8600,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             layerContentMenu: props.layerContentMenu,
             customContentMenu: props.customContentMenu
           },
-          component: _sfc_main$c,
+          component: _sfc_main$d,
           slots: {}
         },
         "code-block": {
@@ -8608,7 +8608,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$k,
+          component: _sfc_main$l,
           slots: {},
           boxComponentConfig: {
             props: {
@@ -8621,7 +8621,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$h,
+          component: _sfc_main$i,
           slots: {},
           boxComponentConfig: {
             props: {
@@ -8676,7 +8676,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$O, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -8812,7 +8812,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   onClick: ($event) => unref(showFloatBox)(config.$key)
                 }, [
                   createElementVNode("div", null, toDisplayString(config.text), 1),
-                  createVNode(_sfc_main$N, {
+                  createVNode(_sfc_main$O, {
                     class: "m-editor-float-box-close",
                     icon: unref(Close),
                     onClick: withModifiers(($event) => unref(closeFloatBox)(config.$key), ["stop"])
@@ -8960,7 +8960,7 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollBar"
   },
@@ -9048,7 +9048,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollViewer"
   },
@@ -9134,14 +9134,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4),
-        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$9, {
+        renderSlot(_ctx.$slots, "content"),
+        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), 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"])) : createCommentVNode("", true),
-        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$9, {
+        }, null, 8, ["scroll-size", "pos", "size"])) : createCommentVNode("", true),
+        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$a, {
           key: 1,
           "is-horizontal": true,
           "scroll-size": scrollWidth.value,
@@ -9356,7 +9357,7 @@ const useStage = (stageOptions) => {
 };
 
 const _hoisted_1$3 = { class: "m-editor-float-box-body" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
   props: {
     visible: { type: Boolean, default: false },
@@ -9465,7 +9466,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
   setup(__props) {
     const services = inject("services");
@@ -9547,7 +9548,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$7, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$8, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -9557,7 +9558,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           position: menuPosition.value
         }, {
           body: withCtx(() => [
-            createVNode(_sfc_main$m, {
+            createVNode(_sfc_main$n, {
               class: "m-editor-node-list-menu magic-editor-layer-tree",
               data: nodeData.value,
               "node-status-map": unref(nodeStatusMap),
@@ -9571,6 +9572,157 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const useStageOverlay = () => {
+  const services = inject("services");
+  const stageOptions = inject("stageOptions");
+  const wrapWidth = ref(0);
+  const wrapHeight = ref(0);
+  const stageOverlayVisible = ref(false);
+  const stageOverlay = ref();
+  const stage = 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 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);
+  };
+  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__ */ defineComponent({
+  __name: "StageOverlay",
+  setup(__props) {
+    const { stageOverlayVisible, stageOverlay, closeOverlay } = useStageOverlay();
+    return (_ctx, _cache) => {
+      return unref(stageOverlayVisible) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "m-editor-stage-overlay",
+        onClick: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => unref(closeOverlay) && unref(closeOverlay)(...args))
+      }, [
+        createVNode(unref(TMagicIcon), {
+          class: "m-editor-stage-overlay-close",
+          size: 20,
+          onClick: unref(closeOverlay)
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(CloseBold))
+          ]),
+          _: 1
+        }, 8, ["onClick"]),
+        createElementVNode("div", {
+          ref_key: "stageOverlay",
+          ref: stageOverlay,
+          class: "m-editor-stage-overlay-container",
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, null, 512)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
 const _hoisted_1$2 = {
   viewBox: "0 0 24 24",
   fill: "none",
@@ -9736,7 +9888,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$g, {
+      return openBlock(), createBlock(_sfc_main$h, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -9782,10 +9934,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         stageWrap.value?.container?.focus();
       });
       services?.editorService.set("stage", 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?.(cloneDeep(toRaw(root.value)));
         page.value?.id && runtime?.updatePageId?.(page.value.id);
@@ -9880,8 +10033,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           left = e.clientX - containerRect.left + scrollLeft;
           if (parentEl && doc) {
             const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-            left = left - calcValueByFontsize(doc, parentLeft);
-            top = top - calcValueByFontsize(doc, parentTop);
+            left = left - calcValueByFontsize(doc, parentLeft) * zoom.value;
+            top = top - calcValueByFontsize(doc, parentTop) * zoom.value;
           }
         }
         config.data.style = {
@@ -9895,7 +10048,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, {
+      return openBlock(), createBlock(_sfc_main$9, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
@@ -9911,16 +10064,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         },
         onClick: _cache[0] || (_cache[0] = ($event) => stageWrap.value?.container?.focus())
       }, {
-        default: withCtx(() => [
-          createElementVNode("div", {
-            class: "m-editor-stage-container",
-            ref_key: "stageContainer",
-            ref: stageContainer,
-            style: normalizeStyle(`transform: scale(${zoom.value});`),
-            onContextmenu: contextmenuHandler,
-            onDrop: dropHandler,
-            onDragover: dragoverHandler
-          }, null, 36),
+        content: withCtx(() => [
           createVNode(_sfc_main$6),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             createVNode(_sfc_main$4, {
@@ -9932,6 +10076,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["is-multi-select", "stage-content-menu", "custom-content-menu"])
           ]))
         ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: "m-editor-stage-container",
+            ref_key: "stageContainer",
+            ref: stageContainer,
+            style: normalizeStyle(`transform: scale(${zoom.value});`),
+            onContextmenu: contextmenuHandler,
+            onDrop: dropHandler,
+            onDragover: dragoverHandler
+          }, null, 36),
+          createVNode(_sfc_main$7)
+        ]),
         _: 1
       }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"]);
     };
@@ -10901,13 +11057,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+      return openBlock(), createBlock(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$r, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -10918,7 +11074,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         sidebar: withCtx(() => [
           renderSlot(_ctx.$slots, "sidebar", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$a, {
+            createVNode(_sfc_main$b, {
               data: _ctx.sidebar,
               "layer-content-menu": _ctx.layerContentMenu,
               "custom-content-menu": _ctx.customContentMenu
@@ -10975,7 +11131,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$p, {
+            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)),
@@ -11022,24 +11178,23 @@ const index = {
     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);
   }
 };
 
-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$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _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$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
-//# sourceMappingURL=tmagic-editor.js.map
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$Q as CodeBlockEditor, _sfc_main$m as CodeBlockList, _sfc_main$l as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$N as CodeSelectCol, ColumnLayout, _sfc_main$c as ComponentListPanel, _sfc_main$h as ContentMenu, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$I as DataSourceMethodSelect, _sfc_main$J as DataSourceMethods, _sfc_main$H as DataSourceMocks, _sfc_main$G as DataSourceSelect, DragType, _sfc_main$F as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$O as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$d as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$q as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y 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, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };