diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
index 945c8274..428ccec7 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
@@ -33,7 +33,6 @@
     :content="codeConfig"
     @submit="submitCodeBlockHandler"
     @close="editDialogCloseHandler"
-    @open="editDialogOpenHandler"
   ></CodeBlockEditor>
 
   <Teleport to="body">
@@ -48,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef } from 'vue';
+import { computed, inject, useTemplateRef, watch } from 'vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
@@ -102,13 +101,13 @@ eventBus?.on('edit-code', (id: string) => {
   editCode(id);
 });
 
-const editDialogOpenHandler = () => {
+watch(codeId, () => {
   if (codeBlockListRef.value) {
     for (const [statusId, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
       status.selected = statusId === codeId.value;
     }
   }
-};
+});
 
 const editDialogCloseHandler = () => {
   if (codeBlockListRef.value) {
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index 2c51df49..a8bff216 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -46,7 +46,6 @@
     :title="dialogTitle"
     @submit="submitDataSourceHandler"
     @close="editDialogCloseHandler"
-    @open="editDialogOpenHandler"
   ></DataSourceConfigPanel>
 
   <Teleport to="body">
@@ -61,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { TMagicButton, tMagicMessageBox, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
@@ -95,22 +94,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()) {
+  if (dataSourceListRef.value) {
+    for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
       status.selected = false;
     }
   }
 };
 
+watch(dataSourceValues, (dataSourceValues) => {
+  if (dataSourceListRef.value && dataSourceValues.id) {
+    for (const [statusId, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
+      status.selected = statusId === dataSourceValues.id;
+    }
+  }
+});
+
 const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },
@@ -148,10 +147,10 @@ const removeHandler = async (id: string) => {
   dataSourceService.remove(id);
 };
 
-const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
+const dataSourceListRef = useTemplateRef<InstanceType<typeof DataSourceList>>('dataSourceList');
 
 const filterTextChangeHandler = (val: string) => {
-  dataSourceList.value?.filter(val);
+  dataSourceListRef.value?.filter(val);
 };
 
 eventBus?.on('edit-data-source', (id: string) => {