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

package/dist/tmagic-editor.umd.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.elementPlus, global.KeyController, global.StageCore));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController, global.StageCore));
 })(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, Gesto, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -139,7 +139,7 @@
   }
   var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
-  var UISelect_vue_vue_type_style_index_0_lang = '';
+  var UISelect_vue_vue_type_style_index_0_lang = /* #__PURE__ */ (() => ".m-fields-ui-select {\n  cursor: pointer;\n}\n.m-fields-ui-select i {\n  margin-right: 3px;\n}\n.m-fields-ui-select span {\n  color: #2882e0;\n}")();
 
   const _sfc_main$k = vue.defineComponent({
     name: "m-fields-ui-select",
@@ -645,7 +645,7 @@
 
   class Props extends BaseService {
     constructor() {
-      super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+      super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue", "createId", "setNewItemId"]);
       this.state = vue.reactive({
         propsConfigMap: {},
         propsValueMap: {}
@@ -684,12 +684,44 @@
         }
         return value;
       }
-      return lodashEs.cloneDeep({
-        ...getDefaultPropsValue(type),
-        ...lodashEs.mergeWith(this.state.propsValueMap[type] || {}, defaultValue)
-      });
+      const data = lodashEs.cloneDeep(defaultValue);
+      await this.setNewItemId(data);
+      return {
+        ...getDefaultPropsValue(type, await this.createId(type)),
+        ...lodashEs.mergeWith(lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
+      };
+    }
+    async createId(type) {
+      return `${type}_${lodashEs.random(1e4, false)}`;
+    }
+    async setNewItemId(config, parent) {
+      const oldId = config.id;
+      config.id = await this.createId(config.type || "component");
+      if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
+        updatePopId(oldId, config.id, parent);
+      }
+      if (config.items && Array.isArray(config.items)) {
+        for (const item of config.items) {
+          await this.setNewItemId(item, config);
+        }
+      }
     }
   }
+  const updatePopId = (oldId, popId, pageConfig) => {
+    pageConfig.items?.forEach((config) => {
+      if (config.pop === oldId) {
+        config.pop = popId;
+        return;
+      }
+      if (config.popId === oldId) {
+        config.popId = popId;
+        return;
+      }
+      if (Array.isArray(config.items)) {
+        updatePopId(oldId, popId, config);
+      }
+    });
+  };
   var propsService = new Props();
 
   var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
@@ -710,7 +742,6 @@
   })(Keys || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-  const generateId = (type) => `${type}_${lodashEs.random(1e4, false)}`;
   const getPageList = (app) => {
     if (app.items && Array.isArray(app.items)) {
       return app.items.filter((item) => item.type === schema.NodeType.PAGE);
@@ -730,32 +761,6 @@
     return pageName;
   };
   const generatePageNameByApp = (app) => generatePageName(getPageNameList(getPageList(app)));
-  const updatePopId = (oldId, popId, pageConfig) => {
-    pageConfig.items?.forEach((config) => {
-      if (config.pop === oldId) {
-        config.pop = popId;
-        return;
-      }
-      if (config.popId === oldId) {
-        config.popId = popId;
-        return;
-      }
-      if (Array.isArray(config.items)) {
-        updatePopId(oldId, popId, config);
-      }
-    });
-  };
-  const setNewItemId = (config, parent) => {
-    const oldId = config.id;
-    config.id = generateId(config.type || "component");
-    config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
-    if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
-      updatePopId(oldId, config.id, parent);
-    }
-    if (config.items && Array.isArray(config.items)) {
-      config.items.forEach((item) => setNewItemId(item, config));
-    }
-  };
   const isFixed = (node) => node.style?.position === "fixed";
   const getNodeIndex = (node, parent) => {
     const items = parent?.items || [];
@@ -1154,7 +1159,7 @@
         console.error(e);
         return;
       }
-      setNewItemId(config, this.get("root"));
+      await propsService.setNewItemId(config, this.get("root"));
       if (config.style) {
         config.style = {
           ...config.style,
@@ -1197,9 +1202,9 @@
       const node = this.get("node");
       const brothers = parent?.items || [];
       const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
-      if (offset === LayerOffset.BOTTOM) {
+      if (offset === LayerOffset.TOP) {
         brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
-      } else if (offset === LayerOffset.TOP) {
+      } else if (offset === LayerOffset.BOTTOM) {
         brothers.splice(0, 0, brothers.splice(index, 1)[0]);
       } else {
         brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
@@ -1484,6 +1489,21 @@
                       text: "\u7C97\u7EC6"
                     }
                   ]
+                },
+                {
+                  type: "fieldset",
+                  legend: "\u53D8\u5F62",
+                  name: "transform",
+                  items: [
+                    {
+                      name: "rotate",
+                      text: "\u65CB\u8F6C\u89D2\u5EA6"
+                    },
+                    {
+                      name: "scale",
+                      text: "\u7F29\u653E"
+                    }
+                  ]
                 }
               ]
             }
@@ -1544,12 +1564,18 @@
     }
   ];
   const DEFAULT_CONFIG = fillConfig([]);
-  const getDefaultPropsValue = (type) => ({
+  const getDefaultPropsValue = (type, id) => ["page", "container"].includes(type) ? {
+    type,
+    id,
+    style: {},
+    name: type,
+    items: []
+  } : {
     type,
-    id: generateId(type),
+    id,
     style: {},
     name: type
-  });
+  };
 
   const _sfc_main$i = vue.defineComponent({
     components: { Plus: icons.Plus },
@@ -2267,9 +2293,14 @@
       menuData: {
         type: Array,
         default: () => []
+      },
+      isSubMenu: {
+        type: Boolean,
+        default: false
       }
     },
-    setup() {
+    emits: ["hide", "show"],
+    setup(props, { emit }) {
       const menu = vue.ref();
       const subMenu = vue.ref();
       const visible = vue.ref(false);
@@ -2279,15 +2310,31 @@
         top: "0"
       });
       const hide = () => {
+        if (!visible.value)
+          return;
         visible.value = false;
+        subMenu.value?.hide();
+        emit("hide");
+      };
+      const hideHandler = (e) => {
+        const target = e.target;
+        if (!visible.value || !target) {
+          return;
+        }
+        if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+          return;
+        }
+        hide();
       };
       vue.onMounted(() => {
-        globalThis.addEventListener("mouseup", (e) => {
-          if (!visible.value || e.target && menu.value?.contains(e.target)) {
-            return;
-          }
-          hide();
-        }, true);
+        if (props.isSubMenu)
+          return;
+        globalThis.addEventListener("mousedown", hideHandler, true);
+      });
+      vue.onUnmounted(() => {
+        if (props.isSubMenu)
+          return;
+        globalThis.removeEventListener("mousedown", hideHandler, true);
       });
       return {
         menu,
@@ -2297,18 +2344,21 @@
         subMenuData,
         hide,
         show(e) {
-          visible.value = true;
-          vue.nextTick(() => {
-            const menuHeight = menu.value?.clientHeight || 0;
-            let top = e.clientY;
-            if (menuHeight + e.clientY > document.body.clientHeight) {
-              top = document.body.clientHeight - menuHeight;
-            }
-            menuStyle.value = {
-              top: `${top}px`,
-              left: `${e.clientX + 2}px`
-            };
-          });
+          setTimeout(() => {
+            visible.value = true;
+            vue.nextTick(() => {
+              const menuHeight = menu.value?.clientHeight || 0;
+              let top = e.clientY;
+              if (menuHeight + e.clientY > document.body.clientHeight) {
+                top = document.body.clientHeight - menuHeight;
+              }
+              menuStyle.value = {
+                top: `${top}px`,
+                left: `${e.clientX}px`
+              };
+              emit("show");
+            });
+          }, 300);
         },
         showSubMenu(item) {
           const menuItem = item;
@@ -2350,8 +2400,10 @@
         vue.createVNode(_component_content_menu, {
           class: "sub-menu",
           ref: "subMenu",
-          "menu-data": _ctx.subMenuData
-        }, null, 8, ["menu-data"])
+          "menu-data": _ctx.subMenuData,
+          "is-sub-menu": true,
+          onHide: _ctx.hide
+        }, null, 8, ["menu-data", "onHide"])
       ]))
     ], 4)) : vue.createCommentVNode("", true);
   }
@@ -2366,6 +2418,7 @@
       const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
+      const layerContentMenu = vue.inject("layerContentMenu", []);
       const createMenuItems = (group) => group.items.map((component) => ({
         text: component.text,
         type: "button",
@@ -2430,7 +2483,8 @@
             handler: () => {
               node.value && services?.editorService.remove(node.value);
             }
-          }
+          },
+          ...layerContentMenu
         ]),
         show(e) {
           menu.value?.show(e);
@@ -3221,6 +3275,7 @@
       const node = vue.computed(() => editorService?.get("node"));
       const parent = vue.computed(() => editorService?.get("parent"));
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
+      const stageContentMenu = vue.inject("stageContentMenu", []);
       vue.onMounted(() => {
         const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
         canPaste.value = data !== "undefined" && !!data;
@@ -3333,7 +3388,8 @@
             handler: () => {
               editorService?.get("stage").clearGuides();
             }
-          }
+          },
+          ...stageContentMenu
         ]),
         show(e) {
           menu.value?.show(e);
@@ -3356,25 +3412,9 @@
       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 = vue.inject("services");
+      const stageOptions = vue.inject("stageOptions");
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
       const menu = vue.ref();
@@ -3391,22 +3431,23 @@
           return;
         if (!stageContainer.value)
           return;
-        if (!(props.runtimeUrl || props.render) || !root.value)
+        if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
           return;
         stage = new StageCore__default["default"]({
-          render: props.render,
-          runtimeUrl: props.runtimeUrl,
+          render: stageOptions.render,
+          runtimeUrl: stageOptions.runtimeUrl,
           zoom: zoom.value,
-          autoScrollIntoView: 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", vue.markRaw(stage));
         stage?.mount(stageContainer.value);
@@ -3533,19 +3574,6 @@
       PageBar,
       MagicStage
     },
-    props: {
-      runtimeUrl: String,
-      autoScrollIntoView: Boolean,
-      render: {
-        type: Function
-      },
-      moveableOptions: {
-        type: [Object, Function]
-      },
-      canSelect: {
-        type: Function
-      }
-    },
     setup() {
       const services = vue.inject("services");
       const workspace = vue.ref();
@@ -3656,13 +3684,8 @@
     const _component_page_bar = vue.resolveComponent("page-bar");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
       (vue.openBlock(), vue.createBlock(_component_magic_stage, {
-        key: _ctx.page?.id,
-        "runtime-url": _ctx.runtimeUrl,
-        "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
+      })),
       vue.renderSlot(_ctx.$slots, "workspace-content"),
       vue.createVNode(_component_page_bar, null, {
         "page-bar-title": vue.withCtx(({ page }) => [
@@ -3831,6 +3854,14 @@
       sidebar: {
         type: Object
       },
+      layerContentMenu: {
+        type: Array,
+        default: () => []
+      },
+      stageContentMenu: {
+        type: Array,
+        default: () => []
+      },
       menu: {
         type: Object,
         default: () => ({ left: [], right: [] })
@@ -3853,13 +3884,17 @@
         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]
@@ -3867,6 +3902,9 @@
       codeOptions: {
         type: Object,
         default: () => ({})
+      },
+      updateDragEl: {
+        type: Function
       }
     },
     emits: ["props-panel-mounted", "update:modelValue"],
@@ -3916,6 +3954,16 @@
         uiService
       };
       vue.provide("services", services);
+      vue.provide("layerContentMenu", props.layerContentMenu);
+      vue.provide("stageContentMenu", props.stageContentMenu);
+      vue.provide("stageOptions", vue.reactive({
+        runtimeUrl: props.runtimeUrl,
+        autoScrollIntoView: props.autoScrollIntoView,
+        render: props.render,
+        moveableOptions: props.moveableOptions,
+        canSelect: props.canSelect,
+        updateDragEl: props.updateDragEl
+      }));
       return services;
     }
   });
@@ -3938,13 +3986,7 @@
       ]),
       workspace: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "workspace", {}, () => [
-          vue.createVNode(_component_workspace, {
-            "runtime-url": _ctx.runtimeUrl,
-            "auto-scroll-into-view": _ctx.autoScrollIntoView,
-            render: _ctx.render,
-            "moveable-options": _ctx.moveableOptions,
-            "can-select": _ctx.canSelect
-          }, {
+          vue.createVNode(_component_workspace, null, {
             "workspace-content": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
             ]),
@@ -3955,7 +3997,7 @@
               vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
             ]),
             _: 3
-          }, 8, ["runtime-url", "auto-scroll-into-view", "render", "moveable-options", "can-select"])
+          })
         ])
       ]),
       propsPanel: vue.withCtx(() => [
@@ -3974,7 +4016,7 @@
   }
   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 = {
@@ -4009,7 +4051,6 @@
   exports.error = error;
   exports.eventsService = eventsService;
   exports.fillConfig = fillConfig;
-  exports.generateId = generateId;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getConfig = getConfig;
@@ -4025,7 +4066,6 @@
   exports.propsService = propsService;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
-  exports.setNewItemId = setNewItemId;
   exports.toRelative = toRelative;
   exports.uiService = uiService;
   exports.warn = warn;