Browse Source

release: update `3.8.6`

i18n
xiaoxian521 2 years ago
parent
commit
2e6733cbc7
  1. 2
      package.json
  2. 2
      public/serverConfig.json
  3. 14
      src/style/dark.scss
  4. 27
      src/style/element-plus.scss
  5. 88
      src/utils/message.ts
  6. 2
      src/views/login/index.vue
  7. 3
      tsconfig.json

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "pure-admin-thin", "name": "pure-admin-thin",
"version": "3.8.5",
"version": "3.8.6",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite", "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",

2
public/serverConfig.json

@ -1,5 +1,5 @@
{ {
"Version": "3.8.5",
"Version": "3.8.6",
"Title": "PureAdmin", "Title": "PureAdmin",
"FixedHeader": true, "FixedHeader": true,
"HiddenSideBar": false, "HiddenSideBar": false,

14
src/style/dark.scss

@ -155,4 +155,18 @@ html.dark {
.el-dropdown-menu__item:not(.is-disabled):hover { .el-dropdown-menu__item:not(.is-disabled):hover {
background: transparent; 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;
}
}
} }

27
src/style/element-plus.scss

@ -62,3 +62,30 @@
border-left-color: var(--el-color-primary); 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;
}
}

88
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"; 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 = ( const message = (
message: string,
type = "info" as messageTypes,
showClose = true,
duration = 2000,
center = false,
grouping = false
message: string | VNode | (() => VNode),
params?: MessageParams
): MessageHandler => { ): 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(); const closeAllMessage = (): void => ElMessage.closeAll();

2
src/views/login/index.vue

@ -53,7 +53,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
// //
initRouter().then(() => { initRouter().then(() => {
router.push("/"); router.push("/");
message("登录成功", "success");
message("登录成功", { type: "success" });
}); });
} }
}); });

3
tsconfig.json

@ -29,7 +29,8 @@
"element-plus/global", "element-plus/global",
"@pureadmin/table/volar", "@pureadmin/table/volar",
"@pureadmin/descriptions/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"] "typeRoots": ["./node_modules/@types/", "./types"]
}, },

Loading…
Cancel
Save