@tmagic/editor 1.1.0-beta.9 → 1.1.2

package/dist/tmagic-editor.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createVNode, unref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, markRaw, renderList, normalizeProps, mergeProps, getCurrentInstance, Teleport, nextTick, toHandlers, createSlots, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createVNode, unref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, Teleport, nextTick, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { Delete, Close, Plus, Edit, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, ArrowDown, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { Delete, Close, Plus, Edit, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, cloneDeep, mergeWith, isEmpty, uniq } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
@@ -12,14 +12,7 @@ import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
 
-if (typeof global === "undefined") {
-  window.global = window;
-}
-if (typeof globalThis === "undefined") {
-  window.globalThis = window;
-}
-
-const _sfc_main$n = defineComponent({
+const _sfc_main$o = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
   emits: ["change"],
@@ -45,7 +38,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_magic_code_editor = resolveComponent("magic-code-editor");
   return openBlock(), createBlock(_component_magic_code_editor, {
     style: normalizeStyle(`height: ${_ctx.height}`),
@@ -54,9 +47,9 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     onSave: _ctx.save
   }, null, 8, ["style", "init-values", "language", "onSave"]);
 }
-const Code = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$g]]);
+const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$a]]);
 
-const _sfc_main$m = defineComponent({
+const _sfc_main$n = defineComponent({
   name: "m-fields-code-link",
   props: {
     config: {
@@ -112,7 +105,7 @@ const _sfc_main$m = defineComponent({
   }
 });
 
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_fields_link = resolveComponent("m-fields-link");
   return openBlock(), createBlock(_component_m_fields_link, {
     config: _ctx.formConfig,
@@ -121,10 +114,10 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["config", "model", "onChange"]);
 }
-const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$f]]);
+const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$9]]);
 
-const _hoisted_1$d = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "UISelect",
   props: {
     config: null,
@@ -189,7 +182,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$d
+            _hoisted_1$c
           ]),
           _: 1
         }, 8, ["icon"])
@@ -199,19 +192,21 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         onClick: startSelect,
         style: { "display": "flex" }
       }, [
-        createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+        unref(val) ? (openBlock(), createBlock(_component_el_tooltip, {
+          key: 0,
+          content: "\u6E05\u9664"
+        }, {
           default: withCtx(() => [
-            unref(val) ? (openBlock(), createBlock(_component_el_button, {
-              key: 0,
+            createVNode(_component_el_button, {
               style: { "padding": "0" },
               type: "danger",
               icon: unref(Close),
               text: "",
               onClick: withModifiers(deleteHandler, ["stop"])
-            }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+            }, null, 8, ["icon", "onClick"])
           ]),
           _: 1
-        }),
+        })) : createCommentVNode("", true),
         createVNode(_component_el_tooltip, {
           content: unref(val) ? unref(toName) + "_" + unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
         }, {
@@ -250,7 +245,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$k = defineComponent({
+const _sfc_main$l = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -358,14 +353,14 @@ const _sfc_main$k = defineComponent({
   }
 });
 
-const _hoisted_1$c = {
+const _hoisted_1$b = {
   ref: "codeEditor",
   class: "magic-code-editor"
 };
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$c, null, 512);
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$b, null, 512);
 }
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$e]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$8]]);
 
 let $TMAGIC_EDITOR = {};
 const setConfig = (option) => {
@@ -673,6 +668,9 @@ class WebStorage extends BaseService {
     }
     storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
   }
+  destroy() {
+    this.removeAllListeners();
+  }
   getValueAndProtocol(value) {
     let protocol2 = "";
     if (value === null) {
@@ -693,6 +691,12 @@ class WebStorage extends BaseService {
 }
 const storageService = new WebStorage();
 
+var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+  ColumnLayout2["LEFT"] = "left";
+  ColumnLayout2["CENTER"] = "center";
+  ColumnLayout2["RIGHT"] = "right";
+  return ColumnLayout2;
+})(ColumnLayout || {});
 var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
   LayerOffset2["TOP"] = "top";
   LayerOffset2["BOTTOM"] = "bottom";
@@ -877,6 +881,7 @@ class Props extends BaseService {
       "getPropsValue",
       "createId",
       "setNewItemId",
+      "fillConfig",
       "getDefaultPropsValue"
     ]);
   }
@@ -886,14 +891,17 @@ class Props extends BaseService {
     });
     this.emit("props-configs-change");
   }
-  setPropsConfig(type, config) {
-    this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+  async fillConfig(config) {
+    return fillConfig(config);
+  }
+  async setPropsConfig(type, config) {
+    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
   }
   async getPropsConfig(type) {
     if (type === "area") {
       return await this.getPropsConfig("button");
     }
-    return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+    return cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
   }
   setPropsValues(values) {
     Object.keys(values).forEach((type) => {
@@ -927,25 +935,14 @@ class Props extends BaseService {
       ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
     };
   }
-  guid(digit = 8) {
-    return "x".repeat(digit).replace(/[xy]/g, (c) => {
-      const r = Math.random() * 16 | 0;
-      const v = c == "x" ? r : r & 3 | 8;
-      return v.toString(16);
-    });
-  }
   async createId(type) {
     return `${type}_${this.guid()}`;
   }
-  async setNewItemId(config, parent) {
-    const oldId = config.id;
+  async setNewItemId(config) {
     config.id = await this.createId(config.type || "component");
-    if (isPop(config) && parent?.type === NodeType.PAGE) {
-      updatePopId(oldId, config.id, parent);
-    }
     if (config.items && Array.isArray(config.items)) {
       for (const item of config.items) {
-        await this.setNewItemId(item, config);
+        await this.setNewItemId(item);
       }
     }
     return config;
@@ -963,22 +960,19 @@ class Props extends BaseService {
       name: type
     };
   }
+  destroy() {
+    this.state.propsConfigMap = {};
+    this.state.propsValueMap = {};
+    this.removeAllListeners();
+  }
+  guid(digit = 8) {
+    return "x".repeat(digit).replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
 }
-const updatePopId = (oldId, popId, pageConfig) => {
-  pageConfig.items?.forEach((config) => {
-    if (config.pop === oldId) {
-      config.pop = popId;
-      return;
-    }
-    if (config.popId === oldId) {
-      config.popId = popId;
-      return;
-    }
-    if (Array.isArray(config.items)) {
-      updatePopId(oldId, popId, config);
-    }
-  });
-};
 const propsService = new Props();
 
 const beforePaste = async (position, config) => {
@@ -998,7 +992,7 @@ const beforePaste = async (position, config) => {
     if (pastePosition.top && configItem.style?.top) {
       pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
     }
-    const pasteConfig = await propsService.setNewItemId(configItem, editorService.get("root"));
+    const pasteConfig = await propsService.setNewItemId(configItem);
     if (pasteConfig.style) {
       const { left, top } = pasteConfig.style;
       if (typeof left === "number" || !!left && !isNaN(Number(left))) {
@@ -1030,10 +1024,10 @@ const getPositionInContainer = (position = {}, id) => {
     top
   };
 };
-const getAddParent = (addNode) => {
+const getAddParent = (node) => {
   const curNode = editorService.get("node");
   let parentNode;
-  if (!Array.isArray(addNode) && isPage(addNode)) {
+  if (isPage(node)) {
     parentNode = editorService.get("root");
   } else if (curNode.items) {
     parentNode = curNode;
@@ -1069,6 +1063,7 @@ class Editor$1 extends BaseService {
       "sort",
       "copy",
       "paste",
+      "doPaste",
       "duAlignCenter",
       "alignCenter",
       "moveLayer",
@@ -1205,20 +1200,27 @@ class Editor$1 extends BaseService {
     if ((parent?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
+    if (parent.id !== curNode.id) {
+      const index = parent.items.indexOf(curNode);
+      parent?.items?.splice(index + 1, 0, node);
+    } else {
+      parent?.items?.push(node);
+    }
     const layout = await this.getLayout(toRaw(parent), node);
     node.style = getInitPositionStyle(node.style, layout);
-    await stage?.add({ config: cloneDeep(node), parent: cloneDeep(parent), root: cloneDeep(root) });
+    await stage?.add({
+      config: cloneDeep(node),
+      parent: cloneDeep(parent),
+      parentId: parent.id,
+      root: cloneDeep(root)
+    });
     node.style = fixNodePosition(node, parent, stage);
-    await stage?.update({ config: cloneDeep(node), root: cloneDeep(root) });
-    parent?.items?.push(node);
+    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
     this.addModifiedNodeId(node.id);
     return node;
   }
   async add(addNode, parent) {
     const stage = this.get("stage");
-    const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(addNode);
-    if (!parentNode)
-      throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
     const addNodes = [];
     if (!Array.isArray(addNode)) {
       const { type, inputEvent, ...config } = addNode;
@@ -1228,7 +1230,12 @@ class Editor$1 extends BaseService {
     } else {
       addNodes.push(...addNode);
     }
-    const newNodes = await Promise.all(addNodes.map((node) => this.doAdd(node, parentNode)));
+    const newNodes = await Promise.all(addNodes.map((node) => {
+      const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
+      if (!parentNode)
+        throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
+      return this.doAdd(node, parentNode);
+    }));
     if (newNodes.length > 1) {
       const newNodeIds = newNodes.map((node) => node.id);
       stage?.multiSelect(newNodeIds);
@@ -1243,7 +1250,7 @@ class Editor$1 extends BaseService {
     }
     this.pushHistoryState();
     this.emit("add", newNodes);
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
   async doRemove(node) {
     const root = this.get("root");
@@ -1257,14 +1264,14 @@ class Editor$1 extends BaseService {
       throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
     parent.items?.splice(index, 1);
     const stage = this.get("stage");
-    stage?.remove({ id: node.id, root: this.get("root") });
+    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);
       } else {
-        this.set("node", null);
+        this.set("nodes", [root]);
         this.set("parent", null);
         this.set("page", null);
         this.set("stage", null);
@@ -1283,7 +1290,7 @@ class Editor$1 extends BaseService {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
     await Promise.all(nodes.map((node) => this.doRemove(node)));
     this.pushHistoryState();
-    this.emit("remove");
+    this.emit("remove", nodes);
   }
   async doUpdate(config) {
     if (!config?.id)
@@ -1321,7 +1328,11 @@ class Editor$1 extends BaseService {
     const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
     this.set("nodes", nodes);
-    this.get("stage")?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get("root")) });
+    this.get("stage")?.update({
+      config: cloneDeep(newConfig),
+      parentId: parent.id,
+      root: cloneDeep(this.get("root"))
+    });
     if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
     }
@@ -1333,7 +1344,7 @@ class Editor$1 extends BaseService {
     const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
     this.pushHistoryState();
     this.emit("update", newNodes);
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(config) ? newNodes : newNodes[0];
   }
   async sort(id1, id2) {
     const node = this.get("node");
@@ -1345,7 +1356,11 @@ class Editor$1 extends BaseService {
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
     await this.update(parent);
     await this.select(node);
-    this.get("stage")?.update({ config: cloneDeep(node), root: cloneDeep(this.get("root")) });
+    this.get("stage")?.update({
+      config: cloneDeep(node),
+      parentId: parent.id,
+      root: cloneDeep(this.get("root"))
+    });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
@@ -1358,9 +1373,13 @@ class Editor$1 extends BaseService {
     const config = await storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config))
       return;
-    const pasteConfigs = await beforePaste(position, config);
+    const pasteConfigs = await this.doPaste(config, position);
     return this.add(pasteConfigs);
   }
+  async doPaste(config, position = {}) {
+    const pasteConfigs = await beforePaste(position, cloneDeep(config));
+    return pasteConfigs;
+  }
   async doAlignCenter(config) {
     const parent = this.getParentById(config.id);
     if (!parent)
@@ -1405,10 +1424,14 @@ class Editor$1 extends BaseService {
     } else {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
+    const grandparent = this.getParentById(parent.id);
     this.get("stage")?.update({
       config: cloneDeep(toRaw(parent)),
+      parentId: grandparent?.id,
       root: cloneDeep(this.get("root"))
     });
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
   }
   async moveToContainer(config, targetId) {
     const { node, parent } = this.getNodeInfo(config.id, false);
@@ -1418,7 +1441,7 @@ class Editor$1 extends BaseService {
       const root = cloneDeep(this.get("root"));
       const index = getNodeIndex(node, parent);
       parent.items?.splice(index, 1);
-      await stage.remove({ id: node.id, root });
+      await stage.remove({ id: node.id, parentId: parent.id, root });
       const layout = await this.getLayout(target);
       const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
@@ -1428,7 +1451,8 @@ class Editor$1 extends BaseService {
       newConfig.style = getInitPositionStyle(newConfig.style, layout);
       target.items.push(newConfig);
       await stage.select(targetId);
-      await stage.update({ config: cloneDeep(target), root });
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root });
       await this.select(newConfig);
       stage.select(newConfig.id);
       this.addModifiedNodeId(target.id);
@@ -1475,6 +1499,10 @@ class Editor$1 extends BaseService {
     this.set("nodes", []);
     this.set("page", null);
     this.set("parent", null);
+    this.set("stage", null);
+    this.set("highlightNode", null);
+    this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
+    this.set("pageLength", /* @__PURE__ */ new Map());
   }
   resetModifiedNodeId() {
     this.get("modifiedNodeIds").clear();
@@ -1544,8 +1572,8 @@ class Editor$1 extends BaseService {
 }
 const editorService = new Editor$1();
 
-const eventMap = reactive({});
-const methodMap = reactive({});
+let eventMap = reactive({});
+let methodMap = reactive({});
 class Events extends BaseService {
   constructor() {
     super([]);
@@ -1585,6 +1613,11 @@ class Events extends BaseService {
   getMethod(type) {
     return cloneDeep(methodMap[type] || DEFAULT_METHODS);
   }
+  destroy() {
+    eventMap = reactive({});
+    methodMap = reactive({});
+    this.removeAllListeners();
+  }
 }
 const eventsService = new Events();
 
@@ -1791,7 +1824,6 @@ const fillConfig = (config = []) => [
     ]
   }
 ];
-const DEFAULT_CONFIG = fillConfig([]);
 
 const log = (...args) => {
   if (process.env.NODE_ENV === "development") {
@@ -1819,7 +1851,195 @@ const error = (...args) => {
   }
 };
 
-const _sfc_main$j = defineComponent({
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const MIN_LEFT_COLUMN_WIDTH = 45;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+const MIN_RIGHT_COLUMN_WIDTH = 1;
+const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
+const defaultColumnWidth = {
+  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
+  right: DEFAULT_RIGHT_COLUMN_WIDTH
+};
+const state = reactive({
+  uiSelectMode: false,
+  showSrc: false,
+  zoom: 1,
+  stageContainerRect: {
+    width: 0,
+    height: 0
+  },
+  stageRect: {
+    width: 375,
+    height: 817
+  },
+  columnWidth: defaultColumnWidth,
+  showGuides: true,
+  showRule: true,
+  propsPanelSize: "small",
+  showAddPageButton: true
+});
+class Ui extends BaseService {
+  constructor() {
+    super([]);
+    globalThis.addEventListener("resize", () => {
+      this.setColumnWidth({
+        center: "auto"
+      });
+    });
+  }
+  set(name, value) {
+    const mask = editorService.get("stage")?.mask;
+    if (name === "columnWidth") {
+      this.setColumnWidth(value);
+      return;
+    }
+    if (name === "stageRect") {
+      this.setStageRect(value);
+      return;
+    }
+    if (name === "showGuides") {
+      mask?.showGuides(value);
+    }
+    if (name === "showRule") {
+      mask?.showRule(value);
+    }
+    state[name] = value;
+  }
+  get(name) {
+    return state[name];
+  }
+  initColumnWidth() {
+    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+    if (columnWidthCacheData) {
+      try {
+        const columnWidthCache = JSON.parse(columnWidthCacheData);
+        this.setColumnWidth(columnWidthCache);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+  zoom(zoom) {
+    this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
+    if (this.get("zoom") < 0.1)
+      this.set("zoom", 0.1);
+  }
+  calcZoom() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height)
+      return 1;
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+    if (width > stageWidth && height > stageHeight) {
+      return 1;
+    }
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+  }
+  destroy() {
+    this.removeAllListeners();
+  }
+  setColumnWidth({ left, center, right }) {
+    const columnWidth = {
+      ...toRaw(this.get("columnWidth"))
+    };
+    if (left) {
+      columnWidth.left = Math.max(left, MIN_LEFT_COLUMN_WIDTH);
+    }
+    if (right) {
+      columnWidth.right = Math.max(right, MIN_RIGHT_COLUMN_WIDTH);
+    }
+    if (!center || center === "auto") {
+      const bodyWidth = globalThis.document.body.clientWidth;
+      columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+      if (columnWidth.center <= 0) {
+        columnWidth.left = defaultColumnWidth.left;
+        columnWidth.center = defaultColumnWidth.center;
+        columnWidth.right = defaultColumnWidth.right;
+      }
+    } else {
+      columnWidth.center = center;
+    }
+    globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
+    state.columnWidth = columnWidth;
+  }
+  setStageRect(value) {
+    state.stageRect = {
+      ...state.stageRect,
+      ...value
+    };
+    state.zoom = this.calcZoom();
+  }
+}
+const uiService = new Ui();
+
+const root = computed(() => editorService.get("root"));
+const page = computed(() => editorService.get("page"));
+const zoom = computed(() => uiService.get("zoom") || 1);
+const uiSelectMode = computed(() => uiService.get("uiSelectMode"));
+const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
+const useStage = (stageOptions) => {
+  const stage = new StageCore({
+    render: stageOptions.render,
+    runtimeUrl: stageOptions.runtimeUrl,
+    zoom: zoom.value,
+    autoScrollIntoView: stageOptions.autoScrollIntoView,
+    isContainer: stageOptions.isContainer,
+    containerHighlightClassName: stageOptions.containerHighlightClassName,
+    containerHighlightDuration: stageOptions.containerHighlightDuration,
+    containerHighlightType: stageOptions.containerHighlightType,
+    canSelect: (el, event, stop) => {
+      const elCanSelect = stageOptions.canSelect(el);
+      if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
+        document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
+        return stop();
+      }
+      return elCanSelect;
+    },
+    moveableOptions: stageOptions.moveableOptions,
+    updateDragEl: stageOptions.updateDragEl
+  });
+  stage.mask.setGuides([
+    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
+  ]);
+  stage.on("select", (el) => {
+    editorService.select(el.id);
+  });
+  stage.on("highlight", (el) => {
+    editorService.highlight(el.id);
+  });
+  stage.on("multiSelect", (els) => {
+    editorService.multiSelect(els.map((el) => el.id));
+  });
+  stage.on("update", (ev) => {
+    if (ev.parentEl) {
+      for (const data of ev.data) {
+        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+      }
+      return;
+    }
+    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+  });
+  stage.on("sort", (ev) => {
+    editorService.sort(ev.src, ev.dist);
+  });
+  stage.on("changeGuides", (e) => {
+    uiService.set("showGuides", true);
+    if (!root.value || !page.value)
+      return;
+    const storageKey = getGuideLineKey(e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
+    if (e.guides.length) {
+      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+    } else {
+      globalThis.localStorage.removeItem(storageKey);
+    }
+  });
+  return stage;
+};
+
+const _sfc_main$k = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -1837,13 +2057,13 @@ const _sfc_main$j = defineComponent({
   }
 });
 
-const _hoisted_1$b = { class: "m-editor-empty-panel" };
+const _hoisted_1$a = { class: "m-editor-empty-panel" };
 const _hoisted_2$4 = { class: "m-editor-empty-content" };
-const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$b, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     createElementVNode("div", _hoisted_2$4, [
       createElementVNode("div", {
         class: "m-editor-empty-button",
@@ -1857,14 +2077,14 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
           })
         ]),
-        _hoisted_3$1
+        _hoisted_3
       ])
     ])
   ]);
 }
-const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
+const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$7]]);
 
-const _sfc_main$i = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "m-editor-resize",
   props: {
     type: {
@@ -1907,18 +2127,18 @@ const _sfc_main$i = defineComponent({
   }
 });
 
-const _hoisted_1$a = {
+const _hoisted_1$9 = {
   ref: "target",
   class: "m-editor-resizer"
 };
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$a, [
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$9, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
-const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$c]]);
+const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$6]]);
 
-const _sfc_main$h = defineComponent({
+const _sfc_main$i = defineComponent({
   components: {
     AddPageBox,
     Resizer
@@ -1948,17 +2168,17 @@ const _sfc_main$h = defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "m-editor" };
+const _hoisted_1$8 = { class: "m-editor" };
 const _hoisted_2$3 = {
   key: 1,
   class: "m-editor-content"
 };
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_magic_code_editor = resolveComponent("magic-code-editor");
   const _component_resizer = resolveComponent("resizer");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   const _component_add_page_box = resolveComponent("add-page-box");
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
     _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
       key: 0,
@@ -1999,211 +2219,121 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$b]]);
+const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$5]]);
 
-const _sfc_main$g = defineComponent({
-  name: "m-icon",
-  components: { Edit },
+const _hoisted_1$7 = ["src"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "Icon",
   props: {
-    icon: {
-      type: [String, Object]
-    }
+    icon: null
   },
-  setup() {
-    return {
-      toRaw
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      return !__props.icon ? (openBlock(), createBlock(_component_el_icon, {
+        key: 0,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Edit))
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, {
+        key: 1,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$7)
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
+        key: 2,
+        class: normalizeClass(["magic-editor-icon", __props.icon])
+      }, null, 2)) : (openBlock(), createBlock(_component_el_icon, {
+        key: 3,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
+        ]),
+        _: 1
+      }));
     };
   }
 });
 
-const _hoisted_1$8 = ["src"];
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_edit = resolveComponent("edit");
-  const _component_el_icon = resolveComponent("el-icon");
-  return !_ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
-    default: withCtx(() => [
-      createVNode(_component_edit)
-    ]),
-    _: 1
-  })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, { key: 1 }, {
-    default: withCtx(() => [
-      createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$8)
-    ]),
-    _: 1
-  })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
-    key: 2,
-    class: normalizeClass(_ctx.icon)
-  }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
-    default: withCtx(() => [
-      (openBlock(), createBlock(resolveDynamicComponent(_ctx.toRaw(_ctx.icon))))
-    ]),
-    _: 1
-  }));
-}
-const MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$a]]);
-
-const _hoisted_1$7 = {
+const _hoisted_1$6 = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$2 = {
-  class: "menu-item-text",
-  style: { "margin": "0 5px" }
-};
-const _hoisted_3 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_2$2 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ToolButton",
   props: {
-    data: {
-      type: [Object, String],
-      require: true,
-      default: () => ({
-        type: "text",
-        display: false
-      })
-    },
-    eventType: {
-      type: String,
-      default: "click"
-    }
+    data: { default: () => ({
+      type: "text",
+      display: false
+    }) },
+    eventType: { default: "click" }
   },
   setup(__props) {
     const props = __props;
     const services = inject("services");
-    const uiService = services?.uiService;
-    const zoom = computed(() => uiService?.get("zoom") ?? 1);
-    const showGuides = computed(() => uiService?.get("showGuides") ?? true);
-    const showRule = computed(() => uiService?.get("showRule") ?? true);
-    const zoomInHandler = () => uiService?.zoom(0.1);
-    const zoomOutHandler = () => uiService?.zoom(-0.1);
-    const item = computed(() => {
-      if (typeof props.data !== "string") {
-        return props.data;
-      }
-      switch (props.data) {
-        case "/":
-          return {
-            type: "divider"
-          };
-        case "zoom":
-          return {
-            type: "zoom"
-          };
-        case "delete":
-          return {
-            type: "button",
-            icon: markRaw(Delete),
-            tooltip: "\u522A\u9664",
-            disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
-            handler: () => services?.editorService.remove(services?.editorService.get("node"))
-          };
-        case "undo":
-          return {
-            type: "button",
-            icon: markRaw(Back),
-            tooltip: "\u540E\u9000",
-            disabled: () => !services?.historyService.state.canUndo,
-            handler: () => services?.editorService.undo()
-          };
-        case "redo":
-          return {
-            type: "button",
-            icon: markRaw(Right),
-            tooltip: "\u524D\u8FDB",
-            disabled: () => !services?.historyService.state.canRedo,
-            handler: () => services?.editorService.redo()
-          };
-        case "zoom-in":
-          return {
-            type: "button",
-            icon: markRaw(ZoomIn),
-            tooltip: "\u653E\u5927",
-            handler: zoomInHandler
-          };
-        case "zoom-out":
-          return {
-            type: "button",
-            icon: markRaw(ZoomOut),
-            tooltip: "\u7E2E\u5C0F",
-            handler: zoomOutHandler
-          };
-        case "rule":
-          return {
-            type: "button",
-            icon: markRaw(ScaleToOriginal),
-            tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
-            handler: () => uiService?.set("showRule", !showRule.value)
-          };
-        case "guides":
-          return {
-            type: "button",
-            icon: markRaw(Grid),
-            tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
-            handler: () => uiService?.set("showGuides", !showGuides.value)
-          };
-        default:
-          return {
-            type: "text",
-            text: props.data
-          };
+    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 disabled = computed(() => {
-      if (typeof item.value === "string")
-        return false;
-      if (item.value.type === "component")
+    const display = computed(() => {
+      if (!props.data)
         return false;
-      if (typeof item.value.disabled === "function") {
-        return item.value.disabled(services);
+      if (typeof props.data === "string")
+        return true;
+      if (typeof props.data.display === "function") {
+        return props.data.display(services);
       }
-      return item.value.disabled;
+      return props.data.display ?? true;
     });
-    const buttonHandler = (item2, event) => {
+    const buttonHandler = (item, event) => {
       if (disabled.value)
         return;
-      if (typeof item2.handler === "function" && services) {
-        item2.handler?.(services, event);
+      if (typeof item.handler === "function" && services) {
+        item.handler?.(services, event);
       }
     };
-    const display = computed(() => {
-      if (!item.value)
-        return false;
-      if (typeof item.value === "string")
-        return true;
-      if (typeof item.value.display === "function") {
-        return item.value.display(services);
-      }
-      return item.value.display ?? true;
-    });
     const dropdownHandler = (command) => {
       if (command.item.handler) {
         command.item.handler(services);
       }
     };
-    const clickHandler = (item2, event) => {
+    const clickHandler = (item, event) => {
       if (props.eventType !== "click")
         return;
-      if (item2.type === "button") {
-        buttonHandler(item2, event);
+      if (item.type === "button") {
+        buttonHandler(item, event);
       }
     };
-    const mousedownHandler = (item2, event) => {
+    const mousedownHandler = (item, event) => {
       if (props.eventType !== "mousedown")
         return;
-      if (item2.type === "button") {
-        buttonHandler(item2, event);
+      if (item.type === "button") {
+        buttonHandler(item, event);
       }
     };
-    const mouseupHandler = (item2, event) => {
+    const mouseupHandler = (item, event) => {
       if (props.eventType !== "mouseup")
         return;
-      if (item2.type === "button") {
-        buttonHandler(item2, event);
+      if (item.type === "button") {
+        buttonHandler(item, event);
       }
     };
     return (_ctx, _cache) => {
       const _component_el_divider = resolveComponent("el-divider");
-      const _component_tool_button = resolveComponent("tool-button", true);
       const _component_el_button = resolveComponent("el-button");
       const _component_el_tooltip = resolveComponent("el-tooltip");
       const _component_el_icon = resolveComponent("el-icon");
@@ -2212,30 +2342,20 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       const _component_el_dropdown = resolveComponent("el-dropdown");
       return unref(display) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["menu-item", unref(item).type]),
-        onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(item), $event)),
-        onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(unref(item), $event)),
-        onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(unref(item), $event))
+        class: normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
+        onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(__props.data, $event)),
+        onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
+        onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(__props.data, $event))
       }, [
-        unref(item).type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
+        __props.data.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
           key: 0,
-          direction: unref(item).direction || "vertical"
-        }, null, 8, ["direction"])) : unref(item).type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$7, toDisplayString(unref(item).text), 1)) : unref(item).type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          createVNode(_component_tool_button, {
-            data: { type: "button", icon: unref(ZoomOut), handler: zoomOutHandler, tooltip: "\u7F29\u5C0F" },
-            "event-type": __props.eventType
-          }, null, 8, ["data", "event-type"]),
-          createElementVNode("span", _hoisted_2$2, toDisplayString(parseInt(`${unref(zoom) * 100}`, 10)) + "%", 1),
-          createVNode(_component_tool_button, {
-            data: { type: "button", icon: unref(ZoomIn), handler: zoomInHandler, tooltip: "\u653E\u5927" },
-            "event-type": __props.eventType
-          }, null, 8, ["data", "event-type"])
-        ], 64)) : unref(item).type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-          unref(item).tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
+          direction: __props.data.direction || "vertical"
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$6, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          __props.data.tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
             key: 0,
             effect: "dark",
             placement: "bottom-start",
-            content: unref(item).tooltip
+            content: __props.data.tooltip
           }, {
             default: withCtx(() => [
               createVNode(_component_el_button, {
@@ -2244,11 +2364,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  unref(item).icon ? (openBlock(), createBlock(MIcon, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$h, {
                     key: 0,
-                    icon: unref(item).icon
+                    icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  createElementVNode("span", null, toDisplayString(unref(item).text), 1)
+                  createElementVNode("span", null, toDisplayString(__props.data.text), 1)
                 ]),
                 _: 1
               }, 8, ["disabled"])
@@ -2261,27 +2381,27 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              unref(item).icon ? (openBlock(), createBlock(MIcon, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$h, {
                 key: 0,
-                icon: unref(item).icon
+                icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              createElementVNode("span", null, toDisplayString(unref(item).text), 1)
+              createElementVNode("span", null, toDisplayString(__props.data.text), 1)
             ]),
             _: 1
           }, 8, ["disabled"]))
-        ], 64)) : unref(item).type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
-          key: 4,
+        ], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
+          key: 3,
           trigger: "click",
           disabled: unref(disabled),
           onCommand: dropdownHandler
         }, {
           dropdown: withCtx(() => [
-            unref(item).items && unref(item).items.length ? (openBlock(), createBlock(_component_el_dropdown_menu, { key: 0 }, {
+            __props.data.items && __props.data.items.length ? (openBlock(), createBlock(_component_el_dropdown_menu, { key: 0 }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(item).items, (subItem, index) => {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (subItem, index) => {
                   return openBlock(), createBlock(_component_el_dropdown_item, {
                     key: index,
-                    command: { item: unref(item), subItem }
+                    command: { data: __props.data, subItem }
                   }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(subItem.text), 1)
@@ -2294,8 +2414,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_3, [
-              createTextVNode(toDisplayString(unref(item).text), 1),
+            createElementVNode("span", _hoisted_2$2, [
+              createTextVNode(toDisplayString(__props.data.text), 1),
               createVNode(_component_el_icon, { class: "el-icon--right" }, {
                 default: withCtx(() => [
                   createVNode(unref(ArrowDown))
@@ -2305,67 +2425,187 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        }, 8, ["disabled"])) : unref(item).type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(unref(item).component), normalizeProps(mergeProps({ key: 5 }, unref(item).props || {})), null, 16)) : createCommentVNode("", true)
+        }, 8, ["disabled"])) : __props.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(__props.data.component), normalizeProps(mergeProps({ key: 4 }, __props.data.props || {})), null, 16)) : createCommentVNode("", true)
       ], 34)) : createCommentVNode("", true);
     };
   }
 });
 
-const _sfc_main$e = defineComponent({
-  name: "nav-menu",
-  components: { ToolButton: _sfc_main$f },
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "NavMenu",
   props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    height: {
-      type: Number
-    }
+    data: { default: () => ({}) },
+    height: { default: 35 }
   },
-  setup(props) {
+  setup(__props) {
+    const props = __props;
     const services = inject("services");
-    return {
-      keys: computed(() => Object.keys(props.data)),
-      columnWidth: computed(() => services?.uiService.get("columnWidth"))
+    const uiService = services?.uiService;
+    const columnWidth = computed(() => services?.uiService.get("columnWidth"));
+    const keys = Object.values(ColumnLayout);
+    const showGuides = computed(() => uiService?.get("showGuides") ?? true);
+    const showRule = computed(() => uiService?.get("showRule") ?? true);
+    const zoom = computed(() => uiService?.get("zoom") ?? 1);
+    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+    const ctrl = isMac ? "Command" : "Ctrl";
+    const getConfig = (item) => {
+      if (typeof item !== "string") {
+        return [item];
+      }
+      const config = [];
+      switch (item) {
+        case "/":
+          config.push({
+            type: "divider",
+            className: "divider"
+          });
+          break;
+        case "zoom":
+          config.push(...getConfig("zoom-out"), ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`), ...getConfig("zoom-in"), ...getConfig("scale-to-original"), ...getConfig("scale-to-fit"));
+          break;
+        case "delete":
+          config.push({
+            type: "button",
+            className: "delete",
+            icon: markRaw(Delete),
+            tooltip: `\u522A\u9664(Delete)`,
+            disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
+            handler: () => services?.editorService.remove(services?.editorService.get("node"))
+          });
+          break;
+        case "undo":
+          config.push({
+            type: "button",
+            className: "undo",
+            icon: markRaw(Back),
+            tooltip: `\u540E\u9000(${ctrl}+z)`,
+            disabled: () => !services?.historyService.state.canUndo,
+            handler: () => services?.editorService.undo()
+          });
+          break;
+        case "redo":
+          config.push({
+            type: "button",
+            className: "redo",
+            icon: markRaw(Right),
+            tooltip: `\u524D\u8FDB(${ctrl}+Shift+z)`,
+            disabled: () => !services?.historyService.state.canRedo,
+            handler: () => services?.editorService.redo()
+          });
+          break;
+        case "zoom-in":
+          config.push({
+            type: "button",
+            className: "zoom-in",
+            icon: markRaw(ZoomIn),
+            tooltip: `\u653E\u5927(${ctrl}+=)`,
+            handler: () => uiService?.zoom(0.1)
+          });
+          break;
+        case "zoom-out":
+          config.push({
+            type: "button",
+            className: "zoom-out",
+            icon: markRaw(ZoomOut),
+            tooltip: `\u7E2E\u5C0F(${ctrl}+-)`,
+            handler: () => uiService?.zoom(-0.1)
+          });
+          break;
+        case "scale-to-original":
+          config.push({
+            type: "button",
+            className: "scale-to-original",
+            icon: markRaw(ScaleToOriginal),
+            tooltip: `\u7F29\u653E\u5230\u5B9E\u9645\u5927\u5C0F(${ctrl}+1)`,
+            handler: () => uiService?.set("zoom", 1)
+          });
+          break;
+        case "scale-to-fit":
+          config.push({
+            type: "button",
+            className: "scale-to-fit",
+            icon: markRaw(FullScreen),
+            tooltip: `\u7F29\u653E\u4EE5\u9002\u5E94(${ctrl}+0)`,
+            handler: () => uiService?.set("zoom", uiService.calcZoom())
+          });
+          break;
+        case "rule":
+          config.push({
+            type: "button",
+            className: "rule",
+            icon: markRaw(Memo),
+            tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
+            handler: () => uiService?.set("showRule", !showRule.value)
+          });
+          break;
+        case "guides":
+          config.push({
+            type: "button",
+            className: "guides",
+            icon: markRaw(Grid),
+            tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
+            handler: () => uiService?.set("showGuides", !showGuides.value)
+          });
+          break;
+        default:
+          config.push({
+            type: "text",
+            text: item
+          });
+      }
+      return config;
     };
-  }
-});
-
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_tool_button = resolveComponent("tool-button");
-  return openBlock(), createElementBlock("div", {
-    class: "m-editor-nav-menu",
-    style: normalizeStyle({ height: `${_ctx.height}px` })
-  }, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.keys, (key) => {
+    const buttons = computed(() => {
+      const data = {
+        [ColumnLayout.LEFT]: [],
+        [ColumnLayout.CENTER]: [],
+        [ColumnLayout.RIGHT]: []
+      };
+      keys.forEach((key) => {
+        const items = props.data[key] || [];
+        items.forEach((item) => {
+          data[key].push(...getConfig(item));
+        });
+      });
+      return data;
+    });
+    return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(`menu-${key}`),
-        key,
-        style: normalizeStyle(`width: ${_ctx.columnWidth?.[key]}px`)
+        class: "m-editor-nav-menu",
+        style: normalizeStyle({ height: `${__props.height}px` })
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data[key], (item, index) => {
-          return openBlock(), createBlock(_component_tool_button, {
-            data: item,
-            key: index
-          }, null, 8, ["data"]);
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (key) => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(`menu-${key}`),
+            key,
+            style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
+              return openBlock(), createBlock(_sfc_main$g, {
+                data: item,
+                key: index
+              }, null, 8, ["data"]);
+            }), 128))
+          ], 6);
         }), 128))
-      ], 6);
-    }), 128))
-  ], 4);
-}
-const NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
+      ], 4);
+    };
+  }
+});
 
-const _sfc_main$d = defineComponent({
-  name: "m-editor-props-panel",
+const _hoisted_1$5 = { class: "`m-editor-props-panel" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "PropsPanel",
   emits: ["mounted"],
-  setup(props, { emit }) {
+  setup(__props, { expose, emit }) {
     const internalInstance = getCurrentInstance();
     const values = ref({});
     const configForm = ref();
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
+    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
+    const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
       if (!node.value) {
         curFormConfig.value = [];
@@ -2380,52 +2620,51 @@ const _sfc_main$d = defineComponent({
     onMounted(() => {
       emit("mounted", internalInstance);
     });
-    return {
-      values,
-      configForm,
-      curFormConfig,
-      propsPanelSize: computed(() => services?.uiService.get("propsPanelSize") || "small"),
-      async submit() {
-        try {
-          const values2 = await configForm.value?.submitForm();
-          services?.editorService.update(values2);
-        } catch (e) {
-          console.error(e);
-          ElMessage.closeAll();
-          ElMessage.error({
-            duration: 1e4,
-            showClose: true,
-            message: e.message,
-            dangerouslyUseHTMLString: true
-          });
-        }
+    watchEffect(() => {
+      if (configForm.value && stage.value) {
+        configForm.value.formState.stage = stage.value;
+      }
+    });
+    const submit = async () => {
+      try {
+        const values2 = await configForm.value?.submitForm();
+        services?.editorService.update(values2);
+      } catch (e) {
+        console.error(e);
+        ElMessage.closeAll();
+        ElMessage.error({
+          duration: 1e4,
+          showClose: true,
+          message: e.message,
+          dangerouslyUseHTMLString: true
+        });
       }
     };
+    expose({ submit });
+    return (_ctx, _cache) => {
+      const _component_m_form = resolveComponent("m-form");
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        renderSlot(_ctx.$slots, "props-panel-header"),
+        createVNode(_component_m_form, {
+          ref_key: "configForm",
+          ref: configForm,
+          class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
+          "popper-class": `m-editor-props-panel-popper ${unref(propsPanelSize)}`,
+          size: unref(propsPanelSize),
+          "init-values": values.value,
+          config: curFormConfig.value,
+          onChange: submit
+        }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
+      ]);
+    };
   }
 });
 
-const _hoisted_1$6 = { class: "`m-editor-props-panel" };
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_m_form = resolveComponent("m-form");
-  return openBlock(), createElementBlock("div", _hoisted_1$6, [
-    renderSlot(_ctx.$slots, "props-panel-header"),
-    createVNode(_component_m_form, {
-      class: normalizeClass(`m-editor-props-panel ${_ctx.propsPanelSize}`),
-      "popper-class": `m-editor-props-panel-popper ${_ctx.propsPanelSize}`,
-      ref: "configForm",
-      size: _ctx.propsPanelSize,
-      "init-values": _ctx.values,
-      config: _ctx.curFormConfig,
-      onChange: _ctx.submit
-    }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"])
-  ]);
-}
-const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
-
-const _sfc_main$c = defineComponent({
-  name: "ui-component-panel",
-  components: { MIcon },
-  setup() {
+const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+const _hoisted_2$1 = ["onClick", "onDragstart"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "ComponentListPanel",
+  setup(__props) {
     const searchText = ref("");
     const services = inject("services");
     const stageOptions = inject("stageOptions");
@@ -2438,134 +2677,126 @@ const _sfc_main$c = defineComponent({
     let timeout;
     let clientX;
     let clientY;
-    return {
-      searchText,
-      collapseValue,
-      list,
-      appendComponent({ text, type, data = {} }) {
-        services?.editorService.add({
+    const appendComponent = ({ text, type, data = {} }) => {
+      services?.editorService.add({
+        name: text,
+        type,
+        ...data
+      });
+    };
+    const dragstartHandler = ({ text, type, data = {} }, e) => {
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("data", serialize({
           name: text,
           type,
           ...data
-        });
-      },
-      dragstartHandler({ text, type, data = {} }, e) {
-        if (e.dataTransfer) {
-          e.dataTransfer.effectAllowed = "move";
-          e.dataTransfer.setData("data", serialize({
-            name: text,
-            type,
-            ...data
-          }).replace(/"(\w+)":\s/g, "$1: "));
-        }
-      },
-      dragendHandler() {
+        }).replace(/"(\w+)":\s/g, "$1: "));
+      }
+    };
+    const dragendHandler = () => {
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+        timeout = void 0;
+      }
+      const doc = stage.value?.renderer.contentWindow?.document;
+      if (doc && stageOptions) {
+        removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+      }
+      clientX = 0;
+      clientY = 0;
+    };
+    const dragHandler = (e) => {
+      if (e.clientX !== clientX || e.clientY !== clientY) {
+        clientX = e.clientX;
+        clientY = e.clientY;
         if (timeout) {
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        const doc = stage.value?.renderer.contentWindow?.document;
-        if (doc && stageOptions) {
-          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-        }
-        clientX = 0;
-        clientY = 0;
-      },
-      dragHandler(e) {
-        if (e.clientX !== clientX || e.clientY !== clientY) {
-          clientX = e.clientX;
-          clientY = e.clientY;
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-            timeout = void 0;
-          }
-          return;
-        }
-        if (timeout || !stage.value)
-          return;
-        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+        return;
       }
+      if (timeout || !stage.value)
+        return;
+      timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
     };
-  }
-});
-
-const _hoisted_1$5 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-const _hoisted_2$1 = ["onClick", "onDragstart"];
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_input = resolveComponent("el-input");
-  const _component_m_icon = resolveComponent("m-icon");
-  const _component_el_tooltip = resolveComponent("el-tooltip");
-  const _component_el_collapse_item = resolveComponent("el-collapse-item");
-  const _component_el_collapse = resolveComponent("el-collapse");
-  const _component_el_scrollbar = resolveComponent("el-scrollbar");
-  return openBlock(), createBlock(_component_el_scrollbar, null, {
-    default: withCtx(() => [
-      renderSlot(_ctx.$slots, "component-list-panel-header"),
-      createVNode(_component_el_collapse, {
-        class: "ui-component-panel",
-        "model-value": _ctx.collapseValue
-      }, {
+    return (_ctx, _cache) => {
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_collapse_item = resolveComponent("el-collapse-item");
+      const _component_el_collapse = resolveComponent("el-collapse");
+      const _component_el_scrollbar = resolveComponent("el-scrollbar");
+      return openBlock(), createBlock(_component_el_scrollbar, null, {
         default: withCtx(() => [
-          createVNode(_component_el_input, {
-            "prefix-icon": "el-icon-search",
-            placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
-            class: "search-input",
-            size: "small",
-            clearable: "",
-            modelValue: _ctx.searchText,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.searchText = $event)
-          }, null, 8, ["modelValue"]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (group, index) => {
-            return openBlock(), createElementBlock(Fragment, null, [
-              group.items && group.items.length ? (openBlock(), createBlock(_component_el_collapse_item, {
-                key: index,
-                name: index
-              }, {
-                title: withCtx(() => [
-                  _hoisted_1$5,
-                  createTextVNode(toDisplayString(group.title), 1)
-                ]),
-                default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
-                    return openBlock(), createElementBlock("div", {
-                      class: "component-item",
-                      draggable: "true",
-                      key: item.type,
-                      onClick: ($event) => _ctx.appendComponent(item),
-                      onDragstart: ($event) => _ctx.dragstartHandler(item, $event),
-                      onDragend: _cache[1] || (_cache[1] = (...args) => _ctx.dragendHandler && _ctx.dragendHandler(...args)),
-                      onDrag: _cache[2] || (_cache[2] = (...args) => _ctx.dragHandler && _ctx.dragHandler(...args))
-                    }, [
-                      createVNode(_component_m_icon, {
-                        icon: item.icon
-                      }, null, 8, ["icon"]),
-                      createVNode(_component_el_tooltip, {
-                        effect: "dark",
-                        placement: "bottom",
-                        content: item.text
-                      }, {
-                        default: withCtx(() => [
-                          createElementVNode("span", null, toDisplayString(item.text), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["content"])
-                    ], 40, _hoisted_2$1);
-                  }), 128))
-                ]),
-                _: 2
-              }, 1032, ["name"])) : createCommentVNode("", true)
-            ], 64);
-          }), 256))
+          renderSlot(_ctx.$slots, "component-list-panel-header"),
+          createVNode(_component_el_collapse, {
+            class: "ui-component-panel",
+            "model-value": unref(collapseValue)
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_input, {
+                "prefix-icon": "el-icon-search",
+                placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+                class: "search-input",
+                size: "small",
+                clearable: "",
+                modelValue: searchText.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
+              }, null, 8, ["modelValue"]),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  group.items && group.items.length ? (openBlock(), createBlock(_component_el_collapse_item, {
+                    key: index,
+                    name: index
+                  }, {
+                    title: withCtx(() => [
+                      _hoisted_1$4,
+                      createTextVNode(toDisplayString(group.title), 1)
+                    ]),
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+                        return openBlock(), createElementBlock("div", {
+                          class: "component-item",
+                          draggable: "true",
+                          key: item.type,
+                          onClick: ($event) => appendComponent(item),
+                          onDragstart: ($event) => dragstartHandler(item, $event),
+                          onDragend: dragendHandler,
+                          onDrag: dragHandler
+                        }, [
+                          renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
+                            createVNode(_sfc_main$h, {
+                              icon: item.icon
+                            }, null, 8, ["icon"]),
+                            createVNode(_component_el_tooltip, {
+                              effect: "dark",
+                              placement: "bottom",
+                              content: item.text
+                            }, {
+                              default: withCtx(() => [
+                                createElementVNode("span", null, toDisplayString(item.text), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"])
+                          ])
+                        ], 40, _hoisted_2$1);
+                      }), 128))
+                    ]),
+                    _: 2
+                  }, 1032, ["name"])) : createCommentVNode("", true)
+                ], 64);
+              }), 256))
+            ]),
+            _: 3
+          }, 8, ["model-value"])
         ]),
-        _: 1
-      }, 8, ["model-value"])
-    ]),
-    _: 3
-  });
-}
-const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
+        _: 3
+      });
+    };
+  }
+});
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "ContentMenu",
   props: {
     menuData: { default: () => [] },
@@ -2654,7 +2885,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$f, {
+            return openBlock(), createBlock(_sfc_main$g, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -2678,8 +2909,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$a = defineComponent({
-  components: { ContentMenu: _sfc_main$b },
+const _sfc_main$b = defineComponent({
+  components: { ContentMenu: _sfc_main$c },
   setup() {
     const services = inject("services");
     const menu = ref();
@@ -2762,7 +2993,7 @@ const _sfc_main$a = defineComponent({
   }
 });
 
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_content_menu = resolveComponent("content-menu");
   return openBlock(), createBlock(_component_content_menu, {
     "menu-data": _ctx.menuData,
@@ -2770,7 +3001,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     style: { "overflow": "initial" }
   }, null, 8, ["menu-data"]);
 }
-const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$6]]);
+const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$4]]);
 
 const throttleTime = 150;
 const select = async (data, editorService) => {
@@ -2821,20 +3052,38 @@ const useDrop = (tree, editorService) => ({
   }
 });
 const useStatus = (tree, editorService) => {
-  const highlightNode = ref();
   const node = ref();
   const page = computed(() => editorService?.get("page"));
+  const expandedKeys = /* @__PURE__ */ new Map();
+  const expandNodes = () => {
+    expandedKeys.forEach((key) => {
+      if (!tree.value)
+        return;
+      tree.value.getNode(key)?.expand();
+    });
+  };
   watchEffect(() => {
     if (!tree.value)
       return;
-    node.value = editorService?.get("node");
-    node.value && tree.value.setCurrentKey(node.value.id, true);
-    const parent = editorService?.get("parent");
+    if (!editorService)
+      return;
+    node.value = editorService.get("node");
+    if (!node.value)
+      return;
+    tree.value.setCurrentKey(node.value.id, true);
+    const parent = editorService.get("parent");
     if (!parent?.id)
       return;
     const treeNode = tree.value.getNode(parent.id);
     treeNode?.updateChildren();
-    highlightNode.value = editorService?.get("highlightNode");
+    setTimeout(() => {
+      tree.value && Object.entries(tree.value.store.nodesMap).forEach(([id, node2]) => {
+        if (node2.expanded && node2.data.items) {
+          expandedKeys.set(id, id);
+        }
+      });
+      expandNodes();
+    });
   });
   return {
     values: computed(() => page.value ? [page.value] : []),
@@ -2847,9 +3096,18 @@ const useStatus = (tree, editorService) => {
       }
       resolve([]);
     },
-    highlightNode,
+    highlightNode: computed(() => editorService?.get("highlightNode")),
     clickNode: node,
-    expandedKeys: computed(() => node.value ? [node.value.id] : [])
+    expandedKeys: computed(() => node.value ? [node.value.id] : []),
+    handleCollapse: (data) => {
+      expandedKeys.delete(data.id);
+    },
+    handleExpand: (data) => {
+      const parent = editorService?.getParentById(data.id);
+      if (!parent?.id)
+        return;
+      expandedKeys.set(parent.id, parent.id);
+    }
   };
 };
 const useFilter = (tree) => ({
@@ -2870,7 +3128,7 @@ const useFilter = (tree) => ({
     tree.value?.filter(val);
   }
 });
-const _sfc_main$9 = defineComponent({
+const _sfc_main$a = defineComponent({
   name: "magic-editor-layer-panel",
   components: { LayerMenu },
   setup() {
@@ -2918,8 +3176,8 @@ const _sfc_main$9 = defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["id", "onMouseenter"];
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$3 = ["id", "onMouseenter"];
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
   const _component_layer_menu = resolveComponent("layer-menu");
@@ -2940,6 +3198,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         ref: "tree",
         "node-key": "id",
+        "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
         draggable: "",
         "default-expanded-keys": _ctx.expandedKeys,
         load: _ctx.loadItems,
@@ -2954,7 +3213,8 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         onNodeClick: _ctx.clickHandler,
         onNodeContextmenu: _ctx.contextmenu,
         onNodeDragEnd: _ctx.handleDragEnd,
-        "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684"
+        onNodeCollapse: _ctx.handleCollapse,
+        onNodeExpand: _ctx.handleExpand
       }, {
         default: withCtx(({ node, data }) => [
           createElementVNode("div", {
@@ -2970,10 +3230,10 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
             }, () => [
               createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
             ])
-          ], 42, _hoisted_1$4)
+          ], 42, _hoisted_1$3)
         ]),
         _: 3
-      }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : createCommentVNode("", true),
+      }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd", "onNodeCollapse", "onNodeExpand"])) : createCommentVNode("", true),
       (openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(_component_layer_menu, { ref: "menu" }, null, 512)
       ]))
@@ -2981,10 +3241,10 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$5]]);
+const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$3]]);
 
-const _sfc_main$8 = defineComponent({
-  components: { MIcon },
+const _sfc_main$9 = defineComponent({
+  components: { MIcon: _sfc_main$h },
   props: {
     data: {
       type: [Object, String]
@@ -3002,7 +3262,7 @@ const _sfc_main$8 = defineComponent({
               type: "component",
               icon: Coin,
               text: "\u7EC4\u4EF6",
-              component: ComponentListPanel,
+              component: _sfc_main$d,
               slots: {}
             };
           case "layer":
@@ -3021,11 +3281,11 @@ const _sfc_main$8 = defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_tab_pane = resolveComponent("el-tab-pane");
   return _ctx.config ? (openBlock(), createBlock(_component_el_tab_pane, {
@@ -3040,7 +3300,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
           key: 0,
           icon: _ctx.config.icon
         }, null, 8, ["icon"])) : createCommentVNode("", true),
-        _ctx.config.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(_ctx.config.text), 1)) : createCommentVNode("", true)
+        _ctx.config.text ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(_ctx.config.text), 1)) : createCommentVNode("", true)
       ]))
     ]),
     default: withCtx(() => [
@@ -3051,6 +3311,18 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
             _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
           ])
         } : void 0,
+        _ctx.data === "component-list" || _ctx.config.slots?.componentListItem ? {
+          name: "component-list-item",
+          fn: withCtx(({ component }) => [
+            _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+              key: 0,
+              component
+            }) : _ctx.config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListItem), {
+              key: 1,
+              component
+            }, null, 8, ["component"])) : createCommentVNode("", true)
+          ])
+        } : void 0,
         _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
           name: "layer-panel-header",
           fn: withCtx(() => [
@@ -3071,9 +3343,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["name"])) : createCommentVNode("", true);
 }
-const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$4]]);
+const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
 
-const _sfc_main$7 = defineComponent({
+const _sfc_main$8 = defineComponent({
   components: { TabPane },
   name: "m-sidebar",
   props: {
@@ -3093,7 +3365,7 @@ const _sfc_main$7 = defineComponent({
   }
 });
 
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tab_pane = resolveComponent("tab-pane");
   const _component_el_tabs = resolveComponent("el-tabs");
   return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createBlock(_component_el_tabs, {
@@ -3121,6 +3393,12 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
             fn: withCtx(() => [
               renderSlot(_ctx.$slots, "component-list-panel-header")
             ])
+          } : void 0,
+          item === "component-list" ? {
+            name: "component-list-item",
+            fn: withCtx(({ component }) => [
+              renderSlot(_ctx.$slots, "component-list-item", { component })
+            ])
           } : void 0
         ]), 1032, ["data"]);
       }), 128))
@@ -3128,18 +3406,24 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"])) : createCommentVNode("", true);
 }
-const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$3]]);
+const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = {
+  key: 1,
+  style: { "width": "21px" }
+};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "PageBarScrollContainer",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
+    const uiService = services?.uiService;
     const pageBar = ref();
     const itemsContainer = ref();
     const pageBarWidth = ref(0);
     const canScroll = ref(false);
-    const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
+    const itemsContainerWidth = computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
     let translateLeft = 0;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
@@ -3150,7 +3434,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     });
     const setCanScroll = () => {
       if (itemsContainer.value) {
-        canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+        canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
       }
     };
     const scroll = (type) => {
@@ -3207,7 +3491,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         ref_key: "pageBar",
         ref: pageBar
       }, [
-        createElementVNode("div", {
+        unref(showAddPageButton) ? (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
@@ -3218,9 +3503,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })
-        ]),
+        ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
+          key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
@@ -3232,7 +3517,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           })
         ])) : createCommentVNode("", true),
         unref(root) ? (openBlock(), createElementBlock("div", {
-          key: 1,
+          key: 3,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
           ref: itemsContainer,
@@ -3241,7 +3526,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ], 4)) : createCommentVNode("", true),
         canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 2,
+          key: 4,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
@@ -3257,9 +3542,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = ["onClick"];
+const _hoisted_1 = ["onClick"];
 const _hoisted_2 = { class: "m-editor-page-bar-title" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "PageBar",
   setup(__props) {
     const services = inject("services");
@@ -3283,7 +3568,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       const _component_el_tooltip = resolveComponent("el-tooltip");
       const _component_el_icon = resolveComponent("el-icon");
       const _component_el_popover = resolveComponent("el-popover");
-      return openBlock(), createBlock(_sfc_main$6, null, {
+      return openBlock(), createBlock(_sfc_main$7, null, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root) && unref(root).items || [], (item) => {
             return openBlock(), createElementBlock("div", {
@@ -3299,7 +3584,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                     content: item.name
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("span", null, toDisplayString(item.name), 1)
+                      createElementVNode("span", null, toDisplayString(item.name || item.id), 1)
                     ]),
                     _: 2
                   }, 1032, ["content"])
@@ -3322,7 +3607,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$f, {
+                      createVNode(_sfc_main$g, {
                         data: {
                           type: "button",
                           text: "\u590D\u5236",
@@ -3330,7 +3615,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$f, {
+                      createVNode(_sfc_main$g, {
                         data: {
                           type: "button",
                           text: "\u5220\u9664",
@@ -3343,7 +3628,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 2
               }, 1024)
-            ], 10, _hoisted_1$2);
+            ], 10, _hoisted_1);
           }), 128))
         ]),
         _: 3
@@ -3352,190 +3637,245 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-class ScrollViewer$1 {
-  enter = false;
-  targetEnter = false;
-  keydown = false;
+class ScrollViewer extends EventEmitter {
   container;
   target;
   zoom = 1;
   scrollLeft = 0;
   scrollTop = 0;
-  x = 0;
-  y = 0;
-  resizeObserver = new ResizeObserver((entries) => {
-    for (const { contentRect } of entries) {
-      const { width, height } = contentRect;
-      const targetRect = this.target.getBoundingClientRect();
-      const targetWidth = targetRect.width * this.zoom;
-      const targetMarginTop = Number(this.target.style.marginTop) || 0;
-      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
-      if (targetWidth < width) {
-        this.target._left = 0;
-      }
-      if (targetHeight < height) {
-        this.target._top = 0;
-      }
-      this.scroll();
-    }
+  scrollHeight = 0;
+  scrollWidth = 0;
+  width = 0;
+  height = 0;
+  translateXCorrectionValue = 0;
+  translateYCorrectionValue = 0;
+  resizeObserver = new ResizeObserver(() => {
+    this.setSize();
+    this.setScrollSize();
   });
   constructor(options) {
+    super();
     this.container = options.container;
     this.target = options.target;
     this.zoom = options.zoom;
-    globalThis.addEventListener("keydown", this.keydownHandler);
-    globalThis.addEventListener("keyup", this.keyupHandler);
-    this.container.addEventListener("mouseenter", this.mouseEnterHandler);
-    this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
-    this.target.addEventListener("mouseenter", this.targetMouseEnterHandler);
-    this.target.addEventListener("mouseleave", this.targetMouseLeaveHandler);
-    this.container.addEventListener("wheel", this.wheelHandler);
+    this.container.addEventListener("wheel", this.wheelHandler, false);
+    this.setSize();
+    this.setScrollSize();
     this.resizeObserver.observe(this.container);
   }
   destroy() {
     this.resizeObserver.disconnect();
-    this.container.removeEventListener("mouseenter", this.mouseEnterHandler);
-    this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
-    this.target.removeEventListener("mouseenter", this.targetMouseEnterHandler);
-    this.target.removeEventListener("mouseleave", this.targetMouseLeaveHandler);
-    globalThis.removeEventListener("keydown", this.keydownHandler);
-    globalThis.removeEventListener("keyup", this.keyupHandler);
+    this.container.removeEventListener("wheel", this.wheelHandler, false);
+    this.removeAllListeners();
   }
   setZoom(zoom) {
     this.zoom = zoom;
+    this.setScrollSize();
   }
-  scroll() {
-    const scrollLeft = this.target._left;
-    const scrollTop = this.target._top;
-    this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
-  }
-  removeHandler() {
-    this.target.style.cursor = "";
-    this.target.removeEventListener("mousedown", this.mousedownHandler);
-    document.removeEventListener("mousemove", this.mousemoveHandler);
-    document.removeEventListener("mouseup", this.mouseupHandler);
+  scrollTo({ left, top }) {
+    if (typeof left !== "undefined") {
+      this.scrollLeft = left;
+    }
+    if (typeof top !== "undefined") {
+      this.scrollTop = top;
+    }
+    const translateX = -this.scrollLeft + this.translateXCorrectionValue;
+    const translateY = -this.scrollTop + this.translateYCorrectionValue;
+    this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
   }
   wheelHandler = (event) => {
-    if (this.targetEnter)
-      return;
     const { deltaX, deltaY, currentTarget } = event;
     if (currentTarget !== this.container)
       return;
-    this.setScrollOffset(deltaX, deltaY);
-    this.scroll();
-    this.scrollLeft = this.target._left;
-    this.scrollTop = this.target._top;
-  };
-  mouseEnterHandler = () => {
-    this.enter = true;
-  };
-  mouseLeaveHandler = () => {
-    this.enter = false;
-  };
-  targetMouseEnterHandler = () => {
-    this.targetEnter = true;
-  };
-  targetMouseLeaveHandler = () => {
-    this.targetEnter = false;
-  };
-  mousedownHandler = (event) => {
-    if (!this.keydown)
-      return;
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    this.target.style.cursor = "grabbing";
-    this.x = event.clientX;
-    this.y = event.clientY;
-    document.addEventListener("mousemove", this.mousemoveHandler);
-    document.addEventListener("mouseup", this.mouseupHandler);
-  };
-  mouseupHandler = () => {
-    this.x = 0;
-    this.y = 0;
-    this.scrollLeft = this.target._left;
-    this.scrollTop = this.target._top;
-    this.removeHandler();
-  };
-  mousemoveHandler = (event) => {
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    const deltaX = event.clientX - this.x;
-    const deltaY = event.clientY - this.y;
-    this.setScrollOffset(deltaX, deltaY);
-    this.scroll();
-  };
-  keydownHandler = (event) => {
-    if (event.code === Keys.ESCAPE && this.enter) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
+    let top;
+    if (this.scrollHeight > this.height) {
+      top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
     }
-    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-      return;
+    let left;
+    if (this.scrollWidth > this.width) {
+      left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
     }
-    this.keydown = true;
-    this.target.style.cursor = "grab";
-    this.container.addEventListener("mousedown", this.mousedownHandler);
+    this.scrollTo({ left, top });
+    this.emit("scroll", {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth
+    });
   };
-  keyupHandler = (event) => {
-    if (event.code !== Keys.ESCAPE || !this.keydown) {
-      return;
+  getPos(delta, scrollPos, scrollSize, size) {
+    let pos = 0;
+    if (delta < 0) {
+      if (scrollPos > 0) {
+        pos = Math.max(delta, -scrollPos);
+      }
+    } else {
+      const leftPos = scrollSize - size - scrollPos;
+      if (leftPos > 0) {
+        pos = Math.min(delta, leftPos);
+      }
+    }
+    return pos;
+  }
+  setScrollSize = () => {
+    const targetRect = this.target.getBoundingClientRect();
+    this.scrollWidth = targetRect.width * this.zoom + 100;
+    const targetMarginTop = Number(this.target.style.marginTop) || 0;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+    let left;
+    let top;
+    if (this.scrollWidth < this.width) {
+      left = 0;
+      this.translateXCorrectionValue = 0;
+    } else {
+      this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
+    }
+    if (this.scrollHeight < this.height) {
+      top = 0;
+      this.translateYCorrectionValue = 0;
+    } else {
+      this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
     }
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    this.keydown = false;
-    event.preventDefault();
-    this.removeHandler();
+    this.scrollTo({
+      left,
+      top
+    });
+    this.emit("scroll", {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth
+    });
   };
-  setScrollOffset(deltaX, deltaY) {
+  setSize = () => {
     const { width, height } = this.container.getBoundingClientRect();
-    const targetRect = this.target.getBoundingClientRect();
-    const targetWidth = targetRect.width * this.zoom;
-    const targetHeight = targetRect.height * this.zoom;
-    let y = 0;
-    if (targetHeight > height) {
-      if (deltaY > 0) {
-        y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
-      } else {
-        y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
+    this.width = width;
+    this.height = height;
+  };
+}
+
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "ScrollBar",
+  props: {
+    size: null,
+    scrollSize: null,
+    isHorizontal: { type: Boolean },
+    pos: null
+  },
+  emits: ["scroll"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const bar = ref();
+    const thumb = ref();
+    const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
+    const thumbPos = computed(() => props.pos / props.scrollSize * props.size);
+    const thumbStyle = computed(() => ({
+      [props.isHorizontal ? "width" : "height"]: `${thumbSize.value}px`,
+      transform: `translate${props.isHorizontal ? "X" : "Y"}(${thumbPos.value}px)`
+    }));
+    let gesto;
+    onMounted(() => {
+      if (!thumb.value)
+        return;
+      const thumbEl = thumb.value;
+      gesto = new Gesto(thumbEl, {
+        container: window
+      });
+      gesto.on("dragStart", (e) => {
+        e.inputEvent.stopPropagation();
+        e.inputEvent.preventDefault();
+      }).on("drag", (e) => {
+        scrollBy(getDelta(e));
+      });
+      bar.value?.addEventListener("wheel", wheelHandler, false);
+    });
+    onUnmounted(() => {
+      if (gesto)
+        gesto.off();
+      bar.value?.removeEventListener("wheel", wheelHandler, false);
+    });
+    const wheelHandler = (e) => {
+      const delta = props.isHorizontal ? e.deltaX : e.deltaY;
+      if (delta) {
+        e.preventDefault();
       }
-    }
-    let x = 0;
-    if (targetWidth > width) {
-      if (deltaX > 0) {
-        x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
+      scrollBy(delta);
+    };
+    const getDelta = (e) => {
+      const ratio = (props.isHorizontal ? e.deltaX : e.deltaY) / props.size;
+      return props.scrollSize * ratio;
+    };
+    const scrollBy = (delta) => {
+      if (delta < 0) {
+        if (props.pos <= 0) {
+          emit("scroll", 0);
+        } else {
+          emit("scroll", -Math.min(-delta, props.pos));
+        }
       } else {
-        x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
+        const leftPos = props.size - (thumbSize.value + thumbPos.value);
+        if (leftPos <= 0) {
+          emit("scroll", 0);
+        } else {
+          emit("scroll", Math.min(delta, leftPos));
+        }
       }
-    }
-    this.target._left = x;
-    this.target._top = y;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "bar",
+        ref: bar,
+        class: normalizeClass(["m-editor-scroll-bar", __props.isHorizontal ? "horizontal" : "vertical"])
+      }, [
+        createElementVNode("div", {
+          ref_key: "thumb",
+          ref: thumb,
+          class: "m-editor-scroll-bar-thumb",
+          style: normalizeStyle(unref(thumbStyle))
+        }, null, 4)
+      ], 2);
+    };
   }
-}
+});
 
-const _sfc_main$4 = defineComponent({
-  name: "m-editor-scroll-viewer",
+const ScrollBar_vue_vue_type_style_index_0_lang = '';
+
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ScrollViewer",
   props: {
-    width: Number,
-    height: Number,
-    zoom: {
-      type: Number,
-      default: 1
-    }
+    width: { default: 0 },
+    height: { default: 0 },
+    wrapWidth: { default: 0 },
+    wrapHeight: { default: 0 },
+    zoom: { default: 1 }
   },
-  setup(props) {
+  setup(__props, { expose }) {
+    const props = __props;
     const container = ref();
     const el = ref();
+    const style = computed(() => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+        margin-top: 30px;
+      `);
+    const scrollWidth = ref(0);
+    const scrollHeight = ref(0);
     let scrollViewer;
     onMounted(() => {
       if (!container.value || !el.value)
         return;
-      scrollViewer = new ScrollViewer$1({
+      scrollViewer = new ScrollViewer({
         container: container.value,
         target: el.value,
         zoom: props.zoom
       });
+      scrollViewer.on("scroll", (data) => {
+        hOffset.value = data.scrollLeft;
+        vOffset.value = data.scrollTop;
+        scrollWidth.value = data.scrollWidth;
+        scrollHeight.value = data.scrollHeight;
+      });
     });
     onUnmounted(() => {
       scrollViewer.destroy();
@@ -3543,35 +3883,56 @@ const _sfc_main$4 = defineComponent({
     watch(() => props.zoom, () => {
       scrollViewer.setZoom(props.zoom);
     });
-    return {
-      container,
-      el,
-      style: computed(() => `
-        width: ${props.width}px;
-        height: ${props.height}px;
-        position: absolute;
-        margin-top: 30px;
-      `)
+    const vOffset = ref(0);
+    const vScrollHandler = (delta) => {
+      vOffset.value += delta;
+      scrollViewer.scrollTo({
+        top: vOffset.value
+      });
+    };
+    const hOffset = ref(0);
+    const hScrollHandler = (delta) => {
+      hOffset.value += delta;
+      scrollViewer.scrollTo({
+        left: hOffset.value
+      });
+    };
+    expose({
+      container
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-scroll-viewer-container",
+        ref_key: "container",
+        ref: container
+      }, [
+        createElementVNode("div", {
+          ref_key: "el",
+          ref: el,
+          style: normalizeStyle(unref(style))
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4),
+        scrollHeight.value > __props.wrapHeight ? (openBlock(), createBlock(_sfc_main$5, {
+          key: 0,
+          "scroll-size": scrollHeight.value,
+          size: __props.wrapHeight,
+          pos: vOffset.value,
+          onScroll: vScrollHandler
+        }, null, 8, ["scroll-size", "size", "pos"])) : createCommentVNode("", true),
+        scrollWidth.value > __props.wrapWidth ? (openBlock(), createBlock(_sfc_main$5, {
+          key: 1,
+          "is-horizontal": true,
+          "scroll-size": scrollWidth.value,
+          pos: hOffset.value,
+          size: __props.wrapWidth,
+          onScroll: hScrollHandler
+        }, null, 8, ["scroll-size", "pos", "size"])) : createCommentVNode("", true)
+      ], 512);
     };
   }
 });
 
-const _hoisted_1$1 = {
-  class: "m-editor-scroll-viewer-container",
-  ref: "container"
-};
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
-    createElementVNode("div", {
-      ref: "el",
-      style: normalizeStyle(_ctx.style)
-    }, [
-      renderSlot(_ctx.$slots, "default")
-    ], 4)
-  ], 512);
-}
-const ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
-
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "ViewerMenu",
   props: {
@@ -3708,7 +4069,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         "menu-data": menuData,
         ref_key: "menu",
         ref: menu
@@ -3729,12 +4090,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const menu = ref();
     const isMultiSelect = computed(() => services?.editorService.get("nodes")?.length > 1);
     const stageRect = computed(() => services?.uiService.get("stageRect"));
-    const uiSelectMode = computed(() => services?.uiService.get("uiSelectMode"));
+    const stageContainerRect = computed(() => services?.uiService.get("stageContainerRect"));
     const root = computed(() => services?.editorService.get("root"));
     const page = computed(() => services?.editorService.get("page"));
     const zoom = computed(() => services?.uiService.get("zoom") || 1);
     const node = computed(() => services?.editorService.get("node"));
-    const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
     watchEffect(() => {
       if (stage)
         return;
@@ -3742,64 +4102,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         return;
       if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
         return;
-      stage = new StageCore({
-        render: stageOptions.render,
-        runtimeUrl: stageOptions.runtimeUrl,
-        zoom: zoom.value,
-        autoScrollIntoView: stageOptions.autoScrollIntoView,
-        isContainer: stageOptions.isContainer,
-        containerHighlightClassName: stageOptions.containerHighlightClassName,
-        containerHighlightDuration: stageOptions.containerHighlightDuration,
-        containerHighlightType: stageOptions.containerHighlightType,
-        canSelect: (el, event, stop) => {
-          const elCanSelect = stageOptions.canSelect(el);
-          if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
-            document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
-            return stop();
-          }
-          return elCanSelect;
-        },
-        moveableOptions: stageOptions.moveableOptions,
-        updateDragEl: stageOptions.updateDragEl
-      });
+      stage = useStage(stageOptions);
       services?.editorService.set("stage", markRaw(stage));
       stage?.mount(stageContainer.value);
-      stage.mask.setGuides([
-        getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-        getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
-      ]);
-      stage?.on("select", (el) => {
-        services?.editorService.select(el.id);
-      });
-      stage?.on("highlight", (el) => {
-        services?.editorService.highlight(el.id);
-      });
-      stage?.on("multiSelect", (els) => {
-        services?.editorService.multiSelect(els.map((el) => el.id));
-      });
-      stage?.on("update", (ev) => {
-        if (ev.parentEl) {
-          for (const data of ev.data) {
-            services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
-          }
-          return;
-        }
-        services?.editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
-      });
-      stage?.on("sort", (ev) => {
-        services?.editorService.sort(ev.src, ev.dist);
-      });
-      stage?.on("changeGuides", (e2) => {
-        services?.uiService.set("showGuides", true);
-        if (!root.value || !page.value)
-          return;
-        const storageKey = getGuideLineKey(e2.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
-        if (e2.guides.length) {
-          globalThis.localStorage.setItem(storageKey, JSON.stringify(e2.guides));
-        } else {
-          globalThis.localStorage.removeItem(storageKey);
-        }
-      });
       if (!node.value?.id)
         return;
       stage?.on("runtime-ready", (rt) => {
@@ -3877,20 +4182,22 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         config.style = {
           ...style,
           position,
-          top,
-          left
+          top: top / zoom.value,
+          left: left / zoom.value
         };
         config.inputEvent = e;
         services?.editorService.add(config, parent);
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(ScrollViewer, {
+      return openBlock(), createBlock(_sfc_main$4, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
         width: unref(stageRect)?.width,
         height: unref(stageRect)?.height,
+        "wrap-width": unref(stageContainerRect)?.width,
+        "wrap-height": unref(stageContainerRect)?.height,
         zoom: unref(zoom)
       }, {
         default: withCtx(() => [
@@ -3898,7 +4205,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             class: "m-editor-stage-container",
             ref_key: "stageContainer",
             ref: stageContainer,
-            style: normalizeStyle(`transform: scale(${unref(zoom)})`),
+            style: normalizeStyle(`transform: scale(${unref(zoom)});`),
             onContextmenu: contextmenuHandler,
             onDrop: dropHandler,
             onDragover: dragoverHandler
@@ -3912,28 +4219,25 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ]))
         ]),
         _: 1
-      }, 8, ["width", "height", "zoom"]);
+      }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"]);
     };
   }
 });
 
-const _sfc_main$1 = defineComponent({
-  name: "m-editor-workspace",
-  components: {
-    PageBar: _sfc_main$5,
-    MagicStage: _sfc_main$2
-  },
-  setup() {
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Workspace",
+  setup(__props) {
     const services = inject("services");
     const workspace = ref();
     const nodes = computed(() => services?.editorService.get("nodes"));
-    let keycon;
+    const page = computed(() => services?.editorService.get("page"));
     const mouseenterHandler = () => {
       workspace.value?.focus();
     };
     const mouseleaveHandler = () => {
       workspace.value?.blur();
     };
+    let keycon;
     onMounted(() => {
       workspace.value?.addEventListener("mouseenter", mouseenterHandler);
       workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
@@ -4010,6 +4314,12 @@ const _sfc_main$1 = defineComponent({
       }).keydown([ctrl, "numpad-"], (e) => {
         e.inputEvent.preventDefault();
         services?.uiService.zoom(-0.1);
+      }).keydown([ctrl, "0"], (e) => {
+        e.inputEvent.preventDefault();
+        services?.uiService.set("zoom", services.uiService.calcZoom());
+      }).keydown([ctrl, "1"], (e) => {
+        e.inputEvent.preventDefault();
+        services?.uiService.set("zoom", 1);
       });
     });
     onUnmounted(() => {
@@ -4017,39 +4327,33 @@ const _sfc_main$1 = defineComponent({
       workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
       keycon.destroy();
     });
-    return {
-      workspace,
-      page: computed(() => services?.editorService.get("page"))
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-workspace",
+        tabindex: "1",
+        ref_key: "workspace",
+        ref: workspace
+      }, [
+        renderSlot(_ctx.$slots, "stage", {}, () => [
+          (openBlock(), createBlock(_sfc_main$2, {
+            key: unref(page)?.id
+          }))
+        ]),
+        renderSlot(_ctx.$slots, "workspace-content"),
+        createVNode(_sfc_main$6, 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
+        })
+      ], 512);
     };
   }
 });
 
-const _hoisted_1 = {
-  class: "m-editor-workspace",
-  tabindex: "1",
-  ref: "workspace"
-};
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_magic_stage = resolveComponent("magic-stage");
-  const _component_page_bar = resolveComponent("page-bar");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    (openBlock(), createBlock(_component_magic_stage, {
-      key: _ctx.page?.id
-    })),
-    renderSlot(_ctx.$slots, "workspace-content"),
-    createVNode(_component_page_bar, null, {
-      "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
-    })
-  ], 512);
-}
-const Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-
 class ComponentList extends BaseService {
   state = reactive({
     list: []
@@ -4063,136 +4367,20 @@ class ComponentList extends BaseService {
   getList() {
     return this.state.list;
   }
-}
-const componentListService = new ComponentList();
-
-const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-const MIN_LEFT_COLUMN_WIDTH = 45;
-const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-const MIN_RIGHT_COLUMN_WIDTH = 1;
-const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
-const defaultColumnWidth = {
-  left: DEFAULT_LEFT_COLUMN_WIDTH,
-  center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
-  right: DEFAULT_RIGHT_COLUMN_WIDTH
-};
-const state = reactive({
-  uiSelectMode: false,
-  showSrc: false,
-  zoom: 1,
-  stageContainerRect: {
-    width: 0,
-    height: 0
-  },
-  stageRect: {
-    width: 375,
-    height: 817
-  },
-  columnWidth: defaultColumnWidth,
-  showGuides: true,
-  showRule: true,
-  propsPanelSize: "small"
-});
-class Ui extends BaseService {
-  constructor() {
-    super([]);
-    globalThis.addEventListener("resize", () => {
-      this.setColumnWidth({
-        center: "auto"
-      });
-    });
-    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-    if (columnWidthCacheData) {
-      try {
-        const columnWidthCache = JSON.parse(columnWidthCacheData);
-        this.setColumnWidth(columnWidthCache);
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }
-  set(name, value) {
-    const mask = editorService.get("stage")?.mask;
-    if (name === "columnWidth") {
-      this.setColumnWidth(value);
-      return;
-    }
-    if (name === "stageRect") {
-      this.setStageRect(value);
-      return;
-    }
-    if (name === "showGuides") {
-      mask?.showGuides(value);
-    }
-    if (name === "showRule") {
-      mask?.showRule(value);
-    }
-    state[name] = value;
-    if (name === "stageContainerRect") {
-      state.zoom = this.calcZoom();
-    }
-  }
-  get(name) {
-    return state[name];
-  }
-  zoom(zoom) {
-    this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
-    if (this.get("zoom") < 0.1)
-      this.set("zoom", 0.1);
-  }
-  setColumnWidth({ left, center, right }) {
-    const columnWidth = {
-      ...toRaw(this.get("columnWidth"))
-    };
-    if (left) {
-      columnWidth.left = Math.max(left, MIN_LEFT_COLUMN_WIDTH);
-    }
-    if (right) {
-      columnWidth.right = Math.max(right, MIN_RIGHT_COLUMN_WIDTH);
-    }
-    if (!center || center === "auto") {
-      const bodyWidth = globalThis.document.body.clientWidth;
-      columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
-      if (columnWidth.center <= 0) {
-        columnWidth.left = defaultColumnWidth.left;
-        columnWidth.center = defaultColumnWidth.center;
-        columnWidth.right = defaultColumnWidth.right;
-      }
-    } else {
-      columnWidth.center = center;
-    }
-    globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
-    state.columnWidth = columnWidth;
-  }
-  setStageRect(value) {
-    state.stageRect = {
-      ...state.stageRect,
-      ...value
-    };
-    state.zoom = this.calcZoom();
-  }
-  calcZoom() {
-    const { stageRect, stageContainerRect } = state;
-    const { height, width } = stageContainerRect;
-    if (!width || !height)
-      return 1;
-    const stageWidth = stageRect.width + 30;
-    const stageHeight = stageRect.height + 30;
-    if (width > stageWidth && height > stageHeight) {
-      return 1;
-    }
-    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+  destroy() {
+    this.state.list = [];
+    this.removeAllListeners();
   }
 }
-const uiService = new Ui();
+const componentListService = new ComponentList();
 
 const _sfc_main = defineComponent({
   name: "m-editor",
   components: {
-    NavMenu,
+    NavMenu: _sfc_main$f,
     Sidebar,
-    Workspace,
-    PropsPanel,
+    Workspace: _sfc_main$1,
+    PropsPanel: _sfc_main$e,
     Framework
   },
   props: {
@@ -4276,9 +4464,14 @@ const _sfc_main = defineComponent({
   },
   emits: ["props-panel-mounted", "update:modelValue"],
   setup(props, { emit }) {
-    editorService.on("root-change", () => {
-      const node = editorService.get("node") || props.defaultSelected;
-      node && editorService.select(node);
+    editorService.on("root-change", (value) => {
+      const node = editorService.get("node");
+      const nodeId = node?.id || props.defaultSelected;
+      if (nodeId && node !== value) {
+        editorService.select(nodeId);
+      } else {
+        editorService.set("nodes", [value]);
+      }
       emit("update:modelValue", toRaw(editorService.get("root")));
     });
     watch(() => props.modelValue, (modelValue) => editorService.set("root", modelValue), {
@@ -4311,7 +4504,15 @@ const _sfc_main = defineComponent({
     watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
       immediate: true
     });
-    onUnmounted(() => editorService.destroy());
+    uiService.initColumnWidth();
+    onUnmounted(() => {
+      editorService.destroy();
+      historyService.destroy();
+      propsService.destroy();
+      uiService.destroy();
+      componentListService.destroy();
+      storageService.destroy();
+    });
     const services = {
       componentListService,
       eventsService,
@@ -4361,6 +4562,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "component-list-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "component-list-panel-header")
           ]),
+          "component-list-item": withCtx(({ component }) => [
+            renderSlot(_ctx.$slots, "component-list-item", { component })
+          ]),
           _: 3
         }, 8, ["data"])
       ])
@@ -4368,6 +4572,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     workspace: withCtx(() => [
       renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
         createVNode(_component_workspace, null, {
+          stage: withCtx(() => [
+            renderSlot(_ctx.$slots, "stage")
+          ]),
           "workspace-content": withCtx(() => [
             renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
           ]),
@@ -4384,14 +4591,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "props-panel": withCtx(() => [
       renderSlot(_ctx.$slots, "props-panel", {}, () => [
         createVNode(_component_props_panel, {
-          ref: "propsPanel",
           onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
         }, {
           "props-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "props-panel-header")
           ]),
           _: 3
-        }, 512)
+        })
       ])
     ]),
     empty: withCtx(() => [
@@ -4411,12 +4617,12 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component("m-fields-ui-select", _sfc_main$l);
+    app.component("m-fields-ui-select", _sfc_main$m);
     app.component(CodeLink.name, CodeLink);
     app.component(Code.name, Code);
     app.component(CodeEditor.name, CodeEditor);
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$f as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, warn };
+export { COPY_STORAGE_KEY, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$h as Icon, Keys, LayerOffset, LayerPanel, Layout, _sfc_main$e as PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$g as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.mjs.map