@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.20

package/dist/tmagic-editor.mjs

@@ -1,19 +1,23 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, watchEffect, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, toRaw, renderSlot, Fragment, normalizeClass, createSlots, resolveDynamicComponent, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, isRef, Teleport, nextTick, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, createElementBlock, createVNode, ref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
-import { ElMessage } from 'element-plus';
-import { cloneDeep, map, xor, throttle, pick, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
-import { Delete, Close, Plus, Edit, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Files, DocumentCopy, EditPen, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { isEmpty, map, throttle, pick, omit, keys, cloneDeep, forIn, mergeWith, uniq, isObject } from 'lodash-es';
+import { createValues, MForm } from '@tmagic/form';
+import { HookType, NodeType } from '@tmagic/schema';
+import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { TMagicButton, TMagicTooltip, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import * as monaco from 'monaco-editor';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
-import { NodeType } from '@tmagic/schema';
-import { isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName } from '@tmagic/utils';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+import Gesto from 'gesto';
+import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
-import Gesto from 'gesto';
 import KeyController from 'keycon';
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  __name: "Code",
+const __default__$t = defineComponent({
+  name: "MEditorCode"
+});
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$t,
   props: {
     model: null,
     name: null,
@@ -42,8 +46,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  __name: "CodeLink",
+const __default__$s = defineComponent({
+  name: "MEditorCodeLink"
+});
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...__default__$s,
   props: {
     config: null,
     model: null,
@@ -112,57 +119,12 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
-  ColumnLayout2["LEFT"] = "left";
-  ColumnLayout2["CENTER"] = "center";
-  ColumnLayout2["RIGHT"] = "right";
-  return ColumnLayout2;
-})(ColumnLayout || {});
-var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
-  LayerOffset2["TOP"] = "top";
-  LayerOffset2["BOTTOM"] = "bottom";
-  return LayerOffset2;
-})(LayerOffset || {});
-var Layout = /* @__PURE__ */ ((Layout2) => {
-  Layout2["FLEX"] = "flex";
-  Layout2["FIXED"] = "fixed";
-  Layout2["RELATIVE"] = "relative";
-  Layout2["ABSOLUTE"] = "absolute";
-  return Layout2;
-})(Layout || {});
-var Keys = /* @__PURE__ */ ((Keys2) => {
-  Keys2["ESCAPE"] = "Space";
-  return Keys2;
-})(Keys || {});
-const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
-var CodeEditorMode = /* @__PURE__ */ ((CodeEditorMode2) => {
-  CodeEditorMode2["LIST"] = "list";
-  CodeEditorMode2["EDITOR"] = "editor";
-  return CodeEditorMode2;
-})(CodeEditorMode || {});
-var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
-  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
-  CodeDeleteErrorType2["BIND"] = "bind";
-  return CodeDeleteErrorType2;
-})(CodeDeleteErrorType || {});
-var CodeSelectOp = /* @__PURE__ */ ((CodeSelectOp2) => {
-  CodeSelectOp2["ADD"] = "add";
-  CodeSelectOp2["DELETE"] = "delete";
-  CodeSelectOp2["CHANGE"] = "change";
-  return CodeSelectOp2;
-})(CodeSelectOp || {});
-
-const _hoisted_1$d = { class: "tool-bar" };
-const _hoisted_2$6 = /* @__PURE__ */ createElementVNode("path", {
-  fill: "currentColor",
-  d: "m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
-}, null, -1);
-const _hoisted_3$3 = [
-  _hoisted_2$6
-];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "CodeSelect",
+const _hoisted_1$g = { class: "m-fields-code-select" };
+const __default__$r = defineComponent({
+  name: "MEditorCodeSelect"
+});
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$r,
   props: {
     config: null,
     model: null,
@@ -174,125 +136,107 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
-    const selectConfig = computed(() => {
+    const mForm = inject("mForm");
+    const codeDsl = computed(() => services?.codeBlockService.getCodeDslSync());
+    const tableConfig = computed(() => {
       const defaultConfig = {
-        multiple: true,
-        options: async () => {
-          const codeDsl = await services?.codeBlockService.getCodeDsl();
-          if (codeDsl) {
-            return map(codeDsl, (value, key) => ({
-              text: `${value.name}\uFF08${key}\uFF09`,
-              label: `${value.name}\uFF08${key}\uFF09`,
-              value: key
-            }));
+        dropSort: true,
+        enableFullscreen: false,
+        border: true,
+        items: [
+          {
+            type: "select",
+            label: "\u4EE3\u7801\u5757",
+            name: "codeId",
+            width: "200px",
+            options: () => {
+              if (codeDsl.value) {
+                return map(codeDsl.value, (value, key) => ({
+                  text: `${value.name}\uFF08${key}\uFF09`,
+                  label: `${value.name}\uFF08${key}\uFF09`,
+                  value: key
+                }));
+              }
+              return [];
+            },
+            onChange: (formState, codeId, { model }) => {
+              model.params = {};
+            }
+          },
+          {
+            name: "params",
+            label: "\u53C2\u6570",
+            defaultValue: {},
+            itemsFunction: (row) => {
+              const paramsConfig = getParamsConfig(row.codeId);
+              if (!row.params)
+                row.params = {};
+              if (isEmpty(row.params)) {
+                createValues(mForm, paramsConfig, {}, row.params);
+              }
+              return paramsConfig;
+            }
           }
-          return [];
-        }
+        ]
       };
       return {
         ...defaultConfig,
-        ...props.config.selectConfig
+        ...props.config.tableConfig
       };
     });
-    const fieldKey = ref("");
-    const multiple = ref(true);
-    const combineIds = ref([]);
-    let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
-    watchEffect(async () => {
-      const combineNames = await Promise.all(
-        combineIds.value.map(async (id) => {
-          const { name = "" } = await services?.codeBlockService.getCodeContentById(id) || {};
-          return name;
-        })
-      );
-      fieldKey.value = combineNames.join("-");
-    });
-    const changeHandler = async (value) => {
-      let codeIds = value;
-      if (typeof value === "string") {
-        multiple.value = false;
-        lastTagSnapshot = [lastTagSnapshot];
-        codeIds = value ? [value] : [];
-      }
-      await setCombineRelation(codeIds);
-      emit("change", value);
-    };
-    const setCombineRelation = async (codeIds) => {
-      const { id = "" } = services?.editorService.get("node") || {};
-      let opFlag = CodeSelectOp.CHANGE;
-      let diffValues = codeIds;
-      if (multiple.value) {
-        opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-        diffValues = xor(codeIds, lastTagSnapshot);
+    watch(
+      () => props.model[props.name],
+      (value) => {
+        if (isEmpty(value)) {
+          props.model[props.name] = {
+            hookType: HookType.CODE,
+            hookData: []
+          };
+        }
+      },
+      {
+        immediate: true
       }
-      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 changeHandler = async () => {
+      emit("change", props.model[props.name]);
     };
-    const viewHandler = async () => {
-      if (props.model[props.name].length === 0) {
-        ElMessage.error("\u8BF7\u5148\u7ED1\u5B9A\u4EE3\u7801\u5757");
-        return;
-      }
-      await setCombineIds(props.model[props.name]);
-      await services?.codeBlockService.setMode(CodeEditorMode.LIST);
-      services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
+    const getParamsConfig = (codeId) => {
+      if (!codeDsl.value)
+        return [];
+      const paramStatements = codeDsl.value[codeId]?.params;
+      if (isEmpty(paramStatements))
+        return [];
+      return paramStatements.map((paramState) => ({
+        name: paramState.name,
+        text: paramState.name,
+        labelWidth: "100px",
+        type: "text"
+      }));
     };
     return (_ctx, _cache) => {
-      const _component_m_fields_select = resolveComponent("m-fields-select");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_card = resolveComponent("el-card");
-      return openBlock(), createElementBlock("div", {
-        class: "m-fields-code-select",
-        key: fieldKey.value
-      }, [
-        createVNode(_component_el_card, { shadow: "never" }, {
-          header: withCtx(() => [
-            createVNode(_component_m_fields_select, {
-              config: unref(selectConfig),
-              model: __props.model,
-              prop: __props.prop,
-              name: __props.name,
-              size: __props.size,
-              onChange: changeHandler
-            }, null, 8, ["config", "model", "prop", "name", "size"])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$d, [
-              createVNode(_component_el_tooltip, {
-                class: "tool-item",
-                effect: "dark",
-                content: "\u67E5\u770B\u4EE3\u7801\u5757",
-                placement: "top"
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createElementBlock("svg", {
-                    onClick: viewHandler,
-                    preserveAspectRatio: "xMidYMid meet",
-                    viewBox: "0 0 24 24",
-                    width: "15px",
-                    height: "15px",
-                    "data-v-65a7fb6c": ""
-                  }, _hoisted_3$3))
-                ]),
-                _: 1
-              })
-            ])
-          ]),
-          _: 1
-        })
+      const _component_m_form_table = resolveComponent("m-form-table");
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        createVNode(_component_m_form_table, {
+          config: unref(tableConfig),
+          model: __props.model[__props.name],
+          name: "hookData",
+          enableToggleMode: false,
+          prop: __props.prop,
+          size: __props.size,
+          onChange: changeHandler
+        }, null, 8, ["config", "model", "prop", "size"])
       ]);
     };
   }
 });
 
-const _hoisted_1$c = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "UISelect",
+const _hoisted_1$f = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const __default__$q = defineComponent({
+  name: "MEditorUISelect"
+});
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...__default__$q,
   props: {
     config: null,
     model: null,
@@ -342,21 +286,19 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "m-fields-ui-select",
         onClick: cancelHandler
       }, [
-        createVNode(_component_el_button, {
+        createVNode(unref(TMagicButton), {
           type: "danger",
           icon: unref(Delete),
           text: "",
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$c
+            _hoisted_1$f
           ]),
           _: 1
         }, 8, ["icon"])
@@ -366,12 +308,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         onClick: startSelect,
         style: { "display": "flex" }
       }, [
-        unref(val) ? (openBlock(), createBlock(_component_el_tooltip, {
+        unref(val) ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 0,
           content: "\u6E05\u9664"
         }, {
           default: withCtx(() => [
-            createVNode(_component_el_button, {
+            createVNode(unref(TMagicButton), {
               style: { "padding": "0" },
               type: "danger",
               icon: unref(Close),
@@ -381,11 +323,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        createVNode(_component_el_tooltip, {
+        createVNode(unref(TMagicTooltip), {
           content: unref(val) ? unref(toName) + "_" + unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
         }, {
           default: withCtx(() => [
-            createVNode(_component_el_button, {
+            createVNode(unref(TMagicButton), {
               text: "",
               style: { "padding": "0", "margin": "0" }
             }, {
@@ -404,12 +346,15 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  __name: "CodeEditor",
+const __default__$p = defineComponent({
+  name: "MEditorCodeEditor"
+});
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$p,
   props: {
     initValues: null,
     modifiedValues: null,
-    type: { default: "" },
+    type: null,
     language: { default: "javascript" },
     options: { default: () => ({
       tabSize: 2
@@ -534,6 +479,255 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
+const __default__$o = defineComponent({
+  name: "MEditorResizer"
+});
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$o,
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const target = ref();
+    let getso;
+    onMounted(() => {
+      if (!target.value)
+        return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true
+      }).on("drag", (e) => {
+        if (!target.value)
+          return;
+        emit("change", e.deltaX);
+      });
+    });
+    onUnmounted(() => {
+      getso?.unset();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "target",
+        ref: target,
+        class: "m-editor-resizer"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+
+const __default__$n = defineComponent({
+  name: "MEditorLayout"
+});
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
+  props: {
+    left: null,
+    right: null,
+    minLeft: { default: 46 },
+    minRight: { default: 1 },
+    minCenter: { default: 1 },
+    leftClass: null,
+    rightClass: null,
+    centerClass: null
+  },
+  emits: ["update:left", "change", "update:right"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const el = ref();
+    const hasLeft = computed(() => typeof props.left !== "undefined");
+    const hasRight = computed(() => typeof props.left !== "undefined");
+    const getCenterWidth = (clientWidth2, left, right) => {
+      let center2 = clientWidth2 - left - right;
+      if (center2 < props.minCenter) {
+        center2 = props.minCenter;
+        if (left < right) {
+          right = clientWidth2 - left - props.minCenter;
+        } else {
+          left = clientWidth2 - right - props.minCenter;
+        }
+      }
+      return {
+        center: center2,
+        left,
+        right
+      };
+    };
+    let clientWidth = 0;
+    const resizerObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        clientWidth = contentRect.width;
+        let left = props.left || 0;
+        let right = props.right || 0;
+        if (left > clientWidth) {
+          left = clientWidth / 3;
+        }
+        if (right > clientWidth) {
+          right = clientWidth / 3;
+        }
+        const columnWidth = getCenterWidth(clientWidth, left, right);
+        center.value = columnWidth.center;
+        emit("change", {
+          left: columnWidth.left,
+          center: center.value,
+          right: columnWidth.right
+        });
+      }
+    });
+    onMounted(() => {
+      if (el.value) {
+        resizerObserver.observe(el.value);
+      }
+    });
+    onUnmounted(() => {
+      resizerObserver.disconnect();
+    });
+    const center = ref(0);
+    const changeLeft = (deltaX) => {
+      if (typeof props.left === "undefined")
+        return;
+      let left = Math.max(props.left + deltaX, props.minLeft) || 0;
+      emit("update:left", left);
+      if (clientWidth - left - (props.right || 0) <= 0) {
+        left = props.left;
+      }
+      const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+      center.value = columnWidth.center;
+      emit("change", {
+        left: columnWidth.left,
+        center: center.value,
+        right: columnWidth.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;
+      }
+      const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+      center.value = columnWidth.center;
+      emit("change", {
+        left: columnWidth.left,
+        center: center.value,
+        right: columnWidth.right
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        class: "m-editor-layout"
+      }, [
+        unref(hasLeft) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
+            style: normalizeStyle(`width: ${__props.left}px`)
+          }, [
+            renderSlot(_ctx.$slots, "left")
+          ], 6),
+          createVNode(_sfc_main$p, { onChange: changeLeft })
+        ], 64)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
+          style: normalizeStyle(`width: ${center.value}px`)
+        }, [
+          renderSlot(_ctx.$slots, "center")
+        ], 6),
+        unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createVNode(_sfc_main$p, { onChange: changeRight }),
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
+            style: normalizeStyle(`width: ${__props.right}px`)
+          }, [
+            renderSlot(_ctx.$slots, "right")
+          ], 6)
+        ], 64)) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+
+const _hoisted_1$e = ["src"];
+const __default__$m = defineComponent({
+  name: "MEditorIcon"
+});
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
+  props: {
+    icon: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 0,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Edit))
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 1,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$e)
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
+        key: 2,
+        class: normalizeClass(["magic-editor-icon", __props.icon])
+      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 3,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+
+var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+  ColumnLayout2["LEFT"] = "left";
+  ColumnLayout2["CENTER"] = "center";
+  ColumnLayout2["RIGHT"] = "right";
+  return ColumnLayout2;
+})(ColumnLayout || {});
+var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
+  LayerOffset2["TOP"] = "top";
+  LayerOffset2["BOTTOM"] = "bottom";
+  return LayerOffset2;
+})(LayerOffset || {});
+var Layout = /* @__PURE__ */ ((Layout2) => {
+  Layout2["FLEX"] = "flex";
+  Layout2["FIXED"] = "fixed";
+  Layout2["RELATIVE"] = "relative";
+  Layout2["ABSOLUTE"] = "absolute";
+  return Layout2;
+})(Layout || {});
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["ESCAPE"] = "Space";
+  return Keys2;
+})(Keys || {});
+const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+var CodeEditorMode = /* @__PURE__ */ ((CodeEditorMode2) => {
+  CodeEditorMode2["LIST"] = "list";
+  CodeEditorMode2["EDITOR"] = "editor";
+  return CodeEditorMode2;
+})(CodeEditorMode || {});
+var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
+  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
+  CodeDeleteErrorType2["BIND"] = "bind";
+  return CodeDeleteErrorType2;
+})(CodeDeleteErrorType || {});
+const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+
 const log = (...args) => {
   if (process.env.NODE_ENV === "development") {
     console.log("magic editor: ", ...args);
@@ -682,7 +876,8 @@ class CodeBlock extends BaseService {
     editable: true,
     mode: CodeEditorMode.EDITOR,
     combineIds: [],
-    undeletableList: []
+    undeletableList: [],
+    relations: {}
   });
   constructor() {
     super([
@@ -700,31 +895,40 @@ class CodeBlock extends BaseService {
       "deleteCodeDslByIds"
     ]);
   }
-  async setCodeDsl(codeDsl) {
-    this.state.codeDsl = codeDsl;
+  async setCodeDsl(codeDsl2) {
+    this.state.codeDsl = codeDsl2;
     await editorService.setCodeDsl(this.state.codeDsl);
     info("[code-block]:code-dsl-change", this.state.codeDsl);
     this.emit("code-dsl-change", this.state.codeDsl);
   }
   async getCodeDsl(forceRefresh = false) {
+    return this.getCodeDslSync(forceRefresh);
+  }
+  getCodeDslSync(forceRefresh = false) {
     if (!this.state.codeDsl || forceRefresh) {
-      this.state.codeDsl = await editorService.getCodeDsl();
+      this.state.codeDsl = editorService.getCodeDslSync();
     }
     return this.state.codeDsl;
   }
-  async getCodeContentById(id) {
-    if (!id)
+  async getCodeContentById(id2) {
+    if (!id2)
       return null;
     const totalCodeDsl = await this.getCodeDsl();
     if (!totalCodeDsl)
       return null;
-    return totalCodeDsl[id] ?? null;
+    return totalCodeDsl[id2] ?? null;
   }
   async setCodeDslById(id, codeConfig) {
     let codeDsl = await this.getCodeDsl();
+    const codeConfigProcessed = codeConfig;
+    if (codeConfig.content) {
+      codeConfigProcessed.content = eval(codeConfig.content);
+    }
     if (!codeDsl) {
       codeDsl = {
-        [id]: codeConfig
+        [id]: {
+          ...codeConfigProcessed
+        }
       };
     } else {
       const existContent = codeDsl[id] || {};
@@ -732,15 +936,15 @@ class CodeBlock extends BaseService {
         ...codeDsl,
         [id]: {
           ...existContent,
-          ...codeConfig
+          ...codeConfigProcessed
         }
       };
     }
     await this.setCodeDsl(codeDsl);
   }
   async getCodeDslByIds(ids) {
-    const codeDsl = await this.getCodeDsl();
-    return pick(codeDsl, ids);
+    const codeDsl2 = await this.getCodeDsl();
+    return pick(codeDsl2, ids);
   }
   async setCodeEditorShowStatus(status) {
     this.state.isShowCodeEditor = status;
@@ -748,10 +952,10 @@ class CodeBlock extends BaseService {
   getCodeEditorShowStatus() {
     return this.state.isShowCodeEditor;
   }
-  setCodeEditorContent(status, id) {
-    if (!id)
+  setCodeEditorContent(status, id2) {
+    if (!id2)
       return;
-    this.setId(id);
+    this.setId(id2);
     this.state.isShowCodeEditor = status;
   }
   async getCurrentDsl() {
@@ -763,10 +967,10 @@ class CodeBlock extends BaseService {
   async setEditStatus(status) {
     this.state.editable = status;
   }
-  setId(id) {
-    if (!id)
+  setId(id2) {
+    if (!id2)
       return;
-    this.state.id = id;
+    this.state.id = id2;
   }
   getId() {
     return this.state.id;
@@ -780,64 +984,20 @@ class CodeBlock extends BaseService {
   async setCombineIds(ids) {
     this.state.combineIds = ids;
   }
-  getCombineIds() {
-    return this.state.combineIds;
-  }
-  async setCombineRelation(compId, diffCodeIds, opFlag, hook) {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl)
-      return;
-    if (opFlag === CodeSelectOp.DELETE) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const index = compsContent?.[compId].findIndex((item) => item === hook);
-          if (typeof index !== "undefined" && index !== -1) {
-            compsContent?.[compId].splice(index, 1);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error("\u89E3\u7ED1\u4EE3\u7801\u5757\u5931\u8D25");
-      }
-    } else if (opFlag === CodeSelectOp.ADD) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const existHooks = compsContent?.[compId];
-          if (isEmpty(existHooks)) {
-            codeDsl[codeId].comps = {
-              ...codeDsl[codeId].comps || {},
-              [compId]: [hook]
-            };
-          } else {
-            existHooks?.push(hook);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error("\u7ED1\u5B9A\u4EE3\u7801\u5757\u5931\u8D25");
-      }
-    } else if (opFlag === CodeSelectOp.CHANGE) {
-      forIn(codeDsl, (codeBlockContent, codeId) => {
-        if (codeId === diffCodeIds[0]) {
-          codeBlockContent.comps = {
-            ...codeBlockContent?.comps || {},
-            [compId]: [hook]
-          };
-        } else if (isEmpty(diffCodeIds) || codeId !== diffCodeIds[0]) {
-          const compHooks = codeBlockContent?.comps?.[compId];
-          if (!compHooks)
-            return true;
-          const index = compHooks.findIndex((hookName) => hookName === hook);
-          if (index !== -1) {
-            compHooks.splice(index, 1);
-            return false;
-          }
-        }
-      });
-    }
-    this.setCodeDsl(codeDsl);
+  getCombineIds() {
+    return this.state.combineIds;
+  }
+  refreshCombineInfo() {
+    const root = editorService.get("root");
+    if (!root)
+      return null;
+    const relations = {};
+    this.recurseMNode(root, relations);
+    this.state.relations = relations;
+    return this.state.relations;
+  }
+  getCombineInfo() {
+    return this.state.relations;
   }
   getUndeletableList() {
     return this.state.undeletableList;
@@ -845,6 +1005,15 @@ class CodeBlock extends BaseService {
   async setUndeleteableList(codeIds) {
     this.state.undeletableList = codeIds;
   }
+  setCodeDraft(codeId, content) {
+    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+  }
+  getCodeDraft(codeId) {
+    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+  removeCodeDraft(codeId) {
+    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
   async deleteCodeDslByIds(codeIds) {
     const currentDsl = await this.getCodeDsl();
     const newDsl = omit(currentDsl, codeIds);
@@ -860,11 +1029,11 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
   async deleteCompsInRelation(node) {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl)
+    const codeDsl2 = cloneDeep(await this.getCodeDsl());
+    if (!codeDsl2)
       return;
-    this.recurseNodes(node, codeDsl);
-    this.setCodeDsl(codeDsl);
+    this.refreshRelationDeep(node, codeDsl2);
+    this.setCodeDsl(codeDsl2);
   }
   destroy() {
     this.state.isShowCodeEditor = false;
@@ -875,16 +1044,39 @@ class CodeBlock extends BaseService {
     this.state.combineIds = [];
     this.state.undeletableList = [];
   }
-  recurseNodes(node, codeDsl) {
+  refreshRelationDeep(node, codeDsl2) {
     if (!node.id)
       return;
-    forIn(codeDsl, (codeBlockContent) => {
+    forIn(codeDsl2, (codeBlockContent) => {
       const compsContent = codeBlockContent.comps || {};
       codeBlockContent.comps = omit(compsContent, node.id);
     });
     if (!isEmpty(node.items)) {
       node.items.forEach((item) => {
-        this.recurseNodes(item, codeDsl);
+        this.refreshRelationDeep(item, codeDsl2);
+      });
+    }
+  }
+  recurseMNode(node, relations) {
+    forIn(node, (value, key) => {
+      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
+        value.hookData.forEach((relationItem) => {
+          if (!relationItem.codeId)
+            return;
+          if (!relations[relationItem.codeId]) {
+            relations[relationItem.codeId] = {};
+          }
+          const codeItem = relations[relationItem.codeId];
+          if (isEmpty(codeItem[node.id])) {
+            codeItem[node.id] = [];
+          }
+          codeItem[node.id].push(key);
+        });
+      }
+    });
+    if (!isEmpty(node.items)) {
+      node.items.forEach((item) => {
+        this.recurseMNode(item, relations);
       });
     }
   }
@@ -968,6 +1160,7 @@ class History extends BaseService {
       this.state.pageSteps[this.state.pageId] = undoRedo;
     }
     this.setCanUndoRedo();
+    this.emit("page-change", this.state.pageSteps[this.state.pageId]);
   }
   empty() {
     this.state.pageId = void 0;
@@ -1253,6 +1446,10 @@ const fixNodePosition = (config, parent, stage) => {
     left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
   };
 };
+const serializeConfig = (config) => serialize(config, {
+  space: 2,
+  unsafe: true
+}).replace(/"(\w+)":\s/g, "$1: ");
 
 class Props extends BaseService {
   state = reactive({
@@ -1294,7 +1491,7 @@ class Props extends BaseService {
       this.setPropsValue(toLine(type), values[type]);
     });
   }
-  setPropsValue(type, value) {
+  async setPropsValue(type, value) {
     this.state.propsValueMap[type] = value;
   }
   async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
@@ -1426,6 +1623,13 @@ const getAddParent = (node) => {
   }
   return parentNode;
 };
+const getDefaultConfig = async (addNode, parentNode) => {
+  const { type, inputEvent, ...config } = addNode;
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout);
+  return newNode;
+};
 
 class Editor$1 extends BaseService {
   state = reactive({
@@ -1455,7 +1659,7 @@ class Editor$1 extends BaseService {
         "copy",
         "paste",
         "doPaste",
-        "duAlignCenter",
+        "doAlignCenter",
         "alignCenter",
         "moveLayer",
         "moveToContainer",
@@ -1634,6 +1838,9 @@ class Editor$1 extends BaseService {
     }
     const newNodes = await Promise.all(
       addNodes.map((node) => {
+        if (isPage(node)) {
+          return this.doAdd(node, this.get("root"));
+        }
         const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
         if (!parentNode)
           throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
@@ -1652,7 +1859,9 @@ class Editor$1 extends BaseService {
         stage?.select(newNodes[0].id);
       }
     }
-    this.pushHistoryState();
+    if (!isPage(newNodes[0])) {
+      this.pushHistoryState();
+    }
     this.emit("add", newNodes);
     return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
@@ -1694,7 +1903,9 @@ class Editor$1 extends BaseService {
   async remove(nodeOrNodeList) {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
     await Promise.all(nodes.map((node) => this.doRemove(node)));
-    this.pushHistoryState();
+    if (!isPage(nodes[0])) {
+      this.pushHistoryState();
+    }
     this.emit("remove", nodes);
   }
   async doUpdate(config) {
@@ -1706,6 +1917,9 @@ class Editor$1 extends BaseService {
     const node = cloneDeep(toRaw(info.node));
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get("root"));
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+      if (isObject(srcValue) && Array.isArray(objValue)) {
+        return srcValue;
+      }
       if (Array.isArray(srcValue)) {
         return srcValue;
       }
@@ -1729,10 +1943,10 @@ class Editor$1 extends BaseService {
       newConfig = setLayout(newConfig, newLayout);
     }
     parentNodeItems[index] = newConfig;
-    const nodes = this.get("nodes");
+    const nodes = this.get("nodes") || [];
     const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
-    this.set("nodes", nodes);
+    this.set("nodes", [...nodes]);
     this.get("stage")?.update({
       config: cloneDeep(newConfig),
       parentId: parent.id,
@@ -1749,6 +1963,7 @@ class Editor$1 extends BaseService {
     const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
     this.pushHistoryState();
     this.emit("update", newNodes);
+    codeBlockService.refreshCombineInfo();
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
   async sort(id1, id2) {
@@ -1779,7 +1994,7 @@ class Editor$1 extends BaseService {
     if (!Array.isArray(config))
       return;
     const pasteConfigs = await this.doPaste(config, position);
-    return this.add(pasteConfigs);
+    return this.add(pasteConfigs, this.get("parent"));
   }
   async doPaste(config, position = {}) {
     const pasteConfigs = await beforePaste(position, cloneDeep(config));
@@ -1814,7 +2029,11 @@ class Editor$1 extends BaseService {
     const stage = this.get("stage");
     const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
     const newNode = await this.update(newNodes);
-    await stage?.multiSelect(newNodes.map((node) => node.id));
+    if (newNodes.length > 1) {
+      await stage?.multiSelect(newNodes.map((node) => node.id));
+    } else {
+      await stage?.select(newNodes[0].id);
+    }
     return newNode;
   }
   async moveLayer(offset) {
@@ -1921,6 +2140,12 @@ class Editor$1 extends BaseService {
       return null;
     return root.codeBlocks || null;
   }
+  getCodeDslSync() {
+    const root = this.get("root");
+    if (!root)
+      return null;
+    return root.codeBlocks || null;
+  }
   async setCodeDsl(codeDsl) {
     if (!this.state.root)
       return;
@@ -2235,14 +2460,14 @@ const fillConfig = (config = []) => [
           {
             name: "created",
             text: "created",
-            type: "code-select",
-            labelWidth: "100px"
+            labelWidth: "100px",
+            type: "code-select"
           },
           {
             name: "mounted",
             text: "mounted",
-            type: "code-select",
-            labelWidth: "100px"
+            labelWidth: "100px",
+            type: "code-select"
           }
         ]
       }
@@ -2354,12 +2579,14 @@ const useStage = (stageOptions) => {
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
   ]);
   stage.on("select", (el) => {
+    if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
+      return;
     editorService.select(el.id);
   });
   stage.on("highlight", (el) => {
     editorService.highlight(el.id);
   });
-  stage.on("multiSelect", (els) => {
+  stage.on("multi-select", (els) => {
     editorService.multiSelect(els.map((el) => el.id));
   });
   stage.on("update", (ev) => {
@@ -2374,7 +2601,12 @@ const useStage = (stageOptions) => {
   stage.on("sort", (ev) => {
     editorService.sort(ev.src, ev.dist);
   });
-  stage.on("changeGuides", (e) => {
+  stage.on("select-parent", () => {
+    const parent = editorService.get("parent");
+    editorService.select(parent);
+    editorService.get("stage").select(parent.id);
+  });
+  stage.on("change-guides", (e) => {
     uiService.set("showGuides", true);
     if (!root.value || !page.value)
       return;
@@ -2390,11 +2622,14 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _hoisted_1$b = { class: "m-editor-empty-panel" };
-const _hoisted_2$5 = { class: "m-editor-empty-content" };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  __name: "AddPageBox",
+const _hoisted_1$d = { class: "m-editor-empty-panel" };
+const _hoisted_2$7 = { class: "m-editor-empty-content" };
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+const __default__$l = defineComponent({
+  name: "MEditorAddPageBox"
+});
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
   setup(__props) {
     const services = inject("services");
     const clickHandler = () => {
@@ -2407,22 +2642,16 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      const _component_el_icon = resolveComponent("el-icon");
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_2$7, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_component_el_icon, null, {
-                default: withCtx(() => [
-                  createVNode(unref(Plus))
-                ]),
-                _: 1
-              })
+              createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$2
+            _hoisted_3$4
           ])
         ])
       ]);
@@ -2430,137 +2659,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "Resizer",
-  emits: ["change"],
-  setup(__props, { emit }) {
-    const target = ref();
-    let getso;
-    onMounted(() => {
-      if (!target.value)
-        return;
-      getso = new Gesto(target.value, {
-        container: window,
-        pinchOutside: true
-      }).on("drag", (e) => {
-        if (!target.value)
-          return;
-        emit("change", e.deltaX);
-      });
-    });
-    onUnmounted(() => {
-      getso?.unset();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        ref_key: "target",
-        ref: target,
-        class: "m-editor-resizer"
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 512);
-    };
-  }
+const _hoisted_1$c = { class: "m-editor" };
+const __default__$k = defineComponent({
+  name: "MEditorFramework"
 });
-
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  __name: "Layout",
-  props: {
-    left: null,
-    right: null,
-    minLeft: { default: 1 },
-    minRight: { default: 1 },
-    leftClass: null,
-    rightClass: null,
-    centerClass: null
-  },
-  emits: ["update:left", "change", "update:right"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const el = ref();
-    let clientWidth = 0;
-    const resizerObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        clientWidth = contentRect.width;
-        center.value = clientWidth - (props.left || 0) - (props.right || 0);
-        emit("change", {
-          left: props.left,
-          center: center.value,
-          right: props.right
-        });
-      }
-    });
-    onMounted(() => {
-      if (el.value) {
-        resizerObserver.observe(el.value);
-      }
-    });
-    onUnmounted(() => {
-      resizerObserver.disconnect();
-    });
-    const center = ref(0);
-    const changeLeft = (deltaX) => {
-      if (typeof props.left === "undefined")
-        return;
-      const left = Math.max(props.left + deltaX, props.minLeft) || 0;
-      emit("update:left", left);
-      center.value = clientWidth - left - (props.right || 0);
-      emit("change", {
-        left,
-        center: center.value,
-        right: props.right
-      });
-    };
-    const changeRight = (deltaX) => {
-      if (typeof props.right === "undefined")
-        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 openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: "m-editor-layout"
-      }, [
-        typeof props.left !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
-            style: normalizeStyle(`width: ${__props.left}px`)
-          }, [
-            renderSlot(_ctx.$slots, "left")
-          ], 6),
-          createVNode(_sfc_main$m, { onChange: changeLeft })
-        ], 64)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
-          style: normalizeStyle(`width: ${center.value}px`)
-        }, [
-          renderSlot(_ctx.$slots, "center")
-        ], 6),
-        typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$m, { onChange: changeRight }),
-          createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
-            style: normalizeStyle(`width: ${__props.right}px`)
-          }, [
-            renderSlot(_ctx.$slots, "right")
-          ], 6)
-        ], 64)) : createCommentVNode("", true)
-      ], 512);
-    };
-  }
-});
-
-const _hoisted_1$a = { class: "m-editor" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  __name: "Framework",
+  ...__default__$k,
   props: {
     codeOptions: { default: () => ({}) }
   },
@@ -2569,48 +2673,64 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
+    const nodes = computed(() => editorService?.get("nodes") || []);
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
+    const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
+    const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
+    const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
+    const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
     const columnWidth = ref({
-      left: DEFAULT_LEFT_COLUMN_WIDTH,
+      left: leftColumnWidthCacheData,
       center: 0,
-      right: 0
+      right: RightColumnWidthCacheData
     });
-    uiService?.set("columnWidth", columnWidth.value);
-    watchEffect(() => {
-      if (pageLength.value <= 0) {
-        columnWidth.value.right = void 0;
-        columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
-      } else {
-        columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
-        columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
+    watch(
+      pageLength,
+      (length) => {
+        const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+        columnWidth.value.left = left;
+        if (length <= 0) {
+          columnWidth.value.right = void 0;
+          columnWidth.value.center = globalThis.document.body.clientWidth - left;
+        } else {
+          const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
+          columnWidth.value.right = right;
+          columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+        }
+        uiService?.set("columnWidth", columnWidth);
+      },
+      {
+        immediate: true
       }
-    });
-    const saveCode = (value) => {
-      try {
-        editorService?.set("root", eval(value));
-      } catch (e) {
-        console.error(e);
+    );
+    watch(
+      () => columnWidth.value.right,
+      (right) => {
+        if (typeof right === "undefined")
+          return;
+        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+      }
+    );
+    watch(
+      () => columnWidth.value.left,
+      (left) => {
+        globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
       }
+    );
+    const columnWidthChange = (columnWidth2) => {
+      uiService?.set("columnWidth", columnWidth2);
     };
-    const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
-    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-    if (columnWidthCacheData) {
+    const saveCode = (value) => {
       try {
-        const columnWidthCache = JSON.parse(columnWidthCacheData);
-        columnWidth.value = columnWidthCache;
+        editorService?.set("root", eval(value));
       } catch (e) {
         console.error(e);
       }
-    }
-    const columnWidthChange = (columnWidth2) => {
-      uiService?.set("columnWidth", columnWidth2);
-      globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth2));
     };
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      const _component_el_scrollbar = resolveComponent("el-scrollbar");
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
         unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
           key: 0,
@@ -2618,95 +2738,57 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$l, {
-          key: 1,
-          class: "m-editor-content",
-          "left-class": "m-editor-framework-left",
-          "center-class": "m-editor-framework-center",
-          "right-class": "m-editor-framework-right",
-          left: columnWidth.value.left,
-          "onUpdate:left": _cache[0] || (_cache[0] = ($event) => columnWidth.value.left = $event),
-          right: columnWidth.value.right,
-          "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
-          "min-left": 45,
-          "min-right": 1,
-          onChange: columnWidthChange
-        }, createSlots({
-          left: withCtx(() => [
-            renderSlot(_ctx.$slots, "sidebar")
-          ]),
-          center: withCtx(() => [
-            unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$n)
-            ])
-          ]),
-          _: 2
-        }, [
-          unref(pageLength) > 0 ? {
-            name: "right",
-            fn: withCtx(() => [
-              createVNode(_component_el_scrollbar, null, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "props-panel")
-                ]),
-                _: 3
-              })
-            ])
-          } : void 0
-        ]), 1032, ["left", "right"]))
-      ]);
-    };
-  }
-});
-
-const _hoisted_1$9 = ["src"];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "Icon",
-  props: {
-    icon: null
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      const _component_el_icon = resolveComponent("el-icon");
-      return !__props.icon ? (openBlock(), createBlock(_component_el_icon, {
-        key: 0,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(Edit))
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, {
-        key: 1,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$9)
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
-        key: 2,
-        class: normalizeClass(["magic-editor-icon", __props.icon])
-      }, null, 2)) : (openBlock(), createBlock(_component_el_icon, {
-        key: 3,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
-        ]),
-        _: 1
-      }));
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$o, {
+          key: 1,
+          class: "m-editor-content",
+          "left-class": "m-editor-framework-left",
+          "center-class": "m-editor-framework-center",
+          "right-class": "m-editor-framework-right",
+          left: columnWidth.value.left,
+          "onUpdate:left": _cache[0] || (_cache[0] = ($event) => columnWidth.value.left = $event),
+          right: columnWidth.value.right,
+          "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
+          "min-left": 45,
+          "min-right": 1,
+          onChange: columnWidthChange
+        }, createSlots({
+          left: withCtx(() => [
+            renderSlot(_ctx.$slots, "sidebar")
+          ]),
+          center: withCtx(() => [
+            unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+              createVNode(_sfc_main$m)
+            ])
+          ]),
+          _: 2
+        }, [
+          unref(pageLength) > 0 && unref(nodes).length === 1 ? {
+            name: "right",
+            fn: withCtx(() => [
+              createVNode(unref(TMagicScrollbar), null, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "props-panel")
+                ]),
+                _: 3
+              })
+            ])
+          } : void 0
+        ]), 1032, ["left", "right"]))
+      ]);
     };
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$b = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$4 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "ToolButton",
+const _hoisted_2$6 = { class: "el-dropdown-link menubar-menu-button" };
+const __default__$j = defineComponent({
+  name: "MEditorToolButton"
+});
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
   props: {
     data: { default: () => ({
       type: "text",
@@ -2771,13 +2853,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_el_divider = resolveComponent("el-divider");
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_icon = resolveComponent("el-icon");
-      const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
-      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
-      const _component_el_dropdown = resolveComponent("el-dropdown");
       return unref(display) ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
@@ -2785,24 +2860,24 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
         onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(__props.data, $event))
       }, [
-        __props.data.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
+        __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$8, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          __props.data.tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$b, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
             placement: "bottom-start",
             content: __props.data.tooltip
           }, {
             default: withCtx(() => [
-              createVNode(_component_el_button, {
+              createVNode(unref(TMagicButton), {
                 size: "small",
                 text: "",
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$j, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2812,14 +2887,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               }, 8, ["disabled"])
             ]),
             _: 1
-          }, 8, ["content"])) : (openBlock(), createBlock(_component_el_button, {
+          }, 8, ["content"])) : (openBlock(), createBlock(unref(TMagicButton), {
             key: 1,
             size: "small",
             text: "",
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$j, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2827,17 +2902,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"]))
-        ], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
+        ], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
           key: 3,
           trigger: "click",
           disabled: unref(disabled),
           onCommand: dropdownHandler
         }, {
           dropdown: withCtx(() => [
-            __props.data.items && __props.data.items.length ? (openBlock(), createBlock(_component_el_dropdown_menu, { key: 0 }, {
+            __props.data.items && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
               default: withCtx(() => [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (subItem, index) => {
-                  return openBlock(), createBlock(_component_el_dropdown_item, {
+                  return openBlock(), createBlock(unref(TMagicDropdownItem), {
                     key: index,
                     command: { data: __props.data, subItem }
                   }, {
@@ -2852,9 +2927,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$4, [
+            createElementVNode("span", _hoisted_2$6, [
               createTextVNode(toDisplayString(__props.data.text), 1),
-              createVNode(_component_el_icon, { class: "el-icon--right" }, {
+              createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
                   createVNode(unref(ArrowDown))
                 ]),
@@ -2869,8 +2944,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "NavMenu",
+const __default__$i = defineComponent({
+  name: "MEditorNavMenu"
+});
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   props: {
     data: { default: () => ({}) },
     height: { default: 35 }
@@ -3025,7 +3103,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$i, {
+              return openBlock(), createBlock(_sfc_main$k, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -3037,9 +3115,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { class: "m-editor-props-panel" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "PropsPanel",
+const _hoisted_1$a = { class: "m-editor-props-panel" };
+const __default__$h = defineComponent({
+  name: "MEditorPropsPanel"
+});
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
   emits: ["mounted"],
   setup(__props, { expose, emit }) {
     const internalInstance = getCurrentInstance();
@@ -3048,7 +3129,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
-    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
+    const propsPanelSize = computed(
+      () => services?.uiService.get("propsPanelSize") || "small"
+    );
     const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
       if (!node.value) {
@@ -3075,21 +3158,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         services?.editorService.update(values2);
       } catch (e) {
         console.error(e);
-        ElMessage.closeAll();
-        ElMessage.error({
-          duration: 1e4,
-          showClose: true,
-          message: e.message,
-          dangerouslyUseHTMLString: true
-        });
+        tMagicMessage.closeAll();
+        tMagicMessage.error(e.message);
       }
     };
     expose({ submit });
     return (_ctx, _cache) => {
-      const _component_m_form = resolveComponent("m-form");
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "props-panel-header"),
-        createVNode(_component_m_form, {
+        createVNode(unref(MForm), {
           ref_key: "configForm",
           ref: configForm,
           class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
@@ -3104,43 +3181,328 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["id"];
-const _hoisted_2$3 = { class: "list-item" };
-const _hoisted_3$1 = { class: "code-name" };
-const _hoisted_4$1 = { class: "code-name-wrapper" };
-const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
-const _hoisted_6$1 = { class: "m-editor-wrapper" };
-const _hoisted_7$1 = {
-  key: 1,
+const _hoisted_1$9 = {
+  key: 0,
   class: "m-editor-content-bottom"
 };
-const _hoisted_8$1 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
-const _hoisted_9$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
-const _hoisted_10 = {
-  key: 2,
+const _hoisted_2$5 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
+const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_4$2 = {
+  key: 1,
   class: "m-editor-content-bottom"
 };
-const _hoisted_11 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const __default__$g = defineComponent({
+  name: "MEditorCodeDraftEditor"
+});
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$g,
+  props: {
+    id: null,
+    content: null,
+    editable: { type: Boolean, default: true },
+    autoSaveDraft: { type: Boolean, default: true },
+    codeOptions: null,
+    language: null
+  },
+  emits: ["save", "close", "saveAndClose"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const services = inject("services");
+    const codeContent = ref("");
+    const editorContent = ref("");
+    const codeEditor = ref();
+    const originCodeContent = ref("");
+    const isFullScreen = ref(false);
+    const codeOptions = computed(() => ({
+      ...props.codeOptions,
+      readOnly: !props.editable
+    }));
+    watchEffect(() => {
+      codeContent.value = props.content;
+      if (!originCodeContent.value) {
+        originCodeContent.value = codeContent.value;
+      }
+      const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+      if (codeDraft) {
+        codeContent.value = codeDraft;
+      }
+    });
+    const saveCodeDraft = async (codeValue) => {
+      if (!props.autoSaveDraft)
+        return;
+      if (originCodeContent.value === codeValue) {
+        services?.codeBlockService.removeCodeDraft(props.id);
+        return;
+      }
+      services?.codeBlockService.setCodeDraft(props.id, codeValue);
+      tMagicMessage.success(`\u4EE3\u7801\u8349\u7A3F\u4FDD\u5B58\u6210\u529F ${datetimeFormatter(new Date())}`);
+    };
+    const saveCode = () => {
+      if (!codeEditor.value || !props.editable)
+        return;
+      editorContent.value = codeEditor.value.getEditor()?.getValue();
+      emit("save", editorContent.value);
+    };
+    const saveAndClose = () => {
+      if (!codeEditor.value || !props.editable)
+        return;
+      editorContent.value = codeEditor.value.getEditor()?.getValue();
+      emit("saveAndClose", editorContent.value);
+    };
+    const close = async () => {
+      const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+      if (codeDraft) {
+        tMagicMessageBox.confirm("\u60A8\u6709\u4EE3\u7801\u4FEE\u6539\u672A\u4FDD\u5B58\uFF0C\u662F\u5426\u4FDD\u5B58\u540E\u518D\u5173\u95ED\uFF1F", "\u63D0\u793A", {
+          confirmButtonText: "\u786E\u8BA4",
+          cancelButtonText: "\u53D6\u6D88",
+          type: "warning"
+        }).then(async () => {
+          saveAndClose();
+        }).catch(() => {
+          services?.codeBlockService.removeCodeDraft(props.id);
+          emit("close");
+        });
+      } else {
+        emit("close");
+      }
+    };
+    const toggleFullScreen = () => {
+      isFullScreen.value = !isFullScreen.value;
+      if (codeEditor.value) {
+        codeEditor.value.focus();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
+      }, [
+        createVNode(_sfc_main$q, {
+          ref_key: "codeEditor",
+          ref: codeEditor,
+          class: "m-editor-container",
+          "init-values": `${codeContent.value}`,
+          onSave: saveCodeDraft,
+          language: __props.language,
+          options: unref(codeOptions)
+        }, null, 8, ["init-values", "language", "options"]),
+        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: toggleFullScreen
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: saveCode
+          }, {
+            default: withCtx(() => [
+              _hoisted_2$5
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: close
+          }, {
+            default: withCtx(() => [
+              _hoisted_3$3
+            ]),
+            _: 1
+          })
+        ])) : (openBlock(), createElementBlock("div", _hoisted_4$2, [
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: toggleFullScreen
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: close
+          }, {
+            default: withCtx(() => [
+              _hoisted_5$1
+            ]),
+            _: 1
+          })
+        ]))
+      ], 2);
+    };
+  }
+});
+
+const _hoisted_1$8 = { class: "code-name-wrapper" };
+const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
+const _hoisted_3$2 = { class: "code-name-wrapper" };
+const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570\u5B9A\u4E49", -1);
+const __default__$f = defineComponent({
+  name: "MEditorFunctionEditor"
+});
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...__default__$f,
+  props: {
+    id: null,
+    name: null,
+    content: null,
+    editable: { type: Boolean, default: true },
+    autoSaveDraft: { type: Boolean, default: true },
+    codeOptions: null
+  },
+  emits: ["change", "field-input"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const tableConfig = {
+      border: true,
+      enableFullscreen: false,
+      name: "params",
+      maxHeight: "150px",
+      items: [
+        {
+          type: "text",
+          label: "\u53C2\u6570\u540D",
+          name: "name"
+        }
+      ]
+    };
+    const services = inject("services");
+    const codeName = ref("");
+    const codeContent = ref("");
+    const evalRes = ref(true);
+    provide("mForm", {
+      $emit: emit,
+      setField: () => {
+      }
+    });
+    const tableModel = ref();
+    watchEffect(() => {
+      codeName.value = props.name;
+      codeContent.value = props.content;
+    });
+    const initTableModel = () => {
+      const codeDsl = services?.codeBlockService.getCodeDslSync();
+      if (!codeDsl)
+        return;
+      tableModel.value = {
+        params: codeDsl[props.id]?.params || []
+      };
+    };
+    initTableModel();
+    const beforeSave = (codeValue) => {
+      try {
+        eval(codeValue);
+        return true;
+      } catch (e) {
+        tMagicMessage.error(e.stack);
+        return false;
+      }
+    };
+    const saveCode = async (codeValue2) => {
+      if (!props.editable)
+        return;
+      evalRes.value = beforeSave(codeValue2);
+      if (evalRes.value) {
+        await services?.codeBlockService.setCodeDslById(props.id, {
+          name: codeName.value,
+          content: codeValue2,
+          params: tableModel.value?.params || []
+        });
+        tMagicMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
+        services?.codeBlockService.removeCodeDraft(props.id);
+      }
+    };
+    const saveAndClose = async (codeValue2) => {
+      await saveCode(codeValue2);
+      if (evalRes.value) {
+        close();
+      }
+    };
+    const close = () => {
+      services?.codeBlockService.setCodeEditorShowStatus(false);
+    };
+    return (_ctx, _cache) => {
+      const _component_m_form_table = resolveComponent("m-form-table");
+      return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
+        header: withCtx(() => [
+          createElementVNode("div", _hoisted_1$8, [
+            _hoisted_2$4,
+            createVNode(unref(TMagicInput), {
+              class: "code-name-input",
+              modelValue: codeName.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeName.value = $event),
+              disabled: !__props.editable
+            }, null, 8, ["modelValue", "disabled"])
+          ]),
+          createElementVNode("div", _hoisted_3$2, [
+            _hoisted_4$1,
+            createVNode(_component_m_form_table, {
+              style: { "width": "320px" },
+              config: tableConfig,
+              model: tableModel.value,
+              enableToggleMode: false,
+              name: "params",
+              prop: "params",
+              size: "small"
+            }, null, 8, ["model"])
+          ])
+        ]),
+        default: withCtx(() => [
+          createVNode(_sfc_main$h, {
+            id: __props.id,
+            content: codeContent.value,
+            editable: __props.editable,
+            autoSaveDraft: __props.autoSaveDraft,
+            codeOptions: __props.codeOptions,
+            language: "javascript",
+            onSave: saveCode,
+            onSaveAndClose: saveAndClose,
+            onClose: close
+          }, null, 8, ["id", "content", "editable", "autoSaveDraft", "codeOptions"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+
+const _hoisted_1$7 = ["id"];
+const _hoisted_2$3 = { class: "list-item" };
+const _hoisted_3$1 = { class: "code-name" };
+const __default__$e = defineComponent({
+  name: "MEditorCodeBlockEditor"
+});
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "CodeBlockEditor",
+  ...__default__$e,
   setup(__props) {
     const services = inject("services");
-    const codeEditor = ref();
+    const codeOptions = inject("codeOptions", {});
     const left = ref(200);
     const currentTitle = ref("");
     const codeConfig = ref(null);
     const state = reactive({
       codeList: []
     });
-    const isShowCodeBlockEditor = computed(
-      () => codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus() || false
-    );
     const mode = computed(() => services?.codeBlockService.getMode());
     const id = computed(() => services?.codeBlockService.getId() || "");
     const editable = computed(() => services?.codeBlockService.getEditStatus());
     const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
     watchEffect(async () => {
-      codeConfig.value = await services?.codeBlockService.getCodeContentById(id.value) || null;
+      codeConfig.value = cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
+      if (!codeConfig.value)
+        return;
+      codeConfig.value.content = serializeConfig(codeConfig.value.content);
     });
     watchEffect(async () => {
       const codeDsl = await services?.codeBlockService.getCodeDslByIds(selectedIds.value) || null;
@@ -3155,52 +3517,24 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       });
       currentTitle.value = state.codeList[0]?.name || "";
     });
-    const saveCode = async () => {
-      if (!codeEditor.value || !codeConfig.value || !editable.value)
-        return true;
-      try {
-        const codeContent = codeEditor.value.getEditor()?.getValue();
-        codeConfig.value.content = eval(codeContent);
-      } catch (e) {
-        ElMessage.error(e.stack);
-        return false;
-      }
-      await services?.codeBlockService.setCodeDslById(id.value, {
-        name: codeConfig.value.name,
-        content: codeConfig.value.content
-      });
-      ElMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
-      return true;
-    };
-    const saveAndClose = async () => {
-      const saveRes = await saveCode();
-      if (saveRes) {
-        await services?.codeBlockService.setCodeEditorShowStatus(false);
-      }
-    };
     const selectHandler = (data) => {
       services?.codeBlockService.setId(data.id);
       currentTitle.value = data.name;
     };
     return (_ctx, _cache) => {
-      const _component_el_tree = resolveComponent("el-tree");
-      const _component_el_input = resolveComponent("el-input");
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_card = resolveComponent("el-card");
-      const _component_el_dialog = resolveComponent("el-dialog");
-      return openBlock(), createBlock(_component_el_dialog, {
-        modelValue: unref(isShowCodeBlockEditor),
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(isShowCodeBlockEditor) ? isShowCodeBlockEditor.value = $event : null),
+      return openBlock(), createBlock(unref(TMagicDialog), {
+        "model-value": true,
         class: "code-editor-dialog",
         title: currentTitle.value,
         fullscreen: true,
-        "before-close": saveAndClose,
-        "append-to-body": true
+        "close-on-press-escape": false,
+        "append-to-body": true,
+        "show-close": false
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$l, {
+          createVNode(_sfc_main$o, {
             left: left.value,
-            "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
+            "onUpdate:left": _cache[0] || (_cache[0] = ($event) => left.value = $event),
             "min-left": 45,
             class: "code-editor-layout"
           }, createSlots({
@@ -3212,72 +3546,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 ])
               }, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
-                createVNode(_component_el_card, { shadow: "never" }, {
-                  header: withCtx(() => [
-                    createElementVNode("div", _hoisted_4$1, [
-                      _hoisted_5$1,
-                      codeConfig.value ? (openBlock(), createBlock(_component_el_input, {
-                        key: 0,
-                        class: "code-name-input",
-                        modelValue: codeConfig.value.name,
-                        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeConfig.value.name = $event),
-                        disabled: !unref(editable)
-                      }, null, 8, ["modelValue", "disabled"])) : createCommentVNode("", true)
-                    ])
-                  ]),
-                  default: withCtx(() => [
-                    createElementVNode("div", _hoisted_6$1, [
-                      codeConfig.value ? (openBlock(), createBlock(_sfc_main$o, {
-                        key: 0,
-                        ref_key: "codeEditor",
-                        ref: codeEditor,
-                        class: "m-editor-container",
-                        "init-values": `${codeConfig.value.content}`,
-                        onSave: saveCode,
-                        options: {
-                          tabSize: 2,
-                          fontSize: 16,
-                          formatOnPaste: true,
-                          readOnly: !unref(editable)
-                        }
-                      }, null, 8, ["init-values", "options"])) : createCommentVNode("", true),
-                      unref(editable) ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-                        createVNode(_component_el_button, {
-                          type: "primary",
-                          class: "button",
-                          onClick: saveCode
-                        }, {
-                          default: withCtx(() => [
-                            _hoisted_8$1
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_button, {
-                          type: "primary",
-                          class: "button",
-                          onClick: saveAndClose
-                        }, {
-                          default: withCtx(() => [
-                            _hoisted_9$1
-                          ]),
-                          _: 1
-                        })
-                      ])) : (openBlock(), createElementBlock("div", _hoisted_10, [
-                        createVNode(_component_el_button, {
-                          type: "primary",
-                          class: "button",
-                          onClick: saveAndClose
-                        }, {
-                          default: withCtx(() => [
-                            _hoisted_11
-                          ]),
-                          _: 1
-                        })
-                      ]))
-                    ])
-                  ]),
-                  _: 1
-                })
+                codeConfig.value ? (openBlock(), createBlock(_sfc_main$g, {
+                  key: 0,
+                  id: unref(id),
+                  name: codeConfig.value.name,
+                  content: codeConfig.value.content,
+                  editable: !!unref(editable),
+                  autoSaveDraft: unref(mode) === unref(CodeEditorMode).EDITOR,
+                  codeOptions: unref(codeOptions)
+                }, null, 8, ["id", "name", "content", "editable", "autoSaveDraft", "codeOptions"])) : createCommentVNode("", true)
               ], 2)) : createCommentVNode("", true)
             ]),
             _: 2
@@ -3285,16 +3562,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             unref(mode) === unref(CodeEditorMode).LIST ? {
               name: "left",
               fn: withCtx(() => [
-                !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(_component_el_tree, {
+                !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(TMagicTree), {
                   key: 0,
-                  ref: "tree",
+                  class: "side-tree",
                   "node-key": "id",
                   "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
                   data: state.codeList,
                   "highlight-current": true,
-                  onNodeClick: selectHandler,
                   "current-node-key": state.codeList[0].id,
-                  class: "side-tree"
+                  onNodeClick: selectHandler
                 }, {
                   default: withCtx(({ data }) => [
                     createElementVNode("div", {
@@ -3304,7 +3580,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                       createElementVNode("div", _hoisted_2$3, [
                         createElementVNode("div", _hoisted_3$1, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1)
                       ])
-                    ], 8, _hoisted_1$6)
+                    ], 8, _hoisted_1$7)
                   ]),
                   _: 1
                 }, 8, ["data", "current-node-key"])) : createCommentVNode("", true)
@@ -3313,12 +3589,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           ]), 1032, ["left"])
         ]),
         _: 3
-      }, 8, ["modelValue", "title"]);
+      }, 8, ["title"]);
     };
   }
 });
 
-const _hoisted_1$5 = { class: "m-editor-code-block-list" };
+const _hoisted_1$6 = { class: "m-editor-code-block-list" };
 const _hoisted_2$2 = { class: "code-header-wrapper" };
 const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u65B0\u589E");
 const _hoisted_4 = ["id"];
@@ -3340,8 +3616,11 @@ const _hoisted_9 = /* @__PURE__ */ createElementVNode("svg", {
     d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
   })
 ], -1);
+const __default__$d = defineComponent({
+  name: "MEditorCodeBlockList"
+});
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "CodeBlockList",
+  ...__default__$d,
   props: {
     customError: null
   },
@@ -3349,41 +3628,38 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const props = __props;
     const services = inject("services");
     const state = reactive({
-      codeList: [],
-      bindComps: {}
+      codeList: []
     });
     const editable = computed(() => services?.codeBlockService.getEditStatus());
-    const getBindCompsByCodeId = (codeId, codeBlockContent) => {
-      if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
-        state.bindComps[codeId] = [];
-        return;
-      }
-      const compsField = codeBlockContent.comps;
-      const bindCompIds = Object.keys(compsField);
-      const bindCompsFiltered = bindCompIds.filter((compId) => !isEmpty(compsField[compId]));
-      const compsInfo = bindCompsFiltered.map((compId) => ({
-        id: compId,
-        name: getCompName(compId)
+    const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
+    const codeCombineInfo = ref(null);
+    const getBindCompsByCodeId = (codeId) => {
+      if (!codeCombineInfo.value || !codeCombineInfo.value[codeId])
+        return [];
+      const bindCompsId = Object.keys(codeCombineInfo.value[codeId]);
+      return bindCompsId.map((compId) => ({
+        compId,
+        compName: getCompName(compId)
       }));
-      state.bindComps[codeId] = compsInfo;
     };
     const initList = async () => {
-      const codeDsl = await services?.codeBlockService.getCodeDsl() || null;
-      if (!codeDsl)
+      const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
+      codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
+      if (!codeDsl || !codeCombineInfo.value)
         return;
       state.codeList = [];
       forIn(codeDsl, (value, codeId) => {
-        getBindCompsByCodeId(codeId, value);
         state.codeList.push({
           id: codeId,
           name: value.name,
           codeBlockContent: value,
-          showRelation: true
+          showRelation: true,
+          combineInfo: getBindCompsByCodeId(codeId)
         });
       });
     };
     watch(
-      () => services?.codeBlockService.getCodeDsl(),
+      [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
       () => {
         initList();
       },
@@ -3392,31 +3668,18 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         deep: true
       }
     );
-    watch(
-      () => services?.editorService.get("node"),
-      (curNode) => {
-        if (!curNode?.id)
-          return;
-        forIn(state.bindComps, (bindCompInfo) => {
-          bindCompInfo.forEach((comp) => {
-            if (comp.id === curNode.id) {
-              comp.name = curNode.name;
-            }
-          });
-        });
-      }
-    );
     const createCodeBlock = async () => {
       const { codeBlockService } = services || {};
       if (!codeBlockService) {
-        ElMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
+        tMagicMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
         return;
       }
       const codeConfig = {
         name: "\u4EE3\u7801\u5757",
-        content: `() => {
+        content: `({app, params}) => {
   // place your code here
-}`
+}`,
+        params: []
       };
       await codeBlockService.setMode(CodeEditorMode.EDITOR);
       const id = await codeBlockService.getUniqueId();
@@ -3428,7 +3691,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       services?.codeBlockService.setCodeEditorContent(true, key);
     };
     const deleteCode = (key) => {
-      const existBinds = !!(state.bindComps[key]?.length > 0);
+      const currentCode = state.codeList.find((codeItem) => codeItem.id === key);
+      const existBinds = !isEmpty(currentCode?.combineInfo);
       const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
       if (!existBinds && !undeleteableList.includes(key)) {
         services?.codeBlockService.deleteCodeDslByIds([key]);
@@ -3436,7 +3700,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         if (typeof props.customError === "function") {
           props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
         } else {
-          ElMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
+          tMagicMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
         }
       }
     };
@@ -3468,14 +3732,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       stage?.select(compId);
     };
     return (_ctx, _cache) => {
-      const _component_el_input = resolveComponent("el-input");
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_tree = resolveComponent("el-tree");
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
           createElementVNode("div", _hoisted_2$2, [
-            createVNode(_component_el_input, {
+            createVNode(unref(TMagicInput), {
               class: normalizeClass([unref(editable) ? "code-filter-input" : "code-filter-input-no-btn"]),
               size: "small",
               placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
@@ -3484,7 +3744,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
               onInput: filterTextChangeHandler
             }, null, 8, ["class", "modelValue"]),
-            unref(editable) ? (openBlock(), createBlock(_component_el_button, {
+            unref(editable) ? (openBlock(), createBlock(unref(TMagicButton), {
               key: 0,
               class: "create-code-button",
               type: "primary",
@@ -3498,7 +3758,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ])
         ]),
-        !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(_component_el_tree, {
+        !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(TMagicTree), {
           key: 0,
           ref_key: "tree",
           ref: tree,
@@ -3515,15 +3775,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               class: "list-container"
             }, [
               createElementVNode("div", _hoisted_5, [
-                createElementVNode("div", _hoisted_6, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
+                createElementVNode("span", _hoisted_6, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
                 createElementVNode("div", _hoisted_7, [
-                  createVNode(_component_el_tooltip, {
+                  createVNode(unref(TMagicTooltip), {
                     effect: "dark",
                     content: unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$n, {
                         icon: unref(editable) ? unref(Edit) : unref(View),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3531,14 +3791,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 2
                   }, 1032, ["content"]),
-                  state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createBlock(_component_el_tooltip, {
+                  data.combineInfo && data.combineInfo.length > 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
                     key: 0,
                     effect: "dark",
                     content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$n, {
                         icon: unref(Link),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
@@ -3546,14 +3806,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 2
                   }, 1024)) : createCommentVNode("", true),
-                  unref(editable) ? (openBlock(), createBlock(_component_el_tooltip, {
+                  unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
                     key: 1,
                     effect: "dark",
                     content: "\u5220\u9664",
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$n, {
                         icon: unref(Close),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3567,18 +3827,18 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ]),
-              data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
+              data.showRelation && data.combineInfo && data.combineInfo.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
                 _hoisted_9,
-                (openBlock(true), createElementBlock(Fragment, null, renderList(state.bindComps[data.id], (comp, index) => {
-                  return openBlock(), createBlock(_component_el_button, {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(data.combineInfo, (comp, index) => {
+                  return openBlock(), createBlock(unref(TMagicButton), {
                     key: index,
                     class: "code-comp",
                     size: "small",
                     plain: true,
-                    onClick: withModifiers(($event) => selectComp(comp.id), ["stop"])
+                    onClick: withModifiers(($event) => selectComp(comp.compId), ["stop"])
                   }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(comp.name), 1)
+                      createTextVNode(toDisplayString(comp.compName), 1)
                     ]),
                     _: 2
                   }, 1032, ["onClick"]);
@@ -3588,21 +3848,23 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["data"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$f, null, {
+        unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$f, { key: 1 }, {
           "code-block-edit-panel-header": withCtx(({ id }) => [
             renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
           ]),
           _: 3
-        })
+        })) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-const _hoisted_2$1 = ["onClick", "onDragstart"];
+const _hoisted_1$5 = ["onClick", "onDragstart"];
+const __default__$c = defineComponent({
+  name: "MEditorComponentListPanel"
+});
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "ComponentListPanel",
+  ...__default__$c,
   setup(__props) {
     const searchText = ref("");
     const services = inject("services");
@@ -3615,7 +3877,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }))
     );
     const collapseValue = computed(
-      () => Array(list.value?.length).fill(1).map((x, i) => i)
+      () => Array(list.value?.length).fill(1).map((x, i) => `${i}`)
     );
     let timeout;
     let clientX;
@@ -3667,36 +3929,31 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
     };
     return (_ctx, _cache) => {
-      const _component_el_input = resolveComponent("el-input");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_collapse_item = resolveComponent("el-collapse-item");
-      const _component_el_collapse = resolveComponent("el-collapse");
-      const _component_el_scrollbar = resolveComponent("el-scrollbar");
-      return openBlock(), createBlock(_component_el_scrollbar, null, {
+      return openBlock(), createBlock(unref(TMagicScrollbar), null, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "component-list-panel-header"),
-          createVNode(_component_el_collapse, {
+          createVNode(unref(TMagicCollapse), {
             class: "ui-component-panel",
             "model-value": unref(collapseValue)
           }, {
             default: withCtx(() => [
-              createVNode(_component_el_input, {
-                "prefix-icon": "el-icon-search",
+              createVNode(unref(TMagicInput), {
                 placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
                 class: "search-input",
                 size: "small",
                 clearable: "",
+                "prefix-icon": unref(Search),
                 modelValue: searchText.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
-              }, null, 8, ["modelValue"]),
+              }, null, 8, ["prefix-icon", "modelValue"]),
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
-                  group.items && group.items.length ? (openBlock(), createBlock(_component_el_collapse_item, {
+                  group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
                     key: index,
-                    name: index
+                    name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      _hoisted_1$4,
+                      createVNode(_sfc_main$n, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -3711,10 +3968,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$j, {
+                            createVNode(_sfc_main$n, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
-                            createVNode(_component_el_tooltip, {
+                            createVNode(unref(TMagicTooltip), {
                               effect: "dark",
                               placement: "bottom",
                               content: item.text
@@ -3725,7 +3982,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               _: 2
                             }, 1032, ["content"])
                           ])
-                        ], 40, _hoisted_2$1);
+                        ], 40, _hoisted_1$5);
                       }), 128))
                     ]),
                     _: 2
@@ -3742,8 +3999,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$b = defineComponent({
+  name: "MEditorContentMenu"
+});
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "ContentMenu",
+  ...__default__$b,
   props: {
     menuData: { default: () => [] },
     isSubMenu: { type: Boolean, default: false }
@@ -3822,7 +4082,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
-      return __props.menuData.length && visible.value ? (openBlock(), createElementBlock("div", {
+      return __props.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: "magic-editor-content-menu",
         ref_key: "menu",
@@ -3831,7 +4091,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$i, {
+            return openBlock(), createBlock(_sfc_main$k, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -3850,21 +4110,29 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             onHide: hide
           }, null, 8, ["menu-data"])
         ]))
-      ], 4)) : createCommentVNode("", true);
+      ], 4)), [
+        [vShow, visible.value]
+      ]) : createCommentVNode("", true);
     };
   }
 });
 
+const __default__$a = defineComponent({
+  name: "MEditorLayerMenu"
+});
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "LayerMenu",
+  ...__default__$a,
+  props: {
+    layerContentMenu: null
+  },
   setup(__props, { expose }) {
+    const props = __props;
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
     const isRoot = computed(() => node.value?.type === NodeType.ROOT);
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
-    const layerContentMenu = inject("layerContentMenu", []);
     const createMenuItems = (group) => group.items.map((component) => ({
       text: component.text,
       type: "button",
@@ -3919,7 +4187,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u590D\u5236",
-        icon: markRaw(DocumentCopy),
+        icon: markRaw(CopyDocument),
         display: () => !isRoot.value,
         handler: () => {
           node.value && services?.editorService.copy(node.value);
@@ -3934,7 +4202,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           node.value && services?.editorService.remove(node.value);
         }
       },
-      ...layerContentMenu
+      ...props.layerContentMenu
     ]);
     const show = (e) => {
       menu.value?.show(e);
@@ -3953,398 +4221,365 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const throttleTime = 150;
-const select = async (data, editorService) => {
-  if (!data.id) {
-    throw new Error("\u6CA1\u6709id");
-  }
-  await editorService?.select(data);
-  editorService?.get("stage")?.select(data.id);
-};
-const highlight = (data, editorService) => {
-  if (!data?.id) {
-    throw new Error("\u6CA1\u6709id");
-  }
-  editorService?.highlight(data);
-  editorService?.get("stage")?.highlight(data.id);
-};
-const useDrop = (tree, editorService) => ({
-  allowDrop: (draggingNode, dropNode, type) => {
-    const { data } = dropNode || {};
-    const { data: ingData } = draggingNode;
-    const { type: ingType } = ingData;
-    if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE)
-      return false;
-    if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE)
-      return false;
-    if (!data || !data.type)
-      return false;
-    if (["prev", "next"].includes(type))
-      return true;
-    if (data.items || data.type === "container")
-      return true;
-    return false;
-  },
-  async handleDragEnd(e) {
-    if (!tree.value)
-      return;
-    const { data: node } = e;
-    const parent = editorService?.getParentById(node.id, false);
-    const layout = await editorService?.getLayout(parent);
-    node.style.position = layout;
-    if (layout === Layout.RELATIVE) {
-      node.style.top = 0;
-      node.style.left = 0;
-    }
-    const { data } = tree.value;
-    const [page] = data;
-    editorService?.update(page);
-  }
+const _hoisted_1$4 = ["id", "onMouseenter"];
+const __default__$9 = defineComponent({
+  name: "MEditorLayerPanel"
 });
-const useStatus = (tree, editorService) => {
-  const node = ref();
-  const page = computed(() => editorService?.get("page"));
-  const expandedKeys = /* @__PURE__ */ new Map();
-  const expandNodes = () => {
-    expandedKeys.forEach((key) => {
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
+  props: {
+    layerContentMenu: null
+  },
+  setup(__props) {
+    const throttleTime = 150;
+    const services = inject("services");
+    const tree = ref();
+    const menu = ref();
+    const editorService = services?.editorService;
+    const page = computed(() => editorService?.get("page"));
+    const values = computed(() => page.value ? [page.value] : []);
+    const selectedNodes = ref([]);
+    const selectedIds = computed(() => selectedNodes.value.map((node) => node.id));
+    const isMultiSelectStatus = ref(false);
+    const spliceNodeKey = ref();
+    const filterText = ref("");
+    const defaultExpandedKeys = computed(() => selectedIds.value.length > 0 ? selectedIds.value : []);
+    editorService?.on("remove", () => {
+      setTimeout(() => {
+        tree.value?.getNode(editorService.get("node").id)?.updateChildren();
+      }, 0);
+    });
+    const select = async (data) => {
+      if (!data.id) {
+        throw new Error("\u6CA1\u6709id");
+      }
+      await editorService?.select(data);
+      editorService?.get("stage")?.select(data.id);
+    };
+    const multiSelect = async (data) => {
+      await editorService?.multiSelect(data);
+      editorService?.get("stage")?.multiSelect(data);
+    };
+    const highlight = (data) => {
+      if (!data?.id) {
+        throw new Error("\u6CA1\u6709id");
+      }
+      editorService?.highlight(data);
+      editorService?.get("stage")?.highlight(data.id);
+    };
+    const expandedKeys = /* @__PURE__ */ new Map();
+    const allowDrop = (draggingNode, dropNode, type) => {
+      const { data } = dropNode || {};
+      const { data: ingData } = draggingNode;
+      const { type: ingType } = ingData;
+      if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE)
+        return false;
+      if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE)
+        return false;
+      if (!data || !data.type)
+        return false;
+      if (["prev", "next"].includes(type))
+        return true;
+      if (data.items || data.type === "container")
+        return true;
+      return false;
+    };
+    const handleDragEnd = async (e) => {
+      if (!tree.value)
+        return;
+      const { data: node } = e;
+      const parent = editorService?.getParentById(node.id, false);
+      const layout = await editorService?.getLayout(parent);
+      node.style.position = layout;
+      if (layout === Layout.RELATIVE) {
+        node.style.top = 0;
+        node.style.left = 0;
+      }
+      const data = tree.value.getData();
+      const [page2] = data;
+      editorService?.update(page2);
+    };
+    const loadItems = (node, resolve) => {
+      if (Array.isArray(node.data)) {
+        return resolve(node.data);
+      }
+      if (Array.isArray(node.data?.items)) {
+        return resolve(node.data?.items);
+      }
+      resolve([]);
+    };
+    const handleCollapse = (data) => {
+      expandedKeys.delete(data.id);
+    };
+    const handleExpand = (data) => {
+      const parent = editorService?.getParentById(data.id);
+      if (!parent?.id)
+        return;
+      expandedKeys.set(parent.id, parent.id);
+    };
+    const filterNode = (value, data) => {
+      if (!value) {
+        return true;
+      }
+      let name = "";
+      if (data.name) {
+        name = data.name;
+      } else if (data.items) {
+        name = "container";
+      }
+      return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
+    };
+    const filterTextChangeHandler = (val) => {
+      tree.value?.filter(val);
+    };
+    const expandNodes = async () => {
       if (!tree.value)
         return;
-      tree.value.getNode(key)?.expand();
-    });
-  };
-  watchEffect(() => {
-    if (!tree.value)
-      return;
-    if (!editorService)
-      return;
-    node.value = editorService.get("node");
-    if (!node.value)
-      return;
-    tree.value.setCurrentKey(node.value.id, true);
-    const parent = editorService.get("parent");
-    if (!parent?.id)
-      return;
-    const treeNode = tree.value.getNode(parent.id);
-    treeNode?.updateChildren();
-    setTimeout(() => {
-      tree.value && Object.entries(tree.value.store.nodesMap).forEach(([id, node2]) => {
-        if (node2.expanded && node2.data.items) {
+      await nextTick();
+      tree.value && Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]) => {
+        if (node.expanded && node.data.items) {
           expandedKeys.set(id, id);
         }
       });
-      expandNodes();
-    });
-  });
-  return {
-    values: computed(() => page.value ? [page.value] : []),
-    loadItems: (node2, resolve) => {
-      if (Array.isArray(node2.data)) {
-        return resolve(node2.data);
+      expandedKeys.forEach((key) => {
+        if (!tree.value)
+          return;
+        tree.value.getNode(key)?.expand();
+      });
+    };
+    watch(
+      () => editorService?.get("nodes"),
+      (nodes) => {
+        selectedNodes.value = nodes ?? [];
       }
-      if (Array.isArray(node2.data?.items)) {
-        return resolve(node2.data?.items);
+    );
+    const setTreeKeyStatus = () => {
+      if (!tree.value)
+        return;
+      if (selectedIds.value.length === 0) {
+        tree.value.setCheckedKeys([]);
+        tree.value.setCurrentKey();
+      } else if (selectedIds.value.length === 1 && !isMultiSelectStatus.value) {
+        tree.value.setCurrentKey(selectedIds.value[0], true);
+        tree.value.setCheckedKeys([]);
+      } else {
+        tree.value.setCheckedKeys(selectedIds.value);
+        tree.value.setCurrentKey();
       }
-      resolve([]);
-    },
-    highlightNode: computed(() => editorService?.get("highlightNode")),
-    clickNode: node,
-    expandedKeys: computed(() => node.value ? [node.value.id] : []),
-    handleCollapse: (data) => {
-      expandedKeys.delete(data.id);
-    },
-    handleExpand: (data) => {
-      const parent = editorService?.getParentById(data.id);
+    };
+    watch([selectedIds, tree], async () => {
+      if (!tree.value || !editorService)
+        return;
+      const parent = editorService.get("parent");
       if (!parent?.id)
         return;
-      expandedKeys.set(parent.id, parent.id);
-    }
-  };
-};
-const useFilter = (tree) => ({
-  filterText: ref(""),
-  filterNode: (value, data) => {
-    if (!value) {
-      return true;
-    }
-    let name = "";
-    if (data.name) {
-      name = data.name;
-    } else if (data.items) {
-      name = "container";
-    }
-    return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
-  },
-  filterTextChangeHandler(val) {
-    tree.value?.filter(val);
-  }
-});
-const _sfc_main$a = defineComponent({
-  name: "magic-editor-layer-panel",
-  components: { LayerMenu: _sfc_main$b },
-  setup() {
-    const services = inject("services");
-    const tree = ref();
-    const menu = ref();
+      const treeNode = tree.value.getNode(parent.id);
+      treeNode?.updateChildren();
+      await expandNodes();
+      setTreeKeyStatus();
+    });
+    const mouseenterHandler = () => {
+      tree.value?.$el.focus();
+    };
+    const mouseleaveHandler = () => {
+      tree.value?.$el.blur();
+      isMultiSelectStatus.value = false;
+    };
+    let keycon;
+    onMounted(() => {
+      keycon = new KeyController(tree.value?.$el);
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+      const ctrl = isMac ? "meta" : "ctrl";
+      keycon.keydown(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        isMultiSelectStatus.value = true;
+      }).keyup(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        isMultiSelectStatus.value = false;
+      });
+    });
+    onUnmounted(() => {
+      keycon.destroy();
+    });
     const clicked = ref(false);
-    const editorService = services?.editorService;
+    const highlightNode = computed(() => editorService?.get("highlightNode"));
     const highlightHandler = throttle((data) => {
-      highlight(data, editorService);
+      highlight(data);
     }, throttleTime);
     const toggleClickFlag = () => {
       clicked.value = !clicked.value;
     };
-    const statusData = useStatus(tree, editorService);
-    const canHighlight = computed(
-      () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value
-    );
-    editorService?.on("remove", () => {
-      setTimeout(() => {
-        tree.value?.getNode(editorService.get("node").id)?.updateChildren();
-      }, 0);
+    const canHighlight = (data) => {
+      if (clicked.value)
+        return false;
+      return data.id === highlightNode?.value?.id && !selectedIds.value.includes(data.id) && spliceNodeKey.value !== data.id;
+    };
+    watch(isMultiSelectStatus, () => {
+      if (isMultiSelectStatus.value && selectedNodes.value.length === 1 && selectedNodes.value[0].type === NodeType.PAGE) {
+        selectedNodes.value = [];
+      }
     });
-    return {
-      tree,
-      menu,
-      ...statusData,
-      ...useDrop(tree, editorService),
-      ...useFilter(tree),
-      highlightHandler,
-      toggleClickFlag,
-      canHighlight,
-      clickHandler(data) {
+    const multiClickHandler = (data) => {
+      if (!data?.id) {
+        throw new Error("\u6CA1\u6709id");
+      }
+      if (data.type === NodeType.PAGE) {
+        tree.value?.setCheckedKeys([]);
+        return;
+      }
+      const index = selectedNodes.value.findIndex((node) => node.id === data.id);
+      if (index !== -1) {
+        selectedNodes.value.splice(index, 1);
+        spliceNodeKey.value = data.id;
+      } else {
+        selectedNodes.value = [...selectedNodes.value, data];
+      }
+      tree.value?.setCheckedKeys(selectedIds.value);
+      multiSelect(selectedIds.value);
+    };
+    const clickHandler = (data) => {
+      if (!isMultiSelectStatus.value) {
         if (services?.uiService.get("uiSelectMode")) {
           document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
           return;
         }
         tree.value?.setCurrentKey(data.id);
-        select(data, editorService);
-      },
-      async contextmenu(event, data) {
-        event.preventDefault();
-        await select(data, editorService);
-        menu.value?.show(event);
+        select(data);
+      } else {
+        multiClickHandler(data);
       }
     };
-  }
-});
-
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-const _hoisted_1$3 = ["id", "onMouseenter"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_input = resolveComponent("el-input");
-  const _component_el_tree = resolveComponent("el-tree");
-  const _component_layer_menu = resolveComponent("layer-menu");
-  const _component_el_scrollbar = resolveComponent("el-scrollbar");
-  return openBlock(), createBlock(_component_el_scrollbar, { class: "magic-editor-layer-panel" }, {
-    default: withCtx(() => [
-      renderSlot(_ctx.$slots, "layer-panel-header"),
-      createVNode(_component_el_input, {
-        class: "filterInput",
-        size: "small",
-        placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
-        clearable: "",
-        modelValue: _ctx.filterText,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filterText = $event),
-        onChange: _ctx.filterTextChangeHandler
-      }, null, 8, ["modelValue", "onChange"]),
-      _ctx.values.length ? (openBlock(), createBlock(_component_el_tree, {
-        key: 0,
-        ref: "tree",
-        "node-key": "id",
-        "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
-        draggable: "",
-        "default-expanded-keys": _ctx.expandedKeys,
-        load: _ctx.loadItems,
-        data: _ctx.values,
-        "expand-on-click-node": false,
-        "highlight-current": true,
-        props: {
-          children: "items"
-        },
-        "filter-node-method": _ctx.filterNode,
-        "allow-drop": _ctx.allowDrop,
-        onNodeClick: _ctx.clickHandler,
-        onNodeContextmenu: _ctx.contextmenu,
-        onNodeDragEnd: _ctx.handleDragEnd,
-        onNodeCollapse: _ctx.handleCollapse,
-        onNodeExpand: _ctx.handleExpand
-      }, {
-        default: withCtx(({ node, data }) => [
-          createElementVNode("div", {
-            id: data.id,
-            class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": _ctx.canHighlight && data.id === _ctx.highlightNode?.id }]),
-            onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
-            onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
-            onMouseenter: ($event) => _ctx.highlightHandler(data)
-          }, [
-            renderSlot(_ctx.$slots, "layer-node-content", {
-              node,
-              data
-            }, () => [
-              createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
-            ])
-          ], 42, _hoisted_1$3)
-        ]),
-        _: 3
-      }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd", "onNodeCollapse", "onNodeExpand"])) : createCommentVNode("", true),
-      (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(_component_layer_menu, { ref: "menu" }, null, 512)
-      ]))
-    ]),
-    _: 3
-  });
-}
-const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$1]]);
-
-const _hoisted_1$2 = {
-  key: 1,
-  class: "magic-editor-tab-panel-title"
-};
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "TabPane",
-  props: {
-    data: null
-  },
-  setup(__props) {
-    const props = __props;
-    const config = computed(() => {
-      if (typeof props.data !== "string") {
-        return props.data;
-      }
-      switch (props.data) {
-        case "component-list":
-          return {
-            type: "component",
-            icon: Coin,
-            text: "\u7EC4\u4EF6",
-            component: _sfc_main$d,
-            slots: {}
-          };
-        case "layer":
-          return {
-            type: "component",
-            icon: Files,
-            text: "\u5DF2\u9009\u7EC4\u4EF6",
-            component: LayerPanel,
-            slots: {}
-          };
-        case "code-block":
-          return {
-            type: "component",
-            icon: EditPen,
-            text: "\u4EE3\u7801\u7F16\u8F91",
-            component: _sfc_main$e,
-            slots: {}
-          };
-        default:
-          return void 0;
-      }
-    });
+    const contextmenu = async (event, data) => {
+      event.preventDefault();
+      await select(data);
+      menu.value?.show(event);
+    };
     return (_ctx, _cache) => {
-      const _component_el_tab_pane = resolveComponent("el-tab-pane");
-      return unref(config) ? (openBlock(), createBlock(_component_el_tab_pane, {
-        key: 0,
-        name: unref(config).text
-      }, {
-        label: withCtx(() => [
-          (openBlock(), createElementBlock("div", {
-            key: unref(config).text
-          }, [
-            unref(config).icon ? (openBlock(), createBlock(_sfc_main$j, {
-              key: 0,
-              icon: unref(config).icon
-            }, null, 8, ["icon"])) : createCommentVNode("", true),
-            unref(config).text ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(unref(config).text), 1)) : createCommentVNode("", true)
-          ]))
-        ]),
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(unref(config).component), mergeProps(unref(config).props || {}, toHandlers(unref(config)?.listeners || {})), createSlots({ _: 2 }, [
-            __props.data === "component-list" || unref(config).slots?.componentListPanelHeader ? {
-              name: "component-list-panel-header",
-              fn: withCtx(() => [
-                __props.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : unref(config).slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "component-list" || unref(config).slots?.componentListItem ? {
-              name: "component-list-item",
-              fn: withCtx(({ component }) => [
-                __props.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-                  key: 0,
-                  component
-                }) : unref(config).slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.componentListItem), {
-                  key: 1,
-                  component
-                }, null, 8, ["component"])) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "layer" || unref(config).slots?.layerPanelHeader ? {
-              name: "layer-panel-header",
-              fn: withCtx(() => [
-                __props.data === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : unref(config).slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "code-block" || unref(config).slots?.codeBlockPanelHeader ? {
-              name: "code-block-panel-header",
-              fn: withCtx(() => [
-                __props.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : unref(config).slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "code-block" || unref(config).slots?.codeBlockPanelTool ? {
-              name: "code-block-panel-tool",
-              fn: withCtx(({ id, data }) => [
-                data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                  key: 0,
-                  id,
+          renderSlot(_ctx.$slots, "layer-panel-header"),
+          createVNode(unref(TMagicInput), {
+            modelValue: filterText.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
+            class: "search-input",
+            size: "small",
+            placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+            clearable: "",
+            "prefix-icon": unref(Search),
+            onChange: filterTextChangeHandler
+          }, null, 8, ["modelValue", "prefix-icon"]),
+          unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
+            key: 0,
+            tabindex: "-1",
+            class: "magic-editor-layer-tree",
+            ref_key: "tree",
+            ref: tree,
+            "node-key": "id",
+            "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
+            draggable: "",
+            "default-expanded-keys": unref(defaultExpandedKeys),
+            load: loadItems,
+            data: unref(values),
+            "default-expand-all": true,
+            "expand-on-click-node": false,
+            "highlight-current": true,
+            props: {
+              children: "items"
+            },
+            "filter-node-method": filterNode,
+            "allow-drop": allowDrop,
+            "show-checkbox": isMultiSelectStatus.value || unref(selectedIds).length > 1,
+            onNodeClick: clickHandler,
+            onNodeContextmenu: contextmenu,
+            onNodeDragEnd: handleDragEnd,
+            onNodeCollapse: handleCollapse,
+            onNodeExpand: handleExpand,
+            onCheck: multiClickHandler,
+            onMousedown: toggleClickFlag,
+            onMouseup: toggleClickFlag,
+            onMouseenter: mouseenterHandler,
+            onMouseleave: mouseleaveHandler
+          }, {
+            default: withCtx(({ node, data }) => [
+              createElementVNode("div", {
+                id: data.id,
+                class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
+                onMouseenter: ($event) => unref(highlightHandler)(data)
+              }, [
+                renderSlot(_ctx.$slots, "layer-node-content", {
+                  node,
                   data
-                }) : unref(config).slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "code-block" || unref(config).slots?.codeBlockEditPanelHeader ? {
-              name: "code-block-edit-panel-header",
-              fn: withCtx(({ id }) => [
-                __props.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
-                  key: 0,
-                  id
-                }) : unref(config).slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "layer" || unref(config).slots?.layerNodeContent ? {
-              name: "layer-node-content",
-              fn: withCtx(({ data: nodeData, node }) => [
-                __props.data === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
-                  key: 0,
-                  data: nodeData,
-                  node
-                }) : unref(config).slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.layerNodeContent), {
-                  key: 1,
-                  data: nodeData,
-                  node
-                }, null, 8, ["data", "node"])) : createCommentVNode("", true)
-              ])
-            } : void 0
-          ]), 1040))
+                }, () => [
+                  createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+                ])
+              ], 42, _hoisted_1$4)
+            ]),
+            _: 3
+          }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : createCommentVNode("", true),
+          (openBlock(), createBlock(Teleport, { to: "body" }, [
+            createVNode(_sfc_main$b, {
+              ref_key: "menu",
+              ref: menu,
+              "layer-content-menu": __props.layerContentMenu
+            }, null, 8, ["layer-content-menu"])
+          ]))
         ]),
         _: 3
-      }, 8, ["name"])) : createCommentVNode("", true);
+      });
     };
   }
 });
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "Sidebar",
+const _hoisted_1$3 = {
+  key: 1,
+  class: "magic-editor-tab-panel-title"
+};
+const __default__$8 = defineComponent({
+  name: "MEditorSidebar"
+});
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   props: {
-    data: { 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, { expose }) {
     const props = __props;
+    const uiComponent = getConfig$1("components").tabPane;
     const activeTabName = ref(props.data?.status);
+    const getItemConfig = (data) => {
+      const map = {
+        "component-list": {
+          $key: "component-list",
+          type: "component",
+          icon: Coin,
+          text: "\u7EC4\u4EF6",
+          component: _sfc_main$d,
+          slots: {}
+        },
+        layer: {
+          $key: "layer",
+          type: "component",
+          icon: Files,
+          text: "\u5DF2\u9009\u7EC4\u4EF6",
+          props: {
+            layerContentMenu: props.layerContentMenu
+          },
+          component: _sfc_main$a,
+          slots: {}
+        },
+        "code-block": {
+          $key: "code-block",
+          type: "component",
+          icon: EditPen,
+          text: "\u4EE3\u7801\u7F16\u8F91",
+          component: _sfc_main$e,
+          slots: {}
+        }
+      };
+      return typeof data === "string" ? map[data] : data;
+    };
+    const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
     watch(
       () => props.data.status,
       (status) => {
@@ -4355,8 +4590,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       activeTabName
     });
     return (_ctx, _cache) => {
-      const _component_el_tabs = resolveComponent("el-tabs");
-      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(_component_el_tabs, {
+      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicTabs), {
         key: 0,
         class: "m-editor-sidebar",
         modelValue: activeTabName.value,
@@ -4365,60 +4599,91 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         "tab-position": "left"
       }, {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$9, {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(uiComponent).component), {
               key: index,
-              data: item
-            }, createSlots({ _: 2 }, [
-              item === "layer" ? {
-                name: "layer-panel-header",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "layer-panel-header")
-                ])
-              } : void 0,
-              item === "layer" ? {
-                name: "layer-node-content",
-                fn: withCtx(({ node, data }) => [
-                  renderSlot(_ctx.$slots, "layer-node-content", {
-                    data,
-                    node
-                  })
-                ])
-              } : void 0,
-              item === "component-list" ? {
-                name: "component-list-panel-header",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "component-list-panel-header")
-                ])
-              } : void 0,
-              item === "component-list" ? {
-                name: "component-list-item",
-                fn: withCtx(({ component }) => [
-                  renderSlot(_ctx.$slots, "component-list-item", { component })
-                ])
-              } : void 0,
-              item === "code-block" ? {
-                name: "code-block-panel-header",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "code-block-panel-header")
-                ])
-              } : void 0,
-              item === "code-block" ? {
-                name: "code-block-panel-tool",
-                fn: withCtx(({ id, data }) => [
-                  renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                    id,
-                    data
-                  })
-                ])
-              } : void 0,
-              item === "code-block" ? {
-                name: "code-block-edit-panel-header",
-                fn: withCtx(({ id }) => [
-                  renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-                ])
-              } : void 0
-            ]), 1032, ["data"]);
+              name: config.text
+            }, {
+              label: withCtx(() => [
+                (openBlock(), createElementBlock("div", {
+                  key: config.text
+                }, [
+                  config.icon ? (openBlock(), createBlock(_sfc_main$n, {
+                    key: 0,
+                    icon: config.icon
+                  }, null, 8, ["icon"])) : createCommentVNode("", true),
+                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+                ]))
+              ]),
+              default: withCtx(() => [
+                config ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+                  config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                    name: "component-list-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "component-list" || config.slots?.componentListItem ? {
+                    name: "component-list-item",
+                    fn: withCtx(({ component }) => [
+                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+                        key: 0,
+                        component
+                      }) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+                        key: 1,
+                        component
+                      }, null, 8, ["component"])) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                    name: "layer-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                    name: "code-block-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                    name: "code-block-panel-tool",
+                    fn: withCtx(({ id, data }) => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                        key: 0,
+                        id,
+                        data
+                      }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
+                    name: "code-block-edit-panel-header",
+                    fn: withCtx(({ id }) => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
+                        key: 0,
+                        id
+                      }) : config.slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerNodeContent ? {
+                    name: "layer-node-content",
+                    fn: withCtx(({ data: nodeData, node }) => [
+                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+                        key: 0,
+                        data: nodeData,
+                        node
+                      }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+                        key: 1,
+                        data: nodeData,
+                        node
+                      }, null, 8, ["data", "node"])) : createCommentVNode("", true)
+                    ])
+                  } : void 0
+                ]), 1040)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["name"]);
           }), 128))
         ]),
         _: 3
@@ -4427,12 +4692,60 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$2 = {
+  key: 0,
+  class: "m-editor-breadcrumb"
+};
+const _hoisted_2$1 = { key: 0 };
+const __default__$7 = defineComponent({
+  name: "MEditorBreadcrumb"
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const node = computed(() => editorService?.get("node"));
+    const nodes = computed(() => editorService?.get("nodes") || []);
+    const root = computed(() => editorService?.get("root"));
+    const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
+    const select = async (node2) => {
+      await editorService?.select(node2);
+      editorService?.get("stage")?.select(node2.id);
+    };
+    return (_ctx, _cache) => {
+      return unref(nodes).length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(path), (item, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            createVNode(unref(TMagicButton), {
+              text: "",
+              disabled: item.id === unref(node)?.id,
+              onClick: ($event) => select(item)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(item.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["disabled", "onClick"]),
+            index < unref(path).length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
 const _hoisted_1$1 = {
   key: 1,
   style: { "width": "21px" }
 };
+const __default__$6 = defineComponent({
+  name: "MEditorPageBarScrollContainer"
+});
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "PageBarScrollContainer",
+  ...__default__$6,
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4513,14 +4826,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$j, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$j, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$n, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -4536,7 +4849,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$j, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$n, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -4545,8 +4858,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = { class: "m-editor-page-bar-title" };
+const __default__$5 = defineComponent({
+  name: "MEditorPageBar"
+});
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "PageBar",
+  ...__default__$5,
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4566,9 +4882,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       editorService?.remove(node);
     };
     return (_ctx, _cache) => {
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_icon = resolveComponent("el-icon");
-      const _component_el_popover = resolveComponent("el-popover");
       return openBlock(), createBlock(_sfc_main$7, null, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root) && unref(root).items || [], (item) => {
@@ -4579,7 +4892,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("div", _hoisted_2, [
                 renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                  createVNode(_component_el_tooltip, {
+                  createVNode(unref(TMagicTooltip), {
                     effect: "dark",
                     placement: "top-start",
                     content: item.name
@@ -4591,14 +4904,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   }, 1032, ["content"])
                 ])
               ]),
-              createVNode(_component_el_popover, {
+              createVNode(unref(TMagicPopover), {
                 "popper-class": "page-bar-popover",
                 placement: "top",
                 width: 160,
                 trigger: "hover"
               }, {
                 reference: withCtx(() => [
-                  createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                  createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
                     default: withCtx(() => [
                       createVNode(unref(CaretBottom))
                     ]),
@@ -4608,7 +4921,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$i, {
+                      createVNode(_sfc_main$k, {
                         data: {
                           type: "button",
                           text: "\u590D\u5236",
@@ -4616,7 +4929,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$i, {
+                      createVNode(_sfc_main$k, {
                         data: {
                           type: "button",
                           text: "\u5220\u9664",
@@ -4650,6 +4963,10 @@ class ScrollViewer extends EventEmitter {
   height = 0;
   translateXCorrectionValue = 0;
   translateYCorrectionValue = 0;
+  correctionScrollSize = {
+    width: 0,
+    height: 0
+  };
   resizeObserver = new ResizeObserver(() => {
     this.setSize();
     this.setScrollSize();
@@ -4659,6 +4976,12 @@ class ScrollViewer extends EventEmitter {
     this.container = options.container;
     this.target = options.target;
     this.zoom = options.zoom;
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize
+      };
+    }
     this.container.addEventListener("wheel", this.wheelHandler, false);
     this.setSize();
     this.setScrollSize();
@@ -4721,9 +5044,9 @@ class ScrollViewer extends EventEmitter {
   }
   setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-    this.scrollWidth = targetRect.width * this.zoom + 100;
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
     const targetMarginTop = Number(this.target.style.marginTop) || 0;
-    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
     let left;
     let top;
     if (this.scrollWidth < this.width) {
@@ -4756,8 +5079,11 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
+const __default__$4 = defineComponent({
+  name: "MEditorScrollBar"
+});
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "ScrollBar",
+  ...__default__$4,
   props: {
     size: null,
     scrollSize: null,
@@ -4842,14 +5168,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
+const __default__$3 = defineComponent({
+  name: "MEditorScrollViewer"
+});
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "ScrollViewer",
+  ...__default__$3,
   props: {
     width: { default: 0 },
     height: { default: 0 },
     wrapWidth: { default: 0 },
     wrapHeight: { default: 0 },
-    zoom: { default: 1 }
+    zoom: { default: 1 },
+    correctionScrollSize: { default: () => ({
+      width: 0,
+      height: 0
+    }) }
   },
   setup(__props, { expose }) {
     const props = __props;
@@ -4872,7 +5205,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       scrollViewer = new ScrollViewer({
         container: container.value,
         target: el.value,
-        zoom: props.zoom
+        zoom: props.zoom,
+        correctionScrollSize: props.correctionScrollSize
       });
       scrollViewer.on("scroll", (data) => {
         hOffset.value = data.scrollLeft;
@@ -4940,10 +5274,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$2 = defineComponent({
+  name: "MEditorViewerMenu"
+});
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "ViewerMenu",
+  ...__default__$2,
   props: {
-    isMultiSelect: { type: Boolean, default: false }
+    isMultiSelect: { type: Boolean, default: false },
+    stageContentMenu: null
   },
   setup(__props, { expose }) {
     const props = __props;
@@ -4956,8 +5294,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const nodes = computed(() => editorService?.get("nodes"));
     const parent = computed(() => editorService?.get("parent"));
     const stage = computed(() => editorService?.get("stage"));
-    const stageContentMenu = inject("stageContentMenu", []);
-    const menuData = reactive([
+    const menuData = computed(() => [
       {
         type: "button",
         text: "\u6C34\u5E73\u5C45\u4E2D",
@@ -4971,7 +5308,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u590D\u5236",
-        icon: markRaw(DocumentCopy),
+        icon: markRaw(CopyDocument),
         handler: () => {
           nodes.value && editorService?.copy(nodes.value);
           canPaste.value = true;
@@ -4980,6 +5317,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u7C98\u8D34",
+        icon: markRaw(DocumentCopy),
         display: () => canPaste.value,
         handler: () => {
           const rect = menu.value?.$el.getBoundingClientRect();
@@ -5059,7 +5397,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           editorService?.get("stage").clearGuides();
         }
       },
-      ...stageContentMenu
+      ...props.stageContentMenu
     ]);
     watch(
       parent,
@@ -5083,7 +5421,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     expose({ show });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$c, {
-        "menu-data": menuData,
+        "menu-data": unref(menuData),
         ref_key: "menu",
         ref: menu
       }, null, 8, ["menu-data"]);
@@ -5091,8 +5429,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$1 = defineComponent({
+  name: "MEditorStage"
+});
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "Stage",
+  ...__default__$1,
+  props: {
+    stageContentMenu: null
+  },
   setup(__props) {
     let stage = null;
     let runtime = null;
@@ -5109,7 +5453,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const zoom = computed(() => services?.uiService.get("zoom") || 1);
     const node = computed(() => services?.editorService.get("node"));
     watchEffect(() => {
-      if (stage)
+      if (stage || !page.value)
         return;
       if (!stageContainer.value)
         return;
@@ -5139,6 +5483,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         runtime.updateRootConfig?.(cloneDeep(toRaw(root2)));
       }
     });
+    watch(page, (page2) => {
+      if (runtime && page2) {
+        runtime.updatePageId?.(page2.id);
+        nextTick(() => {
+          stage?.select(page2.id);
+        });
+      }
+    });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         services?.uiService.set("stageContainerRect", {
@@ -5211,7 +5563,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         height: unref(stageRect)?.height,
         "wrap-width": unref(stageContainerRect)?.width,
         "wrap-height": unref(stageContainerRect)?.height,
-        zoom: unref(zoom)
+        zoom: unref(zoom),
+        "correction-scroll-size": {
+          width: 60,
+          height: 50
+        }
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
@@ -5227,8 +5583,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$3, {
               ref_key: "menu",
               ref: menu,
-              "is-multi-select": unref(isMultiSelect)
-            }, null, 8, ["is-multi-select"])
+              "is-multi-select": unref(isMultiSelect),
+              "stage-content-menu": __props.stageContentMenu
+            }, null, 8, ["is-multi-select", "stage-content-menu"])
           ]))
         ]),
         _: 1
@@ -5237,8 +5594,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__ = defineComponent({
+  name: "MEditorWorkspace"
+});
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "Workspace",
+  ...__default__,
+  props: {
+    stageContentMenu: null
+  },
   setup(__props) {
     const services = inject("services");
     const workspace = ref();
@@ -5347,10 +5710,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ref_key: "workspace",
         ref: workspace
       }, [
+        createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          (openBlock(), createBlock(_sfc_main$2, {
-            key: unref(page)?.id
-          }))
+          unref(page) ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            "stage-content-menu": __props.stageContentMenu
+          }, null, 8, ["stage-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content"),
         createVNode(_sfc_main$6, null, {
@@ -5390,11 +5755,11 @@ const componentListService = new ComponentList();
 const _sfc_main = defineComponent({
   name: "m-editor",
   components: {
-    NavMenu: _sfc_main$h,
-    Sidebar: _sfc_main$8,
+    NavMenu: _sfc_main$j,
+    Sidebar: _sfc_main$9,
     Workspace: _sfc_main$1,
-    PropsPanel: _sfc_main$g,
-    Framework: _sfc_main$k
+    PropsPanel: _sfc_main$i,
+    Framework: _sfc_main$l
   },
   props: {
     modelValue: {
@@ -5409,6 +5774,10 @@ const _sfc_main = defineComponent({
     sidebar: {
       type: Object
     },
+    menu: {
+      type: Object,
+      default: () => ({ left: [], right: [] })
+    },
     layerContentMenu: {
       type: Array,
       default: () => []
@@ -5417,10 +5786,6 @@ const _sfc_main = defineComponent({
       type: Array,
       default: () => []
     },
-    menu: {
-      type: Object,
-      default: () => ({ left: [], right: [] })
-    },
     render: {
       type: Function
     },
@@ -5454,7 +5819,7 @@ const _sfc_main = defineComponent({
     },
     containerHighlightClassName: {
       type: String,
-      default: CONTAINER_HIGHLIGHT_CLASS
+      default: CONTAINER_HIGHLIGHT_CLASS_NAME
     },
     containerHighlightDuration: {
       type: Number,
@@ -5478,14 +5843,23 @@ const _sfc_main = defineComponent({
   emits: ["props-panel-mounted", "update:modelValue"],
   setup(props, { emit }) {
     editorService.on("root-change", (value) => {
-      const node = editorService.get("node");
-      const nodeId = node?.id || props.defaultSelected;
-      if (nodeId && node !== value) {
-        editorService.select(nodeId);
-      } else {
+      const nodeId = editorService.get("node")?.id || props.defaultSelected;
+      let node;
+      if (nodeId) {
+        node = editorService.getNodeById(nodeId);
+      }
+      if (node && node !== value) {
+        editorService.select(node.id);
+      } else if (value?.items?.length) {
+        editorService.select(value.items[0]);
+      } else if (value?.id) {
         editorService.set("nodes", [value]);
+        editorService.set("parent", null);
+        editorService.set("page", null);
+      }
+      if (toRaw(value) !== toRaw(editorService.get("root"))) {
+        emit("update:modelValue", value);
       }
-      emit("update:modelValue", toRaw(editorService.get("root")));
     });
     watch(
       () => props.modelValue,
@@ -5567,8 +5941,7 @@ const _sfc_main = defineComponent({
       codeBlockService
     };
     provide("services", services);
-    provide("layerContentMenu", props.layerContentMenu);
-    provide("stageContentMenu", props.stageContentMenu);
+    provide("codeOptions", props.codeOptions);
     provide(
       "stageOptions",
       reactive({
@@ -5588,21 +5961,32 @@ const _sfc_main = defineComponent({
   }
 });
 
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nav_menu = resolveComponent("nav-menu");
-  const _component_sidebar = resolveComponent("sidebar");
-  const _component_workspace = resolveComponent("workspace");
-  const _component_props_panel = resolveComponent("props-panel");
-  const _component_framework = resolveComponent("framework");
-  return openBlock(), createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
+  const _component_NavMenu = resolveComponent("NavMenu");
+  const _component_Sidebar = resolveComponent("Sidebar");
+  const _component_Workspace = resolveComponent("Workspace");
+  const _component_PropsPanel = resolveComponent("PropsPanel");
+  const _component_Framework = resolveComponent("Framework");
+  return openBlock(), createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
+        createVNode(_component_NavMenu, { data: _ctx.menu }, null, 8, ["data"])
       ])
     ]),
     sidebar: withCtx(() => [
       renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_sidebar, { data: _ctx.sidebar }, {
+        createVNode(_component_Sidebar, {
+          data: _ctx.sidebar,
+          "layer-content-menu": _ctx.layerContentMenu
+        }, {
           "layer-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "layer-panel-header")
           ]),
@@ -5631,12 +6015,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
           ]),
           _: 3
-        }, 8, ["data"])
+        }, 8, ["data", "layer-content-menu"])
       ])
     ]),
     workspace: withCtx(() => [
       renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_workspace, null, {
+        createVNode(_component_Workspace, { "stage-content-menu": _ctx.stageContentMenu }, {
           stage: withCtx(() => [
             renderSlot(_ctx.$slots, "stage")
           ]),
@@ -5650,12 +6034,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "page-bar-popover", { page })
           ]),
           _: 3
-        })
+        }, 8, ["stage-content-menu"])
       ])
     ]),
     "props-panel": withCtx(() => [
       renderSlot(_ctx.$slots, "props-panel", {}, () => [
-        createVNode(_component_props_panel, {
+        createVNode(_component_PropsPanel, {
           onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
         }, {
           "props-panel-header": withCtx(() => [
@@ -5682,13 +6066,13 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    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("magic-code-editor", _sfc_main$o);
-    app.component("m-fields-code-select", _sfc_main$q);
+    app.component("m-fields-ui-select", _sfc_main$r);
+    app.component("m-fields-code-link", _sfc_main$t);
+    app.component("m-fields-vs-code", _sfc_main$u);
+    app.component("magic-code-editor", _sfc_main$q);
+    app.component("m-fields-code-select", _sfc_main$s);
   }
 };
 
-export { COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$q as CodeSelect, CodeSelectOp, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$j as Icon, Keys, LayerOffset, LayerPanel, Layout, _sfc_main$g as PropsPanel, _sfc_main$o as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$i as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$s as CodeSelect, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$n as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$o as LayoutContainer, _sfc_main$i as PropsPanel, _sfc_main$q as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$k as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.mjs.map