@tmagic/editor 1.3.6 → 1.3.7

package/dist/tmagic-editor.umd.cjs

@@ -29,10 +29,10 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _hoisted_1$s = {
+  const _hoisted_1$t = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -158,7 +158,7 @@
         loading.value = true;
         init();
       });
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         resizeObserver.disconnect();
       });
       const fullScreen = vue.ref(false);
@@ -190,7 +190,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -218,7 +218,7 @@
     }
   });
 
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -243,7 +243,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$T, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -258,7 +258,7 @@
     }
   });
 
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -338,7 +338,7 @@
     }
   });
 
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -411,11 +411,11 @@
     }
   });
 
-  const _hoisted_1$r = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$j = { style: { "flex": "1" } };
-  const _hoisted_3$7 = { style: { "flex": "1" } };
-  const _hoisted_4$5 = { class: "dialog-footer" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$s = { style: { "display": "flex", "margin-bottom": "10px" } };
+  const _hoisted_2$k = { style: { "flex": "1" } };
+  const _hoisted_3$8 = { style: { "flex": "1" } };
+  const _hoisted_4$7 = { class: "dialog-footer" };
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -438,7 +438,7 @@
         height.value = globalThis.innerHeight;
       };
       globalThis.addEventListener("resize", windowReizehandler);
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         globalThis.removeEventListener("resize", windowReizehandler);
       });
       const magicVsEditor = vue.ref();
@@ -636,7 +636,7 @@
             fullscreen: ""
           }, {
             footer: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_4$5, [
+              vue.createElementVNode("span", _hoisted_4$7, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -659,8 +659,8 @@
               ])
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$r, [
-                vue.createElementVNode("div", _hoisted_2$j, [
+              vue.createElementVNode("div", _hoisted_1$s, [
+                vue.createElementVNode("div", _hoisted_2$k, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "info"
@@ -671,7 +671,7 @@
                     _: 1
                   })
                 ]),
-                vue.createElementVNode("div", _hoisted_3$7, [
+                vue.createElementVNode("div", _hoisted_3$8, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "success"
@@ -683,7 +683,7 @@
                   })
                 ])
               ]),
-              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
@@ -1614,25 +1614,33 @@
   const UI_SELECT_MODE_EVENT_NAME = "ui-select";
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-  const getPageList = (app) => {
-    if (app.items && Array.isArray(app.items)) {
-      return app.items.filter((item) => item.type === schema.NodeType.PAGE);
-    }
-    return [];
+  const getPageList = (root) => {
+    if (!root)
+      return [];
+    if (!Array.isArray(root.items))
+      return [];
+    return root.items.filter((item) => utils.isPage(item));
+  };
+  const getPageFragmentList = (root) => {
+    if (!root)
+      return [];
+    if (!Array.isArray(root.items))
+      return [];
+    return root.items.filter((item) => utils.isPageFragment(item));
   };
   const getPageNameList = (pages) => pages.map((page) => page.name || "index");
-  const generatePageName = (pageNameList) => {
+  const generatePageName = (pageNameList, type) => {
     let pageLength = pageNameList.length;
     if (!pageLength)
-      return "index";
-    let pageName = `page_${pageLength}`;
+      return `${type}_index`;
+    let pageName = `${type}_${pageLength}`;
     while (pageNameList.includes(pageName)) {
       pageLength += 1;
-      pageName = `page_${pageLength}`;
+      pageName = `${type}_${pageLength}`;
     }
     return pageName;
   };
-  const generatePageNameByApp = (app) => generatePageName(getPageNameList(getPageList(app)));
+  const generatePageNameByApp = (app, type) => generatePageName(getPageNameList(type === "page" ? getPageList(app) : getPageFragmentList(app)), type);
   const isFixed = (node) => node.style?.position === "fixed";
   const getNodeIndex = (id, parent) => {
     const items = parent?.items || [];
@@ -1674,7 +1682,7 @@
     }
     return style;
   };
-  const setChilrenLayout = (node, layout) => {
+  const setChildrenLayout = (node, layout) => {
     node.items?.forEach((child) => {
       setLayout(child, layout);
     });
@@ -1886,6 +1894,9 @@
     }
     reset() {
       this.state.pageSteps = {};
+      this.resetPage();
+    }
+    resetPage() {
       this.state.pageId = void 0;
       this.state.canRedo = false;
       this.state.canUndo = false;
@@ -2275,9 +2286,12 @@
       node: null,
       nodes: [],
       stage: null,
+      stageLoading: true,
       highlightNode: null,
       modifiedNodeIds: /* @__PURE__ */ new Map(),
-      pageLength: 0
+      pageLength: 0,
+      pageFragmentLength: 0,
+      disabledMultiSelect: false
     });
     isHistoryStateChange = false;
     constructor() {
@@ -2311,7 +2325,7 @@
     }
     /**
      * 设置当前指点节点配置
-     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
      * @param value MNode
      */
     set(name, value) {
@@ -2324,17 +2338,22 @@
         if (Array.isArray(value)) {
           throw new Error("root 不能为数组");
         }
-        if (value && lodashEs.isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
-          this.state.pageLength = value.items?.length || 0;
+        if (value && lodashEs.isObject(value)) {
+          const app = value;
+          this.state.pageLength = getPageList(app).length || 0;
+          this.state.pageFragmentLength = getPageFragmentList(app).length || 0;
+          this.state.stageLoading = this.state.pageLength !== 0;
         } else {
           this.state.pageLength = 0;
+          this.state.pageFragmentLength = 0;
+          this.state.stageLoading = false;
         }
         this.emit("root-change", value, preValue);
       }
     }
     /**
      * 获取当前指点节点配置
-     * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+     * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
      * @returns MNode
      */
     get(name) {
@@ -2369,7 +2388,7 @@
       info.node = path[path.length - 1];
       info.parent = path[path.length - 2];
       path.forEach((item) => {
-        if (item.type === schema.NodeType.PAGE) {
+        if (utils.isPage(item) || utils.isPageFragment(item)) {
           info.page = item;
           return;
         }
@@ -2493,6 +2512,16 @@
       });
       this.set("nodes", nodes);
     }
+    selectRoot() {
+      const root = this.get("root");
+      if (!root)
+        return;
+      this.set("nodes", [root]);
+      this.set("parent", null);
+      this.set("page", null);
+      this.set("stage", null);
+      this.set("highlightNode", null);
+    }
     async doAdd(node, parent) {
       const root = this.get("root");
       if (!root)
@@ -2501,10 +2530,10 @@
       const stage = this.get("stage");
       if (!curNode)
         throw new Error("当前选中节点为空");
-      if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
+      if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && !(utils.isPage(node) || utils.isPageFragment(node))) {
         throw new Error("app下不能添加组件");
       }
-      if (parent.id !== curNode.id && node.type !== schema.NodeType.PAGE) {
+      if (parent.id !== curNode.id && !(utils.isPage(node) || utils.isPageFragment(node))) {
         const index = parent.items.indexOf(curNode);
         parent.items?.splice(index + 1, 0, node);
       } else {
@@ -2546,7 +2575,7 @@
       const newNodes = await Promise.all(
         addNodes.map((node) => {
           const root = this.get("root");
-          if (utils.isPage(node) && root) {
+          if ((utils.isPage(node) || utils.isPageFragment(node)) && root) {
             return this.doAdd(node, root);
           }
           const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
@@ -2563,11 +2592,13 @@
         await this.select(newNodes[0]);
         if (utils.isPage(newNodes[0])) {
           this.state.pageLength += 1;
+        } else if (utils.isPageFragment(newNodes[0])) {
+          this.state.pageFragmentLength += 1;
         } else {
           stage?.select(newNodes[0].id);
         }
       }
-      if (!utils.isPage(newNodes[0])) {
+      if (!(utils.isPage(newNodes[0]) || utils.isPageFragment(newNodes[0]))) {
         this.pushHistoryState();
       }
       this.emit("add", newNodes);
@@ -2577,7 +2608,7 @@
       const root = this.get("root");
       if (!root)
         throw new Error("root不能为空");
-      const { parent, node: curNode } = this.getNodeInfo(node.id);
+      const { parent, node: curNode } = this.getNodeInfo(node.id, false);
       if (!parent || !curNode)
         throw new Error("找不要删除的节点");
       const index = getNodeIndex(curNode.id, parent);
@@ -2586,26 +2617,31 @@
       parent.items?.splice(index, 1);
       const stage = this.get("stage");
       stage?.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
-      if (node.type === schema.NodeType.PAGE) {
-        this.state.pageLength -= 1;
-        if (root.items[0]) {
-          await this.select(root.items[0]);
-          stage?.select(root.items[0].id);
+      const selectDefault = async (pages) => {
+        if (pages[0]) {
+          await this.select(pages[0]);
+          stage?.select(pages[0].id);
         } else {
-          this.set("nodes", [root]);
-          this.set("parent", null);
-          this.set("page", null);
-          this.set("stage", null);
-          this.set("highlightNode", null);
-          this.resetModifiedNodeId();
-          historyService.reset();
-          return;
+          this.selectRoot();
+          historyService.resetPage();
         }
+      };
+      const rootItems = root.items || [];
+      if (utils.isPage(node)) {
+        this.state.pageLength -= 1;
+        await selectDefault(getPageList(root));
+      } else if (utils.isPageFragment(node)) {
+        this.state.pageFragmentLength -= 1;
+        await selectDefault(getPageFragmentList(root));
       } else {
         await this.select(parent);
         stage?.select(parent.id);
+        this.addModifiedNodeId(parent.id);
+      }
+      if (!rootItems.length) {
+        this.resetModifiedNodeId();
+        historyService.reset();
       }
-      this.addModifiedNodeId(parent.id);
     }
     /**
      * 删除组件
@@ -2614,7 +2650,7 @@
     async remove(nodeOrNodeList) {
       const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
       await Promise.all(nodes.map((node) => this.doRemove(node)));
-      if (!utils.isPage(nodes[0])) {
+      if (!(utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))) {
         this.pushHistoryState();
       }
       this.emit("remove", nodes);
@@ -2654,7 +2690,7 @@
       const newLayout = await this.getLayout(newConfig);
       const layout = await this.getLayout(node);
       if (Array.isArray(newConfig.items) && newLayout !== layout) {
-        newConfig = setChilrenLayout(newConfig, newLayout);
+        newConfig = setChildrenLayout(newConfig, newLayout);
       }
       parentNodeItems[index] = newConfig;
       const nodes = this.get("nodes");
@@ -2666,7 +2702,7 @@
         parentId: parent.id,
         root: lodashEs.cloneDeep(root)
       });
-      if (newConfig.type === schema.NodeType.PAGE) {
+      if (utils.isPage(newConfig) || utils.isPageFragment(newConfig)) {
         this.set("page", newConfig);
       }
       this.addModifiedNodeId(newConfig.id);
@@ -3115,8 +3151,8 @@
           };
         }
         const root = editorService.get("root");
-        if (utils.isPage(pasteConfig) && root) {
-          pasteConfig.name = generatePageNameByApp(root);
+        if ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
+          pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.NodeType.PAGE_FRAGMENT);
         }
         return pasteConfig;
       })
@@ -3154,7 +3190,7 @@
     return newNode;
   };
 
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3204,8 +3240,8 @@
     }
   });
 
-  const _hoisted_1$q = ["src"];
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$r = ["src"];
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -3229,7 +3265,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$r)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -3307,9 +3343,9 @@
     };
   };
 
-  const _hoisted_1$p = { class: "m-fields-code-select-col" };
-  const _hoisted_2$i = { class: "code-select-container" };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$q = { class: "m-fields-code-select-col" };
+  const _hoisted_2$j = { class: "code-select-container" };
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -3382,8 +3418,8 @@
       const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -3391,14 +3427,14 @@
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3406,7 +3442,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3419,9 +3455,9 @@
     }
   });
 
-  const _hoisted_1$o = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$p = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -3656,12 +3692,12 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$h, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -3713,7 +3749,7 @@
     }
   });
 
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3768,10 +3804,10 @@
     }
   });
 
-  const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-  const _hoisted_2$g = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-  const _hoisted_3$6 = { class: "el-input__inner" };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_3$7 = { class: "el-input__inner" };
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
     },
@@ -3961,12 +3997,12 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$n, [
+            vue.createElementVNode("div", _hoisted_1$o, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$g, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$h, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -3978,7 +4014,7 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
-            vue.createElementVNode("div", _hoisted_3$6, [
+            vue.createElementVNode("div", _hoisted_3$7, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
                 return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                   item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -3996,7 +4032,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$K, {
+              vue.createVNode(_sfc_main$N, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -4079,9 +4115,9 @@
     };
   };
 
-  const _hoisted_1$m = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$f = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$n = { class: "m-editor-data-source-methods" };
+  const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
     },
@@ -4151,12 +4187,12 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$f, [
+          vue.createElementVNode("div", _hoisted_2$g, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -4170,7 +4206,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4185,9 +4221,9 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$e = { class: "data-source-method-select-container" };
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$m = { class: "m-fields-data-source-method-select" };
+  const _hoisted_2$f = { class: "data-source-method-select-container" };
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
     },
@@ -4270,22 +4306,22 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
-          vue.createElementVNode("div", _hoisted_2$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: cascaderConfig.value,
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["config", "model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCodeHandler
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -4294,7 +4330,7 @@
             "params-config": paramsConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -4307,9 +4343,9 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMocks"
     },
@@ -4396,7 +4432,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$Q,
+          component: _sfc_main$T,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -4505,12 +4541,12 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$d, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -4541,7 +4577,7 @@
     }
   });
 
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceSelect"
     },
@@ -4598,12 +4634,12 @@
     }
   });
 
-  const _hoisted_1$j = { class: "m-fields-event-select" };
-  const _hoisted_2$c = {
+  const _hoisted_1$k = { class: "m-fields-event-select" };
+  const _hoisted_2$d = {
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorEventSelect"
     },
@@ -4806,7 +4842,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -4816,7 +4852,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -4866,32 +4902,32 @@
     }
   });
 
-  const _hoisted_1$i = {
+  const _hoisted_1$j = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$b = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-  const _hoisted_4$4 = [
-    _hoisted_2$b
+  const _hoisted_2$c = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_4$6 = [
+    _hoisted_2$c
   ];
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$i, _hoisted_4$4);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$j, _hoisted_4$6);
       };
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-key-value" };
-  const _hoisted_2$a = { key: 0 };
-  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$i = { class: "m-fields-key-value" };
+  const _hoisted_2$b = { key: 0 };
+  const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -4949,8 +4985,8 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "m-fields-key-value-item",
@@ -4964,7 +5000,7 @@
                   size: _ctx.size,
                   onChange: keyChangeHandler
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-                _hoisted_3$5,
+                _hoisted_3$6,
                 vue.createVNode(vue.unref(design.TMagicInput), {
                   placeholder: "value",
                   modelValue: records.value[index][1],
@@ -4999,7 +5035,7 @@
               _: 1
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("", true),
-          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
@@ -5015,7 +5051,7 @@
             size: "default",
             disabled: _ctx.disabled,
             text: "",
-            icon: _sfc_main$A,
+            icon: _sfc_main$D,
             onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
           }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
@@ -5023,12 +5059,72 @@
     }
   });
 
+  const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
+  const _hoisted_2$a = { class: "page-fragment-select-container" };
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageFragmentSelect"
+    },
+    __name: "PageFragmentSelect",
+    props: {
+      config: {},
+      model: {},
+      initValues: {},
+      values: {},
+      name: {},
+      prop: {},
+      disabled: { type: Boolean, default: false },
+      size: {},
+      lastValues: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit: __emit }) {
+      const services = vue.inject("services");
+      const emit = __emit;
+      const props = __props;
+      const pageList = vue.computed(
+        () => services?.editorService.get("root")?.items.filter((item) => item.type === schema.NodeType.PAGE_FRAGMENT)
+      );
+      const selectConfig = {
+        type: "select",
+        name: props.name,
+        options: () => {
+          if (pageList.value) {
+            return pageList.value.map((item) => ({
+              text: `${item.name}（${item.id}）`,
+              label: `${item.name}（${item.id}）`,
+              value: item.id
+            }));
+          }
+          return [];
+        }
+      };
+      const changeHandler = async () => {
+        emit("change", props.model[props.name]);
+      };
+      return (_ctx, _cache) => {
+        const _component_m_form_container = vue.resolveComponent("m-form-container");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          vue.createElementVNode("div", _hoisted_2$a, [
+            vue.createVNode(_component_m_form_container, {
+              class: "select",
+              config: selectConfig,
+              model: _ctx.model,
+              size: _ctx.size,
+              onChange: changeHandler
+            }, null, 8, ["model", "size"])
+          ])
+        ]);
+      };
+    }
+  });
+
   const _hoisted_1$g = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -5204,7 +5300,7 @@
         isDraging.value = false;
       });
     });
-    vue.onUnmounted(() => {
+    vue.onBeforeUnmount(() => {
       getso?.unset();
       isDraging.value = false;
     });
@@ -5213,7 +5309,7 @@
     };
   };
 
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -5235,7 +5331,7 @@
     }
   });
 
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -5302,7 +5398,7 @@
           resizerObserver.observe(el.value);
         }
       });
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         resizerObserver.disconnect();
       });
       const center = vue.ref(0);
@@ -5362,7 +5458,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$x, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$z, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5371,7 +5467,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$x, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$z, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -5384,345 +5480,749 @@
     }
   });
 
-  const _hoisted_1$f = { class: "m-editor-empty-panel" };
-  const _hoisted_2$9 = { class: "m-editor-empty-content" };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$f = {
+    key: 1,
+    class: "menu-item-text"
+  };
+  const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorAddPageBox"
+      name: "MEditorToolButton"
     },
-    __name: "AddPageBox",
-    setup(__props) {
-      const services = vue.inject("services");
-      const clickHandler = () => {
-        const { editorService } = services || {};
-        if (!editorService)
-          return;
-        const root = vue.toRaw(editorService.get("root"));
-        if (!root)
-          throw new Error("root 不能为空");
-        editorService.add({
-          type: schema.NodeType.PAGE,
-          name: generatePageNameByApp(root)
-        });
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-          vue.createElementVNode("div", _hoisted_2$9, [
-            vue.createElementVNode("div", {
-              class: "m-editor-empty-button",
-              onClick: clickHandler
-            }, [
-              vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-              ]),
-              _hoisted_3$4
-            ])
-          ])
-        ]);
-      };
-    }
-  });
-
-  const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-  const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-  const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
-  const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorFramework"
+    __name: "ToolButton",
+    props: {
+      data: { default: () => ({
+        type: "text",
+        display: false
+      }) },
+      eventType: { default: "click" }
     },
-    __name: "Framework",
     setup(__props) {
-      const codeOptions = vue.inject("codeOptions", {});
-      const { editorService, uiService } = vue.inject("services") || {};
-      const content = vue.ref();
-      const splitView = vue.ref();
-      const root = vue.computed(() => editorService?.get("root"));
-      const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
-      const showSrc = vue.computed(() => uiService?.get("showSrc"));
-      const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-      const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-      const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-      const columnWidth = vue.ref({
-        left: leftColumnWidthCacheData,
-        center: 0,
-        right: RightColumnWidthCacheData
+      const props = __props;
+      const services = vue.inject("services");
+      const disabled = vue.computed(() => {
+        if (typeof props.data === "string")
+          return false;
+        if (props.data.type === "component")
+          return false;
+        if (typeof props.data.disabled === "function") {
+          return props.data.disabled(services);
+        }
+        return props.data.disabled;
       });
-      vue.watch(
-        [pageLength, splitView],
-        () => {
-          splitView.value?.updateWidth();
-        },
-        {
-          immediate: true
+      const display = vue.computed(() => {
+        if (!props.data)
+          return false;
+        if (typeof props.data === "string")
+          return true;
+        if (typeof props.data.display === "function") {
+          return props.data.display(services);
         }
-      );
-      vue.watch(
-        () => columnWidth.value.right,
-        (right) => {
-          if (typeof right === "undefined")
-            return;
-          globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+        return props.data.display ?? true;
+      });
+      const buttonHandler = (item, event) => {
+        if (disabled.value)
+          return;
+        if (typeof item.handler === "function" && services) {
+          item.handler?.(services, event);
         }
-      );
-      vue.watch(
-        () => columnWidth.value.left,
-        (left) => {
-          globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
+      };
+      const dropdownHandler = (command) => {
+        if (command.item.handler) {
+          command.item.handler(services);
         }
-      );
-      vue.watch(
-        () => uiService?.get("hideSlideBar"),
-        (hideSlideBar) => {
-          columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
+      };
+      const clickHandler = (item, event) => {
+        if (props.eventType !== "click")
+          return;
+        if (item.type === "button") {
+          buttonHandler(item, event);
         }
-      );
-      const columnWidthChange = (columnW) => {
-        columnWidth.value.left = columnW.left;
-        columnWidth.value.center = columnW.center;
-        columnWidth.value.right = columnW.right;
-        uiService?.set("columnWidth", columnW);
       };
-      const saveCode = (value) => {
-        try {
-          const parseDSL = getConfig("parseDSL");
-          editorService?.set("root", parseDSL(value));
-        } catch (e) {
-          console.error(e);
+      const mousedownHandler = (item, event) => {
+        if (props.eventType !== "mousedown")
+          return;
+        if (item.type === "button") {
+          buttonHandler(item, event);
+        }
+      };
+      const mouseupHandler = (item, event) => {
+        if (props.eventType !== "mouseup")
+          return;
+        if (item.type === "button") {
+          buttonHandler(item, event);
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor",
-          ref_key: "content",
-          ref: content,
-          style: { "min-width": "180px" }
+        return display.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(["menu-item", `${_ctx.data.type} ${_ctx.data.className || ""}`]),
+          onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(_ctx.data, $event)),
+          onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(_ctx.data, $event)),
+          onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(_ctx.data, $event))
         }, [
-          vue.renderSlot(_ctx.$slots, "header"),
-          vue.renderSlot(_ctx.$slots, "nav"),
-          vue.renderSlot(_ctx.$slots, "content-before"),
-          showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$Q, {
-              class: "m-editor-content",
-              "init-values": root.value,
-              options: vue.unref(codeOptions),
-              onSave: saveCode
-            }, null, 8, ["init-values", "options"])
-          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$w, {
-            key: 1,
-            ref_key: "splitView",
-            ref: splitView,
-            class: "m-editor-content",
-            "left-class": "m-editor-framework-left",
-            "center-class": "m-editor-framework-center",
-            "right-class": "m-editor-framework-right",
-            left: columnWidth.value.left,
-            "onUpdate:left": _cache[0] || (_cache[0] = ($event) => columnWidth.value.left = $event),
-            right: columnWidth.value.right,
-            "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
-            "min-left": 65,
-            "min-right": 20,
-            "min-center": 100,
-            onChange: columnWidthChange
-          }, vue.createSlots({
-            left: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "sidebar")
-            ]),
-            center: vue.withCtx(() => [
-              pageLength.value > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$v)
-              ])
+          _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
+            key: 0,
+            direction: _ctx.data.direction || "vertical"
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 0,
+              effect: "dark",
+              placement: "bottom-start",
+              content: _ctx.data.tooltip
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  size: "small",
+                  text: "",
+                  disabled: disabled.value
+                }, {
+                  default: vue.withCtx(() => [
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                      key: 0,
+                      icon: _ctx.data.icon
+                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])
+              ]),
+              _: 1
+            }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              key: 1,
+              size: "small",
+              text: "",
+              disabled: disabled.value,
+              title: _ctx.data.text
+            }, {
+              default: vue.withCtx(() => [
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                  key: 0,
+                  icon: _ctx.data.icon
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "title"]))
+          ], 64)) : _ctx.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
+            key: 3,
+            trigger: "click",
+            disabled: disabled.value,
+            onCommand: dropdownHandler
+          }, {
+            dropdown: vue.withCtx(() => [
+              _ctx.data.items && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (subItem, index) => {
+                    return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownItem), {
+                      key: index,
+                      command: { data: _ctx.data, subItem }
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["command"]);
+                  }), 128))
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true)
             ]),
-            _: 2
-          }, [
-            pageLength.value > 0 ? {
-              name: "right",
-              fn: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("span", _hoisted_2$9, [
+                vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
+                vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "props-panel")
+                    vue.createVNode(vue.unref(iconsVue.ArrowDown))
                   ]),
-                  _: 3
+                  _: 1
                 })
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["left", "right"])),
-          vue.renderSlot(_ctx.$slots, "content-after"),
-          vue.renderSlot(_ctx.$slots, "footer")
-        ], 512);
+              ])
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : _ctx.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
+        ], 34)) : vue.createCommentVNode("", true);
       };
     }
   });
 
   const _hoisted_1$e = {
     key: 1,
-    class: "menu-item-text"
+    style: { "width": "21px" }
   };
-  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MEditorToolButton"
+      name: "MEditorPageBarAddButton"
     },
-    __name: "ToolButton",
+    __name: "AddButton",
     props: {
-      data: { default: () => ({
-        type: "text",
-        display: false
-      }) },
-      eventType: { default: "click" }
+      type: {}
     },
     setup(__props) {
       const props = __props;
       const services = vue.inject("services");
-      const disabled = vue.computed(() => {
-        if (typeof props.data === "string")
-          return false;
-        if (props.data.type === "component")
-          return false;
-        if (typeof props.data.disabled === "function") {
-          return props.data.disabled(services);
-        }
-        return props.data.disabled;
+      const uiService = services?.uiService;
+      const editorService = services?.editorService;
+      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
+      const addPage = () => {
+        if (!editorService)
+          return;
+        const root = vue.toRaw(editorService.get("root"));
+        if (!root)
+          throw new Error("root 不能为空");
+        const pageConfig = {
+          type: props.type,
+          name: generatePageNameByApp(root, props.type),
+          items: []
+        };
+        editorService.add(pageConfig);
+      };
+      return (_ctx, _cache) => {
+        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          id: "m-editor-page-bar-add-icon",
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: addPage
+        }, [
+          vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e));
+      };
+    }
+  });
+
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageBarScrollContainer"
+    },
+    __name: "PageBarScrollContainer",
+    props: {
+      type: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const uiService = services?.uiService;
+      const itemsContainer = vue.ref();
+      const canScroll = vue.ref(false);
+      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
+      const itemsContainerWidth = vue.ref(0);
+      const setCanScroll = () => {
+        itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
+        vue.nextTick(() => {
+          if (itemsContainer.value) {
+            canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+          }
+        });
+      };
+      const resizeObserver = new ResizeObserver(() => {
+        setCanScroll();
       });
-      const display = vue.computed(() => {
-        if (!props.data)
-          return false;
-        if (typeof props.data === "string")
-          return true;
-        if (typeof props.data.display === "function") {
-          return props.data.display(services);
-        }
-        return props.data.display ?? true;
+      const pageBar = vue.ref();
+      vue.onMounted(() => {
+        pageBar.value && resizeObserver.observe(pageBar.value);
       });
-      const buttonHandler = (item, event) => {
-        if (disabled.value)
+      vue.onBeforeUnmount(() => {
+        resizeObserver.disconnect();
+      });
+      let translateLeft = 0;
+      const scroll = (type) => {
+        if (!itemsContainer.value)
           return;
-        if (typeof item.handler === "function" && services) {
-          item.handler?.(services, event);
+        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (type === "left") {
+          translateLeft += 100;
+          if (translateLeft > 0) {
+            translateLeft = 0;
+          }
+        } else if (type === "right") {
+          translateLeft -= 100;
+          if (-translateLeft > maxScrollLeft) {
+            translateLeft = -maxScrollLeft;
+          }
+        } else if (type === "start") {
+          translateLeft = 0;
+        } else if (type === "end") {
+          translateLeft = -maxScrollLeft;
         }
+        itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
       };
-      const dropdownHandler = (command) => {
-        if (command.item.handler) {
-          command.item.handler(services);
+      const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
+      const pageFragmentLength = vue.computed(() => editorService?.get("pageFragmentLength") || 0);
+      const crateWatchLength = (length) => vue.watch(
+        length,
+        (length2 = 0, preLength = 0) => {
+          setTimeout(() => {
+            setCanScroll();
+            if (length2 < preLength) {
+              scroll("start");
+            } else {
+              scroll("end");
+            }
+          });
+        },
+        {
+          immediate: true
         }
+      );
+      let unWatchPageLength;
+      let unWatchPageFragmentLength;
+      vue.watch(
+        () => props.type,
+        (type) => {
+          if (type === schema.NodeType.PAGE) {
+            unWatchPageFragmentLength?.();
+            unWatchPageFragmentLength = null;
+            unWatchPageLength = crateWatchLength(pageLength);
+          } else {
+            unWatchPageLength?.();
+            unWatchPageLength = null;
+            unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-page-bar",
+          ref_key: "pageBar",
+          ref: pageBar
+        }, [
+          vue.renderSlot(_ctx.$slots, "prepend"),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
+          }, [
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+          ])) : vue.createCommentVNode("", true),
+          _ctx.type === vue.unref(schema.NodeType).PAGE && pageLength.value || _ctx.type === vue.unref(schema.NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "m-editor-page-bar-items",
+            ref_key: "itemsContainer",
+            ref: itemsContainer,
+            style: vue.normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4)) : vue.createCommentVNode("", true),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+          }, [
+            vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+          ])) : vue.createCommentVNode("", true)
+        ], 512);
       };
-      const clickHandler = (item, event) => {
-        if (props.eventType !== "click")
+    }
+  });
+
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageBarSwitchTypeButton"
+    },
+    __name: "SwitchTypeButton",
+    props: {
+      modelValue: {}
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const data = [
+        {
+          type: schema.NodeType.PAGE,
+          text: "页面"
+        },
+        {
+          type: schema.NodeType.PAGE_FRAGMENT,
+          text: "页面片"
+        }
+      ];
+      const emit = __emit;
+      const clickHandler = (value) => {
+        emit("update:modelValue", value);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(data, (item) => {
+          return vue.createVNode(vue.unref(design.TMagicButton), {
+            class: vue.normalizeClass(["m-editor-page-bar-switch-type-button", { active: _ctx.modelValue === item.type }]),
+            size: "small",
+            key: item.type,
+            text: "",
+            type: _ctx.modelValue === item.type ? "primary" : "",
+            onClick: ($event) => clickHandler(item.type)
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(item.text), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "type", "onClick"]);
+        }), 64);
+      };
+    }
+  });
+
+  const _hoisted_1$d = { class: "m-editor-page-bar-tabs" };
+  const _hoisted_2$8 = ["onClick"];
+  const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
+  const _hoisted_4$5 = ["title"];
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageBar"
+    },
+    __name: "PageBar",
+    props: {
+      disabledPageFragment: { type: Boolean }
+    },
+    setup(__props) {
+      const active = vue.ref(schema.NodeType.PAGE);
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const root = vue.computed(() => editorService?.get("root"));
+      const page = vue.computed(() => editorService?.get("page"));
+      const pageList = vue.computed(() => getPageList(root.value));
+      const pageFragmentList = vue.computed(() => getPageFragmentList(root.value));
+      const list = vue.computed(() => active.value === schema.NodeType.PAGE ? pageList.value : pageFragmentList.value);
+      const activePage = vue.ref("");
+      const activePageFragment = vue.ref("");
+      vue.watch(
+        page,
+        (page2) => {
+          if (!page2) {
+            if (active.value === schema.NodeType.PAGE) {
+              activePage.value = "";
+            }
+            if (active.value === schema.NodeType.PAGE_FRAGMENT) {
+              activePageFragment.value = "";
+            }
+            return;
+          }
+          if (utils.isPage(page2)) {
+            activePage.value = page2?.id;
+            if (active.value !== schema.NodeType.PAGE) {
+              active.value = schema.NodeType.PAGE;
+            }
+          } else if (utils.isPageFragment(page2)) {
+            activePageFragment.value = page2?.id;
+            if (active.value !== schema.NodeType.PAGE_FRAGMENT) {
+              active.value = schema.NodeType.PAGE_FRAGMENT;
+            }
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.watch(active, (active2) => {
+        if (active2 === schema.NodeType.PAGE) {
+          if (!activePage.value) {
+            editorService?.selectRoot();
+            return;
+          }
+          switchPage(activePage.value);
           return;
-        if (item.type === "button") {
-          buttonHandler(item, event);
         }
+        if (active2 === schema.NodeType.PAGE_FRAGMENT) {
+          if (!activePageFragment.value) {
+            editorService?.selectRoot();
+            return;
+          }
+          switchPage(activePageFragment.value);
+        }
+      });
+      const switchPage = (id) => {
+        editorService?.select(id);
       };
-      const mousedownHandler = (item, event) => {
-        if (props.eventType !== "mousedown")
+      const copy = (node) => {
+        node && editorService?.copy(node);
+        editorService?.paste({
+          left: 0,
+          top: 0
+        });
+      };
+      const remove = (node) => {
+        editorService?.remove(node);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
+            key: 0,
+            modelValue: active.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
+          }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
+          vue.createVNode(_sfc_main$v, { type: active.value }, {
+            prepend: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
+            ]),
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
+                  key: item.id,
+                  onClick: ($event) => switchPage(item.id)
+                }, [
+                  vue.createElementVNode("div", _hoisted_3$5, [
+                    vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+                      vue.createElementVNode("span", {
+                        title: item.name
+                      }, vue.toDisplayString(item.name || item.id), 9, _hoisted_4$5)
+                    ])
+                  ]),
+                  vue.createVNode(vue.unref(design.TMagicPopover), {
+                    "popper-class": "page-bar-popover",
+                    placement: "top",
+                    width: 160,
+                    trigger: "hover"
+                  }, {
+                    reference: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(design.TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(iconsVue.CaretBottom))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", null, [
+                        vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                          vue.createVNode(_sfc_main$x, {
+                            data: {
+                              type: "button",
+                              text: "复制",
+                              icon: vue.unref(iconsVue.DocumentCopy),
+                              handler: () => copy(item)
+                            }
+                          }, null, 8, ["data"]),
+                          vue.createVNode(_sfc_main$x, {
+                            data: {
+                              type: "button",
+                              text: "删除",
+                              icon: vue.unref(iconsVue.Delete),
+                              handler: () => remove(item)
+                            }
+                          }, null, 8, ["data"])
+                        ])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], 10, _hoisted_2$8);
+              }), 128))
+            ]),
+            _: 3
+          }, 8, ["type"])
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$c = { class: "m-editor-empty-panel" };
+  const _hoisted_2$7 = { class: "m-editor-empty-content" };
+  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
+  const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorAddPageBox"
+    },
+    __name: "AddPageBox",
+    props: {
+      disabledPageFragment: { type: Boolean }
+    },
+    setup(__props) {
+      const services = vue.inject("services");
+      const clickHandler = (type) => {
+        const { editorService } = services || {};
+        if (!editorService)
           return;
-        if (item.type === "button") {
-          buttonHandler(item, event);
+        const root = vue.toRaw(editorService.get("root"));
+        if (!root)
+          throw new Error("root 不能为空");
+        editorService.add({
+          type,
+          name: generatePageNameByApp(root, type),
+          items: []
+        });
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+          vue.createElementVNode("div", _hoisted_2$7, [
+            vue.createElementVNode("div", {
+              class: "m-editor-empty-button",
+              onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
+            }, [
+              vue.createElementVNode("div", null, [
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+              ]),
+              _hoisted_3$4
+            ]),
+            !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "m-editor-empty-button",
+              onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE_FRAGMENT))
+            }, [
+              vue.createElementVNode("div", null, [
+                vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+              ]),
+              _hoisted_4$4
+            ])) : vue.createCommentVNode("", true)
+          ])
+        ]);
+      };
+    }
+  });
+
+  const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+  const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+  const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
+  const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorFramework"
+    },
+    __name: "Framework",
+    props: {
+      disabledPageFragment: { type: Boolean }
+    },
+    setup(__props) {
+      const codeOptions = vue.inject("codeOptions", {});
+      const { editorService, uiService } = vue.inject("services") || {};
+      const content = vue.ref();
+      const splitView = vue.ref();
+      const root = vue.computed(() => editorService?.get("root"));
+      const page = vue.computed(() => editorService?.get("page"));
+      const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
+      const stageLoading = vue.computed(() => editorService?.get("stageLoading") || false);
+      const showSrc = vue.computed(() => uiService?.get("showSrc"));
+      const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+      const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
+      const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
+      const columnWidth = vue.ref({
+        left: leftColumnWidthCacheData,
+        center: 0,
+        right: RightColumnWidthCacheData
+      });
+      vue.watch(
+        [pageLength, splitView],
+        () => {
+          splitView.value?.updateWidth();
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        () => columnWidth.value.right,
+        (right) => {
+          if (typeof right === "undefined")
+            return;
+          globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+        }
+      );
+      vue.watch(
+        () => columnWidth.value.left,
+        (left) => {
+          globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
         }
+      );
+      vue.watch(
+        () => uiService?.get("hideSlideBar"),
+        (hideSlideBar) => {
+          columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
+        }
+      );
+      const columnWidthChange = (columnW) => {
+        columnWidth.value.left = columnW.left;
+        columnWidth.value.center = columnW.center;
+        columnWidth.value.right = columnW.right;
+        uiService?.set("columnWidth", columnW);
       };
-      const mouseupHandler = (item, event) => {
-        if (props.eventType !== "mouseup")
-          return;
-        if (item.type === "button") {
-          buttonHandler(item, event);
+      const saveCode = (value) => {
+        try {
+          const parseDSL = getConfig("parseDSL");
+          editorService?.set("root", parseDSL(value));
+        } catch (e) {
+          console.error(e);
         }
       };
       return (_ctx, _cache) => {
-        return display.value ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass(["menu-item", `${_ctx.data.type} ${_ctx.data.className || ""}`]),
-          onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(_ctx.data, $event)),
-          onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(_ctx.data, $event)),
-          onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(_ctx.data, $event))
+        const _directive_loading = vue.resolveDirective("loading");
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor",
+          ref_key: "content",
+          ref: content,
+          style: { "min-width": "180px" }
         }, [
-          _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
-            key: 0,
-            direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-              key: 0,
-              effect: "dark",
-              placement: "bottom-start",
-              content: _ctx.data.tooltip
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  size: "small",
-                  text: "",
-                  disabled: disabled.value
-                }, {
-                  default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
-                      key: 0,
-                      icon: _ctx.data.icon
-                    }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
-                  ]),
-                  _: 1
-                }, 8, ["disabled"])
-              ]),
-              _: 1
-            }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-              key: 1,
-              size: "small",
-              text: "",
-              disabled: disabled.value,
-              title: _ctx.data.text
-            }, {
-              default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
-                  key: 0,
-                  icon: _ctx.data.icon
-                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
+          vue.renderSlot(_ctx.$slots, "header"),
+          vue.renderSlot(_ctx.$slots, "nav"),
+          vue.renderSlot(_ctx.$slots, "content-before"),
+          showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
+            vue.createVNode(_sfc_main$T, {
+              class: "m-editor-content",
+              "init-values": root.value,
+              options: vue.unref(codeOptions),
+              onSave: saveCode
+            }, null, 8, ["init-values", "options"])
+          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$y, {
+            key: 1,
+            "element-loading-text": "Runtime 加载中...",
+            ref_key: "splitView",
+            ref: splitView,
+            class: "m-editor-content",
+            "left-class": "m-editor-framework-left",
+            "center-class": "m-editor-framework-center",
+            "right-class": "m-editor-framework-right",
+            left: columnWidth.value.left,
+            "onUpdate:left": _cache[0] || (_cache[0] = ($event) => columnWidth.value.left = $event),
+            right: columnWidth.value.right,
+            "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
+            "min-left": 65,
+            "min-right": 20,
+            "min-center": 100,
+            onChange: columnWidthChange
+          }, vue.createSlots({
+            left: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "sidebar")
+            ]),
+            center: vue.withCtx(() => [
+              page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+                vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
               ]),
-              _: 1
-            }, 8, ["disabled", "title"]))
-          ], 64)) : _ctx.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
-            key: 3,
-            trigger: "click",
-            disabled: disabled.value,
-            onCommand: dropdownHandler
-          }, {
-            dropdown: vue.withCtx(() => [
-              _ctx.data.items && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (subItem, index) => {
-                    return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownItem), {
-                      key: index,
-                      command: { data: _ctx.data, subItem }
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["command"]);
-                  }), 128))
+              vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                "page-bar-title": vue.withCtx(({ page: page2 }) => [
+                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                 ]),
-                _: 1
-              })) : vue.createCommentVNode("", true)
+                "page-bar-popover": vue.withCtx(({ page: page2 }) => [
+                  vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
+                ]),
+                _: 3
+              }, 8, ["disabled-page-fragment"])
             ]),
-            default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$8, [
-                vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
-                vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
+            _: 2
+          }, [
+            page.value ? {
+              name: "right",
+              fn: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(iconsVue.ArrowDown))
+                    vue.renderSlot(_ctx.$slots, "props-panel")
                   ]),
-                  _: 1
+                  _: 3
                 })
-              ])
-            ]),
-            _: 1
-          }, 8, ["disabled"])) : _ctx.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
-        ], 34)) : vue.createCommentVNode("", true);
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["left", "right"])), [
+            [_directive_loading, stageLoading.value]
+          ]),
+          vue.renderSlot(_ctx.$slots, "content-after"),
+          vue.renderSlot(_ctx.$slots, "footer")
+        ], 512);
       };
     }
   });
 
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -5884,7 +6384,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$t, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -5896,8 +6396,8 @@
     }
   });
 
-  const _hoisted_1$d = { class: "m-editor-props-panel" };
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b = { class: "m-editor-props-panel" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -5931,7 +6431,7 @@
       vue.onMounted(() => {
         emit("mounted", internalInstance);
       });
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         services?.propsService.off("props-configs-change", init);
       });
       vue.watchEffect(() => {
@@ -5951,7 +6451,7 @@
       };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -6102,7 +6602,7 @@
     };
   };
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -6153,14 +6653,14 @@
     });
   };
 
-  const _hoisted_1$c = ["draggable", "data-node-id", "data-is-container"];
-  const _hoisted_2$7 = { class: "tree-node-label" };
+  const _hoisted_1$a = ["draggable", "data-node-id", "data-is-container"];
+  const _hoisted_2$6 = { class: "tree-node-label" };
   const _hoisted_3$3 = { class: "tree-node-tool" };
   const _hoisted_4$3 = {
     key: 0,
     class: "m-editor-tree-node-children"
   };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTreeNode"
     },
@@ -6186,7 +6686,7 @@
       const selected = vue.computed(() => nodeStatus.value.selected);
       const visible = vue.computed(() => nodeStatus.value.visible);
       const draggable = vue.computed(() => nodeStatus.value.draggable);
-      const hasChilren = vue.computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+      const hasChildren = vue.computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
       const handleDragStart = (event) => {
         treeEmit?.("node-dragstart", event, props.data);
       };
@@ -6227,9 +6727,9 @@
             onContextmenu: nodeContentmenuHandler,
             onMouseenter: mouseenterHandler
           }, [
-            vue.createVNode(_sfc_main$K, {
+            vue.createVNode(_sfc_main$N, {
               class: "expand-icon",
-              style: vue.normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
+              style: vue.normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
               icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
               onClick: expandHandler
             }, null, 8, ["style", "icon"]),
@@ -6238,7 +6738,7 @@
               onClick: nodeClickHandler
             }, [
               vue.renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-                vue.createElementVNode("div", _hoisted_2$7, [
+                vue.createElementVNode("div", _hoisted_2$6, [
                   vue.renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
                     vue.createTextVNode(vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
                   ])
@@ -6249,7 +6749,7 @@
               ])
             ])
           ], 38),
-          hasChilren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
+          hasChildren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item) => {
               return vue.openBlock(), vue.createBlock(_component_TreeNode, {
                 key: item.id,
@@ -6270,15 +6770,15 @@
               }, 1032, ["data", "node-status-map", "indent"]);
             }), 128))
           ])) : vue.createCommentVNode("", true)
-        ], 40, _hoisted_1$c)), [
+        ], 40, _hoisted_1$a)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
 
-  const _hoisted_1$b = { key: 1 };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$9 = { key: 1 };
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTree"
     },
@@ -6302,7 +6802,7 @@
           onDragover: handleDragOver
         }, [
           _ctx.data?.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$p, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$n, {
               key: item.id,
               data: item,
               indent: _ctx.indent,
@@ -6319,7 +6819,7 @@
               ]),
               _: 2
             }, 1032, ["data", "indent", "node-status-map"]);
-          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
             vue.createElementVNode("p", null, vue.toDisplayString(_ctx.emptyText), 1)
           ]))
         ], 32);
@@ -6399,7 +6899,7 @@
     };
   };
 
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -6481,7 +6981,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: codeList.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -6503,7 +7003,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$K, {
+                vue.createVNode(_sfc_main$N, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -6518,7 +7018,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$K, {
+                vue.createVNode(_sfc_main$N, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -6537,8 +7037,8 @@
     }
   });
 
-  const _hoisted_1$a = { class: "search-wrapper" };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$8 = { class: "search-wrapper" };
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -6560,8 +7060,8 @@
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-                vue.createElementVNode("div", _hoisted_1$a, [
-                  vue.createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
+                vue.createElementVNode("div", _hoisted_1$8, [
+                  vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
@@ -6577,7 +7077,7 @@
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                 ])
               ]),
-              vue.createVNode(_sfc_main$n, {
+              vue.createVNode(_sfc_main$l, {
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
@@ -6595,7 +7095,7 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -6609,7 +7109,7 @@
     }
   });
 
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -6665,7 +7165,7 @@
     }
   });
 
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -6754,7 +7254,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: list.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -6776,7 +7276,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$K, {
+                vue.createVNode(_sfc_main$N, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -6791,7 +7291,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$K, {
+                vue.createVNode(_sfc_main$N, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -6807,9 +7307,9 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "search-wrapper" };
-  const _hoisted_2$6 = { class: "data-source-list-panel-add-menu" };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
@@ -6873,8 +7373,8 @@
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$9, [
-                vue.createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$7, [
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
                   placement: "right"
@@ -6891,9 +7391,9 @@
                     })
                   ]),
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_2$6, [
+                    vue.createElementVNode("div", _hoisted_2$5, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                        return vue.openBlock(), vue.createBlock(_sfc_main$t, {
+                        return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                           data: {
                             type: "button",
                             text: item.text,
@@ -6909,14 +7409,14 @@
                   _: 1
                 })) : vue.createCommentVNode("", true)
               ]),
-              vue.createVNode(_sfc_main$k, {
+              vue.createVNode(_sfc_main$i, {
                 onEdit: editHandler,
                 onRemove: removeHandler
               })
             ]),
             _: 1
           }),
-          vue.createVNode(_sfc_main$l, {
+          vue.createVNode(_sfc_main$j, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !editable.value,
@@ -6930,7 +7430,7 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorContentMenu"
     },
@@ -6971,7 +7471,7 @@
           return;
         hide();
       };
-      const outsideClickhideHandler = (e) => {
+      const outsideClickHideHandler = (e) => {
         if (!props.autoHide)
           return;
         const target = e.target;
@@ -7032,12 +7532,12 @@
       vue.onMounted(() => {
         if (props.isSubMenu)
           return;
-        globalThis.addEventListener("mousedown", outsideClickhideHandler, true);
+        globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
       });
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         if (props.isSubMenu)
           return;
-        globalThis.removeEventListener("mousedown", outsideClickhideHandler, true);
+        globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
       });
       __expose({
         menu,
@@ -7061,7 +7561,7 @@
               vue.renderSlot(_ctx.$slots, "title"),
               vue.createElementVNode("div", null, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$t, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -7096,7 +7596,7 @@
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$6 = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -7104,7 +7604,7 @@
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
   }, null, -1);
@@ -7113,17 +7613,17 @@
     d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
   }, null, -1);
   const _hoisted_4$2 = [
-    _hoisted_2$5,
+    _hoisted_2$4,
     _hoisted_3$2
   ];
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
     },
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$8, _hoisted_4$2);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _hoisted_4$2);
       };
     }
   });
@@ -7134,7 +7634,7 @@
     icon: iconsVue.Delete,
     display: (services) => {
       const node = services?.editorService?.get("node");
-      return node?.type !== schema.NodeType.ROOT && !utils.isPage(node);
+      return node?.type !== schema.NodeType.ROOT && !utils.isPage(node) && !utils.isPageFragment(node);
     },
     handler: (services) => {
       const nodes = services?.editorService?.get("nodes");
@@ -7201,13 +7701,14 @@
     };
   };
 
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
     __name: "LayerMenu",
     props: {
-      layerContentMenu: {}
+      layerContentMenu: { default: () => [] },
+      customContentMenu: { type: Function, default: (menus) => menus }
     },
     emits: ["collapse-all"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -7261,29 +7762,34 @@
         }
         return [];
       });
-      const menuData = vue.computed(() => [
-        {
-          type: "button",
-          text: "全部折叠",
-          icon: _sfc_main$h,
-          display: () => utils.isPage(node.value),
-          handler: () => {
-            emit("collapse-all");
-          }
-        },
-        {
-          type: "button",
-          text: "新增",
-          icon: vue.markRaw(iconsVue.Plus),
-          display: () => node.value?.items && nodes.value?.length === 1,
-          items: getSubMenuData.value
-        },
-        useCopyMenu(),
-        usePasteMenu(),
-        useDeleteMenu(),
-        useMoveToMenu(services),
-        ...props.layerContentMenu
-      ]);
+      const menuData = vue.computed(
+        () => props.customContentMenu(
+          [
+            {
+              type: "button",
+              text: "全部折叠",
+              icon: _sfc_main$f,
+              display: () => utils.isPage(node.value) || utils.isPageFragment(node.value),
+              handler: () => {
+                emit("collapse-all");
+              }
+            },
+            {
+              type: "button",
+              text: "新增",
+              icon: vue.markRaw(iconsVue.Plus),
+              display: () => node.value?.items && nodes.value?.length === 1,
+              items: getSubMenuData.value
+            },
+            useCopyMenu(),
+            usePasteMenu(),
+            useDeleteMenu(),
+            useMoveToMenu(services),
+            ...props.layerContentMenu
+          ],
+          "layer"
+        )
+      );
       const show = (e) => {
         menu.value?.show(e);
       };
@@ -7291,7 +7797,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$i, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -7301,7 +7807,7 @@
     }
   });
 
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerNodeTool",
     props: {
       data: {}
@@ -7320,12 +7826,12 @@
       };
       return (_ctx, _cache) => {
         return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 0,
             icon: vue.unref(iconsVue.Hide),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
             title: "点击显示"
-          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -7338,11 +7844,12 @@
   });
 
   const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
+    const isMultiSelect = vue.computed(() => isCtrlKeyDown.value && !services?.editorService.get("disabledMultiSelect"));
     const select = async (data) => {
       if (!data.id) {
         throw new Error("没有id");
       }
-      if (isCtrlKeyDown.value) {
+      if (isMultiSelect.value) {
         multiSelect(data);
       } else {
         await services?.editorService.select(data);
@@ -7381,7 +7888,7 @@
         document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
         return;
       }
-      if (data.items && data.items.length > 0 && !isCtrlKeyDown.value) {
+      if (data.items && data.items.length > 0 && !isMultiSelect.value) {
         updateStatus(nodeStatusMap.value, data.id, {
           expand: true
         });
@@ -7651,21 +8158,21 @@
     }
   ];
 
-  const useKeybinding = (services, contianer) => {
+  const useKeybinding = (services, container) => {
     const keybindingService = services?.keybindingService;
     const isCtrlKeyDown = vue.ref(false);
     const windowBlurHandler = () => {
       isCtrlKeyDown.value = false;
     };
-    keybindingService?.registeCommand("layer-panel-global-keyup", () => {
+    keybindingService?.registerCommand("layer-panel-global-keyup", () => {
       isCtrlKeyDown.value = false;
     });
-    keybindingService?.registeCommand("layer-panel-global-keydwon", () => {
+    keybindingService?.registerCommand("layer-panel-global-keydown", () => {
       isCtrlKeyDown.value = true;
     });
-    keybindingService?.registe([
+    keybindingService?.register([
       {
-        command: "layer-panel-global-keydwon",
+        command: "layer-panel-global-keydown",
         keybinding: "ctrl",
         when: [["global", "keydown"]]
       },
@@ -7676,12 +8183,12 @@
       }
     ]);
     vue.watchEffect(() => {
-      if (contianer.value) {
+      if (container.value) {
         globalThis.addEventListener("blur", windowBlurHandler);
-        keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value.$el);
+        keybindingService?.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
       } else {
         globalThis.removeEventListener("blur", windowBlurHandler);
-        keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
+        keybindingService?.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
       }
     });
     return {
@@ -7689,7 +8196,7 @@
     };
   };
 
-  const createPageNodeStatus = (page, initalLayerNodeStatus) => {
+  const createPageNodeStatus = (page, initialLayerNodeStatus) => {
     const map = /* @__PURE__ */ new Map();
     map.set(page.id, {
       visible: true,
@@ -7701,7 +8208,7 @@
       (node) => traverseNode(node, (node2) => {
         map.set(
           node2.id,
-          initalLayerNodeStatus?.get(node2.id) || {
+          initialLayerNodeStatus?.get(node2.id) || {
             visible: true,
             expand: false,
             selected: false,
@@ -7776,13 +8283,14 @@
     };
   };
 
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerPanel"
     },
     __name: "LayerPanel",
     props: {
-      layerContentMenu: {}
+      layerContentMenu: {},
+      customContentMenu: { type: Function }
     },
     setup(__props) {
       const services = vue.inject("services");
@@ -7824,8 +8332,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$q, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+            vue.createVNode(_sfc_main$o, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
               key: 0,
               tabindex: "-1",
               ref_key: "tree",
@@ -7845,7 +8353,7 @@
               ]),
               "tree-node-tool": vue.withCtx(({ data: nodeData2 }) => [
                 vue.renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
-                  vue.createVNode(_sfc_main$f, { data: nodeData2 }, null, 8, ["data"])
+                  vue.createVNode(_sfc_main$d, { data: nodeData2 }, null, 8, ["data"])
                 ])
               ]),
               "tree-node-label": vue.withCtx(({ data: nodeData2 }) => [
@@ -7854,12 +8362,13 @@
               _: 3
             }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$g, {
+              vue.createVNode(_sfc_main$e, {
                 ref_key: "menu",
                 ref: menu,
                 "layer-content-menu": _ctx.layerContentMenu,
+                "custom-content-menu": _ctx.customContentMenu,
                 onCollapseAll: collapseAllHandler
-              }, null, 8, ["layer-content-menu"])
+              }, null, 8, ["layer-content-menu", "custom-content-menu"])
             ]))
           ]),
           _: 3
@@ -7868,9 +8377,9 @@
     }
   });
 
-  const _hoisted_1$7 = ["onClick", "onDragstart"];
-  const _hoisted_2$4 = ["title"];
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$5 = ["onClick", "onDragstart"];
+  const _hoisted_2$3 = ["title"];
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
     },
@@ -7950,7 +8459,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -7958,7 +8467,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$N, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -7979,7 +8488,7 @@
                                 content: item.desc
                               }, {
                                 default: vue.withCtx(() => [
-                                  vue.createVNode(_sfc_main$K, {
+                                  vue.createVNode(_sfc_main$N, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -7987,9 +8496,9 @@
                               }, 1032, ["disabled", "content"]),
                               vue.createElementVNode("span", {
                                 title: item.text
-                              }, vue.toDisplayString(item.text), 9, _hoisted_2$4)
+                              }, vue.toDisplayString(item.text), 9, _hoisted_2$3)
                             ])
-                          ], 40, _hoisted_1$7);
+                          ], 40, _hoisted_1$5);
                         }), 128))
                       ]),
                       _: 2
@@ -8006,11 +8515,11 @@
     }
   });
 
-  const _hoisted_1$6 = {
+  const _hoisted_1$4 = {
     key: 0,
     class: "m-editor-sidebar"
   };
-  const _hoisted_2$3 = { class: "m-editor-sidebar-header" };
+  const _hoisted_2$2 = { class: "m-editor-sidebar-header" };
   const _hoisted_3$1 = ["onClick", "onDragend"];
   const _hoisted_4$1 = {
     key: 1,
@@ -8019,14 +8528,15 @@
   const _hoisted_5$1 = { class: "m-editor-float-box-list" };
   const _hoisted_6 = ["onClick"];
   const _hoisted_7 = { class: "m-editor-float-box-body" };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
     },
     __name: "Sidebar",
     props: {
       data: { default: () => ({ type: "tabs", status: "组件", items: ["component-list", "layer", "code-block", "data-source"] }) },
-      layerContentMenu: {}
+      layerContentMenu: {},
+      customContentMenu: {}
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
@@ -8039,7 +8549,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$d,
+            component: _sfc_main$b,
             slots: {}
           },
           layer: {
@@ -8048,9 +8558,10 @@
             icon: iconsVue.List,
             text: "已选组件",
             props: {
-              layerContentMenu: props.layerContentMenu
+              layerContentMenu: props.layerContentMenu,
+              customContentMenu: props.customContentMenu
             },
-            component: _sfc_main$e,
+            component: _sfc_main$c,
             slots: {}
           },
           "code-block": {
@@ -8058,7 +8569,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$m,
+            component: _sfc_main$k,
             slots: {},
             boxComponentConfig: {
               props: {
@@ -8071,7 +8582,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$j,
+            component: _sfc_main$h,
             slots: {},
             boxComponentConfig: {
               props: {
@@ -8114,8 +8625,8 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-            vue.createElementVNode("div", _hoisted_2$3, [
+          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+            vue.createElementVNode("div", _hoisted_2$2, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
@@ -8126,7 +8637,7 @@
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
                 }, [
-                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -8262,7 +8773,7 @@
                     onClick: ($event) => vue.unref(showFloatBox)(config.$key)
                   }, [
                     vue.createElementVNode("div", null, vue.toDisplayString(config.text), 1),
-                    vue.createVNode(_sfc_main$K, {
+                    vue.createVNode(_sfc_main$N, {
                       class: "m-editor-float-box-close",
                       icon: vue.unref(iconsVue.Close),
                       onClick: vue.withModifiers(($event) => vue.unref(closeFloatBox)(config.$key), ["stop"])
@@ -8410,7 +8921,7 @@
     };
   }
 
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollBar"
     },
@@ -8449,7 +8960,7 @@
         });
         bar.value?.addEventListener("wheel", wheelHandler, false);
       });
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         if (gesto)
           gesto.off();
         bar.value?.removeEventListener("wheel", wheelHandler, false);
@@ -8498,7 +9009,7 @@
     }
   });
 
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollViewer"
     },
@@ -8545,7 +9056,7 @@
           scrollHeight.value = data.scrollHeight;
         });
       });
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         scrollViewer.destroy();
       });
       vue.watch(
@@ -8584,14 +9095,14 @@
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 4),
-          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
+          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
             key: 0,
             "scroll-size": scrollHeight.value,
             size: _ctx.wrapHeight,
             pos: vOffset.value,
             onScroll: vScrollHandler
           }, null, 8, ["scroll-size", "size", "pos"])) : vue.createCommentVNode("", true),
-          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
+          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
             key: 1,
             "is-horizontal": true,
             "scroll-size": scrollWidth.value,
@@ -8734,12 +9245,27 @@
         return elCanSelect;
       },
       moveableOptions: stageOptions.moveableOptions,
-      updateDragEl: stageOptions.updateDragEl
+      updateDragEl: stageOptions.updateDragEl,
+      guidesOptions: stageOptions.guidesOptions,
+      disabledMultiSelect: stageOptions.disabledMultiSelect
     });
+    vue.watch(
+      () => editorService.get("disabledMultiSelect"),
+      (disabledMultiSelect) => {
+        if (disabledMultiSelect) {
+          stage.disableMultiSelect();
+        } else {
+          stage.enableMultiSelect();
+        }
+      }
+    );
     stage.mask.setGuides([
       getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
       getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
     ]);
+    stage.on("page-el-update", () => {
+      editorService.set("stageLoading", false);
+    });
     stage.on("select", (el) => {
       if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
         return;
@@ -8790,8 +9316,8 @@
     return stage;
   };
 
-  const _hoisted_1$5 = { class: "m-editor-float-box-body" };
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$3 = { class: "m-editor-float-box-body" };
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
     props: {
       visible: { type: Boolean, default: false },
@@ -8891,7 +9417,7 @@
                 }, null, 8, ["icon"])
               ])
             ], 512),
-            vue.createElementVNode("div", _hoisted_1$5, [
+            vue.createElementVNode("div", _hoisted_1$3, [
               vue.renderSlot(_ctx.$slots, "body")
             ])
           ], 4)
@@ -8900,7 +9426,7 @@
     }
   });
 
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "NodeListMenu",
     setup(__props) {
       const services = vue.inject("services");
@@ -8921,13 +9447,13 @@
         (stage2) => {
           if (!stage2)
             return;
+          vue.nextTick(() => unWatch());
           stage2.on("select", (el, event) => {
             const els = stage2.renderer.getElementsFromPoint(event) || [];
             const ids = els.map((el2) => el2.id).filter((id) => Boolean(id));
             buttonVisible.value = ids.length > 3;
             filterTextChangeHandler(ids);
           });
-          unWatch();
         },
         {
           immediate: true
@@ -8982,7 +9508,7 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -8992,7 +9518,7 @@
             position: menuPosition.value
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$o, {
+              vue.createVNode(_sfc_main$m, {
                 class: "m-editor-node-list-menu magic-editor-layer-tree",
                 data: nodeData.value,
                 "node-status-map": vue.unref(nodeStatusMap),
@@ -9006,12 +9532,12 @@
     }
   });
 
-  const _hoisted_1$4 = {
+  const _hoisted_1$2 = {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("path", {
     "fill-rule": "evenodd",
     "clip-rule": "evenodd",
     d: "M2 4H21V6H2V4Z",
@@ -9033,119 +9559,125 @@
     "fill-opacity": "0.9"
   }, null, -1);
   const _hoisted_5 = [
-    _hoisted_2$2,
+    _hoisted_2$1,
     _hoisted_3,
     _hoisted_4
   ];
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCenterIcon"
     },
     __name: "CenterIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_5);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_5);
       };
     }
   });
 
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorViewerMenu"
     },
     __name: "ViewerMenu",
     props: {
       isMultiSelect: { type: Boolean, default: false },
-      stageContentMenu: {}
+      stageContentMenu: { default: () => [] },
+      customContentMenu: { type: Function, default: (menus) => menus }
     },
     setup(__props, { expose: __expose }) {
-      const props = __props;
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const menu = vue.ref();
-      const canCenter = vue.ref(false);
-      const node = vue.computed(() => editorService?.get("node"));
-      const nodes = vue.computed(() => editorService?.get("nodes"));
-      const parent = vue.computed(() => editorService?.get("parent"));
-      const menuData = vue.computed(() => [
-        {
-          type: "button",
-          text: "水平居中",
-          icon: vue.markRaw(_sfc_main$7),
-          display: () => canCenter.value,
-          handler: () => {
-            if (!nodes.value)
-              return;
-            editorService?.alignCenter(nodes.value);
-          }
-        },
-        useCopyMenu(),
-        usePasteMenu(menu),
-        {
-          type: "divider",
-          direction: "horizontal",
-          display: () => {
-            if (!node.value)
-              return false;
-            return !utils.isPage(node.value);
-          }
-        },
-        {
-          type: "button",
-          text: "上移一层",
-          icon: vue.markRaw(iconsVue.Top),
-          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
-          handler: () => {
-            editorService?.moveLayer(1);
-          }
-        },
-        {
-          type: "button",
-          text: "下移一层",
-          icon: vue.markRaw(iconsVue.Bottom),
-          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
-          handler: () => {
-            editorService?.moveLayer(-1);
-          }
-        },
-        {
-          type: "button",
-          text: "置顶",
-          icon: vue.markRaw(iconsVue.Top),
-          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
-          handler: () => {
-            editorService?.moveLayer(LayerOffset.TOP);
-          }
-        },
-        {
-          type: "button",
-          text: "置底",
-          icon: vue.markRaw(iconsVue.Bottom),
-          display: () => !utils.isPage(node.value) && !props.isMultiSelect,
-          handler: () => {
-            editorService?.moveLayer(LayerOffset.BOTTOM);
-          }
-        },
-        useMoveToMenu(services),
-        {
-          type: "divider",
-          direction: "horizontal",
-          display: () => !utils.isPage(node.value) && !props.isMultiSelect
-        },
-        useDeleteMenu(),
-        {
-          type: "divider",
-          direction: "horizontal"
-        },
-        {
-          type: "button",
-          text: "清空参考线",
-          handler: () => {
-            editorService?.get("stage")?.clearGuides();
-          }
-        },
-        ...props.stageContentMenu
-      ]);
+      const props = __props;
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const menu = vue.ref();
+      const canCenter = vue.ref(false);
+      const node = vue.computed(() => editorService?.get("node"));
+      const nodes = vue.computed(() => editorService?.get("nodes"));
+      const parent = vue.computed(() => editorService?.get("parent"));
+      const menuData = vue.computed(
+        () => props.customContentMenu(
+          [
+            {
+              type: "button",
+              text: "水平居中",
+              icon: vue.markRaw(_sfc_main$5),
+              display: () => canCenter.value,
+              handler: () => {
+                if (!nodes.value)
+                  return;
+                editorService?.alignCenter(nodes.value);
+              }
+            },
+            useCopyMenu(),
+            usePasteMenu(menu),
+            {
+              type: "divider",
+              direction: "horizontal",
+              display: () => {
+                if (!node.value)
+                  return false;
+                return !utils.isPage(node.value) && !utils.isPageFragment(node.value);
+              }
+            },
+            {
+              type: "button",
+              text: "上移一层",
+              icon: vue.markRaw(iconsVue.Top),
+              display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
+              handler: () => {
+                editorService?.moveLayer(1);
+              }
+            },
+            {
+              type: "button",
+              text: "下移一层",
+              icon: vue.markRaw(iconsVue.Bottom),
+              display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
+              handler: () => {
+                editorService?.moveLayer(-1);
+              }
+            },
+            {
+              type: "button",
+              text: "置顶",
+              icon: vue.markRaw(iconsVue.Top),
+              display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
+              handler: () => {
+                editorService?.moveLayer(LayerOffset.TOP);
+              }
+            },
+            {
+              type: "button",
+              text: "置底",
+              icon: vue.markRaw(iconsVue.Bottom),
+              display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
+              handler: () => {
+                editorService?.moveLayer(LayerOffset.BOTTOM);
+              }
+            },
+            useMoveToMenu(services),
+            {
+              type: "divider",
+              direction: "horizontal",
+              display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect
+            },
+            useDeleteMenu(),
+            {
+              type: "divider",
+              direction: "horizontal"
+            },
+            {
+              type: "button",
+              text: "清空参考线",
+              handler: () => {
+                editorService?.get("stage")?.clearGuides();
+              }
+            },
+            ...props.stageContentMenu
+          ],
+          "viewer"
+        )
+      );
       vue.watch(
         parent,
         async () => {
@@ -9165,7 +9697,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$i, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -9174,13 +9706,14 @@
     }
   });
 
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorStage"
     },
     __name: "Stage",
     props: {
-      stageContentMenu: {}
+      stageContentMenu: {},
+      customContentMenu: { type: Function }
     },
     setup(__props) {
       let stage = null;
@@ -9229,6 +9762,7 @@
       });
       vue.watch(page, (page2) => {
         if (runtime && page2) {
+          services?.editorService.set("stageLoading", true);
           runtime.updatePageId?.(page2.id);
           vue.nextTick(() => {
             stage?.select(page2.id);
@@ -9252,14 +9786,14 @@
       vue.onMounted(() => {
         if (stageWrap.value?.container) {
           resizeObserver.observe(stageWrap.value.container);
-          services?.keybindingService.registeEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+          services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
         }
       });
-      vue.onUnmounted(() => {
+      vue.onBeforeUnmount(() => {
         stage?.destroy();
         resizeObserver.disconnect();
         services?.editorService.set("stage", null);
-        services?.keybindingService.unregisteEl("stage");
+        services?.keybindingService.unregisterEl("stage");
         services?.editorService.off("root-change", rootChangeHandler);
       });
       const parseDSL = getConfig("parseDSL");
@@ -9322,7 +9856,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$8, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
@@ -9348,14 +9882,15 @@
               onDrop: dropHandler,
               onDragover: dragoverHandler
             }, null, 36),
-            vue.createVNode(_sfc_main$8),
+            vue.createVNode(_sfc_main$6),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$6, {
+              vue.createVNode(_sfc_main$4, {
                 ref_key: "menu",
                 ref: menu,
                 "is-multi-select": isMultiSelect.value,
-                "stage-content-menu": _ctx.stageContentMenu
-              }, null, 8, ["is-multi-select", "stage-content-menu"])
+                "stage-content-menu": _ctx.stageContentMenu,
+                "custom-content-menu": _ctx.customContentMenu
+              }, null, 8, ["is-multi-select", "stage-content-menu", "custom-content-menu"])
             ]))
           ]),
           _: 1
@@ -9364,12 +9899,12 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$1 = {
     key: 0,
     class: "m-editor-breadcrumb"
   };
-  const _hoisted_2$1 = { key: 0 };
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2 = { key: 0 };
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorBreadcrumb"
     },
@@ -9386,7 +9921,7 @@
         editorService?.get("stage")?.select(node2.id);
       };
       return (_ctx, _cache) => {
-        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.id
@@ -9401,7 +9936,7 @@
                 ]),
                 _: 2
               }, 1032, ["disabled", "onClick"]),
-              index < path.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "/")) : vue.createCommentVNode("", true)
+              index < path.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, "/")) : vue.createCommentVNode("", true)
             ], 64);
           }), 128))
         ])) : vue.createCommentVNode("", true);
@@ -9409,223 +9944,6 @@
     }
   });
 
-  const _hoisted_1$2 = {
-    key: 1,
-    style: { "width": "21px" }
-  };
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorPageBarScrollContainer"
-    },
-    __name: "PageBarScrollContainer",
-    setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const uiService = services?.uiService;
-      const itemsContainer = vue.ref();
-      const canScroll = vue.ref(false);
-      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
-      const itemsContainerWidth = vue.ref(0);
-      const setCanScroll = () => {
-        itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
-        vue.nextTick(() => {
-          if (itemsContainer.value) {
-            canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
-          }
-        });
-      };
-      const resizeObserver = new ResizeObserver(() => {
-        setCanScroll();
-      });
-      const pageBar = vue.ref();
-      vue.onMounted(() => {
-        pageBar.value && resizeObserver.observe(pageBar.value);
-      });
-      vue.onUnmounted(() => {
-        resizeObserver.disconnect();
-      });
-      let translateLeft = 0;
-      const scroll = (type) => {
-        if (!itemsContainer.value)
-          return;
-        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
-        if (type === "left") {
-          translateLeft += 100;
-          if (translateLeft > 0) {
-            translateLeft = 0;
-          }
-        } else if (type === "right") {
-          translateLeft -= 100;
-          if (-translateLeft > maxScrollLeft) {
-            translateLeft = -maxScrollLeft;
-          }
-        } else if (type === "start") {
-          translateLeft = 0;
-        } else if (type === "end") {
-          translateLeft = -maxScrollLeft;
-        }
-        itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
-      };
-      const pageLength = vue.computed(() => editorService?.get("pageLength"));
-      vue.watch(pageLength, (length = 0, preLength = 0) => {
-        setTimeout(() => {
-          setCanScroll();
-          if (length < preLength) {
-            scroll("start");
-          } else {
-            scroll("end");
-          }
-        });
-      });
-      const addPage = () => {
-        if (!editorService)
-          return;
-        const root = vue.toRaw(editorService.get("root"));
-        if (!root)
-          throw new Error("root 不能为空");
-        const pageConfig = {
-          type: schema.NodeType.PAGE,
-          name: generatePageNameByApp(root)
-        };
-        editorService.add(pageConfig);
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-page-bar",
-          ref_key: "pageBar",
-          ref: pageBar
-        }, [
-          showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            id: "m-editor-page-bar-add-icon",
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: addPage
-          }, [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2)),
-          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 2,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
-          }, [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
-          ])) : vue.createCommentVNode("", true),
-          pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 3,
-            class: "m-editor-page-bar-items",
-            ref_key: "itemsContainer",
-            ref: itemsContainer,
-            style: vue.normalizeStyle(`width: ${itemsContainerWidth.value}px`)
-          }, [
-            vue.renderSlot(_ctx.$slots, "default")
-          ], 4)) : vue.createCommentVNode("", true),
-          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 4,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
-          }, [
-            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
-          ])) : vue.createCommentVNode("", true)
-        ], 512);
-      };
-    }
-  });
-
-  const _hoisted_1$1 = ["onClick"];
-  const _hoisted_2 = { class: "m-editor-page-bar-title" };
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorPageBar"
-    },
-    __name: "PageBar",
-    setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const root = vue.computed(() => editorService?.get("root"));
-      const page = vue.computed(() => editorService?.get("page"));
-      const switchPage = (page2) => {
-        editorService?.select(page2);
-      };
-      const copy = (node) => {
-        node && editorService?.copy(node);
-        editorService?.paste({
-          left: 0,
-          top: 0
-        });
-      };
-      const remove = (node) => {
-        editorService?.remove(node);
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$3, null, {
-          default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(root.value && root.value.items || [], (item) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
-                key: item.key,
-                onClick: ($event) => switchPage(item)
-              }, [
-                vue.createElementVNode("div", _hoisted_2, [
-                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                    vue.createVNode(vue.unref(design.TMagicTooltip), {
-                      effect: "dark",
-                      placement: "top-start",
-                      content: item.name
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createElementVNode("span", null, vue.toDisplayString(item.name || item.id), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["content"])
-                  ])
-                ]),
-                vue.createVNode(vue.unref(design.TMagicPopover), {
-                  "popper-class": "page-bar-popover",
-                  placement: "top",
-                  width: 160,
-                  trigger: "hover"
-                }, {
-                  reference: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(design.TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.CaretBottom))
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  default: vue.withCtx(() => [
-                    vue.createElementVNode("div", null, [
-                      vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$t, {
-                          data: {
-                            type: "button",
-                            text: "复制",
-                            icon: vue.unref(iconsVue.DocumentCopy),
-                            handler: () => copy(item)
-                          }
-                        }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$t, {
-                          data: {
-                            type: "button",
-                            text: "删除",
-                            icon: vue.unref(iconsVue.Delete),
-                            handler: () => remove(item)
-                          }
-                        }, null, 8, ["data"])
-                      ])
-                    ])
-                  ]),
-                  _: 2
-                }, 1024)
-              ], 10, _hoisted_1$1);
-            }), 128))
-          ]),
-          _: 3
-        });
-      };
-    }
-  });
-
   const _hoisted_1 = { class: "m-editor-workspace" };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -9633,30 +9951,23 @@
     },
     __name: "Workspace",
     props: {
-      stageContentMenu: {}
+      stageContentMenu: {},
+      customContentMenu: { type: Function }
     },
     setup(__props) {
       const services = vue.inject("services");
       const page = vue.computed(() => services?.editorService.get("page"));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-          vue.createVNode(_sfc_main$4),
+          vue.createVNode(_sfc_main$2),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
-            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
               key: 0,
-              "stage-content-menu": _ctx.stageContentMenu
-            }, null, 8, ["stage-content-menu"])) : vue.createCommentVNode("", true)
+              "stage-content-menu": _ctx.stageContentMenu,
+              "custom-content-menu": _ctx.customContentMenu
+            }, null, 8, ["stage-content-menu", "custom-content-menu"])) : vue.createCommentVNode("", true)
           ]),
-          vue.renderSlot(_ctx.$slots, "workspace-content"),
-          vue.createVNode(_sfc_main$2, null, {
-            "page-bar-title": vue.withCtx(({ page: page2 }) => [
-              vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
-            ]),
-            "page-bar-popover": vue.withCtx(({ page: page2 }) => [
-              vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
-            ]),
-            _: 3
-          })
+          vue.renderSlot(_ctx.$slots, "workspace-content")
         ]);
       };
     }
@@ -9940,7 +10251,7 @@
     commands = {
       [KeyBindingCommand.DELETE_NODE]: () => {
         const nodes = editorService.get("nodes");
-        if (!nodes || utils.isPage(nodes[0]))
+        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))
           return;
         editorService.remove(nodes);
       },
@@ -9950,7 +10261,7 @@
       },
       [KeyBindingCommand.CUT_NODE]: () => {
         const nodes = editorService.get("nodes");
-        if (!nodes || utils.isPage(nodes[0]))
+        if (!nodes || utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))
           return;
         editorService.copy(nodes);
         editorService.remove(nodes);
@@ -10005,13 +10316,25 @@
         editorService.selectNextNode();
       }
     };
-    registeCommand(command, handler) {
+    registerCommand(command, handler) {
       this.commands[command] = handler;
     }
-    unregisteCommand(command) {
+    /**
+     * @deprecated
+     */
+    registeCommand(command, handler) {
+      this.registerCommand(command, handler);
+    }
+    unregisterCommand(command) {
       delete this.commands[command];
     }
-    registeEl(name, el) {
+    /**
+     * @deprecated
+     */
+    unregisteCommand(command) {
+      this.unregisterCommand(command);
+    }
+    registerEl(name, el) {
       if (name !== "global" && !el) {
         throw new Error("只有name为global可以不传el");
       }
@@ -10019,23 +10342,41 @@
       this.controllers.set(name, keycon);
       this.bind(name);
     }
-    unregisteEl(name) {
+    /**
+     * @deprecated
+     */
+    registeEl(name, el) {
+      this.registerEl(name, el);
+    }
+    unregisterEl(name) {
       this.controllers.get(name)?.destroy();
       this.controllers.delete(name);
       this.bindingList.forEach((item) => {
-        item.binded = false;
+        item.bound = false;
       });
     }
-    registe(maps) {
+    /**
+     * @deprecated
+     */
+    unregisteEl(name) {
+      this.unregisterEl(name);
+    }
+    register(maps) {
       for (const keybindingItem of maps) {
         const { command, keybinding, when } = keybindingItem;
         for (const [type = "", eventType = "keydown"] of when) {
-          const cacheItem = { type, command, keybinding, eventType, binded: false };
+          const cacheItem = { type, command, keybinding, eventType, bound: false };
           this.bindingList.push(cacheItem);
         }
       }
       this.bind();
     }
+    /**
+     * @deprecated
+     */
+    registe(map) {
+      this.register(map);
+    }
     reset() {
       this.controllers.forEach((keycon) => {
         keycon.destroy();
@@ -10048,11 +10389,11 @@
     }
     bind(name) {
       for (const item of this.bindingList) {
-        const { type, eventType, command, keybinding, binded } = item;
+        const { type, eventType, command, keybinding, bound } = item;
         if (name && name !== type) {
           continue;
         }
-        if (binded) {
+        if (bound) {
           continue;
         }
         const keycon = this.controllers.get(type);
@@ -10070,7 +10411,7 @@
             keycon[eventType](handler);
           }
         });
-        item.binded = true;
+        item.bound = true;
       }
     }
     getKeyconKeys(keybinding = "") {
@@ -10100,7 +10441,9 @@
     containerHighlightDuration: 800,
     containerHighlightType: StageCore.ContainerHighlightType.DEFAULT,
     codeOptions: () => ({}),
-    renderType: StageCore.RenderType.IFRAME
+    renderType: StageCore.RenderType.IFRAME,
+    disabledMultiSelect: false,
+    disabledPageFragment: false
   };
 
   const initServiceState = (props, {
@@ -10123,6 +10466,15 @@
         immediate: true
       }
     );
+    vue.watch(
+      () => props.disabledMultiSelect,
+      (disabledMultiSelect) => {
+        editorService.set("disabledMultiSelect", disabledMultiSelect || false);
+      },
+      {
+        immediate: true
+      }
+    );
     vue.watch(
       () => props.componentGroupList,
       (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
@@ -10223,7 +10575,7 @@
         immediate: true
       }
     );
-    vue.onUnmounted(() => {
+    vue.onBeforeUnmount(() => {
       editorService.resetState();
       historyService.resetState();
       propsService.resetState();
@@ -10407,7 +10759,7 @@
     if (props.collectorOptions && !depService.hasTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY)) {
       depService.addTarget(dep.createRelatedCompTarget(props.collectorOptions));
     }
-    vue.onUnmounted(() => {
+    vue.onBeforeUnmount(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
       depService.off("dep-update", depUpdateHandler);
@@ -10460,7 +10812,11 @@
       updateDragEl: { type: Function },
       disabledDragStart: { type: Boolean },
       extendFormState: { type: Function },
-      collectorOptions: {}
+      collectorOptions: {},
+      guidesOptions: {},
+      disabledMultiSelect: { type: Boolean },
+      disabledPageFragment: { type: Boolean },
+      customContentMenu: { type: Function }
     }, defaultEditorProps),
     emits: ["props-panel-mounted", "update:modelValue"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -10481,8 +10837,8 @@
       };
       initServiceEvents(props, emit, services);
       initServiceState(props, services);
-      keybindingService.registe(keybindingConfig);
-      keybindingService.registeEl("global");
+      keybindingService.register(keybindingConfig);
+      keybindingService.registerEl("global");
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
       vue.provide(
@@ -10499,18 +10855,20 @@
           containerHighlightDuration: props.containerHighlightDuration,
           containerHighlightType: props.containerHighlightType,
           disabledDragStart: props.disabledDragStart,
-          renderType: props.renderType
+          renderType: props.renderType,
+          guidesOptions: props.guidesOptions,
+          disabledMultiSelect: props.disabledMultiSelect
         })
       );
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$u, null, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
           header: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "header")
           ]),
           nav: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$s, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -10521,9 +10879,10 @@
           ]),
           sidebar: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "sidebar", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$c, {
+              vue.createVNode(_sfc_main$a, {
                 data: _ctx.sidebar,
-                "layer-content-menu": _ctx.layerContentMenu
+                "layer-content-menu": _ctx.layerContentMenu,
+                "custom-content-menu": _ctx.customContentMenu
               }, {
                 "layer-panel-header": vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "layer-panel-header")
@@ -10556,31 +10915,28 @@
                   vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
                 ]),
                 _: 3
-              }, 8, ["data", "layer-content-menu"])
+              }, 8, ["data", "layer-content-menu", "custom-content-menu"])
             ])
           ]),
           workspace: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "workspace", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$1, { "stage-content-menu": _ctx.stageContentMenu }, {
+              vue.createVNode(_sfc_main$1, {
+                "stage-content-menu": _ctx.stageContentMenu,
+                "custom-content-menu": _ctx.customContentMenu
+              }, {
                 stage: vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "stage")
                 ]),
                 "workspace-content": vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: vue.unref(editorService) })
                 ]),
-                "page-bar-title": vue.withCtx(({ page }) => [
-                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
-                ]),
-                "page-bar-popover": vue.withCtx(({ page }) => [
-                  vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
-                ]),
                 _: 3
-              }, 8, ["stage-content-menu"])
+              }, 8, ["stage-content-menu", "custom-content-menu"])
             ])
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$r, {
+              vue.createVNode(_sfc_main$p, {
                 "extend-state": _ctx.extendFormState,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
               }, {
@@ -10600,8 +10956,14 @@
           footer: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "footer")
           ]),
+          "page-bar-title": vue.withCtx(({ page }) => [
+            vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
+          ]),
+          "page-bar-popover": vue.withCtx(({ page }) => [
+            vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
+          ]),
           _: 3
-        });
+        }, 8, ["disabled-page-fragment"]);
       };
     }
   });
@@ -10616,21 +10978,22 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(_sfc_main.name, _sfc_main);
-      app.component("m-fields-ui-select", _sfc_main$y);
-      app.component("m-fields-code-link", _sfc_main$O);
-      app.component("m-fields-vs-code", _sfc_main$P);
-      app.component("magic-code-editor", _sfc_main$Q);
-      app.component("m-fields-code-select", _sfc_main$N);
-      app.component("m-fields-code-select-col", _sfc_main$J);
-      app.component("m-fields-event-select", _sfc_main$B);
-      app.component("m-fields-data-source-fields", _sfc_main$I);
-      app.component("m-fields-data-source-mocks", _sfc_main$D);
-      app.component("m-fields-key-value", _sfc_main$z);
-      app.component("m-fields-data-source-input", _sfc_main$G);
-      app.component("m-fields-data-source-select", _sfc_main$C);
-      app.component("m-fields-data-source-methods", _sfc_main$F);
-      app.component("m-fields-data-source-method-select", _sfc_main$E);
-      app.component("m-fields-data-source-field-select", _sfc_main$H);
+      app.component("m-fields-ui-select", _sfc_main$A);
+      app.component("m-fields-code-link", _sfc_main$R);
+      app.component("m-fields-vs-code", _sfc_main$S);
+      app.component("magic-code-editor", _sfc_main$T);
+      app.component("m-fields-code-select", _sfc_main$Q);
+      app.component("m-fields-code-select-col", _sfc_main$M);
+      app.component("m-fields-event-select", _sfc_main$E);
+      app.component("m-fields-data-source-fields", _sfc_main$L);
+      app.component("m-fields-data-source-mocks", _sfc_main$G);
+      app.component("m-fields-key-value", _sfc_main$C);
+      app.component("m-fields-data-source-input", _sfc_main$J);
+      app.component("m-fields-data-source-select", _sfc_main$F);
+      app.component("m-fields-data-source-methods", _sfc_main$I);
+      app.component("m-fields-data-source-method-select", _sfc_main$H);
+      app.component("m-fields-data-source-field-select", _sfc_main$K);
+      app.component("m-fields-page-fragment-select", _sfc_main$B);
     }
   };
 
@@ -10640,40 +11003,41 @@
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$M;
-  exports.CodeBlockList = _sfc_main$n;
-  exports.CodeBlockListPanel = _sfc_main$m;
+  exports.CodeBlockEditor = _sfc_main$P;
+  exports.CodeBlockList = _sfc_main$l;
+  exports.CodeBlockListPanel = _sfc_main$k;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$N;
-  exports.CodeSelectCol = _sfc_main$J;
+  exports.CodeSelect = _sfc_main$Q;
+  exports.CodeSelectCol = _sfc_main$M;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$d;
-  exports.ContentMenu = _sfc_main$i;
-  exports.DataSourceFieldSelect = _sfc_main$H;
-  exports.DataSourceFields = _sfc_main$I;
-  exports.DataSourceInput = _sfc_main$G;
-  exports.DataSourceMethodSelect = _sfc_main$E;
-  exports.DataSourceMethods = _sfc_main$F;
-  exports.DataSourceMocks = _sfc_main$D;
-  exports.DataSourceSelect = _sfc_main$C;
+  exports.ComponentListPanel = _sfc_main$b;
+  exports.ContentMenu = _sfc_main$g;
+  exports.DataSourceFieldSelect = _sfc_main$K;
+  exports.DataSourceFields = _sfc_main$L;
+  exports.DataSourceInput = _sfc_main$J;
+  exports.DataSourceMethodSelect = _sfc_main$H;
+  exports.DataSourceMethods = _sfc_main$I;
+  exports.DataSourceMocks = _sfc_main$G;
+  exports.DataSourceSelect = _sfc_main$F;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$B;
+  exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$K;
+  exports.Icon = _sfc_main$N;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$z;
+  exports.KeyValue = _sfc_main$C;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$e;
+  exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$w;
-  exports.PropsPanel = _sfc_main$r;
-  exports.Resizer = _sfc_main$x;
-  exports.SplitView = _sfc_main$w;
-  exports.TMagicCodeEditor = _sfc_main$Q;
+  exports.LayoutContainer = _sfc_main$y;
+  exports.PageFragmentSelect = _sfc_main$B;
+  exports.PropsPanel = _sfc_main$p;
+  exports.Resizer = _sfc_main$z;
+  exports.SplitView = _sfc_main$y;
+  exports.TMagicCodeEditor = _sfc_main$T;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$t;
+  exports.ToolButton = _sfc_main$x;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
@@ -10703,6 +11067,7 @@
   exports.getGuideLineFromCache = getGuideLineFromCache;
   exports.getInitPositionStyle = getInitPositionStyle;
   exports.getNodeIndex = getNodeIndex;
+  exports.getPageFragmentList = getPageFragmentList;
   exports.getPageList = getPageList;
   exports.getPageNameList = getPageNameList;
   exports.getPositionInContainer = getPositionInContainer;
@@ -10713,7 +11078,7 @@
   exports.log = log;
   exports.propsService = propsService;
   exports.serializeConfig = serializeConfig;
-  exports.setChilrenLayout = setChilrenLayout;
+  exports.setChildrenLayout = setChildrenLayout;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
   exports.storageService = storageService;