Notification 系统通知

系统级别发送在页面外部显示的通知（浏览器 Web Notification API）。对齐 @ant-design/x Notification。

何时使用

• 在智能体执行复杂任务时，可推送系统应用级别通知，使用户随时掌握任务进展。
• 受操作系统通知权限管控，仅用于强通知场景。

注意

• notification 为系统应用通知，受操作系统通知权限管控；若权限关闭，open 将无效果。
• 由扩展 window.Notification 实现；浏览器不支持时方法调用无效果。
• 通知样式与效果以当前浏览器对 Notification 的支持为准。
• 仅对当前实例下已推送的通知进行关闭管理；页面刷新后无法关闭此前通知。

与 ant-design-vue 的 UI Toast notification 不同。若同时使用，请对其中一方做别名导入。

代码演示

Hooks 调用

通过 useNotification 请求权限并推送通知。

通知权限已被拒绝，需要在网站设置中手动重置通知权限后才能再次触发授权弹窗。

<script setup lang="tsx">
import { Button, Flex } from 'ant-design-vue';
import { notification, type XNotificationOpenArgs } from 'ant-design-x-vue';

defineOptions({ name: 'AXNotificationHooks' });

const DescribeInfo: Record<NotificationPermission, string> = {
  denied:
    '通知权限已被拒绝，需要在网站设置中手动重置通知权限后才能再次触发授权弹窗。',
  granted: '通知权限已授予，可点击「打开通知」推送一条系统通知。',
  default: '请先请求权限，授权通过后即可推送通知。',
};

const openData: XNotificationOpenArgs = {
  title: 'Task completed',
  body: 'The task was completed at 13:12',
  icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original',
  onClick: (_event, close) => {
    close?.();
  },
};

const [state, { open, requestPermission, close }] = notification.useNotification();

defineRender(() => {
  return (
    <Flex vertical gap="middle">
      <div>{DescribeInfo[state.permission]}</div>
      <Flex gap="middle" wrap="wrap">
        <Button
          disabled={state.permission !== 'default'}
          type="primary"
          onClick={() => requestPermission()}
        >
          {state.permission === 'default'
            ? '请请求权限'
            : `通知权限：${state.permission}`}
        </Button>
        <Button
          disabled={state.permission !== 'granted'}
          type="primary"
          onClick={() => open(openData)}
        >
          打开通知
        </Button>
        <Button danger disabled={state.permission !== 'granted'} onClick={() => close()}>
          关闭全部
        </Button>
      </Flex>
    </Flex>
  );
});
</script>

隐藏源代码

自动关闭延时

设置 duration（秒）后自动关闭。

通知权限已被拒绝，请在网站设置中重置权限。

<script setup lang="tsx">
import { Button, Flex } from 'ant-design-vue';
import { notification } from 'ant-design-x-vue';

defineOptions({ name: 'AXNotificationDuration' });

const describeInfo: Record<NotificationPermission, string> = {
  denied: '通知权限已被拒绝，请在网站设置中重置权限。',
  granted: '通知权限已授予，打开后将在 4.5 秒后自动关闭。',
  default: '请先请求权限。',
};

const [state, { open, requestPermission }] = notification.useNotification();

defineRender(() => {
  return (
    <Flex vertical gap="middle">
      <div>{describeInfo[state.permission]}</div>
      <Flex gap="middle" wrap="wrap">
        <Button
          disabled={state.permission !== 'default'}
          type="primary"
          onClick={() => requestPermission()}
        >
          {state.permission === 'default'
            ? '请请求权限'
            : `通知权限：${state.permission}`}
        </Button>
        <Button
          disabled={state.permission !== 'granted'}
          type="primary"
          onClick={() =>
            open({
              title: 'Task completed',
              body: 'The task was completed at 13:12',
              duration: 4.5,
              icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original',
            })
          }
        >
          打开通知
        </Button>
      </Flex>
    </Flex>
  );
});
</script>

隐藏源代码

关闭指定通知

通过 tag 关闭指定通知。

通知权限已被拒绝，请在网站设置中重置权限。

<script setup lang="tsx">
import { Button, Flex } from 'ant-design-vue';
import { notification } from 'ant-design-x-vue';

defineOptions({ name: 'AXNotificationCloseTag' });

const describeInfo: Record<NotificationPermission, string> = {
  denied: '通知权限已被拒绝，请在网站设置中重置权限。',
  granted: '通知权限已授予，可通过 tag 关闭指定通知。',
  default: '请先请求权限。',
};

const [state, { open, close, requestPermission }] = notification.useNotification();

defineRender(() => {
  return (
    <Flex vertical gap="middle">
      <div>{describeInfo[state.permission]}</div>
      <Flex gap="middle" wrap="wrap">
        <Button
          disabled={state.permission !== 'default'}
          type="primary"
          onClick={() => requestPermission()}
        >
          {state.permission === 'default'
            ? '请请求权限'
            : `通知权限：${state.permission}`}
        </Button>
        <Button
          disabled={state.permission !== 'granted'}
          type="primary"
          onClick={() =>
            open({
              title: 'Task completed',
              body: 'The task was completed at 13:12',
              tag: 'tag_task_completed',
              icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original',
            })
          }
        >
          打开通知
        </Button>
        <Button
          danger
          disabled={state.permission !== 'granted'}
          onClick={() => close(['tag_task_completed'])}
        >
          关闭指定 tag
        </Button>
      </Flex>
    </Flex>
  );
});
</script>

隐藏源代码

静态方法

在非组件上下文中使用静态方法。

<script setup lang="tsx">
import { Button, Flex } from 'ant-design-vue';
import { notification } from 'ant-design-x-vue';
import { onMounted, ref } from 'vue';

defineOptions({ name: 'AXNotificationStaticMethod' });

const describeInfo: Record<NotificationPermission, string> = {
  denied: '通知权限已被拒绝，请在网站设置中重置权限。',
  granted: '通知权限已授予，可使用静态方法推送通知。',
  default: '请先请求权限。',
};

const permission = ref<NotificationPermission>();

onMounted(() => {
  permission.value = notification.permission;
});

const request = async () => {
  permission.value = await notification.requestPermission();
};

const open = () => {
  notification.open({
    title: 'Task completed',
    body: 'The task was completed at 13:12',
    icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original',
  });
};

defineRender(() => {
  return (
    <Flex vertical gap="middle">
      {permission.value ? <div>{describeInfo[permission.value]}</div> : null}
      <Flex gap="middle" wrap="wrap">
        <Button
          disabled={permission.value !== 'default'}
          type="primary"
          onClick={request}
        >
          {permission.value === 'default'
            ? '请请求权限'
            : `通知权限：${permission.value}`}
        </Button>
        <Button
          disabled={permission.value !== 'granted'}
          type="primary"
          onClick={open}
        >
          打开通知
        </Button>
        <Button
          danger
          disabled={permission.value !== 'granted'}
          onClick={() => notification.close()}
        >
          关闭全部
        </Button>
      </Flex>
    </Flex>
  );
});
</script>

隐藏源代码

API

成功发送通知需确保已授权当前域名通知权限。

notification / XNotification

属性	说明	类型	默认值
permission	当前来源是否已授予显示 Web 通知的权限	NotificationPermission	-
requestPermission	向用户请求显示通知的权限	() => Promise<NotificationPermission>	-
open	向用户推送一个通知	(config: XNotificationOpenArgs) => void	-
close	关闭已推送的通知；传入 tag 列表可关闭指定通知，无参数则关闭全部	(tags?: string[]) => void	-

NotificationPermission

type NotificationPermission = 'granted' | 'denied' | 'default';

XNotificationOpenArgs

type XNotificationOpenArgs = NotificationOptions & {
  title: string;
  onClick?: (event: Event, close?: Notification['close']) => void;
  onClose?: (event: Event) => void;
  onError?: (event: Event) => void;
  onShow?: (event: Event) => void;
  duration?: number; // 秒
};

useNotification

const [{ permission }, { open, close, requestPermission }] = useNotification();
// 或
const [{ permission }, api] = notification.useNotification();

贡献者

贡献者

正在加载贡献者信息...