From 73d54b2746a53076b81cb8cb0cb2587f22f901de Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Mon, 9 Dec 2024 20:07:12 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=9C=A8=E5=9B=BD=E9=99=85=E5=8C=96=E4=B9=8B=E5=90=8E=EF=BC=8C?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E6=A0=B7=E5=BC=8F=E4=B8=AD=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=87=BA=E7=8E=B0=E6=8D=A2=E8=A1=8C=E7=9A=84?=
 =?UTF-8?q?=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CustomColorStyleSelect.vue        | 16 +++++++++-------
 .../components/GradientColorSelector.vue         |  5 +++++
 2 files changed, 14 insertions(+), 7 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 a5aa96451e..c6cb1a674e 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
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import { ElColorPicker, ElPopover } from 'element-plus-secondary'
-import { computed, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_CASES, COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import GradientColorSelector from '@/views/chart/components/editor/editor-style/components/GradientColorSelector.vue'
@@ -372,6 +372,7 @@ const colorItemBorderColor = (index, state) => {
                 class="select-color-item"
                 :class="{ active: state.basicStyleForm[colorSchemeName] === option.value }"
                 @click="selectColorCase(option)"
+                :title="option.name"
               >
                 <div style="float: left">
                   <span
@@ -490,11 +491,8 @@ 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
+          <span class="color-item-name" :class="themes === 'dark' ? 'dark' : ''">
+            {{ item.name }}</span
           >
         </div>
       </div>
@@ -650,7 +648,7 @@ const colorItemBorderColor = (index, state) => {
       justify-content: start;
       align-items: flex-start;
       .color-item-name {
-        max-width: 120px;
+        max-width: 30px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -725,6 +723,10 @@ const colorItemBorderColor = (index, state) => {
 
   .cases-list__text {
     margin-left: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 30px;
   }
 }
 .series-color-picker-wrapper {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue
index c8f92fc975..72f3315715 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue
@@ -157,6 +157,7 @@ onMounted(() => {
                 class="select-color-item"
                 :class="{ active: state.basicStyleForm.colorScheme === option.value }"
                 @click="selectNode(option)"
+                :title="option.name"
               >
                 <div style="float: left">
                   <span
@@ -245,6 +246,10 @@ onMounted(() => {
 
   .cases-list__text {
     margin-left: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 30px;
   }
 }
 .tab-header {