From c80818d792276666aaea4b18413a0f08777f2ed1 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sat, 3 Dec 2022 14:39:23 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=85=A8=E5=B1=80=E8=A6=86=E7=9B=96ele?= =?UTF-8?q?ment-plus=E7=9A=84el-dialog=E3=80=81el-drawer=E3=80=81el-messag?= =?UTF-8?q?e-box=E3=80=81el-notification=E7=BB=84=E4=BB=B6=E5=8F=B3?= =?UTF-8?q?=E4=B8=8A=E8=A7=92=E5=85=B3=E9=97=AD=E5=9B=BE=E6=A0=87=E7=9A=84?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=A1=A8=E7=8E=B0=E6=9B=B4=E9=B2=9C?= =?UTF-8?q?=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- src/style/dark.scss | 13 +++++++++++++ src/style/element-plus.scss | 27 +++++++++++++++++++++++++++ 4 files changed, 45 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5e7c4dcc3..c1b1721c3 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06428918b..f8cb40ba3 100644 --- a/pnpm-lock.yaml +++ b/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: "*" diff --git a/src/style/dark.scss b/src/style/dark.scss index 59f7ec34f..83a661aad 100644 --- a/src/style/dark.scss +++ b/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; diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss index cfee84e6e..8740aca9d 100644 --- a/src/style/element-plus.scss +++ b/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;