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

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('element-plus'), require('lodash-es'), require('@element-plus/icons-vue'), require('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'element-plus', 'lodash-es', '@element-plus/icons-vue', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.ElementPlus, global.lodashEs, global.iconsVue, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.KeyController));
-})(this, (function (exports, vue, serialize, elementPlus, lodashEs, iconsVue, monaco, StageCore, schema, utils, events, core, Gesto, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@element-plus/icons-vue'), require('monaco-editor'), require('@tmagic/stage'), require('gesto'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@element-plus/icons-vue', 'monaco-editor', '@tmagic/stage', 'gesto', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.iconsVue, global.monaco, global.StageCore, global.Gesto, global.schema, global.utils, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, serialize, lodashEs, design, iconsVue, monaco, StageCore, Gesto, schema, utils, events, core, KeyController) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
@@ -30,8 +30,11 @@
   const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
+  const __default__$r = vue.defineComponent({
+    name: "MEditorCode"
+  });
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
-    __name: "Code",
+    ...__default__$r,
     props: {
       model: null,
       name: null,
@@ -42,7 +45,7 @@
     setup(__props, { emit }) {
       const props = __props;
       const language = vue.computed(() => props.config.language || "javascript");
-      const height = vue.computed(() => `${document.body.clientHeight - 168}px`);
+      const height = vue.computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
       const save = (v) => {
         props.model[props.name] = v;
         emit("change", v);
@@ -53,14 +56,18 @@
           style: vue.normalizeStyle(`height: ${vue.unref(height)}`),
           "init-values": __props.model[__props.name],
           language: vue.unref(language),
+          options: __props.config.options,
           onSave: save
-        }, null, 8, ["style", "init-values", "language"]);
+        }, null, 8, ["style", "init-values", "language", "options"]);
       };
     }
   });
 
+  const __default__$q = vue.defineComponent({
+    name: "MEditorCodeLink"
+  });
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeLink",
+    ...__default__$q,
     props: {
       config: null,
       model: null,
@@ -70,17 +77,24 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
-      const formConfig = vue.computed(() => ({
-        ...props.config,
-        text: "",
-        type: "link",
-        form: [
-          {
-            name: props.name,
-            type: "vs-code"
-          }
-        ]
-      }));
+      const formConfig = vue.computed(() => {
+        const { codeOptions, ...config } = props.config;
+        return {
+          ...config,
+          text: "",
+          type: "link",
+          form: [
+            {
+              name: props.name,
+              type: "vs-code",
+              options: {
+                tabSize: 2,
+                ...codeOptions || {}
+              }
+            }
+          ]
+        };
+      });
       const modelValue = vue.reactive({
         form: {
           [props.name]: ""
@@ -171,8 +185,11 @@
   const _hoisted_3$3 = [
     _hoisted_2$6
   ];
+  const __default__$p = vue.defineComponent({
+    name: "MEditorCodeSelect"
+  });
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeSelect",
+    ...__default__$p,
     props: {
       config: null,
       model: null,
@@ -184,6 +201,7 @@
     setup(__props, { emit }) {
       const props = __props;
       const services = vue.inject("services");
+      const form = vue.inject("mForm");
       const selectConfig = vue.computed(() => {
         const defaultConfig = {
           multiple: true,
@@ -206,11 +224,12 @@
       });
       const fieldKey = vue.ref("");
       const multiple = vue.ref(true);
-      const combineIds = vue.ref([]);
-      let lastTagSnapshot = lodashEs.cloneDeep(props.model[props.name]) || [];
+      const lastTagSnapshot = vue.ref([]);
       vue.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;
           })
@@ -221,7 +240,6 @@
         let codeIds = value;
         if (typeof value === "string") {
           multiple.value = false;
-          lastTagSnapshot = [lastTagSnapshot];
           codeIds = value ? [value] : [];
         }
         await setCombineRelation(codeIds);
@@ -232,35 +250,28 @@
         let opFlag = CodeSelectOp.CHANGE;
         let diffValues = codeIds;
         if (multiple.value) {
-          opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-          diffValues = lodashEs.xor(codeIds, lastTagSnapshot);
+          lastTagSnapshot.value = form?.initValues[props.name] || [];
+          opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+          diffValues = lodashEs.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) {
-          elementPlus.ElMessage.error("\u8BF7\u5148\u7ED1\u5B9A\u4EE3\u7801\u5757");
+          design.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 = vue.resolveComponent("m-fields-select");
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-        const _component_el_card = vue.resolveComponent("el-card");
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-fields-code-select",
           key: fieldKey.value
         }, [
-          vue.createVNode(_component_el_card, { shadow: "never" }, {
+          vue.createVNode(vue.unref(design.TMagicCard), { shadow: "never" }, {
             header: vue.withCtx(() => [
               vue.createVNode(_component_m_fields_select, {
                 config: vue.unref(selectConfig),
@@ -273,7 +284,7 @@
             ]),
             default: vue.withCtx(() => [
               vue.createElementVNode("div", _hoisted_1$e, [
-                vue.createVNode(_component_el_tooltip, {
+                vue.createVNode(vue.unref(design.TMagicTooltip), {
                   class: "tool-item",
                   effect: "dark",
                   content: "\u67E5\u770B\u4EE3\u7801\u5757",
@@ -301,8 +312,11 @@
   });
 
   const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const __default__$o = vue.defineComponent({
+    name: "MEditorUISelect"
+  });
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    __name: "UISelect",
+    ...__default__$o,
     props: {
       config: null,
       model: null,
@@ -352,14 +366,12 @@
         }
       };
       return (_ctx, _cache) => {
-        const _component_el_button = vue.resolveComponent("el-button");
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
         return uiSelectMode.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "m-fields-ui-select",
           onClick: cancelHandler
         }, [
-          vue.createVNode(_component_el_button, {
+          vue.createVNode(vue.unref(design.TMagicButton), {
             type: "danger",
             icon: vue.unref(iconsVue.Delete),
             text: "",
@@ -376,12 +388,12 @@
           onClick: startSelect,
           style: { "display": "flex" }
         }, [
-          vue.unref(val) ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+          vue.unref(val) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
             key: 0,
             content: "\u6E05\u9664"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_component_el_button, {
+              vue.createVNode(vue.unref(design.TMagicButton), {
                 style: { "padding": "0" },
                 type: "danger",
                 icon: vue.unref(iconsVue.Close),
@@ -391,11 +403,11 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          vue.createVNode(_component_el_tooltip, {
+          vue.createVNode(vue.unref(design.TMagicTooltip), {
             content: vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_component_el_button, {
+              vue.createVNode(vue.unref(design.TMagicButton), {
                 text: "",
                 style: { "padding": "0", "margin": "0" }
               }, {
@@ -414,45 +426,39 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const toString = (v, language) => {
-    let value = "";
-    if (typeof v !== "string") {
-      value = serialize__default.default(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 = vue.defineComponent({
-    name: "magic-code-editor",
+  const __default__$n = vue.defineComponent({
+    name: "MEditorCodeEditor"
+  });
+  const _sfc_main$o = /* @__PURE__ */ vue.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__default.default(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 = vue.ref("");
@@ -501,7 +507,7 @@
             emit("save", getEditorValue());
           }
         });
-        if (props.type !== "diff") {
+        if (props.type !== "diff" && props.autoSave) {
           vsEditor?.onDidBlurEditorWidget(() => {
             emit("save", getEditorValue());
           });
@@ -527,10 +533,7 @@
       vue.onUnmounted(() => {
         resizeObserver.disconnect();
       });
-      return {
-        values,
-        loading,
-        codeEditor,
+      expose({
         getEditor() {
           return vsEditor || vsDiffEditor;
         },
@@ -539,33 +542,206 @@
           vsEditor?.focus();
           vsDiffEditor?.focus();
         }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.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 vue.openBlock(), vue.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 = vue.defineComponent({
+    name: "MEditorResizer"
+  });
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$m,
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const target = vue.ref();
+      let getso;
+      vue.onMounted(() => {
+        if (!target.value)
+          return;
+        getso = new Gesto__default.default(target.value, {
+          container: window,
+          pinchOutside: true
+        }).on("drag", (e) => {
+          if (!target.value)
+            return;
+          emit("change", e.deltaX);
+        });
+      });
+      vue.onUnmounted(() => {
+        getso?.unset();
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("span", {
+          ref_key: "target",
+          ref: target,
+          class: "m-editor-resizer"
+        }, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 512);
+      };
+    }
+  });
+
+  const __default__$l = vue.defineComponent({
+    name: "MEditorLayout"
+  });
+  const _sfc_main$m = /* @__PURE__ */ vue.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 = vue.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
+          });
+        }
+      });
+      vue.onMounted(() => {
+        if (el.value) {
+          resizerObserver.observe(el.value);
+        }
+      });
+      vue.onUnmounted(() => {
+        resizerObserver.disconnect();
+      });
+      const center = vue.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 vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "el",
+          ref: el,
+          class: "m-editor-layout"
+        }, [
+          typeof props.left !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
+              style: vue.normalizeStyle(`width: ${__props.left}px`)
+            }, [
+              vue.renderSlot(_ctx.$slots, "left")
+            ], 6),
+            vue.createVNode(_sfc_main$n, { onChange: changeLeft })
+          ], 64)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
+            style: vue.normalizeStyle(`width: ${center.value}px`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "center")
+          ], 6),
+          typeof props.right !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createVNode(_sfc_main$n, { onChange: changeRight }),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
+              style: vue.normalizeStyle(`width: ${__props.right}px`)
+            }, [
+              vue.renderSlot(_ctx.$slots, "right")
+            ], 6)
+          ], 64)) : vue.createCommentVNode("", true)
+        ], 512);
+      };
+    }
+  });
+
+  const _hoisted_1$c = ["src"];
+  const __default__$k = vue.defineComponent({
+    name: "MEditorIcon"
+  });
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$k,
+    props: {
+      icon: null
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 0,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.Edit))
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 1,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$c)
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+          key: 2,
+          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
+        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 3,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
+          ]),
+          _: 1
+        }));
+      };
+    }
+  });
+
   const log = (...args) => {
     if (process.env.NODE_ENV === "development") {
       console.log("magic editor: ", ...args);
@@ -754,16 +930,20 @@
     }
     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) {
@@ -1483,7 +1663,7 @@
           "copy",
           "paste",
           "doPaste",
-          "duAlignCenter",
+          "doAlignCenter",
           "alignCenter",
           "moveLayer",
           "moveToContainer",
@@ -1757,10 +1937,10 @@
         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: lodashEs.cloneDeep(newConfig),
         parentId: parent.id,
@@ -1842,7 +2022,11 @@
       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) {
@@ -1947,12 +2131,12 @@
       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) {
@@ -2382,6 +2566,8 @@
       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) => {
@@ -2402,6 +2588,11 @@
     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)
@@ -2418,182 +2609,49 @@
     return stage;
   };
 
-  const _sfc_main$n = vue.defineComponent({
-    components: { Plus: iconsVue.Plus },
-    setup() {
+  const _hoisted_1$b = { class: "m-editor-empty-panel" };
+  const _hoisted_2$5 = { class: "m-editor-empty-content" };
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  const __default__$j = vue.defineComponent({
+    name: "MEditorAddPageBox"
+  });
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$j,
+    setup(__props) {
       const services = vue.inject("services");
-      return {
-        clickHandler() {
-          const { editorService } = services || {};
-          if (!editorService)
-            return;
-          editorService.add({
-            type: schema.NodeType.PAGE,
-            name: generatePageNameByApp(vue.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__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_plus = vue.resolveComponent("plus");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-      vue.createElementVNode("div", _hoisted_2$5, [
-        vue.createElementVNode("div", {
-          class: "m-editor-empty-button",
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-        }, [
-          vue.createElementVNode("div", null, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_plus)
-              ]),
-              _: 1
-            })
-          ]),
-          _hoisted_3$2
-        ])
-      ])
-    ]);
-  }
-  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$5]]);
-
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
-    __name: "Resizer",
-    emits: ["change"],
-    setup(__props, { emit }) {
-      const target = vue.ref();
-      let getso;
-      vue.onMounted(() => {
-        if (!target.value)
-          return;
-        getso = new Gesto__default.default(target.value, {
-          container: window,
-          pinchOutside: true
-        }).on("drag", (e) => {
-          if (!target.value)
-            return;
-          emit("change", e.deltaX);
-        });
-      });
-      vue.onUnmounted(() => {
-        getso?.unset();
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("span", {
-          ref_key: "target",
-          ref: target,
-          class: "m-editor-resizer"
-        }, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 512);
-      };
-    }
-  });
-
-  const _sfc_main$l = /* @__PURE__ */ vue.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 = vue.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
-          });
-        }
-      });
-      vue.onMounted(() => {
-        if (el.value) {
-          resizerObserver.observe(el.value);
-        }
-      });
-      vue.onUnmounted(() => {
-        resizerObserver.disconnect();
-      });
-      const center = vue.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")
-          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
-        });
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "el",
-          ref: el,
-          class: "m-editor-layout"
-        }, [
-          typeof props.left !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
-              style: vue.normalizeStyle(`width: ${__props.left}px`)
-            }, [
-              vue.renderSlot(_ctx.$slots, "left")
-            ], 6),
-            vue.createVNode(_sfc_main$m, { onChange: changeLeft })
-          ], 64)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
-            style: vue.normalizeStyle(`width: ${center.value}px`)
-          }, [
-            vue.renderSlot(_ctx.$slots, "center")
-          ], 6),
-          typeof props.right !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$m, { onChange: changeRight }),
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
-              style: vue.normalizeStyle(`width: ${__props.right}px`)
-            }, [
-              vue.renderSlot(_ctx.$slots, "right")
-            ], 6)
-          ], 64)) : vue.createCommentVNode("", true)
-        ], 512);
+      const clickHandler = () => {
+        const { editorService } = services || {};
+        if (!editorService)
+          return;
+        editorService.add({
+          type: schema.NodeType.PAGE,
+          name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+        });
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          vue.createElementVNode("div", _hoisted_2$5, [
+            vue.createElementVNode("div", {
+              class: "m-editor-empty-button",
+              onClick: clickHandler
+            }, [
+              vue.createElementVNode("div", null, [
+                vue.createVNode(_sfc_main$l, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+              ]),
+              _hoisted_3$2
+            ])
+          ])
+        ]);
       };
     }
   });
 
   const _hoisted_1$a = { class: "m-editor" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
-    __name: "Framework",
+  const __default__$i = vue.defineComponent({
+    name: "MEditorFramework"
+  });
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$i,
     props: {
       codeOptions: { default: () => ({}) }
     },
@@ -2602,47 +2660,63 @@
       const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
       const { editorService, uiService } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
+      const nodes = vue.computed(() => editorService?.get("nodes") || []);
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.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 = vue.ref({
-        left: DEFAULT_LEFT_COLUMN_WIDTH,
+        left: leftColumnWidthCacheData,
         center: 0,
-        right: 0
+        right: RightColumnWidthCacheData
       });
-      uiService?.set("columnWidth", columnWidth.value);
-      vue.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;
+      vue.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);
+      );
+      vue.watch(
+        () => columnWidth.value.right,
+        (right) => {
+          if (typeof right === "undefined")
+            return;
+          globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
         }
+      );
+      vue.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 = vue.resolveComponent("magic-code-editor");
-        const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
           vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
@@ -2651,7 +2725,7 @@
             "init-values": vue.unref(root),
             options: __props.codeOptions,
             onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$m, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -2670,15 +2744,15 @@
             ]),
             center: vue.withCtx(() => [
               vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(AddPageBox)
+                vue.createVNode(_sfc_main$k)
               ])
             ]),
             _: 2
           }, [
-            vue.unref(pageLength) > 0 ? {
+            vue.unref(pageLength) > 0 && vue.unref(nodes).length === 1 ? {
               name: "right",
               fn: vue.withCtx(() => [
-                vue.createVNode(_component_el_scrollbar, null, {
+                vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
                   default: vue.withCtx(() => [
                     vue.renderSlot(_ctx.$slots, "props-panel")
                   ]),
@@ -2692,54 +2766,16 @@
     }
   });
 
-  const _hoisted_1$9 = ["src"];
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
-    __name: "Icon",
-    props: {
-      icon: null
-    },
-    setup(__props) {
-      return (_ctx, _cache) => {
-        const _component_el_icon = vue.resolveComponent("el-icon");
-        return !__props.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-          key: 0,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(iconsVue.Edit))
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-          key: 1,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$9)
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
-          key: 2,
-          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
-        }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
-          key: 3,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.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 = vue.defineComponent({
+    name: "MEditorToolButton"
+  });
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
-    __name: "ToolButton",
+    ...__default__$h,
     props: {
       data: { default: () => ({
         type: "text",
@@ -2804,13 +2840,6 @@
         }
       };
       return (_ctx, _cache) => {
-        const _component_el_divider = vue.resolveComponent("el-divider");
-        const _component_el_button = vue.resolveComponent("el-button");
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-        const _component_el_icon = vue.resolveComponent("el-icon");
-        const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
-        const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
-        const _component_el_dropdown = vue.resolveComponent("el-dropdown");
         return vue.unref(display) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: vue.normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
@@ -2818,24 +2847,24 @@
           onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
           onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(__props.data, $event))
         }, [
-          __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
+          __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            __props.data.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            __props.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
               placement: "bottom-start",
               content: __props.data.tooltip
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_component_el_button, {
+                vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   text: "",
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2845,14 +2874,14 @@
                 }, 8, ["disabled"])
               ]),
               _: 1
-            }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
+            }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
               key: 1,
               size: "small",
               text: "",
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2860,17 +2889,17 @@
               ]),
               _: 1
             }, 8, ["disabled"]))
-          ], 64)) : __props.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
+          ], 64)) : __props.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
             key: 3,
             trigger: "click",
             disabled: vue.unref(disabled),
             onCommand: dropdownHandler
           }, {
             dropdown: vue.withCtx(() => [
-              __props.data.items && __props.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_dropdown_menu, { key: 0 }, {
+              __props.data.items && __props.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
                 default: vue.withCtx(() => [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data.items, (subItem, index) => {
-                    return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
+                    return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownItem), {
                       key: index,
                       command: { data: __props.data, subItem }
                     }, {
@@ -2887,7 +2916,7 @@
             default: vue.withCtx(() => [
               vue.createElementVNode("span", _hoisted_2$4, [
                 vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
-                vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
+                vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
                     vue.createVNode(vue.unref(iconsVue.ArrowDown))
                   ]),
@@ -2902,8 +2931,11 @@
     }
   });
 
+  const __default__$g = vue.defineComponent({
+    name: "MEditorNavMenu"
+  });
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
-    __name: "NavMenu",
+    ...__default__$g,
     props: {
       data: { default: () => ({}) },
       height: { default: 35 }
@@ -3070,9 +3102,12 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "m-editor-props-panel" };
+  const _hoisted_1$8 = { class: "m-editor-props-panel" };
+  const __default__$f = vue.defineComponent({
+    name: "MEditorPropsPanel"
+  });
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-    __name: "PropsPanel",
+    ...__default__$f,
     emits: ["mounted"],
     setup(__props, { expose, emit }) {
       const internalInstance = vue.getCurrentInstance();
@@ -3108,19 +3143,14 @@
           services?.editorService.update(values2);
         } catch (e) {
           console.error(e);
-          elementPlus.ElMessage.closeAll();
-          elementPlus.ElMessage.error({
-            duration: 1e4,
-            showClose: true,
-            message: e.message,
-            dangerouslyUseHTMLString: true
-          });
+          design.tMagicMessage.closeAll();
+          design.tMagicMessage.error(e.message);
         }
       };
       expose({ submit });
       return (_ctx, _cache) => {
         const _component_m_form = vue.resolveComponent("m-form");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(_component_m_form, {
             ref_key: "configForm",
@@ -3137,7 +3167,7 @@
     }
   });
 
-  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" };
@@ -3154,8 +3184,11 @@
     class: "m-editor-content-bottom"
   };
   const _hoisted_11 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const __default__$e = vue.defineComponent({
+    name: "MEditorCodeBlockEditor"
+  });
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeBlockEditor",
+    ...__default__$e,
     setup(__props) {
       const services = vue.inject("services");
       const codeEditor = vue.ref();
@@ -3183,8 +3216,7 @@
         lodashEs.forIn(codeDsl, (value, key) => {
           state.codeList.push({
             id: key,
-            name: value.name,
-            content: value.content
+            name: value.name
           });
         });
         currentTitle.value = state.codeList[0]?.name || "";
@@ -3196,14 +3228,14 @@
           const codeContent = codeEditor.value.getEditor()?.getValue();
           codeConfig.value.content = eval(codeContent);
         } catch (e) {
-          elementPlus.ElMessage.error(e.stack);
+          design.tMagicMessage.error(e.stack);
           return false;
         }
         await services?.codeBlockService.setCodeDslById(id.value, {
           name: codeConfig.value.name,
           content: codeConfig.value.content
         });
-        elementPlus.ElMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
+        design.tMagicMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
         return true;
       };
       const saveAndClose = async () => {
@@ -3217,22 +3249,17 @@
         currentTitle.value = data.name;
       };
       return (_ctx, _cache) => {
-        const _component_el_tree = vue.resolveComponent("el-tree");
-        const _component_el_input = vue.resolveComponent("el-input");
-        const _component_el_button = vue.resolveComponent("el-button");
-        const _component_el_card = vue.resolveComponent("el-card");
-        const _component_el_dialog = vue.resolveComponent("el-dialog");
-        return vue.openBlock(), vue.createBlock(_component_el_dialog, {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDialog), {
           modelValue: vue.unref(isShowCodeBlockEditor),
           "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.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: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$l, {
+            vue.createVNode(_sfc_main$m, {
               left: left.value,
               "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
               "min-left": 45,
@@ -3246,11 +3273,11 @@
                   ])
                 }, [
                   vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
-                  vue.createVNode(_component_el_card, { shadow: "never" }, {
+                  vue.createVNode(vue.unref(design.TMagicCard), { shadow: "never" }, {
                     header: vue.withCtx(() => [
                       vue.createElementVNode("div", _hoisted_4$1, [
                         _hoisted_5$1,
-                        codeConfig.value ? (vue.openBlock(), vue.createBlock(_component_el_input, {
+                        codeConfig.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicInput), {
                           key: 0,
                           class: "code-name-input",
                           modelValue: codeConfig.value.name,
@@ -3261,7 +3288,7 @@
                     ]),
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", _hoisted_6$1, [
-                        codeConfig.value ? (vue.openBlock(), vue.createBlock(CodeEditor, {
+                        codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
                           key: 0,
                           ref_key: "codeEditor",
                           ref: codeEditor,
@@ -3276,7 +3303,7 @@
                           }
                         }, null, 8, ["init-values", "options"])) : vue.createCommentVNode("", true),
                         vue.unref(editable) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
-                          vue.createVNode(_component_el_button, {
+                          vue.createVNode(vue.unref(design.TMagicButton), {
                             type: "primary",
                             class: "button",
                             onClick: saveCode
@@ -3286,7 +3313,7 @@
                             ]),
                             _: 1
                           }),
-                          vue.createVNode(_component_el_button, {
+                          vue.createVNode(vue.unref(design.TMagicButton), {
                             type: "primary",
                             class: "button",
                             onClick: saveAndClose
@@ -3297,7 +3324,7 @@
                             _: 1
                           })
                         ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
-                          vue.createVNode(_component_el_button, {
+                          vue.createVNode(vue.unref(design.TMagicButton), {
                             type: "primary",
                             class: "button",
                             onClick: saveAndClose
@@ -3319,16 +3346,15 @@
               vue.unref(mode) === vue.unref(CodeEditorMode).LIST ? {
                 name: "left",
                 fn: vue.withCtx(() => [
-                  !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(_component_el_tree, {
+                  !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(({ data }) => [
                       vue.createElementVNode("div", {
@@ -3338,7 +3364,7 @@
                         vue.createElementVNode("div", _hoisted_2$3, [
                           vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1)
                         ])
-                      ], 8, _hoisted_1$6)
+                      ], 8, _hoisted_1$7)
                     ]),
                     _: 1
                   }, 8, ["data", "current-node-key"])) : vue.createCommentVNode("", true)
@@ -3352,7 +3378,7 @@
     }
   });
 
-  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__ */ vue.createTextVNode("\u65B0\u589E");
   const _hoisted_4 = ["id"];
@@ -3374,8 +3400,11 @@
       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 = vue.defineComponent({
+    name: "MEditorCodeBlockList"
+  });
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeBlockList",
+    ...__default__$d,
     props: {
       customError: null
     },
@@ -3411,7 +3440,7 @@
           state.codeList.push({
             id: codeId,
             name: value.name,
-            content: value.content,
+            codeBlockContent: value,
             showRelation: true
           });
         });
@@ -3443,7 +3472,7 @@
       const createCodeBlock = async () => {
         const { codeBlockService } = services || {};
         if (!codeBlockService) {
-          elementPlus.ElMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
+          design.tMagicMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
           return;
         }
         const codeConfig = {
@@ -3470,7 +3499,7 @@
           if (typeof props.customError === "function") {
             props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
           } else {
-            elementPlus.ElMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
+            design.tMagicMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
           }
         }
       };
@@ -3502,14 +3531,10 @@
         stage?.select(compId);
       };
       return (_ctx, _cache) => {
-        const _component_el_input = vue.resolveComponent("el-input");
-        const _component_el_button = vue.resolveComponent("el-button");
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-        const _component_el_tree = vue.resolveComponent("el-tree");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
           vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
             vue.createElementVNode("div", _hoisted_2$2, [
-              vue.createVNode(_component_el_input, {
+              vue.createVNode(vue.unref(design.TMagicInput), {
                 class: vue.normalizeClass([vue.unref(editable) ? "code-filter-input" : "code-filter-input-no-btn"]),
                 size: "small",
                 placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
@@ -3518,7 +3543,7 @@
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
                 onInput: filterTextChangeHandler
               }, null, 8, ["class", "modelValue"]),
-              vue.unref(editable) ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+              vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                 key: 0,
                 class: "create-code-button",
                 type: "primary",
@@ -3532,7 +3557,7 @@
               })) : vue.createCommentVNode("", true)
             ])
           ]),
-          !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(_component_el_tree, {
+          !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
             key: 0,
             ref_key: "tree",
             ref: tree,
@@ -3551,13 +3576,13 @@
                 vue.createElementVNode("div", _hoisted_5, [
                   vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1),
                   vue.createElementVNode("div", _hoisted_7, [
-                    vue.createVNode(_component_el_tooltip, {
+                    vue.createVNode(vue.unref(design.TMagicTooltip), {
                       effect: "dark",
                       content: vue.unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
                       placement: "bottom"
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$j, {
+                        vue.createVNode(_sfc_main$l, {
                           icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                           class: "edit-icon",
                           onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3565,14 +3590,14 @@
                       ]),
                       _: 2
                     }, 1032, ["content"]),
-                    state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                    state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                       key: 0,
                       effect: "dark",
                       content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
                       placement: "bottom"
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$j, {
+                        vue.createVNode(_sfc_main$l, {
                           icon: vue.unref(iconsVue.Link),
                           class: "edit-icon",
                           onClick: vue.withModifiers(($event) => toggleCombineRelation(data), ["stop"])
@@ -3580,14 +3605,14 @@
                       ]),
                       _: 2
                     }, 1024)) : vue.createCommentVNode("", true),
-                    vue.unref(editable) ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                    vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                       key: 1,
                       effect: "dark",
                       content: "\u5220\u9664",
                       placement: "bottom"
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$j, {
+                        vue.createVNode(_sfc_main$l, {
                           icon: vue.unref(iconsVue.Close),
                           class: "edit-icon",
                           onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3596,14 +3621,15 @@
                       _: 2
                     }, 1024)) : vue.createCommentVNode("", true),
                     vue.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
                   _hoisted_9,
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.bindComps[data.id], (comp, index) => {
-                    return vue.openBlock(), vue.createBlock(_component_el_button, {
+                    return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                       key: index,
                       class: "code-comp",
                       size: "small",
@@ -3632,10 +3658,12 @@
     }
   });
 
-  const _hoisted_1$4 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-  const _hoisted_2$1 = ["onClick", "onDragstart"];
+  const _hoisted_1$5 = ["onClick", "onDragstart"];
+  const __default__$c = vue.defineComponent({
+    name: "MEditorComponentListPanel"
+  });
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
-    __name: "ComponentListPanel",
+    ...__default__$c,
     setup(__props) {
       const searchText = vue.ref("");
       const services = vue.inject("services");
@@ -3648,7 +3676,7 @@
         }))
       );
       const collapseValue = vue.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;
@@ -3700,36 +3728,31 @@
         timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
       };
       return (_ctx, _cache) => {
-        const _component_el_input = vue.resolveComponent("el-input");
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-        const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
-        const _component_el_collapse = vue.resolveComponent("el-collapse");
-        const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-        return vue.openBlock(), vue.createBlock(_component_el_scrollbar, null, {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), null, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
-            vue.createVNode(_component_el_collapse, {
+            vue.createVNode(vue.unref(design.TMagicCollapse), {
               class: "ui-component-panel",
               "model-value": vue.unref(collapseValue)
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_component_el_input, {
-                  "prefix-icon": "el-icon-search",
+                vue.createVNode(vue.unref(design.TMagicInput), {
                   placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
                   class: "search-input",
                   size: "small",
                   clearable: "",
+                  "prefix-icon": vue.unref(iconsVue.Search),
                   modelValue: searchText.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
-                }, null, 8, ["modelValue"]),
+                }, null, 8, ["prefix-icon", "modelValue"]),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                    group.items && group.items.length ? (vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
+                    group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
                       key: index,
-                      name: index
+                      name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        _hoisted_1$4,
+                        vue.createVNode(_sfc_main$l, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -3744,10 +3767,10 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$j, {
+                              vue.createVNode(_sfc_main$l, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
-                              vue.createVNode(_component_el_tooltip, {
+                              vue.createVNode(vue.unref(design.TMagicTooltip), {
                                 effect: "dark",
                                 placement: "bottom",
                                 content: item.text
@@ -3758,7 +3781,7 @@
                                 _: 2
                               }, 1032, ["content"])
                             ])
-                          ], 40, _hoisted_2$1);
+                          ], 40, _hoisted_1$5);
                         }), 128))
                       ]),
                       _: 2
@@ -3775,8 +3798,11 @@
     }
   });
 
+  const __default__$b = vue.defineComponent({
+    name: "MEditorContentMenu"
+  });
   const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
-    __name: "ContentMenu",
+    ...__default__$b,
     props: {
       menuData: { default: () => [] },
       isSubMenu: { type: Boolean, default: false }
@@ -3855,7 +3881,7 @@
       });
       return (_ctx, _cache) => {
         const _component_content_menu = vue.resolveComponent("content-menu", true);
-        return __props.menuData.length && visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        return __props.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "magic-editor-content-menu",
           ref_key: "menu",
@@ -3883,21 +3909,29 @@
               onHide: hide
             }, null, 8, ["menu-data"])
           ]))
-        ], 4)) : vue.createCommentVNode("", true);
+        ], 4)), [
+          [vue.vShow, visible.value]
+        ]) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _sfc_main$b = vue.defineComponent({
-    components: { ContentMenu: _sfc_main$c },
-    setup() {
+  const __default__$a = vue.defineComponent({
+    name: "MEditorLayerMenu"
+  });
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$a,
+    props: {
+      layerContentMenu: null
+    },
+    setup(__props, { expose }) {
+      const props = __props;
       const services = vue.inject("services");
       const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
       const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
-      const layerContentMenu = vue.inject("layerContentMenu", []);
       const createMenuItems = (group) => group.items.map((component) => ({
         text: component.text,
         type: "button",
@@ -3941,533 +3975,575 @@
         }
         return [];
       });
-      return {
-        menu,
-        menuData: vue.computed(() => [
-          {
-            type: "button",
-            text: "\u65B0\u589E",
-            icon: vue.markRaw(iconsVue.Plus),
-            display: () => node.value?.items,
-            items: getSubMenuData.value
-          },
-          {
-            type: "button",
-            text: "\u590D\u5236",
-            icon: vue.markRaw(iconsVue.DocumentCopy),
-            display: () => !isRoot.value,
-            handler: () => {
-              node.value && services?.editorService.copy(node.value);
-            }
-          },
-          {
-            type: "button",
-            text: "\u5220\u9664",
-            icon: vue.markRaw(iconsVue.Delete),
-            display: () => !isRoot.value && !isPage.value,
-            handler: () => {
-              node.value && services?.editorService.remove(node.value);
-            }
-          },
-          ...layerContentMenu
-        ]),
-        show(e) {
-          menu.value?.show(e);
+      const menuData = vue.computed(() => [
+        {
+          type: "button",
+          text: "\u65B0\u589E",
+          icon: vue.markRaw(iconsVue.Plus),
+          display: () => node.value?.items,
+          items: getSubMenuData.value
+        },
+        {
+          type: "button",
+          text: "\u590D\u5236",
+          icon: vue.markRaw(iconsVue.DocumentCopy),
+          display: () => !isRoot.value,
+          handler: () => {
+            node.value && services?.editorService.copy(node.value);
+          }
+        },
+        {
+          type: "button",
+          text: "\u5220\u9664",
+          icon: vue.markRaw(iconsVue.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 vue.openBlock(), vue.createBlock(_sfc_main$c, {
+          "menu-data": vue.unref(menuData),
+          ref_key: "menu",
+          ref: menu,
+          style: { "overflow": "initial" }
+        }, null, 8, ["menu-data"]);
+      };
+    }
+  });
+
+  const _hoisted_1$4 = ["id", "onMouseenter"];
+  const __default__$9 = vue.defineComponent({
+    name: "MEditorLayerPanel"
+  });
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$9,
+    props: {
+      layerContentMenu: null
+    },
+    setup(__props) {
+      const throttleTime = 150;
+      const services = vue.inject("services");
+      const tree = vue.ref();
+      const menu = vue.ref();
+      const editorService = services?.editorService;
+      const page = vue.computed(() => editorService?.get("page"));
+      const values = vue.computed(() => page.value ? [page.value] : []);
+      const selectedNodes = vue.ref([]);
+      const selectedIds = vue.computed(() => selectedNodes.value.map((node) => node.id));
+      const isMultiSelectStatus = vue.ref(false);
+      const spliceNodeKey = vue.ref();
+      const filterText = vue.ref("");
+      const defaultExpandedKeys = vue.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 !== schema.NodeType.PAGE && data.type === schema.NodeType.PAGE)
+          return false;
+        if (ingType === schema.NodeType.PAGE && data.type !== schema.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 = vue.resolveComponent("content-menu");
-    return vue.openBlock(), vue.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 !== schema.NodeType.PAGE && data.type === schema.NodeType.PAGE)
-        return false;
-      if (ingType === schema.NodeType.PAGE && data.type !== schema.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 = vue.ref();
-    const page = vue.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();
-      });
-    };
-    vue.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 vue.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: vue.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();
+        });
+      };
+      vue.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: vue.computed(() => editorService?.get("highlightNode")),
-      clickNode: node,
-      expandedKeys: vue.computed(() => node.value ? [node.value.id] : []),
-      handleCollapse: (data) => {
-        expandedKeys.delete(data.id);
-      },
-      handleExpand: (data) => {
-        const parent = editorService?.getParentById(data.id);
+      };
+      vue.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: vue.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 = vue.defineComponent({
-    name: "magic-editor-layer-panel",
-    components: { LayerMenu },
-    setup() {
-      const services = vue.inject("services");
-      const tree = vue.ref();
-      const menu = vue.ref();
+        const treeNode = tree.value.getNode(parent.id);
+        treeNode?.updateChildren();
+        await expandNodes();
+        setTreeKeyStatus();
+      });
+      const keycon = vue.ref();
+      const addSelectModeListener = () => {
+        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+        const ctrl = isMac ? "meta" : "ctrl";
+        keycon.value = new KeyController__default.default();
+        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 = vue.ref(false);
-      const editorService = services?.editorService;
+      const highlightNode = vue.computed(() => editorService?.get("highlightNode"));
       const highlightHandler = lodashEs.throttle((data) => {
-        highlight(data, editorService);
+        highlight(data);
       }, throttleTime);
       const toggleClickFlag = () => {
         clicked.value = !clicked.value;
       };
-      const statusData = useStatus(tree, editorService);
-      const canHighlight = vue.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;
+      };
+      vue.watch(isMultiSelectStatus, () => {
+        if (isMultiSelectStatus.value && selectedNodes.value.length === 1 && selectedNodes.value[0].type === schema.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 === schema.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 = vue.resolveComponent("el-input");
-    const _component_el_tree = vue.resolveComponent("el-tree");
-    const _component_layer_menu = vue.resolveComponent("layer-menu");
-    const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-    return vue.openBlock(), vue.createBlock(_component_el_scrollbar, { class: "magic-editor-layer-panel" }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-        vue.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 ? (vue.openBlock(), vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), {
+          class: "magic-editor-layer-panel",
+          onMouseenter: addSelectModeListener,
+          onMouseleave: removeSelectModeListener
         }, {
-          default: vue.withCtx(({ node, data }) => [
-            vue.createElementVNode("div", {
-              id: data.id,
-              class: vue.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)
-            }, [
-              vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                node,
-                data
-              }, () => [
-                vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
-              ])
-            ], 42, _hoisted_1$3)
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "layer-panel-header"),
+            vue.createVNode(vue.unref(design.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": vue.unref(iconsVue.Search),
+              onChange: filterTextChangeHandler
+            }, null, 8, ["modelValue", "prefix-icon"]),
+            vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.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": vue.unref(defaultExpandedKeys),
+              load: loadItems,
+              data: vue.unref(values),
+              "expand-on-click-node": false,
+              "highlight-current": true,
+              props: {
+                children: "items"
+              },
+              "filter-node-method": filterNode,
+              "allow-drop": allowDrop,
+              "show-checkbox": isMultiSelectStatus.value || vue.unref(selectedIds).length > 1,
+              onNodeClick: clickHandler,
+              onNodeContextmenu: contextmenu,
+              onNodeDragEnd: handleDragEnd,
+              onNodeCollapse: handleCollapse,
+              onNodeExpand: handleExpand,
+              onCheck: multiClickHandler,
+              onMousedown: toggleClickFlag,
+              onMouseup: toggleClickFlag
+            }, {
+              default: vue.withCtx(({ node, data }) => [
+                vue.createElementVNode("div", {
+                  id: data.id,
+                  class: vue.normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
+                  onMouseenter: ($event) => vue.unref(highlightHandler)(data)
+                }, [
+                  vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                    node,
+                    data
+                  }, () => [
+                    vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
+                  ])
+                ], 42, _hoisted_1$4)
+              ]),
+              _: 3
+            }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : vue.createCommentVNode("", true),
+            (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+              vue.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"])) : vue.createCommentVNode("", true),
-        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-          vue.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 = vue.defineComponent({
-    components: { MIcon: _sfc_main$j },
-    props: {
-      data: {
-        type: [Object, String]
-      }
-    },
-    setup(props) {
-      return {
-        config: vue.computed(() => {
-          if (typeof props.data !== "string") {
-            return props.data;
-          }
-          switch (props.data) {
-            case "component-list":
-              return {
-                type: "component",
-                icon: iconsVue.Coin,
-                text: "\u7EC4\u4EF6",
-                component: _sfc_main$d,
-                slots: {}
-              };
-            case "layer":
-              return {
-                type: "component",
-                icon: iconsVue.Files,
-                text: "\u5DF2\u9009\u7EC4\u4EF6",
-                component: LayerPanel,
-                slots: {}
-              };
-            case "code-block":
-              return {
-                type: "component",
-                icon: iconsVue.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 = vue.resolveComponent("m-icon");
-    const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
-    return _ctx.config ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
-      key: 0,
-      name: _ctx.config.text
-    }, {
-      label: vue.withCtx(() => [
-        (vue.openBlock(), vue.createElementBlock("div", {
-          key: _ctx.config.text
-        }, [
-          _ctx.config.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
-            key: 0,
-            icon: _ctx.config.icon
-          }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
-        ]))
-      ]),
-      default: vue.withCtx(() => [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.mergeProps(_ctx.config.props || {}, vue.toHandlers(_ctx.config?.listeners || {})), vue.createSlots({ _: 2 }, [
-          _ctx.data === "component-list" || _ctx.config.slots?.componentListPanelHeader ? {
-            name: "component-list-panel-header",
-            fn: vue.withCtx(() => [
-              _ctx.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "component-list" || _ctx.config.slots?.componentListItem ? {
-            name: "component-list-item",
-            fn: vue.withCtx(({ component }) => [
-              _ctx.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
-                key: 0,
-                component
-              }) : _ctx.config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.componentListItem), {
-                key: 1,
-                component
-              }, null, 8, ["component"])) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
-            name: "layer-panel-header",
-            fn: vue.withCtx(() => [
-              _ctx.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : _ctx.config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "code-block" || _ctx.config.slots?.codeBlockPanelHeader ? {
-            name: "code-block-panel-header",
-            fn: vue.withCtx(() => [
-              _ctx.data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : _ctx.config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "code-block" || _ctx.config.slots?.codeBlockPanelTool ? {
-            name: "code-block-panel-tool",
-            fn: vue.withCtx(({ id }) => [
-              _ctx.data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                key: 0,
-                id
-              }) : _ctx.config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "code-block" || _ctx.config.slots?.codeBlockEditPanelHeader ? {
-            name: "code-block-edit-panel-header",
-            fn: vue.withCtx(({ id }) => [
-              _ctx.data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
-                key: 0,
-                id
-              }) : _ctx.config.slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "layer" || _ctx.config.slots?.layerNodeContent ? {
-            name: "layer-node-content",
-            fn: vue.withCtx(({ data: nodeData, node }) => [
-              _ctx.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                key: 0,
-                data: nodeData,
-                node
-              }) : _ctx.config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.layerNodeContent), {
-                key: 1,
-                data: nodeData,
-                node
-              }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
-            ])
-          } : void 0
-        ]), 1040))
-      ]),
-      _: 3
-    }, 8, ["name"])) : vue.createCommentVNode("", true);
-  }
-  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
-
-  const _sfc_main$8 = vue.defineComponent({
-    components: { TabPane },
-    name: "m-sidebar",
+  const __default__$8 = vue.defineComponent({
+    name: "MEditorSidebar"
+  });
+  const _sfc_main$9 = /* @__PURE__ */ vue.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 = design.getConfig("components").tabPane;
       const activeTabName = vue.ref(props.data?.status);
+      const getItemConfig = (data) => {
+        const map = {
+          "component-list": {
+            $key: "component-list",
+            type: "component",
+            icon: iconsVue.Coin,
+            text: "\u7EC4\u4EF6",
+            component: _sfc_main$d,
+            slots: {}
+          },
+          layer: {
+            $key: "layer",
+            type: "component",
+            icon: iconsVue.Files,
+            text: "\u5DF2\u9009\u7EC4\u4EF6",
+            props: {
+              layerContentMenu: props.layerContentMenu
+            },
+            component: _sfc_main$a,
+            slots: {}
+          },
+          "code-block": {
+            $key: "code-block",
+            type: "component",
+            icon: iconsVue.EditPen,
+            text: "\u4EE3\u7801\u7F16\u8F91",
+            component: _sfc_main$e,
+            slots: {}
+          }
+        };
+        return typeof data === "string" ? map[data] : data;
+      };
+      const sideBarItems = vue.computed(() => props.data.items.map((item) => getItemConfig(item)));
       vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(sideBarItems), (config, index) => {
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(uiComponent).component), {
+                key: index,
+                name: config.text
+              }, {
+                label: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createElementBlock("div", {
+                    key: config.text
+                  }, [
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+                      key: 0,
+                      icon: config.icon
+                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                  ]))
+                ]),
+                default: vue.withCtx(() => [
+                  config ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                    config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                      name: "component-list-panel-header",
+                      fn: vue.withCtx(() => [
+                        config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "component-list" || config.slots?.componentListItem ? {
+                      name: "component-list-item",
+                      fn: vue.withCtx(({ component }) => [
+                        config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
+                          key: 0,
+                          component
+                        }) : config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListItem), {
+                          key: 1,
+                          component
+                        }, null, 8, ["component"])) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                      name: "layer-panel-header",
+                      fn: vue.withCtx(() => [
+                        config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                      name: "code-block-panel-header",
+                      fn: vue.withCtx(() => [
+                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                      name: "code-block-panel-tool",
+                      fn: vue.withCtx(({ id, data }) => [
+                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                          key: 0,
+                          id,
+                          data
+                        }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
+                      name: "code-block-edit-panel-header",
+                      fn: vue.withCtx(({ id }) => [
+                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
+                          key: 0,
+                          id
+                        }) : config.slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "layer" || config.slots?.layerNodeContent ? {
+                      name: "layer-node-content",
+                      fn: vue.withCtx(({ data: nodeData, node }) => [
+                        config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                          key: 0,
+                          data: nodeData,
+                          node
+                        }) : config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeContent), {
+                          key: 1,
+                          data: nodeData,
+                          node
+                        }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0
+                  ]), 1040)) : vue.createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["name"]);
+            }), 128))
+          ]),
+          _: 3
+        }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_tab_pane = vue.resolveComponent("tab-pane");
-    const _component_el_tabs = vue.resolveComponent("el-tabs");
-    return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.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: vue.withCtx(() => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_component_tab_pane, {
-            key: index,
-            data: item
-          }, vue.createSlots({ _: 2 }, [
-            item === "layer" ? {
-              name: "layer-panel-header",
-              fn: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "layer-panel-header")
-              ])
-            } : void 0,
-            item === "layer" ? {
-              name: "layer-node-content",
-              fn: vue.withCtx(({ node, data }) => [
-                vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                  data,
-                  node
-                })
-              ])
-            } : void 0,
-            item === "component-list" ? {
-              name: "component-list-panel-header",
-              fn: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "component-list-panel-header")
-              ])
-            } : void 0,
-            item === "component-list" ? {
-              name: "component-list-item",
-              fn: vue.withCtx(({ component }) => [
-                vue.renderSlot(_ctx.$slots, "component-list-item", { component })
-              ])
-            } : void 0,
-            item === "code-block" ? {
-              name: "code-block-panel-header",
-              fn: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "code-block-panel-header")
-              ])
-            } : void 0,
-            item === "code-block" ? {
-              name: "code-block-panel-tool",
-              fn: vue.withCtx(({ id }) => [
-                vue.renderSlot(_ctx.$slots, "code-block-panel-tool", { id })
-              ])
-            } : void 0,
-            item === "code-block" ? {
-              name: "code-block-edit-panel-header",
-              fn: vue.withCtx(({ id }) => [
-                vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-              ])
-            } : void 0
-          ]), 1032, ["data"]);
-        }), 128))
-      ]),
-      _: 3
-    }, 8, ["modelValue"])) : vue.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 = vue.defineComponent({
+    name: "MEditorBreadcrumb"
+  });
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$7,
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const node = vue.computed(() => editorService?.get("node"));
+      const nodes = vue.computed(() => editorService?.get("nodes") || []);
+      const root = vue.computed(() => editorService?.get("root"));
+      const path = vue.computed(() => utils.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 vue.unref(nodes).length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(path), (item, index) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: item.id
+            }, [
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                text: "",
+                disabled: item.id === vue.unref(node)?.id,
+                onClick: ($event) => select(item)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(item.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["disabled", "onClick"]),
+              index < vue.unref(path).length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "/")) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
 
   const _hoisted_1$1 = {
     key: 1,
     style: { "width": "21px" }
   };
+  const __default__$6 = vue.defineComponent({
+    name: "MEditorPageBarScrollContainer"
+  });
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PageBarScrollContainer",
+    ...__default__$6,
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -4548,14 +4624,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$j, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$l, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$j, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$l, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -4571,7 +4647,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$j, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$l, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -4580,8 +4656,11 @@
 
   const _hoisted_1 = ["onClick"];
   const _hoisted_2 = { class: "m-editor-page-bar-title" };
+  const __default__$5 = vue.defineComponent({
+    name: "MEditorPageBar"
+  });
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PageBar",
+    ...__default__$5,
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -4601,9 +4680,6 @@
         editorService?.remove(node);
       };
       return (_ctx, _cache) => {
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-        const _component_el_icon = vue.resolveComponent("el-icon");
-        const _component_el_popover = vue.resolveComponent("el-popover");
         return vue.openBlock(), vue.createBlock(_sfc_main$7, null, {
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root) && vue.unref(root).items || [], (item) => {
@@ -4614,7 +4690,7 @@
               }, [
                 vue.createElementVNode("div", _hoisted_2, [
                   vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                    vue.createVNode(_component_el_tooltip, {
+                    vue.createVNode(vue.unref(design.TMagicTooltip), {
                       effect: "dark",
                       placement: "top-start",
                       content: item.name
@@ -4626,14 +4702,14 @@
                     }, 1032, ["content"])
                   ])
                 ]),
-                vue.createVNode(_component_el_popover, {
+                vue.createVNode(vue.unref(design.TMagicPopover), {
                   "popper-class": "page-bar-popover",
                   placement: "top",
                   width: 160,
                   trigger: "hover"
                 }, {
                   reference: vue.withCtx(() => [
-                    vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                    vue.createVNode(vue.unref(design.TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
                       default: vue.withCtx(() => [
                         vue.createVNode(vue.unref(iconsVue.CaretBottom))
                       ]),
@@ -4685,6 +4761,10 @@
     height = 0;
     translateXCorrectionValue = 0;
     translateYCorrectionValue = 0;
+    correctionScrollSize = {
+      width: 0,
+      height: 0
+    };
     resizeObserver = new ResizeObserver(() => {
       this.setSize();
       this.setScrollSize();
@@ -4694,6 +4774,12 @@
       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();
@@ -4756,9 +4842,9 @@
     }
     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) {
@@ -4791,8 +4877,11 @@
     };
   }
 
+  const __default__$4 = vue.defineComponent({
+    name: "MEditorScrollBar"
+  });
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
-    __name: "ScrollBar",
+    ...__default__$4,
     props: {
       size: null,
       scrollSize: null,
@@ -4877,14 +4966,21 @@
 
   const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
+  const __default__$3 = vue.defineComponent({
+    name: "MEditorScrollViewer"
+  });
   const _sfc_main$4 = /* @__PURE__ */ vue.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;
@@ -4907,7 +5003,8 @@
         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;
@@ -4975,10 +5072,14 @@
     }
   });
 
+  const __default__$2 = vue.defineComponent({
+    name: "MEditorViewerMenu"
+  });
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
-    __name: "ViewerMenu",
+    ...__default__$2,
     props: {
-      isMultiSelect: { type: Boolean, default: false }
+      isMultiSelect: { type: Boolean, default: false },
+      stageContentMenu: null
     },
     setup(__props, { expose }) {
       const props = __props;
@@ -4991,8 +5092,7 @@
       const nodes = vue.computed(() => editorService?.get("nodes"));
       const parent = vue.computed(() => editorService?.get("parent"));
       const stage = vue.computed(() => editorService?.get("stage"));
-      const stageContentMenu = vue.inject("stageContentMenu", []);
-      const menuData = vue.reactive([
+      const menuData = vue.computed(() => [
         {
           type: "button",
           text: "\u6C34\u5E73\u5C45\u4E2D",
@@ -5094,7 +5194,7 @@
             editorService?.get("stage").clearGuides();
           }
         },
-        ...stageContentMenu
+        ...props.stageContentMenu
       ]);
       vue.watch(
         parent,
@@ -5118,7 +5218,7 @@
       expose({ show });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$c, {
-          "menu-data": menuData,
+          "menu-data": vue.unref(menuData),
           ref_key: "menu",
           ref: menu
         }, null, 8, ["menu-data"]);
@@ -5126,8 +5226,14 @@
     }
   });
 
+  const __default__$1 = vue.defineComponent({
+    name: "MEditorStage"
+  });
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Stage",
+    ...__default__$1,
+    props: {
+      stageContentMenu: null
+    },
     setup(__props) {
       let stage = null;
       let runtime = null;
@@ -5246,7 +5352,11 @@
           height: vue.unref(stageRect)?.height,
           "wrap-width": vue.unref(stageContainerRect)?.width,
           "wrap-height": vue.unref(stageContainerRect)?.height,
-          zoom: vue.unref(zoom)
+          zoom: vue.unref(zoom),
+          "correction-scroll-size": {
+            width: 60,
+            height: 50
+          }
         }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", {
@@ -5262,8 +5372,9 @@
               vue.createVNode(_sfc_main$3, {
                 ref_key: "menu",
                 ref: menu,
-                "is-multi-select": vue.unref(isMultiSelect)
-              }, null, 8, ["is-multi-select"])
+                "is-multi-select": vue.unref(isMultiSelect),
+                "stage-content-menu": __props.stageContentMenu
+              }, null, 8, ["is-multi-select", "stage-content-menu"])
             ]))
           ]),
           _: 1
@@ -5272,8 +5383,14 @@
     }
   });
 
+  const __default__ = vue.defineComponent({
+    name: "MEditorWorkspace"
+  });
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Workspace",
+    ...__default__,
+    props: {
+      stageContentMenu: null
+    },
     setup(__props) {
       const services = vue.inject("services");
       const workspace = vue.ref();
@@ -5382,10 +5499,12 @@
           ref_key: "workspace",
           ref: workspace
         }, [
+          vue.createVNode(_sfc_main$8),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
             (vue.openBlock(), vue.createBlock(_sfc_main$2, {
-              key: vue.unref(page)?.id
-            }))
+              key: vue.unref(page)?.id,
+              "stage-content-menu": __props.stageContentMenu
+            }, null, 8, ["stage-content-menu"]))
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content"),
           vue.createVNode(_sfc_main$6, null, {
@@ -5426,10 +5545,10 @@
     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: {
@@ -5602,8 +5721,6 @@
         codeBlockService
       };
       vue.provide("services", services);
-      vue.provide("layerContentMenu", props.layerContentMenu);
-      vue.provide("stageContentMenu", props.stageContentMenu);
       vue.provide(
         "stageOptions",
         vue.reactive({
@@ -5623,21 +5740,32 @@
     }
   });
 
+  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 = vue.resolveComponent("nav-menu");
-    const _component_sidebar = vue.resolveComponent("sidebar");
-    const _component_workspace = vue.resolveComponent("workspace");
-    const _component_props_panel = vue.resolveComponent("props-panel");
-    const _component_framework = vue.resolveComponent("framework");
-    return vue.openBlock(), vue.createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
+    const _component_NavMenu = vue.resolveComponent("NavMenu");
+    const _component_Sidebar = vue.resolveComponent("Sidebar");
+    const _component_Workspace = vue.resolveComponent("Workspace");
+    const _component_PropsPanel = vue.resolveComponent("PropsPanel");
+    const _component_Framework = vue.resolveComponent("Framework");
+    return vue.openBlock(), vue.createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
       nav: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
+          vue.createVNode(_component_NavMenu, { data: _ctx.menu }, null, 8, ["data"])
         ])
       ]),
       sidebar: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_sidebar, { data: _ctx.sidebar }, {
+          vue.createVNode(_component_Sidebar, {
+            data: _ctx.sidebar,
+            "layer-content-menu": _ctx.layerContentMenu
+          }, {
             "layer-panel-header": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "layer-panel-header")
             ]),
@@ -5656,19 +5784,22 @@
             "code-block-panel-header": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header")
             ]),
-            "code-block-panel-tool": vue.withCtx(({ id }) => [
-              vue.renderSlot(_ctx.$slots, "code-block-panel-tool", { id })
+            "code-block-panel-tool": vue.withCtx(({ id, data }) => [
+              vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                id,
+                data
+              })
             ]),
             "code-block-edit-panel-header": vue.withCtx(({ id }) => [
               vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
             ]),
             _: 3
-          }, 8, ["data"])
+          }, 8, ["data", "layer-content-menu"])
         ])
       ]),
       workspace: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_workspace, null, {
+          vue.createVNode(_component_Workspace, { "stage-content-menu": _ctx.stageContentMenu }, {
             stage: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "stage")
             ]),
@@ -5682,12 +5813,12 @@
               vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
             ]),
             _: 3
-          })
+          }, 8, ["stage-content-menu"])
         ])
       ]),
       "props-panel": vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-          vue.createVNode(_component_props_panel, {
+          vue.createVNode(_component_PropsPanel, {
             onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
           }, {
             "props-panel-header": vue.withCtx(() => [
@@ -5717,7 +5848,7 @@
       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);
     }
   };
@@ -5726,19 +5857,21 @@
   exports.CodeBlockList = _sfc_main$e;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
   exports.CodeEditorMode = CodeEditorMode;
+  exports.CodeSelect = _sfc_main$q;
   exports.CodeSelectOp = CodeSelectOp;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$j;
+  exports.Icon = _sfc_main$l;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = LayerPanel;
+  exports.LayerPanel = _sfc_main$a;
   exports.Layout = Layout;
+  exports.LayoutContainer = _sfc_main$m;
   exports.PropsPanel = _sfc_main$g;
-  exports.TMagicCodeEditor = CodeEditor;
+  exports.TMagicCodeEditor = _sfc_main$o;
   exports.TMagicEditor = Editor;
   exports.ToolButton = _sfc_main$i;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;