@tmagic/editor 1.0.6 → 1.1.0-beta.10

package/dist/tmagic-editor.umd.js

@@ -1,34 +1,34 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController, global.StageCore));
-})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, Gesto, elementPlus, KeyController, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController));
+})(this, (function (exports, vue, serialize, iconsVue, lodashEs, monaco, StageCore, schema, utils, events, core, Gesto, elementPlus, KeyController) { 'use strict';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
-    var n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
     if (e) {
-      Object.keys(e).forEach(function (k) {
+      for (const k in e) {
         if (k !== 'default') {
-          var d = Object.getOwnPropertyDescriptor(e, k);
+          const d = Object.getOwnPropertyDescriptor(e, k);
           Object.defineProperty(n, k, d.get ? d : {
             enumerable: true,
-            get: function () { return e[k]; }
+            get: () => e[k]
           });
         }
-      });
+      }
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
   }
 
-  var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
-  var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
-  var Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
-  var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
-  var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
+  const serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
+  const monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  const StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
+  const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
+  const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
   if (typeof global === "undefined") {
     window.global = window;
@@ -37,15 +37,7 @@
     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 = vue.defineComponent({
+  const _sfc_main$n = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -62,7 +54,16 @@
       };
     }
   });
-  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 = vue.resolveComponent("magic-code-editor");
     return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
       style: vue.normalizeStyle(`height: ${_ctx.height}`),
@@ -71,9 +72,9 @@
       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 = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -97,7 +98,7 @@
       vue.watchEffect(() => {
         if (!props.model || !props.name)
           return;
-        modelValue.value.form[props.name] = serialize__default["default"](props.model[props.name], {
+        modelValue.value.form[props.name] = serialize__default.default(props.model[props.name], {
           space: 2,
           unsafe: true
         }).replace(/"(\w+)":\s/g, "$1: ");
@@ -128,7 +129,8 @@
       };
     }
   });
-  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 = vue.resolveComponent("m-fields-link");
     return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
       config: _ctx.formConfig,
@@ -137,26 +139,20 @@
       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 = vue.defineComponent({
-    name: "m-fields-ui-select",
+  const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _sfc_main$l = /* @__PURE__ */ vue.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 = vue.inject("services");
       const mForm = vue.inject("mForm");
       const val = vue.computed(() => props.model[props.name]);
@@ -178,97 +174,89 @@
           cancelHandler();
         }
       };
-      return {
-        Delete: vue.markRaw(icons.Delete),
-        Pointer: vue.markRaw(icons.Pointer),
-        Close: vue.markRaw(icons.Close),
-        val,
-        uiSelectMode,
-        toName: vue.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 = vue.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__ */ vue.createTextVNode("\u53D6\u6D88");
-  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_el_button = vue.resolveComponent("el-button");
-    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-    return _ctx.uiSelectMode ? (vue.openBlock(), vue.createElementBlock("div", {
-      key: 0,
-      class: "m-fields-ui-select",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
-    }, [
-      vue.createVNode(_component_el_button, {
-        type: "danger",
-        icon: _ctx.Delete,
-        text: "",
-        style: { "padding": "0" }
-      }, {
-        default: vue.withCtx(() => [
-          _hoisted_1$d
-        ]),
-        _: 1
-      }, 8, ["icon"])
-    ])) : (vue.openBlock(), vue.createElementBlock("div", {
-      key: 1,
-      class: "m-fields-ui-select",
-      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.startSelect && _ctx.startSelect(...args)),
-      style: { "display": "flex" }
-    }, [
-      vue.createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
-        default: vue.withCtx(() => [
-          _ctx.val ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-            key: 0,
-            style: { "padding": "0" },
-            type: "danger",
-            icon: _ctx.Close,
-            text: "",
-            onClick: vue.withModifiers(_ctx.deleteHandler, ["stop"])
-          }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
-        ]),
-        _: 1
-      }),
-      vue.createVNode(_component_el_tooltip, {
-        content: _ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
-      }, {
-        default: vue.withCtx(() => [
+      return (_ctx, _cache) => {
+        const _component_el_button = vue.resolveComponent("el-button");
+        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+        return uiSelectMode.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "m-fields-ui-select",
+          onClick: cancelHandler
+        }, [
           vue.createVNode(_component_el_button, {
+            type: "danger",
+            icon: vue.unref(iconsVue.Delete),
             text: "",
-            style: { "padding": "0", "margin": "0" }
+            style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              vue.createTextVNode(vue.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"])
+        ])) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: "m-fields-ui-select",
+          onClick: startSelect,
+          style: { "display": "flex" }
+        }, [
+          vue.createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+            default: vue.withCtx(() => [
+              vue.unref(val) ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                key: 0,
+                style: { "padding": "0" },
+                type: "danger",
+                icon: vue.unref(iconsVue.Close),
+                text: "",
+                onClick: vue.withModifiers(deleteHandler, ["stop"])
+              }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }),
+          vue.createVNode(_component_el_tooltip, {
+            content: vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_el_button, {
+                text: "",
+                style: { "padding": "0", "margin": "0" }
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(vue.unref(val) ? vue.unref(toName) + "_" + vue.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 = "";
     if (typeof v !== "string") {
-      value = serialize__default["default"](v, {
+      value = serialize__default.default(v, {
         space: 2,
         unsafe: true
       }).replace(/"(\w+)":\s/g, "$1: ");
@@ -280,7 +268,7 @@
     }
     return value;
   };
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -387,14 +375,15 @@
       };
     }
   });
+
   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 vue.openBlock(), vue.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) => {
@@ -403,6 +392,9 @@
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
   class UndoRedo {
+    elementList;
+    listCursor;
+    listMaxSize;
     constructor(listMaxSize = 200) {
       const minListMaxSize = 2;
       this.elementList = [];
@@ -479,17 +471,12 @@
     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]) {
@@ -503,12 +490,12 @@
     }
   };
   class BaseService extends events.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];
@@ -565,14 +552,14 @@
   }
 
   class History extends BaseService {
+    state = vue.reactive({
+      pageSteps: {},
+      pageId: void 0,
+      canRedo: false,
+      canUndo: false
+    });
     constructor() {
       super([]);
-      this.state = vue.reactive({
-        pageSteps: {},
-        pageId: void 0,
-        canRedo: false,
-        canUndo: false
-      });
       this.on("change", this.setCanUndoRedo);
     }
     reset() {
@@ -641,88 +628,88 @@
       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 = vue.reactive({
-        propsConfigMap: {},
-        propsValueMap: {}
-      });
+      super(["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]);
     }
-    setPropsConfigs(configs) {
-      Object.keys(configs).forEach((type) => {
-        this.setPropsConfig(utils.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 lodashEs.cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
     }
-    setPropsValues(values) {
-      Object.keys(values).forEach((type) => {
-        this.setPropsValue(utils.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__default.default(value)}`;
       }
-      const data = lodashEs.cloneDeep(defaultValue);
-      await this.setNewItemId(data);
-      return {
-        ...getDefaultPropsValue(type, await this.createId(type)),
-        ...lodashEs.mergeWith(lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
-      };
-    }
-    async createId(type) {
-      return `${type}_${lodashEs.random(1e4, false)}`;
+      storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
     }
-    async setNewItemId(config, parent) {
-      const oldId = config.id;
-      config.id = await this.createId(config.type || "component");
-      if (utils.isPop(config) && parent?.type === schema.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);
-        }
+    getValueAndProtocol(value) {
+      let protocol2 = "";
+      if (value === null) {
+        return {
+          item: value,
+          protocol: protocol2
+        };
       }
+      const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+        protocol2 = $1;
+        return $3;
+      });
+      return {
+        protocol: protocol2,
+        item: item2
+      };
     }
   }
-  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";
@@ -768,56 +755,49 @@
     const items = parent?.items || [];
     return items.findIndex((item) => `${item.id}` === `${node.id}`);
   };
-  const toRelative = (node) => {
-    node.style = {
-      ...node.style || {},
-      position: "relative",
-      top: 0,
-      left: 0
-    };
-    return node;
-  };
-  const setTop2Middle = (node, parentNode, stage) => {
-    const style = node.style || {};
-    let height = style.height || 0;
-    if (!stage || typeof style.top !== "undefined" || !parentNode.style)
-      return style;
+  const getRelativeStyle = (style = {}) => ({
+    ...style,
+    position: "relative",
+    top: 0,
+    left: 0
+  });
+  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 (!utils.isNumber(height)) {
       height = 0;
     }
     const { height: parentHeight } = parentNode.style;
     if (utils.isPage(parentNode)) {
       const { scrollTop = 0, wrapperHeight } = stage.mask;
-      style.top = (wrapperHeight - height) / 2 + scrollTop;
-    } else {
-      style.top = (parentHeight - height) / 2;
+      return (wrapperHeight - height) / 2 + scrollTop;
     }
-    return style;
+    return (parentHeight - height) / 2;
   };
-  const initPosition = (node, layout, parentNode, stage) => {
+  const getInitPositionStyle = (style = {}, layout) => {
     if (layout === Layout.ABSOLUTE) {
-      node.style = {
-        position: "absolute",
-        ...setTop2Middle(node, parentNode, stage)
+      return {
+        ...style,
+        position: "absolute"
       };
-      return node;
     }
     if (layout === Layout.RELATIVE) {
-      return toRelative(node);
+      return getRelativeStyle(style);
     }
-    return node;
+    return style;
   };
   const setLayout = (node, layout) => {
     node.items?.forEach((child) => {
       if (utils.isPop(child))
         return;
-      child.style = child.style || {};
-      if (child.style.position === "fixed")
+      const style = child.style || {};
+      if (style.position === "fixed")
         return;
       if (layout !== Layout.RELATIVE) {
-        child.style.position = "absolute";
+        style.position = "absolute";
       } else {
-        toRelative(child);
+        child.style = getRelativeStyle(style);
         child.style.right = "auto";
         child.style.bottom = "auto";
       }
@@ -834,11 +814,10 @@
       offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
       offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
     });
-    node.style = {
+    return {
       ...node.style || {},
       ...offset
     };
-    return node;
   };
   const Fixed2Other = async (node, root, getLayout) => {
     const path = utils.getNodePath(node.id, root.items);
@@ -853,20 +832,20 @@
       offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
       offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
     });
+    const style = node.style || {};
     const parent = path.pop();
     if (!parent) {
-      return toRelative(node);
+      return getRelativeStyle(style);
     }
     const layout = await getLayout(parent);
     if (layout !== Layout.RELATIVE) {
-      node.style = {
-        ...node.style || {},
+      return {
+        ...style,
         ...offset,
         position: "absolute"
       };
-      return node;
     }
-    return toRelative(node);
+    return getRelativeStyle(style);
   };
   const getGuideLineFromCache = (key) => {
     if (!key)
@@ -881,86 +860,284 @@
     }
     return [];
   };
-
-  const log = (...args) => {
-  };
-  const info = (...args) => {
-  };
-  const warn = (...args) => {
-  };
-  const debug = (...args) => {
+  const fixNodeLeft = (config, parent, doc) => {
+    if (!doc || !config.style || !utils.isNumber(config.style.left))
+      return config.style?.left;
+    const el = doc.getElementById(`${config.id}`);
+    const parentEl = doc.getElementById(`${parent.id}`);
+    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 error = (...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)
+    };
   };
 
-  class Editor$1 extends BaseService {
+  class Props extends BaseService {
+    state = vue.reactive({
+      propsConfigMap: {},
+      propsValueMap: {}
+    });
     constructor() {
       super([
-        "getLayout",
-        "select",
-        "add",
-        "remove",
-        "update",
-        "sort",
-        "copy",
-        "paste",
-        "alignCenter",
-        "moveLayer",
-        "move",
-        "undo",
-        "redo",
-        "highlight"
-      ], ["select", "update", "moveLayer"]);
-      this.isHistoryStateChange = false;
-      this.state = vue.reactive({
-        root: null,
-        page: null,
-        parent: null,
-        node: null,
-        stage: null,
-        highlightNode: null,
-        modifiedNodeIds: /* @__PURE__ */ new Map(),
-        pageLength: 0
+        "setPropsConfig",
+        "getPropsConfig",
+        "setPropsValue",
+        "getPropsValue",
+        "createId",
+        "setNewItemId",
+        "getDefaultPropsValue"
+      ]);
+    }
+    setPropsConfigs(configs) {
+      Object.keys(configs).forEach((type) => {
+        this.setPropsConfig(utils.toLine(type), configs[type]);
       });
+      this.emit("props-configs-change");
     }
-    set(name, value) {
-      this.state[name] = value;
-      if (name === "root") {
-        this.state.pageLength = value?.items?.length || 0;
-        this.emit("root-change", value);
+    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 lodashEs.cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
     }
-    get(name) {
-      return this.state[name];
+    setPropsValues(values) {
+      Object.keys(values).forEach((type) => {
+        this.setPropsValue(utils.toLine(type), values[type]);
+      });
     }
-    getNodeInfo(id, raw = true) {
-      let root = this.get("root");
-      if (raw) {
-        root = vue.toRaw(root);
-      }
-      if (!root)
-        return {};
-      if (id === root.id) {
-        return { node: root };
-      }
-      const path = utils.getNodePath(id, root.items);
-      if (!path.length)
-        return {};
-      path.unshift(root);
-      const info = {};
-      info.node = path[path.length - 1];
-      info.parent = path[path.length - 2];
-      path.forEach((item) => {
-        if (item.type === schema.NodeType.PAGE) {
-          info.page = item;
-          return;
+    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(lodashEs.cloneDeep({
+          type,
+          ...defaultValue
+        }))
+      ]);
+      return {
+        id,
+        ...defaultPropsValue,
+        ...lodashEs.mergeWith({}, lodashEs.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);
       });
-      return info;
     }
-    getNodeById(id, raw = true) {
-      const { node } = this.getNodeInfo(id, raw);
-      return node;
+    async createId(type) {
+      return `${type}_${this.guid()}`;
+    }
+    async setNewItemId(config, parent) {
+      const oldId = config.id;
+      config.id = await this.createId(config.type || "component");
+      if (utils.isPop(config) && parent?.type === schema.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 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 (!lodashEs.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 (utils.isPage(pasteConfig)) {
+        pasteConfig.name = generatePageNameByApp(editorService.get("root"));
+      }
+      return pasteConfig;
+    }));
+    return pasteConfigs;
+  };
+  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 getAddParent = (node) => {
+    const curNode = editorService.get("node");
+    let parentNode;
+    if (utils.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 = vue.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",
+        "move",
+        "undo",
+        "redo",
+        "highlight"
+      ], ["select", "update", "moveLayer"]);
+    }
+    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);
+      }
+    }
+    get(name) {
+      return this.state[name];
+    }
+    getNodeInfo(id, raw = true) {
+      let root = this.get("root");
+      if (raw) {
+        root = vue.toRaw(root);
+      }
+      if (!root)
+        return {};
+      if (id === root.id) {
+        return { node: root };
+      }
+      const path = utils.getNodePath(id, root.items);
+      if (!path.length)
+        return {};
+      path.unshift(root);
+      const info = {};
+      info.node = path[path.length - 1];
+      info.parent = path[path.length - 2];
+      path.forEach((item) => {
+        if (item.type === schema.NodeType.PAGE) {
+          info.page = item;
+          return;
+        }
+      });
+      return info;
+    }
+    getNodeById(id, raw = true) {
+      const { node } = this.getNodeInfo(id, raw);
+      return node;
     }
     getParentById(id, raw = true) {
       if (!this.get("root"))
@@ -979,9 +1156,9 @@
       }
       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) {
@@ -1021,56 +1198,83 @@
       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 = lodashEs.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 === schema.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(vue.toRaw(parentNode), addNode);
-      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
-      if ((parentNode?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && newNode.type !== schema.NodeType.PAGE) {
+      const stage = this.get("stage");
+      if ((parent?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && node.type !== schema.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(vue.toRaw(parent), node);
+      node.style = getInitPositionStyle(node.style, layout);
+      await stage?.add({
+        config: lodashEs.cloneDeep(node),
+        parent: lodashEs.cloneDeep(parent),
+        parentId: parent.id,
+        root: lodashEs.cloneDeep(root)
+      });
+      node.style = fixNodePosition(node, parent, stage);
+      await stage?.update({ config: lodashEs.cloneDeep(node), parentId: parent.id, root: lodashEs.cloneDeep(root) });
+      this.addModifiedNodeId(node.id);
+      return node;
+    }
+    async add(addNode, parent) {
       const stage = this.get("stage");
-      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
-      await this.select(newNode);
-      this.addModifiedNodeId(newNode.id);
-      if (!isPage2) {
-        this.pushHistoryState();
+      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({ ...vue.toRaw(await propsService.getPropsValue(type, config)) });
+      } else {
+        addNodes.push(...addNode);
       }
-      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 (utils.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);
@@ -1078,7 +1282,7 @@
         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: this.get("root") });
+      stage?.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
       if (node.type === schema.NodeType.PAGE) {
         this.state.pageLength -= 1;
         if (root.items[0]) {
@@ -1092,26 +1296,28 @@
           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 = lodashEs.cloneDeep(vue.toRaw(info.node));
-      let newConfig = await this.toggleFixedPosition(vue.toRaw(config2), node, this.get("root"));
+      let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, this.get("root"));
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
           return srcValue;
@@ -1136,18 +1342,28 @@
         newConfig = setLayout(newConfig, newLayout);
       }
       parentNodeItems[index] = newConfig;
-      if (`${newConfig.id}` === `${this.get("node").id}`) {
-        this.set("node", newConfig);
-      }
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: 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: lodashEs.cloneDeep(newConfig),
+        parentId: parent.id,
+        root: lodashEs.cloneDeep(this.get("root"))
+      });
       if (newConfig.type === schema.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 = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
@@ -1158,62 +1374,57 @@
       parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
       await this.update(parent);
       await this.select(node);
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(node), root: this.get("root") });
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(node),
+        parentId: parent.id,
+        root: lodashEs.cloneDeep(this.get("root"))
+      });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
-    async copy(config2) {
-      globalThis.localStorage.setItem(COPY_STORAGE_KEY, serialize__default["default"](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 (utils.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(vue.toRaw(parent), vue.toRaw(node));
+    async doAlignCenter(config) {
+      const parent = this.getParentById(config.id);
+      if (!parent)
+        throw new Error("\u627E\u4E0D\u5230\u7236\u8282\u70B9");
+      const node = lodashEs.cloneDeep(vue.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 && utils.isNumber(parent.style?.width) && utils.isNumber(node.style?.width)) {
         node.style.left = (parent.style.width - node.style.width) / 2;
       }
-      await this.update(node);
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(node)), root: 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,7 +1438,38 @@
       } else {
         brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
       }
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(parent)), root: this.get("root") });
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(vue.toRaw(parent)),
+        parentId: parent.id,
+        root: lodashEs.cloneDeep(this.get("root"))
+      });
+    }
+    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 = lodashEs.cloneDeep(this.get("root"));
+        const index = getNodeIndex(node, parent);
+        parent.items?.splice(index, 1);
+        await stage.remove({ id: node.id, parentId: parent.id, root });
+        const layout = await this.getLayout(target);
+        const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config, (objValue, srcValue) => {
+          if (Array.isArray(srcValue)) {
+            return srcValue;
+          }
+        });
+        newConfig.style = getInitPositionStyle(newConfig.style, layout);
+        target.items.push(newConfig);
+        await stage.select(targetId);
+        await stage.update({ config: lodashEs.cloneDeep(target), parentId: parent.id, root });
+        await this.select(newConfig);
+        stage.select(newConfig.id);
+        this.addModifiedNodeId(target.id);
+        this.addModifiedNodeId(parent.id);
+        this.pushHistoryState();
+        return newConfig;
+      }
     }
     async undo() {
       const value = historyService.undo();
@@ -1243,7 +1485,7 @@
       const node = vue.toRaw(this.get("node"));
       if (!node || utils.isPage(node))
         return;
-      const { style, id } = node;
+      const { style, id, type } = node;
       if (!style || style.position !== "absolute")
         return;
       if (top && !utils.isNumber(style.top))
@@ -1252,6 +1494,7 @@
         return;
       this.update({
         id,
+        type,
         style: {
           ...style,
           left: Number(style.left) + left,
@@ -1263,6 +1506,7 @@
       this.removeAllListeners();
       this.set("root", null);
       this.set("node", null);
+      this.set("nodes", []);
       this.set("page", null);
       this.set("parent", null);
     }
@@ -1299,22 +1543,22 @@
       }, 0);
     }
     async toggleFixedPosition(dist, src, root) {
-      let newConfig = lodashEs.cloneDeep(dist);
+      const newConfig = lodashEs.cloneDeep(dist);
       if (!utils.isPop(src) && newConfig.style?.position) {
         if (isFixed(newConfig) && !isFixed(src)) {
-          newConfig = change2Fixed(newConfig, root);
+          newConfig.style = change2Fixed(newConfig, root);
         } else if (!isFixed(newConfig) && isFixed(src)) {
-          newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+          newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
         }
       }
       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");
@@ -1332,7 +1576,7 @@
       };
     }
   }
-  var editorService = new Editor$1();
+  const editorService = new Editor$1();
 
   const eventMap = vue.reactive({});
   const methodMap = vue.reactive({});
@@ -1376,7 +1620,7 @@
       return lodashEs.cloneDeep(methodMap[type] || core.DEFAULT_METHODS);
     }
   }
-  var eventsService = new Events();
+  const eventsService = new Events();
 
   const fillConfig = (config = []) => [
     {
@@ -1582,22 +1826,35 @@
     }
   ];
   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 = vue.defineComponent({
-    components: { Plus: icons.Plus },
+  const _sfc_main$j = vue.defineComponent({
+    components: { Plus: iconsVue.Plus },
     setup() {
       const services = vue.inject("services");
       return {
@@ -1613,10 +1870,11 @@
       };
     }
   });
+
   const _hoisted_1$b = { class: "m-editor-empty-panel" };
   const _hoisted_2$4 = { class: "m-editor-empty-content" };
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_3$1 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
@@ -1633,14 +1891,14 @@
               _: 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 = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -1654,7 +1912,7 @@
       vue.onMounted(() => {
         if (!target.value)
           return;
-        getso = new Gesto__default["default"](target.value, {
+        getso = new Gesto__default.default(target.value, {
           container: window,
           pinchOutside: true
         }).on("drag", (e) => {
@@ -1682,18 +1940,19 @@
       };
     }
   });
+
   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 vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, [
       vue.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 = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
@@ -1722,12 +1981,13 @@
       };
     }
   });
+
   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 = vue.resolveComponent("magic-code-editor");
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
@@ -1773,11 +2033,11 @@
       ]))
     ]);
   }
-  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 = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     name: "m-icon",
-    components: { Edit: icons.Edit },
+    components: { Edit: iconsVue.Edit },
     props: {
       icon: {
         type: [String, Object]
@@ -1789,8 +2049,9 @@
       };
     }
   });
+
   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 = vue.resolveComponent("edit");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return !_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -1798,10 +2059,12 @@
         vue.createVNode(_component_edit)
       ]),
       _: 1
-    })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createElementBlock("img", {
-      key: 1,
-      src: _ctx.icon
-    }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+    })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
+      default: vue.withCtx(() => [
+        vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$8)
+      ]),
+      _: 1
+    })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
       key: 2,
       class: vue.normalizeClass(_ctx.icon)
     }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
@@ -1811,10 +2074,19 @@
       _: 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 = vue.defineComponent({
-    components: { MIcon, ArrowDown: icons.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__ */ vue.defineComponent({
+    __name: "ToolButton",
     props: {
       data: {
         type: [Object, String],
@@ -1829,7 +2101,8 @@
         default: "click"
       }
     },
-    setup(props) {
+    setup(__props) {
+      const props = __props;
       const services = vue.inject("services");
       const uiService = services?.uiService;
       const zoom = vue.computed(() => uiService?.get("zoom") ?? 1);
@@ -1853,7 +2126,7 @@
           case "delete":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Delete),
+              icon: vue.markRaw(iconsVue.Delete),
               tooltip: "\u522A\u9664",
               disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
               handler: () => services?.editorService.remove(services?.editorService.get("node"))
@@ -1861,7 +2134,7 @@
           case "undo":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Back),
+              icon: vue.markRaw(iconsVue.Back),
               tooltip: "\u540E\u9000",
               disabled: () => !services?.historyService.state.canUndo,
               handler: () => services?.editorService.undo()
@@ -1869,7 +2142,7 @@
           case "redo":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Right),
+              icon: vue.markRaw(iconsVue.Right),
               tooltip: "\u524D\u8FDB",
               disabled: () => !services?.historyService.state.canRedo,
               handler: () => services?.editorService.redo()
@@ -1877,28 +2150,28 @@
           case "zoom-in":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ZoomIn),
+              icon: vue.markRaw(iconsVue.ZoomIn),
               tooltip: "\u653E\u5927",
               handler: zoomInHandler
             };
           case "zoom-out":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ZoomOut),
+              icon: vue.markRaw(iconsVue.ZoomOut),
               tooltip: "\u7E2E\u5C0F",
               handler: zoomOutHandler
             };
           case "rule":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ScaleToOriginal),
+              icon: vue.markRaw(iconsVue.ScaleToOriginal),
               tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
               handler: () => uiService?.set("showRule", !showRule.value)
             };
           case "guides":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Grid),
+              icon: vue.markRaw(iconsVue.Grid),
               tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
               handler: () => uiService?.set("showGuides", !showGuides.value)
             };
@@ -1926,176 +2199,155 @@
           item2.handler?.(services, event);
         }
       };
-      return {
-        ZoomIn: vue.markRaw(icons.ZoomIn),
-        ZoomOut: vue.markRaw(icons.ZoomOut),
-        item,
-        zoom,
-        disabled,
-        display: vue.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 = vue.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 = vue.resolveComponent("el-divider");
-    const _component_tool_button = vue.resolveComponent("tool-button", true);
-    const _component_m_icon = vue.resolveComponent("m-icon");
-    const _component_el_button = vue.resolveComponent("el-button");
-    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-    const _component_arrow_down = vue.resolveComponent("arrow-down");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
-    const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
-    const _component_el_dropdown = vue.resolveComponent("el-dropdown");
-    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", {
-      key: 0,
-      class: vue.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" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
-        key: 0,
-        direction: _ctx.item.direction || "vertical"
-      }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-        vue.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"]),
-        vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
-        vue.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" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-        _ctx.item.tooltip ? (vue.openBlock(), vue.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 = vue.resolveComponent("el-divider");
+        const _component_tool_button = vue.resolveComponent("tool-button", true);
+        const _component_el_button = vue.resolveComponent("el-button");
+        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+        const _component_el_icon = vue.resolveComponent("el-icon");
+        const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
+        const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
+        const _component_el_dropdown = vue.resolveComponent("el-dropdown");
+        return vue.unref(display) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          effect: "dark",
-          placement: "bottom-start",
-          content: _ctx.item.tooltip
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_el_button, {
-              size: "small",
+          class: vue.normalizeClass(["menu-item", vue.unref(item).type]),
+          onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(item), $event)),
+          onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(vue.unref(item), $event)),
+          onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(vue.unref(item), $event))
+        }, [
+          vue.unref(item).type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
+            key: 0,
+            direction: vue.unref(item).direction || "vertical"
+          }, null, 8, ["direction"])) : vue.unref(item).type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, vue.toDisplayString(vue.unref(item).text), 1)) : vue.unref(item).type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            vue.createVNode(_component_tool_button, {
+              data: { type: "button", icon: vue.unref(iconsVue.ZoomOut), handler: zoomOutHandler, tooltip: "\u7F29\u5C0F" },
+              "event-type": __props.eventType
+            }, null, 8, ["data", "event-type"]),
+            vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(parseInt(`${vue.unref(zoom) * 100}`, 10)) + "%", 1),
+            vue.createVNode(_component_tool_button, {
+              data: { type: "button", icon: vue.unref(iconsVue.ZoomIn), handler: zoomInHandler, tooltip: "\u653E\u5927" },
+              "event-type": __props.eventType
+            }, null, 8, ["data", "event-type"])
+          ], 64)) : vue.unref(item).type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+            vue.unref(item).tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+              key: 0,
+              effect: "dark",
+              placement: "bottom-start",
+              content: vue.unref(item).tooltip
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_el_button, {
+                  size: "small",
+                  text: "",
+                  disabled: vue.unref(disabled)
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.unref(item).icon ? (vue.openBlock(), vue.createBlock(MIcon, {
+                      key: 0,
+                      icon: vue.unref(item).icon
+                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(item).text), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])
+              ]),
+              _: 1
+            }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
+              key: 1,
+              size: "small",
               text: "",
-              disabled: _ctx.disabled
+              disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+                vue.unref(item).icon ? (vue.openBlock(), vue.createBlock(MIcon, {
                   key: 0,
-                  icon: _ctx.item.icon
+                  icon: vue.unref(item).icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
+                vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(item).text), 1)
               ]),
               _: 1
-            }, 8, ["disabled"])
-          ]),
-          _: 1
-        }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
-          key: 1,
-          size: "small",
-          text: "",
-          disabled: _ctx.disabled
-        }, {
-          default: vue.withCtx(() => [
-            _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
-              key: 0,
-              icon: _ctx.item.icon
-            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
-          ]),
-          _: 1
-        }, 8, ["disabled"]))
-      ], 64)) : _ctx.item.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
-        key: 4,
-        trigger: "click",
-        disabled: _ctx.disabled,
-        onCommand: _ctx.dropdownHandler
-      }, {
-        dropdown: vue.withCtx(() => [
-          _ctx.item.items && _ctx.item.items.length ? (vue.openBlock(), vue.createBlock(_component_el_dropdown_menu, { key: 0 }, {
+            }, 8, ["disabled"]))
+          ], 64)) : vue.unref(item).type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
+            key: 4,
+            trigger: "click",
+            disabled: vue.unref(disabled),
+            onCommand: dropdownHandler
+          }, {
+            dropdown: vue.withCtx(() => [
+              vue.unref(item).items && vue.unref(item).items.length ? (vue.openBlock(), vue.createBlock(_component_el_dropdown_menu, { key: 0 }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(item).items, (subItem, index) => {
+                    return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
+                      key: index,
+                      command: { item: vue.unref(item), subItem }
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["command"]);
+                  }), 128))
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ]),
             default: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.item.items, (subItem, index) => {
-                return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
-                  key: index,
-                  command: { item: _ctx.item, subItem }
-                }, {
+              vue.createElementVNode("span", _hoisted_3, [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(item).text), 1),
+                vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
-                    vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
+                    vue.createVNode(vue.unref(iconsVue.ArrowDown))
                   ]),
-                  _: 2
-                }, 1032, ["command"]);
-              }), 128))
+                  _: 1
+                })
+              ])
             ]),
             _: 1
-          })) : vue.createCommentVNode("", true)
-        ]),
-        default: vue.withCtx(() => [
-          vue.createElementVNode("span", _hoisted_3$1, [
-            vue.createTextVNode(vue.toDisplayString(_ctx.item.text), 1),
-            vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_arrow_down)
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _: 1
-      }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.item.component), vue.normalizeProps(vue.mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : vue.createCommentVNode("", true)
-    ], 34)) : vue.createCommentVNode("", true);
-  }
-  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+          }, 8, ["disabled"])) : vue.unref(item).type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(item).component), vue.normalizeProps(vue.mergeProps({ key: 5 }, vue.unref(item).props || {})), null, 16)) : vue.createCommentVNode("", true)
+        ], 34)) : vue.createCommentVNode("", true);
+      };
+    }
+  });
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     name: "nav-menu",
-    components: { ToolButton },
+    components: { ToolButton: _sfc_main$f },
     props: {
       data: {
         type: Object,
@@ -2113,7 +2365,8 @@
       };
     }
   });
-  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: "m-editor-nav-menu",
@@ -2135,9 +2388,9 @@
       }), 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 = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -2184,8 +2437,9 @@
       };
     }
   });
+
   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 = vue.resolveComponent("m-form");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
       vue.renderSlot(_ctx.$slots, "props-panel-header"),
@@ -2200,19 +2454,24 @@
       }, 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 = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
       const searchText = vue.ref("");
       const services = vue.inject("services");
+      const stageOptions = vue.inject("stageOptions");
+      const stage = vue.computed(() => services?.editorService.get("stage"));
       const list = vue.computed(() => services?.componentListService.getList().map((group) => ({
         ...group,
         items: group.items.filter((item) => item.text.includes(searchText.value))
       })));
       const collapseValue = vue.computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+      let timeout;
+      let clientX;
+      let clientY;
       return {
         searchText,
         collapseValue,
@@ -2227,19 +2486,46 @@
         dragstartHandler({ text, type, data = {} }, e) {
           if (e.dataTransfer) {
             e.dataTransfer.effectAllowed = "move";
-            e.dataTransfer.setData("data", serialize__default["default"]({
+            e.dataTransfer.setData("data", serialize__default.default({
               name: text,
               type,
               ...data
             }).replace(/"(\w+)":\s/g, "$1: "));
           }
+        },
+        dragendHandler() {
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = void 0;
+          }
+          const doc = stage.value?.renderer.contentWindow?.document;
+          if (doc && stageOptions) {
+            utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+          }
+          clientX = 0;
+          clientY = 0;
+        },
+        dragHandler(e) {
+          if (e.clientX !== clientX || e.clientY !== clientY) {
+            clientX = e.clientX;
+            clientY = e.clientY;
+            if (timeout) {
+              globalThis.clearTimeout(timeout);
+              timeout = void 0;
+            }
+            return;
+          }
+          if (timeout || !stage.value)
+            return;
+          timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
         }
       };
     }
   });
+
   const _hoisted_1$5 = /* @__PURE__ */ vue.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 = vue.resolveComponent("el-input");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -2280,7 +2566,9 @@
                         draggable: "true",
                         key: item.type,
                         onClick: ($event) => _ctx.appendComponent(item),
-                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event)
+                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event),
+                        onDragend: _cache[1] || (_cache[1] = (...args) => _ctx.dragendHandler && _ctx.dragendHandler(...args)),
+                        onDrag: _cache[2] || (_cache[2] = (...args) => _ctx.dragHandler && _ctx.dragHandler(...args))
                       }, [
                         vue.createVNode(_component_m_icon, {
                           icon: item.icon
@@ -2309,22 +2597,17 @@
       _: 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 = vue.defineComponent({
-    components: { ToolButton },
+  const _sfc_main$b = /* @__PURE__ */ vue.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 = vue.ref();
       const subMenu = vue.ref();
       const visible = vue.ref(false);
@@ -2350,6 +2633,36 @@
         }
         hide();
       };
+      const show = (e) => {
+        setTimeout(() => {
+          visible.value = true;
+          vue.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
+          });
+        }
+      };
       vue.onMounted(() => {
         if (props.isSubMenu)
           return;
@@ -2360,81 +2673,47 @@
           return;
         globalThis.removeEventListener("mousedown", hideHandler, true);
       });
-      return {
-        menu,
-        subMenu,
-        visible,
-        menuStyle,
-        subMenuData,
+      expose({
         hide,
-        show(e) {
-          setTimeout(() => {
-            visible.value = true;
-            vue.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 = vue.resolveComponent("content-menu", true);
+        return __props.menuData.length && visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "magic-editor-content-menu",
+          ref_key: "menu",
+          ref: menu,
+          style: vue.normalizeStyle(menuStyle.value)
+        }, [
+          vue.createElementVNode("div", null, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$f, {
+                "event-type": "mouseup",
+                data: item,
+                key: index,
+                onMouseup: hide,
+                onMouseenter: ($event) => showSubMenu(item)
+              }, null, 8, ["data", "onMouseenter"]);
+            }), 128))
+          ]),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            vue.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)) : vue.createCommentVNode("", true);
       };
     }
   });
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_tool_button = vue.resolveComponent("tool-button");
-    const _component_content_menu = vue.resolveComponent("content-menu", true);
-    return _ctx.menuData.length && _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
-      key: 0,
-      class: "magic-editor-content-menu",
-      ref: "menu",
-      style: vue.normalizeStyle(_ctx.menuStyle)
-    }, [
-      vue.createElementVNode("div", null, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-          return vue.openBlock(), vue.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))
-      ]),
-      (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-        vue.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)) : vue.createCommentVNode("", true);
-  }
-  var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
-  const _sfc_main$9 = vue.defineComponent({
-    components: { ContentMenu },
+  const _sfc_main$a = vue.defineComponent({
+    components: { ContentMenu: _sfc_main$b },
     setup() {
       const services = vue.inject("services");
       const menu = vue.ref();
@@ -2461,7 +2740,7 @@
             {
               text: "\u6807\u7B7E\u9875",
               type: "button",
-              icon: icons.Files,
+              icon: iconsVue.Files,
               handler: () => {
                 services?.editorService.add({
                   type: "tab-pane"
@@ -2486,14 +2765,14 @@
           {
             type: "button",
             text: "\u65B0\u589E",
-            icon: vue.markRaw(icons.Plus),
+            icon: vue.markRaw(iconsVue.Plus),
             display: () => node.value?.items,
             items: getSubMenuData.value
           },
           {
             type: "button",
             text: "\u590D\u5236",
-            icon: vue.markRaw(icons.DocumentCopy),
+            icon: vue.markRaw(iconsVue.DocumentCopy),
             display: () => !isRoot.value,
             handler: () => {
               node.value && services?.editorService.copy(node.value);
@@ -2502,7 +2781,7 @@
           {
             type: "button",
             text: "\u5220\u9664",
-            icon: vue.markRaw(icons.Delete),
+            icon: vue.markRaw(iconsVue.Delete),
             display: () => !isRoot.value && !isPage.value,
             handler: () => {
               node.value && services?.editorService.remove(node.value);
@@ -2516,7 +2795,8 @@
       };
     }
   });
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_content_menu = vue.resolveComponent("content-menu");
     return vue.openBlock(), vue.createBlock(_component_content_menu, {
       "menu-data": _ctx.menuData,
@@ -2524,7 +2804,7 @@
       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) => {
@@ -2558,9 +2838,17 @@
         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);
@@ -2616,7 +2904,7 @@
       tree.value?.filter(val);
     }
   });
-  const _sfc_main$8 = vue.defineComponent({
+  const _sfc_main$9 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
@@ -2663,8 +2951,9 @@
       };
     }
   });
+
   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 = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
     const _component_layer_menu = vue.resolveComponent("layer-menu");
@@ -2726,9 +3015,9 @@
       _: 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 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     components: { MIcon },
     props: {
       data: {
@@ -2745,7 +3034,7 @@
             case "component-list":
               return {
                 type: "component",
-                icon: icons.Coin,
+                icon: iconsVue.Coin,
                 text: "\u7EC4\u4EF6",
                 component: ComponentListPanel,
                 slots: {}
@@ -2753,7 +3042,7 @@
             case "layer":
               return {
                 type: "component",
-                icon: icons.Files,
+                icon: iconsVue.Files,
                 text: "\u5DF2\u9009\u7EC4\u4EF6",
                 component: LayerPanel,
                 slots: {}
@@ -2765,11 +3054,12 @@
       };
     }
   });
+
   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 = vue.resolveComponent("m-icon");
     const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
     return _ctx.config ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
@@ -2815,9 +3105,9 @@
       _: 3
     }, 8, ["name"])) : vue.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 = vue.defineComponent({
+  const _sfc_main$7 = vue.defineComponent({
     components: { TabPane },
     name: "m-sidebar",
     props: {
@@ -2836,7 +3126,8 @@
       };
     }
   });
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+
+  function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tab_pane = vue.resolveComponent("tab-pane");
     const _component_el_tabs = vue.resolveComponent("el-tabs");
     return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
@@ -2871,331 +3162,258 @@
       _: 3
     }, 8, ["modelValue"])) : vue.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 = vue.ref();
-    const itemsContainer = vue.ref();
-    const pageBarWidth = vue.ref(0);
-    const canScroll = vue.ref(false);
-    const itemsContainerWidth = vue.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__ */ vue.defineComponent({
+    __name: "PageBarScrollContainer",
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const pageBar = vue.ref();
+      const itemsContainer = vue.ref();
+      const pageBarWidth = vue.ref(0);
+      const canScroll = vue.ref(false);
+      const itemsContainerWidth = vue.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)`;
-    };
-    vue.onMounted(() => {
-      pageBar.value && resizeObserver.observe(pageBar.value);
-    });
-    vue.onUnmounted(() => {
-      resizeObserver.disconnect();
-    });
-    vue.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)`;
+      };
+      vue.onMounted(() => {
+        pageBar.value && resizeObserver.observe(pageBar.value);
+      });
+      vue.onUnmounted(() => {
+        resizeObserver.disconnect();
       });
-    });
-    return {
-      pageBar,
-      itemsContainer,
-      canScroll,
-      itemsContainerWidth,
-      scroll
-    };
-  };
-  const _sfc_main$5 = vue.defineComponent({
-    components: { ArrowLeftBold: icons.ArrowLeftBold, ArrowRightBold: icons.ArrowRightBold, CaretBottom: icons.CaretBottom, Plus: icons.Plus, ToolButton },
-    setup() {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
       const root = vue.computed(() => editorService?.get("root"));
-      return {
-        Delete: vue.markRaw(icons.Delete),
-        DocumentCopy: vue.markRaw(icons.DocumentCopy),
-        ...useScroll(root),
-        root,
-        page: vue.computed(() => editorService?.get("page")),
-        switchPage(page) {
-          editorService?.select(page);
-        },
-        addPage() {
-          if (!editorService)
-            return;
-          const pageConfig = {
-            type: schema.NodeType.PAGE,
-            name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
-          };
-          editorService.add(pageConfig);
-        },
-        copy(node) {
-          node && editorService?.copy(node);
-          editorService?.paste({
-            left: 0,
-            top: 0
-          });
-        },
-        remove(node) {
-          editorService?.remove(node);
-        }
+      vue.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: schema.NodeType.PAGE,
+          name: generatePageNameByApp(vue.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 = vue.resolveComponent("plus");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    const _component_arrow_left_bold = vue.resolveComponent("arrow-left-bold");
-    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-    const _component_tool_button = vue.resolveComponent("tool-button");
-    const _component_caret_bottom = vue.resolveComponent("caret-bottom");
-    const _component_el_popover = vue.resolveComponent("el-popover");
-    const _component_arrow_right_bold = vue.resolveComponent("arrow-right-bold");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-      vue.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))
-      }, [
-        vue.createVNode(_component_el_icon, null, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_plus)
-          ]),
-          _: 1
-        })
-      ]),
-      _ctx.canScroll ? (vue.openBlock(), vue.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"))
-      }, [
-        vue.createVNode(_component_el_icon, null, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_arrow_left_bold)
+      return (_ctx, _cache) => {
+        const _component_el_icon = vue.resolveComponent("el-icon");
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-page-bar",
+          ref_key: "pageBar",
+          ref: pageBar
+        }, [
+          vue.createElementVNode("div", {
+            id: "m-editor-page-bar-add-icon",
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: addPage
+          }, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.Plus))
+              ]),
+              _: 1
+            })
           ]),
-          _: 1
-        })
-      ])) : vue.createCommentVNode("", true),
-      _ctx.root ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 1,
-        class: "m-editor-page-bar-items",
-        ref: "itemsContainer",
-        style: vue.normalizeStyle(`width: ${_ctx.itemsContainerWidth}px`)
-      }, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.root.items, (item) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
-            key: item.key,
-            class: vue.normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
-            onClick: ($event) => _ctx.switchPage(item)
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createElementVNode("div", _hoisted_3, [
-              vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                vue.createVNode(_component_el_tooltip, {
-                  effect: "dark",
-                  placement: "top-start",
-                  content: item.name
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["content"])
-              ])
-            ]),
-            vue.createVNode(_component_el_popover, {
-              "popper-class": "page-bar-popover",
-              placement: "top",
-              width: 160,
-              trigger: "hover"
-            }, {
-              reference: vue.withCtx(() => [
-                vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_caret_bottom)
-                  ]),
-                  _: 1
-                })
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.ArrowLeftBold))
               ]),
+              _: 1
+            })
+          ])) : vue.createCommentVNode("", true),
+          vue.unref(root) ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "m-editor-page-bar-items",
+            ref_key: "itemsContainer",
+            ref: itemsContainer,
+            style: vue.normalizeStyle(`width: ${vue.unref(itemsContainerWidth)}px`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4)) : vue.createCommentVNode("", true),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+          }, [
+            vue.createVNode(_component_el_icon, null, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", null, [
-                  vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                    vue.createVNode(_component_tool_button, {
-                      data: {
-                        type: "button",
-                        text: "\u590D\u5236",
-                        icon: _ctx.DocumentCopy,
-                        handler: () => _ctx.copy(item)
-                      }
-                    }, null, 8, ["data"]),
-                    vue.createVNode(_component_tool_button, {
-                      data: {
-                        type: "button",
-                        text: "\u5220\u9664",
-                        icon: _ctx.Delete,
-                        handler: () => _ctx.remove(item)
-                      }
-                    }, null, 8, ["data"])
-                  ])
-                ])
+                vue.createVNode(vue.unref(iconsVue.ArrowRightBold))
               ]),
-              _: 2
-            }, 1024)
-          ], 10, _hoisted_2);
-        }), 128))
-      ], 4)) : vue.createCommentVNode("", true),
-      _ctx.canScroll ? (vue.openBlock(), vue.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"))
-      }, [
-        vue.createVNode(_component_el_icon, null, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_arrow_right_bold)
-          ]),
-          _: 1
-        })
-      ])) : vue.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
+            })
+          ])) : vue.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__ */ vue.defineComponent({
+    __name: "PageBar",
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const root = vue.computed(() => editorService?.get("root"));
+      const page = vue.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 = vue.resolveComponent("el-tooltip");
+        const _component_el_icon = vue.resolveComponent("el-icon");
+        const _component_el_popover = vue.resolveComponent("el-popover");
+        return vue.openBlock(), vue.createBlock(_sfc_main$6, null, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root) && vue.unref(root).items || [], (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["m-editor-page-bar-item", { active: vue.unref(page)?.id === item.id }]),
+                key: item.key,
+                onClick: ($event) => switchPage(item)
+              }, [
+                vue.createElementVNode("div", _hoisted_2, [
+                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+                    vue.createVNode(_component_el_tooltip, {
+                      effect: "dark",
+                      placement: "top-start",
+                      content: item.name
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])
+                  ])
+                ]),
+                vue.createVNode(_component_el_popover, {
+                  "popper-class": "page-bar-popover",
+                  placement: "top",
+                  width: 160,
+                  trigger: "hover"
+                }, {
+                  reference: vue.withCtx(() => [
+                    vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.CaretBottom))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", null, [
+                      vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                        vue.createVNode(_sfc_main$f, {
+                          data: {
+                            type: "button",
+                            text: "\u590D\u5236",
+                            icon: vue.unref(iconsVue.DocumentCopy),
+                            handler: () => copy(item)
+                          }
+                        }, null, 8, ["data"]),
+                        vue.createVNode(_sfc_main$f, {
+                          data: {
+                            type: "button",
+                            text: "\u5220\u9664",
+                            icon: vue.unref(iconsVue.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();
+    }
+  });
+
+  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;
         }
-        if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-          return;
+        if (targetHeight < height) {
+          this.target._top = 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;
-        }
-        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;
@@ -3231,6 +3449,79 @@
       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();
@@ -3291,18 +3582,19 @@
         el,
         style: vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
       vue.createElementVNode("div", {
         ref: "el",
@@ -3312,170 +3604,170 @@
       ], 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 = vue.defineComponent({
-    components: { ContentMenu },
-    setup() {
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    __name: "ViewerMenu",
+    props: {
+      isMultiSelect: { type: Boolean, default: false }
+    },
+    setup(__props, { expose }) {
+      const props = __props;
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const menu = vue.ref();
       const canPaste = vue.ref(false);
       const canCenter = vue.ref(false);
       const node = vue.computed(() => editorService?.get("node"));
+      const nodes = vue.computed(() => editorService?.get("nodes"));
       const parent = vue.computed(() => editorService?.get("parent"));
-      const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
+      const stage = vue.computed(() => editorService?.get("stage"));
       const stageContentMenu = vue.inject("stageContentMenu", []);
-      vue.onMounted(() => {
-        const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
-        canPaste.value = data !== "undefined" && !!data;
-      });
+      const menuData = vue.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: vue.markRaw(iconsVue.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 !utils.isPage(node.value);
+          }
+        },
+        {
+          type: "button",
+          text: "\u4E0A\u79FB\u4E00\u5C42",
+          icon: vue.markRaw(iconsVue.Top),
+          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
+          handler: () => {
+            editorService?.moveLayer(1);
+          }
+        },
+        {
+          type: "button",
+          text: "\u4E0B\u79FB\u4E00\u5C42",
+          icon: vue.markRaw(iconsVue.Bottom),
+          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
+          handler: () => {
+            editorService?.moveLayer(-1);
+          }
+        },
+        {
+          type: "button",
+          text: "\u7F6E\u9876",
+          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.TOP);
+          }
+        },
+        {
+          type: "button",
+          text: "\u7F6E\u5E95",
+          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.BOTTOM);
+          }
+        },
+        {
+          type: "divider",
+          direction: "horizontal",
+          display: () => !utils.isPage(node.value) && !props.isMultiSelect
+        },
+        {
+          type: "button",
+          text: "\u5220\u9664",
+          icon: iconsVue.Delete,
+          display: () => !utils.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
+      ]);
       vue.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) && ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${node.value?.type}`);
+        const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+        const isTypeConform = nodes.value?.every((selectedNode) => ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`));
+        canCenter.value = isLayoutConform && !!isTypeConform;
       }, { immediate: true });
-      return {
-        menu,
-        menuData: vue.reactive([
-          {
-            type: "button",
-            text: "\u6C34\u5E73\u5C45\u4E2D",
-            display: () => canCenter.value,
-            handler: () => {
-              node.value && editorService?.alignCenter(node.value);
-            }
-          },
-          {
-            type: "button",
-            text: "\u590D\u5236",
-            icon: vue.markRaw(icons.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: vue.markRaw(icons.Top),
-            display: () => !isPage.value,
-            handler: () => {
-              editorService?.moveLayer(1);
-            }
-          },
-          {
-            type: "button",
-            text: "\u4E0B\u79FB\u4E00\u5C42",
-            icon: vue.markRaw(icons.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: icons.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 vue.openBlock(), vue.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 = vue.resolveComponent("content-menu");
-    return vue.openBlock(), vue.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 = vue.defineComponent({
-    name: "magic-stage",
-    components: {
-      ViewerMenu,
-      ScrollViewer
-    },
-    setup() {
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    __name: "Stage",
+    setup(__props) {
+      let stage = null;
+      let runtime = null;
       const services = vue.inject("services");
       const stageOptions = vue.inject("stageOptions");
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
       const menu = vue.ref();
+      const isMultiSelect = vue.computed(() => services?.editorService.get("nodes")?.length > 1);
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
       const uiSelectMode = vue.computed(() => services?.uiService.get("uiSelectMode"));
       const root = vue.computed(() => services?.editorService.get("root"));
       const page = vue.computed(() => services?.editorService.get("page"));
       const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
       const node = vue.computed(() => services?.editorService.get("node"));
-      let stage = null;
-      let runtime = null;
       const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
       vue.watchEffect(() => {
         if (stage)
@@ -3484,11 +3776,15 @@
           return;
         if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
           return;
-        stage = new StageCore__default["default"]({
+        stage = new StageCore__default.default({
           render: stageOptions.render,
           runtimeUrl: stageOptions.runtimeUrl,
           zoom: zoom.value,
           autoScrollIntoView: stageOptions.autoScrollIntoView,
+          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") {
@@ -3512,8 +3808,17 @@
         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) => {
-          services?.editorService.update({ id: ev.el.id, style: ev.style });
+          if (ev.parentEl) {
+            for (const data of ev.data) {
+              services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+            }
+            return;
+          }
+          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);
@@ -3566,81 +3871,96 @@
         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();
-          if (e.dataTransfer && page.value && stageContainer.value && stage) {
-            const config = eval(`(${e.dataTransfer.getData("data")})`);
-            const layout = await services?.editorService.getLayout(page.value);
-            const containerRect = stageContainer.value.getBoundingClientRect();
-            const { scrollTop, scrollLeft } = stage.mask;
-            if (layout === Layout.ABSOLUTE) {
-              config.style = {
-                ...config.style || {},
-                position: "absolute",
-                top: e.clientY - containerRect.top + scrollTop,
-                left: e.clientX - containerRect.left + scrollLeft
-              };
+      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 } = StageCore.getOffset(parentEl);
+              left = left - StageCore.calcValueByFontsize(doc, parentLeft);
+              top = top - StageCore.calcValueByFontsize(doc, parentTop);
             }
-            services?.editorService.add(config, page.value);
           }
+          config.style = {
+            ...style,
+            position,
+            top,
+            left
+          };
+          config.inputEvent = e;
+          services?.editorService.add(config, parent);
         }
       };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(ScrollViewer, {
+          class: "m-editor-stage",
+          ref_key: "stageWrap",
+          ref: stageWrap,
+          width: vue.unref(stageRect)?.width,
+          height: vue.unref(stageRect)?.height,
+          zoom: vue.unref(zoom)
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: "m-editor-stage-container",
+              ref_key: "stageContainer",
+              ref: stageContainer,
+              style: vue.normalizeStyle(`transform: scale(${vue.unref(zoom)})`),
+              onContextmenu: contextmenuHandler,
+              onDrop: dropHandler,
+              onDragover: dragoverHandler
+            }, null, 36),
+            (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+              vue.createVNode(_sfc_main$3, {
+                ref_key: "menu",
+                ref: menu,
+                "is-multi-select": vue.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 = vue.resolveComponent("viewer-menu");
-    const _component_scroll_viewer = vue.resolveComponent("scroll-viewer");
-    return vue.openBlock(), vue.createBlock(_component_scroll_viewer, {
-      class: "m-editor-stage",
-      ref: "stageWrap",
-      width: _ctx.stageRect?.width,
-      height: _ctx.stageRect?.height,
-      zoom: _ctx.zoom
-    }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("div", {
-          class: "m-editor-stage-container",
-          ref: "stageContainer",
-          style: vue.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),
-        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-          vue.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 = vue.defineComponent({
     name: "m-editor-workspace",
     components: {
-      PageBar,
-      MagicStage
+      PageBar: _sfc_main$5,
+      MagicStage: _sfc_main$2
     },
     setup() {
       const services = vue.inject("services");
       const workspace = vue.ref();
-      const node = vue.computed(() => services?.editorService.get("node"));
+      const nodes = vue.computed(() => services?.editorService.get("nodes"));
       let keycon;
       const mouseenterHandler = () => {
         workspace.value?.focus();
@@ -3651,31 +3971,31 @@
       vue.onMounted(() => {
         workspace.value?.addEventListener("mouseenter", mouseenterHandler);
         workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
-        keycon = new KeyController__default["default"](workspace.value);
+        keycon = new KeyController__default.default(workspace.value);
         const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
         const ctrl = isMac ? "meta" : "ctrl";
         keycon.keyup("delete", (e) => {
           e.inputEvent.preventDefault();
-          if (!node.value || utils.isPage(node.value))
+          if (!nodes.value || utils.isPage(nodes.value[0]))
             return;
-          services?.editorService.remove(node.value);
+          services?.editorService.remove(nodes.value);
         }).keyup("backspace", (e) => {
           e.inputEvent.preventDefault();
-          if (!node.value || utils.isPage(node.value))
+          if (!nodes.value || utils.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 || utils.isPage(node.value))
+          if (!nodes.value || utils.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();
@@ -3737,6 +4057,7 @@
       };
     }
   });
+
   const _hoisted_1 = {
     class: "m-editor-workspace",
     tabindex: "1",
@@ -3761,14 +4082,14 @@
       })
     ], 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 = vue.reactive({
+      list: []
+    });
     constructor() {
       super([]);
-      this.state = vue.reactive({
-        list: []
-      });
     }
     setList(componentGroupList) {
       this.state.list = componentGroupList;
@@ -3777,7 +4098,7 @@
       return this.state.list;
     }
   }
-  var componentListService = new ComponentList();
+  const componentListService = new ComponentList();
 
   const DEFAULT_LEFT_COLUMN_WIDTH = 310;
   const MIN_LEFT_COLUMN_WIDTH = 45;
@@ -3889,13 +4210,15 @@
       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 = vue.defineComponent({
     name: "m-editor",
@@ -3958,6 +4281,22 @@
         type: Function,
         default: (el) => Boolean(el.id)
       },
+      isContainer: {
+        type: Function,
+        default: (el) => el.classList.contains("magic-ui-container")
+      },
+      containerHighlightClassName: {
+        type: String,
+        default: StageCore.CONTAINER_HIGHLIGHT_CLASS
+      },
+      containerHighlightDuration: {
+        type: Number,
+        default: 800
+      },
+      containerHighlightType: {
+        type: String,
+        default: StageCore.ContainerHighlightType.DEFAULT
+      },
       stageRect: {
         type: [String, Object]
       },
@@ -4013,7 +4352,8 @@
         historyService,
         propsService,
         editorService,
-        uiService
+        uiService,
+        storageService
       };
       vue.provide("services", services);
       vue.provide("layerContentMenu", props.layerContentMenu);
@@ -4024,11 +4364,16 @@
         render: props.render,
         moveableOptions: props.moveableOptions,
         canSelect: props.canSelect,
-        updateDragEl: props.updateDragEl
+        updateDragEl: props.updateDragEl,
+        isContainer: props.isContainer,
+        containerHighlightClassName: props.containerHighlightClassName,
+        containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType
       }));
       return services;
     }
   });
+
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nav_menu = vue.resolveComponent("nav-menu");
     const _component_sidebar = vue.resolveComponent("sidebar");
@@ -4089,18 +4434,18 @@
       _: 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);
@@ -4119,32 +4464,34 @@
   exports.PropsPanel = PropsPanel;
   exports.TMagicCodeEditor = CodeEditor;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = ToolButton;
+  exports.ToolButton = _sfc_main$f;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.change2Fixed = change2Fixed;
   exports.debug = debug;
-  exports["default"] = index;
+  exports.default = index;
   exports.editorService = editorService;
   exports.error = error;
   exports.eventsService = eventsService;
   exports.fillConfig = fillConfig;
+  exports.fixNodeLeft = fixNodeLeft;
+  exports.fixNodePosition = fixNodePosition;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getConfig = getConfig;
-  exports.getDefaultPropsValue = getDefaultPropsValue;
   exports.getGuideLineFromCache = getGuideLineFromCache;
+  exports.getInitPositionStyle = getInitPositionStyle;
   exports.getNodeIndex = getNodeIndex;
   exports.getPageList = getPageList;
   exports.getPageNameList = getPageNameList;
+  exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
-  exports.initPosition = initPosition;
   exports.isFixed = isFixed;
   exports.log = log;
   exports.propsService = propsService;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
-  exports.toRelative = toRelative;
+  exports.storageService = storageService;
   exports.uiService = uiService;
   exports.warn = warn;