@tmagic/editor 1.2.0-beta.8 → 1.2.0

package/dist/{tmagic-editor.mjs → tmagic-editor.js}

@@ -1,19 +1,23 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, watchEffect, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, normalizeClass, resolveDynamicComponent, toRaw, renderSlot, Fragment, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, isRef, Teleport, nextTick, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, createElementBlock, createVNode, ref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
-import { cloneDeep, map, xor, throttle, pick, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
-import { TMagicCard, TMagicTooltip, tMagicMessage, TMagicButton, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicDialog, TMagicInput, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicTabPane, TMagicTabs, TMagicPopover } from '@tmagic/design';
-import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, DocumentCopy, EditPen, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { isEmpty, map, throttle, pick, omit, keys, cloneDeep, forIn, mergeWith, uniq, isObject, difference, union } from 'lodash-es';
+import { createValues, MForm } from '@tmagic/form';
+import { HookType, NodeType } from '@tmagic/schema';
+import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { TMagicButton, TMagicTooltip, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import * as monaco from 'monaco-editor';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
-import { NodeType } from '@tmagic/schema';
-import { isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName } from '@tmagic/utils';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+import Gesto from 'gesto';
+import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
-import Gesto from 'gesto';
 import KeyController from 'keycon';
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  __name: "Code",
+const __default__$t = defineComponent({
+  name: "MEditorCode"
+});
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$t,
   props: {
     model: null,
     name: null,
@@ -42,8 +46,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  __name: "CodeLink",
+const __default__$s = defineComponent({
+  name: "MEditorCodeLink"
+});
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...__default__$s,
   props: {
     config: null,
     model: null,
@@ -112,57 +119,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
-  ColumnLayout2["LEFT"] = "left";
-  ColumnLayout2["CENTER"] = "center";
-  ColumnLayout2["RIGHT"] = "right";
-  return ColumnLayout2;
-})(ColumnLayout || {});
-var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
-  LayerOffset2["TOP"] = "top";
-  LayerOffset2["BOTTOM"] = "bottom";
-  return LayerOffset2;
-})(LayerOffset || {});
-var Layout = /* @__PURE__ */ ((Layout2) => {
-  Layout2["FLEX"] = "flex";
-  Layout2["FIXED"] = "fixed";
-  Layout2["RELATIVE"] = "relative";
-  Layout2["ABSOLUTE"] = "absolute";
-  return Layout2;
-})(Layout || {});
-var Keys = /* @__PURE__ */ ((Keys2) => {
-  Keys2["ESCAPE"] = "Space";
-  return Keys2;
-})(Keys || {});
-const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
-var CodeEditorMode = /* @__PURE__ */ ((CodeEditorMode2) => {
-  CodeEditorMode2["LIST"] = "list";
-  CodeEditorMode2["EDITOR"] = "editor";
-  return CodeEditorMode2;
-})(CodeEditorMode || {});
-var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
-  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
-  CodeDeleteErrorType2["BIND"] = "bind";
-  return CodeDeleteErrorType2;
-})(CodeDeleteErrorType || {});
-var CodeSelectOp = /* @__PURE__ */ ((CodeSelectOp2) => {
-  CodeSelectOp2["ADD"] = "add";
-  CodeSelectOp2["DELETE"] = "delete";
-  CodeSelectOp2["CHANGE"] = "change";
-  return CodeSelectOp2;
-})(CodeSelectOp || {});
-
-const _hoisted_1$e = { class: "tool-bar" };
-const _hoisted_2$6 = /* @__PURE__ */ createElementVNode("path", {
-  fill: "currentColor",
-  d: "m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
-}, null, -1);
-const _hoisted_3$3 = [
-  _hoisted_2$6
-];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  __name: "CodeSelect",
+const _hoisted_1$g = { class: "m-fields-code-select" };
+const __default__$r = defineComponent({
+  name: "MEditorCodeSelect"
+});
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$r,
   props: {
     config: null,
     model: null,
@@ -174,128 +136,107 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
-    const selectConfig = computed(() => {
+    const mForm = inject("mForm");
+    const codeDsl = computed(() => services?.codeBlockService.getCodeDslSync());
+    const tableConfig = computed(() => {
       const defaultConfig = {
-        multiple: true,
-        options: async () => {
-          const codeDsl = await services?.codeBlockService.getCodeDsl();
-          if (codeDsl) {
-            return map(codeDsl, (value, key) => ({
-              text: `${value.name}\uFF08${key}\uFF09`,
-              label: `${value.name}\uFF08${key}\uFF09`,
-              value: key
-            }));
+        dropSort: true,
+        enableFullscreen: false,
+        border: true,
+        items: [
+          {
+            type: "select",
+            label: "\u4EE3\u7801\u5757",
+            name: "codeId",
+            width: "200px",
+            options: () => {
+              if (codeDsl.value) {
+                return map(codeDsl.value, (value, key) => ({
+                  text: `${value.name}\uFF08${key}\uFF09`,
+                  label: `${value.name}\uFF08${key}\uFF09`,
+                  value: key
+                }));
+              }
+              return [];
+            },
+            onChange: (formState, codeId, { model }) => {
+              model.params = {};
+            }
+          },
+          {
+            name: "params",
+            label: "\u53C2\u6570",
+            defaultValue: {},
+            itemsFunction: (row) => {
+              const paramsConfig = getParamsConfig(row.codeId);
+              if (!row.params)
+                row.params = {};
+              if (isEmpty(row.params)) {
+                createValues(mForm, paramsConfig, {}, row.params);
+              }
+              return paramsConfig;
+            }
           }
-          return [];
-        }
+        ]
       };
       return {
         ...defaultConfig,
-        ...props.config.selectConfig
+        ...props.config.tableConfig
       };
     });
-    const fieldKey = ref("");
-    const multiple = ref(true);
-    let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
-    let shouldWatch = true;
     watch(
       () => props.model[props.name],
-      (selectValue) => {
-        if (shouldWatch) {
-          lastTagSnapshot = cloneDeep(selectValue) || [];
+      (value) => {
+        if (isEmpty(value)) {
+          props.model[props.name] = {
+            hookType: HookType.CODE,
+            hookData: []
+          };
         }
+      },
+      {
+        immediate: true
       }
     );
-    watchEffect(async () => {
-      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) => {
-      shouldWatch = false;
-      let codeIds = value;
-      if (typeof value === "string") {
-        multiple.value = false;
-        lastTagSnapshot = [lastTagSnapshot];
-        codeIds = value ? [value] : [];
-      }
-      await setCombineRelation(codeIds);
-      emit("change", value);
-    };
-    const setCombineRelation = async (codeIds) => {
-      const { id = "" } = services?.editorService.get("node") || {};
-      let opFlag = CodeSelectOp.CHANGE;
-      let diffValues = codeIds;
-      if (multiple.value) {
-        opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-        diffValues = xor(codeIds, lastTagSnapshot);
-      }
-      await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
-      lastTagSnapshot = codeIds;
-      shouldWatch = true;
+    const changeHandler = async () => {
+      emit("change", props.model[props.name]);
     };
-    const viewHandler = async () => {
-      if (props.model[props.name].length === 0) {
-        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 (isEmpty(paramStatements))
+        return [];
+      return paramStatements.map((paramState) => ({
+        name: paramState.name,
+        text: paramState.name,
+        labelWidth: "100px",
+        type: "text"
+      }));
     };
     return (_ctx, _cache) => {
-      const _component_m_fields_select = resolveComponent("m-fields-select");
-      return openBlock(), createElementBlock("div", {
-        class: "m-fields-code-select",
-        key: fieldKey.value
-      }, [
-        createVNode(unref(TMagicCard), { shadow: "never" }, {
-          header: withCtx(() => [
-            createVNode(_component_m_fields_select, {
-              config: unref(selectConfig),
-              model: __props.model,
-              prop: __props.prop,
-              name: __props.name,
-              size: __props.size,
-              onChange: changeHandler
-            }, null, 8, ["config", "model", "prop", "name", "size"])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$e, [
-              createVNode(unref(TMagicTooltip), {
-                class: "tool-item",
-                effect: "dark",
-                content: "\u67E5\u770B\u4EE3\u7801\u5757",
-                placement: "top"
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createElementBlock("svg", {
-                    onClick: viewHandler,
-                    preserveAspectRatio: "xMidYMid meet",
-                    viewBox: "0 0 24 24",
-                    width: "15px",
-                    height: "15px",
-                    "data-v-65a7fb6c": ""
-                  }, _hoisted_3$3))
-                ]),
-                _: 1
-              })
-            ])
-          ]),
-          _: 1
-        })
+      const _component_m_form_table = resolveComponent("m-form-table");
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        createVNode(_component_m_form_table, {
+          config: unref(tableConfig),
+          model: __props.model[__props.name],
+          name: "hookData",
+          enableToggleMode: false,
+          prop: __props.prop,
+          size: __props.size,
+          onChange: changeHandler
+        }, null, 8, ["config", "model", "prop", "size"])
       ]);
     };
   }
 });
 
-const _hoisted_1$d = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "UISelect",
+const _hoisted_1$f = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const __default__$q = defineComponent({
+  name: "MEditorUISelect"
+});
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...__default__$q,
   props: {
     config: null,
     model: null,
@@ -357,7 +298,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$d
+            _hoisted_1$f
           ]),
           _: 1
         }, 8, ["icon"])
@@ -405,12 +346,15 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "CodeEditor",
+const __default__$p = defineComponent({
+  name: "MEditorCodeEditor"
+});
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$p,
   props: {
     initValues: null,
     modifiedValues: null,
-    type: { default: "" },
+    type: null,
     language: { default: "javascript" },
     options: { default: () => ({
       tabSize: 2
@@ -535,9 +479,182 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _hoisted_1$c = ["src"];
+const __default__$o = defineComponent({
+  name: "MEditorResizer"
+});
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$o,
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const target = ref();
+    let getso;
+    onMounted(() => {
+      if (!target.value)
+        return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true
+      }).on("drag", (e) => {
+        if (!target.value)
+          return;
+        emit("change", e.deltaX);
+      });
+    });
+    onUnmounted(() => {
+      getso?.unset();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "target",
+        ref: target,
+        class: "m-editor-resizer"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+
+const __default__$n = defineComponent({
+  name: "MEditorLayout"
+});
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  __name: "Icon",
+  ...__default__$n,
+  props: {
+    left: null,
+    right: null,
+    minLeft: { default: 46 },
+    minRight: { default: 1 },
+    minCenter: { default: 1 },
+    leftClass: null,
+    rightClass: null,
+    centerClass: null
+  },
+  emits: ["update:left", "change", "update:right"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const el = ref();
+    const hasLeft = computed(() => typeof props.left !== "undefined");
+    const hasRight = computed(() => typeof props.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
+        });
+      }
+    });
+    onMounted(() => {
+      if (el.value) {
+        resizerObserver.observe(el.value);
+      }
+    });
+    onUnmounted(() => {
+      resizerObserver.disconnect();
+    });
+    const center = ref(0);
+    const changeLeft = (deltaX) => {
+      if (typeof props.left === "undefined")
+        return;
+      let left = Math.max(props.left + deltaX, props.minLeft) || 0;
+      emit("update:left", left);
+      if (clientWidth - left - (props.right || 0) <= 0) {
+        left = props.left;
+      }
+      const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+      center.value = columnWidth.center;
+      emit("change", {
+        left: columnWidth.left,
+        center: center.value,
+        right: columnWidth.right
+      });
+    };
+    const changeRight = (deltaX) => {
+      if (typeof props.right === "undefined")
+        return;
+      let right = Math.max(props.right - deltaX, props.minRight) || 0;
+      emit("update:right", right);
+      if (clientWidth - (props.left || 0) - right <= 0) {
+        right = props.right;
+      }
+      const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+      center.value = columnWidth.center;
+      emit("change", {
+        left: columnWidth.left,
+        center: center.value,
+        right: columnWidth.right
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        class: "m-editor-layout"
+      }, [
+        unref(hasLeft) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
+            style: normalizeStyle(`width: ${__props.left}px`)
+          }, [
+            renderSlot(_ctx.$slots, "left")
+          ], 6),
+          createVNode(_sfc_main$p, { onChange: changeLeft })
+        ], 64)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
+          style: normalizeStyle(`width: ${center.value}px`)
+        }, [
+          renderSlot(_ctx.$slots, "center")
+        ], 6),
+        unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createVNode(_sfc_main$p, { onChange: changeRight }),
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
+            style: normalizeStyle(`width: ${__props.right}px`)
+          }, [
+            renderSlot(_ctx.$slots, "right")
+          ], 6)
+        ], 64)) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+
+const _hoisted_1$e = ["src"];
+const __default__$m = defineComponent({
+  name: "MEditorIcon"
+});
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   props: {
     icon: null
   },
@@ -556,7 +673,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$c)
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$e)
         ]),
         _: 1
       })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -575,6 +692,42 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
+var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+  ColumnLayout2["LEFT"] = "left";
+  ColumnLayout2["CENTER"] = "center";
+  ColumnLayout2["RIGHT"] = "right";
+  return ColumnLayout2;
+})(ColumnLayout || {});
+var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
+  LayerOffset2["TOP"] = "top";
+  LayerOffset2["BOTTOM"] = "bottom";
+  return LayerOffset2;
+})(LayerOffset || {});
+var Layout = /* @__PURE__ */ ((Layout2) => {
+  Layout2["FLEX"] = "flex";
+  Layout2["FIXED"] = "fixed";
+  Layout2["RELATIVE"] = "relative";
+  Layout2["ABSOLUTE"] = "absolute";
+  return Layout2;
+})(Layout || {});
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["ESCAPE"] = "Space";
+  return Keys2;
+})(Keys || {});
+const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+var CodeEditorMode = /* @__PURE__ */ ((CodeEditorMode2) => {
+  CodeEditorMode2["LIST"] = "list";
+  CodeEditorMode2["EDITOR"] = "editor";
+  return CodeEditorMode2;
+})(CodeEditorMode || {});
+var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
+  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
+  CodeDeleteErrorType2["BIND"] = "bind";
+  return CodeDeleteErrorType2;
+})(CodeDeleteErrorType || {});
+const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+
 const log = (...args) => {
   if (process.env.NODE_ENV === "development") {
     console.log("magic editor: ", ...args);
@@ -704,6 +857,14 @@ class BaseService extends EventEmitter {
         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();
@@ -723,7 +884,8 @@ class CodeBlock extends BaseService {
     editable: true,
     mode: CodeEditorMode.EDITOR,
     combineIds: [],
-    undeletableList: []
+    undeletableList: [],
+    relations: {}
   });
   constructor() {
     super([
@@ -741,31 +903,40 @@ class CodeBlock extends BaseService {
       "deleteCodeDslByIds"
     ]);
   }
-  async setCodeDsl(codeDsl) {
-    this.state.codeDsl = codeDsl;
+  async setCodeDsl(codeDsl2) {
+    this.state.codeDsl = codeDsl2;
     await editorService.setCodeDsl(this.state.codeDsl);
     info("[code-block]:code-dsl-change", this.state.codeDsl);
     this.emit("code-dsl-change", this.state.codeDsl);
   }
   async getCodeDsl(forceRefresh = false) {
+    return this.getCodeDslSync(forceRefresh);
+  }
+  getCodeDslSync(forceRefresh = false) {
     if (!this.state.codeDsl || forceRefresh) {
-      this.state.codeDsl = await editorService.getCodeDsl();
+      this.state.codeDsl = editorService.getCodeDslSync();
     }
     return this.state.codeDsl;
   }
-  async getCodeContentById(id) {
-    if (!id)
+  async getCodeContentById(id2) {
+    if (!id2)
       return null;
     const totalCodeDsl = await this.getCodeDsl();
     if (!totalCodeDsl)
       return null;
-    return totalCodeDsl[id] ?? null;
+    return totalCodeDsl[id2] ?? null;
   }
   async setCodeDslById(id, codeConfig) {
     let codeDsl = await this.getCodeDsl();
+    const codeConfigProcessed = codeConfig;
+    if (codeConfig.content) {
+      codeConfigProcessed.content = eval(codeConfig.content);
+    }
     if (!codeDsl) {
       codeDsl = {
-        [id]: codeConfig
+        [id]: {
+          ...codeConfigProcessed
+        }
       };
     } else {
       const existContent = codeDsl[id] || {};
@@ -773,15 +944,15 @@ class CodeBlock extends BaseService {
         ...codeDsl,
         [id]: {
           ...existContent,
-          ...codeConfig
+          ...codeConfigProcessed
         }
       };
     }
     await this.setCodeDsl(codeDsl);
   }
   async getCodeDslByIds(ids) {
-    const codeDsl = await this.getCodeDsl();
-    return pick(codeDsl, ids);
+    const codeDsl2 = await this.getCodeDsl();
+    return pick(codeDsl2, ids);
   }
   async setCodeEditorShowStatus(status) {
     this.state.isShowCodeEditor = status;
@@ -789,10 +960,10 @@ class CodeBlock extends BaseService {
   getCodeEditorShowStatus() {
     return this.state.isShowCodeEditor;
   }
-  setCodeEditorContent(status, id) {
-    if (!id)
+  setCodeEditorContent(status, id2) {
+    if (!id2)
       return;
-    this.setId(id);
+    this.setId(id2);
     this.state.isShowCodeEditor = status;
   }
   async getCurrentDsl() {
@@ -804,10 +975,10 @@ class CodeBlock extends BaseService {
   async setEditStatus(status) {
     this.state.editable = status;
   }
-  setId(id) {
-    if (!id)
+  setId(id2) {
+    if (!id2)
       return;
-    this.state.id = id;
+    this.state.id = id2;
   }
   getId() {
     return this.state.id;
@@ -824,61 +995,17 @@ class CodeBlock extends BaseService {
   getCombineIds() {
     return this.state.combineIds;
   }
-  async setCombineRelation(compId, diffCodeIds, opFlag, hook) {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl)
-      return;
-    if (opFlag === CodeSelectOp.DELETE) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const index = compsContent?.[compId].findIndex((item) => item === hook);
-          if (typeof index !== "undefined" && index !== -1) {
-            compsContent?.[compId].splice(index, 1);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error("\u89E3\u7ED1\u4EE3\u7801\u5757\u5931\u8D25");
-      }
-    } else if (opFlag === CodeSelectOp.ADD) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const existHooks = compsContent?.[compId];
-          if (isEmpty(existHooks)) {
-            codeDsl[codeId].comps = {
-              ...codeDsl[codeId].comps || {},
-              [compId]: [hook]
-            };
-          } else {
-            existHooks?.push(hook);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error("\u7ED1\u5B9A\u4EE3\u7801\u5757\u5931\u8D25");
-      }
-    } else if (opFlag === CodeSelectOp.CHANGE) {
-      forIn(codeDsl, (codeBlockContent, codeId) => {
-        if (codeId === diffCodeIds[0]) {
-          codeBlockContent.comps = {
-            ...codeBlockContent?.comps || {},
-            [compId]: [hook]
-          };
-        } else if (isEmpty(diffCodeIds) || codeId !== diffCodeIds[0]) {
-          const compHooks = codeBlockContent?.comps?.[compId];
-          if (!compHooks)
-            return true;
-          const index = compHooks.findIndex((hookName) => hookName === hook);
-          if (index !== -1) {
-            compHooks.splice(index, 1);
-            return false;
-          }
-        }
-      });
-    }
-    this.setCodeDsl(codeDsl);
+  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;
@@ -886,6 +1013,15 @@ class CodeBlock extends BaseService {
   async setUndeleteableList(codeIds) {
     this.state.undeletableList = codeIds;
   }
+  setCodeDraft(codeId, content) {
+    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+  }
+  getCodeDraft(codeId) {
+    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+  removeCodeDraft(codeId) {
+    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
   async deleteCodeDslByIds(codeIds) {
     const currentDsl = await this.getCodeDsl();
     const newDsl = omit(currentDsl, codeIds);
@@ -901,13 +1037,13 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
   async deleteCompsInRelation(node) {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl)
+    const codeDsl2 = cloneDeep(await this.getCodeDsl());
+    if (!codeDsl2)
       return;
-    this.recurseNodes(node, codeDsl);
-    this.setCodeDsl(codeDsl);
+    this.refreshRelationDeep(node, codeDsl2);
+    this.setCodeDsl(codeDsl2);
   }
-  destroy() {
+  resetState() {
     this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
     this.state.id = "";
@@ -916,16 +1052,44 @@ class CodeBlock extends BaseService {
     this.state.combineIds = [];
     this.state.undeletableList = [];
   }
-  recurseNodes(node, codeDsl) {
+  destroy() {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+  refreshRelationDeep(node, codeDsl2) {
     if (!node.id)
       return;
-    forIn(codeDsl, (codeBlockContent) => {
+    forIn(codeDsl2, (codeBlockContent) => {
       const compsContent = codeBlockContent.comps || {};
       codeBlockContent.comps = omit(compsContent, node.id);
     });
     if (!isEmpty(node.items)) {
       node.items.forEach((item) => {
-        this.recurseNodes(item, codeDsl);
+        this.refreshRelationDeep(item, codeDsl2);
+      });
+    }
+  }
+  recurseMNode(node, relations) {
+    forIn(node, (value, key) => {
+      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
+        value.hookData.forEach((relationItem) => {
+          if (!relationItem.codeId)
+            return;
+          if (!relations[relationItem.codeId]) {
+            relations[relationItem.codeId] = {};
+          }
+          const codeItem = relations[relationItem.codeId];
+          if (isEmpty(codeItem[node.id])) {
+            codeItem[node.id] = [];
+          }
+          codeItem[node.id].push(key);
+        });
+      }
+    });
+    if (!isEmpty(node.items)) {
+      node.items.forEach((item) => {
+        this.recurseMNode(item, relations);
       });
     }
   }
@@ -1009,8 +1173,9 @@ class History extends BaseService {
       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;
@@ -1041,8 +1206,9 @@ class History extends BaseService {
     return state;
   }
   destroy() {
-    this.empty();
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
   getUndoRedo() {
     if (!this.state.pageId)
@@ -1122,6 +1288,7 @@ class WebStorage extends BaseService {
   }
   destroy() {
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
   getValueAndProtocol(value) {
     let protocol2 = "";
@@ -1294,6 +1461,10 @@ const fixNodePosition = (config, parent, stage) => {
     left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
   };
 };
+const serializeConfig = (config) => serialize(config, {
+  space: 2,
+  unsafe: true
+}).replace(/"(\w+)":\s/g, "$1: ");
 
 class Props extends BaseService {
   state = reactive({
@@ -1335,7 +1506,7 @@ class Props extends BaseService {
       this.setPropsValue(toLine(type), values[type]);
     });
   }
-  setPropsValue(type, value) {
+  async setPropsValue(type, value) {
     this.state.propsValueMap[type] = value;
   }
   async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
@@ -1389,10 +1560,14 @@ class Props extends BaseService {
       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) => {
@@ -1467,6 +1642,13 @@ const getAddParent = (node) => {
   }
   return parentNode;
 };
+const getDefaultConfig = async (addNode, parentNode) => {
+  const { type, inputEvent, ...config } = addNode;
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout);
+  return newNode;
+};
 
 class Editor$1 extends BaseService {
   state = reactive({
@@ -1496,7 +1678,7 @@ class Editor$1 extends BaseService {
         "copy",
         "paste",
         "doPaste",
-        "duAlignCenter",
+        "doAlignCenter",
         "alignCenter",
         "moveLayer",
         "moveToContainer",
@@ -1511,13 +1693,14 @@ class Editor$1 extends BaseService {
     );
   }
   set(name, value) {
+    const preValue = this.state[name];
     this.state[name] = value;
     if (name === "nodes") {
       this.set("node", value[0]);
     }
     if (name === "root") {
       this.state.pageLength = value?.items?.length || 0;
-      this.emit("root-change", value);
+      this.emit("root-change", value, preValue);
     }
   }
   get(name) {
@@ -1577,7 +1760,7 @@ class Editor$1 extends BaseService {
     if (page) {
       historyService.changePage(toRaw(page));
     } else {
-      historyService.empty();
+      historyService.resetState();
     }
     if (node?.id) {
       this.get("stage")?.renderer.runtime?.getApp?.()?.emit(
@@ -1675,6 +1858,9 @@ class Editor$1 extends BaseService {
     }
     const newNodes = await Promise.all(
       addNodes.map((node) => {
+        if (isPage(node)) {
+          return this.doAdd(node, this.get("root"));
+        }
         const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
         if (!parentNode)
           throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
@@ -1693,7 +1879,9 @@ class Editor$1 extends BaseService {
         stage?.select(newNodes[0].id);
       }
     }
-    this.pushHistoryState();
+    if (!isPage(newNodes[0])) {
+      this.pushHistoryState();
+    }
     this.emit("add", newNodes);
     return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
@@ -1735,7 +1923,9 @@ class Editor$1 extends BaseService {
   async remove(nodeOrNodeList) {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
     await Promise.all(nodes.map((node) => this.doRemove(node)));
-    this.pushHistoryState();
+    if (!isPage(nodes[0])) {
+      this.pushHistoryState();
+    }
     this.emit("remove", nodes);
   }
   async doUpdate(config) {
@@ -1747,6 +1937,9 @@ class Editor$1 extends BaseService {
     const node = cloneDeep(toRaw(info.node));
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get("root"));
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+      if (isObject(srcValue) && Array.isArray(objValue)) {
+        return srcValue;
+      }
       if (Array.isArray(srcValue)) {
         return srcValue;
       }
@@ -1790,6 +1983,7 @@ class Editor$1 extends BaseService {
     const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
     this.pushHistoryState();
     this.emit("update", newNodes);
+    codeBlockService.refreshCombineInfo();
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
   async sort(id1, id2) {
@@ -1819,8 +2013,16 @@ class Editor$1 extends BaseService {
     const config = await storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config))
       return;
+    const node = this.get("node");
+    let parent = void 0;
+    if (config.length === 1 && config[0].id === node.id) {
+      parent = this.get("parent");
+      if (parent.type === 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, cloneDeep(config));
@@ -1855,7 +2057,11 @@ class Editor$1 extends BaseService {
     const stage = this.get("stage");
     const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
     const newNode = await this.update(newNodes);
-    await stage?.multiSelect(newNodes.map((node) => node.id));
+    if (newNodes.length > 1) {
+      await stage?.multiSelect(newNodes.map((node) => node.id));
+    } else {
+      await stage?.select(newNodes[0].id);
+    }
     return newNode;
   }
   async moveLayer(offset) {
@@ -1941,8 +2147,7 @@ class Editor$1 extends BaseService {
       }
     });
   }
-  destroy() {
-    this.removeAllListeners();
+  resetState() {
     this.set("root", null);
     this.set("node", null);
     this.set("nodes", []);
@@ -1953,6 +2158,11 @@ class Editor$1 extends BaseService {
     this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
     this.set("pageLength", /* @__PURE__ */ new Map());
   }
+  destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
+  }
   resetModifiedNodeId() {
     this.get("modifiedNodeIds").clear();
   }
@@ -1962,6 +2172,12 @@ class Editor$1 extends BaseService {
       return null;
     return root.codeBlocks || null;
   }
+  getCodeDslSync() {
+    const root = this.get("root");
+    if (!root)
+      return null;
+    return root.codeBlocks || null;
+  }
   async setCodeDsl(codeDsl) {
     if (!this.state.root)
       return;
@@ -2073,10 +2289,14 @@ class Events extends BaseService {
   getMethod(type) {
     return cloneDeep(methodMap[type] || DEFAULT_METHODS);
   }
-  destroy() {
+  resetState() {
     eventMap = reactive({});
     methodMap = reactive({});
+  }
+  destroy() {
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 }
 const eventsService = new Events();
@@ -2276,14 +2496,14 @@ const fillConfig = (config = []) => [
           {
             name: "created",
             text: "created",
-            type: "code-select",
-            labelWidth: "100px"
+            labelWidth: "100px",
+            type: "code-select"
           },
           {
             name: "mounted",
             text: "mounted",
-            type: "code-select",
-            labelWidth: "100px"
+            labelWidth: "100px",
+            type: "code-select"
           }
         ]
       }
@@ -2351,8 +2571,19 @@ class Ui extends BaseService {
     }
     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 = {
@@ -2379,6 +2610,7 @@ const useStage = (stageOptions) => {
     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") {
@@ -2390,225 +2622,97 @@ const useStage = (stageOptions) => {
     moveableOptions: stageOptions.moveableOptions,
     updateDragEl: stageOptions.updateDragEl
   });
-  stage.mask.setGuides([
-    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-    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)
-      return;
-    const storageKey = getGuideLineKey(
-      e.type === 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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  __name: "AddPageBox",
-  setup(__props) {
-    const services = inject("services");
-    const clickHandler = () => {
-      const { editorService } = services || {};
-      if (!editorService)
-        return;
-      editorService.add({
-        type: NodeType.PAGE,
-        name: generatePageNameByApp(toRaw(editorService.get("root")))
-      });
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$5, [
-          createElementVNode("div", {
-            class: "m-editor-empty-button",
-            onClick: clickHandler
-          }, [
-            createElementVNode("div", null, [
-              createVNode(_sfc_main$o, { icon: unref(Plus) }, null, 8, ["icon"])
-            ]),
-            _hoisted_3$2
-          ])
-        ])
-      ]);
-    };
-  }
-});
-
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "Resizer",
-  emits: ["change"],
-  setup(__props, { emit }) {
-    const target = ref();
-    let getso;
-    onMounted(() => {
-      if (!target.value)
-        return;
-      getso = new Gesto(target.value, {
-        container: window,
-        pinchOutside: true
-      }).on("drag", (e) => {
-        if (!target.value)
-          return;
-        emit("change", e.deltaX);
-      });
-    });
-    onUnmounted(() => {
-      getso?.unset();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        ref_key: "target",
-        ref: target,
-        class: "m-editor-resizer"
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 512);
-    };
-  }
-});
-
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  __name: "Layout",
-  props: {
-    left: null,
-    right: null,
-    minLeft: { default: 1 },
-    minRight: { default: 1 },
-    leftClass: null,
-    rightClass: null,
-    centerClass: null
-  },
-  emits: ["update:left", "change", "update:right"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const el = ref();
-    let clientWidth = 0;
-    const resizerObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        clientWidth = contentRect.width;
-        center.value = clientWidth - (props.left || 0) - (props.right || 0);
-        emit("change", {
-          left: props.left,
-          center: center.value,
-          right: props.right
-        });
-      }
-    });
-    onMounted(() => {
-      if (el.value) {
-        resizerObserver.observe(el.value);
-      }
-    });
-    onUnmounted(() => {
-      resizerObserver.disconnect();
-    });
-    const center = ref(0);
-    const changeLeft = (deltaX) => {
-      if (typeof props.left === "undefined")
-        return;
-      let left = Math.max(props.left + deltaX, props.minLeft) || 0;
-      emit("update:left", left);
-      if (clientWidth - left - (props.right || 0) <= 0) {
-        left = props.left;
+  stage.mask.setGuides([
+    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
+  ]);
+  stage.on("select", (el) => {
+    if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
+      return;
+    editorService.select(el.id);
+  });
+  stage.on("highlight", (el) => {
+    editorService.highlight(el.id);
+  });
+  stage.on("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");
+    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 === 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$7 = { class: "m-editor-empty-content" };
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+const __default__$l = defineComponent({
+  name: "MEditorAddPageBox"
+});
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$l,
+  setup(__props) {
+    const services = inject("services");
+    const clickHandler = () => {
+      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
+      editorService.add({
+        type: NodeType.PAGE,
+        name: generatePageNameByApp(toRaw(editorService.get("root")))
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: "m-editor-layout"
-      }, [
-        typeof props.left !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
-            style: normalizeStyle(`width: ${__props.left}px`)
-          }, [
-            renderSlot(_ctx.$slots, "left")
-          ], 6),
-          createVNode(_sfc_main$m, { onChange: changeLeft })
-        ], 64)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
-          style: normalizeStyle(`width: ${center.value}px`)
-        }, [
-          renderSlot(_ctx.$slots, "center")
-        ], 6),
-        typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$m, { onChange: changeRight }),
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_2$7, [
           createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
-            style: normalizeStyle(`width: ${__props.right}px`)
+            class: "m-editor-empty-button",
+            onClick: clickHandler
           }, [
-            renderSlot(_ctx.$slots, "right")
-          ], 6)
-        ], 64)) : createCommentVNode("", true)
-      ], 512);
+            createElementVNode("div", null, [
+              createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
+            ]),
+            _hoisted_3$4
+          ])
+        ])
+      ]);
     };
   }
 });
 
-const _hoisted_1$a = { class: "m-editor" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  __name: "Framework",
+const _hoisted_1$c = { class: "m-editor" };
+const __default__$k = defineComponent({
+  name: "MEditorFramework"
+});
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$k,
   props: {
     codeOptions: { default: () => ({}) }
   },
@@ -2674,7 +2778,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
         unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
           key: 0,
@@ -2682,7 +2786,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$l, {
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$o, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -2701,7 +2805,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$n)
+              createVNode(_sfc_main$m)
             ])
           ]),
           _: 2
@@ -2723,13 +2827,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
-  __name: "ToolButton",
+const _hoisted_2$6 = { class: "el-dropdown-link menubar-menu-button" };
+const __default__$j = defineComponent({
+  name: "MEditorToolButton"
+});
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$j,
   props: {
     data: { default: () => ({
       type: "text",
@@ -2804,7 +2911,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$9, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$b, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -2818,7 +2925,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$o, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2835,7 +2942,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$o, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2868,7 +2975,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$4, [
+            createElementVNode("span", _hoisted_2$6, [
               createTextVNode(toDisplayString(__props.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -2885,8 +2992,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "NavMenu",
+const __default__$i = defineComponent({
+  name: "MEditorNavMenu"
+});
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$i,
   props: {
     data: { default: () => ({}) },
     height: { default: 35 }
@@ -3041,7 +3151,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$j, {
+              return openBlock(), createBlock(_sfc_main$k, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -3053,9 +3163,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { class: "m-editor-props-panel" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "PropsPanel",
+const _hoisted_1$a = { class: "m-editor-props-panel" };
+const __default__$h = defineComponent({
+  name: "MEditorPropsPanel"
+});
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...__default__$h,
   emits: ["mounted"],
   setup(__props, { expose, emit }) {
     const internalInstance = getCurrentInstance();
@@ -3064,7 +3177,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
-    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
+    const propsPanelSize = computed(
+      () => services?.uiService.get("propsPanelSize") || "small"
+    );
     const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
       if (!node.value) {
@@ -3080,6 +3195,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       emit("mounted", internalInstance);
     });
+    onUnmounted(() => {
+      services?.propsService.off("props-configs-change", init);
+    });
     watchEffect(() => {
       if (configForm.value && stage.value) {
         configForm.value.formState.stage = stage.value;
@@ -3097,10 +3215,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
     expose({ submit });
     return (_ctx, _cache) => {
-      const _component_m_form = resolveComponent("m-form");
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "props-panel-header"),
-        createVNode(_component_m_form, {
+        createVNode(unref(MForm), {
           ref_key: "configForm",
           ref: configForm,
           class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
@@ -3115,43 +3232,328 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
-const _hoisted_6$1 = { class: "m-editor-wrapper" };
-const _hoisted_7$1 = {
-  key: 1,
+const _hoisted_1$9 = {
+  key: 0,
   class: "m-editor-content-bottom"
 };
-const _hoisted_8$1 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
-const _hoisted_9$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
-const _hoisted_10 = {
-  key: 2,
+const _hoisted_2$5 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
+const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_4$2 = {
+  key: 1,
   class: "m-editor-content-bottom"
 };
-const _hoisted_11 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const __default__$g = defineComponent({
+  name: "MEditorCodeDraftEditor"
+});
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$g,
+  props: {
+    id: null,
+    content: null,
+    editable: { type: Boolean, default: true },
+    autoSaveDraft: { type: Boolean, default: true },
+    codeOptions: null,
+    language: null
+  },
+  emits: ["save", "close", "saveAndClose"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const services = inject("services");
+    const codeContent = ref("");
+    const editorContent = ref("");
+    const codeEditor = ref();
+    const originCodeContent = ref("");
+    const isFullScreen = ref(false);
+    const codeOptions = computed(() => ({
+      ...props.codeOptions,
+      readOnly: !props.editable
+    }));
+    watchEffect(() => {
+      codeContent.value = props.content;
+      if (!originCodeContent.value) {
+        originCodeContent.value = codeContent.value;
+      }
+      const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+      if (codeDraft) {
+        codeContent.value = codeDraft;
+      }
+    });
+    const saveCodeDraft = async (codeValue) => {
+      if (!props.autoSaveDraft)
+        return;
+      if (originCodeContent.value === codeValue) {
+        services?.codeBlockService.removeCodeDraft(props.id);
+        return;
+      }
+      services?.codeBlockService.setCodeDraft(props.id, codeValue);
+      tMagicMessage.success(`\u4EE3\u7801\u8349\u7A3F\u4FDD\u5B58\u6210\u529F ${datetimeFormatter(new Date())}`);
+    };
+    const saveCode = () => {
+      if (!codeEditor.value || !props.editable)
+        return;
+      editorContent.value = codeEditor.value.getEditor()?.getValue();
+      emit("save", editorContent.value);
+    };
+    const saveAndClose = () => {
+      if (!codeEditor.value || !props.editable)
+        return;
+      editorContent.value = codeEditor.value.getEditor()?.getValue();
+      emit("saveAndClose", editorContent.value);
+    };
+    const close = async () => {
+      const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+      if (codeDraft) {
+        tMagicMessageBox.confirm("\u60A8\u6709\u4EE3\u7801\u4FEE\u6539\u672A\u4FDD\u5B58\uFF0C\u662F\u5426\u4FDD\u5B58\u540E\u518D\u5173\u95ED\uFF1F", "\u63D0\u793A", {
+          confirmButtonText: "\u786E\u8BA4",
+          cancelButtonText: "\u53D6\u6D88",
+          type: "warning"
+        }).then(async () => {
+          saveAndClose();
+        }).catch(() => {
+          services?.codeBlockService.removeCodeDraft(props.id);
+          emit("close");
+        });
+      } else {
+        emit("close");
+      }
+    };
+    const toggleFullScreen = () => {
+      isFullScreen.value = !isFullScreen.value;
+      if (codeEditor.value) {
+        codeEditor.value.focus();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
+      }, [
+        createVNode(_sfc_main$q, {
+          ref_key: "codeEditor",
+          ref: codeEditor,
+          class: "m-editor-container",
+          "init-values": `${codeContent.value}`,
+          onSave: saveCodeDraft,
+          language: __props.language,
+          options: unref(codeOptions)
+        }, null, 8, ["init-values", "language", "options"]),
+        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: toggleFullScreen
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: saveCode
+          }, {
+            default: withCtx(() => [
+              _hoisted_2$5
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: close
+          }, {
+            default: withCtx(() => [
+              _hoisted_3$3
+            ]),
+            _: 1
+          })
+        ])) : (openBlock(), createElementBlock("div", _hoisted_4$2, [
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: toggleFullScreen
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            class: "button",
+            onClick: close
+          }, {
+            default: withCtx(() => [
+              _hoisted_5$1
+            ]),
+            _: 1
+          })
+        ]))
+      ], 2);
+    };
+  }
+});
+
+const _hoisted_1$8 = { class: "code-name-wrapper" };
+const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
+const _hoisted_3$2 = { class: "code-name-wrapper" };
+const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570\u5B9A\u4E49", -1);
+const __default__$f = defineComponent({
+  name: "MEditorFunctionEditor"
+});
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "CodeBlockEditor",
+  ...__default__$f,
+  props: {
+    id: null,
+    name: null,
+    content: null,
+    editable: { type: Boolean, default: true },
+    autoSaveDraft: { type: Boolean, default: true },
+    codeOptions: null
+  },
+  emits: ["change", "field-input"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const tableConfig = {
+      border: true,
+      enableFullscreen: false,
+      name: "params",
+      maxHeight: "150px",
+      items: [
+        {
+          type: "text",
+          label: "\u53C2\u6570\u540D",
+          name: "name"
+        }
+      ]
+    };
+    const services = inject("services");
+    const codeName = ref("");
+    const codeContent = ref("");
+    const evalRes = ref(true);
+    provide("mForm", {
+      $emit: emit,
+      setField: () => {
+      }
+    });
+    const tableModel = ref();
+    watchEffect(() => {
+      codeName.value = props.name;
+      codeContent.value = props.content;
+    });
+    const initTableModel = () => {
+      const codeDsl = services?.codeBlockService.getCodeDslSync();
+      if (!codeDsl)
+        return;
+      tableModel.value = {
+        params: codeDsl[props.id]?.params || []
+      };
+    };
+    initTableModel();
+    const beforeSave = (codeValue) => {
+      try {
+        eval(codeValue);
+        return true;
+      } catch (e) {
+        tMagicMessage.error(e.stack);
+        return false;
+      }
+    };
+    const saveCode = async (codeValue2) => {
+      if (!props.editable)
+        return;
+      evalRes.value = beforeSave(codeValue2);
+      if (evalRes.value) {
+        await services?.codeBlockService.setCodeDslById(props.id, {
+          name: codeName.value,
+          content: codeValue2,
+          params: tableModel.value?.params || []
+        });
+        tMagicMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
+        services?.codeBlockService.removeCodeDraft(props.id);
+      }
+    };
+    const saveAndClose = async (codeValue2) => {
+      await saveCode(codeValue2);
+      if (evalRes.value) {
+        close();
+      }
+    };
+    const close = () => {
+      services?.codeBlockService.setCodeEditorShowStatus(false);
+    };
+    return (_ctx, _cache) => {
+      const _component_m_form_table = resolveComponent("m-form-table");
+      return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
+        header: withCtx(() => [
+          createElementVNode("div", _hoisted_1$8, [
+            _hoisted_2$4,
+            createVNode(unref(TMagicInput), {
+              class: "code-name-input",
+              modelValue: codeName.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeName.value = $event),
+              disabled: !__props.editable
+            }, null, 8, ["modelValue", "disabled"])
+          ]),
+          createElementVNode("div", _hoisted_3$2, [
+            _hoisted_4$1,
+            createVNode(_component_m_form_table, {
+              style: { "width": "320px" },
+              config: tableConfig,
+              model: tableModel.value,
+              enableToggleMode: false,
+              name: "params",
+              prop: "params",
+              size: "small"
+            }, null, 8, ["model"])
+          ])
+        ]),
+        default: withCtx(() => [
+          createVNode(_sfc_main$h, {
+            id: __props.id,
+            content: codeContent.value,
+            editable: __props.editable,
+            autoSaveDraft: __props.autoSaveDraft,
+            codeOptions: __props.codeOptions,
+            language: "javascript",
+            onSave: saveCode,
+            onSaveAndClose: saveAndClose,
+            onClose: close
+          }, null, 8, ["id", "content", "editable", "autoSaveDraft", "codeOptions"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+
+const _hoisted_1$7 = ["id"];
+const _hoisted_2$3 = { class: "list-item" };
+const _hoisted_3$1 = { class: "code-name" };
+const __default__$e = defineComponent({
+  name: "MEditorCodeBlockEditor"
+});
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...__default__$e,
   setup(__props) {
     const services = inject("services");
-    const codeEditor = ref();
+    const codeOptions = inject("codeOptions", {});
     const left = ref(200);
     const currentTitle = ref("");
     const codeConfig = ref(null);
     const state = reactive({
       codeList: []
     });
-    const isShowCodeBlockEditor = computed(
-      () => codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus() || false
-    );
     const mode = computed(() => services?.codeBlockService.getMode());
     const id = computed(() => services?.codeBlockService.getId() || "");
     const editable = computed(() => services?.codeBlockService.getEditStatus());
     const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
     watchEffect(async () => {
-      codeConfig.value = await services?.codeBlockService.getCodeContentById(id.value) || null;
+      codeConfig.value = cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
+      if (!codeConfig.value)
+        return;
+      codeConfig.value.content = serializeConfig(codeConfig.value.content);
     });
     watchEffect(async () => {
       const codeDsl = await services?.codeBlockService.getCodeDslByIds(selectedIds.value) || null;
@@ -3166,47 +3568,24 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       });
       currentTitle.value = state.codeList[0]?.name || "";
     });
-    const saveCode = async () => {
-      if (!codeEditor.value || !codeConfig.value || !editable.value)
-        return true;
-      try {
-        const codeContent = codeEditor.value.getEditor()?.getValue();
-        codeConfig.value.content = eval(codeContent);
-      } catch (e) {
-        tMagicMessage.error(e.stack);
-        return false;
-      }
-      await services?.codeBlockService.setCodeDslById(id.value, {
-        name: codeConfig.value.name,
-        content: codeConfig.value.content
-      });
-      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 openBlock(), createBlock(unref(TMagicDialog), {
-        modelValue: unref(isShowCodeBlockEditor),
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => 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: withCtx(() => [
-          createVNode(_sfc_main$l, {
+          createVNode(_sfc_main$o, {
             left: left.value,
-            "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
+            "onUpdate:left": _cache[0] || (_cache[0] = ($event) => left.value = $event),
             "min-left": 45,
             class: "code-editor-layout"
           }, createSlots({
@@ -3218,72 +3597,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 ])
               }, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
-                createVNode(unref(TMagicCard), { shadow: "never" }, {
-                  header: withCtx(() => [
-                    createElementVNode("div", _hoisted_4$1, [
-                      _hoisted_5$1,
-                      codeConfig.value ? (openBlock(), createBlock(unref(TMagicInput), {
-                        key: 0,
-                        class: "code-name-input",
-                        modelValue: codeConfig.value.name,
-                        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeConfig.value.name = $event),
-                        disabled: !unref(editable)
-                      }, null, 8, ["modelValue", "disabled"])) : createCommentVNode("", true)
-                    ])
-                  ]),
-                  default: withCtx(() => [
-                    createElementVNode("div", _hoisted_6$1, [
-                      codeConfig.value ? (openBlock(), createBlock(_sfc_main$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: !unref(editable)
-                        }
-                      }, null, 8, ["init-values", "options"])) : createCommentVNode("", true),
-                      unref(editable) ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-                        createVNode(unref(TMagicButton), {
-                          type: "primary",
-                          class: "button",
-                          onClick: saveCode
-                        }, {
-                          default: withCtx(() => [
-                            _hoisted_8$1
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(unref(TMagicButton), {
-                          type: "primary",
-                          class: "button",
-                          onClick: saveAndClose
-                        }, {
-                          default: withCtx(() => [
-                            _hoisted_9$1
-                          ]),
-                          _: 1
-                        })
-                      ])) : (openBlock(), createElementBlock("div", _hoisted_10, [
-                        createVNode(unref(TMagicButton), {
-                          type: "primary",
-                          class: "button",
-                          onClick: saveAndClose
-                        }, {
-                          default: withCtx(() => [
-                            _hoisted_11
-                          ]),
-                          _: 1
-                        })
-                      ]))
-                    ])
-                  ]),
-                  _: 1
-                })
+                codeConfig.value ? (openBlock(), createBlock(_sfc_main$g, {
+                  key: 0,
+                  id: unref(id),
+                  name: codeConfig.value.name,
+                  content: codeConfig.value.content,
+                  editable: !!unref(editable),
+                  autoSaveDraft: unref(mode) === unref(CodeEditorMode).EDITOR,
+                  codeOptions: unref(codeOptions)
+                }, null, 8, ["id", "name", "content", "editable", "autoSaveDraft", "codeOptions"])) : createCommentVNode("", true)
               ], 2)) : createCommentVNode("", true)
             ]),
             _: 2
@@ -3318,7 +3640,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           ]), 1032, ["left"])
         ]),
         _: 3
-      }, 8, ["modelValue", "title"]);
+      }, 8, ["title"]);
     };
   }
 });
@@ -3345,8 +3667,11 @@ const _hoisted_9 = /* @__PURE__ */ createElementVNode("svg", {
     d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
   })
 ], -1);
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "CodeBlockList",
+const __default__$d = defineComponent({
+  name: "MEditorCodeBlockList"
+});
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
   props: {
     customError: null
   },
@@ -3354,41 +3679,38 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const props = __props;
     const services = inject("services");
     const state = reactive({
-      codeList: [],
-      bindComps: {}
+      codeList: []
     });
     const editable = computed(() => services?.codeBlockService.getEditStatus());
-    const getBindCompsByCodeId = (codeId, codeBlockContent) => {
-      if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
-        state.bindComps[codeId] = [];
-        return;
-      }
-      const compsField = codeBlockContent.comps;
-      const bindCompIds = Object.keys(compsField);
-      const bindCompsFiltered = bindCompIds.filter((compId) => !isEmpty(compsField[compId]));
-      const compsInfo = bindCompsFiltered.map((compId) => ({
-        id: compId,
-        name: getCompName(compId)
+    const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
+    const codeCombineInfo = ref(null);
+    const getBindCompsByCodeId = (codeId) => {
+      if (!codeCombineInfo.value || !codeCombineInfo.value[codeId])
+        return [];
+      const bindCompsId = Object.keys(codeCombineInfo.value[codeId]);
+      return bindCompsId.map((compId) => ({
+        compId,
+        compName: getCompName(compId)
       }));
-      state.bindComps[codeId] = compsInfo;
     };
     const initList = async () => {
-      const codeDsl = await services?.codeBlockService.getCodeDsl() || null;
-      if (!codeDsl)
+      const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
+      codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
+      if (!codeDsl || !codeCombineInfo.value)
         return;
       state.codeList = [];
       forIn(codeDsl, (value, codeId) => {
-        getBindCompsByCodeId(codeId, value);
         state.codeList.push({
           id: codeId,
           name: value.name,
           codeBlockContent: value,
-          showRelation: true
+          showRelation: true,
+          combineInfo: getBindCompsByCodeId(codeId)
         });
       });
     };
     watch(
-      () => services?.codeBlockService.getCodeDsl(),
+      [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
       () => {
         initList();
       },
@@ -3397,20 +3719,6 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         deep: true
       }
     );
-    watch(
-      () => services?.editorService.get("node"),
-      (curNode) => {
-        if (!curNode?.id)
-          return;
-        forIn(state.bindComps, (bindCompInfo) => {
-          bindCompInfo.forEach((comp) => {
-            if (comp.id === curNode.id) {
-              comp.name = curNode.name;
-            }
-          });
-        });
-      }
-    );
     const createCodeBlock = async () => {
       const { codeBlockService } = services || {};
       if (!codeBlockService) {
@@ -3419,9 +3727,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
       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();
@@ -3433,7 +3742,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       services?.codeBlockService.setCodeEditorContent(true, key);
     };
     const deleteCode = (key) => {
-      const existBinds = !!(state.bindComps[key]?.length > 0);
+      const currentCode = state.codeList.find((codeItem) => codeItem.id === key);
+      const existBinds = !isEmpty(currentCode?.combineInfo);
       const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
       if (!existBinds && !undeleteableList.includes(key)) {
         services?.codeBlockService.deleteCodeDslByIds([key]);
@@ -3499,110 +3809,118 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ])
         ]),
-        !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(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: withCtx(({ data }) => [
-            createElementVNode("div", {
-              id: data.id,
-              class: "list-container"
-            }, [
-              createElementVNode("div", _hoisted_5, [
-                createElementVNode("div", _hoisted_6, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
-                createElementVNode("div", _hoisted_7, [
-                  createVNode(unref(TMagicTooltip), {
-                    effect: "dark",
-                    content: unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
-                    placement: "bottom"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(_sfc_main$o, {
-                        icon: unref(editable) ? unref(Edit) : unref(View),
-                        class: "edit-icon",
-                        onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
-                      }, null, 8, ["icon", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1032, ["content"]),
-                  state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                    key: 0,
-                    effect: "dark",
-                    content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
-                    placement: "bottom"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(_sfc_main$o, {
-                        icon: unref(Link),
-                        class: "edit-icon",
-                        onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
-                      }, null, 8, ["icon", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1024)) : createCommentVNode("", true),
-                  unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                    key: 1,
-                    effect: "dark",
-                    content: "\u5220\u9664",
-                    placement: "bottom"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(_sfc_main$o, {
-                        icon: unref(Close),
-                        class: "edit-icon",
-                        onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
-                      }, null, 8, ["icon", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1024)) : createCommentVNode("", true),
-                  renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                    id: data.id,
-                    data: data.codeBlockContent
-                  })
-                ])
+        createVNode(unref(TMagicScrollbar), null, {
+          default: withCtx(() => [
+            !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(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: withCtx(({ data }) => [
+                createElementVNode("div", {
+                  id: data.id,
+                  class: "list-container"
+                }, [
+                  createElementVNode("div", _hoisted_5, [
+                    createElementVNode("span", _hoisted_6, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
+                    createElementVNode("div", _hoisted_7, [
+                      createVNode(unref(TMagicTooltip), {
+                        effect: "dark",
+                        content: unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
+                        placement: "bottom"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$n, {
+                            icon: unref(editable) ? unref(Edit) : unref(View),
+                            class: "edit-icon",
+                            onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
+                          }, null, 8, ["icon", "onClick"])
+                        ]),
+                        _: 2
+                      }, 1032, ["content"]),
+                      data.combineInfo && data.combineInfo.length > 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                        key: 0,
+                        effect: "dark",
+                        content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
+                        placement: "bottom"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$n, {
+                            icon: unref(Link),
+                            class: "edit-icon",
+                            onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
+                          }, null, 8, ["icon", "onClick"])
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true),
+                      unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                        key: 1,
+                        effect: "dark",
+                        content: "\u5220\u9664",
+                        placement: "bottom"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$n, {
+                            icon: unref(Close),
+                            class: "edit-icon",
+                            onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
+                          }, null, 8, ["icon", "onClick"])
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true),
+                      renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                        id: data.id,
+                        data: data.codeBlockContent
+                      })
+                    ])
+                  ]),
+                  data.showRelation && data.combineInfo && data.combineInfo.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                    _hoisted_9,
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(data.combineInfo, (comp, index) => {
+                      return openBlock(), createBlock(unref(TMagicButton), {
+                        key: index,
+                        class: "code-comp",
+                        size: "small",
+                        plain: true,
+                        onClick: withModifiers(($event) => selectComp(comp.compId), ["stop"])
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(comp.compName), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"]);
+                    }), 128))
+                  ])) : createCommentVNode("", true)
+                ], 8, _hoisted_4)
               ]),
-              data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
-                _hoisted_9,
-                (openBlock(true), createElementBlock(Fragment, null, renderList(state.bindComps[data.id], (comp, index) => {
-                  return openBlock(), createBlock(unref(TMagicButton), {
-                    key: index,
-                    class: "code-comp",
-                    size: "small",
-                    plain: true,
-                    onClick: withModifiers(($event) => selectComp(comp.id), ["stop"])
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(comp.name), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["onClick"]);
-                }), 128))
-              ])) : createCommentVNode("", true)
-            ], 8, _hoisted_4)
+              _: 3
+            }, 8, ["data"])) : createCommentVNode("", true)
           ]),
           _: 3
-        }, 8, ["data"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$g, null, {
+        }),
+        unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$f, { key: 0 }, {
           "code-block-edit-panel-header": withCtx(({ id }) => [
             renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
           ]),
           _: 3
-        })
+        })) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
 const _hoisted_1$5 = ["onClick", "onDragstart"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "ComponentListPanel",
+const __default__$c = defineComponent({
+  name: "MEditorComponentListPanel"
+});
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...__default__$c,
   setup(__props) {
     const searchText = ref("");
     const services = inject("services");
@@ -3691,7 +4009,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$o, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$n, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -3706,7 +4024,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$o, {
+                            createVNode(_sfc_main$n, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -3737,8 +4055,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "ContentMenu",
+const __default__$b = defineComponent({
+  name: "MEditorContentMenu"
+});
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...__default__$b,
   props: {
     menuData: { default: () => [] },
     isSubMenu: { type: Boolean, default: false }
@@ -3817,7 +4138,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
-      return __props.menuData.length && visible.value ? (openBlock(), createElementBlock("div", {
+      return __props.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: "magic-editor-content-menu",
         ref_key: "menu",
@@ -3826,7 +4147,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$j, {
+            return openBlock(), createBlock(_sfc_main$k, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -3845,21 +4166,29 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             onHide: hide
           }, null, 8, ["menu-data"])
         ]))
-      ], 4)) : createCommentVNode("", true);
+      ], 4)), [
+        [vShow, visible.value]
+      ]) : createCommentVNode("", true);
     };
   }
 });
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "LayerMenu",
+const __default__$a = defineComponent({
+  name: "MEditorLayerMenu"
+});
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
+  props: {
+    layerContentMenu: null
+  },
   setup(__props, { expose }) {
+    const props = __props;
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
     const isRoot = computed(() => node.value?.type === NodeType.ROOT);
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
-    const layerContentMenu = inject("layerContentMenu", []);
     const createMenuItems = (group) => group.items.map((component) => ({
       text: component.text,
       type: "button",
@@ -3914,7 +4243,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u590D\u5236",
-        icon: markRaw(DocumentCopy),
+        icon: markRaw(CopyDocument),
         display: () => !isRoot.value,
         handler: () => {
           node.value && services?.editorService.copy(node.value);
@@ -3929,7 +4258,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           node.value && services?.editorService.remove(node.value);
         }
       },
-      ...layerContentMenu
+      ...props.layerContentMenu
     ]);
     const show = (e) => {
       menu.value?.show(e);
@@ -3938,7 +4267,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$d, {
+      return openBlock(), createBlock(_sfc_main$c, {
         "menu-data": unref(menuData),
         ref_key: "menu",
         ref: menu,
@@ -3949,27 +4278,42 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$4 = ["id", "onMouseenter"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "LayerPanel",
+const __default__$9 = defineComponent({
+  name: "MEditorLayerPanel"
+});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
+  props: {
+    layerContentMenu: null
+  },
   setup(__props) {
     const throttleTime = 150;
     const services = inject("services");
+    const editorService = services?.editorService;
     const tree = ref();
     const menu = ref();
-    const editorService = services?.editorService;
+    const checkedKeys = ref([]);
+    const isCtrlKeyDown = ref(false);
+    const filterText = ref("");
+    const expandedKeys = ref([]);
+    const currentNodeKey = ref();
+    const clicked = ref(false);
+    const treeProps = {
+      children: "items",
+      disabled: (data) => Boolean(data.items?.length),
+      class: (data) => {
+        if (clicked.value || isPage(data))
+          return "";
+        if (data.id === highlightNode?.value?.id && !checkedKeys.value.includes(data.id)) {
+          return "cus-tree-node-hover";
+        }
+      }
+    };
+    const isMultiSelect = computed(() => isCtrlKeyDown.value || checkedKeys.value.length > 1);
+    const nodes = computed(() => editorService?.get("nodes") || []);
     const page = computed(() => editorService?.get("page"));
     const values = computed(() => page.value ? [page.value] : []);
-    const selectedNodes = ref([]);
-    const selectedIds = computed(() => selectedNodes.value.map((node) => node.id));
-    const isMultiSelectStatus = ref(false);
-    const spliceNodeKey = ref();
-    const filterText = ref("");
-    const defaultExpandedKeys = computed(() => selectedIds.value.length > 0 ? selectedIds.value : []);
-    editorService?.on("remove", () => {
-      setTimeout(() => {
-        tree.value?.getNode(editorService.get("node").id)?.updateChildren();
-      }, 0);
-    });
+    const highlightNode = computed(() => editorService?.get("highlightNode"));
     const select = async (data) => {
       if (!data.id) {
         throw new Error("\u6CA1\u6709id");
@@ -3988,7 +4332,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       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;
@@ -4020,23 +4363,18 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       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 = union(
+        expandedKeys.value,
+        getNodePath(data.id, [page.value]).map((node) => node.id)
+      );
     };
     const filterNode = (value, data) => {
       if (!value) {
@@ -4053,121 +4391,78 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const filterTextChangeHandler = (val) => {
       tree.value?.filter(val);
     };
-    const expandNodes = async () => {
-      if (!tree.value)
-        return;
-      await 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();
-      });
-    };
-    watch(
-      () => editorService?.get("nodes"),
-      (nodes) => {
-        selectedNodes.value = nodes ?? [];
+    watch(nodes, (nodes2) => {
+      const ids = nodes2?.map((node) => node.id) || [];
+      const idsLength = ids.length;
+      const checkedKeysLength = checkedKeys.value.length;
+      if (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 = 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();
+    });
+    watch(isMultiSelect, (isMultiSelect2) => {
+      if (!isMultiSelect2) {
+        currentNodeKey.value = editorService?.get("node").id;
+        tree.value?.setCurrentKey(currentNodeKey.value);
       }
-    };
-    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 = ref();
-    const addSelectModeListener = () => {
+    const editorServiceRemoveHandler = () => {
+      setTimeout(() => {
+        tree.value?.getNode(editorService?.get("node").id)?.updateChildren();
+      }, 0);
+    };
+    const windowBlurHandler = () => {
+      isCtrlKeyDown.value = false;
+    };
+    let keycon;
+    onMounted(() => {
+      editorService?.on("remove", editorServiceRemoveHandler);
+      keycon = new KeyController();
       const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
       const ctrl = isMac ? "meta" : "ctrl";
-      keycon.value = new KeyController();
-      keycon.value.keydown(ctrl, (e) => {
-        e.inputEvent.preventDefault();
-        isMultiSelectStatus.value = true;
-      });
-      keycon.value.on("blur", () => {
-        isMultiSelectStatus.value = false;
-      });
-      keycon.value.keyup(ctrl, (e) => {
-        e.inputEvent.preventDefault();
-        isMultiSelectStatus.value = false;
+      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 = ref(false);
-    const highlightNode = computed(() => editorService?.get("highlightNode"));
+      globalThis.addEventListener("blur", windowBlurHandler);
+    });
+    onUnmounted(() => {
+      keycon.destroy();
+      editorService?.off("remove", editorServiceRemoveHandler);
+      globalThis.removeEventListener("blur", windowBlurHandler);
+    });
     const highlightHandler = 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;
-    };
-    watch(isMultiSelectStatus, () => {
-      if (isMultiSelectStatus.value && selectedNodes.value.length === 1 && selectedNodes.value[0].type === NodeType.PAGE) {
-        selectedNodes.value = [];
-      }
-    });
-    const multiClickHandler = (data) => {
-      if (!data?.id) {
-        throw new Error("\u6CA1\u6709id");
-      }
-      if (data.type === NodeType.PAGE) {
-        tree.value?.setCheckedKeys([]);
-        return;
-      }
-      const index = selectedNodes.value.findIndex((node) => node.id === data.id);
-      if (index !== -1) {
-        selectedNodes.value.splice(index, 1);
-        spliceNodeKey.value = data.id;
+    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();
@@ -4175,11 +4470,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       menu.value?.show(event);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicScrollbar), {
-        class: "magic-editor-layer-panel",
-        onMouseenter: addSelectModeListener,
-        onMouseleave: removeSelectModeListener
-      }, {
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
           createVNode(unref(TMagicInput), {
@@ -4200,30 +4491,30 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             "node-key": "id",
             "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
             draggable: "",
-            "default-expanded-keys": unref(defaultExpandedKeys),
-            load: loadItems,
+            "default-expanded-keys": expandedKeys.value,
+            "default-checked-keys": checkedKeys.value,
+            "current-node-key": currentNodeKey.value,
             data: unref(values),
             "expand-on-click-node": false,
-            "highlight-current": true,
-            props: {
-              children: "items"
-            },
+            "highlight-current": !unref(isMultiSelect),
+            "check-on-click-node": true,
+            props: treeProps,
             "filter-node-method": filterNode,
             "allow-drop": allowDrop,
-            "show-checkbox": isMultiSelectStatus.value || unref(selectedIds).length > 1,
+            "show-checkbox": unref(isMultiSelect),
             onNodeClick: clickHandler,
             onNodeContextmenu: contextmenu,
             onNodeDragEnd: handleDragEnd,
             onNodeCollapse: handleCollapse,
             onNodeExpand: handleExpand,
-            onCheck: multiClickHandler,
+            onCheck: checkHandler,
             onMousedown: toggleClickFlag,
             onMouseup: toggleClickFlag
           }, {
             default: withCtx(({ node, data }) => [
               createElementVNode("div", {
+                class: "cus-tree-node",
                 id: data.id,
-                class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": canHighlight(data) }]),
                 onMouseenter: ($event) => unref(highlightHandler)(data)
               }, [
                 renderSlot(_ctx.$slots, "layer-node-content", {
@@ -4232,15 +4523,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 }, () => [
                   createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
                 ])
-              ], 42, _hoisted_1$4)
+              ], 40, _hoisted_1$4)
             ]),
             _: 3
-          }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : createCommentVNode("", true),
+          }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$c, {
+            createVNode(_sfc_main$b, {
               ref_key: "menu",
-              ref: menu
-            }, null, 512)
+              ref: menu,
+              "layer-content-menu": __props.layerContentMenu
+            }, null, 8, ["layer-content-menu"])
           ]))
         ]),
         _: 3
@@ -4253,143 +4545,52 @@ const _hoisted_1$3 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "TabPane",
-  props: {
-    data: null
-  },
-  setup(__props) {
-    const props = __props;
-    const config = computed(() => {
-      if (typeof props.data !== "string") {
-        return props.data;
-      }
-      switch (props.data) {
-        case "component-list":
-          return {
-            type: "component",
-            icon: Coin,
-            text: "\u7EC4\u4EF6",
-            component: _sfc_main$e,
-            slots: {}
-          };
-        case "layer":
-          return {
-            type: "component",
-            icon: Files,
-            text: "\u5DF2\u9009\u7EC4\u4EF6",
-            component: _sfc_main$b,
-            slots: {}
-          };
-        case "code-block":
-          return {
-            type: "component",
-            icon: EditPen,
-            text: "\u4EE3\u7801\u7F16\u8F91",
-            component: _sfc_main$f,
-            slots: {}
-          };
-        default:
-          return void 0;
-      }
-    });
-    return (_ctx, _cache) => {
-      return unref(config) ? (openBlock(), createBlock(unref(TMagicTabPane), {
-        key: 0,
-        name: unref(config).text
-      }, {
-        label: withCtx(() => [
-          (openBlock(), createElementBlock("div", {
-            key: unref(config).text
-          }, [
-            unref(config).icon ? (openBlock(), createBlock(_sfc_main$o, {
-              key: 0,
-              icon: unref(config).icon
-            }, null, 8, ["icon"])) : createCommentVNode("", true),
-            unref(config).text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(unref(config).text), 1)) : createCommentVNode("", true)
-          ]))
-        ]),
-        default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(unref(config).component), mergeProps(unref(config).props || {}, toHandlers(unref(config)?.listeners || {})), createSlots({ _: 2 }, [
-            __props.data === "component-list" || unref(config).slots?.componentListPanelHeader ? {
-              name: "component-list-panel-header",
-              fn: withCtx(() => [
-                __props.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : unref(config).slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "component-list" || unref(config).slots?.componentListItem ? {
-              name: "component-list-item",
-              fn: withCtx(({ component }) => [
-                __props.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-                  key: 0,
-                  component
-                }) : unref(config).slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.componentListItem), {
-                  key: 1,
-                  component
-                }, null, 8, ["component"])) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "layer" || unref(config).slots?.layerPanelHeader ? {
-              name: "layer-panel-header",
-              fn: withCtx(() => [
-                __props.data === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : unref(config).slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "code-block" || unref(config).slots?.codeBlockPanelHeader ? {
-              name: "code-block-panel-header",
-              fn: withCtx(() => [
-                __props.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : unref(config).slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "code-block" || unref(config).slots?.codeBlockPanelTool ? {
-              name: "code-block-panel-tool",
-              fn: withCtx(({ id, data }) => [
-                data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                  key: 0,
-                  id,
-                  data
-                }) : unref(config).slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "code-block" || unref(config).slots?.codeBlockEditPanelHeader ? {
-              name: "code-block-edit-panel-header",
-              fn: withCtx(({ id }) => [
-                __props.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
-                  key: 0,
-                  id
-                }) : unref(config).slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
-              ])
-            } : void 0,
-            __props.data === "layer" || unref(config).slots?.layerNodeContent ? {
-              name: "layer-node-content",
-              fn: withCtx(({ data: nodeData, node }) => [
-                __props.data === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
-                  key: 0,
-                  data: nodeData,
-                  node
-                }) : unref(config).slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.layerNodeContent), {
-                  key: 1,
-                  data: nodeData,
-                  node
-                }, null, 8, ["data", "node"])) : createCommentVNode("", true)
-              ])
-            } : void 0
-          ]), 1040))
-        ]),
-        _: 3
-      }, 8, ["name"])) : createCommentVNode("", true);
-    };
-  }
+const __default__$8 = defineComponent({
+  name: "MEditorSidebar"
 });
-
 const _sfc_main$9 = /* @__PURE__ */ 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 = getConfig$1("components").tabPane;
     const activeTabName = ref(props.data?.status);
+    const getItemConfig = (data) => {
+      const map = {
+        "component-list": {
+          $key: "component-list",
+          type: "component",
+          icon: Coin,
+          text: "\u7EC4\u4EF6",
+          component: _sfc_main$d,
+          slots: {}
+        },
+        layer: {
+          $key: "layer",
+          type: "component",
+          icon: Files,
+          text: "\u5DF2\u9009\u7EC4\u4EF6",
+          props: {
+            layerContentMenu: props.layerContentMenu
+          },
+          component: _sfc_main$a,
+          slots: {}
+        },
+        "code-block": {
+          $key: "code-block",
+          type: "component",
+          icon: EditPen,
+          text: "\u4EE3\u7801\u7F16\u8F91",
+          component: _sfc_main$e,
+          slots: {}
+        }
+      };
+      return typeof data === "string" ? map[data] : data;
+    };
+    const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
     watch(
       () => props.data.status,
       (status) => {
@@ -4409,60 +4610,91 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         "tab-position": "left"
       }, {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$a, {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(uiComponent).component), {
               key: index,
-              data: item
-            }, createSlots({ _: 2 }, [
-              item === "layer" ? {
-                name: "layer-panel-header",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "layer-panel-header")
-                ])
-              } : void 0,
-              item === "layer" ? {
-                name: "layer-node-content",
-                fn: withCtx(({ node, data }) => [
-                  renderSlot(_ctx.$slots, "layer-node-content", {
-                    data,
-                    node
-                  })
-                ])
-              } : void 0,
-              item === "component-list" ? {
-                name: "component-list-panel-header",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "component-list-panel-header")
-                ])
-              } : void 0,
-              item === "component-list" ? {
-                name: "component-list-item",
-                fn: withCtx(({ component }) => [
-                  renderSlot(_ctx.$slots, "component-list-item", { component })
-                ])
-              } : void 0,
-              item === "code-block" ? {
-                name: "code-block-panel-header",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "code-block-panel-header")
-                ])
-              } : void 0,
-              item === "code-block" ? {
-                name: "code-block-panel-tool",
-                fn: withCtx(({ id, data }) => [
-                  renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                    id,
-                    data
-                  })
-                ])
-              } : void 0,
-              item === "code-block" ? {
-                name: "code-block-edit-panel-header",
-                fn: withCtx(({ id }) => [
-                  renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
-                ])
-              } : void 0
-            ]), 1032, ["data"]);
+              name: config.text
+            }, {
+              label: withCtx(() => [
+                (openBlock(), createElementBlock("div", {
+                  key: config.text
+                }, [
+                  config.icon ? (openBlock(), createBlock(_sfc_main$n, {
+                    key: 0,
+                    icon: config.icon
+                  }, null, 8, ["icon"])) : createCommentVNode("", true),
+                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+                ]))
+              ]),
+              default: withCtx(() => [
+                config ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+                  config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                    name: "component-list-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "component-list" || config.slots?.componentListItem ? {
+                    name: "component-list-item",
+                    fn: withCtx(({ component }) => [
+                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+                        key: 0,
+                        component
+                      }) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+                        key: 1,
+                        component
+                      }, null, 8, ["component"])) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                    name: "layer-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                    name: "code-block-panel-header",
+                    fn: withCtx(() => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                    name: "code-block-panel-tool",
+                    fn: withCtx(({ id, data }) => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                        key: 0,
+                        id,
+                        data
+                      }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
+                    name: "code-block-edit-panel-header",
+                    fn: withCtx(({ id }) => [
+                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
+                        key: 0,
+                        id
+                      }) : config.slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                    ])
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerNodeContent ? {
+                    name: "layer-node-content",
+                    fn: withCtx(({ data: nodeData, node }) => [
+                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+                        key: 0,
+                        data: nodeData,
+                        node
+                      }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+                        key: 1,
+                        data: nodeData,
+                        node
+                      }, null, 8, ["data", "node"])) : createCommentVNode("", true)
+                    ])
+                  } : void 0
+                ]), 1040)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["name"]);
           }), 128))
         ]),
         _: 3
@@ -4476,8 +4708,11 @@ const _hoisted_1$2 = {
   class: "m-editor-breadcrumb"
 };
 const _hoisted_2$1 = { key: 0 };
+const __default__$7 = defineComponent({
+  name: "MEditorBreadcrumb"
+});
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "Breadcrumb",
+  ...__default__$7,
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4517,8 +4752,11 @@ const _hoisted_1$1 = {
   key: 1,
   style: { "width": "21px" }
 };
+const __default__$6 = defineComponent({
+  name: "MEditorPageBarScrollContainer"
+});
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "PageBarScrollContainer",
+  ...__default__$6,
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4599,14 +4837,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$o, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$o, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$n, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -4622,7 +4860,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$o, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$n, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -4631,8 +4869,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = { class: "m-editor-page-bar-title" };
+const __default__$5 = defineComponent({
+  name: "MEditorPageBar"
+});
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "PageBar",
+  ...__default__$5,
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4691,7 +4932,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$k, {
                         data: {
                           type: "button",
                           text: "\u590D\u5236",
@@ -4699,7 +4940,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$j, {
+                      createVNode(_sfc_main$k, {
                         data: {
                           type: "button",
                           text: "\u5220\u9664",
@@ -4733,6 +4974,10 @@ class ScrollViewer extends EventEmitter {
   height = 0;
   translateXCorrectionValue = 0;
   translateYCorrectionValue = 0;
+  correctionScrollSize = {
+    width: 0,
+    height: 0
+  };
   resizeObserver = new ResizeObserver(() => {
     this.setSize();
     this.setScrollSize();
@@ -4742,6 +4987,12 @@ class ScrollViewer extends EventEmitter {
     this.container = options.container;
     this.target = options.target;
     this.zoom = options.zoom;
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize
+      };
+    }
     this.container.addEventListener("wheel", this.wheelHandler, false);
     this.setSize();
     this.setScrollSize();
@@ -4804,9 +5055,9 @@ class ScrollViewer extends EventEmitter {
   }
   setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-    this.scrollWidth = targetRect.width * this.zoom + 100;
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
     const targetMarginTop = Number(this.target.style.marginTop) || 0;
-    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
     let left;
     let top;
     if (this.scrollWidth < this.width) {
@@ -4839,8 +5090,11 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
+const __default__$4 = defineComponent({
+  name: "MEditorScrollBar"
+});
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "ScrollBar",
+  ...__default__$4,
   props: {
     size: null,
     scrollSize: null,
@@ -4925,14 +5179,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
+const __default__$3 = defineComponent({
+  name: "MEditorScrollViewer"
+});
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "ScrollViewer",
+  ...__default__$3,
   props: {
     width: { default: 0 },
     height: { default: 0 },
     wrapWidth: { default: 0 },
     wrapHeight: { default: 0 },
-    zoom: { default: 1 }
+    zoom: { default: 1 },
+    correctionScrollSize: { default: () => ({
+      width: 0,
+      height: 0
+    }) }
   },
   setup(__props, { expose }) {
     const props = __props;
@@ -4955,7 +5216,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       scrollViewer = new ScrollViewer({
         container: container.value,
         target: el.value,
-        zoom: props.zoom
+        zoom: props.zoom,
+        correctionScrollSize: props.correctionScrollSize
       });
       scrollViewer.on("scroll", (data) => {
         hOffset.value = data.scrollLeft;
@@ -5023,10 +5285,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$2 = defineComponent({
+  name: "MEditorViewerMenu"
+});
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "ViewerMenu",
+  ...__default__$2,
   props: {
-    isMultiSelect: { type: Boolean, default: false }
+    isMultiSelect: { type: Boolean, default: false },
+    stageContentMenu: null
   },
   setup(__props, { expose }) {
     const props = __props;
@@ -5039,8 +5305,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const nodes = computed(() => editorService?.get("nodes"));
     const parent = computed(() => editorService?.get("parent"));
     const stage = computed(() => editorService?.get("stage"));
-    const stageContentMenu = inject("stageContentMenu", []);
-    const menuData = reactive([
+    const menuData = computed(() => [
       {
         type: "button",
         text: "\u6C34\u5E73\u5C45\u4E2D",
@@ -5054,7 +5319,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u590D\u5236",
-        icon: markRaw(DocumentCopy),
+        icon: markRaw(CopyDocument),
         handler: () => {
           nodes.value && editorService?.copy(nodes.value);
           canPaste.value = true;
@@ -5063,6 +5328,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "\u7C98\u8D34",
+        icon: markRaw(DocumentCopy),
         display: () => canPaste.value,
         handler: () => {
           const rect = menu.value?.$el.getBoundingClientRect();
@@ -5142,7 +5408,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           editorService?.get("stage").clearGuides();
         }
       },
-      ...stageContentMenu
+      ...props.stageContentMenu
     ]);
     watch(
       parent,
@@ -5165,8 +5431,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$d, {
-        "menu-data": menuData,
+      return openBlock(), createBlock(_sfc_main$c, {
+        "menu-data": unref(menuData),
         ref_key: "menu",
         ref: menu
       }, null, 8, ["menu-data"]);
@@ -5174,8 +5440,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__$1 = defineComponent({
+  name: "MEditorStage"
+});
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "Stage",
+  ...__default__$1,
+  props: {
+    stageContentMenu: null
+  },
   setup(__props) {
     let stage = null;
     let runtime = null;
@@ -5192,7 +5464,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const zoom = computed(() => services?.uiService.get("zoom") || 1);
     const node = computed(() => services?.editorService.get("node"));
     watchEffect(() => {
-      if (stage)
+      if (stage || !page.value)
         return;
       if (!stageContainer.value)
         return;
@@ -5222,6 +5494,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         runtime.updateRootConfig?.(cloneDeep(toRaw(root2)));
       }
     });
+    watch(page, (page2) => {
+      if (runtime && page2) {
+        runtime.updatePageId?.(page2.id);
+        nextTick(() => {
+          stage?.select(page2.id);
+        });
+      }
+    });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         services?.uiService.set("stageContainerRect", {
@@ -5294,7 +5574,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         height: unref(stageRect)?.height,
         "wrap-width": unref(stageContainerRect)?.width,
         "wrap-height": unref(stageContainerRect)?.height,
-        zoom: unref(zoom)
+        zoom: unref(zoom),
+        "correction-scroll-size": {
+          width: 60,
+          height: 50
+        }
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
@@ -5310,8 +5594,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$3, {
               ref_key: "menu",
               ref: menu,
-              "is-multi-select": unref(isMultiSelect)
-            }, null, 8, ["is-multi-select"])
+              "is-multi-select": unref(isMultiSelect),
+              "stage-content-menu": __props.stageContentMenu
+            }, null, 8, ["is-multi-select", "stage-content-menu"])
           ]))
         ]),
         _: 1
@@ -5320,8 +5605,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const __default__ = defineComponent({
+  name: "MEditorWorkspace"
+});
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "Workspace",
+  ...__default__,
+  props: {
+    stageContentMenu: null
+  },
   setup(__props) {
     const services = inject("services");
     const workspace = ref();
@@ -5432,9 +5723,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }, [
         createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          (openBlock(), createBlock(_sfc_main$2, {
-            key: unref(page)?.id
-          }))
+          unref(page) ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            "stage-content-menu": __props.stageContentMenu
+          }, null, 8, ["stage-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content"),
         createVNode(_sfc_main$6, null, {
@@ -5464,9 +5756,13 @@ class ComponentList extends BaseService {
   getList() {
     return this.state.list;
   }
-  destroy() {
+  resetState() {
     this.state.list = [];
+  }
+  destroy() {
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 }
 const componentListService = new ComponentList();
@@ -5474,11 +5770,11 @@ const componentListService = new ComponentList();
 const _sfc_main = 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: {
@@ -5493,6 +5789,10 @@ const _sfc_main = defineComponent({
     sidebar: {
       type: Object
     },
+    menu: {
+      type: Object,
+      default: () => ({ left: [], right: [] })
+    },
     layerContentMenu: {
       type: Array,
       default: () => []
@@ -5501,10 +5801,6 @@ const _sfc_main = defineComponent({
       type: Array,
       default: () => []
     },
-    menu: {
-      type: Object,
-      default: () => ({ left: [], right: [] })
-    },
     render: {
       type: Function
     },
@@ -5538,7 +5834,7 @@ const _sfc_main = defineComponent({
     },
     containerHighlightClassName: {
       type: String,
-      default: CONTAINER_HIGHLIGHT_CLASS
+      default: CONTAINER_HIGHLIGHT_CLASS_NAME
     },
     containerHighlightDuration: {
       type: Number,
@@ -5557,20 +5853,33 @@ const _sfc_main = defineComponent({
     },
     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", toRaw(editorService.get("root")));
-    });
+      if (toRaw(value) !== toRaw(preValue)) {
+        emit("update:modelValue", value);
+      }
+    };
+    editorService.on("root-change", rootChangeHandler);
     watch(
       () => props.modelValue,
       (modelValue) => {
@@ -5632,13 +5941,13 @@ const _sfc_main = defineComponent({
       }
     );
     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,
@@ -5651,8 +5960,7 @@ const _sfc_main = defineComponent({
       codeBlockService
     };
     provide("services", services);
-    provide("layerContentMenu", props.layerContentMenu);
-    provide("stageContentMenu", props.stageContentMenu);
+    provide("codeOptions", props.codeOptions);
     provide(
       "stageOptions",
       reactive({
@@ -5665,7 +5973,8 @@ const _sfc_main = defineComponent({
         isContainer: props.isContainer,
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
-        containerHighlightType: props.containerHighlightType
+        containerHighlightType: props.containerHighlightType,
+        disabledDragStart: props.disabledDragStart
       })
     );
     return services;
@@ -5681,20 +5990,23 @@ const _export_sfc = (sfc, props) => {
 };
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nav_menu = resolveComponent("nav-menu");
-  const _component_sidebar = resolveComponent("sidebar");
-  const _component_workspace = resolveComponent("workspace");
-  const _component_props_panel = resolveComponent("props-panel");
-  const _component_framework = resolveComponent("framework");
-  return openBlock(), createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
+  const _component_TMagicNavMenu = resolveComponent("TMagicNavMenu");
+  const _component_Sidebar = resolveComponent("Sidebar");
+  const _component_Workspace = resolveComponent("Workspace");
+  const _component_PropsPanel = resolveComponent("PropsPanel");
+  const _component_Framework = resolveComponent("Framework");
+  return openBlock(), createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
+        createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
       ])
     ]),
     sidebar: withCtx(() => [
       renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_sidebar, { data: _ctx.sidebar }, {
+        createVNode(_component_Sidebar, {
+          data: _ctx.sidebar,
+          "layer-content-menu": _ctx.layerContentMenu
+        }, {
           "layer-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "layer-panel-header")
           ]),
@@ -5723,12 +6035,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
           ]),
           _: 3
-        }, 8, ["data"])
+        }, 8, ["data", "layer-content-menu"])
       ])
     ]),
     workspace: withCtx(() => [
       renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
-        createVNode(_component_workspace, null, {
+        createVNode(_component_Workspace, { "stage-content-menu": _ctx.stageContentMenu }, {
           stage: withCtx(() => [
             renderSlot(_ctx.$slots, "stage")
           ]),
@@ -5742,12 +6054,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "page-bar-popover", { page })
           ]),
           _: 3
-        })
+        }, 8, ["stage-content-menu"])
       ])
     ]),
     "props-panel": withCtx(() => [
       renderSlot(_ctx.$slots, "props-panel", {}, () => [
-        createVNode(_component_props_panel, {
+        createVNode(_component_PropsPanel, {
           onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
         }, {
           "props-panel-header": withCtx(() => [
@@ -5774,13 +6086,13 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     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("magic-code-editor", _sfc_main$p);
-    app.component("m-fields-code-select", _sfc_main$r);
+    app.component("m-fields-ui-select", _sfc_main$r);
+    app.component("m-fields-code-link", _sfc_main$t);
+    app.component("m-fields-vs-code", _sfc_main$u);
+    app.component("magic-code-editor", _sfc_main$q);
+    app.component("m-fields-code-select", _sfc_main$s);
   }
 };
 
-export { COPY_STORAGE_KEY, _sfc_main$f as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$r as CodeSelect, CodeSelectOp, ColumnLayout, _sfc_main$e as ComponentListPanel, _sfc_main$d as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$o as Icon, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$h as PropsPanel, _sfc_main$p as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$j as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
-//# sourceMappingURL=tmagic-editor.mjs.map
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$s as CodeSelect, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$n as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$o as LayoutContainer, _sfc_main$i as PropsPanel, _sfc_main$q as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$k as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+//# sourceMappingURL=tmagic-editor.js.map