perf: 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明

package.json

@@ -36,7 +36,7 @@
     "@logicflow/extension": "^1.1.30",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.8.2",
-    "@pureadmin/utils": "^1.7.1",
+    "@pureadmin/utils": "^1.7.2",
     "@vueuse/core": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",

pnpm-lock.yaml

@@ -16,7 +16,7 @@ specifiers:
   "@pureadmin/descriptions": ^1.1.0
   "@pureadmin/table": ^1.8.2
   "@pureadmin/theme": ^2.4.0
-  "@pureadmin/utils": ^1.7.1
+  "@pureadmin/utils": ^1.7.2
   "@types/element-resize-detector": 1.1.3
   "@types/intro.js": ^5.1.0
   "@types/js-cookie": ^3.0.1
@@ -127,7 +127,7 @@ dependencies:
   "@logicflow/extension": 1.1.31
   "@pureadmin/descriptions": 1.1.1_element-plus@2.2.26
   "@pureadmin/table": 1.8.2_element-plus@2.2.26
-  "@pureadmin/utils": 1.7.1_aotapuqn7htzdjltsyimavekky
+  "@pureadmin/utils": 1.7.2_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.6.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
   "@wangeditor/editor": 5.1.23
@@ -1300,10 +1300,10 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.7.1_aotapuqn7htzdjltsyimavekky:
+  /@pureadmin/utils/1.7.2_aotapuqn7htzdjltsyimavekky:
     resolution:
       {
-        integrity: sha512-LqYdMR1xvRDtPp66osOY6usmta6LNGMuON14iONv4ZUC/esQ3RflHlT5glGjOfGUSGCk8O94F5LVS/PVC9Q3Ng==
+        integrity: sha512-L8tmogs9HCX6nuga1g79DcZr3KXNoWnIFcyP2z4zpmUmdBBAmMpXXz3Z+emI6HELmZu8DFx+v1MfKxccgsODRQ==
       }
     peerDependencies:
       dayjs: "*"

src/style/dark.scss

@@ -187,6 +187,19 @@ html.dark {
     background: transparent;
   }
 
+  /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+  .el-icon {
+    &.el-dialog__close,
+    &.el-drawer__close,
+    &.el-message-box__close,
+    &.el-notification__closeBtn {
+      &:hover {
+        color: rgba(255, 255, 255, 0.85) !important;
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+  }
+
   /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
   .pure-message {
     background-image: initial !important;

src/style/element-plus.scss

@@ -69,6 +69,33 @@
   }
 }
 
+/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+.el-dialog__headerbtn,
+.el-message-box__headerbtn {
+  &:hover {
+    .el-dialog__close {
+      color: var(--el-color-info) !important;
+    }
+  }
+}
+.el-icon {
+  &.el-dialog__close,
+  &.el-drawer__close,
+  &.el-message-box__close,
+  &.el-notification__closeBtn {
+    width: 24px;
+    height: 24px;
+    outline: none;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+    &:hover {
+      color: rgba(0, 0, 0, 0.88) !important;
+      background-color: rgba(0, 0, 0, 0.06);
+      text-decoration: none;
+    }
+  }
+}
+
 /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
 .pure-message {
   border-width: 0 !important;