@tmagic/editor 1.0.0-rc.7 → 1.0.0-rc.8

package/dist/style.css

@@ -414,6 +414,9 @@
   width: 100%;
   user-select: none;
 }
+.m-editor-workspace:focus-visible {
+  outline: 0;
+}
 .m-editor-page-bar {
   position: fixed;
   bottom: 0;

package/dist/tmagic-editor.es.js

@@ -627,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: {}
@@ -666,12 +666,44 @@ class Props extends BaseService {
       }
       return value;
     }
+    const data = cloneDeep(defaultValue);
+    await this.setNewItemId(data);
     return {
-      ...getDefaultPropsValue(type),
-      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), cloneDeep(defaultValue))
+      ...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) => {
@@ -692,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);
@@ -712,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 || [];
@@ -1136,7 +1141,7 @@ 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,
@@ -1541,12 +1546,18 @@ const fillConfig = (config = []) => [
   }
 ];
 const DEFAULT_CONFIG = fillConfig([]);
-const getDefaultPropsValue = (type) => ({
+const getDefaultPropsValue = (type, id) => ["page", "container"].includes(type) ? {
   type,
-  id: generateId(type),
+  id,
+  style: {},
+  name: type,
+  items: []
+} : {
+  type,
+  id,
   style: {},
   name: type
-});
+};
 
 const _sfc_main$i = defineComponent({
   components: { Plus },
@@ -3383,25 +3394,9 @@ const _sfc_main$2 = defineComponent({
     ViewerMenu,
     ScrollViewer
   },
-  props: {
-    render: {
-      type: Function
-    },
-    runtimeUrl: String,
-    autoScrollIntoView: Boolean,
-    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();
@@ -3418,22 +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: props.autoScrollIntoView,
+        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);
@@ -3560,19 +3556,6 @@ const _sfc_main$1 = defineComponent({
     PageBar,
     MagicStage
   },
-  props: {
-    runtimeUrl: String,
-    autoScrollIntoView: Boolean,
-    render: {
-      type: Function
-    },
-    moveableOptions: {
-      type: [Object, Function]
-    },
-    canSelect: {
-      type: Function
-    }
-  },
   setup() {
     const services = inject("services");
     const workspace = ref();
@@ -3683,13 +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,
-      "auto-scroll-into-view": _ctx.autoScrollIntoView,
-      render: _ctx.render,
-      "moveable-options": _ctx.moveableOptions,
-      "can-select": _ctx.canSelect
-    }, null, 8, ["runtime-url", "auto-scroll-into-view", "render", "moveable-options", "can-select"])),
+      key: _ctx.page?.id
+    })),
     renderSlot(_ctx.$slots, "workspace-content"),
     createVNode(_component_page_bar, null, {
       "page-bar-title": withCtx(({ page }) => [
@@ -3888,13 +3866,17 @@ 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]
@@ -3902,6 +3884,9 @@ const _sfc_main = defineComponent({
     codeOptions: {
       type: Object,
       default: () => ({})
+    },
+    updateDragEl: {
+      type: Function
     }
   },
   emits: ["props-panel-mounted", "update:modelValue"],
@@ -3953,6 +3938,14 @@ const _sfc_main = defineComponent({
     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;
   }
 });
@@ -3975,13 +3968,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     workspace: withCtx(() => [
       renderSlot(_ctx.$slots, "workspace", {}, () => [
-        createVNode(_component_workspace, {
-          "runtime-url": _ctx.runtimeUrl,
-          "auto-scroll-into-view": _ctx.autoScrollIntoView,
-          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 })
           ]),
@@ -3992,7 +3979,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "page-bar-popover", { page })
           ]),
           _: 3
-        }, 8, ["runtime-url", "auto-scroll-into-view", "render", "moveable-options", "can-select"])
+        })
       ])
     ]),
     propsPanel: withCtx(() => [
@@ -4011,7 +3998,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-var index$1 = /* #__PURE__ */ (() => ".m-editor-nav-menu {\n  display: flex;\n  z-index: 5;\n  -webkit-box-pack: justify;\n  justify-content: space-between;\n  -webkit-box-align: center;\n  align-items: center;\n  background-color: #ffffff;\n  font-size: 19.2px;\n  color: #070303;\n  font-weight: 400;\n  box-sizing: border-box;\n  margin: 0px;\n  flex: 0 0 35px;\n  border-bottom: 1px solid #d8dee8;\n}\n.m-editor-nav-menu > div {\n  display: flex;\n  height: 100%;\n  z-index: 1;\n  align-items: center;\n}\n.m-editor-nav-menu .menu-center {\n  justify-content: center;\n}\n.m-editor-nav-menu .menu-right {\n  justify-content: flex-end;\n}\n.m-editor-nav-menu .menu-item {\n  flex-direction: row;\n  -webkit-box-align: center;\n  align-items: center;\n  vertical-align: middle;\n  font-size: 14px;\n  line-height: 1;\n  height: 100%;\n  color: rgba(255, 255, 255, 0.7);\n  box-sizing: inherit;\n  z-index: 1;\n  display: flex !important;\n  transition: all 0.3s ease 0s;\n  border-bottom: 2px solid transparent;\n  margin: 0;\n}\n.m-editor-nav-menu .menu-item .is-disabled {\n  opacity: 0.5;\n}\n.m-editor-nav-menu .menu-item .is-text {\n  padding: 5px;\n}\n.m-editor-nav-menu .menu-item .is-text,\n.m-editor-nav-menu .menu-item i {\n  color: #070303;\n}\n.m-editor-nav-menu .menu-item .icon {\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  height: 100%;\n  padding: 0px 8px;\n}\n.m-editor-nav-menu .menu-item .menu-item-text {\n  color: #070303;\n}\n.m-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n.m-editor-content {\n  width: 100%;\n  height: calc(100% - 35px);\n  display: flex;\n  justify-self: space-between;\n}\n.m-editor-framework-center {\n  position: relative;\n  transform: translateZ(0);\n  flex: 1;\n}\n.m-editor-framework-left {\n  background-color: #ffffff;\n}\n.m-editor-framework-center .el-scrollbar__view {\n  height: 100%;\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-empty-panel {\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: calc(100% - 32px);\n}\n.m-editor-empty-content {\n  display: flex;\n  justify-content: space-evenly;\n  flex-direction: row;\n  width: 100%;\n}\n.m-editor-empty-button {\n  border: 3px solid rgba(0, 0, 0, 0.2);\n  padding: 10px 40px;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n}\n.m-editor-empty-button i {\n  height: 180px;\n  line-height: 180px;\n  font-size: 100px;\n}\n.m-editor-empty-button p {\n  text-align: center;\n  font-size: 20px;\n  margin-top: 5px;\n}\n.m-editor-empty-button:hover {\n  border-color: #2882e0;\n  color: #2882e0;\n}\n.m-editor-sidebar {\n  height: 100%;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header {\n  background: #2882e0;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {\n  width: 40px;\n  margin-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {\n  margin: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {\n  border: 0;\n  border-radius: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {\n  margin-left: 2px;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {\n  line-height: 15px;\n  border: 0;\n  height: auto;\n  padding: 8px;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {\n  background: #ffffff;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {\n  border-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i {\n  font-size: 25px;\n  color: rgba(255, 255, 255, 0.6);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {\n  color: rgb(255, 255, 255);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {\n  font-size: 12px;\n  white-space: normal;\n}\n.m-editor-sidebar .el-scrollbar {\n  height: 100%;\n}\n.m-editor-sidebar .el-tree {\n  min-height: 100%;\n}\n.m-editor-sidebar .fold-icon {\n  position: absolute;\n  bottom: 8px;\n  left: 0px;\n  width: 45px;\n  padding-left: 8px;\n  color: #fff;\n  font-size: 32px;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.m-editor-sidebar .fold-icon:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n.m-editor-sidebar .el-tabs__content,\n.m-editor-sidebar .el-tab-pane {\n  height: 100%;\n}\n.magic-editor-layer-panel {\n  background: #ffffff;\n}\n.magic-editor-layer-panel .search-input {\n  background: #ffffff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n.magic-editor-layer-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.magic-editor-layer-panel .node-content {\n  flex: 1;\n  display: flex;\n  width: 100%;\n}\n.magic-editor-layer-panel .node-content > div {\n  width: 8px;\n}\n.magic-editor-layer-panel .node-content > span {\n  width: calc(100% - 68px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.magic-editor-layer-panel .node-content > i {\n  margin-right: 10px;\n  font-size: 20px;\n}\n.magic-editor-layer-panel .node-content > i.lock {\n  color: #bbb;\n}\n.magic-editor-layer-panel,\n.magic-editor-layer-panel .el-tree {\n  background-color: #ffffff;\n  color: #313a40;\n}\n.magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.magic-editor-layer-panel .cus-tree-node {\n  width: 100%;\n  overflow: hidden;\n}\n.magic-editor-layer-panel .cus-tree-node-hover {\n  background-color: #f3f5f9;\n  width: 100%;\n}\n.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.ui-tree-tip {\n  width: 100%;\n  height: 25px;\n  margin-left: 10px;\n  background: #ffffff;\n  font-style: italic;\n  color: #555554;\n  position: absolute;\n  top: 40px;\n  left: 0;\n  z-index: 1;\n}\n.ui-component-panel {\n  height: 100%;\n  border-top: 0 !important;\n  margin-top: 50px;\n  background-color: #ffffff;\n}\n.ui-component-panel .search-input {\n  background: #f8fbff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  z-index: 1;\n}\n.ui-component-panel .search-input .el-input__prefix {\n  padding: 10px;\n}\n.ui-component-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.ui-component-panel .el-collapse-item > div:first-of-type {\n  border-bottom: 1px solid #d9dbdd;\n  margin-bottom: 10px;\n}\n.ui-component-panel .el-collapse-item__header {\n  background: #ffffff;\n  color: #070303;\n  height: 25px;\n  line-height: 25px;\n  padding-left: 10px;\n  font-size: 12px;\n}\n.ui-component-panel .el-collapse-item__header i {\n  margin-right: 5px;\n  font-size: 14px;\n}\n.ui-component-panel .el-collapse-item__wrap {\n  background: #ffffff;\n  border-bottom: 0;\n}\n.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {\n  padding: 10px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  color: #070303;\n  flex-direction: column;\n  width: 42px;\n  cursor: pointer;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i {\n  font-size: 20px;\n  background: #fff;\n  height: 40px;\n  width: 40px;\n  line-height: 40px;\n  border-radius: 5px;\n  color: #909090;\n  border: 1px solid #d9dbdd;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  margin-bottom: 5px;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i:hover {\n  background: #2882e0;\n  color: #fff;\n  border-color: #4e8be1;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item span {\n  font-size: 12px;\n  text-align: center;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {\n  width: 50px;\n  height: 30px;\n  line-height: 15px;\n  display: block;\n  white-space: normal;\n  margin: 0;\n}\n.m-editor-resizer {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  width: 8px;\n  margin: 0 -5px;\n  height: 100%;\n  opacity: 0.9;\n  background: padding-box #d8dee8;\n  box-sizing: border-box;\n  cursor: col-resize;\n  z-index: 1;\n}\n.m-editor-resizer:hover {\n  border-color: #d8dee8;\n}\n.m-editor-resizer .icon-container {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.4s;\n  width: 20px;\n  height: 120px;\n  line-height: 120px;\n  text-align: center;\n  background: #d8dee8;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: pointer;\n}\n.m-editor-resizer .icon-container.position-left {\n  transform: translate(calc(-100% - 4px), -50%);\n}\n.m-editor-resizer .icon-container.position-right {\n  transform: translate(calc(100% + 4px), -50%);\n}\n.m-editor-resizer .icon {\n  color: #fff;\n  font-size: 18px;\n}\n.magic-editor-resizer:hover .icon-container {\n  visibility: visible;\n  opacity: 1;\n}\n.m-editor-workspace {\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n.m-editor-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}")();
+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 = {
@@ -4027,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