From d9a72fb3a69cc6f8c5e5ac887eda7ed10fd91adc Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 16 May 2024 19:41:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E3=80=81=E8=BF=87=E6=BB=A4=E7=BB=84=E4=BB=B6=E7=AD=89=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E7=9B=B4=E6=8E=A5=E5=9C=A8=E5=8F=B3=E4=BE=A7=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=8C=BA=E4=BF=AE=E6=94=B9=E6=A0=87=E9=A2=98=20#8867?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/editor/index.vue   | 65 ++++++++++++++++++-
 1 file changed, 64 insertions(+), 1 deletion(-)

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 f8ef28dcc3..04670bc946 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/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>