@tmagic/editor 1.3.0-alpha.5 → 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);
@@ -194,7 +201,7 @@
     }
   });
 
-  const _hoisted_1$m = ["src"];
+  const _hoisted_1$n = ["src"];
   const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
@@ -218,7 +225,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$m)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$n)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -237,7 +244,7 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-fields-code-select-col" };
+  const _hoisted_1$m = { class: "m-fields-code-select-col" };
   const _hoisted_2$e = { class: "code-select-container" };
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -331,7 +338,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -355,7 +362,7 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
   const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -503,7 +510,7 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: filedColumns
@@ -536,7 +543,7 @@
     }
   });
 
-  const _hoisted_1$j = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_1$k = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$c = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$5 = { class: "el-input__inner" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
@@ -762,7 +769,7 @@
             vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$j, [
+            vue.createElementVNode("div", _hoisted_1$k, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$c, vue.toDisplayString(item.value), 1)
             ])
@@ -801,7 +808,7 @@
     }
   });
 
-  const _hoisted_1$i = { class: "m-fields-event-select" };
+  const _hoisted_1$j = { class: "m-fields-event-select" };
   const _hoisted_2$b = {
     key: 1,
     class: "fullWidth"
@@ -968,7 +975,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -1019,7 +1026,7 @@
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-key-value" };
+  const _hoisted_1$i = { class: "m-fields-key-value" };
   const _hoisted_2$a = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -1064,7 +1071,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -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"
@@ -1370,6 +1371,7 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const target = vue.ref();
+      const isDraging = vue.ref(false);
       let getso;
       vue.onMounted(() => {
         if (!target.value)
@@ -1381,19 +1383,24 @@
           if (!target.value)
             return;
           emit("change", e.deltaX);
+        }).on("dragStart", () => {
+          isDraging.value = true;
+        }).on("dragEnd", () => {
+          isDraging.value = false;
         });
       });
       vue.onUnmounted(() => {
         getso?.unset();
+        isDraging.value = false;
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("span", {
           ref_key: "target",
           ref: target,
-          class: "m-editor-resizer"
+          class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": isDraging.value }])
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 512);
+        ], 2);
       };
     }
   });
@@ -1402,7 +1409,7 @@
     ...{
       name: "MEditorLayout"
     },
-    __name: "Layout",
+    __name: "SplitView",
     props: {
       left: {},
       right: {},
@@ -1771,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) => {
@@ -2217,8 +2246,8 @@
      * 清理，支持storageService.usePlugin
      */
     async clear() {
-      const storage2 = await this.getStorage();
-      storage2.clear();
+      const storage = await this.getStorage();
+      storage.clear();
     }
     /**
      * 获取存储项，支持storageService.usePlugin
@@ -2232,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 */:
@@ -2247,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
       };
     }
   }
@@ -3386,7 +3415,7 @@
     return stage;
   };
 
-  const _hoisted_1$g = { class: "m-editor-empty-panel" };
+  const _hoisted_1$h = { class: "m-editor-empty-panel" };
   const _hoisted_2$9 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
@@ -3409,7 +3438,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           vue.createElementVNode("div", _hoisted_2$9, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
@@ -3426,7 +3455,7 @@
     }
   });
 
-  const _hoisted_1$f = { class: "m-editor" };
+  const _hoisted_1$g = { class: "m-editor" };
   const DEFAULT_LEFT_COLUMN_WIDTH = 310;
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
@@ -3491,13 +3520,14 @@
       };
       const saveCode = (value) => {
         try {
-          editorService?.set("root", eval(value));
+          const parseDSL = getConfig("parseDSL");
+          editorService?.set("root", parseDSL(value));
         } catch (e) {
           console.error(e);
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.renderSlot(_ctx.$slots, "header"),
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
@@ -3552,7 +3582,7 @@
     }
   });
 
-  const _hoisted_1$e = {
+  const _hoisted_1$f = {
     key: 1,
     class: "menu-item-text"
   };
@@ -3636,7 +3666,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -3891,7 +3921,7 @@
     }
   });
 
-  const _hoisted_1$d = { class: "m-editor-props-panel" };
+  const _hoisted_1$e = { class: "m-editor-props-panel" };
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
@@ -3941,7 +3971,7 @@
       };
       __expose({ submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -3993,7 +4023,7 @@
     }
   });
 
-  const _hoisted_1$c = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_1$d = { xmlns: "http://www.w3.org/2000/svg" };
   const _hoisted_2$7 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
@@ -4014,12 +4044,12 @@
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _hoisted_3$3);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _hoisted_3$3);
       };
     }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$c = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4036,12 +4066,12 @@
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_4$3);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _hoisted_4$3);
       };
     }
   });
 
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     key: 0,
     class: "m-editor-content-bottom"
   };
@@ -4145,7 +4175,7 @@
             language: _ctx.language,
             options: codeOptions.value
           }, null, 8, ["init-values", "language", "options"]),
-          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -4201,7 +4231,7 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "code-name-wrapper" };
+  const _hoisted_1$a = { class: "code-name-wrapper" };
   const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
   const _hoisted_3$2 = { class: "code-name-wrapper" };
   const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
@@ -4221,6 +4251,7 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
+      vue.provide("mForm", {});
       const defaultParamColConfig = {
         type: "row",
         label: "参数类型",
@@ -4289,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();
         }
@@ -4327,7 +4358,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$9, [
+            vue.createElementVNode("div", _hoisted_1$a, [
               _hoisted_2$4,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 class: "code-name-input",
@@ -4369,7 +4400,7 @@
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     key: 0,
     class: "m-editor-code-block-editor-panel"
   };
@@ -4437,7 +4468,7 @@
               class: "code-editor-layout"
             }, {
               center: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
                   vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
                   codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
                     key: 0,
@@ -4462,7 +4493,7 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_1$8 = { class: "search-wrapper" };
   const _hoisted_2$3 = ["id"];
   const _hoisted_3$1 = { class: "list-item" };
   const _hoisted_4$1 = {
@@ -4565,7 +4596,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$7, [
+              vue.createElementVNode("div", _hoisted_1$8, [
                 vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
@@ -4760,7 +4791,7 @@
     }
   });
 
-  const _hoisted_1$6 = { class: "search-wrapper" };
+  const _hoisted_1$7 = { class: "search-wrapper" };
   const _hoisted_2$2 = ["id"];
   const _hoisted_3 = { class: "list-item" };
   const _hoisted_4 = {
@@ -4829,7 +4860,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$6, [
+            vue.createElementVNode("div", _hoisted_1$7, [
               vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
               vue.createVNode(vue.unref(design.TMagicButton), {
                 type: "primary",
@@ -4925,7 +4956,7 @@
     }
   });
 
-  const _hoisted_1$5 = ["onClick", "onDragstart"];
+  const _hoisted_1$6 = ["onClick", "onDragstart"];
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
@@ -5043,7 +5074,7 @@
                                 _: 2
                               }, 1032, ["content"])
                             ])
-                          ], 40, _hoisted_1$5);
+                          ], 40, _hoisted_1$6);
                         }), 128))
                       ]),
                       _: 2
@@ -5080,6 +5111,7 @@
         left: "0",
         top: "0"
       });
+      const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
       const hide = () => {
         if (!visible.value)
           return;
@@ -5092,7 +5124,7 @@
         if (!visible.value || !target) {
           return;
         }
-        if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        if (contains(target)) {
           return;
         }
         hide();
@@ -5119,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)
@@ -5138,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);
@@ -5162,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]
@@ -5282,7 +5319,7 @@
     }
   });
 
-  const _hoisted_1$4 = ["id", "onMouseenter"];
+  const _hoisted_1$5 = ["id", "onMouseenter"];
   const throttleTime = 150;
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5295,6 +5332,7 @@
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
+      const keybindingService = services?.keybindingService;
       const tree = vue.ref();
       const menu = vue.ref();
       const checkedKeys = vue.ref([]);
@@ -5428,25 +5466,59 @@
       const windowBlurHandler = () => {
         isCtrlKeyDown.value = false;
       };
-      let keycon;
+      keybindingService?.registeCommand("layer-panel-not-ctrl-keydown", (e) => {
+        if (e.key !== keybindingService.ctrlKey) {
+          isCtrlKeyDown.value = false;
+        }
+      });
+      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?.registeEl("layer-panel", tree.value.$el);
+          tree.value.$el.addEventListener("blur", windowBlurHandler);
+        } else {
+          keybindingService?.unregisteEl("layer-panel");
+        }
+      });
       vue.onMounted(() => {
         editorService?.on("remove", editorServiceRemoveHandler);
-        keycon = new KeyController();
-        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;
-        });
         globalThis.addEventListener("blur", windowBlurHandler);
       });
+      vue.onBeforeUnmount(() => {
+        tree.value?.$el.removeEventListener("blur", windowBlurHandler);
+      });
       vue.onUnmounted(() => {
-        keycon.destroy();
         editorService?.off("remove", editorServiceRemoveHandler);
         globalThis.removeEventListener("blur", windowBlurHandler);
       });
@@ -5493,6 +5565,7 @@
               ref: tree,
               "node-key": "id",
               "empty-text": "页面空荡荡的",
+              tabindex: "-1",
               draggable: "",
               "default-expanded-keys": expandedKeys.value,
               "default-checked-keys": checkedKeys.value,
@@ -5526,7 +5599,7 @@
                   }, () => [
                     vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
                   ])
-                ], 40, _hoisted_1$4)
+                ], 40, _hoisted_1$5)
               ]),
               _: 3
             }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : vue.createCommentVNode("", true),
@@ -5544,7 +5617,7 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$4 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
@@ -5632,7 +5705,7 @@
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
                   ]))
                 ]),
                 default: vue.withCtx(() => [
@@ -5719,7 +5792,7 @@
     }
   });
 
-  const _hoisted_1$2 = {
+  const _hoisted_1$3 = {
     key: 0,
     class: "m-editor-breadcrumb"
   };
@@ -5741,7 +5814,7 @@
         editorService?.get("stage")?.select(node2.id);
       };
       return (_ctx, _cache) => {
-        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.id
@@ -5764,7 +5837,7 @@
     }
   });
 
-  const _hoisted_1$1 = {
+  const _hoisted_1$2 = {
     key: 1,
     style: { "width": "21px" }
   };
@@ -5857,7 +5930,7 @@
             onClick: addPage
           }, [
             vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -5886,7 +5959,7 @@
     }
   });
 
-  const _hoisted_1 = ["onClick"];
+  const _hoisted_1$1 = ["onClick"];
   const _hoisted_2 = { class: "m-editor-page-bar-title" };
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5972,7 +6045,7 @@
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_1);
+              ], 10, _hoisted_1$1);
             }), 128))
           ]),
           _: 3
@@ -6491,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)
@@ -6531,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) => {
@@ -6557,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;
@@ -6590,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,
@@ -6625,6 +6707,7 @@
     }
   });
 
+  const _hoisted_1 = { class: "m-editor-workspace" };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorWorkspace"
@@ -6635,112 +6718,9 @@
     },
     setup(__props) {
       const services = vue.inject("services");
-      const workspace = vue.ref();
-      const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const page = vue.computed(() => services?.editorService.get("page"));
-      const mouseenterHandler = () => {
-        workspace.value?.focus();
-      };
-      const mouseleaveHandler = () => {
-        workspace.value?.blur();
-      };
-      let keycon;
-      vue.onMounted(() => {
-        workspace.value?.addEventListener("mouseenter", mouseenterHandler);
-        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
-        keycon = new KeyController(workspace.value);
-        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-        const ctrl = isMac ? "meta" : "ctrl";
-        keycon.keyup("delete", (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.remove(nodes.value);
-        }).keyup("backspace", (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.remove(nodes.value);
-        }).keydown([ctrl, "c"], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.copy(nodes.value);
-        }).keydown([ctrl, "v"], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-        }).keydown([ctrl, "x"], (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.copy(nodes.value);
-          services?.editorService.remove(nodes.value);
-        }).keydown([ctrl, "z"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.undo();
-        }).keydown([ctrl, "shift", "z"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.redo();
-        }).keydown("up", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -1);
-        }).keydown("down", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 1);
-        }).keydown("left", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-1, 0);
-        }).keydown("right", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(1, 0);
-        }).keydown([ctrl, "up"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -10);
-        }).keydown([ctrl, "down"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 10);
-        }).keydown([ctrl, "left"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-10, 0);
-        }).keydown([ctrl, "right"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(10, 0);
-        }).keydown("tab", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextNode();
-        }).keydown([ctrl, "tab"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextPage();
-        }).keydown([ctrl, "="], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        }).keydown([ctrl, "numpadplus"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        }).keydown([ctrl, "-"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        }).keydown([ctrl, "numpad-"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        }).keydown([ctrl, "0"], async (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.set("zoom", await services.uiService.calcZoom());
-        }).keydown([ctrl, "1"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.set("zoom", 1);
-        });
-      });
-      vue.onUnmounted(() => {
-        workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
-        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
-        keycon.destroy();
-      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-workspace",
-          tabindex: "-1",
-          ref_key: "workspace",
-          ref: workspace
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.createVNode(_sfc_main$8),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
             page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
@@ -6758,7 +6738,7 @@
             ]),
             _: 3
           })
-        ], 512);
+        ]);
       };
     }
   });
@@ -6787,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);
     }
     /**
@@ -6805,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
@@ -6826,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] = {
@@ -6841,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);
     }
     /**
      * 设置代码编辑面板展示状态
@@ -6865,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;
     }
     /**
@@ -6898,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
@@ -6966,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);
       });
     }
     /**
@@ -7482,6 +7463,275 @@
   }
   const eventsService = new Events();
 
+  class Keybinding extends BaseService {
+    ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
+    controllers = /* @__PURE__ */ new Map();
+    bindingList = [];
+    commands = {
+      [KeyBindingCommand.DELETE_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        if (!nodes || utils.isPage(nodes[0]))
+          return;
+        editorService.remove(nodes);
+      },
+      [KeyBindingCommand.COPY_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        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);
+      },
+      [KeyBindingCommand.PASTE_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+      },
+      [KeyBindingCommand.UNDO]: () => {
+        editorService.undo();
+      },
+      [KeyBindingCommand.REDO]: () => {
+        editorService.redo();
+      },
+      [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);
+      },
+      [KeyBindingCommand.MOVE_DOWN_1]: () => {
+        editorService.move(0, 1);
+      },
+      [KeyBindingCommand.MOVE_LEFT_1]: () => {
+        editorService.move(-1, 0);
+      },
+      [KeyBindingCommand.MOVE_RIGHT_1]: () => {
+        editorService.move(1, 0);
+      },
+      [KeyBindingCommand.MOVE_UP_10]: () => {
+        editorService.move(0, -10);
+      },
+      [KeyBindingCommand.MOVE_DOWN_10]: () => {
+        editorService.move(0, 10);
+      },
+      [KeyBindingCommand.MOVE_LEFT_10]: () => {
+        editorService.move(-10, 0);
+      },
+      [KeyBindingCommand.MOVE_RIGHT_10]: () => {
+        editorService.move(10, 0);
+      },
+      [KeyBindingCommand.SWITCH_NODE]: () => {
+        editorService.selectNextNode();
+      }
+    };
+    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);
+        }
+      }
+      this.bind();
+    }
+    reset() {
+      this.controllers.forEach((keycon) => {
+        keycon.destroy();
+      });
+      this.controllers.clear();
+      this.bindingList = [];
+    }
+    destroy() {
+      this.reset();
+    }
+    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;
+      }
+    }
+    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: {
@@ -7609,7 +7859,8 @@
     propsService,
     eventsService,
     uiService,
-    codeBlockService
+    codeBlockService,
+    keybindingService
   }) => {
     vue.watch(
       () => props.modelValue,
@@ -7678,6 +7929,7 @@
       uiService.resetState();
       componentListService.resetState();
       codeBlockService.resetState();
+      keybindingService.reset();
     });
   };
   const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
@@ -7869,10 +8121,13 @@
         storageService,
         codeBlockService,
         depService,
-        dataSourceService
+        dataSourceService,
+        keybindingService
       };
       initServiceEvents(props, emit, services);
       initServiceState(props, services);
+      keybindingService.registe(keybindingConfig);
+      keybindingService.registeEl("global");
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
       vue.provide(
@@ -8009,7 +8264,8 @@
   const index$1 = '';
 
   const defaultInstallOpt = {
-    // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+    // eslint-disable-next-line no-eval
+    parseDSL: (dsl) => eval(dsl)
   };
   const index = {
     install: (app, opt) => {
@@ -8045,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;
@@ -8052,6 +8309,7 @@
   exports.Layout = Layout;
   exports.LayoutContainer = _sfc_main$s;
   exports.PropsPanel = _sfc_main$n;
+  exports.SplitView = _sfc_main$s;
   exports.TMagicCodeEditor = _sfc_main$u;
   exports.TMagicEditor = Editor;
   exports.ToolButton = _sfc_main$p;