feat(图表): 图表、过滤组件等可以直接在右侧编辑区修改标题 #8867

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

@@ -59,6 +59,9 @@ const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
 const { canvasCollapse, curComponent, componentData, editMode } = storeToRefs(dvMainStore)
 const router = useRouter()
+let componentNameEdit = ref(false)
+let inputComponentName = ref('')
+let componentNameInput = ref(null)
 
 const { t } = useI18n()
 const loading = ref(false)
@@ -93,6 +96,35 @@ const editCalcField = ref(false)
 const isCalcFieldAdd = ref(true)
 const calcEdit = ref()
 const route = useRoute()
+
+const onComponentNameChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
+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 = () => {
+  componentNameEdit.value = true
+  inputComponentName.value = view.value.title
+  nextTick(() => {
+    componentNameInput.value.focus()
+  })
+}
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -1511,7 +1543,9 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
         </div>
         <div v-if="!canvasCollapse.chartAreaCollapse" style="width: 240px" class="view-panel-row">
           <el-row class="editor-title">
-            <span style="font-size: 14px">{{ view.title }}</span>
+            <span class="name-area" @dblclick="editComponentName" id="component-name">{{
+              view.title
+            }}</span>
           </el-row>
 
           <el-row style="height: calc(100vh - 110px); overflow-y: auto">
@@ -2897,6 +2931,15 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
     </el-dialog>
   </div>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
+  <Teleport v-if="componentNameEdit" :to="'#component-name'">
+    <input
+      width="100%"
+      @change="onComponentNameChange"
+      ref="componentNameInput"
+      v-model="inputComponentName"
+      @blur="closeEditComponentName"
+    />
+  </Teleport>
 </template>
 
 <style lang="less" scoped>
@@ -3980,4 +4023,24 @@ span {
     margin-bottom: 8px;
   }
 }
+
+.name-area {
+  position: relative;
+  line-height: 24px;
+  height: 24px;
+  font-size: 14px !important;
+  width: 300px;
+  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%;
+  }
+}
 </style>