@tmagic/editor 1.0.0-rc.1 → 1.0.0-rc.10

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (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('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', '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.elementPlus, global.KeyController, global.StageCore));
-})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,12 +26,16 @@
 
   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);
 
-  if (typeof window.global === "undefined") {
+  if (typeof global === "undefined") {
     window.global = window;
   }
+  if (typeof globalThis === "undefined") {
+    window.globalThis = window;
+  }
 
   var _export_sfc = (sfc, props) => {
     const target = sfc.__vccOpts || sfc;
@@ -135,7 +139,7 @@
   }
   var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
-  var UISelect_vue_vue_type_style_index_0_lang = '';
+  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",
@@ -328,11 +332,7 @@
         const options = {
           value: values.value,
           language: props.language,
-          tabSize: 2,
           theme: "vs-dark",
-          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 14,
-          formatOnPaste: true,
           ...props.options
         };
         if (props.type === "diff") {
@@ -346,6 +346,7 @@
         codeEditor.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
             e.preventDefault();
+            e.stopPropagation();
             emit("save", getEditorValue());
           }
         });
@@ -644,7 +645,7 @@
 
   class Props extends BaseService {
     constructor() {
-      super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+      super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue", "createId", "setNewItemId"]);
       this.state = vue.reactive({
         propsConfigMap: {},
         propsValueMap: {}
@@ -683,12 +684,44 @@
         }
         return value;
       }
-      return lodashEs.cloneDeep({
-        ...getDefaultPropsValue(type),
-        ...lodashEs.mergeWith(this.state.propsValueMap[type] || {}, defaultValue)
-      });
+      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)}`;
+    }
+    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);
+        }
+      }
     }
   }
+  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();
 
   var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
@@ -709,7 +742,6 @@
   })(Keys || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-  const generateId = (type) => `${type}_${lodashEs.random(1e4, false)}`;
   const getPageList = (app) => {
     if (app.items && Array.isArray(app.items)) {
       return app.items.filter((item) => item.type === schema.NodeType.PAGE);
@@ -729,32 +761,6 @@
     return pageName;
   };
   const generatePageNameByApp = (app) => generatePageName(getPageNameList(getPageList(app)));
-  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 setNewItemId = (config, parent) => {
-    const oldId = config.id;
-    config.id = generateId(config.type || "component");
-    config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
-    if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
-      updatePopId(oldId, config.id, parent);
-    }
-    if (config.items && Array.isArray(config.items)) {
-      config.items.forEach((item) => setNewItemId(item, config));
-    }
-  };
   const isFixed = (node) => node.style?.position === "fixed";
   const getNodeIndex = (node, parent) => {
     const items = parent?.items || [];
@@ -771,9 +777,12 @@
   };
   const setTop2Middle = (node, parentNode, stage) => {
     const style = node.style || {};
-    const height = style.height || 0;
-    if (!stage || typeof style.top !== "undefined" || !parentNode.style || !utils.isNumber(height))
+    let height = style.height || 0;
+    if (!stage || typeof style.top !== "undefined" || !parentNode.style)
       return style;
+    if (!utils.isNumber(height)) {
+      height = 0;
+    }
     const { height: parentHeight } = parentNode.style;
     if (utils.isPage(parentNode)) {
       const { scrollTop = 0, wrapperHeight } = stage.mask;
@@ -962,6 +971,13 @@
       } else {
         historyService.empty();
       }
+      if (node?.id) {
+        this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
+          node,
+          page,
+          parent
+        }, utils.getNodePath(node.id, this.get("root").items));
+      }
       this.emit("select", node);
       return node;
     }
@@ -1143,13 +1159,16 @@
         console.error(e);
         return;
       }
-      setNewItemId(config, this.get("root"));
+      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);
     }
     async alignCenter(config2) {
@@ -1159,7 +1178,17 @@
       if (layout === Layout.RELATIVE) {
         return;
       }
-      if (parent.style?.width && node.style?.width) {
+      if (!node.style)
+        return;
+      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}`);
+        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);
@@ -1173,9 +1202,9 @@
       const node = this.get("node");
       const brothers = parent?.items || [];
       const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
-      if (offset === LayerOffset.BOTTOM) {
+      if (offset === LayerOffset.TOP) {
         brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
-      } else if (offset === LayerOffset.TOP) {
+      } else if (offset === LayerOffset.BOTTOM) {
         brothers.splice(0, 0, brothers.splice(index, 1)[0]);
       } else {
         brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
@@ -1460,6 +1489,21 @@
                       text: "\u7C97\u7EC6"
                     }
                   ]
+                },
+                {
+                  type: "fieldset",
+                  legend: "\u53D8\u5F62",
+                  name: "transform",
+                  items: [
+                    {
+                      name: "rotate",
+                      text: "\u65CB\u8F6C\u89D2\u5EA6"
+                    },
+                    {
+                      name: "scale",
+                      text: "\u7F29\u653E"
+                    }
+                  ]
                 }
               ]
             }
@@ -1516,1269 +1560,66 @@
             }
           ]
         }
-      ]
-    }
-  ];
-  const DEFAULT_CONFIG = fillConfig([]);
-  const getDefaultPropsValue = (type) => ({
-    type,
-    id: generateId(type),
-    style: {},
-    name: type
-  });
-
-  const _sfc_main$i = vue.defineComponent({
-    components: { Plus: icons.Plus },
-    setup() {
-      const services = vue.inject("services");
-      return {
-        clickHandler() {
-          const { editorService } = services || {};
-          if (!editorService)
-            return;
-          editorService.add({
-            type: schema.NodeType.PAGE,
-            name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
-          });
-        }
-      };
-    }
-  });
-  const _hoisted_1$a = { 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 _component_plus = vue.resolveComponent("plus");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-      vue.createElementVNode("div", _hoisted_2$4, [
-        vue.createElementVNode("div", {
-          class: "m-editor-empty-button",
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-        }, [
-          vue.createElementVNode("div", null, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_plus)
-              ]),
-              _: 1
-            })
-          ]),
-          _hoisted_3$2
-        ])
-      ])
-    ]);
-  }
-  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
-
-  /*
-  Copyright (c) 2018 Daybrush
-  @name: @daybrush/utils
-  license: MIT
-  author: Daybrush
-  repository: https://github.com/daybrush/utils
-  @version 1.6.0
-  */
-  /**
-  * get string "object"
-  * @memberof Consts
-  * @example
-  import {OBJECT} from "@daybrush/utils";
-
-  console.log(OBJECT); // "object"
-  */
-
-  var OBJECT = "object";
-  /**
-  * Check the type that the value is object.
-  * @memberof Utils
-  * @param {string} value - Value to check the type
-  * @return {} true if the type is correct, false otherwise
-  * @example
-  import {isObject} from "@daybrush/utils";
-
-  console.log(isObject({})); // true
-  console.log(isObject(undefined)); // false
-  console.log(isObject("")); // false
-  console.log(isObject(null)); // false
-  */
-
-  function isObject(value) {
-    return value && typeof value === OBJECT;
-  }
-  /**
-  * Date.now() method
-  * @memberof CrossBrowser
-  * @return {number} milliseconds
-  * @example
-  import {now} from "@daybrush/utils";
-
-  console.log(now()); // 12121324241(milliseconds)
-  */
-
-  function now() {
-    return Date.now ? Date.now() : new Date().getTime();
-  }
-  /**
-  * Returns the index of the first element in the array that satisfies the provided testing function.
-  * @function
-  * @memberof CrossBrowser
-  * @param - The array `findIndex` was called upon.
-  * @param - A function to execute on each value in the array until the function returns true, indicating that the satisfying element was found.
-  * @param - Returns defaultIndex if not found by the function.
-  * @example
-  import { findIndex } from "@daybrush/utils";
-
-  findIndex([{a: 1}, {a: 2}, {a: 3}, {a: 4}], ({ a }) => a === 2); // 1
-  */
-
-  function findIndex(arr, callback, defaultIndex) {
-    if (defaultIndex === void 0) {
-      defaultIndex = -1;
-    }
-
-    var length = arr.length;
-
-    for (var i = 0; i < length; ++i) {
-      if (callback(arr[i], i, arr)) {
-        return i;
-      }
-    }
-
-    return defaultIndex;
-  }
-  /**
-  * Sets up a function that will be called whenever the specified event is delivered to the target
-  * @memberof DOM
-  * @param - event target
-  * @param - A case-sensitive string representing the event type to listen for.
-  * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
-  * @param - An options object that specifies characteristics about the event listener.
-  * @example
-  import {addEvent} from "@daybrush/utils";
-
-  addEvent(el, "click", e => {
-    console.log(e);
-  });
-  */
-
-  function addEvent(el, type, listener, options) {
-    el.addEventListener(type, listener, options);
-  }
-  /**
-  * removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
-  * @memberof DOM
-  * @param - event target
-  * @param - A case-sensitive string representing the event type to listen for.
-  * @param - The EventListener function of the event handler to remove from the event target.
-  * @param - An options object that specifies characteristics about the event listener.
-  * @example
-  import {addEvent, removeEvent} from "@daybrush/utils";
-  const listener = e => {
-    console.log(e);
-  };
-  addEvent(el, "click", listener);
-  removeEvent(el, "click", listener);
-  */
-
-  function removeEvent(el, type, listener, options) {
-    el.removeEventListener(type, listener, options);
-  }
-
-  /*
-  Copyright (c) 2019 Daybrush
-  name: @scena/event-emitter
-  license: MIT
-  author: Daybrush
-  repository: git+https://github.com/daybrush/gesture.git
-  version: 1.0.5
-  */
-
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation.
-
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */
-  var __assign$1 = function () {
-    __assign$1 = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-
-      return t;
-    };
-
-    return __assign$1.apply(this, arguments);
-  };
-  function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-
-    for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
-
-    return r;
-  }
-
-  /**
-   * Implement EventEmitter on object or component.
-   */
-
-  var EventEmitter =
-  /*#__PURE__*/
-  function () {
-    function EventEmitter() {
-      this._events = {};
-    }
-    /**
-     * Add a listener to the registered event.
-     * @param - Name of the event to be added
-     * @param - listener function of the event to be added
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Add listener in "a" event
-     * emitter.on("a", () => {
-     * });
-     * // Add listeners
-     * emitter.on({
-     *  a: () => {},
-     *  b: () => {},
-     * });
-     */
-
-
-    var __proto = EventEmitter.prototype;
-
-    __proto.on = function (eventName, listener) {
-      if (isObject(eventName)) {
-        for (var name in eventName) {
-          this.on(name, eventName[name]);
-        }
-      } else {
-        this._addEvent(eventName, listener, {});
-      }
-
-      return this;
-    };
-    /**
-     * Remove listeners registered in the event target.
-     * @param - Name of the event to be removed
-     * @param - listener function of the event to be removed
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Remove all listeners.
-     * emitter.off();
-     *
-     * // Remove all listeners in "A" event.
-     * emitter.off("a");
-     *
-     *
-     * // Remove "listener" listener in "a" event.
-     * emitter.off("a", listener);
-     */
-
-
-    __proto.off = function (eventName, listener) {
-      if (!eventName) {
-        this._events = {};
-      } else if (isObject(eventName)) {
-        for (var name in eventName) {
-          this.off(name);
-        }
-      } else if (!listener) {
-        this._events[eventName] = [];
-      } else {
-        var events = this._events[eventName];
-
-        if (events) {
-          var index = findIndex(events, function (e) {
-            return e.listener === listener;
-          });
-
-          if (index > -1) {
-            events.splice(index, 1);
-          }
-        }
-      }
-
-      return this;
-    };
-    /**
-     * Add a disposable listener and Use promise to the registered event.
-     * @param - Name of the event to be added
-     * @param - disposable listener function of the event to be added
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Add a disposable listener in "a" event
-     * emitter.once("a", () => {
-     * });
-     *
-     * // Use Promise
-     * emitter.once("a").then(e => {
-     * });
-     */
-
-
-    __proto.once = function (eventName, listener) {
-      var _this = this;
-
-      if (listener) {
-        this._addEvent(eventName, listener, {
-          once: true
-        });
-      }
-
-      return new Promise(function (resolve) {
-        _this._addEvent(eventName, resolve, {
-          once: true
-        });
-      });
-    };
-    /**
-     * Fires an event to call listeners.
-     * @param - Event name
-     * @param - Event parameter
-     * @return If false, stop the event.
-     * @example
-     *
-     * import EventEmitter from "@scena/event-emitter";
-     *
-     *
-     * const emitter = new EventEmitter();
-     *
-     * emitter.on("a", e => {
-     * });
-     *
-     *
-     * emitter.emit("a", {
-     *   a: 1,
-     * });
-     */
-
-
-    __proto.emit = function (eventName, param) {
-      var _this = this;
-
-      if (param === void 0) {
-        param = {};
-      }
-
-      var events = this._events[eventName];
-
-      if (!eventName || !events) {
-        return true;
-      }
-
-      var isStop = false;
-      param.eventType = eventName;
-
-      param.stop = function () {
-        isStop = true;
-      };
-
-      param.currentTarget = this;
-
-      __spreadArrays(events).forEach(function (info) {
-        info.listener(param);
-
-        if (info.once) {
-          _this.off(eventName, info.listener);
-        }
-      });
-
-      return !isStop;
-    };
-    /**
-     * Fires an event to call listeners.
-     * @param - Event name
-     * @param - Event parameter
-     * @return If false, stop the event.
-     * @example
-     *
-     * import EventEmitter from "@scena/event-emitter";
-     *
-     *
-     * const emitter = new EventEmitter();
-     *
-     * emitter.on("a", e => {
-     * });
-     *
-     *
-     * emitter.emit("a", {
-     *   a: 1,
-     * });
-     */
-
-    /**
-    * Fires an event to call listeners.
-    * @param - Event name
-    * @param - Event parameter
-    * @return If false, stop the event.
-    * @example
-    *
-    * import EventEmitter from "@scena/event-emitter";
-    *
-    *
-    * const emitter = new EventEmitter();
-    *
-    * emitter.on("a", e => {
-    * });
-    *
-    * // emit
-    * emitter.trigger("a", {
-    *   a: 1,
-    * });
-    */
-
-
-    __proto.trigger = function (eventName, param) {
-      if (param === void 0) {
-        param = {};
-      }
-
-      return this.emit(eventName, param);
-    };
-
-    __proto._addEvent = function (eventName, listener, options) {
-      var events = this._events;
-      events[eventName] = events[eventName] || [];
-      var listeners = events[eventName];
-      listeners.push(__assign$1({
-        listener: listener
-      }, options));
-    };
-
-    return EventEmitter;
-  }();
-
-  var EventEmitter$1 = EventEmitter;
-
-  /*
-  Copyright (c) 2019 Daybrush
-  name: gesto
-  license: MIT
-  author: Daybrush
-  repository: git+https://github.com/daybrush/gesto.git
-  version: 1.7.0
-  */
-
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation. All rights reserved.
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-  this file except in compliance with the License. You may obtain a copy of the
-  License at http://www.apache.org/licenses/LICENSE-2.0
-
-  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-  MERCHANTABLITY OR NON-INFRINGEMENT.
-
-  See the Apache Version 2.0 License for specific language governing permissions
-  and limitations under the License.
-  ***************************************************************************** */
-
-  /* global Reflect, Promise */
-  var extendStatics = function (d, b) {
-    extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-    };
-
-    return extendStatics(d, b);
-  };
-
-  function __extends(d, b) {
-    extendStatics(d, b);
-
-    function __() {
-      this.constructor = d;
-    }
-
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  }
-  var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-
-      return t;
-    };
-
-    return __assign.apply(this, arguments);
-  };
-
-  function getRad(pos1, pos2) {
-    var distX = pos2[0] - pos1[0];
-    var distY = pos2[1] - pos1[1];
-    var rad = Math.atan2(distY, distX);
-    return rad >= 0 ? rad : rad + Math.PI * 2;
-  }
-  function getRotatiion(touches) {
-    return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180;
-  }
-  function isMultiTouch(e) {
-    return e.touches && e.touches.length >= 2;
-  }
-  function getEventClients(e) {
-    if (e.touches) {
-      return getClients(e.touches);
-    } else {
-      return [getClient(e)];
-    }
-  }
-  function getPosition(clients, prevClients, startClients) {
-    var length = startClients.length;
-
-    var _a = getAverageClient(clients, length),
-        clientX = _a.clientX,
-        clientY = _a.clientY,
-        originalClientX = _a.originalClientX,
-        originalClientY = _a.originalClientY;
-
-    var _b = getAverageClient(prevClients, length),
-        prevX = _b.clientX,
-        prevY = _b.clientY;
-
-    var _c = getAverageClient(startClients, length),
-        startX = _c.clientX,
-        startY = _c.clientY;
-
-    var deltaX = clientX - prevX;
-    var deltaY = clientY - prevY;
-    var distX = clientX - startX;
-    var distY = clientY - startY;
-    return {
-      clientX: originalClientX,
-      clientY: originalClientY,
-      deltaX: deltaX,
-      deltaY: deltaY,
-      distX: distX,
-      distY: distY
-    };
-  }
-  function getDist(clients) {
-    return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2));
-  }
-  function getClients(touches) {
-    var length = Math.min(touches.length, 2);
-    var clients = [];
-
-    for (var i = 0; i < length; ++i) {
-      clients.push(getClient(touches[i]));
-    }
-
-    return clients;
-  }
-  function getClient(e) {
-    return {
-      clientX: e.clientX,
-      clientY: e.clientY
-    };
-  }
-  function getAverageClient(clients, length) {
-    if (length === void 0) {
-      length = clients.length;
-    }
-
-    var sumClient = {
-      clientX: 0,
-      clientY: 0,
-      originalClientX: 0,
-      originalClientY: 0
-    };
-
-    for (var i = 0; i < length; ++i) {
-      var client = clients[i];
-      sumClient.originalClientX += "originalClientX" in client ? client.originalClientX : client.clientX;
-      sumClient.originalClientY += "originalClientY" in client ? client.originalClientY : client.clientY;
-      sumClient.clientX += client.clientX;
-      sumClient.clientY += client.clientY;
-    }
-
-    if (!length) {
-      return sumClient;
-    }
-
-    return {
-      clientX: sumClient.clientX / length,
-      clientY: sumClient.clientY / length,
-      originalClientX: sumClient.originalClientX / length,
-      originalClientY: sumClient.originalClientY / length
-    };
-  }
-
-  var ClientStore =
-  /*#__PURE__*/
-  function () {
-    function ClientStore(clients) {
-      this.prevClients = [];
-      this.startClients = [];
-      this.movement = 0;
-      this.length = 0;
-      this.startClients = clients;
-      this.prevClients = clients;
-      this.length = clients.length;
-    }
-
-    var __proto = ClientStore.prototype;
-
-    __proto.getAngle = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getRotatiion(clients);
-    };
-
-    __proto.getRotation = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getRotatiion(clients) - getRotatiion(this.startClients);
-    };
-
-    __proto.getPosition = function (clients, isAdd) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      var position = getPosition(clients || this.prevClients, this.prevClients, this.startClients);
-      var deltaX = position.deltaX,
-          deltaY = position.deltaY;
-      this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-      this.prevClients = clients;
-      return position;
-    };
-
-    __proto.getPositions = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      var prevClients = this.prevClients;
-      return this.startClients.map(function (startClient, i) {
-        return getPosition([clients[i]], [prevClients[i]], [startClient]);
-      });
-    };
-
-    __proto.getMovement = function (clients) {
-      var movement = this.movement;
-
-      if (!clients) {
-        return movement;
-      }
-
-      var currentClient = getAverageClient(clients, this.length);
-      var prevClient = getAverageClient(this.prevClients, this.length);
-      var deltaX = currentClient.clientX - prevClient.clientX;
-      var deltaY = currentClient.clientY - prevClient.clientY;
-      return Math.sqrt(deltaX * deltaX + deltaY * deltaY) + movement;
-    };
-
-    __proto.getDistance = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getDist(clients);
-    };
-
-    __proto.getScale = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getDist(clients) / getDist(this.startClients);
-    };
-
-    __proto.move = function (deltaX, deltaY) {
-      this.startClients.forEach(function (client) {
-        client.clientX -= deltaX;
-        client.clientY -= deltaY;
-      });
-    };
-
-    return ClientStore;
-  }();
-
-  var INPUT_TAGNAMES = ["textarea", "input"];
-  /**
-   * You can set up drag, pinch events in any browser.
-   */
-
-  var Gesto =
-  /*#__PURE__*/
-  function (_super) {
-    __extends(Gesto, _super);
-    /**
-     *
-     */
-
-
-    function Gesto(targets, options) {
-      if (options === void 0) {
-        options = {};
-      }
-
-      var _this = _super.call(this) || this;
-
-      _this.options = {};
-      _this.flag = false;
-      _this.pinchFlag = false;
-      _this.datas = {};
-      _this.isDrag = false;
-      _this.isPinch = false;
-      _this.isMouse = false;
-      _this.isTouch = false;
-      _this.clientStores = [];
-      _this.targets = [];
-      _this.prevTime = 0;
-      _this.doubleFlag = false;
-      _this._dragFlag = false;
-
-      _this.onDragStart = function (e, isTrusted) {
-        if (isTrusted === void 0) {
-          isTrusted = true;
-        }
-
-        if (!_this.flag && e.cancelable === false) {
-          return;
-        }
-
-        var _a = _this.options,
-            container = _a.container,
-            pinchOutside = _a.pinchOutside,
-            preventRightClick = _a.preventRightClick,
-            preventDefault = _a.preventDefault,
-            checkInput = _a.checkInput;
-        var isTouch = _this.isTouch;
-        var isDragStart = !_this.flag;
-
-        if (isDragStart) {
-          var activeElement = document.activeElement;
-          var target = e.target;
-          var tagName = target.tagName.toLowerCase();
-          var hasInput = INPUT_TAGNAMES.indexOf(tagName) > -1;
-          var hasContentEditable = target.isContentEditable;
-
-          if (hasInput || hasContentEditable) {
-            if (checkInput || activeElement === target) {
-              // force false or already focused.
-              return false;
-            } // no focus
-
-
-            if (activeElement && hasContentEditable && activeElement.isContentEditable && activeElement.contains(target)) {
-              return false;
-            }
-          } else if ((preventDefault || e.type === "touchstart") && activeElement) {
-            var activeTagName = activeElement.tagName;
-
-            if (activeElement.isContentEditable || INPUT_TAGNAMES.indexOf(activeTagName) > -1) {
-              activeElement.blur();
-            }
-          }
-
-          _this.clientStores = [new ClientStore(getEventClients(e))];
-          _this.flag = true;
-          _this.isDrag = false;
-          _this._dragFlag = true;
-          _this.datas = {};
-
-          if (preventRightClick && (e.which === 3 || e.button === 2)) {
-            _this.initDrag();
-
-            return false;
-          }
-
-          _this.doubleFlag = now() - _this.prevTime < 200;
-
-          var result = _this.emit("dragStart", __assign({
-            datas: _this.datas,
-            inputEvent: e,
-            isTrusted: isTrusted,
-            isDouble: _this.doubleFlag
-          }, _this.getCurrentStore().getPosition(), {
-            preventDefault: function () {
-              e.preventDefault();
-            },
-            preventDrag: function () {
-              _this._dragFlag = false;
-            }
-          }));
-
-          if (result === false) {
-            _this.initDrag();
-          }
-
-          _this.flag && preventDefault && e.preventDefault();
-        }
-
-        if (!_this.flag) {
-          return false;
-        }
-
-        var timer = 0;
-
-        if (isDragStart && isTouch && pinchOutside) {
-          timer = setTimeout(function () {
-            addEvent(container, "touchstart", _this.onDragStart, {
-              passive: false
-            });
-          });
-        }
-
-        if (!isDragStart && isTouch && pinchOutside) {
-          removeEvent(container, "touchstart", _this.onDragStart);
-        }
-
-        if (_this.flag && isMultiTouch(e)) {
-          clearTimeout(timer);
-
-          if (isDragStart && e.touches.length !== e.changedTouches.length) {
-            return;
-          }
-
-          if (!_this.pinchFlag) {
-            _this.onPinchStart(e);
-          }
-        }
-      };
-
-      _this.onDrag = function (e, isScroll) {
-        if (!_this.flag) {
-          return;
-        }
-
-        var clients = getEventClients(e);
-
-        var result = _this.moveClients(clients, e, false);
-
-        if (_this._dragFlag) {
-          if (_this.pinchFlag || result.deltaX || result.deltaY) {
-            var dragResult = _this.emit("drag", __assign({}, result, {
-              isScroll: !!isScroll,
-              inputEvent: e
-            }));
-
-            if (dragResult === false) {
-              _this.stop();
-
-              return;
-            }
-          }
-
-          if (_this.pinchFlag) {
-            _this.onPinch(e, clients);
-          }
-        }
-
-        _this.getCurrentStore().getPosition(clients, true);
-      };
-
-      _this.onDragEnd = function (e) {
-        if (!_this.flag) {
-          return;
-        }
-
-        var _a = _this.options,
-            pinchOutside = _a.pinchOutside,
-            container = _a.container;
-
-        if (_this.isTouch && pinchOutside) {
-          removeEvent(container, "touchstart", _this.onDragStart);
-        }
-
-        _this.flag = false;
-
-        var position = _this._getPosition();
-
-        var currentTime = now();
-        var isDouble = !_this.isDrag && _this.doubleFlag;
-        _this.prevTime = _this.isDrag || isDouble ? 0 : currentTime;
-
-        _this.emit("dragEnd", __assign({
-          datas: _this.datas,
-          isDouble: isDouble,
-          isDrag: _this.isDrag,
-          isClick: !_this.isDrag,
-          inputEvent: e
-        }, position));
-
-        if (_this.pinchFlag) {
-          _this.onPinchEnd(e);
-        }
-
-        _this.clientStores = [];
-      };
+      ]
+    }
+  ];
+  const DEFAULT_CONFIG = fillConfig([]);
+  const getDefaultPropsValue = (type, id) => ["page", "container"].includes(type) ? {
+    type,
+    id,
+    style: {},
+    name: type,
+    items: []
+  } : {
+    type,
+    id,
+    style: {},
+    name: type
+  };
 
-      _this.onBlur = function () {
-        _this.onDragEnd();
+  const _sfc_main$i = vue.defineComponent({
+    components: { Plus: icons.Plus },
+    setup() {
+      const services = vue.inject("services");
+      return {
+        clickHandler() {
+          const { editorService } = services || {};
+          if (!editorService)
+            return;
+          editorService.add({
+            type: schema.NodeType.PAGE,
+            name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+          });
+        }
       };
-
-      var elements = [].concat(targets);
-      _this.options = __assign({
-        checkInput: false,
-        container: elements.length > 1 ? window : elements[0],
-        preventRightClick: true,
-        preventDefault: true,
-        checkWindowBlur: false,
-        pinchThreshold: 0,
-        events: ["touch", "mouse"]
-      }, options);
-      var _a = _this.options,
-          container = _a.container,
-          events = _a.events,
-          checkWindowBlur = _a.checkWindowBlur;
-      _this.isTouch = events.indexOf("touch") > -1;
-      _this.isMouse = events.indexOf("mouse") > -1;
-      _this.targets = elements;
-
-      if (_this.isMouse) {
-        elements.forEach(function (el) {
-          addEvent(el, "mousedown", _this.onDragStart);
-        });
-        addEvent(container, "mousemove", _this.onDrag);
-        addEvent(container, "mouseup", _this.onDragEnd);
-        addEvent(container, "contextmenu", _this.onDragEnd);
-      }
-
-      if (checkWindowBlur) {
-        addEvent(window, "blur", _this.onBlur);
-      }
-
-      if (_this.isTouch) {
-        var passive_1 = {
-          passive: false
-        };
-        elements.forEach(function (el) {
-          addEvent(el, "touchstart", _this.onDragStart, passive_1);
-        });
-        addEvent(container, "touchmove", _this.onDrag, passive_1);
-        addEvent(container, "touchend", _this.onDragEnd, passive_1);
-        addEvent(container, "touchcancel", _this.onDragEnd, passive_1);
-      }
-
-      return _this;
     }
-    /**
-     * Stop Gesto's drag events.
-     */
-
-
-    var __proto = Gesto.prototype;
-
-    __proto.stop = function () {
-      this.isDrag = false;
-      this.flag = false;
-      this.clientStores = [];
-      this.datas = {};
-    };
-    /**
-     * The total moved distance
-     */
-
-
-    __proto.getMovement = function (clients) {
-      return this.getCurrentStore().getMovement(clients) + this.clientStores.slice(1).reduce(function (prev, cur) {
-        return prev + cur.movement;
-      }, 0);
-    };
-    /**
-     * Whether to drag
-     */
-
-
-    __proto.isDragging = function () {
-      return this.isDrag;
-    };
-    /**
-     * Whether to start drag
-     */
-
-
-    __proto.isFlag = function () {
-      return this.flag;
-    };
-    /**
-     * Whether to start pinch
-     */
-
-
-    __proto.isPinchFlag = function () {
-      return this.pinchFlag;
-    };
-    /**
-    * Whether to start double click
-    */
-
-
-    __proto.isDoubleFlag = function () {
-      return this.doubleFlag;
-    };
-    /**
-     * Whether to pinch
-     */
-
-
-    __proto.isPinching = function () {
-      return this.isPinch;
-    };
-    /**
-     * If a scroll event occurs, it is corrected by the scroll distance.
-     */
-
-
-    __proto.scrollBy = function (deltaX, deltaY, e, isCallDrag) {
-      if (isCallDrag === void 0) {
-        isCallDrag = true;
-      }
-
-      if (!this.flag) {
-        return;
-      }
-
-      this.clientStores[0].move(deltaX, deltaY);
-      isCallDrag && this.onDrag(e, true);
-    };
-    /**
-     * Create a virtual drag event.
-     */
-
-
-    __proto.move = function (_a, inputEvent) {
-      var deltaX = _a[0],
-          deltaY = _a[1];
-      var store = this.getCurrentStore();
-      var nextClients = store.prevClients;
-      return this.moveClients(nextClients.map(function (_a) {
-        var clientX = _a.clientX,
-            clientY = _a.clientY;
-        return {
-          clientX: clientX + deltaX,
-          clientY: clientY + deltaY,
-          originalClientX: clientX,
-          originalClientY: clientY
-        };
-      }), inputEvent, true);
-    };
-    /**
-     * The dragStart event is triggered by an external event.
-     */
-
-
-    __proto.triggerDragStart = function (e) {
-      this.onDragStart(e, false);
-    };
-    /**
-     * Set the event data while dragging.
-     */
-
-
-    __proto.setEventDatas = function (datas) {
-      var currentDatas = this.datas;
-
-      for (var name in datas) {
-        currentDatas[name] = datas[name];
-      }
-
-      return this;
-    };
-    /**
-     * Get the current event state while dragging.
-     */
-
-
-    __proto.getCurrentEvent = function (inputEvent) {
-      return __assign({
-        datas: this.datas
-      }, this._getPosition(), {
-        movement: this.getMovement(),
-        isDrag: this.isDrag,
-        isPinch: this.isPinch,
-        isScroll: false,
-        inputEvent: inputEvent
-      });
-    };
-    /**
-     * Get & Set the event data while dragging.
-     */
-
-
-    __proto.getEventDatas = function () {
-      return this.datas;
-    };
-    /**
-     * Unset Gesto
-     */
-
-
-    __proto.unset = function () {
-      var _this = this;
-
-      var targets = this.targets;
-      var container = this.options.container;
-      this.off();
-      removeEvent(window, "blur", this.onBlur);
-
-      if (this.isMouse) {
-        targets.forEach(function (target) {
-          removeEvent(target, "mousedown", _this.onDragStart);
-        });
-        removeEvent(container, "mousemove", this.onDrag);
-        removeEvent(container, "mouseup", this.onDragEnd);
-        removeEvent(container, "contextmenu", this.onDragEnd);
-      }
-
-      if (this.isTouch) {
-        targets.forEach(function (target) {
-          removeEvent(target, "touchstart", _this.onDragStart);
-        });
-        removeEvent(container, "touchstart", this.onDragStart);
-        removeEvent(container, "touchmove", this.onDrag);
-        removeEvent(container, "touchend", this.onDragEnd);
-        removeEvent(container, "touchcancel", this.onDragEnd);
-      }
-    };
-
-    __proto.onPinchStart = function (e) {
-      var pinchThreshold = this.options.pinchThreshold;
-
-      if (this.isDrag && this.getMovement() > pinchThreshold) {
-        return;
-      }
-
-      var store = new ClientStore(getEventClients(e));
-      this.pinchFlag = true;
-      this.clientStores.splice(0, 0, store);
-      var result = this.emit("pinchStart", __assign({
-        datas: this.datas,
-        angle: store.getAngle(),
-        touches: this.getCurrentStore().getPositions()
-      }, store.getPosition(), {
-        inputEvent: e
-      }));
-
-      if (result === false) {
-        this.pinchFlag = false;
-      }
-    };
-
-    __proto.onPinch = function (e, clients) {
-      if (!this.flag || !this.pinchFlag || clients.length < 2) {
-        return;
-      }
-
-      var store = this.getCurrentStore();
-      this.isPinch = true;
-      this.emit("pinch", __assign({
-        datas: this.datas,
-        movement: this.getMovement(clients),
-        angle: store.getAngle(clients),
-        rotation: store.getRotation(clients),
-        touches: store.getPositions(clients),
-        scale: store.getScale(clients),
-        distance: store.getDistance(clients)
-      }, store.getPosition(clients), {
-        inputEvent: e
-      }));
-    };
-
-    __proto.onPinchEnd = function (e) {
-      if (!this.pinchFlag) {
-        return;
-      }
-
-      var isPinch = this.isPinch;
-      this.isPinch = false;
-      this.pinchFlag = false;
-      var store = this.getCurrentStore();
-      this.emit("pinchEnd", __assign({
-        datas: this.datas,
-        isPinch: isPinch,
-        touches: store.getPositions()
-      }, store.getPosition(), {
-        inputEvent: e
-      }));
-      this.isPinch = false;
-      this.pinchFlag = false;
-    };
-
-    __proto.initDrag = function () {
-      this.clientStores = [];
-      this.pinchFlag = false;
-      this.doubleFlag = false;
-      this.prevTime = 0;
-      this.flag = false;
-    };
-
-    __proto.getCurrentStore = function () {
-      return this.clientStores[0];
-    };
-
-    __proto.moveClients = function (clients, inputEvent, isAdd) {
-      var position = this._getPosition(clients, isAdd);
-
-      if (position.deltaX || position.deltaY) {
-        this.isDrag = true;
-      }
-
-      return __assign({
-        datas: this.datas
-      }, position, {
-        movement: this.getMovement(clients),
-        isDrag: this.isDrag,
-        isPinch: this.isPinch,
-        isScroll: false,
-        inputEvent: inputEvent
-      });
-    };
-
-    __proto._getPosition = function (clients, isAdd) {
-      var store = this.getCurrentStore();
-      var position = store.getPosition(clients, isAdd);
-
-      var _a = this.clientStores.slice(1).reduce(function (prev, cur) {
-        var storePosition = cur.getPosition();
-        prev.distX += storePosition.distX;
-        prev.distY += storePosition.distY;
-        return prev;
-      }, position),
-          distX = _a.distX,
-          distY = _a.distY;
-
-      return __assign({}, position, {
-        distX: distX,
-        distY: distY
-      });
-    };
-
-    return Gesto;
-  }(EventEmitter$1);
-
-  var Gesto$1 = Gesto;
+  });
+  const _hoisted_1$a = { 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 _component_plus = vue.resolveComponent("plus");
+    const _component_el_icon = vue.resolveComponent("el-icon");
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+      vue.createElementVNode("div", _hoisted_2$4, [
+        vue.createElementVNode("div", {
+          class: "m-editor-empty-button",
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
+        }, [
+          vue.createElementVNode("div", null, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_plus)
+              ]),
+              _: 1
+            })
+          ]),
+          _hoisted_3$2
+        ])
+      ])
+    ]);
+  }
+  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
   const _sfc_main$h = vue.defineComponent({
     name: "m-editor-resize",
@@ -2794,7 +1635,7 @@
       vue.onMounted(() => {
         if (!target.value)
           return;
-        getso = new Gesto$1(target.value, {
+        getso = new Gesto__default["default"](target.value, {
           container: window,
           pinchOutside: true
         }).on("drag", (e) => {
@@ -2838,6 +1679,12 @@
       AddPageBox,
       Resizer
     },
+    props: {
+      codeOptions: {
+        type: Object,
+        default: () => ({})
+      }
+    },
     setup() {
       const { editorService, uiService } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
@@ -2872,8 +1719,9 @@
         key: 0,
         class: "m-editor-content",
         "init-values": _ctx.root,
+        options: _ctx.codeOptions,
         onSave: _ctx.saveCode
-      }, null, 8, ["init-values", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
+      }, null, 8, ["init-values", "options", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
         vue.createElementVNode("div", {
           class: "m-editor-framework-left",
           style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
@@ -3321,13 +2169,13 @@
     const _component_m_form = vue.resolveComponent("m-form");
     return vue.openBlock(), vue.createBlock(_component_m_form, {
       class: vue.normalizeClass(`m-editor-props-panel ${_ctx.propsPanelSize}`),
-      "popper-class": "m-editor-props-panel-popper",
+      "popper-class": `m-editor-props-panel-popper ${_ctx.propsPanelSize}`,
       ref: "configForm",
       size: _ctx.propsPanelSize,
       "init-values": _ctx.values,
       config: _ctx.curFormConfig,
       onChange: _ctx.submit
-    }, null, 8, ["class", "size", "init-values", "config", "onChange"]);
+    }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"]);
   }
   var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
@@ -3445,9 +2293,14 @@
       menuData: {
         type: Array,
         default: () => []
+      },
+      isSubMenu: {
+        type: Boolean,
+        default: false
       }
     },
-    setup() {
+    emits: ["hide", "show"],
+    setup(props, { emit }) {
       const menu = vue.ref();
       const subMenu = vue.ref();
       const visible = vue.ref(false);
@@ -3457,15 +2310,31 @@
         top: "0"
       });
       const hide = () => {
+        if (!visible.value)
+          return;
         visible.value = false;
+        subMenu.value?.hide();
+        emit("hide");
+      };
+      const hideHandler = (e) => {
+        const target = e.target;
+        if (!visible.value || !target) {
+          return;
+        }
+        if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+          return;
+        }
+        hide();
       };
       vue.onMounted(() => {
-        globalThis.addEventListener("mousedown", (e) => {
-          if (!visible.value || e.target && menu.value?.contains(e.target)) {
-            return;
-          }
-          hide();
-        }, true);
+        if (props.isSubMenu)
+          return;
+        globalThis.addEventListener("mousedown", hideHandler, true);
+      });
+      vue.onUnmounted(() => {
+        if (props.isSubMenu)
+          return;
+        globalThis.removeEventListener("mousedown", hideHandler, true);
       });
       return {
         menu,
@@ -3475,18 +2344,21 @@
         subMenuData,
         hide,
         show(e) {
-          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`
-            };
-          });
+          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;
@@ -3507,7 +2379,7 @@
   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 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    return _ctx.menuData.length && _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "magic-editor-content-menu",
       ref: "menu",
@@ -3528,12 +2400,12 @@
         vue.createVNode(_component_content_menu, {
           class: "sub-menu",
           ref: "subMenu",
-          "menu-data": _ctx.subMenuData
-        }, null, 8, ["menu-data"])
+          "menu-data": _ctx.subMenuData,
+          "is-sub-menu": true,
+          onHide: _ctx.hide
+        }, null, 8, ["menu-data", "onHide"])
       ]))
-    ], 4)), [
-      [vue.vShow, _ctx.visible]
-    ]) : vue.createCommentVNode("", true);
+    ], 4)) : vue.createCommentVNode("", true);
   }
   var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
@@ -3546,6 +2418,7 @@
       const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
+      const layerContentMenu = vue.inject("layerContentMenu", []);
       const createMenuItems = (group) => group.items.map((component) => ({
         text: component.text,
         type: "button",
@@ -3610,7 +2483,8 @@
             handler: () => {
               node.value && services?.editorService.remove(node.value);
             }
-          }
+          },
+          ...layerContentMenu
         ]),
         show(e) {
           menu.value?.show(e);
@@ -3833,7 +2707,7 @@
     components: { MIcon },
     props: {
       data: {
-        type: Object
+        type: [Object, String]
       }
     },
     setup(props) {
@@ -4401,6 +3275,7 @@
       const node = vue.computed(() => editorService?.get("node"));
       const parent = vue.computed(() => editorService?.get("parent"));
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
+      const stageContentMenu = vue.inject("stageContentMenu", []);
       vue.onMounted(() => {
         const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
         canPaste.value = data !== "undefined" && !!data;
@@ -4436,8 +3311,17 @@
             text: "\u7C98\u8D34",
             display: () => canPaste.value,
             handler: () => {
-              const top = menu.value?.$el.offsetTop || 0;
-              const left = menu.value?.$el.offsetLeft || 0;
+              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 });
             }
           },
@@ -4504,7 +3388,8 @@
             handler: () => {
               editorService?.get("stage").clearGuides();
             }
-          }
+          },
+          ...stageContentMenu
         ]),
         show(e) {
           menu.value?.show(e);
@@ -4527,24 +3412,9 @@
       ViewerMenu,
       ScrollViewer
     },
-    props: {
-      render: {
-        type: Function
-      },
-      runtimeUrl: String,
-      canSelect: {
-        type: Function,
-        default: (el) => Boolean(el.id)
-      },
-      moveableOptions: {
-        type: [Object, Function],
-        default: () => (core) => ({
-          container: core?.renderer?.contentWindow?.document.getElementById("app")
-        })
-      }
-    },
-    setup(props) {
+    setup() {
       const services = vue.inject("services");
+      const stageOptions = vue.inject("stageOptions");
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
       const menu = vue.ref();
@@ -4561,21 +3431,23 @@
           return;
         if (!stageContainer.value)
           return;
-        if (!(props.runtimeUrl || props.render) || !root.value)
+        if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
           return;
         stage = new StageCore__default["default"]({
-          render: props.render,
-          runtimeUrl: props.runtimeUrl,
+          render: stageOptions.render,
+          runtimeUrl: stageOptions.runtimeUrl,
           zoom: zoom.value,
+          autoScrollIntoView: stageOptions.autoScrollIntoView,
           canSelect: (el, event, stop) => {
-            const elCanSelect = props.canSelect(el);
+            const elCanSelect = stageOptions.canSelect(el);
             if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
               document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
               return stop();
             }
             return elCanSelect;
           },
-          moveableOptions: props.moveableOptions
+          moveableOptions: stageOptions.moveableOptions,
+          updateDragEl: stageOptions.updateDragEl
         });
         services?.editorService.set("stage", vue.markRaw(stage));
         stage?.mount(stageContainer.value);
@@ -4656,6 +3528,7 @@
             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
@@ -4701,18 +3574,6 @@
       PageBar,
       MagicStage
     },
-    props: {
-      runtimeUrl: String,
-      render: {
-        type: Function
-      },
-      moveableOptions: {
-        type: [Object, Function]
-      },
-      canSelect: {
-        type: Function
-      }
-    },
     setup() {
       const services = vue.inject("services");
       const workspace = vue.ref();
@@ -4721,8 +3582,12 @@
       const mouseenterHandler = () => {
         workspace.value?.focus();
       };
+      const mouseleaveHandler = () => {
+        workspace.value?.blur();
+      };
       vue.onMounted(() => {
         workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
         keycon = new KeyController__default["default"](workspace.value);
         const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
         const ctrl = isMac ? "meta" : "ctrl";
@@ -4731,6 +3596,11 @@
           if (!node.value || utils.isPage(node.value))
             return;
           services?.editorService.remove(node.value);
+        }).keyup("backspace", (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || utils.isPage(node.value))
+            return;
+          services?.editorService.remove(node.value);
         }).keydown([ctrl, "c"], (e) => {
           e.inputEvent.preventDefault();
           node.value && services?.editorService.copy(node.value);
@@ -4782,13 +3652,20 @@
         }).keydown([ctrl, "="], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.zoom(0.1);
+        }).keydown([ctrl, "numpadplus"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
         }).keydown([ctrl, "-"], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.zoom(-0.1);
+        }).keydown([ctrl, "numpad-"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
         });
       });
       vue.onUnmounted(() => {
         workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
         keycon.destroy();
       });
       return {
@@ -4807,12 +3684,8 @@
     const _component_page_bar = vue.resolveComponent("page-bar");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
       (vue.openBlock(), vue.createBlock(_component_magic_stage, {
-        key: _ctx.page?.id,
-        "runtime-url": _ctx.runtimeUrl,
-        render: _ctx.render,
-        "moveable-options": _ctx.moveableOptions,
-        "can-select": _ctx.canSelect
-      }, null, 8, ["runtime-url", "render", "moveable-options", "can-select"])),
+        key: _ctx.page?.id
+      })),
       vue.renderSlot(_ctx.$slots, "workspace-content"),
       vue.createVNode(_component_page_bar, null, {
         "page-bar-title": vue.withCtx(({ page }) => [
@@ -4981,6 +3854,14 @@
       sidebar: {
         type: Object
       },
+      layerContentMenu: {
+        type: Array,
+        default: () => []
+      },
+      stageContentMenu: {
+        type: Array,
+        default: () => []
+      },
       menu: {
         type: Object,
         default: () => ({ left: [], right: [] })
@@ -4989,6 +3870,7 @@
         type: Function
       },
       runtimeUrl: String,
+      autoScrollIntoView: Boolean,
       propsConfigs: {
         type: Object,
         default: () => ({})
@@ -5002,16 +3884,27 @@
         default: () => ({})
       },
       moveableOptions: {
-        type: [Object, Function]
+        type: [Object, Function],
+        default: () => (core) => ({
+          container: core?.renderer?.contentWindow?.document.getElementById("app")
+        })
       },
       defaultSelected: {
         type: [Number, String]
       },
       canSelect: {
-        type: Function
+        type: Function,
+        default: (el) => Boolean(el.id)
       },
       stageRect: {
         type: [String, Object]
+      },
+      codeOptions: {
+        type: Object,
+        default: () => ({})
+      },
+      updateDragEl: {
+        type: Function
       }
     },
     emits: ["props-panel-mounted", "update:modelValue"],
@@ -5061,6 +3954,16 @@
         uiService
       };
       vue.provide("services", services);
+      vue.provide("layerContentMenu", props.layerContentMenu);
+      vue.provide("stageContentMenu", props.stageContentMenu);
+      vue.provide("stageOptions", vue.reactive({
+        runtimeUrl: props.runtimeUrl,
+        autoScrollIntoView: props.autoScrollIntoView,
+        render: props.render,
+        moveableOptions: props.moveableOptions,
+        canSelect: props.canSelect,
+        updateDragEl: props.updateDragEl
+      }));
       return services;
     }
   });
@@ -5070,7 +3973,7 @@
     const _component_workspace = vue.resolveComponent("workspace");
     const _component_props_panel = vue.resolveComponent("props-panel");
     const _component_framework = vue.resolveComponent("framework");
-    return vue.openBlock(), vue.createBlock(_component_framework, null, {
+    return vue.openBlock(), vue.createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
       nav: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
           vue.createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
@@ -5083,12 +3986,7 @@
       ]),
       workspace: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "workspace", {}, () => [
-          vue.createVNode(_component_workspace, {
-            "runtime-url": _ctx.runtimeUrl,
-            render: _ctx.render,
-            "moveable-options": _ctx.moveableOptions,
-            "can-select": _ctx.canSelect
-          }, {
+          vue.createVNode(_component_workspace, null, {
             "workspace-content": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
             ]),
@@ -5099,7 +3997,7 @@
               vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
             ]),
             _: 3
-          }, 8, ["runtime-url", "render", "moveable-options", "can-select"])
+          })
         ])
       ]),
       propsPanel: vue.withCtx(() => [
@@ -5114,11 +4012,11 @@
         vue.renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
       ]),
       _: 3
-    });
+    }, 8, ["code-options"]);
   }
   var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-  var index$1 = '';
+  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}\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 defaultInstallOpt = {};
   var index = {
@@ -5153,7 +4051,6 @@
   exports.error = error;
   exports.eventsService = eventsService;
   exports.fillConfig = fillConfig;
-  exports.generateId = generateId;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getConfig = getConfig;
@@ -5169,7 +4066,6 @@
   exports.propsService = propsService;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
-  exports.setNewItemId = setNewItemId;
   exports.toRelative = toRelative;
   exports.uiService = uiService;
   exports.warn = warn;