Merge pull request #12061 from dataease/pr@dev-v2_st

fix(仪表板): 图标hover样式不对，hover背景和icon的上下左右间距为4px，圆角为4px

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;
 }

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
+                  <button
-                    class="circle-button font14"
+                    class="circle-button_icon"
                     :title="t('chart.delete')"
                     :class="'label-' + props.themes"
-                    text
+                    :style="{ margin: '0 8px' }"
-                    size="small"
-                    :style="{ width: '14px', margin: '0 8px' }"
                     @click="removeLinkageSenior"
                   >
-                    <template #icon>
+                    <el-icon>
-                      <el-icon size="14px">
                       <Icon name="icon_delete-trash_outlined" />
                     </el-icon>
+                  </button>
                 </template>
-                  </el-button>
+                <button
-                </template>
+                  class="circle-button_icon"
-                <el-button
-                  class="circle-button font14"
                   :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>
-                    <el-icon size="14px">
                     <Icon name="icon_edit_outlined" />
                   </el-icon>
-                  </template>
+                </button>
-                </el-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
+                  <button
-                    class="circle-button font14"
+                    class="circle-button_icon"
                     :title="t('chart.delete')"
                     :class="'label-' + props.themes"
-                    text
+                    :style="{ margin: '0 8px' }"
-                    size="small"
-                    :style="{ width: '14px', margin: '0 8px' }"
                     @click="removeJumpSenior"
                   >
-                    <template #icon>
+                    <el-icon>
-                      <el-icon size="14px">
                       <Icon name="icon_delete-trash_outlined" />
                     </el-icon>
+                  </button>
                 </template>
-                  </el-button>
+                <button
-                </template>
+                  class="circle-button_icon"
-                <el-button
-                  class="circle-button font14"
                   :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>
-                    <el-icon size="14px">
                     <Icon name="icon_edit_outlined" />
                   </el-icon>
-                  </template>
+                </button>
-                </el-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 {

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"
+          class="circle-button_icon"
-          text
-          size="small"
           @click="editLine"
         >
-          <template #icon>
+          <el-icon>
-            <el-icon size="14px">
             <Icon name="icon_edit_outlined" />
           </el-icon>
-          </template>
+        </button>
-        </el-button>
       </span>
     </div>