@tmagic/editor 1.3.6 → 1.3.7

package/dist/tmagic-editor.js

@@ -1,13 +1,13 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, provide, Transition, toHandlers, onBeforeUnmount, mergeDefaults } from 'vue';
-import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, normalizeProps, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, toHandlers, mergeDefaults } from 'vue';
+import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, get, set, isObject, uniq, map, has, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
-import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
-import { guid, isPop, getNodePath, isNumber, isPage, toLine, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
+import { guid, isPage, isPageFragment, isPop, getNodePath, isNumber, toLine, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
 import Gesto from 'gesto';
 import Moveable from 'moveable';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
@@ -23,10 +23,10 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _hoisted_1$s = {
+const _hoisted_1$t = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -152,7 +152,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       loading.value = true;
       init();
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       resizeObserver.disconnect();
     });
     const fullScreen = ref(false);
@@ -184,7 +184,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -212,7 +212,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -237,7 +237,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$Q, {
+      return openBlock(), createBlock(_sfc_main$T, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -252,7 +252,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -332,7 +332,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -405,11 +405,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -432,7 +432,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       height.value = globalThis.innerHeight;
     };
     globalThis.addEventListener("resize", windowReizehandler);
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       globalThis.removeEventListener("resize", windowReizehandler);
     });
     const magicVsEditor = ref();
@@ -630,7 +630,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           fullscreen: ""
         }, {
           footer: withCtx(() => [
-            createElementVNode("span", _hoisted_4$5, [
+            createElementVNode("span", _hoisted_4$7, [
               createVNode(unref(TMagicButton), {
                 size: "small",
                 onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -653,8 +653,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$r, [
-              createElementVNode("div", _hoisted_2$j, [
+            createElementVNode("div", _hoisted_1$s, [
+              createElementVNode("div", _hoisted_2$k, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "info"
@@ -665,7 +665,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                   _: 1
                 })
               ]),
-              createElementVNode("div", _hoisted_3$7, [
+              createElementVNode("div", _hoisted_3$8, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "success"
@@ -677,7 +677,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            difVisible.value ? (openBlock(), createBlock(_sfc_main$Q, {
+            difVisible.value ? (openBlock(), createBlock(_sfc_main$T, {
               key: 0,
               ref_key: "magicVsEditor",
               ref: magicVsEditor,
@@ -1608,25 +1608,33 @@ var DragType = /* @__PURE__ */ ((DragType2) => {
 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 === NodeType.PAGE);
-  }
-  return [];
+const getPageList = (root) => {
+  if (!root)
+    return [];
+  if (!Array.isArray(root.items))
+    return [];
+  return root.items.filter((item) => isPage(item));
+};
+const getPageFragmentList = (root) => {
+  if (!root)
+    return [];
+  if (!Array.isArray(root.items))
+    return [];
+  return root.items.filter((item) => 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 || [];
@@ -1668,7 +1676,7 @@ const getInitPositionStyle = (style = {}, layout) => {
   }
   return style;
 };
-const setChilrenLayout = (node, layout) => {
+const setChildrenLayout = (node, layout) => {
   node.items?.forEach((child) => {
     setLayout(child, layout);
   });
@@ -1880,6 +1888,9 @@ class History extends BaseService {
   }
   reset() {
     this.state.pageSteps = {};
+    this.resetPage();
+  }
+  resetPage() {
     this.state.pageId = void 0;
     this.state.canRedo = false;
     this.state.canUndo = false;
@@ -2269,9 +2280,12 @@ class Editor extends BaseService {
     node: null,
     nodes: [],
     stage: null,
+    stageLoading: true,
     highlightNode: null,
     modifiedNodeIds: /* @__PURE__ */ new Map(),
-    pageLength: 0
+    pageLength: 0,
+    pageFragmentLength: 0,
+    disabledMultiSelect: false
   });
   isHistoryStateChange = false;
   constructor() {
@@ -2305,7 +2319,7 @@ class Editor extends BaseService {
   }
   /**
    * 设置当前指点节点配置
-   * @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) {
@@ -2318,17 +2332,22 @@ class Editor extends BaseService {
       if (Array.isArray(value)) {
         throw new Error("root 不能为数组");
       }
-      if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
-        this.state.pageLength = value.items?.length || 0;
+      if (value && 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) {
@@ -2363,7 +2382,7 @@ class Editor extends BaseService {
     info.node = path[path.length - 1];
     info.parent = path[path.length - 2];
     path.forEach((item) => {
-      if (item.type === NodeType.PAGE) {
+      if (isPage(item) || isPageFragment(item)) {
         info.page = item;
         return;
       }
@@ -2487,6 +2506,16 @@ class Editor extends BaseService {
     });
     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)
@@ -2495,10 +2524,10 @@ class Editor extends BaseService {
     const stage = this.get("stage");
     if (!curNode)
       throw new Error("当前选中节点为空");
-    if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
+    if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
       throw new Error("app下不能添加组件");
     }
-    if (parent.id !== curNode.id && node.type !== NodeType.PAGE) {
+    if (parent.id !== curNode.id && !(isPage(node) || isPageFragment(node))) {
       const index = parent.items.indexOf(curNode);
       parent.items?.splice(index + 1, 0, node);
     } else {
@@ -2540,7 +2569,7 @@ class Editor extends BaseService {
     const newNodes = await Promise.all(
       addNodes.map((node) => {
         const root = this.get("root");
-        if (isPage(node) && root) {
+        if ((isPage(node) || isPageFragment(node)) && root) {
           return this.doAdd(node, root);
         }
         const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
@@ -2557,11 +2586,13 @@ class Editor extends BaseService {
       await this.select(newNodes[0]);
       if (isPage(newNodes[0])) {
         this.state.pageLength += 1;
+      } else if (isPageFragment(newNodes[0])) {
+        this.state.pageFragmentLength += 1;
       } else {
         stage?.select(newNodes[0].id);
       }
     }
-    if (!isPage(newNodes[0])) {
+    if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
       this.pushHistoryState();
     }
     this.emit("add", newNodes);
@@ -2571,7 +2602,7 @@ class Editor extends BaseService {
     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);
@@ -2580,26 +2611,31 @@ class Editor extends BaseService {
     parent.items?.splice(index, 1);
     const stage = this.get("stage");
     stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
-    if (node.type === 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 (isPage(node)) {
+      this.state.pageLength -= 1;
+      await selectDefault(getPageList(root));
+    } else if (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);
   }
   /**
    * 删除组件
@@ -2608,7 +2644,7 @@ class Editor extends BaseService {
   async remove(nodeOrNodeList) {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
     await Promise.all(nodes.map((node) => this.doRemove(node)));
-    if (!isPage(nodes[0])) {
+    if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) {
       this.pushHistoryState();
     }
     this.emit("remove", nodes);
@@ -2648,7 +2684,7 @@ class Editor extends BaseService {
     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");
@@ -2660,7 +2696,7 @@ class Editor extends BaseService {
       parentId: parent.id,
       root: cloneDeep(root)
     });
-    if (newConfig.type === NodeType.PAGE) {
+    if (isPage(newConfig) || isPageFragment(newConfig)) {
       this.set("page", newConfig);
     }
     this.addModifiedNodeId(newConfig.id);
@@ -3109,8 +3145,8 @@ const beforePaste = async (position, config) => {
         };
       }
       const root = editorService.get("root");
-      if (isPage(pasteConfig) && root) {
-        pasteConfig.name = generatePageNameByApp(root);
+      if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+        pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
       }
       return pasteConfig;
     })
@@ -3148,7 +3184,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3198,8 +3234,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$q = ["src"];
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["src"];
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -3223,7 +3259,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$r)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -3301,9 +3337,9 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const _hoisted_1$p = { class: "m-fields-code-select-col" };
-const _hoisted_2$i = { class: "code-select-container" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = { class: "m-fields-code-select-col" };
+const _hoisted_2$j = { class: "code-select-container" };
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -3376,8 +3412,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        createElementVNode("div", _hoisted_2$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+        createElementVNode("div", _hoisted_2$j, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -3385,14 +3421,14 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -3400,7 +3436,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3413,9 +3449,9 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -3650,12 +3686,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$h, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -3707,7 +3743,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "DataSourceFieldSelect",
   props: {
     config: {},
@@ -3762,10 +3798,10 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
   },
@@ -3955,12 +3991,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$K, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$N, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$n, [
+          createElementVNode("div", _hoisted_1$o, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$g, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$h, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -3972,7 +4008,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$6, [
+          createElementVNode("div", _hoisted_3$7, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -3990,7 +4026,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$K, {
+            createVNode(_sfc_main$N, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -4073,9 +4109,9 @@ const useDataSourceMethod = () => {
   };
 };
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethods"
   },
@@ -4145,12 +4181,12 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$g, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -4164,7 +4200,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4179,9 +4215,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethodSelect"
   },
@@ -4264,22 +4300,22 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
-        createElementVNode("div", _hoisted_2$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createElementVNode("div", _hoisted_2$f, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: cascaderConfig.value,
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["config", "model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -4288,7 +4324,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -4301,9 +4337,9 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMocks"
   },
@@ -4390,7 +4426,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$Q,
+        component: _sfc_main$T,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -4499,12 +4535,12 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$d, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -4535,7 +4571,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceSelect"
   },
@@ -4592,12 +4628,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorEventSelect"
   },
@@ -4800,7 +4836,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -4810,7 +4846,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -4860,32 +4896,32 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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__ */ 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__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_4$4);
+      return openBlock(), 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__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = { class: "m-fields-key-value" };
+const _hoisted_2$b = { key: 0 };
+const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -4943,8 +4979,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -4958,7 +4994,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_3$5,
+              _hoisted_3$6,
               createVNode(unref(TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -4993,7 +5029,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
-        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$Q, {
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$T, {
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
@@ -5009,7 +5045,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           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"])) : createCommentVNode("", true)
       ]);
@@ -5017,12 +5053,72 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
+const _hoisted_2$a = { class: "page-fragment-select-container" };
+const _sfc_main$B = /* @__PURE__ */ 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 = inject("services");
+    const emit = __emit;
+    const props = __props;
+    const pageList = computed(
+      () => services?.editorService.get("root")?.items.filter((item) => item.type === 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 = resolveComponent("m-form-container");
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        createElementVNode("div", _hoisted_2$a, [
+          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__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -5198,7 +5294,7 @@ const useGetSo = (target, emit) => {
       isDraging.value = false;
     });
   });
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     getso?.unset();
     isDraging.value = false;
   });
@@ -5207,7 +5303,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -5229,7 +5325,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -5296,7 +5392,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         resizerObserver.observe(el.value);
       }
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       resizerObserver.disconnect();
     });
     const center = ref(0);
@@ -5356,7 +5452,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$x, { onChange: changeLeft })
+          createVNode(_sfc_main$z, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5365,7 +5461,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$x, { onChange: changeRight }),
+          createVNode(_sfc_main$z, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -5378,345 +5474,749 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$f = { class: "m-editor-empty-panel" };
-const _hoisted_2$9 = { class: "m-editor-empty-content" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const _sfc_main$v = /* @__PURE__ */ 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__ */ defineComponent({
   ...{
-    name: "MEditorAddPageBox"
+    name: "MEditorToolButton"
   },
-  __name: "AddPageBox",
-  setup(__props) {
-    const services = inject("services");
-    const clickHandler = () => {
-      const { editorService } = services || {};
-      if (!editorService)
-        return;
-      const root = toRaw(editorService.get("root"));
-      if (!root)
-        throw new Error("root 不能为空");
-      editorService.add({
-        type: NodeType.PAGE,
-        name: generatePageNameByApp(root)
-      });
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        createElementVNode("div", _hoisted_2$9, [
-          createElementVNode("div", {
-            class: "m-editor-empty-button",
-            onClick: clickHandler
-          }, [
-            createElementVNode("div", null, [
-              createVNode(_sfc_main$K, { icon: unref(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__ */ defineComponent({
-  ...{
-    name: "MEditorFramework"
+  __name: "ToolButton",
+  props: {
+    data: { default: () => ({
+      type: "text",
+      display: false
+    }) },
+    eventType: { default: "click" }
   },
-  __name: "Framework",
   setup(__props) {
-    const codeOptions = inject("codeOptions", {});
-    const { editorService, uiService } = inject("services") || {};
-    const content = ref();
-    const splitView = ref();
-    const root = computed(() => editorService?.get("root"));
-    const pageLength = computed(() => editorService?.get("pageLength") || 0);
-    const showSrc = 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 = ref({
-      left: leftColumnWidthCacheData,
-      center: 0,
-      right: RightColumnWidthCacheData
+    const props = __props;
+    const services = inject("services");
+    const disabled = 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;
     });
-    watch(
-      [pageLength, splitView],
-      () => {
-        splitView.value?.updateWidth();
-      },
-      {
-        immediate: true
+    const display = computed(() => {
+      if (!props.data)
+        return false;
+      if (typeof props.data === "string")
+        return true;
+      if (typeof props.data.display === "function") {
+        return props.data.display(services);
       }
-    );
-    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);
       }
-    );
-    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);
       }
-    );
-    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 openBlock(), createElementBlock("div", {
-        class: "m-editor",
-        ref_key: "content",
-        ref: content,
-        style: { "min-width": "180px" }
+      return display.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: 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))
       }, [
-        renderSlot(_ctx.$slots, "header"),
-        renderSlot(_ctx.$slots, "nav"),
-        renderSlot(_ctx.$slots, "content-before"),
-        showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$Q, {
-            class: "m-editor-content",
-            "init-values": root.value,
-            options: unref(codeOptions),
-            onSave: saveCode
-          }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), 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
-        }, createSlots({
-          left: withCtx(() => [
-            renderSlot(_ctx.$slots, "sidebar")
-          ]),
-          center: withCtx(() => [
-            pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$v)
-            ])
+        _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
+          key: 0,
+          direction: _ctx.data.direction || "vertical"
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 0,
+            effect: "dark",
+            placement: "bottom-start",
+            content: _ctx.data.tooltip
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                size: "small",
+                text: "",
+                disabled: disabled.value
+              }, {
+                default: withCtx(() => [
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                    key: 0,
+                    icon: _ctx.data.icon
+                  }, null, 8, ["icon"])) : createCommentVNode("", true),
+                  createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["content"])) : (openBlock(), createBlock(unref(TMagicButton), {
+            key: 1,
+            size: "small",
+            text: "",
+            disabled: disabled.value,
+            title: _ctx.data.text
+          }, {
+            default: withCtx(() => [
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                key: 0,
+                icon: _ctx.data.icon
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "title"]))
+        ], 64)) : _ctx.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
+          key: 3,
+          trigger: "click",
+          disabled: disabled.value,
+          onCommand: dropdownHandler
+        }, {
+          dropdown: withCtx(() => [
+            _ctx.data.items && _ctx.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (subItem, index) => {
+                  return openBlock(), createBlock(unref(TMagicDropdownItem), {
+                    key: index,
+                    command: { data: _ctx.data, subItem }
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(subItem.text), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["command"]);
+                }), 128))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
           ]),
-          _: 2
-        }, [
-          pageLength.value > 0 ? {
-            name: "right",
-            fn: withCtx(() => [
-              createVNode(unref(TMagicScrollbar), null, {
+          default: withCtx(() => [
+            createElementVNode("span", _hoisted_2$9, [
+              createTextVNode(toDisplayString(_ctx.data.text), 1),
+              createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "props-panel")
+                  createVNode(unref(ArrowDown))
                 ]),
-                _: 3
+                _: 1
               })
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["left", "right"])),
-        renderSlot(_ctx.$slots, "content-after"),
-        renderSlot(_ctx.$slots, "footer")
-      ], 512);
+            ])
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component), normalizeProps(mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : createCommentVNode("", true)
+      ], 34)) : 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__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ 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 = inject("services");
-    const disabled = 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 = computed(() => uiService?.get("showAddPageButton"));
+    const addPage = () => {
+      if (!editorService)
+        return;
+      const root = 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 ? (openBlock(), 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
+      }, [
+        createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$e));
+    };
+  }
+});
+
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorPageBarScrollContainer"
+  },
+  __name: "PageBarScrollContainer",
+  props: {
+    type: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const uiService = services?.uiService;
+    const itemsContainer = ref();
+    const canScroll = ref(false);
+    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
+    const itemsContainerWidth = ref(0);
+    const setCanScroll = () => {
+      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
+      nextTick(() => {
+        if (itemsContainer.value) {
+          canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+        }
+      });
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      setCanScroll();
     });
-    const display = 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 = ref();
+    onMounted(() => {
+      pageBar.value && resizeObserver.observe(pageBar.value);
     });
-    const buttonHandler = (item, event) => {
-      if (disabled.value)
+    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 = computed(() => editorService?.get("pageLength") || 0);
+    const pageFragmentLength = computed(() => editorService?.get("pageFragmentLength") || 0);
+    const crateWatchLength = (length) => watch(
+      length,
+      (length2 = 0, preLength = 0) => {
+        setTimeout(() => {
+          setCanScroll();
+          if (length2 < preLength) {
+            scroll("start");
+          } else {
+            scroll("end");
+          }
+        });
+      },
+      {
+        immediate: true
       }
+    );
+    let unWatchPageLength;
+    let unWatchPageFragmentLength;
+    watch(
+      () => props.type,
+      (type) => {
+        if (type === NodeType.PAGE) {
+          unWatchPageFragmentLength?.();
+          unWatchPageFragmentLength = null;
+          unWatchPageLength = crateWatchLength(pageLength);
+        } else {
+          unWatchPageLength?.();
+          unWatchPageLength = null;
+          unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-page-bar",
+        ref_key: "pageBar",
+        ref: pageBar
+      }, [
+        renderSlot(_ctx.$slots, "prepend"),
+        canScroll.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
+        }, [
+          createVNode(_sfc_main$N, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+        ])) : createCommentVNode("", true),
+        _ctx.type === unref(NodeType).PAGE && pageLength.value || _ctx.type === unref(NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "m-editor-page-bar-items",
+          ref_key: "itemsContainer",
+          ref: itemsContainer,
+          style: normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4)) : createCommentVNode("", true),
+        canScroll.value ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+        }, [
+          createVNode(_sfc_main$N, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+        ])) : createCommentVNode("", true)
+      ], 512);
     };
-    const clickHandler = (item, event) => {
-      if (props.eventType !== "click")
+  }
+});
+
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorPageBarSwitchTypeButton"
+  },
+  __name: "SwitchTypeButton",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const data = [
+      {
+        type: NodeType.PAGE,
+        text: "页面"
+      },
+      {
+        type: NodeType.PAGE_FRAGMENT,
+        text: "页面片"
+      }
+    ];
+    const emit = __emit;
+    const clickHandler = (value) => {
+      emit("update:modelValue", value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, renderList(data, (item) => {
+        return createVNode(unref(TMagicButton), {
+          class: 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: withCtx(() => [
+            createTextVNode(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__ */ defineComponent({
+  ...{
+    name: "MEditorPageBar"
+  },
+  __name: "PageBar",
+  props: {
+    disabledPageFragment: { type: Boolean }
+  },
+  setup(__props) {
+    const active = ref(NodeType.PAGE);
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const root = computed(() => editorService?.get("root"));
+    const page = computed(() => editorService?.get("page"));
+    const pageList = computed(() => getPageList(root.value));
+    const pageFragmentList = computed(() => getPageFragmentList(root.value));
+    const list = computed(() => active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value);
+    const activePage = ref("");
+    const activePageFragment = ref("");
+    watch(
+      page,
+      (page2) => {
+        if (!page2) {
+          if (active.value === NodeType.PAGE) {
+            activePage.value = "";
+          }
+          if (active.value === NodeType.PAGE_FRAGMENT) {
+            activePageFragment.value = "";
+          }
+          return;
+        }
+        if (isPage(page2)) {
+          activePage.value = page2?.id;
+          if (active.value !== NodeType.PAGE) {
+            active.value = NodeType.PAGE;
+          }
+        } else if (isPageFragment(page2)) {
+          activePageFragment.value = page2?.id;
+          if (active.value !== NodeType.PAGE_FRAGMENT) {
+            active.value = NodeType.PAGE_FRAGMENT;
+          }
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(active, (active2) => {
+      if (active2 === NodeType.PAGE) {
+        if (!activePage.value) {
+          editorService?.selectRoot();
+          return;
+        }
+        switchPage(activePage.value);
         return;
-      if (item.type === "button") {
-        buttonHandler(item, event);
       }
+      if (active2 === 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 openBlock(), createElementBlock("div", _hoisted_1$d, [
+        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$u, {
+          key: 0,
+          modelValue: active.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
+        }, null, 8, ["modelValue"])) : createCommentVNode("", true),
+        createVNode(_sfc_main$v, { type: active.value }, {
+          prepend: withCtx(() => [
+            createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
+          ]),
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
+              return openBlock(), createElementBlock("div", {
+                class: normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
+                key: item.id,
+                onClick: ($event) => switchPage(item.id)
+              }, [
+                createElementVNode("div", _hoisted_3$5, [
+                  renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+                    createElementVNode("span", {
+                      title: item.name
+                    }, toDisplayString(item.name || item.id), 9, _hoisted_4$5)
+                  ])
+                ]),
+                createVNode(unref(TMagicPopover), {
+                  "popper-class": "page-bar-popover",
+                  placement: "top",
+                  width: 160,
+                  trigger: "hover"
+                }, {
+                  reference: withCtx(() => [
+                    createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
+                      default: withCtx(() => [
+                        createVNode(unref(CaretBottom))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  default: withCtx(() => [
+                    createElementVNode("div", null, [
+                      renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                        createVNode(_sfc_main$x, {
+                          data: {
+                            type: "button",
+                            text: "复制",
+                            icon: unref(DocumentCopy),
+                            handler: () => copy(item)
+                          }
+                        }, null, 8, ["data"]),
+                        createVNode(_sfc_main$x, {
+                          data: {
+                            type: "button",
+                            text: "删除",
+                            icon: unref(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__ */ createElementVNode("p", null, "新增页面", -1);
+const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面片", -1);
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorAddPageBox"
+  },
+  __name: "AddPageBox",
+  props: {
+    disabledPageFragment: { type: Boolean }
+  },
+  setup(__props) {
+    const services = inject("services");
+    const clickHandler = (type) => {
+      const { editorService } = services || {};
+      if (!editorService)
         return;
-      if (item.type === "button") {
-        buttonHandler(item, event);
+      const root = toRaw(editorService.get("root"));
+      if (!root)
+        throw new Error("root 不能为空");
+      editorService.add({
+        type,
+        name: generatePageNameByApp(root, type),
+        items: []
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_2$7, [
+          createElementVNode("div", {
+            class: "m-editor-empty-button",
+            onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
+          }, [
+            createElementVNode("div", null, [
+              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+            ]),
+            _hoisted_3$4
+          ]),
+          !_ctx.disabledPageFragment ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "m-editor-empty-button",
+            onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
+          }, [
+            createElementVNode("div", null, [
+              createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
+            ]),
+            _hoisted_4$4
+          ])) : 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__ */ defineComponent({
+  ...{
+    name: "MEditorFramework"
+  },
+  __name: "Framework",
+  props: {
+    disabledPageFragment: { type: Boolean }
+  },
+  setup(__props) {
+    const codeOptions = inject("codeOptions", {});
+    const { editorService, uiService } = inject("services") || {};
+    const content = ref();
+    const splitView = ref();
+    const root = computed(() => editorService?.get("root"));
+    const page = computed(() => editorService?.get("page"));
+    const pageLength = computed(() => editorService?.get("pageLength") || 0);
+    const stageLoading = computed(() => editorService?.get("stageLoading") || false);
+    const showSrc = 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 = ref({
+      left: leftColumnWidthCacheData,
+      center: 0,
+      right: RightColumnWidthCacheData
+    });
+    watch(
+      [pageLength, splitView],
+      () => {
+        splitView.value?.updateWidth();
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => columnWidth.value.right,
+      (right) => {
+        if (typeof right === "undefined")
+          return;
+        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+      }
+    );
+    watch(
+      () => columnWidth.value.left,
+      (left) => {
+        globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
       }
+    );
+    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 ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: 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 = resolveDirective("loading");
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor",
+        ref_key: "content",
+        ref: content,
+        style: { "min-width": "180px" }
       }, [
-        _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
-          key: 0,
-          direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
-            key: 0,
-            effect: "dark",
-            placement: "bottom-start",
-            content: _ctx.data.tooltip
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(TMagicButton), {
-                size: "small",
-                text: "",
-                disabled: disabled.value
-              }, {
-                default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
-                    key: 0,
-                    icon: _ctx.data.icon
-                  }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
-                ]),
-                _: 1
-              }, 8, ["disabled"])
-            ]),
-            _: 1
-          }, 8, ["content"])) : (openBlock(), createBlock(unref(TMagicButton), {
-            key: 1,
-            size: "small",
-            text: "",
-            disabled: disabled.value,
-            title: _ctx.data.text
-          }, {
-            default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
-                key: 0,
-                icon: _ctx.data.icon
-              }, null, 8, ["icon"])) : createCommentVNode("", true),
-              createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
+        renderSlot(_ctx.$slots, "header"),
+        renderSlot(_ctx.$slots, "nav"),
+        renderSlot(_ctx.$slots, "content-before"),
+        showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
+          createVNode(_sfc_main$T, {
+            class: "m-editor-content",
+            "init-values": root.value,
+            options: unref(codeOptions),
+            onSave: saveCode
+          }, null, 8, ["init-values", "options"])
+        ]) : withDirectives((openBlock(), 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
+        }, createSlots({
+          left: withCtx(() => [
+            renderSlot(_ctx.$slots, "sidebar")
+          ]),
+          center: withCtx(() => [
+            page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
             ]),
-            _: 1
-          }, 8, ["disabled", "title"]))
-        ], 64)) : _ctx.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
-          key: 3,
-          trigger: "click",
-          disabled: disabled.value,
-          onCommand: dropdownHandler
-        }, {
-          dropdown: withCtx(() => [
-            _ctx.data.items && _ctx.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
-              default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (subItem, index) => {
-                  return openBlock(), createBlock(unref(TMagicDropdownItem), {
-                    key: index,
-                    command: { data: _ctx.data, subItem }
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(subItem.text), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["command"]);
-                }), 128))
+            createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+              "page-bar-title": withCtx(({ page: page2 }) => [
+                renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
               ]),
-              _: 1
-            })) : createCommentVNode("", true)
+              "page-bar-popover": withCtx(({ page: page2 }) => [
+                renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
+              ]),
+              _: 3
+            }, 8, ["disabled-page-fragment"])
           ]),
-          default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$8, [
-              createTextVNode(toDisplayString(_ctx.data.text), 1),
-              createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
+          _: 2
+        }, [
+          page.value ? {
+            name: "right",
+            fn: withCtx(() => [
+              createVNode(unref(TMagicScrollbar), null, {
                 default: withCtx(() => [
-                  createVNode(unref(ArrowDown))
+                  renderSlot(_ctx.$slots, "props-panel")
                 ]),
-                _: 1
+                _: 3
               })
-            ])
-          ]),
-          _: 1
-        }, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component), normalizeProps(mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : createCommentVNode("", true)
-      ], 34)) : createCommentVNode("", true);
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["left", "right"])), [
+          [_directive_loading, stageLoading.value]
+        ]),
+        renderSlot(_ctx.$slots, "content-after"),
+        renderSlot(_ctx.$slots, "footer")
+      ], 512);
     };
   }
 });
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -5878,7 +6378,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$t, {
+              return openBlock(), createBlock(_sfc_main$x, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -5890,8 +6390,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$d = { class: "m-editor-props-panel" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = { class: "m-editor-props-panel" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -5925,7 +6425,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       emit("mounted", internalInstance);
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       services?.propsService.off("props-configs-change", init);
     });
     watchEffect(() => {
@@ -5945,7 +6445,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$b, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -6096,7 +6596,7 @@ const useFloatBox = (slideKeys) => {
   };
 };
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -6147,14 +6647,14 @@ const updateStatus = (nodeStatusMap, id, status) => {
   });
 };
 
-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__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTreeNode"
   },
@@ -6180,7 +6680,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const selected = computed(() => nodeStatus.value.selected);
     const visible = computed(() => nodeStatus.value.visible);
     const draggable = computed(() => nodeStatus.value.draggable);
-    const hasChilren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+    const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
     const handleDragStart = (event) => {
       treeEmit?.("node-dragstart", event, props.data);
     };
@@ -6221,9 +6721,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           onContextmenu: nodeContentmenuHandler,
           onMouseenter: mouseenterHandler
         }, [
-          createVNode(_sfc_main$K, {
+          createVNode(_sfc_main$N, {
             class: "expand-icon",
-            style: normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
+            style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
             icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
             onClick: expandHandler
           }, null, 8, ["style", "icon"]),
@@ -6232,7 +6732,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             onClick: nodeClickHandler
           }, [
             renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-              createElementVNode("div", _hoisted_2$7, [
+              createElementVNode("div", _hoisted_2$6, [
                 renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
                   createTextVNode(toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
                 ])
@@ -6243,7 +6743,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             ])
           ])
         ], 38),
-        hasChilren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+        hasChildren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
             return openBlock(), createBlock(_component_TreeNode, {
               key: item.id,
@@ -6264,15 +6764,15 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             }, 1032, ["data", "node-status-map", "indent"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 40, _hoisted_1$c)), [
+      ], 40, _hoisted_1$a)), [
         [vShow, visible.value]
       ]);
     };
   }
 });
 
-const _hoisted_1$b = { key: 1 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = { key: 1 };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
   },
@@ -6296,7 +6796,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         onDragover: handleDragOver
       }, [
         _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
-          return openBlock(), createBlock(_sfc_main$p, {
+          return openBlock(), createBlock(_sfc_main$n, {
             key: item.id,
             data: item,
             indent: _ctx.indent,
@@ -6313,7 +6813,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             ]),
             _: 2
           }, 1032, ["data", "indent", "node-status-map"]);
-        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$9, [
           createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
         ]))
       ], 32);
@@ -6393,7 +6893,7 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -6475,7 +6975,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, {
+      return openBlock(), createBlock(_sfc_main$m, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -6497,7 +6997,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$K, {
+              createVNode(_sfc_main$N, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -6512,7 +7012,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$K, {
+              createVNode(_sfc_main$N, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -6531,8 +7031,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "search-wrapper" };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8 = { class: "search-wrapper" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -6554,8 +7054,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              createElementVNode("div", _hoisted_1$a, [
-                createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
+              createElementVNode("div", _hoisted_1$8, [
+                createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -6571,7 +7071,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            createVNode(_sfc_main$n, {
+            createVNode(_sfc_main$l, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -6589,7 +7089,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -6603,7 +7103,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -6659,7 +7159,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -6748,7 +7248,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, {
+      return openBlock(), createBlock(_sfc_main$m, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -6770,7 +7270,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$K, {
+              createVNode(_sfc_main$N, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -6785,7 +7285,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$K, {
+              createVNode(_sfc_main$N, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -6801,9 +7301,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "search-wrapper" };
-const _hoisted_2$6 = { class: "data-source-list-panel-add-menu" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "search-wrapper" };
+const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
@@ -6867,8 +7367,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$9, [
-              createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$7, [
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -6885,9 +7385,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_2$6, [
+                  createElementVNode("div", _hoisted_2$5, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$t, {
+                      return openBlock(), createBlock(_sfc_main$x, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -6903,14 +7403,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 _: 1
               })) : createCommentVNode("", true)
             ]),
-            createVNode(_sfc_main$k, {
+            createVNode(_sfc_main$i, {
               onEdit: editHandler,
               onRemove: removeHandler
             })
           ]),
           _: 1
         }),
-        createVNode(_sfc_main$l, {
+        createVNode(_sfc_main$j, {
           ref_key: "editDialog",
           ref: editDialog,
           disabled: !editable.value,
@@ -6924,7 +7424,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -6965,7 +7465,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         return;
       hide();
     };
-    const outsideClickhideHandler = (e) => {
+    const outsideClickHideHandler = (e) => {
       if (!props.autoHide)
         return;
       const target = e.target;
@@ -7026,12 +7526,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       if (props.isSubMenu)
         return;
-      globalThis.addEventListener("mousedown", outsideClickhideHandler, true);
+      globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       if (props.isSubMenu)
         return;
-      globalThis.removeEventListener("mousedown", outsideClickhideHandler, true);
+      globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
     });
     __expose({
       menu,
@@ -7055,7 +7555,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$t, {
+                return openBlock(), createBlock(_sfc_main$x, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -7090,7 +7590,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$6 = {
   width: "1em",
   height: "1em",
   viewBox: "0 0 16 16",
@@ -7098,7 +7598,7 @@ const _hoisted_1$8 = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$4 = /* @__PURE__ */ 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);
@@ -7107,17 +7607,17 @@ const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("path", {
   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__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
   },
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$8, _hoisted_4$2);
+      return openBlock(), createElementBlock("svg", _hoisted_1$6, _hoisted_4$2);
     };
   }
 });
@@ -7128,7 +7628,7 @@ const useDeleteMenu = () => ({
   icon: Delete,
   display: (services) => {
     const node = services?.editorService?.get("node");
-    return node?.type !== NodeType.ROOT && !isPage(node);
+    return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
   },
   handler: (services) => {
     const nodes = services?.editorService?.get("nodes");
@@ -7195,13 +7695,14 @@ const useMoveToMenu = (services) => {
   };
 };
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
   __name: "LayerMenu",
   props: {
-    layerContentMenu: {}
+    layerContentMenu: { default: () => [] },
+    customContentMenu: { type: Function, default: (menus) => menus }
   },
   emits: ["collapse-all"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -7255,29 +7756,34 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
       return [];
     });
-    const menuData = computed(() => [
-      {
-        type: "button",
-        text: "全部折叠",
-        icon: _sfc_main$h,
-        display: () => isPage(node.value),
-        handler: () => {
-          emit("collapse-all");
-        }
-      },
-      {
-        type: "button",
-        text: "新增",
-        icon: markRaw(Plus),
-        display: () => node.value?.items && nodes.value?.length === 1,
-        items: getSubMenuData.value
-      },
-      useCopyMenu(),
-      usePasteMenu(),
-      useDeleteMenu(),
-      useMoveToMenu(services),
-      ...props.layerContentMenu
-    ]);
+    const menuData = computed(
+      () => props.customContentMenu(
+        [
+          {
+            type: "button",
+            text: "全部折叠",
+            icon: _sfc_main$f,
+            display: () => isPage(node.value) || isPageFragment(node.value),
+            handler: () => {
+              emit("collapse-all");
+            }
+          },
+          {
+            type: "button",
+            text: "新增",
+            icon: markRaw(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);
     };
@@ -7285,7 +7791,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$i, {
+      return openBlock(), createBlock(_sfc_main$g, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -7295,7 +7801,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "LayerNodeTool",
   props: {
     data: {}
@@ -7314,12 +7820,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$K, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$N, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$K, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$N, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -7332,11 +7838,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
 });
 
 const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
+  const isMultiSelect = 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);
@@ -7375,7 +7882,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
       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
       });
@@ -7645,21 +8152,21 @@ const keybindingConfig = [
   }
 ];
 
-const useKeybinding = (services, contianer) => {
+const useKeybinding = (services, container) => {
   const keybindingService = services?.keybindingService;
   const isCtrlKeyDown = 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"]]
     },
@@ -7670,12 +8177,12 @@ const useKeybinding = (services, contianer) => {
     }
   ]);
   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 {
@@ -7683,7 +8190,7 @@ const useKeybinding = (services, contianer) => {
   };
 };
 
-const createPageNodeStatus = (page, initalLayerNodeStatus) => {
+const createPageNodeStatus = (page, initialLayerNodeStatus) => {
   const map = /* @__PURE__ */ new Map();
   map.set(page.id, {
     visible: true,
@@ -7695,7 +8202,7 @@ const createPageNodeStatus = (page, initalLayerNodeStatus) => {
     (node) => traverseNode(node, (node2) => {
       map.set(
         node2.id,
-        initalLayerNodeStatus?.get(node2.id) || {
+        initialLayerNodeStatus?.get(node2.id) || {
           visible: true,
           expand: false,
           selected: false,
@@ -7770,13 +8277,14 @@ const useNodeStatus = (services) => {
   };
 };
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerPanel"
   },
   __name: "LayerPanel",
   props: {
-    layerContentMenu: {}
+    layerContentMenu: {},
+    customContentMenu: { type: Function }
   },
   setup(__props) {
     const services = inject("services");
@@ -7818,8 +8326,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$q, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$o, {
+          createVNode(_sfc_main$o, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$m, {
             key: 0,
             tabindex: "-1",
             ref_key: "tree",
@@ -7839,7 +8347,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ]),
             "tree-node-tool": withCtx(({ data: nodeData2 }) => [
               renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
-                createVNode(_sfc_main$f, { data: nodeData2 }, null, 8, ["data"])
+                createVNode(_sfc_main$d, { data: nodeData2 }, null, 8, ["data"])
               ])
             ]),
             "tree-node-label": withCtx(({ data: nodeData2 }) => [
@@ -7848,12 +8356,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$g, {
+            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
@@ -7862,9 +8371,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = ["onClick", "onDragstart"];
-const _hoisted_2$4 = ["title"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = ["onClick", "onDragstart"];
+const _hoisted_2$3 = ["title"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
   },
@@ -7944,7 +8453,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$q, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -7952,7 +8461,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$K, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$N, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -7973,7 +8482,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               content: item.desc
                             }, {
                               default: withCtx(() => [
-                                createVNode(_sfc_main$K, {
+                                createVNode(_sfc_main$N, {
                                   icon: item.icon
                                 }, null, 8, ["icon"])
                               ]),
@@ -7981,9 +8490,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                             }, 1032, ["disabled", "content"]),
                             createElementVNode("span", {
                               title: item.text
-                            }, toDisplayString(item.text), 9, _hoisted_2$4)
+                            }, toDisplayString(item.text), 9, _hoisted_2$3)
                           ])
-                        ], 40, _hoisted_1$7);
+                        ], 40, _hoisted_1$5);
                       }), 128))
                     ]),
                     _: 2
@@ -8000,11 +8509,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-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,
@@ -8013,14 +8522,15 @@ const _hoisted_4$1 = {
 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__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ 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;
@@ -8033,7 +8543,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$d,
+          component: _sfc_main$b,
           slots: {}
         },
         layer: {
@@ -8042,9 +8552,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           icon: List,
           text: "已选组件",
           props: {
-            layerContentMenu: props.layerContentMenu
+            layerContentMenu: props.layerContentMenu,
+            customContentMenu: props.customContentMenu
           },
-          component: _sfc_main$e,
+          component: _sfc_main$c,
           slots: {}
         },
         "code-block": {
@@ -8052,7 +8563,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$m,
+          component: _sfc_main$k,
           slots: {},
           boxComponentConfig: {
             props: {
@@ -8065,7 +8576,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$j,
+          component: _sfc_main$h,
           slots: {},
           boxComponentConfig: {
             props: {
@@ -8108,8 +8619,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
-          createElementVNode("div", _hoisted_2$3, [
+        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+          createElementVNode("div", _hoisted_2$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
               return withDirectives((openBlock(), createElementBlock("div", {
                 class: normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
@@ -8120,7 +8631,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$K, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$N, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -8256,7 +8767,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                   onClick: ($event) => unref(showFloatBox)(config.$key)
                 }, [
                   createElementVNode("div", null, toDisplayString(config.text), 1),
-                  createVNode(_sfc_main$K, {
+                  createVNode(_sfc_main$N, {
                     class: "m-editor-float-box-close",
                     icon: unref(Close),
                     onClick: withModifiers(($event) => unref(closeFloatBox)(config.$key), ["stop"])
@@ -8404,7 +8915,7 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollBar"
   },
@@ -8443,7 +8954,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       });
       bar.value?.addEventListener("wheel", wheelHandler, false);
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       if (gesto)
         gesto.off();
       bar.value?.removeEventListener("wheel", wheelHandler, false);
@@ -8492,7 +9003,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollViewer"
   },
@@ -8539,7 +9050,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         scrollHeight.value = data.scrollHeight;
       });
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       scrollViewer.destroy();
     });
     watch(
@@ -8578,14 +9089,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4),
-        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$b, {
+        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$9, {
           key: 0,
           "scroll-size": scrollHeight.value,
           size: _ctx.wrapHeight,
           pos: vOffset.value,
           onScroll: vScrollHandler
         }, null, 8, ["scroll-size", "size", "pos"])) : createCommentVNode("", true),
-        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$b, {
+        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$9, {
           key: 1,
           "is-horizontal": true,
           "scroll-size": scrollWidth.value,
@@ -8728,12 +9239,27 @@ const useStage = (stageOptions) => {
       return elCanSelect;
     },
     moveableOptions: stageOptions.moveableOptions,
-    updateDragEl: stageOptions.updateDragEl
+    updateDragEl: stageOptions.updateDragEl,
+    guidesOptions: stageOptions.guidesOptions,
+    disabledMultiSelect: stageOptions.disabledMultiSelect
   });
+  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;
@@ -8784,8 +9310,8 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _hoisted_1$5 = { class: "m-editor-float-box-body" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "m-editor-float-box-body" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
   props: {
     visible: { type: Boolean, default: false },
@@ -8885,7 +9411,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["icon"])
             ])
           ], 512),
-          createElementVNode("div", _hoisted_1$5, [
+          createElementVNode("div", _hoisted_1$3, [
             renderSlot(_ctx.$slots, "body")
           ])
         ], 4)
@@ -8894,7 +9420,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
   setup(__props) {
     const services = inject("services");
@@ -8915,13 +9441,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       (stage2) => {
         if (!stage2)
           return;
+        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
@@ -8976,7 +9502,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$9, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$7, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -8986,7 +9512,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           position: menuPosition.value
         }, {
           body: withCtx(() => [
-            createVNode(_sfc_main$o, {
+            createVNode(_sfc_main$m, {
               class: "m-editor-node-list-menu magic-editor-layer-tree",
               data: nodeData.value,
               "node-status-map": unref(nodeStatusMap),
@@ -9000,12 +9526,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createElementVNode("path", {
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", {
   "fill-rule": "evenodd",
   "clip-rule": "evenodd",
   d: "M2 4H21V6H2V4Z",
@@ -9027,119 +9553,125 @@ const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", {
   "fill-opacity": "0.9"
 }, null, -1);
 const _hoisted_5 = [
-  _hoisted_2$2,
+  _hoisted_2$1,
   _hoisted_3,
   _hoisted_4
 ];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCenterIcon"
   },
   __name: "CenterIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_5);
+      return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_5);
     };
   }
 });
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ 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 = inject("services");
-    const editorService = services?.editorService;
-    const menu = ref();
-    const canCenter = ref(false);
-    const node = computed(() => editorService?.get("node"));
-    const nodes = computed(() => editorService?.get("nodes"));
-    const parent = computed(() => editorService?.get("parent"));
-    const menuData = computed(() => [
-      {
-        type: "button",
-        text: "水平居中",
-        icon: 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 !isPage(node.value);
-        }
-      },
-      {
-        type: "button",
-        text: "上移一层",
-        icon: markRaw(Top),
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(1);
-        }
-      },
-      {
-        type: "button",
-        text: "下移一层",
-        icon: markRaw(Bottom),
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(-1);
-        }
-      },
-      {
-        type: "button",
-        text: "置顶",
-        icon: markRaw(Top),
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(LayerOffset.TOP);
-        }
-      },
-      {
-        type: "button",
-        text: "置底",
-        icon: markRaw(Bottom),
-        display: () => !isPage(node.value) && !props.isMultiSelect,
-        handler: () => {
-          editorService?.moveLayer(LayerOffset.BOTTOM);
-        }
-      },
-      useMoveToMenu(services),
-      {
-        type: "divider",
-        direction: "horizontal",
-        display: () => !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 = inject("services");
+    const editorService = services?.editorService;
+    const menu = ref();
+    const canCenter = ref(false);
+    const node = computed(() => editorService?.get("node"));
+    const nodes = computed(() => editorService?.get("nodes"));
+    const parent = computed(() => editorService?.get("parent"));
+    const menuData = computed(
+      () => props.customContentMenu(
+        [
+          {
+            type: "button",
+            text: "水平居中",
+            icon: 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 !isPage(node.value) && !isPageFragment(node.value);
+            }
+          },
+          {
+            type: "button",
+            text: "上移一层",
+            icon: markRaw(Top),
+            display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+            handler: () => {
+              editorService?.moveLayer(1);
+            }
+          },
+          {
+            type: "button",
+            text: "下移一层",
+            icon: markRaw(Bottom),
+            display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+            handler: () => {
+              editorService?.moveLayer(-1);
+            }
+          },
+          {
+            type: "button",
+            text: "置顶",
+            icon: markRaw(Top),
+            display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+            handler: () => {
+              editorService?.moveLayer(LayerOffset.TOP);
+            }
+          },
+          {
+            type: "button",
+            text: "置底",
+            icon: markRaw(Bottom),
+            display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+            handler: () => {
+              editorService?.moveLayer(LayerOffset.BOTTOM);
+            }
+          },
+          useMoveToMenu(services),
+          {
+            type: "divider",
+            direction: "horizontal",
+            display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect
+          },
+          useDeleteMenu(),
+          {
+            type: "divider",
+            direction: "horizontal"
+          },
+          {
+            type: "button",
+            text: "清空参考线",
+            handler: () => {
+              editorService?.get("stage")?.clearGuides();
+            }
+          },
+          ...props.stageContentMenu
+        ],
+        "viewer"
+      )
+    );
     watch(
       parent,
       async () => {
@@ -9159,7 +9691,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$i, {
+      return openBlock(), createBlock(_sfc_main$g, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -9168,13 +9700,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorStage"
   },
   __name: "Stage",
   props: {
-    stageContentMenu: {}
+    stageContentMenu: {},
+    customContentMenu: { type: Function }
   },
   setup(__props) {
     let stage = null;
@@ -9223,6 +9756,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     });
     watch(page, (page2) => {
       if (runtime && page2) {
+        services?.editorService.set("stageLoading", true);
         runtime.updatePageId?.(page2.id);
         nextTick(() => {
           stage?.select(page2.id);
@@ -9246,14 +9780,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     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);
       }
     });
-    onUnmounted(() => {
+    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");
@@ -9316,7 +9850,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$8, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
@@ -9342,14 +9876,15 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             onDrop: dropHandler,
             onDragover: dragoverHandler
           }, null, 36),
-          createVNode(_sfc_main$8),
+          createVNode(_sfc_main$6),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$6, {
+            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
@@ -9358,12 +9893,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _hoisted_2 = { key: 0 };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorBreadcrumb"
   },
@@ -9380,7 +9915,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       editorService?.get("stage")?.select(node2.id);
     };
     return (_ctx, _cache) => {
-      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: item.id
@@ -9395,7 +9930,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, 1032, ["disabled", "onClick"]),
-            index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
+            index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2, "/")) : createCommentVNode("", true)
           ], 64);
         }), 128))
       ])) : createCommentVNode("", true);
@@ -9403,223 +9938,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
-  key: 1,
-  style: { "width": "21px" }
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorPageBarScrollContainer"
-  },
-  __name: "PageBarScrollContainer",
-  setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const uiService = services?.uiService;
-    const itemsContainer = ref();
-    const canScroll = ref(false);
-    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
-    const itemsContainerWidth = ref(0);
-    const setCanScroll = () => {
-      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
-      nextTick(() => {
-        if (itemsContainer.value) {
-          canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
-        }
-      });
-    };
-    const resizeObserver = new ResizeObserver(() => {
-      setCanScroll();
-    });
-    const pageBar = ref();
-    onMounted(() => {
-      pageBar.value && resizeObserver.observe(pageBar.value);
-    });
-    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 = computed(() => editorService?.get("pageLength"));
-    watch(pageLength, (length = 0, preLength = 0) => {
-      setTimeout(() => {
-        setCanScroll();
-        if (length < preLength) {
-          scroll("start");
-        } else {
-          scroll("end");
-        }
-      });
-    });
-    const addPage = () => {
-      if (!editorService)
-        return;
-      const root = toRaw(editorService.get("root"));
-      if (!root)
-        throw new Error("root 不能为空");
-      const pageConfig = {
-        type: NodeType.PAGE,
-        name: generatePageNameByApp(root)
-      };
-      editorService.add(pageConfig);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor-page-bar",
-        ref_key: "pageBar",
-        ref: pageBar
-      }, [
-        showAddPageButton.value ? (openBlock(), 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
-        }, [
-          createVNode(_sfc_main$K, { icon: unref(Plus) }, null, 8, ["icon"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
-        canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
-        }, [
-          createVNode(_sfc_main$K, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
-        ])) : createCommentVNode("", true),
-        pageLength.value ? (openBlock(), createElementBlock("div", {
-          key: 3,
-          class: "m-editor-page-bar-items",
-          ref_key: "itemsContainer",
-          ref: itemsContainer,
-          style: normalizeStyle(`width: ${itemsContainerWidth.value}px`)
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 4)) : createCommentVNode("", true),
-        canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 4,
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
-        }, [
-          createVNode(_sfc_main$K, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
-        ])) : createCommentVNode("", true)
-      ], 512);
-    };
-  }
-});
-
-const _hoisted_1$1 = ["onClick"];
-const _hoisted_2 = { class: "m-editor-page-bar-title" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorPageBar"
-  },
-  __name: "PageBar",
-  setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const root = computed(() => editorService?.get("root"));
-    const page = 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 openBlock(), createBlock(_sfc_main$3, null, {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(root.value && root.value.items || [], (item) => {
-            return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
-              key: item.key,
-              onClick: ($event) => switchPage(item)
-            }, [
-              createElementVNode("div", _hoisted_2, [
-                renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                  createVNode(unref(TMagicTooltip), {
-                    effect: "dark",
-                    placement: "top-start",
-                    content: item.name
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("span", null, toDisplayString(item.name || item.id), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["content"])
-                ])
-              ]),
-              createVNode(unref(TMagicPopover), {
-                "popper-class": "page-bar-popover",
-                placement: "top",
-                width: 160,
-                trigger: "hover"
-              }, {
-                reference: withCtx(() => [
-                  createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
-                    default: withCtx(() => [
-                      createVNode(unref(CaretBottom))
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  createElementVNode("div", null, [
-                    renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$t, {
-                        data: {
-                          type: "button",
-                          text: "复制",
-                          icon: unref(DocumentCopy),
-                          handler: () => copy(item)
-                        }
-                      }, null, 8, ["data"]),
-                      createVNode(_sfc_main$t, {
-                        data: {
-                          type: "button",
-                          text: "删除",
-                          icon: unref(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__ */ defineComponent({
   ...{
@@ -9627,30 +9945,23 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   __name: "Workspace",
   props: {
-    stageContentMenu: {}
+    stageContentMenu: {},
+    customContentMenu: { type: Function }
   },
   setup(__props) {
     const services = inject("services");
     const page = computed(() => services?.editorService.get("page"));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$4),
+        createVNode(_sfc_main$2),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          page.value ? (openBlock(), createBlock(_sfc_main$5, {
+          page.value ? (openBlock(), createBlock(_sfc_main$3, {
             key: 0,
-            "stage-content-menu": _ctx.stageContentMenu
-          }, null, 8, ["stage-content-menu"])) : createCommentVNode("", true)
+            "stage-content-menu": _ctx.stageContentMenu,
+            "custom-content-menu": _ctx.customContentMenu
+          }, null, 8, ["stage-content-menu", "custom-content-menu"])) : createCommentVNode("", true)
         ]),
-        renderSlot(_ctx.$slots, "workspace-content"),
-        createVNode(_sfc_main$2, null, {
-          "page-bar-title": withCtx(({ page: page2 }) => [
-            renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
-          ]),
-          "page-bar-popover": withCtx(({ page: page2 }) => [
-            renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
-          ]),
-          _: 3
-        })
+        renderSlot(_ctx.$slots, "workspace-content")
       ]);
     };
   }
@@ -9934,7 +10245,7 @@ class Keybinding extends BaseService {
   commands = {
     [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get("nodes");
-      if (!nodes || isPage(nodes[0]))
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0]))
         return;
       editorService.remove(nodes);
     },
@@ -9944,7 +10255,7 @@ class Keybinding extends BaseService {
     },
     [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get("nodes");
-      if (!nodes || isPage(nodes[0]))
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0]))
         return;
       editorService.copy(nodes);
       editorService.remove(nodes);
@@ -9999,13 +10310,25 @@ class Keybinding extends BaseService {
       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");
     }
@@ -10013,23 +10336,41 @@ class Keybinding extends BaseService {
     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();
@@ -10042,11 +10383,11 @@ class Keybinding extends BaseService {
   }
   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);
@@ -10064,7 +10405,7 @@ class Keybinding extends BaseService {
           keycon[eventType](handler);
         }
       });
-      item.binded = true;
+      item.bound = true;
     }
   }
   getKeyconKeys(keybinding = "") {
@@ -10094,7 +10435,9 @@ const defaultEditorProps = {
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
-  renderType: RenderType.IFRAME
+  renderType: RenderType.IFRAME,
+  disabledMultiSelect: false,
+  disabledPageFragment: false
 };
 
 const initServiceState = (props, {
@@ -10117,6 +10460,15 @@ const initServiceState = (props, {
       immediate: true
     }
   );
+  watch(
+    () => props.disabledMultiSelect,
+    (disabledMultiSelect) => {
+      editorService.set("disabledMultiSelect", disabledMultiSelect || false);
+    },
+    {
+      immediate: true
+    }
+  );
   watch(
     () => props.componentGroupList,
     (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
@@ -10217,7 +10569,7 @@ const initServiceState = (props, {
       immediate: true
     }
   );
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     editorService.resetState();
     historyService.resetState();
     propsService.resetState();
@@ -10401,7 +10753,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
     depService.addTarget(createRelatedCompTarget(props.collectorOptions));
   }
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     depService.off("add-target", targetAddHandler);
     depService.off("remove-target", targetRemoveHandler);
     depService.off("dep-update", depUpdateHandler);
@@ -10454,7 +10806,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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 }) {
@@ -10475,8 +10831,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
-    keybindingService.registe(keybindingConfig);
-    keybindingService.registeEl("global");
+    keybindingService.register(keybindingConfig);
+    keybindingService.registerEl("global");
     provide("services", services);
     provide("codeOptions", props.codeOptions);
     provide(
@@ -10493,18 +10849,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         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 openBlock(), createBlock(_sfc_main$u, null, {
+      return openBlock(), createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$s, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -10515,9 +10873,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         sidebar: withCtx(() => [
           renderSlot(_ctx.$slots, "sidebar", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$c, {
+            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": withCtx(() => [
                 renderSlot(_ctx.$slots, "layer-panel-header")
@@ -10550,31 +10909,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
               ]),
               _: 3
-            }, 8, ["data", "layer-content-menu"])
+            }, 8, ["data", "layer-content-menu", "custom-content-menu"])
           ])
         ]),
         workspace: withCtx(() => [
           renderSlot(_ctx.$slots, "workspace", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$1, { "stage-content-menu": _ctx.stageContentMenu }, {
+            createVNode(_sfc_main$1, {
+              "stage-content-menu": _ctx.stageContentMenu,
+              "custom-content-menu": _ctx.customContentMenu
+            }, {
               stage: withCtx(() => [
                 renderSlot(_ctx.$slots, "stage")
               ]),
               "workspace-content": withCtx(() => [
                 renderSlot(_ctx.$slots, "workspace-content", { editorService: unref(editorService) })
               ]),
-              "page-bar-title": withCtx(({ page }) => [
-                renderSlot(_ctx.$slots, "page-bar-title", { page })
-              ]),
-              "page-bar-popover": withCtx(({ page }) => [
-                renderSlot(_ctx.$slots, "page-bar-popover", { page })
-              ]),
               _: 3
-            }, 8, ["stage-content-menu"])
+            }, 8, ["stage-content-menu", "custom-content-menu"])
           ])
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$r, {
+            createVNode(_sfc_main$p, {
               "extend-state": _ctx.extendFormState,
               onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
             }, {
@@ -10594,8 +10950,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         footer: withCtx(() => [
           renderSlot(_ctx.$slots, "footer")
         ]),
+        "page-bar-title": withCtx(({ page }) => [
+          renderSlot(_ctx.$slots, "page-bar-title", { page })
+        ]),
+        "page-bar-popover": withCtx(({ page }) => [
+          renderSlot(_ctx.$slots, "page-bar-popover", { page })
+        ]),
         _: 3
-      });
+      }, 8, ["disabled-page-fragment"]);
     };
   }
 });
@@ -10610,23 +10972,24 @@ const index = {
     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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$M as CodeBlockEditor, _sfc_main$n as CodeBlockList, _sfc_main$m as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$N as CodeSelect, _sfc_main$J as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$i as ContentMenu, _sfc_main$H as DataSourceFieldSelect, _sfc_main$I as DataSourceFields, _sfc_main$G as DataSourceInput, _sfc_main$E as DataSourceMethodSelect, _sfc_main$F as DataSourceMethods, _sfc_main$D as DataSourceMocks, _sfc_main$C as DataSourceSelect, DragType, _sfc_main$B as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$K as Icon, KeyBindingCommand, _sfc_main$z as KeyValue, Keys, LayerOffset, _sfc_main$e as LayerPanel, Layout, _sfc_main$w as LayoutContainer, _sfc_main$r as PropsPanel, _sfc_main$x as Resizer, _sfc_main$w as SplitView, _sfc_main$Q as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$t as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChilrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map