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

package/dist/tmagic-editor.es.js

@@ -1,19 +1,23 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, withDirectives, Teleport, vShow, toHandlers, createSlots, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, Teleport, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
 import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
 import { throttle, cloneDeep, mergeWith, random } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import { NodeType } from '@tmagic/schema';
 import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
-import { EventEmitter as EventEmitter$2 } from 'events';
+import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
 import StageCore from '@tmagic/stage';
 
-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;
@@ -117,7 +121,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
 }
 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 = defineComponent({
   name: "m-fields-ui-select",
@@ -310,11 +314,7 @@ const _sfc_main$j = defineComponent({
       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") {
@@ -328,6 +328,7 @@ const _sfc_main$j = defineComponent({
       codeEditor.value.addEventListener("keydown", (e) => {
         if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
           e.preventDefault();
+          e.stopPropagation();
           emit("save", getEditorValue());
         }
       });
@@ -483,7 +484,7 @@ const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethod
     throw error;
   }
 };
-class BaseService extends EventEmitter$2 {
+class BaseService extends EventEmitter {
   constructor(methods = [], serialMethods = []) {
     super();
     this.pluginOptionsList = {};
@@ -626,7 +627,7 @@ var historyService = new History();
 
 class Props extends BaseService {
   constructor() {
-    super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+    super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue", "createId", "setNewItemId"]);
     this.state = reactive({
       propsConfigMap: {},
       propsValueMap: {}
@@ -665,12 +666,44 @@ class Props extends BaseService {
       }
       return value;
     }
-    return cloneDeep({
-      ...getDefaultPropsValue(type),
-      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue)
-    });
+    const data = cloneDeep(defaultValue);
+    await this.setNewItemId(data);
+    return {
+      ...getDefaultPropsValue(type, await this.createId(type)),
+      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data)
+    };
+  }
+  async createId(type) {
+    return `${type}_${random(1e4, false)}`;
+  }
+  async setNewItemId(config, parent) {
+    const oldId = config.id;
+    config.id = await this.createId(config.type || "component");
+    if (isPop(config) && parent?.type === NodeType.PAGE) {
+      updatePopId(oldId, config.id, parent);
+    }
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        await this.setNewItemId(item, config);
+      }
+    }
   }
 }
+const updatePopId = (oldId, popId, pageConfig) => {
+  pageConfig.items?.forEach((config) => {
+    if (config.pop === oldId) {
+      config.pop = popId;
+      return;
+    }
+    if (config.popId === oldId) {
+      config.popId = popId;
+      return;
+    }
+    if (Array.isArray(config.items)) {
+      updatePopId(oldId, popId, config);
+    }
+  });
+};
 var propsService = new Props();
 
 var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
@@ -691,7 +724,6 @@ var Keys = /* @__PURE__ */ ((Keys2) => {
 })(Keys || {});
 
 const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-const generateId = (type) => `${type}_${random(1e4, false)}`;
 const getPageList = (app) => {
   if (app.items && Array.isArray(app.items)) {
     return app.items.filter((item) => item.type === NodeType.PAGE);
@@ -711,32 +743,6 @@ const generatePageName = (pageNameList) => {
   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 (isPop(config) && parent?.type === 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 || [];
@@ -753,9 +759,12 @@ const toRelative = (node) => {
 };
 const setTop2Middle = (node, parentNode, stage) => {
   const style = node.style || {};
-  const height = style.height || 0;
-  if (!stage || typeof style.top !== "undefined" || !parentNode.style || !isNumber(height))
+  let height = style.height || 0;
+  if (!stage || typeof style.top !== "undefined" || !parentNode.style)
     return style;
+  if (!isNumber(height)) {
+    height = 0;
+  }
   const { height: parentHeight } = parentNode.style;
   if (isPage(parentNode)) {
     const { scrollTop = 0, wrapperHeight } = stage.mask;
@@ -944,6 +953,13 @@ class Editor$1 extends BaseService {
     } else {
       historyService.empty();
     }
+    if (node?.id) {
+      this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
+        node,
+        page,
+        parent
+      }, getNodePath(node.id, this.get("root").items));
+    }
     this.emit("select", node);
     return node;
   }
@@ -1125,13 +1141,16 @@ class Editor$1 extends BaseService {
       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 (isPage(config)) {
+      config.name = generatePageNameByApp(this.get("root"));
+    }
     return await this.add(config);
   }
   async alignCenter(config2) {
@@ -1141,7 +1160,17 @@ class Editor$1 extends BaseService {
     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 && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
     await this.update(node);
@@ -1155,9 +1184,9 @@ class Editor$1 extends BaseService {
     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]);
@@ -1442,6 +1471,21 @@ const fillConfig = (config = []) => [
                     text: "\u7C97\u7EC6"
                   }
                 ]
+              },
+              {
+                type: "fieldset",
+                legend: "\u53D8\u5F62",
+                name: "transform",
+                items: [
+                  {
+                    name: "rotate",
+                    text: "\u65CB\u8F6C\u89D2\u5EA6"
+                  },
+                  {
+                    name: "scale",
+                    text: "\u7F29\u653E"
+                  }
+                ]
               }
             ]
           }
@@ -1498,1269 +1542,66 @@ const fillConfig = (config = []) => [
           }
         ]
       }
-    ]
-  }
-];
-const DEFAULT_CONFIG = fillConfig([]);
-const getDefaultPropsValue = (type) => ({
-  type,
-  id: generateId(type),
-  style: {},
-  name: type
-});
-
-const _sfc_main$i = defineComponent({
-  components: { Plus },
-  setup() {
-    const services = inject("services");
-    return {
-      clickHandler() {
-        const { editorService } = services || {};
-        if (!editorService)
-          return;
-        editorService.add({
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_plus = resolveComponent("plus");
-  const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
-    createElementVNode("div", _hoisted_2$4, [
-      createElementVNode("div", {
-        class: "m-editor-empty-button",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-      }, [
-        createElementVNode("div", null, [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              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 = defineComponent({
+  components: { Plus },
+  setup() {
+    const services = inject("services");
+    return {
+      clickHandler() {
+        const { editorService } = services || {};
+        if (!editorService)
+          return;
+        editorService.add({
+          type: NodeType.PAGE,
+          name: generatePageNameByApp(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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_plus = resolveComponent("plus");
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+    createElementVNode("div", _hoisted_2$4, [
+      createElementVNode("div", {
+        class: "m-editor-empty-button",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
+      }, [
+        createElementVNode("div", null, [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(_component_plus)
+            ]),
+            _: 1
+          })
+        ]),
+        _hoisted_3$2
+      ])
+    ])
+  ]);
+}
+var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
 const _sfc_main$h = defineComponent({
   name: "m-editor-resize",
@@ -2776,7 +1617,7 @@ const _sfc_main$h = defineComponent({
     onMounted(() => {
       if (!target.value)
         return;
-      getso = new Gesto$1(target.value, {
+      getso = new Gesto(target.value, {
         container: window,
         pinchOutside: true
       }).on("drag", (e) => {
@@ -2820,6 +1661,12 @@ const _sfc_main$g = defineComponent({
     AddPageBox,
     Resizer
   },
+  props: {
+    codeOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   setup() {
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
@@ -2854,8 +1701,9 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       class: "m-editor-content",
       "init-values": _ctx.root,
+      options: _ctx.codeOptions,
       onSave: _ctx.saveCode
-    }, null, 8, ["init-values", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
+    }, null, 8, ["init-values", "options", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
       createElementVNode("div", {
         class: "m-editor-framework-left",
         style: normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
@@ -3303,13 +2151,13 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createBlock(_component_m_form, {
     class: 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]]);
 
@@ -3427,9 +2275,14 @@ const _sfc_main$a = defineComponent({
     menuData: {
       type: Array,
       default: () => []
+    },
+    isSubMenu: {
+      type: Boolean,
+      default: false
     }
   },
-  setup() {
+  emits: ["hide", "show"],
+  setup(props, { emit }) {
     const menu = ref();
     const subMenu = ref();
     const visible = ref(false);
@@ -3439,15 +2292,31 @@ const _sfc_main$a = defineComponent({
       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();
     };
     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);
+    });
+    onUnmounted(() => {
+      if (props.isSubMenu)
+        return;
+      globalThis.removeEventListener("mousedown", hideHandler, true);
     });
     return {
       menu,
@@ -3457,18 +2326,21 @@ const _sfc_main$a = defineComponent({
       subMenuData,
       hide,
       show(e) {
-        visible.value = true;
-        nextTick(() => {
-          const menuHeight = menu.value?.clientHeight || 0;
-          let top = e.clientY;
-          if (menuHeight + e.clientY > document.body.clientHeight) {
-            top = document.body.clientHeight - menuHeight;
-          }
-          menuStyle.value = {
-            top: `${top}px`,
-            left: `${e.clientX}px`
-          };
-        });
+        setTimeout(() => {
+          visible.value = true;
+          nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
+            let top = e.clientY;
+            if (menuHeight + e.clientY > document.body.clientHeight) {
+              top = document.body.clientHeight - menuHeight;
+            }
+            menuStyle.value = {
+              top: `${top}px`,
+              left: `${e.clientX}px`
+            };
+            emit("show");
+          });
+        }, 300);
       },
       showSubMenu(item) {
         const menuItem = item;
@@ -3489,7 +2361,7 @@ const _sfc_main$a = defineComponent({
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   const _component_content_menu = resolveComponent("content-menu", true);
-  return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
+  return _ctx.menuData.length && _ctx.visible ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "magic-editor-content-menu",
     ref: "menu",
@@ -3510,12 +2382,12 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       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)), [
-    [vShow, _ctx.visible]
-  ]) : createCommentVNode("", true);
+  ], 4)) : createCommentVNode("", true);
 }
 var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
@@ -3528,6 +2400,7 @@ const _sfc_main$9 = defineComponent({
     const isRoot = computed(() => node.value?.type === NodeType.ROOT);
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
+    const layerContentMenu = inject("layerContentMenu", []);
     const createMenuItems = (group) => group.items.map((component) => ({
       text: component.text,
       type: "button",
@@ -3592,7 +2465,8 @@ const _sfc_main$9 = defineComponent({
           handler: () => {
             node.value && services?.editorService.remove(node.value);
           }
-        }
+        },
+        ...layerContentMenu
       ]),
       show(e) {
         menu.value?.show(e);
@@ -3815,7 +2689,7 @@ const _sfc_main$7 = defineComponent({
   components: { MIcon },
   props: {
     data: {
-      type: Object
+      type: [Object, String]
     }
   },
   setup(props) {
@@ -4383,6 +3257,7 @@ const _sfc_main$3 = defineComponent({
     const node = computed(() => editorService?.get("node"));
     const parent = computed(() => editorService?.get("parent"));
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
+    const stageContentMenu = inject("stageContentMenu", []);
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
       canPaste.value = data !== "undefined" && !!data;
@@ -4418,8 +3293,17 @@ const _sfc_main$3 = defineComponent({
           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 });
           }
         },
@@ -4486,7 +3370,8 @@ const _sfc_main$3 = defineComponent({
           handler: () => {
             editorService?.get("stage").clearGuides();
           }
-        }
+        },
+        ...stageContentMenu
       ]),
       show(e) {
         menu.value?.show(e);
@@ -4509,24 +3394,9 @@ const _sfc_main$2 = defineComponent({
     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 = inject("services");
+    const stageOptions = inject("stageOptions");
     const stageWrap = ref();
     const stageContainer = ref();
     const menu = ref();
@@ -4543,21 +3413,23 @@ const _sfc_main$2 = defineComponent({
         return;
       if (!stageContainer.value)
         return;
-      if (!(props.runtimeUrl || props.render) || !root.value)
+      if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
         return;
       stage = new StageCore({
-        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", markRaw(stage));
       stage?.mount(stageContainer.value);
@@ -4638,6 +3510,7 @@ const _sfc_main$2 = defineComponent({
           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
@@ -4683,18 +3556,6 @@ const _sfc_main$1 = defineComponent({
     PageBar,
     MagicStage
   },
-  props: {
-    runtimeUrl: String,
-    render: {
-      type: Function
-    },
-    moveableOptions: {
-      type: [Object, Function]
-    },
-    canSelect: {
-      type: Function
-    }
-  },
   setup() {
     const services = inject("services");
     const workspace = ref();
@@ -4703,8 +3564,12 @@ const _sfc_main$1 = defineComponent({
     const mouseenterHandler = () => {
       workspace.value?.focus();
     };
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
     onMounted(() => {
       workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
       keycon = new KeyController(workspace.value);
       const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
       const ctrl = isMac ? "meta" : "ctrl";
@@ -4713,6 +3578,11 @@ const _sfc_main$1 = defineComponent({
         if (!node.value || isPage(node.value))
           return;
         services?.editorService.remove(node.value);
+      }).keyup("backspace", (e) => {
+        e.inputEvent.preventDefault();
+        if (!node.value || isPage(node.value))
+          return;
+        services?.editorService.remove(node.value);
       }).keydown([ctrl, "c"], (e) => {
         e.inputEvent.preventDefault();
         node.value && services?.editorService.copy(node.value);
@@ -4764,13 +3634,20 @@ const _sfc_main$1 = defineComponent({
       }).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);
       });
     });
     onUnmounted(() => {
       workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
       keycon.destroy();
     });
     return {
@@ -4789,12 +3666,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_page_bar = resolveComponent("page-bar");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     (openBlock(), 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
+    })),
     renderSlot(_ctx.$slots, "workspace-content"),
     createVNode(_component_page_bar, null, {
       "page-bar-title": withCtx(({ page }) => [
@@ -4963,6 +3836,14 @@ const _sfc_main = defineComponent({
     sidebar: {
       type: Object
     },
+    layerContentMenu: {
+      type: Array,
+      default: () => []
+    },
+    stageContentMenu: {
+      type: Array,
+      default: () => []
+    },
     menu: {
       type: Object,
       default: () => ({ left: [], right: [] })
@@ -4971,6 +3852,7 @@ const _sfc_main = defineComponent({
       type: Function
     },
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
     propsConfigs: {
       type: Object,
       default: () => ({})
@@ -4984,16 +3866,27 @@ const _sfc_main = defineComponent({
       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"],
@@ -5043,6 +3936,16 @@ const _sfc_main = defineComponent({
       uiService
     };
     provide("services", services);
+    provide("layerContentMenu", props.layerContentMenu);
+    provide("stageContentMenu", props.stageContentMenu);
+    provide("stageOptions", reactive({
+      runtimeUrl: props.runtimeUrl,
+      autoScrollIntoView: props.autoScrollIntoView,
+      render: props.render,
+      moveableOptions: props.moveableOptions,
+      canSelect: props.canSelect,
+      updateDragEl: props.updateDragEl
+    }));
     return services;
   }
 });
@@ -5052,7 +3955,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_workspace = resolveComponent("workspace");
   const _component_props_panel = resolveComponent("props-panel");
   const _component_framework = resolveComponent("framework");
-  return openBlock(), createBlock(_component_framework, null, {
+  return openBlock(), createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
         createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
@@ -5065,12 +3968,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     workspace: withCtx(() => [
       renderSlot(_ctx.$slots, "workspace", {}, () => [
-        createVNode(_component_workspace, {
-          "runtime-url": _ctx.runtimeUrl,
-          render: _ctx.render,
-          "moveable-options": _ctx.moveableOptions,
-          "can-select": _ctx.canSelect
-        }, {
+        createVNode(_component_workspace, null, {
           "workspace-content": withCtx(() => [
             renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
           ]),
@@ -5081,7 +3979,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "page-bar-popover", { page })
           ]),
           _: 3
-        }, 8, ["runtime-url", "render", "moveable-options", "can-select"])
+        })
       ])
     ]),
     propsPanel: withCtx(() => [
@@ -5096,11 +3994,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       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 = {
@@ -5116,5 +4014,5 @@ var index = {
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, generateId, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, setNewItemId, toRelative, uiService, warn };
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, toRelative, uiService, warn };
 //# sourceMappingURL=tmagic-editor.es.js.map