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

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);
@@ -1356,12 +1363,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"
@@ -1777,6 +1778,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 +2246,8 @@
      * 清理，支持storageService.usePlugin
      */
     async clear() {
-      const storage2 = await this.getStorage();
-      storage2.clear();
+      const storage = await this.getStorage();
+      storage.clear();
     }
     /**
      * 获取存储项，支持storageService.usePlugin
@@ -2238,7 +2261,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 +2276,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
       };
     }
   }
@@ -3497,7 +3520,8 @@
       };
       const saveCode = (value) => {
         try {
-          editorService?.set("root", eval(value));
+          const parseDSL = getConfig("parseDSL");
+          editorService?.set("root", parseDSL(value));
         } catch (e) {
           console.error(e);
         }
@@ -4227,6 +4251,7 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
+      vue.provide("mForm", {});
       const defaultParamColConfig = {
         type: "row",
         label: "参数类型",
@@ -4295,29 +4320,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 +5111,7 @@
         left: "0",
         top: "0"
       });
+      const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
       const hide = () => {
         if (!visible.value)
           return;
@@ -5098,7 +5124,7 @@
         if (!visible.value || !target) {
           return;
         }
-        if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        if (contains(target)) {
           return;
         }
         hide();
@@ -5125,13 +5151,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 +5172,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 +5198,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]
@@ -5435,38 +5466,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);
@@ -6510,6 +6564,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 +6607,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 +6637,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 +6671,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 +6707,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 +6767,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 +6785,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 +6806,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 +6822,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 +6846,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 +6879,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 +6947,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 +7464,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 +7859,8 @@
     propsService,
     eventsService,
     uiService,
-    codeBlockService
+    codeBlockService,
+    keybindingService
   }) => {
     vue.watch(
       () => props.modelValue,
@@ -7769,6 +7929,7 @@
       uiService.resetState();
       componentListService.resetState();
       codeBlockService.resetState();
+      keybindingService.reset();
     });
   };
   const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
@@ -7965,6 +8126,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 +8264,8 @@
   const index$1 = '';
 
   const defaultInstallOpt = {
-    // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+    // eslint-disable-next-line no-eval
+    parseDSL: (dsl) => eval(dsl)
   };
   const index = {
     install: (app, opt) => {
@@ -8137,6 +8301,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;