@tmagic/editor 1.2.0-beta.1 → 1.2.0-beta.11

package/dist/tmagic-editor.mjs

@@ -1,19 +1,22 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, watchEffect, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, toRaw, renderSlot, Fragment, normalizeClass, createSlots, resolveDynamicComponent, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, isRef, Teleport, nextTick, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, watchEffect, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, toRaw, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, isRef, withDirectives, Teleport, vShow, nextTick, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { ElMessage } from 'element-plus';
-import { cloneDeep, map, xor, throttle, pick, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
-import { Delete, Close, Plus, Edit, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Files, DocumentCopy, EditPen, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { map, xor, throttle, pick, cloneDeep, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
+import { TMagicCard, TMagicTooltip, tMagicMessage, TMagicButton, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicDialog, TMagicInput, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
+import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, DocumentCopy, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import * as monaco from 'monaco-editor';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
+import Gesto from 'gesto';
 import { NodeType } from '@tmagic/schema';
 import { isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
-import Gesto from 'gesto';
 import KeyController from 'keycon';
 
+const __default__$r = defineComponent({
+  name: "MEditorCode"
+});
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  __name: "Code",
+  ...__default__$r,
   props: {
     model: null,
     name: null,
@@ -24,7 +27,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const language = computed(() => props.config.language || "javascript");
-    const height = computed(() => `${document.body.clientHeight - 168}px`);
+    const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
     const save = (v) => {
       props.model[props.name] = v;
       emit("change", v);
@@ -35,14 +38,18 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(`height: ${unref(height)}`),
         "init-values": __props.model[__props.name],
         language: unref(language),
+        options: __props.config.options,
         onSave: save
-      }, null, 8, ["style", "init-values", "language"]);
+      }, null, 8, ["style", "init-values", "language", "options"]);
     };
   }
 });
 
+const __default__$q = defineComponent({
+  name: "MEditorCodeLink"
+});
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  __name: "CodeLink",
+  ...__default__$q,
   props: {
     config: null,
     model: null,
@@ -52,17 +59,24 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const props = __props;
-    const formConfig = computed(() => ({
-      ...props.config,
-      text: "",
-      type: "link",
-      form: [
-        {
-          name: props.name,
-          type: "vs-code"
-        }
-      ]
-    }));
+    const formConfig = computed(() => {
+      const { codeOptions, ...config } = props.config;
+      return {
+        ...config,
+        text: "",
+        type: "link",
+        form: [
+          {
+            name: props.name,
+            type: "vs-code",
+            options: {
+              tabSize: 2,
+              ...codeOptions || {}
+            }
+          }
+        ]
+      };
+    });
     const modelValue = reactive({
       form: {
         [props.name]: ""
@@ -153,8 +167,11 @@ const _hoisted_2$6 = /* @__PURE__ */ createElementVNode("path", {
 const _hoisted_3$3 = [
   _hoisted_2$6
 ];
+const __default__$p = defineComponent({
+  name: "MEditorCodeSelect"
+});
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "CodeSelect",
+  ...__default__$p,
   props: {
     config: null,
     model: null,
@@ -166,6 +183,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
+    const form = inject("mForm");
     const selectConfig = computed(() => {
       const defaultConfig = {
         multiple: true,
@@ -188,11 +206,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     });
     const fieldKey = ref("");
     const multiple = ref(true);
-    const combineIds = ref([]);
-    let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
+    const lastTagSnapshot = ref([]);
     watchEffect(async () => {
+      if (!props.model[props.name])
+        return;
       const combineNames = await Promise.all(
-        combineIds.value.map(async (id) => {
+        props.model[props.name].map(async (id) => {
           const { name = "" } = await services?.codeBlockService.getCodeContentById(id) || {};
           return name;
         })
@@ -203,7 +222,6 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       let codeIds = value;
       if (typeof value === "string") {
         multiple.value = false;
-        lastTagSnapshot = [lastTagSnapshot];
         codeIds = value ? [value] : [];
       }
       await setCombineRelation(codeIds);
@@ -214,35 +232,28 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       let opFlag = CodeSelectOp.CHANGE;
       let diffValues = codeIds;
       if (multiple.value) {
-        opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-        diffValues = xor(codeIds, lastTagSnapshot);
+        lastTagSnapshot.value = form?.initValues[props.name] || [];
+        opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+        diffValues = xor(codeIds, lastTagSnapshot.value);
       }
       await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
-      lastTagSnapshot = codeIds;
-      await setCombineIds(codeIds);
-    };
-    const setCombineIds = async (codeIds) => {
-      combineIds.value = codeIds;
-      await services?.codeBlockService.setCombineIds(codeIds);
     };
     const viewHandler = async () => {
       if (props.model[props.name].length === 0) {
-        ElMessage.error("\u8BF7\u5148\u7ED1\u5B9A\u4EE3\u7801\u5757");
+        tMagicMessage.error("\u8BF7\u5148\u7ED1\u5B9A\u4EE3\u7801\u5757");
         return;
       }
-      await setCombineIds(props.model[props.name]);
+      await services?.codeBlockService.setCombineIds(props.model[props.name]);
       await services?.codeBlockService.setMode(CodeEditorMode.LIST);
-      services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
+      services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
     };
     return (_ctx, _cache) => {
       const _component_m_fields_select = resolveComponent("m-fields-select");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_card = resolveComponent("el-card");
       return openBlock(), createElementBlock("div", {
         class: "m-fields-code-select",
         key: fieldKey.value
       }, [
-        createVNode(_component_el_card, { shadow: "never" }, {
+        createVNode(unref(TMagicCard), { shadow: "never" }, {
           header: withCtx(() => [
             createVNode(_component_m_fields_select, {
               config: unref(selectConfig),
@@ -255,7 +266,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1$e, [
-              createVNode(_component_el_tooltip, {
+              createVNode(unref(TMagicTooltip), {
                 class: "tool-item",
                 effect: "dark",
                 content: "\u67E5\u770B\u4EE3\u7801\u5757",
@@ -283,8 +294,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$d = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const __default__$o = defineComponent({
+  name: "MEditorUISelect"
+});
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "UISelect",
+  ...__default__$o,
   props: {
     config: null,
     model: null,
@@ -334,14 +348,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "m-fields-ui-select",
         onClick: cancelHandler
       }, [
-        createVNode(_component_el_button, {
+        createVNode(unref(TMagicButton), {
           type: "danger",
           icon: unref(Delete),
           text: "",
@@ -358,12 +370,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         onClick: startSelect,
         style: { "display": "flex" }
       }, [
-        unref(val) ? (openBlock(), createBlock(_component_el_tooltip, {
+        unref(val) ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 0,
           content: "\u6E05\u9664"
         }, {
           default: withCtx(() => [
-            createVNode(_component_el_button, {
+            createVNode(unref(TMagicButton), {
               style: { "padding": "0" },
               type: "danger",
               icon: unref(Close),
@@ -373,11 +385,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        createVNode(_component_el_tooltip, {
+        createVNode(unref(TMagicTooltip), {
           content: unref(val) ? unref(toName) + "_" + unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
         }, {
           default: withCtx(() => [
-            createVNode(_component_el_button, {
+            createVNode(unref(TMagicButton), {
               text: "",
               style: { "padding": "0", "margin": "0" }
             }, {
@@ -396,45 +408,39 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const toString = (v, language) => {
-  let value = "";
-  if (typeof v !== "string") {
-    value = serialize(v, {
-      space: 2,
-      unsafe: true
-    }).replace(/"(\w+)":\s/g, "$1: ");
-  } else {
-    value = v;
-  }
-  if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) {
-    value = `(${value})`;
-  }
-  return value;
-};
-const _sfc_main$o = defineComponent({
-  name: "magic-code-editor",
+const __default__$n = defineComponent({
+  name: "MEditorCodeEditor"
+});
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   props: {
-    initValues: {
-      type: [String, Object]
-    },
-    modifiedValues: {
-      type: [String, Object]
-    },
-    type: {
-      type: String,
-      default: () => ""
-    },
-    language: {
-      type: String,
-      default: () => "javascript"
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    }
+    initValues: null,
+    modifiedValues: null,
+    type: { default: "" },
+    language: { default: "javascript" },
+    options: { default: () => ({
+      tabSize: 2
+    }) },
+    autoSave: { type: Boolean, default: true }
   },
   emits: ["initd", "save"],
-  setup(props, { emit }) {
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const toString = (v, language) => {
+      let value = "";
+      if (typeof v !== "string") {
+        value = serialize(v, {
+          space: 2,
+          unsafe: true
+        }).replace(/"(\w+)":\s/g, "$1: ");
+      } else {
+        value = v;
+      }
+      if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) {
+        value = `(${value})`;
+      }
+      return value;
+    };
     let vsEditor = null;
     let vsDiffEditor = null;
     const values = ref("");
@@ -483,7 +489,7 @@ const _sfc_main$o = defineComponent({
           emit("save", getEditorValue());
         }
       });
-      if (props.type !== "diff") {
+      if (props.type !== "diff" && props.autoSave) {
         vsEditor?.onDidBlurEditorWidget(() => {
           emit("save", getEditorValue());
         });
@@ -509,10 +515,7 @@ const _sfc_main$o = defineComponent({
     onUnmounted(() => {
       resizeObserver.disconnect();
     });
-    return {
-      values,
-      loading,
-      codeEditor,
+    expose({
       getEditor() {
         return vsEditor || vsDiffEditor;
       },
@@ -521,33 +524,206 @@ const _sfc_main$o = defineComponent({
         vsEditor?.focus();
         vsDiffEditor?.focus();
       }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "codeEditor",
+        ref: codeEditor,
+        class: "magic-code-editor"
+      }, null, 512);
     };
   }
 });
 
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-const _hoisted_1$c = {
-  ref: "codeEditor",
-  class: "magic-code-editor"
-};
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$c, null, 512);
-}
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$6]]);
-
 let $TMAGIC_EDITOR = {};
 const setConfig = (option) => {
   $TMAGIC_EDITOR = option;
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
+const __default__$m = defineComponent({
+  name: "MEditorResizer"
+});
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const target = ref();
+    let getso;
+    onMounted(() => {
+      if (!target.value)
+        return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true
+      }).on("drag", (e) => {
+        if (!target.value)
+          return;
+        emit("change", e.deltaX);
+      });
+    });
+    onUnmounted(() => {
+      getso?.unset();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "target",
+        ref: target,
+        class: "m-editor-resizer"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+
+const __default__$l = defineComponent({
+  name: "MEditorLayout"
+});
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  props: {
+    left: null,
+    right: null,
+    minLeft: { default: 1 },
+    minRight: { default: 1 },
+    leftClass: null,
+    rightClass: null,
+    centerClass: null
+  },
+  emits: ["update:left", "change", "update:right"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const el = ref();
+    let clientWidth = 0;
+    const resizerObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        clientWidth = contentRect.width;
+        center.value = clientWidth - (props.left || 0) - (props.right || 0);
+        emit("change", {
+          left: props.left,
+          center: center.value,
+          right: props.right
+        });
+      }
+    });
+    onMounted(() => {
+      if (el.value) {
+        resizerObserver.observe(el.value);
+      }
+    });
+    onUnmounted(() => {
+      resizerObserver.disconnect();
+    });
+    const center = ref(0);
+    const changeLeft = (deltaX) => {
+      if (typeof props.left === "undefined")
+        return;
+      let left = Math.max(props.left + deltaX, props.minLeft) || 0;
+      emit("update:left", left);
+      if (clientWidth - left - (props.right || 0) <= 0) {
+        left = props.left;
+      }
+      center.value = clientWidth - left - (props.right || 0);
+      emit("change", {
+        left,
+        center: center.value,
+        right: props.right
+      });
+    };
+    const changeRight = (deltaX) => {
+      if (typeof props.right === "undefined")
+        return;
+      let right = Math.max(props.right - deltaX, props.minRight) || 0;
+      emit("update:right", right);
+      if (clientWidth - (props.left || 0) - right <= 0) {
+        right = props.right;
+      }
+      center.value = clientWidth - (props.left || 0) - right;
+      emit("change", {
+        left: props.left,
+        center: center.value,
+        right
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        class: "m-editor-layout"
+      }, [
+        typeof props.left !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
+            style: normalizeStyle(`width: ${__props.left}px`)
+          }, [
+            renderSlot(_ctx.$slots, "left")
+          ], 6),
+          createVNode(_sfc_main$n, { onChange: changeLeft })
+        ], 64)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
+          style: normalizeStyle(`width: ${center.value}px`)
+        }, [
+          renderSlot(_ctx.$slots, "center")
+        ], 6),
+        typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createVNode(_sfc_main$n, { onChange: changeRight }),
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
+            style: normalizeStyle(`width: ${__props.right}px`)
+          }, [
+            renderSlot(_ctx.$slots, "right")
+          ], 6)
+        ], 64)) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+
+const _hoisted_1$c = ["src"];
+const __default__$k = defineComponent({
+  name: "MEditorIcon"
+});
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
+  props: {
+    icon: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 0,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Edit))
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 1,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$c)
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
+        key: 2,
+        class: normalizeClass(["magic-editor-icon", __props.icon])
+      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 3,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+
 const log = (...args) => {
   if (process.env.NODE_ENV === "development") {
     console.log("magic editor: ", ...args);
@@ -736,16 +912,20 @@ class CodeBlock extends BaseService {
   }
   async setCodeDslById(id, codeConfig) {
     let codeDsl = await this.getCodeDsl();
-    if (!codeDsl)
-      return;
-    const existContent = codeDsl[id] || {};
-    codeDsl = {
-      ...codeDsl,
-      [id]: {
-        ...existContent,
-        ...codeConfig
-      }
-    };
+    if (!codeDsl) {
+      codeDsl = {
+        [id]: codeConfig
+      };
+    } else {
+      const existContent = codeDsl[id] || {};
+      codeDsl = {
+        ...codeDsl,
+        [id]: {
+          ...existContent,
+          ...codeConfig
+        }
+      };
+    }
     await this.setCodeDsl(codeDsl);
   }
   async getCodeDslByIds(ids) {
@@ -1465,7 +1645,7 @@ class Editor$1 extends BaseService {
         "copy",
         "paste",
         "doPaste",
-        "duAlignCenter",
+        "doAlignCenter",
         "alignCenter",
         "moveLayer",
         "moveToContainer",
@@ -1739,10 +1919,10 @@ class Editor$1 extends BaseService {
       newConfig = setLayout(newConfig, newLayout);
     }
     parentNodeItems[index] = newConfig;
-    const nodes = this.get("nodes");
+    const nodes = this.get("nodes") || [];
     const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
-    this.set("nodes", nodes);
+    this.set("nodes", [...nodes]);
     this.get("stage")?.update({
       config: cloneDeep(newConfig),
       parentId: parent.id,
@@ -1824,7 +2004,11 @@ class Editor$1 extends BaseService {
     const stage = this.get("stage");
     const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
     const newNode = await this.update(newNodes);
-    await stage?.multiSelect(newNodes.map((node) => node.id));
+    if (newNodes.length > 1) {
+      await stage?.multiSelect(newNodes.map((node) => node.id));
+    } else {
+      await stage?.select(newNodes[0].id);
+    }
     return newNode;
   }
   async moveLayer(offset) {
@@ -1929,12 +2113,12 @@ class Editor$1 extends BaseService {
     const root = this.get("root");
     if (!root)
       return null;
-    return root.codeBlock || null;
+    return root.codeBlocks || null;
   }
   async setCodeDsl(codeDsl) {
     if (!this.state.root)
       return;
-    this.state.root.codeBlock = codeDsl;
+    this.state.root.codeBlocks = codeDsl;
   }
   addModifiedNodeId(id) {
     if (!this.isHistoryStateChange) {
@@ -2364,6 +2548,8 @@ const useStage = (stageOptions) => {
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
   ]);
   stage.on("select", (el) => {
+    if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
+      return;
     editorService.select(el.id);
   });
   stage.on("highlight", (el) => {
@@ -2384,6 +2570,11 @@ const useStage = (stageOptions) => {
   stage.on("sort", (ev) => {
     editorService.sort(ev.src, ev.dist);
   });
+  stage.on("select-parent", () => {
+    const parent = editorService.get("parent");
+    editorService.select(parent);
+    editorService.get("stage").select(parent.id);
+  });
   stage.on("changeGuides", (e) => {
     uiService.set("showGuides", true);
     if (!root.value || !page.value)
@@ -2400,182 +2591,49 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _sfc_main$n = defineComponent({
-  components: { Plus },
-  setup() {
-    const services = inject("services");
-    return {
-      clickHandler() {
-        const { editorService } = services || {};
-        if (!editorService)
-          return;
-        editorService.add({
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(toRaw(editorService.get("root")))
-        });
-      }
-    };
-  }
-});
-
 const _hoisted_1$b = { class: "m-editor-empty-panel" };
 const _hoisted_2$5 = { class: "m-editor-empty-content" };
 const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_plus = resolveComponent("plus");
-  const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$b, [
-    createElementVNode("div", _hoisted_2$5, [
-      createElementVNode("div", {
-        class: "m-editor-empty-button",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-      }, [
-        createElementVNode("div", null, [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(_component_plus)
-            ]),
-            _: 1
-          })
-        ]),
-        _hoisted_3$2
-      ])
-    ])
-  ]);
-}
-const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$5]]);
-
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "Resizer",
-  emits: ["change"],
-  setup(__props, { emit }) {
-    const target = ref();
-    let getso;
-    onMounted(() => {
-      if (!target.value)
-        return;
-      getso = new Gesto(target.value, {
-        container: window,
-        pinchOutside: true
-      }).on("drag", (e) => {
-        if (!target.value)
-          return;
-        emit("change", e.deltaX);
-      });
-    });
-    onUnmounted(() => {
-      getso?.unset();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        ref_key: "target",
-        ref: target,
-        class: "m-editor-resizer"
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 512);
-    };
-  }
+const __default__$j = defineComponent({
+  name: "MEditorAddPageBox"
 });
-
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  __name: "Layout",
-  props: {
-    left: null,
-    right: null,
-    minLeft: { default: 1 },
-    minRight: { default: 1 },
-    leftClass: null,
-    rightClass: null,
-    centerClass: null
-  },
-  emits: ["update:left", "change", "update:right"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const el = ref();
-    let clientWidth = 0;
-    const resizerObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        clientWidth = contentRect.width;
-        center.value = clientWidth - (props.left || 0) - (props.right || 0);
-        emit("change", {
-          left: props.left,
-          center: center.value,
-          right: props.right
-        });
-      }
-    });
-    onMounted(() => {
-      if (el.value) {
-        resizerObserver.observe(el.value);
-      }
-    });
-    onUnmounted(() => {
-      resizerObserver.disconnect();
-    });
-    const center = ref(0);
-    const changeLeft = (deltaX) => {
-      if (typeof props.left === "undefined")
-        return;
-      const left = Math.max(props.left + deltaX, props.minLeft) || 0;
-      emit("update:left", left);
-      center.value = clientWidth - left - (props.right || 0);
-      emit("change", {
-        left,
-        center: center.value,
-        right: props.right
-      });
-    };
-    const changeRight = (deltaX) => {
-      if (typeof props.right === "undefined")
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
+  setup(__props) {
+    const services = inject("services");
+    const clickHandler = () => {
+      const { editorService } = services || {};
+      if (!editorService)
         return;
-      const right = Math.max(props.right - deltaX, props.minRight) || 0;
-      emit("update:right", right);
-      center.value = clientWidth - (props.left || 0) - right;
-      emit("change", {
-        left: props.left,
-        center: center.value,
-        right
+      editorService.add({
+        type: NodeType.PAGE,
+        name: generatePageNameByApp(toRaw(editorService.get("root")))
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: "m-editor-layout"
-      }, [
-        typeof props.left !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
-            style: normalizeStyle(`width: ${__props.left}px`)
-          }, [
-            renderSlot(_ctx.$slots, "left")
-          ], 6),
-          createVNode(_sfc_main$m, { onChange: changeLeft })
-        ], 64)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
-          style: normalizeStyle(`width: ${center.value}px`)
-        }, [
-          renderSlot(_ctx.$slots, "center")
-        ], 6),
-        typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$m, { onChange: changeRight }),
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_2$5, [
           createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
-            style: normalizeStyle(`width: ${__props.right}px`)
+            class: "m-editor-empty-button",
+            onClick: clickHandler
           }, [
-            renderSlot(_ctx.$slots, "right")
-          ], 6)
-        ], 64)) : createCommentVNode("", true)
-      ], 512);
+            createElementVNode("div", null, [
+              createVNode(_sfc_main$l, { icon: unref(Plus) }, null, 8, ["icon"])
+            ]),
+            _hoisted_3$2
+          ])
+        ])
+      ]);
     };
   }
 });
 
 const _hoisted_1$a = { class: "m-editor" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  __name: "Framework",
+const __default__$i = defineComponent({
+  name: "MEditorFramework"
+});
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   props: {
     codeOptions: { default: () => ({}) }
   },
@@ -2584,47 +2642,63 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
+    const nodes = computed(() => editorService?.get("nodes") || []);
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
+    const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
+    const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
+    const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
+    const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
     const columnWidth = ref({
-      left: DEFAULT_LEFT_COLUMN_WIDTH,
+      left: leftColumnWidthCacheData,
       center: 0,
-      right: 0
+      right: RightColumnWidthCacheData
     });
-    uiService?.set("columnWidth", columnWidth.value);
-    watchEffect(() => {
-      if (pageLength.value <= 0) {
-        columnWidth.value.right = void 0;
-        columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
-      } else {
-        columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
-        columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
+    watch(
+      pageLength,
+      (length) => {
+        const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+        columnWidth.value.left = left;
+        if (length <= 0) {
+          columnWidth.value.right = void 0;
+          columnWidth.value.center = globalThis.document.body.clientWidth - left;
+        } else {
+          const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
+          columnWidth.value.right = right;
+          columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+        }
+        uiService?.set("columnWidth", columnWidth);
+      },
+      {
+        immediate: true
       }
-    });
-    const saveCode = (value) => {
-      try {
-        editorService?.set("root", eval(value));
-      } catch (e) {
-        console.error(e);
+    );
+    watch(
+      () => columnWidth.value.right,
+      (right) => {
+        if (typeof right === "undefined")
+          return;
+        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+      }
+    );
+    watch(
+      () => columnWidth.value.left,
+      (left) => {
+        globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
       }
+    );
+    const columnWidthChange = (columnWidth2) => {
+      uiService?.set("columnWidth", columnWidth2);
     };
-    const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
-    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-    if (columnWidthCacheData) {
+    const saveCode = (value) => {
       try {
-        const columnWidthCache = JSON.parse(columnWidthCacheData);
-        columnWidth.value = columnWidthCache;
+        editorService?.set("root", eval(value));
       } catch (e) {
         console.error(e);
       }
-    }
-    const columnWidthChange = (columnWidth2) => {
-      uiService?.set("columnWidth", columnWidth2);
-      globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth2));
     };
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      const _component_el_scrollbar = resolveComponent("el-scrollbar");
       return openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
         unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
@@ -2633,7 +2707,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$l, {
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$m, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -2652,15 +2726,15 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(AddPageBox)
+              createVNode(_sfc_main$k)
             ])
           ]),
           _: 2
         }, [
-          unref(pageLength) > 0 ? {
+          unref(pageLength) > 0 && unref(nodes).length === 1 ? {
             name: "right",
             fn: withCtx(() => [
-              createVNode(_component_el_scrollbar, null, {
+              createVNode(unref(TMagicScrollbar), null, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "props-panel")
                 ]),
@@ -2674,54 +2748,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = ["src"];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "Icon",
-  props: {
-    icon: null
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      const _component_el_icon = resolveComponent("el-icon");
-      return !__props.icon ? (openBlock(), createBlock(_component_el_icon, {
-        key: 0,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(Edit))
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, {
-        key: 1,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$9)
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
-        key: 2,
-        class: normalizeClass(["magic-editor-icon", __props.icon])
-      }, null, 2)) : (openBlock(), createBlock(_component_el_icon, {
-        key: 3,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
-        ]),
-        _: 1
-      }));
-    };
-  }
-});
-
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 1,
   class: "menu-item-text"
 };
 const _hoisted_2$4 = { class: "el-dropdown-link menubar-menu-button" };
+const __default__$h = defineComponent({
+  name: "MEditorToolButton"
+});
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "ToolButton",
+  ...__default__$h,
   props: {
     data: { default: () => ({
       type: "text",
@@ -2786,13 +2822,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_el_divider = resolveComponent("el-divider");
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_icon = resolveComponent("el-icon");
-      const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
-      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
-      const _component_el_dropdown = resolveComponent("el-dropdown");
       return unref(display) ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
@@ -2800,24 +2829,24 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
         onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(__props.data, $event))
       }, [
-        __props.data.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
+        __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$8, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          __props.data.tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$9, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
             placement: "bottom-start",
             content: __props.data.tooltip
           }, {
             default: withCtx(() => [
-              createVNode(_component_el_button, {
+              createVNode(unref(TMagicButton), {
                 size: "small",
                 text: "",
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$j, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$l, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2827,14 +2856,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               }, 8, ["disabled"])
             ]),
             _: 1
-          }, 8, ["content"])) : (openBlock(), createBlock(_component_el_button, {
+          }, 8, ["content"])) : (openBlock(), createBlock(unref(TMagicButton), {
             key: 1,
             size: "small",
             text: "",
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$j, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$l, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2842,17 +2871,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"]))
-        ], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
+        ], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
           key: 3,
           trigger: "click",
           disabled: unref(disabled),
           onCommand: dropdownHandler
         }, {
           dropdown: withCtx(() => [
-            __props.data.items && __props.data.items.length ? (openBlock(), createBlock(_component_el_dropdown_menu, { key: 0 }, {
+            __props.data.items && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
               default: withCtx(() => [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (subItem, index) => {
-                  return openBlock(), createBlock(_component_el_dropdown_item, {
+                  return openBlock(), createBlock(unref(TMagicDropdownItem), {
                     key: index,
                     command: { data: __props.data, subItem }
                   }, {
@@ -2869,7 +2898,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createElementVNode("span", _hoisted_2$4, [
               createTextVNode(toDisplayString(__props.data.text), 1),
-              createVNode(_component_el_icon, { class: "el-icon--right" }, {
+              createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
                   createVNode(unref(ArrowDown))
                 ]),
@@ -2884,8 +2913,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$g = defineComponent({
+  name: "MEditorNavMenu"
+});
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "NavMenu",
+  ...__default__$g,
   props: {
     data: { default: () => ({}) },
     height: { default: 35 }
@@ -3052,9 +3084,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { class: "m-editor-props-panel" };
+const _hoisted_1$8 = { class: "m-editor-props-panel" };
+const __default__$f = defineComponent({
+  name: "MEditorPropsPanel"
+});
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "PropsPanel",
+  ...__default__$f,
   emits: ["mounted"],
   setup(__props, { expose, emit }) {
     const internalInstance = getCurrentInstance();
@@ -3090,19 +3125,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         services?.editorService.update(values2);
       } catch (e) {
         console.error(e);
-        ElMessage.closeAll();
-        ElMessage.error({
-          duration: 1e4,
-          showClose: true,
-          message: e.message,
-          dangerouslyUseHTMLString: true
-        });
+        tMagicMessage.closeAll();
+        tMagicMessage.error(e.message);
       }
     };
     expose({ submit });
     return (_ctx, _cache) => {
       const _component_m_form = resolveComponent("m-form");
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(_component_m_form, {
           ref_key: "configForm",
@@ -3119,7 +3149,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["id"];
+const _hoisted_1$7 = ["id"];
 const _hoisted_2$3 = { class: "list-item" };
 const _hoisted_3$1 = { class: "code-name" };
 const _hoisted_4$1 = { class: "code-name-wrapper" };
@@ -3136,8 +3166,11 @@ const _hoisted_10 = {
   class: "m-editor-content-bottom"
 };
 const _hoisted_11 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const __default__$e = defineComponent({
+  name: "MEditorCodeBlockEditor"
+});
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "CodeBlockEditor",
+  ...__default__$e,
   setup(__props) {
     const services = inject("services");
     const codeEditor = ref();
@@ -3165,8 +3198,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       forIn(codeDsl, (value, key) => {
         state.codeList.push({
           id: key,
-          name: value.name,
-          content: value.content
+          name: value.name
         });
       });
       currentTitle.value = state.codeList[0]?.name || "";
@@ -3178,14 +3210,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         const codeContent = codeEditor.value.getEditor()?.getValue();
         codeConfig.value.content = eval(codeContent);
       } catch (e) {
-        ElMessage.error(e.stack);
+        tMagicMessage.error(e.stack);
         return false;
       }
       await services?.codeBlockService.setCodeDslById(id.value, {
         name: codeConfig.value.name,
         content: codeConfig.value.content
       });
-      ElMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
+      tMagicMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
       return true;
     };
     const saveAndClose = async () => {
@@ -3199,22 +3231,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       currentTitle.value = data.name;
     };
     return (_ctx, _cache) => {
-      const _component_el_tree = resolveComponent("el-tree");
-      const _component_el_input = resolveComponent("el-input");
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_card = resolveComponent("el-card");
-      const _component_el_dialog = resolveComponent("el-dialog");
-      return openBlock(), createBlock(_component_el_dialog, {
+      return openBlock(), createBlock(unref(TMagicDialog), {
         modelValue: unref(isShowCodeBlockEditor),
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(isShowCodeBlockEditor) ? isShowCodeBlockEditor.value = $event : null),
+        class: "code-editor-dialog",
         title: currentTitle.value,
         fullscreen: true,
         "before-close": saveAndClose,
-        "append-to-body": true,
-        "custom-class": "code-editor-dialog"
+        "append-to-body": true
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$l, {
+          createVNode(_sfc_main$m, {
             left: left.value,
             "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
             "min-left": 45,
@@ -3228,11 +3255,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 ])
               }, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
-                createVNode(_component_el_card, { shadow: "never" }, {
+                createVNode(unref(TMagicCard), { shadow: "never" }, {
                   header: withCtx(() => [
                     createElementVNode("div", _hoisted_4$1, [
                       _hoisted_5$1,
-                      codeConfig.value ? (openBlock(), createBlock(_component_el_input, {
+                      codeConfig.value ? (openBlock(), createBlock(unref(TMagicInput), {
                         key: 0,
                         class: "code-name-input",
                         modelValue: codeConfig.value.name,
@@ -3243,7 +3270,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ]),
                   default: withCtx(() => [
                     createElementVNode("div", _hoisted_6$1, [
-                      codeConfig.value ? (openBlock(), createBlock(CodeEditor, {
+                      codeConfig.value ? (openBlock(), createBlock(_sfc_main$o, {
                         key: 0,
                         ref_key: "codeEditor",
                         ref: codeEditor,
@@ -3258,7 +3285,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                         }
                       }, null, 8, ["init-values", "options"])) : createCommentVNode("", true),
                       unref(editable) ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-                        createVNode(_component_el_button, {
+                        createVNode(unref(TMagicButton), {
                           type: "primary",
                           class: "button",
                           onClick: saveCode
@@ -3268,7 +3295,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                           ]),
                           _: 1
                         }),
-                        createVNode(_component_el_button, {
+                        createVNode(unref(TMagicButton), {
                           type: "primary",
                           class: "button",
                           onClick: saveAndClose
@@ -3279,7 +3306,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                           _: 1
                         })
                       ])) : (openBlock(), createElementBlock("div", _hoisted_10, [
-                        createVNode(_component_el_button, {
+                        createVNode(unref(TMagicButton), {
                           type: "primary",
                           class: "button",
                           onClick: saveAndClose
@@ -3301,16 +3328,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             unref(mode) === unref(CodeEditorMode).LIST ? {
               name: "left",
               fn: withCtx(() => [
-                !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(_component_el_tree, {
+                !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(TMagicTree), {
                   key: 0,
-                  ref: "tree",
+                  class: "side-tree",
                   "node-key": "id",
                   "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
                   data: state.codeList,
                   "highlight-current": true,
-                  onNodeClick: selectHandler,
                   "current-node-key": state.codeList[0].id,
-                  class: "side-tree"
+                  onNodeClick: selectHandler
                 }, {
                   default: withCtx(({ data }) => [
                     createElementVNode("div", {
@@ -3320,7 +3346,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                       createElementVNode("div", _hoisted_2$3, [
                         createElementVNode("div", _hoisted_3$1, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1)
                       ])
-                    ], 8, _hoisted_1$6)
+                    ], 8, _hoisted_1$7)
                   ]),
                   _: 1
                 }, 8, ["data", "current-node-key"])) : createCommentVNode("", true)
@@ -3334,7 +3360,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = { class: "m-editor-code-block-list" };
+const _hoisted_1$6 = { class: "m-editor-code-block-list" };
 const _hoisted_2$2 = { class: "code-header-wrapper" };
 const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u65B0\u589E");
 const _hoisted_4 = ["id"];
@@ -3356,8 +3382,11 @@ const _hoisted_9 = /* @__PURE__ */ createElementVNode("svg", {
     d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
   })
 ], -1);
+const __default__$d = defineComponent({
+  name: "MEditorCodeBlockList"
+});
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "CodeBlockList",
+  ...__default__$d,
   props: {
     customError: null
   },
@@ -3393,7 +3422,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         state.codeList.push({
           id: codeId,
           name: value.name,
-          content: value.content,
+          codeBlockContent: value,
           showRelation: true
         });
       });
@@ -3425,7 +3454,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const createCodeBlock = async () => {
       const { codeBlockService } = services || {};
       if (!codeBlockService) {
-        ElMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
+        tMagicMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
         return;
       }
       const codeConfig = {
@@ -3452,7 +3481,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         if (typeof props.customError === "function") {
           props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
         } else {
-          ElMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
+          tMagicMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
         }
       }
     };
@@ -3484,14 +3513,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       stage?.select(compId);
     };
     return (_ctx, _cache) => {
-      const _component_el_input = resolveComponent("el-input");
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_tree = resolveComponent("el-tree");
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
           createElementVNode("div", _hoisted_2$2, [
-            createVNode(_component_el_input, {
+            createVNode(unref(TMagicInput), {
               class: normalizeClass([unref(editable) ? "code-filter-input" : "code-filter-input-no-btn"]),
               size: "small",
               placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
@@ -3500,7 +3525,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
               onInput: filterTextChangeHandler
             }, null, 8, ["class", "modelValue"]),
-            unref(editable) ? (openBlock(), createBlock(_component_el_button, {
+            unref(editable) ? (openBlock(), createBlock(unref(TMagicButton), {
               key: 0,
               class: "create-code-button",
               type: "primary",
@@ -3514,7 +3539,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ])
         ]),
-        !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(_component_el_tree, {
+        !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(TMagicTree), {
           key: 0,
           ref_key: "tree",
           ref: tree,
@@ -3533,13 +3558,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_5, [
                 createElementVNode("div", _hoisted_6, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
                 createElementVNode("div", _hoisted_7, [
-                  createVNode(_component_el_tooltip, {
+                  createVNode(unref(TMagicTooltip), {
                     effect: "dark",
                     content: unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$l, {
                         icon: unref(editable) ? unref(Edit) : unref(View),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3547,14 +3572,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 2
                   }, 1032, ["content"]),
-                  state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createBlock(_component_el_tooltip, {
+                  state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
                     key: 0,
                     effect: "dark",
                     content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$l, {
                         icon: unref(Link),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
@@ -3562,14 +3587,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 2
                   }, 1024)) : createCommentVNode("", true),
-                  unref(editable) ? (openBlock(), createBlock(_component_el_tooltip, {
+                  unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
                     key: 1,
                     effect: "dark",
                     content: "\u5220\u9664",
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$l, {
                         icon: unref(Close),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3578,14 +3603,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     _: 2
                   }, 1024)) : createCommentVNode("", true),
                   renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                    id: data.id
+                    id: data.id,
+                    data: data.codeBlockContent
                   })
                 ])
               ]),
               data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
                 _hoisted_9,
                 (openBlock(true), createElementBlock(Fragment, null, renderList(state.bindComps[data.id], (comp, index) => {
-                  return openBlock(), createBlock(_component_el_button, {
+                  return openBlock(), createBlock(unref(TMagicButton), {
                     key: index,
                     class: "code-comp",
                     size: "small",
@@ -3614,10 +3640,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-const _hoisted_2$1 = ["onClick", "onDragstart"];
+const _hoisted_1$5 = ["onClick", "onDragstart"];
+const __default__$c = defineComponent({
+  name: "MEditorComponentListPanel"
+});
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "ComponentListPanel",
+  ...__default__$c,
   setup(__props) {
     const searchText = ref("");
     const services = inject("services");
@@ -3630,7 +3658,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }))
     );
     const collapseValue = computed(
-      () => Array(list.value?.length).fill(1).map((x, i) => i)
+      () => Array(list.value?.length).fill(1).map((x, i) => `${i}`)
     );
     let timeout;
     let clientX;
@@ -3682,36 +3710,31 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
     };
     return (_ctx, _cache) => {
-      const _component_el_input = resolveComponent("el-input");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_collapse_item = resolveComponent("el-collapse-item");
-      const _component_el_collapse = resolveComponent("el-collapse");
-      const _component_el_scrollbar = resolveComponent("el-scrollbar");
-      return openBlock(), createBlock(_component_el_scrollbar, null, {
+      return openBlock(), createBlock(unref(TMagicScrollbar), null, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "component-list-panel-header"),
-          createVNode(_component_el_collapse, {
+          createVNode(unref(TMagicCollapse), {
             class: "ui-component-panel",
             "model-value": unref(collapseValue)
           }, {
             default: withCtx(() => [
-              createVNode(_component_el_input, {
-                "prefix-icon": "el-icon-search",
+              createVNode(unref(TMagicInput), {
                 placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
                 class: "search-input",
                 size: "small",
                 clearable: "",
+                "prefix-icon": unref(Search),
                 modelValue: searchText.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
-              }, null, 8, ["modelValue"]),
+              }, null, 8, ["prefix-icon", "modelValue"]),
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
-                  group.items && group.items.length ? (openBlock(), createBlock(_component_el_collapse_item, {
+                  group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
                     key: index,
-                    name: index
+                    name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      _hoisted_1$4,
+                      createVNode(_sfc_main$l, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -3726,10 +3749,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$j, {
+                            createVNode(_sfc_main$l, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
-                            createVNode(_component_el_tooltip, {
+                            createVNode(unref(TMagicTooltip), {
                               effect: "dark",
                               placement: "bottom",
                               content: item.text
@@ -3740,7 +3763,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               _: 2
                             }, 1032, ["content"])
                           ])
-                        ], 40, _hoisted_2$1);
+                        ], 40, _hoisted_1$5);
                       }), 128))
                     ]),
                     _: 2
@@ -3757,8 +3780,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$b = defineComponent({
+  name: "MEditorContentMenu"
+});
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "ContentMenu",
+  ...__default__$b,
   props: {
     menuData: { default: () => [] },
     isSubMenu: { type: Boolean, default: false }
@@ -3837,7 +3863,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
-      return __props.menuData.length && visible.value ? (openBlock(), createElementBlock("div", {
+      return __props.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: "magic-editor-content-menu",
         ref_key: "menu",
@@ -3865,21 +3891,29 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             onHide: hide
           }, null, 8, ["menu-data"])
         ]))
-      ], 4)) : createCommentVNode("", true);
+      ], 4)), [
+        [vShow, visible.value]
+      ]) : createCommentVNode("", true);
     };
   }
 });
 
-const _sfc_main$b = defineComponent({
-  components: { ContentMenu: _sfc_main$c },
-  setup() {
+const __default__$a = defineComponent({
+  name: "MEditorLayerMenu"
+});
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
+  props: {
+    layerContentMenu: null
+  },
+  setup(__props, { expose }) {
+    const props = __props;
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
     const isRoot = computed(() => node.value?.type === NodeType.ROOT);
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
-    const layerContentMenu = inject("layerContentMenu", []);
     const createMenuItems = (group) => group.items.map((component) => ({
       text: component.text,
       type: "button",
@@ -3923,533 +3957,575 @@ const _sfc_main$b = defineComponent({
       }
       return [];
     });
-    return {
-      menu,
-      menuData: computed(() => [
-        {
-          type: "button",
-          text: "\u65B0\u589E",
-          icon: markRaw(Plus),
-          display: () => node.value?.items,
-          items: getSubMenuData.value
-        },
-        {
-          type: "button",
-          text: "\u590D\u5236",
-          icon: markRaw(DocumentCopy),
-          display: () => !isRoot.value,
-          handler: () => {
-            node.value && services?.editorService.copy(node.value);
-          }
-        },
-        {
-          type: "button",
-          text: "\u5220\u9664",
-          icon: markRaw(Delete),
-          display: () => !isRoot.value && !isPage.value,
-          handler: () => {
-            node.value && services?.editorService.remove(node.value);
-          }
-        },
-        ...layerContentMenu
-      ]),
-      show(e) {
-        menu.value?.show(e);
+    const menuData = computed(() => [
+      {
+        type: "button",
+        text: "\u65B0\u589E",
+        icon: markRaw(Plus),
+        display: () => node.value?.items,
+        items: getSubMenuData.value
+      },
+      {
+        type: "button",
+        text: "\u590D\u5236",
+        icon: markRaw(DocumentCopy),
+        display: () => !isRoot.value,
+        handler: () => {
+          node.value && services?.editorService.copy(node.value);
+        }
+      },
+      {
+        type: "button",
+        text: "\u5220\u9664",
+        icon: markRaw(Delete),
+        display: () => !isRoot.value && !isPage.value,
+        handler: () => {
+          node.value && services?.editorService.remove(node.value);
+        }
+      },
+      ...props.layerContentMenu
+    ]);
+    const show = (e) => {
+      menu.value?.show(e);
+    };
+    expose({
+      show
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$c, {
+        "menu-data": unref(menuData),
+        ref_key: "menu",
+        ref: menu,
+        style: { "overflow": "initial" }
+      }, null, 8, ["menu-data"]);
+    };
+  }
+});
+
+const _hoisted_1$4 = ["id", "onMouseenter"];
+const __default__$9 = defineComponent({
+  name: "MEditorLayerPanel"
+});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
+  props: {
+    layerContentMenu: null
+  },
+  setup(__props) {
+    const throttleTime = 150;
+    const services = inject("services");
+    const tree = ref();
+    const menu = ref();
+    const editorService = services?.editorService;
+    const page = computed(() => editorService?.get("page"));
+    const values = computed(() => page.value ? [page.value] : []);
+    const selectedNodes = ref([]);
+    const selectedIds = computed(() => selectedNodes.value.map((node) => node.id));
+    const isMultiSelectStatus = ref(false);
+    const spliceNodeKey = ref();
+    const filterText = ref("");
+    const defaultExpandedKeys = computed(() => selectedIds.value.length > 0 ? selectedIds.value : []);
+    editorService?.on("remove", () => {
+      setTimeout(() => {
+        tree.value?.getNode(editorService.get("node").id)?.updateChildren();
+      }, 0);
+    });
+    const select = async (data) => {
+      if (!data.id) {
+        throw new Error("\u6CA1\u6709id");
+      }
+      await editorService?.select(data);
+      editorService?.get("stage")?.select(data.id);
+    };
+    const multiSelect = async (data) => {
+      await editorService?.multiSelect(data);
+      editorService?.get("stage")?.multiSelect(data);
+    };
+    const highlight = (data) => {
+      if (!data?.id) {
+        throw new Error("\u6CA1\u6709id");
+      }
+      editorService?.highlight(data);
+      editorService?.get("stage")?.highlight(data.id);
+    };
+    const expandedKeys = /* @__PURE__ */ new Map();
+    const allowDrop = (draggingNode, dropNode, type) => {
+      const { data } = dropNode || {};
+      const { data: ingData } = draggingNode;
+      const { type: ingType } = ingData;
+      if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE)
+        return false;
+      if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE)
+        return false;
+      if (!data || !data.type)
+        return false;
+      if (["prev", "next"].includes(type))
+        return true;
+      if (data.items || data.type === "container")
+        return true;
+      return false;
+    };
+    const handleDragEnd = async (e) => {
+      if (!tree.value)
+        return;
+      const { data: node } = e;
+      const parent = editorService?.getParentById(node.id, false);
+      const layout = await editorService?.getLayout(parent);
+      node.style.position = layout;
+      if (layout === Layout.RELATIVE) {
+        node.style.top = 0;
+        node.style.left = 0;
+      }
+      const data = tree.value.getData();
+      const [page2] = data;
+      editorService?.update(page2);
+    };
+    const loadItems = (node, resolve) => {
+      if (Array.isArray(node.data)) {
+        return resolve(node.data);
+      }
+      if (Array.isArray(node.data?.items)) {
+        return resolve(node.data?.items);
+      }
+      resolve([]);
+    };
+    const handleCollapse = (data) => {
+      expandedKeys.delete(data.id);
+    };
+    const handleExpand = (data) => {
+      const parent = editorService?.getParentById(data.id);
+      if (!parent?.id)
+        return;
+      expandedKeys.set(parent.id, parent.id);
+    };
+    const filterNode = (value, data) => {
+      if (!value) {
+        return true;
       }
+      let name = "";
+      if (data.name) {
+        name = data.name;
+      } else if (data.items) {
+        name = "container";
+      }
+      return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
     };
-  }
-});
-
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_content_menu = resolveComponent("content-menu");
-  return openBlock(), createBlock(_component_content_menu, {
-    "menu-data": _ctx.menuData,
-    ref: "menu",
-    style: { "overflow": "initial" }
-  }, null, 8, ["menu-data"]);
-}
-const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$4]]);
-
-const throttleTime = 150;
-const select = async (data, editorService) => {
-  if (!data.id) {
-    throw new Error("\u6CA1\u6709id");
-  }
-  await editorService?.select(data);
-  editorService?.get("stage")?.select(data.id);
-};
-const highlight = (data, editorService) => {
-  if (!data?.id) {
-    throw new Error("\u6CA1\u6709id");
-  }
-  editorService?.highlight(data);
-  editorService?.get("stage")?.highlight(data.id);
-};
-const useDrop = (tree, editorService) => ({
-  allowDrop: (draggingNode, dropNode, type) => {
-    const { data } = dropNode || {};
-    const { data: ingData } = draggingNode;
-    const { type: ingType } = ingData;
-    if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE)
-      return false;
-    if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE)
-      return false;
-    if (!data || !data.type)
-      return false;
-    if (["prev", "next"].includes(type))
-      return true;
-    if (data.items || data.type === "container")
-      return true;
-    return false;
-  },
-  async handleDragEnd(e) {
-    if (!tree.value)
-      return;
-    const { data: node } = e;
-    const parent = editorService?.getParentById(node.id, false);
-    const layout = await editorService?.getLayout(parent);
-    node.style.position = layout;
-    if (layout === Layout.RELATIVE) {
-      node.style.top = 0;
-      node.style.left = 0;
-    }
-    const { data } = tree.value;
-    const [page] = data;
-    editorService?.update(page);
-  }
-});
-const useStatus = (tree, editorService) => {
-  const node = ref();
-  const page = computed(() => editorService?.get("page"));
-  const expandedKeys = /* @__PURE__ */ new Map();
-  const expandNodes = () => {
-    expandedKeys.forEach((key) => {
+    const filterTextChangeHandler = (val) => {
+      tree.value?.filter(val);
+    };
+    const expandNodes = async () => {
       if (!tree.value)
         return;
-      tree.value.getNode(key)?.expand();
-    });
-  };
-  watchEffect(() => {
-    if (!tree.value)
-      return;
-    if (!editorService)
-      return;
-    node.value = editorService.get("node");
-    if (!node.value)
-      return;
-    tree.value.setCurrentKey(node.value.id, true);
-    const parent = editorService.get("parent");
-    if (!parent?.id)
-      return;
-    const treeNode = tree.value.getNode(parent.id);
-    treeNode?.updateChildren();
-    setTimeout(() => {
-      tree.value && Object.entries(tree.value.store.nodesMap).forEach(([id, node2]) => {
-        if (node2.expanded && node2.data.items) {
+      await nextTick();
+      tree.value && Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]) => {
+        if (node.expanded && node.data.items) {
           expandedKeys.set(id, id);
         }
       });
-      expandNodes();
-    });
-  });
-  return {
-    values: computed(() => page.value ? [page.value] : []),
-    loadItems: (node2, resolve) => {
-      if (Array.isArray(node2.data)) {
-        return resolve(node2.data);
+      expandedKeys.forEach((key) => {
+        if (!tree.value)
+          return;
+        tree.value.getNode(key)?.expand();
+      });
+    };
+    watch(
+      () => editorService?.get("nodes"),
+      (nodes) => {
+        selectedNodes.value = nodes ?? [];
       }
-      if (Array.isArray(node2.data?.items)) {
-        return resolve(node2.data?.items);
+    );
+    const setTreeKeyStatus = () => {
+      if (!tree.value)
+        return;
+      if (selectedIds.value.length === 0) {
+        tree.value.setCheckedKeys([]);
+        tree.value.setCurrentKey();
+      } else if (selectedIds.value.length === 1 && !isMultiSelectStatus.value) {
+        tree.value.setCurrentKey(selectedIds.value[0], true);
+        tree.value.setCheckedKeys([]);
+      } else {
+        tree.value.setCheckedKeys(selectedIds.value);
+        tree.value.setCurrentKey();
       }
-      resolve([]);
-    },
-    highlightNode: computed(() => editorService?.get("highlightNode")),
-    clickNode: node,
-    expandedKeys: computed(() => node.value ? [node.value.id] : []),
-    handleCollapse: (data) => {
-      expandedKeys.delete(data.id);
-    },
-    handleExpand: (data) => {
-      const parent = editorService?.getParentById(data.id);
+    };
+    watch([selectedIds, tree], async () => {
+      if (!tree.value || !editorService)
+        return;
+      const parent = editorService.get("parent");
       if (!parent?.id)
         return;
-      expandedKeys.set(parent.id, parent.id);
-    }
-  };
-};
-const useFilter = (tree) => ({
-  filterText: ref(""),
-  filterNode: (value, data) => {
-    if (!value) {
-      return true;
-    }
-    let name = "";
-    if (data.name) {
-      name = data.name;
-    } else if (data.items) {
-      name = "container";
-    }
-    return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
-  },
-  filterTextChangeHandler(val) {
-    tree.value?.filter(val);
-  }
-});
-const _sfc_main$a = defineComponent({
-  name: "magic-editor-layer-panel",
-  components: { LayerMenu },
-  setup() {
-    const services = inject("services");
-    const tree = ref();
-    const menu = ref();
+      const treeNode = tree.value.getNode(parent.id);
+      treeNode?.updateChildren();
+      await expandNodes();
+      setTreeKeyStatus();
+    });
+    const keycon = ref();
+    const addSelectModeListener = () => {
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+      const ctrl = isMac ? "meta" : "ctrl";
+      keycon.value = new KeyController();
+      keycon.value.keydown(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        isMultiSelectStatus.value = true;
+      });
+      keycon.value.on("blur", () => {
+        isMultiSelectStatus.value = false;
+      });
+      keycon.value.keyup(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        isMultiSelectStatus.value = false;
+      });
+    };
+    const removeSelectModeListener = () => {
+      keycon.value?.destroy();
+      if (selectedIds.value.length === 1)
+        isMultiSelectStatus.value = false;
+    };
     const clicked = ref(false);
-    const editorService = services?.editorService;
+    const highlightNode = computed(() => editorService?.get("highlightNode"));
     const highlightHandler = throttle((data) => {
-      highlight(data, editorService);
+      highlight(data);
     }, throttleTime);
     const toggleClickFlag = () => {
       clicked.value = !clicked.value;
     };
-    const statusData = useStatus(tree, editorService);
-    const canHighlight = computed(
-      () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value
-    );
-    editorService?.on("remove", () => {
-      setTimeout(() => {
-        tree.value?.getNode(editorService.get("node").id)?.updateChildren();
-      }, 0);
+    const canHighlight = (data) => {
+      if (clicked.value)
+        return false;
+      return data.id === highlightNode?.value?.id && !selectedIds.value.includes(data.id) && spliceNodeKey.value !== data.id;
+    };
+    watch(isMultiSelectStatus, () => {
+      if (isMultiSelectStatus.value && selectedNodes.value.length === 1 && selectedNodes.value[0].type === NodeType.PAGE) {
+        selectedNodes.value = [];
+      }
     });
-    return {
-      tree,
-      menu,
-      ...statusData,
-      ...useDrop(tree, editorService),
-      ...useFilter(tree),
-      highlightHandler,
-      toggleClickFlag,
-      canHighlight,
-      clickHandler(data) {
+    const multiClickHandler = (data) => {
+      if (!data?.id) {
+        throw new Error("\u6CA1\u6709id");
+      }
+      if (data.type === NodeType.PAGE) {
+        tree.value?.setCheckedKeys([]);
+        return;
+      }
+      const index = selectedNodes.value.findIndex((node) => node.id === data.id);
+      if (index !== -1) {
+        selectedNodes.value.splice(index, 1);
+        spliceNodeKey.value = data.id;
+      } else {
+        selectedNodes.value = [...selectedNodes.value, data];
+      }
+      tree.value?.setCheckedKeys(selectedIds.value);
+      multiSelect(selectedIds.value);
+    };
+    const clickHandler = (data) => {
+      if (!isMultiSelectStatus.value) {
         if (services?.uiService.get("uiSelectMode")) {
           document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
           return;
         }
         tree.value?.setCurrentKey(data.id);
-        select(data, editorService);
-      },
-      async contextmenu(event, data) {
-        event.preventDefault();
-        await select(data, editorService);
-        menu.value?.show(event);
+        select(data);
+      } else {
+        multiClickHandler(data);
       }
     };
-  }
-});
-
-const _hoisted_1$3 = ["id", "onMouseenter"];
-function _sfc_render$3(_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");
-  const _component_el_scrollbar = resolveComponent("el-scrollbar");
-  return openBlock(), createBlock(_component_el_scrollbar, { class: "magic-editor-layer-panel" }, {
-    default: withCtx(() => [
-      renderSlot(_ctx.$slots, "layer-panel-header"),
-      createVNode(_component_el_input, {
-        class: "filterInput",
-        size: "small",
-        placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
-        clearable: "",
-        modelValue: _ctx.filterText,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filterText = $event),
-        onChange: _ctx.filterTextChangeHandler
-      }, null, 8, ["modelValue", "onChange"]),
-      _ctx.values.length ? (openBlock(), createBlock(_component_el_tree, {
-        key: 0,
-        ref: "tree",
-        "node-key": "id",
-        "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
-        draggable: "",
-        "default-expanded-keys": _ctx.expandedKeys,
-        load: _ctx.loadItems,
-        data: _ctx.values,
-        "expand-on-click-node": false,
-        "highlight-current": true,
-        props: {
-          children: "items"
-        },
-        "filter-node-method": _ctx.filterNode,
-        "allow-drop": _ctx.allowDrop,
-        onNodeClick: _ctx.clickHandler,
-        onNodeContextmenu: _ctx.contextmenu,
-        onNodeDragEnd: _ctx.handleDragEnd,
-        onNodeCollapse: _ctx.handleCollapse,
-        onNodeExpand: _ctx.handleExpand
+    const contextmenu = async (event, data) => {
+      event.preventDefault();
+      await select(data);
+      menu.value?.show(event);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicScrollbar), {
+        class: "magic-editor-layer-panel",
+        onMouseenter: addSelectModeListener,
+        onMouseleave: removeSelectModeListener
       }, {
-        default: withCtx(({ node, data }) => [
-          createElementVNode("div", {
-            id: data.id,
-            class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": _ctx.canHighlight && data.id === _ctx.highlightNode?.id }]),
-            onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
-            onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
-            onMouseenter: ($event) => _ctx.highlightHandler(data)
-          }, [
-            renderSlot(_ctx.$slots, "layer-node-content", {
-              node,
-              data
-            }, () => [
-              createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
-            ])
-          ], 42, _hoisted_1$3)
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "layer-panel-header"),
+          createVNode(unref(TMagicInput), {
+            modelValue: filterText.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
+            class: "search-input",
+            size: "small",
+            placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+            clearable: "",
+            "prefix-icon": unref(Search),
+            onChange: filterTextChangeHandler
+          }, null, 8, ["modelValue", "prefix-icon"]),
+          unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
+            key: 0,
+            class: "magic-editor-layer-tree",
+            ref_key: "tree",
+            ref: tree,
+            "node-key": "id",
+            "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
+            draggable: "",
+            "default-expanded-keys": unref(defaultExpandedKeys),
+            load: loadItems,
+            data: unref(values),
+            "expand-on-click-node": false,
+            "highlight-current": true,
+            props: {
+              children: "items"
+            },
+            "filter-node-method": filterNode,
+            "allow-drop": allowDrop,
+            "show-checkbox": isMultiSelectStatus.value || unref(selectedIds).length > 1,
+            onNodeClick: clickHandler,
+            onNodeContextmenu: contextmenu,
+            onNodeDragEnd: handleDragEnd,
+            onNodeCollapse: handleCollapse,
+            onNodeExpand: handleExpand,
+            onCheck: multiClickHandler,
+            onMousedown: toggleClickFlag,
+            onMouseup: toggleClickFlag
+          }, {
+            default: withCtx(({ node, data }) => [
+              createElementVNode("div", {
+                id: data.id,
+                class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
+                onMouseenter: ($event) => unref(highlightHandler)(data)
+              }, [
+                renderSlot(_ctx.$slots, "layer-node-content", {
+                  node,
+                  data
+                }, () => [
+                  createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+                ])
+              ], 42, _hoisted_1$4)
+            ]),
+            _: 3
+          }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : createCommentVNode("", true),
+          (openBlock(), createBlock(Teleport, { to: "body" }, [
+            createVNode(_sfc_main$b, {
+              ref_key: "menu",
+              ref: menu,
+              "layer-content-menu": __props.layerContentMenu
+            }, null, 8, ["layer-content-menu"])
+          ]))
         ]),
         _: 3
-      }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd", "onNodeCollapse", "onNodeExpand"])) : createCommentVNode("", true),
-      (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(_component_layer_menu, { ref: "menu" }, null, 512)
-      ]))
-    ]),
-    _: 3
-  });
-}
-const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$3]]);
-
-const _sfc_main$9 = defineComponent({
-  components: { MIcon: _sfc_main$j },
-  props: {
-    data: {
-      type: [Object, String]
-    }
-  },
-  setup(props) {
-    return {
-      config: computed(() => {
-        if (typeof props.data !== "string") {
-          return props.data;
-        }
-        switch (props.data) {
-          case "component-list":
-            return {
-              type: "component",
-              icon: Coin,
-              text: "\u7EC4\u4EF6",
-              component: _sfc_main$d,
-              slots: {}
-            };
-          case "layer":
-            return {
-              type: "component",
-              icon: Files,
-              text: "\u5DF2\u9009\u7EC4\u4EF6",
-              component: LayerPanel,
-              slots: {}
-            };
-          case "code-block":
-            return {
-              type: "component",
-              icon: EditPen,
-              text: "\u4EE3\u7801\u7F16\u8F91",
-              component: _sfc_main$e,
-              slots: {}
-            };
-          default:
-            return void 0;
-        }
-      })
+      });
     };
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-function _sfc_render$2(_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$2, 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.data === "component-list" || _ctx.config.slots?.componentListPanelHeader ? {
-          name: "component-list-panel-header",
-          fn: withCtx(() => [
-            _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "component-list" || _ctx.config.slots?.componentListItem ? {
-          name: "component-list-item",
-          fn: withCtx(({ component }) => [
-            _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-              key: 0,
-              component
-            }) : _ctx.config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListItem), {
-              key: 1,
-              component
-            }, null, 8, ["component"])) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
-          name: "layer-panel-header",
-          fn: withCtx(() => [
-            _ctx.data === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : _ctx.config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "code-block" || _ctx.config.slots?.codeBlockPanelHeader ? {
-          name: "code-block-panel-header",
-          fn: withCtx(() => [
-            _ctx.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : _ctx.config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "code-block" || _ctx.config.slots?.codeBlockPanelTool ? {
-          name: "code-block-panel-tool",
-          fn: withCtx(({ id }) => [
-            _ctx.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
-              key: 0,
-              id
-            }) : _ctx.config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "code-block" || _ctx.config.slots?.codeBlockEditPanelHeader ? {
-          name: "code-block-edit-panel-header",
-          fn: withCtx(({ id }) => [
-            _ctx.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
-              key: 0,
-              id
-            }) : _ctx.config.slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "layer" || _ctx.config.slots?.layerNodeContent ? {
-          name: "layer-node-content",
-          fn: withCtx(({ data: nodeData, node }) => [
-            _ctx.data === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
-              key: 0,
-              data: nodeData,
-              node
-            }) : _ctx.config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.layerNodeContent), {
-              key: 1,
-              data: nodeData,
-              node
-            }, null, 8, ["data", "node"])) : createCommentVNode("", true)
-          ])
-        } : void 0
-      ]), 1040))
-    ]),
-    _: 3
-  }, 8, ["name"])) : createCommentVNode("", true);
-}
-const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
-
-const _sfc_main$8 = defineComponent({
-  components: { TabPane },
-  name: "m-sidebar",
+const __default__$8 = defineComponent({
+  name: "MEditorSidebar"
+});
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   props: {
-    data: {
-      type: Object,
-      default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer", "code-block"] })
-    }
+    data: { default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer", "code-block"] }) },
+    layerContentMenu: null
   },
-  setup(props) {
+  setup(__props, { expose }) {
+    const props = __props;
+    const uiComponent = getConfig$1("components").tabPane;
     const activeTabName = ref(props.data?.status);
+    const getItemConfig = (data) => {
+      const map = {
+        "component-list": {
+          $key: "component-list",
+          type: "component",
+          icon: Coin,
+          text: "\u7EC4\u4EF6",
+          component: _sfc_main$d,
+          slots: {}
+        },
+        layer: {
+          $key: "layer",
+          type: "component",
+          icon: Files,
+          text: "\u5DF2\u9009\u7EC4\u4EF6",
+          props: {
+            layerContentMenu: props.layerContentMenu
+          },
+          component: _sfc_main$a,
+          slots: {}
+        },
+        "code-block": {
+          $key: "code-block",
+          type: "component",
+          icon: EditPen,
+          text: "\u4EE3\u7801\u7F16\u8F91",
+          component: _sfc_main$e,
+          slots: {}
+        }
+      };
+      return typeof data === "string" ? map[data] : data;
+    };
+    const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
     watch(
-      () => props.data?.status,
+      () => props.data.status,
       (status) => {
         activeTabName.value = status || "0";
       }
     );
-    return {
+    expose({
       activeTabName
+    });
+    return (_ctx, _cache) => {
+      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicTabs), {
+        key: 0,
+        class: "m-editor-sidebar",
+        modelValue: activeTabName.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
+        type: "card",
+        "tab-position": "left"
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(uiComponent).component), {
+              key: index,
+              name: config.text
+            }, {
+              label: withCtx(() => [
+                (openBlock(), createElementBlock("div", {
+                  key: config.text
+                }, [
+                  config.icon ? (openBlock(), createBlock(_sfc_main$l, {
+                    key: 0,
+                    icon: config.icon
+                  }, null, 8, ["icon"])) : createCommentVNode("", true),
+                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+                ]))
+              ]),
+              default: withCtx(() => [
+                config ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+                  config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                    name: "component-list-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "component-list" || config.slots?.componentListItem ? {
+                    name: "component-list-item",
+                    fn: withCtx(({ component }) => [
+                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+                        key: 0,
+                        component
+                      }) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+                        key: 1,
+                        component
+                      }, null, 8, ["component"])) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                    name: "layer-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                    name: "code-block-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                    name: "code-block-panel-tool",
+                    fn: withCtx(({ id, data }) => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                        key: 0,
+                        id,
+                        data
+                      }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
+                    name: "code-block-edit-panel-header",
+                    fn: withCtx(({ id }) => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
+                        key: 0,
+                        id
+                      }) : config.slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerNodeContent ? {
+                    name: "layer-node-content",
+                    fn: withCtx(({ data: nodeData, node }) => [
+                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+                        key: 0,
+                        data: nodeData,
+                        node
+                      }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+                        key: 1,
+                        data: nodeData,
+                        node
+                      }, null, 8, ["data", "node"])) : createCommentVNode("", true)
+                    ])
+                  } : void 0
+                ]), 1040)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["name"]);
+          }), 128))
+        ]),
+        _: 3
+      }, 8, ["modelValue"])) : createCommentVNode("", true);
     };
   }
 });
 
-function _sfc_render$1(_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" && _ctx.data.items.length ? (openBlock(), createBlock(_component_el_tabs, {
-    key: 0,
-    class: "m-editor-sidebar",
-    modelValue: _ctx.activeTabName,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.activeTabName = $event),
-    type: "card",
-    "tab-position": "left"
-  }, {
-    default: withCtx(() => [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item, index) => {
-        return openBlock(), createBlock(_component_tab_pane, {
-          key: index,
-          data: item
-        }, createSlots({ _: 2 }, [
-          item === "layer" ? {
-            name: "layer-panel-header",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "layer-panel-header")
-            ])
-          } : void 0,
-          item === "layer" ? {
-            name: "layer-node-content",
-            fn: withCtx(({ node, data }) => [
-              renderSlot(_ctx.$slots, "layer-node-content", {
-                data,
-                node
-              })
-            ])
-          } : void 0,
-          item === "component-list" ? {
-            name: "component-list-panel-header",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "component-list-panel-header")
-            ])
-          } : void 0,
-          item === "component-list" ? {
-            name: "component-list-item",
-            fn: withCtx(({ component }) => [
-              renderSlot(_ctx.$slots, "component-list-item", { component })
-            ])
-          } : void 0,
-          item === "code-block" ? {
-            name: "code-block-panel-header",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "code-block-panel-header")
-            ])
-          } : void 0,
-          item === "code-block" ? {
-            name: "code-block-panel-tool",
-            fn: withCtx(({ id }) => [
-              renderSlot(_ctx.$slots, "code-block-panel-tool", { id })
-            ])
-          } : void 0,
-          item === "code-block" ? {
-            name: "code-block-edit-panel-header",
-            fn: withCtx(({ id }) => [
-              renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-            ])
-          } : void 0
-        ]), 1032, ["data"]);
-      }), 128))
-    ]),
-    _: 3
-  }, 8, ["modelValue"])) : createCommentVNode("", true);
-}
-const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
+const _hoisted_1$2 = {
+  key: 0,
+  class: "m-editor-breadcrumb"
+};
+const _hoisted_2$1 = { key: 0 };
+const __default__$7 = defineComponent({
+  name: "MEditorBreadcrumb"
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const node = computed(() => editorService?.get("node"));
+    const nodes = computed(() => editorService?.get("nodes") || []);
+    const root = computed(() => editorService?.get("root"));
+    const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
+    const select = async (node2) => {
+      await editorService?.select(node2);
+      editorService?.get("stage")?.select(node2.id);
+    };
+    return (_ctx, _cache) => {
+      return unref(nodes).length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(path), (item, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            createVNode(unref(TMagicButton), {
+              text: "",
+              disabled: item.id === unref(node)?.id,
+              onClick: ($event) => select(item)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(item.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["disabled", "onClick"]),
+            index < unref(path).length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
 
 const _hoisted_1$1 = {
   key: 1,
   style: { "width": "21px" }
 };
+const __default__$6 = defineComponent({
+  name: "MEditorPageBarScrollContainer"
+});
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "PageBarScrollContainer",
+  ...__default__$6,
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4530,14 +4606,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$j, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$l, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$j, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$l, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -4553,7 +4629,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$j, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$l, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -4562,8 +4638,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = { class: "m-editor-page-bar-title" };
+const __default__$5 = defineComponent({
+  name: "MEditorPageBar"
+});
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "PageBar",
+  ...__default__$5,
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4583,9 +4662,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       editorService?.remove(node);
     };
     return (_ctx, _cache) => {
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_icon = resolveComponent("el-icon");
-      const _component_el_popover = resolveComponent("el-popover");
       return openBlock(), createBlock(_sfc_main$7, null, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root) && unref(root).items || [], (item) => {
@@ -4596,7 +4672,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("div", _hoisted_2, [
                 renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                  createVNode(_component_el_tooltip, {
+                  createVNode(unref(TMagicTooltip), {
                     effect: "dark",
                     placement: "top-start",
                     content: item.name
@@ -4608,14 +4684,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   }, 1032, ["content"])
                 ])
               ]),
-              createVNode(_component_el_popover, {
+              createVNode(unref(TMagicPopover), {
                 "popper-class": "page-bar-popover",
                 placement: "top",
                 width: 160,
                 trigger: "hover"
               }, {
                 reference: withCtx(() => [
-                  createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                  createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
                     default: withCtx(() => [
                       createVNode(unref(CaretBottom))
                     ]),
@@ -4667,6 +4743,10 @@ class ScrollViewer extends EventEmitter {
   height = 0;
   translateXCorrectionValue = 0;
   translateYCorrectionValue = 0;
+  correctionScrollSize = {
+    width: 0,
+    height: 0
+  };
   resizeObserver = new ResizeObserver(() => {
     this.setSize();
     this.setScrollSize();
@@ -4676,6 +4756,12 @@ class ScrollViewer extends EventEmitter {
     this.container = options.container;
     this.target = options.target;
     this.zoom = options.zoom;
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize
+      };
+    }
     this.container.addEventListener("wheel", this.wheelHandler, false);
     this.setSize();
     this.setScrollSize();
@@ -4738,9 +4824,9 @@ class ScrollViewer extends EventEmitter {
   }
   setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-    this.scrollWidth = targetRect.width * this.zoom + 100;
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
     const targetMarginTop = Number(this.target.style.marginTop) || 0;
-    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
     let left;
     let top;
     if (this.scrollWidth < this.width) {
@@ -4773,8 +4859,11 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
+const __default__$4 = defineComponent({
+  name: "MEditorScrollBar"
+});
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "ScrollBar",
+  ...__default__$4,
   props: {
     size: null,
     scrollSize: null,
@@ -4859,14 +4948,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
+const __default__$3 = defineComponent({
+  name: "MEditorScrollViewer"
+});
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "ScrollViewer",
+  ...__default__$3,
   props: {
     width: { default: 0 },
     height: { default: 0 },
     wrapWidth: { default: 0 },
     wrapHeight: { default: 0 },
-    zoom: { default: 1 }
+    zoom: { default: 1 },
+    correctionScrollSize: { default: () => ({
+      width: 0,
+      height: 0
+    }) }
   },
   setup(__props, { expose }) {
     const props = __props;
@@ -4889,7 +4985,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       scrollViewer = new ScrollViewer({
         container: container.value,
         target: el.value,
-        zoom: props.zoom
+        zoom: props.zoom,
+        correctionScrollSize: props.correctionScrollSize
       });
       scrollViewer.on("scroll", (data) => {
         hOffset.value = data.scrollLeft;
@@ -4957,10 +5054,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$2 = defineComponent({
+  name: "MEditorViewerMenu"
+});
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "ViewerMenu",
+  ...__default__$2,
   props: {
-    isMultiSelect: { type: Boolean, default: false }
+    isMultiSelect: { type: Boolean, default: false },
+    stageContentMenu: null
   },
   setup(__props, { expose }) {
     const props = __props;
@@ -4973,8 +5074,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const nodes = computed(() => editorService?.get("nodes"));
     const parent = computed(() => editorService?.get("parent"));
     const stage = computed(() => editorService?.get("stage"));
-    const stageContentMenu = inject("stageContentMenu", []);
-    const menuData = reactive([
+    const menuData = computed(() => [
       {
         type: "button",
         text: "\u6C34\u5E73\u5C45\u4E2D",
@@ -5076,7 +5176,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           editorService?.get("stage").clearGuides();
         }
       },
-      ...stageContentMenu
+      ...props.stageContentMenu
     ]);
     watch(
       parent,
@@ -5100,7 +5200,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     expose({ show });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$c, {
-        "menu-data": menuData,
+        "menu-data": unref(menuData),
         ref_key: "menu",
         ref: menu
       }, null, 8, ["menu-data"]);
@@ -5108,8 +5208,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$1 = defineComponent({
+  name: "MEditorStage"
+});
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "Stage",
+  ...__default__$1,
+  props: {
+    stageContentMenu: null
+  },
   setup(__props) {
     let stage = null;
     let runtime = null;
@@ -5228,7 +5334,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         height: unref(stageRect)?.height,
         "wrap-width": unref(stageContainerRect)?.width,
         "wrap-height": unref(stageContainerRect)?.height,
-        zoom: unref(zoom)
+        zoom: unref(zoom),
+        "correction-scroll-size": {
+          width: 60,
+          height: 50
+        }
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
@@ -5244,8 +5354,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$3, {
               ref_key: "menu",
               ref: menu,
-              "is-multi-select": unref(isMultiSelect)
-            }, null, 8, ["is-multi-select"])
+              "is-multi-select": unref(isMultiSelect),
+              "stage-content-menu": __props.stageContentMenu
+            }, null, 8, ["is-multi-select", "stage-content-menu"])
           ]))
         ]),
         _: 1
@@ -5254,8 +5365,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__ = defineComponent({
+  name: "MEditorWorkspace"
+});
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "Workspace",
+  ...__default__,
+  props: {
+    stageContentMenu: null
+  },
   setup(__props) {
     const services = inject("services");
     const workspace = ref();
@@ -5364,10 +5481,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ref_key: "workspace",
         ref: workspace
       }, [
+        createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
           (openBlock(), createBlock(_sfc_main$2, {
-            key: unref(page)?.id
-          }))
+            key: unref(page)?.id,
+            "stage-content-menu": __props.stageContentMenu
+          }, null, 8, ["stage-content-menu"]))
         ]),
         renderSlot(_ctx.$slots, "workspace-content"),
         createVNode(_sfc_main$6, null, {
@@ -5408,10 +5527,10 @@ const _sfc_main = defineComponent({
   name: "m-editor",
   components: {
     NavMenu: _sfc_main$h,
-    Sidebar,
+    Sidebar: _sfc_main$9,
     Workspace: _sfc_main$1,
     PropsPanel: _sfc_main$g,
-    Framework: _sfc_main$k
+    Framework: _sfc_main$j
   },
   props: {
     modelValue: {
@@ -5584,8 +5703,6 @@ const _sfc_main = defineComponent({
       codeBlockService
     };
     provide("services", services);
-    provide("layerContentMenu", props.layerContentMenu);
-    provide("stageContentMenu", props.stageContentMenu);
     provide(
       "stageOptions",
       reactive({
@@ -5605,21 +5722,32 @@ const _sfc_main = defineComponent({
   }
 });
 
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nav_menu = resolveComponent("nav-menu");
-  const _component_sidebar = resolveComponent("sidebar");
-  const _component_workspace = resolveComponent("workspace");
-  const _component_props_panel = resolveComponent("props-panel");
-  const _component_framework = resolveComponent("framework");
-  return openBlock(), createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
+  const _component_NavMenu = resolveComponent("NavMenu");
+  const _component_Sidebar = resolveComponent("Sidebar");
+  const _component_Workspace = resolveComponent("Workspace");
+  const _component_PropsPanel = resolveComponent("PropsPanel");
+  const _component_Framework = resolveComponent("Framework");
+  return openBlock(), createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
+        createVNode(_component_NavMenu, { data: _ctx.menu }, null, 8, ["data"])
       ])
     ]),
     sidebar: withCtx(() => [
       renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_sidebar, { data: _ctx.sidebar }, {
+        createVNode(_component_Sidebar, {
+          data: _ctx.sidebar,
+          "layer-content-menu": _ctx.layerContentMenu
+        }, {
           "layer-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "layer-panel-header")
           ]),
@@ -5638,19 +5766,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "code-block-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header")
           ]),
-          "code-block-panel-tool": withCtx(({ id }) => [
-            renderSlot(_ctx.$slots, "code-block-panel-tool", { id })
+          "code-block-panel-tool": withCtx(({ id, data }) => [
+            renderSlot(_ctx.$slots, "code-block-panel-tool", {
+              id,
+              data
+            })
           ]),
           "code-block-edit-panel-header": withCtx(({ id }) => [
             renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
           ]),
           _: 3
-        }, 8, ["data"])
+        }, 8, ["data", "layer-content-menu"])
       ])
     ]),
     workspace: withCtx(() => [
       renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_workspace, null, {
+        createVNode(_component_Workspace, { "stage-content-menu": _ctx.stageContentMenu }, {
           stage: withCtx(() => [
             renderSlot(_ctx.$slots, "stage")
           ]),
@@ -5664,12 +5795,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "page-bar-popover", { page })
           ]),
           _: 3
-        })
+        }, 8, ["stage-content-menu"])
       ])
     ]),
     "props-panel": withCtx(() => [
       renderSlot(_ctx.$slots, "props-panel", {}, () => [
-        createVNode(_component_props_panel, {
+        createVNode(_component_PropsPanel, {
           onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
         }, {
           "props-panel-header": withCtx(() => [
@@ -5699,10 +5830,10 @@ const index = {
     app.component("m-fields-ui-select", _sfc_main$p);
     app.component("m-fields-code-link", _sfc_main$r);
     app.component("m-fields-vs-code", _sfc_main$s);
-    app.component(CodeEditor.name, CodeEditor);
+    app.component("magic-code-editor", _sfc_main$o);
     app.component("m-fields-code-select", _sfc_main$q);
   }
 };
 
-export { COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, CodeSelectOp, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$j as Icon, Keys, LayerOffset, LayerPanel, Layout, _sfc_main$g as PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$i as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$q as CodeSelect, CodeSelectOp, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$l as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$m as LayoutContainer, _sfc_main$g as PropsPanel, _sfc_main$o as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$i as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.mjs.map