@tmagic/editor 1.0.0-beta.15 → 1.0.0-beta.16

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('@tmagic/schema'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', '@tmagic/schema', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.schema, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
-})(this, (function (exports, vue, serialize, monaco, icons, schema, lodashEs, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
+})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,7 +41,7 @@
     return target;
   };
 
-  const _sfc_main$l = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -58,7 +58,7 @@
       };
     }
   });
-  function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
       style: vue.normalizeStyle(`height: ${_ctx.height}`),
@@ -67,9 +67,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
+  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 
-  const _sfc_main$k = vue.defineComponent({
+  const _sfc_main$l = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -124,7 +124,7 @@
       };
     }
   });
-  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_link = vue.resolveComponent("m-fields-link");
     return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
       config: _ctx.formConfig,
@@ -133,11 +133,11 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
+  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
   var UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "m-fields-ui-select",
     props: {
       labelWidth: String,
@@ -175,6 +175,9 @@
         }
       };
       return {
+        Delete: vue.markRaw(icons.Delete),
+        Pointer: vue.markRaw(icons.Pointer),
+        Close: vue.markRaw(icons.Close),
         val,
         uiSelectMode,
         toName: vue.computed(() => {
@@ -199,34 +202,64 @@
       };
     }
   });
-  const _hoisted_1$c = /* @__PURE__ */ vue.createElementVNode("i", {
-    class: "el-icon-delete",
-    style: { "color": "rgb(221, 75, 57)" }
-  }, "\u53D6\u6D88", -1);
-  const _hoisted_2$5 = [
-    _hoisted_1$c
-  ];
-  const _hoisted_3$3 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
-  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_el_button = vue.resolveComponent("el-button");
+    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
     return _ctx.uiSelectMode ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "m-fields-ui-select",
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
-    }, _hoisted_2$5)) : (vue.openBlock(), vue.createElementBlock("div", {
+    }, [
+      vue.createVNode(_component_el_button, {
+        type: "danger",
+        icon: _ctx.Delete,
+        text: "",
+        style: { "padding": "0" }
+      }, {
+        default: vue.withCtx(() => [
+          _hoisted_1$c
+        ]),
+        _: 1
+      }, 8, ["icon"])
+    ])) : (vue.openBlock(), vue.createElementBlock("div", {
       key: 1,
       class: "m-fields-ui-select",
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.startSelect && _ctx.startSelect(...args))
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.startSelect && _ctx.startSelect(...args)),
+      style: { "display": "flex" }
     }, [
-      _hoisted_3$3,
-      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1),
-      _ctx.val ? (vue.openBlock(), vue.createElementBlock("i", {
-        key: 0,
-        class: "el-icon-delete",
-        onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.deleteHandler && _ctx.deleteHandler(...args), ["stop"]))
-      })) : vue.createCommentVNode("", true)
+      vue.createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+        default: vue.withCtx(() => [
+          _ctx.val ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+            key: 0,
+            style: { "padding": "0" },
+            type: "danger",
+            icon: _ctx.Close,
+            text: "",
+            onClick: vue.withModifiers(_ctx.deleteHandler, ["stop"])
+          }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }),
+      vue.createVNode(_component_el_tooltip, {
+        content: _ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_button, {
+            text: "",
+            style: { "padding": "0", "margin": "0" }
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["content"])
     ]));
   }
-  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
   const toString = (v, language) => {
     let value = "";
@@ -243,7 +276,7 @@
     }
     return value;
   };
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -253,12 +286,16 @@
         type: [String, Object]
       },
       type: {
-        type: [String],
+        type: String,
         default: () => ""
       },
       language: {
-        type: [String],
+        type: String,
         default: () => "javascript"
+      },
+      options: {
+        type: Object,
+        default: () => ({})
       }
     },
     emits: ["initd", "save"],
@@ -268,6 +305,10 @@
       const values = vue.ref("");
       const loading = vue.ref(false);
       const codeEditor = vue.ref();
+      const resizeObserver = new globalThis.ResizeObserver(lodashEs.throttle(() => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300));
       const setEditorValue = (v, m) => {
         values.value = toString(v, props.language);
         if (props.type === "diff") {
@@ -280,10 +321,6 @@
         }
         return vsEditor?.setValue(values.value);
       };
-      const resizeHandler = () => {
-        vsEditor?.layout();
-        vsDiffEditor?.layout();
-      };
       const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
       const init = async () => {
         if (!codeEditor.value)
@@ -294,8 +331,9 @@
           tabSize: 2,
           theme: "vs-dark",
           fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 15,
-          formatOnPaste: true
+          fontSize: 14,
+          formatOnPaste: true,
+          ...props.options
         };
         if (props.type === "diff") {
           vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditor.value, options);
@@ -316,7 +354,7 @@
             emit("save", getEditorValue());
           });
         }
-        globalThis.addEventListener("resize", resizeHandler);
+        resizeObserver.observe(codeEditor.value);
       };
       vue.watch(() => props.initValues, (v, preV) => {
         if (v !== preV) {
@@ -331,7 +369,7 @@
         init();
       });
       vue.onUnmounted(() => {
-        globalThis.removeEventListener("resize", resizeHandler);
+        resizeObserver.disconnect();
       });
       return {
         values,
@@ -352,10 +390,10 @@
     ref: "codeEditor",
     class: "magic-code-editor"
   };
-  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, null, 512);
   }
-  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -982,7 +1020,7 @@
       await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
       await this.select(newNode);
       this.addModifiedNodeId(newNode.id);
-      if (type !== schema.NodeType.PAGE) {
+      if (!isPage2) {
         this.pushHistoryState();
       }
       stage?.select(newNode.id);
@@ -1489,7 +1527,7 @@
     name: type
   });
 
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     components: { Plus: icons.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1509,7 +1547,7 @@
   const _hoisted_1$a = { class: "m-editor-empty-panel" };
   const _hoisted_2$4 = { class: "m-editor-empty-content" };
   const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
@@ -1531,7 +1569,7 @@
       ])
     ]);
   }
-  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
   /*
   Copyright (c) 2018 Daybrush
@@ -2742,7 +2780,7 @@
 
   var Gesto$1 = Gesto;
 
-  const _sfc_main$g = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -2788,14 +2826,14 @@
     ref: "target",
     class: "m-editor-resizer"
   };
-  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$9, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
+  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
-  const _sfc_main$f = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
@@ -2823,7 +2861,7 @@
     key: 1,
     class: "m-editor-content"
   };
-  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
@@ -2868,9 +2906,9 @@
       ]))
     ]);
   }
-  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
-  const _sfc_main$e = vue.defineComponent({
+  const _sfc_main$f = vue.defineComponent({
     name: "m-icon",
     components: { Edit: icons.Edit },
     props: {
@@ -2885,7 +2923,7 @@
     }
   });
   const _hoisted_1$7 = ["src"];
-  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_edit = vue.resolveComponent("edit");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return !_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -2906,9 +2944,9 @@
       _: 1
     }));
   }
-  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     components: { MIcon, ArrowDown: icons.ArrowDown },
     props: {
       data: {
@@ -3077,7 +3115,7 @@
     style: { "margin": "0 5px" }
   };
   const _hoisted_3$1 = { class: "el-dropdown-link menubar-menu-button" };
-  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_divider = vue.resolveComponent("el-divider");
     const _component_tool_button = vue.resolveComponent("tool-button", true);
     const _component_m_icon = vue.resolveComponent("m-icon");
@@ -3100,12 +3138,12 @@
         direction: _ctx.item.direction || "vertical"
       }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
         vue.createVNode(_component_tool_button, {
-          data: { type: "button", icon: _ctx.ZoomIn, handler: _ctx.zoomInHandler, tooltip: "\u653E\u5927" },
+          data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
           "event-type": _ctx.eventType
         }, null, 8, ["data", "event-type"]),
         vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
         vue.createVNode(_component_tool_button, {
-          data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
+          data: { type: "button", icon: _ctx.ZoomIn, handler: _ctx.zoomInHandler, tooltip: "\u653E\u5927" },
           "event-type": _ctx.eventType
         }, null, 8, ["data", "event-type"])
       ], 64)) : _ctx.item.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
@@ -3186,9 +3224,9 @@
       }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.item.component), vue.normalizeProps(vue.mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : vue.createCommentVNode("", true)
     ], 34)) : vue.createCommentVNode("", true);
   }
-  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "nav-menu",
     components: { ToolButton },
     props: {
@@ -3208,7 +3246,7 @@
       };
     }
   });
-  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: "m-editor-nav-menu",
@@ -3230,9 +3268,9 @@
       }), 128))
     ], 4);
   }
-  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -3278,7 +3316,7 @@
       };
     }
   });
-  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form = vue.resolveComponent("m-form");
     return vue.openBlock(), vue.createBlock(_component_m_form, {
       class: "m-editor-props-panel",
@@ -3290,9 +3328,9 @@
       onChange: _ctx.submit
     }, null, 8, ["init-values", "config", "onChange"]);
   }
-  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
-  const _sfc_main$a = vue.defineComponent({
+  const _sfc_main$b = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
@@ -3329,7 +3367,7 @@
   });
   const _hoisted_1$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
   const _hoisted_2$1 = ["onClick", "onDragstart"];
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -3398,9 +3436,9 @@
       _: 1
     });
   }
-  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
-  const _sfc_main$9 = vue.defineComponent({
+  const _sfc_main$a = vue.defineComponent({
     components: { ToolButton },
     props: {
       menuData: {
@@ -3465,7 +3503,7 @@
       };
     }
   });
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     const _component_content_menu = vue.resolveComponent("content-menu", true);
     return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
@@ -3496,9 +3534,9 @@
       [vue.vShow, _ctx.visible]
     ]) : vue.createCommentVNode("", true);
   }
-  var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+  var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
-  const _sfc_main$8 = vue.defineComponent({
+  const _sfc_main$9 = vue.defineComponent({
     components: { ContentMenu },
     setup() {
       const services = vue.inject("services");
@@ -3579,7 +3617,7 @@
       };
     }
   });
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_content_menu = vue.resolveComponent("content-menu");
     return vue.openBlock(), vue.createBlock(_component_content_menu, {
       "menu-data": _ctx.menuData,
@@ -3587,7 +3625,7 @@
       style: { "overflow": "initial" }
     }, null, 8, ["menu-data"]);
   }
-  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
   const throttleTime = 150;
   const select = async (data, editorService) => {
@@ -3679,7 +3717,7 @@
       tree.value?.filter(val);
     }
   });
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
@@ -3727,7 +3765,7 @@
     }
   });
   const _hoisted_1$4 = ["id", "onMouseenter"];
-  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
     const _component_layer_menu = vue.resolveComponent("layer-menu");
@@ -3788,29 +3826,22 @@
       _: 3
     });
   }
-  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
-  const _sfc_main$6 = vue.defineComponent({
-    name: "m-sidebar",
+  const _sfc_main$7 = vue.defineComponent({
     components: { MIcon },
     props: {
       data: {
-        type: Object,
-        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+        type: Object
       }
     },
     setup(props) {
-      const activeTabName = vue.ref(props.data?.status);
-      vue.watch(() => props.data?.status, (status) => {
-        activeTabName.value = status || "0";
-      });
       return {
-        activeTabName,
-        items: vue.computed(() => props.data?.items.map((item) => {
-          if (typeof item !== "string") {
-            return item;
+        config: vue.computed(() => {
+          if (typeof props.data !== "string") {
+            return props.data;
           }
-          switch (item) {
+          switch (props.data) {
             case "component-list":
               return {
                 type: "component",
@@ -3828,9 +3859,9 @@
                 slots: {}
               };
             default:
-              return {};
+              return void 0;
           }
-        }))
+        })
       };
     }
   });
@@ -3838,11 +3869,65 @@
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
+    return _ctx.config ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
+      key: 0,
+      name: _ctx.config.text
+    }, {
+      label: vue.withCtx(() => [
+        (vue.openBlock(), vue.createElementBlock("div", {
+          key: _ctx.config.text
+        }, [
+          _ctx.config.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+            key: 0,
+            icon: _ctx.config.icon
+          }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
+        ]))
+      ]),
+      default: vue.withCtx(() => [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.mergeProps(_ctx.config.props || {}, vue.toHandlers(_ctx.config?.listeners || {})), vue.createSlots({ _: 2 }, [
+          _ctx.config.slots?.layerNodeContent ? {
+            name: "layer-node-content",
+            fn: vue.withCtx(({ data, node }) => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots?.layerNodeContent), {
+                data,
+                node
+              }, null, 8, ["data", "node"]))
+            ])
+          } : void 0
+        ]), 1040))
+      ]),
+      _: 1
+    }, 8, ["name"])) : vue.createCommentVNode("", true);
+  }
+  var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+
+  const _sfc_main$6 = vue.defineComponent({
+    components: { TabPane },
+    name: "m-sidebar",
+    props: {
+      data: {
+        type: Object,
+        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+      }
+    },
+    setup(props) {
+      const activeTabName = vue.ref(props.data?.status);
+      vue.watch(() => props.data?.status, (status) => {
+        activeTabName.value = status || "0";
+      });
+      return {
+        activeTabName
+      };
+    }
+  });
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_tab_pane = vue.resolveComponent("tab-pane");
     const _component_el_tabs = vue.resolveComponent("el-tabs");
-    return _ctx.data.type === "tabs" ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
+    return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
       key: 0,
       class: "m-editor-sidebar",
       modelValue: _ctx.activeTabName,
@@ -3851,35 +3936,11 @@
       "tab-position": "left"
     }, {
       default: vue.withCtx(() => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
-          return vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
-            key: item.text,
-            name: item.text
-          }, {
-            label: vue.withCtx(() => [
-              vue.createElementVNode("span", null, [
-                item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
-                  key: 0,
-                  icon: item.icon
-                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                item.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true)
-              ])
-            ]),
-            default: vue.withCtx(() => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.component), vue.mergeProps(item.props || {}, vue.toHandlers(item.listeners || {})), vue.createSlots({ _: 2 }, [
-                item.slots?.layerNodeContent ? {
-                  name: "layer-node-content",
-                  fn: vue.withCtx(({ data, node }) => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.slots.layerNodeContent), {
-                      data,
-                      node
-                    }, null, 8, ["data", "node"]))
-                  ])
-                } : void 0
-              ]), 1040))
-            ]),
-            _: 2
-          }, 1032, ["name"]);
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item, index) => {
+          return vue.openBlock(), vue.createBlock(_component_tab_pane, {
+            key: index,
+            data: item
+          }, null, 8, ["data"]);
         }), 128))
       ]),
       _: 1