From dc47fb41c94e2032c5cbaabaa61f81260de23a08 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Fri, 6 Sep 2024 11:36:20 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87hover=E6=A0=B7=E5=BC=8F=E4=B8=8D=E5=AF=B9=EF=BC=8Chove?=
 =?UTF-8?q?r=E8=83=8C=E6=99=AF=E5=92=8Cicon=E7=9A=84=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E9=97=B4=E8=B7=9D=E4=B8=BA4px=EF=BC=8C?=
 =?UTF-8?q?=E5=9C=86=E8=A7=92=E4=B8=BA4px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/style/index.less       | 60 ++++++++++++++
 .../editor/editor-senior/Senior.vue           | 82 ++++++-------------
 .../editor-senior/components/AssistLine.vue   | 18 ++--
 3 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 86a252a2f6..51bca72721 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -271,6 +271,66 @@ body {
   min-width: auto !important;
 }
 
+.circle-button_icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .ed-icon {
+    font-size: 14px;
+    position: relative;
+    z-index: 5;
+  }
+
+  &:disabled {
+    color: #5f5f5f;
+    cursor: not-allowed;
+    &::after {
+      display: none !important;
+    }
+  }
+
+  width: 14px;
+  height: 14px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
+  }
+
+  &:hover {
+    &::after {
+      display: block;
+      background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+    }
+  }
+
+  &:active {
+    &::after {
+      display: block;
+      background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
+    }
+  }
+
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: 0.1s;
+  user-select: none;
+  outline: 0;
+  color: var(--ed-color-primary);
+  border: 0 solid transparent;
+  background-color: transparent;
+  font-size: 14px;
+  font-weight: 400;
+}
+
 .ed-table-v2__empty {
   padding-top: 40px;
 }
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
index 5adcda0927..3124831095 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
@@ -333,38 +333,29 @@ const removeJumpSenior = () => {
                   <span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
                     已设置
                   </span>
-                  <el-button
-                    class="circle-button font14"
+                  <button
+                    class="circle-button_icon"
                     :title="t('chart.delete')"
                     :class="'label-' + props.themes"
-                    text
-                    size="small"
-                    :style="{ width: '14px', margin: '0 8px' }"
+                    :style="{ margin: '0 8px' }"
                     @click="removeLinkageSenior"
                   >
-                    <template #icon>
-                      <el-icon size="14px">
-                        <Icon name="icon_delete-trash_outlined" />
-                      </el-icon>
-                    </template>
-                  </el-button>
+                    <el-icon>
+                      <Icon name="icon_delete-trash_outlined" />
+                    </el-icon>
+                  </button>
                 </template>
-                <el-button
-                  class="circle-button font14"
+                <button
+                  class="circle-button_icon"
                   :title="t('chart.edit')"
                   :class="'label-' + props.themes"
-                  text
-                  size="small"
-                  :style="{ width: '14px', margin: '0' }"
                   @click="linkageSetOpen"
                   :disabled="!chart.linkageActive"
                 >
-                  <template #icon>
-                    <el-icon size="14px">
-                      <Icon name="icon_edit_outlined" />
-                    </el-icon>
-                  </template>
-                </el-button>
+                  <el-icon>
+                    <Icon name="icon_edit_outlined" />
+                  </el-icon>
+                </button>
               </span>
             </div>
           </collapse-switch-item>
@@ -383,38 +374,29 @@ const removeJumpSenior = () => {
                   <span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
                     已设置
                   </span>
-                  <el-button
-                    class="circle-button font14"
+                  <button
+                    class="circle-button_icon"
                     :title="t('chart.delete')"
                     :class="'label-' + props.themes"
-                    text
-                    size="small"
-                    :style="{ width: '14px', margin: '0 8px' }"
+                    :style="{ margin: '0 8px' }"
                     @click="removeJumpSenior"
                   >
-                    <template #icon>
-                      <el-icon size="14px">
-                        <Icon name="icon_delete-trash_outlined" />
-                      </el-icon>
-                    </template>
-                  </el-button>
+                    <el-icon>
+                      <Icon name="icon_delete-trash_outlined" />
+                    </el-icon>
+                  </button>
                 </template>
-                <el-button
-                  class="circle-button font14"
+                <button
+                  class="circle-button_icon"
                   :title="t('chart.edit')"
                   :class="'label-' + props.themes"
-                  text
-                  size="small"
-                  :style="{ width: '14px', margin: 0 }"
                   @click="linkJumpSetOpen"
                   :disabled="!chart.jumpActive"
                 >
-                  <template #icon>
-                    <el-icon size="14px">
-                      <Icon name="icon_edit_outlined" />
-                    </el-icon>
-                  </template>
-                </el-button>
+                  <el-icon>
+                    <Icon name="icon_edit_outlined" />
+                  </el-icon>
+                </button>
               </span>
             </div>
           </collapse-switch-item>
@@ -495,18 +477,6 @@ span {
   font-weight: 400;
   line-height: 20px;
   color: #a6a6a6 !important;
-  &.ed-button {
-    color: var(--ed-color-primary) !important;
-  }
-  &.is-disabled {
-    color: #5f5f5f !important;
-  }
-}
-
-.font14 {
-  :deep(.ed-icon) {
-    font-size: 14px;
-  }
 }
 
 .inner-container {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
index e54ab47fef..815235f7fb 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
@@ -156,21 +156,17 @@ onMounted(() => {
         >
           已设置
         </span>
-        <el-button
+        <button
           :class="'label-' + props.themes"
-          :style="{ width: '24px', marginLeft: '6px' }"
+          :style="{ marginLeft: '6px' }"
           :disabled="!state.assistLineCfg.enable"
-          class="circle-button font14"
-          text
-          size="small"
+          class="circle-button_icon"
           @click="editLine"
         >
-          <template #icon>
-            <el-icon size="14px">
-              <Icon name="icon_edit_outlined" />
-            </el-icon>
-          </template>
-        </el-button>
+          <el-icon>
+            <Icon name="icon_edit_outlined" />
+          </el-icon>
+        </button>
       </span>
     </div>