From de52ff4fe100cb11b73865703b03a0cbcc4e92e7 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 24 Apr 2025 14:02:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=BC=96=E8=BE=91=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90/=E4=BB=A3=E7=A0=81=E5=9D=97=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=88=97=E8=A1=A8=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sidebar/code-block/CodeBlockListPanel.vue |  7 +++--
 .../data-source/DataSourceListPanel.vue       | 27 +++++++++----------
 2 files changed, 16 insertions(+), 18 deletions(-)

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) => {