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

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('@tmagic/table'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('keycon'), require('@tmagic/stage'), require('events'), require('@tmagic/core')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', '@tmagic/table', 'monaco-editor', 'gesto', '@tmagic/utils', 'keycon', '@tmagic/stage', 'events', '@tmagic/core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.table, global.monaco, global.Gesto, global.utils, global.KeyController, global.StageCore, global.events, global.core));
-})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, table, monaco, Gesto, utils, KeyController, StageCore, events, core) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('@tmagic/table'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', '@tmagic/table', 'monaco-editor', 'gesto', '@tmagic/utils', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.table, global.monaco, global.Gesto, global.utils, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, table, monaco, Gesto, utils, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,16 +23,16 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const __default__$w = vue.defineComponent({
-    name: "MEditorCode"
-  });
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$w,
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCode"
+    },
+    __name: "Code",
     props: {
-      model: null,
-      name: null,
-      config: null,
-      prop: null
+      model: {},
+      name: {},
+      config: {},
+      prop: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -46,26 +46,32 @@
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
         return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
-          style: vue.normalizeStyle(`height: ${vue.unref(height)}`),
-          "init-values": __props.model[__props.name],
-          language: vue.unref(language),
-          options: __props.config.options,
+          style: vue.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 = vue.defineComponent({
-    name: "MEditorCodeLink"
-  });
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$v,
+  let $TMAGIC_EDITOR = {};
+  const setConfig = (option) => {
+    $TMAGIC_EDITOR = option;
+  };
+  const getConfig = (key) => $TMAGIC_EDITOR[key];
+
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeLink"
+    },
+    __name: "CodeLink",
     props: {
-      config: null,
-      model: null,
-      name: null,
-      prop: null
+      config: {},
+      model: {},
+      name: {},
+      prop: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -111,7 +117,8 @@
         if (!props.name || !props.model)
           return;
         try {
-          props.model[props.name] = eval(`(${v[props.name]})`);
+          const parseDSL = getConfig("parseDSL");
+          props.model[props.name] = parseDSL(`(${v[props.name]})`);
           emit("change", props.model[props.name]);
         } catch (e) {
           console.error(e);
@@ -120,7 +127,7 @@
       return (_ctx, _cache) => {
         const _component_m_fields_link = vue.resolveComponent("m-fields-link");
         return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
-          config: vue.unref(formConfig),
+          config: formConfig.value,
           model: modelValue,
           name: "form",
           onChange: changeHandler
@@ -129,17 +136,17 @@
     }
   });
 
-  const __default__$u = vue.defineComponent({
-    name: "MEditorCodeSelect"
-  });
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$u,
+  const _sfc_main$F = /* @__PURE__ */ vue.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 }) {
@@ -148,6 +155,8 @@
         type: "group-list",
         name: "hookData",
         enableToggleMode: false,
+        expandAll: true,
+        titleKey: "codeId",
         items: [
           {
             type: "code-select-col",
@@ -175,13 +184,13 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["m-fields-code-select", __props.config.className])
+          class: vue.normalizeClass(["m-fields-code-select", _ctx.config.className])
         }, [
           vue.createVNode(vue.unref(design.TMagicCard), null, {
             default: vue.withCtx(() => [
               vue.createVNode(_component_m_form_container, {
-                config: vue.unref(codeConfig),
-                model: __props.model[__props.name],
+                config: codeConfig.value,
+                model: _ctx.model[_ctx.name],
                 onChange: changeHandler
               }, null, 8, ["config", "model"])
             ]),
@@ -192,18 +201,18 @@
     }
   });
 
-  const _hoisted_1$n = ["src"];
-  const __default__$t = vue.defineComponent({
-    name: "MEditorIcon"
-  });
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$t,
+  const _hoisted_1$p = ["src"];
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorIcon"
+    },
+    __name: "Icon",
     props: {
-      icon: null
+      icon: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 0,
           class: "magic-editor-icon"
         }, {
@@ -211,23 +220,23 @@
             vue.createVNode(vue.unref(iconsVue.Edit))
           ]),
           _: 1
-        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 1,
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$n)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$p)
           ]),
           _: 1
-        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+        })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
           key: 2,
-          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
+          class: vue.normalizeClass(["magic-editor-icon", _ctx.icon])
         }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 3,
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(_ctx.icon))))
           ]),
           _: 1
         }));
@@ -235,19 +244,19 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-code-select-col" };
-  const _hoisted_2$e = { class: "code-select-container" };
-  const __default__$s = vue.defineComponent({
-    name: "MEditorCodeSelectCol"
-  });
-  const _sfc_main$z = /* @__PURE__ */ vue.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__ */ vue.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 }) {
@@ -329,23 +338,23 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
-          vue.createElementVNode("div", _hoisted_2$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
-              model: __props.model,
+              model: _ctx.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            vue.createVNode(_sfc_main$A, {
+            vue.createVNode(_sfc_main$E, {
               class: "icon",
-              icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+              icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCode
             }, null, 8, ["icon"])
           ]),
           vue.createVNode(_component_m_form_container, {
             config: codeParamsConfig.value,
-            model: __props.model,
+            model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["config", "model"])
         ]);
@@ -353,17 +362,19 @@
     }
   });
 
-  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__ */ vue.createTextVNode("添加");
-  const _sfc_main$y = /* @__PURE__ */ vue.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__ */ vue.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 }) {
@@ -459,7 +470,7 @@
             {
               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();
@@ -499,21 +510,21 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createVNode(vue.unref(table.MagicTable), {
-            data: __props.model[__props.name],
+            data: _ctx.model[_ctx.name],
             columns: filedColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$d, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
-              disabled: __props.disabled,
+              disabled: _ctx.disabled,
               plain: "",
               onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$8
+                vue.createTextVNode("添加")
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -524,7 +535,7 @@
             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"])
         ]);
@@ -532,23 +543,343 @@
     }
   });
 
-  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__ */ vue.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 } = vue.inject("services") || {};
+      const autocomplete = vue.ref();
+      const isFocused = vue.ref(false);
+      const state = vue.ref("");
+      const displayState = vue.ref([]);
+      const input = vue.computed(() => autocomplete.value?.inputRef?.input);
+      const dataSources = vue.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)
+          });
+        }
+      };
+      vue.watch(
+        () => props.model[props.name],
+        (value = "") => {
+          state.value = value;
+          setDisplayState();
+        },
+        { immediate: true }
+      );
+      const mouseupHandler = async () => {
+        isFocused.value = true;
+        await vue.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 vue.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 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(design.getConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.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)
+          },
+          vue.unref(design.getConfig)("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: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+          ]),
+          default: vue.withCtx(({ item }) => [
+            vue.createElementVNode("div", _hoisted_1$m, [
+              vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
+              vue.createElementVNode("span", _hoisted_2$d, vue.toDisplayString(item.value), 1)
+            ])
+          ]),
+          _: 1
+        }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
+          onMouseup: mouseupHandler
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+          }, [
+            vue.createElementVNode("div", _hoisted_3$6, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                  item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: index,
+                    style: { "margin-right": "2px" }
+                  }, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
+                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
+                    key: index,
+                    size: _ctx.size
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(item.value), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["size"])) : vue.createCommentVNode("", true)
+                ], 64);
+              }), 256)),
+              vue.createVNode(_sfc_main$E, {
+                class: "tmagic-data-source-input-icon",
+                icon: vue.unref(iconsVue.Coin)
+              }, null, 8, ["icon"])
+            ])
+          ], 2)
+        ], 34));
+      };
+    }
+  });
+
+  const _sfc_main$A = /* @__PURE__ */ vue.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 } = vue.inject("services") || {};
+      const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
+      const selectConfig = vue.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 vue.openBlock(), vue.createBlock(vue.unref(form.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__ */ vue.createTextVNode("添加事件");
-  const __default__$r = vue.defineComponent({
-    name: "MEditorEventSelect"
-  });
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$r,
+  const _sfc_main$z = /* @__PURE__ */ vue.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 }) {
@@ -665,6 +996,7 @@
           {
             type: "group-list",
             name: "actions",
+            expandAll: true,
             enableToggleMode: false,
             items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value]
           }
@@ -699,14 +1031,14 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-          vue.unref(isOldVersion) ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
             size: props.size,
-            model: __props.model,
+            model: _ctx.model,
             name: "events",
-            config: vue.unref(tableConfig),
+            config: tableConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(design.TMagicButton), {
@@ -716,21 +1048,21 @@
               onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$7
+                vue.createTextVNode("添加事件")
               ]),
               _: 1
             }),
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.model[__props.name], (cardItem, index) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.model[_ctx.name], (cardItem, index) => {
               return vue.openBlock(), vue.createBlock(_component_m_form_panel, {
                 key: index,
-                config: vue.unref(actionsConfig),
+                config: actionsConfig.value,
                 model: cardItem,
                 onChange: onChangeHandler
               }, {
                 header: vue.withCtx(() => [
                   vue.createVNode(_component_m_form_container, {
                     class: "fullWidth",
-                    config: vue.unref(eventNameConfig),
+                    config: eventNameConfig.value,
                     model: cardItem,
                     onChange: onChangeHandler
                   }, null, 8, ["config", "model"]),
@@ -750,19 +1082,21 @@
     }
   });
 
-  const _hoisted_1$j = { class: "m-fields-key-value" };
+  const _hoisted_1$k = { class: "m-fields-key-value" };
   const _hoisted_2$b = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _hoisted_3$6 = /* @__PURE__ */ vue.createTextVNode("添加");
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.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 }) {
@@ -793,7 +1127,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -803,8 +1137,8 @@
                 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,
@@ -812,14 +1146,14 @@
                 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"]),
               vue.createVNode(vue.unref(design.TMagicButton), {
                 class: "m-fileds-key-value-delete",
                 type: "danger",
-                size: __props.size,
+                size: _ctx.size,
                 circle: "",
                 plain: "",
                 icon: vue.unref(iconsVue.Delete),
@@ -829,13 +1163,13 @@
           }), 128)),
           vue.createVNode(vue.unref(design.TMagicButton), {
             type: "primary",
-            size: __props.size,
+            size: _ctx.size,
             plain: "",
             icon: vue.unref(iconsVue.Plus),
             onClick: addHandler
           }, {
             default: vue.withCtx(() => [
-              _hoisted_3$6
+              vue.createTextVNode("添加")
             ]),
             _: 1
           }, 8, ["size", "icon"])
@@ -844,17 +1178,16 @@
     }
   });
 
-  const _hoisted_1$i = /* @__PURE__ */ vue.createTextVNode("取消");
-  const __default__$q = vue.defineComponent({
-    name: "MEditorUISelect"
-  });
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$q,
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorUISelect"
+    },
+    __name: "UISelect",
     props: {
-      config: null,
-      model: null,
-      prop: null,
-      name: null
+      config: {},
+      model: {},
+      prop: {},
+      name: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -911,7 +1244,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$i
+              vue.createTextVNode("取消")
             ]),
             _: 1
           }, 8, ["icon"])
@@ -921,7 +1254,7 @@
           onClick: startSelect,
           style: { "display": "flex" }
         }, [
-          vue.unref(val) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+          val.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
             key: 0,
             content: "清除"
           }, {
@@ -937,7 +1270,7 @@
             _: 1
           })) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(design.TMagicTooltip), {
-            content: vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "点击此处选择"
+            content: val.value ? toName.value + "_" + val.value : "点击此处选择"
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicButton), {
@@ -945,7 +1278,7 @@
                 style: { "padding": "0", "margin": "0" }
               }, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "点击此处选择"), 1)
+                  vue.createTextVNode(vue.toDisplayString(val.value ? toName.value + "_" + val.value : "点击此处选择"), 1)
                 ]),
                 _: 1
               })
@@ -959,15 +1292,15 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const __default__$p = vue.defineComponent({
-    name: "MEditorCodeEditor"
-  });
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$p,
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeEditor"
+    },
+    __name: "CodeEditor",
     props: {
-      initValues: null,
-      modifiedValues: null,
-      type: null,
+      initValues: {},
+      modifiedValues: {},
+      type: {},
       language: { default: "javascript" },
       options: { default: () => ({
         tabSize: 2
@@ -975,15 +1308,19 @@
       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;
         }
@@ -1015,7 +1352,7 @@
         }
         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;
@@ -1037,12 +1374,18 @@
           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);
@@ -1066,10 +1409,17 @@
       vue.onUnmounted(() => {
         resizeObserver.disconnect();
       });
-      expose({
+      __expose({
+        values,
         getEditor() {
           return vsEditor || vsDiffEditor;
         },
+        getVsEditor() {
+          return vsEditor;
+        },
+        getVsDiffEditor() {
+          return vsDiffEditor;
+        },
         setEditorValue,
         focus() {
           vsEditor?.focus();
@@ -1086,20 +1436,15 @@
     }
   });
 
-  let $TMAGIC_EDITOR = {};
-  const setConfig = (option) => {
-    $TMAGIC_EDITOR = option;
-  };
-  const getConfig = (key) => $TMAGIC_EDITOR[key];
-
-  const __default__$o = vue.defineComponent({
-    name: "MEditorResizer"
-  });
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$o,
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorResizer"
+    },
+    __name: "Resizer",
     emits: ["change"],
     setup(__props, { emit }) {
       const target = vue.ref();
+      const isDraging = vue.ref(false);
       let getso;
       vue.onMounted(() => {
         if (!target.value)
@@ -1111,37 +1456,42 @@
           if (!target.value)
             return;
           emit("change", e.deltaX);
+        }).on("dragStart", () => {
+          isDraging.value = true;
+        }).on("dragEnd", () => {
+          isDraging.value = false;
         });
       });
       vue.onUnmounted(() => {
         getso?.unset();
+        isDraging.value = false;
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("span", {
           ref_key: "target",
           ref: target,
-          class: "m-editor-resizer"
+          class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": isDraging.value }])
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 512);
+        ], 2);
       };
     }
   });
 
-  const __default__$n = vue.defineComponent({
-    name: "MEditorLayout"
-  });
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$n,
+  const _sfc_main$u = /* @__PURE__ */ vue.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 }) {
@@ -1233,26 +1583,26 @@
           ref: el,
           class: "m-editor-layout"
         }, [
-          vue.unref(hasLeft) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          hasLeft.value && _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
-              style: vue.normalizeStyle(`width: ${__props.left}px`)
+              class: vue.normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
+              style: vue.normalizeStyle(`width: ${_ctx.left}px`)
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$t, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$v, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
+            class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
             style: vue.normalizeStyle(`width: ${center.value}px`)
           }, [
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
-          vue.unref(hasRight) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$t, { onChange: changeRight }),
+          hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createVNode(_sfc_main$v, { onChange: changeRight }),
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
-              style: vue.normalizeStyle(`width: ${__props.right}px`)
+              class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
+              style: vue.normalizeStyle(`width: ${_ctx.right}px`)
             }, [
               vue.renderSlot(_ctx.$slots, "right")
             ], 6)
@@ -1342,6 +1692,40 @@
                     }
                   ]
                 },
+                {
+                  type: "fieldset",
+                  legend: "边框",
+                  items: [
+                    {
+                      name: "borderWidth",
+                      text: "宽度",
+                      defaultValue: "0"
+                    },
+                    {
+                      name: "borderColor",
+                      text: "颜色",
+                      type: "colorPicker"
+                    },
+                    {
+                      name: "borderStyle",
+                      text: "样式",
+                      type: "select",
+                      defaultValue: "none",
+                      options: [
+                        { text: "none", value: "none" },
+                        { text: "hidden", value: "hidden" },
+                        { text: "dotted", value: "dotted" },
+                        { text: "dashed", value: "dashed" },
+                        { text: "solid", value: "solid" },
+                        { text: "double", value: "double" },
+                        { text: "groove", value: "groove" },
+                        { text: "ridge", value: "ridge" },
+                        { text: "inset", value: "inset" },
+                        { text: "outset", value: "outset" }
+                      ]
+                    }
+                  ]
+                },
                 {
                   type: "fieldset",
                   legend: "背景",
@@ -1501,6 +1885,28 @@
     return CodeDeleteErrorType2;
   })(CodeDeleteErrorType || {});
   const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+  var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
+    KeyBindingCommand2["COPY_NODE"] = "tmagic-system-copy-node";
+    KeyBindingCommand2["PASTE_NODE"] = "tmagic-system-paste-node";
+    KeyBindingCommand2["DELETE_NODE"] = "tmagic-system-delete-node";
+    KeyBindingCommand2["CUT_NODE"] = "tmagic-system-cut-node";
+    KeyBindingCommand2["UNDO"] = "tmagic-system-undo";
+    KeyBindingCommand2["REDO"] = "tmagic-system-redo";
+    KeyBindingCommand2["ZOOM_IN"] = "tmagic-system-zoom-in";
+    KeyBindingCommand2["ZOOM_OUT"] = "tmagic-system-zoom-out";
+    KeyBindingCommand2["ZOOM_RESET"] = "tmagic-system-zoom-reset";
+    KeyBindingCommand2["ZOOM_FIT"] = "tmagic-system-zoom-fit";
+    KeyBindingCommand2["MOVE_UP_1"] = "tmagic-system-move-up-1";
+    KeyBindingCommand2["MOVE_DOWN_1"] = "tmagic-system-move-down-1";
+    KeyBindingCommand2["MOVE_LEFT_1"] = "tmagic-system-move-left-1";
+    KeyBindingCommand2["MOVE_RIGHT_1"] = "tmagic-system-move-right-1";
+    KeyBindingCommand2["MOVE_UP_10"] = "tmagic-system-move-up-10";
+    KeyBindingCommand2["MOVE_DOWN_10"] = "tmagic-system-move-down-10";
+    KeyBindingCommand2["MOVE_LEFT_10"] = "tmagic-system-move-left-10";
+    KeyBindingCommand2["MOVE_RIGHT_10"] = "tmagic-system-move-right-10";
+    KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
+    return KeyBindingCommand2;
+  })(KeyBindingCommand || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const getPageList = (app) => {
@@ -1947,8 +2353,8 @@
      * 清理，支持storageService.usePlugin
      */
     async clear() {
-      const storage2 = await this.getStorage();
-      storage2.clear();
+      const storage = await this.getStorage();
+      storage.clear();
     }
     /**
      * 获取存储项，支持storageService.usePlugin
@@ -1962,7 +2368,7 @@
         return null;
       switch (protocol) {
         case "object" /* OBJECT */:
-          return eval(`(${item})`);
+          return getConfig("parseDSL")(`(${item})`);
         case "json" /* JSON */:
           return JSON.parse(item);
         case "number" /* NUMBER */:
@@ -1977,49 +2383,49 @@
      * 获取指定索引位置的key
      */
     async key(index) {
-      const storage2 = await this.getStorage();
-      return storage2.key(index);
+      const storage = await this.getStorage();
+      return storage.key(index);
     }
     /**
      * 移除存储项，支持storageService.usePlugin
      */
-    async removeItem(key2, options2 = {}) {
-      const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-      storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
+    async removeItem(key, options = {}) {
+      const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+      storage.removeItem(`${options.namespace || namespace}:${key}`);
     }
     /**
      * 设置存储项，支持storageService.usePlugin
      */
-    async setItem(key2, value, options2 = {}) {
-      const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-      let item2 = value;
-      const protocol2 = options2.protocol ? `${options2.protocol}:` : "";
+    async setItem(key, value, options = {}) {
+      const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+      let item = value;
+      const protocol = options.protocol ? `${options.protocol}:` : "";
       if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
-        item2 = `${protocol2}${value}`;
+        item = `${protocol}${value}`;
       } else {
-        item2 = `${protocol2}${serialize(value)}`;
+        item = `${protocol}${serialize(value)}`;
       }
-      storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
+      storage.setItem(`${options.namespace || namespace}:${key}`, item);
     }
     destroy() {
       this.removeAllListeners();
       this.removeAllPlugins();
     }
     getValueAndProtocol(value) {
-      let protocol2 = "";
+      let protocol = "";
       if (value === null) {
         return {
           item: value,
-          protocol: protocol2
+          protocol
         };
       }
-      const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
-        protocol2 = $1;
+      const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+        protocol = $1;
         return $3;
       });
       return {
-        protocol: protocol2,
-        item: item2
+        protocol,
+        item
       };
     }
   }
@@ -3116,14 +3522,14 @@
     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__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const __default__$m = vue.defineComponent({
-    name: "MEditorAddPageBox"
-  });
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$m,
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorAddPageBox"
+    },
+    __name: "AddPageBox",
     setup(__props) {
       const services = vue.inject("services");
       const clickHandler = () => {
@@ -3139,14 +3545,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.createElementVNode("div", _hoisted_2$a, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$5
             ])
@@ -3156,25 +3562,22 @@
     }
   });
 
-  const _hoisted_1$g = { class: "m-editor" };
-  const __default__$l = vue.defineComponent({
-    name: "MEditorFramework"
-  });
-  const _sfc_main$q = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorFramework"
     },
+    __name: "Framework",
     setup(__props) {
-      const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-      const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+      const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
-      const nodes = vue.computed(() => editorService?.get("nodes") || []);
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
-      const 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 = vue.ref({
@@ -3223,22 +3626,25 @@
       };
       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 = vue.resolveComponent("magic-code-editor");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
-          vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
-          vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
-            key: 0,
-            class: "m-editor-content",
-            "init-values": vue.unref(root),
-            options: __props.codeOptions,
-            onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+          vue.renderSlot(_ctx.$slots, "header"),
+          vue.renderSlot(_ctx.$slots, "nav"),
+          vue.renderSlot(_ctx.$slots, "content-before"),
+          showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
+            vue.createVNode(_sfc_main$w, {
+              class: "m-editor-content",
+              "init-values": root.value,
+              options: vue.unref(codeOptions),
+              onSave: saveCode
+            }, null, 8, ["init-values", "options"])
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$u, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -3256,13 +3662,13 @@
               vue.renderSlot(_ctx.$slots, "sidebar")
             ]),
             center: vue.withCtx(() => [
-              vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$r)
+              pageLength.value > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+                vue.createVNode(_sfc_main$t)
               ])
             ]),
             _: 2
           }, [
-            vue.unref(pageLength) > 0 && vue.unref(nodes).length === 1 ? {
+            pageLength.value > 0 ? {
               name: "right",
               fn: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
@@ -3271,24 +3677,27 @@
                   ]),
                   _: 3
                 })
-              ])
+              ]),
+              key: "0"
             } : void 0
-          ]), 1032, ["left", "right"]))
+          ]), 1032, ["left", "right"])),
+          vue.renderSlot(_ctx.$slots, "content-after"),
+          vue.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 = vue.defineComponent({
-    name: "MEditorToolButton"
-  });
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$k,
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorToolButton"
+    },
+    __name: "ToolButton",
     props: {
       data: { default: () => ({
         type: "text",
@@ -3353,35 +3762,35 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.unref(display) ? (vue.openBlock(), vue.createElementBlock("div", {
+        return display.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          class: vue.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: vue.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" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
+          _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
-            direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            __props.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            direction: _ctx.data.direction || "vertical"
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
               placement: "bottom-start",
-              content: __props.data.tooltip
+              content: _ctx.data.tooltip
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   text: "",
-                  disabled: vue.unref(disabled)
+                  disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
                       key: 0,
-                      icon: __props.data.icon
+                      icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", null, vue.toDisplayString(__props.data.text), 1)
+                    vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
                   ]),
                   _: 1
                 }, 8, ["disabled"])
@@ -3391,30 +3800,30 @@
               key: 1,
               size: "small",
               text: "",
-              disabled: vue.unref(disabled)
+              disabled: disabled.value
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
                   key: 0,
-                  icon: __props.data.icon
+                  icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", null, vue.toDisplayString(__props.data.text), 1)
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
               ]),
               _: 1
             }, 8, ["disabled"]))
-          ], 64)) : __props.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
+          ], 64)) : _ctx.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
             key: 3,
             trigger: "click",
-            disabled: vue.unref(disabled),
+            disabled: disabled.value,
             onCommand: dropdownHandler
           }, {
             dropdown: vue.withCtx(() => [
-              __props.data.items && __props.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
+              _ctx.data.items && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
                 default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data.items, (subItem, index) => {
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (subItem, index) => {
                     return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownItem), {
                       key: index,
-                      command: { data: __props.data, subItem }
+                      command: { data: _ctx.data, subItem }
                     }, {
                       default: vue.withCtx(() => [
                         vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
@@ -3428,7 +3837,7 @@
             ]),
             default: vue.withCtx(() => [
               vue.createElementVNode("span", _hoisted_2$9, [
-                vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
+                vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
                     vue.createVNode(vue.unref(iconsVue.ArrowDown))
@@ -3438,17 +3847,17 @@
               ])
             ]),
             _: 1
-          }, 8, ["disabled"])) : __props.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, __props.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
+          }, 8, ["disabled"])) : _ctx.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
         ], 34)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const __default__$j = vue.defineComponent({
-    name: "MEditorNavMenu"
-  });
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$j,
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorNavMenu"
+    },
+    __name: "NavMenu",
     props: {
       data: { default: () => ({}) },
       height: { default: 35 }
@@ -3597,16 +4006,16 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-nav-menu",
-          style: vue.normalizeStyle({ height: `${__props.height}px` })
+          style: vue.normalizeStyle({ height: `${_ctx.height}px` })
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(keys), (key) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: vue.normalizeClass(`menu-${key}`),
               key,
-              style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
+              style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$p, {
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$r, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -3618,20 +4027,24 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor-props-panel" };
-  const __default__$i = vue.defineComponent({
-    name: "MEditorPropsPanel"
-  });
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$i,
+  const _hoisted_1$g = { class: "m-editor-props-panel" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPropsPanel"
+    },
+    __name: "PropsPanel",
+    props: {
+      extendState: { type: Function }
+    },
     emits: ["mounted"],
-    setup(__props, { expose, emit }) {
+    setup(__props, { expose: __expose, emit }) {
       const internalInstance = vue.getCurrentInstance();
       const values = vue.ref({});
       const configForm = vue.ref();
       const curFormConfig = vue.ref([]);
       const services = vue.inject("services");
       const node = vue.computed(() => services?.editorService.get("node"));
+      const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const stage = vue.computed(() => services?.editorService.get("stage"));
       const init = async () => {
@@ -3666,26 +4079,32 @@
           design.tMagicMessage.error(e.message);
         }
       };
-      expose({ submit });
+      __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
             ref: configForm,
-            class: vue.normalizeClass(`m-editor-props-panel ${vue.unref(propsPanelSize)}`),
-            "popper-class": `m-editor-props-panel-popper ${vue.unref(propsPanelSize)}`,
-            size: vue.unref(propsPanelSize),
+            class: vue.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)), [
+          [vue.vShow, nodes.value.length === 1]
         ]);
       };
     }
   });
 
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorSearchInput"
+    },
     __name: "SearchInput",
     emits: ["search"],
     setup(__props, { emit }) {
@@ -3717,80 +4136,77 @@
     }
   });
 
-  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__*/vue.createElementVNode("g", {
+  const _hoisted_1$f = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_2$8 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
-    /*#__PURE__*/vue.createElementVNode("path", {
+    /* @__PURE__ */ vue.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__*/vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
+    /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorAppManageIcon"
+    },
+    __name: "AppManageIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$f, _hoisted_3$4);
+      };
+    }
+  });
 
-  function _sfc_render$2(_ctx, _cache) {
-    return (vue.openBlock(), vue.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__*/vue.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__ */ vue.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeIcon"
+    },
+    __name: "CodeIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _hoisted_4$4);
+      };
+    }
+  });
 
-  function _sfc_render$1(_ctx, _cache) {
-    return (vue.openBlock(), vue.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__ */ vue.createTextVNode("确认");
-  const _hoisted_3$3 = /* @__PURE__ */ vue.createTextVNode("关闭");
-  const _hoisted_4$3 = {
+  const _hoisted_2$6 = {
     key: 1,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_5$2 = /* @__PURE__ */ vue.createTextVNode("关闭");
-  const __default__$h = vue.defineComponent({
-    name: "MEditorCodeDraftEditor"
-  });
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$h,
+  const _sfc_main$l = /* @__PURE__ */ vue.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 = vue.inject("services");
       const codeContent = vue.ref("");
@@ -3855,7 +4271,7 @@
           codeEditor.value.focus();
         }
       };
-      expose({
+      __expose({
         saveAndClose,
         close
       });
@@ -3863,16 +4279,16 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
         }, [
-          vue.createVNode(_sfc_main$u, {
+          vue.createVNode(_sfc_main$w, {
             ref_key: "codeEditor",
             ref: codeEditor,
             class: "m-editor-container",
             "init-values": `${codeContent.value}`,
             onSave: saveCodeDraft,
-            language: __props.language,
-            options: vue.unref(codeOptions)
+            language: _ctx.language,
+            options: codeOptions.value
           }, null, 8, ["init-values", "language", "options"]),
-          __props.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -3889,7 +4305,7 @@
               onClick: saveAndClose
             }, {
               default: vue.withCtx(() => [
-                _hoisted_2$6
+                vue.createTextVNode("确认")
               ]),
               _: 1
             }),
@@ -3898,11 +4314,11 @@
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$3
+                vue.createTextVNode("关闭")
               ]),
               _: 1
             })
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -3918,7 +4334,7 @@
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_5$2
+                vue.createTextVNode("关闭")
               ]),
               _: 1
             })
@@ -3928,26 +4344,27 @@
     }
   });
 
-  const _hoisted_1$a = { class: "code-name-wrapper" };
+  const _hoisted_1$c = { class: "code-name-wrapper" };
   const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
-  const _hoisted_3$2 = { class: "code-name-wrapper" };
-  const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-  const __default__$g = vue.defineComponent({
-    name: "MEditorFunctionEditor"
-  });
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$g,
+  const _hoisted_3$3 = { class: "code-name-wrapper" };
+  const _hoisted_4$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
+  const _sfc_main$k = /* @__PURE__ */ vue.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;
+      vue.provide("mForm", null);
       const defaultParamColConfig = {
         type: "row",
         label: "参数类型",
@@ -4016,29 +4433,29 @@
       initTableModel();
       const beforeSave = (codeValue) => {
         try {
-          eval(codeValue);
+          getConfig("parseDSL")(codeValue);
           return true;
         } catch (e) {
           design.tMagicMessage.error(e.stack);
           return false;
         }
       };
-      const saveCode = async (codeValue2) => {
+      const saveCode = async (codeValue) => {
         if (!props.editable)
           return;
-        evalRes.value = beforeSave(codeValue2);
+        evalRes.value = beforeSave(codeValue);
         if (evalRes.value) {
           await services?.codeBlockService.setCodeDslById(props.id, {
             name: codeName.value,
-            content: codeValue2,
+            content: codeValue,
             params: tableModel.value?.params || []
           });
           design.tMagicMessage.success("代码成功保存到本地");
           services?.codeBlockService.removeCodeDraft(props.id);
         }
       };
-      const saveAndClose = async (codeValue2) => {
-        await saveCode(codeValue2);
+      const saveAndClose = async (codeValue) => {
+        await saveCode(codeValue);
         if (evalRes.value) {
           close();
         }
@@ -4047,24 +4464,24 @@
         services?.codeBlockService.setCodeEditorShowStatus(false);
       };
       const codeDraftEditor = vue.ref();
-      expose({
+      __expose({
         codeDraftEditor
       });
       return (_ctx, _cache) => {
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$a, [
+            vue.createElementVNode("div", _hoisted_1$c, [
               _hoisted_2$5,
               vue.createVNode(vue.unref(design.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"])
             ]),
-            vue.createElementVNode("div", _hoisted_3$2, [
-              _hoisted_4$2,
+            vue.createElementVNode("div", _hoisted_3$3, [
+              _hoisted_4$3,
               vue.createVNode(_component_m_form_table, {
                 style: { "width": "800px" },
                 config: tableConfig,
@@ -4077,14 +4494,14 @@
             ])
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$j, {
+            vue.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
@@ -4096,17 +4513,17 @@
     }
   });
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$b = {
     key: 0,
     class: "m-editor-code-block-editor-panel"
   };
-  const __default__$f = vue.defineComponent({
-    name: "MEditorCodeBlockEditor"
-  });
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$f,
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeBlockEditor"
+    },
+    __name: "CodeBlockEditor",
     props: {
-      paramsColConfig: null
+      paramsColConfig: {}
     },
     setup(__props) {
       const services = vue.inject("services");
@@ -4153,28 +4570,28 @@
           "append-to-body": true,
           "show-close": false,
           "close-on-click-modal": true,
-          size: vue.unref(size),
+          size: size.value,
           "before-close": handleClose
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$s, {
+            vue.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: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
-                  codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
+                  codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
                     key: 0,
                     ref_key: "functionEditor",
                     ref: functionEditor,
-                    id: vue.unref(id),
+                    id: id.value,
                     name: codeConfig.value.name,
                     content: codeConfig.value.content,
-                    paramsColConfig: __props.paramsColConfig,
-                    editable: !!vue.unref(editable),
+                    paramsColConfig: _ctx.paramsColConfig,
+                    editable: !!editable.value,
                     autoSaveDraft: true,
                     codeOptions: vue.unref(codeOptions)
                   }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : vue.createCommentVNode("", true)
@@ -4189,22 +4606,21 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "search-wrapper" };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.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 = vue.defineComponent({
-    name: "MEditorCodeBlockList"
-  });
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$e,
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeBlockList"
+    },
+    __name: "CodeBlockList",
     props: {
-      customError: null,
-      paramsColConfig: null
+      customError: { type: Function },
+      paramsColConfig: {}
     },
     setup(__props) {
       const props = __props;
@@ -4293,9 +4709,9 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$8, [
-                vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-                vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              vue.createElementVNode("div", _hoisted_1$a, [
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
                   type: "primary",
@@ -4303,7 +4719,7 @@
                   onClick: createCodeBlock
                 }, {
                   default: vue.withCtx(() => [
-                    _hoisted_2$4
+                    vue.createTextVNode("新增")
                   ]),
                   _: 1
                 })) : vue.createCommentVNode("", true)
@@ -4315,9 +4731,9 @@
               class: "magic-editor-layer-tree",
               "node-key": "id",
               "empty-text": "暂无代码块",
-              "default-expanded-keys": vue.unref(expandedKeys),
+              "default-expanded-keys": expandedKeys.value,
               "expand-on-click-node": false,
-              data: vue.unref(codeList),
+              data: codeList.value,
               props: treeProps,
               "highlight-current": true,
               "filter-node-method": filterNode,
@@ -4328,41 +4744,41 @@
                   id: data.id,
                   class: "list-container"
                 }, [
-                  vue.createElementVNode("div", _hoisted_4$1, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(CodeIcon, {
+                  vue.createElementVNode("div", _hoisted_3$2, [
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
                       key: 0,
                       class: "codeIcon"
                     })) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(AppManageIcon, {
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
                       key: 1,
                       class: "compIcon"
                     })) : vue.createCommentVNode("", true),
                     vue.createElementVNode("span", {
                       class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                     }, vue.toDisplayString(data.name) + " (" + vue.toDisplayString(data.id) + ")", 3),
-                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
                       vue.createVNode(vue.unref(design.TMagicTooltip), {
                         effect: "dark",
-                        content: vue.unref(editable) ? "编辑" : "查看",
+                        content: editable.value ? "编辑" : "查看",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
-                            icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                          vue.createVNode(_sfc_main$E, {
+                            icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
                           }, null, 8, ["icon", "onClick"])
                         ]),
                         _: 2
                       }, 1032, ["content"]),
-                      vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                      editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                         key: 0,
                         effect: "dark",
                         content: "删除",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
+                          vue.createVNode(_sfc_main$E, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4376,13 +4792,13 @@
                       })
                     ])) : vue.createCommentVNode("", true)
                   ])
-                ], 8, _hoisted_3$1)
+                ], 8, _hoisted_2$4)
               ]),
               _: 3
             }, 8, ["default-expanded-keys", "data"]),
-            vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+            isShowCodeBlockEditor.value ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
               key: 0,
-              paramsColConfig: __props.paramsColConfig
+              paramsColConfig: _ctx.paramsColConfig
             }, {
               "code-block-edit-panel-header": vue.withCtx(({ id }) => [
                 vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
@@ -4396,16 +4812,17 @@
     }
   });
 
-  const _hoisted_1$7 = /* @__PURE__ */ vue.createTextVNode("确定");
-  const _hoisted_2$3 = /* @__PURE__ */ vue.createTextVNode("关闭");
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.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 = vue.ref("base");
       const services = vue.inject("services");
@@ -4436,7 +4853,7 @@
       const hide = () => {
         visible.value = false;
       };
-      expose({
+      __expose({
         show() {
           visible.value = true;
         },
@@ -4446,12 +4863,12 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.unref(size)
+          size: size.value
         }, {
           footer: vue.withCtx(() => [
             vue.createElementVNode("div", null, [
@@ -4460,13 +4877,13 @@
                 onClick: submitHandler
               }, {
                 default: vue.withCtx(() => [
-                  _hoisted_1$7
+                  vue.createTextVNode("确定")
                 ]),
                 _: 1
               }),
               vue.createVNode(vue.unref(design.TMagicButton), { onClick: hide }, {
                 default: vue.withCtx(() => [
-                  _hoisted_2$3
+                  vue.createTextVNode("关闭")
                 ]),
                 _: 1
               })
@@ -4476,7 +4893,7 @@
             vue.createVNode(vue.unref(form.MForm), {
               ref_key: "form",
               ref: form$1,
-              config: vue.unref(dataSourceConfig),
+              config: dataSourceConfig.value,
               "init-values": initValues.value,
               onChange: changeHandler
             }, null, 8, ["config", "init-values"])
@@ -4487,22 +4904,21 @@
     }
   });
 
-  const _hoisted_1$6 = { class: "search-wrapper" };
-  const _hoisted_2$2 = /* @__PURE__ */ vue.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 = vue.defineComponent({
-    name: "MEditorDataSourceListPanel"
-  });
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$d,
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorDataSourceListPanel"
+    },
+    __name: "DataSourceListPanel",
     setup(__props) {
       const services = vue.inject("services", {});
-      const { dataSourceService, depService } = vue.inject("services") || {};
+      const { dataSourceService, depService, editorService } = vue.inject("services") || {};
       const list = vue.computed(
         () => Object.values(depService?.targets["data-source"] || {}).map((target) => ({
           id: target.id,
@@ -4554,18 +4970,30 @@
       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 vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$6, [
-              vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+            vue.createElementVNode("div", _hoisted_1$9, [
+              vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               vue.createVNode(vue.unref(design.TMagicButton), {
                 type: "primary",
                 size: "small",
                 onClick: addHandler
               }, {
                 default: vue.withCtx(() => [
-                  _hoisted_2$2
+                  vue.createTextVNode("新增")
                 ]),
                 _: 1
               })
@@ -4578,21 +5006,22 @@
               "empty-text": "暂无代码块",
               "default-expand-all": "",
               "expand-on-click-node": false,
-              data: vue.unref(list),
-              "highlight-current": true
+              data: list.value,
+              "highlight-current": true,
+              onNodeClick: clickHandler
             }, {
               default: vue.withCtx(({ data }) => [
                 vue.createElementVNode("div", {
                   id: data.id,
                   class: "list-container"
                 }, [
-                  vue.createElementVNode("div", _hoisted_4, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                  vue.createElementVNode("div", _hoisted_3$1, [
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
                       key: 0,
                       class: "codeIcon",
                       icon: vue.unref(iconsVue.Coin)
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
                       key: 1,
                       class: "compIcon",
                       icon: vue.unref(iconsVue.Aim)
@@ -4600,14 +5029,14 @@
                     vue.createElementVNode("span", {
                       class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                     }, vue.toDisplayString(data.name) + "（" + vue.toDisplayString(data.id) + "）", 3),
-                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
                       vue.createVNode(vue.unref(design.TMagicTooltip), {
                         effect: "dark",
                         content: "编辑",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
+                          vue.createVNode(_sfc_main$E, {
                             class: "edit-icon",
                             icon: vue.unref(iconsVue.Edit),
                             onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -4621,7 +5050,7 @@
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
+                          vue.createVNode(_sfc_main$E, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -4635,11 +5064,11 @@
                       })
                     ])) : vue.createCommentVNode("", true)
                   ])
-                ], 8, _hoisted_3)
+                ], 8, _hoisted_2$3)
               ]),
               _: 3
             }, 8, ["data"]),
-            vue.createVNode(_sfc_main$f, {
+            vue.createVNode(_sfc_main$h, {
               ref_key: "editDialog",
               ref: editDialog,
               values: dataSourceValues.value,
@@ -4653,12 +5082,12 @@
     }
   });
 
-  const _hoisted_1$5 = ["onClick", "onDragstart"];
-  const __default__$c = vue.defineComponent({
-    name: "MEditorComponentListPanel"
-  });
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$c,
+  const _hoisted_1$8 = ["onClick", "onDragstart"];
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorComponentListPanel"
+    },
+    __name: "ComponentListPanel",
     setup(__props) {
       const searchText = vue.ref("");
       const filterTextChangeHandler = (v) => {
@@ -4688,14 +5117,13 @@
       };
       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: ")
+            })
           );
         }
       };
@@ -4723,7 +5151,7 @@
         }
         if (timeout || !stage.value)
           return;
-        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+        timeout = stage.value.delayedMarkContainer(e);
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), null, {
@@ -4731,18 +5159,18 @@
             vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
             vue.createVNode(vue.unref(design.TMagicCollapse), {
               class: "ui-component-panel",
-              "model-value": vue.unref(collapseValue)
+              "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (group, index) => {
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
                       key: index,
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -4757,7 +5185,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$A, {
+                              vue.createVNode(_sfc_main$E, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -4771,7 +5199,7 @@
                                 _: 2
                               }, 1032, ["content"])
                             ])
-                          ], 40, _hoisted_1$5);
+                          ], 40, _hoisted_1$8);
                         }), 128))
                       ]),
                       _: 2
@@ -4788,19 +5216,20 @@
     }
   });
 
-  const __default__$b = vue.defineComponent({
-    name: "MEditorContentMenu"
-  });
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$b,
+  const _sfc_main$e = /* @__PURE__ */ vue.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 = vue.ref();
+      const buttons = vue.ref();
       const subMenu = vue.ref();
       const visible = vue.ref(false);
       const subMenuData = vue.ref([]);
@@ -4808,6 +5237,7 @@
         left: "0",
         top: "0"
       });
+      const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
       const hide = () => {
         if (!visible.value)
           return;
@@ -4820,7 +5250,7 @@
         if (!visible.value || !target) {
           return;
         }
-        if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        if (contains(target)) {
           return;
         }
         hide();
@@ -4842,18 +5272,25 @@
           });
         }, 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);
       };
       vue.onMounted(() => {
         if (props.isSubMenu)
@@ -4865,13 +5302,15 @@
           return;
         globalThis.removeEventListener("mousedown", hideHandler, true);
       });
-      expose({
+      __expose({
+        menu,
         hide,
-        show
+        show,
+        contains
       });
       return (_ctx, _cache) => {
         const _component_content_menu = vue.resolveComponent("content-menu", true);
-        return __props.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+        return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "magic-editor-content-menu",
           ref_key: "menu",
@@ -4879,25 +5318,29 @@
           style: vue.normalizeStyle(menuStyle.value)
         }, [
           vue.createElementVNode("div", null, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$p, {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
+              return vue.openBlock(), vue.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))
           ]),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            vue.createVNode(_component_content_menu, {
+            subMenuData.value.length ? (vue.openBlock(), vue.createBlock(_component_content_menu, {
+              key: 0,
               class: "sub-menu",
               ref_key: "subMenu",
               ref: subMenu,
               "menu-data": subMenuData.value,
               "is-sub-menu": true,
               onHide: hide
-            }, null, 8, ["menu-data"])
+            }, null, 8, ["menu-data"])) : vue.createCommentVNode("", true)
           ]))
         ], 4)), [
           [vue.vShow, visible.value]
@@ -4906,21 +5349,95 @@
     }
   });
 
-  const __default__$a = vue.defineComponent({
-    name: "MEditorLayerMenu"
+  const useDeleteMenu = () => ({
+    type: "button",
+    text: "删除",
+    icon: iconsVue.Delete,
+    display: (services) => {
+      const node = services?.editorService?.get("node");
+      return node?.type !== schema.NodeType.ROOT && !utils.isPage(node);
+    },
+    handler: (services) => {
+      const nodes = services?.editorService?.get("nodes");
+      nodes && services?.editorService?.remove(nodes);
+    }
   });
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$a,
+  const canPaste = vue.ref(false);
+  const useCopyMenu = () => ({
+    type: "button",
+    text: "复制",
+    icon: vue.markRaw(iconsVue.CopyDocument),
+    handler: (services) => {
+      const nodes = services?.editorService?.get("nodes");
+      nodes && services?.editorService?.copy(nodes);
+      canPaste.value = true;
+    }
+  });
+  const usePasteMenu = (menu) => ({
+    type: "button",
+    text: "粘贴",
+    icon: vue.markRaw(iconsVue.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 = vue.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 !utils.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorLayerMenu"
+    },
+    __name: "LayerMenu",
     props: {
-      layerContentMenu: null
+      layerContentMenu: {}
     },
-    setup(__props, { expose }) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
       const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
-      const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
-      const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
+      const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
       const createMenuItems = (group) => group.items.map((component) => ({
         text: component.text,
@@ -4970,38 +5487,24 @@
           type: "button",
           text: "新增",
           icon: vue.markRaw(iconsVue.Plus),
-          display: () => node.value?.items,
+          display: () => node.value?.items && nodes.value?.length === 1,
           items: getSubMenuData.value
         },
-        {
-          type: "button",
-          text: "复制",
-          icon: vue.markRaw(iconsVue.CopyDocument),
-          display: () => !isRoot.value,
-          handler: () => {
-            node.value && services?.editorService.copy(node.value);
-          }
-        },
-        {
-          type: "button",
-          text: "删除",
-          icon: vue.markRaw(iconsVue.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 vue.openBlock(), vue.createBlock(_sfc_main$c, {
-          "menu-data": vue.unref(menuData),
+        return vue.openBlock(), vue.createBlock(_sfc_main$e, {
+          "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
           style: { "overflow": "initial" }
@@ -5010,19 +5513,71 @@
     }
   });
 
-  const _hoisted_1$4 = ["id", "onMouseenter"];
-  const __default__$9 = vue.defineComponent({
-    name: "MEditorLayerPanel"
+  const _hoisted_1$7 = { class: "layer-node-tool" };
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+    __name: "LayerNode",
+    props: {
+      data: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const services = vue.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 = vue.resolveComponent("el-icon");
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createElementVNode("div", null, vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
+          vue.createElementVNode("div", _hoisted_1$7, [
+            _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                key: 0,
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
+                title: "点击显示"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(iconsVue.Hide))
+                ]),
+                _: 1
+              })) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                key: 1,
+                onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
+                class: "node-lock",
+                title: "点击隐藏"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(iconsVue.View))
+                ]),
+                _: 1
+              }))
+            ], 64)) : vue.createCommentVNode("", true)
+          ])
+        ], 64);
+      };
+    }
   });
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$9,
+
+  const _hoisted_1$6 = ["id", "onMouseenter"];
+  const throttleTime = 150;
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorLayerPanel"
+    },
+    __name: "LayerPanel",
     props: {
-      layerContentMenu: null
+      layerContentMenu: {}
     },
     setup(__props) {
-      const throttleTime = 150;
       const services = vue.inject("services");
       const editorService = services?.editorService;
+      const keybindingService = services?.keybindingService;
       const tree = vue.ref();
       const menu = vue.ref();
       const checkedKeys = vue.ref([]);
@@ -5156,25 +5711,59 @@
       const windowBlurHandler = () => {
         isCtrlKeyDown.value = false;
       };
-      let keycon;
+      keybindingService?.registeCommand("layer-panel-not-ctrl-keydown", (e) => {
+        if (e.key !== keybindingService.ctrlKey) {
+          isCtrlKeyDown.value = false;
+        }
+      });
+      keybindingService?.registeCommand("layer-panel-ctrl-keydown", () => {
+        isCtrlKeyDown.value = true;
+      });
+      keybindingService?.registeCommand("layer-panel-ctrl-keyup", () => {
+        isCtrlKeyDown.value = false;
+      });
+      keybindingService?.registeCommand("layer-panel-global-keydwon", () => {
+        if (!tree.value?.$el.contains(document.activeElement)) {
+          isCtrlKeyDown.value = false;
+        }
+      });
+      keybindingService?.registe([
+        {
+          command: "layer-panel-not-ctrl-keydown",
+          when: [["layer-panel", "keydown"]]
+        },
+        {
+          command: "layer-panel-ctrl-keydown",
+          keybinding: "ctrl",
+          when: [["layer-panel", "keydown"]]
+        },
+        {
+          command: "layer-panel-ctrl-keyup",
+          keybinding: "ctrl",
+          when: [["layer-panel", "keyup"]]
+        },
+        {
+          command: "layer-panel-global-keydwon",
+          keybinding: "ctrl",
+          when: [["global", "keydown"]]
+        }
+      ]);
+      vue.watch(tree, () => {
+        if (tree.value?.$el) {
+          keybindingService?.registeEl("layer-panel", tree.value.$el);
+          tree.value.$el.addEventListener("blur", windowBlurHandler);
+        } else {
+          keybindingService?.unregisteEl("layer-panel");
+        }
+      });
       vue.onMounted(() => {
         editorService?.on("remove", editorServiceRemoveHandler);
-        keycon = new KeyController();
-        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-        const ctrl = isMac ? "meta" : "ctrl";
-        keycon.keydown((e) => {
-          if (e.key !== ctrl) {
-            isCtrlKeyDown.value = false;
-          }
-        }).keydown(ctrl, () => {
-          isCtrlKeyDown.value = true;
-        }).keyup(ctrl, () => {
-          isCtrlKeyDown.value = false;
-        });
         globalThis.addEventListener("blur", windowBlurHandler);
       });
+      vue.onBeforeUnmount(() => {
+        tree.value?.$el.removeEventListener("blur", windowBlurHandler);
+      });
       vue.onUnmounted(() => {
-        keycon.destroy();
         editorService?.off("remove", editorServiceRemoveHandler);
         globalThis.removeEventListener("blur", windowBlurHandler);
       });
@@ -5206,33 +5795,36 @@
       };
       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 vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-            vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
+            vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            values.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.unref(values),
+              data: values.value,
               "expand-on-click-node": false,
-              "highlight-current": !vue.unref(isMultiSelect),
+              "highlight-current": !isMultiSelect.value,
               "check-on-click-node": true,
               props: treeProps,
               "filter-node-method": filterNode,
               "allow-drop": allowDrop,
-              "show-checkbox": vue.unref(isMultiSelect),
+              "show-checkbox": isMultiSelect.value,
               onNodeClick: clickHandler,
               onNodeContextmenu: contextmenu,
               onNodeDragEnd: handleDragEnd,
@@ -5252,17 +5844,17 @@
                     node,
                     data
                   }, () => [
-                    vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
+                    vue.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"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$b, {
+              vue.createVNode(_sfc_main$d, {
                 ref_key: "menu",
                 ref: menu,
-                "layer-content-menu": __props.layerContentMenu
+                "layer-content-menu": _ctx.layerContentMenu
               }, null, 8, ["layer-content-menu"])
             ]))
           ]),
@@ -5272,23 +5864,23 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$5 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  const __default__$8 = vue.defineComponent({
-    name: "MEditorSidebar"
-  });
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$8,
+  const _sfc_main$a = /* @__PURE__ */ vue.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 = design.getConfig("components").tabPane;
-      const tabsComponent = design.getConfig("components").tabs;
+      const tabPaneComponent = design.getConfig("components")?.tabPane;
+      const tabsComponent = design.getConfig("components")?.tabs;
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -5297,7 +5889,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$d,
+            component: _sfc_main$f,
             slots: {}
           },
           layer: {
@@ -5308,7 +5900,7 @@
             props: {
               layerContentMenu: props.layerContentMenu
             },
-            component: _sfc_main$a,
+            component: _sfc_main$b,
             slots: {}
           },
           "code-block": {
@@ -5316,7 +5908,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$g,
+            component: _sfc_main$i,
             slots: {}
           },
           "data-source": {
@@ -5324,7 +5916,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$e,
+            component: _sfc_main$g,
             slots: {}
           }
         };
@@ -5337,30 +5929,30 @@
           activeTabName.value = status || "0";
         }
       );
-      expose({
+      __expose({
         activeTabName
       });
       return (_ctx, _cache) => {
-        return __props.data.type === "tabs" && __props.data.items.length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent).component), vue.mergeProps({
+        return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent)?.component || "el-tabs"), vue.mergeProps({
           key: 0,
           modelValue: activeTabName.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
           class: "m-editor-sidebar tmagic-design-tabs"
-        }, vue.unref(tabsComponent).props({ type: "card", tabPosition: "left" })), {
+        }, vue.unref(tabsComponent)?.props({ type: "card", tabPosition: "left" }) || {}), {
           default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(sideBarItems), (config, index) => {
-              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabPaneComponent).component), vue.mergeProps(vue.unref(tabPaneComponent).props({ name: config.text }), {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabPaneComponent)?.component || "el-tab-pane"), vue.mergeProps(vue.unref(tabPaneComponent)?.props({ name: config.text, lazy: config.lazy }) || {}, {
                 key: config.$key || index
               }), {
                 label: vue.withCtx(() => [
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                    config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
                   ]))
                 ]),
                 default: vue.withCtx(() => [
@@ -5369,7 +5961,8 @@
                       name: "component-list-panel-header",
                       fn: vue.withCtx(() => [
                         config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "0"
                     } : void 0,
                     config.$key === "component-list" || config.slots?.componentListItem ? {
                       name: "component-list-item",
@@ -5381,19 +5974,22 @@
                           key: 1,
                           component
                         }, null, 8, ["component"])) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "1"
                     } : void 0,
                     config.$key === "layer" || config.slots?.layerPanelHeader ? {
                       name: "layer-panel-header",
                       fn: vue.withCtx(() => [
                         config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "2"
                     } : void 0,
                     config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
                       name: "code-block-panel-header",
                       fn: vue.withCtx(() => [
                         config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "3"
                     } : void 0,
                     config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
                       name: "code-block-panel-tool",
@@ -5403,7 +5999,8 @@
                           id,
                           data
                         }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "4"
                     } : void 0,
                     config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
                       name: "code-block-edit-panel-header",
@@ -5412,7 +6009,8 @@
                           key: 0,
                           id
                         }) : config.slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "5"
                     } : void 0,
                     config.$key === "layer" || config.slots?.layerNodeContent ? {
                       name: "layer-node-content",
@@ -5426,7 +6024,8 @@
                           data: nodeData,
                           node
                         }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "6"
                     } : void 0
                   ]), 1040)) : vue.createCommentVNode("", true)
                 ]),
@@ -5440,16 +6039,16 @@
     }
   });
 
-  const _hoisted_1$2 = {
+  const _hoisted_1$4 = {
     key: 0,
     class: "m-editor-breadcrumb"
   };
-  const _hoisted_2$1 = { key: 0 };
-  const __default__$7 = vue.defineComponent({
-    name: "MEditorBreadcrumb"
-  });
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$7,
+  const _hoisted_2$2 = { key: 0 };
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorBreadcrumb"
+    },
+    __name: "Breadcrumb",
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -5462,14 +6061,14 @@
         editorService?.get("stage")?.select(node2.id);
       };
       return (_ctx, _cache) => {
-        return vue.unref(nodes).length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(path), (item, index) => {
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.id
             }, [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 text: "",
-                disabled: item.id === vue.unref(node)?.id,
+                disabled: item.id === node.value?.id,
                 onClick: ($event) => select(item)
               }, {
                 default: vue.withCtx(() => [
@@ -5477,7 +6076,7 @@
                 ]),
                 _: 2
               }, 1032, ["disabled", "onClick"]),
-              index < vue.unref(path).length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "/")) : vue.createCommentVNode("", true)
+              index < path.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, "/")) : vue.createCommentVNode("", true)
             ], 64);
           }), 128))
         ])) : vue.createCommentVNode("", true);
@@ -5485,15 +6084,15 @@
     }
   });
 
-  const _hoisted_1$1 = {
+  const _hoisted_1$3 = {
     key: 1,
     style: { "width": "21px" }
   };
-  const __default__$6 = vue.defineComponent({
-    name: "MEditorPageBarScrollContainer"
-  });
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$6,
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageBarScrollContainer"
+    },
+    __name: "PageBarScrollContainer",
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -5571,22 +6170,22 @@
           ref_key: "pageBar",
           ref: pageBar
         }, [
-          vue.unref(showAddPageButton) ? (vue.openBlock(), vue.createElementBlock("div", {
+          showAddPageButton.value ? (vue.openBlock(), vue.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
           }, [
-            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
+            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
-          vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
+          pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
@@ -5600,20 +6199,20 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$E, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
     }
   });
 
-  const _hoisted_1 = ["onClick"];
-  const _hoisted_2 = { class: "m-editor-page-bar-title" };
-  const __default__$5 = vue.defineComponent({
-    name: "MEditorPageBar"
-  });
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$5,
+  const _hoisted_1$2 = ["onClick"];
+  const _hoisted_2$1 = { class: "m-editor-page-bar-title" };
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageBar"
+    },
+    __name: "PageBar",
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -5633,15 +6232,15 @@
         editorService?.remove(node);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$7, null, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$8, null, {
           default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root) && vue.unref(root).items || [], (item) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(root.value && root.value.items || [], (item) => {
               return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["m-editor-page-bar-item", { active: vue.unref(page)?.id === item.id }]),
+                class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
                 key: item.key,
                 onClick: ($event) => switchPage(item)
               }, [
-                vue.createElementVNode("div", _hoisted_2, [
+                vue.createElementVNode("div", _hoisted_2$1, [
                   vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                     vue.createVNode(vue.unref(design.TMagicTooltip), {
                       effect: "dark",
@@ -5672,7 +6271,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$p, {
+                        vue.createVNode(_sfc_main$r, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -5680,7 +6279,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$p, {
+                        vue.createVNode(_sfc_main$r, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -5693,7 +6292,7 @@
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_1);
+              ], 10, _hoisted_1$2);
             }), 128))
           ]),
           _: 3
@@ -5830,16 +6429,16 @@
     };
   }
 
-  const __default__$4 = vue.defineComponent({
-    name: "MEditorScrollBar"
-  });
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$4,
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorScrollBar"
+    },
+    __name: "ScrollBar",
     props: {
-      size: null,
-      scrollSize: null,
+      size: {},
+      scrollSize: {},
       isHorizontal: { type: Boolean },
-      pos: null
+      pos: {}
     },
     emits: ["scroll"],
     setup(__props, { emit }) {
@@ -5904,13 +6503,13 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "bar",
           ref: bar,
-          class: vue.normalizeClass(["m-editor-scroll-bar", __props.isHorizontal ? "horizontal" : "vertical"])
+          class: vue.normalizeClass(["m-editor-scroll-bar", _ctx.isHorizontal ? "horizontal" : "vertical"])
         }, [
           vue.createElementVNode("div", {
             ref_key: "thumb",
             ref: thumb,
             class: "m-editor-scroll-bar-thumb",
-            style: vue.normalizeStyle(vue.unref(thumbStyle))
+            style: vue.normalizeStyle(thumbStyle.value)
           }, null, 4)
         ], 2);
       };
@@ -5919,11 +6518,11 @@
 
   const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
-  const __default__$3 = vue.defineComponent({
-    name: "MEditorScrollViewer"
-  });
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$3,
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorScrollViewer"
+    },
+    __name: "ScrollViewer",
     props: {
       width: { default: 0 },
       height: { default: 0 },
@@ -5935,7 +6534,7 @@
         height: 0
       }) }
     },
-    setup(__props, { expose }) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const container = vue.ref();
       const el = vue.ref();
@@ -5989,7 +6588,7 @@
           left: hOffset.value
         });
       };
-      expose({
+      __expose({
         container
       });
       return (_ctx, _cache) => {
@@ -6001,23 +6600,23 @@
           vue.createElementVNode("div", {
             ref_key: "el",
             ref: el,
-            style: vue.normalizeStyle(vue.unref(style))
+            style: vue.normalizeStyle(style.value)
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 4),
-          scrollHeight.value > __props.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
-          scrollWidth.value > __props.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
         ], 512);
@@ -6025,16 +6624,59 @@
     }
   });
 
-  const __default__$2 = vue.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__ */ vue.createElementVNode("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2 4H21V6H2V4Z",
+    fill: "black",
+    "fill-opacity": "0.9"
+  }, null, -1);
+  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5 11H18V13H5V11Z",
+    fill: "black",
+    "fill-opacity": "0.9"
+  }, null, -1);
+  const _hoisted_4 = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCenterIcon"
+    },
+    __name: "CenterIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _hoisted_5);
+      };
+    }
   });
+
   const _sfc_main$3 = /* @__PURE__ */ vue.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 = vue.inject("services");
       const editorService = services?.editorService;
@@ -6044,11 +6686,11 @@
       const node = vue.computed(() => editorService?.get("node"));
       const nodes = vue.computed(() => editorService?.get("nodes"));
       const parent = vue.computed(() => editorService?.get("parent"));
-      const stage = vue.computed(() => editorService?.get("stage"));
       const menuData = vue.computed(() => [
         {
           type: "button",
           text: "水平居中",
+          icon: vue.markRaw(_sfc_main$4),
           display: () => canCenter.value,
           handler: () => {
             if (!nodes.value)
@@ -6056,30 +6698,8 @@
             editorService?.alignCenter(nodes.value);
           }
         },
-        {
-          type: "button",
-          text: "复制",
-          icon: vue.markRaw(iconsVue.CopyDocument),
-          handler: () => {
-            nodes.value && editorService?.copy(nodes.value);
-            canPaste.value = true;
-          }
-        },
-        {
-          type: "button",
-          text: "粘贴",
-          icon: vue.markRaw(iconsVue.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",
@@ -6110,6 +6730,7 @@
         {
           type: "button",
           text: "置顶",
+          icon: vue.markRaw(iconsVue.Top),
           display: () => !utils.isPage(node.value) && !props.isMultiSelect,
           handler: () => {
             editorService?.moveLayer(LayerOffset.TOP);
@@ -6118,25 +6739,19 @@
         {
           type: "button",
           text: "置底",
+          icon: vue.markRaw(iconsVue.Bottom),
           display: () => !utils.isPage(node.value) && !props.isMultiSelect,
           handler: () => {
             editorService?.moveLayer(LayerOffset.BOTTOM);
           }
         },
+        useMoveToMenu(services),
         {
           type: "divider",
           direction: "horizontal",
           display: () => !utils.isPage(node.value) && !props.isMultiSelect
         },
-        {
-          type: "button",
-          text: "删除",
-          icon: iconsVue.Delete,
-          display: () => !utils.isPage(node.value),
-          handler: () => {
-            nodes.value && editorService?.remove(nodes.value);
-          }
-        },
+        useDeleteMenu(),
         {
           type: "divider",
           direction: "horizontal"
@@ -6169,10 +6784,10 @@
         const data = await storageService.getItem(COPY_STORAGE_KEY);
         canPaste.value = data !== "undefined" && !!data;
       };
-      expose({ show });
+      __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
-          "menu-data": vue.unref(menuData),
+        return vue.openBlock(), vue.createBlock(_sfc_main$e, {
+          "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
         }, null, 8, ["menu-data"]);
@@ -6180,13 +6795,13 @@
     }
   });
 
-  const __default__$1 = vue.defineComponent({
-    name: "MEditorStage"
-  });
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1,
+    ...{
+      name: "MEditorStage"
+    },
+    __name: "Stage",
     props: {
-      stageContentMenu: null
+      stageContentMenu: {}
     },
     setup(__props) {
       let stage = null;
@@ -6212,6 +6827,9 @@
         if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
           return;
         stage = useStage(stageOptions);
+        stage.on("select", () => {
+          stageWrap.value?.container?.focus();
+        });
         services?.editorService.set("stage", vue.markRaw(stage));
         stage?.mount(stageContainer.value);
         if (!node.value?.id)
@@ -6252,22 +6870,26 @@
         }
       });
       vue.onMounted(() => {
-        stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+        if (stageWrap.value?.container) {
+          resizeObserver.observe(stageWrap.value.container);
+          services?.keybindingService.registeEl("stage", stageWrap.value.container);
+        }
       });
       vue.onUnmounted(() => {
         stage?.destroy();
         resizeObserver.disconnect();
         services?.editorService.set("stage", null);
+        services?.keybindingService.unregisteEl("stage");
       });
-      const contextmenuHandler = (e2) => {
-        e2.preventDefault();
-        menu.value?.show(e2);
+      const contextmenuHandler = (e) => {
+        e.preventDefault();
+        menu.value?.show(e);
       };
-      const dragoverHandler = (e2) => {
-        e2.preventDefault();
-        if (e2.dataTransfer) {
-          e2.dataTransfer.dropEffect = "move";
-        }
+      const dragoverHandler = (e) => {
+        e.preventDefault();
+        if (!e.dataTransfer)
+          return;
+        e.dataTransfer.dropEffect = "move";
       };
       const dropHandler = async (e) => {
         e.preventDefault();
@@ -6278,7 +6900,13 @@
           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;
@@ -6307,26 +6935,28 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$4, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$5, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
-          width: vue.unref(stageRect)?.width,
-          height: vue.unref(stageRect)?.height,
-          "wrap-width": vue.unref(stageContainerRect)?.width,
-          "wrap-height": vue.unref(stageContainerRect)?.height,
-          zoom: vue.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: vue.withCtx(() => [
             vue.createElementVNode("div", {
               class: "m-editor-stage-container",
               ref_key: "stageContainer",
               ref: stageContainer,
-              style: vue.normalizeStyle(`transform: scale(${vue.unref(zoom)});`),
+              style: vue.normalizeStyle(`transform: scale(${zoom.value});`),
               onContextmenu: contextmenuHandler,
               onDrop: dropHandler,
               onDragover: dragoverHandler
@@ -6335,8 +6965,8 @@
               vue.createVNode(_sfc_main$3, {
                 ref_key: "menu",
                 ref: menu,
-                "is-multi-select": vue.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"])
             ]))
           ]),
@@ -6346,131 +6976,29 @@
     }
   });
 
-  const __default__ = vue.defineComponent({
-    name: "MEditorWorkspace"
-  });
+  const _hoisted_1 = { class: "m-editor-workspace" };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__,
+    ...{
+      name: "MEditorWorkspace"
+    },
+    __name: "Workspace",
     props: {
-      stageContentMenu: null
+      stageContentMenu: {}
     },
     setup(__props) {
       const services = vue.inject("services");
-      const workspace = vue.ref();
-      const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const page = vue.computed(() => services?.editorService.get("page"));
-      const mouseenterHandler = () => {
-        workspace.value?.focus();
-      };
-      const mouseleaveHandler = () => {
-        workspace.value?.blur();
-      };
-      let keycon;
-      vue.onMounted(() => {
-        workspace.value?.addEventListener("mouseenter", mouseenterHandler);
-        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
-        keycon = new KeyController(workspace.value);
-        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-        const ctrl = isMac ? "meta" : "ctrl";
-        keycon.keyup("delete", (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.remove(nodes.value);
-        }).keyup("backspace", (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.remove(nodes.value);
-        }).keydown([ctrl, "c"], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.copy(nodes.value);
-        }).keydown([ctrl, "v"], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-        }).keydown([ctrl, "x"], (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || utils.isPage(nodes.value[0]))
-            return;
-          services?.editorService.copy(nodes.value);
-          services?.editorService.remove(nodes.value);
-        }).keydown([ctrl, "z"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.undo();
-        }).keydown([ctrl, "shift", "z"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.redo();
-        }).keydown("up", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -1);
-        }).keydown("down", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 1);
-        }).keydown("left", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-1, 0);
-        }).keydown("right", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(1, 0);
-        }).keydown([ctrl, "up"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -10);
-        }).keydown([ctrl, "down"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 10);
-        }).keydown([ctrl, "left"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-10, 0);
-        }).keydown([ctrl, "right"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(10, 0);
-        }).keydown("tab", (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextNode();
-        }).keydown([ctrl, "tab"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextPage();
-        }).keydown([ctrl, "="], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        }).keydown([ctrl, "numpadplus"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        }).keydown([ctrl, "-"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        }).keydown([ctrl, "numpad-"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        }).keydown([ctrl, "0"], async (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.set("zoom", await services.uiService.calcZoom());
-        }).keydown([ctrl, "1"], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.set("zoom", 1);
-        });
-      });
-      vue.onUnmounted(() => {
-        workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
-        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
-        keycon.destroy();
-      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-workspace",
-          tabindex: "-1",
-          ref_key: "workspace",
-          ref: workspace
-        }, [
-          vue.createVNode(_sfc_main$8),
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.createVNode(_sfc_main$9),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
-            vue.unref(page) ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
               key: 0,
-              "stage-content-menu": __props.stageContentMenu
+              "stage-content-menu": _ctx.stageContentMenu
             }, null, 8, ["stage-content-menu"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content"),
-          vue.createVNode(_sfc_main$6, null, {
+          vue.createVNode(_sfc_main$7, null, {
             "page-bar-title": vue.withCtx(({ page: page2 }) => [
               vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
             ]),
@@ -6479,7 +7007,7 @@
             ]),
             _: 3
           })
-        ], 512);
+        ]);
       };
     }
   });
@@ -6508,8 +7036,8 @@
      * @param {CodeBlockDSL} codeDsl 代码DSL
      * @returns {void}
      */
-    async setCodeDsl(codeDsl2) {
-      this.state.codeDsl = codeDsl2;
+    async setCodeDsl(codeDsl) {
+      this.state.codeDsl = codeDsl;
       this.emit("code-dsl-change", this.state.codeDsl);
     }
     /**
@@ -6526,13 +7054,13 @@
      * @param {Id} id 代码块id
      * @returns {CodeBlockContent | null}
      */
-    getCodeContentById(id2) {
-      if (!id2)
+    getCodeContentById(id) {
+      if (!id)
         return null;
       const totalCodeDsl = this.getCodeDsl();
       if (!totalCodeDsl)
         return null;
-      return totalCodeDsl[id2] ?? null;
+      return totalCodeDsl[id] ?? null;
     }
     /**
      * 设置代码块ID和代码内容到源dsl
@@ -6547,7 +7075,8 @@
       }
       const codeConfigProcessed = codeConfig;
       if (codeConfig.content) {
-        codeConfigProcessed.content = eval(codeConfig.content);
+        const parseDSL = getConfig("parseDSL");
+        codeConfigProcessed.content = parseDSL(codeConfig.content);
       }
       const existContent = codeDsl[id] || {};
       codeDsl[id] = {
@@ -6562,8 +7091,8 @@
      * @returns {CodeBlockDSL}
      */
     getCodeDslByIds(ids) {
-      const codeDsl2 = this.getCodeDsl();
-      return lodashEs.pick(codeDsl2, ids);
+      const codeDsl = this.getCodeDsl();
+      return lodashEs.pick(codeDsl, ids);
     }
     /**
      * 设置代码编辑面板展示状态
@@ -6586,10 +7115,10 @@
      * @param {Id} id 代码块id
      * @returns {void}
      */
-    setCodeEditorContent(status, id2) {
-      if (!id2)
+    setCodeEditorContent(status, id) {
+      if (!id)
         return;
-      this.setId(id2);
+      this.setId(id);
       this.state.isShowCodeEditor = status;
     }
     /**
@@ -6619,10 +7148,10 @@
      * @param {Id} id 代码块id
      * @returns {void}
      */
-    setId(id2) {
-      if (!id2)
+    setId(id) {
+      if (!id)
         return;
-      this.state.id = id2;
+      this.state.id = id;
     }
     /**
      * 获取当前选中的代码块ID
@@ -6687,9 +7216,9 @@
       const currentDsl = await this.getCodeDsl();
       if (!currentDsl)
         return;
-      codeIds.forEach((id2) => {
-        delete currentDsl[id2];
-        this.emit("remove", id2);
+      codeIds.forEach((id) => {
+        delete currentDsl[id];
+        this.emit("remove", id);
       });
     }
     /**
@@ -7098,6 +7627,7 @@
           });
         });
       });
+      this.emit("collected", nodes, deep);
     }
     /**
      * 清除依赖
@@ -7126,6 +7656,7 @@
           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}`);
@@ -7201,6 +7732,275 @@
   }
   const eventsService = new Events();
 
+  class Keybinding extends BaseService {
+    ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
+    controllers = /* @__PURE__ */ new Map();
+    bindingList = [];
+    commands = {
+      [KeyBindingCommand.DELETE_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        if (!nodes || utils.isPage(nodes[0]))
+          return;
+        editorService.remove(nodes);
+      },
+      [KeyBindingCommand.COPY_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        nodes && editorService.copy(nodes);
+      },
+      [KeyBindingCommand.CUT_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        if (!nodes || utils.isPage(nodes[0]))
+          return;
+        editorService.copy(nodes);
+        editorService.remove(nodes);
+      },
+      [KeyBindingCommand.PASTE_NODE]: () => {
+        const nodes = editorService.get("nodes");
+        nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+      },
+      [KeyBindingCommand.UNDO]: () => {
+        editorService.undo();
+      },
+      [KeyBindingCommand.REDO]: () => {
+        editorService.redo();
+      },
+      [KeyBindingCommand.ZOOM_IN]: () => {
+        uiService.zoom(0.1);
+      },
+      [KeyBindingCommand.ZOOM_OUT]: () => {
+        uiService.zoom(-0.1);
+      },
+      [KeyBindingCommand.ZOOM_RESET]: () => {
+        uiService.set("zoom", 1);
+      },
+      [KeyBindingCommand.ZOOM_FIT]: async () => {
+        uiService.set("zoom", await uiService.calcZoom());
+      },
+      [KeyBindingCommand.MOVE_UP_1]: () => {
+        editorService.move(0, -1);
+      },
+      [KeyBindingCommand.MOVE_DOWN_1]: () => {
+        editorService.move(0, 1);
+      },
+      [KeyBindingCommand.MOVE_LEFT_1]: () => {
+        editorService.move(-1, 0);
+      },
+      [KeyBindingCommand.MOVE_RIGHT_1]: () => {
+        editorService.move(1, 0);
+      },
+      [KeyBindingCommand.MOVE_UP_10]: () => {
+        editorService.move(0, -10);
+      },
+      [KeyBindingCommand.MOVE_DOWN_10]: () => {
+        editorService.move(0, 10);
+      },
+      [KeyBindingCommand.MOVE_LEFT_10]: () => {
+        editorService.move(-10, 0);
+      },
+      [KeyBindingCommand.MOVE_RIGHT_10]: () => {
+        editorService.move(10, 0);
+      },
+      [KeyBindingCommand.SWITCH_NODE]: () => {
+        editorService.selectNextNode();
+      }
+    };
+    registeCommand(command, handler) {
+      this.commands[command] = handler;
+    }
+    unregisteCommand(command) {
+      delete this.commands[command];
+    }
+    registeEl(name, el) {
+      if (name !== "global" && !el) {
+        throw new Error("只有name为global可以不传el");
+      }
+      const keycon = new KeyController(el);
+      this.controllers.set(name, keycon);
+      this.bind(name);
+    }
+    unregisteEl(name) {
+      this.controllers.get(name)?.destroy();
+      this.controllers.delete(name);
+      this.bindingList.forEach((item) => {
+        item.binded = false;
+      });
+    }
+    registe(maps) {
+      for (const keybindingItem of maps) {
+        const { command, keybinding, when } = keybindingItem;
+        for (const [type = "", eventType = "keydown"] of when) {
+          const cacheItem = { type, command, keybinding, eventType, binded: false };
+          this.bindingList.push(cacheItem);
+        }
+      }
+      this.bind();
+    }
+    reset() {
+      this.controllers.forEach((keycon) => {
+        keycon.destroy();
+      });
+      this.controllers.clear();
+      this.bindingList = [];
+    }
+    destroy() {
+      this.reset();
+    }
+    bind(name) {
+      for (const item of this.bindingList) {
+        const { type, eventType, command, keybinding, binded } = item;
+        if (name && name !== type) {
+          continue;
+        }
+        if (binded) {
+          continue;
+        }
+        const keycon = this.controllers.get(type);
+        if (!keycon) {
+          continue;
+        }
+        const handler = (e) => {
+          e.inputEvent.preventDefault();
+          this.commands[command]?.(e.inputEvent);
+        };
+        this.getKeyconKeys(keybinding).forEach((keys) => {
+          if (keys[0]) {
+            keycon[eventType](keys, handler);
+          } else {
+            keycon[eventType](handler);
+          }
+        });
+        item.binded = true;
+      }
+    }
+    getKeyconKeys(keybinding = "") {
+      const splitKey = (key) => key.split("+").map((k) => k === "ctrl" ? this.ctrlKey : k);
+      if (Array.isArray(keybinding)) {
+        return keybinding.map((key) => splitKey(key));
+      }
+      return [splitKey(keybinding)];
+    }
+  }
+  const keybindingService = new Keybinding();
+
+  const keybindingConfig = [
+    {
+      command: KeyBindingCommand.DELETE_NODE,
+      keybinding: ["delete", "backspace"],
+      when: [
+        ["stage", "keyup"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.COPY_NODE,
+      keybinding: "ctrl+c",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.PASTE_NODE,
+      keybinding: "ctrl+v",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.CUT_NODE,
+      keybinding: "ctrl+x",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.UNDO,
+      keybinding: "ctrl+z",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.REDO,
+      keybinding: "ctrl+shift+z",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.MOVE_UP_1,
+      keybinding: "up",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_DOWN_1,
+      keybinding: "down",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_LEFT_1,
+      keybinding: "left",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_RIGHT_1,
+      keybinding: "right",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_UP_10,
+      keybinding: "ctrl+up",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_DOWN_10,
+      keybinding: "ctrl+down",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_LEFT_10,
+      keybinding: "ctrl+left",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_RIGHT_10,
+      keybinding: "ctrl+right",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.SWITCH_NODE,
+      keybinding: "tab",
+      when: [
+        ["stage", "keydown"],
+        ["layer-panel", "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_IN,
+      keybinding: ["ctrl+=", "ctrl+numpadplus"],
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_OUT,
+      keybinding: ["ctrl+-", "ctrl+numpad-"],
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_FIT,
+      keybinding: "ctrl+0",
+      when: [["stage", "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_RESET,
+      keybinding: "ctrl+1",
+      when: [["stage", "keydown"]]
+    }
+  ];
+
   const editorProps = {
     /** 页面初始值 */
     modelValue: {
@@ -7299,6 +8099,9 @@
     },
     disabledDragStart: {
       type: Boolean
+    },
+    extendFormState: {
+      type: Function
     }
   };
 
@@ -7307,6 +8110,9 @@
     id,
     name: codeBlock.name,
     isTarget: (key, value) => {
+      if (id === value) {
+        return true;
+      }
       if (value?.hookType === schema.HookType.CODE && !lodashEs.isEmpty(value.hookData)) {
         const index = value.hookData.findIndex((item) => item.codeId === id);
         return Boolean(index > -1);
@@ -7318,7 +8124,10 @@
     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, {
@@ -7328,7 +8137,8 @@
     propsService,
     eventsService,
     uiService,
-    codeBlockService
+    codeBlockService,
+    keybindingService
   }) => {
     vue.watch(
       () => props.modelValue,
@@ -7397,9 +8207,46 @@
       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: lodashEs.cloneDeep(node),
+              parentId: editorService.getParentById(node.id)?.id,
+              root: lodashEs.cloneDeep(root)
+            });
+          }
+        });
+      });
+    };
     const targetAddHandler = (target) => {
       if (target.type !== "data-source")
         return;
@@ -7417,8 +8264,16 @@
         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;
@@ -7486,14 +8341,20 @@
     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 = utils.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);
@@ -7501,6 +8362,8 @@
     vue.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);
@@ -7515,13 +8378,13 @@
   };
 
   const _sfc_main = vue.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"],
@@ -7536,10 +8399,13 @@
         storageService,
         codeBlockService,
         depService,
-        dataSourceService
+        dataSourceService,
+        keybindingService
       };
       initServiceEvents(props, emit, services);
       initServiceState(props, services);
+      keybindingService.registe(keybindingConfig);
+      keybindingService.registeEl("global");
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
       vue.provide(
@@ -7562,18 +8428,35 @@
     }
   });
 
+  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 = vue.resolveComponent("TMagicNavMenu");
     const _component_Sidebar = vue.resolveComponent("Sidebar");
     const _component_Workspace = vue.resolveComponent("Workspace");
     const _component_PropsPanel = vue.resolveComponent("PropsPanel");
     const _component_Framework = vue.resolveComponent("Framework");
-    return vue.openBlock(), vue.createBlock(_component_Framework, { "code-options": _ctx.codeOptions }, {
+    return vue.openBlock(), vue.createBlock(_component_Framework, null, {
+      header: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "header")
+      ]),
       nav: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
           vue.createVNode(_component_TMagicNavMenu, { data: _ctx.menu }, null, 8, ["data"])
         ])
       ]),
+      "content-before": vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "content-before")
+      ]),
+      "src-code": vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "src-code", { editorService: _ctx.editorService })
+      ]),
       sidebar: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
           vue.createVNode(_component_Sidebar, {
@@ -7633,27 +8516,35 @@
       "props-panel": vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
           vue.createVNode(_component_PropsPanel, {
+            "extend-state": _ctx.extendFormState,
             onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
           }, {
             "props-panel-header": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "props-panel-header")
             ]),
             _: 3
-          })
+          }, 8, ["extend-state"])
         ])
       ]),
       empty: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
       ]),
+      "content-after": vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "content-after")
+      ]),
+      footer: vue.withCtx(() => [
+        vue.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) => {
@@ -7661,46 +8552,54 @@
       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);
     }
   };
 
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockList = _sfc_main$g;
+  exports.CodeBlockList = _sfc_main$i;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$B;
-  exports.CodeSelectCol = _sfc_main$z;
+  exports.CodeSelect = _sfc_main$F;
+  exports.CodeSelectCol = _sfc_main$D;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$d;
-  exports.ContentMenu = _sfc_main$c;
-  exports.DataSourceFields = _sfc_main$y;
-  exports.EventSelect = _sfc_main$x;
+  exports.ComponentListPanel = _sfc_main$f;
+  exports.ContentMenu = _sfc_main$e;
+  exports.DataSourceFields = _sfc_main$C;
+  exports.DataSourceInput = _sfc_main$B;
+  exports.DataSourceSelect = _sfc_main$A;
+  exports.EventSelect = _sfc_main$z;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$A;
-  exports.KeyValue = _sfc_main$w;
+  exports.Icon = _sfc_main$E;
+  exports.KeyBindingCommand = KeyBindingCommand;
+  exports.KeyValue = _sfc_main$y;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$a;
+  exports.LayerPanel = _sfc_main$b;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$s;
-  exports.PropsPanel = _sfc_main$n;
-  exports.TMagicCodeEditor = _sfc_main$u;
+  exports.LayoutContainer = _sfc_main$u;
+  exports.PropsPanel = _sfc_main$p;
+  exports.Resizer = _sfc_main$v;
+  exports.SplitView = _sfc_main$u;
+  exports.TMagicCodeEditor = _sfc_main$w;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$p;
+  exports.ToolButton = _sfc_main$r;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.beforePaste = beforePaste;
   exports.change2Fixed = change2Fixed;
   exports.codeBlockService = codeBlockService;
+  exports.dataSourceService = dataSourceService;
   exports.debug = debug;
   exports.default = index;
   exports.depService = depService;