From 09b3bd5061c03b7c2aff02e14e08186cb6149f17 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Sat, 5 Jul 2025 18:09:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AEhover=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E4=B8=8E=E5=9B=BE=E6=A0=87=E5=AF=B9=E9=BD=90=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用flex布局确保叉号图标在按钮中心居中对齐
- 调整按钮尺寸为24x24px，移除padding避免对齐偏差
- 优化字体大小为14px，更合适的图标尺寸
- 添加line-height: 1确保垂直居中
- 添加active状态反馈，提升交互体验
- 添加focus状态视觉反馈，提升可访问性

修复效果:
- hover背景色与叉号图标完美对齐
- 更好的视觉反馈和交互体验
- 符合现代UI设计规范
---
 web/src/assets/styles/art-element-ui.scss | 34 +++++++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/web/src/assets/styles/art-element-ui.scss b/web/src/assets/styles/art-element-ui.scss
index 5c35a999..e7cba58b 100644
--- a/web/src/assets/styles/art-element-ui.scss
+++ b/web/src/assets/styles/art-element-ui.scss
@@ -829,16 +829,19 @@
 .el-message-box .el-message-box__headerbtn .el-message-box__close,
 .el-message-box__headerbtn .el-message-box__close,
 .el-dialog__headerbtn .el-dialog__close {
-  display: block !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
   visibility: visible !important;
   opacity: 1 !important;
   color: var(--art-gray-500) !important;
-  font-size: 16px !important;
-  width: 16px !important;
-  height: 16px !important;
-  padding: 7px !important;
+  font-size: 14px !important;
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0 !important;
+  margin: 0 !important;
   border-radius: 6px !important;
-  transition: all 0.3s !important;
+  transition: all 0.3s ease !important;
   background: transparent !important;
   border: none !important;
   cursor: pointer !important;
@@ -849,14 +852,33 @@
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
+  box-sizing: border-box !important;
+  line-height: 1 !important;
 
   &:hover {
     background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
     color: var(--art-gray-800) !important;
+    transform: none !important;
+  }
+
+  &:active {
+    background-color: rgba(var(--art-gray-300-rgb), 0.8) !important;
+    transform: scale(0.95) !important;
   }
 
   &:focus {
     outline: none !important;
+    box-shadow: 0 0 0 2px rgba(var(--art-primary), 0.2) !important;
+  }
+
+  // 确保图标居中
+  &::before {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100% !important;
+    height: 100% !important;
+    line-height: 1 !important;
   }
 }