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>