@tmagic/editor 1.3.6 → 1.3.8

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,
@@ -1133,6 +1133,22 @@ class DataSource extends BaseService {
     events: {},
     methods: {}
   });
+  constructor() {
+    super([
+      { name: "getFormConfig", isAsync: false },
+      { name: "setFormConfig", isAsync: false },
+      { name: "getFormValue", isAsync: false },
+      { name: "setFormValue", isAsync: false },
+      { name: "getFormEvent", isAsync: false },
+      { name: "setFormEvent", isAsync: false },
+      { name: "getFormMethod", isAsync: false },
+      { name: "setFormMethod", isAsync: false },
+      { name: "add", isAsync: false },
+      { name: "update", isAsync: false },
+      { name: "remove", isAsync: false },
+      { name: "createId", isAsync: false }
+    ]);
+  }
   set(name, value) {
     this.state[name] = value;
   }
@@ -1608,25 +1624,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 +1692,7 @@ const getInitPositionStyle = (style = {}, layout) => {
   }
   return style;
 };
-const setChilrenLayout = (node, layout) => {
+const setChildrenLayout = (node, layout) => {
   node.items?.forEach((child) => {
     setLayout(child, layout);
   });
@@ -1810,6 +1834,9 @@ class Dep extends BaseService {
   clear(nodes) {
     return this.watcher.clear(nodes);
   }
+  clearByType(type, nodes) {
+    return this.watcher.clearByType(type, nodes);
+  }
   hasTarget(id, type = DepTargetType.DEFAULT) {
     return this.watcher.hasTarget(id, type);
   }
@@ -1880,6 +1907,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 +2299,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 +2338,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 +2351,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 +2401,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 +2525,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 +2543,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 +2588,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 +2605,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 +2621,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 +2630,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 +2663,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 +2703,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 +2715,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);
@@ -2728,7 +2783,7 @@ class Editor extends BaseService {
    */
   copyWithRelated(config) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
     depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
     const customTarget = depService.getTarget(
       DepTargetType.RELATED_COMP_WHEN_COPY,
@@ -3109,8 +3164,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 +3203,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3198,8 +3253,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 +3278,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 +3356,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 +3431,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 +3440,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 +3455,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 +3468,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 +3705,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 +3762,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 +3817,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 +4010,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 +4027,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 +4045,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 +4128,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 +4200,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 +4219,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 +4234,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 +4319,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 +4343,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 +4356,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 +4445,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 +4554,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 +4590,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceSelect"
   },
@@ -4592,12 +4647,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 +4855,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 +4865,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 +4915,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 +4998,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 +5013,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 +5048,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 +5064,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 +5072,81 @@ 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.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+            label: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+            value: item.id
+          }));
+        }
+        return [];
+      }
+    };
+    const changeHandler = async () => {
+      emit("change", props.model[props.name]);
+    };
+    const editPageFragment = (id) => {
+      services?.editorService.select(id);
+    };
+    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"]),
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+            key: 0,
+            class: "icon",
+            icon: unref(Edit),
+            onClick: _cache[0] || (_cache[0] = ($event) => editPageFragment(_ctx.model[_ctx.name]))
+          }, null, 8, ["icon"])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+
 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 +5322,7 @@ const useGetSo = (target, emit) => {
       isDraging.value = false;
     });
   });
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     getso?.unset();
     isDraging.value = false;
   });
@@ -5207,7 +5331,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -5229,7 +5353,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -5296,7 +5420,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         resizerObserver.observe(el.value);
       }
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       resizerObserver.disconnect();
     });
     const center = ref(0);
@@ -5356,7 +5480,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 +5489,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 +5502,751 @@ 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: "ToolButton",
+  props: {
+    data: { default: () => ({
+      type: "text",
+      display: false
+    }) },
+    eventType: { default: "click" }
   },
-  __name: "AddPageBox",
   setup(__props) {
+    const props = __props;
     const services = inject("services");
-    const clickHandler = () => {
-      const { editorService } = services || {};
-      if (!editorService)
+    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 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 buttonHandler = (item, event) => {
+      if (disabled.value)
         return;
-      const root = toRaw(editorService.get("root"));
-      if (!root)
-        throw new Error("root 不能为空");
-      editorService.add({
-        type: NodeType.PAGE,
-        name: generatePageNameByApp(root)
-      });
+      if (typeof item.handler === "function" && services) {
+        item.handler?.(services, event);
+      }
     };
-    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 dropdownHandler = (command) => {
+      if (command.item.handler) {
+        command.item.handler(services);
+      }
     };
-  }
-});
-
-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: "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
-    });
-    watch(
-      [pageLength, splitView],
-      () => {
-        splitView.value?.updateWidth();
-      },
-      {
-        immediate: true
+    const clickHandler = (item, event) => {
+      if (props.eventType !== "click")
+        return;
+      if (item.type === "button") {
+        buttonHandler(item, event);
       }
-    );
-    watch(
-      () => columnWidth.value.right,
-      (right) => {
-        if (typeof right === "undefined")
-          return;
-        globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+    };
+    const mousedownHandler = (item, event) => {
+      if (props.eventType !== "mousedown")
+        return;
+      if (item.type === "button") {
+        buttonHandler(item, event);
       }
-    );
-    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 saveCode = (value) => {
-      try {
-        const parseDSL = getConfig("parseDSL");
-        editorService?.set("root", parseDSL(value));
-      } catch (e) {
-        console.error(e);
+    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")
-        return;
-      if (item.type === "button") {
-        buttonHandler(item, event);
+  }
+});
+
+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);
     };
-    const mousedownHandler = (item, event) => {
-      if (props.eventType !== "mousedown")
+    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 mouseupHandler = (item, event) => {
-      if (props.eventType !== "mouseup")
+    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 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))
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
+            renderSlot(_ctx.$slots, "page-bar", {}, () => [
+              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                "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
+              }, 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 +6408,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 +6420,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"
   },
@@ -5899,7 +6429,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   props: {
     extendState: { type: Function }
   },
-  emits: ["mounted"],
+  emits: ["mounted", "submit-error", "form-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const internalInstance = getCurrentInstance();
@@ -5925,7 +6455,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       emit("mounted", internalInstance);
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       services?.propsService.off("props-configs-change", init);
     });
     watchEffect(() => {
@@ -5938,14 +6468,15 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         const values2 = await configForm.value?.submitForm();
         services?.editorService.update(values2);
       } catch (e) {
-        console.error(e);
-        tMagicMessage.closeAll();
-        tMagicMessage.error(e.message);
+        emit("submit-error", e);
       }
     };
+    const errorHandler = (e) => {
+      emit("form-error", e);
+    };
     __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",
@@ -5956,7 +6487,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           "init-values": values.value,
           config: curFormConfig.value,
           "extend-state": _ctx.extendState,
-          onChange: submit
+          onChange: submit,
+          onError: errorHandler
         }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"])
       ], 512)), [
         [vShow, nodes.value.length === 1]
@@ -6096,7 +6628,7 @@ const useFloatBox = (slideKeys) => {
   };
 };
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -6147,14 +6679,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 +6712,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 +6753,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 +6764,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 +6775,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 +6796,18 @@ 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,
+  class: "m-editor-tree-empty"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
   },
@@ -6296,7 +6831,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 +6848,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 +6928,7 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -6475,7 +7010,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 +7032,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 +7047,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 +7066,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 +7089,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 +7106,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 +7124,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 +7138,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -6659,7 +7194,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -6748,7 +7283,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 +7305,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 +7320,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 +7336,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 +7402,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 +7420,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 +7438,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 +7459,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -6965,7 +7500,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 +7561,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 +7590,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 +7625,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 +7633,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 +7642,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 +7663,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 +7730,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 +7791,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 +7826,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 +7836,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 +7855,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 +7873,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 +7917,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 +8187,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 +8212,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 +8225,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 +8237,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 +8312,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 +8361,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 +8382,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 +8391,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 +8406,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 +8488,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 +8496,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 +8517,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 +8525,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 +8544,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 +8557,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 +8578,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$d,
+          component: _sfc_main$b,
           slots: {}
         },
         layer: {
@@ -8042,9 +8587,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 +8598,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 +8611,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 +8654,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 +8666,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 +8802,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 +8950,7 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollBar"
   },
@@ -8443,7 +8989,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 +9038,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollViewer"
   },
@@ -8539,7 +9085,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         scrollHeight.value = data.scrollHeight;
       });
     });
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       scrollViewer.destroy();
     });
     watch(
@@ -8578,14 +9124,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 +9274,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 +9345,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 +9446,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 +9455,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 +9476,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 +9537,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 +9547,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 +9561,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 +9588,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 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 +9726,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 +9735,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 +9791,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 +9815,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 +9885,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 +9911,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 +9928,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 +9950,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 +9965,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 +9973,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 +9980,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 +10280,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 +10290,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 +10345,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 +10371,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 +10418,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 +10440,7 @@ class Keybinding extends BaseService {
           keycon[eventType](handler);
         }
       });
-      item.binded = true;
+      item.bound = true;
     }
   }
   getKeyconKeys(keybinding = "") {
@@ -10094,7 +10470,9 @@ const defaultEditorProps = {
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
-  renderType: RenderType.IFRAME
+  renderType: RenderType.IFRAME,
+  disabledMultiSelect: false,
+  disabledPageFragment: false
 };
 
 const initServiceState = (props, {
@@ -10117,6 +10495,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 +10604,7 @@ const initServiceState = (props, {
       immediate: true
     }
   );
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     editorService.resetState();
     historyService.resetState();
     propsService.resetState();
@@ -10401,7 +10788,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,9 +10841,13 @@ 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"],
+  emits: ["props-panel-mounted", "update:modelValue", "props-form-error", "props-submit-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -10475,8 +10866,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 +10884,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 +10908,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,33 +10944,32 @@ 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))
+              onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
+              onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
+              onSubmitError: _cache[2] || (_cache[2] = (e) => _ctx.$emit("props-submit-error", e))
             }, {
               "props-panel-header": withCtx(() => [
                 renderSlot(_ctx.$slots, "props-panel-header")
@@ -10594,8 +10987,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         footer: withCtx(() => [
           renderSlot(_ctx.$slots, "footer")
         ]),
+        "page-bar": withCtx(() => [
+          renderSlot(_ctx.$slots, "page-bar")
+        ]),
+        "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 +11012,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