@tmagic/editor 1.2.0-beta.9 → 1.2.1

package/dist/{tmagic-editor.umd.js → tmagic-editor.umd.cjs}

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@element-plus/icons-vue'), require('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@element-plus/icons-vue', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.iconsVue, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.KeyController));
-})(this, (function (exports, vue, serialize, lodashEs, design, iconsVue, monaco, StageCore, schema, utils, events, core, Gesto, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/form'), require('@tmagic/schema'), require('@tmagic/design'), require('monaco-editor'), require('@tmagic/stage'), require('gesto'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', '@tmagic/form', '@tmagic/schema', '@tmagic/design', 'monaco-editor', '@tmagic/stage', 'gesto', '@tmagic/utils', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.form, global.schema, global.design, global.monaco, global.StageCore, global.Gesto, global.utils, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, serialize, iconsVue, lodashEs, form, schema, design, monaco, StageCore, Gesto, utils, events, core, KeyController) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
@@ -30,8 +30,11 @@
   const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
-    __name: "Code",
+  const __default__$t = vue.defineComponent({
+    name: "MEditorCode"
+  });
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$t,
     props: {
       model: null,
       name: null,
@@ -60,8 +63,11 @@
     }
   });
 
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeLink",
+  const __default__$s = vue.defineComponent({
+    name: "MEditorCodeLink"
+  });
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$s,
     props: {
       config: null,
       model: null,
@@ -130,57 +136,55 @@
     }
   });
 
-  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$g = ["src"];
+  const __default__$r = vue.defineComponent({
+    name: "MEditorIcon"
+  });
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$r,
+    props: {
+      icon: null
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 0,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.Edit))
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 1,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$g)
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+          key: 2,
+          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
+        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 3,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
+          ]),
+          _: 1
+        }));
+      };
+    }
+  });
 
-  const _hoisted_1$e = { class: "tool-bar" };
-  const _hoisted_2$6 = /* @__PURE__ */ vue.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 _hoisted_1$f = { class: "m-fields-code-select" };
+  const __default__$q = vue.defineComponent({
+    name: "MEditorCodeSelect"
+  });
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeSelect",
+    ...__default__$q,
     props: {
       config: null,
       model: null,
@@ -192,119 +196,119 @@
     setup(__props, { emit }) {
       const props = __props;
       const services = vue.inject("services");
-      const form = vue.inject("mForm");
-      const selectConfig = vue.computed(() => {
+      const mForm = vue.inject("mForm");
+      const codeDsl = vue.computed(() => services?.codeBlockService.getCodeDslSync());
+      const tableConfig = vue.computed(() => {
         const defaultConfig = {
-          multiple: true,
-          options: async () => {
-            const codeDsl = await services?.codeBlockService.getCodeDsl();
-            if (codeDsl) {
-              return lodashEs.map(codeDsl, (value, key) => ({
-                text: `${value.name}\uFF08${key}\uFF09`,
-                label: `${value.name}\uFF08${key}\uFF09`,
-                value: key
-              }));
+          dropSort: false,
+          enableFullscreen: false,
+          border: true,
+          operateColWidth: 60,
+          items: [
+            {
+              type: "select",
+              label: "\u4EE3\u7801\u5757",
+              name: "codeId",
+              width: "200px",
+              options: () => {
+                if (codeDsl.value) {
+                  return lodashEs.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 (lodashEs.isEmpty(row.params) || !row.params) {
+                  form.createValues(mForm, paramsConfig, {}, row.params);
+                }
+                return paramsConfig;
+              }
             }
-            return [];
-          }
+          ]
         };
         return {
           ...defaultConfig,
-          ...props.config.selectConfig
+          ...props.config.tableConfig
         };
       });
-      const fieldKey = vue.ref("");
-      const multiple = vue.ref(true);
-      const lastTagSnapshot = vue.ref([]);
-      vue.watchEffect(async () => {
-        if (!props.model[props.name])
-          return;
-        const combineNames = await Promise.all(
-          props.model[props.name].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;
-          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) {
-          lastTagSnapshot.value = form?.initValues[props.name] || [];
-          opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-          diffValues = lodashEs.xor(codeIds, lastTagSnapshot.value);
+      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
+      vue.watch(
+        () => props.model[props.name],
+        (value) => {
+          if (lodashEs.isEmpty(value)) {
+            props.model[props.name] = {
+              hookType: schema.HookType.CODE,
+              hookData: []
+            };
+          }
+        },
+        {
+          immediate: true
         }
-        await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
+      );
+      const changeHandler = async () => {
+        emit("change", props.model[props.name]);
       };
-      const viewHandler = async () => {
-        if (props.model[props.name].length === 0) {
-          design.tMagicMessage.error("\u8BF7\u5148\u7ED1\u5B9A\u4EE3\u7801\u5757");
-          return;
-        }
-        await services?.codeBlockService.setCombineIds(props.model[props.name]);
-        await services?.codeBlockService.setMode(CodeEditorMode.LIST);
-        services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
+      const getParamsConfig = (codeId) => {
+        if (!codeDsl.value)
+          return [];
+        const paramStatements = codeDsl.value[codeId]?.params;
+        if (lodashEs.isEmpty(paramStatements))
+          return [];
+        return paramStatements.map((paramState) => ({
+          labelWidth: "100px",
+          text: paramState.name,
+          ...paramState
+        }));
+      };
+      const editCode = (codeId) => {
+        services?.codeBlockService.setCodeEditorContent(true, codeId);
       };
       return (_ctx, _cache) => {
-        const _component_m_fields_select = vue.resolveComponent("m-fields-select");
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-fields-code-select",
-          key: fieldKey.value
-        }, [
-          vue.createVNode(vue.unref(design.TMagicCard), { shadow: "never" }, {
-            header: vue.withCtx(() => [
-              vue.createVNode(_component_m_fields_select, {
-                config: vue.unref(selectConfig),
-                model: __props.model,
-                prop: __props.prop,
-                name: __props.name,
-                size: __props.size,
-                onChange: changeHandler
-              }, null, 8, ["config", "model", "prop", "name", "size"])
-            ]),
-            default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$e, [
-                vue.createVNode(vue.unref(design.TMagicTooltip), {
-                  class: "tool-item",
-                  effect: "dark",
-                  content: "\u67E5\u770B\u4EE3\u7801\u5757",
-                  placement: "top"
-                }, {
-                  default: vue.withCtx(() => [
-                    (vue.openBlock(), vue.createElementBlock("svg", {
-                      onClick: viewHandler,
-                      preserveAspectRatio: "xMidYMid meet",
-                      viewBox: "0 0 24 24",
-                      width: "15px",
-                      height: "15px",
-                      "data-v-65a7fb6c": ""
-                    }, _hoisted_3$3))
-                  ]),
-                  _: 1
-                })
-              ])
+        const _component_m_form_table = vue.resolveComponent("m-form-table");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+          vue.createVNode(_component_m_form_table, {
+            config: vue.unref(tableConfig),
+            model: __props.model[__props.name],
+            name: "hookData",
+            enableToggleMode: false,
+            prop: __props.prop,
+            size: __props.size,
+            onChange: changeHandler
+          }, {
+            operateCol: vue.withCtx(({ scope }) => [
+              scope.row.codeId ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                key: 0,
+                icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                class: "edit-icon",
+                onClick: ($event) => editCode(scope.row.codeId)
+              }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
             ]),
             _: 1
-          })
+          }, 8, ["config", "model", "prop", "size"])
         ]);
       };
     }
   });
 
-  const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _hoisted_1$e = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const __default__$p = vue.defineComponent({
+    name: "MEditorUISelect"
+  });
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
-    __name: "UISelect",
+    ...__default__$p,
     props: {
       config: null,
       model: null,
@@ -366,7 +370,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$d
+              _hoisted_1$e
             ]),
             _: 1
           }, 8, ["icon"])
@@ -414,12 +418,15 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
+  const __default__$o = vue.defineComponent({
+    name: "MEditorCodeEditor"
+  });
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeEditor",
+    ...__default__$o,
     props: {
       initValues: null,
       modifiedValues: null,
-      type: { default: "" },
+      type: null,
       language: { default: "javascript" },
       options: { default: () => ({
         tabSize: 2
@@ -544,46 +551,207 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _hoisted_1$c = ["src"];
+  const __default__$n = vue.defineComponent({
+    name: "MEditorResizer"
+  });
   const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
-    __name: "Icon",
+    ...__default__$n,
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const target = vue.ref();
+      let getso;
+      vue.onMounted(() => {
+        if (!target.value)
+          return;
+        getso = new Gesto__default.default(target.value, {
+          container: window,
+          pinchOutside: true
+        }).on("drag", (e) => {
+          if (!target.value)
+            return;
+          emit("change", e.deltaX);
+        });
+      });
+      vue.onUnmounted(() => {
+        getso?.unset();
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("span", {
+          ref_key: "target",
+          ref: target,
+          class: "m-editor-resizer"
+        }, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 512);
+      };
+    }
+  });
+
+  const __default__$m = vue.defineComponent({
+    name: "MEditorLayout"
+  });
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$m,
     props: {
-      icon: null
+      left: null,
+      right: null,
+      minLeft: { default: 46 },
+      minRight: { default: 1 },
+      minCenter: { default: 5 },
+      leftClass: null,
+      rightClass: null,
+      centerClass: null
     },
-    setup(__props) {
+    emits: ["update:left", "change", "update:right"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const el = vue.ref();
+      const hasLeft = vue.computed(() => typeof props.left !== "undefined");
+      const hasRight = vue.computed(() => typeof props.right !== "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
+          });
+        }
+      });
+      vue.onMounted(() => {
+        if (el.value) {
+          resizerObserver.observe(el.value);
+        }
+      });
+      vue.onUnmounted(() => {
+        resizerObserver.disconnect();
+      });
+      const center = vue.ref(0);
+      const changeLeft = (deltaX) => {
+        if (typeof props.left === "undefined")
+          return;
+        let left = Math.max(props.left + deltaX, props.minLeft) || 0;
+        emit("update:left", left);
+        if (clientWidth - left - (props.right || 0) <= 0) {
+          left = props.left;
+        }
+        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 !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 0,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(iconsVue.Edit))
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 1,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$c)
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
-          key: 2,
-          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
-        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 3,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
-          ]),
-          _: 1
-        }));
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "el",
+          ref: el,
+          class: "m-editor-layout"
+        }, [
+          vue.unref(hasLeft) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
+              style: vue.normalizeStyle(`width: ${__props.left}px`)
+            }, [
+              vue.renderSlot(_ctx.$slots, "left")
+            ], 6),
+            vue.createVNode(_sfc_main$o, { onChange: changeLeft })
+          ], 64)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
+            style: vue.normalizeStyle(`width: ${center.value}px`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "center")
+          ], 6),
+          vue.unref(hasRight) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createVNode(_sfc_main$o, { onChange: changeRight }),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
+              style: vue.normalizeStyle(`width: ${__props.right}px`)
+            }, [
+              vue.renderSlot(_ctx.$slots, "right")
+            ], 6)
+          ], 64)) : vue.createCommentVNode("", true)
+        ], 512);
       };
     }
   });
 
+  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 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);
@@ -713,6 +881,14 @@
           this.pluginOptionsList[methodName2].push(method);
       });
     }
+    removeAllPlugins() {
+      Object.keys(this.pluginOptionsList).forEach((key) => {
+        this.pluginOptionsList[key] = [];
+      });
+      Object.keys(this.middleware).forEach((key) => {
+        this.middleware[key] = [];
+      });
+    }
     async doTask() {
       this.doingTask = true;
       let task = this.taskList.shift();
@@ -730,9 +906,9 @@
       codeDsl: null,
       id: "",
       editable: true,
-      mode: CodeEditorMode.EDITOR,
       combineIds: [],
-      undeletableList: []
+      undeletableList: [],
+      relations: {}
     });
     constructor() {
       super([
@@ -744,37 +920,45 @@
         "setCodeDslById",
         "setCodeEditorShowStatus",
         "setEditStatus",
-        "setMode",
         "setCombineIds",
         "setUndeleteableList",
         "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] || {};
@@ -782,15 +966,15 @@
           ...codeDsl,
           [id]: {
             ...existContent,
-            ...codeConfig
+            ...codeConfigProcessed
           }
         };
       }
       await this.setCodeDsl(codeDsl);
     }
     async getCodeDslByIds(ids) {
-      const codeDsl = await this.getCodeDsl();
-      return lodashEs.pick(codeDsl, ids);
+      const codeDsl2 = await this.getCodeDsl();
+      return lodashEs.pick(codeDsl2, ids);
     }
     async setCodeEditorShowStatus(status) {
       this.state.isShowCodeEditor = status;
@@ -798,10 +982,10 @@
     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() {
@@ -813,81 +997,31 @@
     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;
     }
-    getMode() {
-      return this.state.mode;
-    }
-    async setMode(mode) {
-      this.state.mode = mode;
-    }
     async setCombineIds(ids) {
       this.state.combineIds = ids;
     }
     getCombineIds() {
       return this.state.combineIds;
     }
-    async setCombineRelation(compId, diffCodeIds, opFlag, hook) {
-      const codeDsl = lodashEs.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 (lodashEs.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) {
-        lodashEs.forIn(codeDsl, (codeBlockContent, codeId) => {
-          if (codeId === diffCodeIds[0]) {
-            codeBlockContent.comps = {
-              ...codeBlockContent?.comps || {},
-              [compId]: [hook]
-            };
-          } else if (lodashEs.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);
+    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;
@@ -895,6 +1029,15 @@
     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 = lodashEs.omit(currentDsl, codeIds);
@@ -910,31 +1053,67 @@
       return await this.getUniqueId();
     }
     async deleteCompsInRelation(node) {
-      const codeDsl = lodashEs.cloneDeep(await this.getCodeDsl());
-      if (!codeDsl)
+      const codeDsl2 = lodashEs.cloneDeep(await this.getCodeDsl());
+      if (!codeDsl2)
         return;
-      this.recurseNodes(node, codeDsl);
-      this.setCodeDsl(codeDsl);
+      this.refreshRelationDeep(node, codeDsl2);
+      this.setCodeDsl(codeDsl2);
     }
-    destroy() {
+    resetState() {
       this.state.isShowCodeEditor = false;
       this.state.codeDsl = null;
       this.state.id = "";
       this.state.editable = true;
-      this.state.mode = CodeEditorMode.EDITOR;
       this.state.combineIds = [];
       this.state.undeletableList = [];
     }
-    recurseNodes(node, codeDsl) {
+    destroy() {
+      this.resetState();
+      this.removeAllListeners();
+      this.removeAllPlugins();
+    }
+    refreshRelationDeep(node, codeDsl2) {
       if (!node.id)
         return;
-      lodashEs.forIn(codeDsl, (codeBlockContent) => {
+      lodashEs.forIn(codeDsl2, (codeBlockContent) => {
         const compsContent = codeBlockContent.comps || {};
         codeBlockContent.comps = lodashEs.omit(compsContent, node.id);
       });
       if (!lodashEs.isEmpty(node.items)) {
         node.items.forEach((item) => {
-          this.recurseNodes(item, codeDsl);
+          this.refreshRelationDeep(item, codeDsl2);
+        });
+      }
+    }
+    recurseMNode(node, relations) {
+      lodashEs.forIn(node, (value, key) => {
+        let unConfirmedValue = { id: node.id };
+        if (value?.hookType === schema.HookType.CODE && !lodashEs.isEmpty(value.hookData)) {
+          value.hookData.forEach((relationItem) => {
+            if (!relationItem.codeId)
+              return;
+            if (!relations[relationItem.codeId]) {
+              relations[relationItem.codeId] = {};
+            }
+            const codeItem = relations[relationItem.codeId];
+            if (lodashEs.isEmpty(codeItem[node.id])) {
+              codeItem[node.id] = [];
+            }
+            codeItem[node.id].push(key);
+          });
+          return;
+        }
+        if (typeof value === "object") {
+          unConfirmedValue = {
+            ...unConfirmedValue,
+            ...value
+          };
+          this.recurseMNode(unConfirmedValue, relations);
+        }
+      });
+      if (!lodashEs.isEmpty(node.items)) {
+        node.items.forEach((item) => {
+          this.recurseMNode(item, relations);
         });
       }
     }
@@ -1018,8 +1197,9 @@
         this.state.pageSteps[this.state.pageId] = undoRedo;
       }
       this.setCanUndoRedo();
+      this.emit("page-change", this.state.pageSteps[this.state.pageId]);
     }
-    empty() {
+    resetState() {
       this.state.pageId = void 0;
       this.state.pageSteps = {};
       this.state.canRedo = false;
@@ -1050,8 +1230,9 @@
       return state;
     }
     destroy() {
-      this.empty();
+      this.resetState();
       this.removeAllListeners();
+      this.removeAllPlugins();
     }
     getUndoRedo() {
       if (!this.state.pageId)
@@ -1131,6 +1312,7 @@
     }
     destroy() {
       this.removeAllListeners();
+      this.removeAllPlugins();
     }
     getValueAndProtocol(value) {
       let protocol2 = "";
@@ -1199,10 +1381,14 @@
   };
   const getInitPositionStyle = (style = {}, layout) => {
     if (layout === Layout.ABSOLUTE) {
-      return {
+      const newStyle = {
         ...style,
         position: "absolute"
       };
+      if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") {
+        newStyle.left = 0;
+      }
+      return newStyle;
     }
     if (layout === Layout.RELATIVE) {
       return getRelativeStyle(style);
@@ -1303,6 +1489,10 @@
       left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
     };
   };
+  const serializeConfig = (config) => serialize__default.default(config, {
+    space: 2,
+    unsafe: true
+  }).replace(/"(\w+)":\s/g, "$1: ");
 
   class Props extends BaseService {
     state = vue.reactive({
@@ -1344,7 +1534,7 @@
         this.setPropsValue(utils.toLine(type), values[type]);
       });
     }
-    setPropsValue(type, value) {
+    async setPropsValue(type, value) {
       this.state.propsValueMap[type] = value;
     }
     async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
@@ -1398,10 +1588,14 @@
         name: type
       };
     }
-    destroy() {
+    resetState() {
       this.state.propsConfigMap = {};
       this.state.propsValueMap = {};
+    }
+    destroy() {
+      this.resetState();
       this.removeAllListeners();
+      this.removeAllPlugins();
     }
     guid(digit = 8) {
       return "x".repeat(digit).replace(/[xy]/g, (c) => {
@@ -1422,7 +1616,7 @@
       config.map(async (configItem) => {
         const { offsetX = 0, offsetY = 0, ...positionClone } = position;
         let pastePosition = positionClone;
-        if (!lodashEs.isEmpty(pastePosition) && curNode.items) {
+        if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
           pastePosition = getPositionInContainer(pastePosition, curNode.id);
         }
         if (pastePosition.left && configItem.style?.left) {
@@ -1445,8 +1639,9 @@
             ...pastePosition
           };
         }
-        if (utils.isPage(pasteConfig)) {
-          pasteConfig.name = generatePageNameByApp(editorService.get("root"));
+        const root = editorService.get("root");
+        if (utils.isPage(pasteConfig) && root) {
+          pasteConfig.name = generatePageNameByApp(root);
         }
         return pasteConfig;
       })
@@ -1469,13 +1664,20 @@
     let parentNode;
     if (utils.isPage(node)) {
       parentNode = editorService.get("root");
-    } else if (curNode.items) {
+    } else if (curNode?.items) {
       parentNode = curNode;
-    } else {
+    } else if (curNode?.id) {
       parentNode = editorService.getParentById(curNode.id, false);
     }
     return parentNode;
   };
+  const getDefaultConfig = async (addNode, parentNode) => {
+    const { type, inputEvent, ...config } = addNode;
+    const layout = await editorService.getLayout(vue.toRaw(parentNode), addNode);
+    const newNode = { ...vue.toRaw(await propsService.getPropsValue(type, config)) };
+    newNode.style = getInitPositionStyle(newNode.style, layout);
+    return newNode;
+  };
 
   class Editor$1 extends BaseService {
     state = vue.reactive({
@@ -1505,7 +1707,7 @@
           "copy",
           "paste",
           "doPaste",
-          "duAlignCenter",
+          "doAlignCenter",
           "alignCenter",
           "moveLayer",
           "moveToContainer",
@@ -1520,13 +1722,21 @@
       );
     }
     set(name, value) {
+      const preValue = this.state[name];
       this.state[name] = value;
-      if (name === "nodes") {
+      if (name === "nodes" && Array.isArray(value)) {
         this.set("node", value[0]);
       }
       if (name === "root") {
-        this.state.pageLength = value?.items?.length || 0;
-        this.emit("root-change", value);
+        if (Array.isArray(value)) {
+          throw new Error("root \u4E0D\u80FD\u4E3A\u6570\u7EC4");
+        }
+        if (lodashEs.isObject(value) && !(value instanceof StageCore__default.default) && !(value instanceof Map)) {
+          this.state.pageLength = value.items.length;
+        } else {
+          this.state.pageLength = 0;
+        }
+        this.emit("root-change", value, preValue);
       }
     }
     get(name) {
@@ -1537,16 +1747,21 @@
       if (raw) {
         root = vue.toRaw(root);
       }
+      const info = {
+        node: null,
+        parent: null,
+        page: null
+      };
       if (!root)
-        return {};
+        return info;
       if (id === root.id) {
-        return { node: root };
+        info.node = root;
+        return info;
       }
       const path = utils.getNodePath(id, root.items);
       if (!path.length)
-        return {};
+        return info;
       path.unshift(root);
-      const info = {};
       info.node = path[path.length - 1];
       info.parent = path[path.length - 2];
       path.forEach((item) => {
@@ -1562,8 +1777,6 @@
       return node;
     }
     getParentById(id, raw = true) {
-      if (!this.get("root"))
-        return;
       const { parent } = this.getNodeInfo(id, raw);
       return parent;
     }
@@ -1580,13 +1793,13 @@
     }
     async select(config) {
       const { node, page, parent } = this.selectedConfigExceptionHandler(config);
-      this.set("nodes", [node]);
-      this.set("page", page || null);
-      this.set("parent", parent || null);
+      this.set("nodes", node ? [node] : []);
+      this.set("page", page);
+      this.set("parent", parent);
       if (page) {
         historyService.changePage(vue.toRaw(page));
       } else {
-        historyService.empty();
+        historyService.resetState();
       }
       if (node?.id) {
         this.get("stage")?.renderer.runtime?.getApp?.()?.emit(
@@ -1596,7 +1809,7 @@
             page,
             parent
           },
-          utils.getNodePath(node.id, this.get("root").items)
+          utils.getNodePath(node.id, this.get("root")?.items)
         );
       }
       this.emit("select", node);
@@ -1618,6 +1831,10 @@
     async selectNextPage() {
       const root = vue.toRaw(this.get("root"));
       const page = vue.toRaw(this.get("page"));
+      if (!page)
+        throw new Error("page\u4E0D\u80FD\u4E3A\u7A7A");
+      if (!root)
+        throw new Error("root\u4E0D\u80FD\u4E3A\u7A7A");
       const index = getNodeIndex(page, root);
       const nextPage = root.items[index + 1] || root.items[0];
       await this.select(nextPage);
@@ -1644,16 +1861,20 @@
     }
     async doAdd(node, parent) {
       const root = this.get("root");
+      if (!root)
+        throw new Error("root\u4E3A\u7A7A");
       const curNode = this.get("node");
       const stage = this.get("stage");
-      if ((parent?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
+      if (!curNode)
+        throw new Error("\u5F53\u524D\u9009\u4E2D\u8282\u70B9\u4E3A\u7A7A");
+      if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
         throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
       }
       if (parent.id !== curNode.id && node.type !== schema.NodeType.PAGE) {
         const index = parent.items.indexOf(curNode);
-        parent?.items?.splice(index + 1, 0, node);
+        parent.items?.splice(index + 1, 0, node);
       } else {
-        parent?.items?.push(node);
+        parent.items?.push(node);
       }
       const layout = await this.getLayout(vue.toRaw(parent), node);
       node.style = getInitPositionStyle(node.style, layout);
@@ -1684,6 +1905,10 @@
       }
       const newNodes = await Promise.all(
         addNodes.map((node) => {
+          const root = this.get("root");
+          if (utils.isPage(node) && root) {
+            return this.doAdd(node, root);
+          }
           const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
           if (!parentNode)
             throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
@@ -1702,14 +1927,16 @@
           stage?.select(newNodes[0].id);
         }
       }
-      this.pushHistoryState();
+      if (!utils.isPage(newNodes[0])) {
+        this.pushHistoryState();
+      }
       this.emit("add", newNodes);
       return Array.isArray(addNode) ? newNodes : newNodes[0];
     }
     async doRemove(node) {
       const root = this.get("root");
       if (!root)
-        throw new Error("\u6CA1\u6709root");
+        throw new Error("root\u4E0D\u80FD\u4E3A\u7A7A");
       const { parent, node: curNode } = this.getNodeInfo(node.id);
       if (!parent || !curNode)
         throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
@@ -1744,18 +1971,26 @@
     async remove(nodeOrNodeList) {
       const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
       await Promise.all(nodes.map((node) => this.doRemove(node)));
-      this.pushHistoryState();
+      if (!utils.isPage(nodes[0])) {
+        this.pushHistoryState();
+      }
       this.emit("remove", nodes);
     }
     async doUpdate(config) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("root\u4E3A\u7A7A");
       if (!config?.id)
         throw new Error("\u6CA1\u6709\u914D\u7F6E\u6216\u8005\u914D\u7F6E\u7F3A\u5C11id\u503C");
       const info = this.getNodeInfo(config.id, false);
       if (!info.node)
         throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config.id}\u7684\u8282\u70B9`);
       const node = lodashEs.cloneDeep(vue.toRaw(info.node));
-      let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, this.get("root"));
+      let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue) => {
+        if (lodashEs.isObject(srcValue) && Array.isArray(objValue)) {
+          return srcValue;
+        }
         if (Array.isArray(srcValue)) {
           return srcValue;
         }
@@ -1779,14 +2014,14 @@
         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.get("stage")?.update({
         config: lodashEs.cloneDeep(newConfig),
         parentId: parent.id,
-        root: lodashEs.cloneDeep(this.get("root"))
+        root: lodashEs.cloneDeep(root)
       });
       if (newConfig.type === schema.NodeType.PAGE) {
         this.set("page", newConfig);
@@ -1799,11 +2034,19 @@
       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) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("root\u4E3A\u7A7A");
       const node = this.get("node");
+      if (!node)
+        throw new Error("\u5F53\u524D\u8282\u70B9\u4E3A\u7A7A");
       const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
+      if (!parent)
+        throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
       const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
       if (index2 < 0)
         return;
@@ -1814,7 +2057,7 @@
       this.get("stage")?.update({
         config: lodashEs.cloneDeep(node),
         parentId: parent.id,
-        root: lodashEs.cloneDeep(this.get("root"))
+        root: lodashEs.cloneDeep(root)
       });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
@@ -1828,8 +2071,16 @@
       const config = await storageService.getItem(COPY_STORAGE_KEY);
       if (!Array.isArray(config))
         return;
+      const node = this.get("node");
+      let parent = null;
+      if (config.length === 1 && config[0].id === node?.id) {
+        parent = this.get("parent");
+        if (parent?.type === schema.NodeType.ROOT) {
+          parent = this.get("page");
+        }
+      }
       const pasteConfigs = await this.doPaste(config, position);
-      return this.add(pasteConfigs);
+      return this.add(pasteConfigs, parent);
     }
     async doPaste(config, position = {}) {
       const pasteConfigs = await beforePaste(position, lodashEs.cloneDeep(config));
@@ -1864,13 +2115,24 @@
       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) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("root\u4E3A\u7A7A");
       const parent = this.get("parent");
+      if (!parent)
+        throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
       const node = this.get("node");
-      const brothers = parent?.items || [];
+      if (!node)
+        throw new Error("\u5F53\u524D\u8282\u70B9\u4E3A\u7A7A");
+      const brothers = parent.items || [];
       const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
       const layout = await this.getLayout(parent, node);
       const isRelative = layout === Layout.RELATIVE;
@@ -1886,17 +2148,17 @@
       this.get("stage")?.update({
         config: lodashEs.cloneDeep(vue.toRaw(parent)),
         parentId: grandparent?.id,
-        root: lodashEs.cloneDeep(this.get("root"))
+        root: lodashEs.cloneDeep(root)
       });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
     async moveToContainer(config, targetId) {
+      const root = lodashEs.cloneDeep(this.get("root"));
       const { node, parent } = this.getNodeInfo(config.id, false);
       const target = this.getNodeById(targetId, false);
       const stage = this.get("stage");
-      if (node && parent && stage) {
-        const root = lodashEs.cloneDeep(this.get("root"));
+      if (root && node && parent && stage) {
         const index = getNodeIndex(node, parent);
         parent.items?.splice(index, 1);
         await stage.remove({ id: node.id, parentId: parent.id, root });
@@ -1950,8 +2212,7 @@
         }
       });
     }
-    destroy() {
-      this.removeAllListeners();
+    resetState() {
       this.set("root", null);
       this.set("node", null);
       this.set("nodes", []);
@@ -1960,16 +2221,23 @@
       this.set("stage", null);
       this.set("highlightNode", null);
       this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
-      this.set("pageLength", /* @__PURE__ */ new Map());
+      this.set("pageLength", 0);
+    }
+    destroy() {
+      this.removeAllListeners();
+      this.resetState();
+      this.removeAllPlugins();
     }
     resetModifiedNodeId() {
       this.get("modifiedNodeIds").clear();
     }
     async getCodeDsl() {
       const root = this.get("root");
-      if (!root)
-        return null;
-      return root.codeBlocks || null;
+      return root?.codeBlocks || null;
+    }
+    getCodeDslSync() {
+      const root = this.get("root");
+      return root?.codeBlocks || null;
     }
     async setCodeDsl(codeDsl) {
       if (!this.state.root)
@@ -1983,9 +2251,10 @@
     }
     pushHistoryState() {
       const curNode = lodashEs.cloneDeep(vue.toRaw(this.get("node")));
-      if (!this.isHistoryStateChange) {
+      const page = this.get("page");
+      if (!this.isHistoryStateChange && curNode && page) {
         historyService.push({
-          data: lodashEs.cloneDeep(vue.toRaw(this.get("page"))),
+          data: lodashEs.cloneDeep(vue.toRaw(page)),
           modifiedNodeIds: this.get("modifiedNodeIds"),
           nodeId: curNode.id
         });
@@ -2082,10 +2351,14 @@
     getMethod(type) {
       return lodashEs.cloneDeep(methodMap[type] || core.DEFAULT_METHODS);
     }
-    destroy() {
+    resetState() {
       eventMap = vue.reactive({});
       methodMap = vue.reactive({});
+    }
+    destroy() {
+      this.resetState();
       this.removeAllListeners();
+      this.removeAllPlugins();
     }
   }
   const eventsService = new Events();
@@ -2285,14 +2558,14 @@
             {
               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"
             }
           ]
         }
@@ -2360,8 +2633,19 @@
       }
       return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
     }
+    resetState() {
+      this.set("showSrc", false);
+      this.set("uiSelectMode", false);
+      this.set("zoom", 1);
+      this.set("stageContainerRect", {
+        width: 0,
+        height: 0
+      });
+    }
     destroy() {
+      this.resetState();
       this.removeAllListeners();
+      this.removeAllPlugins();
     }
     async setStageRect(value) {
       state.stageRect = {
@@ -2388,6 +2672,7 @@
       containerHighlightClassName: stageOptions.containerHighlightClassName,
       containerHighlightDuration: stageOptions.containerHighlightDuration,
       containerHighlightType: stageOptions.containerHighlightType,
+      disabledDragStart: stageOptions.disabledDragStart,
       canSelect: (el, event, stop) => {
         const elCanSelect = stageOptions.canSelect(el);
         if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -2404,220 +2689,97 @@
       getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
     ]);
     stage.on("select", (el) => {
-      if (`${editorService.get("node")?.id}` === el.id)
-        return;
-      editorService.select(el.id);
-    });
-    stage.on("highlight", (el) => {
-      editorService.highlight(el.id);
-    });
-    stage.on("multiSelect", (els) => {
-      editorService.multiSelect(els.map((el) => el.id));
-    });
-    stage.on("update", (ev) => {
-      if (ev.parentEl) {
-        for (const data of ev.data) {
-          editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
-        }
-        return;
-      }
-      editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
-    });
-    stage.on("sort", (ev) => {
-      editorService.sort(ev.src, ev.dist);
-    });
-    stage.on("select-parent", () => {
-      const parent = editorService.get("parent");
-      editorService.select(parent);
-      editorService.get("stage").select(parent.id);
-    });
-    stage.on("changeGuides", (e) => {
-      uiService.set("showGuides", true);
-      if (!root.value || !page.value)
+      if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
         return;
-      const storageKey = getGuideLineKey(
-        e.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
-      );
-      if (e.guides.length) {
-        globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
-      } else {
-        globalThis.localStorage.removeItem(storageKey);
-      }
-    });
-    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__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
-    __name: "AddPageBox",
-    setup(__props) {
-      const services = vue.inject("services");
-      const clickHandler = () => {
-        const { editorService } = services || {};
-        if (!editorService)
-          return;
-        editorService.add({
-          type: schema.NodeType.PAGE,
-          name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
-        });
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createElementVNode("div", _hoisted_2$5, [
-            vue.createElementVNode("div", {
-              class: "m-editor-empty-button",
-              onClick: clickHandler
-            }, [
-              vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-              ]),
-              _hoisted_3$2
-            ])
-          ])
-        ]);
-      };
-    }
-  });
-
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
-    __name: "Resizer",
-    emits: ["change"],
-    setup(__props, { emit }) {
-      const target = vue.ref();
-      let getso;
-      vue.onMounted(() => {
-        if (!target.value)
-          return;
-        getso = new Gesto__default.default(target.value, {
-          container: window,
-          pinchOutside: true
-        }).on("drag", (e) => {
-          if (!target.value)
-            return;
-          emit("change", e.deltaX);
-        });
-      });
-      vue.onUnmounted(() => {
-        getso?.unset();
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("span", {
-          ref_key: "target",
-          ref: target,
-          class: "m-editor-resizer"
-        }, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 512);
-      };
-    }
-  });
-
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
-    __name: "Layout",
-    props: {
-      left: null,
-      right: null,
-      minLeft: { default: 1 },
-      minRight: { default: 1 },
-      leftClass: null,
-      rightClass: null,
-      centerClass: null
-    },
-    emits: ["update:left", "change", "update:right"],
-    setup(__props, { emit }) {
-      const props = __props;
-      const el = vue.ref();
-      let clientWidth = 0;
-      const resizerObserver = new ResizeObserver((entries) => {
-        for (const { contentRect } of entries) {
-          clientWidth = contentRect.width;
-          center.value = clientWidth - (props.left || 0) - (props.right || 0);
-          emit("change", {
-            left: props.left,
-            center: center.value,
-            right: props.right
-          });
-        }
-      });
-      vue.onMounted(() => {
-        if (el.value) {
-          resizerObserver.observe(el.value);
-        }
-      });
-      vue.onUnmounted(() => {
-        resizerObserver.disconnect();
-      });
-      const center = vue.ref(0);
-      const changeLeft = (deltaX) => {
-        if (typeof props.left === "undefined")
-          return;
-        let left = Math.max(props.left + deltaX, props.minLeft) || 0;
-        emit("update:left", left);
-        if (clientWidth - left - (props.right || 0) <= 0) {
-          left = props.left;
+      editorService.select(el.id);
+    });
+    stage.on("highlight", (el) => {
+      editorService.highlight(el.id);
+    });
+    stage.on("multi-select", (els) => {
+      editorService.multiSelect(els.map((el) => el.id));
+    });
+    stage.on("update", (ev) => {
+      if (ev.parentEl) {
+        for (const data of ev.data) {
+          editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
         }
-        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;
+      }
+      editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+    });
+    stage.on("sort", (ev) => {
+      editorService.sort(ev.src, ev.dist);
+    });
+    stage.on("select-parent", () => {
+      const parent = editorService.get("parent");
+      if (!parent)
+        throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
+      editorService.select(parent);
+      editorService.get("stage")?.select(parent.id);
+    });
+    stage.on("change-guides", (e) => {
+      uiService.set("showGuides", true);
+      if (!root.value || !page.value)
+        return;
+      const storageKey = getGuideLineKey(
+        e.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
+      );
+      if (e.guides.length) {
+        globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+      } else {
+        globalThis.localStorage.removeItem(storageKey);
+      }
+    });
+    return stage;
+  };
+
+  const _hoisted_1$d = { class: "m-editor-empty-panel" };
+  const _hoisted_2$6 = { class: "m-editor-empty-content" };
+  const _hoisted_3$3 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  const __default__$l = vue.defineComponent({
+    name: "MEditorAddPageBox"
+  });
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$l,
+    setup(__props) {
+      const services = vue.inject("services");
+      const clickHandler = () => {
+        const { editorService } = services || {};
+        if (!editorService)
           return;
-        let right = Math.max(props.right - deltaX, props.minRight) || 0;
-        emit("update:right", right);
-        if (clientWidth - (props.left || 0) - right <= 0) {
-          right = props.right;
-        }
-        center.value = clientWidth - (props.left || 0) - right;
-        emit("change", {
-          left: props.left,
-          center: center.value,
-          right
+        const root = vue.toRaw(editorService.get("root"));
+        if (!root)
+          throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
+        editorService.add({
+          type: schema.NodeType.PAGE,
+          name: generatePageNameByApp(root)
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "el",
-          ref: el,
-          class: "m-editor-layout"
-        }, [
-          typeof props.left !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
-              style: vue.normalizeStyle(`width: ${__props.left}px`)
-            }, [
-              vue.renderSlot(_ctx.$slots, "left")
-            ], 6),
-            vue.createVNode(_sfc_main$m, { onChange: changeLeft })
-          ], 64)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
-            style: vue.normalizeStyle(`width: ${center.value}px`)
-          }, [
-            vue.renderSlot(_ctx.$slots, "center")
-          ], 6),
-          typeof props.right !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$m, { onChange: changeRight }),
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
-              style: vue.normalizeStyle(`width: ${__props.right}px`)
+              class: "m-editor-empty-button",
+              onClick: clickHandler
             }, [
-              vue.renderSlot(_ctx.$slots, "right")
-            ], 6)
-          ], 64)) : vue.createCommentVNode("", true)
-        ], 512);
+              vue.createElementVNode("div", null, [
+                vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+              ]),
+              _hoisted_3$3
+            ])
+          ])
+        ]);
       };
     }
   });
 
-  const _hoisted_1$a = { class: "m-editor" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
-    __name: "Framework",
+  const _hoisted_1$c = { class: "m-editor" };
+  const __default__$k = vue.defineComponent({
+    name: "MEditorFramework"
+  });
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$k,
     props: {
       codeOptions: { default: () => ({}) }
     },
@@ -2651,7 +2813,7 @@
             columnWidth.value.right = right;
             columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
           }
-          uiService?.set("columnWidth", columnWidth);
+          uiService?.set("columnWidth", columnWidth.value);
         },
         {
           immediate: true
@@ -2671,8 +2833,11 @@
           globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
         }
       );
-      const columnWidthChange = (columnWidth2) => {
-        uiService?.set("columnWidth", columnWidth2);
+      const columnWidthChange = (columnW) => {
+        columnWidth.value.left = columnW.left;
+        columnWidth.value.center = columnW.center;
+        columnWidth.value.right = columnW.right;
+        uiService?.set("columnWidth", columnW);
       };
       const saveCode = (value) => {
         try {
@@ -2683,7 +2848,7 @@
       };
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
           vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
             key: 0,
@@ -2691,7 +2856,7 @@
             "init-values": vue.unref(root),
             options: __props.codeOptions,
             onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$n, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -2710,7 +2875,7 @@
             ]),
             center: vue.withCtx(() => [
               vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$n)
+                vue.createVNode(_sfc_main$m)
               ])
             ]),
             _: 2
@@ -2732,13 +2897,16 @@
     }
   });
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$b = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$4 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
-    __name: "ToolButton",
+  const _hoisted_2$5 = { class: "el-dropdown-link menubar-menu-button" };
+  const __default__$j = vue.defineComponent({
+    name: "MEditorToolButton"
+  });
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$j,
     props: {
       data: { default: () => ({
         type: "text",
@@ -2813,7 +2981,7 @@
           __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             __props.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -2827,7 +2995,7 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2844,7 +3012,7 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2877,7 +3045,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$4, [
+              vue.createElementVNode("span", _hoisted_2$5, [
                 vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -2894,8 +3062,11 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
-    __name: "NavMenu",
+  const __default__$i = vue.defineComponent({
+    name: "MEditorNavMenu"
+  });
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$i,
     props: {
       data: { default: () => ({}) },
       height: { default: 35 }
@@ -2939,7 +3110,10 @@
               icon: vue.markRaw(iconsVue.Delete),
               tooltip: `\u522A\u9664(Delete)`,
               disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
-              handler: () => services?.editorService.remove(services?.editorService.get("node"))
+              handler: () => {
+                const node = services?.editorService.get("node");
+                node && services?.editorService.remove(node);
+              }
             });
             break;
           case "undo":
@@ -3050,7 +3224,7 @@
               style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$j, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$k, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -3062,9 +3236,12 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "m-editor-props-panel" };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
-    __name: "PropsPanel",
+  const _hoisted_1$a = { class: "m-editor-props-panel" };
+  const __default__$h = vue.defineComponent({
+    name: "MEditorPropsPanel"
+  });
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$h,
     emits: ["mounted"],
     setup(__props, { expose, emit }) {
       const internalInstance = vue.getCurrentInstance();
@@ -3089,6 +3266,9 @@
       vue.onMounted(() => {
         emit("mounted", internalInstance);
       });
+      vue.onUnmounted(() => {
+        services?.propsService.off("props-configs-change", init);
+      });
       vue.watchEffect(() => {
         if (configForm.value && stage.value) {
           configForm.value.formState.stage = stage.value;
@@ -3106,10 +3286,9 @@
       };
       expose({ submit });
       return (_ctx, _cache) => {
-        const _component_m_form = vue.resolveComponent("m-form");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
-          vue.createVNode(_component_m_form, {
+          vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
             ref: configForm,
             class: vue.normalizeClass(`m-editor-props-panel ${vue.unref(propsPanelSize)}`),
@@ -3124,43 +3303,360 @@
     }
   });
 
-  const _hoisted_1$7 = ["id"];
-  const _hoisted_2$3 = { class: "list-item" };
-  const _hoisted_3$1 = { class: "code-name" };
-  const _hoisted_4$1 = { class: "code-name-wrapper" };
-  const _hoisted_5$1 = /* @__PURE__ */ vue.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__ */ vue.createTextVNode("\u4FDD\u5B58");
-  const _hoisted_9$1 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
-  const _hoisted_10 = {
-    key: 2,
+  const _hoisted_2$4 = /* @__PURE__ */ vue.createTextVNode("\u786E\u8BA4");
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_4$2 = {
+    key: 1,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_11 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_5$1 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const __default__$g = vue.defineComponent({
+    name: "MEditorCodeDraftEditor"
+  });
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$g,
+    props: {
+      id: null,
+      content: null,
+      editable: { type: Boolean, default: true },
+      autoSaveDraft: { type: Boolean, default: true },
+      codeOptions: null,
+      language: null
+    },
+    emits: ["close", "saveAndClose"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const services = vue.inject("services");
+      const codeContent = vue.ref("");
+      const editorContent = vue.ref("");
+      const codeEditor = vue.ref();
+      const originCodeContent = vue.ref("");
+      const isFullScreen = vue.ref(false);
+      const codeOptions = vue.computed(() => ({
+        ...props.codeOptions,
+        readOnly: !props.editable
+      }));
+      vue.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);
+        design.tMagicMessage.success(`\u4EE3\u7801\u8349\u7A3F\u4FDD\u5B58\u6210\u529F ${utils.datetimeFormatter(new Date())}`);
+      };
+      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) {
+          design.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 vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
+        }, [
+          vue.createVNode(_sfc_main$p, {
+            ref_key: "codeEditor",
+            ref: codeEditor,
+            class: "m-editor-container",
+            "init-values": `${codeContent.value}`,
+            onSave: saveCodeDraft,
+            language: __props.language,
+            options: vue.unref(codeOptions)
+          }, null, 8, ["init-values", "language", "options"]),
+          __props.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              class: "button",
+              onClick: toggleFullScreen
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              class: "button",
+              onClick: saveAndClose
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_2$4
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              class: "button",
+              onClick: close
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_3$2
+              ]),
+              _: 1
+            })
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              class: "button",
+              onClick: toggleFullScreen
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              class: "button",
+              onClick: close
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_5$1
+              ]),
+              _: 1
+            })
+          ]))
+        ], 2);
+      };
+    }
+  });
+
+  const _hoisted_1$8 = { class: "code-name-wrapper" };
+  const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
+  const _hoisted_3$1 = { class: "code-name-wrapper" };
+  const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570", -1);
+  const __default__$f = vue.defineComponent({
+    name: "MEditorFunctionEditor"
+  });
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeBlockEditor",
+    ...__default__$f,
+    props: {
+      id: null,
+      name: null,
+      content: null,
+      editable: { type: Boolean, default: true },
+      autoSaveDraft: { type: Boolean, default: true },
+      codeOptions: null,
+      paramsColConfig: null
+    },
+    emits: ["change", "field-input"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const defaultParamColConfig = {
+        type: "row",
+        label: "\u53C2\u6570\u7C7B\u578B",
+        items: [
+          {
+            text: "\u53C2\u6570\u7C7B\u578B",
+            labelWidth: "70px",
+            type: "select",
+            name: "type",
+            options: [
+              {
+                text: "\u6570\u5B57",
+                label: "\u6570\u5B57",
+                value: "number"
+              },
+              {
+                text: "\u5B57\u7B26\u4E32",
+                label: "\u5B57\u7B26\u4E32",
+                value: "text"
+              }
+            ]
+          }
+        ]
+      };
+      const paramsColConfig = props.paramsColConfig || defaultParamColConfig;
+      const tableConfig = {
+        type: "table",
+        border: true,
+        enableFullscreen: false,
+        name: "params",
+        maxHeight: "300px",
+        dropSort: false,
+        items: [
+          {
+            type: "text",
+            label: "\u53C2\u6570\u540D",
+            name: "name",
+            width: 200
+          },
+          {
+            type: "text",
+            label: "\u53C2\u6570\u6CE8\u91CA",
+            name: "tip",
+            width: 200
+          },
+          paramsColConfig
+        ]
+      };
+      const services = vue.inject("services");
+      const codeName = vue.ref("");
+      const codeContent = vue.ref("");
+      const evalRes = vue.ref(true);
+      vue.provide("mForm", {
+        $emit: emit,
+        setField: () => {
+        }
+      });
+      const tableModel = vue.ref();
+      vue.watchEffect(() => {
+        codeName.value = props.name;
+        codeContent.value = props.content;
+      });
+      const initTableModel = () => {
+        const codeDsl = lodashEs.cloneDeep(services?.codeBlockService.getCodeDslSync());
+        if (!codeDsl)
+          return;
+        tableModel.value = {
+          params: codeDsl[props.id]?.params || []
+        };
+      };
+      initTableModel();
+      const beforeSave = (codeValue) => {
+        try {
+          eval(codeValue);
+          return true;
+        } catch (e) {
+          design.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 || []
+          });
+          design.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 = vue.resolveComponent("m-form-table");
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
+          header: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1$8, [
+              _hoisted_2$3,
+              vue.createVNode(vue.unref(design.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"])
+            ]),
+            vue.createElementVNode("div", _hoisted_3$1, [
+              _hoisted_4$1,
+              vue.createVNode(_component_m_form_table, {
+                style: { "width": "800px" },
+                config: tableConfig,
+                model: tableModel.value,
+                enableToggleMode: false,
+                name: "params",
+                prop: "params",
+                size: "small"
+              }, null, 8, ["model"])
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$h, {
+              id: __props.id,
+              content: codeContent.value,
+              editable: __props.editable,
+              autoSaveDraft: __props.autoSaveDraft,
+              codeOptions: __props.codeOptions,
+              language: "javascript",
+              onSaveAndClose: saveAndClose,
+              onClose: close
+            }, null, 8, ["id", "content", "editable", "autoSaveDraft", "codeOptions"])
+          ]),
+          _: 1
+        });
+      };
+    }
+  });
+
+  const _hoisted_1$7 = {
+    key: 0,
+    class: "m-editor-code-block-editor-panel"
+  };
+  const __default__$e = vue.defineComponent({
+    name: "MEditorCodeBlockEditor"
+  });
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$e,
+    props: {
+      paramsColConfig: null
+    },
     setup(__props) {
       const services = vue.inject("services");
-      const codeEditor = vue.ref();
+      const codeOptions = vue.inject("codeOptions", {});
       const left = vue.ref(200);
       const currentTitle = vue.ref("");
       const codeConfig = vue.ref(null);
       const state = vue.reactive({
         codeList: []
       });
-      const isShowCodeBlockEditor = vue.computed(
-        () => codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus() || false
-      );
-      const mode = vue.computed(() => services?.codeBlockService.getMode());
       const id = vue.computed(() => services?.codeBlockService.getId() || "");
       const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
       const selectedIds = vue.computed(() => services?.codeBlockService.getCombineIds() || []);
       vue.watchEffect(async () => {
-        codeConfig.value = await services?.codeBlockService.getCodeContentById(id.value) || null;
+        codeConfig.value = lodashEs.cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
+        if (!codeConfig.value)
+          return;
+        codeConfig.value.content = serializeConfig(codeConfig.value.content);
       });
       vue.watchEffect(async () => {
         const codeDsl = await services?.codeBlockService.getCodeDslByIds(selectedIds.value) || null;
@@ -3175,159 +3671,43 @@
         });
         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) {
-          design.tMagicMessage.error(e.stack);
-          return false;
-        }
-        await services?.codeBlockService.setCodeDslById(id.value, {
-          name: codeConfig.value.name,
-          content: codeConfig.value.content
-        });
-        design.tMagicMessage.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) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDialog), {
-          modelValue: vue.unref(isShowCodeBlockEditor),
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(isShowCodeBlockEditor) ? isShowCodeBlockEditor.value = $event : null),
+          "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: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$l, {
+            vue.createVNode(_sfc_main$n, {
               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"
-            }, vue.createSlots({
+            }, {
               center: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", {
-                  key: 0,
-                  class: vue.normalizeClass([
-                    vue.unref(mode) === vue.unref(CodeEditorMode).LIST ? "m-editor-code-block-editor-panel-list-mode" : "m-editor-code-block-editor-panel"
-                  ])
-                }, [
-                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
-                  vue.createVNode(vue.unref(design.TMagicCard), { shadow: "never" }, {
-                    header: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_4$1, [
-                        _hoisted_5$1,
-                        codeConfig.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicInput), {
-                          key: 0,
-                          class: "code-name-input",
-                          modelValue: codeConfig.value.name,
-                          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeConfig.value.name = $event),
-                          disabled: !vue.unref(editable)
-                        }, null, 8, ["modelValue", "disabled"])) : vue.createCommentVNode("", true)
-                      ])
-                    ]),
-                    default: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_6$1, [
-                        codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
-                          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: !vue.unref(editable)
-                          }
-                        }, null, 8, ["init-values", "options"])) : vue.createCommentVNode("", true),
-                        vue.unref(editable) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
-                          vue.createVNode(vue.unref(design.TMagicButton), {
-                            type: "primary",
-                            class: "button",
-                            onClick: saveCode
-                          }, {
-                            default: vue.withCtx(() => [
-                              _hoisted_8$1
-                            ]),
-                            _: 1
-                          }),
-                          vue.createVNode(vue.unref(design.TMagicButton), {
-                            type: "primary",
-                            class: "button",
-                            onClick: saveAndClose
-                          }, {
-                            default: vue.withCtx(() => [
-                              _hoisted_9$1
-                            ]),
-                            _: 1
-                          })
-                        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
-                          vue.createVNode(vue.unref(design.TMagicButton), {
-                            type: "primary",
-                            class: "button",
-                            onClick: saveAndClose
-                          }, {
-                            default: vue.withCtx(() => [
-                              _hoisted_11
-                            ]),
-                            _: 1
-                          })
-                        ]))
-                      ])
-                    ]),
-                    _: 1
-                  })
-                ], 2)) : vue.createCommentVNode("", true)
-              ]),
-              _: 2
-            }, [
-              vue.unref(mode) === vue.unref(CodeEditorMode).LIST ? {
-                name: "left",
-                fn: vue.withCtx(() => [
-                  !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
+                  codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
                     key: 0,
-                    class: "side-tree",
-                    "node-key": "id",
-                    "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
-                    data: state.codeList,
-                    "highlight-current": true,
-                    "current-node-key": state.codeList[0].id,
-                    onNodeClick: selectHandler
-                  }, {
-                    default: vue.withCtx(({ data }) => [
-                      vue.createElementVNode("div", {
-                        id: data.id,
-                        class: "list-container"
-                      }, [
-                        vue.createElementVNode("div", _hoisted_2$3, [
-                          vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1)
-                        ])
-                      ], 8, _hoisted_1$7)
-                    ]),
-                    _: 1
-                  }, 8, ["data", "current-node-key"])) : vue.createCommentVNode("", true)
-                ])
-              } : void 0
-            ]), 1032, ["left"])
+                    id: vue.unref(id),
+                    name: codeConfig.value.name,
+                    content: codeConfig.value.content,
+                    paramsColConfig: __props.paramsColConfig,
+                    editable: !!vue.unref(editable),
+                    autoSaveDraft: true,
+                    codeOptions: vue.unref(codeOptions)
+                  }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true)
+              ]),
+              _: 3
+            }, 8, ["left"])
           ]),
           _: 3
-        }, 8, ["modelValue", "title"]);
+        }, 8, ["title"]);
       };
     }
   });
@@ -3354,50 +3734,51 @@
       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 _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
-    __name: "CodeBlockList",
+  const __default__$d = vue.defineComponent({
+    name: "MEditorCodeBlockList"
+  });
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$d,
     props: {
-      customError: null
+      customError: null,
+      paramsColConfig: null
     },
     setup(__props) {
       const props = __props;
       const services = vue.inject("services");
       const state = vue.reactive({
-        codeList: [],
-        bindComps: {}
+        codeList: []
       });
       const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
-      const getBindCompsByCodeId = (codeId, codeBlockContent) => {
-        if (lodashEs.isEmpty(codeBlockContent) || lodashEs.isEmpty(codeBlockContent.comps)) {
-          state.bindComps[codeId] = [];
-          return;
-        }
-        const compsField = codeBlockContent.comps;
-        const bindCompIds = Object.keys(compsField);
-        const bindCompsFiltered = bindCompIds.filter((compId) => !lodashEs.isEmpty(compsField[compId]));
-        const compsInfo = bindCompsFiltered.map((compId) => ({
-          id: compId,
-          name: getCompName(compId)
+      const isShowCodeBlockEditor = vue.computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
+      const codeCombineInfo = vue.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 = lodashEs.cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
+        codeCombineInfo.value = lodashEs.cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
+        if (!codeDsl || !codeCombineInfo.value)
           return;
         state.codeList = [];
         lodashEs.forIn(codeDsl, (value, codeId) => {
-          getBindCompsByCodeId(codeId, value);
           state.codeList.push({
             id: codeId,
             name: value.name,
             codeBlockContent: value,
-            showRelation: true
+            showRelation: true,
+            combineInfo: getBindCompsByCodeId(codeId)
           });
         });
       };
       vue.watch(
-        () => services?.codeBlockService.getCodeDsl(),
+        [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
         () => {
           initList();
         },
@@ -3406,20 +3787,6 @@
           deep: true
         }
       );
-      vue.watch(
-        () => services?.editorService.get("node"),
-        (curNode) => {
-          if (!curNode?.id)
-            return;
-          lodashEs.forIn(state.bindComps, (bindCompInfo) => {
-            bindCompInfo.forEach((comp) => {
-              if (comp.id === curNode.id) {
-                comp.name = curNode.name;
-              }
-            });
-          });
-        }
-      );
       const createCodeBlock = async () => {
         const { codeBlockService } = services || {};
         if (!codeBlockService) {
@@ -3428,21 +3795,21 @@
         }
         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();
         await codeBlockService.setCodeDslById(id, codeConfig);
         codeBlockService.setCodeEditorContent(true, id);
       };
       const editCode = async (key) => {
-        await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
         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 = !lodashEs.isEmpty(currentCode?.combineInfo);
         const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
         if (!existBinds && !undeleteableList.includes(key)) {
           services?.codeBlockService.deleteCodeDslByIds([key]);
@@ -3508,110 +3875,121 @@
               })) : vue.createCommentVNode("", true)
             ])
           ]),
-          !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
-            key: 0,
-            ref_key: "tree",
-            ref: tree,
-            "node-key": "id",
-            "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
-            data: state.codeList,
-            "highlight-current": true,
-            "filter-node-method": filterNode,
-            onNodeClick: toggleCombineRelation
-          }, {
-            default: vue.withCtx(({ data }) => [
-              vue.createElementVNode("div", {
-                id: data.id,
-                class: "list-container"
-              }, [
-                vue.createElementVNode("div", _hoisted_5, [
-                  vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1),
-                  vue.createElementVNode("div", _hoisted_7, [
-                    vue.createVNode(vue.unref(design.TMagicTooltip), {
-                      effect: "dark",
-                      content: vue.unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
-                      placement: "bottom"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$o, {
-                          icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
-                          class: "edit-icon",
-                          onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
-                        }, null, 8, ["icon", "onClick"])
-                      ]),
-                      _: 2
-                    }, 1032, ["content"]),
-                    state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                      key: 0,
-                      effect: "dark",
-                      content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
-                      placement: "bottom"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$o, {
-                          icon: vue.unref(iconsVue.Link),
-                          class: "edit-icon",
-                          onClick: vue.withModifiers(($event) => toggleCombineRelation(data), ["stop"])
-                        }, null, 8, ["icon", "onClick"])
-                      ]),
-                      _: 2
-                    }, 1024)) : vue.createCommentVNode("", true),
-                    vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                      key: 1,
-                      effect: "dark",
-                      content: "\u5220\u9664",
-                      placement: "bottom"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$o, {
-                          icon: vue.unref(iconsVue.Close),
-                          class: "edit-icon",
-                          onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
-                        }, null, 8, ["icon", "onClick"])
-                      ]),
-                      _: 2
-                    }, 1024)) : vue.createCommentVNode("", true),
-                    vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                      id: data.id,
-                      data: data.codeBlockContent
-                    })
-                  ])
+          vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
+            default: vue.withCtx(() => [
+              !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
+                key: 0,
+                ref_key: "tree",
+                ref: tree,
+                "node-key": "id",
+                "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
+                data: state.codeList,
+                "highlight-current": true,
+                "filter-node-method": filterNode,
+                onNodeClick: toggleCombineRelation
+              }, {
+                default: vue.withCtx(({ data }) => [
+                  vue.createElementVNode("div", {
+                    id: data.id,
+                    class: "list-container"
+                  }, [
+                    vue.createElementVNode("div", _hoisted_5, [
+                      vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1),
+                      vue.createElementVNode("div", _hoisted_7, [
+                        vue.createVNode(vue.unref(design.TMagicTooltip), {
+                          effect: "dark",
+                          content: vue.unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
+                          placement: "bottom"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(_sfc_main$s, {
+                              icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                              class: "edit-icon",
+                              onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
+                            }, null, 8, ["icon", "onClick"])
+                          ]),
+                          _: 2
+                        }, 1032, ["content"]),
+                        data.combineInfo && data.combineInfo.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                          key: 0,
+                          effect: "dark",
+                          content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
+                          placement: "bottom"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(_sfc_main$s, {
+                              icon: vue.unref(iconsVue.Link),
+                              class: "edit-icon",
+                              onClick: vue.withModifiers(($event) => toggleCombineRelation(data), ["stop"])
+                            }, null, 8, ["icon", "onClick"])
+                          ]),
+                          _: 2
+                        }, 1024)) : vue.createCommentVNode("", true),
+                        vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                          key: 1,
+                          effect: "dark",
+                          content: "\u5220\u9664",
+                          placement: "bottom"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(_sfc_main$s, {
+                              icon: vue.unref(iconsVue.Close),
+                              class: "edit-icon",
+                              onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
+                            }, null, 8, ["icon", "onClick"])
+                          ]),
+                          _: 2
+                        }, 1024)) : vue.createCommentVNode("", true),
+                        vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                          id: data.id,
+                          data: data.codeBlockContent
+                        })
+                      ])
+                    ]),
+                    data.showRelation && data.combineInfo && data.combineInfo.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                      _hoisted_9,
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(data.combineInfo, (comp, index) => {
+                        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                          key: index,
+                          class: "code-comp",
+                          size: "small",
+                          plain: true,
+                          onClick: vue.withModifiers(($event) => selectComp(comp.compId), ["stop"])
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(vue.toDisplayString(comp.compName), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"]);
+                      }), 128))
+                    ])) : vue.createCommentVNode("", true)
+                  ], 8, _hoisted_4)
                 ]),
-                data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-                  _hoisted_9,
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.bindComps[data.id], (comp, index) => {
-                    return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                      key: index,
-                      class: "code-comp",
-                      size: "small",
-                      plain: true,
-                      onClick: vue.withModifiers(($event) => selectComp(comp.id), ["stop"])
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode(vue.toDisplayString(comp.name), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["onClick"]);
-                  }), 128))
-                ])) : vue.createCommentVNode("", true)
-              ], 8, _hoisted_4)
+                _: 3
+              }, 8, ["data"])) : vue.createCommentVNode("", true)
             ]),
             _: 3
-          }, 8, ["data"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$g, null, {
+          }),
+          vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
+            key: 0,
+            paramsColConfig: __props.paramsColConfig
+          }, {
             "code-block-edit-panel-header": vue.withCtx(({ id }) => [
               vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
             ]),
             _: 3
-          })
+          }, 8, ["paramsColConfig"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
 
   const _hoisted_1$5 = ["onClick", "onDragstart"];
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-    __name: "ComponentListPanel",
+  const __default__$c = vue.defineComponent({
+    name: "MEditorComponentListPanel"
+  });
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$c,
     setup(__props) {
       const searchText = vue.ref("");
       const services = vue.inject("services");
@@ -3700,7 +4078,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -3715,7 +4093,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$o, {
+                              vue.createVNode(_sfc_main$s, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -3746,8 +4124,11 @@
     }
   });
 
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
-    __name: "ContentMenu",
+  const __default__$b = vue.defineComponent({
+    name: "MEditorContentMenu"
+  });
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$b,
     props: {
       menuData: { default: () => [] },
       isSubMenu: { type: Boolean, default: false }
@@ -3835,7 +4216,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$j, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$k, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -3861,16 +4242,22 @@
     }
   });
 
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
-    __name: "LayerMenu",
+  const __default__$a = vue.defineComponent({
+    name: "MEditorLayerMenu"
+  });
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$a,
+    props: {
+      layerContentMenu: null
+    },
     setup(__props, { expose }) {
+      const props = __props;
       const services = vue.inject("services");
       const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
       const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
-      const layerContentMenu = vue.inject("layerContentMenu", []);
       const createMenuItems = (group) => group.items.map((component) => ({
         text: component.text,
         type: "button",
@@ -3925,7 +4312,7 @@
         {
           type: "button",
           text: "\u590D\u5236",
-          icon: vue.markRaw(iconsVue.DocumentCopy),
+          icon: vue.markRaw(iconsVue.CopyDocument),
           display: () => !isRoot.value,
           handler: () => {
             node.value && services?.editorService.copy(node.value);
@@ -3940,7 +4327,7 @@
             node.value && services?.editorService.remove(node.value);
           }
         },
-        ...layerContentMenu
+        ...props.layerContentMenu
       ]);
       const show = (e) => {
         menu.value?.show(e);
@@ -3949,7 +4336,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$d, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
           "menu-data": vue.unref(menuData),
           ref_key: "menu",
           ref: menu,
@@ -3960,27 +4347,42 @@
   });
 
   const _hoisted_1$4 = ["id", "onMouseenter"];
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
-    __name: "LayerPanel",
+  const __default__$9 = vue.defineComponent({
+    name: "MEditorLayerPanel"
+  });
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$9,
+    props: {
+      layerContentMenu: null
+    },
     setup(__props) {
       const throttleTime = 150;
       const services = vue.inject("services");
+      const editorService = services?.editorService;
       const tree = vue.ref();
       const menu = vue.ref();
-      const editorService = services?.editorService;
+      const checkedKeys = vue.ref([]);
+      const isCtrlKeyDown = vue.ref(false);
+      const filterText = vue.ref("");
+      const expandedKeys = vue.ref([]);
+      const currentNodeKey = vue.ref();
+      const clicked = vue.ref(false);
+      const treeProps = {
+        children: "items",
+        disabled: (data) => Boolean(data.items?.length),
+        class: (data) => {
+          if (clicked.value || utils.isPage(data))
+            return "";
+          if (data.id === highlightNode?.value?.id && !checkedKeys.value.includes(data.id)) {
+            return "cus-tree-node-hover";
+          }
+        }
+      };
+      const isMultiSelect = vue.computed(() => isCtrlKeyDown.value || checkedKeys.value.length > 1);
+      const nodes = vue.computed(() => editorService?.get("nodes") || []);
       const page = vue.computed(() => editorService?.get("page"));
       const values = vue.computed(() => page.value ? [page.value] : []);
-      const selectedNodes = vue.ref([]);
-      const selectedIds = vue.computed(() => selectedNodes.value.map((node) => node.id));
-      const isMultiSelectStatus = vue.ref(false);
-      const spliceNodeKey = vue.ref();
-      const filterText = vue.ref("");
-      const defaultExpandedKeys = vue.computed(() => selectedIds.value.length > 0 ? selectedIds.value : []);
-      editorService?.on("remove", () => {
-        setTimeout(() => {
-          tree.value?.getNode(editorService.get("node").id)?.updateChildren();
-        }, 0);
-      });
+      const highlightNode = vue.computed(() => editorService?.get("highlightNode"));
       const select = async (data) => {
         if (!data.id) {
           throw new Error("\u6CA1\u6709id");
@@ -3999,7 +4401,6 @@
         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;
@@ -4031,23 +4432,18 @@
         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);
+        expandedKeys.value = expandedKeys.value.filter((id) => id !== data.id);
       };
       const handleExpand = (data) => {
-        const parent = editorService?.getParentById(data.id);
-        if (!parent?.id)
+        if (!page.value) {
+          expandedKeys.value = [];
           return;
-        expandedKeys.set(parent.id, parent.id);
+        }
+        expandedKeys.value = lodashEs.union(
+          expandedKeys.value,
+          utils.getNodePath(data.id, [page.value]).map((node) => node.id)
+        );
       };
       const filterNode = (value, data) => {
         if (!value) {
@@ -4064,121 +4460,78 @@
       const filterTextChangeHandler = (val) => {
         tree.value?.filter(val);
       };
-      const expandNodes = async () => {
-        if (!tree.value)
-          return;
-        await vue.nextTick();
-        tree.value && Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]) => {
-          if (node.expanded && node.data.items) {
-            expandedKeys.set(id, id);
-          }
-        });
-        expandedKeys.forEach((key) => {
-          if (!tree.value)
-            return;
-          tree.value.getNode(key)?.expand();
-        });
-      };
-      vue.watch(
-        () => editorService?.get("nodes"),
-        (nodes) => {
-          selectedNodes.value = nodes ?? [];
+      vue.watch(nodes, (nodes2) => {
+        const ids = nodes2?.map((node) => node.id) || [];
+        const idsLength = ids.length;
+        const checkedKeysLength = checkedKeys.value.length;
+        if (lodashEs.difference(
+          idsLength > checkedKeysLength ? ids : checkedKeys.value,
+          idsLength > checkedKeysLength ? checkedKeys.value : ids
+        ).length) {
+          tree.value?.setCheckedKeys([], false);
+          [currentNodeKey.value] = ids;
+          checkedKeys.value = ids.filter((id) => id !== page.value?.id);
+          expandedKeys.value = lodashEs.union(expandedKeys.value, ids);
         }
-      );
-      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();
+      });
+      vue.watch(isMultiSelect, (isMultiSelect2) => {
+        if (!isMultiSelect2) {
+          currentNodeKey.value = editorService?.get("node")?.id;
+          tree.value?.setCurrentKey(currentNodeKey.value);
         }
-      };
-      vue.watch([selectedIds, tree], async () => {
-        if (!tree.value || !editorService)
-          return;
-        const parent = editorService.get("parent");
-        if (!parent?.id)
-          return;
-        const treeNode = tree.value.getNode(parent.id);
-        treeNode?.updateChildren();
-        await expandNodes();
-        setTreeKeyStatus();
       });
-      const keycon = vue.ref();
-      const addSelectModeListener = () => {
+      const editorServiceRemoveHandler = () => {
+        setTimeout(() => {
+          tree.value?.getNode(editorService?.get("node")?.id)?.updateChildren();
+        }, 0);
+      };
+      const windowBlurHandler = () => {
+        isCtrlKeyDown.value = false;
+      };
+      let keycon;
+      vue.onMounted(() => {
+        editorService?.on("remove", editorServiceRemoveHandler);
+        keycon = new KeyController__default.default();
         const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
         const ctrl = isMac ? "meta" : "ctrl";
-        keycon.value = new KeyController__default.default();
-        keycon.value.keydown(ctrl, (e) => {
-          e.inputEvent.preventDefault();
-          isMultiSelectStatus.value = true;
-        });
-        keycon.value.on("blur", () => {
-          isMultiSelectStatus.value = false;
-        });
-        keycon.value.keyup(ctrl, (e) => {
-          e.inputEvent.preventDefault();
-          isMultiSelectStatus.value = false;
+        keycon.keydown((e) => {
+          if (e.key !== ctrl) {
+            isCtrlKeyDown.value = false;
+          }
+        }).keydown(ctrl, () => {
+          isCtrlKeyDown.value = true;
+        }).keyup(ctrl, () => {
+          isCtrlKeyDown.value = false;
         });
-      };
-      const removeSelectModeListener = () => {
-        keycon.value?.destroy();
-        if (selectedIds.value.length === 1)
-          isMultiSelectStatus.value = false;
-      };
-      const clicked = vue.ref(false);
-      const highlightNode = vue.computed(() => editorService?.get("highlightNode"));
+        globalThis.addEventListener("blur", windowBlurHandler);
+      });
+      vue.onUnmounted(() => {
+        keycon.destroy();
+        editorService?.off("remove", editorServiceRemoveHandler);
+        globalThis.removeEventListener("blur", windowBlurHandler);
+      });
       const highlightHandler = lodashEs.throttle((data) => {
         highlight(data);
       }, throttleTime);
       const toggleClickFlag = () => {
         clicked.value = !clicked.value;
       };
-      const canHighlight = (data) => {
-        if (clicked.value)
-          return false;
-        return data.id === highlightNode?.value?.id && !selectedIds.value.includes(data.id) && spliceNodeKey.value !== data.id;
-      };
-      vue.watch(isMultiSelectStatus, () => {
-        if (isMultiSelectStatus.value && selectedNodes.value.length === 1 && selectedNodes.value[0].type === schema.NodeType.PAGE) {
-          selectedNodes.value = [];
-        }
-      });
-      const multiClickHandler = (data) => {
-        if (!data?.id) {
-          throw new Error("\u6CA1\u6709id");
-        }
-        if (data.type === schema.NodeType.PAGE) {
-          tree.value?.setCheckedKeys([]);
-          return;
-        }
-        const index = selectedNodes.value.findIndex((node) => node.id === data.id);
-        if (index !== -1) {
-          selectedNodes.value.splice(index, 1);
-          spliceNodeKey.value = data.id;
+      const checkHandler = (data, { checkedNodes }) => {
+        if (checkedNodes.length > 0) {
+          multiSelect(checkedNodes.map((node) => node.id));
         } else {
-          selectedNodes.value = [...selectedNodes.value, data];
+          multiSelect(nodes.value.map((node) => node.id));
         }
-        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);
-        } else {
-          multiClickHandler(data);
+        if (isCtrlKeyDown.value) {
+          return;
+        }
+        if (services?.uiService.get("uiSelectMode")) {
+          document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
+          return;
         }
+        select(data);
       };
       const contextmenu = async (event, data) => {
         event.preventDefault();
@@ -4186,11 +4539,7 @@
         menu.value?.show(event);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), {
-          class: "magic-editor-layer-panel",
-          onMouseenter: addSelectModeListener,
-          onMouseleave: removeSelectModeListener
-        }, {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
             vue.createVNode(vue.unref(design.TMagicInput), {
@@ -4211,30 +4560,30 @@
               "node-key": "id",
               "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
               draggable: "",
-              "default-expanded-keys": vue.unref(defaultExpandedKeys),
-              load: loadItems,
+              "default-expanded-keys": expandedKeys.value,
+              "default-checked-keys": checkedKeys.value,
+              "current-node-key": currentNodeKey.value,
               data: vue.unref(values),
               "expand-on-click-node": false,
-              "highlight-current": true,
-              props: {
-                children: "items"
-              },
+              "highlight-current": !vue.unref(isMultiSelect),
+              "check-on-click-node": true,
+              props: treeProps,
               "filter-node-method": filterNode,
               "allow-drop": allowDrop,
-              "show-checkbox": isMultiSelectStatus.value || vue.unref(selectedIds).length > 1,
+              "show-checkbox": vue.unref(isMultiSelect),
               onNodeClick: clickHandler,
               onNodeContextmenu: contextmenu,
               onNodeDragEnd: handleDragEnd,
               onNodeCollapse: handleCollapse,
               onNodeExpand: handleExpand,
-              onCheck: multiClickHandler,
+              onCheck: checkHandler,
               onMousedown: toggleClickFlag,
               onMouseup: toggleClickFlag
             }, {
               default: vue.withCtx(({ node, data }) => [
                 vue.createElementVNode("div", {
+                  class: "cus-tree-node",
                   id: data.id,
-                  class: vue.normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
                   onMouseenter: ($event) => vue.unref(highlightHandler)(data)
                 }, [
                   vue.renderSlot(_ctx.$slots, "layer-node-content", {
@@ -4243,15 +4592,16 @@
                   }, () => [
                     vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
                   ])
-                ], 42, _hoisted_1$4)
+                ], 40, _hoisted_1$4)
               ]),
               _: 3
-            }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : vue.createCommentVNode("", true),
+            }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$c, {
+              vue.createVNode(_sfc_main$b, {
                 ref_key: "menu",
-                ref: menu
-              }, null, 512)
+                ref: menu,
+                "layer-content-menu": __props.layerContentMenu
+              }, null, 8, ["layer-content-menu"])
             ]))
           ]),
           _: 3
@@ -4264,143 +4614,52 @@
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
-    __name: "TabPane",
-    props: {
-      data: null
-    },
-    setup(__props) {
-      const props = __props;
-      const config = vue.computed(() => {
-        if (typeof props.data !== "string") {
-          return props.data;
-        }
-        switch (props.data) {
-          case "component-list":
-            return {
-              type: "component",
-              icon: iconsVue.Coin,
-              text: "\u7EC4\u4EF6",
-              component: _sfc_main$e,
-              slots: {}
-            };
-          case "layer":
-            return {
-              type: "component",
-              icon: iconsVue.Files,
-              text: "\u5DF2\u9009\u7EC4\u4EF6",
-              component: _sfc_main$b,
-              slots: {}
-            };
-          case "code-block":
-            return {
-              type: "component",
-              icon: iconsVue.EditPen,
-              text: "\u4EE3\u7801\u7F16\u8F91",
-              component: _sfc_main$f,
-              slots: {}
-            };
-          default:
-            return void 0;
-        }
-      });
-      return (_ctx, _cache) => {
-        return vue.unref(config) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTabPane), {
-          key: 0,
-          name: vue.unref(config).text
-        }, {
-          label: vue.withCtx(() => [
-            (vue.openBlock(), vue.createElementBlock("div", {
-              key: vue.unref(config).text
-            }, [
-              vue.unref(config).icon ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
-                key: 0,
-                icon: vue.unref(config).icon
-              }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-              vue.unref(config).text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(vue.unref(config).text), 1)) : vue.createCommentVNode("", true)
-            ]))
-          ]),
-          default: vue.withCtx(() => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).component), vue.mergeProps(vue.unref(config).props || {}, vue.toHandlers(vue.unref(config)?.listeners || {})), vue.createSlots({ _: 2 }, [
-              __props.data === "component-list" || vue.unref(config).slots?.componentListPanelHeader ? {
-                name: "component-list-panel-header",
-                fn: vue.withCtx(() => [
-                  __props.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : vue.unref(config).slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                ])
-              } : void 0,
-              __props.data === "component-list" || vue.unref(config).slots?.componentListItem ? {
-                name: "component-list-item",
-                fn: vue.withCtx(({ component }) => [
-                  __props.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
-                    key: 0,
-                    component
-                  }) : vue.unref(config).slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.componentListItem), {
-                    key: 1,
-                    component
-                  }, null, 8, ["component"])) : vue.createCommentVNode("", true)
-                ])
-              } : void 0,
-              __props.data === "layer" || vue.unref(config).slots?.layerPanelHeader ? {
-                name: "layer-panel-header",
-                fn: vue.withCtx(() => [
-                  __props.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : vue.unref(config).slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                ])
-              } : void 0,
-              __props.data === "code-block" || vue.unref(config).slots?.codeBlockPanelHeader ? {
-                name: "code-block-panel-header",
-                fn: vue.withCtx(() => [
-                  __props.data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : vue.unref(config).slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                ])
-              } : void 0,
-              __props.data === "code-block" || vue.unref(config).slots?.codeBlockPanelTool ? {
-                name: "code-block-panel-tool",
-                fn: vue.withCtx(({ id, data }) => [
-                  data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                    key: 0,
-                    id,
-                    data
-                  }) : vue.unref(config).slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
-                ])
-              } : void 0,
-              __props.data === "code-block" || vue.unref(config).slots?.codeBlockEditPanelHeader ? {
-                name: "code-block-edit-panel-header",
-                fn: vue.withCtx(({ id }) => [
-                  __props.data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
-                    key: 0,
-                    id
-                  }) : vue.unref(config).slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                ])
-              } : void 0,
-              __props.data === "layer" || vue.unref(config).slots?.layerNodeContent ? {
-                name: "layer-node-content",
-                fn: vue.withCtx(({ data: nodeData, node }) => [
-                  __props.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                    key: 0,
-                    data: nodeData,
-                    node
-                  }) : vue.unref(config).slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.layerNodeContent), {
-                    key: 1,
-                    data: nodeData,
-                    node
-                  }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
-                ])
-              } : void 0
-            ]), 1040))
-          ]),
-          _: 3
-        }, 8, ["name"])) : vue.createCommentVNode("", true);
-      };
-    }
+  const __default__$8 = vue.defineComponent({
+    name: "MEditorSidebar"
   });
-
   const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Sidebar",
+    ...__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 = design.getConfig("components").tabPane;
       const activeTabName = vue.ref(props.data?.status);
+      const getItemConfig = (data) => {
+        const map = {
+          "component-list": {
+            $key: "component-list",
+            type: "component",
+            icon: iconsVue.Coin,
+            text: "\u7EC4\u4EF6",
+            component: _sfc_main$d,
+            slots: {}
+          },
+          layer: {
+            $key: "layer",
+            type: "component",
+            icon: iconsVue.Files,
+            text: "\u5DF2\u9009\u7EC4\u4EF6",
+            props: {
+              layerContentMenu: props.layerContentMenu
+            },
+            component: _sfc_main$a,
+            slots: {}
+          },
+          "code-block": {
+            $key: "code-block",
+            type: "component",
+            icon: iconsVue.EditPen,
+            text: "\u4EE3\u7801\u7F16\u8F91",
+            component: _sfc_main$e,
+            slots: {}
+          }
+        };
+        return typeof data === "string" ? map[data] : data;
+      };
+      const sideBarItems = vue.computed(() => props.data.items.map((item) => getItemConfig(item)));
       vue.watch(
         () => props.data.status,
         (status) => {
@@ -4420,60 +4679,91 @@
           "tab-position": "left"
         }, {
           default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data.items, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(sideBarItems), (config, index) => {
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(uiComponent).component), {
                 key: index,
-                data: item
-              }, vue.createSlots({ _: 2 }, [
-                item === "layer" ? {
-                  name: "layer-panel-header",
-                  fn: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "layer-panel-header")
-                  ])
-                } : void 0,
-                item === "layer" ? {
-                  name: "layer-node-content",
-                  fn: vue.withCtx(({ node, data }) => [
-                    vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                      data,
-                      node
-                    })
-                  ])
-                } : void 0,
-                item === "component-list" ? {
-                  name: "component-list-panel-header",
-                  fn: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "component-list-panel-header")
-                  ])
-                } : void 0,
-                item === "component-list" ? {
-                  name: "component-list-item",
-                  fn: vue.withCtx(({ component }) => [
-                    vue.renderSlot(_ctx.$slots, "component-list-item", { component })
-                  ])
-                } : void 0,
-                item === "code-block" ? {
-                  name: "code-block-panel-header",
-                  fn: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "code-block-panel-header")
-                  ])
-                } : void 0,
-                item === "code-block" ? {
-                  name: "code-block-panel-tool",
-                  fn: vue.withCtx(({ id, data }) => [
-                    vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                      id,
-                      data
-                    })
-                  ])
-                } : void 0,
-                item === "code-block" ? {
-                  name: "code-block-edit-panel-header",
-                  fn: vue.withCtx(({ id }) => [
-                    vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-                  ])
-                } : void 0
-              ]), 1032, ["data"]);
+                name: config.text
+              }, {
+                label: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createElementBlock("div", {
+                    key: config.text
+                  }, [
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                      key: 0,
+                      icon: config.icon
+                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                  ]))
+                ]),
+                default: vue.withCtx(() => [
+                  config ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                    config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                      name: "component-list-panel-header",
+                      fn: vue.withCtx(() => [
+                        config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "component-list" || config.slots?.componentListItem ? {
+                      name: "component-list-item",
+                      fn: vue.withCtx(({ component }) => [
+                        config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
+                          key: 0,
+                          component
+                        }) : config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListItem), {
+                          key: 1,
+                          component
+                        }, null, 8, ["component"])) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                      name: "layer-panel-header",
+                      fn: vue.withCtx(() => [
+                        config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                      name: "code-block-panel-header",
+                      fn: vue.withCtx(() => [
+                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                      name: "code-block-panel-tool",
+                      fn: vue.withCtx(({ id, data }) => [
+                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                          key: 0,
+                          id,
+                          data
+                        }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
+                      name: "code-block-edit-panel-header",
+                      fn: vue.withCtx(({ id }) => [
+                        config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
+                          key: 0,
+                          id
+                        }) : config.slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0,
+                    config.$key === "layer" || config.slots?.layerNodeContent ? {
+                      name: "layer-node-content",
+                      fn: vue.withCtx(({ data: nodeData, node }) => [
+                        config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                          key: 0,
+                          data: nodeData,
+                          node
+                        }) : config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeContent), {
+                          key: 1,
+                          data: nodeData,
+                          node
+                        }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
+                      ])
+                    } : void 0
+                  ]), 1040)) : vue.createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["name"]);
             }), 128))
           ]),
           _: 3
@@ -4487,8 +4777,11 @@
     class: "m-editor-breadcrumb"
   };
   const _hoisted_2$1 = { key: 0 };
+  const __default__$7 = vue.defineComponent({
+    name: "MEditorBreadcrumb"
+  });
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Breadcrumb",
+    ...__default__$7,
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -4528,8 +4821,11 @@
     key: 1,
     style: { "width": "21px" }
   };
+  const __default__$6 = vue.defineComponent({
+    name: "MEditorPageBarScrollContainer"
+  });
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PageBarScrollContainer",
+    ...__default__$6,
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -4592,9 +4888,12 @@
       const addPage = () => {
         if (!editorService)
           return;
+        const root = vue.toRaw(editorService.get("root"));
+        if (!root)
+          throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
         const pageConfig = {
           type: schema.NodeType.PAGE,
-          name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+          name: generatePageNameByApp(root)
         };
         editorService.add(pageConfig);
       };
@@ -4610,14 +4909,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -4633,7 +4932,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -4642,8 +4941,11 @@
 
   const _hoisted_1 = ["onClick"];
   const _hoisted_2 = { class: "m-editor-page-bar-title" };
+  const __default__$5 = vue.defineComponent({
+    name: "MEditorPageBar"
+  });
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PageBar",
+    ...__default__$5,
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -4702,7 +5004,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$j, {
+                        vue.createVNode(_sfc_main$k, {
                           data: {
                             type: "button",
                             text: "\u590D\u5236",
@@ -4710,7 +5012,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$j, {
+                        vue.createVNode(_sfc_main$k, {
                           data: {
                             type: "button",
                             text: "\u5220\u9664",
@@ -4744,6 +5046,10 @@
     height = 0;
     translateXCorrectionValue = 0;
     translateYCorrectionValue = 0;
+    correctionScrollSize = {
+      width: 0,
+      height: 0
+    };
     resizeObserver = new ResizeObserver(() => {
       this.setSize();
       this.setScrollSize();
@@ -4753,6 +5059,12 @@
       this.container = options.container;
       this.target = options.target;
       this.zoom = options.zoom;
+      if (this.correctionScrollSize) {
+        this.correctionScrollSize = {
+          ...this.correctionScrollSize,
+          ...options.correctionScrollSize
+        };
+      }
       this.container.addEventListener("wheel", this.wheelHandler, false);
       this.setSize();
       this.setScrollSize();
@@ -4815,9 +5127,9 @@
     }
     setScrollSize = () => {
       const targetRect = this.target.getBoundingClientRect();
-      this.scrollWidth = targetRect.width * this.zoom + 100;
+      this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
       const targetMarginTop = Number(this.target.style.marginTop) || 0;
-      this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+      this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
       let left;
       let top;
       if (this.scrollWidth < this.width) {
@@ -4850,8 +5162,11 @@
     };
   }
 
+  const __default__$4 = vue.defineComponent({
+    name: "MEditorScrollBar"
+  });
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
-    __name: "ScrollBar",
+    ...__default__$4,
     props: {
       size: null,
       scrollSize: null,
@@ -4936,14 +5251,21 @@
 
   const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
+  const __default__$3 = vue.defineComponent({
+    name: "MEditorScrollViewer"
+  });
   const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
-    __name: "ScrollViewer",
+    ...__default__$3,
     props: {
       width: { default: 0 },
       height: { default: 0 },
       wrapWidth: { default: 0 },
       wrapHeight: { default: 0 },
-      zoom: { default: 1 }
+      zoom: { default: 1 },
+      correctionScrollSize: { default: () => ({
+        width: 0,
+        height: 0
+      }) }
     },
     setup(__props, { expose }) {
       const props = __props;
@@ -4966,7 +5288,8 @@
         scrollViewer = new ScrollViewer({
           container: container.value,
           target: el.value,
-          zoom: props.zoom
+          zoom: props.zoom,
+          correctionScrollSize: props.correctionScrollSize
         });
         scrollViewer.on("scroll", (data) => {
           hOffset.value = data.scrollLeft;
@@ -5034,10 +5357,14 @@
     }
   });
 
+  const __default__$2 = vue.defineComponent({
+    name: "MEditorViewerMenu"
+  });
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
-    __name: "ViewerMenu",
+    ...__default__$2,
     props: {
-      isMultiSelect: { type: Boolean, default: false }
+      isMultiSelect: { type: Boolean, default: false },
+      stageContentMenu: null
     },
     setup(__props, { expose }) {
       const props = __props;
@@ -5050,8 +5377,7 @@
       const nodes = vue.computed(() => editorService?.get("nodes"));
       const parent = vue.computed(() => editorService?.get("parent"));
       const stage = vue.computed(() => editorService?.get("stage"));
-      const stageContentMenu = vue.inject("stageContentMenu", []);
-      const menuData = vue.reactive([
+      const menuData = vue.computed(() => [
         {
           type: "button",
           text: "\u6C34\u5E73\u5C45\u4E2D",
@@ -5065,7 +5391,7 @@
         {
           type: "button",
           text: "\u590D\u5236",
-          icon: vue.markRaw(iconsVue.DocumentCopy),
+          icon: vue.markRaw(iconsVue.CopyDocument),
           handler: () => {
             nodes.value && editorService?.copy(nodes.value);
             canPaste.value = true;
@@ -5074,6 +5400,7 @@
         {
           type: "button",
           text: "\u7C98\u8D34",
+          icon: vue.markRaw(iconsVue.DocumentCopy),
           display: () => canPaste.value,
           handler: () => {
             const rect = menu.value?.$el.getBoundingClientRect();
@@ -5150,10 +5477,10 @@
           type: "button",
           text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
           handler: () => {
-            editorService?.get("stage").clearGuides();
+            editorService?.get("stage")?.clearGuides();
           }
         },
-        ...stageContentMenu
+        ...props.stageContentMenu
       ]);
       vue.watch(
         parent,
@@ -5176,8 +5503,8 @@
       };
       expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$d, {
-          "menu-data": menuData,
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+          "menu-data": vue.unref(menuData),
           ref_key: "menu",
           ref: menu
         }, null, 8, ["menu-data"]);
@@ -5185,8 +5512,14 @@
     }
   });
 
+  const __default__$1 = vue.defineComponent({
+    name: "MEditorStage"
+  });
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Stage",
+    ...__default__$1,
+    props: {
+      stageContentMenu: null
+    },
     setup(__props) {
       let stage = null;
       let runtime = null;
@@ -5195,7 +5528,8 @@
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
       const menu = vue.ref();
-      const isMultiSelect = vue.computed(() => services?.editorService.get("nodes")?.length > 1);
+      const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
+      const isMultiSelect = vue.computed(() => nodes.value.length > 1);
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
       const stageContainerRect = vue.computed(() => services?.uiService.get("stageContainerRect"));
       const root = vue.computed(() => services?.editorService.get("root"));
@@ -5203,7 +5537,7 @@
       const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
       const node = vue.computed(() => services?.editorService.get("node"));
       vue.watchEffect(() => {
-        if (stage)
+        if (stage || !page.value)
           return;
         if (!stageContainer.value)
           return;
@@ -5233,6 +5567,14 @@
           runtime.updateRootConfig?.(lodashEs.cloneDeep(vue.toRaw(root2)));
         }
       });
+      vue.watch(page, (page2) => {
+        if (runtime && page2) {
+          runtime.updatePageId?.(page2.id);
+          vue.nextTick(() => {
+            stage?.select(page2.id);
+          });
+        }
+      });
       const resizeObserver = new ResizeObserver((entries) => {
         for (const { contentRect } of entries) {
           services?.uiService.set("stageContainerRect", {
@@ -5305,7 +5647,11 @@
           height: vue.unref(stageRect)?.height,
           "wrap-width": vue.unref(stageContainerRect)?.width,
           "wrap-height": vue.unref(stageContainerRect)?.height,
-          zoom: vue.unref(zoom)
+          zoom: vue.unref(zoom),
+          "correction-scroll-size": {
+            width: 60,
+            height: 50
+          }
         }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", {
@@ -5321,8 +5667,9 @@
               vue.createVNode(_sfc_main$3, {
                 ref_key: "menu",
                 ref: menu,
-                "is-multi-select": vue.unref(isMultiSelect)
-              }, null, 8, ["is-multi-select"])
+                "is-multi-select": vue.unref(isMultiSelect),
+                "stage-content-menu": __props.stageContentMenu
+              }, null, 8, ["is-multi-select", "stage-content-menu"])
             ]))
           ]),
           _: 1
@@ -5331,8 +5678,14 @@
     }
   });
 
+  const __default__ = vue.defineComponent({
+    name: "MEditorWorkspace"
+  });
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Workspace",
+    ...__default__,
+    props: {
+      stageContentMenu: null
+    },
     setup(__props) {
       const services = vue.inject("services");
       const workspace = vue.ref();
@@ -5443,9 +5796,10 @@
         }, [
           vue.createVNode(_sfc_main$8),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
-            (vue.openBlock(), vue.createBlock(_sfc_main$2, {
-              key: vue.unref(page)?.id
-            }))
+            vue.unref(page) ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+              key: 0,
+              "stage-content-menu": __props.stageContentMenu
+            }, null, 8, ["stage-content-menu"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content"),
           vue.createVNode(_sfc_main$6, null, {
@@ -5475,9 +5829,13 @@
     getList() {
       return this.state.list;
     }
-    destroy() {
+    resetState() {
       this.state.list = [];
+    }
+    destroy() {
+      this.resetState();
       this.removeAllListeners();
+      this.removeAllPlugins();
     }
   }
   const componentListService = new ComponentList();
@@ -5485,11 +5843,11 @@
   const _sfc_main = vue.defineComponent({
     name: "m-editor",
     components: {
-      NavMenu: _sfc_main$i,
+      TMagicNavMenu: _sfc_main$j,
       Sidebar: _sfc_main$9,
       Workspace: _sfc_main$1,
-      PropsPanel: _sfc_main$h,
-      Framework: _sfc_main$k
+      PropsPanel: _sfc_main$i,
+      Framework: _sfc_main$l
     },
     props: {
       modelValue: {
@@ -5504,6 +5862,10 @@
       sidebar: {
         type: Object
       },
+      menu: {
+        type: Object,
+        default: () => ({ left: [], right: [] })
+      },
       layerContentMenu: {
         type: Array,
         default: () => []
@@ -5512,10 +5874,6 @@
         type: Array,
         default: () => []
       },
-      menu: {
-        type: Object,
-        default: () => ({ left: [], right: [] })
-      },
       render: {
         type: Function
       },
@@ -5549,7 +5907,7 @@
       },
       containerHighlightClassName: {
         type: String,
-        default: StageCore.CONTAINER_HIGHLIGHT_CLASS
+        default: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME
       },
       containerHighlightDuration: {
         type: Number,
@@ -5568,20 +5926,33 @@
       },
       updateDragEl: {
         type: Function
+      },
+      disabledDragStart: {
+        type: Boolean
       }
     },
     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 rootChangeHandler = (value, preValue) => {
+        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);
         }
-        emit("update:modelValue", vue.toRaw(editorService.get("root")));
-      });
+        if (vue.toRaw(value) !== vue.toRaw(preValue)) {
+          emit("update:modelValue", value);
+        }
+      };
+      editorService.on("root-change", rootChangeHandler);
       vue.watch(
         () => props.modelValue,
         (modelValue) => {
@@ -5643,13 +6014,13 @@
         }
       );
       vue.onUnmounted(() => {
-        editorService.destroy();
-        historyService.destroy();
-        propsService.destroy();
-        uiService.destroy();
-        componentListService.destroy();
-        storageService.destroy();
-        codeBlockService.destroy();
+        editorService.resetState();
+        historyService.resetState();
+        propsService.resetState();
+        uiService.resetState();
+        componentListService.resetState();
+        codeBlockService.resetState();
+        editorService.off("root-change", rootChangeHandler);
       });
       const services = {
         componentListService,
@@ -5662,8 +6033,7 @@
         codeBlockService
       };
       vue.provide("services", services);
-      vue.provide("layerContentMenu", props.layerContentMenu);
-      vue.provide("stageContentMenu", props.stageContentMenu);
+      vue.provide("codeOptions", props.codeOptions);
       vue.provide(
         "stageOptions",
         vue.reactive({
@@ -5676,7 +6046,8 @@
           isContainer: props.isContainer,
           containerHighlightClassName: props.containerHighlightClassName,
           containerHighlightDuration: props.containerHighlightDuration,
-          containerHighlightType: props.containerHighlightType
+          containerHighlightType: props.containerHighlightType,
+          disabledDragStart: props.disabledDragStart
         })
       );
       return services;
@@ -5692,20 +6063,23 @@
   };
 
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_nav_menu = vue.resolveComponent("nav-menu");
-    const _component_sidebar = vue.resolveComponent("sidebar");
-    const _component_workspace = vue.resolveComponent("workspace");
-    const _component_props_panel = vue.resolveComponent("props-panel");
-    const _component_framework = vue.resolveComponent("framework");
-    return vue.openBlock(), vue.createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
+    const _component_TMagicNavMenu = vue.resolveComponent("TMagicNavMenu");
+    const _component_Sidebar = vue.resolveComponent("Sidebar");
+    const _component_Workspace = vue.resolveComponent("Workspace");
+    const _component_PropsPanel = vue.resolveComponent("PropsPanel");
+    const _component_Framework = vue.resolveComponent("Framework");
+    return vue.openBlock(), vue.createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
       nav: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
+          vue.createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
         ])
       ]),
       sidebar: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_sidebar, { data: _ctx.sidebar }, {
+          vue.createVNode(_component_Sidebar, {
+            data: _ctx.sidebar,
+            "layer-content-menu": _ctx.layerContentMenu
+          }, {
             "layer-panel-header": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "layer-panel-header")
             ]),
@@ -5734,12 +6108,12 @@
               vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
             ]),
             _: 3
-          }, 8, ["data"])
+          }, 8, ["data", "layer-content-menu"])
         ])
       ]),
       workspace: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_workspace, null, {
+          vue.createVNode(_component_Workspace, { "stage-content-menu": _ctx.stageContentMenu }, {
             stage: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "stage")
             ]),
@@ -5753,12 +6127,12 @@
               vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
             ]),
             _: 3
-          })
+          }, 8, ["stage-content-menu"])
         ])
       ]),
       "props-panel": vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-          vue.createVNode(_component_props_panel, {
+          vue.createVNode(_component_PropsPanel, {
             onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
           }, {
             "props-panel-header": vue.withCtx(() => [
@@ -5786,34 +6160,35 @@
       setConfig(option);
       app.component(Editor.name, Editor);
       app.component("m-fields-ui-select", _sfc_main$q);
-      app.component("m-fields-code-link", _sfc_main$s);
-      app.component("m-fields-vs-code", _sfc_main$t);
+      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$p);
       app.component("m-fields-code-select", _sfc_main$r);
     }
   };
 
+  exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockList = _sfc_main$f;
+  exports.CodeBlockList = _sfc_main$e;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeEditorMode = CodeEditorMode;
   exports.CodeSelect = _sfc_main$r;
-  exports.CodeSelectOp = CodeSelectOp;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$e;
-  exports.ContentMenu = _sfc_main$d;
+  exports.ComponentListPanel = _sfc_main$d;
+  exports.ContentMenu = _sfc_main$c;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$o;
+  exports.Icon = _sfc_main$s;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$b;
+  exports.LayerPanel = _sfc_main$a;
   exports.Layout = Layout;
-  exports.PropsPanel = _sfc_main$h;
+  exports.LayoutContainer = _sfc_main$n;
+  exports.PropsPanel = _sfc_main$i;
   exports.TMagicCodeEditor = _sfc_main$p;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$j;
+  exports.ToolButton = _sfc_main$k;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
+  exports.beforePaste = beforePaste;
   exports.change2Fixed = change2Fixed;
   exports.codeBlockService = codeBlockService;
   exports.debug = debug;
@@ -5826,18 +6201,22 @@
   exports.fixNodePosition = fixNodePosition;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
+  exports.getAddParent = getAddParent;
   exports.getConfig = getConfig;
+  exports.getDefaultConfig = getDefaultConfig;
   exports.getGuideLineFromCache = getGuideLineFromCache;
   exports.getInitPositionStyle = getInitPositionStyle;
   exports.getNodeIndex = getNodeIndex;
   exports.getPageList = getPageList;
   exports.getPageNameList = getPageNameList;
+  exports.getPositionInContainer = getPositionInContainer;
   exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
   exports.isFixed = isFixed;
   exports.log = log;
   exports.propsService = propsService;
+  exports.serializeConfig = serializeConfig;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
   exports.storageService = storageService;
@@ -5848,4 +6227,4 @@
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
-//# sourceMappingURL=tmagic-editor.umd.js.map
+//# sourceMappingURL=tmagic-editor.umd.cjs.map