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

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('@tmagic/schema'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', '@tmagic/schema', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.schema, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
-})(this, (function (exports, vue, serialize, monaco, icons, schema, lodashEs, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
+})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,6 +29,10 @@
   var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
+  if (typeof window.global === "undefined") {
+    window.global = window;
+  }
+
   var _export_sfc = (sfc, props) => {
     const target = sfc.__vccOpts || sfc;
     for (const [key, val] of props) {
@@ -37,7 +41,7 @@
     return target;
   };
 
-  const _sfc_main$k = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -54,7 +58,7 @@
       };
     }
   });
-  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
       style: vue.normalizeStyle(`height: ${_ctx.height}`),
@@ -63,9 +67,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
+  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$l = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -120,7 +124,7 @@
       };
     }
   });
-  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_link = vue.resolveComponent("m-fields-link");
     return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
       config: _ctx.formConfig,
@@ -129,11 +133,11 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
   var UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "m-fields-ui-select",
     props: {
       labelWidth: String,
@@ -171,6 +175,9 @@
         }
       };
       return {
+        Delete: vue.markRaw(icons.Delete),
+        Pointer: vue.markRaw(icons.Pointer),
+        Close: vue.markRaw(icons.Close),
         val,
         uiSelectMode,
         toName: vue.computed(() => {
@@ -195,34 +202,64 @@
       };
     }
   });
-  const _hoisted_1$e = /* @__PURE__ */ vue.createElementVNode("i", {
-    class: "el-icon-delete",
-    style: { "color": "rgb(221, 75, 57)" }
-  }, "\u53D6\u6D88", -1);
-  const _hoisted_2$7 = [
-    _hoisted_1$e
-  ];
-  const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
-  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_el_button = vue.resolveComponent("el-button");
+    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
     return _ctx.uiSelectMode ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "m-fields-ui-select",
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
-    }, _hoisted_2$7)) : (vue.openBlock(), vue.createElementBlock("div", {
+    }, [
+      vue.createVNode(_component_el_button, {
+        type: "danger",
+        icon: _ctx.Delete,
+        text: "",
+        style: { "padding": "0" }
+      }, {
+        default: vue.withCtx(() => [
+          _hoisted_1$c
+        ]),
+        _: 1
+      }, 8, ["icon"])
+    ])) : (vue.openBlock(), vue.createElementBlock("div", {
       key: 1,
       class: "m-fields-ui-select",
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.startSelect && _ctx.startSelect(...args))
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.startSelect && _ctx.startSelect(...args)),
+      style: { "display": "flex" }
     }, [
-      _hoisted_3$5,
-      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1),
-      _ctx.val ? (vue.openBlock(), vue.createElementBlock("i", {
-        key: 0,
-        class: "el-icon-delete",
-        onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.deleteHandler && _ctx.deleteHandler(...args), ["stop"]))
-      })) : vue.createCommentVNode("", true)
+      vue.createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+        default: vue.withCtx(() => [
+          _ctx.val ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+            key: 0,
+            style: { "padding": "0" },
+            type: "danger",
+            icon: _ctx.Close,
+            text: "",
+            onClick: vue.withModifiers(_ctx.deleteHandler, ["stop"])
+          }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }),
+      vue.createVNode(_component_el_tooltip, {
+        content: _ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_button, {
+            text: "",
+            style: { "padding": "0", "margin": "0" }
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["content"])
     ]));
   }
-  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
   const toString = (v, language) => {
     let value = "";
@@ -239,7 +276,7 @@
     }
     return value;
   };
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -249,12 +286,16 @@
         type: [String, Object]
       },
       type: {
-        type: [String],
+        type: String,
         default: () => ""
       },
       language: {
-        type: [String],
+        type: String,
         default: () => "javascript"
+      },
+      options: {
+        type: Object,
+        default: () => ({})
       }
     },
     emits: ["initd", "save"],
@@ -264,6 +305,10 @@
       const values = vue.ref("");
       const loading = vue.ref(false);
       const codeEditor = vue.ref();
+      const resizeObserver = new globalThis.ResizeObserver(lodashEs.throttle(() => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300));
       const setEditorValue = (v, m) => {
         values.value = toString(v, props.language);
         if (props.type === "diff") {
@@ -276,10 +321,6 @@
         }
         return vsEditor?.setValue(values.value);
       };
-      const resizeHandler = () => {
-        vsEditor?.layout();
-        vsDiffEditor?.layout();
-      };
       const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
       const init = async () => {
         if (!codeEditor.value)
@@ -290,8 +331,9 @@
           tabSize: 2,
           theme: "vs-dark",
           fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 15,
-          formatOnPaste: true
+          fontSize: 14,
+          formatOnPaste: true,
+          ...props.options
         };
         if (props.type === "diff") {
           vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditor.value, options);
@@ -312,7 +354,7 @@
             emit("save", getEditorValue());
           });
         }
-        globalThis.addEventListener("resize", resizeHandler);
+        resizeObserver.observe(codeEditor.value);
       };
       vue.watch(() => props.initValues, (v, preV) => {
         if (v !== preV) {
@@ -327,7 +369,7 @@
         init();
       });
       vue.onUnmounted(() => {
-        globalThis.removeEventListener("resize", resizeHandler);
+        resizeObserver.disconnect();
       });
       return {
         values,
@@ -344,14 +386,14 @@
       };
     }
   });
-  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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, null, 512);
+  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, null, 512);
   }
-  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -532,6 +574,12 @@
       });
       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;
@@ -637,8 +685,7 @@
       }
       return lodashEs.cloneDeep({
         ...getDefaultPropsValue(type),
-        ...defaultValue,
-        ...this.state.propsValueMap[type] || {}
+        ...lodashEs.mergeWith(this.state.propsValueMap[type] || {}, defaultValue)
       });
     }
   }
@@ -725,7 +772,7 @@
   const setTop2Middle = (node, parentNode, stage) => {
     const style = node.style || {};
     const height = style.height || 0;
-    if (!stage || style.top || !parentNode.style || !utils.isNumber(height))
+    if (!stage || typeof style.top !== "undefined" || !parentNode.style || !utils.isNumber(height))
       return style;
     const { height: parentHeight } = parentNode.style;
     if (utils.isPage(parentNode)) {
@@ -835,6 +882,7 @@
         "paste",
         "alignCenter",
         "moveLayer",
+        "move",
         "undo",
         "redo",
         "highlight"
@@ -847,12 +895,14 @@
         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);
       }
     }
@@ -912,6 +962,7 @@
       } else {
         historyService.empty();
       }
+      this.emit("select", node);
       return node;
     }
     async selectNextNode() {
@@ -947,7 +998,8 @@
       const { type, ...config2 } = addNode;
       const curNode = this.get("node");
       let parentNode;
-      if (type === schema.NodeType.PAGE) {
+      const isPage2 = type === schema.NodeType.PAGE;
+      if (isPage2) {
         parentNode = this.get("root");
       } else if (parent && typeof parent !== "function") {
         parentNode = parent;
@@ -968,10 +1020,14 @@
       await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
       await this.select(newNode);
       this.addModifiedNodeId(newNode.id);
-      if (type !== schema.NodeType.PAGE) {
+      if (!isPage2) {
         this.pushHistoryState();
       }
       stage?.select(newNode.id);
+      if (isPage2) {
+        this.state.pageLength += 1;
+      }
+      this.emit("add", newNode);
       return newNode;
     }
     async remove(node) {
@@ -990,9 +1046,20 @@
       const stage = this.get("stage");
       stage?.remove({ id: node.id, root: this.get("root") });
       if (node.type === schema.NodeType.PAGE) {
+        this.state.pageLength -= 1;
         if (root.items[0]) {
           await this.select(root.items[0]);
           stage?.select(root.items[0].id);
+        } else {
+          this.set("node", null);
+          this.set("parent", null);
+          this.set("page", null);
+          this.set("stage", null);
+          this.set("highlightNode", null);
+          this.resetModifiedNodeId();
+          historyService.reset();
+          this.emit("remove", node);
+          return node;
         }
       } else {
         await this.select(parent);
@@ -1000,6 +1067,7 @@
       }
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
+      this.emit("remove", node);
       return node;
     }
     async update(config2) {
@@ -1043,6 +1111,7 @@
       }
       this.addModifiedNodeId(newConfig.id);
       this.pushHistoryState();
+      this.emit("update", newConfig);
       return newConfig;
     }
     async sort(id1, id2) {
@@ -1372,6 +1441,25 @@
                       defaultValue: "100% 100%"
                     }
                   ]
+                },
+                {
+                  type: "fieldset",
+                  legend: "\u5B57\u4F53",
+                  items: [
+                    {
+                      name: "color",
+                      text: "\u989C\u8272",
+                      type: "colorPicker"
+                    },
+                    {
+                      name: "fontSize",
+                      text: "\u5927\u5C0F"
+                    },
+                    {
+                      name: "fontWeight",
+                      text: "\u7C97\u7EC6"
+                    }
+                  ]
                 }
               ]
             }
@@ -1439,7 +1527,7 @@
     name: type
   });
 
-  const _sfc_main$g = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     components: { Plus: icons.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1456,14 +1544,14 @@
       };
     }
   });
-  const _hoisted_1$c = { class: "m-editor-empty-panel" };
-  const _hoisted_2$6 = { class: "m-editor-empty-content" };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$a = { class: "m-editor-empty-panel" };
+  const _hoisted_2$4 = { class: "m-editor-empty-content" };
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-      vue.createElementVNode("div", _hoisted_2$6, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+      vue.createElementVNode("div", _hoisted_2$4, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
           onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
@@ -1476,12 +1564,12 @@
               _: 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$i, [["render", _sfc_render$i]]);
 
   /*
   Copyright (c) 2018 Daybrush
@@ -2692,7 +2780,7 @@
 
   var Gesto$1 = Gesto;
 
-  const _sfc_main$f = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -2734,33 +2822,33 @@
       };
     }
   });
-  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 vue.openBlock(), vue.createElementBlock("span", _hoisted_1$b, [
+  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$9, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
-  const _sfc_main$e = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
     },
     setup() {
-      const services = vue.inject("services");
-      const root = vue.computed(() => services?.editorService.get("root"));
+      const { editorService, uiService } = vue.inject("services") || {};
+      const root = vue.computed(() => editorService?.get("root"));
       return {
         root,
-        pageLength: vue.computed(() => root.value?.items?.length || 0),
-        showSrc: vue.computed(() => services?.uiService.get("showSrc")),
-        columnWidth: vue.computed(() => services?.uiService.get("columnWidth")),
+        pageLength: vue.computed(() => editorService?.get("pageLength") || 0),
+        showSrc: vue.computed(() => uiService?.get("showSrc")),
+        columnWidth: vue.computed(() => uiService?.get("columnWidth")),
         saveCode(value) {
           try {
-            services?.editorService.set("root", eval(value));
+            editorService?.set("root", eval(value));
           } catch (e) {
             console.error(e);
           }
@@ -2768,24 +2856,24 @@
       };
     }
   });
-  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$g(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     const _component_add_page_box = vue.resolveComponent("add-page-box");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
       vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
       _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
         key: 0,
         class: "m-editor-content",
         "init-values": _ctx.root,
         onSave: _ctx.saveCode
-      }, null, 8, ["init-values", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
+      }, null, 8, ["init-values", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
         vue.createElementVNode("div", {
           class: "m-editor-framework-left",
           style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
@@ -2818,9 +2906,9 @@
       ]))
     ]);
   }
-  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$f = vue.defineComponent({
     name: "m-icon",
     components: { Edit: icons.Edit },
     props: {
@@ -2834,8 +2922,8 @@
       };
     }
   });
-  const _hoisted_1$9 = ["src"];
-  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$7 = ["src"];
+  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_edit = vue.resolveComponent("edit");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return !_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -2846,7 +2934,7 @@
     })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createElementBlock("img", {
       key: 1,
       src: _ctx.icon
-    }, null, 8, _hoisted_1$9)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+    }, null, 8, _hoisted_1$7)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
       key: 2,
       class: vue.normalizeClass(_ctx.icon)
     }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
@@ -2856,9 +2944,9 @@
       _: 1
     }));
   }
-  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     components: { MIcon, ArrowDown: icons.ArrowDown },
     props: {
       data: {
@@ -2868,6 +2956,10 @@
           type: "text",
           display: false
         })
+      },
+      eventType: {
+        type: String,
+        default: "click"
       }
     },
     setup(props) {
@@ -2894,7 +2986,7 @@
           case "delete":
             return {
               type: "button",
-              icon: icons.Delete,
+              icon: vue.markRaw(icons.Delete),
               tooltip: "\u522A\u9664",
               disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
               handler: () => services?.editorService.remove(services?.editorService.get("node"))
@@ -2902,7 +2994,7 @@
           case "undo":
             return {
               type: "button",
-              icon: icons.Back,
+              icon: vue.markRaw(icons.Back),
               tooltip: "\u540E\u9000",
               disabled: () => !services?.historyService.state.canUndo,
               handler: () => services?.editorService.undo()
@@ -2910,7 +3002,7 @@
           case "redo":
             return {
               type: "button",
-              icon: icons.Right,
+              icon: vue.markRaw(icons.Right),
               tooltip: "\u524D\u8FDB",
               disabled: () => !services?.historyService.state.canRedo,
               handler: () => services?.editorService.redo()
@@ -2918,28 +3010,28 @@
           case "zoom-in":
             return {
               type: "button",
-              icon: icons.ZoomIn,
+              icon: vue.markRaw(icons.ZoomIn),
               tooltip: "\u653E\u5927",
               handler: zoomInHandler
             };
           case "zoom-out":
             return {
               type: "button",
-              icon: icons.ZoomOut,
+              icon: vue.markRaw(icons.ZoomOut),
               tooltip: "\u7E2E\u5C0F",
               handler: zoomOutHandler
             };
           case "rule":
             return {
               type: "button",
-              icon: icons.ScaleToOriginal,
+              icon: vue.markRaw(icons.ScaleToOriginal),
               tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
               handler: () => uiService?.set("showRule", !showRule.value)
             };
           case "guides":
             return {
               type: "button",
-              icon: icons.Grid,
+              icon: vue.markRaw(icons.Grid),
               tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
               handler: () => uiService?.set("showGuides", !showGuides.value)
             };
@@ -2960,9 +3052,16 @@
         }
         return item.value.disabled;
       });
+      const buttonHandler = (item2, event) => {
+        if (disabled.value)
+          return;
+        if (typeof item2.handler === "function" && services) {
+          item2.handler?.(services, event);
+        }
+      };
       return {
-        ZoomIn: icons.ZoomIn,
-        ZoomOut: icons.ZoomOut,
+        ZoomIn: vue.markRaw(icons.ZoomIn),
+        ZoomOut: vue.markRaw(icons.ZoomOut),
         item,
         zoom,
         disabled,
@@ -2983,31 +3082,42 @@
             command.item.handler(services);
           }
         },
-        buttonHandler(item2) {
-          if (disabled.value)
+        clickHandler(item2, event) {
+          if (props.eventType !== "click")
+            return;
+          if (item2.type === "button") {
+            buttonHandler(item2, event);
+          }
+        },
+        mousedownHandler(item2, event) {
+          if (props.eventType !== "mousedown")
+            return;
+          if (item2.type === "button") {
+            buttonHandler(item2, event);
+          }
+        },
+        mouseupHandler(item2, event) {
+          if (props.eventType !== "mouseup")
             return;
-          if (typeof item2.handler === "function") {
-            item2.handler?.(services);
+          if (item2.type === "button") {
+            buttonHandler(item2, event);
           }
         }
       };
     }
   });
-  const _hoisted_1$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$e(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_divider = vue.resolveComponent("el-divider");
+    const _component_tool_button = vue.resolveComponent("tool-button", true);
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -3016,60 +3126,66 @@
     const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
     const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
     const _component_el_dropdown = vue.resolveComponent("el-dropdown");
-    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass(["menu-item", _ctx.item.type]),
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickHandler(_ctx.item, $event)),
+      onMousedown: _cache[1] || (_cache[1] = ($event) => _ctx.mousedownHandler(_ctx.item, $event)),
+      onMouseup: _cache[2] || (_cache[2] = ($event) => _ctx.mouseupHandler(_ctx.item, $event))
+    }, [
       _ctx.item.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
         key: 0,
-        direction: "vertical"
-      })) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-        vue.createVNode(_component_el_button, {
-          size: "small",
-          type: "text"
+        direction: _ctx.item.direction || "vertical"
+      }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+        vue.createVNode(_component_tool_button, {
+          data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
+          "event-type": _ctx.eventType
+        }, null, 8, ["data", "event-type"]),
+        vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
+        vue.createVNode(_component_tool_button, {
+          data: { type: "button", icon: _ctx.ZoomIn, handler: _ctx.zoomInHandler, tooltip: "\u653E\u5927" },
+          "event-type": _ctx.eventType
+        }, null, 8, ["data", "event-type"])
+      ], 64)) : _ctx.item.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+        _ctx.item.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+          key: 0,
+          effect: "dark",
+          placement: "bottom-start",
+          content: _ctx.item.tooltip
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_component_m_icon, {
-              icon: _ctx.ZoomIn,
-              onClick: _ctx.zoomInHandler
-            }, null, 8, ["icon", "onClick"])
+            vue.createVNode(_component_el_button, {
+              size: "small",
+              text: "",
+              disabled: _ctx.disabled
+            }, {
+              default: vue.withCtx(() => [
+                _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+                  key: 0,
+                  icon: _ctx.item.icon
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
           ]),
           _: 1
-        }),
-        vue.createElementVNode("span", _hoisted_3$3, vue.toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
-        vue.createVNode(_component_el_button, {
+        }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
+          key: 1,
           size: "small",
-          type: "text"
+          text: "",
+          disabled: _ctx.disabled
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_component_m_icon, {
-              icon: _ctx.ZoomOut,
-              onClick: _ctx.zoomOutHandler
-            }, null, 8, ["icon", "onClick"])
+            _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+              key: 0,
+              icon: _ctx.item.icon
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
           ]),
           _: 1
-        })
-      ], 64)) : _ctx.item.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
-        key: 3,
-        effect: "dark",
-        placement: "bottom-start",
-        content: _ctx.item.tooltip || _ctx.item.text
-      }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(_component_el_button, {
-            size: "small",
-            type: "text",
-            disabled: _ctx.disabled,
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.buttonHandler(_ctx.item))
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_component_m_icon, {
-                icon: _ctx.item.icon
-              }, null, 8, ["icon"]),
-              vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled"])
-        ]),
-        _: 1
-      }, 8, ["content"])) : _ctx.item.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
+        }, 8, ["disabled"]))
+      ], 64)) : _ctx.item.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
         key: 4,
         trigger: "click",
         disabled: _ctx.disabled,
@@ -3094,7 +3210,7 @@
           })) : vue.createCommentVNode("", true)
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("span", _hoisted_4$2, [
+          vue.createElementVNode("span", _hoisted_3$1, [
             vue.createTextVNode(vue.toDisplayString(_ctx.item.text), 1),
             vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
               default: vue.withCtx(() => [
@@ -3106,11 +3222,11 @@
         ]),
         _: 1
       }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.item.component), vue.normalizeProps(vue.mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : vue.createCommentVNode("", true)
-    ])) : vue.createCommentVNode("", true);
+    ], 34)) : vue.createCommentVNode("", true);
   }
-  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "nav-menu",
     components: { ToolButton },
     props: {
@@ -3130,7 +3246,7 @@
       };
     }
   });
-  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: "m-editor-nav-menu",
@@ -3152,9 +3268,9 @@
       }), 128))
     ], 4);
   }
-  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
-  const _sfc_main$a = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -3200,7 +3316,7 @@
       };
     }
   });
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form = vue.resolveComponent("m-form");
     return vue.openBlock(), vue.createBlock(_component_m_form, {
       class: "m-editor-props-panel",
@@ -3212,9 +3328,9 @@
       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$c, [["render", _sfc_render$c]]);
 
-  const _sfc_main$9 = vue.defineComponent({
+  const _sfc_main$b = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
@@ -3235,13 +3351,23 @@
             type,
             ...data
           });
+        },
+        dragstartHandler({ text, type, data = {} }, e) {
+          if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("data", serialize__default["default"]({
+              name: text,
+              type,
+              ...data
+            }).replace(/"(\w+)":\s/g, "$1: "));
+          }
         }
       };
     }
   });
-  const _hoisted_1$7 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-  const _hoisted_2$3 = ["onClick"];
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+  const _hoisted_2$1 = ["onClick", "onDragstart"];
+  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -3271,15 +3397,17 @@
                   name: index
                 }, {
                   title: vue.withCtx(() => [
-                    _hoisted_1$7,
+                    _hoisted_1$5,
                     vue.createTextVNode(vue.toDisplayString(group.title), 1)
                   ]),
                   default: vue.withCtx(() => [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         class: "component-item",
+                        draggable: "true",
                         key: item.type,
-                        onClick: ($event) => _ctx.appendComponent(item)
+                        onClick: ($event) => _ctx.appendComponent(item),
+                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event)
                       }, [
                         vue.createVNode(_component_m_icon, {
                           icon: item.icon
@@ -3294,7 +3422,7 @@
                           ]),
                           _: 2
                         }, 1032, ["content"])
-                      ], 8, _hoisted_2$3);
+                      ], 40, _hoisted_2$1);
                     }), 128))
                   ]),
                   _: 2
@@ -3308,100 +3436,196 @@
       _: 1
     });
   }
-  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
-  const _sfc_main$8 = vue.defineComponent({
-    name: "magic-editor-content-menu",
+  const _sfc_main$a = vue.defineComponent({
+    components: { ToolButton },
+    props: {
+      menuData: {
+        type: Array,
+        default: () => []
+      }
+    },
+    setup() {
+      const menu = vue.ref();
+      const subMenu = vue.ref();
+      const visible = vue.ref(false);
+      const subMenuData = vue.ref([]);
+      const menuStyle = vue.ref({
+        left: "0",
+        top: "0"
+      });
+      const hide = () => {
+        visible.value = false;
+      };
+      vue.onMounted(() => {
+        globalThis.addEventListener("mousedown", (e) => {
+          if (!visible.value || e.target && menu.value?.contains(e.target)) {
+            return;
+          }
+          hide();
+        }, true);
+      });
+      return {
+        menu,
+        subMenu,
+        visible,
+        menuStyle,
+        subMenuData,
+        hide,
+        show(e) {
+          visible.value = true;
+          vue.nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
+            let top = e.clientY;
+            if (menuHeight + e.clientY > document.body.clientHeight) {
+              top = document.body.clientHeight - menuHeight;
+            }
+            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$a(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_tool_button = vue.resolveComponent("tool-button");
+    const _component_content_menu = vue.resolveComponent("content-menu", true);
+    return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: "magic-editor-content-menu",
+      ref: "menu",
+      style: vue.normalizeStyle(_ctx.menuStyle)
+    }, [
+      vue.createElementVNode("div", null, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
+          return vue.openBlock(), vue.createBlock(_component_tool_button, {
+            "event-type": "mouseup",
+            data: item,
+            key: index,
+            onMouseup: _ctx.hide,
+            onMouseenter: ($event) => _ctx.showSubMenu(item)
+          }, null, 8, ["data", "onMouseup", "onMouseenter"]);
+        }), 128))
+      ]),
+      (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+        vue.createVNode(_component_content_menu, {
+          class: "sub-menu",
+          ref: "subMenu",
+          "menu-data": _ctx.subMenuData
+        }, null, 8, ["menu-data"])
+      ]))
+    ], 4)), [
+      [vue.vShow, _ctx.visible]
+    ]) : vue.createCommentVNode("", true);
+  }
+  var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+
+  const _sfc_main$9 = vue.defineComponent({
+    components: { ContentMenu },
     setup() {
       const services = vue.inject("services");
-      const subVisible = vue.ref(false);
+      const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
-      return {
-        subVisible,
-        node,
-        componentGroupList: vue.computed(() => services?.componentListService.getList()),
-        append(config) {
+      const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
+      const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
+      const componentList = vue.computed(() => services?.componentListService.getList() || []);
+      const createMenuItems = (group) => group.items.map((component) => ({
+        text: component.text,
+        type: "button",
+        icon: component.icon,
+        handler: () => {
           services?.editorService.add({
-            name: 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 = vue.computed(() => {
+        if (node.value?.type === "tabs") {
+          return [
+            {
+              text: "\u6807\u7B7E\u9875",
+              type: "button",
+              icon: icons.Files,
+              handler: () => {
+                services?.editorService.add({
+                  type: "tab-pane"
+                });
+              }
+            }
+          ];
+        }
+        if (node.value?.items) {
+          return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [
+            {
+              type: "divider",
+              direction: "horizontal"
+            }
+          ] : []), []) || [];
+        }
+        return [];
+      });
+      return {
+        menu,
+        menuData: vue.computed(() => [
+          {
+            type: "button",
+            text: "\u65B0\u589E",
+            icon: vue.markRaw(icons.Plus),
+            display: () => node.value?.items,
+            items: getSubMenuData.value
+          },
+          {
+            type: "button",
+            text: "\u590D\u5236",
+            icon: vue.markRaw(icons.DocumentCopy),
+            display: () => !isRoot.value,
+            handler: () => {
+              node.value && services?.editorService.copy(node.value);
+            }
+          },
+          {
+            type: "button",
+            text: "\u5220\u9664",
+            icon: vue.markRaw(icons.Delete),
+            display: () => !isRoot.value && !isPage.value,
+            handler: () => {
+              node.value && services?.editorService.remove(node.value);
+            }
+          }
+        ]),
+        show(e) {
+          menu.value?.show(e);
         }
       };
     }
   });
-  const _hoisted_1$6 = {
-    key: 0,
-    class: "magic-editor-content-menu"
-  };
-  const _hoisted_2$2 = ["onClick"];
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-    return _ctx.node ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-      _ctx.node.items ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true),
-      _ctx.node.type !== "app" ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 1,
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[2] || (_cache[2] = () => _ctx.copy(_ctx.node))
-      }, "\u590D\u5236")) : vue.createCommentVNode("", true),
-      _ctx.node.type !== "app" && _ctx.node.type !== "page" ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 2,
-        class: "magic-editor-content-menu-item",
-        onClick: _cache[3] || (_cache[3] = () => _ctx.remove())
-      }, " \u5220\u9664 ")) : vue.createCommentVNode("", true),
-      vue.withDirectives(vue.createElementVNode("div", {
-        class: "subMenu",
-        onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.setSubVisitable(true)),
-        onMouseleave: _cache[6] || (_cache[6] = ($event) => _ctx.setSubVisitable(false))
-      }, [
-        vue.createVNode(_component_el_scrollbar, null, {
-          default: vue.withCtx(() => [
-            _ctx.node.type === "tabs" ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "magic-editor-content-menu-item",
-              onClick: _cache[4] || (_cache[4] = () => _ctx.append({
-                type: "tab-pane"
-              }))
-            }, " \u6807\u7B7E ")) : _ctx.node.items ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.componentGroupList, (list) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                key: list.title
-              }, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.items, (item) => {
-                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                    item ? (vue.openBlock(), vue.createElementBlock("div", {
-                      class: "magic-editor-content-menu-item",
-                      key: item.type,
-                      onClick: () => _ctx.append(item)
-                    }, vue.toDisplayString(item.text), 9, _hoisted_2$2)) : vue.createCommentVNode("", true)
-                  ], 64);
-                }), 256)),
-                _hoisted_3$2
-              ]);
-            }), 128)) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 544), [
-        [vue.vShow, _ctx.subVisible]
-      ])
-    ])) : vue.createCommentVNode("", true);
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_content_menu = vue.resolveComponent("content-menu");
+    return vue.openBlock(), vue.createBlock(_component_content_menu, {
+      "menu-data": _ctx.menuData,
+      ref: "menu",
+      style: { "overflow": "initial" }
+    }, null, 8, ["menu-data"]);
   }
-  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
   const throttleTime = 150;
   const select = async (data, editorService) => {
@@ -3493,56 +3717,37 @@
       tree.value?.filter(val);
     }
   });
-  const useContentMenu = (editorService) => {
-    const menuStyle = vue.ref({
-      position: "absolute",
-      left: "0",
-      top: "0",
-      display: "none"
-    });
-    vue.onMounted(() => {
-      document.addEventListener("click", () => {
-        menuStyle.value.display = "none";
-      }, true);
-    });
-    return {
-      menuStyle,
-      contextmenu(event, data) {
-        const bodyHeight = globalThis.document.body.clientHeight;
-        const left = `${event.clientX + 20}px`;
-        let top = `${event.clientY - 10}px`;
-        if (event.clientY + 300 > bodyHeight) {
-          top = `${bodyHeight - 300}px`;
-        }
-        menuStyle.value.left = left;
-        menuStyle.value.top = top;
-        menuStyle.value.display = "";
-        select(data, editorService);
-      }
-    };
-  };
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
       const services = vue.inject("services");
       const tree = vue.ref();
+      const menu = vue.ref();
       const clicked = vue.ref(false);
       const editorService = services?.editorService;
       const highlightHandler = lodashEs.throttle((data) => {
         highlight(data, editorService);
       }, throttleTime);
-      const toogleClickFlag = () => {
+      const toggleClickFlag = () => {
         clicked.value = !clicked.value;
       };
       const statusData = useStatus(tree, editorService);
       const canHighlight = vue.computed(() => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value);
+      editorService?.on("remove", () => {
+        setTimeout(() => {
+          tree.value?.getNode(editorService.get("node").id)?.updateChildren();
+        }, 0);
+      });
       return {
         tree,
+        menu,
         ...statusData,
         ...useDrop(tree, editorService),
         ...useFilter(tree),
-        ...useContentMenu(editorService),
+        highlightHandler,
+        toggleClickFlag,
+        canHighlight,
         clickHandler(data) {
           if (services?.uiService.get("uiSelectMode")) {
             document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
@@ -3551,14 +3756,16 @@
           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"];
-  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$4 = ["id", "onMouseenter"];
+  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
     const _component_layer_menu = vue.resolveComponent("layer-menu");
@@ -3598,8 +3805,8 @@
             vue.createElementVNode("div", {
               id: data.id,
               class: vue.normalizeClass(["cus-tree-node", { "cus-tree-node-hover": _ctx.canHighlight && data.id === _ctx.highlightNode?.id }]),
-              onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.toogleClickFlag && _ctx.toogleClickFlag(...args)),
-              onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toogleClickFlag && _ctx.toogleClickFlag(...args)),
+              onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
+              onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toggleClickFlag && _ctx.toggleClickFlag(...args)),
               onMouseenter: ($event) => _ctx.highlightHandler(data)
             }, [
               vue.renderSlot(_ctx.$slots, "layer-node-content", {
@@ -3608,42 +3815,33 @@
               }, () => [
                 vue.createElementVNode("span", null, vue.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"])) : vue.createCommentVNode("", true),
         (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-          vue.createVNode(_component_layer_menu, {
-            style: vue.normalizeStyle(_ctx.menuStyle)
-          }, null, 8, ["style"])
+          vue.createVNode(_component_layer_menu, { ref: "menu" }, null, 512)
         ]))
       ]),
       _: 3
     });
   }
-  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
-  const _sfc_main$6 = vue.defineComponent({
-    name: "m-sidebar",
+  const _sfc_main$7 = vue.defineComponent({
     components: { MIcon },
     props: {
       data: {
-        type: Object,
-        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+        type: Object
       }
     },
     setup(props) {
-      const activeTabName = vue.ref(props.data?.status);
-      vue.watch(() => props.data?.status, (status) => {
-        activeTabName.value = status || "0";
-      });
       return {
-        activeTabName,
-        items: vue.computed(() => props.data?.items.map((item) => {
-          if (typeof item !== "string") {
-            return item;
+        config: vue.computed(() => {
+          if (typeof props.data !== "string") {
+            return props.data;
           }
-          switch (item) {
+          switch (props.data) {
             case "component-list":
               return {
                 type: "component",
@@ -3661,21 +3859,75 @@
                 slots: {}
               };
             default:
-              return {};
+              return void 0;
           }
-        }))
+        })
       };
     }
   });
-  const _hoisted_1$4 = {
+  const _hoisted_1$3 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
+    return _ctx.config ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
+      key: 0,
+      name: _ctx.config.text
+    }, {
+      label: vue.withCtx(() => [
+        (vue.openBlock(), vue.createElementBlock("div", {
+          key: _ctx.config.text
+        }, [
+          _ctx.config.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+            key: 0,
+            icon: _ctx.config.icon
+          }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
+        ]))
+      ]),
+      default: vue.withCtx(() => [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.mergeProps(_ctx.config.props || {}, vue.toHandlers(_ctx.config?.listeners || {})), vue.createSlots({ _: 2 }, [
+          _ctx.config.slots?.layerNodeContent ? {
+            name: "layer-node-content",
+            fn: vue.withCtx(({ data, node }) => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots?.layerNodeContent), {
+                data,
+                node
+              }, null, 8, ["data", "node"]))
+            ])
+          } : void 0
+        ]), 1040))
+      ]),
+      _: 1
+    }, 8, ["name"])) : vue.createCommentVNode("", true);
+  }
+  var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+
+  const _sfc_main$6 = vue.defineComponent({
+    components: { TabPane },
+    name: "m-sidebar",
+    props: {
+      data: {
+        type: Object,
+        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+      }
+    },
+    setup(props) {
+      const activeTabName = vue.ref(props.data?.status);
+      vue.watch(() => props.data?.status, (status) => {
+        activeTabName.value = status || "0";
+      });
+      return {
+        activeTabName
+      };
+    }
+  });
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_tab_pane = vue.resolveComponent("tab-pane");
     const _component_el_tabs = vue.resolveComponent("el-tabs");
-    return _ctx.data.type === "tabs" ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
+    return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
       key: 0,
       class: "m-editor-sidebar",
       modelValue: _ctx.activeTabName,
@@ -3684,35 +3936,11 @@
       "tab-position": "left"
     }, {
       default: vue.withCtx(() => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
-          return vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
-            key: item.text,
-            name: item.text
-          }, {
-            label: vue.withCtx(() => [
-              vue.createElementVNode("span", null, [
-                item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
-                  key: 0,
-                  icon: item.icon
-                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                item.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true)
-              ])
-            ]),
-            default: vue.withCtx(() => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.component), vue.mergeProps(item.props || {}, vue.toHandlers(item.listeners || {})), vue.createSlots({ _: 2 }, [
-                item.slots?.layerNodeContent ? {
-                  name: "layer-node-content",
-                  fn: vue.withCtx(({ data, node }) => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.slots.layerNodeContent), {
-                      data,
-                      node
-                    }, null, 8, ["data", "node"]))
-                  ])
-                } : void 0
-              ]), 1040))
-            ]),
-            _: 2
-          }, 1032, ["name"]);
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item, index) => {
+          return vue.openBlock(), vue.createBlock(_component_tab_pane, {
+            key: index,
+            data: item
+          }, null, 8, ["data"]);
         }), 128))
       ]),
       _: 1
@@ -3785,12 +4013,14 @@
     };
   };
   const _sfc_main$5 = vue.defineComponent({
-    components: { ArrowLeftBold: icons.ArrowLeftBold, ArrowRightBold: icons.ArrowRightBold, CaretBottom: icons.CaretBottom, Plus: icons.Plus },
+    components: { ArrowLeftBold: icons.ArrowLeftBold, ArrowRightBold: icons.ArrowRightBold, CaretBottom: icons.CaretBottom, Plus: icons.Plus, ToolButton },
     setup() {
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const root = vue.computed(() => editorService?.get("root"));
       return {
+        Delete: vue.markRaw(icons.Delete),
+        DocumentCopy: vue.markRaw(icons.DocumentCopy),
         ...useScroll(root),
         root,
         page: vue.computed(() => editorService?.get("page")),
@@ -3819,23 +4049,22 @@
       };
     }
   });
-  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 = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_arrow_left_bold = vue.resolveComponent("arrow-left-bold");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+    const _component_tool_button = vue.resolveComponent("tool-button");
     const _component_caret_bottom = vue.resolveComponent("caret-bottom");
     const _component_el_popover = vue.resolveComponent("el-popover");
     const _component_arrow_right_bold = vue.resolveComponent("arrow-right-bold");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
       vue.createElementVNode("div", {
         id: "m-editor-page-bar-add-icon",
         class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -3872,7 +4101,7 @@
             class: vue.normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
             onClick: ($event) => _ctx.switchPage(item)
           }, [
-            vue.createElementVNode("div", _hoisted_3$1, [
+            vue.createElementVNode("div", _hoisted_3, [
               vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                 vue.createVNode(_component_el_tooltip, {
                   effect: "dark",
@@ -3887,6 +4116,7 @@
               ])
             ]),
             vue.createVNode(_component_el_popover, {
+              "popper-class": "page-bar-popover",
               placement: "top",
               width: 160,
               trigger: "hover"
@@ -3902,20 +4132,28 @@
               default: vue.withCtx(() => [
                 vue.createElementVNode("div", null, [
                   vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                    vue.createElementVNode("div", {
-                      class: "magic-editor-content-menu-item",
-                      onClick: () => _ctx.copy(item)
-                    }, "\u590D\u5236", 8, _hoisted_4$1),
-                    vue.createElementVNode("div", {
-                      class: "magic-editor-content-menu-item",
-                      onClick: () => _ctx.remove(item)
-                    }, "\u5220\u9664", 8, _hoisted_5)
+                    vue.createVNode(_component_tool_button, {
+                      data: {
+                        type: "button",
+                        text: "\u590D\u5236",
+                        icon: _ctx.DocumentCopy,
+                        handler: () => _ctx.copy(item)
+                      }
+                    }, null, 8, ["data"]),
+                    vue.createVNode(_component_tool_button, {
+                      data: {
+                        type: "button",
+                        text: "\u5220\u9664",
+                        icon: _ctx.Delete,
+                        handler: () => _ctx.remove(item)
+                      }
+                    }, null, 8, ["data"])
                   ])
                 ])
               ]),
               _: 2
             }, 1024)
-          ], 10, _hoisted_2$1);
+          ], 10, _hoisted_2);
         }), 128))
       ], 4)) : vue.createCommentVNode("", true),
       _ctx.canScroll ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -4135,12 +4373,12 @@
       };
     }
   });
-  const _hoisted_1$2 = {
+  const _hoisted_1$1 = {
     class: "m-editor-scroll-viewer-container",
     ref: "container"
   };
   function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
       vue.createElementVNode("div", {
         ref: "el",
         style: vue.normalizeStyle(_ctx.style)
@@ -4152,7 +4390,7 @@
   var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
   const _sfc_main$3 = vue.defineComponent({
-    name: "magic-editor-ui-viewer-menu",
+    components: { ContentMenu },
     setup() {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -4161,6 +4399,7 @@
       const canCenter = vue.ref(false);
       const node = vue.computed(() => editorService?.get("node"));
       const parent = vue.computed(() => editorService?.get("parent"));
+      const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       vue.onMounted(() => {
         const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
         canPaste.value = data !== "undefined" && !!data;
@@ -4173,133 +4412,114 @@
       }, { immediate: true });
       return {
         menu,
-        canPaste,
-        canDelete: vue.computed(() => node.value?.type !== schema.NodeType.PAGE),
-        canMoveZPos: vue.computed(() => node.value?.type !== schema.NodeType.PAGE),
-        canCenter,
-        center() {
-          node.value && editorService?.alignCenter(node.value);
-        },
-        copy() {
-          node.value && editorService?.copy(node.value);
-          canPaste.value = true;
-        },
-        paste() {
-          const top = menu.value?.offsetTop || 0;
-          const left = menu.value?.offsetLeft || 0;
-          editorService?.paste({ left, top });
-        },
-        remove() {
-          node.value && editorService?.remove(node.value);
-        },
-        top() {
-          editorService?.moveLayer(LayerOffset.TOP);
-        },
-        bottom() {
-          editorService?.moveLayer(LayerOffset.BOTTOM);
-        },
-        topItem() {
-          editorService?.moveLayer(1);
-        },
-        bottomItem() {
-          editorService?.moveLayer(-1);
-        },
-        clearGuides() {
-          editorService?.get("stage").clearGuides();
+        menuData: vue.reactive([
+          {
+            type: "button",
+            text: "\u6C34\u5E73\u5C45\u4E2D",
+            display: () => canCenter.value,
+            handler: () => {
+              node.value && editorService?.alignCenter(node.value);
+            }
+          },
+          {
+            type: "button",
+            text: "\u590D\u5236",
+            icon: vue.markRaw(icons.DocumentCopy),
+            handler: () => {
+              node.value && editorService?.copy(node.value);
+              canPaste.value = true;
+            }
+          },
+          {
+            type: "button",
+            text: "\u7C98\u8D34",
+            display: () => canPaste.value,
+            handler: () => {
+              const top = menu.value?.$el.offsetTop || 0;
+              const left = menu.value?.$el.offsetLeft || 0;
+              editorService?.paste({ left, top });
+            }
+          },
+          {
+            type: "divider",
+            direction: "horizontal",
+            display: () => !isPage.value
+          },
+          {
+            type: "button",
+            text: "\u4E0A\u79FB\u4E00\u5C42",
+            icon: vue.markRaw(icons.Top),
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(1);
+            }
+          },
+          {
+            type: "button",
+            text: "\u4E0B\u79FB\u4E00\u5C42",
+            icon: vue.markRaw(icons.Bottom),
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(-1);
+            }
+          },
+          {
+            type: "button",
+            text: "\u7F6E\u9876",
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(LayerOffset.TOP);
+            }
+          },
+          {
+            type: "button",
+            text: "\u7F6E\u5E95",
+            display: () => !isPage.value,
+            handler: () => {
+              editorService?.moveLayer(LayerOffset.BOTTOM);
+            }
+          },
+          {
+            type: "divider",
+            direction: "horizontal",
+            display: () => !isPage.value
+          },
+          {
+            type: "button",
+            text: "\u5220\u9664",
+            icon: icons.Delete,
+            display: () => !isPage.value,
+            handler: () => {
+              node.value && editorService?.remove(node.value);
+            }
+          },
+          {
+            type: "divider",
+            direction: "horizontal"
+          },
+          {
+            type: "button",
+            text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
+            handler: () => {
+              editorService?.get("stage").clearGuides();
+            }
+          }
+        ]),
+        show(e) {
+          menu.value?.show(e);
         }
       };
     }
   });
-  const _hoisted_1$1 = {
-    class: "magic-editor-content-menu",
-    ref: "menu"
-  };
-  const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
-  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
-  const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
   function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-      vue.createElementVNode("div", null, [
-        _ctx.canCenter ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[0] || (_cache[0] = () => _ctx.center())
-        }, "\u6C34\u5E73\u5C45\u4E2D")) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[1] || (_cache[1] = () => _ctx.copy())
-        }, "\u590D\u5236"),
-        _ctx.canPaste ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.paste && _ctx.paste(...args))
-        }, "\u7C98\u8D34")) : vue.createCommentVNode("", true),
-        _ctx.canMoveZPos ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          _hoisted_2,
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.topItem && _ctx.topItem(...args))
-          }, "\u4E0A\u79FB\u4E00\u5C42"),
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.bottomItem && _ctx.bottomItem(...args))
-          }, "\u4E0B\u79FB\u4E00\u5C42"),
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[5] || (_cache[5] = (...args) => _ctx.top && _ctx.top(...args))
-          }, "\u7F6E\u9876"),
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[6] || (_cache[6] = (...args) => _ctx.bottom && _ctx.bottom(...args))
-          }, "\u7F6E\u5E95")
-        ], 64)) : vue.createCommentVNode("", true),
-        _ctx.canDelete ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-          _hoisted_3,
-          vue.createElementVNode("div", {
-            class: "magic-editor-content-menu-item",
-            onClick: _cache[7] || (_cache[7] = () => _ctx.remove())
-          }, "\u5220\u9664")
-        ], 64)) : vue.createCommentVNode("", true),
-        _hoisted_4,
-        vue.createElementVNode("div", {
-          class: "magic-editor-content-menu-item",
-          onClick: _cache[8] || (_cache[8] = (...args) => _ctx.clearGuides && _ctx.clearGuides(...args))
-        }, "\u6E05\u7A7A\u53C2\u8003\u7EBF")
-      ])
-    ], 512);
+    const _component_content_menu = vue.resolveComponent("content-menu");
+    return vue.openBlock(), vue.createBlock(_component_content_menu, {
+      "menu-data": _ctx.menuData,
+      ref: "menu"
+    }, null, 8, ["menu-data"]);
   }
   var ViewerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
-  const useMenu = () => {
-    const menu = vue.ref();
-    const menuStyle = vue.ref({
-      display: "none",
-      left: "0",
-      top: "0"
-    });
-    vue.onMounted(() => {
-      document.addEventListener("click", () => {
-        menuStyle.value.display = "none";
-      }, true);
-    });
-    return {
-      menu,
-      menuStyle,
-      contextmenuHandler(e) {
-        e.preventDefault();
-        const menuHeight = menu.value?.$el.clientHeight;
-        let top = e.clientY;
-        if (menuHeight + e.clientY > document.body.clientHeight) {
-          top = document.body.clientHeight - menuHeight;
-        }
-        menuStyle.value = {
-          display: "block",
-          top: `${top}px`,
-          left: `${e.clientX}px`
-        };
-      }
-    };
-  };
   const _sfc_main$2 = vue.defineComponent({
     name: "magic-stage",
     components: {
@@ -4326,11 +4546,12 @@
       const services = vue.inject("services");
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
+      const menu = vue.ref();
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
       const uiSelectMode = vue.computed(() => services?.uiService.get("uiSelectMode"));
       const root = vue.computed(() => services?.editorService.get("root"));
       const page = vue.computed(() => services?.editorService.get("page"));
-      const zoom = vue.computed(() => services?.uiService.get("zoom"));
+      const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
       const node = vue.computed(() => services?.editorService.get("node"));
       let stage = null;
       let runtime = null;
@@ -4412,9 +4633,36 @@
       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);
+          }
+        }
       };
     }
   });
@@ -4432,14 +4680,13 @@
         vue.createElementVNode("div", {
           class: "m-editor-stage-container",
           ref: "stageContainer",
+          style: vue.normalizeStyle(`transform: scale(${_ctx.zoom})`),
           onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
-          style: vue.normalizeStyle(`transform: scale(${_ctx.zoom})`)
+          onDrop: _cache[1] || (_cache[1] = (...args) => _ctx.dropHandler && _ctx.dropHandler(...args)),
+          onDragover: _cache[2] || (_cache[2] = (...args) => _ctx.dragoverHandler && _ctx.dragoverHandler(...args))
         }, null, 36),
         (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-          vue.createVNode(_component_viewer_menu, {
-            ref: "menu",
-            style: vue.normalizeStyle(_ctx.menuStyle)
-          }, null, 8, ["style"])
+          vue.createVNode(_component_viewer_menu, { ref: "menu" }, null, 512)
         ]))
       ]),
       _: 1
@@ -4486,10 +4733,10 @@
         }).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 || utils.isPage(node.value))
             return;
@@ -4879,6 +5126,7 @@
   exports.PropsPanel = PropsPanel;
   exports.TMagicCodeEditor = CodeEditor;
   exports.TMagicEditor = Editor;
+  exports.ToolButton = ToolButton;
   exports.change2Fixed = change2Fixed;
   exports.debug = debug;
   exports["default"] = index;