@tmagic/editor 1.3.12 → 1.3.14

package/dist/tmagic-editor.js

@@ -1,16 +1,16 @@
-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 { 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, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, 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, 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';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
-import { HookType, NodeType, ActionType } from '@tmagic/schema';
+import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 import { guid, isPage, isPageFragment, isPop, getNodePath, isNumber, toLine, getValueByKeyPath, setValueByKeyPath, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
 import Gesto from 'gesto';
-import Moveable from 'moveable';
+import VanillaMoveable from 'moveable';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
@@ -362,13 +362,38 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       name: "hookData",
       enableToggleMode: false,
       expandAll: true,
-      titleKey: "codeId",
+      title: (mForm, { model, index }) => {
+        if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
+          if (Array.isArray(model.codeId)) {
+            const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
+            return `${ds?.title} / ${model.codeId[1]}`;
+          }
+          return Array.isArray(model.codeId) ? model.codeId.join("/") : index;
+        }
+        return model.codeId || index;
+      },
       items: [
         {
-          type: "code-select-col",
-          name: "codeId",
-          labelWidth: 0,
-          disabled: () => !services?.codeBlockService.getEditStatus()
+          type: "row",
+          items: [
+            {
+              type: "select",
+              name: "codeType",
+              span: 8,
+              options: [
+                { value: HookCodeType.CODE, text: "代码块" },
+                { value: HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
+              ],
+              defaultValue: "code"
+            },
+            {
+              type: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD ? "data-source-method-select" : "code-select-col",
+              name: "codeId",
+              span: 16,
+              labelWidth: 0,
+              disabled: () => !services?.codeBlockService.getEditStatus()
+            }
+          ]
         }
       ]
     }));
@@ -2993,6 +3018,7 @@ class Editor extends BaseService {
     this.addModifiedNodeId(config.id);
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
+    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
   }
   /**
    * 撤销当前操作
@@ -3458,8 +3484,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
         paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$P, {
-          key: 0,
           name: "params",
+          key: _ctx.model[_ctx.name],
           model: _ctx.model,
           size: _ctx.size,
           "params-config": paramsConfig.value,
@@ -5218,14 +5244,17 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const selectNode = async (id) => {
       await services?.editorService.select(id);
       services?.editorService.get("stage")?.select(id);
+      services?.stageOverlayService.get("stage")?.select(id);
     };
     const highlight = throttle((id) => {
       services?.editorService.highlight(id);
       services?.editorService.get("stage")?.highlight(id);
+      services?.stageOverlayService.get("stage")?.highlight(id);
     }, 150);
     const unhightlight = () => {
       services?.editorService.set("highlightNode", null);
       services?.editorService.get("stage")?.clearHighlight();
+      services?.stageOverlayService.get("stage")?.clearHighlight();
     };
     return (_ctx, _cache) => {
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
@@ -5672,7 +5701,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        }, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component), normalizeProps(mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : createCommentVNode("", true)
+        }, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component), mergeProps({ key: 4 }, _ctx.data.props || {}, toHandlers(_ctx.data.listeners || {})), null, 16)) : createCommentVNode("", true)
       ], 34)) : createCommentVNode("", true);
     };
   }
@@ -5948,7 +5977,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     );
     watch(active, (active2) => {
       if (active2 === NodeType.PAGE) {
-        if (!activePage.value) {
+        if (!activePage.value && !pageList.value.length) {
           editorService?.selectRoot();
           return;
         }
@@ -5956,11 +5985,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         return;
       }
       if (active2 === NodeType.PAGE_FRAGMENT) {
-        if (!activePageFragment.value) {
+        if (!activePageFragment.value && !pageFragmentList.value.length) {
           editorService?.selectRoot();
           return;
         }
-        switchPage(activePageFragment.value);
+        switchPage(activePageFragment.value || pageFragmentList.value[0].id);
       }
     });
     const switchPage = (id) => {
@@ -6507,108 +6536,141 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$a = { class: "m-editor-float-box-body" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "FloatingBox",
+  props: {
+    visible: { type: Boolean, default: false },
+    position: { default: () => ({ left: 0, top: 0 }) },
+    rect: { default: () => ({ width: "auto", height: "auto" }) },
+    title: { default: "" }
+  },
+  emits: ["update:visible"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const target = ref();
+    const dragTarget = ref();
+    const style = computed(() => ({
+      left: `${props.position.left}px`,
+      top: `${props.position.top}px`,
+      width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
+      height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
+    }));
+    let moveable = null;
+    const initMoveable = () => {
+      moveable = new VanillaMoveable(globalThis.document.body, {
+        className: "m-editor-floating-box-moveable",
+        target: target.value,
+        draggable: true,
+        resizable: true,
+        edge: true,
+        keepRatio: false,
+        origin: false,
+        snappable: true,
+        dragTarget: dragTarget.value,
+        dragTargetSelf: false,
+        linePadding: 10,
+        controlPadding: 10
+      });
+      moveable.on("drag", (e) => {
+        e.target.style.transform = e.transform;
+      });
+      moveable.on("resize", (e) => {
+        e.target.style.width = `${e.width}px`;
+        e.target.style.height = `${e.height}px`;
+        e.target.style.transform = e.drag.transform;
+      });
+    };
+    const destroyMoveable = () => {
+      moveable?.destroy();
+      moveable = null;
+    };
+    watch(
+      () => props.visible,
+      async (visible) => {
+        if (visible) {
+          await nextTick();
+          initMoveable();
+        } else {
+          destroyMoveable();
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    onBeforeUnmount(() => {
+      destroyMoveable();
+    });
+    const closeHandler = () => {
+      emit("update:visible", false);
+    };
+    __expose({
+      target
+    });
+    return (_ctx, _cache) => {
+      return _ctx.visible ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: "body"
+      }, [
+        createElementVNode("div", {
+          ref_key: "target",
+          ref: target,
+          class: "m-editor-float-box",
+          style: normalizeStyle(style.value)
+        }, [
+          createElementVNode("div", {
+            ref_key: "dragTarget",
+            ref: dragTarget,
+            class: "m-editor-float-box-title"
+          }, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createElementVNode("span", null, toDisplayString(_ctx.title), 1)
+            ]),
+            createElementVNode("div", null, [
+              createVNode(unref(TMagicButton), {
+                link: "",
+                size: "small",
+                icon: unref(Close),
+                onClick: closeHandler
+              }, null, 8, ["icon"])
+            ])
+          ], 512),
+          createElementVNode("div", _hoisted_1$a, [
+            renderSlot(_ctx.$slots, "body")
+          ])
+        ], 4)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
 const useFloatBox = (slideKeys) => {
-  const services = inject("services");
-  const moveable = ref();
-  const floatBox = ref();
-  const floatBoxStates = computed(() => services?.uiService.get("floatBox"));
-  const curKey = ref("");
-  const target = computed(
-    () => floatBox.value ? floatBox.value.find((item) => item.classList.contains(`m-editor-float-box-${curKey.value}`)) : void 0
+  const floatBoxStates = ref(
+    slideKeys.value.reduce(
+      (total, cur) => ({
+        ...total,
+        [cur]: {
+          status: false,
+          top: 0,
+          left: 0
+        }
+      }),
+      {}
+    )
   );
   const showingBoxKeys = computed(
-    () => [...floatBoxStates.value?.keys() ?? []].filter((key) => floatBoxStates.value?.get(key)?.status)
+    () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
   );
   const isDraging = ref(false);
-  const showFloatBox = async (key) => {
-    const curBoxStatus = floatBoxStates.value?.get(curKey.value)?.status;
-    if (curKey.value === key && curBoxStatus)
-      return;
-    curKey.value = key;
-    setSlideState(key, {
-      zIndex: getMaxZIndex() + 1,
-      status: true
-    });
-    await nextTick();
-    if (moveable.value) {
-      moveable.value.target = target.value;
-      moveable.value.dragTarget = getDragTarget();
-      moveable.value.updateRect();
-    } else {
-      initFloatBoxMoveable();
-    }
-  };
-  const setSlideState = (key, data) => {
-    const slideState = floatBoxStates.value?.get(key);
-    if (!slideState)
-      return;
-    floatBoxStates.value?.set(key, {
-      ...slideState,
-      ...data
-    });
-  };
-  const getDragTarget = (key) => `.m-editor-float-box-header-${key ?? curKey.value}`;
-  const closeFloatBox = (key) => {
-    setSlideState(key, {
-      status: false
-    });
-    if (!floatBoxStates.value?.values)
-      return;
-    const keys = [...floatBoxStates.value?.keys()];
-    const values = [...floatBoxStates.value?.values()];
-    const lastFloatBoxLen = values.filter((state) => state.status).length;
-    if (lastFloatBoxLen === 0) {
-      moveable.value?.destroy();
-      moveable.value = void 0;
-      return;
-    }
-    if (key === curKey.value) {
-      const zIndexList = values.filter((item) => item.status).map((item) => item.zIndex);
-      const maxZIndex = Math.max(...zIndexList);
-      const key2 = keys.find((key3) => floatBoxStates.value?.get(key3)?.zIndex === maxZIndex);
-      if (!key2)
-        return;
-      showFloatBox(key2);
-    }
-  };
-  const getMaxZIndex = () => {
-    if (!floatBoxStates.value?.values())
-      return 0;
-    const list = [...floatBoxStates.value?.values()].map((state) => state.zIndex);
-    return Math.max(...list) ?? 0;
-  };
-  const initFloatBoxMoveable = () => {
-    const dragTarget = getDragTarget();
-    moveable.value = new Moveable(document.body, {
-      target: target.value,
-      draggable: true,
-      resizable: true,
-      edge: true,
-      keepRatio: false,
-      origin: false,
-      snappable: true,
-      dragTarget,
-      dragTargetSelf: false,
-      linePadding: 10,
-      controlPadding: 10,
-      elementGuidelines: [...floatBoxStates.value?.keys() ?? []].map((key) => getDragTarget(key)),
-      bounds: { left: 0, top: 0, right: 0, bottom: 0, position: "css" }
-    });
-    moveable.value.on("drag", (e) => {
-      e.target.style.transform = e.transform;
-    });
-    moveable.value.on("resize", (e) => {
-      e.target.style.width = `${e.width}px`;
-      e.target.style.height = `${e.height}px`;
-      e.target.style.transform = e.drag.transform;
-    });
-  };
+  const dragstartHandler = () => isDraging.value = true;
   const dragendHandler = (key, e) => {
-    setSlideState(key, {
+    floatBoxStates.value[key] = {
       left: e.clientX,
-      top: e.clientY
-    });
-    showFloatBox(key);
+      top: e.clientY,
+      status: true
+    };
     isDraging.value = false;
   };
   document.body.addEventListener("dragover", (e) => {
@@ -6616,11 +6678,18 @@ const useFloatBox = (slideKeys) => {
       return;
     e.preventDefault();
   });
-  const dragstartHandler = () => isDraging.value = true;
   watch(
     () => slideKeys.value,
     () => {
-      services?.uiService.setFloatBox(slideKeys.value);
+      for (const key in slideKeys.value) {
+        if (floatBoxStates.value[key])
+          continue;
+        floatBoxStates.value[key] = {
+          status: false,
+          top: 0,
+          left: 0
+        };
+      }
     },
     {
       deep: true,
@@ -6628,17 +6697,14 @@ const useFloatBox = (slideKeys) => {
     }
   );
   return {
-    showFloatBox,
-    closeFloatBox,
     dragstartHandler,
     dragendHandler,
     floatBoxStates,
-    floatBox,
     showingBoxKeys
   };
 };
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -6689,14 +6755,14 @@ const updateStatus = (nodeStatusMap, id, status) => {
   });
 };
 
-const _hoisted_1$a = ["draggable", "data-node-id", "data-is-container"];
+const _hoisted_1$9 = ["draggable", "data-node-id", "data-is-container"];
 const _hoisted_2$6 = { class: "tree-node-label" };
 const _hoisted_3$3 = { class: "tree-node-tool" };
 const _hoisted_4$3 = {
   key: 0,
   class: "m-editor-tree-node-children"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTreeNode"
   },
@@ -6806,18 +6872,18 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             }, 1032, ["data", "node-status-map", "indent"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 40, _hoisted_1$a)), [
+      ], 40, _hoisted_1$9)), [
         [vShow, visible.value]
       ]);
     };
   }
 });
 
-const _hoisted_1$9 = {
+const _hoisted_1$8 = {
   key: 1,
   class: "m-editor-tree-empty"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
   },
@@ -6841,7 +6907,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         onDragover: handleDragOver
       }, [
         _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
-          return openBlock(), createBlock(_sfc_main$o, {
+          return openBlock(), createBlock(_sfc_main$n, {
             key: item.id,
             data: item,
             indent: _ctx.indent,
@@ -6858,7 +6924,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             ]),
             _: 2
           }, 1032, ["data", "indent", "node-status-map"]);
-        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$9, [
+        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$8, [
           createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
         ]))
       ], 32);
@@ -6938,7 +7004,7 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -7020,7 +7086,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$n, {
+      return openBlock(), createBlock(_sfc_main$m, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -7076,8 +7142,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { class: "search-wrapper" };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "search-wrapper" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -7099,8 +7165,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              createElementVNode("div", _hoisted_1$8, [
-                createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
+              createElementVNode("div", _hoisted_1$7, [
+                createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -7116,7 +7182,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            createVNode(_sfc_main$m, {
+            createVNode(_sfc_main$l, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -7148,7 +7214,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -7204,7 +7270,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -7293,7 +7359,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$n, {
+      return openBlock(), createBlock(_sfc_main$m, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -7346,9 +7412,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { class: "search-wrapper" };
+const _hoisted_1$6 = { class: "search-wrapper" };
 const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
@@ -7412,8 +7478,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$7, [
-              createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$6, [
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -7448,14 +7514,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 _: 1
               })) : createCommentVNode("", true)
             ]),
-            createVNode(_sfc_main$j, {
+            createVNode(_sfc_main$i, {
               onEdit: editHandler,
               onRemove: removeHandler
             })
           ]),
           _: 1
         }),
-        createVNode(_sfc_main$k, {
+        createVNode(_sfc_main$j, {
           ref_key: "editDialog",
           ref: editDialog,
           disabled: !editable.value,
@@ -7469,7 +7535,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -7635,7 +7701,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = {
+const _hoisted_1$5 = {
   width: "1em",
   height: "1em",
   viewBox: "0 0 16 16",
@@ -7655,14 +7721,14 @@ const _hoisted_4$2 = [
   _hoisted_2$4,
   _hoisted_3$2
 ];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
   },
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$6, _hoisted_4$2);
+      return openBlock(), createElementBlock("svg", _hoisted_1$5, _hoisted_4$2);
     };
   }
 });
@@ -7740,7 +7806,7 @@ const useMoveToMenu = (services) => {
   };
 };
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
@@ -7807,7 +7873,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           {
             type: "button",
             text: "全部折叠",
-            icon: _sfc_main$g,
+            icon: _sfc_main$f,
             display: () => isPage(node.value) || isPageFragment(node.value),
             handler: () => {
               emit("collapse-all");
@@ -7836,7 +7902,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$h, {
+      return openBlock(), createBlock(_sfc_main$g, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -7846,7 +7912,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "LayerNodeTool",
   props: {
     data: {}
@@ -7893,6 +7959,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     } else {
       await services?.editorService.select(data);
       services?.editorService.get("stage")?.select(data.id);
+      services?.stageOverlayService.get("stage")?.select(data.id);
     }
   };
   const multiSelect = async (data) => {
@@ -7911,6 +7978,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     }
     await services?.editorService.multiSelect(newNodes);
     services?.editorService.get("stage")?.multiSelect(newNodes);
+    services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
   };
   const throttleTime = 300;
   const highlightHandler = throttle((event, data) => {
@@ -7919,6 +7987,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
   const highlight = (data) => {
     services?.editorService?.highlight(data);
     services?.editorService?.get("stage")?.highlight(data.id);
+    services?.stageOverlayService?.get("stage")?.highlight(data.id);
   };
   const nodeClickHandler = (event, data) => {
     if (!nodeStatusMap?.value)
@@ -7940,7 +8009,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
   return {
     menu,
     nodeClickHandler,
-    nodeContentmenuHandler(event, data) {
+    nodeContentMenuHandler(event, data) {
       event.preventDefault();
       const nodes = services?.editorService.get("nodes") || [];
       if (nodes.length < 2 || !nodes.includes(data)) {
@@ -8266,12 +8335,12 @@ const useNodeStatus = (services) => {
     () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
   );
   watch(
-    page,
-    (page2) => {
-      if (!page2) {
+    () => page.value?.id,
+    (pageId) => {
+      if (!pageId) {
         return;
       }
-      nodeStatusMaps.value.set(page2.id, createPageNodeStatus(page2, nodeStatusMaps.value.get(page2.id)));
+      nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
     },
     {
       immediate: true
@@ -8299,6 +8368,8 @@ const useNodeStatus = (services) => {
   );
   services?.editorService.on("add", (newNodes) => {
     newNodes.forEach((node) => {
+      if (isPage(node) || isPageFragment(node))
+        return;
       traverseNode(node, (node2) => {
         nodeStatusMap.value?.set(node2.id, {
           visible: true,
@@ -8322,7 +8393,7 @@ const useNodeStatus = (services) => {
   };
 };
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerPanel"
   },
@@ -8364,15 +8435,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const {
       menu,
       nodeClickHandler,
-      nodeContentmenuHandler,
+      nodeContentMenuHandler,
       highlightHandler: mouseenterHandler
     } = useClick(services, isCtrlKeyDown, nodeStatusMap);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$p, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$n, {
+          createVNode(_sfc_main$o, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$m, {
             key: 0,
             tabindex: "-1",
             ref_key: "tree",
@@ -8383,7 +8454,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             onNodeDragstart: unref(handleDragStart),
             onNodeDragleave: unref(handleDragLeave),
             onNodeDragend: unref(handleDragEnd),
-            onNodeContextmenu: unref(nodeContentmenuHandler),
+            onNodeContextmenu: unref(nodeContentMenuHandler),
             onNodeMouseenter: unref(mouseenterHandler),
             onNodeClick: unref(nodeClickHandler)
           }, {
@@ -8392,7 +8463,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             ]),
             "tree-node-tool": withCtx(({ data: nodeData2 }) => [
               renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
-                createVNode(_sfc_main$e, { data: nodeData2 }, null, 8, ["data"])
+                createVNode(_sfc_main$d, { data: nodeData2 }, null, 8, ["data"])
               ])
             ]),
             "tree-node-label": withCtx(({ data: nodeData2 }) => [
@@ -8401,7 +8472,7 @@ const _sfc_main$d = /* @__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$f, {
+            createVNode(_sfc_main$e, {
               ref_key: "menu",
               ref: menu,
               "layer-content-menu": _ctx.layerContentMenu,
@@ -8416,9 +8487,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = ["onClick", "onDragstart"];
+const _hoisted_1$4 = ["onClick", "onDragstart"];
 const _hoisted_2$3 = ["title"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
   },
@@ -8498,7 +8569,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -8537,7 +8608,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                               title: item.text
                             }, toDisplayString(item.text), 9, _hoisted_2$3)
                           ])
-                        ], 40, _hoisted_1$5);
+                        ], 40, _hoisted_1$4);
                       }), 128))
                     ]),
                     _: 2
@@ -8554,7 +8625,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "m-editor-sidebar"
 };
@@ -8564,10 +8635,8 @@ const _hoisted_4$1 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-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$b = /* @__PURE__ */ defineComponent({
+const _hoisted_5$1 = { class: "m-editor-slide-list-box" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSidebar"
   },
@@ -8588,7 +8657,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$c,
+          component: _sfc_main$b,
           slots: {}
         },
         layer: {
@@ -8600,7 +8669,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             layerContentMenu: props.layerContentMenu,
             customContentMenu: props.customContentMenu
           },
-          component: _sfc_main$d,
+          component: _sfc_main$c,
           slots: {}
         },
         "code-block": {
@@ -8608,26 +8677,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$l,
-          slots: {},
-          boxComponentConfig: {
-            props: {
-              slideType: "box"
-            }
-          }
+          component: _sfc_main$k,
+          slots: {}
         },
         "data-source": {
           $key: "data-source",
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$i,
-          slots: {},
-          boxComponentConfig: {
-            props: {
-              slideType: "box"
-            }
-          }
+          component: _sfc_main$h,
+          slots: {}
         }
       };
       return typeof data === "string" ? map[data] : data;
@@ -8640,7 +8699,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }
     );
     const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
-    const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } = useFloatBox(slideKeys);
+    const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(slideKeys);
     watch(
       () => showingBoxKeys.value.length,
       () => {
@@ -8664,7 +8723,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
           createElementVNode("div", _hoisted_2$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
               return withDirectives((openBlock(), createElementBlock("div", {
@@ -8682,7 +8741,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
                 config.text ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(config.text), 1)) : createCommentVNode("", true)
               ], 42, _hoisted_3$1)), [
-                [vShow, !unref(floatBoxStates)?.get(config.$key)?.status]
+                [vShow, !unref(floatBoxStates)[config.$key]?.status]
               ]);
             }), 128))
           ]),
@@ -8691,7 +8750,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               class: "m-editor-sidebar-content",
               key: config.$key ?? index
             }, [
-              config && !unref(floatBoxStates)?.get(config.$key)?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
                 config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                   name: "component-list-panel-header",
                   fn: withCtx(() => [
@@ -8793,39 +8852,27 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           }), 128))
         ])) : createCommentVNode("", true),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createElementVNode("div", _hoisted_5$1, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
-              return withDirectives((openBlock(), createElementBlock("div", {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+            return openBlock(), createElementBlock(Fragment, null, [
+              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$p, {
                 key: config.$key ?? index,
-                ref_for: true,
-                ref_key: "floatBox",
-                ref: floatBox,
-                class: normalizeClass(["m-editor-float-box", `m-editor-float-box-${config.$key}`]),
-                style: normalizeStyle({
-                  left: `${unref(floatBoxStates)?.get(config.$key)?.left}px`,
-                  top: `${unref(floatBoxStates)?.get(config.$key)?.top}px`,
-                  zIndex: unref(floatBoxStates)?.get(config.$key)?.zIndex
-                })
-              }, [
-                createElementVNode("div", {
-                  class: normalizeClass(["m-editor-float-box-header", `m-editor-float-box-header-${config.$key}`]),
-                  onClick: ($event) => unref(showFloatBox)(config.$key)
-                }, [
-                  createElementVNode("div", null, toDisplayString(config.text), 1),
-                  createVNode(_sfc_main$O, {
-                    class: "m-editor-float-box-close",
-                    icon: unref(Close),
-                    onClick: withModifiers(($event) => unref(closeFloatBox)(config.$key), ["stop"])
-                  }, null, 8, ["icon", "onClick"])
-                ], 10, _hoisted_6),
-                createElementVNode("div", _hoisted_7, [
-                  config && unref(floatBoxStates)?.get(config.$key)?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.boxComponentConfig?.component || config.component), mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
-                ])
-              ], 6)), [
-                [vShow, unref(floatBoxStates)?.get(config.$key)?.status]
-              ]);
-            }), 128))
-          ])
+                visible: unref(floatBoxStates)[config.$key].status,
+                "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
+                title: config.text,
+                position: {
+                  left: unref(floatBoxStates)[config.$key].left,
+                  top: unref(floatBoxStates)[config.$key].top
+                }
+              }, {
+                body: withCtx(() => [
+                  createElementVNode("div", _hoisted_5$1, [
+                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.boxComponentConfig?.component || config.component), mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["visible", "onUpdate:visible", "title", "position"])) : createCommentVNode("", true)
+            ], 64);
+          }), 256))
         ]))
       ], 64);
     };
@@ -8960,7 +9007,7 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollBar"
   },
@@ -9048,7 +9095,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollViewer"
   },
@@ -9135,14 +9182,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ], 4),
         renderSlot(_ctx.$slots, "content"),
-        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$a, {
+        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$9, {
           key: 0,
           "scroll-size": scrollHeight.value,
           pos: vOffset.value,
           size: _ctx.wrapHeight,
           onScroll: vScrollHandler
         }, null, 8, ["scroll-size", "pos", "size"])) : createCommentVNode("", true),
-        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$a, {
+        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$9, {
           key: 1,
           "is-horizontal": true,
           "scroll-size": scrollWidth.value,
@@ -9358,116 +9405,6 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _hoisted_1$3 = { class: "m-editor-float-box-body" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "FloatingBox",
-  props: {
-    visible: { type: Boolean, default: false },
-    position: { default: () => ({ left: 0, top: 0 }) },
-    rect: { default: () => ({ width: "auto", height: "auto" }) },
-    title: { default: "" }
-  },
-  emits: ["update:visible"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const target = ref();
-    const dragTarget = ref();
-    const style = computed(() => ({
-      left: `${props.position.left}px`,
-      top: `${props.position.top}px`,
-      width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
-      height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
-    }));
-    let moveable = null;
-    const initMoveable = () => {
-      moveable = new Moveable(globalThis.document.body, {
-        className: "m-editor-floating-box-moveable",
-        target: target.value,
-        draggable: true,
-        resizable: true,
-        edge: true,
-        keepRatio: false,
-        origin: false,
-        snappable: true,
-        dragTarget: dragTarget.value,
-        dragTargetSelf: false,
-        linePadding: 10,
-        controlPadding: 10
-      });
-      moveable.on("drag", (e) => {
-        e.target.style.transform = e.transform;
-      });
-      moveable.on("resize", (e) => {
-        e.target.style.width = `${e.width}px`;
-        e.target.style.height = `${e.height}px`;
-        e.target.style.transform = e.drag.transform;
-      });
-    };
-    const destroyMoveable = () => {
-      moveable?.destroy();
-      moveable = null;
-    };
-    watch(
-      () => props.visible,
-      async (visible) => {
-        if (visible) {
-          await nextTick();
-          initMoveable();
-        } else {
-          destroyMoveable();
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-    onBeforeUnmount(() => {
-      destroyMoveable();
-    });
-    const closeHandler = () => {
-      emit("update:visible", false);
-    };
-    __expose({
-      target
-    });
-    return (_ctx, _cache) => {
-      return _ctx.visible ? (openBlock(), createBlock(Teleport, {
-        key: 0,
-        to: "body"
-      }, [
-        createElementVNode("div", {
-          ref_key: "target",
-          ref: target,
-          class: "m-editor-float-box",
-          style: normalizeStyle(style.value)
-        }, [
-          createElementVNode("div", {
-            ref_key: "dragTarget",
-            ref: dragTarget,
-            class: "m-editor-float-box-title"
-          }, [
-            renderSlot(_ctx.$slots, "title", {}, () => [
-              createElementVNode("span", null, toDisplayString(_ctx.title), 1)
-            ]),
-            createElementVNode("div", null, [
-              createVNode(unref(TMagicButton), {
-                link: "",
-                size: "small",
-                icon: unref(Close),
-                onClick: closeHandler
-              }, null, 8, ["icon"])
-            ])
-          ], 512),
-          createElementVNode("div", _hoisted_1$3, [
-            renderSlot(_ctx.$slots, "body")
-          ])
-        ], 4)
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
   setup(__props) {
@@ -9550,7 +9487,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$8, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$p, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -9560,7 +9497,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           position: menuPosition.value
         }, {
           body: withCtx(() => [
-            createVNode(_sfc_main$n, {
+            createVNode(_sfc_main$m, {
               class: "m-editor-node-list-menu magic-editor-layer-tree",
               data: nodeData.value,
               "node-status-map": unref(nodeStatusMap),
@@ -9809,7 +9746,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$h, {
+      return openBlock(), createBlock(_sfc_main$g, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -9970,7 +9907,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$8, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
@@ -10579,6 +10516,8 @@ class StageOverlay extends BaseService {
     editorService.on("update", this.updateHandler);
     editorService.on("add", this.addHandler);
     editorService.on("remove", this.removeHandler);
+    editorService.on("drag-to", this.updateHandler);
+    editorService.on("move-layer", this.updateHandler);
   }
   closeOverlay() {
     this.set("stageOverlayVisible", false);
@@ -10592,6 +10531,8 @@ class StageOverlay extends BaseService {
     editorService.off("update", this.updateHandler);
     editorService.off("add", this.addHandler);
     editorService.off("remove", this.removeHandler);
+    editorService.off("drag-to", this.updateHandler);
+    editorService.off("move-layer", this.updateHandler);
   }
   updateOverlay() {
     const sourceEl = this.get("sourceEl");
@@ -10618,12 +10559,6 @@ class StageOverlay extends BaseService {
           });
         }
         const wrapDiv = this.get("wrapDiv");
-        const sourceEl = this.get("sourceEl");
-        wrapDiv.style.cssText = `
-            width: ${sourceEl?.scrollWidth}px;
-            height: ${sourceEl?.scrollHeight}px;
-            background-color: #fff;
-          `;
         await this.render();
         return wrapDiv;
       }
@@ -10650,11 +10585,17 @@ class StageOverlay extends BaseService {
   async render() {
     this.createContentEl();
     const contentEl = this.get("contentEl");
+    const sourceEl = this.get("sourceEl");
     const wrapDiv = this.get("wrapDiv");
     const subStage = this.get("stage");
     const stageOptions = this.get("stageOptions");
     if (!contentEl)
       return;
+    wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
     Array.from(wrapDiv.children).forEach((element) => {
       element.remove();
     });
@@ -10667,17 +10608,31 @@ class StageOverlay extends BaseService {
     }
   }
   updateHandler = () => {
-    this.render();
-    this.updateOverlay();
+    setTimeout(() => {
+      this.render();
+      this.updateOverlay();
+      this.updateSelectStatus();
+    });
   };
   addHandler = () => {
     this.render();
     this.updateOverlay();
+    this.updateSelectStatus();
   };
   removeHandler = () => {
     this.render();
     this.updateOverlay();
+    this.updateSelectStatus();
   };
+  updateSelectStatus() {
+    const subStage = this.get("stage");
+    const nodes = editorService.get("nodes");
+    if (nodes.length > 1) {
+      subStage?.multiSelect(nodes.map((n) => n.id));
+    } else {
+      subStage?.select(nodes[0].id);
+    }
+  }
 }
 const stageOverlayService = new StageOverlay();
 
@@ -11138,7 +11093,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         sidebar: withCtx(() => [
           renderSlot(_ctx.$slots, "sidebar", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$b, {
+            createVNode(_sfc_main$a, {
               data: _ctx.sidebar,
               "layer-content-menu": _ctx.layerContentMenu,
               "custom-content-menu": _ctx.customContentMenu
@@ -11262,4 +11217,4 @@ const index = {
   }
 };
 
-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, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$Q as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$N as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g 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$c 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, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };