From 908b6bc3d27c641d4e12d42388d6ef461b8c1996 Mon Sep 17 00:00:00 2001
From: wisonic <shaochuan.wu@fit2cloud.com>
Date: Fri, 13 Sep 2024 15:43:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=9C=BA=E6=99=AF=E4=B8=8B=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=9B=BE=E4=BE=8B=E9=A2=9C=E8=89=B2=E9=80=89=E6=A1=86?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CustomColorStyleSelect.vue     | 54 +++++++++++--------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
index d805abca99..96aff50989 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@@ -138,30 +138,23 @@ const setupSeriesColor = () => {
     }
     seriesColorState.curSeriesColor = seriesColorState.seriesColor[seriesColorState.curColorIndex]
     nextTick(() => {
-      const targetId = 'series-color-picker-' + seriesColorState.curColorIndex
-      const target = document.getElementById(targetId)
-      if (target) {
-        seriesColorState.seriesColorPickerId = `#${targetId}`
-      } else {
-        seriesColorPickerRef.value?.hide()
-      }
+      customColorPickerRef.value?.hide()
+      // 防止 teleport 失效还有选框飘到左上角
+      seriesColorState.seriesColorPickerId = `#seriesr-picker-slot-${props.sub ? 1 : 0}`
     })
   }
 }
-
-const flag = ref(1)
-
 const switchSeriesColor = (seriesColor, index) => {
   seriesColorPickerRef.value?.hide()
   seriesColorState.curSeriesColor = cloneDeep(seriesColor)
   seriesColorState.curColorIndex = index
-  const id = '#series-color-picker-' + seriesColor.id + `-${flag.value}`
-  if (document.querySelectorAll(id).length > 1) {
-    flag.value = 2
-  }
-  seriesColorState.seriesColorPickerId = '#series-color-picker-' + seriesColor.id + `-${flag.value}`
+  const id = `series-color-picker-${props.sub ? 1 : 0}-${index}`
+  seriesColorState.seriesColorPickerId = `#${id}`
   nextTick(() => {
-    seriesColorPickerRef.value?.show()
+    const dom = document.getElementById(id)
+    if (dom) {
+      seriesColorPickerRef.value?.show()
+    }
   })
 }
 
@@ -464,13 +457,16 @@ const colorItemBorderColor = (index, state) => {
         "
         class="series-color-setting colors"
       >
+        <div
+          :id="`seriesr-picker-slot-${sub ? 1 : 0}`"
+          style="overflow: hidden; transform: translateX(0)"
+        ></div>
         <div
           v-for="(item, index) in seriesColorState.seriesColor"
           :key="item.id"
           class="color-list-item"
         >
           <div
-            :id="`series-color-picker-${item.id}-${flag}`"
             :class="{
               active: item.id === seriesColorState.curSeriesColor?.id
             }"
@@ -484,22 +480,24 @@ const colorItemBorderColor = (index, state) => {
               }"
             ></div>
           </div>
+          <div :id="`series-color-picker-${sub ? 1 : 0}-${index}`"></div>
           <span
             :title="item.name"
             class="color-item-name"
             :class="themes === 'dark' ? 'dark' : ''"
             >{{ item.name }}</span
           >
-          <div :id="'series-color-picker-' + index"></div>
         </div>
       </div>
     </template>
-    <teleport :to="seriesColorState.seriesColorPickerId">
-      <div style="position: absolute; top: 0; left: 10px; width: 0; height: 0; overflow: hidden">
+    <teleport defer :to="seriesColorState.seriesColorPickerId">
+      <div class="series-color-picker-wrapper">
         <el-color-picker
           ref="seriesColorPickerRef"
           v-model="seriesColorState.curSeriesColor.color"
           size="small"
+          popper-class="series-color-picker"
+          :teleported="false"
           :predefine="predefineColors"
           @change="changeSeriesColor"
         />
@@ -590,7 +588,6 @@ const colorItemBorderColor = (index, state) => {
       cursor: pointer;
       padding: 2px;
       border: solid 1px transparent;
-      position: relative;
       .color-item__inner {
         width: 14px;
         height: 14px;
@@ -662,7 +659,6 @@ const colorItemBorderColor = (index, state) => {
       cursor: pointer;
       padding: 2px;
       border: solid 1px transparent;
-      position: relative;
 
       .color-item__inner {
         width: 14px;
@@ -722,4 +718,18 @@ const colorItemBorderColor = (index, state) => {
     margin-left: 4px;
   }
 }
+.series-color-picker-wrapper {
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  :deep(.ed-tooltip__trigger) {
+    width: 0px;
+    height: 0px;
+    overflow: hidden;
+  }
+  :deep(.series-color-picker) {
+    position: fixed !important;
+    margin-top: 16px !important;
+  }
+}
 </style>