From 2e6733cbc7016fecba7481658018200d65409002 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sun, 27 Nov 2022 17:50:16 +0800 Subject: [PATCH] release: update `3.8.6` --- package.json | 2 +- public/serverConfig.json | 2 +- src/style/dark.scss | 14 ++++++++ src/style/element-plus.scss | 27 ++++++++++++++ src/utils/message.ts | 88 +++++++++++++++++++++++++++++++++++---------- src/views/login/index.vue | 2 +- tsconfig.json | 3 +- 7 files changed, 116 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 4ed622b..30da693 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pure-admin-thin", - "version": "3.8.5", + "version": "3.8.6", "private": true, "scripts": { "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite", diff --git a/public/serverConfig.json b/public/serverConfig.json index a3022ce..5f04cb1 100644 --- a/public/serverConfig.json +++ b/public/serverConfig.json @@ -1,5 +1,5 @@ { - "Version": "3.8.5", + "Version": "3.8.6", "Title": "PureAdmin", "FixedHeader": true, "HiddenSideBar": false, diff --git a/src/style/dark.scss b/src/style/dark.scss index f511ad3..785109c 100644 --- a/src/style/dark.scss +++ b/src/style/dark.scss @@ -155,4 +155,18 @@ html.dark { .el-dropdown-menu__item:not(.is-disabled):hover { background: transparent; } + + /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */ + .pure-message { + background-image: initial !important; + background-color: rgb(36, 37, 37) !important; + box-shadow: rgb(13 13 13 / 12%) 0px 3px 6px -4px, + rgb(13 13 13 / 8%) 0px 6px 16px 0px, rgb(13 13 13 / 5%) 0px 9px 28px 8px !important; + + & .el-message__content { + color: $color-white !important; + pointer-events: all !important; + background-image: initial !important; + } + } } diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss index a24c30f..aa357b9 100644 --- a/src/style/element-plus.scss +++ b/src/style/element-plus.scss @@ -62,3 +62,30 @@ border-left-color: var(--el-color-primary); } } + +/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */ +.pure-message { + border-width: 0 !important; + background: #fff !important; + padding: 10px 13px !important; + box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, + 0 9px 28px 8px #0000000d !important; + + &.el-message.is-closable .el-message__content { + padding-right: 17px !important; + } + + & .el-message__content { + color: #000000d9 !important; + pointer-events: all !important; + background-image: initial !important; + } + + & .el-message__icon { + margin-right: 8px !important; + } + + & .el-message__closeBtn { + right: 9px !important; + } +} diff --git a/src/utils/message.ts b/src/utils/message.ts index 86b631c..54b100f 100644 --- a/src/utils/message.ts +++ b/src/utils/message.ts @@ -1,32 +1,84 @@ +import { type VNode } from "vue"; +import { isFunction } from "@pureadmin/utils"; import { type MessageHandler, ElMessage } from "element-plus"; -// 更多配置请看：https://element-plus.org/zh-CN/component/message.html#message-%E9%85%8D%E7%BD%AE%E9%A1%B9 +type messageStyle = "el" | "antd"; +type messageTypes = "info" | "success" | "warning" | "error"; -type messageTypes = "success" | "info" | "warning" | "error"; +interface MessageParams { + /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */ + type?: messageTypes; + /** 自定义图标，该属性会覆盖 `type` 的图标 */ + icon?: any; + /** 是否将 `message` 属性作为 `HTML` 片段处理，默认 `false` */ + dangerouslyUseHTMLString?: boolean; + /** 消息风格，可选 `el` 、`antd` ，默认 `antd` */ + customClass?: messageStyle; + /** 显示时间，单位为毫秒。设为 `0` 则不会自动关闭，`element-plus` 默认是 `3000` ，平台改成默认 `2000` */ + duration?: number; + /** 是否显示关闭按钮，默认值 `false` */ + showClose?: boolean; + /** 文字是否居中，默认值 `false` */ + center?: boolean; + /** `Message` 距离窗口顶部的偏移量，默认 `20` */ + offset?: number; + /** 设置组件的根元素，默认 `document.body` */ + appendTo?: string | HTMLElement; + /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */ + grouping?: boolean; + /** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */ + onClose?: Function | null; +} + +/** 用法非常简单，参考 src/views/components/message/index.vue 文件 */ /** - * `element-plus` 的 `info` 消息类型 + * `Message` 消息提示函数 */ const message = ( - message: string, - type = "info" as messageTypes, - showClose = true, - duration = 2000, - center = false, - grouping = false + message: string | VNode | (() => VNode), + params?: MessageParams ): MessageHandler => { - return ElMessage({ - message, - type, - showClose, - duration, - center, - grouping - }); + if (!params) { + return ElMessage({ + message, + customClass: "pure-message" + }); + } else { + const { + icon, + type = "info", + dangerouslyUseHTMLString = false, + customClass = "antd", + duration = 2000, + showClose = false, + center = false, + offset = 20, + appendTo = document.body, + grouping = false, + onClose + } = params; + + return ElMessage({ + message, + type, + icon, + dangerouslyUseHTMLString, + duration, + showClose, + center, + offset, + appendTo, + grouping, + // 全局搜 pure-message 即可知道该类的样式位置 + customClass: customClass === "antd" ? "pure-message" : "", + onClose: () => (isFunction(onClose) ? onClose() : null) + }); + } }; /** - * 关闭 `element-plus` 的所有消息实例 + * 关闭所有 `Message` 消息提示函数 */ const closeAllMessage = (): void => ElMessage.closeAll(); diff --git a/src/views/login/index.vue b/src/views/login/index.vue index aa8c437..af46f8f 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -53,7 +53,7 @@ const onLogin = async (formEl: FormInstance | undefined) => { // 获取后端路由 initRouter().then(() => { router.push("/"); - message("登录成功", "success"); + message("登录成功", { type: "success" }); }); } }); diff --git a/tsconfig.json b/tsconfig.json index 0cb30b9..4252509 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,7 +29,8 @@ "element-plus/global", "@pureadmin/table/volar", "@pureadmin/descriptions/volar", - "unplugin-vue-macros/macros-global" + "unplugin-vue-macros/macros-global", + "unplugin-vue-define-options/macros-global" ], "typeRoots": ["./node_modules/@types/", "./types"] },