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

package/dist/tmagic-editor.js

@@ -3,8 +3,8 @@ import serialize from 'serialize-javascript';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
 import { TMagicCard, TMagicIcon, TMagicButton, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
 import { HookType, ActionType, NodeType } from '@tmagic/schema';
-import { Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, Files, CopyDocument, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
-import { createValues, MFormDialog, MForm } from '@tmagic/form';
+import { Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, Files, CopyDocument, Hide, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { createValues, MFormDialog, MSelect, MForm } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
@@ -14,7 +14,7 @@ import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -53,7 +53,7 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -127,7 +127,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -192,8 +192,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = ["src"];
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = ["src"];
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -216,7 +216,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$n)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$o)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -235,9 +235,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -329,7 +329,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -337,7 +337,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          createVNode(_sfc_main$B, {
+          createVNode(_sfc_main$D, {
             class: "icon",
             icon: editable.value ? unref(Edit) : unref(View),
             onClick: editCode
@@ -353,9 +353,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -501,7 +501,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: filedColumns
@@ -534,10 +534,10 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
   },
@@ -563,7 +563,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
     const setDisplayState = () => {
       displayState.value = [];
-      const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+      const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
       let index = 0;
       for (const match of matches) {
         if (typeof match.index === "undefined")
@@ -636,13 +636,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       }
       return selectionStart;
     };
-    const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+    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 > -1) {
+      } 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));
       }
@@ -694,7 +694,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       const selectionStart = getSelectionStart();
       const curQueryString = queryString.substring(0, selectionStart);
       const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
-      const dsKeyStringLastIndex = curQueryString.lastIndexOf("{");
+      const dsKeyStringLastIndex = curQueryString.lastIndexOf("${") + 1;
       const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
       if (isFieldTip) {
         fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
@@ -707,7 +707,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       const selectionStart = input.value?.selectionStart || 0;
       let startText = inputText.substring(0, selectionStart);
       const dotIndex = startText.lastIndexOf(".");
-      const leftCurlyBracketIndex = startText.lastIndexOf("{");
+      const leftCurlyBracketIndex = startText.lastIndexOf("${") + 1;
       const endText = inputText.substring(selectionStart);
       let suggestText = value;
       if (isDataSource) {
@@ -717,7 +717,6 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         if (!isRightCurlyBracket(selectionStart + 1)) {
           suggestText = `${suggestText}}`;
         }
-        suggestText = `{${suggestText}}`;
       } else if (!curCharIsDot(dotIndex)) {
         startText = startText.substring(0, dotIndex + 1);
       }
@@ -725,7 +724,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       await nextTick();
       let newSelectionStart = 0;
       if (isDataSource) {
-        newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+        newSelectionStart = leftCurlyBracketIndex + suggestText.length;
       } else {
         newSelectionStart = dotIndex + suggestText.length + 1;
       }
@@ -757,10 +756,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$B, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$D, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$k, [
+          createElementVNode("div", _hoisted_1$l, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
             createElementVNode("span", _hoisted_2$c, toDisplayString(item.value), 1)
           ])
@@ -768,11 +767,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         _: 1
       }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
         key: 1,
-        class: normalizeClass(`el-input el-input--${_ctx.size}`),
+        class: normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
         onMouseup: mouseupHandler
       }, [
         createElementVNode("div", {
-          class: normalizeClass(`el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+          class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
           createElementVNode("div", _hoisted_3$5, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
@@ -791,7 +790,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   _: 2
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
-            }), 256))
+            }), 256)),
+            createVNode(_sfc_main$D, {
+              class: "tmagic-data-source-input-icon",
+              icon: unref(Coin)
+            }, null, 8, ["icon"])
           ])
         ], 2)
       ], 34));
@@ -799,12 +802,65 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-fields-event-select" };
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceSelect"
+  },
+  __name: "DataSourceSelect",
+  props: {
+    config: {},
+    model: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean, default: false },
+    lastValues: {},
+    size: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { dataSourceService } = inject("services") || {};
+    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const selectConfig = computed(() => {
+      const { type, dataSourceType, ...config } = props.config;
+      return {
+        ...config,
+        type: "select",
+        valueKey: "dataSourceId",
+        options: dataSources.value.filter((ds) => !dataSourceType || ds.type === dataSourceType).map((ds) => ({
+          value: {
+            isBindDataSource: true,
+            dataSourceType: ds.type,
+            dataSourceId: ds.id
+          },
+          text: ds.title || ds.id
+        }))
+      };
+    });
+    const changeHandler = (value) => {
+      emit("change", value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MSelect), {
+        model: _ctx.model,
+        name: _ctx.name,
+        size: _ctx.size,
+        prop: _ctx.prop,
+        disabled: _ctx.disabled,
+        config: selectConfig.value,
+        "last-values": _ctx.lastValues,
+        onChange: changeHandler
+      }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]);
+    };
+  }
+});
+
+const _hoisted_1$k = { class: "m-fields-event-select" };
 const _hoisted_2$b = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorEventSelect"
   },
@@ -966,7 +1022,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -1017,9 +1073,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { class: "m-fields-key-value" };
+const _hoisted_1$j = { class: "m-fields-key-value" };
 const _hoisted_2$a = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -1062,7 +1118,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -1113,7 +1169,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -1227,7 +1283,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -1248,10 +1304,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     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;
       }
@@ -1283,7 +1343,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
       return vsEditor?.setValue(values.value);
     };
-    const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+    const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
     const init = async () => {
       if (!codeEditor.value)
         return;
@@ -1305,12 +1365,18 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
           e.preventDefault();
           e.stopPropagation();
-          emit("save", getEditorValue());
+          const newValue = getEditorValue();
+          values.value = newValue;
+          emit("save", newValue);
         }
       });
       if (props.type !== "diff" && props.autoSave) {
         vsEditor?.onDidBlurEditorWidget(() => {
-          emit("save", getEditorValue());
+          const newValue = getEditorValue();
+          if (values.value !== newValue) {
+            values.value = newValue;
+            emit("save", newValue);
+          }
         });
       }
       resizeObserver.observe(codeEditor.value);
@@ -1335,9 +1401,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       resizeObserver.disconnect();
     });
     __expose({
+      values,
       getEditor() {
         return vsEditor || vsDiffEditor;
       },
+      getVsEditor() {
+        return vsEditor;
+      },
+      getVsDiffEditor() {
+        return vsDiffEditor;
+      },
       setEditorValue,
       focus() {
         vsEditor?.focus();
@@ -1354,7 +1427,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -1396,7 +1469,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -1501,14 +1574,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ref: el,
         class: "m-editor-layout"
       }, [
-        hasLeft.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        hasLeft.value && _ctx.$slots.left ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
             style: normalizeStyle(`width: ${_ctx.left}px`)
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$t, { onChange: changeLeft })
+          createVNode(_sfc_main$u, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -1516,8 +1589,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "center")
         ], 6),
-        hasRight.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$t, { onChange: changeRight }),
+        hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createVNode(_sfc_main$u, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -1610,6 +1683,40 @@ const fillConfig$1 = (config = []) => [
                   }
                 ]
               },
+              {
+                type: "fieldset",
+                legend: "边框",
+                items: [
+                  {
+                    name: "borderWidth",
+                    text: "宽度",
+                    defaultValue: "0"
+                  },
+                  {
+                    name: "borderColor",
+                    text: "颜色",
+                    type: "colorPicker"
+                  },
+                  {
+                    name: "borderStyle",
+                    text: "样式",
+                    type: "select",
+                    defaultValue: "none",
+                    options: [
+                      { text: "none", value: "none" },
+                      { text: "hidden", value: "hidden" },
+                      { text: "dotted", value: "dotted" },
+                      { text: "dashed", value: "dashed" },
+                      { text: "solid", value: "solid" },
+                      { text: "double", value: "double" },
+                      { text: "groove", value: "groove" },
+                      { text: "ridge", value: "ridge" },
+                      { text: "inset", value: "inset" },
+                      { text: "outset", value: "outset" }
+                    ]
+                  }
+                ]
+              },
               {
                 type: "fieldset",
                 legend: "背景",
@@ -3406,10 +3513,10 @@ const useStage = (stageOptions) => {
   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__ */ createElementVNode("p", null, "新增页面", -1);
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -3429,14 +3536,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         createElementVNode("div", _hoisted_2$9, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$B, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$D, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$4
           ])
@@ -3446,12 +3553,12 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -3460,7 +3567,6 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
-    const nodes = computed(() => editorService?.get("nodes") || []);
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
     const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
@@ -3518,18 +3624,18 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         renderSlot(_ctx.$slots, "header"),
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$u, {
+          createVNode(_sfc_main$v, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), createBlock(_sfc_main$s, {
+        ]) : (openBlock(), createBlock(_sfc_main$t, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -3548,12 +3654,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$r)
+              createVNode(_sfc_main$s)
             ])
           ]),
           _: 2
         }, [
-          pageLength.value > 0 && nodes.value.length === 1 ? {
+          pageLength.value > 0 ? {
             name: "right",
             fn: withCtx(() => [
               createVNode(unref(TMagicScrollbar), null, {
@@ -3573,12 +3679,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -3657,7 +3763,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$g, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -3671,7 +3777,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$B, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$D, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -3688,7 +3794,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             disabled: disabled.value
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$B, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$D, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -3738,7 +3844,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -3900,7 +4006,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$p, {
+              return openBlock(), createBlock(_sfc_main$q, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -3912,8 +4018,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = { class: "m-editor-props-panel" };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = {
+  key: 0,
+  class: "m-editor-props-panel"
+};
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -3926,6 +4035,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
+    const nodes = computed(() => services?.editorService.get("nodes") || []);
     const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
@@ -3962,7 +4072,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     __expose({ submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -3974,12 +4084,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           config: curFormConfig.value,
           onChange: submit
         }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
-      ]);
+      ])) : createCommentVNode("", true);
     };
   }
 });
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -4014,7 +4124,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
@@ -4028,19 +4138,19 @@ const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("g", {
 const _hoisted_3$3 = [
   _hoisted_2$7
 ];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAppManageIcon"
   },
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_3$3);
+      return openBlock(), 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",
@@ -4050,19 +4160,19 @@ const _hoisted_2$6 = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1"
 const _hoisted_4$3 = [
   _hoisted_2$6
 ];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_4$3);
+      return openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_4$3);
     };
   }
 });
 
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   key: 0,
   class: "m-editor-content-bottom"
 };
@@ -4070,7 +4180,7 @@ const _hoisted_2$5 = {
   key: 1,
   class: "m-editor-content-bottom"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeDraftEditor"
   },
@@ -4157,7 +4267,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
       }, [
-        createVNode(_sfc_main$u, {
+        createVNode(_sfc_main$v, {
           ref_key: "codeEditor",
           ref: codeEditor,
           class: "m-editor-container",
@@ -4166,7 +4276,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           language: _ctx.language,
           options: codeOptions.value
         }, null, 8, ["init-values", "language", "options"]),
-        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -4222,11 +4332,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "code-name-wrapper" };
+const _hoisted_1$b = { class: "code-name-wrapper" };
 const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
 const _hoisted_3$2 = { class: "code-name-wrapper" };
 const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFunctionEditor"
   },
@@ -4242,7 +4352,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    provide("mForm", {});
+    provide("mForm", null);
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -4349,7 +4459,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
+          createElementVNode("div", _hoisted_1$b, [
             _hoisted_2$4,
             createVNode(unref(TMagicInput), {
               class: "code-name-input",
@@ -4372,7 +4482,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          createVNode(_sfc_main$j, {
+          createVNode(_sfc_main$k, {
             ref_key: "codeDraftEditor",
             ref: codeDraftEditor,
             id: _ctx.id,
@@ -4391,11 +4501,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   key: 0,
   class: "m-editor-code-block-editor-panel"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -4452,16 +4562,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         "before-close": handleClose
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$s, {
+          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: withCtx(() => [
-              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
-                codeConfig.value ? (openBlock(), createBlock(_sfc_main$i, {
+                codeConfig.value ? (openBlock(), createBlock(_sfc_main$j, {
                   key: 0,
                   ref_key: "functionEditor",
                   ref: functionEditor,
@@ -4484,14 +4594,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -4587,8 +4697,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$8, [
-              createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$9, [
+              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
@@ -4623,11 +4733,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 class: "list-container"
               }, [
                 createElementVNode("div", _hoisted_3$1, [
-                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$k, {
+                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$l, {
                     key: 0,
                     class: "codeIcon"
                   })) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$l, {
+                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$m, {
                     key: 1,
                     class: "compIcon"
                   })) : createCommentVNode("", true),
@@ -4641,7 +4751,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$B, {
+                        createVNode(_sfc_main$D, {
                           icon: editable.value ? unref(Edit) : unref(View),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -4656,7 +4766,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$B, {
+                        createVNode(_sfc_main$D, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4674,7 +4784,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["default-expanded-keys", "data"]),
-          isShowCodeBlockEditor.value ? (openBlock(), createBlock(_sfc_main$h, {
+          isShowCodeBlockEditor.value ? (openBlock(), createBlock(_sfc_main$i, {
             key: 0,
             paramsColConfig: _ctx.paramsColConfig
           }, {
@@ -4690,7 +4800,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -4782,21 +4892,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
   __name: "DataSourceListPanel",
   setup(__props) {
     const services = inject("services", {});
-    const { dataSourceService, depService } = inject("services") || {};
+    const { dataSourceService, depService, editorService } = inject("services") || {};
     const list = computed(
       () => Object.values(depService?.targets["data-source"] || {}).map((target) => ({
         id: target.id,
@@ -4848,11 +4958,23 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const filterTextChangeHandler = (val) => {
       tree.value?.filter(val);
     };
+    const selectComp = (compId) => {
+      const stage = editorService?.get("stage");
+      editorService?.select(compId);
+      stage?.select(compId);
+    };
+    const clickHandler = (data, node) => {
+      if (data.type === "node") {
+        selectComp(data.id);
+      } else if (data.type === "key") {
+        selectComp(node.parent.data.id);
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$7, [
-            createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+          createElementVNode("div", _hoisted_1$8, [
+            createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
             createVNode(unref(TMagicButton), {
               type: "primary",
               size: "small",
@@ -4873,7 +4995,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             "default-expand-all": "",
             "expand-on-click-node": false,
             data: list.value,
-            "highlight-current": true
+            "highlight-current": true,
+            onNodeClick: clickHandler
           }, {
             default: withCtx(({ data }) => [
               createElementVNode("div", {
@@ -4881,12 +5004,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 class: "list-container"
               }, [
                 createElementVNode("div", _hoisted_3, [
-                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$B, {
+                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$D, {
                     key: 0,
                     class: "codeIcon",
                     icon: unref(Coin)
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$B, {
+                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$D, {
                     key: 1,
                     class: "compIcon",
                     icon: unref(Aim)
@@ -4901,7 +5024,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$B, {
+                        createVNode(_sfc_main$D, {
                           class: "edit-icon",
                           icon: unref(Edit),
                           onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -4915,7 +5038,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$B, {
+                        createVNode(_sfc_main$D, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -4933,7 +5056,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["data"]),
-          createVNode(_sfc_main$f, {
+          createVNode(_sfc_main$g, {
             ref_key: "editDialog",
             ref: editDialog,
             values: dataSourceValues.value,
@@ -4947,8 +5070,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["onClick", "onDragstart"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = ["onClick", "onDragstart"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
   },
@@ -4982,14 +5105,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     const dragstartHandler = ({ text, type, data = {} }, e) => {
       if (e.dataTransfer) {
-        e.dataTransfer.effectAllowed = "move";
         e.dataTransfer.setData(
-          "data",
+          "text/html",
           serialize({
             name: text,
             type,
             ...data
-          }).replace(/"(\w+)":\s/g, "$1: ")
+          })
         );
       }
     };
@@ -5017,7 +5139,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
       if (timeout || !stage.value)
         return;
-      timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+      timeout = stage.value.delayedMarkContainer(e);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), null, {
@@ -5028,7 +5150,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -5036,7 +5158,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$B, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$D, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -5051,7 +5173,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$B, {
+                            createVNode(_sfc_main$D, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -5065,7 +5187,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               _: 2
                             }, 1032, ["content"])
                           ])
-                        ], 40, _hoisted_1$6);
+                        ], 40, _hoisted_1$7);
                       }), 128))
                     ]),
                     _: 2
@@ -5082,7 +5204,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
@@ -5179,7 +5301,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$p, {
+            return openBlock(), createBlock(_sfc_main$q, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -5206,7 +5328,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
@@ -5219,6 +5341,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
+    const nodes = computed(() => services?.editorService.get("nodes"));
     const isRoot = computed(() => node.value?.type === NodeType.ROOT);
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
@@ -5270,7 +5393,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         type: "button",
         text: "新增",
         icon: markRaw(Plus),
-        display: () => node.value?.items,
+        display: () => node.value?.items && nodes.value?.length === 1,
         items: getSubMenuData.value
       },
       {
@@ -5279,7 +5402,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         icon: markRaw(CopyDocument),
         display: () => !isRoot.value,
         handler: () => {
-          node.value && services?.editorService.copy(node.value);
+          node.value && services?.editorService.copy(nodes.value || []);
         }
       },
       {
@@ -5288,7 +5411,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         icon: markRaw(Delete),
         display: () => !isRoot.value && !isPage.value,
         handler: () => {
-          node.value && services?.editorService.remove(node.value);
+          node.value && services?.editorService.remove(nodes.value || []);
         }
       },
       ...props.layerContentMenu
@@ -5300,7 +5423,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
+      return openBlock(), createBlock(_sfc_main$d, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -5310,6 +5433,57 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$6 = { class: "layer-node-tool" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "LayerNode",
+  props: {
+    data: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const setNodeVisible = (visible) => {
+      if (!editorService)
+        return;
+      editorService.update({
+        id: props.data.id,
+        visible
+      });
+    };
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", null, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
+        createElementVNode("div", _hoisted_1$6, [
+          _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            _ctx.data.visible === false ? (openBlock(), createBlock(_component_el_icon, {
+              key: 0,
+              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
+              title: "点击显示"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(Hide))
+              ]),
+              _: 1
+            })) : (openBlock(), createBlock(_component_el_icon, {
+              key: 1,
+              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
+              class: "node-lock",
+              title: "点击隐藏"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(View))
+              ]),
+              _: 1
+            }))
+          ], 64)) : createCommentVNode("", true)
+        ])
+      ], 64);
+    };
+  }
+});
+
 const _hoisted_1$5 = ["id", "onMouseenter"];
 const throttleTime = 150;
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
@@ -5541,14 +5715,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
     const contextmenu = async (event, data) => {
       event.preventDefault();
-      await select(data);
+      if (nodes.value.length < 2) {
+        await select(data);
+      }
       menu.value?.show(event);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
+          createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
           values.value.length ? (openBlock(), createBlock(unref(TMagicTree), {
             key: 0,
             class: "magic-editor-layer-tree",
@@ -5588,14 +5764,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   node,
                   data
                 }, () => [
-                  createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+                  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"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$b, {
+            createVNode(_sfc_main$c, {
               ref_key: "menu",
               ref: menu,
               "layer-content-menu": _ctx.layerContentMenu
@@ -5633,7 +5809,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$d,
+          component: _sfc_main$e,
           slots: {}
         },
         layer: {
@@ -5652,7 +5828,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$g,
+          component: _sfc_main$h,
           slots: {}
         },
         "data-source": {
@@ -5660,7 +5836,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$e,
+          component: _sfc_main$f,
           slots: {}
         }
       };
@@ -5692,7 +5868,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$B, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$D, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5920,14 +6096,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$B, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$D, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$B, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$D, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         pageLength.value ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -5943,7 +6119,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$B, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$D, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -6015,7 +6191,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$p, {
+                      createVNode(_sfc_main$q, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -6023,7 +6199,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$p, {
+                      createVNode(_sfc_main$q, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -6514,7 +6690,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
+      return openBlock(), createBlock(_sfc_main$d, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -6615,9 +6791,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
     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();
@@ -6629,7 +6805,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
       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;
@@ -7829,6 +8010,9 @@ const createCodeBlockTarget = (id, codeBlock) => new Target({
   id,
   name: codeBlock.name,
   isTarget: (key, value) => {
+    if (id === value) {
+      return true;
+    }
     if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
       const index = value.hookData.findIndex((item) => item.codeId === id);
       return Boolean(index > -1);
@@ -7840,7 +8024,10 @@ const createDataSourceTarget = (id, ds) => new Target({
   type: "data-source",
   id,
   name: ds.title || `${id}`,
-  isTarget: (key, value) => typeof value === "string" && value.includes(`${id}`)
+  isTarget: (key, value) => (
+    // 关联数据源对象或者在模板在使用数据源
+    value.isBindDataSource && value.dataSourceId || typeof value === "string" && value.includes(`${id}`)
+  )
 });
 
 const initServiceState = (props, {
@@ -8093,11 +8280,11 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
 const _sfc_main = 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"],
@@ -8264,18 +8451,19 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component("m-fields-ui-select", _sfc_main$v);
-    app.component("m-fields-code-link", _sfc_main$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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, KeyBindingCommand, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$s as SplitView, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$h as CodeBlockList, CodeDeleteErrorType, _sfc_main$E as CodeSelect, _sfc_main$C as CodeSelectCol, ColumnLayout, _sfc_main$e as ComponentListPanel, _sfc_main$d as ContentMenu, _sfc_main$B as DataSourceFields, _sfc_main$A as DataSourceInput, _sfc_main$z as DataSourceSelect, _sfc_main$y as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$D as Icon, KeyBindingCommand, _sfc_main$x as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$t as LayoutContainer, _sfc_main$o as PropsPanel, _sfc_main$u as Resizer, _sfc_main$t as SplitView, _sfc_main$v as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$q as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map