From c1c95031a8e812b54ecc8491584e1045e04aaee2 Mon Sep 17 00:00:00 2001
From: wisonic <shaochuan.wu@fit2cloud.com>
Date: Wed, 15 Jan 2025 17:55:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E6=8C=87?=
 =?UTF-8?q?=E6=A0=87=E5=8D=A1=E6=9D=A1=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dialog/TextThresholdEdit.vue   | 44 +++++++++++++------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
index a6a60a0ce9..a84a63e60c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
@@ -103,12 +103,7 @@ init()
 
 <template>
   <el-col>
-    <el-button class="circle-button" circle style="margin-bottom: 10px" @click="addThreshold">
-      <template #icon>
-        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
-      </template>
-    </el-button>
-    <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
+    <div @keydown.stop @keyup.stop class="threshold-editor">
       <el-row
         v-for="(item, index) in state.thresholdArr"
         :key="index"
@@ -190,33 +185,43 @@ init()
             @change="changeThreshold"
           />
         </div>
-        <div style="display: flex; align-items: center; justify-content: center; margin-left: 8px">
+        <div style="display: flex; align-items: center; justify-content: center; margin-left: 12px">
           <el-button
-            class="circle-button"
+            class="circle-button m-icon-btn"
             type="text"
-            circle
-            style="float: right"
+            text
             @click="removeThreshold(index)"
           >
-            <template #icon>
+            <el-icon size="20px" style="color: #646a73">
               <Icon name="icon_delete-trash_outlined"
                 ><icon_deleteTrash_outlined class="svg-icon"
               /></Icon>
-            </template>
+            </el-icon>
           </el-button>
         </div>
       </el-row>
     </div>
+    <el-button class="circle-button" text style="margin-top: 10px" @click="addThreshold">
+      <template #icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
+      </template>
+      {{ t('chart.add_style') }}
+    </el-button>
   </el-col>
 </template>
 
 <style lang="less" scoped>
+.threshold-editor {
+  max-height: 50vh;
+  overflow-y: auto;
+  background: #f5f6f7;
+  border-radius: 4px;
+}
 .line-item {
   width: 100%;
   border-radius: 4px;
-  border: 1px solid #dcdfe6;
   padding: 4px 14px;
-  margin-bottom: 10px;
+  margin: 8px 0;
   display: flex;
   justify-content: left;
   align-items: center;
@@ -282,4 +287,15 @@ span {
     font-size: 12px;
   }
 }
+.m-icon-btn {
+  &:hover {
+    background: rgba(31, 35, 41, 0.1) !important;
+  }
+  &:focus {
+    background: rgba(31, 35, 41, 0.1) !important;
+  }
+  &:active {
+    background: rgba(31, 35, 41, 0.2) !important;
+  }
+}
 </style>