u

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

@@ -3,29 +3,28 @@
 
 $message-prefix: #{$prefix}-message;
 
+.#{$message-prefix}-wrapper {
+  position: fixed;
+  z-index: 6000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .#{$message-prefix} {
-  &-wrapper {
-    position: fixed;
-    z-index: 6000;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  &-item {
-    display: inline-flex;
-    align-items: center;
-    outline: 0;
-    width: fit-content;
-    vertical-align: middle;
-    border-radius: $border-radius;
-    padding: 6px 12px;
-    background-color: $bg-color-container;
-    color: $text-color-base;
-    box-shadow: $shadow-overlay;
-    box-sizing: border-box;
-    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
-  &-content {
+  display: inline-flex;
+  align-items: center;
+  outline: 0;
+  width: fit-content;
+  vertical-align: middle;
+  border-radius: $border-radius;
+  padding: 6px 12px;
+  background-color: $bg-color-container;
+  color: $text-color-base;
+  box-shadow: $shadow-overlay;
+  box-sizing: border-box;
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  &-message {
     font-size: 14px;
     line-height: 1;
   }
@@ -40,8 +39,8 @@ $message-prefix: #{$prefix}-message;
     color: $text-color-assist;
     cursor: pointer;
     border-radius: 50%;
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     &:hover {
       background-color: $default-color-hover;
     }

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue'
 import { createApp, h } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import MessageItem from './item'
@@ -16,7 +17,7 @@ type Placement
 type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'question'
 
 interface MessageOptions {
-  message: string
+  message: string | VNode | (() => VNode)
   type?: MessageType
   placement?: Placement
   duration?: number

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

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { PropType, VNode } from 'vue'
 import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import Icon from '../icon/index'
@@ -9,7 +9,10 @@ export default defineComponent({
   name: 'MessageItem',
   props: {
     type: { type: String, default: 'info' },
-    message: { type: String, required: true },
+    message: {
+      type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
+      required: true,
+    },
     placement: { type: String, required: true },
     showClose: { type: Boolean, default: false },
     onClose: {
@@ -26,10 +29,14 @@ export default defineComponent({
       question: 'ix:question-filled',
       loading: 'mingcute:loading-line',
     }
-
+    const renderMessage = (message: string | VNode | (() => VNode)) => {
+      if (typeof message === 'function')
+        return message()
+      return message
+    }
     return () => (
       <div
-        class={`${prefixCls}-item`}
+        class={`${prefixCls}`}
       >
         <Icon
           icon={iconMap[props.type ?? 'info']}
@@ -37,7 +44,9 @@ export default defineComponent({
           class={`${prefixCls}-icon ${prefixCls}-${props.type ?? 'info'}`}
           spin={props.type === 'loading'}
         />
-        <span class={`${prefixCls}-content`}>{props.message}</span>
+        <span class={`${prefixCls}-message`}>
+          {renderMessage(props.message)}
+        </span>
         {props.showClose
           ? (
               <Icon