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

package/dist/tmagic-editor.es.js

@@ -1,11 +1,14 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createElementVNode, toDisplayString, withModifiers, createCommentVNode, watch, onMounted, onUnmounted, reactive, toRaw, createVNode, withCtx, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, createTextVNode, normalizeProps, mergeProps, getCurrentInstance, withDirectives, vShow, Teleport, toHandlers, createSlots, nextTick, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createElementVNode, toDisplayString, withModifiers, createCommentVNode, watch, onMounted, onUnmounted, reactive, toRaw, createVNode, withCtx, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, createTextVNode, normalizeProps, mergeProps, getCurrentInstance, withDirectives, vShow, Teleport, toHandlers, createSlots, markRaw, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { asyncLoadJs, toLine, isPop, getNodePath } from '@tmagic/utils';
-import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, Coin, CaretBottom } from '@element-plus/icons';
-import { cloneDeep, random } from 'lodash-es';
+import * as monaco from 'monaco-editor';
+import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons';
+import { NodeType } from '@tmagic/schema';
+import { cloneDeep, random, mergeWith, throttle } from 'lodash-es';
+import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
 import { EventEmitter as EventEmitter$2 } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import { ElMessage } from 'element-plus';
+import KeyController from 'keycon';
 import StageCore from '@tmagic/stage';
 
 var _export_sfc = (sfc, props) => {
@@ -16,7 +19,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$j = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
   emits: ["change"],
@@ -33,7 +36,7 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-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 = resolveComponent("magic-code-editor");
   return openBlock(), createBlock(_component_magic_code_editor, {
     style: normalizeStyle(`height: ${_ctx.height}`),
@@ -42,9 +45,9 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "m-fields-code-link",
   props: {
     config: {
@@ -99,7 +102,7 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-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 = resolveComponent("m-fields-link");
   return openBlock(), createBlock(_component_m_fields_link, {
     config: _ctx.formConfig,
@@ -108,11 +111,11 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "m-fields-ui-select",
   props: {
     labelWidth: String,
@@ -174,15 +177,15 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-const _hoisted_1$d = /* @__PURE__ */ createElementVNode("i", {
+const _hoisted_1$e = /* @__PURE__ */ 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__ */ 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 ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "m-fields-ui-select",
@@ -201,23 +204,8 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     })) : 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 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") {
@@ -233,7 +221,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$g = defineComponent({
+const _sfc_main$h = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -251,32 +239,34 @@ const _sfc_main$g = defineComponent({
       default: () => "javascript"
     }
   },
-  emits: ["inited", "save"],
+  emits: ["initd", "save"],
   setup(props, { emit }) {
     let vsEditor = null;
+    let vsDiffEditor = null;
     const values = ref("");
     const loading = ref(false);
     const codeEditor = 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.editor.createModel(values.value, "text/javascript");
+        const modifiedModel = monaco.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,
@@ -284,10 +274,15 @@ const _sfc_main$g = defineComponent({
         fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
         fontSize: 15,
         formatOnPaste: true
-      });
+      };
+      if (props.type === "diff") {
+        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+      } else {
+        vsEditor = monaco.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();
@@ -295,14 +290,14 @@ const _sfc_main$g = defineComponent({
         }
       });
       if (props.type !== "diff") {
-        vsEditor.onDidBlurEditorWidget(() => {
+        vsEditor?.onDidBlurEditorWidget(() => {
           emit("save", getEditorValue());
         });
       }
       globalThis.addEventListener("resize", resizeHandler);
     };
     watch(() => props.initValues, (v, preV) => {
-      if (vsEditor && v !== preV) {
+      if (v !== preV) {
         setEditorValue(props.initValues, props.modifiedValues);
       }
     }, {
@@ -311,17 +306,7 @@ const _sfc_main$g = defineComponent({
     });
     onMounted(async () => {
       loading.value = true;
-      await initEditor();
-      if (!globalThis.monaco) {
-        const interval = setInterval(() => {
-          if (globalThis.monaco) {
-            clearInterval(interval);
-            init();
-          }
-        }, 300);
-      } else {
-        init();
-      }
+      init();
     });
     onUnmounted(() => {
       globalThis.removeEventListener("resize", resizeHandler);
@@ -331,23 +316,24 @@ const _sfc_main$g = defineComponent({
       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 openBlock(), createElementBlock("div", _hoisted_1$c, null, 512);
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), 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) => {
@@ -431,10 +417,39 @@ const compose = (middleware) => {
 
 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 EventEmitter$2 {
   pluginOptionsList = {};
   middleware = {};
-  constructor(methods) {
+  taskList = [];
+  doingTask = false;
+  constructor(methods = [], serialMethods = []) {
     super();
     methods.forEach((propertyName) => {
       const scope = this;
@@ -447,27 +462,23 @@ class BaseService extends EventEmitter$2 {
       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;
         }
       });
     });
@@ -484,6 +495,15 @@ class BaseService extends EventEmitter$2 {
         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 {
@@ -590,7 +610,7 @@ class Props extends BaseService {
   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";
@@ -602,6 +622,7 @@ class Props extends BaseService {
     }
     return cloneDeep({
       ...getDefaultPropsValue(type),
+      ...defaultValue,
       ...this.state.propsValueMap[type] || {}
     });
   }
@@ -620,12 +641,16 @@ var Layout = /* @__PURE__ */ ((Layout2) => {
   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}_${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 === NodeType.PAGE);
   }
   return [];
 };
@@ -659,9 +684,9 @@ const updatePopId = (oldId, popId, pageConfig) => {
 };
 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 (isPop(config) && parent?.type === "page") {
+  if (isPop(config) && parent?.type === NodeType.PAGE) {
     updatePopId(oldId, config.id, parent);
   }
   if (config.items && Array.isArray(config.items)) {
@@ -682,11 +707,25 @@ const toRelative = (node) => {
   };
   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 || !isNumber(height))
+    return style;
+  const { height: parentHeight } = parentNode.style;
+  if (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;
   }
@@ -733,7 +772,9 @@ const Fixed2Other = async (node, root, getLayout) => {
   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);
@@ -754,22 +795,6 @@ const Fixed2Other = async (node, root, getLayout) => {
   }
   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(cloneDeep(object[key]), value);
-    }
-  });
-  return object;
-};
 
 const log = (...args) => {
 };
@@ -790,6 +815,7 @@ class Editor$1 extends BaseService {
     parent: null,
     node: null,
     stage: null,
+    highlightNode: null,
     modifiedNodeIds: /* @__PURE__ */ new Map()
   });
   constructor() {
@@ -805,8 +831,9 @@ class Editor$1 extends BaseService {
       "alignCenter",
       "moveLayer",
       "undo",
-      "redo"
-    ]);
+      "redo",
+      "highlight"
+    ], ["select", "update", "moveLayer"]);
   }
   set(name, value) {
     this.state[name] = value;
@@ -832,7 +859,7 @@ class Editor$1 extends BaseService {
     info.node = path[path.length - 1];
     info.parent = path[path.length - 2];
     path.forEach((item) => {
-      if (item.type === "page") {
+      if (item.type === NodeType.PAGE) {
         info.page = item;
         return;
       }
@@ -859,18 +886,7 @@ class Editor$1 extends BaseService {
     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);
@@ -881,10 +897,17 @@ class Editor$1 extends BaseService {
     }
     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 === NodeType.PAGE) {
       parentNode = this.get("root");
     } else if (parent && typeof parent !== "function") {
       parentNode = parent;
@@ -896,15 +919,19 @@ class Editor$1 extends BaseService {
     if (!parentNode)
       throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
     const layout = await this.getLayout(parentNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config2 }, layout);
-    if ((parentNode?.type === "app" || curNode.type === "app") && newNode.type !== "page") {
+    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
+    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
     parentNode?.items?.push(newNode);
-    await this.get("stage")?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get("root")) });
+    const stage = this.get("stage");
+    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get("root")) });
     await this.select(newNode);
     this.addModifiedNodeId(newNode.id);
-    this.pushHistoryState();
+    if (type !== NodeType.PAGE) {
+      this.pushHistoryState();
+    }
+    stage?.select(newNode.id);
     return newNode;
   }
   async remove(node) {
@@ -920,11 +947,16 @@ class Editor$1 extends BaseService {
     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 === 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();
@@ -937,17 +969,21 @@ class Editor$1 extends BaseService {
     if (!info.node)
       throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config2.id}\u7684\u8282\u70B9`);
     const node = cloneDeep(toRaw(info.node));
-    const { parent } = info;
-    if (!parent)
-      throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
     let newConfig = await this.toggleFixedPosition(toRaw(config2), node, this.get("root"));
-    defaults(newConfig, node);
+    newConfig = mergeWith(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 === 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)
@@ -958,11 +994,11 @@ class Editor$1 extends BaseService {
       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: cloneDeep(newConfig), root: this.get("root") });
-    if (newConfig.type === "page") {
+    if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
     }
     this.addModifiedNodeId(newConfig.id);
@@ -979,6 +1015,7 @@ class Editor$1 extends BaseService {
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
     await this.update(parent);
     await this.select(node);
+    this.get("stage")?.update({ config: cloneDeep(node), root: this.get("root") });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
@@ -1078,7 +1115,12 @@ class Editor$1 extends BaseService {
     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 = cloneDeep(dist);
@@ -1091,6 +1133,28 @@ class Editor$1 extends BaseService {
     }
     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();
 
@@ -1280,7 +1344,7 @@ const fillConfig = (config = []) => [
                 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,
@@ -1315,7 +1379,7 @@ const getDefaultPropsValue = (type) => ({
   name: type
 });
 
-const _sfc_main$f = defineComponent({
+const _sfc_main$g = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -1325,20 +1389,20 @@ const _sfc_main$f = defineComponent({
         if (!editorService)
           return;
         editorService.add({
-          type: "page",
+          type: NodeType.PAGE,
           name: generatePageNameByApp(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__ */ 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 = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$b, [
+  return openBlock(), createElementBlock("div", _hoisted_1$c, [
     createElementVNode("div", _hoisted_2$6, [
       createElementVNode("div", {
         class: "m-editor-empty-button",
@@ -1357,7 +1421,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-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
@@ -2526,7 +2590,7 @@ function (_super) {
 
 var Gesto$1 = Gesto;
 
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "m-editor-resize",
   props: {
     type: {
@@ -2568,18 +2632,18 @@ const _sfc_main$e = defineComponent({
     };
   }
 });
-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 openBlock(), createElementBlock("span", _hoisted_1$a, [
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$b, [
     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 = defineComponent({
+const _sfc_main$e = defineComponent({
   components: {
     AddPageBox,
     Resizer
@@ -2602,17 +2666,17 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-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 = resolveComponent("magic-code-editor");
   const _component_resizer = resolveComponent("resizer");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   const _component_add_page_box = resolveComponent("add-page-box");
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
     _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
       key: 0,
@@ -2652,9 +2716,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-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 = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "m-icon",
   components: { Edit },
   props: {
@@ -2668,8 +2732,8 @@ const _sfc_main$c = defineComponent({
     };
   }
 });
-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 = resolveComponent("edit");
   const _component_el_icon = resolveComponent("el-icon");
   return !_ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
@@ -2680,7 +2744,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createElementBlock("img", {
     key: 1,
     src: _ctx.icon
-  }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+  }, null, 8, _hoisted_1$9)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
     key: 2,
     class: normalizeClass(_ctx.icon)
   }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
@@ -2690,9 +2754,9 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$c = defineComponent({
   components: { MIcon, ArrowDown },
   props: {
     data: {
@@ -2730,7 +2794,7 @@ const _sfc_main$b = defineComponent({
             type: "button",
             icon: Delete,
             tooltip: "\u522A\u9664",
-            disabled: () => services?.editorService.get("node")?.type === "page",
+            disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
             handler: () => services?.editorService.remove(services?.editorService.get("node"))
           };
         case "undo":
@@ -2827,7 +2891,7 @@ const _sfc_main$b = defineComponent({
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "menu-item"
 };
@@ -2839,8 +2903,8 @@ const _hoisted_3$3 = {
   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 = resolveComponent("el-divider");
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_button = resolveComponent("el-button");
@@ -2850,20 +2914,36 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
   const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
   const _component_el_dropdown = resolveComponent("el-dropdown");
-  return _ctx.display ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return _ctx.display ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
     _ctx.item.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
       key: 0,
       direction: "vertical"
     })) : _ctx.item.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_2$4, toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-      createVNode(_component_m_icon, {
-        icon: _ctx.ZoomIn,
-        onClick: _ctx.zoomInHandler
-      }, null, 8, ["icon", "onClick"]),
+      createVNode(_component_el_button, {
+        size: "small",
+        type: "text"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_m_icon, {
+            icon: _ctx.ZoomIn,
+            onClick: _ctx.zoomInHandler
+          }, null, 8, ["icon", "onClick"])
+        ]),
+        _: 1
+      }),
       createElementVNode("span", _hoisted_3$3, toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
-      createVNode(_component_m_icon, {
-        icon: _ctx.ZoomOut,
-        onClick: _ctx.zoomOutHandler
-      }, null, 8, ["icon", "onClick"])
+      createVNode(_component_el_button, {
+        size: "small",
+        type: "text"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_m_icon, {
+            icon: _ctx.ZoomOut,
+            onClick: _ctx.zoomOutHandler
+          }, null, 8, ["icon", "onClick"])
+        ]),
+        _: 1
+      })
     ], 64)) : _ctx.item.type === "button" ? (openBlock(), createBlock(_component_el_tooltip, {
       key: 3,
       effect: "dark",
@@ -2912,7 +2992,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
         })) : createCommentVNode("", true)
       ]),
       default: withCtx(() => [
-        createElementVNode("span", _hoisted_4$3, [
+        createElementVNode("span", _hoisted_4$2, [
           createTextVNode(toDisplayString(_ctx.item.text), 1),
           createVNode(_component_el_icon, { class: "el-icon--right" }, {
             default: withCtx(() => [
@@ -2926,9 +3006,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.item.component), normalizeProps(mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : createCommentVNode("", true)
   ])) : 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 = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "nav-menu",
   components: { ToolButton },
   props: {
@@ -2941,12 +3021,14 @@ const _sfc_main$a = defineComponent({
     }
   },
   setup(props) {
+    const services = inject("services");
     return {
-      keys: computed(() => Object.keys(props.data))
+      keys: computed(() => Object.keys(props.data)),
+      columnWidth: 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 = resolveComponent("tool-button");
   return openBlock(), createElementBlock("div", {
     class: "m-editor-nav-menu",
@@ -2955,7 +3037,8 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.keys, (key) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(`menu-${key}`),
-        key
+        key,
+        style: normalizeStyle(`width: ${_ctx.columnWidth?.[key]}px`)
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data[key], (item, index) => {
           return openBlock(), createBlock(_component_tool_button, {
@@ -2963,13 +3046,13 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
             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 = defineComponent({
+const _sfc_main$a = defineComponent({
   name: "m-editor-props-panel",
   emits: ["mounted"],
   setup(props, { emit }) {
@@ -2978,18 +3061,15 @@ const _sfc_main$9 = defineComponent({
     const configForm = ref();
     const curFormConfig = ref([]);
     const services = inject("services");
+    const node = 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;
     };
     watchEffect(init);
     services?.propsService.on("props-configs-change", init);
@@ -3018,10 +3098,11 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createBlock(_component_m_form, {
     class: "m-editor-props-panel",
+    "popper-class": "m-editor-props-panel-popper",
     ref: "configForm",
     size: "small",
     "init-values": _ctx.values,
@@ -3029,9 +3110,9 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "ui-component-panel",
   components: { MIcon },
   setup() {
@@ -3046,19 +3127,19 @@ const _sfc_main$8 = defineComponent({
       searchText,
       collapseValue,
       list,
-      appendComponent({ text, type, ...config }) {
+      appendComponent({ text, type, data = {} }) {
         services?.editorService.add({
           name: text,
           type,
-          ...config
+          ...data
         });
       }
     };
   }
 });
-const _hoisted_1$6 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+const _hoisted_1$7 = /* @__PURE__ */ 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 = resolveComponent("el-input");
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -3088,7 +3169,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                 name: index
               }, {
                 title: withCtx(() => [
-                  _hoisted_1$6,
+                  _hoisted_1$7,
                   createTextVNode(toDisplayString(group.title), 1)
                 ]),
                 default: withCtx(() => [
@@ -3125,65 +3206,51 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$8 = defineComponent({
   name: "magic-editor-content-menu",
-  props: {
-    componentGroupList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  setup(props) {
+  setup() {
     const services = inject("services");
     const subVisible = ref(false);
     const node = computed(() => services?.editorService.get("node"));
     return {
       subVisible,
       node,
-      menu: computed(() => ({
-        app: [
-          {
-            type: "page",
-            text: "\u9875\u9762"
-          }
-        ],
-        component: props.componentGroupList
-      })),
+      componentGroupList: 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__ */ createElementVNode("div", { class: "separation" }, null, -1);
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
-  return _ctx.node ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+  return _ctx.node ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
     _ctx.node.items ? (openBlock(), 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)) : createCommentVNode("", true),
     _ctx.node.type !== "app" ? (openBlock(), createElementBlock("div", {
       key: 1,
@@ -3197,8 +3264,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     }, " \u5220\u9664 ")) : createCommentVNode("", true),
     withDirectives(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))
     }, [
       createVNode(_component_el_scrollbar, null, {
         default: withCtx(() => [
@@ -3208,13 +3275,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[4] || (_cache[4] = () => _ctx.append({
               type: "tab-pane"
             }))
-          }, " \u6807\u7B7E ")) : _ctx.node.type === "app" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.menu.app, (item) => {
-            return openBlock(), createElementBlock("div", {
-              class: "magic-editor-content-menu-item",
-              key: item.type,
-              onClick: () => _ctx.append(item)
-            }, toDisplayString(item.text), 9, _hoisted_2$2);
-          }), 128)) : _ctx.node.items ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.menu.component, (list) => {
+          }, " \u6807\u7B7E ")) : _ctx.node.items ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.componentGroupList, (list) => {
             return openBlock(), createElementBlock("div", {
               key: list.title
             }, [
@@ -3224,10 +3285,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     class: "magic-editor-content-menu-item",
                     key: item.type,
                     onClick: () => _ctx.append(item)
-                  }, toDisplayString(item.text), 9, _hoisted_3$2)) : createCommentVNode("", true)
+                  }, toDisplayString(item.text), 9, _hoisted_2$2)) : createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              _hoisted_4$2
+              _hoisted_3$2
             ]);
           }), 128)) : createCommentVNode("", true)
         ]),
@@ -3238,22 +3299,31 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ])) : 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 !== NodeType.PAGE && data.type === NodeType.PAGE)
       return false;
-    if (ingType === "page" && data.type !== "page")
+    if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE)
       return false;
     if (!data || !data.type)
       return false;
@@ -3272,29 +3342,35 @@ const useDrop = (tree, editorService) => ({
   }
 });
 const useStatus = (tree, editorService) => {
+  const highlightNode = ref();
+  const node = ref();
   const page = computed(() => editorService?.get("page"));
   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: 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: computed(() => node.value ? [node.value.id] : [])
   };
 };
 const useFilter = (tree) => ({
@@ -3306,12 +3382,10 @@ const useFilter = (tree) => ({
     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);
@@ -3345,17 +3419,26 @@ const useContentMenu = (editorService) => {
     }
   };
 };
-const _sfc_main$6 = defineComponent({
+const _sfc_main$7 = defineComponent({
   name: "magic-editor-layer-panel",
   components: { LayerMenu },
   setup() {
     const services = inject("services");
     const tree = ref();
+    const clicked = ref(false);
     const editorService = services?.editorService;
+    const highlightHandler = throttle((data) => {
+      highlight(data, editorService);
+    }, throttleTime);
+    const toogleClickFlag = () => {
+      clicked.value = !clicked.value;
+    };
+    const statusData = useStatus(tree, editorService);
+    const canHighlight = 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) {
@@ -3363,12 +3446,17 @@ const _sfc_main$6 = defineComponent({
           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 = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
   const _component_layer_menu = resolveComponent("layer-menu");
@@ -3389,6 +3477,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         ref: "tree",
         "node-key": "id",
         draggable: "",
+        "default-expanded-keys": _ctx.expandedKeys,
         load: _ctx.loadItems,
         data: _ctx.values,
         "expand-on-click-node": false,
@@ -3404,15 +3493,23 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684"
       }, {
         default: withCtx(({ node, data }) => [
-          renderSlot(_ctx.$slots, "layer-node-content", {
-            node,
-            data
-          }, () => [
-            createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
-          ])
+          createElementVNode("div", {
+            id: data.id,
+            class: 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)
+          }, [
+            renderSlot(_ctx.$slots, "layer-node-content", {
+              node,
+              data
+            }, () => [
+              createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+            ])
+          ], 42, _hoisted_1$5)
         ]),
         _: 3
-      }, 8, ["load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : createCommentVNode("", true),
+      }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : createCommentVNode("", true),
       (openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(_component_layer_menu, {
           style: normalizeStyle(_ctx.menuStyle)
@@ -3422,9 +3519,9 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$6 = defineComponent({
   name: "m-sidebar",
   components: { MIcon },
   props: {
@@ -3472,7 +3569,7 @@ const _hoisted_1$4 = {
   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 = resolveComponent("m-icon");
   const _component_el_tab_pane = resolveComponent("el-tab-pane");
   const _component_el_tabs = resolveComponent("el-tabs");
@@ -3519,15 +3616,81 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["modelValue"])) : createCommentVNode("", true);
 }
-var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
-
-const _sfc_main$4 = defineComponent({
-  components: { CaretBottom, Plus },
+var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+
+const useScroll = (root) => {
+  const pageBar = ref();
+  const itemsContainer = ref();
+  const pageBarWidth = ref(0);
+  const canScroll = ref(false);
+  const itemsContainerWidth = 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)`;
+  };
+  onMounted(() => {
+    pageBar.value && resizeObserver.observe(pageBar.value);
+  });
+  onUnmounted(() => {
+    resizeObserver.disconnect();
+  });
+  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 = defineComponent({
+  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus },
   setup() {
     const services = inject("services");
     const editorService = services?.editorService;
+    const root = computed(() => editorService?.get("root"));
     return {
-      root: computed(() => editorService?.get("root")),
+      ...useScroll(root),
+      root,
       page: computed(() => editorService?.get("page")),
       switchPage(page) {
         editorService?.select(page);
@@ -3536,7 +3699,7 @@ const _sfc_main$4 = defineComponent({
         if (!editorService)
           return;
         const pageConfig = {
-          type: "page",
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get("root")))
         };
         editorService.add(pageConfig);
@@ -3554,70 +3717,339 @@ const _sfc_main$4 = defineComponent({
     };
   }
 });
-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 = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
+  const _component_arrow_left_bold = resolveComponent("arrow-left-bold");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_caret_bottom = resolveComponent("caret-bottom");
   const _component_el_popover = resolveComponent("el-popover");
+  const _component_arrow_right_bold = resolveComponent("arrow-right-bold");
   return openBlock(), createElementBlock("div", _hoisted_1$3, [
     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))
     }, [
-      createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-add-icon" }, {
+      createVNode(_component_el_icon, null, {
         default: withCtx(() => [
           createVNode(_component_plus)
         ]),
         _: 1
       })
     ]),
-    _ctx.root ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.root.items, (item) => {
-      return openBlock(), createElementBlock("div", {
-        key: item.key,
-        class: normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
-        onClick: ($event) => _ctx.switchPage(item)
-      }, [
-        renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-          createElementVNode("span", null, toDisplayString(item.name), 1)
+    _ctx.canScroll ? (openBlock(), 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"))
+    }, [
+      createVNode(_component_el_icon, null, {
+        default: withCtx(() => [
+          createVNode(_component_arrow_left_bold)
         ]),
-        createVNode(_component_el_popover, {
-          placement: "top",
-          width: 160,
-          trigger: "hover"
-        }, {
-          reference: withCtx(() => [
-            createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
-              default: withCtx(() => [
-                createVNode(_component_caret_bottom)
-              ]),
-              _: 1
-            })
-          ]),
-          default: withCtx(() => [
-            createElementVNode("div", null, [
-              renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                createElementVNode("div", {
-                  class: "magic-editor-content-menu-item",
-                  onClick: () => _ctx.copy(item)
-                }, "\u590D\u5236", 8, _hoisted_3$1),
-                createElementVNode("div", {
-                  class: "magic-editor-content-menu-item",
-                  onClick: () => _ctx.remove(item)
-                }, "\u5220\u9664", 8, _hoisted_4$1)
-              ])
+        _: 1
+      })
+    ])) : createCommentVNode("", true),
+    _ctx.root ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: "m-editor-page-bar-items",
+      ref: "itemsContainer",
+      style: normalizeStyle(`width: ${_ctx.itemsContainerWidth}px`)
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.root.items, (item) => {
+        return openBlock(), createElementBlock("div", {
+          key: item.key,
+          class: normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
+          onClick: ($event) => _ctx.switchPage(item)
+        }, [
+          createElementVNode("div", _hoisted_3$1, [
+            renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+              createVNode(_component_el_tooltip, {
+                effect: "dark",
+                placement: "top-start",
+                content: item.name
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("span", null, toDisplayString(item.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["content"])
             ])
           ]),
-          _: 2
-        }, 1024)
-      ], 10, _hoisted_2$1);
-    }), 128)) : createCommentVNode("", true)
-  ]);
+          createVNode(_component_el_popover, {
+            placement: "top",
+            width: 160,
+            trigger: "hover"
+          }, {
+            reference: withCtx(() => [
+              createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                default: withCtx(() => [
+                  createVNode(_component_caret_bottom)
+                ]),
+                _: 1
+              })
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", null, [
+                renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                  createElementVNode("div", {
+                    class: "magic-editor-content-menu-item",
+                    onClick: () => _ctx.copy(item)
+                  }, "\u590D\u5236", 8, _hoisted_4$1),
+                  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)) : createCommentVNode("", true),
+    _ctx.canScroll ? (openBlock(), 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"))
+    }, [
+      createVNode(_component_el_icon, null, {
+        default: withCtx(() => [
+          createVNode(_component_arrow_right_bold)
+        ]),
+        _: 1
+      })
+    ])) : 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;
+  }
+}
+
+const _sfc_main$4 = defineComponent({
+  name: "m-editor-scroll-viewer",
+  props: {
+    width: Number,
+    height: Number,
+    zoom: {
+      type: Number,
+      default: 1
+    }
+  },
+  setup(props) {
+    const container = ref();
+    const el = ref();
+    let scrollViewer;
+    onMounted(() => {
+      if (!container.value || !el.value)
+        return;
+      scrollViewer = new ScrollViewer$1({
+        container: container.value,
+        target: el.value,
+        zoom: props.zoom
+      });
+    });
+    onUnmounted(() => {
+      scrollViewer.destroy();
+    });
+    watch(() => props.zoom, () => {
+      scrollViewer.setZoom(props.zoom);
+    });
+    return {
+      container,
+      el,
+      style: computed(() => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+        margin-top: 30px;
+      `)
+    };
+  }
+});
+const _hoisted_1$2 = {
+  class: "m-editor-scroll-viewer-container",
+  ref: "container"
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+    createElementVNode("div", {
+      ref: "el",
+      style: normalizeStyle(_ctx.style)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 4)
+  ], 512);
 }
-var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
 const _sfc_main$3 = defineComponent({
   name: "magic-editor-ui-viewer-menu",
@@ -3637,13 +4069,13 @@ const _sfc_main$3 = defineComponent({
       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) && ![NodeType.ROOT, NodeType.PAGE, "pop"].includes(`${node.value?.type}`);
     }, { immediate: true });
     return {
       menu,
       canPaste,
-      canDelete: computed(() => node.value?.type !== "page"),
-      canMoveZPos: computed(() => node.value?.type !== "page"),
+      canDelete: computed(() => node.value?.type !== NodeType.PAGE),
+      canMoveZPos: computed(() => node.value?.type !== NodeType.PAGE),
       canCenter,
       center() {
         node.value && editorService?.alignCenter(node.value);
@@ -3678,7 +4110,7 @@ const _sfc_main$3 = defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
   class: "magic-editor-content-menu",
   ref: "menu"
 };
@@ -3686,7 +4118,7 @@ const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "separatio
 const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
 const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
     createElementVNode("div", null, [
       _ctx.canCenter ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -3771,28 +4203,14 @@ const useMenu = () => {
 const _sfc_main$2 = 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)
@@ -3804,14 +4222,16 @@ const _sfc_main$2 = defineComponent({
       })
     }
   },
-  emits: ["select", "update", "sort"],
-  setup(props, { emit }) {
+  setup(props) {
     const services = inject("services");
+    const stageWrap = ref();
     const stageContainer = ref();
-    const stageStyle = computed(() => ({
-      ...services?.uiService.get("stageStyle"),
-      transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`
-    }));
+    const stageRect = computed(() => services?.uiService.get("stageRect"));
+    const uiSelectMode = computed(() => services?.uiService.get("uiSelectMode"));
+    const root = computed(() => services?.editorService.get("root"));
+    const page = computed(() => services?.editorService.get("page"));
+    const zoom = computed(() => services?.uiService.get("zoom"));
+    const node = computed(() => services?.editorService.get("node"));
     let stage = null;
     let runtime = null;
     watchEffect(() => {
@@ -3819,15 +4239,15 @@ const _sfc_main$2 = defineComponent({
         return;
       if (!stageContainer.value)
         return;
-      if (!(props.runtimeUrl || props.render) || !props.root)
+      if (!(props.runtimeUrl || props.render) || !root.value)
         return;
       stage = new StageCore({
         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();
           }
@@ -3835,67 +4255,95 @@ const _sfc_main$2 = defineComponent({
         },
         moveableOptions: props.moveableOptions
       });
-      services?.editorService.set("stage", stage);
+      services?.editorService.set("stage", 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(cloneDeep(toRaw(props.root)));
-        props.page?.id && runtime?.updatePageId?.(props.page.id);
+        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
-          props.node && stage?.select(toRaw(props.node.id));
+          node.value && stage?.select(toRaw(node.value.id));
         });
       });
     });
-    watch(() => props.zoom, (zoom) => {
-      if (!stage || !zoom)
+    watch(zoom, (zoom2) => {
+      if (!stage || !zoom2)
         return;
-      stage?.setZoom(zoom);
+      stage.setZoom(zoom2);
+    });
+    watch(root, (root2) => {
+      if (runtime && root2) {
+        runtime.updateRootConfig(cloneDeep(toRaw(root2)));
+      }
     });
-    watch(() => props.root, (root) => {
-      if (runtime && root) {
-        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        services?.uiService.set("stageContainerRect", {
+          width: contentRect.width,
+          height: contentRect.height
+        });
       }
     });
+    onMounted(() => {
+      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+    });
     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 = resolveComponent("viewer-menu");
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
-    createElementVNode("div", {
-      class: "m-editor-stage-container",
-      ref: "stageContainer",
-      style: normalizeStyle(_ctx.stageStyle),
-      onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args))
-    }, null, 36),
-    (openBlock(), createBlock(Teleport, { to: "body" }, [
-      createVNode(_component_viewer_menu, {
-        ref: "menu",
-        style: normalizeStyle(_ctx.menuStyle)
-      }, null, 8, ["style"])
-    ]))
-  ]);
+  const _component_scroll_viewer = resolveComponent("scroll-viewer");
+  return openBlock(), createBlock(_component_scroll_viewer, {
+    class: "m-editor-stage",
+    ref: "stageWrap",
+    width: _ctx.stageRect?.width,
+    height: _ctx.stageRect?.height,
+    zoom: _ctx.zoom
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "m-editor-stage-container",
+        ref: "stageContainer",
+        onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
+        style: normalizeStyle(`transform: scale(${_ctx.zoom})`)
+      }, null, 36),
+      (openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(_component_viewer_menu, {
+          ref: "menu",
+          style: normalizeStyle(_ctx.menuStyle)
+        }, null, 8, ["style"])
+      ]))
+    ]),
+    _: 1
+  }, 8, ["width", "height", "zoom"]);
 }
 var MagicStage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
@@ -3919,32 +4367,48 @@ const _sfc_main$1 = defineComponent({
   },
   setup() {
     const services = inject("services");
+    const workspace = ref();
     const node = computed(() => services?.editorService.get("node"));
-    const stage = computed(() => services?.editorService.get("stage"));
-    watch([() => node.value?.id, stage], ([id, stage2]) => {
-      nextTick(() => {
-        id && stage2?.select(id);
+    let keycon;
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
+    onMounted(() => {
+      workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
+      keycon = new KeyController(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);
+        }
       });
     });
+    onUnmounted(() => {
+      workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
+      keycon.destroy();
+    });
     return {
-      uiSelectMode: computed(() => services?.uiService.get("uiSelectMode")),
-      root: computed(() => services?.editorService.get("root")),
-      page: computed(() => services?.editorService.get("page")),
-      zoom: 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: 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 = resolveComponent("magic-stage");
   const _component_page_bar = resolveComponent("page-bar");
@@ -3953,17 +4417,9 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       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"])),
     renderSlot(_ctx.$slots, "workspace-content"),
     createVNode(_component_page_bar, null, {
       "page-bar-title": withCtx(({ page }) => [
@@ -3974,7 +4430,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     })
-  ]);
+  ], 512);
 }
 var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
@@ -3994,15 +4450,24 @@ class ComponentList extends BaseService {
 }
 var componentListService = new ComponentList();
 
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const state = 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
@@ -4022,6 +4487,10 @@ class Ui extends BaseService {
       this.setColumnWidth(value);
       return;
     }
+    if (name === "stageRect") {
+      this.setStageRect(value);
+      return;
+    }
     if (name === "showGuides") {
       mask?.showGuides(value);
     }
@@ -4029,6 +4498,9 @@ class Ui extends BaseService {
       mask?.showRule(value);
     }
     state[name] = value;
+    if (name === "stageContainerRect") {
+      state.zoom = this.calcZoom();
+    }
   }
   get(name) {
     return state[name];
@@ -4051,6 +4523,23 @@ class Ui extends BaseService {
     }
     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();
 
@@ -4105,7 +4594,7 @@ const _sfc_main = defineComponent({
     canSelect: {
       type: Function
     },
-    stageStyle: {
+    stageRect: {
       type: [String, Object]
     }
   },
@@ -4143,7 +4632,7 @@ const _sfc_main = defineComponent({
     watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
       immediate: true
     });
-    watch(() => props.stageStyle, (stageStyle) => uiService.set("stageStyle", stageStyle), {
+    watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
       immediate: true
     });
     onUnmounted(() => editorService.destroy());
@@ -4229,5 +4718,5 @@ var index = {
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, change2Fixed, debug, index as default, defaults, editorService, error, eventsService, fillConfig, generateId, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, setNewItemId, toRelative, uiService, warn };
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, generateId, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, setNewItemId, toRelative, uiService, warn };
 //# sourceMappingURL=tmagic-editor.es.js.map