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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.7",
+  "version": "1.3.0-alpha.9",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,27 +46,27 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.7",
-    "@tmagic/design": "1.3.0-alpha.7",
-    "@tmagic/form": "1.3.0-alpha.7",
-    "@tmagic/schema": "1.3.0-alpha.7",
-    "@tmagic/stage": "1.3.0-alpha.7",
-    "@tmagic/table": "1.3.0-alpha.7",
-    "@tmagic/utils": "1.3.0-alpha.7",
+    "@tmagic/core": "1.3.0-alpha.9",
+    "@tmagic/design": "1.3.0-alpha.9",
+    "@tmagic/form": "1.3.0-alpha.9",
+    "@tmagic/schema": "1.3.0-alpha.9",
+    "@tmagic/stage": "1.3.0-alpha.9",
+    "@tmagic/table": "1.3.0-alpha.9",
+    "@tmagic/utils": "1.3.0-alpha.9",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.34.0",
+    "monaco-editor": "^0.39.0",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.7",
-    "@tmagic/form": "1.3.0-alpha.7",
-    "monaco-editor": "^0.34.0",
+    "@tmagic/design": "1.3.0-alpha.9",
+    "@tmagic/form": "1.3.0-alpha.9",
+    "monaco-editor": "^0.39.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {

package/src/components/FunctionEditor.vue

@@ -49,7 +49,7 @@ defineOptions({
   name: 'MEditorFunctionEditor',
 });
 
-provide('mForm', {});
+provide('mForm', null);
 
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',

package/src/components/SplitView.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="el" class="m-editor-layout">
-    <template v-if="hasLeft">
+    <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
       </div>
@@ -11,7 +11,7 @@
       <slot name="center"></slot>
     </div>
 
-    <template v-if="hasRight">
+    <template v-if="hasRight && $slots.right">
       <Resizer @change="changeRight"></Resizer>
       <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
         <slot name="right"></slot>

package/src/fields/DataSourceInput.vue

@@ -30,13 +30,15 @@
       </div>
     </template>
   </component>
-  <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
-    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+    <div :class="`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
       <div class="el-input__inner">
         <template v-for="(item, index) in displayState">
           <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
           <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
         </template>
+
+        <Icon class="tmagic-data-source-input-icon" :icon="Coin" />
       </div>
     </div>
   </div>
@@ -90,7 +92,7 @@ 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') break;
@@ -195,7 +197,7 @@ const getSelectionStart = () => {
  * @param leftCurlyBracketIndex {字符索引
  */
 const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
-  leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+  leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
 
 /**
  * 当前输入的是.
@@ -213,7 +215,7 @@ const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (
   if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
     // 当前输入的是{
     result = dataSources.value;
-  } else if (leftCurlyBracketIndex > -1) {
+  } else if (leftCurlyBracketIndex > 0) {
     // 当前输入的是{xx
     const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
     result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
@@ -299,7 +301,7 @@ const querySearch = (queryString: string, cb: (data: { value: string }[]) => voi
   const curQueryString = queryString.substring(0, selectionStart);
 
   const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
-  const dsKeyStringLastIndex = curQueryString.lastIndexOf('{');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('${') + 1;
 
   const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
 
@@ -321,7 +323,7 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
   let startText = inputText.substring(0, selectionStart);
 
   const dotIndex = startText.lastIndexOf('.');
-  const leftCurlyBracketIndex = startText.lastIndexOf('{');
+  const leftCurlyBracketIndex = startText.lastIndexOf('${') + 1;
 
   const endText = inputText.substring(selectionStart);
 
@@ -336,7 +338,6 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
     if (!isRightCurlyBracket(selectionStart + 1)) {
       suggestText = `${suggestText}}`;
     }
-    suggestText = `{${suggestText}}`;
   } else if (!curCharIsDot(dotIndex)) {
     startText = startText.substring(0, dotIndex + 1);
   }
@@ -345,10 +346,10 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
 
   await nextTick();
 
-  // 由于选择数据源时会在后面补全}}, 所以光标要前移2位
+  // 由于选择数据源时会在后面补全}, 所以光标要前移2位
   let newSelectionStart = 0;
   if (isDataSource) {
-    newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length;
   } else {
     newSelectionStart = dotIndex + suggestText.length + 1;
   }

package/src/fields/DataSourceSelect.vue

@@ -0,0 +1,75 @@
+<template>
+  <MSelect
+    :model="model"
+    :name="name"
+    :size="size"
+    :prop="prop"
+    :disabled="disabled"
+    :config="selectConfig"
+    :last-values="lastValues"
+    @change="changeHandler"
+  ></MSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { FieldSize } from '@tmagic/design';
+import { MSelect, SelectConfig } from '@tmagic/form';
+
+import { Services } from '../type';
+
+defineOptions({
+  name: 'MEditorDataSourceSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-select';
+      name: string;
+      text: string;
+      placeholder: string;
+      dataSourceType?: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: FieldSize;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const selectConfig = computed<SelectConfig>(() => {
+  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: any) => {
+  emit('change', value);
+};
+</script>

package/src/index.ts

@@ -23,6 +23,7 @@ import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -53,6 +54,7 @@ export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
@@ -62,6 +64,7 @@ export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
+export { default as Resizer } from './components/Resizer.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -86,5 +89,6 @@ export default {
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
   },
 };

package/src/initService.ts

@@ -236,18 +236,22 @@ export const initServiceEvents = (
     }
   };
 
+  // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点删除，清除对齐的依赖收集
   const nodeRemoveHandler = (nodes: MNode[]) => {
     depService.clear(nodes);
   };
 
+  // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage) => {
     depService.collect([page], true);
   };

package/src/layouts/CodeEditor.vue

@@ -37,10 +37,14 @@ const emit = defineEmits(['initd', 'save']);
 const toString = (v: string | any, language: string): string => {
   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;
   }
@@ -81,7 +85,7 @@ const setEditorValue = (v: string | any, m: string | any) => {
 };
 
 const getEditorValue = () =>
-  props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+  (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
 const init = async () => {
   if (!codeEditor.value) return;
@@ -109,13 +113,19 @@ const init = async () => {
     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);
+      }
     });
   }
 
@@ -146,10 +156,20 @@ onUnmounted(() => {
 });
 
 defineExpose({
+  values,
+
   getEditor() {
     return vsEditor || vsDiffEditor;
   },
 
+  getVsEditor() {
+    return vsEditor;
+  },
+
+  getVsDiffEditor() {
+    return vsDiffEditor;
+  },
+
   setEditorValue,
 
   focus() {

package/src/layouts/Framework.vue

@@ -33,7 +33,7 @@
         </slot>
       </template>
 
-      <template v-if="pageLength > 0 && nodes.length === 1" #right>
+      <template v-if="pageLength > 0" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
@@ -68,7 +68,6 @@ const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('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'));

package/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel">
+  <div class="m-editor-props-panel" v-if="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
@@ -35,6 +35,7 @@ const configForm = ref<InstanceType<typeof MForm>>();
 const curFormConfig = ref<any>([]);
 const services = inject<Services>('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'));
 

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -83,14 +83,13 @@ const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
   if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData(
-      'data',
+      'text/html',
       serialize({
         name: text,
         type,
         ...data,
-      }).replace(/"(\w+)":\s/g, '$1: '),
+      }),
     );
   }
 };
@@ -121,6 +120,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+  timeout = stage.value.delayedMarkContainer(e);
 };
 </script>

package/src/layouts/sidebar/LayerMenu.vue

@@ -22,6 +22,7 @@ const props = defineProps<{
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 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() || []);
@@ -82,7 +83,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     type: 'button',
     text: '新增',
     icon: markRaw(Plus),
-    display: () => node.value?.items,
+    display: () => node.value?.items && nodes.value?.length === 1,
     items: getSubMenuData.value,
   },
   {
@@ -91,7 +92,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     icon: markRaw(CopyDocument),
     display: () => !isRoot.value,
     handler: () => {
-      node.value && services?.editorService.copy(node.value);
+      node.value && services?.editorService.copy(nodes.value || []);
     },
   },
   {
@@ -100,7 +101,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     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,

package/src/layouts/sidebar/LayerNode.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    {{ `${data.name} (${data.id})` }}
+  </div>
+  <div class="layer-node-tool">
+    <template v-if="data.type !== 'page'">
+      <el-icon v-if="data.visible === false" @click.stop="setNodeVisible(true)" title="点击显示">
+        <Hide />
+      </el-icon>
+      <el-icon v-else @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏">
+        <View />
+      </el-icon>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import { Hide, View } from '@element-plus/icons-vue';
+
+import { MNode } from '@tmagic/schema';
+
+import { Services } from '@editor/type';
+
+const props = defineProps<{
+  data: MNode;
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const setNodeVisible = (visible: boolean) => {
+  if (!editorService) return;
+
+  editorService.update({
+    id: props.data.id,
+    visible,
+  });
+};
+</script>

package/src/layouts/sidebar/LayerPanel.vue

@@ -35,9 +35,7 @@
       <template #default="{ node, data }">
         <div class="cus-tree-node" :id="data.id" @mouseenter="highlightHandler(data)">
           <slot name="layer-node-content" :node="node" :data="data">
-            <span>
-              {{ `${data.name} (${data.id})` }}
-            </span>
+            <LayerNode :data="data"></LayerNode>
           </slot>
         </div>
       </template>
@@ -63,6 +61,7 @@ import type { MenuButton, MenuComponent, Services } from '@editor/type';
 import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
+import LayerNode from './LayerNode.vue';
 
 defineOptions({
   name: 'MEditorLayerPanel',
@@ -350,7 +349,11 @@ const clickHandler = (data: MNode): void => {
 // 右键菜单
 const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
   event.preventDefault();
-  await select(data);
+
+  if (nodes.value.length < 2) {
+    await select(data);
+  }
+
   menu.value?.show(event);
 };
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -15,6 +15,7 @@
       :expand-on-click-node="false"
       :data="list"
       :highlight-current="true"
+      @node-click="clickHandler"
     >
       <template #default="{ data }">
         <div :id="data.id" class="list-container">
@@ -53,7 +54,7 @@ import { computed, inject, ref } from 'vue';
 import { Aim, Close, Coin, Edit } from '@element-plus/icons-vue';
 
 import { TMagicButton, tMagicMessageBox, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { DataSourceSchema } from '@tmagic/schema';
+import { DataSourceSchema, Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
@@ -66,7 +67,7 @@ defineOptions({
 });
 
 const services = inject<Partial<Services>>('services', {});
-const { dataSourceService, depService } = inject<Services>('services') || {};
+const { dataSourceService, depService, editorService } = inject<Services>('services') || {};
 
 const list = computed(() =>
   Object.values(depService?.targets['data-source'] || {}).map((target) => ({
@@ -131,4 +132,19 @@ const tree = ref<InstanceType<typeof TMagicTree>>();
 const filterTextChangeHandler = (val: string) => {
   tree.value?.filter(val);
 };
+
+// 选中组件
+const selectComp = (compId: Id) => {
+  const stage = editorService?.get('stage');
+  editorService?.select(compId);
+  stage?.select(compId);
+};
+
+const clickHandler = (data: any, node: any) => {
+  if (data.type === 'node') {
+    selectComp(data.id);
+  } else if (data.type === 'key') {
+    selectComp(node.parent.data.id);
+  }
+};
 </script>

package/src/layouts/workspace/Stage.vue

@@ -146,9 +146,8 @@ const contextmenuHandler = (e: MouseEvent) => {
 
 const dragoverHandler = (e: DragEvent) => {
   e.preventDefault();
-  if (e.dataTransfer) {
-    e.dataTransfer.dropEffect = 'move';
-  }
+  if (!e.dataTransfer) return;
+  e.dataTransfer.dropEffect = 'move';
 };
 
 const dropHandler = async (e: DragEvent) => {
@@ -164,7 +163,15 @@ const dropHandler = async (e: DragEvent) => {
 
   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();

package/src/services/dep.ts

@@ -262,6 +262,7 @@ export class Watcher extends EventEmitter {
     Object.values(this.targets).forEach((targets) => {
       Object.values(targets).forEach((target) => {
         nodes.forEach((node) => {
+          // 先删除原有依赖，重新收集
           target.removeDep(node);
           this.collectItem(node, target, deep);
         });

package/src/theme/data-source-input.scss

@@ -0,0 +1,18 @@
+.tmagic-data-source-input-text {
+  .el-input__wrapper.tmagic-data-source-input-text-wrapper {
+    overflow: hidden;
+    padding-right: 30px;
+  }
+
+  .el-input__inner {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .tmagic-data-source-input-icon {
+    position: absolute;
+    right: 7px;
+  }
+}

package/src/theme/layer-panel.scss

@@ -44,6 +44,12 @@
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+
+  .layer-node-tool {
+    margin-right: 15px;
+  }
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {

package/src/theme/theme.scss

@@ -19,4 +19,5 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-input.scss";
 @import "./key-value.scss";

package/src/utils/dep.ts

@@ -11,6 +11,10 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
     id,
     name: codeBlock.name,
     isTarget: (key: string | number, value: any) => {
+      if (id === value) {
+        return true;
+      }
+
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         const index = value.hookData.findIndex((item: HookData) => item.codeId === id);
         return Boolean(index > -1);
@@ -25,5 +29,7 @@ export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
     type: 'data-source',
     id,
     name: ds.title || `${id}`,
-    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+    isTarget: (key: string | number, value: any) =>
+      // 关联数据源对象或者在模板在使用数据源
+      (value.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
   });