@tmagic/editor 1.3.0-alpha.0 → 1.3.0-alpha.10

package/dist/tmagic-editor.js

@@ -1,29 +1,29 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, Fragment, renderList, watchEffect, withModifiers, createCommentVNode, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, createStaticVNode, withDirectives, Teleport, vShow, nextTick, 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, withDirectives, vShow, createStaticVNode, provide, Teleport, 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, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicPopover } from '@tmagic/design';
+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';
 import { HookType, ActionType, NodeType } from '@tmagic/schema';
-import { Edit, View, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Coin, Aim, Files, CopyDocument, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
-import { createValues, MFormDialog, MForm } from '@tmagic/form';
+import { Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { createValues, MFormDialog, MSelect, MForm } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
-import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
-import KeyController from 'keycon';
+import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 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 __default__$w = defineComponent({
-  name: "MEditorCode"
-});
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
-  ...__default__$w,
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCode"
+  },
+  __name: "Code",
   props: {
-    model: null,
-    name: null,
-    config: null,
-    prop: null
+    model: {},
+    name: {},
+    config: {},
+    prop: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -37,26 +37,32 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
       return openBlock(), createBlock(_component_magic_code_editor, {
-        style: normalizeStyle(`height: ${unref(height)}`),
-        "init-values": __props.model[__props.name],
-        language: unref(language),
-        options: __props.config.options,
+        style: normalizeStyle(`height: ${height.value}`),
+        "init-values": _ctx.model[_ctx.name],
+        language: language.value,
+        options: _ctx.config.options,
         onSave: save
       }, null, 8, ["style", "init-values", "language", "options"]);
     };
   }
 });
 
-const __default__$v = defineComponent({
-  name: "MEditorCodeLink"
-});
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
-  ...__default__$v,
+let $TMAGIC_EDITOR = {};
+const setConfig = (option) => {
+  $TMAGIC_EDITOR = option;
+};
+const getConfig = (key) => $TMAGIC_EDITOR[key];
+
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeLink"
+  },
+  __name: "CodeLink",
   props: {
-    config: null,
-    model: null,
-    name: null,
-    prop: null
+    config: {},
+    model: {},
+    name: {},
+    prop: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -102,7 +108,8 @@ const _sfc_main$C = /* @__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);
@@ -111,7 +118,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_fields_link = resolveComponent("m-fields-link");
       return openBlock(), createBlock(_component_m_fields_link, {
-        config: unref(formConfig),
+        config: formConfig.value,
         model: modelValue,
         name: "form",
         onChange: changeHandler
@@ -120,17 +127,17 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$u = defineComponent({
-  name: "MEditorCodeSelect"
-});
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
-  ...__default__$u,
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeSelect"
+  },
+  __name: "CodeSelect",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null,
-    size: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -139,6 +146,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       type: "group-list",
       name: "hookData",
       enableToggleMode: false,
+      expandAll: true,
+      titleKey: "codeId",
       items: [
         {
           type: "code-select-col",
@@ -166,13 +175,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["m-fields-code-select", __props.config.className])
+        class: normalizeClass(["m-fields-code-select", _ctx.config.className])
       }, [
         createVNode(unref(TMagicCard), null, {
           default: withCtx(() => [
             createVNode(_component_m_form_container, {
-              config: unref(codeConfig),
-              model: __props.model[__props.name],
+              config: codeConfig.value,
+              model: _ctx.model[_ctx.name],
               onChange: changeHandler
             }, null, 8, ["config", "model"])
           ]),
@@ -183,18 +192,18 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = ["src"];
-const __default__$t = defineComponent({
-  name: "MEditorIcon"
-});
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
-  ...__default__$t,
+const _hoisted_1$p = ["src"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorIcon"
+  },
+  __name: "Icon",
   props: {
-    icon: null
+    icon: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+      return !_ctx.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
         key: 0,
         class: "magic-editor-icon"
       }, {
@@ -202,23 +211,23 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           createVNode(unref(Edit))
         ]),
         _: 1
-      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
+      })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
         key: 1,
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$n)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$p)
         ]),
         _: 1
-      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
+      })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
         key: 2,
-        class: normalizeClass(["magic-editor-icon", __props.icon])
+        class: normalizeClass(["magic-editor-icon", _ctx.icon])
       }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
         key: 3,
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
+          (openBlock(), createBlock(resolveDynamicComponent(toRaw(_ctx.icon))))
         ]),
         _: 1
       }));
@@ -226,19 +235,19 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = { class: "m-fields-code-select-col" };
-const _hoisted_2$e = { class: "code-select-container" };
-const __default__$s = defineComponent({
-  name: "MEditorCodeSelectCol"
-});
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
-  ...__default__$s,
+const _hoisted_1$o = { class: "m-fields-code-select-col" };
+const _hoisted_2$f = { class: "code-select-container" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeSelectCol"
+  },
+  __name: "CodeSelectCol",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null,
-    size: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -320,23 +329,23 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
-        createElementVNode("div", _hoisted_2$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+        createElementVNode("div", _hoisted_2$f, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
-            model: __props.model,
+            model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          createVNode(_sfc_main$A, {
+          createVNode(_sfc_main$E, {
             class: "icon",
-            icon: unref(editable) ? unref(Edit) : unref(View),
+            icon: editable.value ? unref(Edit) : unref(View),
             onClick: editCode
           }, null, 8, ["icon"])
         ]),
         createVNode(_component_m_form_container, {
           config: codeParamsConfig.value,
-          model: __props.model,
+          model: _ctx.model,
           onChange: onParamsChangeHandler
         }, null, 8, ["config", "model"])
       ]);
@@ -344,17 +353,19 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-editor-data-source-fields" };
-const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
-const _hoisted_3$8 = /* @__PURE__ */ createTextVNode("添加");
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = { class: "m-editor-data-source-fields" };
+const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceFields"
+  },
   __name: "DataSourceFields",
   props: {
-    config: null,
-    model: null,
-    prop: null,
+    config: {},
+    model: {},
+    prop: {},
     disabled: { type: Boolean, default: false },
-    name: null
+    name: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -450,7 +461,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           {
             validator: ({ value, callback }, { model, parent }) => {
               const index = parent.findIndex((item) => item.name === value);
-              if (model.index === -1 && index > -1 || model.index > -1 && index !== model.index) {
+              if (model.index === -1 && index > -1 || model.index > -1 && index > -1 && index !== model.index) {
                 return callback(`属性key（${value}）已存在`);
               }
               callback();
@@ -490,21 +501,21 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createVNode(unref(MagicTable), {
-          data: __props.model[__props.name],
+          data: _ctx.model[_ctx.name],
           columns: filedColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$d, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
-            disabled: __props.disabled,
+            disabled: _ctx.disabled,
             plain: "",
             onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
           }, {
             default: withCtx(() => [
-              _hoisted_3$8
+              createTextVNode("添加")
             ]),
             _: 1
           }, 8, ["disabled"])
@@ -515,7 +526,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           title: filedTitle.value,
           config: dataSourceFieldsConfig,
           values: fieldValues.value,
-          parentValues: __props.model[__props.name],
+          parentValues: _ctx.model[_ctx.name],
           onSubmit: fieldChange
         }, null, 8, ["title", "values", "parentValues"])
       ]);
@@ -523,23 +534,343 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-fields-event-select" };
+const _hoisted_1$m = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+const _hoisted_2$d = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_3$6 = { class: "el-input__inner" };
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceInput"
+  },
+  __name: "DataSourceInput",
+  props: {
+    config: {},
+    model: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean, default: false },
+    lastValues: {},
+    size: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { dataSourceService } = inject("services") || {};
+    const autocomplete = ref();
+    const isFocused = ref(false);
+    const state = ref("");
+    const displayState = ref([]);
+    const input = computed(() => autocomplete.value?.inputRef?.input);
+    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const setDisplayState = () => {
+      displayState.value = [];
+      const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
+      let index = 0;
+      for (const match of matches) {
+        if (typeof match.index === "undefined")
+          break;
+        displayState.value.push({
+          type: "text",
+          value: state.value.substring(index, match.index)
+        });
+        let dsText = "";
+        let ds;
+        let fields;
+        match[1].split(".").forEach((item, index2) => {
+          if (index2 === 0) {
+            ds = dataSources.value.find((ds2) => ds2.id === item);
+            dsText += ds?.title || item;
+            fields = ds?.fields;
+            return;
+          }
+          const field = fields?.find((field2) => field2.name === item);
+          fields = field?.fields;
+          dsText += `.${field?.title || item}`;
+        });
+        displayState.value.push({
+          type: "var",
+          value: dsText
+        });
+        index = match.index + match[0].length;
+      }
+      if (index < state.value.length) {
+        displayState.value.push({
+          type: "text",
+          value: state.value.substring(index)
+        });
+      }
+    };
+    watch(
+      () => props.model[props.name],
+      (value = "") => {
+        state.value = value;
+        setDisplayState();
+      },
+      { immediate: true }
+    );
+    const mouseupHandler = async () => {
+      isFocused.value = true;
+      await nextTick();
+      autocomplete.value?.focus();
+    };
+    const blurHandler = () => {
+      isFocused.value = false;
+      setDisplayState();
+    };
+    const changeHandler = (v) => {
+      emit("change", v);
+    };
+    let inputText = "";
+    const inputHandler = (v) => {
+      if (!v) {
+        inputText = v;
+      }
+    };
+    const isRightCurlyBracket = (selectionStart = 0) => {
+      const lastChar = inputText.substring(selectionStart - 1, selectionStart);
+      return lastChar === "}";
+    };
+    const getSelectionStart = () => {
+      let selectionStart = input.value?.selectionStart || 0;
+      if (isRightCurlyBracket(selectionStart)) {
+        selectionStart -= 1;
+      }
+      return selectionStart;
+    };
+    const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
+    const curCharIsDot = (dotIndex) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
+    const dsQuerySearch = (queryString, leftCurlyBracketIndex, cb) => {
+      let result = [];
+      if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+        result = dataSources.value;
+      } else if (leftCurlyBracketIndex > 0) {
+        const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
+        result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
+      }
+      cb(
+        result.map((ds) => ({
+          value: ds.id,
+          text: ds.title,
+          type: "dataSource"
+        }))
+      );
+    };
+    const fieldQuerySearch = (queryString, leftAngleIndex, dotIndex, cb) => {
+      let result = [];
+      const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+      const keys = dsKey.split(".");
+      const ds = dataSources.value.find((ds2) => ds2.id === keys.shift());
+      if (!ds) {
+        return;
+      }
+      let fields = ds.fields || [];
+      let key = keys.shift();
+      while (key) {
+        for (const field of fields) {
+          if (field.name === key) {
+            fields = field.fields || [];
+            key = keys.shift();
+            break;
+          }
+        }
+      }
+      if (curCharIsDot(dotIndex)) {
+        result = fields || [];
+      } else if (dotIndex > -1) {
+        const queryName = queryString.substring(dotIndex + 1).toLowerCase();
+        result = fields.filter(
+          (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName)
+        ) || [];
+      }
+      cb(
+        result.map((field) => ({
+          value: field.name,
+          text: field.title,
+          type: "field"
+        }))
+      );
+    };
+    const querySearch = (queryString, cb) => {
+      inputText = queryString;
+      const selectionStart = getSelectionStart();
+      const curQueryString = queryString.substring(0, selectionStart);
+      const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
+      const dsKeyStringLastIndex = curQueryString.lastIndexOf("${") + 1;
+      const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
+      if (isFieldTip) {
+        fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
+      } else {
+        dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
+      }
+    };
+    const selectHandler = async ({ value, type }) => {
+      const isDataSource = type === "dataSource";
+      const selectionStart = input.value?.selectionStart || 0;
+      let startText = inputText.substring(0, selectionStart);
+      const dotIndex = startText.lastIndexOf(".");
+      const leftCurlyBracketIndex = startText.lastIndexOf("${") + 1;
+      const endText = inputText.substring(selectionStart);
+      let suggestText = value;
+      if (isDataSource) {
+        if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+          startText = startText.substring(0, leftCurlyBracketIndex + 1);
+        }
+        if (!isRightCurlyBracket(selectionStart + 1)) {
+          suggestText = `${suggestText}}`;
+        }
+      } else if (!curCharIsDot(dotIndex)) {
+        startText = startText.substring(0, dotIndex + 1);
+      }
+      state.value = `${startText}${suggestText}${endText}`;
+      await nextTick();
+      let newSelectionStart = 0;
+      if (isDataSource) {
+        newSelectionStart = leftCurlyBracketIndex + suggestText.length;
+      } else {
+        newSelectionStart = dotIndex + suggestText.length + 1;
+      }
+      input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+    };
+    return (_ctx, _cache) => {
+      return _ctx.disabled || isFocused.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(getConfig$1)("components")?.autocomplete.component || "el-autocomplete"), mergeProps(
+        {
+          key: 0,
+          class: "tmagic-design-auto-complete",
+          ref_key: "autocomplete",
+          ref: autocomplete,
+          modelValue: state.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
+        },
+        unref(getConfig$1)("components")?.autocomplete.props({
+          disabled: _ctx.disabled,
+          size: _ctx.size,
+          fetchSuggestions: querySearch,
+          triggerOnFocus: false,
+          clearable: true
+        }) || {},
+        {
+          style: { "width": "100%" },
+          onBlur: blurHandler,
+          onChange: changeHandler,
+          onInput: inputHandler,
+          onSelect: selectHandler
+        }
+      ), {
+        suffix: withCtx(() => [
+          createVNode(_sfc_main$E, { icon: unref(Coin) }, null, 8, ["icon"])
+        ]),
+        default: withCtx(({ item }) => [
+          createElementVNode("div", _hoisted_1$m, [
+            createElementVNode("div", null, toDisplayString(item.text), 1),
+            createElementVNode("span", _hoisted_2$d, toDisplayString(item.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
+        onMouseup: mouseupHandler
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+        }, [
+          createElementVNode("div", _hoisted_3$6, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
+              return openBlock(), createElementBlock(Fragment, null, [
+                item.type === "text" ? (openBlock(), createElementBlock("span", {
+                  key: index,
+                  style: { "margin-right": "2px" }
+                }, toDisplayString(item.value), 1)) : createCommentVNode("", true),
+                item.type === "var" ? (openBlock(), createBlock(unref(TMagicTag), {
+                  key: index,
+                  size: _ctx.size
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["size"])) : createCommentVNode("", true)
+              ], 64);
+            }), 256)),
+            createVNode(_sfc_main$E, {
+              class: "tmagic-data-source-input-icon",
+              icon: unref(Coin)
+            }, null, 8, ["icon"])
+          ])
+        ], 2)
+      ], 34));
+    };
+  }
+});
+
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceSelect"
+  },
+  __name: "DataSourceSelect",
+  props: {
+    config: {},
+    model: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean, default: false },
+    lastValues: {},
+    size: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { dataSourceService } = inject("services") || {};
+    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const selectConfig = computed(() => {
+      const { type, dataSourceType, ...config } = props.config;
+      return {
+        ...config,
+        type: "select",
+        valueKey: "dataSourceId",
+        options: dataSources.value.filter((ds) => !dataSourceType || ds.type === dataSourceType).map((ds) => ({
+          value: {
+            isBindDataSource: true,
+            dataSourceType: ds.type,
+            dataSourceId: ds.id
+          },
+          text: ds.title || ds.id
+        }))
+      };
+    });
+    const changeHandler = (value) => {
+      emit("change", value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MSelect), {
+        model: _ctx.model,
+        name: _ctx.name,
+        size: _ctx.size,
+        prop: _ctx.prop,
+        disabled: _ctx.disabled,
+        config: selectConfig.value,
+        "last-values": _ctx.lastValues,
+        onChange: changeHandler
+      }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]);
+    };
+  }
+});
+
+const _hoisted_1$l = { class: "m-fields-event-select" };
 const _hoisted_2$c = {
   key: 1,
   class: "fullWidth"
 };
-const _hoisted_3$7 = /* @__PURE__ */ createTextVNode("添加事件");
-const __default__$r = defineComponent({
-  name: "MEditorEventSelect"
-});
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
-  ...__default__$r,
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorEventSelect"
+  },
+  __name: "EventSelect",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null,
-    size: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -656,6 +987,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         {
           type: "group-list",
           name: "actions",
+          expandAll: true,
           enableToggleMode: false,
           items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value]
         }
@@ -690,14 +1022,14 @@ 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$k, [
-        unref(isOldVersion) ? (openBlock(), createBlock(_component_m_form_table, {
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+        isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
           size: props.size,
-          model: __props.model,
+          model: _ctx.model,
           name: "events",
-          config: unref(tableConfig),
+          config: tableConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
           createVNode(unref(TMagicButton), {
@@ -707,21 +1039,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
           }, {
             default: withCtx(() => [
-              _hoisted_3$7
+              createTextVNode("添加事件")
             ]),
             _: 1
           }),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.model[__props.name], (cardItem, index) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model[_ctx.name], (cardItem, index) => {
             return openBlock(), createBlock(_component_m_form_panel, {
               key: index,
-              config: unref(actionsConfig),
+              config: actionsConfig.value,
               model: cardItem,
               onChange: onChangeHandler
             }, {
               header: withCtx(() => [
                 createVNode(_component_m_form_container, {
                   class: "fullWidth",
-                  config: unref(eventNameConfig),
+                  config: eventNameConfig.value,
                   model: cardItem,
                   onChange: onChangeHandler
                 }, null, 8, ["config", "model"]),
@@ -741,19 +1073,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-fields-key-value" };
+const _hoisted_1$k = { class: "m-fields-key-value" };
 const _hoisted_2$b = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _hoisted_3$6 = /* @__PURE__ */ createTextVNode("添加");
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorKeyValue"
+  },
   __name: "KeyValue",
   props: {
-    config: null,
-    model: null,
-    name: null,
-    prop: null,
+    config: {},
+    model: {},
+    name: {},
+    prop: {},
     disabled: { type: Boolean, default: false },
-    lastValues: null,
-    size: null
+    lastValues: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -784,7 +1118,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -794,8 +1128,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               placeholder: "key",
               modelValue: records.value[index][0],
               "onUpdate:modelValue": ($event) => records.value[index][0] = $event,
-              disabled: __props.disabled,
-              size: __props.size,
+              disabled: _ctx.disabled,
+              size: _ctx.size,
               onChange: keyChangeHandler
             }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
             _hoisted_2$b,
@@ -803,14 +1137,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               placeholder: "value",
               modelValue: records.value[index][1],
               "onUpdate:modelValue": ($event) => records.value[index][1] = $event,
-              disabled: __props.disabled,
-              size: __props.size,
+              disabled: _ctx.disabled,
+              size: _ctx.size,
               onChange: valueChangeHandler
             }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
             createVNode(unref(TMagicButton), {
               class: "m-fileds-key-value-delete",
               type: "danger",
-              size: __props.size,
+              size: _ctx.size,
               circle: "",
               plain: "",
               icon: unref(Delete),
@@ -820,13 +1154,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         }), 128)),
         createVNode(unref(TMagicButton), {
           type: "primary",
-          size: __props.size,
+          size: _ctx.size,
           plain: "",
           icon: unref(Plus),
           onClick: addHandler
         }, {
           default: withCtx(() => [
-            _hoisted_3$6
+            createTextVNode("添加")
           ]),
           _: 1
         }, 8, ["size", "icon"])
@@ -835,17 +1169,16 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = /* @__PURE__ */ createTextVNode("取消");
-const __default__$q = defineComponent({
-  name: "MEditorUISelect"
-});
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
-  ...__default__$q,
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorUISelect"
+  },
+  __name: "UISelect",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -902,7 +1235,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$i
+            createTextVNode("取消")
           ]),
           _: 1
         }, 8, ["icon"])
@@ -912,7 +1245,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         onClick: startSelect,
         style: { "display": "flex" }
       }, [
-        unref(val) ? (openBlock(), createBlock(unref(TMagicTooltip), {
+        val.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 0,
           content: "清除"
         }, {
@@ -928,7 +1261,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           _: 1
         })) : createCommentVNode("", true),
         createVNode(unref(TMagicTooltip), {
-          content: unref(val) ? unref(toName) + "_" + unref(val) : "点击此处选择"
+          content: val.value ? toName.value + "_" + val.value : "点击此处选择"
         }, {
           default: withCtx(() => [
             createVNode(unref(TMagicButton), {
@@ -936,7 +1269,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               style: { "padding": "0", "margin": "0" }
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(val) ? unref(toName) + "_" + unref(val) : "点击此处选择"), 1)
+                createTextVNode(toDisplayString(val.value ? toName.value + "_" + val.value : "点击此处选择"), 1)
               ]),
               _: 1
             })
@@ -950,15 +1283,15 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const __default__$p = defineComponent({
-  name: "MEditorCodeEditor"
-});
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  ...__default__$p,
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeEditor"
+  },
+  __name: "CodeEditor",
   props: {
-    initValues: null,
-    modifiedValues: null,
-    type: null,
+    initValues: {},
+    modifiedValues: {},
+    type: {},
     language: { default: "javascript" },
     options: { default: () => ({
       tabSize: 2
@@ -966,15 +1299,19 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     autoSave: { type: Boolean, default: true }
   },
   emits: ["initd", "save"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const toString = (v, language) => {
       let value = "";
       if (typeof v !== "string") {
-        value = serialize(v, {
-          space: 2,
-          unsafe: true
-        }).replace(/"(\w+)":\s/g, "$1: ");
+        if (props.language.toLocaleLowerCase() === "json") {
+          value = JSON.stringify(v, null, 2);
+        } else {
+          value = serialize(v, {
+            space: 2,
+            unsafe: true
+          }).replace(/"(\w+)":\s/g, "$1: ");
+        }
       } else {
         value = v;
       }
@@ -1006,7 +1343,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
       return vsEditor?.setValue(values.value);
     };
-    const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+    const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
     const init = async () => {
       if (!codeEditor.value)
         return;
@@ -1028,12 +1365,18 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
           e.preventDefault();
           e.stopPropagation();
-          emit("save", getEditorValue());
+          const newValue = getEditorValue();
+          values.value = newValue;
+          emit("save", newValue);
         }
       });
       if (props.type !== "diff" && props.autoSave) {
         vsEditor?.onDidBlurEditorWidget(() => {
-          emit("save", getEditorValue());
+          const newValue = getEditorValue();
+          if (values.value !== newValue) {
+            values.value = newValue;
+            emit("save", newValue);
+          }
         });
       }
       resizeObserver.observe(codeEditor.value);
@@ -1057,10 +1400,17 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     onUnmounted(() => {
       resizeObserver.disconnect();
     });
-    expose({
+    __expose({
+      values,
       getEditor() {
         return vsEditor || vsDiffEditor;
       },
+      getVsEditor() {
+        return vsEditor;
+      },
+      getVsDiffEditor() {
+        return vsDiffEditor;
+      },
       setEditorValue,
       focus() {
         vsEditor?.focus();
@@ -1077,20 +1427,15 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-let $TMAGIC_EDITOR = {};
-const setConfig = (option) => {
-  $TMAGIC_EDITOR = option;
-};
-const getConfig = (key) => $TMAGIC_EDITOR[key];
-
-const __default__$o = defineComponent({
-  name: "MEditorResizer"
-});
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  ...__default__$o,
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorResizer"
+  },
+  __name: "Resizer",
   emits: ["change"],
   setup(__props, { emit }) {
     const target = ref();
+    const isDraging = ref(false);
     let getso;
     onMounted(() => {
       if (!target.value)
@@ -1102,37 +1447,42 @@ 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);
     };
   }
 });
 
-const __default__$n = defineComponent({
-  name: "MEditorLayout"
-});
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  ...__default__$n,
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorLayout"
+  },
+  __name: "SplitView",
   props: {
-    left: null,
-    right: null,
+    left: {},
+    right: {},
     minLeft: { default: 46 },
     minRight: { default: 1 },
     minCenter: { default: 5 },
-    leftClass: null,
-    rightClass: null,
-    centerClass: null
+    leftClass: {},
+    rightClass: {},
+    centerClass: {}
   },
   emits: ["update:left", "change", "update:right"],
   setup(__props, { emit }) {
@@ -1224,26 +1574,26 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ref: el,
         class: "m-editor-layout"
       }, [
-        unref(hasLeft) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        hasLeft.value && _ctx.$slots.left ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
-            style: normalizeStyle(`width: ${__props.left}px`)
+            class: normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
+            style: normalizeStyle(`width: ${_ctx.left}px`)
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$t, { onChange: changeLeft })
+          createVNode(_sfc_main$v, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
-          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
+          class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
           style: normalizeStyle(`width: ${center.value}px`)
         }, [
           renderSlot(_ctx.$slots, "center")
         ], 6),
-        unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$t, { onChange: changeRight }),
+        hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createVNode(_sfc_main$v, { onChange: changeRight }),
           createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
-            style: normalizeStyle(`width: ${__props.right}px`)
+            class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
+            style: normalizeStyle(`width: ${_ctx.right}px`)
           }, [
             renderSlot(_ctx.$slots, "right")
           ], 6)
@@ -1333,6 +1683,40 @@ const fillConfig$1 = (config = []) => [
                   }
                 ]
               },
+              {
+                type: "fieldset",
+                legend: "边框",
+                items: [
+                  {
+                    name: "borderWidth",
+                    text: "宽度",
+                    defaultValue: "0"
+                  },
+                  {
+                    name: "borderColor",
+                    text: "颜色",
+                    type: "colorPicker"
+                  },
+                  {
+                    name: "borderStyle",
+                    text: "样式",
+                    type: "select",
+                    defaultValue: "none",
+                    options: [
+                      { text: "none", value: "none" },
+                      { text: "hidden", value: "hidden" },
+                      { text: "dotted", value: "dotted" },
+                      { text: "dashed", value: "dashed" },
+                      { text: "solid", value: "solid" },
+                      { text: "double", value: "double" },
+                      { text: "groove", value: "groove" },
+                      { text: "ridge", value: "ridge" },
+                      { text: "inset", value: "inset" },
+                      { text: "outset", value: "outset" }
+                    ]
+                  }
+                ]
+              },
               {
                 type: "fieldset",
                 legend: "背景",
@@ -1492,6 +1876,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) => {
@@ -1938,8 +2344,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
@@ -1953,7 +2359,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 */:
@@ -1968,49 +2374,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
     };
   }
 }
@@ -3107,14 +3513,14 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _hoisted_1$h = { class: "m-editor-empty-panel" };
+const _hoisted_1$j = { class: "m-editor-empty-panel" };
 const _hoisted_2$a = { class: "m-editor-empty-content" };
 const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const __default__$m = defineComponent({
-  name: "MEditorAddPageBox"
-});
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorAddPageBox"
+  },
+  __name: "AddPageBox",
   setup(__props) {
     const services = inject("services");
     const clickHandler = () => {
@@ -3130,14 +3536,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         createElementVNode("div", _hoisted_2$a, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$A, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$E, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$5
           ])
@@ -3147,25 +3553,22 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = { class: "m-editor" };
-const __default__$l = defineComponent({
-  name: "MEditorFramework"
-});
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
-  props: {
-    codeOptions: { default: () => ({}) }
+const _hoisted_1$i = { class: "m-editor" };
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
+const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorFramework"
   },
+  __name: "Framework",
   setup(__props) {
-    const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-    const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+    const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
-    const nodes = computed(() => editorService?.get("nodes") || []);
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
-    const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
-    const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
     const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
     const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
     const columnWidth = ref({
@@ -3214,22 +3617,25 @@ 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) => {
-      const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
-        renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
-        unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
-          key: 0,
-          class: "m-editor-content",
-          "init-values": unref(root),
-          options: __props.codeOptions,
-          onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$s, {
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        renderSlot(_ctx.$slots, "header"),
+        renderSlot(_ctx.$slots, "nav"),
+        renderSlot(_ctx.$slots, "content-before"),
+        showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
+          createVNode(_sfc_main$w, {
+            class: "m-editor-content",
+            "init-values": root.value,
+            options: unref(codeOptions),
+            onSave: saveCode
+          }, null, 8, ["init-values", "options"])
+        ]) : (openBlock(), createBlock(_sfc_main$u, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -3247,13 +3653,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "sidebar")
           ]),
           center: withCtx(() => [
-            unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$r)
+            pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+              createVNode(_sfc_main$t)
             ])
           ]),
           _: 2
         }, [
-          unref(pageLength) > 0 && unref(nodes).length === 1 ? {
+          pageLength.value > 0 ? {
             name: "right",
             fn: withCtx(() => [
               createVNode(unref(TMagicScrollbar), null, {
@@ -3262,24 +3668,27 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 3
               })
-            ])
+            ]),
+            key: "0"
           } : void 0
-        ]), 1032, ["left", "right"]))
+        ]), 1032, ["left", "right"])),
+        renderSlot(_ctx.$slots, "content-after"),
+        renderSlot(_ctx.$slots, "footer")
       ]);
     };
   }
 });
 
-const _hoisted_1$f = {
+const _hoisted_1$h = {
   key: 1,
   class: "menu-item-text"
 };
 const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-const __default__$k = defineComponent({
-  name: "MEditorToolButton"
-});
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorToolButton"
+  },
+  __name: "ToolButton",
   props: {
     data: { default: () => ({
       type: "text",
@@ -3344,35 +3753,35 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return unref(display) ? (openBlock(), createElementBlock("div", {
+      return display.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
-        onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(__props.data, $event)),
-        onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
-        onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(__props.data, $event))
+        class: normalizeClass(["menu-item", `${_ctx.data.type} ${_ctx.data.className || ""}`]),
+        onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(_ctx.data, $event)),
+        onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(_ctx.data, $event)),
+        onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(_ctx.data, $event))
       }, [
-        __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
+        _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
-          direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
+          direction: _ctx.data.direction || "vertical"
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$h, 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",
             placement: "bottom-start",
-            content: __props.data.tooltip
+            content: _ctx.data.tooltip
           }, {
             default: withCtx(() => [
               createVNode(unref(TMagicButton), {
                 size: "small",
                 text: "",
-                disabled: unref(disabled)
+                disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$A, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$E, {
                     key: 0,
-                    icon: __props.data.icon
+                    icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  createElementVNode("span", null, toDisplayString(__props.data.text), 1)
+                  createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
                 ]),
                 _: 1
               }, 8, ["disabled"])
@@ -3382,30 +3791,30 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             key: 1,
             size: "small",
             text: "",
-            disabled: unref(disabled)
+            disabled: disabled.value
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$A, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$E, {
                 key: 0,
-                icon: __props.data.icon
+                icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              createElementVNode("span", null, toDisplayString(__props.data.text), 1)
+              createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
             ]),
             _: 1
           }, 8, ["disabled"]))
-        ], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
+        ], 64)) : _ctx.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
           key: 3,
           trigger: "click",
-          disabled: unref(disabled),
+          disabled: disabled.value,
           onCommand: dropdownHandler
         }, {
           dropdown: withCtx(() => [
-            __props.data.items && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
+            _ctx.data.items && _ctx.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (subItem, index) => {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (subItem, index) => {
                   return openBlock(), createBlock(unref(TMagicDropdownItem), {
                     key: index,
-                    command: { data: __props.data, subItem }
+                    command: { data: _ctx.data, subItem }
                   }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(subItem.text), 1)
@@ -3419,7 +3828,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             createElementVNode("span", _hoisted_2$9, [
-              createTextVNode(toDisplayString(__props.data.text), 1),
+              createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
                   createVNode(unref(ArrowDown))
@@ -3429,17 +3838,17 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        }, 8, ["disabled"])) : __props.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(__props.data.component), normalizeProps(mergeProps({ key: 4 }, __props.data.props || {})), null, 16)) : createCommentVNode("", true)
+        }, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component), normalizeProps(mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : createCommentVNode("", true)
       ], 34)) : createCommentVNode("", true);
     };
   }
 });
 
-const __default__$j = defineComponent({
-  name: "MEditorNavMenu"
-});
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorNavMenu"
+  },
+  __name: "NavMenu",
   props: {
     data: { default: () => ({}) },
     height: { default: 35 }
@@ -3588,16 +3997,16 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "m-editor-nav-menu",
-        style: normalizeStyle({ height: `${__props.height}px` })
+        style: normalizeStyle({ height: `${_ctx.height}px` })
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (key) => {
           return openBlock(), createElementBlock("div", {
             class: normalizeClass(`menu-${key}`),
             key,
-            style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
+            style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$p, {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
+              return openBlock(), createBlock(_sfc_main$r, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -3609,20 +4018,24 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = { class: "m-editor-props-panel" };
-const __default__$i = defineComponent({
-  name: "MEditorPropsPanel"
-});
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+const _hoisted_1$g = { class: "m-editor-props-panel" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorPropsPanel"
+  },
+  __name: "PropsPanel",
+  props: {
+    extendState: { type: Function }
+  },
   emits: ["mounted"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const internalInstance = getCurrentInstance();
     const values = ref({});
     const configForm = ref();
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
+    const nodes = computed(() => services?.editorService.get("nodes") || []);
     const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
@@ -3657,26 +4070,32 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         tMagicMessage.error(e.message);
       }
     };
-    expose({ submit });
+    __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$g, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
           ref: configForm,
-          class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
-          "popper-class": `m-editor-props-panel-popper ${unref(propsPanelSize)}`,
-          size: unref(propsPanelSize),
+          class: normalizeClass(`m-editor-props-panel ${propsPanelSize.value}`),
+          "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
+          size: propsPanelSize.value,
           "init-values": values.value,
           config: curFormConfig.value,
+          "extend-state": _ctx.extendState,
           onChange: submit
-        }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
+        }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"])
+      ], 512)), [
+        [vShow, nodes.value.length === 1]
       ]);
     };
   }
 });
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorSearchInput"
+  },
   __name: "SearchInput",
   emits: ["search"],
   setup(__props, { emit }) {
@@ -3708,80 +4127,77 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-const _sfc_main$l = {};
-
-const _hoisted_1$d = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$8 = /*#__PURE__*/createElementVNode("g", {
+const _hoisted_1$f = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
-  /*#__PURE__*/createElementVNode("path", {
+  /* @__PURE__ */ createElementVNode("path", {
     d: "M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z",
     "fill-rule": "nonzero"
   }),
-  /*#__PURE__*/createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
+  /* @__PURE__ */ createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
 ], -1);
 const _hoisted_3$4 = [
   _hoisted_2$8
 ];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorAppManageIcon"
+  },
+  __name: "AppManageIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$f, _hoisted_3$4);
+    };
+  }
+});
 
-function _sfc_render$2(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_3$4))
-}
-const AppManageIcon = /*#__PURE__*/_export_sfc(_sfc_main$l, [['render',_sfc_render$2]]);
-
-const _sfc_main$k = {};
-
-const _hoisted_1$c = {
+const _hoisted_1$e = {
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _hoisted_2$7 = /*#__PURE__*/createStaticVNode("<defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 2);
+const _hoisted_2$7 = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
 const _hoisted_4$4 = [
   _hoisted_2$7
 ];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeIcon"
+  },
+  __name: "CodeIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$e, _hoisted_4$4);
+    };
+  }
+});
 
-function _sfc_render$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_4$4))
-}
-const CodeIcon = /*#__PURE__*/_export_sfc(_sfc_main$k, [['render',_sfc_render$1]]);
-
-const _hoisted_1$b = {
+const _hoisted_1$d = {
   key: 0,
   class: "m-editor-content-bottom"
 };
-const _hoisted_2$6 = /* @__PURE__ */ createTextVNode("确认");
-const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("关闭");
-const _hoisted_4$3 = {
+const _hoisted_2$6 = {
   key: 1,
   class: "m-editor-content-bottom"
 };
-const _hoisted_5$2 = /* @__PURE__ */ createTextVNode("关闭");
-const __default__$h = defineComponent({
-  name: "MEditorCodeDraftEditor"
-});
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeDraftEditor"
+  },
+  __name: "CodeDraftEditor",
   props: {
-    id: null,
-    content: null,
+    id: {},
+    content: {},
     editable: { type: Boolean, default: true },
     autoSaveDraft: { type: Boolean, default: true },
-    codeOptions: null,
-    language: null
+    codeOptions: {},
+    language: {}
   },
   emits: ["close", "saveAndClose"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const services = inject("services");
     const codeContent = ref("");
@@ -3846,7 +4262,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         codeEditor.value.focus();
       }
     };
-    expose({
+    __expose({
       saveAndClose,
       close
     });
@@ -3854,16 +4270,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
       }, [
-        createVNode(_sfc_main$u, {
+        createVNode(_sfc_main$w, {
           ref_key: "codeEditor",
           ref: codeEditor,
           class: "m-editor-container",
           "init-values": `${codeContent.value}`,
           onSave: saveCodeDraft,
-          language: __props.language,
-          options: unref(codeOptions)
+          language: _ctx.language,
+          options: codeOptions.value
         }, null, 8, ["init-values", "language", "options"]),
-        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -3880,7 +4296,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onClick: saveAndClose
           }, {
             default: withCtx(() => [
-              _hoisted_2$6
+              createTextVNode("确认")
             ]),
             _: 1
           }),
@@ -3889,11 +4305,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_3$3
+              createTextVNode("关闭")
             ]),
             _: 1
           })
-        ])) : (openBlock(), createElementBlock("div", _hoisted_4$3, [
+        ])) : (openBlock(), createElementBlock("div", _hoisted_2$6, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -3909,7 +4325,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_5$2
+              createTextVNode("关闭")
             ]),
             _: 1
           })
@@ -3919,26 +4335,27 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "code-name-wrapper" };
+const _hoisted_1$c = { class: "code-name-wrapper" };
 const _hoisted_2$5 = /* @__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);
-const __default__$g = defineComponent({
-  name: "MEditorFunctionEditor"
-});
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+const _hoisted_3$3 = { class: "code-name-wrapper" };
+const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorFunctionEditor"
+  },
+  __name: "FunctionEditor",
   props: {
-    id: null,
-    name: null,
-    content: null,
+    id: {},
+    name: {},
+    content: {},
     editable: { type: Boolean, default: true },
     autoSaveDraft: { type: Boolean, default: true },
-    codeOptions: null,
-    paramsColConfig: null
+    codeOptions: {},
+    paramsColConfig: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
+    provide("mForm", null);
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -4007,29 +4424,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();
       }
@@ -4038,24 +4455,24 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       services?.codeBlockService.setCodeEditorShowStatus(false);
     };
     const codeDraftEditor = ref();
-    expose({
+    __expose({
       codeDraftEditor
     });
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
+          createElementVNode("div", _hoisted_1$c, [
             _hoisted_2$5,
             createVNode(unref(TMagicInput), {
               class: "code-name-input",
               modelValue: codeName.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeName.value = $event),
-              disabled: !__props.editable
+              disabled: !_ctx.editable
             }, null, 8, ["modelValue", "disabled"])
           ]),
-          createElementVNode("div", _hoisted_3$2, [
-            _hoisted_4$2,
+          createElementVNode("div", _hoisted_3$3, [
+            _hoisted_4$3,
             createVNode(_component_m_form_table, {
               style: { "width": "800px" },
               config: tableConfig,
@@ -4068,14 +4485,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          createVNode(_sfc_main$j, {
+          createVNode(_sfc_main$l, {
             ref_key: "codeDraftEditor",
             ref: codeDraftEditor,
-            id: __props.id,
+            id: _ctx.id,
             content: codeContent.value,
-            editable: __props.editable,
-            autoSaveDraft: __props.autoSaveDraft,
-            codeOptions: __props.codeOptions,
+            editable: _ctx.editable,
+            autoSaveDraft: _ctx.autoSaveDraft,
+            codeOptions: _ctx.codeOptions,
             language: "javascript",
             onSaveAndClose: saveAndClose,
             onClose: close
@@ -4087,17 +4504,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = {
+const _hoisted_1$b = {
   key: 0,
   class: "m-editor-code-block-editor-panel"
 };
-const __default__$f = defineComponent({
-  name: "MEditorCodeBlockEditor"
-});
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeBlockEditor"
+  },
+  __name: "CodeBlockEditor",
   props: {
-    paramsColConfig: null
+    paramsColConfig: {}
   },
   setup(__props) {
     const services = inject("services");
@@ -4144,28 +4561,28 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         "append-to-body": true,
         "show-close": false,
         "close-on-click-modal": true,
-        size: unref(size),
+        size: size.value,
         "before-close": handleClose
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$s, {
+          createVNode(_sfc_main$u, {
             left: left.value,
             "onUpdate:left": _cache[0] || (_cache[0] = ($event) => left.value = $event),
             "min-left": 45,
             class: "code-editor-layout"
           }, {
             center: withCtx(() => [
-              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
-                renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
-                codeConfig.value ? (openBlock(), createBlock(_sfc_main$i, {
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+                renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
+                codeConfig.value ? (openBlock(), createBlock(_sfc_main$k, {
                   key: 0,
                   ref_key: "functionEditor",
                   ref: functionEditor,
-                  id: unref(id),
+                  id: id.value,
                   name: codeConfig.value.name,
                   content: codeConfig.value.content,
-                  paramsColConfig: __props.paramsColConfig,
-                  editable: !!unref(editable),
+                  paramsColConfig: _ctx.paramsColConfig,
+                  editable: !!editable.value,
                   autoSaveDraft: true,
                   codeOptions: unref(codeOptions)
                 }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : createCommentVNode("", true)
@@ -4180,22 +4597,21 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { class: "search-wrapper" };
-const _hoisted_2$4 = /* @__PURE__ */ createTextVNode("新增");
-const _hoisted_3$1 = ["id"];
-const _hoisted_4$1 = { class: "list-item" };
-const _hoisted_5$1 = {
+const _hoisted_1$a = { class: "search-wrapper" };
+const _hoisted_2$4 = ["id"];
+const _hoisted_3$2 = { class: "list-item" };
+const _hoisted_4$2 = {
   key: 2,
   class: "right-tool"
 };
-const __default__$e = defineComponent({
-  name: "MEditorCodeBlockList"
-});
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeBlockList"
+  },
+  __name: "CodeBlockList",
   props: {
-    customError: null,
-    paramsColConfig: null
+    customError: { type: Function },
+    paramsColConfig: {}
   },
   setup(__props) {
     const props = __props;
@@ -4284,9 +4700,9 @@ 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$8, [
-              createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-              unref(editable) ? (openBlock(), createBlock(unref(TMagicButton), {
+            createElementVNode("div", _hoisted_1$a, [
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
                 type: "primary",
@@ -4294,7 +4710,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 onClick: createCodeBlock
               }, {
                 default: withCtx(() => [
-                  _hoisted_2$4
+                  createTextVNode("新增")
                 ]),
                 _: 1
               })) : createCommentVNode("", true)
@@ -4306,9 +4722,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             class: "magic-editor-layer-tree",
             "node-key": "id",
             "empty-text": "暂无代码块",
-            "default-expanded-keys": unref(expandedKeys),
+            "default-expanded-keys": expandedKeys.value,
             "expand-on-click-node": false,
-            data: unref(codeList),
+            data: codeList.value,
             props: treeProps,
             "highlight-current": true,
             "filter-node-method": filterNode,
@@ -4319,41 +4735,41 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 id: data.id,
                 class: "list-container"
               }, [
-                createElementVNode("div", _hoisted_4$1, [
-                  data.type === "code" ? (openBlock(), createBlock(CodeIcon, {
+                createElementVNode("div", _hoisted_3$2, [
+                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$m, {
                     key: 0,
                     class: "codeIcon"
                   })) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(AppManageIcon, {
+                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$n, {
                     key: 1,
                     class: "compIcon"
                   })) : createCommentVNode("", true),
                   createElementVNode("span", {
                     class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                   }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
-                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
                     createVNode(unref(TMagicTooltip), {
                       effect: "dark",
-                      content: unref(editable) ? "编辑" : "查看",
+                      content: editable.value ? "编辑" : "查看",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
-                          icon: unref(editable) ? unref(Edit) : unref(View),
+                        createVNode(_sfc_main$E, {
+                          icon: editable.value ? unref(Edit) : unref(View),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
                         }, null, 8, ["icon", "onClick"])
                       ]),
                       _: 2
                     }, 1032, ["content"]),
-                    unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                    editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
                       key: 0,
                       effect: "dark",
                       content: "删除",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
+                        createVNode(_sfc_main$E, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4367,13 +4783,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     })
                   ])) : createCommentVNode("", true)
                 ])
-              ], 8, _hoisted_3$1)
+              ], 8, _hoisted_2$4)
             ]),
             _: 3
           }, 8, ["default-expanded-keys", "data"]),
-          unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$h, {
+          isShowCodeBlockEditor.value ? (openBlock(), createBlock(_sfc_main$j, {
             key: 0,
-            paramsColConfig: __props.paramsColConfig
+            paramsColConfig: _ctx.paramsColConfig
           }, {
             "code-block-edit-panel-header": withCtx(({ id }) => [
               renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
@@ -4387,16 +4803,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = /* @__PURE__ */ createTextVNode("确定");
-const _hoisted_2$3 = /* @__PURE__ */ createTextVNode("关闭");
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceConfigPanel"
+  },
   __name: "DataSourceConfigPanel",
   props: {
-    title: null,
-    values: null
+    title: {},
+    values: {}
   },
   emits: ["submit"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const type = ref("base");
     const services = inject("services");
@@ -4427,7 +4844,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const hide = () => {
       visible.value = false;
     };
-    expose({
+    __expose({
       show() {
         visible.value = true;
       },
@@ -4437,12 +4854,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicDrawer), {
         modelValue: visible.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
-        title: __props.title,
+        title: _ctx.title,
         "close-on-press-escape": true,
         "append-to-body": true,
         "show-close": true,
         "close-on-click-modal": true,
-        size: unref(size)
+        size: size.value
       }, {
         footer: withCtx(() => [
           createElementVNode("div", null, [
@@ -4451,13 +4868,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               onClick: submitHandler
             }, {
               default: withCtx(() => [
-                _hoisted_1$7
+                createTextVNode("确定")
               ]),
               _: 1
             }),
             createVNode(unref(TMagicButton), { onClick: hide }, {
               default: withCtx(() => [
-                _hoisted_2$3
+                createTextVNode("关闭")
               ]),
               _: 1
             })
@@ -4467,7 +4884,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           createVNode(unref(MForm), {
             ref_key: "form",
             ref: form,
-            config: unref(dataSourceConfig),
+            config: dataSourceConfig.value,
             "init-values": initValues.value,
             onChange: changeHandler
           }, null, 8, ["config", "init-values"])
@@ -4478,22 +4895,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = { class: "search-wrapper" };
-const _hoisted_2$2 = /* @__PURE__ */ createTextVNode("新增");
-const _hoisted_3 = ["id"];
-const _hoisted_4 = { class: "list-item" };
-const _hoisted_5 = {
+const _hoisted_1$9 = { class: "search-wrapper" };
+const _hoisted_2$3 = ["id"];
+const _hoisted_3$1 = { class: "list-item" };
+const _hoisted_4$1 = {
   key: 2,
   class: "right-tool"
 };
-const __default__$d = defineComponent({
-  name: "MEditorDataSourceListPanel"
-});
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceListPanel"
+  },
+  __name: "DataSourceListPanel",
   setup(__props) {
     const services = inject("services", {});
-    const { dataSourceService, depService } = inject("services") || {};
+    const { dataSourceService, depService, editorService } = inject("services") || {};
     const list = computed(
       () => Object.values(depService?.targets["data-source"] || {}).map((target) => ({
         id: target.id,
@@ -4545,18 +4961,30 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const filterTextChangeHandler = (val) => {
       tree.value?.filter(val);
     };
+    const selectComp = (compId) => {
+      const stage = editorService?.get("stage");
+      editorService?.select(compId);
+      stage?.select(compId);
+    };
+    const clickHandler = (data, node) => {
+      if (data.type === "node") {
+        selectComp(data.id);
+      } else if (data.type === "key") {
+        selectComp(node.parent.data.id);
+      }
+    };
     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, [
-            createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+          createElementVNode("div", _hoisted_1$9, [
+            createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
             createVNode(unref(TMagicButton), {
               type: "primary",
               size: "small",
               onClick: addHandler
             }, {
               default: withCtx(() => [
-                _hoisted_2$2
+                createTextVNode("新增")
               ]),
               _: 1
             })
@@ -4569,21 +4997,22 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             "empty-text": "暂无代码块",
             "default-expand-all": "",
             "expand-on-click-node": false,
-            data: unref(list),
-            "highlight-current": true
+            data: list.value,
+            "highlight-current": true,
+            onNodeClick: clickHandler
           }, {
             default: withCtx(({ data }) => [
               createElementVNode("div", {
                 id: data.id,
                 class: "list-container"
               }, [
-                createElementVNode("div", _hoisted_4, [
-                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$A, {
+                createElementVNode("div", _hoisted_3$1, [
+                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$E, {
                     key: 0,
                     class: "codeIcon",
                     icon: unref(Coin)
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$A, {
+                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$E, {
                     key: 1,
                     class: "compIcon",
                     icon: unref(Aim)
@@ -4591,14 +5020,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   createElementVNode("span", {
                     class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                   }, toDisplayString(data.name) + "（" + toDisplayString(data.id) + "）", 3),
-                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
                     createVNode(unref(TMagicTooltip), {
                       effect: "dark",
                       content: "编辑",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
+                        createVNode(_sfc_main$E, {
                           class: "edit-icon",
                           icon: unref(Edit),
                           onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -4612,7 +5041,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
+                        createVNode(_sfc_main$E, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -4626,11 +5055,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     })
                   ])) : createCommentVNode("", true)
                 ])
-              ], 8, _hoisted_3)
+              ], 8, _hoisted_2$3)
             ]),
             _: 3
           }, 8, ["data"]),
-          createVNode(_sfc_main$f, {
+          createVNode(_sfc_main$h, {
             ref_key: "editDialog",
             ref: editDialog,
             values: dataSourceValues.value,
@@ -4644,12 +5073,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = ["onClick", "onDragstart"];
-const __default__$c = defineComponent({
-  name: "MEditorComponentListPanel"
-});
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+const _hoisted_1$8 = ["onClick", "onDragstart"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorComponentListPanel"
+  },
+  __name: "ComponentListPanel",
   setup(__props) {
     const searchText = ref("");
     const filterTextChangeHandler = (v) => {
@@ -4679,14 +5108,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     const dragstartHandler = ({ text, type, data = {} }, e) => {
       if (e.dataTransfer) {
-        e.dataTransfer.effectAllowed = "move";
         e.dataTransfer.setData(
-          "data",
+          "text/html",
           serialize({
             name: text,
             type,
             ...data
-          }).replace(/"(\w+)":\s/g, "$1: ")
+          })
         );
       }
     };
@@ -4714,7 +5142,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
       if (timeout || !stage.value)
         return;
-      timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+      timeout = stage.value.delayedMarkContainer(e);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), null, {
@@ -4722,18 +5150,18 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "component-list-panel-header"),
           createVNode(unref(TMagicCollapse), {
             class: "ui-component-panel",
-            "model-value": unref(collapseValue)
+            "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
+              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
                     key: index,
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$A, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$E, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -4748,7 +5176,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$A, {
+                            createVNode(_sfc_main$E, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -4762,7 +5190,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               _: 2
                             }, 1032, ["content"])
                           ])
-                        ], 40, _hoisted_1$5);
+                        ], 40, _hoisted_1$8);
                       }), 128))
                     ]),
                     _: 2
@@ -4779,19 +5207,20 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$b = defineComponent({
-  name: "MEditorContentMenu"
-});
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorContentMenu"
+  },
+  __name: "ContentMenu",
   props: {
     menuData: { default: () => [] },
     isSubMenu: { type: Boolean, default: false }
   },
   emits: ["hide", "show"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const menu = ref();
+    const buttons = ref();
     const subMenu = ref();
     const visible = ref(false);
     const subMenuData = ref([]);
@@ -4799,6 +5228,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;
@@ -4811,7 +5241,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();
@@ -4833,18 +5263,25 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         });
       }, 300);
     };
-    const showSubMenu = (item) => {
+    const showSubMenu = (item, index) => {
       const menuItem = item;
       if (typeof item !== "object" || !menuItem.items?.length) {
         return;
       }
-      subMenuData.value = menuItem.items;
-      if (menu.value) {
-        subMenu.value.show({
-          clientX: menu.value.offsetLeft + menu.value.clientWidth,
-          clientY: menu.value.offsetTop
-        });
-      }
+      subMenuData.value = menuItem.items || [];
+      setTimeout(() => {
+        if (menu.value) {
+          let y = menu.value.offsetTop;
+          if (buttons.value?.[index].$el) {
+            const rect = buttons.value?.[index].$el.getBoundingClientRect();
+            y = rect.top;
+          }
+          subMenu.value?.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth,
+            clientY: y
+          });
+        }
+      }, 0);
     };
     onMounted(() => {
       if (props.isSubMenu)
@@ -4856,13 +5293,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         return;
       globalThis.removeEventListener("mousedown", hideHandler, true);
     });
-    expose({
+    __expose({
+      menu,
       hide,
-      show
+      show,
+      contains
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
-      return __props.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
+      return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: "magic-editor-content-menu",
         ref_key: "menu",
@@ -4870,25 +5309,29 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(menuStyle.value)
       }, [
         createElementVNode("div", null, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$p, {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
+            return openBlock(), createBlock(_sfc_main$r, {
               "event-type": "mouseup",
+              ref_for: true,
+              ref_key: "buttons",
+              ref: buttons,
               data: item,
               key: index,
               onMouseup: hide,
-              onMouseenter: ($event) => showSubMenu(item)
+              onMouseenter: ($event) => showSubMenu(item, index)
             }, null, 8, ["data", "onMouseenter"]);
           }), 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]
@@ -4897,21 +5340,95 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$a = defineComponent({
-  name: "MEditorLayerMenu"
+const useDeleteMenu = () => ({
+  type: "button",
+  text: "删除",
+  icon: Delete,
+  display: (services) => {
+    const node = services?.editorService?.get("node");
+    return node?.type !== NodeType.ROOT && !isPage(node);
+  },
+  handler: (services) => {
+    const nodes = services?.editorService?.get("nodes");
+    nodes && services?.editorService?.remove(nodes);
+  }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+const canPaste = ref(false);
+const useCopyMenu = () => ({
+  type: "button",
+  text: "复制",
+  icon: markRaw(CopyDocument),
+  handler: (services) => {
+    const nodes = services?.editorService?.get("nodes");
+    nodes && services?.editorService?.copy(nodes);
+    canPaste.value = true;
+  }
+});
+const usePasteMenu = (menu) => ({
+  type: "button",
+  text: "粘贴",
+  icon: markRaw(DocumentCopy),
+  display: () => canPaste.value,
+  handler: (services) => {
+    const nodes = services?.editorService?.get("nodes");
+    if (!nodes || nodes.length === 0)
+      return;
+    if (menu?.value?.$el) {
+      const stage = services?.editorService?.get("stage");
+      const rect = menu.value.$el.getBoundingClientRect();
+      const parentRect = stage?.container?.getBoundingClientRect();
+      const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
+      const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+      services?.editorService?.paste({ left: initialLeft, top: initialTop });
+    } else {
+      services?.editorService?.paste();
+    }
+  }
+});
+const moveTo = (id, services) => {
+  if (!services?.editorService)
+    return;
+  const nodes = services.editorService.get("nodes") || [];
+  const parent = services.editorService.getNodeById(id);
+  if (!parent)
+    return;
+  services?.editorService.add(nodes, parent);
+  services?.editorService.remove(nodes);
+};
+const useMoveToMenu = (services) => {
+  const root = computed(() => services?.editorService?.get("root"));
+  return {
+    type: "button",
+    text: "移动至",
+    display: (services2) => {
+      const node = services2?.editorService?.get("node");
+      const pageLength = services2?.editorService?.get("pageLength") || 0;
+      return !isPage(node) && pageLength > 1;
+    },
+    items: (root.value?.items || []).filter((page) => page.id !== services?.editorService?.get("page")?.id).map((page) => ({
+      text: `${page.name}(${page.id})`,
+      type: "button",
+      handler: (services2) => {
+        moveTo(page.id, services2);
+      }
+    }))
+  };
+};
+
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorLayerMenu"
+  },
+  __name: "LayerMenu",
   props: {
-    layerContentMenu: null
+    layerContentMenu: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
-    const isRoot = computed(() => node.value?.type === NodeType.ROOT);
-    const isPage = computed(() => node.value?.type === NodeType.PAGE);
+    const nodes = computed(() => services?.editorService.get("nodes"));
     const componentList = computed(() => services?.componentListService.getList() || []);
     const createMenuItems = (group) => group.items.map((component) => ({
       text: component.text,
@@ -4961,38 +5478,24 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         type: "button",
         text: "新增",
         icon: markRaw(Plus),
-        display: () => node.value?.items,
+        display: () => node.value?.items && nodes.value?.length === 1,
         items: getSubMenuData.value
       },
-      {
-        type: "button",
-        text: "复制",
-        icon: markRaw(CopyDocument),
-        display: () => !isRoot.value,
-        handler: () => {
-          node.value && services?.editorService.copy(node.value);
-        }
-      },
-      {
-        type: "button",
-        text: "删除",
-        icon: markRaw(Delete),
-        display: () => !isRoot.value && !isPage.value,
-        handler: () => {
-          node.value && services?.editorService.remove(node.value);
-        }
-      },
+      useCopyMenu(),
+      usePasteMenu(),
+      useDeleteMenu(),
+      useMoveToMenu(services),
       ...props.layerContentMenu
     ]);
     const show = (e) => {
       menu.value?.show(e);
     };
-    expose({
+    __expose({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        "menu-data": unref(menuData),
+      return openBlock(), createBlock(_sfc_main$e, {
+        "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
         style: { "overflow": "initial" }
@@ -5001,19 +5504,71 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["id", "onMouseenter"];
-const __default__$9 = defineComponent({
-  name: "MEditorLayerPanel"
+const _hoisted_1$7 = { class: "layer-node-tool" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "LayerNode",
+  props: {
+    data: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const setNodeVisible = (visible) => {
+      if (!editorService)
+        return;
+      editorService.update({
+        id: props.data.id,
+        visible
+      });
+    };
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", null, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
+        createElementVNode("div", _hoisted_1$7, [
+          _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            _ctx.data.visible === false ? (openBlock(), createBlock(_component_el_icon, {
+              key: 0,
+              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
+              title: "点击显示"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(Hide))
+              ]),
+              _: 1
+            })) : (openBlock(), createBlock(_component_el_icon, {
+              key: 1,
+              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
+              class: "node-lock",
+              title: "点击隐藏"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(View))
+              ]),
+              _: 1
+            }))
+          ], 64)) : createCommentVNode("", true)
+        ])
+      ], 64);
+    };
+  }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+
+const _hoisted_1$6 = ["id", "onMouseenter"];
+const throttleTime = 150;
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorLayerPanel"
+  },
+  __name: "LayerPanel",
   props: {
-    layerContentMenu: null
+    layerContentMenu: {}
   },
   setup(__props) {
-    const throttleTime = 150;
     const services = inject("services");
     const editorService = services?.editorService;
+    const keybindingService = services?.keybindingService;
     const tree = ref();
     const menu = ref();
     const checkedKeys = ref([]);
@@ -5147,25 +5702,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);
     });
@@ -5197,33 +5786,36 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
     const contextmenu = async (event, data) => {
       event.preventDefault();
-      await select(data);
+      if (nodes.value.length < 2) {
+        await select(data);
+      }
       menu.value?.show(event);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-          unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
+          createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+          values.value.length ? (openBlock(), createBlock(unref(TMagicTree), {
             key: 0,
             class: "magic-editor-layer-tree",
             ref_key: "tree",
             ref: tree,
             "node-key": "id",
             "empty-text": "页面空荡荡的",
+            tabindex: "-1",
             draggable: "",
             "default-expanded-keys": expandedKeys.value,
             "default-checked-keys": checkedKeys.value,
             "current-node-key": currentNodeKey.value,
-            data: unref(values),
+            data: values.value,
             "expand-on-click-node": false,
-            "highlight-current": !unref(isMultiSelect),
+            "highlight-current": !isMultiSelect.value,
             "check-on-click-node": true,
             props: treeProps,
             "filter-node-method": filterNode,
             "allow-drop": allowDrop,
-            "show-checkbox": unref(isMultiSelect),
+            "show-checkbox": isMultiSelect.value,
             onNodeClick: clickHandler,
             onNodeContextmenu: contextmenu,
             onNodeDragEnd: handleDragEnd,
@@ -5243,17 +5835,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   node,
                   data
                 }, () => [
-                  createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+                  createVNode(_sfc_main$c, { data }, null, 8, ["data"])
                 ])
-              ], 40, _hoisted_1$4)
+              ], 40, _hoisted_1$6)
             ]),
             _: 3
           }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$b, {
+            createVNode(_sfc_main$d, {
               ref_key: "menu",
               ref: menu,
-              "layer-content-menu": __props.layerContentMenu
+              "layer-content-menu": _ctx.layerContentMenu
             }, null, 8, ["layer-content-menu"])
           ]))
         ]),
@@ -5263,23 +5855,23 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$5 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-const __default__$8 = defineComponent({
-  name: "MEditorSidebar"
-});
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorSidebar"
+  },
+  __name: "Sidebar",
   props: {
     data: { default: () => ({ type: "tabs", status: "组件", items: ["component-list", "layer", "code-block", "data-source"] }) },
-    layerContentMenu: null
+    layerContentMenu: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
-    const tabPaneComponent = getConfig$1("components").tabPane;
-    const tabsComponent = getConfig$1("components").tabs;
+    const tabPaneComponent = getConfig$1("components")?.tabPane;
+    const tabsComponent = getConfig$1("components")?.tabs;
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -5288,7 +5880,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$d,
+          component: _sfc_main$f,
           slots: {}
         },
         layer: {
@@ -5299,7 +5891,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           props: {
             layerContentMenu: props.layerContentMenu
           },
-          component: _sfc_main$a,
+          component: _sfc_main$b,
           slots: {}
         },
         "code-block": {
@@ -5307,7 +5899,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$g,
+          component: _sfc_main$i,
           slots: {}
         },
         "data-source": {
@@ -5315,7 +5907,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$e,
+          component: _sfc_main$g,
           slots: {}
         }
       };
@@ -5328,30 +5920,30 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         activeTabName.value = status || "0";
       }
     );
-    expose({
+    __expose({
       activeTabName
     });
     return (_ctx, _cache) => {
-      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent).component), mergeProps({
+      return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent)?.component || "el-tabs"), mergeProps({
         key: 0,
         modelValue: activeTabName.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
         class: "m-editor-sidebar tmagic-design-tabs"
-      }, unref(tabsComponent).props({ type: "card", tabPosition: "left" })), {
+      }, unref(tabsComponent)?.props({ type: "card", tabPosition: "left" }) || {}), {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
-            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent).component), mergeProps(unref(tabPaneComponent).props({ name: config.text }), {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps(unref(tabPaneComponent)?.props({ name: config.text, lazy: config.lazy }) || {}, {
               key: config.$key || index
             }), {
               label: withCtx(() => [
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$A, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$E, {
                     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$5, toDisplayString(config.text), 1)) : createCommentVNode("", true)
                 ]))
               ]),
               default: withCtx(() => [
@@ -5360,7 +5952,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     name: "component-list-panel-header",
                     fn: withCtx(() => [
                       config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "0"
                   } : void 0,
                   config.$key === "component-list" || config.slots?.componentListItem ? {
                     name: "component-list-item",
@@ -5372,19 +5965,22 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         key: 1,
                         component
                       }, null, 8, ["component"])) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "1"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerPanelHeader ? {
                     name: "layer-panel-header",
                     fn: withCtx(() => [
                       config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "2"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
                     name: "code-block-panel-header",
                     fn: withCtx(() => [
                       config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "3"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
                     name: "code-block-panel-tool",
@@ -5394,7 +5990,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         id,
                         data
                       }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "4"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
                     name: "code-block-edit-panel-header",
@@ -5403,7 +6000,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         key: 0,
                         id
                       }) : config.slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "5"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeContent ? {
                     name: "layer-node-content",
@@ -5417,7 +6015,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         data: nodeData,
                         node
                       }, null, 8, ["data", "node"])) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "6"
                   } : void 0
                 ]), 1040)) : createCommentVNode("", true)
               ]),
@@ -5431,16 +6030,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$4 = {
   key: 0,
   class: "m-editor-breadcrumb"
 };
-const _hoisted_2$1 = { key: 0 };
-const __default__$7 = defineComponent({
-  name: "MEditorBreadcrumb"
-});
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+const _hoisted_2$2 = { key: 0 };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorBreadcrumb"
+  },
+  __name: "Breadcrumb",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -5453,14 +6052,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       editorService?.get("stage")?.select(node2.id);
     };
     return (_ctx, _cache) => {
-      return unref(nodes).length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(path), (item, index) => {
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: item.id
           }, [
             createVNode(unref(TMagicButton), {
               text: "",
-              disabled: item.id === unref(node)?.id,
+              disabled: item.id === node.value?.id,
               onClick: ($event) => select(item)
             }, {
               default: withCtx(() => [
@@ -5468,7 +6067,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, 1032, ["disabled", "onClick"]),
-            index < unref(path).length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
+            index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$2, "/")) : createCommentVNode("", true)
           ], 64);
         }), 128))
       ])) : createCommentVNode("", true);
@@ -5476,15 +6075,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1$3 = {
   key: 1,
   style: { "width": "21px" }
 };
-const __default__$6 = defineComponent({
-  name: "MEditorPageBarScrollContainer"
-});
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorPageBarScrollContainer"
+  },
+  __name: "PageBarScrollContainer",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -5562,22 +6161,22 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         ref_key: "pageBar",
         ref: pageBar
       }, [
-        unref(showAddPageButton) ? (openBlock(), createElementBlock("div", {
+        showAddPageButton.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           id: "m-editor-page-bar-add-icon",
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$A, { icon: unref(Plus) }, null, 8, ["icon"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
+          createVNode(_sfc_main$E, { icon: unref(Plus) }, null, 8, ["icon"])
+        ])) : (openBlock(), createElementBlock("div", _hoisted_1$3)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$A, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$E, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
-        unref(pageLength) ? (openBlock(), createElementBlock("div", {
+        pageLength.value ? (openBlock(), createElementBlock("div", {
           key: 3,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
@@ -5591,20 +6190,20 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$A, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$E, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
   }
 });
 
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = { class: "m-editor-page-bar-title" };
-const __default__$5 = defineComponent({
-  name: "MEditorPageBar"
-});
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+const _hoisted_1$2 = ["onClick"];
+const _hoisted_2$1 = { class: "m-editor-page-bar-title" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorPageBar"
+  },
+  __name: "PageBar",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -5624,15 +6223,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       editorService?.remove(node);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$7, null, {
+      return openBlock(), createBlock(_sfc_main$8, null, {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root) && unref(root).items || [], (item) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(root.value && root.value.items || [], (item) => {
             return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["m-editor-page-bar-item", { active: unref(page)?.id === item.id }]),
+              class: normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
               key: item.key,
               onClick: ($event) => switchPage(item)
             }, [
-              createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_2$1, [
                 renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                   createVNode(unref(TMagicTooltip), {
                     effect: "dark",
@@ -5663,7 +6262,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$p, {
+                      createVNode(_sfc_main$r, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -5671,7 +6270,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$p, {
+                      createVNode(_sfc_main$r, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -5684,7 +6283,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 2
               }, 1024)
-            ], 10, _hoisted_1);
+            ], 10, _hoisted_1$2);
           }), 128))
         ]),
         _: 3
@@ -5821,16 +6420,16 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const __default__$4 = defineComponent({
-  name: "MEditorScrollBar"
-});
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorScrollBar"
+  },
+  __name: "ScrollBar",
   props: {
-    size: null,
-    scrollSize: null,
+    size: {},
+    scrollSize: {},
     isHorizontal: { type: Boolean },
-    pos: null
+    pos: {}
   },
   emits: ["scroll"],
   setup(__props, { emit }) {
@@ -5895,13 +6494,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "bar",
         ref: bar,
-        class: normalizeClass(["m-editor-scroll-bar", __props.isHorizontal ? "horizontal" : "vertical"])
+        class: normalizeClass(["m-editor-scroll-bar", _ctx.isHorizontal ? "horizontal" : "vertical"])
       }, [
         createElementVNode("div", {
           ref_key: "thumb",
           ref: thumb,
           class: "m-editor-scroll-bar-thumb",
-          style: normalizeStyle(unref(thumbStyle))
+          style: normalizeStyle(thumbStyle.value)
         }, null, 4)
       ], 2);
     };
@@ -5910,11 +6509,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
-const __default__$3 = defineComponent({
-  name: "MEditorScrollViewer"
-});
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorScrollViewer"
+  },
+  __name: "ScrollViewer",
   props: {
     width: { default: 0 },
     height: { default: 0 },
@@ -5926,7 +6525,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       height: 0
     }) }
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const container = ref();
     const el = ref();
@@ -5980,7 +6579,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         left: hOffset.value
       });
     };
-    expose({
+    __expose({
       container
     });
     return (_ctx, _cache) => {
@@ -5992,23 +6591,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           ref_key: "el",
           ref: el,
-          style: normalizeStyle(unref(style))
+          style: normalizeStyle(style.value)
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4),
-        scrollHeight.value > __props.wrapHeight ? (openBlock(), createBlock(_sfc_main$5, {
+        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$6, {
           key: 0,
           "scroll-size": scrollHeight.value,
-          size: __props.wrapHeight,
+          size: _ctx.wrapHeight,
           pos: vOffset.value,
           onScroll: vScrollHandler
         }, null, 8, ["scroll-size", "size", "pos"])) : createCommentVNode("", true),
-        scrollWidth.value > __props.wrapWidth ? (openBlock(), createBlock(_sfc_main$5, {
+        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$6, {
           key: 1,
           "is-horizontal": true,
           "scroll-size": scrollWidth.value,
           pos: hOffset.value,
-          size: __props.wrapWidth,
+          size: _ctx.wrapWidth,
           onScroll: hScrollHandler
         }, null, 8, ["scroll-size", "pos", "size"])) : createCommentVNode("", true)
       ], 512);
@@ -6016,16 +6615,59 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$2 = defineComponent({
-  name: "MEditorViewerMenu"
+const _hoisted_1$1 = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M2 4H21V6H2V4Z",
+  fill: "black",
+  "fill-opacity": "0.9"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M5 11H18V13H5V11Z",
+  fill: "black",
+  "fill-opacity": "0.9"
+}, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M2 18H21V20H2V18Z",
+  fill: "black",
+  "fill-opacity": "0.9"
+}, null, -1);
+const _hoisted_5 = [
+  _hoisted_2,
+  _hoisted_3,
+  _hoisted_4
+];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCenterIcon"
+  },
+  __name: "CenterIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_5);
+    };
+  }
 });
+
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+  ...{
+    name: "MEditorViewerMenu"
+  },
+  __name: "ViewerMenu",
   props: {
     isMultiSelect: { type: Boolean, default: false },
-    stageContentMenu: null
+    stageContentMenu: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
@@ -6035,11 +6677,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const node = computed(() => editorService?.get("node"));
     const nodes = computed(() => editorService?.get("nodes"));
     const parent = computed(() => editorService?.get("parent"));
-    const stage = computed(() => editorService?.get("stage"));
     const menuData = computed(() => [
       {
         type: "button",
         text: "水平居中",
+        icon: markRaw(_sfc_main$4),
         display: () => canCenter.value,
         handler: () => {
           if (!nodes.value)
@@ -6047,30 +6689,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           editorService?.alignCenter(nodes.value);
         }
       },
-      {
-        type: "button",
-        text: "复制",
-        icon: markRaw(CopyDocument),
-        handler: () => {
-          nodes.value && editorService?.copy(nodes.value);
-          canPaste.value = true;
-        }
-      },
-      {
-        type: "button",
-        text: "粘贴",
-        icon: markRaw(DocumentCopy),
-        display: () => canPaste.value,
-        handler: () => {
-          const rect = menu.value?.$el.getBoundingClientRect();
-          const parentRect = stage.value?.container?.getBoundingClientRect();
-          const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
-          const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
-          if (!nodes.value || nodes.value.length === 0)
-            return;
-          editorService?.paste({ left: initialLeft, top: initialTop });
-        }
-      },
+      useCopyMenu(),
+      usePasteMenu(menu),
       {
         type: "divider",
         direction: "horizontal",
@@ -6101,6 +6721,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "置顶",
+        icon: markRaw(Top),
         display: () => !isPage(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService?.moveLayer(LayerOffset.TOP);
@@ -6109,25 +6730,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "置底",
+        icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService?.moveLayer(LayerOffset.BOTTOM);
         }
       },
+      useMoveToMenu(services),
       {
         type: "divider",
         direction: "horizontal",
         display: () => !isPage(node.value) && !props.isMultiSelect
       },
-      {
-        type: "button",
-        text: "删除",
-        icon: Delete,
-        display: () => !isPage(node.value),
-        handler: () => {
-          nodes.value && editorService?.remove(nodes.value);
-        }
-      },
+      useDeleteMenu(),
       {
         type: "divider",
         direction: "horizontal"
@@ -6160,10 +6775,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const data = await storageService.getItem(COPY_STORAGE_KEY);
       canPaste.value = data !== "undefined" && !!data;
     };
-    expose({ show });
+    __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        "menu-data": unref(menuData),
+      return openBlock(), createBlock(_sfc_main$e, {
+        "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
       }, null, 8, ["menu-data"]);
@@ -6171,13 +6786,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$1 = defineComponent({
-  name: "MEditorStage"
-});
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+  ...{
+    name: "MEditorStage"
+  },
+  __name: "Stage",
   props: {
-    stageContentMenu: null
+    stageContentMenu: {}
   },
   setup(__props) {
     let stage = null;
@@ -6203,6 +6818,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)
@@ -6243,22 +6861,26 @@ 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)
+        return;
+      e.dataTransfer.dropEffect = "move";
     };
     const dropHandler = async (e) => {
       e.preventDefault();
@@ -6269,7 +6891,13 @@ 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 data = e.dataTransfer.getData("text/html");
+        if (!data)
+          return;
+        const config = parseDSL(`(${data})`);
+        if (!config)
+          return;
         const layout = await services?.editorService.getLayout(parent);
         const containerRect = stageContainer.value.getBoundingClientRect();
         const { scrollTop, scrollLeft } = stage.mask;
@@ -6298,26 +6926,28 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$4, {
+      return openBlock(), createBlock(_sfc_main$5, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
-        width: unref(stageRect)?.width,
-        height: unref(stageRect)?.height,
-        "wrap-width": unref(stageContainerRect)?.width,
-        "wrap-height": unref(stageContainerRect)?.height,
-        zoom: unref(zoom),
+        tabindex: "-1",
+        width: stageRect.value?.width,
+        height: stageRect.value?.height,
+        "wrap-width": stageContainerRect.value?.width,
+        "wrap-height": stageContainerRect.value?.height,
+        zoom: zoom.value,
         "correction-scroll-size": {
           width: 60,
           height: 50
-        }
+        },
+        onClick: _cache[0] || (_cache[0] = ($event) => stageWrap.value?.container?.focus())
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
             class: "m-editor-stage-container",
             ref_key: "stageContainer",
             ref: stageContainer,
-            style: normalizeStyle(`transform: scale(${unref(zoom)});`),
+            style: normalizeStyle(`transform: scale(${zoom.value});`),
             onContextmenu: contextmenuHandler,
             onDrop: dropHandler,
             onDragover: dragoverHandler
@@ -6326,8 +6956,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$3, {
               ref_key: "menu",
               ref: menu,
-              "is-multi-select": unref(isMultiSelect),
-              "stage-content-menu": __props.stageContentMenu
+              "is-multi-select": isMultiSelect.value,
+              "stage-content-menu": _ctx.stageContentMenu
             }, null, 8, ["is-multi-select", "stage-content-menu"])
           ]))
         ]),
@@ -6337,131 +6967,29 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__ = defineComponent({
-  name: "MEditorWorkspace"
-});
+const _hoisted_1 = { class: "m-editor-workspace" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__,
+  ...{
+    name: "MEditorWorkspace"
+  },
+  __name: "Workspace",
   props: {
-    stageContentMenu: null
+    stageContentMenu: {}
   },
   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
-      }, [
-        createVNode(_sfc_main$8),
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$9),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          unref(page) ? (openBlock(), createBlock(_sfc_main$2, {
+          page.value ? (openBlock(), createBlock(_sfc_main$2, {
             key: 0,
-            "stage-content-menu": __props.stageContentMenu
+            "stage-content-menu": _ctx.stageContentMenu
           }, null, 8, ["stage-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content"),
-        createVNode(_sfc_main$6, null, {
+        createVNode(_sfc_main$7, null, {
           "page-bar-title": withCtx(({ page: page2 }) => [
             renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
           ]),
@@ -6470,7 +6998,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         })
-      ], 512);
+      ]);
     };
   }
 });
@@ -6499,8 +7027,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);
   }
   /**
@@ -6517,13 +7045,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
@@ -6538,7 +7066,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] = {
@@ -6553,8 +7082,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);
   }
   /**
    * 设置代码编辑面板展示状态
@@ -6577,10 +7106,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;
   }
   /**
@@ -6610,10 +7139,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
@@ -6678,9 +7207,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);
     });
   }
   /**
@@ -7089,6 +7618,7 @@ class Watcher extends EventEmitter {
         });
       });
     });
+    this.emit("collected", nodes, deep);
   }
   /**
    * 清除依赖
@@ -7117,6 +7647,7 @@ class Watcher extends EventEmitter {
         const fullKey = prop ? `${prop}.${key}` : key;
         if (target.isTarget(key, value)) {
           target.updateDep(node, fullKey);
+          this.emit("update-dep", node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
             collectTarget(item, `${fullKey}.${index}`);
@@ -7192,6 +7723,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: {
@@ -7290,6 +8090,9 @@ const editorProps = {
   },
   disabledDragStart: {
     type: Boolean
+  },
+  extendFormState: {
+    type: Function
   }
 };
 
@@ -7298,6 +8101,9 @@ const createCodeBlockTarget = (id, codeBlock) => new Target({
   id,
   name: codeBlock.name,
   isTarget: (key, value) => {
+    if (id === value) {
+      return true;
+    }
     if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
       const index = value.hookData.findIndex((item) => item.codeId === id);
       return Boolean(index > -1);
@@ -7309,7 +8115,10 @@ const createDataSourceTarget = (id, ds) => new Target({
   type: "data-source",
   id,
   name: ds.title || `${id}`,
-  isTarget: (key, value) => typeof value === "string" && value.includes(`${id}`)
+  isTarget: (key, value) => (
+    // 关联数据源对象或者在模板在使用数据源
+    value.isBindDataSource && value.dataSourceId || typeof value === "string" && value.includes(`${id}`)
+  )
 });
 
 const initServiceState = (props, {
@@ -7319,7 +8128,8 @@ const initServiceState = (props, {
   propsService,
   eventsService,
   uiService,
-  codeBlockService
+  codeBlockService,
+  keybindingService
 }) => {
   watch(
     () => props.modelValue,
@@ -7388,9 +8198,46 @@ const initServiceState = (props, {
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
+  const getApp = () => {
+    const stage = editorService.get("stage");
+    return stage?.renderer.runtime?.getApp?.();
+  };
+  const updateDataSoucreSchema = () => {
+    const root = editorService.get("root");
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
+  };
+  const upateNodeWhenDataSourceChange = (nodes) => {
+    const root = editorService.get("root");
+    const stage = editorService.get("stage");
+    if (!root || !stage)
+      return;
+    const app = getApp();
+    if (!app)
+      return;
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+    updateDataSoucreSchema();
+    nodes.forEach((node) => {
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        if (dep[node.id]) {
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root)
+          });
+        }
+      });
+    });
+  };
   const targetAddHandler = (target) => {
     if (target.type !== "data-source")
       return;
@@ -7408,8 +8255,16 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       return;
     delete root.dataSourceDeps[id];
   };
+  const depUpdateHandler = (node) => {
+    upateNodeWhenDataSourceChange([node]);
+  };
+  const collectedHandler = (nodes) => {
+    upateNodeWhenDataSourceChange(nodes);
+  };
   depService.on("add-target", targetAddHandler);
   depService.on("remove-target", targetRemoveHandler);
+  depService.on("dep-update", depUpdateHandler);
+  depService.on("collected", collectedHandler);
   const rootChangeHandler = async (value, preValue) => {
     const nodeId = editorService.get("node")?.id || props.defaultSelected;
     let node;
@@ -7477,14 +8332,20 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   codeBlockService.on("remove", codeBlockRemoveHandler);
   const dataSourceAddHandler = (config) => {
     depService.addTarget(createDataSourceTarget(config.id, config));
+    getApp()?.dataSourceManager?.addDataSource(config);
   };
   const dataSourceUpdateHandler = (config) => {
     if (config.title) {
       depService.getTarget(config.id).name = config.title;
     }
+    const root = editorService.get("root");
+    const targets = depService.getTargets("data-source");
+    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
+    upateNodeWhenDataSourceChange(nodes);
   };
   const dataSourceRemoveHandler = (id) => {
     depService.removeTarget(id);
+    getApp()?.dataSourceManager?.removeDataSource(id);
   };
   dataSourceService.on("add", dataSourceAddHandler);
   dataSourceService.on("update", dataSourceUpdateHandler);
@@ -7492,6 +8353,8 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   onUnmounted(() => {
     depService.off("add-target", targetAddHandler);
     depService.off("remove-target", targetRemoveHandler);
+    depService.off("dep-update", depUpdateHandler);
+    depService.off("collected", collectedHandler);
     editorService.off("history-change", historyChangeHandler);
     editorService.off("root-change", rootChangeHandler);
     editorService.off("add", nodeAddHandler);
@@ -7506,13 +8369,13 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
 };
 
 const _sfc_main = defineComponent({
-  name: "m-editor",
+  name: "MEditor",
   components: {
-    TMagicNavMenu: _sfc_main$o,
-    Sidebar: _sfc_main$9,
+    TMagicNavMenu: _sfc_main$q,
+    Sidebar: _sfc_main$a,
     Workspace: _sfc_main$1,
-    PropsPanel: _sfc_main$n,
-    Framework: _sfc_main$q
+    PropsPanel: _sfc_main$p,
+    Framework: _sfc_main$s
   },
   props: editorProps,
   emits: ["props-panel-mounted", "update:modelValue"],
@@ -7527,10 +8390,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(
@@ -7553,18 +8419,35 @@ const _sfc_main = defineComponent({
   }
 });
 
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TMagicNavMenu = resolveComponent("TMagicNavMenu");
   const _component_Sidebar = resolveComponent("Sidebar");
   const _component_Workspace = resolveComponent("Workspace");
   const _component_PropsPanel = resolveComponent("PropsPanel");
   const _component_Framework = resolveComponent("Framework");
-  return openBlock(), createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
+  return openBlock(), createBlock(_component_Framework, null, {
+    header: withCtx(() => [
+      renderSlot(_ctx.$slots, "header")
+    ]),
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
         createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
       ])
     ]),
+    "content-before": withCtx(() => [
+      renderSlot(_ctx.$slots, "content-before")
+    ]),
+    "src-code": withCtx(() => [
+      renderSlot(_ctx.$slots, "src-code", { editorService: _ctx.editorService })
+    ]),
     sidebar: withCtx(() => [
       renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
         createVNode(_component_Sidebar, {
@@ -7624,27 +8507,35 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "props-panel": withCtx(() => [
       renderSlot(_ctx.$slots, "props-panel", {}, () => [
         createVNode(_component_PropsPanel, {
+          "extend-state": _ctx.extendFormState,
           onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
         }, {
           "props-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "props-panel-header")
           ]),
           _: 3
-        })
+        }, 8, ["extend-state"])
       ])
     ]),
     empty: withCtx(() => [
       renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
     ]),
+    "content-after": withCtx(() => [
+      renderSlot(_ctx.$slots, "content-after")
+    ]),
+    footer: withCtx(() => [
+      renderSlot(_ctx.$slots, "footer")
+    ]),
     _: 3
-  }, 8, ["code-options"]);
+  });
 }
 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) => {
@@ -7652,17 +8543,19 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component("m-fields-ui-select", _sfc_main$v);
-    app.component("m-fields-code-link", _sfc_main$C);
-    app.component("m-fields-vs-code", _sfc_main$D);
-    app.component("magic-code-editor", _sfc_main$u);
-    app.component("m-fields-code-select", _sfc_main$B);
-    app.component("m-fields-code-select-col", _sfc_main$z);
-    app.component("m-fields-event-select", _sfc_main$x);
-    app.component("m-fields-data-source-fields", _sfc_main$y);
-    app.component("m-fields-key-value", _sfc_main$w);
+    app.component("m-fields-ui-select", _sfc_main$x);
+    app.component("m-fields-code-link", _sfc_main$G);
+    app.component("m-fields-vs-code", _sfc_main$H);
+    app.component("magic-code-editor", _sfc_main$w);
+    app.component("m-fields-code-select", _sfc_main$F);
+    app.component("m-fields-code-select-col", _sfc_main$D);
+    app.component("m-fields-event-select", _sfc_main$z);
+    app.component("m-fields-data-source-fields", _sfc_main$C);
+    app.component("m-fields-key-value", _sfc_main$y);
+    app.component("m-fields-data-source-input", _sfc_main$B);
+    app.component("m-fields-data-source-select", _sfc_main$A);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$B as CodeSelect, _sfc_main$z as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$y as DataSourceFields, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$A 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, 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$i as CodeBlockList, CodeDeleteErrorType, _sfc_main$F as CodeSelect, _sfc_main$D as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$e as ContentMenu, _sfc_main$C as DataSourceFields, _sfc_main$B as DataSourceInput, _sfc_main$A as DataSourceSelect, _sfc_main$z as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$E as Icon, KeyBindingCommand, _sfc_main$y as KeyValue, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$u as LayoutContainer, _sfc_main$p as PropsPanel, _sfc_main$v as Resizer, _sfc_main$u as SplitView, _sfc_main$w as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$r 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