refactor(图表): 图片组支持修改标题

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

@@ -56,6 +56,7 @@ import treemapOrigin from '@/assets/svg/treemap-origin.svg'
 import waterfallOrigin from '@/assets/svg/waterfall-origin.svg'
 import wordCloudOrigin from '@/assets/svg/word-cloud-origin.svg'
 import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'
+import pictureGroupOrigin from '@/assets/svg/picture-group-origin.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'
@@ -324,6 +325,7 @@ const iconMap = {
   'waterfall-origin': waterfallOrigin,
   'word-cloud-origin': wordCloudOrigin,
   't-heatmap-origin': tHeatmapOrigin,
+  'picture-group-origin': pictureGroupOrigin,
   group: group
 }
 const getIconName = item => {

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

@@ -1,11 +1,15 @@
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import { ElIcon } from 'element-plus-secondary'
+import { computed, nextTick, PropType, ref, toRefs } from 'vue'
+import { ElIcon, ElMessage } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 const dvMainStore = dvMainStoreWithOut()
 const { canvasCollapse } = storeToRefs(dvMainStore)
-
+let componentNameEdit = ref(false)
+let inputComponentName = ref('')
+let componentNameInputAttr = ref(null)
+const snapshotStore = snapshotStoreWithOut()
 const props = defineProps({
   scrollWidth: {
     required: false,
@@ -32,18 +36,64 @@ const props = defineProps({
     type: String,
     default: 'defaultSide'
   },
+  view: {
+    type: Object as PropType<ChartObj>,
+    required: false
+  },
+  slideIndex: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  themes: {
+    type: String as PropType<EditorTheme>,
+    default: 'light'
+  },
   title: String
 })
 
-const { width, asidePosition, sideName, themeInfo } = toRefs(props)
+const { width, asidePosition, sideName, themeInfo, view, themes } = toRefs(props)
 const collapseChange = () => {
   canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
 }
 const widthShow = computed(() => `${canvasCollapse.value[sideName.value] ? 36 : width.value}px`)
 
+const isViewTitle = computed(() => view.value && ['picture-group'].includes(view.value.type))
+
 const slideStyle = computed(() => {
   return { '--de-scroll-width': props.scrollWidth + 'px', width: widthShow.value }
 })
+
+const closeEditComponentName = () => {
+  componentNameEdit.value = false
+  if (!inputComponentName.value || !inputComponentName.value.trim()) {
+    return
+  }
+  if (inputComponentName.value.trim() === view.value.title) {
+    return
+  }
+  if (inputComponentName.value.trim().length > 64 || inputComponentName.value.trim().length < 2) {
+    ElMessage.warning('名称字段长度2-64个字符')
+    editComponentName()
+    return
+  }
+  view.value.title = inputComponentName.value
+  inputComponentName.value = ''
+}
+
+const editComponentName = () => {
+  if (isViewTitle.value) {
+    componentNameEdit.value = true
+    inputComponentName.value = view.value.title
+    nextTick(() => {
+      componentNameInputAttr.value.focus()
+    })
+  }
+}
+
+const onComponentNameChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
 </script>
 
 <template>
@@ -55,7 +105,17 @@ const slideStyle = computed(() => {
     :style="slideStyle"
   >
     <el-row align="middle" :class="'title-' + themeInfo" justify="space-between">
-      <span v-if="!canvasCollapse[sideName]">{{ title }}</span>
+      <div
+        :id="'attr-slide-component-name' + slideIndex"
+        v-if="!canvasCollapse[sideName]"
+        class="name-area-attr"
+        style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
+        :style="{ width: componentNameEdit ? '300px' : 'auto' }"
+        :class="{ 'component-name-dark': themeInfo === 'dark' }"
+        @dblclick="editComponentName"
+      >
+        {{ isViewTitle ? view.title : title }}
+      </div>
       <el-icon
         :title="title"
         :class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
@@ -79,6 +139,16 @@ const slideStyle = computed(() => {
     <div class="collapse-title" v-if="canvasCollapse[sideName]">
       <span>{{ title }}</span>
     </div>
+    <Teleport v-if="componentNameEdit" :to="'#attr-slide-component-name' + slideIndex">
+      <input
+        ref="componentNameInputAttr"
+        v-model="inputComponentName"
+        width="100%"
+        :effect="themeInfo"
+        @change="onComponentNameChange"
+        @blur="closeEditComponentName"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -184,4 +254,38 @@ const slideStyle = computed(() => {
 .ed-scrollbar__bar.is-vertical {
   width: var(--de-scroll-width);
 }
+
+.name-area-attr {
+  position: relative;
+  line-height: 24px;
+  height: 24px;
+  font-size: 14px !important;
+  overflow: hidden;
+  cursor: pointer;
+  input {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    outline: none;
+    border: 1px solid #295acc;
+    border-radius: 4px;
+    padding: 0 4px;
+    height: 100%;
+  }
+}
+
+.component-name-dark {
+  input {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    color: @dv-canvas-main-font-color;
+    background-color: #050e21;
+    outline: none;
+    border: 1px solid #295acc;
+    border-radius: 4px;
+    padding: 0 4px;
+    height: 100%;
+  }
+}
 </style>

core/core-frontend/src/views/dashboard/index.vue

@@ -282,6 +282,7 @@ onUnmounted(() => {
         :width="420"
         :side-name="'componentProp'"
         :aside-position="'right'"
+        :view="canvasViewInfo[curComponent.id]"
         class="left-sidebar"
       >
         <component :is="findComponentAttr(curComponent)" :themes="'light'" />

core/core-frontend/src/views/data-visualization/index.vue

@@ -492,6 +492,8 @@ eventBus.on('handleNew', handleNew)
             :side-name="'componentProp'"
             :aside-position="'right'"
             class="left-sidebar"
+            :slide-index="2"
+            :view="canvasViewInfo[curComponent.id]"
             :class="{ 'preview-aside': editMode === 'preview' }"
           >
             <component :is="findComponentAttr(curComponent)" />