@tmagic/editor 1.1.0-beta.1 → 1.1.0-beta.10

package/dist/{tmagic-editor.es.js → tmagic-editor.mjs}

@@ -1,11 +1,11 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, Teleport, toHandlers, createSlots, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createVNode, unref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, markRaw, renderList, normalizeProps, mergeProps, getCurrentInstance, Teleport, nextTick, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
-import { throttle, cloneDeep, mergeWith, random } from 'lodash-es';
+import { Delete, Close, Plus, Edit, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, ArrowDown, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { throttle, cloneDeep, mergeWith, isEmpty, uniq } from 'lodash-es';
 import * as monaco from 'monaco-editor';
-import StageCore, { GHOST_EL_ID_PREFIX, GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS } from '@tmagic/stage';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
 import { NodeType } from '@tmagic/schema';
-import { toLine, isPop, getNodePath, isNumber, isPage, removeClassNameByClassName, addClassName } from '@tmagic/utils';
+import { isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import Gesto from 'gesto';
@@ -19,15 +19,7 @@ if (typeof globalThis === "undefined") {
   window.globalThis = window;
 }
 
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-const _sfc_main$m = defineComponent({
+const _sfc_main$n = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
   emits: ["change"],
@@ -44,7 +36,16 @@ const _sfc_main$m = defineComponent({
     };
   }
 });
-function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_magic_code_editor = resolveComponent("magic-code-editor");
   return openBlock(), createBlock(_component_magic_code_editor, {
     style: normalizeStyle(`height: ${_ctx.height}`),
@@ -53,9 +54,9 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     onSave: _ctx.save
   }, null, 8, ["style", "init-values", "language", "onSave"]);
 }
-var Code = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
+const Code = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$g]]);
 
-const _sfc_main$l = defineComponent({
+const _sfc_main$m = defineComponent({
   name: "m-fields-code-link",
   props: {
     config: {
@@ -110,7 +111,8 @@ const _sfc_main$l = defineComponent({
     };
   }
 });
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_fields_link = resolveComponent("m-fields-link");
   return openBlock(), createBlock(_component_m_fields_link, {
     config: _ctx.formConfig,
@@ -119,26 +121,20 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["config", "model", "onChange"]);
 }
-var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
+const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$f]]);
 
-var UISelect_vue_vue_type_style_index_0_lang = /* #__PURE__ */ (() => ".m-fields-ui-select {\n  cursor: pointer;\n}\n.m-fields-ui-select i {\n  margin-right: 3px;\n}\n.m-fields-ui-select span {\n  color: #2882e0;\n}")();
-
-const _sfc_main$k = defineComponent({
-  name: "m-fields-ui-select",
+const _hoisted_1$d = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "UISelect",
   props: {
-    labelWidth: String,
-    config: Object,
-    model: Object,
-    prop: {
-      type: String,
-      default() {
-        return "";
-      }
-    },
-    name: String
+    config: null,
+    model: null,
+    prop: null,
+    name: null
   },
   emits: ["change"],
-  setup(props, { emit }) {
+  setup(__props, { emit }) {
+    const props = __props;
     const services = inject("services");
     const mForm = inject("mForm");
     const val = computed(() => props.model[props.name]);
@@ -160,92 +156,84 @@ const _sfc_main$k = defineComponent({
         cancelHandler();
       }
     };
-    return {
-      Delete: markRaw(Delete),
-      Pointer: markRaw(Pointer),
-      Close: markRaw(Close),
-      val,
-      uiSelectMode,
-      toName: computed(() => {
-        const config = services?.editorService.getNodeById(val.value);
-        return config?.name || "";
-      }),
-      startSelect() {
-        if (!services?.uiService)
-          return;
-        services.uiService.set("uiSelectMode", true);
-        uiSelectMode.value = true;
-        globalThis.document.addEventListener("ui-select", clickHandler);
-      },
-      cancelHandler,
-      deleteHandler() {
-        if (props.model) {
-          props.model[props.name] = "";
-          emit("change", "");
-          mForm?.$emit("field-change", props.prop, "");
-        }
+    const toName = computed(() => {
+      const config = services?.editorService.getNodeById(val.value);
+      return config?.name || "";
+    });
+    const startSelect = () => {
+      if (!services?.uiService)
+        return;
+      services.uiService.set("uiSelectMode", true);
+      uiSelectMode.value = true;
+      globalThis.document.addEventListener("ui-select", clickHandler);
+    };
+    const deleteHandler = () => {
+      if (props.model) {
+        props.model[props.name] = "";
+        emit("change", "");
+        mForm?.$emit("field-change", props.prop, "");
       }
     };
-  }
-});
-const _hoisted_1$d = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_button = resolveComponent("el-button");
-  const _component_el_tooltip = resolveComponent("el-tooltip");
-  return _ctx.uiSelectMode ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    class: "m-fields-ui-select",
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
-  }, [
-    createVNode(_component_el_button, {
-      type: "danger",
-      icon: _ctx.Delete,
-      text: "",
-      style: { "padding": "0" }
-    }, {
-      default: withCtx(() => [
-        _hoisted_1$d
-      ]),
-      _: 1
-    }, 8, ["icon"])
-  ])) : (openBlock(), createElementBlock("div", {
-    key: 1,
-    class: "m-fields-ui-select",
-    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.startSelect && _ctx.startSelect(...args)),
-    style: { "display": "flex" }
-  }, [
-    createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
-      default: withCtx(() => [
-        _ctx.val ? (openBlock(), createBlock(_component_el_button, {
-          key: 0,
-          style: { "padding": "0" },
-          type: "danger",
-          icon: _ctx.Close,
-          text: "",
-          onClick: withModifiers(_ctx.deleteHandler, ["stop"])
-        }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
-      ]),
-      _: 1
-    }),
-    createVNode(_component_el_tooltip, {
-      content: _ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
-    }, {
-      default: withCtx(() => [
+    return (_ctx, _cache) => {
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "m-fields-ui-select",
+        onClick: cancelHandler
+      }, [
         createVNode(_component_el_button, {
+          type: "danger",
+          icon: unref(Delete),
           text: "",
-          style: { "padding": "0", "margin": "0" }
+          style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1)
+            _hoisted_1$d
           ]),
           _: 1
-        })
-      ]),
-      _: 1
-    }, 8, ["content"])
-  ]));
-}
-var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
+        }, 8, ["icon"])
+      ])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: "m-fields-ui-select",
+        onClick: startSelect,
+        style: { "display": "flex" }
+      }, [
+        createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+          default: withCtx(() => [
+            unref(val) ? (openBlock(), createBlock(_component_el_button, {
+              key: 0,
+              style: { "padding": "0" },
+              type: "danger",
+              icon: unref(Close),
+              text: "",
+              onClick: withModifiers(deleteHandler, ["stop"])
+            }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
+        createVNode(_component_el_tooltip, {
+          content: unref(val) ? unref(toName) + "_" + unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_button, {
+              text: "",
+              style: { "padding": "0", "margin": "0" }
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(val) ? unref(toName) + "_" + unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["content"])
+      ]));
+    };
+  }
+});
+
+const UISelect_vue_vue_type_style_index_0_lang = '';
 
 const toString = (v, language) => {
   let value = "";
@@ -262,7 +250,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$j = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -369,14 +357,15 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
+
 const _hoisted_1$c = {
   ref: "codeEditor",
   class: "magic-code-editor"
 };
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$c, null, 512);
 }
-var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$e]]);
 
 let $TMAGIC_EDITOR = {};
 const setConfig = (option) => {
@@ -385,6 +374,9 @@ const setConfig = (option) => {
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
 class UndoRedo {
+  elementList;
+  listCursor;
+  listMaxSize;
   constructor(listMaxSize = 200) {
     const minListMaxSize = 2;
     this.elementList = [];
@@ -461,17 +453,12 @@ const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethod
   try {
     let beforeArgs = args;
     for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      let beforeReturnValue = await beforeMethod(...beforeArgs) || [];
-      if (isError(beforeReturnValue))
-        throw beforeReturnValue;
-      if (!Array.isArray(beforeReturnValue)) {
-        beforeReturnValue = [beforeReturnValue];
+      beforeArgs = await beforeMethod(...beforeArgs) || [];
+      if (isError(beforeArgs))
+        throw beforeArgs;
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
       }
-      beforeArgs = beforeArgs.map((v, index) => {
-        if (typeof beforeReturnValue[index] === "undefined")
-          return v;
-        return beforeReturnValue[index];
-      });
     }
     let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
     for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
@@ -485,12 +472,12 @@ const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethod
   }
 };
 class BaseService extends EventEmitter {
+  pluginOptionsList = {};
+  middleware = {};
+  taskList = [];
+  doingTask = false;
   constructor(methods = [], serialMethods = []) {
     super();
-    this.pluginOptionsList = {};
-    this.middleware = {};
-    this.taskList = [];
-    this.doingTask = false;
     methods.forEach((propertyName) => {
       const scope = this;
       const sourceMethod = scope[propertyName];
@@ -547,14 +534,14 @@ class BaseService extends EventEmitter {
 }
 
 class History extends BaseService {
+  state = reactive({
+    pageSteps: {},
+    pageId: void 0,
+    canRedo: false,
+    canUndo: false
+  });
   constructor() {
     super([]);
-    this.state = reactive({
-      pageSteps: {},
-      pageId: void 0,
-      canRedo: false,
-      canUndo: false
-    });
     this.on("change", this.setCanUndoRedo);
   }
   reset() {
@@ -623,88 +610,88 @@ class History extends BaseService {
     this.state.canUndo = undoRedo?.canUndo() || false;
   }
 }
-var historyService = new History();
+const historyService = new History();
 
-class Props extends BaseService {
+var Protocol = /* @__PURE__ */ ((Protocol2) => {
+  Protocol2["OBJECT"] = "object";
+  Protocol2["JSON"] = "json";
+  Protocol2["STRING"] = "string";
+  Protocol2["NUMBER"] = "number";
+  Protocol2["BOOLEAN"] = "boolean";
+  return Protocol2;
+})(Protocol || {});
+class WebStorage extends BaseService {
+  storage = globalThis.localStorage;
+  namespace = "tmagic";
   constructor() {
-    super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue", "createId", "setNewItemId"]);
-    this.state = reactive({
-      propsConfigMap: {},
-      propsValueMap: {}
-    });
+    super(["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]);
   }
-  setPropsConfigs(configs) {
-    Object.keys(configs).forEach((type) => {
-      this.setPropsConfig(toLine(type), configs[type]);
-    });
-    this.emit("props-configs-change");
+  async getStorage() {
+    return this.storage;
   }
-  setPropsConfig(type, config) {
-    this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+  async getNamespace() {
+    return this.namespace;
   }
-  async getPropsConfig(type) {
-    if (type === "area") {
-      return await this.getPropsConfig("button");
+  async clear() {
+    const storage2 = await this.getStorage();
+    storage2.clear();
+  }
+  async getItem(key, options = {}) {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    const { protocol = options.protocol, item } = this.getValueAndProtocol(storage.getItem(`${options.namespace || namespace}:${key}`));
+    if (item === null)
+      return null;
+    switch (protocol) {
+      case "object" /* OBJECT */:
+        return eval(`(${item})`);
+      case "json" /* JSON */:
+        return JSON.parse(item);
+      case "number" /* NUMBER */:
+        return Number(item);
+      case "boolean" /* BOOLEAN */:
+        return Boolean(item);
+      default:
+        return item;
     }
-    return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
   }
-  setPropsValues(values) {
-    Object.keys(values).forEach((type) => {
-      this.setPropsValue(toLine(type), values[type]);
-    });
+  async key(index) {
+    const storage2 = await this.getStorage();
+    return storage2.key(index);
   }
-  setPropsValue(type, value) {
-    this.state.propsValueMap[type] = value;
+  async removeItem(key2, options2 = {}) {
+    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
   }
-  async getPropsValue(type, defaultValue = {}) {
-    if (type === "area") {
-      const value = await this.getPropsValue("button");
-      value.className = "action-area";
-      value.text = "";
-      if (value.style) {
-        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
-      }
-      return value;
+  async setItem(key2, value, options2 = {}) {
+    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    let item2 = value;
+    const protocol2 = options2.protocol ? `${options2.protocol}:` : "";
+    if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
+      item2 = `${protocol2}${value}`;
+    } else {
+      item2 = `${protocol2}${serialize(value)}`;
+    }
+    storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
+  }
+  getValueAndProtocol(value) {
+    let protocol2 = "";
+    if (value === null) {
+      return {
+        item: value,
+        protocol: protocol2
+      };
     }
-    const data = cloneDeep(defaultValue);
-    await this.setNewItemId(data);
+    const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+      protocol2 = $1;
+      return $3;
+    });
     return {
-      ...getDefaultPropsValue(type, await this.createId(type)),
-      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data)
+      protocol: protocol2,
+      item: item2
     };
   }
-  async createId(type) {
-    return `${type}_${random(1e4, false)}`;
-  }
-  async setNewItemId(config, parent) {
-    const oldId = config.id;
-    config.id = await this.createId(config.type || "component");
-    if (isPop(config) && parent?.type === NodeType.PAGE) {
-      updatePopId(oldId, config.id, parent);
-    }
-    if (config.items && Array.isArray(config.items)) {
-      for (const item of config.items) {
-        await this.setNewItemId(item, config);
-      }
-    }
-  }
 }
-const updatePopId = (oldId, popId, pageConfig) => {
-  pageConfig.items?.forEach((config) => {
-    if (config.pop === oldId) {
-      config.pop = popId;
-      return;
-    }
-    if (config.popId === oldId) {
-      config.popId = popId;
-      return;
-    }
-    if (Array.isArray(config.items)) {
-      updatePopId(oldId, popId, config);
-    }
-  });
-};
-var propsService = new Props();
+const storageService = new WebStorage();
 
 var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
   LayerOffset2["TOP"] = "top";
@@ -756,10 +743,10 @@ const getRelativeStyle = (style = {}) => ({
   top: 0,
   left: 0
 });
-const getMiddleTop = (style = {}, parentNode, stage) => {
-  let height = style.height || 0;
-  if (!stage || typeof style.top !== "undefined" || !parentNode.style)
-    return style.top;
+const getMiddleTop = (node, parentNode, stage) => {
+  let height = node.style?.height || 0;
+  if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style)
+    return node.style?.top;
   if (!isNumber(height)) {
     height = 0;
   }
@@ -770,12 +757,11 @@ const getMiddleTop = (style = {}, parentNode, stage) => {
   }
   return (parentHeight - height) / 2;
 };
-const getInitPositionStyle = (style = {}, layout, parentNode, stage) => {
+const getInitPositionStyle = (style = {}, layout) => {
   if (layout === Layout.ABSOLUTE) {
     return {
       ...style,
-      position: "absolute",
-      top: getMiddleTop(style, parentNode, stage)
+      position: "absolute"
     };
   }
   if (layout === Layout.RELATIVE) {
@@ -861,34 +847,229 @@ const fixNodeLeft = (config, parent, doc) => {
     return config.style?.left;
   const el = doc.getElementById(`${config.id}`);
   const parentEl = doc.getElementById(`${parent.id}`);
-  if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+  const left = Number(config.style?.left) || 0;
+  if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
     return parentEl.offsetWidth - el.offsetWidth;
   }
   return config.style.left;
 };
-
-const log = (...args) => {
+const fixNodePosition = (config, parent, stage) => {
+  if (config.style?.position !== "absolute") {
+    return config.style;
+  }
+  return {
+    ...config.style || {},
+    top: getMiddleTop(config, parent, stage),
+    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+  };
 };
-const info = (...args) => {
+
+class Props extends BaseService {
+  state = reactive({
+    propsConfigMap: {},
+    propsValueMap: {}
+  });
+  constructor() {
+    super([
+      "setPropsConfig",
+      "getPropsConfig",
+      "setPropsValue",
+      "getPropsValue",
+      "createId",
+      "setNewItemId",
+      "getDefaultPropsValue"
+    ]);
+  }
+  setPropsConfigs(configs) {
+    Object.keys(configs).forEach((type) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit("props-configs-change");
+  }
+  setPropsConfig(type, config) {
+    this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+  }
+  async getPropsConfig(type) {
+    if (type === "area") {
+      return await this.getPropsConfig("button");
+    }
+    return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+  }
+  setPropsValues(values) {
+    Object.keys(values).forEach((type) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+  setPropsValue(type, value) {
+    this.state.propsValueMap[type] = value;
+  }
+  async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
+    if (type === "area") {
+      const value = await this.getPropsValue("button");
+      value.className = "action-area";
+      value.text = "";
+      if (value.style) {
+        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+      }
+      return value;
+    }
+    const [id, defaultPropsValue, data] = await Promise.all([
+      this.createId(type),
+      this.getDefaultPropsValue(type),
+      this.setNewItemId(cloneDeep({
+        type,
+        ...defaultValue
+      }))
+    ]);
+    return {
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
+    };
+  }
+  guid(digit = 8) {
+    return "x".repeat(digit).replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c == "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  async createId(type) {
+    return `${type}_${this.guid()}`;
+  }
+  async setNewItemId(config, parent) {
+    const oldId = config.id;
+    config.id = await this.createId(config.type || "component");
+    if (isPop(config) && parent?.type === NodeType.PAGE) {
+      updatePopId(oldId, config.id, parent);
+    }
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        await this.setNewItemId(item, config);
+      }
+    }
+    return config;
+  }
+  async getDefaultPropsValue(type) {
+    return ["page", "container"].includes(type) ? {
+      type,
+      layout: "absolute",
+      style: {},
+      name: type,
+      items: []
+    } : {
+      type,
+      style: {},
+      name: type
+    };
+  }
+}
+const updatePopId = (oldId, popId, pageConfig) => {
+  pageConfig.items?.forEach((config) => {
+    if (config.pop === oldId) {
+      config.pop = popId;
+      return;
+    }
+    if (config.popId === oldId) {
+      config.popId = popId;
+      return;
+    }
+    if (Array.isArray(config.items)) {
+      updatePopId(oldId, popId, config);
+    }
+  });
 };
-const warn = (...args) => {
+const propsService = new Props();
+
+const beforePaste = async (position, config) => {
+  if (!config[0]?.style)
+    return config;
+  const curNode = editorService.get("node");
+  const { left: referenceLeft, top: referenceTop } = config[0].style;
+  const pasteConfigs = await Promise.all(config.map(async (configItem) => {
+    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+    let pastePosition = positionClone;
+    if (!isEmpty(pastePosition) && curNode.items) {
+      pastePosition = getPositionInContainer(pastePosition, curNode.id);
+    }
+    if (pastePosition.left && configItem.style?.left) {
+      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+    }
+    if (pastePosition.top && configItem.style?.top) {
+      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+    }
+    const pasteConfig = await propsService.setNewItemId(configItem, editorService.get("root"));
+    if (pasteConfig.style) {
+      const { left, top } = pasteConfig.style;
+      if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+        pasteConfig.style.left = Number(left) + offsetX;
+      }
+      if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+        pasteConfig.style.top = Number(top) + offsetY;
+      }
+      pasteConfig.style = {
+        ...pasteConfig.style,
+        ...pastePosition
+      };
+    }
+    if (isPage(pasteConfig)) {
+      pasteConfig.name = generatePageNameByApp(editorService.get("root"));
+    }
+    return pasteConfig;
+  }));
+  return pasteConfigs;
 };
-const debug = (...args) => {
+const getPositionInContainer = (position = {}, id) => {
+  let { left = 0, top = 0 } = position;
+  const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const parentElRect = parentEl?.getBoundingClientRect();
+  left = left - (parentElRect?.left || 0);
+  top = top - (parentElRect?.top || 0);
+  return {
+    left,
+    top
+  };
 };
-const error = (...args) => {
+const getAddParent = (node) => {
+  const curNode = editorService.get("node");
+  let parentNode;
+  if (isPage(node)) {
+    parentNode = editorService.get("root");
+  } else if (curNode.items) {
+    parentNode = curNode;
+  } else {
+    parentNode = editorService.getParentById(curNode.id, false);
+  }
+  return parentNode;
 };
 
 class Editor$1 extends BaseService {
+  state = reactive({
+    root: null,
+    page: null,
+    parent: null,
+    node: null,
+    nodes: [],
+    stage: null,
+    highlightNode: null,
+    modifiedNodeIds: /* @__PURE__ */ new Map(),
+    pageLength: 0
+  });
+  isHistoryStateChange = false;
   constructor() {
     super([
       "getLayout",
       "select",
+      "doAdd",
       "add",
+      "doRemove",
       "remove",
+      "doUpdate",
       "update",
       "sort",
       "copy",
       "paste",
+      "duAlignCenter",
       "alignCenter",
       "moveLayer",
       "moveToContainer",
@@ -897,20 +1078,12 @@ class Editor$1 extends BaseService {
       "redo",
       "highlight"
     ], ["select", "update", "moveLayer"]);
-    this.isHistoryStateChange = false;
-    this.state = reactive({
-      root: null,
-      page: null,
-      parent: null,
-      node: null,
-      stage: null,
-      highlightNode: null,
-      modifiedNodeIds: /* @__PURE__ */ new Map(),
-      pageLength: 0
-    });
   }
   set(name, value) {
     this.state[name] = value;
+    if (name === "nodes") {
+      this.set("node", value[0]);
+    }
     if (name === "root") {
       this.state.pageLength = value?.items?.length || 0;
       this.emit("root-change", value);
@@ -965,9 +1138,9 @@ class Editor$1 extends BaseService {
     }
     return Layout.ABSOLUTE;
   }
-  async select(config2) {
-    const { node, page, parent } = this.selectedConfigExceptionHandler(config2);
-    this.set("node", node);
+  async select(config) {
+    const { node, page, parent } = this.selectedConfigExceptionHandler(config);
+    this.set("nodes", [node]);
     this.set("page", page || null);
     this.set("parent", parent || null);
     if (page) {
@@ -1007,65 +1180,83 @@ class Editor$1 extends BaseService {
     this.get("stage")?.select(nextPage.id);
     return nextPage;
   }
-  highlight(config2) {
-    const { node } = this.selectedConfigExceptionHandler(config2);
+  highlight(config) {
+    const { node } = this.selectedConfigExceptionHandler(config);
     const currentHighlightNode = this.get("highlightNode");
     if (currentHighlightNode === node)
       return;
     this.set("highlightNode", node);
   }
-  async add(addNode, parent) {
-    const { type, ...config2 } = addNode;
+  multiSelect(ids) {
+    const nodes = [];
+    const idsUnique = uniq(ids);
+    idsUnique.forEach((id) => {
+      const { node } = this.getNodeInfo(id);
+      if (!node)
+        return;
+      nodes.push(node);
+    });
+    this.set("nodes", nodes);
+  }
+  async doAdd(node, parent) {
+    const root = this.get("root");
     const curNode = this.get("node");
-    let parentNode;
-    const isPage2 = type === NodeType.PAGE;
-    if (isPage2) {
-      parentNode = this.get("root");
-    } else if (parent && typeof parent !== "function") {
-      parentNode = parent;
-    } else if (curNode.items) {
-      parentNode = curNode;
-    } else {
-      parentNode = this.getParentById(curNode.id, false);
-    }
-    if (!parentNode)
-      throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-    const layout = await this.getLayout(toRaw(parentNode), addNode);
-    const newNode = { ...toRaw(await propsService.getPropsValue(type, config2)) };
-    newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get("stage"));
-    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
+    const stage = this.get("stage");
+    if ((parent?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
-    parentNode?.items?.push(newNode);
+    parent?.items?.push(node);
+    const layout = await this.getLayout(toRaw(parent), node);
+    node.style = getInitPositionStyle(node.style, layout);
+    await stage?.add({
+      config: cloneDeep(node),
+      parent: cloneDeep(parent),
+      parentId: parent.id,
+      root: cloneDeep(root)
+    });
+    node.style = fixNodePosition(node, parent, stage);
+    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+    this.addModifiedNodeId(node.id);
+    return node;
+  }
+  async add(addNode, parent) {
     const stage = this.get("stage");
-    const root = this.get("root");
-    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(root) });
-    if (layout === Layout.ABSOLUTE) {
-      const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
-      if (typeof fixedLeft !== "undefined") {
-        newNode.style.left = fixedLeft;
-        await stage?.update({ config: cloneDeep(newNode), root: cloneDeep(root) });
-      }
+    const addNodes = [];
+    if (!Array.isArray(addNode)) {
+      const { type, inputEvent, ...config } = addNode;
+      if (!type)
+        throw new Error("\u7EC4\u4EF6\u7C7B\u578B\u4E0D\u80FD\u4E3A\u7A7A");
+      addNodes.push({ ...toRaw(await propsService.getPropsValue(type, config)) });
+    } else {
+      addNodes.push(...addNode);
     }
-    await this.select(newNode);
-    this.addModifiedNodeId(newNode.id);
-    if (!isPage2) {
-      this.pushHistoryState();
-    }
-    stage?.select(newNode.id);
-    if (isPage2) {
-      this.state.pageLength += 1;
+    const newNodes = await Promise.all(addNodes.map((node) => {
+      const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
+      if (!parentNode)
+        throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
+      return this.doAdd(node, parentNode);
+    }));
+    if (newNodes.length > 1) {
+      const newNodeIds = newNodes.map((node) => node.id);
+      stage?.multiSelect(newNodeIds);
+      await this.multiSelect(newNodeIds);
+    } else {
+      await this.select(newNodes[0]);
+      if (isPage(newNodes[0])) {
+        this.state.pageLength += 1;
+      } else {
+        stage?.select(newNodes[0].id);
+      }
     }
-    this.emit("add", newNode);
-    return newNode;
+    this.pushHistoryState();
+    this.emit("add", newNodes);
+    return newNodes.length > 1 ? newNodes[0] : newNodes;
   }
-  async remove(node) {
-    if (!node?.id)
-      return;
+  async doRemove(node) {
     const root = this.get("root");
     if (!root)
       throw new Error("\u6CA1\u6709root");
-    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
+    const { parent, node: curNode } = this.getNodeInfo(node.id);
     if (!parent || !curNode)
       throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
     const index = getNodeIndex(curNode, parent);
@@ -1073,7 +1264,7 @@ class Editor$1 extends BaseService {
       throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
     parent.items?.splice(index, 1);
     const stage = this.get("stage");
-    stage?.remove({ id: node.id, root: cloneDeep(this.get("root")) });
+    stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
     if (node.type === NodeType.PAGE) {
       this.state.pageLength -= 1;
       if (root.items[0]) {
@@ -1087,26 +1278,28 @@ class Editor$1 extends BaseService {
         this.set("highlightNode", null);
         this.resetModifiedNodeId();
         historyService.reset();
-        this.emit("remove", node);
-        return node;
+        return;
       }
     } else {
       await this.select(parent);
       stage?.select(parent.id);
     }
     this.addModifiedNodeId(parent.id);
+  }
+  async remove(nodeOrNodeList) {
+    const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+    await Promise.all(nodes.map((node) => this.doRemove(node)));
     this.pushHistoryState();
-    this.emit("remove", node);
-    return node;
+    this.emit("remove");
   }
-  async update(config2) {
-    if (!config2?.id)
+  async doUpdate(config) {
+    if (!config?.id)
       throw new Error("\u6CA1\u6709\u914D\u7F6E\u6216\u8005\u914D\u7F6E\u7F3A\u5C11id\u503C");
-    const info = this.getNodeInfo(config2.id, false);
+    const info = this.getNodeInfo(config.id, false);
     if (!info.node)
-      throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config2.id}\u7684\u8282\u70B9`);
+      throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config.id}\u7684\u8282\u70B9`);
     const node = cloneDeep(toRaw(info.node));
-    let newConfig = await this.toggleFixedPosition(toRaw(config2), node, this.get("root"));
+    let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get("root"));
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
       if (Array.isArray(srcValue)) {
         return srcValue;
@@ -1131,18 +1324,28 @@ class Editor$1 extends BaseService {
       newConfig = setLayout(newConfig, newLayout);
     }
     parentNodeItems[index] = newConfig;
-    if (`${newConfig.id}` === `${this.get("node").id}`) {
-      this.set("node", newConfig);
-    }
-    this.get("stage")?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get("root")) });
+    const nodes = this.get("nodes");
+    const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
+    nodes.splice(targetIndex, 1, newConfig);
+    this.set("nodes", nodes);
+    this.get("stage")?.update({
+      config: cloneDeep(newConfig),
+      parentId: parent.id,
+      root: cloneDeep(this.get("root"))
+    });
     if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
     }
     this.addModifiedNodeId(newConfig.id);
-    this.pushHistoryState();
-    this.emit("update", newConfig);
     return newConfig;
   }
+  async update(config) {
+    const nodes = Array.isArray(config) ? config : [config];
+    const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+    this.pushHistoryState();
+    this.emit("update", newNodes);
+    return newNodes.length > 1 ? newNodes[0] : newNodes;
+  }
   async sort(id1, id2) {
     const node = this.get("node");
     const parent = cloneDeep(toRaw(this.get("parent")));
@@ -1153,65 +1356,57 @@ class Editor$1 extends BaseService {
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
     await this.update(parent);
     await this.select(node);
-    this.get("stage")?.update({ config: cloneDeep(node), root: cloneDeep(this.get("root")) });
+    this.get("stage")?.update({
+      config: cloneDeep(node),
+      parentId: parent.id,
+      root: cloneDeep(this.get("root"))
+    });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
-  async copy(config2) {
-    globalThis.localStorage.setItem(COPY_STORAGE_KEY, serialize(config2));
+  async copy(config) {
+    await storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+      protocol: Protocol.OBJECT
+    });
   }
   async paste(position = {}) {
-    const configStr = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
-    let config = {};
-    if (!configStr) {
-      return;
-    }
-    try {
-      eval(`config = ${configStr}`);
-    } catch (e) {
-      console.error(e);
+    const config = await storageService.getItem(COPY_STORAGE_KEY);
+    if (!Array.isArray(config))
       return;
-    }
-    await propsService.setNewItemId(config, this.get("root"));
-    if (config.style) {
-      config.style = {
-        ...config.style,
-        ...position
-      };
-    }
-    if (isPage(config)) {
-      config.name = generatePageNameByApp(this.get("root"));
-    }
-    return await this.add(config);
+    const pasteConfigs = await beforePaste(position, config);
+    return this.add(pasteConfigs);
   }
-  async alignCenter(config2) {
-    const parent = this.get("parent");
-    const node = this.get("node");
-    const layout = await this.getLayout(toRaw(parent), toRaw(node));
+  async doAlignCenter(config) {
+    const parent = this.getParentById(config.id);
+    if (!parent)
+      throw new Error("\u627E\u4E0D\u5230\u7236\u8282\u70B9");
+    const node = cloneDeep(toRaw(config));
+    const layout = await this.getLayout(parent, node);
     if (layout === Layout.RELATIVE) {
-      return;
+      return config;
     }
     if (!node.style)
-      return;
+      return config;
     const stage = this.get("stage");
     const doc = stage?.renderer.contentWindow?.document;
     if (doc) {
-      const parentEl = doc.getElementById(`${parent.id}`);
       const el = doc.getElementById(`${node.id}`);
+      const parentEl = el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
-    await this.update(node);
-    this.get("stage")?.update({
-      config: cloneDeep(toRaw(node)),
-      root: cloneDeep(this.get("root"))
-    });
-    this.addModifiedNodeId(config2.id);
-    this.pushHistoryState();
-    return config2;
+    return node;
+  }
+  async alignCenter(config) {
+    const nodes = Array.isArray(config) ? config : [config];
+    const stage = this.get("stage");
+    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
+    const newNode = await this.update(newNodes);
+    await stage?.multiSelect(newNodes.map((node) => node.id));
+    return newNode;
   }
   async moveLayer(offset) {
     const parent = this.get("parent");
@@ -1227,28 +1422,29 @@ class Editor$1 extends BaseService {
     }
     this.get("stage")?.update({
       config: cloneDeep(toRaw(parent)),
+      parentId: parent.id,
       root: cloneDeep(this.get("root"))
     });
   }
-  async moveToContainer(config2, targetId) {
-    const { node, parent } = this.getNodeInfo(config2.id, false);
+  async moveToContainer(config, targetId) {
+    const { node, parent } = this.getNodeInfo(config.id, false);
     const target = this.getNodeById(targetId, false);
     const stage = this.get("stage");
     if (node && parent && stage) {
       const root = cloneDeep(this.get("root"));
       const index = getNodeIndex(node, parent);
       parent.items?.splice(index, 1);
-      await stage.remove({ id: node.id, root });
+      await stage.remove({ id: node.id, parentId: parent.id, root });
       const layout = await this.getLayout(target);
-      const newConfig = mergeWith(cloneDeep(node), config2, (objValue, srcValue) => {
+      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
           return srcValue;
         }
       });
-      newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
       target.items.push(newConfig);
       await stage.select(targetId);
-      await stage.update({ config: cloneDeep(target), root });
+      await stage.update({ config: cloneDeep(target), parentId: parent.id, root });
       await this.select(newConfig);
       stage.select(newConfig.id);
       this.addModifiedNodeId(target.id);
@@ -1271,7 +1467,7 @@ class Editor$1 extends BaseService {
     const node = toRaw(this.get("node"));
     if (!node || isPage(node))
       return;
-    const { style, id } = node;
+    const { style, id, type } = node;
     if (!style || style.position !== "absolute")
       return;
     if (top && !isNumber(style.top))
@@ -1280,6 +1476,7 @@ class Editor$1 extends BaseService {
       return;
     this.update({
       id,
+      type,
       style: {
         ...style,
         left: Number(style.left) + left,
@@ -1291,6 +1488,7 @@ class Editor$1 extends BaseService {
     this.removeAllListeners();
     this.set("root", null);
     this.set("node", null);
+    this.set("nodes", []);
     this.set("page", null);
     this.set("parent", null);
   }
@@ -1337,12 +1535,12 @@ class Editor$1 extends BaseService {
     }
     return newConfig;
   }
-  selectedConfigExceptionHandler(config2) {
+  selectedConfigExceptionHandler(config) {
     let id;
-    if (typeof config2 === "string" || typeof config2 === "number") {
-      id = config2;
+    if (typeof config === "string" || typeof config === "number") {
+      id = config;
     } else {
-      id = config2.id;
+      id = config.id;
     }
     if (!id) {
       throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
@@ -1360,7 +1558,7 @@ class Editor$1 extends BaseService {
     };
   }
 }
-var editorService = new Editor$1();
+const editorService = new Editor$1();
 
 const eventMap = reactive({});
 const methodMap = reactive({});
@@ -1404,7 +1602,7 @@ class Events extends BaseService {
     return cloneDeep(methodMap[type] || DEFAULT_METHODS);
   }
 }
-var eventsService = new Events();
+const eventsService = new Events();
 
 const fillConfig = (config = []) => [
   {
@@ -1610,21 +1808,34 @@ const fillConfig = (config = []) => [
   }
 ];
 const DEFAULT_CONFIG = fillConfig([]);
-const getDefaultPropsValue = (type, id) => ["page", "container"].includes(type) ? {
-  type,
-  id,
-  layout: "absolute",
-  style: {},
-  name: type,
-  items: []
-} : {
-  type,
-  id,
-  style: {},
-  name: type
+
+const log = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.log("magic editor: ", ...args);
+  }
+};
+const info = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.info("magic editor: ", ...args);
+  }
+};
+const warn = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.warn("magic editor: ", ...args);
+  }
+};
+const debug = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.debug("magic editor: ", ...args);
+  }
+};
+const error = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.error("magic editor: ", ...args);
+  }
 };
 
-const _sfc_main$i = defineComponent({
+const _sfc_main$j = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -1641,10 +1852,11 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
+
 const _hoisted_1$b = { class: "m-editor-empty-panel" };
 const _hoisted_2$4 = { class: "m-editor-empty-content" };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$b, [
@@ -1661,14 +1873,14 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
           })
         ]),
-        _hoisted_3$2
+        _hoisted_3$1
       ])
     ])
   ]);
 }
-var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 
-const _sfc_main$h = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "m-editor-resize",
   props: {
     type: {
@@ -1710,18 +1922,19 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
+
 const _hoisted_1$a = {
   ref: "target",
   class: "m-editor-resizer"
 };
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", _hoisted_1$a, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
-var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$c]]);
 
-const _sfc_main$g = defineComponent({
+const _sfc_main$h = defineComponent({
   components: {
     AddPageBox,
     Resizer
@@ -1750,12 +1963,13 @@ const _sfc_main$g = defineComponent({
     };
   }
 });
+
 const _hoisted_1$9 = { class: "m-editor" };
 const _hoisted_2$3 = {
   key: 1,
   class: "m-editor-content"
 };
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_magic_code_editor = resolveComponent("magic-code-editor");
   const _component_resizer = resolveComponent("resizer");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
@@ -1801,9 +2015,9 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
+const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$b]]);
 
-const _sfc_main$f = defineComponent({
+const _sfc_main$g = defineComponent({
   name: "m-icon",
   components: { Edit },
   props: {
@@ -1817,8 +2031,9 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
+
 const _hoisted_1$8 = ["src"];
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_edit = resolveComponent("edit");
   const _component_el_icon = resolveComponent("el-icon");
   return !_ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
@@ -1826,10 +2041,12 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_edit)
     ]),
     _: 1
-  })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createElementBlock("img", {
-    key: 1,
-    src: _ctx.icon
-  }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+  })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, { key: 1 }, {
+    default: withCtx(() => [
+      createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$8)
+    ]),
+    _: 1
+  })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
     key: 2,
     class: normalizeClass(_ctx.icon)
   }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
@@ -1839,10 +2056,19 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }));
 }
-var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+const MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$a]]);
 
-const _sfc_main$e = defineComponent({
-  components: { MIcon, ArrowDown },
+const _hoisted_1$7 = {
+  key: 1,
+  class: "menu-item-text"
+};
+const _hoisted_2$2 = {
+  class: "menu-item-text",
+  style: { "margin": "0 5px" }
+};
+const _hoisted_3 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "ToolButton",
   props: {
     data: {
       type: [Object, String],
@@ -1857,7 +2083,8 @@ const _sfc_main$e = defineComponent({
       default: "click"
     }
   },
-  setup(props) {
+  setup(__props) {
+    const props = __props;
     const services = inject("services");
     const uiService = services?.uiService;
     const zoom = computed(() => uiService?.get("zoom") ?? 1);
@@ -1954,176 +2181,155 @@ const _sfc_main$e = defineComponent({
         item2.handler?.(services, event);
       }
     };
-    return {
-      ZoomIn: markRaw(ZoomIn),
-      ZoomOut: markRaw(ZoomOut),
-      item,
-      zoom,
-      disabled,
-      display: computed(() => {
-        if (!item.value)
-          return false;
-        if (typeof item.value === "string")
-          return true;
-        if (typeof item.value.display === "function") {
-          return item.value.display(services);
-        }
-        return item.value.display ?? true;
-      }),
-      zoomInHandler,
-      zoomOutHandler,
-      dropdownHandler(command) {
-        if (command.item.handler) {
-          command.item.handler(services);
-        }
-      },
-      clickHandler(item2, event) {
-        if (props.eventType !== "click")
-          return;
-        if (item2.type === "button") {
-          buttonHandler(item2, event);
-        }
-      },
-      mousedownHandler(item2, event) {
-        if (props.eventType !== "mousedown")
-          return;
-        if (item2.type === "button") {
-          buttonHandler(item2, event);
-        }
-      },
-      mouseupHandler(item2, event) {
-        if (props.eventType !== "mouseup")
-          return;
-        if (item2.type === "button") {
-          buttonHandler(item2, event);
-        }
+    const display = computed(() => {
+      if (!item.value)
+        return false;
+      if (typeof item.value === "string")
+        return true;
+      if (typeof item.value.display === "function") {
+        return item.value.display(services);
+      }
+      return item.value.display ?? true;
+    });
+    const dropdownHandler = (command) => {
+      if (command.item.handler) {
+        command.item.handler(services);
       }
     };
-  }
-});
-const _hoisted_1$7 = {
-  key: 1,
-  class: "menu-item-text"
-};
-const _hoisted_2$2 = {
-  class: "menu-item-text",
-  style: { "margin": "0 5px" }
-};
-const _hoisted_3$1 = { class: "el-dropdown-link menubar-menu-button" };
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_divider = resolveComponent("el-divider");
-  const _component_tool_button = resolveComponent("tool-button", true);
-  const _component_m_icon = resolveComponent("m-icon");
-  const _component_el_button = resolveComponent("el-button");
-  const _component_el_tooltip = resolveComponent("el-tooltip");
-  const _component_arrow_down = resolveComponent("arrow-down");
-  const _component_el_icon = resolveComponent("el-icon");
-  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
-  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
-  const _component_el_dropdown = resolveComponent("el-dropdown");
-  return _ctx.display ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    class: normalizeClass(["menu-item", _ctx.item.type]),
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickHandler(_ctx.item, $event)),
-    onMousedown: _cache[1] || (_cache[1] = ($event) => _ctx.mousedownHandler(_ctx.item, $event)),
-    onMouseup: _cache[2] || (_cache[2] = ($event) => _ctx.mouseupHandler(_ctx.item, $event))
-  }, [
-    _ctx.item.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
-      key: 0,
-      direction: _ctx.item.direction || "vertical"
-    }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$7, toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-      createVNode(_component_tool_button, {
-        data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
-        "event-type": _ctx.eventType
-      }, null, 8, ["data", "event-type"]),
-      createElementVNode("span", _hoisted_2$2, toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
-      createVNode(_component_tool_button, {
-        data: { type: "button", icon: _ctx.ZoomIn, handler: _ctx.zoomInHandler, tooltip: "\u653E\u5927" },
-        "event-type": _ctx.eventType
-      }, null, 8, ["data", "event-type"])
-    ], 64)) : _ctx.item.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-      _ctx.item.tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
+    const clickHandler = (item2, event) => {
+      if (props.eventType !== "click")
+        return;
+      if (item2.type === "button") {
+        buttonHandler(item2, event);
+      }
+    };
+    const mousedownHandler = (item2, event) => {
+      if (props.eventType !== "mousedown")
+        return;
+      if (item2.type === "button") {
+        buttonHandler(item2, event);
+      }
+    };
+    const mouseupHandler = (item2, event) => {
+      if (props.eventType !== "mouseup")
+        return;
+      if (item2.type === "button") {
+        buttonHandler(item2, event);
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_el_divider = resolveComponent("el-divider");
+      const _component_tool_button = resolveComponent("tool-button", true);
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+      const _component_el_dropdown = resolveComponent("el-dropdown");
+      return unref(display) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        effect: "dark",
-        placement: "bottom-start",
-        content: _ctx.item.tooltip
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_el_button, {
+        class: normalizeClass(["menu-item", unref(item).type]),
+        onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(item), $event)),
+        onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(unref(item), $event)),
+        onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(unref(item), $event))
+      }, [
+        unref(item).type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
+          key: 0,
+          direction: unref(item).direction || "vertical"
+        }, null, 8, ["direction"])) : unref(item).type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$7, toDisplayString(unref(item).text), 1)) : unref(item).type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          createVNode(_component_tool_button, {
+            data: { type: "button", icon: unref(ZoomOut), handler: zoomOutHandler, tooltip: "\u7F29\u5C0F" },
+            "event-type": __props.eventType
+          }, null, 8, ["data", "event-type"]),
+          createElementVNode("span", _hoisted_2$2, toDisplayString(parseInt(`${unref(zoom) * 100}`, 10)) + "%", 1),
+          createVNode(_component_tool_button, {
+            data: { type: "button", icon: unref(ZoomIn), handler: zoomInHandler, tooltip: "\u653E\u5927" },
+            "event-type": __props.eventType
+          }, null, 8, ["data", "event-type"])
+        ], 64)) : unref(item).type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+          unref(item).tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
+            key: 0,
+            effect: "dark",
+            placement: "bottom-start",
+            content: unref(item).tooltip
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_button, {
+                size: "small",
+                text: "",
+                disabled: unref(disabled)
+              }, {
+                default: withCtx(() => [
+                  unref(item).icon ? (openBlock(), createBlock(MIcon, {
+                    key: 0,
+                    icon: unref(item).icon
+                  }, null, 8, ["icon"])) : createCommentVNode("", true),
+                  createElementVNode("span", null, toDisplayString(unref(item).text), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["content"])) : (openBlock(), createBlock(_component_el_button, {
+            key: 1,
             size: "small",
             text: "",
-            disabled: _ctx.disabled
+            disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              _ctx.item.icon ? (openBlock(), createBlock(_component_m_icon, {
+              unref(item).icon ? (openBlock(), createBlock(MIcon, {
                 key: 0,
-                icon: _ctx.item.icon
+                icon: unref(item).icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              createElementVNode("span", null, toDisplayString(_ctx.item.text), 1)
+              createElementVNode("span", null, toDisplayString(unref(item).text), 1)
             ]),
             _: 1
-          }, 8, ["disabled"])
-        ]),
-        _: 1
-      }, 8, ["content"])) : (openBlock(), createBlock(_component_el_button, {
-        key: 1,
-        size: "small",
-        text: "",
-        disabled: _ctx.disabled
-      }, {
-        default: withCtx(() => [
-          _ctx.item.icon ? (openBlock(), createBlock(_component_m_icon, {
-            key: 0,
-            icon: _ctx.item.icon
-          }, null, 8, ["icon"])) : createCommentVNode("", true),
-          createElementVNode("span", null, toDisplayString(_ctx.item.text), 1)
-        ]),
-        _: 1
-      }, 8, ["disabled"]))
-    ], 64)) : _ctx.item.type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
-      key: 4,
-      trigger: "click",
-      disabled: _ctx.disabled,
-      onCommand: _ctx.dropdownHandler
-    }, {
-      dropdown: withCtx(() => [
-        _ctx.item.items && _ctx.item.items.length ? (openBlock(), createBlock(_component_el_dropdown_menu, { key: 0 }, {
+          }, 8, ["disabled"]))
+        ], 64)) : unref(item).type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
+          key: 4,
+          trigger: "click",
+          disabled: unref(disabled),
+          onCommand: dropdownHandler
+        }, {
+          dropdown: withCtx(() => [
+            unref(item).items && unref(item).items.length ? (openBlock(), createBlock(_component_el_dropdown_menu, { key: 0 }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(item).items, (subItem, index) => {
+                  return openBlock(), createBlock(_component_el_dropdown_item, {
+                    key: index,
+                    command: { item: unref(item), subItem }
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(subItem.text), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["command"]);
+                }), 128))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
           default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.item.items, (subItem, index) => {
-              return openBlock(), createBlock(_component_el_dropdown_item, {
-                key: index,
-                command: { item: _ctx.item, subItem }
-              }, {
+            createElementVNode("span", _hoisted_3, [
+              createTextVNode(toDisplayString(unref(item).text), 1),
+              createVNode(_component_el_icon, { class: "el-icon--right" }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(subItem.text), 1)
+                  createVNode(unref(ArrowDown))
                 ]),
-                _: 2
-              }, 1032, ["command"]);
-            }), 128))
+                _: 1
+              })
+            ])
           ]),
           _: 1
-        })) : createCommentVNode("", true)
-      ]),
-      default: withCtx(() => [
-        createElementVNode("span", _hoisted_3$1, [
-          createTextVNode(toDisplayString(_ctx.item.text), 1),
-          createVNode(_component_el_icon, { class: "el-icon--right" }, {
-            default: withCtx(() => [
-              createVNode(_component_arrow_down)
-            ]),
-            _: 1
-          })
-        ])
-      ]),
-      _: 1
-    }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.item.component), normalizeProps(mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : createCommentVNode("", true)
-  ], 34)) : createCommentVNode("", true);
-}
-var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+        }, 8, ["disabled"])) : unref(item).type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(unref(item).component), normalizeProps(mergeProps({ key: 5 }, unref(item).props || {})), null, 16)) : createCommentVNode("", true)
+      ], 34)) : createCommentVNode("", true);
+    };
+  }
+});
 
-const _sfc_main$d = defineComponent({
+const _sfc_main$e = defineComponent({
   name: "nav-menu",
-  components: { ToolButton },
+  components: { ToolButton: _sfc_main$f },
   props: {
     data: {
       type: Object,
@@ -2141,7 +2347,8 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   return openBlock(), createElementBlock("div", {
     class: "m-editor-nav-menu",
@@ -2163,9 +2370,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ], 4);
 }
-var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+const NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
 
-const _sfc_main$c = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "m-editor-props-panel",
   emits: ["mounted"],
   setup(props, { emit }) {
@@ -2212,8 +2419,9 @@ const _sfc_main$c = defineComponent({
     };
   }
 });
+
 const _hoisted_1$6 = { class: "`m-editor-props-panel" };
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createElementBlock("div", _hoisted_1$6, [
     renderSlot(_ctx.$slots, "props-panel-header"),
@@ -2228,9 +2436,9 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"])
   ]);
 }
-var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
 
-const _sfc_main$b = defineComponent({
+const _sfc_main$c = defineComponent({
   name: "ui-component-panel",
   components: { MIcon },
   setup() {
@@ -2289,27 +2497,17 @@ const _sfc_main$b = defineComponent({
           }
           return;
         }
-        if (timeout)
+        if (timeout || !stage.value)
           return;
-        timeout = globalThis.setTimeout(async () => {
-          if (!stageOptions || !stage.value)
-            return;
-          const doc = stage.value.renderer.contentWindow?.document;
-          const els = stage.value.getElementsFromPoint(e);
-          for (const el of els) {
-            if (doc && !el.id.startsWith(GHOST_EL_ID_PREFIX) && await stageOptions.isContainer(el)) {
-              addClassName(el, doc, stageOptions?.containerHighlightClassName);
-              break;
-            }
-          }
-        }, stageOptions?.containerHighlightDuration);
+        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
       }
     };
   }
 });
+
 const _hoisted_1$5 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
 const _hoisted_2$1 = ["onClick", "onDragstart"];
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -2381,22 +2579,17 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
 
-const _sfc_main$a = defineComponent({
-  components: { ToolButton },
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "ContentMenu",
   props: {
-    menuData: {
-      type: Array,
-      default: () => []
-    },
-    isSubMenu: {
-      type: Boolean,
-      default: false
-    }
+    menuData: { default: () => [] },
+    isSubMenu: { type: Boolean, default: false }
   },
   emits: ["hide", "show"],
-  setup(props, { emit }) {
+  setup(__props, { expose, emit }) {
+    const props = __props;
     const menu = ref();
     const subMenu = ref();
     const visible = ref(false);
@@ -2422,6 +2615,36 @@ const _sfc_main$a = defineComponent({
       }
       hide();
     };
+    const show = (e) => {
+      setTimeout(() => {
+        visible.value = true;
+        nextTick(() => {
+          const menuHeight = menu.value?.clientHeight || 0;
+          let top = e.clientY;
+          if (menuHeight + e.clientY > document.body.clientHeight) {
+            top = document.body.clientHeight - menuHeight;
+          }
+          menuStyle.value = {
+            top: `${top}px`,
+            left: `${e.clientX}px`
+          };
+          emit("show");
+        });
+      }, 300);
+    };
+    const showSubMenu = (item) => {
+      const menuItem = item;
+      if (typeof item !== "object" || !menuItem.items?.length) {
+        return;
+      }
+      subMenuData.value = menuItem.items;
+      if (menu.value) {
+        subMenu.value.show({
+          clientX: menu.value.offsetLeft + menu.value.clientWidth,
+          clientY: menu.value.offsetTop
+        });
+      }
+    };
     onMounted(() => {
       if (props.isSubMenu)
         return;
@@ -2432,81 +2655,47 @@ const _sfc_main$a = defineComponent({
         return;
       globalThis.removeEventListener("mousedown", hideHandler, true);
     });
-    return {
-      menu,
-      subMenu,
-      visible,
-      menuStyle,
-      subMenuData,
+    expose({
       hide,
-      show(e) {
-        setTimeout(() => {
-          visible.value = true;
-          nextTick(() => {
-            const menuHeight = menu.value?.clientHeight || 0;
-            let top = e.clientY;
-            if (menuHeight + e.clientY > document.body.clientHeight) {
-              top = document.body.clientHeight - menuHeight;
-            }
-            menuStyle.value = {
-              top: `${top}px`,
-              left: `${e.clientX}px`
-            };
-            emit("show");
-          });
-        }, 300);
-      },
-      showSubMenu(item) {
-        const menuItem = item;
-        if (typeof item !== "object" || !menuItem.items?.length) {
-          return;
-        }
-        subMenuData.value = menuItem.items;
-        if (menu.value) {
-          subMenu.value.show({
-            clientX: menu.value.offsetLeft + menu.value.clientWidth,
-            clientY: menu.value.offsetTop
-          });
-        }
-      }
+      show
+    });
+    return (_ctx, _cache) => {
+      const _component_content_menu = resolveComponent("content-menu", true);
+      return __props.menuData.length && visible.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "magic-editor-content-menu",
+        ref_key: "menu",
+        ref: menu,
+        style: normalizeStyle(menuStyle.value)
+      }, [
+        createElementVNode("div", null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
+            return openBlock(), createBlock(_sfc_main$f, {
+              "event-type": "mouseup",
+              data: item,
+              key: index,
+              onMouseup: hide,
+              onMouseenter: ($event) => showSubMenu(item)
+            }, null, 8, ["data", "onMouseenter"]);
+          }), 128))
+        ]),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(_component_content_menu, {
+            class: "sub-menu",
+            ref_key: "subMenu",
+            ref: subMenu,
+            "menu-data": subMenuData.value,
+            "is-sub-menu": true,
+            onHide: hide
+          }, null, 8, ["menu-data"])
+        ]))
+      ], 4)) : createCommentVNode("", true);
     };
   }
 });
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_tool_button = resolveComponent("tool-button");
-  const _component_content_menu = resolveComponent("content-menu", true);
-  return _ctx.menuData.length && _ctx.visible ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    class: "magic-editor-content-menu",
-    ref: "menu",
-    style: normalizeStyle(_ctx.menuStyle)
-  }, [
-    createElementVNode("div", null, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-        return openBlock(), createBlock(_component_tool_button, {
-          "event-type": "mouseup",
-          data: item,
-          key: index,
-          onMouseup: _ctx.hide,
-          onMouseenter: ($event) => _ctx.showSubMenu(item)
-        }, null, 8, ["data", "onMouseup", "onMouseenter"]);
-      }), 128))
-    ]),
-    (openBlock(), createBlock(Teleport, { to: "body" }, [
-      createVNode(_component_content_menu, {
-        class: "sub-menu",
-        ref: "subMenu",
-        "menu-data": _ctx.subMenuData,
-        "is-sub-menu": true,
-        onHide: _ctx.hide
-      }, null, 8, ["menu-data", "onHide"])
-    ]))
-  ], 4)) : createCommentVNode("", true);
-}
-var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
-const _sfc_main$9 = defineComponent({
-  components: { ContentMenu },
+const _sfc_main$a = defineComponent({
+  components: { ContentMenu: _sfc_main$b },
   setup() {
     const services = inject("services");
     const menu = ref();
@@ -2588,7 +2777,8 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_content_menu = resolveComponent("content-menu");
   return openBlock(), createBlock(_component_content_menu, {
     "menu-data": _ctx.menuData,
@@ -2596,7 +2786,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     style: { "overflow": "initial" }
   }, null, 8, ["menu-data"]);
 }
-var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$6]]);
 
 const throttleTime = 150;
 const select = async (data, editorService) => {
@@ -2630,9 +2820,17 @@ const useDrop = (tree, editorService) => ({
       return true;
     return false;
   },
-  handleDragEnd() {
+  async handleDragEnd(e) {
     if (!tree.value)
       return;
+    const { data: node } = e;
+    const parent = editorService?.getParentById(node.id, false);
+    const layout = await editorService?.getLayout(parent);
+    node.style.position = layout;
+    if (layout === Layout.RELATIVE) {
+      node.style.top = 0;
+      node.style.left = 0;
+    }
     const { data } = tree.value;
     const [page] = data;
     editorService?.update(page);
@@ -2688,7 +2886,7 @@ const useFilter = (tree) => ({
     tree.value?.filter(val);
   }
 });
-const _sfc_main$8 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "magic-editor-layer-panel",
   components: { LayerMenu },
   setup() {
@@ -2735,8 +2933,9 @@ const _sfc_main$8 = defineComponent({
     };
   }
 });
+
 const _hoisted_1$4 = ["id", "onMouseenter"];
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
   const _component_layer_menu = resolveComponent("layer-menu");
@@ -2798,9 +2997,9 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$5]]);
 
-const _sfc_main$7 = defineComponent({
+const _sfc_main$8 = defineComponent({
   components: { MIcon },
   props: {
     data: {
@@ -2837,11 +3036,12 @@ const _sfc_main$7 = defineComponent({
     };
   }
 });
+
 const _hoisted_1$3 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_tab_pane = resolveComponent("el-tab-pane");
   return _ctx.config ? (openBlock(), createBlock(_component_el_tab_pane, {
@@ -2887,9 +3087,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["name"])) : createCommentVNode("", true);
 }
-var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$4]]);
 
-const _sfc_main$6 = defineComponent({
+const _sfc_main$7 = defineComponent({
   components: { TabPane },
   name: "m-sidebar",
   props: {
@@ -2908,7 +3108,8 @@ const _sfc_main$6 = defineComponent({
     };
   }
 });
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tab_pane = resolveComponent("tab-pane");
   const _component_el_tabs = resolveComponent("el-tabs");
   return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createBlock(_component_el_tabs, {
@@ -2943,331 +3144,258 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"])) : createCommentVNode("", true);
 }
-var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$3]]);
 
-const useScroll = (root) => {
-  const pageBar = ref();
-  const itemsContainer = ref();
-  const pageBarWidth = ref(0);
-  const canScroll = ref(false);
-  const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
-  let translateLeft = 0;
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (const { contentRect } of entries) {
-      const { width } = contentRect;
-      pageBarWidth.value = width || 0;
-      setCanScroll();
-    }
-  });
-  const setCanScroll = () => {
-    if (itemsContainer.value) {
-      canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
-    }
-  };
-  const scroll = (type) => {
-    if (!itemsContainer.value)
-      return;
-    const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
-    if (type === "left") {
-      translateLeft += 100;
-      if (translateLeft > 0) {
-        translateLeft = 0;
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "PageBarScrollContainer",
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const pageBar = ref();
+    const itemsContainer = ref();
+    const pageBarWidth = ref(0);
+    const canScroll = ref(false);
+    const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+    let translateLeft = 0;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        const { width } = contentRect;
+        pageBarWidth.value = width || 0;
+        setCanScroll();
       }
-    } else if (type === "right") {
-      translateLeft -= 100;
-      if (-translateLeft > maxScrollLeft) {
-        translateLeft = -maxScrollLeft;
+    });
+    const setCanScroll = () => {
+      if (itemsContainer.value) {
+        canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
       }
-    } else if (type === "start") {
-      translateLeft = 0;
-    } else if (type === "end") {
-      translateLeft = -maxScrollLeft;
-    }
-    itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
-  };
-  onMounted(() => {
-    pageBar.value && resizeObserver.observe(pageBar.value);
-  });
-  onUnmounted(() => {
-    resizeObserver.disconnect();
-  });
-  watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
-    setTimeout(() => {
-      setCanScroll();
-      if (length < preLength) {
-        scroll("start");
-      } else {
-        scroll("end");
+    };
+    const scroll = (type) => {
+      if (!itemsContainer.value)
+        return;
+      const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+      if (type === "left") {
+        translateLeft += 100;
+        if (translateLeft > 0) {
+          translateLeft = 0;
+        }
+      } else if (type === "right") {
+        translateLeft -= 100;
+        if (-translateLeft > maxScrollLeft) {
+          translateLeft = -maxScrollLeft;
+        }
+      } else if (type === "start") {
+        translateLeft = 0;
+      } else if (type === "end") {
+        translateLeft = -maxScrollLeft;
       }
+      itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+    };
+    onMounted(() => {
+      pageBar.value && resizeObserver.observe(pageBar.value);
+    });
+    onUnmounted(() => {
+      resizeObserver.disconnect();
     });
-  });
-  return {
-    pageBar,
-    itemsContainer,
-    canScroll,
-    itemsContainerWidth,
-    scroll
-  };
-};
-const _sfc_main$5 = defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
-  setup() {
-    const services = inject("services");
-    const editorService = services?.editorService;
     const root = computed(() => editorService?.get("root"));
-    return {
-      Delete: markRaw(Delete),
-      DocumentCopy: markRaw(DocumentCopy),
-      ...useScroll(root),
-      root,
-      page: computed(() => editorService?.get("page")),
-      switchPage(page) {
-        editorService?.select(page);
-      },
-      addPage() {
-        if (!editorService)
-          return;
-        const pageConfig = {
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(toRaw(editorService.get("root")))
-        };
-        editorService.add(pageConfig);
-      },
-      copy(node) {
-        node && editorService?.copy(node);
-        editorService?.paste({
-          left: 0,
-          top: 0
-        });
-      },
-      remove(node) {
-        editorService?.remove(node);
-      }
+    watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll("start");
+        } else {
+          scroll("end");
+        }
+      });
+    });
+    const addPage = () => {
+      if (!editorService)
+        return;
+      const pageConfig = {
+        type: NodeType.PAGE,
+        name: generatePageNameByApp(toRaw(editorService.get("root")))
+      };
+      editorService.add(pageConfig);
     };
-  }
-});
-const _hoisted_1$2 = {
-  class: "m-editor-page-bar",
-  ref: "pageBar"
-};
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = { class: "m-editor-page-bar-title" };
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_plus = resolveComponent("plus");
-  const _component_el_icon = resolveComponent("el-icon");
-  const _component_arrow_left_bold = resolveComponent("arrow-left-bold");
-  const _component_el_tooltip = resolveComponent("el-tooltip");
-  const _component_tool_button = resolveComponent("tool-button");
-  const _component_caret_bottom = resolveComponent("caret-bottom");
-  const _component_el_popover = resolveComponent("el-popover");
-  const _component_arrow_right_bold = resolveComponent("arrow-right-bold");
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [
-    createElementVNode("div", {
-      id: "m-editor-page-bar-add-icon",
-      class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.addPage && _ctx.addPage(...args))
-    }, [
-      createVNode(_component_el_icon, null, {
-        default: withCtx(() => [
-          createVNode(_component_plus)
-        ]),
-        _: 1
-      })
-    ]),
-    _ctx.canScroll ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.scroll("left"))
-    }, [
-      createVNode(_component_el_icon, null, {
-        default: withCtx(() => [
-          createVNode(_component_arrow_left_bold)
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-page-bar",
+        ref_key: "pageBar",
+        ref: pageBar
+      }, [
+        createElementVNode("div", {
+          id: "m-editor-page-bar-add-icon",
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: addPage
+        }, [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(unref(Plus))
+            ]),
+            _: 1
+          })
         ]),
-        _: 1
-      })
-    ])) : createCommentVNode("", true),
-    _ctx.root ? (openBlock(), createElementBlock("div", {
-      key: 1,
-      class: "m-editor-page-bar-items",
-      ref: "itemsContainer",
-      style: normalizeStyle(`width: ${_ctx.itemsContainerWidth}px`)
-    }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.root.items, (item) => {
-        return openBlock(), createElementBlock("div", {
-          key: item.key,
-          class: normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
-          onClick: ($event) => _ctx.switchPage(item)
+        canScroll.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createElementVNode("div", _hoisted_3, [
-            renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-              createVNode(_component_el_tooltip, {
-                effect: "dark",
-                placement: "top-start",
-                content: item.name
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("span", null, toDisplayString(item.name), 1)
-                ]),
-                _: 2
-              }, 1032, ["content"])
-            ])
-          ]),
-          createVNode(_component_el_popover, {
-            "popper-class": "page-bar-popover",
-            placement: "top",
-            width: 160,
-            trigger: "hover"
-          }, {
-            reference: withCtx(() => [
-              createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
-                default: withCtx(() => [
-                  createVNode(_component_caret_bottom)
-                ]),
-                _: 1
-              })
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(unref(ArrowLeftBold))
             ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true),
+        unref(root) ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "m-editor-page-bar-items",
+          ref_key: "itemsContainer",
+          ref: itemsContainer,
+          style: normalizeStyle(`width: ${unref(itemsContainerWidth)}px`)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4)) : createCommentVNode("", true),
+        canScroll.value ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+        }, [
+          createVNode(_component_el_icon, null, {
             default: withCtx(() => [
-              createElementVNode("div", null, [
-                renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                  createVNode(_component_tool_button, {
-                    data: {
-                      type: "button",
-                      text: "\u590D\u5236",
-                      icon: _ctx.DocumentCopy,
-                      handler: () => _ctx.copy(item)
-                    }
-                  }, null, 8, ["data"]),
-                  createVNode(_component_tool_button, {
-                    data: {
-                      type: "button",
-                      text: "\u5220\u9664",
-                      icon: _ctx.Delete,
-                      handler: () => _ctx.remove(item)
-                    }
-                  }, null, 8, ["data"])
-                ])
-              ])
+              createVNode(unref(ArrowRightBold))
             ]),
-            _: 2
-          }, 1024)
-        ], 10, _hoisted_2);
-      }), 128))
-    ], 4)) : createCommentVNode("", true),
-    _ctx.canScroll ? (openBlock(), createElementBlock("div", {
-      key: 2,
-      class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-      onClick: _cache[2] || (_cache[2] = ($event) => _ctx.scroll("right"))
-    }, [
-      createVNode(_component_el_icon, null, {
-        default: withCtx(() => [
-          createVNode(_component_arrow_right_bold)
-        ]),
-        _: 1
-      })
-    ])) : createCommentVNode("", true)
-  ], 512);
-}
-var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
-
-class ScrollViewer$1 {
-  constructor(options) {
-    this.enter = false;
-    this.targetEnter = false;
-    this.keydown = false;
-    this.zoom = 1;
-    this.scrollLeft = 0;
-    this.scrollTop = 0;
-    this.x = 0;
-    this.y = 0;
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        const { width, height } = contentRect;
-        const targetRect = this.target.getBoundingClientRect();
-        const targetWidth = targetRect.width * this.zoom;
-        const targetMarginTop = Number(this.target.style.marginTop) || 0;
-        const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
-        if (targetWidth < width) {
-          this.target._left = 0;
-        }
-        if (targetHeight < height) {
-          this.target._top = 0;
-        }
-        this.scroll();
-      }
-    });
-    this.wheelHandler = (event) => {
-      if (this.targetEnter)
-        return;
-      const { deltaX, deltaY, currentTarget } = event;
-      if (currentTarget !== this.container)
-        return;
-      this.setScrollOffset(deltaX, deltaY);
-      this.scroll();
-      this.scrollLeft = this.target._left;
-      this.scrollTop = this.target._top;
-    };
-    this.mouseEnterHandler = () => {
-      this.enter = true;
-    };
-    this.mouseLeaveHandler = () => {
-      this.enter = false;
-    };
-    this.targetMouseEnterHandler = () => {
-      this.targetEnter = true;
+            _: 1
+          })
+        ])) : createCommentVNode("", true)
+      ], 512);
     };
-    this.targetMouseLeaveHandler = () => {
-      this.targetEnter = false;
+  }
+});
+
+const _hoisted_1$2 = ["onClick"];
+const _hoisted_2 = { class: "m-editor-page-bar-title" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "PageBar",
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const root = computed(() => editorService?.get("root"));
+    const page = computed(() => editorService?.get("page"));
+    const switchPage = (page2) => {
+      editorService?.select(page2);
     };
-    this.mousedownHandler = (event) => {
-      if (!this.keydown)
-        return;
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      this.target.style.cursor = "grabbing";
-      this.x = event.clientX;
-      this.y = event.clientY;
-      document.addEventListener("mousemove", this.mousemoveHandler);
-      document.addEventListener("mouseup", this.mouseupHandler);
+    const copy = (node) => {
+      node && editorService?.copy(node);
+      editorService?.paste({
+        left: 0,
+        top: 0
+      });
     };
-    this.mouseupHandler = () => {
-      this.x = 0;
-      this.y = 0;
-      this.scrollLeft = this.target._left;
-      this.scrollTop = this.target._top;
-      this.removeHandler();
+    const remove = (node) => {
+      editorService?.remove(node);
     };
-    this.mousemoveHandler = (event) => {
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      const deltaX = event.clientX - this.x;
-      const deltaY = event.clientY - this.y;
-      this.setScrollOffset(deltaX, deltaY);
-      this.scroll();
+    return (_ctx, _cache) => {
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_popover = resolveComponent("el-popover");
+      return openBlock(), createBlock(_sfc_main$6, null, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root) && unref(root).items || [], (item) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass(["m-editor-page-bar-item", { active: unref(page)?.id === item.id }]),
+              key: item.key,
+              onClick: ($event) => switchPage(item)
+            }, [
+              createElementVNode("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+                  createVNode(_component_el_tooltip, {
+                    effect: "dark",
+                    placement: "top-start",
+                    content: item.name
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", null, toDisplayString(item.name), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["content"])
+                ])
+              ]),
+              createVNode(_component_el_popover, {
+                "popper-class": "page-bar-popover",
+                placement: "top",
+                width: 160,
+                trigger: "hover"
+              }, {
+                reference: withCtx(() => [
+                  createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                    default: withCtx(() => [
+                      createVNode(unref(CaretBottom))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  createElementVNode("div", null, [
+                    renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                      createVNode(_sfc_main$f, {
+                        data: {
+                          type: "button",
+                          text: "\u590D\u5236",
+                          icon: unref(DocumentCopy),
+                          handler: () => copy(item)
+                        }
+                      }, null, 8, ["data"]),
+                      createVNode(_sfc_main$f, {
+                        data: {
+                          type: "button",
+                          text: "\u5220\u9664",
+                          icon: unref(Delete),
+                          handler: () => remove(item)
+                        }
+                      }, null, 8, ["data"])
+                    ])
+                  ])
+                ]),
+                _: 2
+              }, 1024)
+            ], 10, _hoisted_1$2);
+          }), 128))
+        ]),
+        _: 3
+      });
     };
-    this.keydownHandler = (event) => {
-      if (event.code === Keys.ESCAPE && this.enter) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-      }
-      if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-        return;
+  }
+});
+
+class ScrollViewer$1 {
+  enter = false;
+  targetEnter = false;
+  keydown = false;
+  container;
+  target;
+  zoom = 1;
+  scrollLeft = 0;
+  scrollTop = 0;
+  x = 0;
+  y = 0;
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      const { width, height } = contentRect;
+      const targetRect = this.target.getBoundingClientRect();
+      const targetWidth = targetRect.width * this.zoom;
+      const targetMarginTop = Number(this.target.style.marginTop) || 0;
+      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
+      if (targetWidth < width) {
+        this.target._left = 0;
       }
-      this.keydown = true;
-      this.target.style.cursor = "grab";
-      this.container.addEventListener("mousedown", this.mousedownHandler);
-    };
-    this.keyupHandler = (event) => {
-      if (event.code !== Keys.ESCAPE || !this.keydown) {
-        return;
+      if (targetHeight < height) {
+        this.target._top = 0;
       }
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      this.keydown = false;
-      event.preventDefault();
-      this.removeHandler();
-    };
+      this.scroll();
+    }
+  });
+  constructor(options) {
     this.container = options.container;
     this.target = options.target;
     this.zoom = options.zoom;
@@ -3303,6 +3431,79 @@ class ScrollViewer$1 {
     document.removeEventListener("mousemove", this.mousemoveHandler);
     document.removeEventListener("mouseup", this.mouseupHandler);
   }
+  wheelHandler = (event) => {
+    if (this.targetEnter)
+      return;
+    const { deltaX, deltaY, currentTarget } = event;
+    if (currentTarget !== this.container)
+      return;
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+    this.scrollLeft = this.target._left;
+    this.scrollTop = this.target._top;
+  };
+  mouseEnterHandler = () => {
+    this.enter = true;
+  };
+  mouseLeaveHandler = () => {
+    this.enter = false;
+  };
+  targetMouseEnterHandler = () => {
+    this.targetEnter = true;
+  };
+  targetMouseLeaveHandler = () => {
+    this.targetEnter = false;
+  };
+  mousedownHandler = (event) => {
+    if (!this.keydown)
+      return;
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    this.target.style.cursor = "grabbing";
+    this.x = event.clientX;
+    this.y = event.clientY;
+    document.addEventListener("mousemove", this.mousemoveHandler);
+    document.addEventListener("mouseup", this.mouseupHandler);
+  };
+  mouseupHandler = () => {
+    this.x = 0;
+    this.y = 0;
+    this.scrollLeft = this.target._left;
+    this.scrollTop = this.target._top;
+    this.removeHandler();
+  };
+  mousemoveHandler = (event) => {
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    const deltaX = event.clientX - this.x;
+    const deltaY = event.clientY - this.y;
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+  };
+  keydownHandler = (event) => {
+    if (event.code === Keys.ESCAPE && this.enter) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+    }
+    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
+      return;
+    }
+    this.keydown = true;
+    this.target.style.cursor = "grab";
+    this.container.addEventListener("mousedown", this.mousedownHandler);
+  };
+  keyupHandler = (event) => {
+    if (event.code !== Keys.ESCAPE || !this.keydown) {
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    this.keydown = false;
+    event.preventDefault();
+    this.removeHandler();
+  };
   setScrollOffset(deltaX, deltaY) {
     const { width, height } = this.container.getBoundingClientRect();
     const targetRect = this.target.getBoundingClientRect();
@@ -3363,18 +3564,19 @@ const _sfc_main$4 = defineComponent({
       el,
       style: computed(() => `
         width: ${props.width}px;
-        height: ${(props.height || 0) - 40}px;
+        height: ${props.height}px;
         position: absolute;
         margin-top: 30px;
       `)
     };
   }
 });
+
 const _hoisted_1$1 = {
   class: "m-editor-scroll-viewer-container",
   ref: "container"
 };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$1, [
     createElementVNode("div", {
       ref: "el",
@@ -3384,170 +3586,170 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ], 4)
   ], 512);
 }
-var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
 
-const _sfc_main$3 = defineComponent({
-  components: { ContentMenu },
-  setup() {
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "ViewerMenu",
+  props: {
+    isMultiSelect: { type: Boolean, default: false }
+  },
+  setup(__props, { expose }) {
+    const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
     const menu = ref();
     const canPaste = ref(false);
     const canCenter = ref(false);
     const node = computed(() => editorService?.get("node"));
+    const nodes = computed(() => editorService?.get("nodes"));
     const parent = computed(() => editorService?.get("parent"));
-    const isPage = computed(() => node.value?.type === NodeType.PAGE);
+    const stage = computed(() => editorService?.get("stage"));
     const stageContentMenu = inject("stageContentMenu", []);
-    onMounted(() => {
-      const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
-      canPaste.value = data !== "undefined" && !!data;
-    });
+    const menuData = reactive([
+      {
+        type: "button",
+        text: "\u6C34\u5E73\u5C45\u4E2D",
+        display: () => canCenter.value,
+        handler: () => {
+          if (!nodes.value)
+            return;
+          editorService?.alignCenter(nodes.value);
+        }
+      },
+      {
+        type: "button",
+        text: "\u590D\u5236",
+        icon: markRaw(DocumentCopy),
+        handler: () => {
+          nodes.value && editorService?.copy(nodes.value);
+          canPaste.value = true;
+        }
+      },
+      {
+        type: "button",
+        text: "\u7C98\u8D34",
+        display: () => canPaste.value,
+        handler: () => {
+          const rect = menu.value?.$el.getBoundingClientRect();
+          const parentRect = stage.value?.container?.getBoundingClientRect();
+          const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
+          const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
+          if (!nodes.value || nodes.value.length === 0)
+            return;
+          editorService?.paste({ left: initialLeft, top: initialTop });
+        }
+      },
+      {
+        type: "divider",
+        direction: "horizontal",
+        display: () => {
+          if (!node.value)
+            return false;
+          return !isPage(node.value);
+        }
+      },
+      {
+        type: "button",
+        text: "\u4E0A\u79FB\u4E00\u5C42",
+        icon: markRaw(Top),
+        display: () => !isPage(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(1);
+        }
+      },
+      {
+        type: "button",
+        text: "\u4E0B\u79FB\u4E00\u5C42",
+        icon: markRaw(Bottom),
+        display: () => !isPage(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(-1);
+        }
+      },
+      {
+        type: "button",
+        text: "\u7F6E\u9876",
+        display: () => !isPage(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.TOP);
+        }
+      },
+      {
+        type: "button",
+        text: "\u7F6E\u5E95",
+        display: () => !isPage(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.BOTTOM);
+        }
+      },
+      {
+        type: "divider",
+        direction: "horizontal",
+        display: () => !isPage(node.value) && !props.isMultiSelect
+      },
+      {
+        type: "button",
+        text: "\u5220\u9664",
+        icon: Delete,
+        display: () => !isPage(node.value),
+        handler: () => {
+          nodes.value && editorService?.remove(nodes.value);
+        }
+      },
+      {
+        type: "divider",
+        direction: "horizontal"
+      },
+      {
+        type: "button",
+        text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
+        handler: () => {
+          editorService?.get("stage").clearGuides();
+        }
+      },
+      ...stageContentMenu
+    ]);
     watch(parent, async () => {
       if (!parent.value || !editorService)
         return canCenter.value = false;
       const layout = await editorService.getLayout(parent.value);
-      canCenter.value = [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && ![NodeType.ROOT, NodeType.PAGE, "pop"].includes(`${node.value?.type}`);
+      const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+      const isTypeConform = nodes.value?.every((selectedNode) => ![NodeType.ROOT, NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`));
+      canCenter.value = isLayoutConform && !!isTypeConform;
     }, { immediate: true });
-    return {
-      menu,
-      menuData: reactive([
-        {
-          type: "button",
-          text: "\u6C34\u5E73\u5C45\u4E2D",
-          display: () => canCenter.value,
-          handler: () => {
-            node.value && editorService?.alignCenter(node.value);
-          }
-        },
-        {
-          type: "button",
-          text: "\u590D\u5236",
-          icon: markRaw(DocumentCopy),
-          handler: () => {
-            node.value && editorService?.copy(node.value);
-            canPaste.value = true;
-          }
-        },
-        {
-          type: "button",
-          text: "\u7C98\u8D34",
-          display: () => canPaste.value,
-          handler: () => {
-            const stage = editorService?.get("stage");
-            const rect = menu.value?.$el.getBoundingClientRect();
-            const parentRect = stage?.container?.getBoundingClientRect();
-            let left = (rect?.left || 0) - (parentRect?.left || 0);
-            let top = (rect?.top || 0) - (parentRect?.top || 0);
-            if (node.value?.items && stage) {
-              const parentEl = stage.renderer.contentWindow?.document.getElementById(`${node.value.id}`);
-              const parentElRect = parentEl?.getBoundingClientRect();
-              left = left - (parentElRect?.left || 0);
-              top = top - (parentElRect?.top || 0);
-            }
-            editorService?.paste({ left, top });
-          }
-        },
-        {
-          type: "divider",
-          direction: "horizontal",
-          display: () => !isPage.value
-        },
-        {
-          type: "button",
-          text: "\u4E0A\u79FB\u4E00\u5C42",
-          icon: markRaw(Top),
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(1);
-          }
-        },
-        {
-          type: "button",
-          text: "\u4E0B\u79FB\u4E00\u5C42",
-          icon: markRaw(Bottom),
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(-1);
-          }
-        },
-        {
-          type: "button",
-          text: "\u7F6E\u9876",
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(LayerOffset.TOP);
-          }
-        },
-        {
-          type: "button",
-          text: "\u7F6E\u5E95",
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(LayerOffset.BOTTOM);
-          }
-        },
-        {
-          type: "divider",
-          direction: "horizontal",
-          display: () => !isPage.value
-        },
-        {
-          type: "button",
-          text: "\u5220\u9664",
-          icon: Delete,
-          display: () => !isPage.value,
-          handler: () => {
-            node.value && editorService?.remove(node.value);
-          }
-        },
-        {
-          type: "divider",
-          direction: "horizontal"
-        },
-        {
-          type: "button",
-          text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
-          handler: () => {
-            editorService?.get("stage").clearGuides();
-          }
-        },
-        ...stageContentMenu
-      ]),
-      show(e) {
-        menu.value?.show(e);
-      }
+    const show = async (e) => {
+      menu.value?.show(e);
+      const data = await storageService.getItem(COPY_STORAGE_KEY);
+      canPaste.value = data !== "undefined" && !!data;
+    };
+    expose({ show });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$b, {
+        "menu-data": menuData,
+        ref_key: "menu",
+        ref: menu
+      }, null, 8, ["menu-data"]);
     };
   }
 });
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_content_menu = resolveComponent("content-menu");
-  return openBlock(), createBlock(_component_content_menu, {
-    "menu-data": _ctx.menuData,
-    ref: "menu"
-  }, null, 8, ["menu-data"]);
-}
-var ViewerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
-const _sfc_main$2 = defineComponent({
-  name: "magic-stage",
-  components: {
-    ViewerMenu,
-    ScrollViewer
-  },
-  setup() {
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Stage",
+  setup(__props) {
+    let stage = null;
+    let runtime = null;
     const services = inject("services");
     const stageOptions = inject("stageOptions");
     const stageWrap = ref();
     const stageContainer = ref();
     const menu = ref();
+    const isMultiSelect = computed(() => services?.editorService.get("nodes")?.length > 1);
     const stageRect = computed(() => services?.uiService.get("stageRect"));
     const uiSelectMode = computed(() => services?.uiService.get("uiSelectMode"));
     const root = computed(() => services?.editorService.get("root"));
     const page = computed(() => services?.editorService.get("page"));
     const zoom = computed(() => services?.uiService.get("zoom") || 1);
     const node = computed(() => services?.editorService.get("node"));
-    let stage = null;
-    let runtime = null;
     const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
     watchEffect(() => {
       if (stage)
@@ -3564,6 +3766,7 @@ const _sfc_main$2 = defineComponent({
         isContainer: stageOptions.isContainer,
         containerHighlightClassName: stageOptions.containerHighlightClassName,
         containerHighlightDuration: stageOptions.containerHighlightDuration,
+        containerHighlightType: stageOptions.containerHighlightType,
         canSelect: (el, event, stop) => {
           const elCanSelect = stageOptions.canSelect(el);
           if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -3587,12 +3790,17 @@ const _sfc_main$2 = defineComponent({
       stage?.on("highlight", (el) => {
         services?.editorService.highlight(el.id);
       });
+      stage?.on("multiSelect", (els) => {
+        services?.editorService.multiSelect(els.map((el) => el.id));
+      });
       stage?.on("update", (ev) => {
         if (ev.parentEl) {
-          services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+          for (const data of ev.data) {
+            services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+          }
           return;
         }
-        services?.editorService.update({ id: ev.el.id, style: ev.style });
+        services?.editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
       });
       stage?.on("sort", (ev) => {
         services?.editorService.sort(ev.src, ev.dist);
@@ -3645,99 +3853,96 @@ const _sfc_main$2 = defineComponent({
       resizeObserver.disconnect();
       services?.editorService.set("stage", null);
     });
-    return {
-      stageWrap,
-      stageContainer,
-      menu,
-      stageRect,
-      zoom,
-      contextmenuHandler(e2) {
-        e2.preventDefault();
-        menu.value?.show(e2);
-      },
-      dragoverHandler(e2) {
-        e2.preventDefault();
-        if (e2.dataTransfer) {
-          e2.dataTransfer.dropEffect = "move";
-        }
-      },
-      async dropHandler(e) {
-        e.preventDefault();
-        const doc = stage?.renderer.contentWindow?.document;
-        const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
-        let parent = page.value;
-        if (parentEl) {
-          parent = services?.editorService.getNodeById(parentEl.id, false);
-        }
-        if (e.dataTransfer && parent && stageContainer.value && stage) {
-          const config = eval(`(${e.dataTransfer.getData("data")})`);
-          const layout = await services?.editorService.getLayout(parent);
-          const containerRect = stageContainer.value.getBoundingClientRect();
-          const { scrollTop, scrollLeft } = stage.mask;
-          const { style = {} } = config;
-          let top = 0;
-          let left = 0;
-          let position = "relative";
-          if (layout === Layout.ABSOLUTE) {
-            position = "absolute";
-            top = e.clientY - containerRect.top + scrollTop;
-            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);
-            }
+    const contextmenuHandler = (e2) => {
+      e2.preventDefault();
+      menu.value?.show(e2);
+    };
+    const dragoverHandler = (e2) => {
+      e2.preventDefault();
+      if (e2.dataTransfer) {
+        e2.dataTransfer.dropEffect = "move";
+      }
+    };
+    const dropHandler = async (e) => {
+      e.preventDefault();
+      const doc = stage?.renderer.contentWindow?.document;
+      const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+      let parent = page.value;
+      if (parentEl) {
+        parent = services?.editorService.getNodeById(parentEl.id, false);
+      }
+      if (e.dataTransfer && parent && stageContainer.value && stage) {
+        const config = eval(`(${e.dataTransfer.getData("data")})`);
+        const layout = await services?.editorService.getLayout(parent);
+        const containerRect = stageContainer.value.getBoundingClientRect();
+        const { scrollTop, scrollLeft } = stage.mask;
+        const { style = {} } = config;
+        let top = 0;
+        let left = 0;
+        let position = "relative";
+        if (layout === Layout.ABSOLUTE) {
+          position = "absolute";
+          top = e.clientY - containerRect.top + scrollTop;
+          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);
           }
-          config.style = {
-            ...style,
-            position,
-            top,
-            left
-          };
-          services?.editorService.add(config, parent);
         }
+        config.style = {
+          ...style,
+          position,
+          top,
+          left
+        };
+        config.inputEvent = e;
+        services?.editorService.add(config, parent);
       }
     };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(ScrollViewer, {
+        class: "m-editor-stage",
+        ref_key: "stageWrap",
+        ref: stageWrap,
+        width: unref(stageRect)?.width,
+        height: unref(stageRect)?.height,
+        zoom: unref(zoom)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: "m-editor-stage-container",
+            ref_key: "stageContainer",
+            ref: stageContainer,
+            style: normalizeStyle(`transform: scale(${unref(zoom)})`),
+            onContextmenu: contextmenuHandler,
+            onDrop: dropHandler,
+            onDragover: dragoverHandler
+          }, null, 36),
+          (openBlock(), createBlock(Teleport, { to: "body" }, [
+            createVNode(_sfc_main$3, {
+              ref_key: "menu",
+              ref: menu,
+              "is-multi-select": unref(isMultiSelect)
+            }, null, 8, ["is-multi-select"])
+          ]))
+        ]),
+        _: 1
+      }, 8, ["width", "height", "zoom"]);
+    };
   }
 });
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_viewer_menu = resolveComponent("viewer-menu");
-  const _component_scroll_viewer = resolveComponent("scroll-viewer");
-  return openBlock(), createBlock(_component_scroll_viewer, {
-    class: "m-editor-stage",
-    ref: "stageWrap",
-    width: _ctx.stageRect?.width,
-    height: _ctx.stageRect?.height,
-    zoom: _ctx.zoom
-  }, {
-    default: withCtx(() => [
-      createElementVNode("div", {
-        class: "m-editor-stage-container",
-        ref: "stageContainer",
-        style: normalizeStyle(`transform: scale(${_ctx.zoom})`),
-        onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
-        onDrop: _cache[1] || (_cache[1] = (...args) => _ctx.dropHandler && _ctx.dropHandler(...args)),
-        onDragover: _cache[2] || (_cache[2] = (...args) => _ctx.dragoverHandler && _ctx.dragoverHandler(...args))
-      }, null, 36),
-      (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(_component_viewer_menu, { ref: "menu" }, null, 512)
-      ]))
-    ]),
-    _: 1
-  }, 8, ["width", "height", "zoom"]);
-}
-var MagicStage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
 const _sfc_main$1 = defineComponent({
   name: "m-editor-workspace",
   components: {
-    PageBar,
-    MagicStage
+    PageBar: _sfc_main$5,
+    MagicStage: _sfc_main$2
   },
   setup() {
     const services = inject("services");
     const workspace = ref();
-    const node = computed(() => services?.editorService.get("node"));
+    const nodes = computed(() => services?.editorService.get("nodes"));
     let keycon;
     const mouseenterHandler = () => {
       workspace.value?.focus();
@@ -3753,26 +3958,26 @@ const _sfc_main$1 = defineComponent({
       const ctrl = isMac ? "meta" : "ctrl";
       keycon.keyup("delete", (e) => {
         e.inputEvent.preventDefault();
-        if (!node.value || isPage(node.value))
+        if (!nodes.value || isPage(nodes.value[0]))
           return;
-        services?.editorService.remove(node.value);
+        services?.editorService.remove(nodes.value);
       }).keyup("backspace", (e) => {
         e.inputEvent.preventDefault();
-        if (!node.value || isPage(node.value))
+        if (!nodes.value || isPage(nodes.value[0]))
           return;
-        services?.editorService.remove(node.value);
+        services?.editorService.remove(nodes.value);
       }).keydown([ctrl, "c"], (e) => {
         e.inputEvent.preventDefault();
-        node.value && services?.editorService.copy(node.value);
+        nodes.value && services?.editorService.copy(nodes.value);
       }).keydown([ctrl, "v"], (e) => {
         e.inputEvent.preventDefault();
-        node.value && services?.editorService.paste();
+        nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
       }).keydown([ctrl, "x"], (e) => {
         e.inputEvent.preventDefault();
-        if (!node.value || isPage(node.value))
+        if (!nodes.value || isPage(nodes.value[0]))
           return;
-        services?.editorService.copy(node.value);
-        services?.editorService.remove(node.value);
+        services?.editorService.copy(nodes.value);
+        services?.editorService.remove(nodes.value);
       }).keydown([ctrl, "z"], (e) => {
         e.inputEvent.preventDefault();
         services?.editorService.undo();
@@ -3834,6 +4039,7 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
+
 const _hoisted_1 = {
   class: "m-editor-workspace",
   tabindex: "1",
@@ -3858,14 +4064,14 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ], 512);
 }
-var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
 class ComponentList extends BaseService {
+  state = reactive({
+    list: []
+  });
   constructor() {
     super([]);
-    this.state = reactive({
-      list: []
-    });
   }
   setList(componentGroupList) {
     this.state.list = componentGroupList;
@@ -3874,7 +4080,7 @@ class ComponentList extends BaseService {
     return this.state.list;
   }
 }
-var componentListService = new ComponentList();
+const componentListService = new ComponentList();
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const MIN_LEFT_COLUMN_WIDTH = 45;
@@ -3986,13 +4192,15 @@ class Ui extends BaseService {
     const { height, width } = stageContainerRect;
     if (!width || !height)
       return 1;
-    if (width > stageRect.width && height > stageRect.height) {
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+    if (width > stageWidth && height > stageHeight) {
       return 1;
     }
-    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
   }
 }
-var uiService = new Ui();
+const uiService = new Ui();
 
 const _sfc_main = defineComponent({
   name: "m-editor",
@@ -4067,6 +4275,10 @@ const _sfc_main = defineComponent({
       type: Number,
       default: 800
     },
+    containerHighlightType: {
+      type: String,
+      default: ContainerHighlightType.DEFAULT
+    },
     stageRect: {
       type: [String, Object]
     },
@@ -4122,7 +4334,8 @@ const _sfc_main = defineComponent({
       historyService,
       propsService,
       editorService,
-      uiService
+      uiService,
+      storageService
     };
     provide("services", services);
     provide("layerContentMenu", props.layerContentMenu);
@@ -4136,11 +4349,13 @@ const _sfc_main = defineComponent({
       updateDragEl: props.updateDragEl,
       isContainer: props.isContainer,
       containerHighlightClassName: props.containerHighlightClassName,
-      containerHighlightDuration: props.containerHighlightDuration
+      containerHighlightDuration: props.containerHighlightDuration,
+      containerHighlightType: props.containerHighlightType
     }));
     return services;
   }
 });
+
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nav_menu = resolveComponent("nav-menu");
   const _component_sidebar = resolveComponent("sidebar");
@@ -4201,23 +4416,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["code-options"]);
 }
-var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-var index$1 = /* #__PURE__ */ (() => ".m-editor-nav-menu {\n  display: flex;\n  z-index: 5;\n  -webkit-box-pack: justify;\n  justify-content: space-between;\n  -webkit-box-align: center;\n  align-items: center;\n  background-color: #ffffff;\n  font-size: 19.2px;\n  color: #070303;\n  font-weight: 400;\n  box-sizing: border-box;\n  margin: 0px;\n  flex: 0 0 35px;\n  border-bottom: 1px solid #d8dee8;\n}\n.m-editor-nav-menu > div {\n  display: flex;\n  height: 100%;\n  z-index: 1;\n  align-items: center;\n}\n.m-editor-nav-menu .menu-center {\n  justify-content: center;\n}\n.m-editor-nav-menu .menu-right {\n  justify-content: flex-end;\n}\n.m-editor-nav-menu .menu-item {\n  flex-direction: row;\n  -webkit-box-align: center;\n  align-items: center;\n  vertical-align: middle;\n  font-size: 14px;\n  line-height: 1;\n  height: 100%;\n  color: rgba(255, 255, 255, 0.7);\n  box-sizing: inherit;\n  z-index: 1;\n  display: flex !important;\n  transition: all 0.3s ease 0s;\n  border-bottom: 2px solid transparent;\n  margin: 0;\n}\n.m-editor-nav-menu .menu-item .is-disabled {\n  opacity: 0.5;\n}\n.m-editor-nav-menu .menu-item .is-text {\n  padding: 5px;\n}\n.m-editor-nav-menu .menu-item .is-text,\n.m-editor-nav-menu .menu-item i {\n  color: #070303;\n}\n.m-editor-nav-menu .menu-item .icon {\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  height: 100%;\n  padding: 0px 8px;\n}\n.m-editor-nav-menu .menu-item .menu-item-text {\n  color: #070303;\n}\n.m-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n.m-editor-content {\n  width: 100%;\n  height: calc(100% - 35px);\n  display: flex;\n  justify-self: space-between;\n}\n.m-editor-framework-center {\n  position: relative;\n  transform: translateZ(0);\n  flex: 1;\n}\n.m-editor-framework-left {\n  background-color: #ffffff;\n}\n.m-editor-framework-center .el-scrollbar__view {\n  height: 100%;\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-empty-panel {\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: calc(100% - 32px);\n}\n.m-editor-empty-content {\n  display: flex;\n  justify-content: space-evenly;\n  flex-direction: row;\n  width: 100%;\n}\n.m-editor-empty-button {\n  border: 3px solid rgba(0, 0, 0, 0.2);\n  padding: 10px 40px;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n}\n.m-editor-empty-button i {\n  height: 180px;\n  line-height: 180px;\n  font-size: 100px;\n}\n.m-editor-empty-button p {\n  text-align: center;\n  font-size: 20px;\n  margin-top: 5px;\n}\n.m-editor-empty-button:hover {\n  border-color: #2882e0;\n  color: #2882e0;\n}\n.m-editor-sidebar {\n  height: 100%;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header {\n  background: #2882e0;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {\n  width: 40px;\n  margin-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {\n  margin: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {\n  border: 0;\n  border-radius: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {\n  margin-left: 2px;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {\n  line-height: 15px;\n  border: 0;\n  height: auto;\n  padding: 8px;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {\n  background: #ffffff;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {\n  border-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i {\n  font-size: 25px;\n  color: rgba(255, 255, 255, 0.6);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {\n  color: rgb(255, 255, 255);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {\n  font-size: 12px;\n  white-space: normal;\n}\n.m-editor-sidebar .el-scrollbar {\n  height: 100%;\n}\n.m-editor-sidebar .el-tree {\n  min-height: 100%;\n}\n.m-editor-sidebar .fold-icon {\n  position: absolute;\n  bottom: 8px;\n  left: 0px;\n  width: 45px;\n  padding-left: 8px;\n  color: #fff;\n  font-size: 32px;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.m-editor-sidebar .fold-icon:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n.m-editor-sidebar .el-tabs__content,\n.m-editor-sidebar .el-tab-pane {\n  height: 100%;\n}\n.magic-editor-layer-panel {\n  background: #ffffff;\n}\n.magic-editor-layer-panel .search-input {\n  background: #ffffff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n.magic-editor-layer-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.magic-editor-layer-panel .node-content {\n  flex: 1;\n  display: flex;\n  width: 100%;\n}\n.magic-editor-layer-panel .node-content > div {\n  width: 8px;\n}\n.magic-editor-layer-panel .node-content > span {\n  width: calc(100% - 68px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.magic-editor-layer-panel .node-content > i {\n  margin-right: 10px;\n  font-size: 20px;\n}\n.magic-editor-layer-panel .node-content > i.lock {\n  color: #bbb;\n}\n.magic-editor-layer-panel,\n.magic-editor-layer-panel .el-tree {\n  background-color: #ffffff;\n  color: #313a40;\n}\n.magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.magic-editor-layer-panel .cus-tree-node {\n  width: 100%;\n  overflow: hidden;\n}\n.magic-editor-layer-panel .cus-tree-node-hover {\n  background-color: #f3f5f9;\n  width: 100%;\n}\n.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.ui-tree-tip {\n  width: 100%;\n  height: 25px;\n  margin-left: 10px;\n  background: #ffffff;\n  font-style: italic;\n  color: #555554;\n  position: absolute;\n  top: 40px;\n  left: 0;\n  z-index: 1;\n}\n.ui-component-panel {\n  height: 100%;\n  border-top: 0 !important;\n  margin-top: 50px;\n  background-color: #ffffff;\n}\n.ui-component-panel .search-input {\n  background: #f8fbff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  z-index: 1;\n}\n.ui-component-panel .search-input .el-input__prefix {\n  padding: 10px;\n}\n.ui-component-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.ui-component-panel .el-collapse-item > div:first-of-type {\n  border-bottom: 1px solid #d9dbdd;\n  margin-bottom: 10px;\n}\n.ui-component-panel .el-collapse-item__header {\n  background: #ffffff;\n  color: #070303;\n  height: 25px;\n  line-height: 25px;\n  padding-left: 10px;\n  font-size: 12px;\n}\n.ui-component-panel .el-collapse-item__header i {\n  margin-right: 5px;\n  font-size: 14px;\n}\n.ui-component-panel .el-collapse-item__wrap {\n  background: #ffffff;\n  border-bottom: 0;\n}\n.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {\n  padding: 10px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  color: #070303;\n  flex-direction: column;\n  width: 42px;\n  cursor: pointer;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i {\n  font-size: 20px;\n  background: #fff;\n  height: 40px;\n  width: 40px;\n  line-height: 40px;\n  border-radius: 5px;\n  color: #909090;\n  border: 1px solid #d9dbdd;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  margin-bottom: 5px;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i:hover {\n  background: #2882e0;\n  color: #fff;\n  border-color: #4e8be1;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item span {\n  font-size: 12px;\n  text-align: center;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {\n  width: 50px;\n  height: 30px;\n  line-height: 15px;\n  display: block;\n  white-space: normal;\n  margin: 0;\n}\n.m-editor-resizer {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  width: 8px;\n  margin: 0 -5px;\n  height: 100%;\n  opacity: 0.9;\n  background: padding-box #d8dee8;\n  box-sizing: border-box;\n  cursor: col-resize;\n  z-index: 1;\n}\n.m-editor-resizer:hover {\n  border-color: #d8dee8;\n}\n.m-editor-resizer .icon-container {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.4s;\n  width: 20px;\n  height: 120px;\n  line-height: 120px;\n  text-align: center;\n  background: #d8dee8;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: pointer;\n}\n.m-editor-resizer .icon-container.position-left {\n  transform: translate(calc(-100% - 4px), -50%);\n}\n.m-editor-resizer .icon-container.position-right {\n  transform: translate(calc(100% + 4px), -50%);\n}\n.m-editor-resizer .icon {\n  color: #fff;\n  font-size: 18px;\n}\n.magic-editor-resizer:hover .icon-container {\n  visibility: visible;\n  opacity: 1;\n}\n.m-editor-workspace {\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n.m-editor-workspace:focus-visible {\n  outline: 0;\n}\n.m-editor-page-bar {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  width: 100%;\n  height: 32px;\n  line-height: 32px;\n  color: #070303;\n  background-color: #f3f3f3;\n  border-top: 1px solid #d9dbdd;\n  z-index: 2;\n  overflow: hidden;\n}\n.m-editor-page-bar-items {\n  display: flex;\n  transition: transform 0.3s;\n}\n.m-editor-page-bar-item {\n  padding: 0 10px;\n  cursor: pointer;\n  border-right: 1px solid #d9dbdd;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  background-color: #f3f3f3;\n  white-space: nowrap;\n}\n.m-editor-page-bar-item.active {\n  background-color: #fff;\n  cursor: text;\n}\n.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {\n  cursor: pointer;\n}\n.m-editor-page-bar-item-icon {\n  position: relative;\n  z-index: 1;\n}\n.m-editor-page-bar-item-title {\n  max-width: 150px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.page-bar-popover.el-popper.el-popover {\n  padding: 10px 0;\n}\n.page-bar-popover .menu-item {\n  cursor: pointer;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n}\n.page-bar-popover .menu-item .el-button--text,\n.page-bar-popover .menu-item i {\n  color: #070303;\n}\n.page-bar-popover .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-props-panel {\n  padding: 0 10px;\n}\n.m-editor-props-panel.small .el-form-item__label {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .m-fieldset legend {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .el-tabs__item {\n  font-size: 12px;\n}\n.m-editor-props-panel .el-input__wrapper {\n  border-radius: 0;\n}\n.m-editor-props-panel-popper.small span,\n.m-editor-props-panel-popper.small a,\n.m-editor-props-panel-popper.small p {\n  font-size: 12px;\n}\n.magic-editor-content-menu {\n  position: fixed;\n  font-size: 12px;\n  background: #fff;\n  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);\n  z-index: 9999;\n  transform-origin: 0% 0%;\n  font-weight: 600;\n  padding: 4px 0px;\n  overflow: auto;\n  max-height: 100%;\n}\n.magic-editor-content-menu .menu-item {\n  color: #333;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n  min-width: 140px;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n  border-left: 2px solid transparent;\n}\n.magic-editor-content-menu .menu-item .el-button {\n  width: 100%;\n  justify-content: flex-start;\n}\n.magic-editor-content-menu .menu-item .el-button--text,\n.magic-editor-content-menu .menu-item i {\n  color: #070303;\n}\n.magic-editor-content-menu .menu-item.divider {\n  padding: 0 14px;\n}\n.magic-editor-content-menu .menu-item.divider .el-divider {\n  margin: 0;\n}\n.magic-editor-content-menu .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-stage {\n  position: relative;\n  width: 100%;\n  height: calc(100% - 32px);\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-stage-container {\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  position: relative;\n  border: 1px solid #d9dbdd;\n  transition: transform 0.3s;\n  box-sizing: content-box;\n}\n.m-editor-stage-container::-webkit-scrollbar {\n  width: 0 !important;\n}\n.magic-code-editor {\n  width: 100%;\n}\n.magic-code-editor .margin {\n  margin: 0;\n}")();
+const index$1 = '';
 
 const defaultInstallOpt = {};
-var index = {
+const index = {
   install: (app, opt) => {
     const option = Object.assign(defaultInstallOpt, opt || {});
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component(uiSelect.name, uiSelect);
+    app.component("m-fields-ui-select", _sfc_main$l);
     app.component(CodeLink.name, CodeLink);
     app.component(Code.name, Code);
     app.component(CodeEditor.name, CodeEditor);
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, uiService, warn };
-//# sourceMappingURL=tmagic-editor.es.js.map
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$f as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, warn };
+//# sourceMappingURL=tmagic-editor.mjs.map