@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.2

package/dist/tmagic-editor.umd.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.StageCore));
-})(this, (function (exports, vue, serialize, monaco, icons, lodashEs, utils, events, core, elementPlus, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.elementPlus, global.KeyController, global.StageCore));
+})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, Gesto, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
-    var n = {__proto__: null, [Symbol.toStringTag]: 'Module'};
+    var n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
     if (e) {
       Object.keys(e).forEach(function (k) {
         if (k !== 'default') {
@@ -26,8 +26,17 @@
 
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
   var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  var Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
+  var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
+  if (typeof global === "undefined") {
+    window.global = window;
+  }
+  if (typeof globalThis === "undefined") {
+    window.globalThis = window;
+  }
+
   var _export_sfc = (sfc, props) => {
     const target = sfc.__vccOpts || sfc;
     for (const [key, val] of props) {
@@ -36,7 +45,7 @@
     return target;
   };
 
-  const _sfc_main$k = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -53,7 +62,7 @@
       };
     }
   });
-  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
       style: vue.normalizeStyle(`height: ${_ctx.height}`),
@@ -62,9 +71,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
+  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$l = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -119,7 +128,7 @@
       };
     }
   });
-  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_link = vue.resolveComponent("m-fields-link");
     return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
       config: _ctx.formConfig,
@@ -128,11 +137,11 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
   var UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "m-fields-ui-select",
     props: {
       labelWidth: String,
@@ -170,6 +179,9 @@
         }
       };
       return {
+        Delete: vue.markRaw(icons.Delete),
+        Pointer: vue.markRaw(icons.Pointer),
+        Close: vue.markRaw(icons.Close),
         val,
         uiSelectMode,
         toName: vue.computed(() => {
@@ -194,34 +206,64 @@
       };
     }
   });
-  const _hoisted_1$d = /* @__PURE__ */ vue.createElementVNode("i", {
-    class: "el-icon-delete",
-    style: { "color": "rgb(221, 75, 57)" }
-  }, "\u53D6\u6D88", -1);
-  const _hoisted_2$7 = [
-    _hoisted_1$d
-  ];
-  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
-  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_el_button = vue.resolveComponent("el-button");
+    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
     return _ctx.uiSelectMode ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "m-fields-ui-select",
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
-    }, _hoisted_2$7)) : (vue.openBlock(), vue.createElementBlock("div", {
+    }, [
+      vue.createVNode(_component_el_button, {
+        type: "danger",
+        icon: _ctx.Delete,
+        text: "",
+        style: { "padding": "0" }
+      }, {
+        default: vue.withCtx(() => [
+          _hoisted_1$c
+        ]),
+        _: 1
+      }, 8, ["icon"])
+    ])) : (vue.openBlock(), vue.createElementBlock("div", {
       key: 1,
       class: "m-fields-ui-select",
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.startSelect && _ctx.startSelect(...args))
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.startSelect && _ctx.startSelect(...args)),
+      style: { "display": "flex" }
     }, [
-      _hoisted_3$5,
-      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1),
-      _ctx.val ? (vue.openBlock(), vue.createElementBlock("i", {
-        key: 0,
-        class: "el-icon-delete",
-        onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.deleteHandler && _ctx.deleteHandler(...args), ["stop"]))
-      })) : vue.createCommentVNode("", true)
+      vue.createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+        default: vue.withCtx(() => [
+          _ctx.val ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+            key: 0,
+            style: { "padding": "0" },
+            type: "danger",
+            icon: _ctx.Close,
+            text: "",
+            onClick: vue.withModifiers(_ctx.deleteHandler, ["stop"])
+          }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }),
+      vue.createVNode(_component_el_tooltip, {
+        content: _ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_button, {
+            text: "",
+            style: { "padding": "0", "margin": "0" }
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["content"])
     ]));
   }
-  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
   const toString = (v, language) => {
     let value = "";
@@ -238,7 +280,7 @@
     }
     return value;
   };
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -248,12 +290,16 @@
         type: [String, Object]
       },
       type: {
-        type: [String],
+        type: String,
         default: () => ""
       },
       language: {
-        type: [String],
+        type: String,
         default: () => "javascript"
+      },
+      options: {
+        type: Object,
+        default: () => ({})
       }
     },
     emits: ["initd", "save"],
@@ -263,6 +309,10 @@
       const values = vue.ref("");
       const loading = vue.ref(false);
       const codeEditor = vue.ref();
+      const resizeObserver = new globalThis.ResizeObserver(lodashEs.throttle(() => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300));
       const setEditorValue = (v, m) => {
         values.value = toString(v, props.language);
         if (props.type === "diff") {
@@ -275,10 +325,6 @@
         }
         return vsEditor?.setValue(values.value);
       };
-      const resizeHandler = () => {
-        vsEditor?.layout();
-        vsDiffEditor?.layout();
-      };
       const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
       const init = async () => {
         if (!codeEditor.value)
@@ -286,11 +332,8 @@
         const options = {
           value: values.value,
           language: props.language,
-          tabSize: 2,
           theme: "vs-dark",
-          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 15,
-          formatOnPaste: true
+          ...props.options
         };
         if (props.type === "diff") {
           vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditor.value, options);
@@ -303,6 +346,7 @@
         codeEditor.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
             e.preventDefault();
+            e.stopPropagation();
             emit("save", getEditorValue());
           }
         });
@@ -311,7 +355,7 @@
             emit("save", getEditorValue());
           });
         }
-        globalThis.addEventListener("resize", resizeHandler);
+        resizeObserver.observe(codeEditor.value);
       };
       vue.watch(() => props.initValues, (v, preV) => {
         if (v !== preV) {
@@ -326,7 +370,7 @@
         init();
       });
       vue.onUnmounted(() => {
-        globalThis.removeEventListener("resize", resizeHandler);
+        resizeObserver.disconnect();
       });
       return {
         values,
@@ -343,14 +387,14 @@
       };
     }
   });
-  const _hoisted_1$c = {
+  const _hoisted_1$b = {
     ref: "codeEditor",
     class: "magic-code-editor"
   };
-  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
+  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, null, 512);
   }
-  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -359,9 +403,6 @@
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
   class UndoRedo {
-    elementList;
-    listCursor;
-    listMaxSize;
     constructor(listMaxSize = 200) {
       const minListMaxSize = 2;
       this.elementList = [];
@@ -434,11 +475,40 @@
 
   const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
   const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
+  const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+    try {
+      let beforeArgs = args;
+      for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+        let beforeReturnValue = await beforeMethod(...beforeArgs) || [];
+        if (isError(beforeReturnValue))
+          throw beforeReturnValue;
+        if (!Array.isArray(beforeReturnValue)) {
+          beforeReturnValue = [beforeReturnValue];
+        }
+        beforeArgs = beforeArgs.map((v, index) => {
+          if (typeof beforeReturnValue[index] === "undefined")
+            return v;
+          return beforeReturnValue[index];
+        });
+      }
+      let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
+      for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+        returnValue = await afterMethod(returnValue, ...beforeArgs);
+        if (isError(returnValue))
+          throw returnValue;
+      }
+      return returnValue;
+    } catch (error) {
+      throw error;
+    }
+  };
   class BaseService extends events.EventEmitter {
-    pluginOptionsList = {};
-    middleware = {};
-    constructor(methods) {
+    constructor(methods = [], serialMethods = []) {
       super();
+      this.pluginOptionsList = {};
+      this.middleware = {};
+      this.taskList = [];
+      this.doingTask = false;
       methods.forEach((propertyName) => {
         const scope = this;
         const sourceMethod = scope[propertyName];
@@ -450,27 +520,23 @@
         const fn = compose(this.middleware[propertyName]);
         Object.defineProperty(scope, propertyName, {
           value: async (...args) => {
-            let beforeArgs = args;
-            for (const beforeMethod of this.pluginOptionsList[beforeMethodName]) {
-              let beforeReturnValue = await beforeMethod(...beforeArgs) || [];
-              if (isError(beforeReturnValue))
-                throw beforeReturnValue;
-              if (!Array.isArray(beforeReturnValue)) {
-                beforeReturnValue = [beforeReturnValue];
-              }
-              beforeArgs = beforeArgs.map((v, index) => {
-                if (typeof beforeReturnValue[index] === "undefined")
-                  return v;
-                return beforeReturnValue[index];
-              });
+            if (!serialMethods.includes(propertyName)) {
+              return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
             }
-            let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-            for (const afterMethod of this.pluginOptionsList[afterMethodName]) {
-              returnValue = await afterMethod(...beforeArgs, returnValue);
-              if (isError(returnValue))
-                throw returnValue;
+            const promise = new Promise((resolve, reject) => {
+              this.taskList.push(async () => {
+                try {
+                  const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                  resolve(value);
+                } catch (e) {
+                  reject(e);
+                }
+              });
+            });
+            if (!this.doingTask) {
+              this.doTask();
             }
-            return returnValue;
+            return promise;
           }
         });
       });
@@ -487,19 +553,34 @@
           this.pluginOptionsList[methodName2].push(method);
       });
     }
+    async doTask() {
+      this.doingTask = true;
+      let task = this.taskList.shift();
+      while (task) {
+        await task();
+        task = this.taskList.shift();
+      }
+      this.doingTask = false;
+    }
   }
 
   class History extends BaseService {
-    state = vue.reactive({
-      pageSteps: {},
-      pageId: void 0,
-      canRedo: false,
-      canUndo: false
-    });
     constructor() {
       super([]);
+      this.state = vue.reactive({
+        pageSteps: {},
+        pageId: void 0,
+        canRedo: false,
+        canUndo: false
+      });
       this.on("change", this.setCanUndoRedo);
     }
+    reset() {
+      this.state.pageSteps = {};
+      this.state.pageId = void 0;
+      this.state.canRedo = false;
+      this.state.canUndo = false;
+    }
     changePage(page) {
       if (!page)
         return;
@@ -563,12 +644,12 @@
   var historyService = new History();
 
   class Props extends BaseService {
-    state = vue.reactive({
-      propsConfigMap: {},
-      propsValueMap: {}
-    });
     constructor() {
       super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+      this.state = vue.reactive({
+        propsConfigMap: {},
+        propsValueMap: {}
+      });
     }
     setPropsConfigs(configs) {
       Object.keys(configs).forEach((type) => {
@@ -593,7 +674,7 @@
     setPropsValue(type, value) {
       this.state.propsValueMap[type] = value;
     }
-    async getPropsValue(type) {
+    async getPropsValue(type, defaultValue = {}) {
       if (type === "area") {
         const value = await this.getPropsValue("button");
         value.className = "action-area";
@@ -605,7 +686,7 @@
       }
       return lodashEs.cloneDeep({
         ...getDefaultPropsValue(type),
-        ...this.state.propsValueMap[type] || {}
+        ...lodashEs.mergeWith(this.state.propsValueMap[type] || {}, defaultValue)
       });
     }
   }
@@ -632,7 +713,7 @@
   const generateId = (type) => `${type}_${lodashEs.random(1e4, false)}`;
   const getPageList = (app) => {
     if (app.items && Array.isArray(app.items)) {
-      return app.items.filter((item) => item.type === "page");
+      return app.items.filter((item) => item.type === schema.NodeType.PAGE);
     }
     return [];
   };
@@ -666,9 +747,9 @@
   };
   const setNewItemId = (config, parent) => {
     const oldId = config.id;
-    config.id = generateId(config.type);
+    config.id = generateId(config.type || "component");
     config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
-    if (utils.isPop(config) && parent?.type === "page") {
+    if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
       updatePopId(oldId, config.id, parent);
     }
     if (config.items && Array.isArray(config.items)) {
@@ -689,11 +770,25 @@
     };
     return node;
   };
-  const initPosition = (node, layout) => {
+  const setTop2Middle = (node, parentNode, stage) => {
+    const style = node.style || {};
+    const height = style.height || 0;
+    if (!stage || typeof style.top !== "undefined" || !parentNode.style || !utils.isNumber(height))
+      return style;
+    const { height: parentHeight } = parentNode.style;
+    if (utils.isPage(parentNode)) {
+      const { scrollTop = 0, wrapperHeight } = stage.mask;
+      style.top = (wrapperHeight - height) / 2 + scrollTop;
+    } else {
+      style.top = (parentHeight - height) / 2;
+    }
+    return style;
+  };
+  const initPosition = (node, layout, parentNode, stage) => {
     if (layout === Layout.ABSOLUTE) {
       node.style = {
         position: "absolute",
-        ...node.style || {}
+        ...setTop2Middle(node, parentNode, stage)
       };
       return node;
     }
@@ -740,7 +835,9 @@
     const cur = path.pop();
     const offset = {
       left: cur?.style?.left || 0,
-      top: cur?.style?.top || 0
+      top: cur?.style?.top || 0,
+      right: "",
+      bottom: ""
     };
     path.forEach((value) => {
       offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
@@ -774,15 +871,6 @@
   };
 
   class Editor$1 extends BaseService {
-    isHistoryStateChange = false;
-    state = vue.reactive({
-      root: null,
-      page: null,
-      parent: null,
-      node: null,
-      stage: null,
-      modifiedNodeIds: /* @__PURE__ */ new Map()
-    });
     constructor() {
       super([
         "getLayout",
@@ -795,13 +883,27 @@
         "paste",
         "alignCenter",
         "moveLayer",
+        "move",
         "undo",
-        "redo"
-      ]);
+        "redo",
+        "highlight"
+      ], ["select", "update", "moveLayer"]);
+      this.isHistoryStateChange = false;
+      this.state = vue.reactive({
+        root: null,
+        page: null,
+        parent: null,
+        node: null,
+        stage: null,
+        highlightNode: null,
+        modifiedNodeIds: /* @__PURE__ */ new Map(),
+        pageLength: 0
+      });
     }
     set(name, value) {
       this.state[name] = value;
       if (name === "root") {
+        this.state.pageLength = value?.items?.length || 0;
         this.emit("root-change", value);
       }
     }
@@ -809,7 +911,7 @@
       return this.state[name];
     }
     getNodeInfo(id) {
-      const root = this.get("root");
+      const root = vue.toRaw(this.get("root"));
       if (!root)
         return {};
       if (id === root.id) {
@@ -823,7 +925,7 @@
       info.node = path[path.length - 1];
       info.parent = path[path.length - 2];
       path.forEach((item) => {
-        if (item.type === "page") {
+        if (item.type === schema.NodeType.PAGE) {
           info.page = item;
           return;
         }
@@ -840,31 +942,19 @@
       const { parent } = this.getNodeInfo(id);
       return parent;
     }
-    async getLayout(node) {
-      if (node.layout) {
-        return node.layout;
+    async getLayout(parent, node) {
+      if (node && typeof node !== "function" && isFixed(node))
+        return Layout.FIXED;
+      if (parent.layout) {
+        return parent.layout;
       }
-      if (!node.style?.position) {
+      if (!parent.style?.position) {
         return Layout.RELATIVE;
       }
       return Layout.ABSOLUTE;
     }
     async select(config2) {
-      let id;
-      if (typeof config2 === "string" || typeof config2 === "number") {
-        id = config2;
-      } else {
-        id = config2.id;
-      }
-      if (!id) {
-        throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
-      }
-      const { node, parent, page } = this.getNodeInfo(id);
-      if (!node)
-        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
-      if (node.id === this.state.root?.id) {
-        throw new Error("\u4E0D\u80FD\u9009\u6839\u8282\u70B9");
-      }
+      const { node, page, parent } = this.selectedConfigExceptionHandler(config2);
       this.set("node", node);
       this.set("page", page || null);
       this.set("parent", parent || null);
@@ -873,12 +963,44 @@
       } else {
         historyService.empty();
       }
+      this.emit("select", node);
       return node;
     }
-    async add({ type, ...config2 }, parent) {
+    async selectNextNode() {
+      const node = vue.toRaw(this.get("node"));
+      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT)
+        return node;
+      const parent = vue.toRaw(this.getParentById(node.id));
+      if (!parent)
+        return node;
+      const index = getNodeIndex(node, parent);
+      const nextNode = parent.items[index + 1] || parent.items[0];
+      await this.select(nextNode);
+      this.get("stage")?.select(nextNode.id);
+      return nextNode;
+    }
+    async selectNextPage() {
+      const root = vue.toRaw(this.get("root"));
+      const page = vue.toRaw(this.get("page"));
+      const index = getNodeIndex(page, root);
+      const nextPage = root.items[index + 1] || root.items[0];
+      await this.select(nextPage);
+      this.get("stage")?.select(nextPage.id);
+      return nextPage;
+    }
+    highlight(config2) {
+      const { node } = this.selectedConfigExceptionHandler(config2);
+      const currentHighlightNode = this.get("highlightNode");
+      if (currentHighlightNode === node)
+        return;
+      this.set("highlightNode", node);
+    }
+    async add(addNode, parent) {
+      const { type, ...config2 } = addNode;
       const curNode = this.get("node");
       let parentNode;
-      if (type === "page") {
+      const isPage2 = type === schema.NodeType.PAGE;
+      if (isPage2) {
         parentNode = this.get("root");
       } else if (parent && typeof parent !== "function") {
         parentNode = parent;
@@ -889,16 +1011,24 @@
       }
       if (!parentNode)
         throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-      const layout = await this.getLayout(parentNode);
-      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type)), ...config2 }, layout);
-      if ((parentNode?.type === "app" || curNode.type === "app") && newNode.type !== "page") {
+      const layout = await this.getLayout(vue.toRaw(parentNode), addNode);
+      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
+      if ((parentNode?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && newNode.type !== schema.NodeType.PAGE) {
         throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
       }
       parentNode?.items?.push(newNode);
-      await this.get("stage")?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
+      const stage = this.get("stage");
+      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
       await this.select(newNode);
       this.addModifiedNodeId(newNode.id);
-      this.pushHistoryState();
+      if (!isPage2) {
+        this.pushHistoryState();
+      }
+      stage?.select(newNode.id);
+      if (isPage2) {
+        this.state.pageLength += 1;
+      }
+      this.emit("add", newNode);
       return newNode;
     }
     async remove(node) {
@@ -914,14 +1044,31 @@
       if (typeof index !== "number" || index === -1)
         throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
       parent.items?.splice(index, 1);
-      this.get("stage")?.remove({ id: node.id, root: this.get("root") });
-      if (node.type === "page") {
-        await this.select(root.items[0] || root);
+      const stage = this.get("stage");
+      stage?.remove({ id: node.id, root: this.get("root") });
+      if (node.type === schema.NodeType.PAGE) {
+        this.state.pageLength -= 1;
+        if (root.items[0]) {
+          await this.select(root.items[0]);
+          stage?.select(root.items[0].id);
+        } else {
+          this.set("node", null);
+          this.set("parent", null);
+          this.set("page", null);
+          this.set("stage", null);
+          this.set("highlightNode", null);
+          this.resetModifiedNodeId();
+          historyService.reset();
+          this.emit("remove", node);
+          return node;
+        }
       } else {
         await this.select(parent);
+        stage?.select(parent.id);
       }
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
+      this.emit("remove", node);
       return node;
     }
     async update(config2) {
@@ -939,7 +1086,7 @@
       });
       if (!newConfig.type)
         throw new Error("\u914D\u7F6E\u7F3A\u5C11type\u503C");
-      if (newConfig.type === "app") {
+      if (newConfig.type === schema.NodeType.ROOT) {
         this.set("root", newConfig);
         return newConfig;
       }
@@ -956,15 +1103,16 @@
         newConfig = setLayout(newConfig, newLayout);
       }
       parentNodeItems[index] = newConfig;
-      if (newConfig.id === this.get("node").id) {
+      if (`${newConfig.id}` === `${this.get("node").id}`) {
         this.set("node", newConfig);
       }
       this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: this.get("root") });
-      if (newConfig.type === "page") {
+      if (newConfig.type === schema.NodeType.PAGE) {
         this.set("page", newConfig);
       }
       this.addModifiedNodeId(newConfig.id);
       this.pushHistoryState();
+      this.emit("update", newConfig);
       return newConfig;
     }
     async sort(id1, id2) {
@@ -1008,7 +1156,7 @@
     async alignCenter(config2) {
       const parent = this.get("parent");
       const node = this.get("node");
-      const layout = await this.getLayout(parent);
+      const layout = await this.getLayout(vue.toRaw(parent), vue.toRaw(node));
       if (layout === Layout.RELATIVE) {
         return;
       }
@@ -1045,6 +1193,26 @@
       await this.changeHistoryState(value);
       return value;
     }
+    async move(left, top) {
+      const node = vue.toRaw(this.get("node"));
+      if (!node || utils.isPage(node))
+        return;
+      const { style, id } = node;
+      if (!style || style.position !== "absolute")
+        return;
+      if (top && !utils.isNumber(style.top))
+        return;
+      if (left && !utils.isNumber(style.left))
+        return;
+      this.update({
+        id,
+        style: {
+          ...style,
+          left: Number(style.left) + left,
+          top: Number(style.top) + top
+        }
+      });
+    }
     destroy() {
       this.removeAllListeners();
       this.set("root", null);
@@ -1077,7 +1245,12 @@
       this.isHistoryStateChange = true;
       await this.update(value.data);
       this.set("modifiedNodeIds", value.modifiedNodeIds);
-      setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+      setTimeout(async () => {
+        if (!value.nodeId)
+          return;
+        await this.select(value.nodeId);
+        this.get("stage")?.select(value.nodeId);
+      }, 0);
     }
     async toggleFixedPosition(dist, src, root) {
       let newConfig = lodashEs.cloneDeep(dist);
@@ -1090,6 +1263,28 @@
       }
       return newConfig;
     }
+    selectedConfigExceptionHandler(config2) {
+      let id;
+      if (typeof config2 === "string" || typeof config2 === "number") {
+        id = config2;
+      } else {
+        id = config2.id;
+      }
+      if (!id) {
+        throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
+      }
+      const { node, parent, page } = this.getNodeInfo(id);
+      if (!node)
+        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
+      if (node.id === this.state.root?.id) {
+        throw new Error("\u4E0D\u80FD\u9009\u6839\u8282\u70B9");
+      }
+      return {
+        node,
+        parent,
+        page
+      };
+    }
   }
   var editorService = new Editor$1();
 
@@ -1247,6 +1442,25 @@
                       defaultValue: "100% 100%"
                     }
                   ]
+                },
+                {
+                  type: "fieldset",
+                  legend: "\u5B57\u4F53",
+                  items: [
+                    {
+                      name: "color",
+                      text: "\u989C\u8272",
+                      type: "colorPicker"
+                    },
+                    {
+                      name: "fontSize",
+                      text: "\u5927\u5C0F"
+                    },
+                    {
+                      name: "fontWeight",
+                      text: "\u7C97\u7EC6"
+                    }
+                  ]
                 }
               ]
             }
@@ -1279,7 +1493,7 @@
                   type: "select",
                   options: (mForm, { model }) => {
                     const node = editorService.getNodeById(model.to);
-                    if (!node)
+                    if (!node?.type)
                       return [];
                     return eventsService.getMethod(node.type).map((option) => ({
                       text: option.label,
@@ -1314,7 +1528,7 @@
     name: type
   });
 
-  const _sfc_main$g = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     components: { Plus: icons.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1324,21 +1538,21 @@
           if (!editorService)
             return;
           editorService.add({
-            type: "page",
+            type: schema.NodeType.PAGE,
             name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
           });
         }
       };
     }
   });
-  const _hoisted_1$b = { class: "m-editor-empty-panel" };
-  const _hoisted_2$6 = { class: "m-editor-empty-content" };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$a = { class: "m-editor-empty-panel" };
+  const _hoisted_2$4 = { class: "m-editor-empty-content" };
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-      vue.createElementVNode("div", _hoisted_2$6, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+      vue.createElementVNode("div", _hoisted_2$4, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
           onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
@@ -1351,1274 +1565,114 @@
               _: 1
             })
           ]),
-          _hoisted_3$4
+          _hoisted_3$2
         ])
       ])
     ]);
   }
-  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
-
-  /*
-  Copyright (c) 2018 Daybrush
-  @name: @daybrush/utils
-  license: MIT
-  author: Daybrush
-  repository: https://github.com/daybrush/utils
-  @version 1.6.0
-  */
-  /**
-  * get string "object"
-  * @memberof Consts
-  * @example
-  import {OBJECT} from "@daybrush/utils";
-
-  console.log(OBJECT); // "object"
-  */
-
-  var OBJECT = "object";
-  /**
-  * Check the type that the value is object.
-  * @memberof Utils
-  * @param {string} value - Value to check the type
-  * @return {} true if the type is correct, false otherwise
-  * @example
-  import {isObject} from "@daybrush/utils";
-
-  console.log(isObject({})); // true
-  console.log(isObject(undefined)); // false
-  console.log(isObject("")); // false
-  console.log(isObject(null)); // false
-  */
-
-  function isObject(value) {
-    return value && typeof value === OBJECT;
-  }
-  /**
-  * Date.now() method
-  * @memberof CrossBrowser
-  * @return {number} milliseconds
-  * @example
-  import {now} from "@daybrush/utils";
-
-  console.log(now()); // 12121324241(milliseconds)
-  */
-
-  function now() {
-    return Date.now ? Date.now() : new Date().getTime();
-  }
-  /**
-  * Returns the index of the first element in the array that satisfies the provided testing function.
-  * @function
-  * @memberof CrossBrowser
-  * @param - The array `findIndex` was called upon.
-  * @param - A function to execute on each value in the array until the function returns true, indicating that the satisfying element was found.
-  * @param - Returns defaultIndex if not found by the function.
-  * @example
-  import { findIndex } from "@daybrush/utils";
+  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
-  findIndex([{a: 1}, {a: 2}, {a: 3}, {a: 4}], ({ a }) => a === 2); // 1
-  */
-
-  function findIndex(arr, callback, defaultIndex) {
-    if (defaultIndex === void 0) {
-      defaultIndex = -1;
-    }
-
-    var length = arr.length;
-
-    for (var i = 0; i < length; ++i) {
-      if (callback(arr[i], i, arr)) {
-        return i;
+  const _sfc_main$h = vue.defineComponent({
+    name: "m-editor-resize",
+    props: {
+      type: {
+        type: String
       }
+    },
+    setup(props) {
+      const services = vue.inject("services");
+      const target = vue.ref();
+      let getso;
+      vue.onMounted(() => {
+        if (!target.value)
+          return;
+        getso = new Gesto__default["default"](target.value, {
+          container: window,
+          pinchOutside: true
+        }).on("drag", (e) => {
+          if (!target.value || !services)
+            return;
+          let { left, right } = {
+            ...vue.toRaw(services.uiService.get("columnWidth"))
+          };
+          if (props.type === "left") {
+            left += e.deltaX;
+          } else if (props.type === "right") {
+            right -= e.deltaX;
+          }
+          services.uiService.set("columnWidth", {
+            left,
+            right
+          });
+        });
+      });
+      vue.onUnmounted(() => {
+        getso?.unset();
+      });
+      return {
+        target
+      };
     }
-
-    return defaultIndex;
-  }
-  /**
-  * Sets up a function that will be called whenever the specified event is delivered to the target
-  * @memberof DOM
-  * @param - event target
-  * @param - A case-sensitive string representing the event type to listen for.
-  * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
-  * @param - An options object that specifies characteristics about the event listener.
-  * @example
-  import {addEvent} from "@daybrush/utils";
-
-  addEvent(el, "click", e => {
-    console.log(e);
   });
-  */
-
-  function addEvent(el, type, listener, options) {
-    el.addEventListener(type, listener, options);
-  }
-  /**
-  * removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
-  * @memberof DOM
-  * @param - event target
-  * @param - A case-sensitive string representing the event type to listen for.
-  * @param - The EventListener function of the event handler to remove from the event target.
-  * @param - An options object that specifies characteristics about the event listener.
-  * @example
-  import {addEvent, removeEvent} from "@daybrush/utils";
-  const listener = e => {
-    console.log(e);
-  };
-  addEvent(el, "click", listener);
-  removeEvent(el, "click", listener);
-  */
-
-  function removeEvent(el, type, listener, options) {
-    el.removeEventListener(type, listener, options);
-  }
-
-  /*
-  Copyright (c) 2019 Daybrush
-  name: @scena/event-emitter
-  license: MIT
-  author: Daybrush
-  repository: git+https://github.com/daybrush/gesture.git
-  version: 1.0.5
-  */
-
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation.
-
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */
-  var __assign$1 = function () {
-    __assign$1 = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-
-      return t;
-    };
-
-    return __assign$1.apply(this, arguments);
+  const _hoisted_1$9 = {
+    ref: "target",
+    class: "m-editor-resizer"
   };
-  function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-
-    for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
-
-    return r;
+  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$9, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 512);
   }
+  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
-  /**
-   * Implement EventEmitter on object or component.
-   */
-
-  var EventEmitter =
-  /*#__PURE__*/
-  function () {
-    function EventEmitter() {
-      this._events = {};
-    }
-    /**
-     * Add a listener to the registered event.
-     * @param - Name of the event to be added
-     * @param - listener function of the event to be added
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Add listener in "a" event
-     * emitter.on("a", () => {
-     * });
-     * // Add listeners
-     * emitter.on({
-     *  a: () => {},
-     *  b: () => {},
-     * });
-     */
-
-
-    var __proto = EventEmitter.prototype;
-
-    __proto.on = function (eventName, listener) {
-      if (isObject(eventName)) {
-        for (var name in eventName) {
-          this.on(name, eventName[name]);
-        }
-      } else {
-        this._addEvent(eventName, listener, {});
+  const _sfc_main$g = vue.defineComponent({
+    components: {
+      AddPageBox,
+      Resizer
+    },
+    props: {
+      codeOptions: {
+        type: Object,
+        default: () => ({})
       }
-
-      return this;
-    };
-    /**
-     * Remove listeners registered in the event target.
-     * @param - Name of the event to be removed
-     * @param - listener function of the event to be removed
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Remove all listeners.
-     * emitter.off();
-     *
-     * // Remove all listeners in "A" event.
-     * emitter.off("a");
-     *
-     *
-     * // Remove "listener" listener in "a" event.
-     * emitter.off("a", listener);
-     */
-
-
-    __proto.off = function (eventName, listener) {
-      if (!eventName) {
-        this._events = {};
-      } else if (isObject(eventName)) {
-        for (var name in eventName) {
-          this.off(name);
-        }
-      } else if (!listener) {
-        this._events[eventName] = [];
-      } else {
-        var events = this._events[eventName];
-
-        if (events) {
-          var index = findIndex(events, function (e) {
-            return e.listener === listener;
-          });
-
-          if (index > -1) {
-            events.splice(index, 1);
-          }
-        }
-      }
-
-      return this;
-    };
-    /**
-     * Add a disposable listener and Use promise to the registered event.
-     * @param - Name of the event to be added
-     * @param - disposable listener function of the event to be added
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Add a disposable listener in "a" event
-     * emitter.once("a", () => {
-     * });
-     *
-     * // Use Promise
-     * emitter.once("a").then(e => {
-     * });
-     */
-
-
-    __proto.once = function (eventName, listener) {
-      var _this = this;
-
-      if (listener) {
-        this._addEvent(eventName, listener, {
-          once: true
-        });
-      }
-
-      return new Promise(function (resolve) {
-        _this._addEvent(eventName, resolve, {
-          once: true
-        });
-      });
-    };
-    /**
-     * Fires an event to call listeners.
-     * @param - Event name
-     * @param - Event parameter
-     * @return If false, stop the event.
-     * @example
-     *
-     * import EventEmitter from "@scena/event-emitter";
-     *
-     *
-     * const emitter = new EventEmitter();
-     *
-     * emitter.on("a", e => {
-     * });
-     *
-     *
-     * emitter.emit("a", {
-     *   a: 1,
-     * });
-     */
-
-
-    __proto.emit = function (eventName, param) {
-      var _this = this;
-
-      if (param === void 0) {
-        param = {};
-      }
-
-      var events = this._events[eventName];
-
-      if (!eventName || !events) {
-        return true;
-      }
-
-      var isStop = false;
-      param.eventType = eventName;
-
-      param.stop = function () {
-        isStop = true;
-      };
-
-      param.currentTarget = this;
-
-      __spreadArrays(events).forEach(function (info) {
-        info.listener(param);
-
-        if (info.once) {
-          _this.off(eventName, info.listener);
-        }
-      });
-
-      return !isStop;
-    };
-    /**
-     * Fires an event to call listeners.
-     * @param - Event name
-     * @param - Event parameter
-     * @return If false, stop the event.
-     * @example
-     *
-     * import EventEmitter from "@scena/event-emitter";
-     *
-     *
-     * const emitter = new EventEmitter();
-     *
-     * emitter.on("a", e => {
-     * });
-     *
-     *
-     * emitter.emit("a", {
-     *   a: 1,
-     * });
-     */
-
-    /**
-    * Fires an event to call listeners.
-    * @param - Event name
-    * @param - Event parameter
-    * @return If false, stop the event.
-    * @example
-    *
-    * import EventEmitter from "@scena/event-emitter";
-    *
-    *
-    * const emitter = new EventEmitter();
-    *
-    * emitter.on("a", e => {
-    * });
-    *
-    * // emit
-    * emitter.trigger("a", {
-    *   a: 1,
-    * });
-    */
-
-
-    __proto.trigger = function (eventName, param) {
-      if (param === void 0) {
-        param = {};
-      }
-
-      return this.emit(eventName, param);
-    };
-
-    __proto._addEvent = function (eventName, listener, options) {
-      var events = this._events;
-      events[eventName] = events[eventName] || [];
-      var listeners = events[eventName];
-      listeners.push(__assign$1({
-        listener: listener
-      }, options));
-    };
-
-    return EventEmitter;
-  }();
-
-  var EventEmitter$1 = EventEmitter;
-
-  /*
-  Copyright (c) 2019 Daybrush
-  name: gesto
-  license: MIT
-  author: Daybrush
-  repository: git+https://github.com/daybrush/gesture.git
-  version: 1.5.0
-  */
-
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation. All rights reserved.
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-  this file except in compliance with the License. You may obtain a copy of the
-  License at http://www.apache.org/licenses/LICENSE-2.0
-
-  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-  MERCHANTABLITY OR NON-INFRINGEMENT.
-
-  See the Apache Version 2.0 License for specific language governing permissions
-  and limitations under the License.
-  ***************************************************************************** */
-
-  /* global Reflect, Promise */
-  var extendStatics = function (d, b) {
-    extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-    };
-
-    return extendStatics(d, b);
-  };
-
-  function __extends(d, b) {
-    extendStatics(d, b);
-
-    function __() {
-      this.constructor = d;
-    }
-
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  }
-  var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-
-      return t;
-    };
-
-    return __assign.apply(this, arguments);
-  };
-
-  function getRad(pos1, pos2) {
-    var distX = pos2[0] - pos1[0];
-    var distY = pos2[1] - pos1[1];
-    var rad = Math.atan2(distY, distX);
-    return rad >= 0 ? rad : rad + Math.PI * 2;
-  }
-  function getRotatiion(touches) {
-    return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180;
-  }
-  function isMultiTouch(e) {
-    return e.touches && e.touches.length >= 2;
-  }
-  function getEventClients(e) {
-    if (e.touches) {
-      return getClients(e.touches);
-    } else {
-      return [getClient(e)];
-    }
-  }
-  function getPosition(clients, prevClients, startClients) {
-    var length = startClients.length;
-
-    var _a = getAverageClient(clients, length),
-        clientX = _a.clientX,
-        clientY = _a.clientY,
-        originalClientX = _a.originalClientX,
-        originalClientY = _a.originalClientY;
-
-    var _b = getAverageClient(prevClients, length),
-        prevX = _b.clientX,
-        prevY = _b.clientY;
-
-    var _c = getAverageClient(startClients, length),
-        startX = _c.clientX,
-        startY = _c.clientY;
-
-    var deltaX = clientX - prevX;
-    var deltaY = clientY - prevY;
-    var distX = clientX - startX;
-    var distY = clientY - startY;
-    return {
-      clientX: originalClientX,
-      clientY: originalClientY,
-      deltaX: deltaX,
-      deltaY: deltaY,
-      distX: distX,
-      distY: distY
-    };
-  }
-  function getDist(clients) {
-    return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2));
-  }
-  function getClients(touches) {
-    var length = Math.min(touches.length, 2);
-    var clients = [];
-
-    for (var i = 0; i < length; ++i) {
-      clients.push(getClient(touches[i]));
-    }
-
-    return clients;
-  }
-  function getClient(e) {
-    return {
-      clientX: e.clientX,
-      clientY: e.clientY
-    };
-  }
-  function getAverageClient(clients, length) {
-    if (length === void 0) {
-      length = clients.length;
-    }
-
-    var sumClient = {
-      clientX: 0,
-      clientY: 0,
-      originalClientX: 0,
-      originalClientY: 0
-    };
-
-    for (var i = 0; i < length; ++i) {
-      var client = clients[i];
-      sumClient.originalClientX += "originalClientX" in client ? client.originalClientX : client.clientX;
-      sumClient.originalClientY += "originalClientY" in client ? client.originalClientY : client.clientY;
-      sumClient.clientX += client.clientX;
-      sumClient.clientY += client.clientY;
-    }
-
-    if (!length) {
-      return sumClient;
-    }
-
-    return {
-      clientX: sumClient.clientX / length,
-      clientY: sumClient.clientY / length,
-      originalClientX: sumClient.originalClientX / length,
-      originalClientY: sumClient.originalClientY / length
-    };
-  }
-
-  var ClientStore =
-  /*#__PURE__*/
-  function () {
-    function ClientStore(clients) {
-      this.prevClients = [];
-      this.startClients = [];
-      this.movement = 0;
-      this.length = 0;
-      this.startClients = clients;
-      this.prevClients = clients;
-      this.length = clients.length;
-    }
-
-    var __proto = ClientStore.prototype;
-
-    __proto.addClients = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      var position = this.getPosition(clients);
-      var deltaX = position.deltaX,
-          deltaY = position.deltaY;
-      this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-      this.prevClients = clients;
-      return position;
-    };
-
-    __proto.getAngle = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getRotatiion(clients);
-    };
-
-    __proto.getRotation = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getRotatiion(clients) - getRotatiion(this.startClients);
-    };
-
-    __proto.getPosition = function (clients) {
-      return getPosition(clients || this.prevClients, this.prevClients, this.startClients);
-    };
-
-    __proto.getPositions = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      var prevClients = this.prevClients;
-      return this.startClients.map(function (startClient, i) {
-        return getPosition([clients[i]], [prevClients[i]], [startClient]);
-      });
-    };
-
-    __proto.getMovement = function (clients) {
-      var movement = this.movement;
-
-      if (!clients) {
-        return movement;
-      }
-
-      var currentClient = getAverageClient(clients, this.length);
-      var prevClient = getAverageClient(this.prevClients, this.length);
-      var deltaX = currentClient.clientX - prevClient.clientX;
-      var deltaY = currentClient.clientY - prevClient.clientY;
-      return Math.sqrt(deltaX * deltaX + deltaY * deltaY) + movement;
-    };
-
-    __proto.getDistance = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getDist(clients);
-    };
-
-    __proto.getScale = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getDist(clients) / getDist(this.startClients);
-    };
-
-    __proto.move = function (deltaX, deltaY) {
-      this.startClients.forEach(function (client) {
-        client.clientX -= deltaX;
-        client.clientY -= deltaY;
-      });
-      this.prevClients.forEach(function (client) {
-        client.clientX -= deltaX;
-        client.clientY -= deltaY;
-      });
-    };
-
-    return ClientStore;
-  }();
-
-  var INPUT_TAGNAMES = ["textarea", "input"];
-  /**
-   * You can set up drag, pinch events in any browser.
-   */
-
-  var Gesto =
-  /*#__PURE__*/
-  function (_super) {
-    __extends(Gesto, _super);
-    /**
-     *
-     */
-
-
-    function Gesto(targets, options) {
-      if (options === void 0) {
-        options = {};
-      }
-
-      var _this = _super.call(this) || this;
-
-      _this.options = {};
-      _this.flag = false;
-      _this.pinchFlag = false;
-      _this.datas = {};
-      _this.isDrag = false;
-      _this.isPinch = false;
-      _this.isMouse = false;
-      _this.isTouch = false;
-      _this.clientStores = [];
-      _this.targets = [];
-      _this.prevTime = 0;
-      _this.doubleFlag = false;
-
-      _this.onDragStart = function (e, isTrusted) {
-        if (isTrusted === void 0) {
-          isTrusted = true;
-        }
-
-        if (!_this.flag && e.cancelable === false) {
-          return;
-        }
-
-        var _a = _this.options,
-            container = _a.container,
-            pinchOutside = _a.pinchOutside,
-            preventRightClick = _a.preventRightClick,
-            preventDefault = _a.preventDefault,
-            checkInput = _a.checkInput;
-        var isTouch = _this.isTouch;
-        var isDragStart = !_this.flag;
-
-        if (isDragStart) {
-          var activeElement = document.activeElement;
-          var target = e.target;
-          var tagName = target.tagName.toLowerCase();
-          var hasInput = INPUT_TAGNAMES.indexOf(tagName) > -1;
-          var hasContentEditable = target.isContentEditable;
-
-          if (hasInput || hasContentEditable) {
-            if (checkInput || activeElement === target) {
-              // force false or already focused.
-              return false;
-            }
-
-            if (activeElement && hasContentEditable && activeElement.isContentEditable && activeElement.contains(target)) {
-              return false;
-            }
-          } else if ((preventDefault || e.type === "touchstart") && activeElement) {
-            var activeTagName = activeElement.tagName;
-
-            if (activeElement.isContentEditable || INPUT_TAGNAMES.indexOf(activeTagName) > -1) {
-              activeElement.blur();
-            }
-          }
-
-          _this.clientStores = [new ClientStore(getEventClients(e))];
-          _this.flag = true;
-          _this.isDrag = false;
-          _this.datas = {};
-
-          if (preventRightClick && (e.which === 3 || e.button === 2)) {
-            _this.initDrag();
-
-            return false;
-          }
-
-          _this.doubleFlag = now() - _this.prevTime < 200;
-
-          var result = _this.emit("dragStart", __assign({
-            datas: _this.datas,
-            inputEvent: e,
-            isTrusted: isTrusted,
-            isDouble: _this.doubleFlag
-          }, _this.getCurrentStore().getPosition()));
-
-          if (result === false) {
-            _this.initDrag();
-          }
-
-          _this.flag && preventDefault && e.preventDefault();
-        }
-
-        if (!_this.flag) {
-          return false;
-        }
-
-        var timer = 0;
-
-        if (isDragStart && isTouch && pinchOutside) {
-          timer = setTimeout(function () {
-            addEvent(container, "touchstart", _this.onDragStart, {
-              passive: false
-            });
-          });
-        }
-
-        if (!isDragStart && isTouch && pinchOutside) {
-          removeEvent(container, "touchstart", _this.onDragStart);
-        }
-
-        if (_this.flag && isMultiTouch(e)) {
-          clearTimeout(timer);
-
-          if (isDragStart && e.touches.length !== e.changedTouches.length) {
-            return;
-          }
-
-          if (!_this.pinchFlag) {
-            _this.onPinchStart(e);
-          }
-        }
-      };
-
-      _this.onDrag = function (e, isScroll) {
-        if (!_this.flag) {
-          return;
-        }
-
-        var clients = getEventClients(e);
-
-        var result = _this.moveClients(clients, e, false);
-
-        if (_this.pinchFlag || result.deltaX || result.deltaY) {
-          var dragResult = _this.emit("drag", __assign({}, result, {
-            isScroll: !!isScroll,
-            inputEvent: e
-          }));
-
-          if (dragResult === false) {
-            _this.stop();
-
-            return;
-          }
-        }
-
-        if (_this.pinchFlag) {
-          _this.onPinch(e, clients);
-        }
-
-        _this.getCurrentStore().addClients(clients);
-      };
-
-      _this.onDragEnd = function (e) {
-        if (!_this.flag) {
-          return;
-        }
-
-        var _a = _this.options,
-            pinchOutside = _a.pinchOutside,
-            container = _a.container;
-
-        if (_this.isTouch && pinchOutside) {
-          removeEvent(container, "touchstart", _this.onDragStart);
-        }
-
-        _this.flag = false;
-
-        var position = _this.getCurrentStore().getPosition();
-
-        var currentTime = now();
-        var isDouble = !_this.isDrag && _this.doubleFlag;
-        _this.prevTime = _this.isDrag || isDouble ? 0 : currentTime;
-
-        _this.emit("dragEnd", __assign({
-          datas: _this.datas,
-          isDouble: isDouble,
-          isDrag: _this.isDrag,
-          isClick: !_this.isDrag,
-          inputEvent: e
-        }, position));
-
-        if (_this.pinchFlag) {
-          _this.onPinchEnd(e);
-        }
-
-        _this.clientStores = [];
-      };
-
-      _this.onBlur = function () {
-        _this.onDragEnd();
-      };
-
-      var elements = [].concat(targets);
-      _this.options = __assign({
-        checkInput: false,
-        container: elements.length > 1 ? window : elements[0],
-        preventRightClick: true,
-        preventDefault: true,
-        checkWindowBlur: false,
-        pinchThreshold: 0,
-        events: ["touch", "mouse"]
-      }, options);
-      var _a = _this.options,
-          container = _a.container,
-          events = _a.events,
-          checkWindowBlur = _a.checkWindowBlur;
-      _this.isTouch = events.indexOf("touch") > -1;
-      _this.isMouse = events.indexOf("mouse") > -1;
-      _this.targets = elements;
-
-      if (_this.isMouse) {
-        elements.forEach(function (el) {
-          addEvent(el, "mousedown", _this.onDragStart);
-        });
-        addEvent(container, "mousemove", _this.onDrag);
-        addEvent(container, "mouseup", _this.onDragEnd);
-        addEvent(container, "contextmenu", _this.onDragEnd);
-      }
-
-      if (checkWindowBlur) {
-        addEvent(window, "blur", _this.onBlur);
-      }
-
-      if (_this.isTouch) {
-        var passive_1 = {
-          passive: false
-        };
-        elements.forEach(function (el) {
-          addEvent(el, "touchstart", _this.onDragStart, passive_1);
-        });
-        addEvent(container, "touchmove", _this.onDrag, passive_1);
-        addEvent(container, "touchend", _this.onDragEnd, passive_1);
-        addEvent(container, "touchcancel", _this.onDragEnd, passive_1);
-      }
-
-      return _this;
-    }
-    /**
-     * Stop Gesto's drag events.
-     */
-
-
-    var __proto = Gesto.prototype;
-
-    __proto.stop = function () {
-      this.isDrag = false;
-      this.flag = false;
-      this.clientStores = [];
-      this.datas = {};
-    };
-    /**
-     * The total moved distance
-     */
-
-
-    __proto.getMovement = function (clients) {
-      return this.getCurrentStore().getMovement(clients) + this.clientStores.slice(1).reduce(function (prev, cur) {
-        return prev + cur.movement;
-      }, 0);
-    };
-    /**
-     * Whether to drag
-     */
-
-
-    __proto.isDragging = function () {
-      return this.isDrag;
-    };
-    /**
-     * Whether to start drag
-     */
-
-
-    __proto.isFlag = function () {
-      return this.flag;
-    };
-    /**
-     * Whether to start pinch
-     */
-
-
-    __proto.isPinchFlag = function () {
-      return this.pinchFlag;
-    };
-    /**
-    * Whether to start double click
-    */
-
-
-    __proto.isDoubleFlag = function () {
-      return this.doubleFlag;
-    };
-    /**
-     * Whether to pinch
-     */
-
-
-    __proto.isPinching = function () {
-      return this.isPinch;
-    };
-    /**
-     * If a scroll event occurs, it is corrected by the scroll distance.
-     */
-
-
-    __proto.scrollBy = function (deltaX, deltaY, e, isCallDrag) {
-      if (isCallDrag === void 0) {
-        isCallDrag = true;
-      }
-
-      if (!this.flag) {
-        return;
-      }
-
-      this.clientStores[0].move(deltaX, deltaY);
-      isCallDrag && this.onDrag(e, true);
-    };
-    /**
-     * Create a virtual drag event.
-     */
-
-
-    __proto.move = function (_a, inputEvent) {
-      var deltaX = _a[0],
-          deltaY = _a[1];
-      var store = this.getCurrentStore();
-      var nextClients = store.prevClients;
-      return this.moveClients(nextClients.map(function (_a) {
-        var clientX = _a.clientX,
-            clientY = _a.clientY;
-        return {
-          clientX: clientX + deltaX,
-          clientY: clientY + deltaY,
-          originalClientX: clientX,
-          originalClientY: clientY
-        };
-      }), inputEvent, true);
-    };
-    /**
-     * The dragStart event is triggered by an external event.
-     */
-
-
-    __proto.triggerDragStart = function (e) {
-      this.onDragStart(e, false);
-    };
-    /**
-     * Set the event data while dragging.
-     */
-
-
-    __proto.setEventDatas = function (datas) {
-      var currentDatas = this.datas;
-
-      for (var name in datas) {
-        currentDatas[name] = datas[name];
-      }
-
-      return this;
-    };
-    /**
-     * Set the event data while dragging.
-     */
-
-
-    __proto.getEventDatas = function () {
-      return this.datas;
-    };
-    /**
-     * Unset Gesto
-     */
-
-
-    __proto.unset = function () {
-      var _this = this;
-
-      var targets = this.targets;
-      var container = this.options.container;
-      this.off();
-      removeEvent(window, "blur", this.onBlur);
-
-      if (this.isMouse) {
-        targets.forEach(function (target) {
-          removeEvent(target, "mousedown", _this.onDragStart);
-        });
-        removeEvent(container, "mousemove", this.onDrag);
-        removeEvent(container, "mouseup", this.onDragEnd);
-        removeEvent(container, "contextmenu", this.onDragEnd);
-      }
-
-      if (this.isTouch) {
-        targets.forEach(function (target) {
-          removeEvent(target, "touchstart", _this.onDragStart);
-        });
-        removeEvent(container, "touchstart", this.onDragStart);
-        removeEvent(container, "touchmove", this.onDrag);
-        removeEvent(container, "touchend", this.onDragEnd);
-        removeEvent(container, "touchcancel", this.onDragEnd);
-      }
-    };
-
-    __proto.onPinchStart = function (e) {
-      var pinchThreshold = this.options.pinchThreshold;
-
-      if (this.isDrag && this.getMovement() > pinchThreshold) {
-        return;
-      }
-
-      var store = new ClientStore(getEventClients(e));
-      this.pinchFlag = true;
-      this.clientStores.splice(0, 0, store);
-      var result = this.emit("pinchStart", __assign({
-        datas: this.datas,
-        angle: store.getAngle(),
-        touches: this.getCurrentStore().getPositions()
-      }, store.getPosition(), {
-        inputEvent: e
-      }));
-
-      if (result === false) {
-        this.pinchFlag = false;
-      }
-    };
-
-    __proto.onPinch = function (e, clients) {
-      if (!this.flag || !this.pinchFlag || clients.length < 2) {
-        return;
-      }
-
-      var store = this.getCurrentStore();
-      this.isPinch = true;
-      this.emit("pinch", __assign({
-        datas: this.datas,
-        movement: this.getMovement(clients),
-        angle: store.getAngle(clients),
-        rotation: store.getRotation(clients),
-        touches: store.getPositions(clients),
-        scale: store.getScale(clients),
-        distance: store.getDistance(clients)
-      }, store.getPosition(clients), {
-        inputEvent: e
-      }));
-    };
-
-    __proto.onPinchEnd = function (e) {
-      if (!this.pinchFlag) {
-        return;
-      }
-
-      var isPinch = this.isPinch;
-      this.isPinch = false;
-      this.pinchFlag = false;
-      var store = this.getCurrentStore();
-      this.emit("pinchEnd", __assign({
-        datas: this.datas,
-        isPinch: isPinch,
-        touches: store.getPositions()
-      }, store.getPosition(), {
-        inputEvent: e
-      }));
-      this.isPinch = false;
-      this.pinchFlag = false;
-    };
-
-    __proto.initDrag = function () {
-      this.clientStores = [];
-      this.pinchFlag = false;
-      this.doubleFlag = false;
-      this.prevTime = 0;
-      this.flag = false;
-    };
-
-    __proto.getCurrentStore = function () {
-      return this.clientStores[0];
-    };
-
-    __proto.moveClients = function (clients, inputEvent, isAdd) {
-      var store = this.getCurrentStore();
-      var position = store[isAdd ? "addClients" : "getPosition"](clients);
-      this.isDrag = true;
-      return __assign({
-        datas: this.datas
-      }, position, {
-        movement: this.getMovement(clients),
-        isDrag: this.isDrag,
-        isPinch: this.isPinch,
-        isScroll: false,
-        inputEvent: inputEvent
-      });
-    };
-
-    return Gesto;
-  }(EventEmitter$1);
-
-  var Gesto$1 = Gesto;
-
-  const _sfc_main$f = vue.defineComponent({
-    name: "m-editor-resize",
-    props: {
-      type: {
-        type: String
-      }
-    },
-    setup(props) {
-      const services = vue.inject("services");
-      const target = vue.ref();
-      let getso;
-      vue.onMounted(() => {
-        if (!target.value)
-          return;
-        getso = new Gesto$1(target.value, {
-          container: window,
-          pinchOutside: true
-        }).on("drag", (e) => {
-          if (!target.value || !services)
-            return;
-          let { left, right } = {
-            ...vue.toRaw(services.uiService.get("columnWidth"))
-          };
-          if (props.type === "left") {
-            left += e.deltaX;
-          } else if (props.type === "right") {
-            right -= e.deltaX;
-          }
-          services.uiService.set("columnWidth", {
-            left,
-            right
-          });
-        });
-      });
-      vue.onUnmounted(() => {
-        getso?.unset();
-      });
-      return {
-        target
-      };
-    }
-  });
-  const _hoisted_1$a = {
-    ref: "target",
-    class: "m-editor-resizer"
-  };
-  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ], 512);
-  }
-  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
-
-  const _sfc_main$e = vue.defineComponent({
-    components: {
-      AddPageBox,
-      Resizer
-    },
-    setup() {
-      const services = vue.inject("services");
-      const root = vue.computed(() => services?.editorService.get("root"));
-      return {
-        root,
-        pageLength: vue.computed(() => root.value?.items?.length || 0),
-        showSrc: vue.computed(() => services?.uiService.get("showSrc")),
-        columnWidth: vue.computed(() => services?.uiService.get("columnWidth")),
-        saveCode(value) {
-          try {
-            services?.editorService.set("root", eval(value));
-          } catch (e) {
-            console.error(e);
+    },
+    setup() {
+      const { editorService, uiService } = vue.inject("services") || {};
+      const root = vue.computed(() => editorService?.get("root"));
+      return {
+        root,
+        pageLength: vue.computed(() => editorService?.get("pageLength") || 0),
+        showSrc: vue.computed(() => uiService?.get("showSrc")),
+        columnWidth: vue.computed(() => uiService?.get("columnWidth")),
+        saveCode(value) {
+          try {
+            editorService?.set("root", eval(value));
+          } catch (e) {
+            console.error(e);
           }
         }
       };
     }
   });
-  const _hoisted_1$9 = { class: "m-editor" };
-  const _hoisted_2$5 = {
+  const _hoisted_1$8 = { class: "m-editor" };
+  const _hoisted_2$3 = {
     key: 1,
     class: "m-editor-content"
   };
-  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     const _component_add_page_box = vue.resolveComponent("add-page-box");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
       vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
       _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
         key: 0,
         class: "m-editor-content",
         "init-values": _ctx.root,
+        options: _ctx.codeOptions,
         onSave: _ctx.saveCode
-      }, null, 8, ["init-values", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
+      }, null, 8, ["init-values", "options", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
         vue.createElementVNode("div", {
           class: "m-editor-framework-left",
           style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
@@ -2651,9 +1705,9 @@
       ]))
     ]);
   }
-  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$f = vue.defineComponent({
     name: "m-icon",
     components: { Edit: icons.Edit },
     props: {
@@ -2667,8 +1721,8 @@
       };
     }
   });
-  const _hoisted_1$8 = ["src"];
-  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$7 = ["src"];
+  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_edit = vue.resolveComponent("edit");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return !_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -2679,7 +1733,7 @@
     })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createElementBlock("img", {
       key: 1,
       src: _ctx.icon
-    }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+    }, null, 8, _hoisted_1$7)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
       key: 2,
       class: vue.normalizeClass(_ctx.icon)
     }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
@@ -2689,9 +1743,9 @@
       _: 1
     }));
   }
-  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     components: { MIcon, ArrowDown: icons.ArrowDown },
     props: {
       data: {
@@ -2701,16 +1755,20 @@
           type: "text",
           display: false
         })
+      },
+      eventType: {
+        type: String,
+        default: "click"
       }
     },
     setup(props) {
       const services = vue.inject("services");
       const uiService = services?.uiService;
-      const zoomInHandler = () => uiService?.set("zoom", zoom.value + 0.1);
-      const zoomOutHandler = () => uiService?.set("zoom", zoom.value - 0.1);
       const zoom = vue.computed(() => uiService?.get("zoom") ?? 1);
       const showGuides = vue.computed(() => uiService?.get("showGuides") ?? true);
       const showRule = vue.computed(() => uiService?.get("showRule") ?? true);
+      const zoomInHandler = () => uiService?.zoom(0.1);
+      const zoomOutHandler = () => uiService?.zoom(-0.1);
       const item = vue.computed(() => {
         if (typeof props.data !== "string") {
           return props.data;
@@ -2727,15 +1785,15 @@
           case "delete":
             return {
               type: "button",
-              icon: icons.Delete,
+              icon: vue.markRaw(icons.Delete),
               tooltip: "\u522A\u9664",
-              disabled: () => services?.editorService.get("node")?.type === "page",
+              disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
               handler: () => services?.editorService.remove(services?.editorService.get("node"))
             };
           case "undo":
             return {
               type: "button",
-              icon: icons.Back,
+              icon: vue.markRaw(icons.Back),
               tooltip: "\u540E\u9000",
               disabled: () => !services?.historyService.state.canUndo,
               handler: () => services?.editorService.undo()
@@ -2743,7 +1801,7 @@
           case "redo":
             return {
               type: "button",
-              icon: icons.Right,
+              icon: vue.markRaw(icons.Right),
               tooltip: "\u524D\u8FDB",
               disabled: () => !services?.historyService.state.canRedo,
               handler: () => services?.editorService.redo()
@@ -2751,28 +1809,28 @@
           case "zoom-in":
             return {
               type: "button",
-              icon: icons.ZoomIn,
+              icon: vue.markRaw(icons.ZoomIn),
               tooltip: "\u653E\u5927",
               handler: zoomInHandler
             };
           case "zoom-out":
             return {
               type: "button",
-              icon: icons.ZoomOut,
+              icon: vue.markRaw(icons.ZoomOut),
               tooltip: "\u7E2E\u5C0F",
               handler: zoomOutHandler
             };
           case "rule":
             return {
               type: "button",
-              icon: icons.ScaleToOriginal,
+              icon: vue.markRaw(icons.ScaleToOriginal),
               tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
               handler: () => uiService?.set("showRule", !showRule.value)
             };
           case "guides":
             return {
               type: "button",
-              icon: icons.Grid,
+              icon: vue.markRaw(icons.Grid),
               tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
               handler: () => uiService?.set("showGuides", !showGuides.value)
             };
@@ -2793,9 +1851,16 @@
         }
         return item.value.disabled;
       });
+      const buttonHandler = (item2, event) => {
+        if (disabled.value)
+          return;
+        if (typeof item2.handler === "function" && services) {
+          item2.handler?.(services, event);
+        }
+      };
       return {
-        ZoomIn: icons.ZoomIn,
-        ZoomOut: icons.ZoomOut,
+        ZoomIn: vue.markRaw(icons.ZoomIn),
+        ZoomOut: vue.markRaw(icons.ZoomOut),
         item,
         zoom,
         disabled,
@@ -2816,31 +1881,42 @@
             command.item.handler(services);
           }
         },
-        buttonHandler(item2) {
-          if (disabled.value)
+        clickHandler(item2, event) {
+          if (props.eventType !== "click")
+            return;
+          if (item2.type === "button") {
+            buttonHandler(item2, event);
+          }
+        },
+        mousedownHandler(item2, event) {
+          if (props.eventType !== "mousedown")
+            return;
+          if (item2.type === "button") {
+            buttonHandler(item2, event);
+          }
+        },
+        mouseupHandler(item2, event) {
+          if (props.eventType !== "mouseup")
             return;
-          if (typeof item2.handler === "function") {
-            item2.handler?.(services);
+          if (item2.type === "button") {
+            buttonHandler(item2, event);
           }
         }
       };
     }
   });
-  const _hoisted_1$7 = {
-    key: 0,
-    class: "menu-item"
-  };
-  const _hoisted_2$4 = {
+  const _hoisted_1$6 = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_3$3 = {
+  const _hoisted_2$2 = {
     class: "menu-item-text",
     style: { "margin": "0 5px" }
   };
-  const _hoisted_4$3 = { class: "el-dropdown-link menubar-menu-button" };
-  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_3$1 = { class: "el-dropdown-link menubar-menu-button" };
+  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_divider = vue.resolveComponent("el-divider");
+    const _component_tool_button = vue.resolveComponent("tool-button", true);
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -2849,44 +1925,66 @@
     const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
     const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
     const _component_el_dropdown = vue.resolveComponent("el-dropdown");
-    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass(["menu-item", _ctx.item.type]),
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickHandler(_ctx.item, $event)),
+      onMousedown: _cache[1] || (_cache[1] = ($event) => _ctx.mousedownHandler(_ctx.item, $event)),
+      onMouseup: _cache[2] || (_cache[2] = ($event) => _ctx.mouseupHandler(_ctx.item, $event))
+    }, [
       _ctx.item.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
         key: 0,
-        direction: "vertical"
-      })) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-        vue.createVNode(_component_m_icon, {
-          icon: _ctx.ZoomIn,
-          onClick: _ctx.zoomInHandler
-        }, null, 8, ["icon", "onClick"]),
-        vue.createElementVNode("span", _hoisted_3$3, vue.toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
-        vue.createVNode(_component_m_icon, {
-          icon: _ctx.ZoomOut,
-          onClick: _ctx.zoomOutHandler
-        }, null, 8, ["icon", "onClick"])
-      ], 64)) : _ctx.item.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
-        key: 3,
-        effect: "dark",
-        placement: "bottom-start",
-        content: _ctx.item.tooltip || _ctx.item.text
-      }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(_component_el_button, {
-            size: "small",
-            type: "text",
-            disabled: _ctx.disabled,
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.buttonHandler(_ctx.item))
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_component_m_icon, {
-                icon: _ctx.item.icon
-              }, null, 8, ["icon"]),
-              vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled"])
-        ]),
-        _: 1
-      }, 8, ["content"])) : _ctx.item.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
+        direction: _ctx.item.direction || "vertical"
+      }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+        vue.createVNode(_component_tool_button, {
+          data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
+          "event-type": _ctx.eventType
+        }, null, 8, ["data", "event-type"]),
+        vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
+        vue.createVNode(_component_tool_button, {
+          data: { type: "button", icon: _ctx.ZoomIn, handler: _ctx.zoomInHandler, tooltip: "\u653E\u5927" },
+          "event-type": _ctx.eventType
+        }, null, 8, ["data", "event-type"])
+      ], 64)) : _ctx.item.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+        _ctx.item.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+          key: 0,
+          effect: "dark",
+          placement: "bottom-start",
+          content: _ctx.item.tooltip
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_el_button, {
+              size: "small",
+              text: "",
+              disabled: _ctx.disabled
+            }, {
+              default: vue.withCtx(() => [
+                _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+                  key: 0,
+                  icon: _ctx.item.icon
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          _: 1
+        }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
+          key: 1,
+          size: "small",
+          text: "",
+          disabled: _ctx.disabled
+        }, {
+          default: vue.withCtx(() => [
+            _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+              key: 0,
+              icon: _ctx.item.icon
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"]))
+      ], 64)) : _ctx.item.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
         key: 4,
         trigger: "click",
         disabled: _ctx.disabled,
@@ -2911,7 +2009,7 @@
           })) : vue.createCommentVNode("", true)
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("span", _hoisted_4$3, [
+          vue.createElementVNode("span", _hoisted_3$1, [
             vue.createTextVNode(vue.toDisplayString(_ctx.item.text), 1),
             vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
               default: vue.withCtx(() => [
@@ -2923,11 +2021,11 @@
         ]),
         _: 1
       }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.item.component), vue.normalizeProps(vue.mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : vue.createCommentVNode("", true)
-    ])) : vue.createCommentVNode("", true);
+    ], 34)) : vue.createCommentVNode("", true);
   }
-  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "nav-menu",
     components: { ToolButton },
     props: {
@@ -2947,7 +2045,7 @@
       };
     }
   });
-  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: "m-editor-nav-menu",
@@ -2969,9 +2067,9 @@
       }), 128))
     ], 4);
   }
-  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
-  const _sfc_main$a = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -2986,9 +2084,9 @@
           curFormConfig.value = [];
           return;
         }
-        values.value = node.value;
         const type = node.value.type || (node.value.items ? "container" : "text");
         curFormConfig.value = await services?.propsService.getPropsConfig(type) || [];
+        values.value = node.value;
       };
       vue.watchEffect(init);
       services?.propsService.on("props-configs-change", init);
@@ -2999,6 +2097,7 @@
         values,
         configForm,
         curFormConfig,
+        propsPanelSize: vue.computed(() => services?.uiService.get("propsPanelSize") || "small"),
         async submit() {
           try {
             const values2 = await configForm.value?.submitForm();
@@ -3017,21 +2116,21 @@
       };
     }
   });
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form = vue.resolveComponent("m-form");
     return vue.openBlock(), vue.createBlock(_component_m_form, {
-      class: "m-editor-props-panel",
-      "popper-class": "m-editor-props-panel-popper",
+      class: vue.normalizeClass(`m-editor-props-panel ${_ctx.propsPanelSize}`),
+      "popper-class": `m-editor-props-panel-popper ${_ctx.propsPanelSize}`,
       ref: "configForm",
-      size: "small",
+      size: _ctx.propsPanelSize,
       "init-values": _ctx.values,
       config: _ctx.curFormConfig,
       onChange: _ctx.submit
-    }, null, 8, ["init-values", "config", "onChange"]);
+    }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"]);
   }
-  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
-  const _sfc_main$9 = vue.defineComponent({
+  const _sfc_main$b = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
@@ -3046,19 +2145,29 @@
         searchText,
         collapseValue,
         list,
-        appendComponent({ text, type, ...config }) {
+        appendComponent({ text, type, data = {} }) {
           services?.editorService.add({
             name: text,
             type,
-            ...config
+            ...data
           });
+        },
+        dragstartHandler({ text, type, data = {} }, e) {
+          if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("data", serialize__default["default"]({
+              name: text,
+              type,
+              ...data
+            }).replace(/"(\w+)":\s/g, "$1: "));
+          }
         }
       };
     }
   });
-  const _hoisted_1$6 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-  const _hoisted_2$3 = ["onClick"];
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+  const _hoisted_2$1 = ["onClick", "onDragstart"];
+  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -3088,15 +2197,17 @@
                   name: index
                 }, {
                   title: vue.withCtx(() => [
-                    _hoisted_1$6,
+                    _hoisted_1$5,
                     vue.createTextVNode(vue.toDisplayString(group.title), 1)
                   ]),
                   default: vue.withCtx(() => [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         class: "component-item",
+                        draggable: "true",
                         key: item.type,
-                        onClick: ($event) => _ctx.appendComponent(item)
+                        onClick: ($event) => _ctx.appendComponent(item),
+                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event)
                       }, [
                         vue.createVNode(_component_m_icon, {
                           icon: item.icon
@@ -3111,7 +2222,7 @@
                           ]),
                           _: 2
                         }, 1032, ["content"])
-                      ], 8, _hoisted_2$3);
+                      ], 40, _hoisted_2$1);
                     }), 128))
                   ]),
                   _: 2
@@ -3125,135 +2236,220 @@
       _: 1
     });
   }
-  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
-  const _sfc_main$8 = vue.defineComponent({
-    name: "magic-editor-content-menu",
+  const _sfc_main$a = vue.defineComponent({
+    components: { ToolButton },
     props: {
-      componentGroupList: {
+      menuData: {
         type: Array,
         default: () => []
       }
     },
-    setup(props) {
-      const services = vue.inject("services");
-      const subVisible = vue.ref(false);
-      const node = vue.computed(() => services?.editorService.get("node"));
+    setup() {
+      const menu = vue.ref();
+      const subMenu = vue.ref();
+      const visible = vue.ref(false);
+      const subMenuData = vue.ref([]);
+      const menuStyle = vue.ref({
+        left: "0",
+        top: "0"
+      });
+      const hide = () => {
+        visible.value = false;
+      };
+      vue.onMounted(() => {
+        globalThis.addEventListener("mousedown", (e) => {
+          if (!visible.value || e.target && menu.value?.contains(e.target)) {
+            return;
+          }
+          hide();
+        }, true);
+      });
       return {
-        subVisible,
-        node,
-        menu: vue.computed(() => ({
-          app: [
-            {
-              type: "page",
-              text: "\u9875\u9762"
+        menu,
+        subMenu,
+        visible,
+        menuStyle,
+        subMenuData,
+        hide,
+        show(e) {
+          visible.value = true;
+          vue.nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
+            let top = e.clientY;
+            if (menuHeight + e.clientY > document.body.clientHeight) {
+              top = document.body.clientHeight - menuHeight;
             }
-          ],
-          component: props.componentGroupList
-        })),
-        append(config) {
-          services?.editorService.add({
-            name: config.text,
-            type: config.type
+            menuStyle.value = {
+              top: `${top}px`,
+              left: `${e.clientX}px`
+            };
           });
         },
-        remove() {
-          node.value && services?.editorService.remove(node.value);
-        },
-        copy(node2) {
-          services?.editorService.copy(node2);
-        },
-        setSubVisiable(v) {
-          subVisible.value = v;
+        showSubMenu(item) {
+          const menuItem = item;
+          if (typeof item !== "object" || !menuItem.items?.length) {
+            return;
+          }
+          subMenuData.value = menuItem.items;
+          if (menu.value) {
+            subMenu.value.show({
+              clientX: menu.value.offsetLeft + menu.value.clientWidth,
+              clientY: menu.value.offsetTop
+            });
+          }
         }
       };
     }
   });
-  const _hoisted_1$5 = {
-    key: 0,
-    class: "magic-editor-content-menu"
-  };
-  const _hoisted_2$2 = ["onClick"];
-  const _hoisted_3$2 = ["onClick"];
-  const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-    return _ctx.node ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-      _ctx.node.items ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        class: "magic-editor-content-menu-item",
-        onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.setSubVisiable(true)),
-        onMouseleave: _cache[1] || (_cache[1] = ($event) => _ctx.setSubVisiable(false))
-      }, " \u65B0\u589E ", 32)) : vue.createCommentVNode("", true),
-      _ctx.node.type !== "app" ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 1,
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[2] || (_cache[2] = () => _ctx.copy(_ctx.node))
-      }, "\u590D\u5236")) : vue.createCommentVNode("", true),
-      _ctx.node.type !== "app" && _ctx.node.type !== "page" ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 2,
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[3] || (_cache[3] = () => _ctx.remove())
-      }, " \u5220\u9664 ")) : vue.createCommentVNode("", true),
-      vue.withDirectives(vue.createElementVNode("div", {
-        class: "subMenu",
-        onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.setSubVisiable(true)),
-        onMouseleave: _cache[6] || (_cache[6] = ($event) => _ctx.setSubVisiable(false))
-      }, [
-        vue.createVNode(_component_el_scrollbar, null, {
-          default: vue.withCtx(() => [
-            _ctx.node.type === "tabs" ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "magic-editor-content-menu-item",
-              onClick: _cache[4] || (_cache[4] = () => _ctx.append({
-                type: "tab-pane"
-              }))
-            }, " \u6807\u7B7E ")) : _ctx.node.type === "app" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.menu.app, (item) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                class: "magic-editor-content-menu-item",
-                key: item.type,
-                onClick: () => _ctx.append(item)
-              }, vue.toDisplayString(item.text), 9, _hoisted_2$2);
-            }), 128)) : _ctx.node.items ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(_ctx.menu.component, (list) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                key: list.title
-              }, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.items, (item) => {
-                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                    item ? (vue.openBlock(), vue.createElementBlock("div", {
-                      class: "magic-editor-content-menu-item",
-                      key: item.type,
-                      onClick: () => _ctx.append(item)
-                    }, vue.toDisplayString(item.text), 9, _hoisted_3$2)) : vue.createCommentVNode("", true)
-                  ], 64);
-                }), 256)),
-                _hoisted_4$2
-              ]);
-            }), 128)) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 544), [
-        [vue.vShow, _ctx.subVisible]
-      ])
-    ])) : vue.createCommentVNode("", true);
+  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_tool_button = vue.resolveComponent("tool-button");
+    const _component_content_menu = vue.resolveComponent("content-menu", true);
+    return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: "magic-editor-content-menu",
+      ref: "menu",
+      style: vue.normalizeStyle(_ctx.menuStyle)
+    }, [
+      vue.createElementVNode("div", null, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
+          return vue.openBlock(), vue.createBlock(_component_tool_button, {
+            "event-type": "mouseup",
+            data: item,
+            key: index,
+            onMouseup: _ctx.hide,
+            onMouseenter: ($event) => _ctx.showSubMenu(item)
+          }, null, 8, ["data", "onMouseup", "onMouseenter"]);
+        }), 128))
+      ]),
+      (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+        vue.createVNode(_component_content_menu, {
+          class: "sub-menu",
+          ref: "subMenu",
+          "menu-data": _ctx.subMenuData
+        }, null, 8, ["menu-data"])
+      ]))
+    ], 4)), [
+      [vue.vShow, _ctx.visible]
+    ]) : vue.createCommentVNode("", true);
+  }
+  var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+
+  const _sfc_main$9 = vue.defineComponent({
+    components: { ContentMenu },
+    setup() {
+      const services = vue.inject("services");
+      const menu = vue.ref();
+      const node = vue.computed(() => services?.editorService.get("node"));
+      const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
+      const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
+      const componentList = vue.computed(() => services?.componentListService.getList() || []);
+      const createMenuItems = (group) => group.items.map((component) => ({
+        text: component.text,
+        type: "button",
+        icon: component.icon,
+        handler: () => {
+          services?.editorService.add({
+            name: component.text,
+            type: component.type,
+            ...component.data || {}
+          });
+        }
+      }));
+      const getSubMenuData = vue.computed(() => {
+        if (node.value?.type === "tabs") {
+          return [
+            {
+              text: "\u6807\u7B7E\u9875",
+              type: "button",
+              icon: icons.Files,
+              handler: () => {
+                services?.editorService.add({
+                  type: "tab-pane"
+                });
+              }
+            }
+          ];
+        }
+        if (node.value?.items) {
+          return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [
+            {
+              type: "divider",
+              direction: "horizontal"
+            }
+          ] : []), []) || [];
+        }
+        return [];
+      });
+      return {
+        menu,
+        menuData: vue.computed(() => [
+          {
+            type: "button",
+            text: "\u65B0\u589E",
+            icon: vue.markRaw(icons.Plus),
+            display: () => node.value?.items,
+            items: getSubMenuData.value
+          },
+          {
+            type: "button",
+            text: "\u590D\u5236",
+            icon: vue.markRaw(icons.DocumentCopy),
+            display: () => !isRoot.value,
+            handler: () => {
+              node.value && services?.editorService.copy(node.value);
+            }
+          },
+          {
+            type: "button",
+            text: "\u5220\u9664",
+            icon: vue.markRaw(icons.Delete),
+            display: () => !isRoot.value && !isPage.value,
+            handler: () => {
+              node.value && services?.editorService.remove(node.value);
+            }
+          }
+        ]),
+        show(e) {
+          menu.value?.show(e);
+        }
+      };
+    }
+  });
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_content_menu = vue.resolveComponent("content-menu");
+    return vue.openBlock(), vue.createBlock(_component_content_menu, {
+      "menu-data": _ctx.menuData,
+      ref: "menu",
+      style: { "overflow": "initial" }
+    }, null, 8, ["menu-data"]);
   }
-  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
-  const select = (data, editorService) => {
+  const throttleTime = 150;
+  const select = async (data, editorService) => {
     if (!data.id) {
       throw new Error("\u6CA1\u6709id");
     }
-    editorService?.select(data);
+    await editorService?.select(data);
+    editorService?.get("stage")?.select(data.id);
+  };
+  const highlight = (data, editorService) => {
+    if (!data?.id) {
+      throw new Error("\u6CA1\u6709id");
+    }
+    editorService?.highlight(data);
+    editorService?.get("stage")?.highlight(data.id);
   };
   const useDrop = (tree, editorService) => ({
     allowDrop: (draggingNode, dropNode, type) => {
       const { data } = dropNode || {};
       const { data: ingData } = draggingNode;
       const { type: ingType } = ingData;
-      if (ingType !== "page" && data.type === "page")
+      if (ingType !== schema.NodeType.PAGE && data.type === schema.NodeType.PAGE)
         return false;
-      if (ingType === "page" && data.type !== "page")
+      if (ingType === schema.NodeType.PAGE && data.type !== schema.NodeType.PAGE)
         return false;
       if (!data || !data.type)
         return false;
@@ -3272,29 +2468,35 @@
     }
   });
   const useStatus = (tree, editorService) => {
+    const highlightNode = vue.ref();
+    const node = vue.ref();
     const page = vue.computed(() => editorService?.get("page"));
     vue.watchEffect(() => {
       if (!tree.value)
         return;
-      const node = editorService?.get("node");
-      node && tree.value.setCurrentKey(node.id, true);
+      node.value = editorService?.get("node");
+      node.value && 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");
     });
     return {
       values: vue.computed(() => page.value ? [page.value] : []),
-      loadItems: (node, resolve) => {
-        if (Array.isArray(node.data)) {
-          return resolve(node.data);
+      loadItems: (node2, resolve) => {
+        if (Array.isArray(node2.data)) {
+          return resolve(node2.data);
         }
-        if (Array.isArray(node.data?.items)) {
-          return resolve(node.data?.items);
+        if (Array.isArray(node2.data?.items)) {
+          return resolve(node2.data?.items);
         }
         resolve([]);
-      }
+      },
+      highlightNode,
+      clickNode: node,
+      expandedKeys: vue.computed(() => node.value ? [node.value.id] : [])
     };
   };
   const useFilter = (tree) => ({
@@ -3306,69 +2508,64 @@
       let name = "";
       if (data.name) {
         name = data.name;
-      } else if (data.type) {
-        name = data.type;
       } else if (data.items) {
         name = "container";
       }
-      return name.indexOf(value) !== -1;
+      return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
     },
     filterTextChangeHandler(val) {
       tree.value?.filter(val);
     }
   });
-  const useContentMenu = (editorService) => {
-    const menuStyle = vue.ref({
-      position: "absolute",
-      left: "0",
-      top: "0",
-      display: "none"
-    });
-    vue.onMounted(() => {
-      document.addEventListener("click", () => {
-        menuStyle.value.display = "none";
-      }, true);
-    });
-    return {
-      menuStyle,
-      contextmenu(event, data) {
-        const bodyHeight = globalThis.document.body.clientHeight;
-        const left = `${event.clientX + 20}px`;
-        let top = `${event.clientY - 10}px`;
-        if (event.clientY + 300 > bodyHeight) {
-          top = `${bodyHeight - 300}px`;
-        }
-        menuStyle.value.left = left;
-        menuStyle.value.top = top;
-        menuStyle.value.display = "";
-        select(data, editorService);
-      }
-    };
-  };
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
       const services = vue.inject("services");
       const tree = vue.ref();
+      const menu = vue.ref();
+      const clicked = vue.ref(false);
       const editorService = services?.editorService;
+      const highlightHandler = lodashEs.throttle((data) => {
+        highlight(data, editorService);
+      }, throttleTime);
+      const toggleClickFlag = () => {
+        clicked.value = !clicked.value;
+      };
+      const statusData = useStatus(tree, editorService);
+      const canHighlight = vue.computed(() => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value);
+      editorService?.on("remove", () => {
+        setTimeout(() => {
+          tree.value?.getNode(editorService.get("node").id)?.updateChildren();
+        }, 0);
+      });
       return {
         tree,
+        menu,
+        ...statusData,
         ...useDrop(tree, editorService),
-        ...useStatus(tree, editorService),
         ...useFilter(tree),
-        ...useContentMenu(editorService),
+        highlightHandler,
+        toggleClickFlag,
+        canHighlight,
         clickHandler(data) {
           if (services?.uiService.get("uiSelectMode")) {
             document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
             return;
           }
+          tree.value?.setCurrentKey(data.id);
           select(data, editorService);
+        },
+        async contextmenu(event, data) {
+          event.preventDefault();
+          await select(data, editorService);
+          menu.value?.show(event);
         }
       };
     }
   });
-  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$4 = ["id", "onMouseenter"];
+  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
     const _component_layer_menu = vue.resolveComponent("layer-menu");
@@ -3389,6 +2586,7 @@
           ref: "tree",
           "node-key": "id",
           draggable: "",
+          "default-expanded-keys": _ctx.expandedKeys,
           load: _ctx.loadItems,
           data: _ctx.values,
           "expand-on-click-node": false,
@@ -3404,47 +2602,46 @@
           "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684"
         }, {
           default: vue.withCtx(({ node, data }) => [
-            vue.renderSlot(_ctx.$slots, "layer-node-content", {
-              node,
-              data
-            }, () => [
-              vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
-            ])
+            vue.createElementVNode("div", {
+              id: data.id,
+              class: vue.normalizeClass(["cus-tree-node", { "cus-tree-node-hover": _ctx.canHighlight && data.id === _ctx.highlightNode?.id }]),
+              onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
+              onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
+              onMouseenter: ($event) => _ctx.highlightHandler(data)
+            }, [
+              vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                node,
+                data
+              }, () => [
+                vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
+              ])
+            ], 42, _hoisted_1$4)
           ]),
           _: 3
-        }, 8, ["load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : vue.createCommentVNode("", true),
+        }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : vue.createCommentVNode("", true),
         (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-          vue.createVNode(_component_layer_menu, {
-            style: vue.normalizeStyle(_ctx.menuStyle)
-          }, null, 8, ["style"])
+          vue.createVNode(_component_layer_menu, { ref: "menu" }, null, 512)
         ]))
       ]),
       _: 3
     });
   }
-  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
-  const _sfc_main$6 = vue.defineComponent({
-    name: "m-sidebar",
+  const _sfc_main$7 = vue.defineComponent({
     components: { MIcon },
     props: {
       data: {
-        type: Object,
-        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+        type: Object
       }
     },
     setup(props) {
-      const activeTabName = vue.ref(props.data?.status);
-      vue.watch(() => props.data?.status, (status) => {
-        activeTabName.value = status || "0";
-      });
       return {
-        activeTabName,
-        items: vue.computed(() => props.data?.items.map((item) => {
-          if (typeof item !== "string") {
-            return item;
+        config: vue.computed(() => {
+          if (typeof props.data !== "string") {
+            return props.data;
           }
-          switch (item) {
+          switch (props.data) {
             case "component-list":
               return {
                 type: "component",
@@ -3462,21 +2659,75 @@
                 slots: {}
               };
             default:
-              return {};
+              return void 0;
           }
-        }))
+        })
+      };
+    }
+  });
+  const _hoisted_1$3 = {
+    key: 1,
+    class: "magic-editor-tab-panel-title"
+  };
+  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_m_icon = vue.resolveComponent("m-icon");
+    const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
+    return _ctx.config ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
+      key: 0,
+      name: _ctx.config.text
+    }, {
+      label: vue.withCtx(() => [
+        (vue.openBlock(), vue.createElementBlock("div", {
+          key: _ctx.config.text
+        }, [
+          _ctx.config.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+            key: 0,
+            icon: _ctx.config.icon
+          }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
+        ]))
+      ]),
+      default: vue.withCtx(() => [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.mergeProps(_ctx.config.props || {}, vue.toHandlers(_ctx.config?.listeners || {})), vue.createSlots({ _: 2 }, [
+          _ctx.config.slots?.layerNodeContent ? {
+            name: "layer-node-content",
+            fn: vue.withCtx(({ data, node }) => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots?.layerNodeContent), {
+                data,
+                node
+              }, null, 8, ["data", "node"]))
+            ])
+          } : void 0
+        ]), 1040))
+      ]),
+      _: 1
+    }, 8, ["name"])) : vue.createCommentVNode("", true);
+  }
+  var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+
+  const _sfc_main$6 = vue.defineComponent({
+    components: { TabPane },
+    name: "m-sidebar",
+    props: {
+      data: {
+        type: Object,
+        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+      }
+    },
+    setup(props) {
+      const activeTabName = vue.ref(props.data?.status);
+      vue.watch(() => props.data?.status, (status) => {
+        activeTabName.value = status || "0";
+      });
+      return {
+        activeTabName
       };
     }
   });
-  const _hoisted_1$4 = {
-    key: 1,
-    class: "magic-editor-tab-panel-title"
-  };
   function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_m_icon = vue.resolveComponent("m-icon");
-    const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
+    const _component_tab_pane = vue.resolveComponent("tab-pane");
     const _component_el_tabs = vue.resolveComponent("el-tabs");
-    return _ctx.data.type === "tabs" ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
+    return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
       key: 0,
       class: "m-editor-sidebar",
       modelValue: _ctx.activeTabName,
@@ -3485,35 +2736,11 @@
       "tab-position": "left"
     }, {
       default: vue.withCtx(() => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
-          return vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
-            key: item.text,
-            name: item.text
-          }, {
-            label: vue.withCtx(() => [
-              vue.createElementVNode("span", null, [
-                item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
-                  key: 0,
-                  icon: item.icon
-                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                item.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true)
-              ])
-            ]),
-            default: vue.withCtx(() => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.component), vue.mergeProps(item.props || {}, vue.toHandlers(item.listeners || {})), vue.createSlots({ _: 2 }, [
-                item.slots?.layerNodeContent ? {
-                  name: "layer-node-content",
-                  fn: vue.withCtx(({ data, node }) => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.slots.layerNodeContent), {
-                      data,
-                      node
-                    }, null, 8, ["data", "node"]))
-                  ])
-                } : void 0
-              ]), 1040))
-            ]),
-            _: 2
-          }, 1032, ["name"]);
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item, index) => {
+          return vue.openBlock(), vue.createBlock(_component_tab_pane, {
+            key: index,
+            data: item
+          }, null, 8, ["data"]);
         }), 128))
       ]),
       _: 1
@@ -3521,13 +2748,81 @@
   }
   var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
 
+  const useScroll = (root) => {
+    const pageBar = vue.ref();
+    const itemsContainer = vue.ref();
+    const pageBarWidth = vue.ref(0);
+    const canScroll = vue.ref(false);
+    const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 105);
+    let translateLeft = 0;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        const { width } = contentRect;
+        pageBarWidth.value = width || 0;
+        setCanScroll();
+      }
+    });
+    const setCanScroll = () => {
+      if (itemsContainer.value) {
+        canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+      }
+    };
+    const scroll = (type) => {
+      if (!itemsContainer.value)
+        return;
+      const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+      if (type === "left") {
+        translateLeft += 100;
+        if (translateLeft > 0) {
+          translateLeft = 0;
+        }
+      } else if (type === "right") {
+        translateLeft -= 100;
+        if (-translateLeft > maxScrollLeft) {
+          translateLeft = -maxScrollLeft;
+        }
+      } else if (type === "start") {
+        translateLeft = 0;
+      } else if (type === "end") {
+        translateLeft = -maxScrollLeft;
+      }
+      itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+    };
+    vue.onMounted(() => {
+      pageBar.value && resizeObserver.observe(pageBar.value);
+    });
+    vue.onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
+    vue.watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll("start");
+        } else {
+          scroll("end");
+        }
+      });
+    });
+    return {
+      pageBar,
+      itemsContainer,
+      canScroll,
+      itemsContainerWidth,
+      scroll
+    };
+  };
   const _sfc_main$5 = vue.defineComponent({
-    components: { CaretBottom: icons.CaretBottom, Plus: icons.Plus },
+    components: { ArrowLeftBold: icons.ArrowLeftBold, ArrowRightBold: icons.ArrowRightBold, CaretBottom: icons.CaretBottom, Plus: icons.Plus, ToolButton },
     setup() {
       const services = vue.inject("services");
       const editorService = services?.editorService;
+      const root = vue.computed(() => editorService?.get("root"));
       return {
-        root: vue.computed(() => editorService?.get("root")),
+        Delete: vue.markRaw(icons.Delete),
+        DocumentCopy: vue.markRaw(icons.DocumentCopy),
+        ...useScroll(root),
+        root,
         page: vue.computed(() => editorService?.get("page")),
         switchPage(page) {
           editorService?.select(page);
@@ -3536,7 +2831,7 @@
           if (!editorService)
             return;
           const pageConfig = {
-            type: "page",
+            type: schema.NodeType.PAGE,
             name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
           };
           editorService.add(pageConfig);
@@ -3554,99 +2849,228 @@
       };
     }
   });
-  const _hoisted_1$3 = { class: "m-editor-page-bar" };
-  const _hoisted_2$1 = ["onClick"];
-  const _hoisted_3$1 = ["onClick"];
-  const _hoisted_4$1 = ["onClick"];
+  const _hoisted_1$2 = {
+    class: "m-editor-page-bar",
+    ref: "pageBar"
+  };
+  const _hoisted_2 = ["onClick"];
+  const _hoisted_3 = { class: "m-editor-page-bar-title" };
   function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
+    const _component_arrow_left_bold = vue.resolveComponent("arrow-left-bold");
+    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+    const _component_tool_button = vue.resolveComponent("tool-button");
     const _component_caret_bottom = vue.resolveComponent("caret-bottom");
     const _component_el_popover = vue.resolveComponent("el-popover");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+    const _component_arrow_right_bold = vue.resolveComponent("arrow-right-bold");
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
       vue.createElementVNode("div", {
-        class: "m-editor-page-bar-item",
+        id: "m-editor-page-bar-add-icon",
+        class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
         onClick: _cache[0] || (_cache[0] = (...args) => _ctx.addPage && _ctx.addPage(...args))
       }, [
-        vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-add-icon" }, {
+        vue.createVNode(_component_el_icon, null, {
           default: vue.withCtx(() => [
             vue.createVNode(_component_plus)
           ]),
           _: 1
         })
       ]),
-      _ctx.root ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.root.items, (item) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          key: item.key,
-          class: vue.normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
-          onClick: ($event) => _ctx.switchPage(item)
-        }, [
-          vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-            vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
+      _ctx.canScroll ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.scroll("left"))
+      }, [
+        vue.createVNode(_component_el_icon, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_arrow_left_bold)
           ]),
-          vue.createVNode(_component_el_popover, {
-            placement: "top",
-            width: 160,
-            trigger: "hover"
-          }, {
-            reference: vue.withCtx(() => [
-              vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_caret_bottom)
-                ]),
-                _: 1
-              })
-            ]),
-            default: vue.withCtx(() => [
-              vue.createElementVNode("div", null, [
-                vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                  vue.createElementVNode("div", {
-                    class: "magic-editor-content-menu-item",
-                    onClick: () => _ctx.copy(item)
-                  }, "\u590D\u5236", 8, _hoisted_3$1),
-                  vue.createElementVNode("div", {
-                    class: "magic-editor-content-menu-item",
-                    onClick: () => _ctx.remove(item)
-                  }, "\u5220\u9664", 8, _hoisted_4$1)
-                ])
+          _: 1
+        })
+      ])) : vue.createCommentVNode("", true),
+      _ctx.root ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        class: "m-editor-page-bar-items",
+        ref: "itemsContainer",
+        style: vue.normalizeStyle(`width: ${_ctx.itemsContainerWidth}px`)
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.root.items, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: item.key,
+            class: vue.normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
+            onClick: ($event) => _ctx.switchPage(item)
+          }, [
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+                vue.createVNode(_component_el_tooltip, {
+                  effect: "dark",
+                  placement: "top-start",
+                  content: item.name
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["content"])
               ])
             ]),
-            _: 2
-          }, 1024)
-        ], 10, _hoisted_2$1);
-      }), 128)) : vue.createCommentVNode("", true)
-    ]);
+            vue.createVNode(_component_el_popover, {
+              "popper-class": "page-bar-popover",
+              placement: "top",
+              width: 160,
+              trigger: "hover"
+            }, {
+              reference: vue.withCtx(() => [
+                vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_caret_bottom)
+                  ]),
+                  _: 1
+                })
+              ]),
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", null, [
+                  vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                    vue.createVNode(_component_tool_button, {
+                      data: {
+                        type: "button",
+                        text: "\u590D\u5236",
+                        icon: _ctx.DocumentCopy,
+                        handler: () => _ctx.copy(item)
+                      }
+                    }, null, 8, ["data"]),
+                    vue.createVNode(_component_tool_button, {
+                      data: {
+                        type: "button",
+                        text: "\u5220\u9664",
+                        icon: _ctx.Delete,
+                        handler: () => _ctx.remove(item)
+                      }
+                    }, null, 8, ["data"])
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1024)
+          ], 10, _hoisted_2);
+        }), 128))
+      ], 4)) : vue.createCommentVNode("", true),
+      _ctx.canScroll ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 2,
+        class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.scroll("right"))
+      }, [
+        vue.createVNode(_component_el_icon, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_arrow_right_bold)
+          ]),
+          _: 1
+        })
+      ])) : vue.createCommentVNode("", true)
+    ], 512);
   }
   var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 
   class ScrollViewer$1 {
-    enter = false;
-    targetEnter = false;
-    keydown = false;
-    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;
+    constructor(options) {
+      this.enter = false;
+      this.targetEnter = false;
+      this.keydown = false;
+      this.zoom = 1;
+      this.scrollLeft = 0;
+      this.scrollTop = 0;
+      this.x = 0;
+      this.y = 0;
+      this.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();
         }
+      });
+      this.wheelHandler = (event) => {
+        if (this.targetEnter)
+          return;
+        const { deltaX, deltaY, currentTarget } = event;
+        if (currentTarget !== this.container)
+          return;
+        this.setScrollOffset(deltaX, deltaY);
         this.scroll();
-      }
-    });
-    constructor(options) {
+        this.scrollLeft = this.target._left;
+        this.scrollTop = this.target._top;
+      };
+      this.mouseEnterHandler = () => {
+        this.enter = true;
+      };
+      this.mouseLeaveHandler = () => {
+        this.enter = false;
+      };
+      this.targetMouseEnterHandler = () => {
+        this.targetEnter = true;
+      };
+      this.targetMouseLeaveHandler = () => {
+        this.targetEnter = false;
+      };
+      this.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);
+      };
+      this.mouseupHandler = () => {
+        this.x = 0;
+        this.y = 0;
+        this.scrollLeft = this.target._left;
+        this.scrollTop = this.target._top;
+        this.removeHandler();
+      };
+      this.mousemoveHandler = (event) => {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        const deltaX = event.clientX - this.x;
+        const deltaY = event.clientY - this.y;
+        this.setScrollOffset(deltaX, deltaY);
+        this.scroll();
+      };
+      this.keydownHandler = (event) => {
+        if (event.code === Keys.ESCAPE && this.enter) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+        }
+        if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
+          return;
+        }
+        this.keydown = true;
+        this.target.style.cursor = "grab";
+        this.container.addEventListener("mousedown", this.mousedownHandler);
+      };
+      this.keyupHandler = (event) => {
+        if (event.code !== Keys.ESCAPE || !this.keydown) {
+          return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        this.keydown = false;
+        event.preventDefault();
+        this.removeHandler();
+      };
       this.container = options.container;
       this.target = options.target;
       this.zoom = options.zoom;
@@ -3682,79 +3106,6 @@
       document.removeEventListener("mousemove", this.mousemoveHandler);
       document.removeEventListener("mouseup", this.mouseupHandler);
     }
-    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();
-      }
-      if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-        return;
-      }
-      this.keydown = true;
-      this.target.style.cursor = "grab";
-      this.container.addEventListener("mousedown", this.mousedownHandler);
-    };
-    keyupHandler = (event) => {
-      if (event.code !== Keys.ESCAPE || !this.keydown) {
-        return;
-      }
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      this.keydown = false;
-      event.preventDefault();
-      this.removeHandler();
-    };
     setScrollOffset(deltaX, deltaY) {
       const { width, height } = this.container.getBoundingClientRect();
       const targetRect = this.target.getBoundingClientRect();
@@ -3815,19 +3166,19 @@
         el,
         style: vue.computed(() => `
         width: ${props.width}px;
-        height: ${props.height}px;
+        height: ${(props.height || 0) - 40}px;
         position: absolute;
         margin-top: 30px;
       `)
       };
     }
   });
-  const _hoisted_1$2 = {
+  const _hoisted_1$1 = {
     class: "m-editor-scroll-viewer-container",
     ref: "container"
   };
   function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
       vue.createElementVNode("div", {
         ref: "el",
         style: vue.normalizeStyle(_ctx.style)
@@ -3839,7 +3190,7 @@
   var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
   const _sfc_main$3 = vue.defineComponent({
-    name: "magic-editor-ui-viewer-menu",
+    components: { ContentMenu },
     setup() {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -3848,6 +3199,7 @@
       const canCenter = vue.ref(false);
       const node = vue.computed(() => editorService?.get("node"));
       const parent = vue.computed(() => editorService?.get("parent"));
+      const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       vue.onMounted(() => {
         const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
         canPaste.value = data !== "undefined" && !!data;
@@ -3856,137 +3208,118 @@
         if (!parent.value || !editorService)
           return canCenter.value = false;
         const layout = await editorService.getLayout(parent.value);
-        canCenter.value = [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !["app", "page", "pop"].includes(`${node.value?.type}`);
+        canCenter.value = [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${node.value?.type}`);
       }, { immediate: true });
       return {
         menu,
-        canPaste,
-        canDelete: vue.computed(() => node.value?.type !== "page"),
-        canMoveZPos: vue.computed(() => node.value?.type !== "page"),
-        canCenter,
-        center() {
-          node.value && editorService?.alignCenter(node.value);
-        },
-        copy() {
-          node.value && editorService?.copy(node.value);
-          canPaste.value = true;
-        },
-        paste() {
-          const top = menu.value?.offsetTop || 0;
-          const left = menu.value?.offsetLeft || 0;
-          editorService?.paste({ left, top });
-        },
-        remove() {
-          node.value && editorService?.remove(node.value);
-        },
-        top() {
-          editorService?.moveLayer(LayerOffset.TOP);
-        },
-        bottom() {
-          editorService?.moveLayer(LayerOffset.BOTTOM);
-        },
-        topItem() {
-          editorService?.moveLayer(1);
-        },
-        bottomItem() {
-          editorService?.moveLayer(-1);
-        },
-        clearGuides() {
-          editorService?.get("stage").clearGuides();
+        menuData: vue.reactive([
+          {
+            type: "button",
+            text: "\u6C34\u5E73\u5C45\u4E2D",
+            display: () => canCenter.value,
+            handler: () => {
+              node.value && editorService?.alignCenter(node.value);
+            }
+          },
+          {
+            type: "button",
+            text: "\u590D\u5236",
+            icon: vue.markRaw(icons.DocumentCopy),
+            handler: () => {
+              node.value && editorService?.copy(node.value);
+              canPaste.value = true;
+            }
+          },
+          {
+            type: "button",
+            text: "\u7C98\u8D34",
+            display: () => canPaste.value,
+            handler: () => {
+              const top = menu.value?.$el.offsetTop || 0;
+              const left = menu.value?.$el.offsetLeft || 0;
+              editorService?.paste({ left, top });
+            }
+          },
+          {
+            type: "divider",
+            direction: "horizontal",
+            display: () => !isPage.value
+          },
+          {
+            type: "button",
+            text: "\u4E0A\u79FB\u4E00\u5C42",
+            icon: vue.markRaw(icons.Top),
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(1);
+            }
+          },
+          {
+            type: "button",
+            text: "\u4E0B\u79FB\u4E00\u5C42",
+            icon: vue.markRaw(icons.Bottom),
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(-1);
+            }
+          },
+          {
+            type: "button",
+            text: "\u7F6E\u9876",
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(LayerOffset.TOP);
+            }
+          },
+          {
+            type: "button",
+            text: "\u7F6E\u5E95",
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(LayerOffset.BOTTOM);
+            }
+          },
+          {
+            type: "divider",
+            direction: "horizontal",
+            display: () => !isPage.value
+          },
+          {
+            type: "button",
+            text: "\u5220\u9664",
+            icon: icons.Delete,
+            display: () => !isPage.value,
+            handler: () => {
+              node.value && editorService?.remove(node.value);
+            }
+          },
+          {
+            type: "divider",
+            direction: "horizontal"
+          },
+          {
+            type: "button",
+            text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
+            handler: () => {
+              editorService?.get("stage").clearGuides();
+            }
+          }
+        ]),
+        show(e) {
+          menu.value?.show(e);
         }
       };
     }
   });
-  const _hoisted_1$1 = {
-    class: "magic-editor-content-menu",
-    ref: "menu"
-  };
-  const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
-  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
-  const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
   function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-      vue.createElementVNode("div", null, [
-        _ctx.canCenter ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[0] || (_cache[0] = () => _ctx.center())
-        }, "\u6C34\u5E73\u5C45\u4E2D")) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[1] || (_cache[1] = () => _ctx.copy())
-        }, "\u590D\u5236"),
-        _ctx.canPaste ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.paste && _ctx.paste(...args))
-        }, "\u7C98\u8D34")) : vue.createCommentVNode("", true),
-        _ctx.canMoveZPos ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          _hoisted_2,
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.topItem && _ctx.topItem(...args))
-          }, "\u4E0A\u79FB\u4E00\u5C42"),
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.bottomItem && _ctx.bottomItem(...args))
-          }, "\u4E0B\u79FB\u4E00\u5C42"),
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[5] || (_cache[5] = (...args) => _ctx.top && _ctx.top(...args))
-          }, "\u7F6E\u9876"),
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[6] || (_cache[6] = (...args) => _ctx.bottom && _ctx.bottom(...args))
-          }, "\u7F6E\u5E95")
-        ], 64)) : vue.createCommentVNode("", true),
-        _ctx.canDelete ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-          _hoisted_3,
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[7] || (_cache[7] = () => _ctx.remove())
-          }, "\u5220\u9664")
-        ], 64)) : vue.createCommentVNode("", true),
-        _hoisted_4,
-        vue.createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[8] || (_cache[8] = (...args) => _ctx.clearGuides && _ctx.clearGuides(...args))
-        }, "\u6E05\u7A7A\u53C2\u8003\u7EBF")
-      ])
-    ], 512);
+    const _component_content_menu = vue.resolveComponent("content-menu");
+    return vue.openBlock(), vue.createBlock(_component_content_menu, {
+      "menu-data": _ctx.menuData,
+      ref: "menu"
+    }, null, 8, ["menu-data"]);
   }
   var ViewerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
-  const useMenu = () => {
-    const menu = vue.ref();
-    const menuStyle = vue.ref({
-      display: "none",
-      left: "0",
-      top: "0"
-    });
-    vue.onMounted(() => {
-      document.addEventListener("click", () => {
-        menuStyle.value.display = "none";
-      }, true);
-    });
-    return {
-      menu,
-      menuStyle,
-      contextmenuHandler(e) {
-        e.preventDefault();
-        const menuHeight = menu.value?.$el.clientHeight;
-        let top = e.clientY;
-        if (menuHeight + e.clientY > document.body.clientHeight) {
-          top = document.body.clientHeight - menuHeight;
-        }
-        menuStyle.value = {
-          display: "block",
-          top: `${top}px`,
-          left: `${e.clientX}px`
-        };
-      }
-    };
-  };
   const _sfc_main$2 = vue.defineComponent({
     name: "magic-stage",
     components: {
@@ -4009,16 +3342,16 @@
         })
       }
     },
-    emits: ["select", "update", "sort"],
-    setup(props, { emit }) {
+    setup(props) {
       const services = vue.inject("services");
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
+      const menu = vue.ref();
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
       const uiSelectMode = vue.computed(() => services?.uiService.get("uiSelectMode"));
       const root = vue.computed(() => services?.editorService.get("root"));
       const page = vue.computed(() => services?.editorService.get("page"));
-      const zoom = vue.computed(() => services?.uiService.get("zoom"));
+      const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
       const node = vue.computed(() => services?.editorService.get("node"));
       let stage = null;
       let runtime = null;
@@ -4033,9 +3366,9 @@
           render: props.render,
           runtimeUrl: props.runtimeUrl,
           zoom: zoom.value,
-          canSelect: (el, stop) => {
+          canSelect: (el, event, stop) => {
             const elCanSelect = props.canSelect(el);
-            if (uiSelectMode.value && elCanSelect) {
+            if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
               document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
               return stop();
             }
@@ -4043,14 +3376,19 @@
           },
           moveableOptions: props.moveableOptions
         });
-        services?.editorService.set("stage", stage);
+        services?.editorService.set("stage", vue.markRaw(stage));
         stage?.mount(stageContainer.value);
-        stage?.on("select", (el) => emit("select", el));
+        stage?.on("select", (el) => {
+          services?.editorService.select(el.id);
+        });
+        stage?.on("highlight", (el) => {
+          services?.editorService.highlight(el.id);
+        });
         stage?.on("update", (ev) => {
-          emit("update", { id: ev.el.id, style: ev.style });
+          services?.editorService.update({ id: ev.el.id, style: ev.style });
         });
         stage?.on("sort", (ev) => {
-          emit("sort", ev);
+          services?.editorService.sort(ev.src, ev.dist);
         });
         stage?.on("changeGuides", () => {
           services?.uiService.set("showGuides", true);
@@ -4076,11 +3414,6 @@
           runtime.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root2)));
         }
       });
-      vue.watch(() => node.value?.id, (id) => {
-        vue.nextTick(() => {
-          id && stage?.select(id);
-        });
-      });
       const resizeObserver = new ResizeObserver((entries) => {
         for (const { contentRect } of entries) {
           services?.uiService.set("stageContainerRect", {
@@ -4100,9 +3433,37 @@
       return {
         stageWrap,
         stageContainer,
+        menu,
         stageRect,
         zoom,
-        ...useMenu()
+        contextmenuHandler(e2) {
+          e2.preventDefault();
+          menu.value?.show(e2);
+        },
+        dragoverHandler(e2) {
+          e2.preventDefault();
+          if (e2.dataTransfer) {
+            e2.dataTransfer.dropEffect = "move";
+          }
+        },
+        async dropHandler(e) {
+          e.preventDefault();
+          if (e.dataTransfer && page.value && stageContainer.value && stage) {
+            const config = eval(`(${e.dataTransfer.getData("data")})`);
+            const layout = await services?.editorService.getLayout(page.value);
+            const containerRect = stageContainer.value.getBoundingClientRect();
+            const { scrollTop, scrollLeft } = stage.mask;
+            if (layout === Layout.ABSOLUTE) {
+              config.style = {
+                ...config.style || {},
+                position: "absolute",
+                top: e.clientY - containerRect.top + scrollTop,
+                left: e.clientX - containerRect.left + scrollLeft
+              };
+            }
+            services?.editorService.add(config, page.value);
+          }
+        }
       };
     }
   });
@@ -4120,14 +3481,13 @@
         vue.createElementVNode("div", {
           class: "m-editor-stage-container",
           ref: "stageContainer",
+          style: vue.normalizeStyle(`transform: scale(${_ctx.zoom})`),
           onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
-          style: vue.normalizeStyle(`transform: scale(${_ctx.zoom})`)
+          onDrop: _cache[1] || (_cache[1] = (...args) => _ctx.dropHandler && _ctx.dropHandler(...args)),
+          onDragover: _cache[2] || (_cache[2] = (...args) => _ctx.dragoverHandler && _ctx.dragoverHandler(...args))
         }, null, 36),
         (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-          vue.createVNode(_component_viewer_menu, {
-            ref: "menu",
-            style: vue.normalizeStyle(_ctx.menuStyle)
-          }, null, 8, ["style"])
+          vue.createVNode(_component_viewer_menu, { ref: "menu" }, null, 512)
         ]))
       ]),
       _: 1
@@ -4155,21 +3515,93 @@
     },
     setup() {
       const services = vue.inject("services");
+      const workspace = vue.ref();
+      const node = vue.computed(() => services?.editorService.get("node"));
+      let keycon;
+      const mouseenterHandler = () => {
+        workspace.value?.focus();
+      };
+      const mouseleaveHandler = () => {
+        workspace.value?.blur();
+      };
+      vue.onMounted(() => {
+        workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
+        keycon = new KeyController__default["default"](workspace.value);
+        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+        const ctrl = isMac ? "meta" : "ctrl";
+        keycon.keydown((e) => {
+          console.log(e);
+          e.inputEvent.preventDefault();
+        }).keyup("delete", (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || utils.isPage(node.value))
+            return;
+          services?.editorService.remove(node.value);
+        }).keyup("backspace", (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || utils.isPage(node.value))
+            return;
+          services?.editorService.remove(node.value);
+        }).keydown([ctrl, "c"], () => {
+          node.value && services?.editorService.copy(node.value);
+        }).keydown([ctrl, "v"], () => {
+          node.value && services?.editorService.paste();
+        }).keydown([ctrl, "x"], () => {
+          if (!node.value || utils.isPage(node.value))
+            return;
+          services?.editorService.copy(node.value);
+          services?.editorService.remove(node.value);
+        }).keydown([ctrl, "z"], () => {
+          services?.editorService.undo();
+        }).keydown([ctrl, "shift", "z"], () => {
+          services?.editorService.redo();
+        }).keydown("up", () => {
+          services?.editorService.move(0, -1);
+        }).keydown("down", () => {
+          services?.editorService.move(0, 1);
+        }).keydown("left", () => {
+          services?.editorService.move(-1, 0);
+        }).keydown("right", () => {
+          services?.editorService.move(1, 0);
+        }).keydown([ctrl, "up"], () => {
+          services?.editorService.move(0, -10);
+        }).keydown([ctrl, "down"], () => {
+          services?.editorService.move(0, 10);
+        }).keydown([ctrl, "left"], () => {
+          services?.editorService.move(-10, 0);
+        }).keydown([ctrl, "right"], () => {
+          services?.editorService.move(10, 0);
+        }).keydown("tab", () => {
+          services?.editorService.selectNextNode();
+        }).keydown([ctrl, "tab"], () => {
+          services?.editorService.selectNextPage();
+        }).keydown([ctrl, "="], () => {
+          services?.uiService.zoom(0.1);
+        }).keydown([ctrl, "numpadplus"], () => {
+          services?.uiService.zoom(0.1);
+        }).keydown([ctrl, "-"], () => {
+          services?.uiService.zoom(-0.1);
+        }).keydown([ctrl, "numpad-"], () => {
+          services?.uiService.zoom(-0.1);
+        });
+      });
+      vue.onUnmounted(() => {
+        workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
+        keycon.destroy();
+      });
       return {
-        page: vue.computed(() => services?.editorService.get("page")),
-        selectHandler(el) {
-          services?.editorService.select(el.id);
-        },
-        updateNodeHandler(node) {
-          services?.editorService.update(node);
-        },
-        sortNodeHandler(ev) {
-          services?.editorService.sort(ev.src, ev.dist);
-        }
+        workspace,
+        page: vue.computed(() => services?.editorService.get("page"))
       };
     }
   });
-  const _hoisted_1 = { class: "m-editor-workspace" };
+  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 = vue.resolveComponent("magic-stage");
     const _component_page_bar = vue.resolveComponent("page-bar");
@@ -4179,11 +3611,8 @@
         "runtime-url": _ctx.runtimeUrl,
         render: _ctx.render,
         "moveable-options": _ctx.moveableOptions,
-        "can-select": _ctx.canSelect,
-        onSelect: _ctx.selectHandler,
-        onUpdate: _ctx.updateNodeHandler,
-        onSort: _ctx.sortNodeHandler
-      }, null, 8, ["runtime-url", "render", "moveable-options", "can-select", "onSelect", "onUpdate", "onSort"])),
+        "can-select": _ctx.canSelect
+      }, null, 8, ["runtime-url", "render", "moveable-options", "can-select"])),
       vue.renderSlot(_ctx.$slots, "workspace-content"),
       vue.createVNode(_component_page_bar, null, {
         "page-bar-title": vue.withCtx(({ page }) => [
@@ -4194,16 +3623,16 @@
         ]),
         _: 3
       })
-    ]);
+    ], 512);
   }
   var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
   class ComponentList extends BaseService {
-    state = vue.reactive({
-      list: []
-    });
     constructor() {
       super([]);
+      this.state = vue.reactive({
+        list: []
+      });
     }
     setList(componentGroupList) {
       this.state.list = componentGroupList;
@@ -4214,6 +3643,14 @@
   }
   var componentListService = new ComponentList();
 
+  const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+  const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+  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 = vue.reactive({
     uiSelectMode: false,
     showSrc: false,
@@ -4226,13 +3663,10 @@
       width: 375,
       height: 817
     },
-    columnWidth: {
-      left: 310,
-      center: globalThis.document.body.clientWidth - 310 - 400,
-      right: 400
-    },
+    columnWidth: defaultColumnWidth,
     showGuides: true,
-    showRule: true
+    showRule: true,
+    propsPanelSize: "small"
   });
   class Ui extends BaseService {
     constructor() {
@@ -4242,6 +3676,15 @@
           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;
@@ -4267,6 +3710,11 @@
     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 = {
         ...vue.toRaw(this.get("columnWidth"))
@@ -4280,9 +3728,15 @@
       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) {
@@ -4358,6 +3812,10 @@
       },
       stageRect: {
         type: [String, Object]
+      },
+      codeOptions: {
+        type: Object,
+        default: () => ({})
       }
     },
     emits: ["props-panel-mounted", "update:modelValue"],
@@ -4416,7 +3874,7 @@
     const _component_workspace = vue.resolveComponent("workspace");
     const _component_props_panel = vue.resolveComponent("props-panel");
     const _component_framework = vue.resolveComponent("framework");
-    return vue.openBlock(), vue.createBlock(_component_framework, null, {
+    return vue.openBlock(), vue.createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
       nav: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
           vue.createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
@@ -4460,7 +3918,7 @@
         vue.renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
       ]),
       _: 3
-    });
+    }, 8, ["code-options"]);
   }
   var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
@@ -4491,6 +3949,7 @@
   exports.PropsPanel = PropsPanel;
   exports.TMagicCodeEditor = CodeEditor;
   exports.TMagicEditor = Editor;
+  exports.ToolButton = ToolButton;
   exports.change2Fixed = change2Fixed;
   exports.debug = debug;
   exports["default"] = index;
@@ -4519,8 +3978,7 @@
   exports.uiService = uiService;
   exports.warn = warn;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-  exports[Symbol.toStringTag] = 'Module';
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
 //# sourceMappingURL=tmagic-editor.umd.js.map