@tmagic/editor 1.3.0-alpha.6 → 1.3.0-alpha.8

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('@tmagic/table'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('keycon'), require('@tmagic/stage'), require('events'), require('@tmagic/core')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', '@tmagic/table', 'monaco-editor', 'gesto', '@tmagic/utils', 'keycon', '@tmagic/stage', 'events', '@tmagic/core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.table, global.monaco, global.Gesto, global.utils, global.KeyController, global.StageCore, global.events, global.core));
-})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, table, monaco, Gesto, utils, KeyController, StageCore, events, core) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('@tmagic/table'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', '@tmagic/table', 'monaco-editor', 'gesto', '@tmagic/utils', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.table, global.monaco, global.Gesto, global.utils, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, table, monaco, Gesto, utils, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -56,6 +56,12 @@
     }
   });
 
+  let $TMAGIC_EDITOR = {};
+  const setConfig = (option) => {
+    $TMAGIC_EDITOR = option;
+  };
+  const getConfig = (key) => $TMAGIC_EDITOR[key];
+
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
@@ -111,7 +117,8 @@
         if (!props.name || !props.model)
           return;
         try {
-          props.model[props.name] = eval(`(${v[props.name]})`);
+          const parseDSL = getConfig("parseDSL");
+          props.model[props.name] = parseDSL(`(${v[props.name]})`);
           emit("change", props.model[props.name]);
         } catch (e) {
           console.error(e);
@@ -565,7 +572,7 @@
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
       const setDisplayState = () => {
         displayState.value = [];
-        const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+        const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
         let index = 0;
         for (const match of matches) {
           if (typeof match.index === "undefined")
@@ -638,13 +645,13 @@
         }
         return selectionStart;
       };
-      const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+      const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
       const curCharIsDot = (dotIndex) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
       const dsQuerySearch = (queryString, leftCurlyBracketIndex, cb) => {
         let result = [];
         if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
           result = dataSources.value;
-        } else if (leftCurlyBracketIndex > -1) {
+        } else if (leftCurlyBracketIndex > 0) {
           const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
           result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
         }
@@ -696,7 +703,7 @@
         const selectionStart = getSelectionStart();
         const curQueryString = queryString.substring(0, selectionStart);
         const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
-        const dsKeyStringLastIndex = curQueryString.lastIndexOf("{");
+        const dsKeyStringLastIndex = curQueryString.lastIndexOf("${") + 1;
         const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
         if (isFieldTip) {
           fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
@@ -709,7 +716,7 @@
         const selectionStart = input.value?.selectionStart || 0;
         let startText = inputText.substring(0, selectionStart);
         const dotIndex = startText.lastIndexOf(".");
-        const leftCurlyBracketIndex = startText.lastIndexOf("{");
+        const leftCurlyBracketIndex = startText.lastIndexOf("${") + 1;
         const endText = inputText.substring(selectionStart);
         let suggestText = value;
         if (isDataSource) {
@@ -719,7 +726,6 @@
           if (!isRightCurlyBracket(selectionStart + 1)) {
             suggestText = `${suggestText}}`;
           }
-          suggestText = `{${suggestText}}`;
         } else if (!curCharIsDot(dotIndex)) {
           startText = startText.substring(0, dotIndex + 1);
         }
@@ -727,7 +733,7 @@
         await vue.nextTick();
         let newSelectionStart = 0;
         if (isDataSource) {
-          newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+          newSelectionStart = leftCurlyBracketIndex + suggestText.length;
         } else {
           newSelectionStart = dotIndex + suggestText.length + 1;
         }
@@ -770,11 +776,11 @@
           _: 1
         }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
-          class: vue.normalizeClass(`el-input el-input--${_ctx.size}`),
+          class: vue.normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
           onMouseup: mouseupHandler
         }, [
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(`el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+            class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
             vue.createElementVNode("div", _hoisted_3$5, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
@@ -793,7 +799,11 @@
                     _: 2
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
-              }), 256))
+              }), 256)),
+              vue.createVNode(_sfc_main$B, {
+                class: "tmagic-data-source-input-icon",
+                icon: vue.unref(iconsVue.Coin)
+              }, null, 8, ["icon"])
             ])
           ], 2)
         ], 34));
@@ -1356,12 +1366,6 @@
     }
   });
 
-  let $TMAGIC_EDITOR = {};
-  const setConfig = (option) => {
-    $TMAGIC_EDITOR = option;
-  };
-  const getConfig = (key) => $TMAGIC_EDITOR[key];
-
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
@@ -1509,7 +1513,7 @@
           ref: el,
           class: "m-editor-layout"
         }, [
-          hasLeft.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          hasLeft.value && _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
               style: vue.normalizeStyle(`width: ${_ctx.left}px`)
@@ -1524,7 +1528,7 @@
           }, [
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
-          hasRight.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.createVNode(_sfc_main$t, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
@@ -1618,6 +1622,40 @@
                     }
                   ]
                 },
+                {
+                  type: "fieldset",
+                  legend: "边框",
+                  items: [
+                    {
+                      name: "borderWidth",
+                      text: "宽度",
+                      defaultValue: "0"
+                    },
+                    {
+                      name: "borderColor",
+                      text: "颜色",
+                      type: "colorPicker"
+                    },
+                    {
+                      name: "borderStyle",
+                      text: "样式",
+                      type: "select",
+                      defaultValue: "none",
+                      options: [
+                        { text: "none", value: "none" },
+                        { text: "hidden", value: "hidden" },
+                        { text: "dotted", value: "dotted" },
+                        { text: "dashed", value: "dashed" },
+                        { text: "solid", value: "solid" },
+                        { text: "double", value: "double" },
+                        { text: "groove", value: "groove" },
+                        { text: "ridge", value: "ridge" },
+                        { text: "inset", value: "inset" },
+                        { text: "outset", value: "outset" }
+                      ]
+                    }
+                  ]
+                },
                 {
                   type: "fieldset",
                   legend: "背景",
@@ -1777,6 +1815,28 @@
     return CodeDeleteErrorType2;
   })(CodeDeleteErrorType || {});
   const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+  var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
+    KeyBindingCommand2["COPY_NODE"] = "tmagic-system-copy-node";
+    KeyBindingCommand2["PASTE_NODE"] = "tmagic-system-paste-node";
+    KeyBindingCommand2["DELETE_NODE"] = "tmagic-system-delete-node";
+    KeyBindingCommand2["CUT_NODE"] = "tmagic-system-cut-node";
+    KeyBindingCommand2["UNDO"] = "tmagic-system-undo";
+    KeyBindingCommand2["REDO"] = "tmagic-system-redo";
+    KeyBindingCommand2["ZOOM_IN"] = "tmagic-system-zoom-in";
+    KeyBindingCommand2["ZOOM_OUT"] = "tmagic-system-zoom-out";
+    KeyBindingCommand2["ZOOM_RESET"] = "tmagic-system-zoom-reset";
+    KeyBindingCommand2["ZOOM_FIT"] = "tmagic-system-zoom-fit";
+    KeyBindingCommand2["MOVE_UP_1"] = "tmagic-system-move-up-1";
+    KeyBindingCommand2["MOVE_DOWN_1"] = "tmagic-system-move-down-1";
+    KeyBindingCommand2["MOVE_LEFT_1"] = "tmagic-system-move-left-1";
+    KeyBindingCommand2["MOVE_RIGHT_1"] = "tmagic-system-move-right-1";
+    KeyBindingCommand2["MOVE_UP_10"] = "tmagic-system-move-up-10";
+    KeyBindingCommand2["MOVE_DOWN_10"] = "tmagic-system-move-down-10";
+    KeyBindingCommand2["MOVE_LEFT_10"] = "tmagic-system-move-left-10";
+    KeyBindingCommand2["MOVE_RIGHT_10"] = "tmagic-system-move-right-10";
+    KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
+    return KeyBindingCommand2;
+  })(KeyBindingCommand || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const getPageList = (app) => {
@@ -2223,8 +2283,8 @@
      * 清理，支持storageService.usePlugin
      */
     async clear() {
-      const storage2 = await this.getStorage();
-      storage2.clear();
+      const storage = await this.getStorage();
+      storage.clear();
     }
     /**
      * 获取存储项，支持storageService.usePlugin
@@ -2238,7 +2298,7 @@
         return null;
       switch (protocol) {
         case "object" /* OBJECT */:
-          return eval(`(${item})`);
+          return getConfig("parseDSL")(`(${item})`);
         case "json" /* JSON */:
           return JSON.parse(item);
         case "number" /* NUMBER */:
@@ -2253,49 +2313,49 @@
      * 获取指定索引位置的key
      */
     async key(index) {
-      const storage2 = await this.getStorage();
-      return storage2.key(index);
+      const storage = await this.getStorage();
+      return storage.key(index);
     }
     /**
      * 移除存储项，支持storageService.usePlugin
      */
-    async removeItem(key2, options2 = {}) {
-      const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-      storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
+    async removeItem(key, options = {}) {
+      const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+      storage.removeItem(`${options.namespace || namespace}:${key}`);
     }
     /**
      * 设置存储项，支持storageService.usePlugin
      */
-    async setItem(key2, value, options2 = {}) {
-      const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-      let item2 = value;
-      const protocol2 = options2.protocol ? `${options2.protocol}:` : "";
+    async setItem(key, value, options = {}) {
+      const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+      let item = value;
+      const protocol = options.protocol ? `${options.protocol}:` : "";
       if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
-        item2 = `${protocol2}${value}`;
+        item = `${protocol}${value}`;
       } else {
-        item2 = `${protocol2}${serialize(value)}`;
+        item = `${protocol}${serialize(value)}`;
       }
-      storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
+      storage.setItem(`${options.namespace || namespace}:${key}`, item);
     }
     destroy() {
       this.removeAllListeners();
       this.removeAllPlugins();
     }
     getValueAndProtocol(value) {
-      let protocol2 = "";
+      let protocol = "";
       if (value === null) {
         return {
           item: value,
-          protocol: protocol2
+          protocol
         };
       }
-      const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
-        protocol2 = $1;
+      const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+        protocol = $1;
         return $3;
       });
       return {
-        protocol: protocol2,
-        item: item2
+        protocol,
+        item
       };
     }
   }
@@ -3446,7 +3506,6 @@
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
-      const nodes = vue.computed(() => editorService?.get("nodes") || []);
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
       const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
@@ -3497,7 +3556,8 @@
       };
       const saveCode = (value) => {
         try {
-          editorService?.set("root", eval(value));
+          const parseDSL = getConfig("parseDSL");
+          editorService?.set("root", parseDSL(value));
         } catch (e) {
           console.error(e);
         }
@@ -3538,7 +3598,7 @@
             ]),
             _: 2
           }, [
-            pageLength.value > 0 && nodes.value.length === 1 ? {
+            pageLength.value > 0 ? {
               name: "right",
               fn: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
@@ -3897,7 +3957,10 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor-props-panel" };
+  const _hoisted_1$e = {
+    key: 0,
+    class: "m-editor-props-panel"
+  };
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
@@ -3911,6 +3974,7 @@
       const curFormConfig = vue.ref([]);
       const services = vue.inject("services");
       const node = vue.computed(() => services?.editorService.get("node"));
+      const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const stage = vue.computed(() => services?.editorService.get("stage"));
       const init = async () => {
@@ -3947,7 +4011,7 @@
       };
       __expose({ submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -3959,7 +4023,7 @@
             config: curFormConfig.value,
             onChange: submit
           }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
-        ]);
+        ])) : vue.createCommentVNode("", true);
       };
     }
   });
@@ -4227,6 +4291,7 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
+      vue.provide("mForm", {});
       const defaultParamColConfig = {
         type: "row",
         label: "参数类型",
@@ -4295,29 +4360,29 @@
       initTableModel();
       const beforeSave = (codeValue) => {
         try {
-          eval(codeValue);
+          getConfig("parseDSL")(codeValue);
           return true;
         } catch (e) {
           design.tMagicMessage.error(e.stack);
           return false;
         }
       };
-      const saveCode = async (codeValue2) => {
+      const saveCode = async (codeValue) => {
         if (!props.editable)
           return;
-        evalRes.value = beforeSave(codeValue2);
+        evalRes.value = beforeSave(codeValue);
         if (evalRes.value) {
           await services?.codeBlockService.setCodeDslById(props.id, {
             name: codeName.value,
-            content: codeValue2,
+            content: codeValue,
             params: tableModel.value?.params || []
           });
           design.tMagicMessage.success("代码成功保存到本地");
           services?.codeBlockService.removeCodeDraft(props.id);
         }
       };
-      const saveAndClose = async (codeValue2) => {
-        await saveCode(codeValue2);
+      const saveAndClose = async (codeValue) => {
+        await saveCode(codeValue);
         if (evalRes.value) {
           close();
         }
@@ -5086,6 +5151,7 @@
         left: "0",
         top: "0"
       });
+      const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
       const hide = () => {
         if (!visible.value)
           return;
@@ -5098,7 +5164,7 @@
         if (!visible.value || !target) {
           return;
         }
-        if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        if (contains(target)) {
           return;
         }
         hide();
@@ -5125,13 +5191,15 @@
         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
-          });
-        }
+        subMenuData.value = menuItem.items || [];
+        setTimeout(() => {
+          if (menu.value) {
+            subMenu.value?.show({
+              clientX: menu.value.offsetLeft + menu.value.clientWidth,
+              clientY: menu.value.offsetTop
+            });
+          }
+        }, 0);
       };
       vue.onMounted(() => {
         if (props.isSubMenu)
@@ -5144,8 +5212,10 @@
         globalThis.removeEventListener("mousedown", hideHandler, true);
       });
       __expose({
+        menu,
         hide,
-        show
+        show,
+        contains
       });
       return (_ctx, _cache) => {
         const _component_content_menu = vue.resolveComponent("content-menu", true);
@@ -5168,14 +5238,15 @@
             }), 128))
           ]),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            vue.createVNode(_component_content_menu, {
+            subMenuData.value.length ? (vue.openBlock(), vue.createBlock(_component_content_menu, {
+              key: 0,
               class: "sub-menu",
               ref_key: "subMenu",
               ref: subMenu,
               "menu-data": subMenuData.value,
               "is-sub-menu": true,
               onHide: hide
-            }, null, 8, ["menu-data"])
+            }, null, 8, ["menu-data"])) : vue.createCommentVNode("", true)
           ]))
         ], 4)), [
           [vue.vShow, visible.value]
@@ -5197,6 +5268,7 @@
       const services = vue.inject("services");
       const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
+      const nodes = vue.computed(() => services?.editorService.get("nodes"));
       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() || []);
@@ -5248,7 +5320,7 @@
           type: "button",
           text: "新增",
           icon: vue.markRaw(iconsVue.Plus),
-          display: () => node.value?.items,
+          display: () => node.value?.items && nodes.value?.length === 1,
           items: getSubMenuData.value
         },
         {
@@ -5257,7 +5329,7 @@
           icon: vue.markRaw(iconsVue.CopyDocument),
           display: () => !isRoot.value,
           handler: () => {
-            node.value && services?.editorService.copy(node.value);
+            node.value && services?.editorService.copy(nodes.value || []);
           }
         },
         {
@@ -5266,7 +5338,7 @@
           icon: vue.markRaw(iconsVue.Delete),
           display: () => !isRoot.value && !isPage.value,
           handler: () => {
-            node.value && services?.editorService.remove(node.value);
+            node.value && services?.editorService.remove(nodes.value || []);
           }
         },
         ...props.layerContentMenu
@@ -5435,38 +5507,61 @@
       const windowBlurHandler = () => {
         isCtrlKeyDown.value = false;
       };
-      const globalKeyupHandler = () => {
-        if (document.activeElement !== tree.value?.$el) {
+      keybindingService?.registeCommand("layer-panel-not-ctrl-keydown", (e) => {
+        if (e.key !== keybindingService.ctrlKey) {
           isCtrlKeyDown.value = false;
         }
-      };
-      let keycon;
-      vue.onMounted(() => {
-        editorService?.on("remove", editorServiceRemoveHandler);
+      });
+      keybindingService?.registeCommand("layer-panel-ctrl-keydown", () => {
+        isCtrlKeyDown.value = true;
+      });
+      keybindingService?.registeCommand("layer-panel-ctrl-keyup", () => {
+        isCtrlKeyDown.value = false;
+      });
+      keybindingService?.registeCommand("layer-panel-global-keydwon", () => {
+        if (!tree.value?.$el.contains(document.activeElement)) {
+          isCtrlKeyDown.value = false;
+        }
+      });
+      keybindingService?.registe([
+        {
+          command: "layer-panel-not-ctrl-keydown",
+          when: [["layer-panel", "keydown"]]
+        },
+        {
+          command: "layer-panel-ctrl-keydown",
+          keybinding: "ctrl",
+          when: [["layer-panel", "keydown"]]
+        },
+        {
+          command: "layer-panel-ctrl-keyup",
+          keybinding: "ctrl",
+          when: [["layer-panel", "keyup"]]
+        },
+        {
+          command: "layer-panel-global-keydwon",
+          keybinding: "ctrl",
+          when: [["global", "keydown"]]
+        }
+      ]);
+      vue.watch(tree, () => {
         if (tree.value?.$el) {
-          keybindingService?.on("keyup", globalKeyupHandler);
-          keycon = new KeyController(tree.value.$el);
-          const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-          const ctrl = isMac ? "meta" : "ctrl";
-          keycon.keydown((e) => {
-            if (e.key !== ctrl) {
-              isCtrlKeyDown.value = false;
-            }
-          }).keydown(ctrl, () => {
-            isCtrlKeyDown.value = true;
-          }).keyup(ctrl, () => {
-            isCtrlKeyDown.value = false;
-          });
+          keybindingService?.registeEl("layer-panel", tree.value.$el);
           tree.value.$el.addEventListener("blur", windowBlurHandler);
+        } else {
+          keybindingService?.unregisteEl("layer-panel");
         }
+      });
+      vue.onMounted(() => {
+        editorService?.on("remove", editorServiceRemoveHandler);
         globalThis.addEventListener("blur", windowBlurHandler);
       });
+      vue.onBeforeUnmount(() => {
+        tree.value?.$el.removeEventListener("blur", windowBlurHandler);
+      });
       vue.onUnmounted(() => {
-        keycon.destroy();
         editorService?.off("remove", editorServiceRemoveHandler);
-        keybindingService?.off("keyup", globalKeyupHandler);
         globalThis.removeEventListener("blur", windowBlurHandler);
-        tree.value?.$el.removeEventListener("blur", windowBlurHandler);
       });
       const highlightHandler = lodashEs.throttle((data) => {
         highlight(data);
@@ -5496,7 +5591,9 @@
       };
       const contextmenu = async (event, data) => {
         event.preventDefault();
-        await select(data);
+        if (nodes.value.length < 2) {
+          await select(data);
+        }
         menu.value?.show(event);
       };
       return (_ctx, _cache) => {
@@ -6510,6 +6607,9 @@
         if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
           return;
         stage = useStage(stageOptions);
+        stage.on("select", () => {
+          stageWrap.value?.container?.focus();
+        });
         services?.editorService.set("stage", vue.markRaw(stage));
         stage?.mount(stageContainer.value);
         if (!node.value?.id)
@@ -6550,21 +6650,25 @@
         }
       });
       vue.onMounted(() => {
-        stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+        if (stageWrap.value?.container) {
+          resizeObserver.observe(stageWrap.value.container);
+          services?.keybindingService.registeEl("stage", stageWrap.value.container);
+        }
       });
       vue.onUnmounted(() => {
         stage?.destroy();
         resizeObserver.disconnect();
         services?.editorService.set("stage", null);
+        services?.keybindingService.unregisteEl("stage");
       });
-      const contextmenuHandler = (e2) => {
-        e2.preventDefault();
-        menu.value?.show(e2);
+      const contextmenuHandler = (e) => {
+        e.preventDefault();
+        menu.value?.show(e);
       };
-      const dragoverHandler = (e2) => {
-        e2.preventDefault();
-        if (e2.dataTransfer) {
-          e2.dataTransfer.dropEffect = "move";
+      const dragoverHandler = (e) => {
+        e.preventDefault();
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "move";
         }
       };
       const dropHandler = async (e) => {
@@ -6576,7 +6680,8 @@
           parent = services?.editorService.getNodeById(parentEl.id, false);
         }
         if (e.dataTransfer && parent && stageContainer.value && stage) {
-          const config = eval(`(${e.dataTransfer.getData("data")})`);
+          const parseDSL = getConfig("parseDSL");
+          const config = parseDSL(`(${e.dataTransfer.getData("data")})`);
           const layout = await services?.editorService.getLayout(parent);
           const containerRect = stageContainer.value.getBoundingClientRect();
           const { scrollTop, scrollLeft } = stage.mask;
@@ -6609,6 +6714,7 @@
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
+          tabindex: "-1",
           width: stageRect.value?.width,
           height: stageRect.value?.height,
           "wrap-width": stageContainerRect.value?.width,
@@ -6644,10 +6750,7 @@
     }
   });
 
-  const _hoisted_1 = {
-    class: "m-editor-workspace",
-    tabindex: "-1"
-  };
+  const _hoisted_1 = { class: "m-editor-workspace" };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorWorkspace"
@@ -6707,8 +6810,8 @@
      * @param {CodeBlockDSL} codeDsl 代码DSL
      * @returns {void}
      */
-    async setCodeDsl(codeDsl2) {
-      this.state.codeDsl = codeDsl2;
+    async setCodeDsl(codeDsl) {
+      this.state.codeDsl = codeDsl;
       this.emit("code-dsl-change", this.state.codeDsl);
     }
     /**
@@ -6725,13 +6828,13 @@
      * @param {Id} id 代码块id
      * @returns {CodeBlockContent | null}
      */
-    getCodeContentById(id2) {
-      if (!id2)
+    getCodeContentById(id) {
+      if (!id)
         return null;
       const totalCodeDsl = this.getCodeDsl();
       if (!totalCodeDsl)
         return null;
-      return totalCodeDsl[id2] ?? null;
+      return totalCodeDsl[id] ?? null;
     }
     /**
      * 设置代码块ID和代码内容到源dsl
@@ -6746,7 +6849,8 @@
       }
       const codeConfigProcessed = codeConfig;
       if (codeConfig.content) {
-        codeConfigProcessed.content = eval(codeConfig.content);
+        const parseDSL = getConfig("parseDSL");
+        codeConfigProcessed.content = parseDSL(codeConfig.content);
       }
       const existContent = codeDsl[id] || {};
       codeDsl[id] = {
@@ -6761,8 +6865,8 @@
      * @returns {CodeBlockDSL}
      */
     getCodeDslByIds(ids) {
-      const codeDsl2 = this.getCodeDsl();
-      return lodashEs.pick(codeDsl2, ids);
+      const codeDsl = this.getCodeDsl();
+      return lodashEs.pick(codeDsl, ids);
     }
     /**
      * 设置代码编辑面板展示状态
@@ -6785,10 +6889,10 @@
      * @param {Id} id 代码块id
      * @returns {void}
      */
-    setCodeEditorContent(status, id2) {
-      if (!id2)
+    setCodeEditorContent(status, id) {
+      if (!id)
         return;
-      this.setId(id2);
+      this.setId(id);
       this.state.isShowCodeEditor = status;
     }
     /**
@@ -6818,10 +6922,10 @@
      * @param {Id} id 代码块id
      * @returns {void}
      */
-    setId(id2) {
-      if (!id2)
+    setId(id) {
+      if (!id)
         return;
-      this.state.id = id2;
+      this.state.id = id;
     }
     /**
      * 获取当前选中的代码块ID
@@ -6886,9 +6990,9 @@
       const currentDsl = await this.getCodeDsl();
       if (!currentDsl)
         return;
-      codeIds.forEach((id2) => {
-        delete currentDsl[id2];
-        this.emit("remove", id2);
+      codeIds.forEach((id) => {
+        delete currentDsl[id];
+        this.emit("remove", id);
       });
     }
     /**
@@ -7403,176 +7507,274 @@
   const eventsService = new Events();
 
   class Keybinding extends BaseService {
-    keycon = new KeyController();
     ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
-    constructor() {
-      super();
-      this.keycon.keyup((e) => {
-        this.emit("keyup", e.inputEvent);
-      }).keyup("delete", (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        this.removeNode();
-      }).keyup("backspace", (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        this.removeNode();
-      }).keydown([this.ctrlKey, "c"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+    controllers = /* @__PURE__ */ new Map();
+    bindingList = [];
+    commands = {
+      [KeyBindingCommand.DELETE_NODE]: () => {
         const nodes = editorService.get("nodes");
-        nodes && editorService.copy(nodes);
-      }).keydown([this.ctrlKey, "v"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+        if (!nodes || utils.isPage(nodes[0]))
           return;
-        }
-        e.inputEvent.preventDefault();
+        editorService.remove(nodes);
+      },
+      [KeyBindingCommand.COPY_NODE]: () => {
         const nodes = editorService.get("nodes");
-        nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
-      }).keydown([this.ctrlKey, "x"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+        nodes && editorService.copy(nodes);
+      },
+      [KeyBindingCommand.CUT_NODE]: () => {
         const nodes = editorService.get("nodes");
         if (!nodes || utils.isPage(nodes[0]))
           return;
         editorService.copy(nodes);
         editorService.remove(nodes);
-      }).keydown([this.ctrlKey, "z"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.PASTE_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+      },
+      [KeyBindingCommand.UNDO]: () => {
         editorService.undo();
-      }).keydown([this.ctrlKey, "shift", "z"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.REDO]: () => {
         editorService.redo();
-      }).keydown("up", (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.ZOOM_IN]: () => {
+        uiService.zoom(0.1);
+      },
+      [KeyBindingCommand.ZOOM_OUT]: () => {
+        uiService.zoom(-0.1);
+      },
+      [KeyBindingCommand.ZOOM_RESET]: () => {
+        uiService.set("zoom", 1);
+      },
+      [KeyBindingCommand.ZOOM_FIT]: async () => {
+        uiService.set("zoom", await uiService.calcZoom());
+      },
+      [KeyBindingCommand.MOVE_UP_1]: () => {
         editorService.move(0, -1);
-      }).keydown("down", (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.MOVE_DOWN_1]: () => {
         editorService.move(0, 1);
-      }).keydown("left", (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.MOVE_LEFT_1]: () => {
         editorService.move(-1, 0);
-      }).keydown("right", (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.MOVE_RIGHT_1]: () => {
         editorService.move(1, 0);
-      }).keydown([this.ctrlKey, "up"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.MOVE_UP_10]: () => {
         editorService.move(0, -10);
-      }).keydown([this.ctrlKey, "down"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.MOVE_DOWN_10]: () => {
         editorService.move(0, 10);
-      }).keydown([this.ctrlKey, "left"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.MOVE_LEFT_10]: () => {
         editorService.move(-10, 0);
-      }).keydown([this.ctrlKey, "right"], (e) => {
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.MOVE_RIGHT_10]: () => {
         editorService.move(10, 0);
-      }).keydown("tab", (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
+      },
+      [KeyBindingCommand.SWITCH_NODE]: () => {
         editorService.selectNextNode();
-      }).keydown([this.ctrlKey, "tab"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        editorService.selectNextPage();
-      }).keydown([this.ctrlKey, "="], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        uiService.zoom(0.1);
-      }).keydown([this.ctrlKey, "numpadplus"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        uiService.zoom(0.1);
-      }).keydown([this.ctrlKey, "-"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        uiService.zoom(-0.1);
-      }).keydown([this.ctrlKey, "numpad-"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        uiService.zoom(-0.1);
-      }).keydown([this.ctrlKey, "0"], async (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-        e.inputEvent.preventDefault();
-        uiService.set("zoom", await uiService.calcZoom());
-      }).keydown([this.ctrlKey, "1"], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
+      }
+    };
+    registeCommand(command, handler) {
+      this.commands[command] = handler;
+    }
+    unregisteCommand(command) {
+      delete this.commands[command];
+    }
+    registeEl(name, el) {
+      if (name !== "global" && !el) {
+        throw new Error("只有name为global可以不传el");
+      }
+      const keycon = new KeyController(el);
+      this.controllers.set(name, keycon);
+      this.bind(name);
+    }
+    unregisteEl(name) {
+      this.controllers.get(name)?.destroy();
+      this.controllers.delete(name);
+      this.bindingList.forEach((item) => {
+        item.binded = false;
+      });
+    }
+    registe(maps) {
+      for (const keybindingItem of maps) {
+        const { command, keybinding, when } = keybindingItem;
+        for (const [type = "", eventType = "keydown"] of when) {
+          const cacheItem = { type, command, keybinding, eventType, binded: false };
+          this.bindingList.push(cacheItem);
         }
-        e.inputEvent.preventDefault();
-        uiService.set("zoom", 1);
+      }
+      this.bind();
+    }
+    reset() {
+      this.controllers.forEach((keycon) => {
+        keycon.destroy();
       });
+      this.controllers.clear();
+      this.bindingList = [];
     }
     destroy() {
-      this.keycon.destroy();
+      this.reset();
     }
-    isDisabledKeyEvent(node) {
-      const el = node;
-      if (!el)
-        return false;
-      return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable;
+    bind(name) {
+      for (const item of this.bindingList) {
+        const { type, eventType, command, keybinding, binded } = item;
+        if (name && name !== type) {
+          continue;
+        }
+        if (binded) {
+          continue;
+        }
+        const keycon = this.controllers.get(type);
+        if (!keycon) {
+          continue;
+        }
+        const handler = (e) => {
+          e.inputEvent.preventDefault();
+          this.commands[command]?.(e.inputEvent);
+        };
+        this.getKeyconKeys(keybinding).forEach((keys) => {
+          if (keys[0]) {
+            keycon[eventType](keys, handler);
+          } else {
+            keycon[eventType](handler);
+          }
+        });
+        item.binded = true;
+      }
     }
-    removeNode() {
-      const nodes = editorService.get("nodes");
-      if (!nodes || utils.isPage(nodes[0]))
-        return;
-      editorService.remove(nodes);
+    getKeyconKeys(keybinding = "") {
+      const splitKey = (key) => key.split("+").map((k) => k === "ctrl" ? this.ctrlKey : k);
+      if (Array.isArray(keybinding)) {
+        return keybinding.map((key) => splitKey(key));
+      }
+      return [splitKey(keybinding)];
     }
   }
   const keybindingService = new Keybinding();
 
+  const keybindingConfig = [
+    {
+      command: KeyBindingCommand.DELETE_NODE,
+      keybinding: ["delete", "backspace"],
+      when: [
+        ["stage", "keyup"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.COPY_NODE,
+      keybinding: "ctrl+c",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.PASTE_NODE,
+      keybinding: "ctrl+v",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.CUT_NODE,
+      keybinding: "ctrl+x",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.UNDO,
+      keybinding: "ctrl+z",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.REDO,
+      keybinding: "ctrl+shift+z",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.MOVE_UP_1,
+      keybinding: "up",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_DOWN_1,
+      keybinding: "down",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_LEFT_1,
+      keybinding: "left",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_RIGHT_1,
+      keybinding: "right",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_UP_10,
+      keybinding: "ctrl+up",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_DOWN_10,
+      keybinding: "ctrl+down",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_LEFT_10,
+      keybinding: "ctrl+left",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_RIGHT_10,
+      keybinding: "ctrl+right",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.SWITCH_NODE,
+      keybinding: "tab",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_IN,
+      keybinding: ["ctrl+=", "ctrl+numpadplus"],
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_OUT,
+      keybinding: ["ctrl+-", "ctrl+numpad-"],
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_FIT,
+      keybinding: "ctrl+0",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_RESET,
+      keybinding: "ctrl+1",
+      when: [["stage", "keydown"]]
+    }
+  ];
+
   const editorProps = {
     /** 页面初始值 */
     modelValue: {
@@ -7700,7 +7902,8 @@
     propsService,
     eventsService,
     uiService,
-    codeBlockService
+    codeBlockService,
+    keybindingService
   }) => {
     vue.watch(
       () => props.modelValue,
@@ -7769,6 +7972,7 @@
       uiService.resetState();
       componentListService.resetState();
       codeBlockService.resetState();
+      keybindingService.reset();
     });
   };
   const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
@@ -7965,6 +8169,8 @@
       };
       initServiceEvents(props, emit, services);
       initServiceState(props, services);
+      keybindingService.registe(keybindingConfig);
+      keybindingService.registeEl("global");
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
       vue.provide(
@@ -8101,7 +8307,8 @@
   const index$1 = '';
 
   const defaultInstallOpt = {
-    // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+    // eslint-disable-next-line no-eval
+    parseDSL: (dsl) => eval(dsl)
   };
   const index = {
     install: (app, opt) => {
@@ -8137,6 +8344,7 @@
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
   exports.Icon = _sfc_main$B;
+  exports.KeyBindingCommand = KeyBindingCommand;
   exports.KeyValue = _sfc_main$w;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
@@ -8144,6 +8352,7 @@
   exports.Layout = Layout;
   exports.LayoutContainer = _sfc_main$s;
   exports.PropsPanel = _sfc_main$n;
+  exports.Resizer = _sfc_main$t;
   exports.SplitView = _sfc_main$s;
   exports.TMagicCodeEditor = _sfc_main$u;
   exports.TMagicEditor = Editor;