@tmagic/editor 1.0.0-beta.13 → 1.0.0-beta.14

package/dist/tmagic-editor.es.js

@@ -1,9 +1,9 @@
-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 { 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, markRaw, renderList, createTextVNode, normalizeProps, mergeProps, getCurrentInstance, nextTick, withDirectives, Teleport, vShow, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
 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 { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
 import { NodeType } from '@tmagic/schema';
-import { cloneDeep, random, mergeWith, throttle } from 'lodash-es';
+import { cloneDeep, mergeWith, random, 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';
@@ -11,6 +11,10 @@ import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
 import StageCore from '@tmagic/stage';
 
+if (typeof window.global === "undefined") {
+  window.global = window;
+}
+
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -19,7 +23,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$k = defineComponent({
+const _sfc_main$l = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
   emits: ["change"],
@@ -36,7 +40,7 @@ const _sfc_main$k = defineComponent({
     };
   }
 });
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$l(_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}`),
@@ -45,9 +49,9 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     onSave: _ctx.save
   }, null, 8, ["style", "init-values", "language", "onSave"]);
 }
-var Code = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
+var Code = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
-const _sfc_main$j = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "m-fields-code-link",
   props: {
     config: {
@@ -102,7 +106,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_m_fields_link = resolveComponent("m-fields-link");
   return openBlock(), createBlock(_component_m_fields_link, {
     config: _ctx.formConfig,
@@ -111,11 +115,11 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["config", "model", "onChange"]);
 }
-var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
 var UISelect_vue_vue_type_style_index_0_lang = '';
 
-const _sfc_main$i = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "m-fields-ui-select",
   props: {
     labelWidth: String,
@@ -177,25 +181,25 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-const _hoisted_1$e = /* @__PURE__ */ createElementVNode("i", {
+const _hoisted_1$c = /* @__PURE__ */ createElementVNode("i", {
   class: "el-icon-delete",
   style: { "color": "rgb(221, 75, 57)" }
 }, "\u53D6\u6D88", -1);
-const _hoisted_2$7 = [
-  _hoisted_1$e
+const _hoisted_2$5 = [
+  _hoisted_1$c
 ];
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.uiSelectMode ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "m-fields-ui-select",
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
-  }, _hoisted_2$7)) : (openBlock(), createElementBlock("div", {
+  }, _hoisted_2$5)) : (openBlock(), createElementBlock("div", {
     key: 1,
     class: "m-fields-ui-select",
     onClick: _cache[2] || (_cache[2] = (...args) => _ctx.startSelect && _ctx.startSelect(...args))
   }, [
-    _hoisted_3$5,
+    _hoisted_3$3,
     createElementVNode("span", null, toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1),
     _ctx.val ? (openBlock(), createElementBlock("i", {
       key: 0,
@@ -204,7 +208,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true)
   ]));
 }
-var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
 const toString = (v, language) => {
   let value = "";
@@ -221,7 +225,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$h = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -326,14 +330,14 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-const _hoisted_1$d = {
+const _hoisted_1$b = {
   ref: "codeEditor",
   class: "magic-code-editor"
 };
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$d, null, 512);
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$b, null, 512);
 }
-var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
 let $TMAGIC_EDITOR = {};
 const setConfig = (option) => {
@@ -514,6 +518,12 @@ class History extends BaseService {
     });
     this.on("change", this.setCanUndoRedo);
   }
+  reset() {
+    this.state.pageSteps = {};
+    this.state.pageId = void 0;
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
   changePage(page) {
     if (!page)
       return;
@@ -619,8 +629,7 @@ class Props extends BaseService {
     }
     return cloneDeep({
       ...getDefaultPropsValue(type),
-      ...defaultValue,
-      ...this.state.propsValueMap[type] || {}
+      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue)
     });
   }
 }
@@ -707,7 +716,7 @@ const toRelative = (node) => {
 const setTop2Middle = (node, parentNode, stage) => {
   const style = node.style || {};
   const height = style.height || 0;
-  if (!stage || style.top || !parentNode.style || !isNumber(height))
+  if (!stage || typeof style.top !== "undefined" || !parentNode.style || !isNumber(height))
     return style;
   const { height: parentHeight } = parentNode.style;
   if (isPage(parentNode)) {
@@ -817,6 +826,7 @@ class Editor$1 extends BaseService {
       "paste",
       "alignCenter",
       "moveLayer",
+      "move",
       "undo",
       "redo",
       "highlight"
@@ -829,12 +839,14 @@ class Editor$1 extends BaseService {
       node: null,
       stage: null,
       highlightNode: null,
-      modifiedNodeIds: /* @__PURE__ */ new Map()
+      modifiedNodeIds: /* @__PURE__ */ new Map(),
+      pageLength: 0
     });
   }
   set(name, value) {
     this.state[name] = value;
     if (name === "root") {
+      this.state.pageLength = value?.items?.length || 0;
       this.emit("root-change", value);
     }
   }
@@ -894,6 +906,7 @@ class Editor$1 extends BaseService {
     } else {
       historyService.empty();
     }
+    this.emit("select", node);
     return node;
   }
   async selectNextNode() {
@@ -929,7 +942,8 @@ class Editor$1 extends BaseService {
     const { type, ...config2 } = addNode;
     const curNode = this.get("node");
     let parentNode;
-    if (type === NodeType.PAGE) {
+    const isPage2 = type === NodeType.PAGE;
+    if (isPage2) {
       parentNode = this.get("root");
     } else if (parent && typeof parent !== "function") {
       parentNode = parent;
@@ -954,6 +968,10 @@ class Editor$1 extends BaseService {
       this.pushHistoryState();
     }
     stage?.select(newNode.id);
+    if (isPage2) {
+      this.state.pageLength += 1;
+    }
+    this.emit("add", newNode);
     return newNode;
   }
   async remove(node) {
@@ -972,9 +990,20 @@ class Editor$1 extends BaseService {
     const stage = this.get("stage");
     stage?.remove({ id: node.id, root: this.get("root") });
     if (node.type === NodeType.PAGE) {
+      this.state.pageLength -= 1;
       if (root.items[0]) {
         await this.select(root.items[0]);
         stage?.select(root.items[0].id);
+      } else {
+        this.set("node", null);
+        this.set("parent", null);
+        this.set("page", null);
+        this.set("stage", null);
+        this.set("highlightNode", null);
+        this.resetModifiedNodeId();
+        historyService.reset();
+        this.emit("remove", node);
+        return node;
       }
     } else {
       await this.select(parent);
@@ -982,6 +1011,7 @@ class Editor$1 extends BaseService {
     }
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
+    this.emit("remove", node);
     return node;
   }
   async update(config2) {
@@ -1025,6 +1055,7 @@ class Editor$1 extends BaseService {
     }
     this.addModifiedNodeId(newConfig.id);
     this.pushHistoryState();
+    this.emit("update", newConfig);
     return newConfig;
   }
   async sort(id1, id2) {
@@ -1354,6 +1385,25 @@ const fillConfig = (config = []) => [
                     defaultValue: "100% 100%"
                   }
                 ]
+              },
+              {
+                type: "fieldset",
+                legend: "\u5B57\u4F53",
+                items: [
+                  {
+                    name: "color",
+                    text: "\u989C\u8272",
+                    type: "colorPicker"
+                  },
+                  {
+                    name: "fontSize",
+                    text: "\u5927\u5C0F"
+                  },
+                  {
+                    name: "fontWeight",
+                    text: "\u7C97\u7EC6"
+                  }
+                ]
               }
             ]
           }
@@ -1421,7 +1471,7 @@ const getDefaultPropsValue = (type) => ({
   name: type
 });
 
-const _sfc_main$g = defineComponent({
+const _sfc_main$h = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -1438,14 +1488,14 @@ const _sfc_main$g = defineComponent({
     };
   }
 });
-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$g(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$a = { class: "m-editor-empty-panel" };
+const _hoisted_2$4 = { class: "m-editor-empty-content" };
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$c, [
-    createElementVNode("div", _hoisted_2$6, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+    createElementVNode("div", _hoisted_2$4, [
       createElementVNode("div", {
         class: "m-editor-empty-button",
         onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
@@ -1458,12 +1508,12 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
           })
         ]),
-        _hoisted_3$4
+        _hoisted_3$2
       ])
     ])
   ]);
 }
-var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
+var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
 /*
 Copyright (c) 2018 Daybrush
@@ -2674,7 +2724,7 @@ function (_super) {
 
 var Gesto$1 = Gesto;
 
-const _sfc_main$f = defineComponent({
+const _sfc_main$g = defineComponent({
   name: "m-editor-resize",
   props: {
     type: {
@@ -2716,33 +2766,33 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-const _hoisted_1$b = {
+const _hoisted_1$9 = {
   ref: "target",
   class: "m-editor-resizer"
 };
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$b, [
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$9, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
-var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   components: {
     AddPageBox,
     Resizer
   },
   setup() {
-    const services = inject("services");
-    const root = computed(() => services?.editorService.get("root"));
+    const { editorService, uiService } = inject("services") || {};
+    const root = computed(() => editorService?.get("root"));
     return {
       root,
-      pageLength: computed(() => root.value?.items?.length || 0),
-      showSrc: computed(() => services?.uiService.get("showSrc")),
-      columnWidth: computed(() => services?.uiService.get("columnWidth")),
+      pageLength: computed(() => editorService?.get("pageLength") || 0),
+      showSrc: computed(() => uiService?.get("showSrc")),
+      columnWidth: computed(() => uiService?.get("columnWidth")),
       saveCode(value) {
         try {
-          services?.editorService.set("root", eval(value));
+          editorService?.set("root", eval(value));
         } catch (e) {
           console.error(e);
         }
@@ -2750,24 +2800,24 @@ const _sfc_main$e = defineComponent({
     };
   }
 });
-const _hoisted_1$a = { class: "m-editor" };
-const _hoisted_2$5 = {
+const _hoisted_1$8 = { class: "m-editor" };
+const _hoisted_2$3 = {
   key: 1,
   class: "m-editor-content"
 };
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_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$a, [
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
     _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
       key: 0,
       class: "m-editor-content",
       "init-values": _ctx.root,
       onSave: _ctx.saveCode
-    }, null, 8, ["init-values", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$5, [
+    }, null, 8, ["init-values", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
       createElementVNode("div", {
         class: "m-editor-framework-left",
         style: normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
@@ -2800,9 +2850,9 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
-const _sfc_main$d = defineComponent({
+const _sfc_main$e = defineComponent({
   name: "m-icon",
   components: { Edit },
   props: {
@@ -2816,8 +2866,8 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-const _hoisted_1$9 = ["src"];
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$7 = ["src"];
+function _sfc_render$e(_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 }, {
@@ -2828,7 +2878,7 @@ function _sfc_render$d(_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$9)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+  }, null, 8, _hoisted_1$7)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
     key: 2,
     class: normalizeClass(_ctx.icon)
   }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
@@ -2838,9 +2888,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }));
 }
-var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
-const _sfc_main$c = defineComponent({
+const _sfc_main$d = defineComponent({
   components: { MIcon, ArrowDown },
   props: {
     data: {
@@ -2850,6 +2900,10 @@ const _sfc_main$c = defineComponent({
         type: "text",
         display: false
       })
+    },
+    eventType: {
+      type: String,
+      default: "click"
     }
   },
   setup(props) {
@@ -2876,7 +2930,7 @@ const _sfc_main$c = defineComponent({
         case "delete":
           return {
             type: "button",
-            icon: Delete,
+            icon: markRaw(Delete),
             tooltip: "\u522A\u9664",
             disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
             handler: () => services?.editorService.remove(services?.editorService.get("node"))
@@ -2884,7 +2938,7 @@ const _sfc_main$c = defineComponent({
         case "undo":
           return {
             type: "button",
-            icon: Back,
+            icon: markRaw(Back),
             tooltip: "\u540E\u9000",
             disabled: () => !services?.historyService.state.canUndo,
             handler: () => services?.editorService.undo()
@@ -2892,7 +2946,7 @@ const _sfc_main$c = defineComponent({
         case "redo":
           return {
             type: "button",
-            icon: Right,
+            icon: markRaw(Right),
             tooltip: "\u524D\u8FDB",
             disabled: () => !services?.historyService.state.canRedo,
             handler: () => services?.editorService.redo()
@@ -2900,28 +2954,28 @@ const _sfc_main$c = defineComponent({
         case "zoom-in":
           return {
             type: "button",
-            icon: ZoomIn,
+            icon: markRaw(ZoomIn),
             tooltip: "\u653E\u5927",
             handler: zoomInHandler
           };
         case "zoom-out":
           return {
             type: "button",
-            icon: ZoomOut,
+            icon: markRaw(ZoomOut),
             tooltip: "\u7E2E\u5C0F",
             handler: zoomOutHandler
           };
         case "rule":
           return {
             type: "button",
-            icon: ScaleToOriginal,
+            icon: markRaw(ScaleToOriginal),
             tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
             handler: () => uiService?.set("showRule", !showRule.value)
           };
         case "guides":
           return {
             type: "button",
-            icon: Grid,
+            icon: markRaw(Grid),
             tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
             handler: () => uiService?.set("showGuides", !showGuides.value)
           };
@@ -2942,9 +2996,16 @@ const _sfc_main$c = defineComponent({
       }
       return item.value.disabled;
     });
+    const buttonHandler = (item2, event) => {
+      if (disabled.value)
+        return;
+      if (typeof item2.handler === "function" && services) {
+        item2.handler?.(services, event);
+      }
+    };
     return {
-      ZoomIn,
-      ZoomOut,
+      ZoomIn: markRaw(ZoomIn),
+      ZoomOut: markRaw(ZoomOut),
       item,
       zoom,
       disabled,
@@ -2965,31 +3026,42 @@ const _sfc_main$c = defineComponent({
           command.item.handler(services);
         }
       },
-      buttonHandler(item2) {
-        if (disabled.value)
+      clickHandler(item2, event) {
+        if (props.eventType !== "click")
+          return;
+        if (item2.type === "button") {
+          buttonHandler(item2, event);
+        }
+      },
+      mousedownHandler(item2, event) {
+        if (props.eventType !== "mousedown")
           return;
-        if (typeof item2.handler === "function") {
-          item2.handler?.(services);
+        if (item2.type === "button") {
+          buttonHandler(item2, event);
+        }
+      },
+      mouseupHandler(item2, event) {
+        if (props.eventType !== "mouseup")
+          return;
+        if (item2.type === "button") {
+          buttonHandler(item2, event);
         }
       }
     };
   }
 });
-const _hoisted_1$8 = {
-  key: 0,
-  class: "menu-item"
-};
-const _hoisted_2$4 = {
+const _hoisted_1$6 = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_3$3 = {
+const _hoisted_2$2 = {
   class: "menu-item-text",
   style: { "margin": "0 5px" }
 };
-const _hoisted_4$2 = { class: "el-dropdown-link menubar-menu-button" };
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$1 = { class: "el-dropdown-link menubar-menu-button" };
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_divider = resolveComponent("el-divider");
+  const _component_tool_button = resolveComponent("tool-button", true);
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_button = resolveComponent("el-button");
   const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -2998,60 +3070,66 @@ function _sfc_render$c(_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$8, [
+  return _ctx.display ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(["menu-item", _ctx.item.type]),
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickHandler(_ctx.item, $event)),
+    onMousedown: _cache[1] || (_cache[1] = ($event) => _ctx.mousedownHandler(_ctx.item, $event)),
+    onMouseup: _cache[2] || (_cache[2] = ($event) => _ctx.mouseupHandler(_ctx.item, $event))
+  }, [
     _ctx.item.type === "divider" ? (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_el_button, {
-        size: "small",
-        type: "text"
+      direction: _ctx.item.direction || "vertical"
+    }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$6, toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+      createVNode(_component_tool_button, {
+        data: { type: "button", icon: _ctx.ZoomIn, handler: _ctx.zoomInHandler, tooltip: "\u653E\u5927" },
+        "event-type": _ctx.eventType
+      }, null, 8, ["data", "event-type"]),
+      createElementVNode("span", _hoisted_2$2, toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
+      createVNode(_component_tool_button, {
+        data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
+        "event-type": _ctx.eventType
+      }, null, 8, ["data", "event-type"])
+    ], 64)) : _ctx.item.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+      _ctx.item.tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 0,
+        effect: "dark",
+        placement: "bottom-start",
+        content: _ctx.item.tooltip
       }, {
         default: withCtx(() => [
-          createVNode(_component_m_icon, {
-            icon: _ctx.ZoomIn,
-            onClick: _ctx.zoomInHandler
-          }, null, 8, ["icon", "onClick"])
+          createVNode(_component_el_button, {
+            size: "small",
+            type: "text",
+            disabled: _ctx.disabled
+          }, {
+            default: withCtx(() => [
+              _ctx.item.icon ? (openBlock(), createBlock(_component_m_icon, {
+                key: 0,
+                icon: _ctx.item.icon
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              createElementVNode("span", null, toDisplayString(_ctx.item.text), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
         ]),
         _: 1
-      }),
-      createElementVNode("span", _hoisted_3$3, toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
-      createVNode(_component_el_button, {
+      }, 8, ["content"])) : (openBlock(), createBlock(_component_el_button, {
+        key: 1,
         size: "small",
-        type: "text"
+        type: "text",
+        disabled: _ctx.disabled
       }, {
         default: withCtx(() => [
-          createVNode(_component_m_icon, {
-            icon: _ctx.ZoomOut,
-            onClick: _ctx.zoomOutHandler
-          }, null, 8, ["icon", "onClick"])
+          _ctx.item.icon ? (openBlock(), createBlock(_component_m_icon, {
+            key: 0,
+            icon: _ctx.item.icon
+          }, null, 8, ["icon"])) : createCommentVNode("", true),
+          createElementVNode("span", null, toDisplayString(_ctx.item.text), 1)
         ]),
         _: 1
-      })
-    ], 64)) : _ctx.item.type === "button" ? (openBlock(), createBlock(_component_el_tooltip, {
-      key: 3,
-      effect: "dark",
-      placement: "bottom-start",
-      content: _ctx.item.tooltip || _ctx.item.text
-    }, {
-      default: withCtx(() => [
-        createVNode(_component_el_button, {
-          size: "small",
-          type: "text",
-          disabled: _ctx.disabled,
-          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.buttonHandler(_ctx.item))
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_m_icon, {
-              icon: _ctx.item.icon
-            }, null, 8, ["icon"]),
-            createElementVNode("span", null, toDisplayString(_ctx.item.text), 1)
-          ]),
-          _: 1
-        }, 8, ["disabled"])
-      ]),
-      _: 1
-    }, 8, ["content"])) : _ctx.item.type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
+      }, 8, ["disabled"]))
+    ], 64)) : _ctx.item.type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
       key: 4,
       trigger: "click",
       disabled: _ctx.disabled,
@@ -3076,7 +3154,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
         })) : createCommentVNode("", true)
       ]),
       default: withCtx(() => [
-        createElementVNode("span", _hoisted_4$2, [
+        createElementVNode("span", _hoisted_3$1, [
           createTextVNode(toDisplayString(_ctx.item.text), 1),
           createVNode(_component_el_icon, { class: "el-icon--right" }, {
             default: withCtx(() => [
@@ -3088,11 +3166,11 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 1
     }, 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);
+  ], 34)) : createCommentVNode("", true);
 }
-var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
-const _sfc_main$b = defineComponent({
+const _sfc_main$c = defineComponent({
   name: "nav-menu",
   components: { ToolButton },
   props: {
@@ -3112,7 +3190,7 @@ const _sfc_main$b = defineComponent({
     };
   }
 });
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   return openBlock(), createElementBlock("div", {
     class: "m-editor-nav-menu",
@@ -3134,9 +3212,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ], 4);
 }
-var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
-const _sfc_main$a = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "m-editor-props-panel",
   emits: ["mounted"],
   setup(props, { emit }) {
@@ -3182,7 +3260,7 @@ const _sfc_main$a = defineComponent({
     };
   }
 });
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createBlock(_component_m_form, {
     class: "m-editor-props-panel",
@@ -3194,9 +3272,9 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.submit
   }, null, 8, ["init-values", "config", "onChange"]);
 }
-var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
-const _sfc_main$9 = defineComponent({
+const _sfc_main$a = defineComponent({
   name: "ui-component-panel",
   components: { MIcon },
   setup() {
@@ -3217,13 +3295,23 @@ const _sfc_main$9 = defineComponent({
           type,
           ...data
         });
+      },
+      dragstartHandler({ text, type, data = {} }, e) {
+        if (e.dataTransfer) {
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("data", serialize({
+            name: text,
+            type,
+            ...data
+          }).replace(/"(\w+)":\s/g, "$1: "));
+        }
       }
     };
   }
 });
-const _hoisted_1$7 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-const _hoisted_2$3 = ["onClick"];
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$5 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+const _hoisted_2$1 = ["onClick", "onDragstart"];
+function _sfc_render$a(_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");
@@ -3253,15 +3341,17 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 name: index
               }, {
                 title: withCtx(() => [
-                  _hoisted_1$7,
+                  _hoisted_1$5,
                   createTextVNode(toDisplayString(group.title), 1)
                 ]),
                 default: withCtx(() => [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
                     return openBlock(), createElementBlock("div", {
                       class: "component-item",
+                      draggable: "true",
                       key: item.type,
-                      onClick: ($event) => _ctx.appendComponent(item)
+                      onClick: ($event) => _ctx.appendComponent(item),
+                      onDragstart: ($event) => _ctx.dragstartHandler(item, $event)
                     }, [
                       createVNode(_component_m_icon, {
                         icon: item.icon
@@ -3276,7 +3366,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                         ]),
                         _: 2
                       }, 1032, ["content"])
-                    ], 8, _hoisted_2$3);
+                    ], 40, _hoisted_2$1);
                   }), 128))
                 ]),
                 _: 2
@@ -3290,98 +3380,194 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+
+const _sfc_main$9 = defineComponent({
+  components: { ToolButton },
+  props: {
+    menuData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup() {
+    const menu = ref();
+    const subMenu = ref();
+    const visible = ref(false);
+    const subMenuData = ref([]);
+    const menuStyle = ref({
+      left: "0",
+      top: "0"
+    });
+    const hide = () => {
+      visible.value = false;
+    };
+    onMounted(() => {
+      globalThis.addEventListener("mousedown", (e) => {
+        if (!visible.value || e.target && menu.value?.contains(e.target)) {
+          return;
+        }
+        hide();
+      }, true);
+    });
+    return {
+      menu,
+      subMenu,
+      visible,
+      menuStyle,
+      subMenuData,
+      hide,
+      show(e) {
+        visible.value = true;
+        nextTick(() => {
+          const menuHeight = menu.value?.clientHeight || 0;
+          let top = e.clientY;
+          if (menuHeight + e.clientY > document.body.clientHeight) {
+            top = document.body.clientHeight - menuHeight;
+          }
+          menuStyle.value = {
+            top: `${top}px`,
+            left: `${e.clientX}px`
+          };
+        });
+      },
+      showSubMenu(item) {
+        const menuItem = item;
+        if (typeof item !== "object" || !menuItem.items?.length) {
+          return;
+        }
+        subMenuData.value = menuItem.items;
+        if (menu.value) {
+          subMenu.value.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth,
+            clientY: menu.value.offsetTop
+          });
+        }
+      }
+    };
+  }
+});
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_tool_button = resolveComponent("tool-button");
+  const _component_content_menu = resolveComponent("content-menu", true);
+  return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
+    key: 0,
+    class: "magic-editor-content-menu",
+    ref: "menu",
+    style: normalizeStyle(_ctx.menuStyle)
+  }, [
+    createElementVNode("div", null, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
+        return openBlock(), createBlock(_component_tool_button, {
+          "event-type": "mouseup",
+          data: item,
+          key: index,
+          onMouseup: _ctx.hide,
+          onMouseenter: ($event) => _ctx.showSubMenu(item)
+        }, null, 8, ["data", "onMouseup", "onMouseenter"]);
+      }), 128))
+    ]),
+    (openBlock(), createBlock(Teleport, { to: "body" }, [
+      createVNode(_component_content_menu, {
+        class: "sub-menu",
+        ref: "subMenu",
+        "menu-data": _ctx.subMenuData
+      }, null, 8, ["menu-data"])
+    ]))
+  ], 4)), [
+    [vShow, _ctx.visible]
+  ]) : createCommentVNode("", true);
+}
+var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
 const _sfc_main$8 = defineComponent({
-  name: "magic-editor-content-menu",
+  components: { ContentMenu },
   setup() {
     const services = inject("services");
-    const subVisible = ref(false);
+    const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
-    return {
-      subVisible,
-      node,
-      componentGroupList: computed(() => services?.componentListService.getList()),
-      append(config) {
+    const isRoot = computed(() => node.value?.type === NodeType.ROOT);
+    const isPage = computed(() => node.value?.type === NodeType.PAGE);
+    const componentList = computed(() => services?.componentListService.getList() || []);
+    const createMenuItems = (group) => group.items.map((component) => ({
+      text: component.text,
+      type: "button",
+      icon: component.icon,
+      handler: () => {
         services?.editorService.add({
-          name: config.text,
-          type: config.type,
-          ...config.data || {}
+          name: component.text,
+          type: component.type,
+          ...component.data || {}
         });
-      },
-      remove() {
-        node.value && services?.editorService.remove(node.value);
-      },
-      copy(node2) {
-        node2 && services?.editorService.copy(node2);
-      },
-      setSubVisitable(v) {
-        subVisible.value = v;
+      }
+    }));
+    const getSubMenuData = computed(() => {
+      if (node.value?.type === "tabs") {
+        return [
+          {
+            text: "\u6807\u7B7E\u9875",
+            type: "button",
+            icon: Files,
+            handler: () => {
+              services?.editorService.add({
+                type: "tab-pane"
+              });
+            }
+          }
+        ];
+      }
+      if (node.value?.items) {
+        return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [
+          {
+            type: "divider",
+            direction: "horizontal"
+          }
+        ] : []), []) || [];
+      }
+      return [];
+    });
+    return {
+      menu,
+      menuData: computed(() => [
+        {
+          type: "button",
+          text: "\u65B0\u589E",
+          icon: markRaw(Plus),
+          display: () => node.value?.items,
+          items: getSubMenuData.value
+        },
+        {
+          type: "button",
+          text: "\u590D\u5236",
+          icon: markRaw(DocumentCopy),
+          display: () => !isRoot.value,
+          handler: () => {
+            node.value && services?.editorService.copy(node.value);
+          }
+        },
+        {
+          type: "button",
+          text: "\u5220\u9664",
+          icon: markRaw(Delete),
+          display: () => !isRoot.value && !isPage.value,
+          handler: () => {
+            node.value && services?.editorService.remove(node.value);
+          }
+        }
+      ]),
+      show(e) {
+        menu.value?.show(e);
       }
     };
   }
 });
-const _hoisted_1$6 = {
-  key: 0,
-  class: "magic-editor-content-menu"
-};
-const _hoisted_2$2 = ["onClick"];
-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$6, [
-    _ctx.node.items ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: "magic-editor-content-menu-item",
-      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,
-      class: "magic-editor-content-menu-item",
-      onClick: _cache[2] || (_cache[2] = () => _ctx.copy(_ctx.node))
-    }, "\u590D\u5236")) : createCommentVNode("", true),
-    _ctx.node.type !== "app" && _ctx.node.type !== "page" ? (openBlock(), createElementBlock("div", {
-      key: 2,
-      class: "magic-editor-content-menu-item",
-      onClick: _cache[3] || (_cache[3] = () => _ctx.remove())
-    }, " \u5220\u9664 ")) : createCommentVNode("", true),
-    withDirectives(createElementVNode("div", {
-      class: "subMenu",
-      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(() => [
-          _ctx.node.type === "tabs" ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[4] || (_cache[4] = () => _ctx.append({
-              type: "tab-pane"
-            }))
-          }, " \u6807\u7B7E ")) : _ctx.node.items ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.componentGroupList, (list) => {
-            return openBlock(), createElementBlock("div", {
-              key: list.title
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(list.items, (item) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  item ? (openBlock(), createElementBlock("div", {
-                    class: "magic-editor-content-menu-item",
-                    key: item.type,
-                    onClick: () => _ctx.append(item)
-                  }, toDisplayString(item.text), 9, _hoisted_2$2)) : createCommentVNode("", true)
-                ], 64);
-              }), 256)),
-              _hoisted_3$2
-            ]);
-          }), 128)) : createCommentVNode("", true)
-        ]),
-        _: 1
-      })
-    ], 544), [
-      [vShow, _ctx.subVisible]
-    ])
-  ])) : createCommentVNode("", true);
+  const _component_content_menu = resolveComponent("content-menu");
+  return openBlock(), createBlock(_component_content_menu, {
+    "menu-data": _ctx.menuData,
+    ref: "menu",
+    style: { "overflow": "initial" }
+  }, null, 8, ["menu-data"]);
 }
 var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
@@ -3475,56 +3661,37 @@ const useFilter = (tree) => ({
     tree.value?.filter(val);
   }
 });
-const useContentMenu = (editorService) => {
-  const menuStyle = ref({
-    position: "absolute",
-    left: "0",
-    top: "0",
-    display: "none"
-  });
-  onMounted(() => {
-    document.addEventListener("click", () => {
-      menuStyle.value.display = "none";
-    }, true);
-  });
-  return {
-    menuStyle,
-    contextmenu(event, data) {
-      const bodyHeight = globalThis.document.body.clientHeight;
-      const left = `${event.clientX + 20}px`;
-      let top = `${event.clientY - 10}px`;
-      if (event.clientY + 300 > bodyHeight) {
-        top = `${bodyHeight - 300}px`;
-      }
-      menuStyle.value.left = left;
-      menuStyle.value.top = top;
-      menuStyle.value.display = "";
-      select(data, editorService);
-    }
-  };
-};
 const _sfc_main$7 = defineComponent({
   name: "magic-editor-layer-panel",
   components: { LayerMenu },
   setup() {
     const services = inject("services");
     const tree = ref();
+    const menu = ref();
     const clicked = ref(false);
     const editorService = services?.editorService;
     const highlightHandler = throttle((data) => {
       highlight(data, editorService);
     }, throttleTime);
-    const toogleClickFlag = () => {
+    const toggleClickFlag = () => {
       clicked.value = !clicked.value;
     };
     const statusData = useStatus(tree, editorService);
     const canHighlight = computed(() => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value);
+    editorService?.on("remove", () => {
+      setTimeout(() => {
+        tree.value?.getNode(editorService.get("node").id)?.updateChildren();
+      }, 0);
+    });
     return {
       tree,
+      menu,
       ...statusData,
       ...useDrop(tree, editorService),
       ...useFilter(tree),
-      ...useContentMenu(editorService),
+      highlightHandler,
+      toggleClickFlag,
+      canHighlight,
       clickHandler(data) {
         if (services?.uiService.get("uiSelectMode")) {
           document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
@@ -3533,13 +3700,15 @@ const _sfc_main$7 = defineComponent({
         tree.value?.setCurrentKey(data.id);
         select(data, editorService);
       },
-      highlightHandler,
-      toogleClickFlag,
-      canHighlight
+      async contextmenu(event, data) {
+        event.preventDefault();
+        await select(data, editorService);
+        menu.value?.show(event);
+      }
     };
   }
 });
-const _hoisted_1$5 = ["id", "onMouseenter"];
+const _hoisted_1$4 = ["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");
@@ -3580,8 +3749,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           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)),
+            onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
+            onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
             onMouseenter: ($event) => _ctx.highlightHandler(data)
           }, [
             renderSlot(_ctx.$slots, "layer-node-content", {
@@ -3590,14 +3759,12 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             }, () => [
               createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
             ])
-          ], 42, _hoisted_1$5)
+          ], 42, _hoisted_1$4)
         ]),
         _: 3
       }, 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)
-        }, null, 8, ["style"])
+        createVNode(_component_layer_menu, { ref: "menu" }, null, 512)
       ]))
     ]),
     _: 3
@@ -3649,7 +3816,7 @@ const _sfc_main$6 = defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
@@ -3677,7 +3844,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
                 key: 0,
                 icon: item.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              item.text ? (openBlock(), createElementBlock("div", _hoisted_1$4, toDisplayString(item.text), 1)) : createCommentVNode("", true)
+              item.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(item.text), 1)) : createCommentVNode("", true)
             ])
           ]),
           default: withCtx(() => [
@@ -3767,12 +3934,14 @@ const useScroll = (root) => {
   };
 };
 const _sfc_main$5 = defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus },
+  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
   setup() {
     const services = inject("services");
     const editorService = services?.editorService;
     const root = computed(() => editorService?.get("root"));
     return {
+      Delete: markRaw(Delete),
+      DocumentCopy: markRaw(DocumentCopy),
       ...useScroll(root),
       root,
       page: computed(() => editorService?.get("page")),
@@ -3801,23 +3970,22 @@ const _sfc_main$5 = defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   class: "m-editor-page-bar",
   ref: "pageBar"
 };
-const _hoisted_2$1 = ["onClick"];
-const _hoisted_3$1 = { class: "m-editor-page-bar-title" };
-const _hoisted_4$1 = ["onClick"];
-const _hoisted_5 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "m-editor-page-bar-title" };
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = 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_tool_button = resolveComponent("tool-button");
   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, [
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
     createElementVNode("div", {
       id: "m-editor-page-bar-add-icon",
       class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -3854,7 +4022,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
           onClick: ($event) => _ctx.switchPage(item)
         }, [
-          createElementVNode("div", _hoisted_3$1, [
+          createElementVNode("div", _hoisted_3, [
             renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
               createVNode(_component_el_tooltip, {
                 effect: "dark",
@@ -3869,6 +4037,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ]),
           createVNode(_component_el_popover, {
+            "popper-class": "page-bar-popover",
             placement: "top",
             width: 160,
             trigger: "hover"
@@ -3884,20 +4053,28 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
             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)
+                  createVNode(_component_tool_button, {
+                    data: {
+                      type: "button",
+                      text: "\u590D\u5236",
+                      icon: _ctx.DocumentCopy,
+                      handler: () => _ctx.copy(item)
+                    }
+                  }, null, 8, ["data"]),
+                  createVNode(_component_tool_button, {
+                    data: {
+                      type: "button",
+                      text: "\u5220\u9664",
+                      icon: _ctx.Delete,
+                      handler: () => _ctx.remove(item)
+                    }
+                  }, null, 8, ["data"])
                 ])
               ])
             ]),
             _: 2
           }, 1024)
-        ], 10, _hoisted_2$1);
+        ], 10, _hoisted_2);
       }), 128))
     ], 4)) : createCommentVNode("", true),
     _ctx.canScroll ? (openBlock(), createElementBlock("div", {
@@ -4117,12 +4294,12 @@ const _sfc_main$4 = defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
   class: "m-editor-scroll-viewer-container",
   ref: "container"
 };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
     createElementVNode("div", {
       ref: "el",
       style: normalizeStyle(_ctx.style)
@@ -4134,7 +4311,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
 var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
 const _sfc_main$3 = defineComponent({
-  name: "magic-editor-ui-viewer-menu",
+  components: { ContentMenu },
   setup() {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -4143,6 +4320,7 @@ const _sfc_main$3 = defineComponent({
     const canCenter = ref(false);
     const node = computed(() => editorService?.get("node"));
     const parent = computed(() => editorService?.get("parent"));
+    const isPage = computed(() => node.value?.type === NodeType.PAGE);
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
       canPaste.value = data !== "undefined" && !!data;
@@ -4155,133 +4333,114 @@ const _sfc_main$3 = defineComponent({
     }, { immediate: true });
     return {
       menu,
-      canPaste,
-      canDelete: computed(() => node.value?.type !== NodeType.PAGE),
-      canMoveZPos: computed(() => node.value?.type !== NodeType.PAGE),
-      canCenter,
-      center() {
-        node.value && editorService?.alignCenter(node.value);
-      },
-      copy() {
-        node.value && editorService?.copy(node.value);
-        canPaste.value = true;
-      },
-      paste() {
-        const top = menu.value?.offsetTop || 0;
-        const left = menu.value?.offsetLeft || 0;
-        editorService?.paste({ left, top });
-      },
-      remove() {
-        node.value && editorService?.remove(node.value);
-      },
-      top() {
-        editorService?.moveLayer(LayerOffset.TOP);
-      },
-      bottom() {
-        editorService?.moveLayer(LayerOffset.BOTTOM);
-      },
-      topItem() {
-        editorService?.moveLayer(1);
-      },
-      bottomItem() {
-        editorService?.moveLayer(-1);
-      },
-      clearGuides() {
-        editorService?.get("stage").clearGuides();
+      menuData: reactive([
+        {
+          type: "button",
+          text: "\u6C34\u5E73\u5C45\u4E2D",
+          display: () => canCenter.value,
+          handler: () => {
+            node.value && editorService?.alignCenter(node.value);
+          }
+        },
+        {
+          type: "button",
+          text: "\u590D\u5236",
+          icon: markRaw(DocumentCopy),
+          handler: () => {
+            node.value && editorService?.copy(node.value);
+            canPaste.value = true;
+          }
+        },
+        {
+          type: "button",
+          text: "\u7C98\u8D34",
+          display: () => canPaste.value,
+          handler: () => {
+            const top = menu.value?.$el.offsetTop || 0;
+            const left = menu.value?.$el.offsetLeft || 0;
+            editorService?.paste({ left, top });
+          }
+        },
+        {
+          type: "divider",
+          direction: "horizontal",
+          display: () => !isPage.value
+        },
+        {
+          type: "button",
+          text: "\u4E0A\u79FB\u4E00\u5C42",
+          icon: markRaw(Top),
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(1);
+          }
+        },
+        {
+          type: "button",
+          text: "\u4E0B\u79FB\u4E00\u5C42",
+          icon: markRaw(Bottom),
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(-1);
+          }
+        },
+        {
+          type: "button",
+          text: "\u7F6E\u9876",
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.TOP);
+          }
+        },
+        {
+          type: "button",
+          text: "\u7F6E\u5E95",
+          display: () => !isPage.value,
+          handler: () => {
+            editorService?.moveLayer(LayerOffset.BOTTOM);
+          }
+        },
+        {
+          type: "divider",
+          direction: "horizontal",
+          display: () => !isPage.value
+        },
+        {
+          type: "button",
+          text: "\u5220\u9664",
+          icon: Delete,
+          display: () => !isPage.value,
+          handler: () => {
+            node.value && editorService?.remove(node.value);
+          }
+        },
+        {
+          type: "divider",
+          direction: "horizontal"
+        },
+        {
+          type: "button",
+          text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
+          handler: () => {
+            editorService?.get("stage").clearGuides();
+          }
+        }
+      ]),
+      show(e) {
+        menu.value?.show(e);
       }
     };
   }
 });
-const _hoisted_1$1 = {
-  class: "magic-editor-content-menu",
-  ref: "menu"
-};
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
-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$1, [
-    createElementVNode("div", null, [
-      _ctx.canCenter ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[0] || (_cache[0] = () => _ctx.center())
-      }, "\u6C34\u5E73\u5C45\u4E2D")) : createCommentVNode("", true),
-      createElementVNode("div", {
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[1] || (_cache[1] = () => _ctx.copy())
-      }, "\u590D\u5236"),
-      _ctx.canPaste ? (openBlock(), createElementBlock("div", {
-        key: 1,
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.paste && _ctx.paste(...args))
-      }, "\u7C98\u8D34")) : createCommentVNode("", true),
-      _ctx.canMoveZPos ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-        _hoisted_2,
-        createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.topItem && _ctx.topItem(...args))
-        }, "\u4E0A\u79FB\u4E00\u5C42"),
-        createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[4] || (_cache[4] = (...args) => _ctx.bottomItem && _ctx.bottomItem(...args))
-        }, "\u4E0B\u79FB\u4E00\u5C42"),
-        createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[5] || (_cache[5] = (...args) => _ctx.top && _ctx.top(...args))
-        }, "\u7F6E\u9876"),
-        createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[6] || (_cache[6] = (...args) => _ctx.bottom && _ctx.bottom(...args))
-        }, "\u7F6E\u5E95")
-      ], 64)) : createCommentVNode("", true),
-      _ctx.canDelete ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-        _hoisted_3,
-        createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[7] || (_cache[7] = () => _ctx.remove())
-        }, "\u5220\u9664")
-      ], 64)) : createCommentVNode("", true),
-      _hoisted_4,
-      createElementVNode("div", {
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[8] || (_cache[8] = (...args) => _ctx.clearGuides && _ctx.clearGuides(...args))
-      }, "\u6E05\u7A7A\u53C2\u8003\u7EBF")
-    ])
-  ], 512);
+  const _component_content_menu = resolveComponent("content-menu");
+  return openBlock(), createBlock(_component_content_menu, {
+    "menu-data": _ctx.menuData,
+    ref: "menu"
+  }, null, 8, ["menu-data"]);
 }
 var ViewerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
-const useMenu = () => {
-  const menu = ref();
-  const menuStyle = ref({
-    display: "none",
-    left: "0",
-    top: "0"
-  });
-  onMounted(() => {
-    document.addEventListener("click", () => {
-      menuStyle.value.display = "none";
-    }, true);
-  });
-  return {
-    menu,
-    menuStyle,
-    contextmenuHandler(e) {
-      e.preventDefault();
-      const menuHeight = menu.value?.$el.clientHeight;
-      let top = e.clientY;
-      if (menuHeight + e.clientY > document.body.clientHeight) {
-        top = document.body.clientHeight - menuHeight;
-      }
-      menuStyle.value = {
-        display: "block",
-        top: `${top}px`,
-        left: `${e.clientX}px`
-      };
-    }
-  };
-};
 const _sfc_main$2 = defineComponent({
   name: "magic-stage",
   components: {
@@ -4308,11 +4467,12 @@ const _sfc_main$2 = defineComponent({
     const services = inject("services");
     const stageWrap = ref();
     const stageContainer = ref();
+    const menu = ref();
     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 zoom = computed(() => services?.uiService.get("zoom") || 1);
     const node = computed(() => services?.editorService.get("node"));
     let stage = null;
     let runtime = null;
@@ -4394,9 +4554,36 @@ const _sfc_main$2 = defineComponent({
     return {
       stageWrap,
       stageContainer,
+      menu,
       stageRect,
       zoom,
-      ...useMenu()
+      contextmenuHandler(e2) {
+        e2.preventDefault();
+        menu.value?.show(e2);
+      },
+      dragoverHandler(e2) {
+        e2.preventDefault();
+        if (e2.dataTransfer) {
+          e2.dataTransfer.dropEffect = "move";
+        }
+      },
+      async dropHandler(e) {
+        e.preventDefault();
+        if (e.dataTransfer && page.value && stageContainer.value && stage) {
+          const config = eval(`(${e.dataTransfer.getData("data")})`);
+          const layout = await services?.editorService.getLayout(page.value);
+          const containerRect = stageContainer.value.getBoundingClientRect();
+          const { scrollTop, scrollLeft } = stage.mask;
+          if (layout === Layout.ABSOLUTE) {
+            config.style = {
+              position: "absolute",
+              top: e.clientY - containerRect.top + scrollTop,
+              left: e.clientX - containerRect.left + scrollLeft
+            };
+          }
+          services?.editorService.add(config, page.value);
+        }
+      }
     };
   }
 });
@@ -4414,14 +4601,13 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("div", {
         class: "m-editor-stage-container",
         ref: "stageContainer",
+        style: normalizeStyle(`transform: scale(${_ctx.zoom})`),
         onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
-        style: normalizeStyle(`transform: scale(${_ctx.zoom})`)
+        onDrop: _cache[1] || (_cache[1] = (...args) => _ctx.dropHandler && _ctx.dropHandler(...args)),
+        onDragover: _cache[2] || (_cache[2] = (...args) => _ctx.dragoverHandler && _ctx.dragoverHandler(...args))
       }, null, 36),
       (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(_component_viewer_menu, {
-          ref: "menu",
-          style: normalizeStyle(_ctx.menuStyle)
-        }, null, 8, ["style"])
+        createVNode(_component_viewer_menu, { ref: "menu" }, null, 512)
       ]))
     ]),
     _: 1
@@ -4468,10 +4654,10 @@ const _sfc_main$1 = defineComponent({
       }).keydown([ctrl, "c"], (e) => {
         e.inputEvent.preventDefault();
         node.value && services?.editorService.copy(node.value);
-      }).keyup([ctrl, "v"], (e) => {
+      }).keydown([ctrl, "v"], (e) => {
         e.inputEvent.preventDefault();
         node.value && services?.editorService.paste();
-      }).keyup([ctrl, "x"], (e) => {
+      }).keydown([ctrl, "x"], (e) => {
         e.inputEvent.preventDefault();
         if (!node.value || isPage(node.value))
           return;
@@ -4850,5 +5036,5 @@ var index = {
   }
 };
 
-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 };
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, 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