u

code/base-project/base-vue/packages/ao-design/src/message/demo.vue

@@ -21,6 +21,8 @@ function showMessageType(type: any) {
   message.success({
     message: `这里是 ${type} 提示`,
     type,
+    duration: 0,
+    theme: 'light',
   })
 }
 </script>
@@ -76,6 +78,9 @@ function showMessageType(type: any) {
     </div>
 
     <div class="row">
+      <AButton status="primary" @click="showMessageType('default')">
+        default
+      </AButton>
       <AButton status="primary" @click="showMessageType('info')">
         info
       </AButton>
@@ -85,7 +90,7 @@ function showMessageType(type: any) {
       <AButton status="primary" @click="showMessageType('warning')">
         warning
       </AButton>
-      <AButton status="primary" @click="showMessageType('error')">
+      <AButton status="primary" @click="showMessageType('danger')">
         error
       </AButton>
       <AButton status="primary" @click="showMessageType('loading')">

code/base-project/base-vue/packages/ao-design/src/message/index.scss

@@ -47,22 +47,34 @@ $message-prefix: #{$prefix}-message;
   }
 
   &-info {
-    color: $primary-color;
+    .#{$message-prefix}-icon {
+      color: $primary-color;
+    }
   }
   &-success {
-    color: $success-color;
+    .#{$message-prefix}-icon {
+      color: $success-color;
+    }
   }
   &-warning {
-    color: $warning-color;
+    .#{$message-prefix}-icon {
+      color: $warning-color;
+    }
   }
-  &-error {
-    color: $danger-color;
+  &-danger {
+    .#{$message-prefix}-icon {
+      color: $danger-color;
+    }
   }
   &-question {
-    color: $primary-color;
+    .#{$message-prefix}-icon {
+      color: $primary-color;
+    }
   }
   &-loading {
-    color: $primary-color;
+    .#{$message-prefix}-icon {
+      color: $primary-color;
+    }
   }
   &-placement {
     &-top {
@@ -128,3 +140,27 @@ $message-prefix: #{$prefix}-message;
     }
   }
 }
+.#{$message-prefix}-theme-normal.#{$message-prefix} {
+  background-color: $status-base-bg-color;
+}
+.#{$message-prefix}-theme-light.#{$message-prefix}-default {
+  background-color: $status-base-bg-color;
+}
+.#{$message-prefix}-theme-light.#{$message-prefix}-info {
+  background-color: $status-info-bg-color;
+}
+.#{$message-prefix}-theme-light.#{$message-prefix}-success {
+  background-color: $status-success-bg-color;
+}
+.#{$message-prefix}-theme-light.#{$message-prefix}-warning {
+  background-color: $status-warning-bg-color;
+}
+.#{$message-prefix}-theme-light.#{$message-prefix}-danger {
+  background-color: $status-danger-bg-color;
+}
+.#{$message-prefix}-theme-light.#{$message-prefix}-loading {
+  background-color: $status-info-bg-color;
+}
+.#{$message-prefix}-theme-light.#{$message-prefix}-question {
+  background-color: $status-info-bg-color;
+}

code/base-project/base-vue/packages/ao-design/src/message/index.ts

@@ -14,11 +14,13 @@ type Placement
     | 'bottom-end'
     | 'center'
 
-type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'question'
+type MessageType = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'loading' | 'question'
+type MessageTheme = 'normal' | 'light'
 
 interface MessageOptions {
   message: string | VNode | (() => VNode)
   type?: MessageType
+  theme?: MessageTheme
   placement?: Placement
   duration?: number
   showClose?: boolean
@@ -30,10 +32,11 @@ interface MessageHandle {
 
 interface MessageFn {
   (msg: string | MessageOptions): MessageHandle
+  open: (msg: string | MessageOptions) => MessageHandle
   info: (msg: string | MessageOptions) => MessageHandle
   success: (msg: string | MessageOptions) => MessageHandle
   warning: (msg: string | MessageOptions) => MessageHandle
-  error: (msg: string | MessageOptions) => MessageHandle
+  danger: (msg: string | MessageOptions) => MessageHandle
   closeAll: () => void
 }
 
@@ -68,13 +71,13 @@ function getTransform(placement: Placement, hidden: boolean) {
 export function useMessage(): MessageFn {
   const createMessage = (
     msg: string | MessageOptions,
-    defaultType: MessageType = 'info',
+    defaultType: MessageType = 'default',
   ): MessageHandle => {
     const opts: MessageOptions = typeof msg === 'string'
       ? { message: msg, type: defaultType }
       : { ...msg, type: msg.type || defaultType }
 
-    const { message, type, placement = 'top', duration = 3000, showClose } = opts
+    const { message, type, theme, placement = 'top', duration = 3000, showClose } = opts
     const container = getContainer(placement)
     let timer: number | undefined
     let handle: MessageHandle
@@ -83,6 +86,7 @@ export function useMessage(): MessageFn {
       render() {
         return h(MessageItem, {
           type,
+          theme,
           message,
           placement,
           showClose,
@@ -140,10 +144,11 @@ export function useMessage(): MessageFn {
   }
 
   const api = ((msg: string | MessageOptions) => createMessage(msg)) as MessageFn
+  api.open = msg => createMessage(msg, 'default')
   api.info = msg => createMessage(msg, 'info')
   api.success = msg => createMessage(msg, 'success')
   api.warning = msg => createMessage(msg, 'warning')
-  api.error = msg => createMessage(msg, 'error')
+  api.danger = msg => createMessage(msg, 'danger')
   api.closeAll = () => {
     instances.slice().forEach(instance => instance.close())
   }

code/base-project/base-vue/packages/ao-design/src/message/item.tsx

@@ -8,7 +8,8 @@ const prefixCls = getPrefixCls('message')
 export default defineComponent({
   name: 'MessageItem',
   props: {
-    type: { type: String, default: 'info' },
+    type: { type: String, default: 'default' },
+    theme: { type: String, default: 'normal' },
     message: {
       type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
       required: true,
@@ -23,7 +24,7 @@ export default defineComponent({
   setup(props) {
     const iconMap: Record<string, string> = {
       success: 'ix:success-filled',
-      error: 'ix:error-filled',
+      danger: 'ix:error-filled',
       warning: 'ix:warning-filled',
       info: 'ix:info-filled',
       question: 'ix:question-filled',
@@ -36,14 +37,16 @@ export default defineComponent({
     }
     return () => (
       <div
-        class={`${prefixCls}`}
+        class={`${prefixCls}  ${prefixCls}-theme-${props.theme ?? 'normal'} ${prefixCls}-${props.type ?? 'default'}`}
       >
-        <Icon
-          icon={iconMap[props.type ?? 'info']}
-          size={20}
-          class={`${prefixCls}-icon ${prefixCls}-${props.type ?? 'info'}`}
-          spin={props.type === 'loading'}
-        />
+        {props.type !== 'default' && (
+          <Icon
+            icon={iconMap[props.type ?? 'info']}
+            size={20}
+            class={`${prefixCls}-icon`}
+            spin={props.type === 'loading'}
+          />
+        )}
         <span class={`${prefixCls}-message`}>
           {renderMessage(props.message)}
         </span>