From 282aa823e8eb79ddcaf75120bfa055ccc1b37dc7 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Wed, 29 May 2024 18:43:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=A0=87=E9=A2=98=E7=9A=84=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E7=AD=89=E6=8C=89=E9=92=AE,=20=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=20hover=20=E6=98=BE=E7=A4=BA=20#8834?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/views/index.vue    | 82 ++++++++++++-------
 1 file changed, 51 insertions(+), 31 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 f2931da1b6..3a77dc0a12 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -254,7 +254,7 @@ const initTitle = () => {
       state.title_show = customStyle.text.show
       state.title_class.fontSize = customStyle.text.fontSize * scale.value + 'px'
       state.title_class.color = customStyle.text.color
-      state.title_class.textAlign = customStyle.text.hPosition
+      state.title_class.textAlign = customStyle.text.hPosition as CSSProperties['textAlign']
       state.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
       state.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
 
@@ -654,6 +654,13 @@ const titleIconStyle = computed(() => {
     color: canvasStyleData.value.component.seniorStyleSetting.linkageIconColor
   }
 })
+const chartHover = ref(false)
+const showActionIcons = computed(() => {
+  if (!chartHover.value) {
+    return false
+  }
+  return trackMenu.value.length > 0 || state.title_remark.show
+})
 </script>
 
 <template>
@@ -662,6 +669,8 @@ const titleIconStyle = computed(() => {
     :class="{ 'report-load-finish': !loadingFlag }"
     v-loading="loadingFlag"
     element-loading-background="rgba(0,0,0,0)"
+    @mouseover="chartHover = true"
+    @mouseleave="chartHover = false"
   >
     <div
       class="title-container"
@@ -684,36 +693,38 @@ const titleIconStyle = computed(() => {
           @change="onTitleChange"
         />
       </template>
-      <div
-        class="icons-container"
-        :class="{ 'is-editing': titleEditStatus }"
-        :style="titleIconStyle"
-        v-if="trackMenu.length > 0 || state.title_remark.show"
-      >
-        <el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
-          <template #content>
-            <div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
-          </template>
-          <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="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="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="iconSize" class="inner-icon">
-            <Icon name="icon_drilling_outlined" />
-          </el-icon>
-        </el-tooltip>
-      </div>
+      <transition name="fade">
+        <div
+          class="icons-container"
+          :class="{ 'is-editing': titleEditStatus }"
+          :style="titleIconStyle"
+          v-show="showActionIcons"
+        >
+          <el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
+            <template #content>
+              <div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
+            </template>
+            <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="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="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="iconSize" class="inner-icon">
+              <Icon name="icon_drilling_outlined" />
+            </el-icon>
+          </el-tooltip>
+        </div>
+      </transition>
     </div>
     <!--这里去渲染不同图库的图表-->
     <div v-if="chartAreaShow" style="flex: 1; overflow: hidden">
@@ -816,4 +827,13 @@ const titleIconStyle = computed(() => {
     }
   }
 }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>