From 53da15dfd748b74b66e7dbe06eab0b2b0e58c4bb Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 29 Nov 2024 18:56:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=BF=9E=E7=BB=AD=E8=AE=BE=E7=BD=AE=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E7=94=9F=E6=95=88=E7=9B=AE=E6=A0=87=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20#13237?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/visualization/DvSidebar.vue    | 23 +++++++++++-------
 .../views/chart/components/editor/index.vue   | 24 ++++++++++++-------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/core/core-frontend/src/components/visualization/DvSidebar.vue b/core/core-frontend/src/components/visualization/DvSidebar.vue
index 794780fae2..fc487bd23d 100644
--- a/core/core-frontend/src/components/visualization/DvSidebar.vue
+++ b/core/core-frontend/src/components/visualization/DvSidebar.vue
@@ -8,7 +8,7 @@ import Icon from '../icon-custom/src/Icon.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { canvasCollapse } = storeToRefs(dvMainStore)
 let componentNameEdit = ref(false)
-let inputComponentName = ref('')
+let inputComponentName = ref({ id: null, name: null })
 let componentNameInputAttr = ref(null)
 import dvInfoSvg from '@/assets/svg/dv-info.svg'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -75,25 +75,32 @@ const slideStyle = computed(() => {
 
 const closeEditComponentName = () => {
   componentNameEdit.value = false
-  if (!inputComponentName.value || !inputComponentName.value.trim()) {
+  if (props.element.id !== inputComponentName.value.id) {
     return
   }
-  if (inputComponentName.value.trim() === view.value.title) {
+  if (!inputComponentName.value.name || !inputComponentName.value.name.trim()) {
     return
   }
-  if (inputComponentName.value.trim().length > 64 || inputComponentName.value.trim().length < 2) {
+  if (inputComponentName.value.name.trim() === view.value.title) {
+    return
+  }
+  if (
+    inputComponentName.value.name.trim().length > 64 ||
+    inputComponentName.value.name.trim().length < 2
+  ) {
     ElMessage.warning('名称字段长度2-64个字符')
     editComponentName()
     return
   }
-  view.value.title = inputComponentName.value
-  inputComponentName.value = ''
+  view.value.title = inputComponentName.value.name
+  inputComponentName.value.name = ''
 }
 
 const editComponentName = () => {
   if (isViewTitle.value) {
     componentNameEdit.value = true
-    inputComponentName.value = view.value.title
+    inputComponentName.value.name = view.value.title
+    inputComponentName.value.id = view.value.id
     nextTick(() => {
       componentNameInputAttr.value.focus()
     })
@@ -175,7 +182,7 @@ const onComponentNameChange = () => {
     <Teleport v-if="componentNameEdit" :to="'#attr-slide-component-name' + slideIndex">
       <input
         ref="componentNameInputAttr"
-        v-model="inputComponentName"
+        v-model="inputComponentName.name"
         width="100%"
         :effect="themeInfo"
         @change="onComponentNameChange"
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index a1384a061c..d8906e6a33 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -89,7 +89,7 @@ const {
 } = storeToRefs(dvMainStore)
 const router = useRouter()
 let componentNameEdit = ref(false)
-let inputComponentName = ref('')
+let inputComponentName = ref({ id: null, name: null })
 let componentNameInput = ref(null)
 
 const { t } = useI18n()
@@ -131,24 +131,32 @@ const onComponentNameChange = () => {
 
 const closeEditComponentName = () => {
   componentNameEdit.value = false
-  if (!inputComponentName.value || !inputComponentName.value.trim()) {
+  if (curComponent.value.id !== inputComponentName.value.id) {
     return
   }
-  if (inputComponentName.value.trim() === view.value.title) {
+  if (!inputComponentName.value.name || !inputComponentName.value.name.trim()) {
     return
   }
-  if (inputComponentName.value.trim().length > 64 || inputComponentName.value.trim().length < 2) {
+  if (inputComponentName.value.name.trim() === view.value.title) {
+    return
+  }
+  if (
+    inputComponentName.value.name.trim().length > 64 ||
+    inputComponentName.value.name.trim().length < 2
+  ) {
     ElMessage.warning('名称字段长度2-64个字符')
     editComponentName()
     return
   }
-  view.value.title = inputComponentName.value
-  inputComponentName.value = ''
+  view.value.title = inputComponentName.value.name
+  inputComponentName.value.name = ''
+  inputComponentName.value.id = ''
 }
 
 const editComponentName = () => {
   componentNameEdit.value = true
-  inputComponentName.value = view.value.title
+  inputComponentName.value.name = view.value.title
+  inputComponentName.value.id = view.value.id
   nextTick(() => {
     componentNameInput.value.focus()
   })
@@ -3873,7 +3881,7 @@ const deleteChartFieldItem = id => {
   <Teleport v-if="componentNameEdit" :to="'#component-name'">
     <input
       ref="componentNameInput"
-      v-model="inputComponentName"
+      v-model="inputComponentName.name"
       :effect="themes"
       width="100%"
       @change="onComponentNameChange"