fix(仪表板、数据大屏): 仪表板、数据大屏更多的组件支持改名，且标题栏和图层栏名称保持一致 #14110

core/core-frontend/src/components/data-visualization/RealTimeGroup.vue

@@ -77,6 +77,7 @@ import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import circlePackingOrigin from '@/assets/svg/circle-packing-origin.svg'
 import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
+import { syncViewTitle } from '@/utils/canvasUtils'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
 
@@ -140,6 +141,7 @@ const closeEditComponentName = () => {
     return
   }
   curEditComponent.name = inputName.value
+  syncViewTitle(curEditComponent)
   inputName.value = ''
   curEditComponent = null
 }

core/core-frontend/src/components/data-visualization/RealTimeGroupInner.vue

@@ -61,8 +61,6 @@ import dvShow from '@/assets/svg/dv-show.svg'
 import dvUnlock from '@/assets/svg/dv-unlock.svg'
 import dvLock from '@/assets/svg/dv-lock.svg'
 import dvMore from '@/assets/svg/dv-more.svg'
-import dvExpandDown from '@/assets/svg/dv-expand-down.svg'
-import dvExpandRight from '@/assets/svg/dv-expand-right.svg'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
@@ -76,7 +74,7 @@ import ContextMenuAsideDetails from '@/components/data-visualization/canvas/Cont
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import circlePackingOrigin from '@/assets/svg/circle-packing-origin.svg'
-import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
+import { syncViewTitle } from '@/utils/canvasUtils'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
 
@@ -140,6 +138,7 @@ const closeEditComponentName = () => {
     return
   }
   curEditComponent.name = inputName.value
+  syncViewTitle(curEditComponent)
   inputName.value = ''
   curEditComponent = null
 }

core/core-frontend/src/components/data-visualization/RealTimeListTree.vue

@@ -81,7 +81,7 @@ import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/cont
 import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import circlePackingOrigin from '@/assets/svg/circle-packing-origin.svg'
-import { checkJoinGroup } from '@/utils/canvasUtils'
+import { checkJoinGroup, syncViewTitle } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
@@ -220,6 +220,7 @@ const closeEditComponentName = () => {
     return
   }
   curEditComponent.name = inputName.value
+  syncViewTitle(curEditComponent)
   inputName.value = ''
   curEditComponent = null
 }

core/core-frontend/src/components/data-visualization/RealTimeTab.vue

@@ -12,6 +12,7 @@ import draggable from 'vuedraggable'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import RealTimeGroup from '@/components/data-visualization/RealTimeGroup.vue'
 import eventBus from '@/utils/eventBus'
+import { syncViewTitle } from '@/utils/canvasUtils'
 
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
@@ -69,6 +70,7 @@ const closeEditComponentName = () => {
     return
   }
   curEditComponent.title = inputName.value
+  syncViewTitle(curEditComponent)
   inputName.value = ''
   curEditComponent = null
 }

core/core-frontend/src/components/visualization/DvSidebar.vue

@@ -61,7 +61,7 @@ const props = defineProps({
   title: String
 })
 
-const { width, asidePosition, sideName, themeInfo, view, themes } = toRefs(props)
+const { width, asidePosition, sideName, themeInfo, view, themes, element } = toRefs(props)
 const collapseChange = () => {
   canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
 }
@@ -81,7 +81,10 @@ const closeEditComponentName = () => {
   if (!inputComponentName.value.name || !inputComponentName.value.name.trim()) {
     return
   }
-  if (inputComponentName.value.name.trim() === view.value.title) {
+  if (
+    inputComponentName.value.name.trim() === view.value?.title ||
+    inputComponentName.value.name.trim() === element.value.name
+  ) {
     return
   }
   if (
@@ -92,19 +95,26 @@ const closeEditComponentName = () => {
     editComponentName()
     return
   }
-  view.value.title = inputComponentName.value.name
+  element.value.label = inputComponentName.value.name
+  element.value.name = inputComponentName.value.name
+  if (isViewTitle.value) {
+    view.value.title = inputComponentName.value.name
+  }
   inputComponentName.value.name = ''
 }
 
 const editComponentName = () => {
+  componentNameEdit.value = true
   if (isViewTitle.value) {
-    componentNameEdit.value = true
     inputComponentName.value.name = view.value.title
     inputComponentName.value.id = view.value.id
-    nextTick(() => {
-      componentNameInputAttr.value.focus()
-    })
+  } else {
+    inputComponentName.value.name = element.value.name
+    inputComponentName.value.id = element.value.id
   }
+  nextTick(() => {
+    componentNameInputAttr.value.focus()
+  })
 }
 
 const onComponentNameChange = () => {

core/core-frontend/src/custom-component/component-list.ts

@@ -282,8 +282,8 @@ const list = [
   },
   {
     component: 'VQuery',
-    name: t('visualization.query'),
-    label: t('visualization.query'),
+    name: t('visualization.query_component'),
+    label: t('visualization.query_component'),
     propValue: '',
     icon: 'icon_search',
     innerType: 'VQuery',

core/core-frontend/src/utils/canvasUtils.ts

@@ -983,3 +983,13 @@ export function mobileViewStyleSwitch(component) {
     viewInfo.name = component.name
   }
 }
+
+export function syncViewTitle(element) {
+  if (
+    element &&
+    ['UserView', 'VQuery'].includes(element.component) &&
+    canvasViewInfo.value[element.id]
+  ) {
+    canvasViewInfo.value[element.id].title = element.name
+  }
+}

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -151,6 +151,10 @@ const closeEditComponentName = () => {
     return
   }
   view.value.title = inputComponentName.value.name
+  if (curComponent.value) {
+    curComponent.value.label = inputComponentName.value.name
+    curComponent.value.name = inputComponentName.value.name
+  }
   inputComponentName.value.name = ''
   inputComponentName.value.id = ''
 }
@@ -1134,6 +1138,10 @@ const onChangeMiscStyleForm = val => {
 
 const onTextChange = val => {
   view.value.customStyle.text = val
+  if (curComponent.value) {
+    curComponent.value.name = val
+    curComponent.value.title = value
+  }
   if (mobileInPc.value) {
     //移动端设计
     useEmitt().emitter.emit('onMobileStatusChange', {