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

package/dist/tmagic-editor.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, createStaticVNode, withDirectives, Teleport, vShow, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, createStaticVNode, provide, withDirectives, Teleport, vShow, onBeforeUnmount, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
 import { TMagicCard, TMagicIcon, TMagicButton, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
@@ -9,10 +9,10 @@ import { MagicTable } from '@tmagic/table';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
 import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName, getNodes } from '@tmagic/utils';
-import KeyController from 'keycon';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+import KeyController from 'keycon';
 
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
@@ -47,6 +47,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
+let $TMAGIC_EDITOR = {};
+const setConfig = (option) => {
+  $TMAGIC_EDITOR = option;
+};
+const getConfig = (key) => $TMAGIC_EDITOR[key];
+
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
@@ -102,7 +108,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       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);
@@ -185,7 +192,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = ["src"];
+const _hoisted_1$n = ["src"];
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
@@ -209,7 +216,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$m)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$n)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -228,7 +235,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
@@ -322,7 +329,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -346,7 +353,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
@@ -494,7 +501,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: filedColumns
@@ -527,7 +534,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
@@ -753,7 +760,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$B, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$j, [
+          createElementVNode("div", _hoisted_1$k, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
             createElementVNode("span", _hoisted_2$c, toDisplayString(item.value), 1)
           ])
@@ -792,7 +799,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"
@@ -959,7 +966,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -1010,7 +1017,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = { class: "m-fields-key-value" };
+const _hoisted_1$i = { class: "m-fields-key-value" };
 const _hoisted_2$a = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
@@ -1055,7 +1062,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -1347,12 +1354,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-let $TMAGIC_EDITOR = {};
-const setConfig = (option) => {
-  $TMAGIC_EDITOR = option;
-};
-const getConfig = (key) => $TMAGIC_EDITOR[key];
-
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
@@ -1361,6 +1362,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const target = ref();
+    const isDraging = ref(false);
     let getso;
     onMounted(() => {
       if (!target.value)
@@ -1372,19 +1374,24 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         if (!target.value)
           return;
         emit("change", e.deltaX);
+      }).on("dragStart", () => {
+        isDraging.value = true;
+      }).on("dragEnd", () => {
+        isDraging.value = false;
       });
     });
     onUnmounted(() => {
       getso?.unset();
+      isDraging.value = false;
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
         ref_key: "target",
         ref: target,
-        class: "m-editor-resizer"
+        class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": isDraging.value }])
       }, [
         renderSlot(_ctx.$slots, "default")
-      ], 512);
+      ], 2);
     };
   }
 });
@@ -1393,7 +1400,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
-  __name: "Layout",
+  __name: "SplitView",
   props: {
     left: {},
     right: {},
@@ -1762,6 +1769,28 @@ var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
   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) => {
@@ -2208,8 +2237,8 @@ class WebStorage extends BaseService {
    * 清理，支持storageService.usePlugin
    */
   async clear() {
-    const storage2 = await this.getStorage();
-    storage2.clear();
+    const storage = await this.getStorage();
+    storage.clear();
   }
   /**
    * 获取存储项，支持storageService.usePlugin
@@ -2223,7 +2252,7 @@ class WebStorage extends BaseService {
       return null;
     switch (protocol) {
       case "object" /* OBJECT */:
-        return eval(`(${item})`);
+        return getConfig("parseDSL")(`(${item})`);
       case "json" /* JSON */:
         return JSON.parse(item);
       case "number" /* NUMBER */:
@@ -2238,49 +2267,49 @@ class WebStorage extends BaseService {
    * 获取指定索引位置的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
     };
   }
 }
@@ -3377,7 +3406,7 @@ const useStage = (stageOptions) => {
   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__ */ createElementVNode("p", null, "新增页面", -1);
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
@@ -3400,7 +3429,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createElementVNode("div", _hoisted_2$9, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
@@ -3417,7 +3446,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-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";
@@ -3482,13 +3511,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
     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 openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         renderSlot(_ctx.$slots, "header"),
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
@@ -3543,7 +3573,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 1,
   class: "menu-item-text"
 };
@@ -3627,7 +3657,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -3882,7 +3912,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$d = { class: "m-editor-props-panel" };
+const _hoisted_1$e = { class: "m-editor-props-panel" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
@@ -3932,7 +3962,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     __expose({ submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -3984,7 +4014,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
@@ -4005,12 +4035,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_3$3);
+      return openBlock(), 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",
@@ -4027,12 +4057,12 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$3);
+      return openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_4$3);
     };
   }
 });
 
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   key: 0,
   class: "m-editor-content-bottom"
 };
@@ -4136,7 +4166,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           language: _ctx.language,
           options: codeOptions.value
         }, null, 8, ["init-values", "language", "options"]),
-        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
+        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -4192,7 +4222,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "code-name-wrapper" };
+const _hoisted_1$a = { class: "code-name-wrapper" };
 const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
 const _hoisted_3$2 = { class: "code-name-wrapper" };
 const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
@@ -4212,6 +4242,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
+    provide("mForm", {});
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -4280,29 +4311,29 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     initTableModel();
     const beforeSave = (codeValue) => {
       try {
-        eval(codeValue);
+        getConfig("parseDSL")(codeValue);
         return true;
       } catch (e) {
         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 || []
         });
         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();
       }
@@ -4318,7 +4349,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$9, [
+          createElementVNode("div", _hoisted_1$a, [
             _hoisted_2$4,
             createVNode(unref(TMagicInput), {
               class: "code-name-input",
@@ -4360,7 +4391,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 0,
   class: "m-editor-code-block-editor-panel"
 };
@@ -4428,7 +4459,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             class: "code-editor-layout"
           }, {
             center: withCtx(() => [
-              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
                 codeConfig.value ? (openBlock(), createBlock(_sfc_main$i, {
                   key: 0,
@@ -4453,7 +4484,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 = {
@@ -4556,7 +4587,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$7, [
+            createElementVNode("div", _hoisted_1$8, [
               createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
@@ -4751,7 +4782,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 = {
@@ -4820,7 +4851,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$6, [
+          createElementVNode("div", _hoisted_1$7, [
             createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
             createVNode(unref(TMagicButton), {
               type: "primary",
@@ -4916,7 +4947,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = ["onClick", "onDragstart"];
+const _hoisted_1$6 = ["onClick", "onDragstart"];
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
@@ -5034,7 +5065,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               _: 2
                             }, 1032, ["content"])
                           ])
-                        ], 40, _hoisted_1$5);
+                        ], 40, _hoisted_1$6);
                       }), 128))
                     ]),
                     _: 2
@@ -5071,6 +5102,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       left: "0",
       top: "0"
     });
+    const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
     const hide = () => {
       if (!visible.value)
         return;
@@ -5083,7 +5115,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (!visible.value || !target) {
         return;
       }
-      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+      if (contains(target)) {
         return;
       }
       hide();
@@ -5110,13 +5142,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       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);
     };
     onMounted(() => {
       if (props.isSubMenu)
@@ -5129,8 +5163,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       globalThis.removeEventListener("mousedown", hideHandler, true);
     });
     __expose({
+      menu,
       hide,
-      show
+      show,
+      contains
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
@@ -5153,14 +5189,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(_component_content_menu, {
+          subMenuData.value.length ? (openBlock(), 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"])) : createCommentVNode("", true)
         ]))
       ], 4)), [
         [vShow, visible.value]
@@ -5273,7 +5310,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["id", "onMouseenter"];
+const _hoisted_1$5 = ["id", "onMouseenter"];
 const throttleTime = 150;
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
@@ -5286,6 +5323,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
+    const keybindingService = services?.keybindingService;
     const tree = ref();
     const menu = ref();
     const checkedKeys = ref([]);
@@ -5419,25 +5457,59 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     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"]]
+      }
+    ]);
+    watch(tree, () => {
+      if (tree.value?.$el) {
+        keybindingService?.registeEl("layer-panel", tree.value.$el);
+        tree.value.$el.addEventListener("blur", windowBlurHandler);
+      } else {
+        keybindingService?.unregisteEl("layer-panel");
+      }
+    });
     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);
     });
+    onBeforeUnmount(() => {
+      tree.value?.$el.removeEventListener("blur", windowBlurHandler);
+    });
     onUnmounted(() => {
-      keycon.destroy();
       editorService?.off("remove", editorServiceRemoveHandler);
       globalThis.removeEventListener("blur", windowBlurHandler);
     });
@@ -5484,6 +5556,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ref: tree,
             "node-key": "id",
             "empty-text": "页面空荡荡的",
+            tabindex: "-1",
             draggable: "",
             "default-expanded-keys": expandedKeys.value,
             "default-checked-keys": checkedKeys.value,
@@ -5517,7 +5590,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 }, () => [
                   createElementVNode("span", null, 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"])) : createCommentVNode("", true),
@@ -5535,7 +5608,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
@@ -5623,7 +5696,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$4, toDisplayString(config.text), 1)) : createCommentVNode("", true)
                 ]))
               ]),
               default: withCtx(() => [
@@ -5710,7 +5783,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "m-editor-breadcrumb"
 };
@@ -5732,7 +5805,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       editorService?.get("stage")?.select(node2.id);
     };
     return (_ctx, _cache) => {
-      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: item.id
@@ -5755,7 +5828,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 1,
   style: { "width": "21px" }
 };
@@ -5848,7 +5921,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           onClick: addPage
         }, [
           createVNode(_sfc_main$B, { icon: unref(Plus) }, null, 8, ["icon"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
+        ])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -5877,7 +5950,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = ["onClick"];
+const _hoisted_1$1 = ["onClick"];
 const _hoisted_2 = { class: "m-editor-page-bar-title" };
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{
@@ -5963,7 +6036,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 2
               }, 1024)
-            ], 10, _hoisted_1);
+            ], 10, _hoisted_1$1);
           }), 128))
         ]),
         _: 3
@@ -6482,6 +6555,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
         return;
       stage = useStage(stageOptions);
+      stage.on("select", () => {
+        stageWrap.value?.container?.focus();
+      });
       services?.editorService.set("stage", markRaw(stage));
       stage?.mount(stageContainer.value);
       if (!node.value?.id)
@@ -6522,21 +6598,25 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     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);
+      }
     });
     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) => {
@@ -6548,7 +6628,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         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;
@@ -6581,6 +6662,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
+        tabindex: "-1",
         width: stageRect.value?.width,
         height: stageRect.value?.height,
         "wrap-width": stageContainerRect.value?.width,
@@ -6616,6 +6698,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1 = { class: "m-editor-workspace" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorWorkspace"
@@ -6626,112 +6709,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const services = inject("services");
-    const workspace = ref();
-    const nodes = computed(() => services?.editorService.get("nodes"));
     const page = computed(() => services?.editorService.get("page"));
-    const mouseenterHandler = () => {
-      workspace.value?.focus();
-    };
-    const mouseleaveHandler = () => {
-      workspace.value?.blur();
-    };
-    let keycon;
-    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 || isPage(nodes.value[0]))
-          return;
-        services?.editorService.remove(nodes.value);
-      }).keyup("backspace", (e) => {
-        e.inputEvent.preventDefault();
-        if (!nodes.value || 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 || 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);
-      });
-    });
-    onUnmounted(() => {
-      workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
-      workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
-      keycon.destroy();
-    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor-workspace",
-        tabindex: "-1",
-        ref_key: "workspace",
-        ref: workspace
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
           page.value ? (openBlock(), createBlock(_sfc_main$2, {
@@ -6749,7 +6729,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         })
-      ], 512);
+      ]);
     };
   }
 });
@@ -6778,8 +6758,8 @@ class CodeBlock extends BaseService {
    * @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);
   }
   /**
@@ -6796,13 +6776,13 @@ class CodeBlock extends BaseService {
    * @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
@@ -6817,7 +6797,8 @@ class CodeBlock extends BaseService {
     }
     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] = {
@@ -6832,8 +6813,8 @@ class CodeBlock extends BaseService {
    * @returns {CodeBlockDSL}
    */
   getCodeDslByIds(ids) {
-    const codeDsl2 = this.getCodeDsl();
-    return pick(codeDsl2, ids);
+    const codeDsl = this.getCodeDsl();
+    return pick(codeDsl, ids);
   }
   /**
    * 设置代码编辑面板展示状态
@@ -6856,10 +6837,10 @@ class CodeBlock extends BaseService {
    * @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;
   }
   /**
@@ -6889,10 +6870,10 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {void}
    */
-  setId(id2) {
-    if (!id2)
+  setId(id) {
+    if (!id)
       return;
-    this.state.id = id2;
+    this.state.id = id;
   }
   /**
    * 获取当前选中的代码块ID
@@ -6957,9 +6938,9 @@ class CodeBlock extends BaseService {
     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);
     });
   }
   /**
@@ -7473,6 +7454,275 @@ class Events extends BaseService {
 }
 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 || 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 || 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: {
@@ -7600,7 +7850,8 @@ const initServiceState = (props, {
   propsService,
   eventsService,
   uiService,
-  codeBlockService
+  codeBlockService,
+  keybindingService
 }) => {
   watch(
     () => props.modelValue,
@@ -7669,6 +7920,7 @@ const initServiceState = (props, {
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
@@ -7860,10 +8112,13 @@ const _sfc_main = defineComponent({
       storageService,
       codeBlockService,
       depService,
-      dataSourceService
+      dataSourceService,
+      keybindingService
     };
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
+    keybindingService.registe(keybindingConfig);
+    keybindingService.registeEl("global");
     provide("services", services);
     provide("codeOptions", props.codeOptions);
     provide(
@@ -8000,7 +8255,8 @@ const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]])
 const index$1 = '';
 
 const defaultInstallOpt = {
-  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl) => eval(dsl)
 };
 const index = {
   install: (app, opt) => {
@@ -8021,5 +8277,5 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, KeyBindingCommand, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$s as SplitView, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map