u

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useNotification } from '@ao/ao-design'
+import { h } from 'vue'
+
+const notification = useNotification()
+
+function showCustomMessage() {
+  notification.success({
+    title: '自定义消息',
+    message: () =>
+      h('div', { style: { color: 'red', position: 'relative' } }, [
+        h('p', {}, '这里是自定义内容，可以是任意 VNode'),
+        h('strong', {}, '加粗文本'),
+        // 右下角按钮容器
+        h(
+          'div',
+          {
+            style: {
+              position: 'absolute',
+              bottom: '4px',
+              right: '4px',
+              display: 'flex',
+              gap: '4px',
+            },
+          },
+          [
+            h(
+              'button',
+              {
+                style: { fontSize: '12px', padding: '2px 6px' },
+                onClick: () => alert('Button A clicked'),
+              },
+              'A',
+            ),
+            h(
+              'button',
+              {
+                style: { fontSize: '12px', padding: '2px 6px' },
+                onClick: () => alert('Button B clicked'),
+              },
+              'B',
+            ),
+          ],
+        ),
+      ]),
+    type: 'success',
+    showClose: true,
+  })
+}
+</script>
+
+<template>
+  <div class="demo">
+    <AButton status="primary" @click="showCustomMessage">
+      自定义 h 函数消息
+    </AButton>
+  </div>
+</template>
+
+<style scoped>
+.demo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  margin-top: 40px;
+}
+</style>

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

@@ -8,7 +8,7 @@ $notification-prefix: #{$prefix}-notification;
   z-index: 6000;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
 }
 
 .#{$notification-prefix} {
@@ -54,7 +54,7 @@ $notification-prefix: #{$prefix}-notification;
     margin-left: 6px;
     color: $text-color-assist;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: $border-radius;
     width: 20px;
     height: 20px;
     &:hover {
@@ -62,7 +62,7 @@ $notification-prefix: #{$prefix}-notification;
     }
   }
 
-  &-content {
+  &-message {
     margin-top: 8px;
     font-size: 14px;
     color: $text-color-secondary;

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

@@ -12,7 +12,7 @@ type Placement
 type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'question'
 
 interface NotificationOptions {
-  content: string | VNode | (() => VNode)
+  message: string | VNode | (() => VNode)
 
   title: string
   subTitle?: string
@@ -63,7 +63,7 @@ export function useNotification(): MessageFn {
     opts: NotificationOptions,
     defaultType: NotificationType = 'info',
   ): NotificationHandle => {
-    const { content, title, subTitle, type = defaultType, placement = 'top-end', duration = 3000, showClose } = opts
+    const { message, title, subTitle, type = defaultType, placement = 'top-end', duration = 3000, showClose } = opts
 
     const container = getContainer(placement)
     let timer: number | undefined
@@ -75,7 +75,7 @@ export function useNotification(): MessageFn {
           type,
           title,
           subTitle,
-          content,
+          message,
           placement,
           showClose,
           style: {

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

@@ -1,5 +1,5 @@
 import type { PropType, VNode } from 'vue'
-import { defineComponent, h } from 'vue'
+import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import Icon from '../icon/index'
 
@@ -10,7 +10,7 @@ export default defineComponent({
   props: {
     type: { type: String, default: 'info' },
     title: { type: String, required: true },
-    content: {
+    message: {
       type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
       required: true,
     },
@@ -31,10 +31,10 @@ export default defineComponent({
       question: 'ix:question-filled',
       loading: 'mingcute:loading-line',
     }
-    const renderContent = (content: string | VNode | (() => VNode)) => {
-      if (typeof content === 'function')
-        return content()
-      return content
+    const renderMessage = (message: string | VNode | (() => VNode)) => {
+      if (typeof message === 'function')
+        return message()
+      return message
     }
     return () => (
       <div
@@ -67,8 +67,8 @@ export default defineComponent({
               : null}
           </div>
 
-          <div class={`${prefixCls}-content`}>
-            {renderContent(props.content)}
+          <div class={`${prefixCls}-message`}>
+            {renderMessage(props.message)}
           </div>
         </div>