feat(editor): 编辑代码块/数据源时高亮列表中对应的项

packages/editor/src/components/CodeBlockEditor.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, Ref, ref, useTemplateRef } from 'vue';
+import { computed, inject, nextTick, Ref, ref, useTemplateRef, watch } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
@@ -95,6 +95,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   submit: [values: CodeBlockContent, eventData: ContainerChangeEventData];
+  close: [];
+  open: [];
 }>();
 
 const { codeBlockService, uiService } = useServices();
@@ -261,6 +263,16 @@ const closedHandler = () => {
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 
+watch(boxVisible, (visible) => {
+  nextTick(() => {
+    if (!visible) {
+      emit('close');
+    } else {
+      emit('open');
+    }
+  });
+});
+
 defineExpose({
   async show() {
     calcBoxPosition();

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -173,6 +173,7 @@ const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
 };
 
 defineExpose({
+  nodeStatusMap,
   filter: filterTextChangeHandler,
   deleteCode,
 });

packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -32,6 +32,8 @@
     :disabled="!editable"
     :content="codeConfig"
     @submit="submitCodeBlockHandler"
+    @close="editDialogCloseHandler"
+    @open="editDialogOpenHandler"
   ></CodeBlockEditor>
 
   <Teleport to="body">
@@ -87,7 +89,7 @@ const { codeBlockService } = useServices();
 
 const editable = computed(() => codeBlockService.getEditStatus());
 
-const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
+const { codeId, codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
 const codeBlockListRef = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
@@ -100,6 +102,22 @@ eventBus?.on('edit-code', (id: string) => {
   editCode(id);
 });
 
+const editDialogOpenHandler = () => {
+  if (codeBlockListRef.value) {
+    for (const [statusId, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
+      status.selected = statusId === codeId.value;
+    }
+  }
+};
+
+const editDialogCloseHandler = () => {
+  if (codeBlockListRef.value) {
+    for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
+      status.selected = false;
+    }
+  }
+};
+
 const {
   nodeContentMenuHandler,
   menuData: contentMenuData,

packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, Ref, ref, watchEffect } from 'vue';
+import { inject, nextTick, Ref, ref, watch, watchEffect } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
@@ -48,6 +48,8 @@ const width = defineModel<number>('width', { default: 670 });
 
 const emit = defineEmits<{
   submit: [v: any, eventData: ContainerChangeEventData];
+  close: [];
+  open: [id: string];
 }>();
 
 const { uiService, dataSourceService } = useServices();
@@ -73,6 +75,16 @@ const errorHandler = (error: any) => {
   tMagicMessage.error(error.message);
 };
 
+watch(boxVisible, (visible) => {
+  nextTick(() => {
+    if (!visible) {
+      emit('close');
+    } else if (initValues.value?.id) {
+      emit('open', initValues.value.id);
+    }
+  });
+});
+
 defineExpose({
   show() {
     calcBoxPosition();

packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -178,6 +178,7 @@ const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
 };
 
 defineExpose({
+  nodeStatusMap,
   filter: filterTextChangeHandler,
 });
 </script>

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -45,6 +45,8 @@
     :values="dataSourceValues"
     :title="dialogTitle"
     @submit="submitDataSourceHandler"
+    @close="editDialogCloseHandler"
+    @open="editDialogOpenHandler"
   ></DataSourceConfigPanel>
 
   <Teleport to="body">
@@ -93,6 +95,22 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
+const editDialogOpenHandler = (id: string) => {
+  if (dataSourceList.value) {
+    for (const [statusId, status] of dataSourceList.value.nodeStatusMap.entries()) {
+      status.selected = statusId === id;
+    }
+  }
+};
+
+const editDialogCloseHandler = () => {
+  if (dataSourceList.value) {
+    for (const [, status] of dataSourceList.value.nodeStatusMap.entries()) {
+      status.selected = false;
+    }
+  }
+};
+
 const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },