u

code/g3soft-libs/docs/examples/notification/basic.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// 与 Message 的区别：带标题与描述，默认停留更久（4500ms），适合承载需要阅读的信息
+import { G3Button, G3Notification, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space :size="[8, 8]" wrap>
+    <G3Button
+      type="outline"
+      @click="
+        G3Notification.success({ title: '发布成功', description: '版本 1.2.0 已上线，5 分钟后全量生效' })
+      "
+    >
+      成功通知
+    </G3Button>
+
+    <G3Button
+      type="outline"
+      @click="
+        G3Notification.error({ title: '构建失败', description: '单元测试未通过，点击查看日志', duration: 0 })
+      "
+    >
+      不自动关闭的错误通知
+    </G3Button>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/notification/close.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// 句柄关闭与全局清理：handle.close() 关一条，G3Notification.destroy() 全部清空
+import { G3Button, G3Notification, G3Space } from '@g3soft/ui'
+
+function openMany() {
+  G3Notification.info({ title: '任务 1', description: '处理中' })
+  G3Notification.info({ title: '任务 2', description: '处理中' })
+  G3Notification.warning({ title: '任务 3', description: '需要人工确认', duration: 0 })
+}
+
+function openAndClose() {
+  const handle = G3Notification.success({ title: '即将被关闭', description: '1.5 秒后自动关闭' })
+  setTimeout(() => handle.close(), 1500)
+}
+</script>
+
+<template>
+  <G3Space :size="[8, 8]" wrap>
+    <G3Button type="outline" @click="openMany">打开多条</G3Button>
+    <G3Button type="outline" @click="openAndClose">句柄关闭</G3Button>
+    <G3Button type="outline" @click="G3Notification.destroy()">全部清空</G3Button>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/notification/placement.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 通知只出现在四角；placement 可逐条指定，也可用 config 设全局默认
+import { G3Button, G3Notification, G3Space } from '@g3soft/ui'
+
+const placements = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const
+</script>
+
+<template>
+  <G3Space :size="[8, 8]" wrap>
+    <G3Button
+      v-for="placement in placements"
+      :key="placement"
+      type="outline"
+      size="small"
+      @click="G3Notification.info({ title: placement, description: '四角之一', placement })"
+    >
+      {{ placement }}
+    </G3Button>
+  </G3Space>
+</template>