From b854f44ce30bf571f81232f1f83c23339870bf8f Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Thu, 28 Dec 2023 14:26:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E8=A1=A8=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=9B=BE=E6=A0=87=E4=BF=AE=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E6=8C=89=E6=AF=94=E4=BE=8B=E5=B1=95=E7=A4=BA=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/views/index.vue    | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 9eca9348cf..c7788ba0e8 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -568,11 +568,25 @@ function onTitleChange() {
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
+
+const marginBottom = computed<string | 0>(() => {
+  if (titleShow.value || trackMenu.value.length > 0 || state.title_remark.show) {
+    return 8 * scale.value + 'px'
+  }
+  return 0
+})
+
+const iconSize = computed<string>(() => {
+  return 16 * scale.value + 'px'
+})
 </script>
 
 <template>
   <div class="chart-area" v-loading="loadingFlag">
-    <div class="title-container" :style="{ 'justify-content': titleAlign }">
+    <div
+      class="title-container"
+      :style="{ 'justify-content': titleAlign, 'margin-bottom': marginBottom }"
+    >
       <template v-if="!titleEditStatus">
         <p v-if="titleShow" :style="state.title_class" @dblclick="changeEditTitle">
           {{ view.title }}
@@ -599,22 +613,22 @@ const toolTip = computed(() => {
           <template #content>
             <div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
           </template>
-          <el-icon size="16px" class="inner-icon">
+          <el-icon :size="iconSize" class="inner-icon">
             <Icon name="icon_info_outlined" />
           </el-icon>
         </el-tooltip>
         <el-tooltip :effect="toolTip" placement="top" content="已设置联动" v-if="hasLinkIcon">
-          <el-icon size="16px" class="inner-icon">
+          <el-icon :size="iconSize" class="inner-icon">
             <Icon name="icon_link-record_outlined" />
           </el-icon>
         </el-tooltip>
         <el-tooltip :effect="toolTip" placement="top" content="已设置跳转" v-if="hasJumpIcon">
-          <el-icon size="16px" class="inner-icon">
+          <el-icon :size="iconSize" class="inner-icon">
             <Icon name="icon_viewinchat_outlined" />
           </el-icon>
         </el-tooltip>
         <el-tooltip :effect="toolTip" placement="top" content="已设置下钻" v-if="hasDrillIcon">
-          <el-icon size="16px" class="inner-icon">
+          <el-icon :size="iconSize" class="inner-icon">
             <Icon name="icon_drilling_outlined" />
           </el-icon>
         </el-tooltip>