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>