From c7bfcff42562861cea8dc1687451c36c795a7814 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Tue, 26 Nov 2024 18:13:21 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=9B=BE=E8=A1=A8):=20=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E5=9C=A8=E4=B8=8D=E6=98=BE=E7=A4=BA=E6=A0=87=E9=A2=98=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E8=81=94=E5=8A=A8=E3=80=81=E8=B7=B3=E8=BD=AC=E7=AD=89?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/views/index.vue    | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 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 57cfeb0b4c..ac90e4f66e 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -891,20 +891,42 @@ const marginBottom = computed<string | 0>(() => {
 const iconSize = computed<string>(() => {
   return 16 * scale.value + 'px'
 })
+/**
+ * 修改透明度
+ * 边框透明度为0时会是存色，顾配置低透明度
+ * @param {boolean} isBorder 是否为边框
+ */
+const modifyAlpha = isBorder => {
+  const { backgroundColor, backgroundType, backgroundImageEnable, backgroundColorSelect } =
+    element.value.commonBackground
+  // 透明
+  const transparent = 'rgba(0,0,0,0.01)'
+  // 背景图时，设置透明度为0.01
+  if (backgroundType === 'outerImage' && backgroundImageEnable) return transparent
+  // hex转rgba
+  if (backgroundColor.includes('#'))
+    return isBorder || !backgroundColorSelect ? transparent : backgroundColor
+  const match = backgroundColor.match(/rgba\((\d+), (\d+), (\d+), (\d+|0.\d+)\)/)
+  if (!match) return backgroundColor
+  const [r, g, b, a] = match.slice(1).map(Number)
+  // 边框或者不设置背景色时，设置透明度为0.01，否则原透明度
+  return `rgba(${r}, ${g}, ${b}, ${!backgroundColorSelect || isBorder ? 0.01 : a})`
+}
 
 const titleIconStyle = computed(() => {
+  const bgColor = modifyAlpha(false)
+  const borderColor = modifyAlpha(true)
   // 不显示标题时，图标的样式
   const style = {
     position: 'absolute',
-    color: 'rgb(255, 252, 252)',
-    position: 'absolute',
-    border: '1px solid rgb(173, 170, 170)',
-    'background-color': 'rgba(173, 170, 170)',
+    border: `1px solid ${borderColor}`,
+    'background-color': bgColor,
     'border-radius': '2px',
     padding: '0 2px 0 2px',
-    top: '2px',
     'z-index': 1,
-    left: '6px'
+    top: '2px',
+    left: '2px',
+    ...(trackMenu.value.length ? {} : { display: 'none' })
   }
   return {
     color: canvasStyleData.value.component.seniorStyleSetting.linkageIconColor,