ele-admin-plus 1.1.9-beta.9 → 1.2.0-beta.1

package/es/core-export.d.ts

@@ -3,6 +3,7 @@ export * from './utils/chart-theme';
 export * from './utils/core';
 export * from './utils/menu-util';
 export * from './utils/message';
+export * from './utils/message-box';
 export * from './utils/validate';
 export { default as HeaderTool } from "./ele-pro-layout/components/header-tool";
 export { default as SidebarTool } from "./ele-pro-layout/components/sidebar-tool";

package/es/core-export.js

@@ -3,6 +3,7 @@ export * from "./utils/chart-theme";
 export * from "./utils/core";
 export * from "./utils/menu-util";
 export * from "./utils/message";
+export * from "./utils/message-box";
 export * from "./utils/validate";
 import { default as default2 } from "./ele-pro-layout/components/header-tool";
 import { default as default3 } from "./ele-pro-layout/components/sidebar-tool";

package/es/core-installer.d.ts

@@ -1,3 +1,3 @@
-/** 全局安装核心组件 */
-import type { Plugin } from 'vue';
+import { Plugin } from 'vue';
+
 export declare const installer: Plugin;

package/es/ele-alert/index.d.ts

@@ -1,6 +1,6 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import('vue').DefineComponent<{
     title: StringConstructor;
-    type: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "error", unknown> | undefined>;
+    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
     description: StringConstructor;
     closable: {
         type: BooleanConstructor;
@@ -9,28 +9,28 @@ declare const _default: import("vue").DefineComponent<{
     center: BooleanConstructor;
     closeText: StringConstructor;
     showIcon: BooleanConstructor;
-    effect: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
-    iconStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    iconProps: import("vue").PropType<import("../ele-app/el").ElIconProps>;
-    closeIconStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    closeIconProps: import("vue").PropType<import("../ele-app/el").ElIconProps>;
-    bodyStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    titleStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    descriptionStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    effect: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
+    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
+    closeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    closeIconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
+    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    descriptionStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     transitionName: {
         type: StringConstructor;
         default: string;
     };
 }, {
-    visible: import("vue").Ref<boolean>;
-    isRich: import("vue").ComputedRef<boolean>;
+    visible: import('vue').Ref<boolean>;
+    isRich: import('vue').ComputedRef<boolean>;
     onClose: (e: MouseEvent) => void;
     open: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: (_e: MouseEvent) => boolean;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     title: StringConstructor;
-    type: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "error", unknown> | undefined>;
+    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
     description: StringConstructor;
     closable: {
         type: BooleanConstructor;
@@ -39,14 +39,14 @@ declare const _default: import("vue").DefineComponent<{
     center: BooleanConstructor;
     closeText: StringConstructor;
     showIcon: BooleanConstructor;
-    effect: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
-    iconStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    iconProps: import("vue").PropType<import("../ele-app/el").ElIconProps>;
-    closeIconStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    closeIconProps: import("vue").PropType<import("../ele-app/el").ElIconProps>;
-    bodyStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    titleStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
-    descriptionStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    effect: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
+    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
+    closeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    closeIconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
+    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    descriptionStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     transitionName: {
         type: StringConstructor;
         default: string;

package/es/ele-alert/index.js

@@ -69,7 +69,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           style: normalizeStyle(_ctx.iconStyle)
         }, [
           renderSlot(_ctx.$slots, "icon", {}, () => [
-            createVNode(_component_ElIcon, normalizeProps(guardReactiveProps(_ctx.iconProps)), {
+            createVNode(_component_ElIcon, normalizeProps(guardReactiveProps(_ctx.iconProps || {})), {
               default: withCtx(() => [
                 _ctx.type === "success" ? (openBlock(), createBlock(_component_CheckCircleFilled, { key: 0 })) : _ctx.type === "warning" ? (openBlock(), createBlock(_component_ExclamationCircleFilled, { key: 1 })) : _ctx.type === "error" ? (openBlock(), createBlock(_component_CloseCircleFilled, { key: 2 })) : (openBlock(), createBlock(_component_InfoCircleFilled, { key: 3 }))
               ]),
@@ -108,7 +108,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
         }, [
           renderSlot(_ctx.$slots, "closeIcon", {}, () => [
-            _ctx.closeText ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.closeText), 1)) : (openBlock(), createBlock(_component_ElIcon, normalizeProps(mergeProps({ key: 1 }, _ctx.closeIconProps)), {
+            _ctx.closeText ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.closeText), 1)) : (openBlock(), createBlock(_component_ElIcon, normalizeProps(mergeProps({ key: 1 }, _ctx.closeIconProps || {})), {
               default: withCtx(() => [
                 createVNode(_component_CloseOutlined)
               ]),

package/es/ele-alert/props.d.ts

@@ -1,5 +1,6 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { ElIconProps } from '../ele-app/el';
+import { ElIconProps } from '../ele-app/el';
+import { PropType, ExtractPropTypes } from 'vue';
+
 /**
  * 属性
  */
@@ -7,7 +8,7 @@ export declare const alertProps: {
     /** 标题 */
     title: StringConstructor;
     /** 类型 */
-    type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "error", unknown> | undefined>;
+    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
     /** 描述 */
     description: StringConstructor;
     /** 是否可关闭 */
@@ -22,21 +23,21 @@ export declare const alertProps: {
     /** 是否显示图标 */
     showIcon: BooleanConstructor;
     /** 主题 */
-    effect: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
+    effect: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
     /** 图标样式 */
-    iconStyle: PropType<Partial<import("vue").CSSProperties>>;
+    iconStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 图标组件属性 */
     iconProps: PropType<ElIconProps>;
     /** 关闭图标样式 */
-    closeIconStyle: PropType<Partial<import("vue").CSSProperties>>;
+    closeIconStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 关闭图标组件属性 */
     closeIconProps: PropType<ElIconProps>;
     /** 内容区样式 */
-    bodyStyle: PropType<Partial<import("vue").CSSProperties>>;
+    bodyStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 标题样式 */
-    titleStyle: PropType<Partial<import("vue").CSSProperties>>;
+    titleStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 描述样式 */
-    descriptionStyle: PropType<Partial<import("vue").CSSProperties>>;
+    descriptionStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 过渡动画名称 */
     transitionName: {
         type: StringConstructor;

package/es/ele-app/components/message-body.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 内容 */
+    message: StringConstructor;
+    /** 类型 */
+    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
+    /** 图标 */
+    icon: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown> | undefined>;
+    /** 是否显示关闭按钮 */
+    showClose: BooleanConstructor;
+    /** 内容是否是富文本 */
+    dangerouslyUseHTMLString: BooleanConstructor;
+    /** 是否是加载框 */
+    loading: PropType<boolean | null>;
+}, {
+    onClose: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 内容 */
+    message: StringConstructor;
+    /** 类型 */
+    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
+    /** 图标 */
+    icon: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown> | undefined>;
+    /** 是否显示关闭按钮 */
+    showClose: BooleanConstructor;
+    /** 内容是否是富文本 */
+    dangerouslyUseHTMLString: BooleanConstructor;
+    /** 是否是加载框 */
+    loading: PropType<boolean | null>;
+}>> & {
+    onClose?: (() => any) | undefined;
+}, {
+    dangerouslyUseHTMLString: boolean;
+    showClose: boolean;
+}, {}>;
+export default _default;

package/es/ele-app/components/message-body.js

@@ -0,0 +1,92 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, normalizeClass, withCtx, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createCommentVNode } from "vue";
+import { ElIcon } from "element-plus";
+import { CloseOutlined, InfoCircleFilled, CheckCircleFilled, ExclamationCircleFilled, CloseCircleFilled, LoadingOutlined } from "../../icons";
+const _sfc_main = defineComponent({
+  name: "MessageBody",
+  components: {
+    ElIcon,
+    CloseOutlined,
+    InfoCircleFilled,
+    CheckCircleFilled,
+    ExclamationCircleFilled,
+    CloseCircleFilled,
+    LoadingOutlined
+  },
+  props: {
+    /** 内容 */
+    message: String,
+    /** 类型 */
+    type: String,
+    /** 图标 */
+    icon: [String, Object, Function],
+    /** 是否显示关闭按钮 */
+    showClose: Boolean,
+    /** 内容是否是富文本 */
+    dangerouslyUseHTMLString: Boolean,
+    /** 是否是加载框 */
+    loading: Boolean
+  },
+  emits: {
+    close: () => true
+  },
+  setup(_props, { emit }) {
+    return { onClose: () => emit("close") };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-message-icon" };
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = {
+  key: 1,
+  class: "ele-message-content"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_LoadingOutlined = resolveComponent("LoadingOutlined");
+  const _component_CheckCircleFilled = resolveComponent("CheckCircleFilled");
+  const _component_ExclamationCircleFilled = resolveComponent("ExclamationCircleFilled");
+  const _component_CloseCircleFilled = resolveComponent("CloseCircleFilled");
+  const _component_InfoCircleFilled = resolveComponent("InfoCircleFilled");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_CloseOutlined = resolveComponent("CloseOutlined");
+  return openBlock(), createElementBlock(Fragment, null, [
+    createElementVNode("div", _hoisted_1, [
+      createVNode(_component_ElIcon, {
+        class: normalizeClass({ "is-loading": _ctx.loading })
+      }, {
+        default: withCtx(() => [
+          _ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { key: 0 })) : _ctx.loading ? (openBlock(), createBlock(_component_LoadingOutlined, { key: 1 })) : _ctx.type === "success" ? (openBlock(), createBlock(_component_CheckCircleFilled, { key: 2 })) : _ctx.type === "warning" ? (openBlock(), createBlock(_component_ExclamationCircleFilled, { key: 3 })) : _ctx.type === "error" ? (openBlock(), createBlock(_component_CloseCircleFilled, { key: 4 })) : (openBlock(), createBlock(_component_InfoCircleFilled, { key: 5 }))
+        ]),
+        _: 1
+      }, 8, ["class"])
+    ]),
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      _ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        innerHTML: _ctx.message,
+        class: "ele-message-content"
+      }, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(_ctx.message), 1))
+    ]),
+    _ctx.showClose ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "ele-message-close",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
+    }, [
+      createVNode(_component_ElIcon, null, {
+        default: withCtx(() => [
+          createVNode(_component_CloseOutlined)
+        ]),
+        _: 1
+      })
+    ])) : createCommentVNode("", true)
+  ], 64);
+}
+const messageBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  messageBody as default
+};

package/es/ele-app/el.d.ts

@@ -57,8 +57,11 @@ import type { dropdownProps } from 'element-plus';
 import type { dropdownItemProps } from 'element-plus';
 import type columnProps from 'element-plus/es/components/table/src/table-column/defaults';
 import type { TreeProps } from 'element-plus/es/components/tree-v2/src/types';
+import type { MessageOptions } from 'element-plus/es/components/message';
 import type { ComponentProps } from './types';
-export type ElFormItemRule = FormItemRule;
+
+export type ElFormItemRule = Partial<FormItemRule>;
+export type ElMessageOptions = Partial<MessageOptions>;
 
 /**
  * 组件属性

package/es/ele-app/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const _default: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/es/ele-app/style/message/css-var.scss

@@ -5,8 +5,4 @@
   .ele-message {
     @include set-ele-var('message', $var);
   }
-
-  .ele-message-mask {
-    @include set-ele-var('message-mask', $var);
-  }
 }

package/es/ele-app/style/message/index.scss

@@ -4,121 +4,243 @@
 
 @include set-message-var($ele);
 
-/* 消息提示 */
 .ele-message.el-message {
-  width: max-content;
-  padding: eleVar('message', 'padding');
-  border-radius: eleVar('message', 'radius');
-  box-shadow: eleVar('message', 'shadow');
+  gap: 0;
+  padding: 0;
   border: none;
+  border-radius: 0;
+  background: none;
+  width: max-content;
+  pointer-events: auto;
+  align-items: flex-start;
+  margin: 0 auto eleVar('message', 'space') auto;
+  transition: margin-bottom 0.2s;
+  position: relative !important;
+  left: auto !important;
+  top: auto !important;
+  transform: none;
+  opacity: 1;
+
+  & > .el-message__content {
+    display: none;
+  }
+
+  & > .el-message__icon,
+  & > .el-message__badge {
+    z-index: calc(#{elVar('index', 'popper')} + 2);
+    transition: (
+      margin-top 0.4s,
+      transform elVar('transition-duration'),
+      opacity elVar('transition-duration')
+    );
+  }
 
-  .el-message__content {
+  & > .el-message__icon {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    line-height: normal;
+    font-style: normal;
+    display: flex;
+    flex-shrink: 0;
     color: eleVar('message', 'color');
     font-size: eleVar('message', 'size');
+    padding: eleVar('message', 'padding');
+    box-shadow: eleVar('message', 'shadow');
+    border-radius: eleVar('message', 'radius');
+    background: elVar('color-primary', 'light-9');
+    border: 0 solid elVar('color-primary', 'light-8');
+    z-index: calc(#{elVar('index', 'popper')} + 1);
     box-sizing: border-box;
+    position: relative;
   }
+}
 
-  .el-message__icon {
-    font-size: eleVar('message', 'icon-size');
-    margin: eleVar('message', 'icon-margin');
-  }
+.ele-message + .ele-message {
+  margin-top: 0 !important;
+}
 
-  .el-message__closeBtn {
-    width: eleVar('message', 'close-size');
-    height: eleVar('message', 'close-size');
-    line-height: eleVar('message', 'close-size');
-    color: eleVar('message', 'close-color');
-    font-size: eleVar('message', 'close-font-size');
-    margin: eleVar('message', 'close-margin');
-    border-radius: eleVar('message', 'close-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
-    position: static;
-    top: auto;
-    right: auto;
-    transform: none;
-
-    &:hover {
-      color: eleVar('message', 'close-hover-color');
-      background: eleVar('message', 'close-hover-bg');
-    }
-  }
+.ele-message-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: elVar('color-primary');
+  font-size: eleVar('message', 'icon-size');
+  margin: eleVar('message', 'icon-margin');
+}
 
-  &.is-closable .el-message__content {
-    padding-right: 0;
+.ele-message-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('message', 'close-size');
+  height: eleVar('message', 'close-size');
+  line-height: eleVar('message', 'close-size');
+  color: eleVar('message', 'close-color');
+  font-size: eleVar('message', 'close-font-size');
+  margin: eleVar('message', 'close-margin');
+  border-radius: eleVar('message', 'close-radius');
+  transition: (color $ele-transition, background-color $ele-transition);
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('message', 'close-hover-color');
+    background: eleVar('message', 'close-hover-bg');
   }
+}
 
-  &.el-message--info {
-    #{elVarName('message', 'text-color')}: elVar('color-primary');
-    #{elVarName('message', 'bg-color')}: elVar('color-primary', 'light-9');
-    #{elVarName('message', 'border-color')}: elVar('color-primary', 'light-8');
-  }
+/* 情景色类型 */
+.ele-message.el-message--success > .el-message__icon {
+  background: elVar('color-success', 'light-9');
+  border-color: elVar('color-success', 'light-7');
 
-  /* 简约风格 */
-  &.is-plain {
-    #{elVarName('message', 'bg-color')}: eleVar('message', 'plain-bg');
+  & > .ele-message-icon {
+    color: elVar('color-success');
   }
+}
 
-  /* 加载框 */
-  &.ele-message-loading {
-    #{elVarName('message', 'text-color')}: elVar('color-primary');
-    #{elVarName('message', 'bg-color')}: elVar('color-primary', 'light-9');
-    #{elVarName('message', 'border-color')}: elVar('color-primary', 'light-8');
+.ele-message.el-message--warning > .el-message__icon {
+  background: elVar('color-warning', 'light-9');
+  border-color: elVar('color-warning', 'light-7');
 
-    &.is-plain {
-      #{elVarName('message', 'bg-color')}: eleVar('message', 'plain-bg');
-    }
+  & > .ele-message-icon {
+    color: elVar('color-warning');
   }
 }
 
-/* 加载框 */
-.ele-message-loading.el-message {
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  transform: none;
-  transition: (opacity elVar('transition-duration'), margin 0.4s, top 0.4s);
+.ele-message.el-message--error > .el-message__icon {
+  background: elVar('color-error', 'light-9');
+  border-color: elVar('color-error', 'light-7');
 
-  &.el-message-fade-enter-from,
-  &.el-message-fade-leave-to {
-    margin-top: -62px;
+  & > .ele-message-icon {
+    color: elVar('color-error');
   }
+}
+
+.ele-message.el-message--info > .el-message__badge > .el-badge__content {
+  background: elVar('color-primary');
+}
+
+/* 简约风格 */
+.ele-message.is-plain.el-message {
+  background: none;
+  box-shadow: none;
+}
+
+.ele-message.is-plain > .el-message__icon,
+.ele-message.is-plain-alert > .el-message__icon {
+  background: eleVar('message', 'plain-bg');
+}
+
+/* 彩色风格 */
+.ele-message.is-alert > .el-message__icon {
+  color: elVar('color-primary');
+  padding: eleVar('message', 'alert-padding');
+  border-width: 1px;
+  box-shadow: none;
+}
+
+.ele-message.is-plain-alert > .el-message__icon {
+  color: elVar('color-primary');
+}
+
+.el-message--success.is-alert > .el-message__icon,
+.el-message--success.is-plain-alert > .el-message__icon {
+  color: elVar('color-success');
+}
+
+.el-message--warning.is-alert > .el-message__icon,
+.el-message--warning.is-plain-alert > .el-message__icon {
+  color: elVar('color-warning');
+}
+
+.el-message--error.is-alert > .el-message__icon,
+.el-message--error.is-plain-alert > .el-message__icon {
+  color: elVar('color-error');
+}
+
+/* 加载框 */
+.ele-message.is-loading {
+  position: static !important;
 
   &::before {
     content: '';
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    transition: opacity elVar('transition-duration');
+    z-index: elVar('index', 'popper');
   }
 
-  & > .el-message__content {
-    position: relative;
+  & > .el-message__badge {
+    display: none;
+  }
+}
+
+/* 遮罩 */
+.ele-message.is-show-mask::before {
+  background: eleVar('message', 'mask-color');
+}
+
+/* 居中 */
+.ele-message.is-centered {
+  margin: 0 !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  align-items: center;
+  justify-content: center;
+
+  &.el-message-fade-enter-from > .el-message__icon,
+  &.el-message-fade-leave-to > .el-message__icon {
+    transform: scale(0.6);
+    margin-top: 0;
   }
+}
+
+/* 进入和关闭动画 */
+.ele-message.el-message-fade-enter-from,
+.ele-message.el-message-fade-leave-to {
+  margin-bottom: 0;
 
   & > .el-message__icon,
-  & > .el-message__content,
-  & > .el-message__closeBtn {
-    z-index: 1;
+  & > .el-message__badge {
+    opacity: 0;
+    margin-top: -88px;
   }
 
-  & > .el-message__icon > .el-icon {
-    font-size: 16px;
-    animation: rotating 1s linear infinite;
+  &::before {
+    opacity: 0;
   }
+}
 
-  /* 遮罩 */
-  &.ele-message-mask {
-    box-shadow:
-      eleVar('message', 'shadow'),
-      0 0 0 eleVar('message-mask', 'size') eleVar('message-mask', 'color');
+/* 容器 */
+.ele-message-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden;
+
+  & > .ele-message:first-child {
+    margin-top: eleVar('message', 'space');
   }
 
-  /* 居中 */
-  &.is-centered {
-    top: 0 !important;
-    bottom: 0;
-    height: max-content;
-    margin: auto;
+  &.is-hide {
+    display: none;
   }
 }