@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.12

package/dist/tmagic-editor.umd.js

@@ -1,12 +1,32 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@tmagic/utils'), require('@element-plus/icons'), require('lodash-es'), require('events'), require('@tmagic/core'), require('element-plus'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@tmagic/utils', '@element-plus/icons', 'lodash-es', 'events', '@tmagic/core', 'element-plus', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.utils, global.icons, global.lodashEs, global.events, global.core, global.elementPlus, global.StageCore));
-})(this, (function (exports, vue, serialize, utils, icons, lodashEs, events, core, elementPlus, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('@tmagic/schema'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', '@tmagic/schema', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.schema, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
+})(this, (function (exports, vue, serialize, monaco, icons, schema, lodashEs, utils, events, core, 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'};
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
+  var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
   var _export_sfc = (sfc, props) => {
@@ -17,7 +37,7 @@
     return target;
   };
 
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -34,7 +54,7 @@
       };
     }
   });
-  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$k(_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}`),
@@ -43,9 +63,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -100,7 +120,7 @@
       };
     }
   });
-  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$j(_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,
@@ -109,11 +129,11 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
   var UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     name: "m-fields-ui-select",
     props: {
       labelWidth: String,
@@ -175,15 +195,15 @@
       };
     }
   });
-  const _hoisted_1$d = /* @__PURE__ */ vue.createElementVNode("i", {
+  const _hoisted_1$e = /* @__PURE__ */ vue.createElementVNode("i", {
     class: "el-icon-delete",
     style: { "color": "rgb(221, 75, 57)" }
   }, "\u53D6\u6D88", -1);
   const _hoisted_2$7 = [
-    _hoisted_1$d
+    _hoisted_1$e
   ];
   const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
-  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     return _ctx.uiSelectMode ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "m-fields-ui-select",
@@ -202,23 +222,8 @@
       })) : vue.createCommentVNode("", true)
     ]));
   }
-  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
-  const initEditor = () => {
-    if (globalThis.monaco) {
-      Promise.resolve(globalThis.monaco);
-    }
-    return utils.asyncLoadJs(`https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js`).then(() => {
-      globalThis.require.config({
-        paths: { vs: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs` }
-      });
-      return new Promise((resolve) => {
-        globalThis.require(["vs/editor/editor.main"], () => {
-          resolve(globalThis.monaco);
-        });
-      });
-    });
-  };
   const toString = (v, language) => {
     let value = "";
     if (typeof v !== "string") {
@@ -234,7 +239,7 @@
     }
     return value;
   };
-  const _sfc_main$g = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -252,32 +257,34 @@
         default: () => "javascript"
       }
     },
-    emits: ["inited", "save"],
+    emits: ["initd", "save"],
     setup(props, { emit }) {
       let vsEditor = null;
+      let vsDiffEditor = null;
       const values = vue.ref("");
       const loading = vue.ref(false);
       const codeEditor = vue.ref();
       const setEditorValue = (v, m) => {
         values.value = toString(v, props.language);
         if (props.type === "diff") {
-          const originalModel = globalThis.monaco.editor.createModel(values.value, "text/javascript");
-          const modifiedModel = globalThis.monaco.editor.createModel(toString(m, props.language), "text/javascript");
-          return vsEditor.setModel({
+          const originalModel = monaco__namespace.editor.createModel(values.value, "text/javascript");
+          const modifiedModel = monaco__namespace.editor.createModel(toString(m, props.language), "text/javascript");
+          return vsDiffEditor?.setModel({
             original: originalModel,
             modified: modifiedModel
           });
         }
-        return vsEditor.setValue?.(values.value);
+        return vsEditor?.setValue(values.value);
       };
       const resizeHandler = () => {
         vsEditor?.layout();
+        vsDiffEditor?.layout();
       };
-      const getEditorValue = () => vsEditor.getValue?.() || "";
+      const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
       const init = async () => {
         if (!codeEditor.value)
           return;
-        vsEditor = globalThis.monaco.editor[props.type === "diff" ? "createDiffEditor" : "create"](codeEditor.value, {
+        const options = {
           value: values.value,
           language: props.language,
           tabSize: 2,
@@ -285,10 +292,15 @@
           fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
           fontSize: 15,
           formatOnPaste: true
-        });
+        };
+        if (props.type === "diff") {
+          vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditor.value, options);
+        } else {
+          vsEditor = monaco__namespace.editor.create(codeEditor.value, options);
+        }
         setEditorValue(props.initValues, props.modifiedValues);
         loading.value = false;
-        emit("inited", vsEditor);
+        emit("initd", vsEditor);
         codeEditor.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
             e.preventDefault();
@@ -296,14 +308,14 @@
           }
         });
         if (props.type !== "diff") {
-          vsEditor.onDidBlurEditorWidget(() => {
+          vsEditor?.onDidBlurEditorWidget(() => {
             emit("save", getEditorValue());
           });
         }
         globalThis.addEventListener("resize", resizeHandler);
       };
       vue.watch(() => props.initValues, (v, preV) => {
-        if (vsEditor && v !== preV) {
+        if (v !== preV) {
           setEditorValue(props.initValues, props.modifiedValues);
         }
       }, {
@@ -312,17 +324,7 @@
       });
       vue.onMounted(async () => {
         loading.value = true;
-        await initEditor();
-        if (!globalThis.monaco) {
-          const interval = setInterval(() => {
-            if (globalThis.monaco) {
-              clearInterval(interval);
-              init();
-            }
-          }, 300);
-        } else {
-          init();
-        }
+        init();
       });
       vue.onUnmounted(() => {
         globalThis.removeEventListener("resize", resizeHandler);
@@ -332,23 +334,24 @@
         loading,
         codeEditor,
         getEditor() {
-          return vsEditor;
+          return vsEditor || vsDiffEditor;
         },
         setEditorValue,
         focus() {
-          vsEditor.focus();
+          vsEditor?.focus();
+          vsDiffEditor?.focus();
         }
       };
     }
   });
-  const _hoisted_1$c = {
+  const _hoisted_1$d = {
     ref: "codeEditor",
     class: "magic-code-editor"
   };
-  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
+  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, null, 512);
   }
-  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
+  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -432,10 +435,39 @@
 
   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(...beforeArgs, returnValue);
+        if (isError(returnValue))
+          throw returnValue;
+      }
+      return returnValue;
+    } catch (error) {
+      throw error;
+    }
+  };
   class BaseService extends events.EventEmitter {
     pluginOptionsList = {};
     middleware = {};
-    constructor(methods) {
+    taskList = [];
+    doingTask = false;
+    constructor(methods = [], serialMethods = []) {
       super();
       methods.forEach((propertyName) => {
         const scope = this;
@@ -448,27 +480,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;
           }
         });
       });
@@ -485,6 +513,15 @@
           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 {
@@ -591,7 +628,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";
@@ -603,6 +640,7 @@
       }
       return lodashEs.cloneDeep({
         ...getDefaultPropsValue(type),
+        ...defaultValue,
         ...this.state.propsValueMap[type] || {}
       });
     }
@@ -621,12 +659,16 @@
     Layout2["ABSOLUTE"] = "absolute";
     return Layout2;
   })(Layout || {});
+  var Keys = /* @__PURE__ */ ((Keys2) => {
+    Keys2["ESCAPE"] = "Space";
+    return Keys2;
+  })(Keys || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   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 [];
   };
@@ -660,9 +702,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)) {
@@ -683,11 +725,25 @@
     };
     return node;
   };
-  const initPosition = (node, layout) => {
+  const setTop2Middle = (node, parentNode, stage) => {
+    const style = node.style || {};
+    const height = style.height || 0;
+    if (!stage || style.top || !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;
     }
@@ -734,7 +790,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);
@@ -755,22 +813,6 @@
     }
     return toRelative(node);
   };
-  const defaults = (object, source) => {
-    let o = source;
-    if (Array.isArray(object)) {
-      o = object;
-    }
-    Object.entries(o).forEach(([key, value]) => {
-      if (typeof object[key] === "undefined") {
-        object[key] = value;
-        return;
-      }
-      if (value && typeof value !== "string" && Object.keys(value).length) {
-        object[key] = defaults(lodashEs.cloneDeep(object[key]), value);
-      }
-    });
-    return object;
-  };
 
   const log = (...args) => {
   };
@@ -791,6 +833,7 @@
       parent: null,
       node: null,
       stage: null,
+      highlightNode: null,
       modifiedNodeIds: /* @__PURE__ */ new Map()
     });
     constructor() {
@@ -806,8 +849,9 @@
         "alignCenter",
         "moveLayer",
         "undo",
-        "redo"
-      ]);
+        "redo",
+        "highlight"
+      ], ["select", "update", "moveLayer"]);
     }
     set(name, value) {
       this.state[name] = value;
@@ -833,7 +877,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;
         }
@@ -860,18 +904,7 @@
       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");
+      const { node, page, parent } = this.selectedConfigExceptionHandler(config2);
       this.set("node", node);
       this.set("page", page || null);
       this.set("parent", parent || null);
@@ -882,10 +915,17 @@
       }
       return node;
     }
+    highlight(config2) {
+      const { node } = this.selectedConfigExceptionHandler(config2);
+      const currentHighlightNode = this.get("highlightNode");
+      if (currentHighlightNode === node)
+        return;
+      this.set("highlightNode", node);
+    }
     async add({ type, ...config2 }, parent) {
       const curNode = this.get("node");
       let parentNode;
-      if (type === "page") {
+      if (type === schema.NodeType.PAGE) {
         parentNode = this.get("root");
       } else if (parent && typeof parent !== "function") {
         parentNode = parent;
@@ -897,15 +937,19 @@
       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 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 (type !== schema.NodeType.PAGE) {
+        this.pushHistoryState();
+      }
+      stage?.select(newNode.id);
       return newNode;
     }
     async remove(node) {
@@ -921,11 +965,16 @@
       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) {
+        if (root.items[0]) {
+          await this.select(root.items[0]);
+          stage?.select(root.items[0].id);
+        }
       } else {
         await this.select(parent);
+        stage?.select(parent.id);
       }
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
@@ -938,17 +987,21 @@
       if (!info.node)
         throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config2.id}\u7684\u8282\u70B9`);
       const node = lodashEs.cloneDeep(vue.toRaw(info.node));
-      const { parent } = info;
-      if (!parent)
-        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config2), node, this.get("root"));
-      defaults(newConfig, node);
+      newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
       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;
       }
+      const { parent } = info;
+      if (!parent)
+        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
       const parentNodeItems = parent.items;
       const index = getNodeIndex(newConfig, parent);
       if (!parentNodeItems || typeof index === "undefined" || index === -1)
@@ -959,11 +1012,11 @@
         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);
@@ -980,6 +1033,7 @@
       parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
       await this.update(parent);
       await this.select(node);
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(node), root: this.get("root") });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
@@ -1079,7 +1133,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);
@@ -1092,6 +1151,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();
 
@@ -1281,7 +1362,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,
@@ -1316,7 +1397,7 @@
     name: type
   });
 
-  const _sfc_main$f = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     components: { Plus: icons.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1326,20 +1407,20 @@
           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_1$c = { 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$f(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$g(_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, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
       vue.createElementVNode("div", _hoisted_2$6, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
@@ -1358,7 +1439,7 @@
       ])
     ]);
   }
-  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
   /*
   Copyright (c) 2018 Daybrush
@@ -2527,7 +2608,7 @@
 
   var Gesto$1 = Gesto;
 
-  const _sfc_main$e = vue.defineComponent({
+  const _sfc_main$f = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -2569,18 +2650,18 @@
       };
     }
   });
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     ref: "target",
     class: "m-editor-resizer"
   };
-  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, [
+  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$b, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
@@ -2603,17 +2684,17 @@
       };
     }
   });
-  const _hoisted_1$9 = { class: "m-editor" };
+  const _hoisted_1$a = { class: "m-editor" };
   const _hoisted_2$5 = {
     key: 1,
     class: "m-editor-content"
   };
-  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$e(_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$a, [
       vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
       _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
         key: 0,
@@ -2653,9 +2734,9 @@
       ]))
     ]);
   }
-  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "m-icon",
     components: { Edit: icons.Edit },
     props: {
@@ -2669,8 +2750,8 @@
       };
     }
   });
-  const _hoisted_1$8 = ["src"];
-  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$9 = ["src"];
+  function _sfc_render$d(_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 }, {
@@ -2681,7 +2762,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$9)) : 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 }, {
@@ -2691,9 +2772,9 @@
       _: 1
     }));
   }
-  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     components: { MIcon, ArrowDown: icons.ArrowDown },
     props: {
       data: {
@@ -2731,7 +2812,7 @@
               type: "button",
               icon: 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":
@@ -2828,7 +2909,7 @@
       };
     }
   });
-  const _hoisted_1$7 = {
+  const _hoisted_1$8 = {
     key: 0,
     class: "menu-item"
   };
@@ -2840,8 +2921,8 @@
     class: "menu-item-text",
     style: { "margin": "0 5px" }
   };
-  const _hoisted_4$3 = { class: "el-dropdown-link menubar-menu-button" };
-  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_4$2 = { class: "el-dropdown-link menubar-menu-button" };
+  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_divider = vue.resolveComponent("el-divider");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_button = vue.resolveComponent("el-button");
@@ -2851,20 +2932,36 @@
     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", _hoisted_1$8, [
       _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.createVNode(_component_el_button, {
+          size: "small",
+          type: "text"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_m_icon, {
+              icon: _ctx.ZoomIn,
+              onClick: _ctx.zoomInHandler
+            }, null, 8, ["icon", "onClick"])
+          ]),
+          _: 1
+        }),
         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"])
+        vue.createVNode(_component_el_button, {
+          size: "small",
+          type: "text"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_m_icon, {
+              icon: _ctx.ZoomOut,
+              onClick: _ctx.zoomOutHandler
+            }, null, 8, ["icon", "onClick"])
+          ]),
+          _: 1
+        })
       ], 64)) : _ctx.item.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
         key: 3,
         effect: "dark",
@@ -2913,7 +3010,7 @@
           })) : vue.createCommentVNode("", true)
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("span", _hoisted_4$3, [
+          vue.createElementVNode("span", _hoisted_4$2, [
             vue.createTextVNode(vue.toDisplayString(_ctx.item.text), 1),
             vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
               default: vue.withCtx(() => [
@@ -2927,9 +3024,9 @@
       }, 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);
   }
-  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
-  const _sfc_main$a = vue.defineComponent({
+  const _sfc_main$b = vue.defineComponent({
     name: "nav-menu",
     components: { ToolButton },
     props: {
@@ -2942,12 +3039,14 @@
       }
     },
     setup(props) {
+      const services = vue.inject("services");
       return {
-        keys: vue.computed(() => Object.keys(props.data))
+        keys: vue.computed(() => Object.keys(props.data)),
+        columnWidth: vue.computed(() => services?.uiService.get("columnWidth"))
       };
     }
   });
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$b(_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",
@@ -2956,7 +3055,8 @@
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.keys, (key) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(`menu-${key}`),
-          key
+          key,
+          style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.[key]}px`)
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data[key], (item, index) => {
             return vue.openBlock(), vue.createBlock(_component_tool_button, {
@@ -2964,13 +3064,13 @@
               key: index
             }, null, 8, ["data"]);
           }), 128))
-        ], 2);
+        ], 6);
       }), 128))
     ], 4);
   }
-  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
-  const _sfc_main$9 = vue.defineComponent({
+  const _sfc_main$a = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -2979,18 +3079,15 @@
       const configForm = vue.ref();
       const curFormConfig = vue.ref([]);
       const services = vue.inject("services");
+      const node = vue.computed(() => services?.editorService.get("node"));
       const init = async () => {
-        const node = services?.editorService.get("node");
-        if (!node) {
+        if (!node.value) {
           curFormConfig.value = [];
           return;
         }
-        if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
-          node.devconfig.ratio = node.style.height / node.style.width || 1;
-        }
-        values.value = node;
-        const type = node.type || (node.items ? "container" : "text");
+        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);
@@ -3019,10 +3116,11 @@
       };
     }
   });
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$a(_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",
       ref: "configForm",
       size: "small",
       "init-values": _ctx.values,
@@ -3030,9 +3128,9 @@
       onChange: _ctx.submit
     }, null, 8, ["init-values", "config", "onChange"]);
   }
-  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
-  const _sfc_main$8 = vue.defineComponent({
+  const _sfc_main$9 = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
@@ -3047,19 +3145,19 @@
         searchText,
         collapseValue,
         list,
-        appendComponent({ text, type, ...config }) {
+        appendComponent({ text, type, data = {} }) {
           services?.editorService.add({
             name: text,
             type,
-            ...config
+            ...data
           });
         }
       };
     }
   });
-  const _hoisted_1$6 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+  const _hoisted_1$7 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
   const _hoisted_2$3 = ["onClick"];
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$9(_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");
@@ -3089,7 +3187,7 @@
                   name: index
                 }, {
                   title: vue.withCtx(() => [
-                    _hoisted_1$6,
+                    _hoisted_1$7,
                     vue.createTextVNode(vue.toDisplayString(group.title), 1)
                   ]),
                   default: vue.withCtx(() => [
@@ -3126,65 +3224,51 @@
       _: 1
     });
   }
-  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     name: "magic-editor-content-menu",
-    props: {
-      componentGroupList: {
-        type: Array,
-        default: () => []
-      }
-    },
-    setup(props) {
+    setup() {
       const services = vue.inject("services");
       const subVisible = vue.ref(false);
       const node = vue.computed(() => services?.editorService.get("node"));
       return {
         subVisible,
         node,
-        menu: vue.computed(() => ({
-          app: [
-            {
-              type: "page",
-              text: "\u9875\u9762"
-            }
-          ],
-          component: props.componentGroupList
-        })),
+        componentGroupList: vue.computed(() => services?.componentListService.getList()),
         append(config) {
           services?.editorService.add({
             name: config.text,
-            type: config.type
+            type: config.type,
+            ...config.data || {}
           });
         },
         remove() {
           node.value && services?.editorService.remove(node.value);
         },
         copy(node2) {
-          services?.editorService.copy(node2);
+          node2 && services?.editorService.copy(node2);
         },
-        setSubVisiable(v) {
+        setSubVisitable(v) {
           subVisible.value = v;
         }
       };
     }
   });
-  const _hoisted_1$5 = {
+  const _hoisted_1$6 = {
     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$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_3$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, [
+    return _ctx.node ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
       _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))
+        onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.setSubVisitable(true)),
+        onMouseleave: _cache[1] || (_cache[1] = ($event) => _ctx.setSubVisitable(false))
       }, " \u65B0\u589E ", 32)) : vue.createCommentVNode("", true),
       _ctx.node.type !== "app" ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 1,
@@ -3198,8 +3282,8 @@
       }, " \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))
+        onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.setSubVisitable(true)),
+        onMouseleave: _cache[6] || (_cache[6] = ($event) => _ctx.setSubVisitable(false))
       }, [
         vue.createVNode(_component_el_scrollbar, null, {
           default: vue.withCtx(() => [
@@ -3209,13 +3293,7 @@
               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) => {
+            }, " \u6807\u7B7E ")) : _ctx.node.items ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.componentGroupList, (list) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: list.title
               }, [
@@ -3225,10 +3303,10 @@
                       class: "magic-editor-content-menu-item",
                       key: item.type,
                       onClick: () => _ctx.append(item)
-                    }, vue.toDisplayString(item.text), 9, _hoisted_3$2)) : vue.createCommentVNode("", true)
+                    }, vue.toDisplayString(item.text), 9, _hoisted_2$2)) : vue.createCommentVNode("", true)
                   ], 64);
                 }), 256)),
-                _hoisted_4$2
+                _hoisted_3$2
               ]);
             }), 128)) : vue.createCommentVNode("", true)
           ]),
@@ -3239,22 +3317,31 @@
       ])
     ])) : vue.createCommentVNode("", true);
   }
-  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
-  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;
@@ -3273,29 +3360,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) => ({
@@ -3307,12 +3400,10 @@
       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);
@@ -3346,17 +3437,26 @@
       }
     };
   };
-  const _sfc_main$6 = vue.defineComponent({
+  const _sfc_main$7 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
       const services = vue.inject("services");
       const tree = vue.ref();
+      const clicked = vue.ref(false);
       const editorService = services?.editorService;
+      const highlightHandler = lodashEs.throttle((data) => {
+        highlight(data, editorService);
+      }, throttleTime);
+      const toogleClickFlag = () => {
+        clicked.value = !clicked.value;
+      };
+      const statusData = useStatus(tree, editorService);
+      const canHighlight = vue.computed(() => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value);
       return {
         tree,
+        ...statusData,
         ...useDrop(tree, editorService),
-        ...useStatus(tree, editorService),
         ...useFilter(tree),
         ...useContentMenu(editorService),
         clickHandler(data) {
@@ -3364,12 +3464,17 @@
             document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
             return;
           }
+          tree.value?.setCurrentKey(data.id);
           select(data, editorService);
-        }
+        },
+        highlightHandler,
+        toogleClickFlag,
+        canHighlight
       };
     }
   });
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$5 = ["id", "onMouseenter"];
+  function _sfc_render$7(_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");
@@ -3390,6 +3495,7 @@
           ref: "tree",
           "node-key": "id",
           draggable: "",
+          "default-expanded-keys": _ctx.expandedKeys,
           load: _ctx.loadItems,
           data: _ctx.values,
           "expand-on-click-node": false,
@@ -3405,15 +3511,23 @@
           "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.toogleClickFlag && _ctx.toogleClickFlag(...args)),
+              onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toogleClickFlag && _ctx.toogleClickFlag(...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$5)
           ]),
           _: 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)
@@ -3423,9 +3537,9 @@
       _: 3
     });
   }
-  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
 
-  const _sfc_main$5 = vue.defineComponent({
+  const _sfc_main$6 = vue.defineComponent({
     name: "m-sidebar",
     components: { MIcon },
     props: {
@@ -3473,7 +3587,7 @@
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  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_el_tabs = vue.resolveComponent("el-tabs");
@@ -3520,15 +3634,81 @@
       _: 1
     }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
   }
-  var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
-
-  const _sfc_main$4 = vue.defineComponent({
-    components: { CaretBottom: icons.CaretBottom, Plus: icons.Plus },
+  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: { ArrowLeftBold: icons.ArrowLeftBold, ArrowRightBold: icons.ArrowRightBold, CaretBottom: icons.CaretBottom, Plus: icons.Plus },
     setup() {
       const services = vue.inject("services");
       const editorService = services?.editorService;
+      const root = vue.computed(() => editorService?.get("root"));
       return {
-        root: vue.computed(() => editorService?.get("root")),
+        ...useScroll(root),
+        root,
         page: vue.computed(() => editorService?.get("page")),
         switchPage(page) {
           editorService?.select(page);
@@ -3537,7 +3717,7 @@
           if (!editorService)
             return;
           const pageConfig = {
-            type: "page",
+            type: schema.NodeType.PAGE,
             name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
           };
           editorService.add(pageConfig);
@@ -3555,70 +3735,339 @@
       };
     }
   });
-  const _hoisted_1$3 = { class: "m-editor-page-bar" };
+  const _hoisted_1$3 = {
+    class: "m-editor-page-bar",
+    ref: "pageBar"
+  };
   const _hoisted_2$1 = ["onClick"];
-  const _hoisted_3$1 = ["onClick"];
+  const _hoisted_3$1 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$1 = ["onClick"];
-  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_5 = ["onClick"];
+  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_caret_bottom = vue.resolveComponent("caret-bottom");
     const _component_el_popover = vue.resolveComponent("el-popover");
+    const _component_arrow_right_bold = vue.resolveComponent("arrow-right-bold");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
       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$1, [
+              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, {
+              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_4$1),
+                    vue.createElementVNode("div", {
+                      class: "magic-editor-content-menu-item",
+                      onClick: () => _ctx.remove(item)
+                    }, "\u5220\u9664", 8, _hoisted_5)
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1024)
+          ], 10, _hoisted_2$1);
+        }), 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;
+        }
+        this.scroll();
+      }
+    });
+    constructor(options) {
+      this.container = options.container;
+      this.target = options.target;
+      this.zoom = options.zoom;
+      globalThis.addEventListener("keydown", this.keydownHandler);
+      globalThis.addEventListener("keyup", this.keyupHandler);
+      this.container.addEventListener("mouseenter", this.mouseEnterHandler);
+      this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
+      this.target.addEventListener("mouseenter", this.targetMouseEnterHandler);
+      this.target.addEventListener("mouseleave", this.targetMouseLeaveHandler);
+      this.container.addEventListener("wheel", this.wheelHandler);
+      this.resizeObserver.observe(this.container);
+    }
+    destroy() {
+      this.resizeObserver.disconnect();
+      this.container.removeEventListener("mouseenter", this.mouseEnterHandler);
+      this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
+      this.target.removeEventListener("mouseenter", this.targetMouseEnterHandler);
+      this.target.removeEventListener("mouseleave", this.targetMouseLeaveHandler);
+      globalThis.removeEventListener("keydown", this.keydownHandler);
+      globalThis.removeEventListener("keyup", this.keyupHandler);
+    }
+    setZoom(zoom) {
+      this.zoom = zoom;
+    }
+    scroll() {
+      const scrollLeft = this.target._left;
+      const scrollTop = this.target._top;
+      this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
+    }
+    removeHandler() {
+      this.target.style.cursor = "";
+      this.target.removeEventListener("mousedown", this.mousedownHandler);
+      document.removeEventListener("mousemove", this.mousemoveHandler);
+      document.removeEventListener("mouseup", this.mouseupHandler);
+    }
+    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();
+      const targetWidth = targetRect.width * this.zoom;
+      const targetHeight = targetRect.height * this.zoom;
+      let y = 0;
+      if (targetHeight > height) {
+        if (deltaY > 0) {
+          y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
+        } else {
+          y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
+        }
+      }
+      let x = 0;
+      if (targetWidth > width) {
+        if (deltaX > 0) {
+          x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
+        } else {
+          x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
+        }
+      }
+      this.target._left = x;
+      this.target._top = y;
+    }
   }
-  var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+
+  const _sfc_main$4 = vue.defineComponent({
+    name: "m-editor-scroll-viewer",
+    props: {
+      width: Number,
+      height: Number,
+      zoom: {
+        type: Number,
+        default: 1
+      }
+    },
+    setup(props) {
+      const container = vue.ref();
+      const el = vue.ref();
+      let scrollViewer;
+      vue.onMounted(() => {
+        if (!container.value || !el.value)
+          return;
+        scrollViewer = new ScrollViewer$1({
+          container: container.value,
+          target: el.value,
+          zoom: props.zoom
+        });
+      });
+      vue.onUnmounted(() => {
+        scrollViewer.destroy();
+      });
+      vue.watch(() => props.zoom, () => {
+        scrollViewer.setZoom(props.zoom);
+      });
+      return {
+        container,
+        el,
+        style: vue.computed(() => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+        margin-top: 30px;
+      `)
+      };
+    }
+  });
+  const _hoisted_1$2 = {
+    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, [
+      vue.createElementVNode("div", {
+        ref: "el",
+        style: vue.normalizeStyle(_ctx.style)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 4)
+    ], 512);
+  }
+  var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
   const _sfc_main$3 = vue.defineComponent({
     name: "magic-editor-ui-viewer-menu",
@@ -3638,13 +4087,13 @@
         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"),
+        canDelete: vue.computed(() => node.value?.type !== schema.NodeType.PAGE),
+        canMoveZPos: vue.computed(() => node.value?.type !== schema.NodeType.PAGE),
         canCenter,
         center() {
           node.value && editorService?.alignCenter(node.value);
@@ -3679,7 +4128,7 @@
       };
     }
   });
-  const _hoisted_1$2 = {
+  const _hoisted_1$1 = {
     class: "magic-editor-content-menu",
     ref: "menu"
   };
@@ -3687,7 +4136,7 @@
   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$2, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
       vue.createElementVNode("div", null, [
         _ctx.canCenter ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
@@ -3772,28 +4221,14 @@
   const _sfc_main$2 = vue.defineComponent({
     name: "magic-stage",
     components: {
-      ViewerMenu
+      ViewerMenu,
+      ScrollViewer
     },
     props: {
       render: {
         type: Function
       },
       runtimeUrl: String,
-      root: {
-        type: Object
-      },
-      page: {
-        type: Object
-      },
-      node: {
-        type: Object
-      },
-      uiSelectMode: {
-        type: Boolean
-      },
-      zoom: {
-        type: Number
-      },
       canSelect: {
         type: Function,
         default: (el) => Boolean(el.id)
@@ -3805,14 +4240,16 @@
         })
       }
     },
-    emits: ["select", "update", "sort"],
-    setup(props, { emit }) {
+    setup(props) {
       const services = vue.inject("services");
+      const stageWrap = vue.ref();
       const stageContainer = vue.ref();
-      const stageStyle = vue.computed(() => ({
-        ...services?.uiService.get("stageStyle"),
-        transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`
-      }));
+      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 node = vue.computed(() => services?.editorService.get("node"));
       let stage = null;
       let runtime = null;
       vue.watchEffect(() => {
@@ -3820,15 +4257,15 @@
           return;
         if (!stageContainer.value)
           return;
-        if (!(props.runtimeUrl || props.render) || !props.root)
+        if (!(props.runtimeUrl || props.render) || !root.value)
           return;
         stage = new StageCore__default["default"]({
           render: props.render,
           runtimeUrl: props.runtimeUrl,
-          zoom: props.zoom,
-          canSelect: (el, stop) => {
+          zoom: zoom.value,
+          canSelect: (el, event, stop) => {
             const elCanSelect = props.canSelect(el);
-            if (props.uiSelectMode && elCanSelect) {
+            if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
               document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
               return stop();
             }
@@ -3836,67 +4273,95 @@
           },
           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);
         });
-        if (!props.node?.id)
+        if (!node.value?.id)
           return;
         stage?.on("runtime-ready", (rt) => {
           runtime = rt;
-          props.root && runtime?.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(props.root)));
-          props.page?.id && runtime?.updatePageId?.(props.page.id);
+          root.value && runtime?.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root.value)));
+          page.value?.id && runtime?.updatePageId?.(page.value.id);
           setTimeout(() => {
-            props.node && stage?.select(vue.toRaw(props.node.id));
+            node.value && stage?.select(vue.toRaw(node.value.id));
           });
         });
       });
-      vue.watch(() => props.zoom, (zoom) => {
-        if (!stage || !zoom)
+      vue.watch(zoom, (zoom2) => {
+        if (!stage || !zoom2)
           return;
-        stage?.setZoom(zoom);
+        stage.setZoom(zoom2);
+      });
+      vue.watch(root, (root2) => {
+        if (runtime && root2) {
+          runtime.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root2)));
+        }
       });
-      vue.watch(() => props.root, (root) => {
-        if (runtime && root) {
-          runtime.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root)));
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          services?.uiService.set("stageContainerRect", {
+            width: contentRect.width,
+            height: contentRect.height
+          });
         }
       });
+      vue.onMounted(() => {
+        stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+      });
       vue.onUnmounted(() => {
         stage?.destroy();
+        resizeObserver.disconnect();
         services?.editorService.set("stage", null);
       });
       return {
-        stageStyle,
-        ...useMenu(),
-        stageContainer
+        stageWrap,
+        stageContainer,
+        stageRect,
+        zoom,
+        ...useMenu()
       };
     }
   });
-  const _hoisted_1$1 = { class: "m-editor-stage" };
   function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_viewer_menu = vue.resolveComponent("viewer-menu");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-      vue.createElementVNode("div", {
-        class: "m-editor-stage-container",
-        ref: "stageContainer",
-        style: vue.normalizeStyle(_ctx.stageStyle),
-        onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...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"])
-      ]))
-    ]);
+    const _component_scroll_viewer = vue.resolveComponent("scroll-viewer");
+    return vue.openBlock(), vue.createBlock(_component_scroll_viewer, {
+      class: "m-editor-stage",
+      ref: "stageWrap",
+      width: _ctx.stageRect?.width,
+      height: _ctx.stageRect?.height,
+      zoom: _ctx.zoom
+    }, {
+      default: vue.withCtx(() => [
+        vue.createElementVNode("div", {
+          class: "m-editor-stage-container",
+          ref: "stageContainer",
+          onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
+          style: vue.normalizeStyle(`transform: scale(${_ctx.zoom})`)
+        }, 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"])
+        ]))
+      ]),
+      _: 1
+    }, 8, ["width", "height", "zoom"]);
   }
   var MagicStage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
@@ -3920,32 +4385,48 @@
     },
     setup() {
       const services = vue.inject("services");
+      const workspace = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
-      const stage = vue.computed(() => services?.editorService.get("stage"));
-      vue.watch([() => node.value?.id, stage], ([id, stage2]) => {
-        vue.nextTick(() => {
-          id && stage2?.select(id);
+      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);
+        keycon.keyup("delete", () => {
+          node.value && services?.editorService.remove(node.value);
+        }).keyup(["ctrl", "c"], () => {
+          node.value && services?.editorService.copy(node.value);
+        }).keyup(["ctrl", "v"], () => {
+          node.value && services?.editorService.paste();
+        }).keyup(["ctrl", "x"], () => {
+          if (node.value && services) {
+            services.editorService.copy(node.value);
+            services.editorService.remove(node.value);
+          }
         });
       });
+      vue.onUnmounted(() => {
+        workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
+        keycon.destroy();
+      });
       return {
-        uiSelectMode: vue.computed(() => services?.uiService.get("uiSelectMode")),
-        root: vue.computed(() => services?.editorService.get("root")),
-        page: vue.computed(() => services?.editorService.get("page")),
-        zoom: vue.computed(() => services?.uiService.get("zoom")),
-        node,
-        selectHandler(el) {
-          services?.editorService.select(el.id);
-        },
-        updateNodeHandler(node2) {
-          services?.editorService.update(node2);
-        },
-        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");
@@ -3954,17 +4435,9 @@
         key: _ctx.page?.id,
         "runtime-url": _ctx.runtimeUrl,
         render: _ctx.render,
-        "ui-select-mode": _ctx.uiSelectMode,
-        root: _ctx.root,
-        page: _ctx.page,
-        node: _ctx.node,
-        zoom: _ctx.zoom,
         "moveable-options": _ctx.moveableOptions,
-        "can-select": _ctx.canSelect,
-        onSelect: _ctx.selectHandler,
-        onUpdate: _ctx.updateNodeHandler,
-        onSort: _ctx.sortNodeHandler
-      }, null, 8, ["runtime-url", "render", "ui-select-mode", "root", "page", "node", "zoom", "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 }) => [
@@ -3975,7 +4448,7 @@
         ]),
         _: 3
       })
-    ]);
+    ], 512);
   }
   var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
@@ -3995,15 +4468,24 @@
   }
   var componentListService = new ComponentList();
 
+  const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+  const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const state = vue.reactive({
     uiSelectMode: false,
     showSrc: false,
     zoom: 1,
-    stageStyle: {},
+    stageContainerRect: {
+      width: 0,
+      height: 0
+    },
+    stageRect: {
+      width: 375,
+      height: 817
+    },
     columnWidth: {
-      left: 310,
-      center: globalThis.document.body.clientWidth - 310 - 400,
-      right: 400
+      left: DEFAULT_LEFT_COLUMN_WIDTH,
+      center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
+      right: DEFAULT_RIGHT_COLUMN_WIDTH
     },
     showGuides: true,
     showRule: true
@@ -4023,6 +4505,10 @@
         this.setColumnWidth(value);
         return;
       }
+      if (name === "stageRect") {
+        this.setStageRect(value);
+        return;
+      }
       if (name === "showGuides") {
         mask?.showGuides(value);
       }
@@ -4030,6 +4516,9 @@
         mask?.showRule(value);
       }
       state[name] = value;
+      if (name === "stageContainerRect") {
+        state.zoom = this.calcZoom();
+      }
     }
     get(name) {
       return state[name];
@@ -4052,6 +4541,23 @@
       }
       state.columnWidth = columnWidth;
     }
+    setStageRect(value) {
+      state.stageRect = {
+        ...state.stageRect,
+        ...value
+      };
+      state.zoom = this.calcZoom();
+    }
+    calcZoom() {
+      const { stageRect, stageContainerRect } = state;
+      const { height, width } = stageContainerRect;
+      if (!width || !height)
+        return 1;
+      if (width > stageRect.width && height > stageRect.height) {
+        return 1;
+      }
+      return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+    }
   }
   var uiService = new Ui();
 
@@ -4106,7 +4612,7 @@
       canSelect: {
         type: Function
       },
-      stageStyle: {
+      stageRect: {
         type: [String, Object]
       }
     },
@@ -4144,7 +4650,7 @@
       vue.watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
         immediate: true
       });
-      vue.watch(() => props.stageStyle, (stageStyle) => uiService.set("stageStyle", stageStyle), {
+      vue.watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
         immediate: true
       });
       vue.onUnmounted(() => editorService.destroy());
@@ -4234,6 +4740,7 @@
   exports.ComponentListPanel = ComponentListPanel;
   exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
   exports.Fixed2Other = Fixed2Other;
+  exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = LayerPanel;
   exports.Layout = Layout;
@@ -4243,7 +4750,6 @@
   exports.change2Fixed = change2Fixed;
   exports.debug = debug;
   exports["default"] = index;
-  exports.defaults = defaults;
   exports.editorService = editorService;
   exports.error = error;
   exports.eventsService = eventsService;