u

code/base-project/base-vue/src/App.vue

@@ -1,97 +1,60 @@
 <script setup lang="ts">
-import { useMessage } from '@ao/ao-design'
+import { useNotification } from '@ao/ao-design'
+import { h } from 'vue'
 
-const message = useMessage()
+const notification = useNotification()
 
-function showMessage(placement: any) {
-  message.success({
-    message: `这里是 ${placement} 提示`,
-    placement,
-  })
-}
-function closeOne() {
-  const handle = message.success({
-    message: '测试',
+function showCustomMessage() {
+  notification.success({
+    title: '自定义消息',
+    content: () =>
+      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',
     duration: 0,
     showClose: true,
   })
 }
-
-function showMessageType(type: any) {
-  message.success({
-    message: `这里是 ${type} 提示`,
-    type,
-  })
-}
 </script>
 
 <template>
   <div class="demo">
-    <div class="row">
-      <AButton status="primary" @click="showMessage('top-start')">
-        Top Start
-      </AButton>
-      <AButton status="primary" @click="showMessage('top')">
-        Top
-      </AButton>
-      <AButton status="primary" @click="showMessage('top-end')">
-        Top End
-      </AButton>
-    </div>
-
-    <div class="row">
-      <AButton status="primary" @click="showMessage('left')">
-        Left
-      </AButton>
-      <AButton status="primary" @click="showMessage('center')">
-        Center
-      </AButton>
-      <AButton status="primary" @click="showMessage('right')">
-        Right
-      </AButton>
-    </div>
-
-    <div class="row">
-      <AButton status="primary" @click="showMessage('bottom-start')">
-        Bottom Start
-      </AButton>
-      <AButton status="primary" @click="showMessage('bottom')">
-        Bottom
-      </AButton>
-      <AButton status="primary" @click="showMessage('bottom-end')">
-        Bottom End
-      </AButton>
-    </div>
-
-    <div class="row">
-      <AButton status="primary" @click="message.closeAll">
-        Close All
-      </AButton>
-
-      <AButton
-        status="primary" @click="closeOne"
-      >
-        Show No Close
-      </AButton>
-    </div>
-
-    <div class="row">
-      <AButton status="primary" @click="showMessageType('info')">
-        info
-      </AButton>
-      <AButton status="primary" @click="showMessageType('success')">
-        success
-      </AButton>
-      <AButton status="primary" @click="showMessageType('warning')">
-        warning
-      </AButton>
-      <AButton status="primary" @click="showMessageType('error')">
-        error
-      </AButton>
-      <AButton status="primary" @click="showMessageType('loading')">
-        loading
-      </AButton>
-    </div>
+    <AButton status="primary" @click="showCustomMessage">
+      自定义 h 函数消息
+    </AButton>
   </div>
 </template>
 
@@ -103,9 +66,4 @@ function showMessageType(type: any) {
   gap: 16px;
   margin-top: 40px;
 }
-
-.row {
-  display: flex;
-  gap: 12px;
-}
 </style>