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

package/dist/tmagic-editor.es.js

@@ -1,9 +1,9 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createElementVNode, toDisplayString, withModifiers, createCommentVNode, watch, onMounted, onUnmounted, reactive, toRaw, createVNode, withCtx, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, markRaw, renderList, createTextVNode, normalizeProps, mergeProps, getCurrentInstance, nextTick, withDirectives, Teleport, vShow, toHandlers, createSlots, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, withDirectives, Teleport, vShow, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
+import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
+import { throttle, cloneDeep, mergeWith, random } from 'lodash-es';
 import * as monaco from 'monaco-editor';
-import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
 import { NodeType } from '@tmagic/schema';
-import { cloneDeep, mergeWith, random, throttle } from 'lodash-es';
 import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
 import { EventEmitter as EventEmitter$2 } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
@@ -23,7 +23,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$l = defineComponent({
+const _sfc_main$m = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
   emits: ["change"],
@@ -40,7 +40,7 @@ const _sfc_main$l = defineComponent({
     };
   }
 });
-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 = resolveComponent("magic-code-editor");
   return openBlock(), createBlock(_component_magic_code_editor, {
     style: normalizeStyle(`height: ${_ctx.height}`),
@@ -49,9 +49,9 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$l = defineComponent({
   name: "m-fields-code-link",
   props: {
     config: {
@@ -106,7 +106,7 @@ const _sfc_main$k = defineComponent({
     };
   }
 });
-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 = resolveComponent("m-fields-link");
   return openBlock(), createBlock(_component_m_fields_link, {
     config: _ctx.formConfig,
@@ -115,11 +115,11 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "m-fields-ui-select",
   props: {
     labelWidth: String,
@@ -157,6 +157,9 @@ const _sfc_main$j = defineComponent({
       }
     };
     return {
+      Delete: markRaw(Delete),
+      Pointer: markRaw(Pointer),
+      Close: markRaw(Close),
       val,
       uiSelectMode,
       toName: computed(() => {
@@ -181,34 +184,64 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-const _hoisted_1$c = /* @__PURE__ */ 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__ */ createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$c = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
   return _ctx.uiSelectMode ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "m-fields-ui-select",
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
-  }, _hoisted_2$5)) : (openBlock(), createElementBlock("div", {
+  }, [
+    createVNode(_component_el_button, {
+      type: "danger",
+      icon: _ctx.Delete,
+      text: "",
+      style: { "padding": "0" }
+    }, {
+      default: withCtx(() => [
+        _hoisted_1$c
+      ]),
+      _: 1
+    }, 8, ["icon"])
+  ])) : (openBlock(), 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,
-    createElementVNode("span", null, toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1),
-    _ctx.val ? (openBlock(), createElementBlock("i", {
-      key: 0,
-      class: "el-icon-delete",
-      onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.deleteHandler && _ctx.deleteHandler(...args), ["stop"]))
-    })) : createCommentVNode("", true)
+    createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+      default: withCtx(() => [
+        _ctx.val ? (openBlock(), createBlock(_component_el_button, {
+          key: 0,
+          style: { "padding": "0" },
+          type: "danger",
+          icon: _ctx.Close,
+          text: "",
+          onClick: withModifiers(_ctx.deleteHandler, ["stop"])
+        }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+      ]),
+      _: 1
+    }),
+    createVNode(_component_el_tooltip, {
+      content: _ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_el_button, {
+          text: "",
+          style: { "padding": "0", "margin": "0" }
+        }, {
+          default: withCtx(() => [
+            createTextVNode(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 = "";
@@ -225,7 +258,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$i = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -235,12 +268,16 @@ const _sfc_main$i = defineComponent({
       type: [String, Object]
     },
     type: {
-      type: [String],
+      type: String,
       default: () => ""
     },
     language: {
-      type: [String],
+      type: String,
       default: () => "javascript"
+    },
+    options: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ["initd", "save"],
@@ -250,6 +287,10 @@ const _sfc_main$i = defineComponent({
     const values = ref("");
     const loading = ref(false);
     const codeEditor = ref();
+    const resizeObserver = new globalThis.ResizeObserver(throttle(() => {
+      vsEditor?.layout();
+      vsDiffEditor?.layout();
+    }, 300));
     const setEditorValue = (v, m) => {
       values.value = toString(v, props.language);
       if (props.type === "diff") {
@@ -262,10 +303,6 @@ const _sfc_main$i = defineComponent({
       }
       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)
@@ -276,8 +313,9 @@ const _sfc_main$i = defineComponent({
         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.editor.createDiffEditor(codeEditor.value, options);
@@ -298,7 +336,7 @@ const _sfc_main$i = defineComponent({
           emit("save", getEditorValue());
         });
       }
-      globalThis.addEventListener("resize", resizeHandler);
+      resizeObserver.observe(codeEditor.value);
     };
     watch(() => props.initValues, (v, preV) => {
       if (v !== preV) {
@@ -313,7 +351,7 @@ const _sfc_main$i = defineComponent({
       init();
     });
     onUnmounted(() => {
-      globalThis.removeEventListener("resize", resizeHandler);
+      resizeObserver.disconnect();
     });
     return {
       values,
@@ -334,10 +372,10 @@ const _hoisted_1$b = {
   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 openBlock(), 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) => {
@@ -964,7 +1002,7 @@ class Editor$1 extends BaseService {
     await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get("root")) });
     await this.select(newNode);
     this.addModifiedNodeId(newNode.id);
-    if (type !== NodeType.PAGE) {
+    if (!isPage2) {
       this.pushHistoryState();
     }
     stage?.select(newNode.id);
@@ -1471,7 +1509,7 @@ const getDefaultPropsValue = (type) => ({
   name: type
 });
 
-const _sfc_main$h = defineComponent({
+const _sfc_main$i = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -1491,7 +1529,7 @@ const _sfc_main$h = defineComponent({
 const _hoisted_1$a = { class: "m-editor-empty-panel" };
 const _hoisted_2$4 = { class: "m-editor-empty-content" };
 const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$a, [
@@ -1513,7 +1551,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-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
@@ -2724,7 +2762,7 @@ function (_super) {
 
 var Gesto$1 = Gesto;
 
-const _sfc_main$g = defineComponent({
+const _sfc_main$h = defineComponent({
   name: "m-editor-resize",
   props: {
     type: {
@@ -2770,14 +2808,14 @@ const _hoisted_1$9 = {
   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 openBlock(), createElementBlock("span", _hoisted_1$9, [
     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 = defineComponent({
+const _sfc_main$g = defineComponent({
   components: {
     AddPageBox,
     Resizer
@@ -2805,7 +2843,7 @@ const _hoisted_2$3 = {
   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 = resolveComponent("magic-code-editor");
   const _component_resizer = resolveComponent("resizer");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
@@ -2850,9 +2888,9 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-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 = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "m-icon",
   components: { Edit },
   props: {
@@ -2867,7 +2905,7 @@ const _sfc_main$e = defineComponent({
   }
 });
 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 = resolveComponent("edit");
   const _component_el_icon = resolveComponent("el-icon");
   return !_ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
@@ -2888,9 +2926,9 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$e = defineComponent({
   components: { MIcon, ArrowDown },
   props: {
     data: {
@@ -3059,7 +3097,7 @@ const _hoisted_2$2 = {
   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 = resolveComponent("el-divider");
   const _component_tool_button = resolveComponent("tool-button", true);
   const _component_m_icon = resolveComponent("m-icon");
@@ -3082,12 +3120,12 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
       direction: _ctx.item.direction || "vertical"
     }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$6, toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
       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"]),
       createElementVNode("span", _hoisted_2$2, toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
       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" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
@@ -3168,9 +3206,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.item.component), normalizeProps(mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : createCommentVNode("", true)
   ], 34)) : 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 = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "nav-menu",
   components: { ToolButton },
   props: {
@@ -3190,7 +3228,7 @@ const _sfc_main$c = defineComponent({
     };
   }
 });
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   return openBlock(), createElementBlock("div", {
     class: "m-editor-nav-menu",
@@ -3212,9 +3250,9 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     }), 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 = defineComponent({
+const _sfc_main$c = defineComponent({
   name: "m-editor-props-panel",
   emits: ["mounted"],
   setup(props, { emit }) {
@@ -3260,7 +3298,7 @@ const _sfc_main$b = defineComponent({
     };
   }
 });
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createBlock(_component_m_form, {
     class: "m-editor-props-panel",
@@ -3272,9 +3310,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "ui-component-panel",
   components: { MIcon },
   setup() {
@@ -3311,7 +3349,7 @@ const _sfc_main$a = defineComponent({
 });
 const _hoisted_1$5 = /* @__PURE__ */ 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 = resolveComponent("el-input");
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -3380,9 +3418,9 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$a = defineComponent({
   components: { ToolButton },
   props: {
     menuData: {
@@ -3447,7 +3485,7 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   const _component_content_menu = resolveComponent("content-menu", true);
   return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
@@ -3478,9 +3516,9 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.visible]
   ]) : 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 = defineComponent({
+const _sfc_main$9 = defineComponent({
   components: { ContentMenu },
   setup() {
     const services = inject("services");
@@ -3561,7 +3599,7 @@ const _sfc_main$8 = defineComponent({
     };
   }
 });
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_content_menu = resolveComponent("content-menu");
   return openBlock(), createBlock(_component_content_menu, {
     "menu-data": _ctx.menuData,
@@ -3569,7 +3607,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     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) => {
@@ -3661,7 +3699,7 @@ const useFilter = (tree) => ({
     tree.value?.filter(val);
   }
 });
-const _sfc_main$7 = defineComponent({
+const _sfc_main$8 = defineComponent({
   name: "magic-editor-layer-panel",
   components: { LayerMenu },
   setup() {
@@ -3709,7 +3747,7 @@ const _sfc_main$7 = defineComponent({
   }
 });
 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 = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
   const _component_layer_menu = resolveComponent("layer-menu");
@@ -3770,29 +3808,22 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
-  name: "m-sidebar",
+const _sfc_main$7 = defineComponent({
   components: { MIcon },
   props: {
     data: {
-      type: Object,
-      default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+      type: Object
     }
   },
   setup(props) {
-    const activeTabName = ref(props.data?.status);
-    watch(() => props.data?.status, (status) => {
-      activeTabName.value = status || "0";
-    });
     return {
-      activeTabName,
-      items: computed(() => props.data?.items.map((item) => {
-        if (typeof item !== "string") {
-          return item;
+      config: computed(() => {
+        if (typeof props.data !== "string") {
+          return props.data;
         }
-        switch (item) {
+        switch (props.data) {
           case "component-list":
             return {
               type: "component",
@@ -3810,9 +3841,9 @@ const _sfc_main$6 = defineComponent({
               slots: {}
             };
           default:
-            return {};
+            return void 0;
         }
-      }))
+      })
     };
   }
 });
@@ -3820,11 +3851,65 @@ const _hoisted_1$3 = {
   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 = resolveComponent("m-icon");
   const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  return _ctx.config ? (openBlock(), createBlock(_component_el_tab_pane, {
+    key: 0,
+    name: _ctx.config.text
+  }, {
+    label: withCtx(() => [
+      (openBlock(), createElementBlock("div", {
+        key: _ctx.config.text
+      }, [
+        _ctx.config.icon ? (openBlock(), createBlock(_component_m_icon, {
+          key: 0,
+          icon: _ctx.config.icon
+        }, null, 8, ["icon"])) : createCommentVNode("", true),
+        _ctx.config.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(_ctx.config.text), 1)) : createCommentVNode("", true)
+      ]))
+    ]),
+    default: withCtx(() => [
+      (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.component), mergeProps(_ctx.config.props || {}, toHandlers(_ctx.config?.listeners || {})), createSlots({ _: 2 }, [
+        _ctx.config.slots?.layerNodeContent ? {
+          name: "layer-node-content",
+          fn: withCtx(({ data, node }) => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots?.layerNodeContent), {
+              data,
+              node
+            }, null, 8, ["data", "node"]))
+          ])
+        } : void 0
+      ]), 1040))
+    ]),
+    _: 1
+  }, 8, ["name"])) : createCommentVNode("", true);
+}
+var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+
+const _sfc_main$6 = defineComponent({
+  components: { TabPane },
+  name: "m-sidebar",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+    }
+  },
+  setup(props) {
+    const activeTabName = ref(props.data?.status);
+    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 = resolveComponent("tab-pane");
   const _component_el_tabs = resolveComponent("el-tabs");
-  return _ctx.data.type === "tabs" ? (openBlock(), createBlock(_component_el_tabs, {
+  return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createBlock(_component_el_tabs, {
     key: 0,
     class: "m-editor-sidebar",
     modelValue: _ctx.activeTabName,
@@ -3833,35 +3918,11 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     "tab-position": "left"
   }, {
     default: withCtx(() => [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
-        return openBlock(), createBlock(_component_el_tab_pane, {
-          key: item.text,
-          name: item.text
-        }, {
-          label: withCtx(() => [
-            createElementVNode("span", null, [
-              item.icon ? (openBlock(), createBlock(_component_m_icon, {
-                key: 0,
-                icon: item.icon
-              }, null, 8, ["icon"])) : createCommentVNode("", true),
-              item.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(item.text), 1)) : createCommentVNode("", true)
-            ])
-          ]),
-          default: withCtx(() => [
-            (openBlock(), createBlock(resolveDynamicComponent(item.component), mergeProps(item.props || {}, toHandlers(item.listeners || {})), createSlots({ _: 2 }, [
-              item.slots?.layerNodeContent ? {
-                name: "layer-node-content",
-                fn: withCtx(({ data, node }) => [
-                  (openBlock(), createBlock(resolveDynamicComponent(item.slots.layerNodeContent), {
-                    data,
-                    node
-                  }, null, 8, ["data", "node"]))
-                ])
-              } : void 0
-            ]), 1040))
-          ]),
-          _: 2
-        }, 1032, ["name"]);
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item, index) => {
+        return openBlock(), createBlock(_component_tab_pane, {
+          key: index,
+          data: item
+        }, null, 8, ["data"]);
       }), 128))
     ]),
     _: 1