@tmagic/editor 1.3.0-alpha.8 → 1.3.0-alpha.9

package/dist/tmagic-editor.umd.cjs

@@ -23,7 +23,7 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -62,7 +62,7 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -136,7 +136,7 @@
     }
   });
 
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -201,8 +201,8 @@
     }
   });
 
-  const _hoisted_1$n = ["src"];
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = ["src"];
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -225,7 +225,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$n)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$o)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -244,9 +244,9 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-code-select-col" };
+  const _hoisted_1$n = { class: "m-fields-code-select-col" };
   const _hoisted_2$e = { class: "code-select-container" };
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -338,7 +338,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
@@ -346,7 +346,7 @@
               model: _ctx.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            vue.createVNode(_sfc_main$B, {
+            vue.createVNode(_sfc_main$D, {
               class: "icon",
               icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCode
@@ -362,9 +362,9 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$m = { class: "m-editor-data-source-fields" };
   const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -510,7 +510,7 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: filedColumns
@@ -543,10 +543,10 @@
     }
   });
 
-  const _hoisted_1$k = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_1$l = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$c = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$5 = { class: "el-input__inner" };
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
     },
@@ -765,10 +765,10 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$D, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$k, [
+            vue.createElementVNode("div", _hoisted_1$l, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
               vue.createElementVNode("span", _hoisted_2$c, vue.toDisplayString(item.value), 1)
             ])
@@ -800,7 +800,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$B, {
+              vue.createVNode(_sfc_main$D, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -811,12 +811,65 @@
     }
   });
 
-  const _hoisted_1$j = { class: "m-fields-event-select" };
+  const _sfc_main$z = /* @__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$k = { class: "m-fields-event-select" };
   const _hoisted_2$b = {
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorEventSelect"
     },
@@ -978,7 +1031,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -1029,9 +1082,9 @@
     }
   });
 
-  const _hoisted_1$i = { class: "m-fields-key-value" };
+  const _hoisted_1$j = { class: "m-fields-key-value" };
   const _hoisted_2$a = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -1074,7 +1127,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           (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",
@@ -1125,7 +1178,7 @@
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -1239,7 +1292,7 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -1260,10 +1313,14 @@
       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;
         }
@@ -1295,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;
@@ -1317,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);
@@ -1347,9 +1410,16 @@
         resizeObserver.disconnect();
       });
       __expose({
+        values,
         getEditor() {
           return vsEditor || vsDiffEditor;
         },
+        getVsEditor() {
+          return vsEditor;
+        },
+        getVsDiffEditor() {
+          return vsDiffEditor;
+        },
         setEditorValue,
         focus() {
           vsEditor?.focus();
@@ -1366,7 +1436,7 @@
     }
   });
 
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -1408,7 +1478,7 @@
     }
   });
 
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -1520,7 +1590,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$t, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$u, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -1529,7 +1599,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$t, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$u, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -3452,10 +3522,10 @@
     return stage;
   };
 
-  const _hoisted_1$h = { class: "m-editor-empty-panel" };
+  const _hoisted_1$i = { class: "m-editor-empty-panel" };
   const _hoisted_2$9 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -3475,14 +3545,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           vue.createElementVNode("div", _hoisted_2$9, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$D, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$4
             ])
@@ -3492,12 +3562,12 @@
     }
   });
 
-  const _hoisted_1$g = { class: "m-editor" };
+  const _hoisted_1$h = { 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$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -3563,18 +3633,18 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           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$u, {
+            vue.createVNode(_sfc_main$v, {
               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$s, {
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$t, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -3593,7 +3663,7 @@
             ]),
             center: vue.withCtx(() => [
               pageLength.value > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$r)
+                vue.createVNode(_sfc_main$s)
               ])
             ]),
             _: 2
@@ -3618,12 +3688,12 @@
     }
   });
 
-  const _hoisted_1$f = {
+  const _hoisted_1$g = {
     key: 1,
     class: "menu-item-text"
   };
   const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -3702,7 +3772,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, 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",
@@ -3716,7 +3786,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -3733,7 +3803,7 @@
               disabled: disabled.value
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -3783,7 +3853,7 @@
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -3945,7 +4015,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$p, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$q, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -3957,11 +4027,11 @@
     }
   });
 
-  const _hoisted_1$e = {
+  const _hoisted_1$f = {
     key: 0,
     class: "m-editor-props-panel"
   };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -4011,7 +4081,7 @@
       };
       __expose({ submit });
       return (_ctx, _cache) => {
-        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -4028,7 +4098,7 @@
     }
   });
 
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -4063,7 +4133,7 @@
     }
   });
 
-  const _hoisted_1$d = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_1$e = { xmlns: "http://www.w3.org/2000/svg" };
   const _hoisted_2$7 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
@@ -4077,19 +4147,19 @@
   const _hoisted_3$3 = [
     _hoisted_2$7
   ];
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAppManageIcon"
     },
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _hoisted_3$3);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _hoisted_3$3);
       };
     }
   });
 
-  const _hoisted_1$c = {
+  const _hoisted_1$d = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4099,19 +4169,19 @@
   const _hoisted_4$3 = [
     _hoisted_2$6
   ];
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _hoisted_4$3);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _hoisted_4$3);
       };
     }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$c = {
     key: 0,
     class: "m-editor-content-bottom"
   };
@@ -4119,7 +4189,7 @@
     key: 1,
     class: "m-editor-content-bottom"
   };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeDraftEditor"
     },
@@ -4206,7 +4276,7 @@
         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$v, {
             ref_key: "codeEditor",
             ref: codeEditor,
             class: "m-editor-container",
@@ -4215,7 +4285,7 @@
             language: _ctx.language,
             options: codeOptions.value
           }, null, 8, ["init-values", "language", "options"]),
-          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -4271,11 +4341,11 @@
     }
   });
 
-  const _hoisted_1$a = { class: "code-name-wrapper" };
+  const _hoisted_1$b = { class: "code-name-wrapper" };
   const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
   const _hoisted_3$2 = { class: "code-name-wrapper" };
   const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFunctionEditor"
     },
@@ -4291,7 +4361,7 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      vue.provide("mForm", {});
+      vue.provide("mForm", null);
       const defaultParamColConfig = {
         type: "row",
         label: "参数类型",
@@ -4398,7 +4468,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$a, [
+            vue.createElementVNode("div", _hoisted_1$b, [
               _hoisted_2$4,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 class: "code-name-input",
@@ -4421,7 +4491,7 @@
             ])
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$j, {
+            vue.createVNode(_sfc_main$k, {
               ref_key: "codeDraftEditor",
               ref: codeDraftEditor,
               id: _ctx.id,
@@ -4440,11 +4510,11 @@
     }
   });
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$a = {
     key: 0,
     class: "m-editor-code-block-editor-panel"
   };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -4501,16 +4571,16 @@
           "before-close": handleClose
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$s, {
+            vue.createVNode(_sfc_main$t, {
               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.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
                   vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
-                  codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
+                  codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
                     key: 0,
                     ref_key: "functionEditor",
                     ref: functionEditor,
@@ -4533,14 +4603,14 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "search-wrapper" };
+  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 _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -4636,8 +4706,8 @@
         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.createElementVNode("div", _hoisted_1$9, [
+                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -4672,11 +4742,11 @@
                   class: "list-container"
                 }, [
                   vue.createElementVNode("div", _hoisted_3$1, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
                       key: 0,
                       class: "codeIcon"
                     })) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
                       key: 1,
                       class: "compIcon"
                     })) : vue.createCommentVNode("", true),
@@ -4690,7 +4760,7 @@
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$B, {
+                          vue.createVNode(_sfc_main$D, {
                             icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -4705,7 +4775,7 @@
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$B, {
+                          vue.createVNode(_sfc_main$D, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4723,7 +4793,7 @@
               ]),
               _: 3
             }, 8, ["default-expanded-keys", "data"]),
-            isShowCodeBlockEditor.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+            isShowCodeBlockEditor.value ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
               key: 0,
               paramsColConfig: _ctx.paramsColConfig
             }, {
@@ -4739,7 +4809,7 @@
     }
   });
 
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -4831,21 +4901,21 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_1$8 = { class: "search-wrapper" };
   const _hoisted_2$2 = ["id"];
   const _hoisted_3 = { class: "list-item" };
   const _hoisted_4 = {
     key: 2,
     class: "right-tool"
   };
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__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,
@@ -4897,11 +4967,23 @@
       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$7, [
-              vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+            vue.createElementVNode("div", _hoisted_1$8, [
+              vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
               vue.createVNode(vue.unref(design.TMagicButton), {
                 type: "primary",
                 size: "small",
@@ -4922,7 +5004,8 @@
               "default-expand-all": "",
               "expand-on-click-node": false,
               data: list.value,
-              "highlight-current": true
+              "highlight-current": true,
+              onNodeClick: clickHandler
             }, {
               default: vue.withCtx(({ data }) => [
                 vue.createElementVNode("div", {
@@ -4930,12 +5013,12 @@
                   class: "list-container"
                 }, [
                   vue.createElementVNode("div", _hoisted_3, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                       key: 0,
                       class: "codeIcon",
                       icon: vue.unref(iconsVue.Coin)
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                       key: 1,
                       class: "compIcon",
                       icon: vue.unref(iconsVue.Aim)
@@ -4950,7 +5033,7 @@
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$B, {
+                          vue.createVNode(_sfc_main$D, {
                             class: "edit-icon",
                             icon: vue.unref(iconsVue.Edit),
                             onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -4964,7 +5047,7 @@
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$B, {
+                          vue.createVNode(_sfc_main$D, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -4982,7 +5065,7 @@
               ]),
               _: 3
             }, 8, ["data"]),
-            vue.createVNode(_sfc_main$f, {
+            vue.createVNode(_sfc_main$g, {
               ref_key: "editDialog",
               ref: editDialog,
               values: dataSourceValues.value,
@@ -4996,8 +5079,8 @@
     }
   });
 
-  const _hoisted_1$6 = ["onClick", "onDragstart"];
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7 = ["onClick", "onDragstart"];
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
     },
@@ -5031,14 +5114,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: ")
+            })
           );
         }
       };
@@ -5066,7 +5148,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, {
@@ -5077,7 +5159,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$n, { 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), {
@@ -5085,7 +5167,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$D, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -5100,7 +5182,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$B, {
+                              vue.createVNode(_sfc_main$D, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -5114,7 +5196,7 @@
                                 _: 2
                               }, 1032, ["content"])
                             ])
-                          ], 40, _hoisted_1$6);
+                          ], 40, _hoisted_1$7);
                         }), 128))
                       ]),
                       _: 2
@@ -5131,7 +5213,7 @@
     }
   });
 
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorContentMenu"
     },
@@ -5228,7 +5310,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$p, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$q, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -5255,7 +5337,7 @@
     }
   });
 
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -5350,7 +5432,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$d, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -5360,6 +5442,57 @@
     }
   });
 
+  const _hoisted_1$6 = { class: "layer-node-tool" };
+  const _sfc_main$b = /* @__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$6, [
+            _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 _hoisted_1$5 = ["id", "onMouseenter"];
   const throttleTime = 150;
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
@@ -5600,7 +5733,7 @@
         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.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
             values.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
               key: 0,
               class: "magic-editor-layer-tree",
@@ -5640,14 +5773,14 @@
                     node,
                     data
                   }, () => [
-                    vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
+                    vue.createVNode(_sfc_main$b, { data }, null, 8, ["data"])
                   ])
                 ], 40, _hoisted_1$5)
               ]),
               _: 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$c, {
                 ref_key: "menu",
                 ref: menu,
                 "layer-content-menu": _ctx.layerContentMenu
@@ -5685,7 +5818,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$d,
+            component: _sfc_main$e,
             slots: {}
           },
           layer: {
@@ -5704,7 +5837,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$g,
+            component: _sfc_main$h,
             slots: {}
           },
           "data-source": {
@@ -5712,7 +5845,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$e,
+            component: _sfc_main$f,
             slots: {}
           }
         };
@@ -5744,7 +5877,7 @@
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5972,14 +6105,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$D, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$D, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -5995,7 +6128,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$D, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -6067,7 +6200,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$q, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -6075,7 +6208,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$p, {
+                        vue.createVNode(_sfc_main$q, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -6566,7 +6699,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$d, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -6667,9 +6800,9 @@
       };
       const dragoverHandler = (e) => {
         e.preventDefault();
-        if (e.dataTransfer) {
-          e.dataTransfer.dropEffect = "move";
-        }
+        if (!e.dataTransfer)
+          return;
+        e.dataTransfer.dropEffect = "move";
       };
       const dropHandler = async (e) => {
         e.preventDefault();
@@ -6681,7 +6814,12 @@
         }
         if (e.dataTransfer && parent && stageContainer.value && stage) {
           const parseDSL = getConfig("parseDSL");
-          const config = parseDSL(`(${e.dataTransfer.getData("data")})`);
+          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;
@@ -7881,6 +8019,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);
@@ -7892,7 +8033,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, {
@@ -8145,11 +8289,11 @@
   const _sfc_main = vue.defineComponent({
     name: "MEditor",
     components: {
-      TMagicNavMenu: _sfc_main$o,
+      TMagicNavMenu: _sfc_main$p,
       Sidebar: _sfc_main$9,
       Workspace: _sfc_main$1,
-      PropsPanel: _sfc_main$n,
-      Framework: _sfc_main$q
+      PropsPanel: _sfc_main$o,
+      Framework: _sfc_main$r
     },
     props: editorProps,
     emits: ["props-panel-mounted", "update:modelValue"],
@@ -8316,47 +8460,49 @@
       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$D);
-      app.component("m-fields-vs-code", _sfc_main$E);
-      app.component("magic-code-editor", _sfc_main$u);
-      app.component("m-fields-code-select", _sfc_main$C);
-      app.component("m-fields-code-select-col", _sfc_main$A);
-      app.component("m-fields-event-select", _sfc_main$x);
-      app.component("m-fields-data-source-fields", _sfc_main$z);
-      app.component("m-fields-key-value", _sfc_main$w);
-      app.component("m-fields-data-source-input", _sfc_main$y);
+      app.component("m-fields-ui-select", _sfc_main$w);
+      app.component("m-fields-code-link", _sfc_main$F);
+      app.component("m-fields-vs-code", _sfc_main$G);
+      app.component("magic-code-editor", _sfc_main$v);
+      app.component("m-fields-code-select", _sfc_main$E);
+      app.component("m-fields-code-select-col", _sfc_main$C);
+      app.component("m-fields-event-select", _sfc_main$y);
+      app.component("m-fields-data-source-fields", _sfc_main$B);
+      app.component("m-fields-key-value", _sfc_main$x);
+      app.component("m-fields-data-source-input", _sfc_main$A);
+      app.component("m-fields-data-source-select", _sfc_main$z);
     }
   };
 
   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$h;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$C;
-  exports.CodeSelectCol = _sfc_main$A;
+  exports.CodeSelect = _sfc_main$E;
+  exports.CodeSelectCol = _sfc_main$C;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$d;
-  exports.ContentMenu = _sfc_main$c;
-  exports.DataSourceFields = _sfc_main$z;
-  exports.DataSourceInput = _sfc_main$y;
-  exports.EventSelect = _sfc_main$x;
+  exports.ComponentListPanel = _sfc_main$e;
+  exports.ContentMenu = _sfc_main$d;
+  exports.DataSourceFields = _sfc_main$B;
+  exports.DataSourceInput = _sfc_main$A;
+  exports.DataSourceSelect = _sfc_main$z;
+  exports.EventSelect = _sfc_main$y;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$B;
+  exports.Icon = _sfc_main$D;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$w;
+  exports.KeyValue = _sfc_main$x;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$a;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$s;
-  exports.PropsPanel = _sfc_main$n;
-  exports.Resizer = _sfc_main$t;
-  exports.SplitView = _sfc_main$s;
-  exports.TMagicCodeEditor = _sfc_main$u;
+  exports.LayoutContainer = _sfc_main$t;
+  exports.PropsPanel = _sfc_main$o;
+  exports.Resizer = _sfc_main$u;
+  exports.SplitView = _sfc_main$t;
+  exports.TMagicCodeEditor = _sfc_main$v;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$p;
+  exports.ToolButton = _sfc_main$q;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.beforePaste = beforePaste;
   exports.change2Fixed = change2Fixed;