docs(notification): improve system notification docs

packages/docs/src/pages/components/notification/demo/close-tag.vue

@@ -2,56 +2,77 @@
 import { Notification as notification } from "@antdv-next/x";
 
 const describeInfo: Record<NotificationPermission, string> = {
-  denied: "通知权限已被拒绝，你需要在浏览器网站设置中手动重置通知权限。",
-  granted: "通知权限已授予，你可以点击「发送通知」按钮来推送一条通知。",
-  default: "请先请求权限，授权后即可推送通知。",
+  denied:
+    "Notification permission has been denied, You need to manually reset the notification permissions in the website settings to trigger the permission request pop-up.",
+  granted:
+    'Notification permission has been granted, you can click the "Open a notification" button to push a  notification.',
+  default:
+    "Please Request Permission,After the request is approved, you can push notifications.",
 };
 
 const [{ permission }, { open, close, requestPermission }] =
   notification.useNotification();
 
 const openClick = () => {
   open({
-    title: "任务完成",
-    body: "任务于 13:12 完成",
+    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",
-    onClick: (event, closeFn) => {
-      console.log("onClick", event, closeFn);
-      closeFn?.();
+    icon: "https://x.antdv-next.com/x.svg",
+    onClick: (event, close) => {
+      console.log("onClick", event, close);
+      close?.();
     },
     onClose: event => {
       console.log("onClose", event);
     },
+    onError: event => {
+      console.log("onError", event);
+    },
+    onShow: event => {
+      console.log("onShow", event);
+    },
   });
 };
 </script>
 
 <template>
   <a-flex vertical gap="middle">
-    <span>{{ describeInfo[permission] }}</span>
+    {{ describeInfo[permission] }}
     <a-flex gap="middle">
       <a-button
         type="primary"
         :disabled="permission !== 'default'"
-        @click="requestPermission()"
+        @click="requestPermission"
       >
-        {{ permission === "default" ? "请求权限" : `通知权限：${permission}` }}
+        {{
+          permission === "default"
+            ? "Please Request Permission"
+            : `Notification permission has been ${permission}`
+        }}
       </a-button>
       <a-button
         type="primary"
         :disabled="permission !== 'granted'"
         @click="openClick"
       >
-        发送通知
+        Open a notification
       </a-button>
       <a-button
         danger
         :disabled="permission !== 'granted'"
         @click="close(['tag_task_completed'])"
       >
-        按 Tag 关闭
+        Destroy tag
       </a-button>
     </a-flex>
   </a-flex>
 </template>
+
+<docs lang="zh-CN">
+关闭指定`tag`通知框。
+</docs>
+
+<docs lang="en-US">
+Close the specified `tag` notification box.
+</docs>

packages/docs/src/pages/components/notification/demo/duration.vue

@@ -2,49 +2,70 @@
 import { Notification as notification } from "@antdv-next/x";
 
 const describeInfo: Record<NotificationPermission, string> = {
-  denied: "通知权限已被拒绝，你需要在浏览器网站设置中手动重置通知权限。",
-  granted: "通知权限已授予，你可以点击「发送通知」按钮来推送一条通知。",
-  default: "请先请求权限，授权后即可推送通知。",
+  denied:
+    "Notification permission has been denied, You need to manually reset the notification permissions in the website settings to trigger the permission request pop-up.",
+  granted:
+    'Notification permission has been granted, you can click the "Open a notification" button to push a  notification.',
+  default:
+    "Please Request Permission,After the request is approved, you can push notifications.",
 };
 
 const [{ permission }, { open, requestPermission }] =
   notification.useNotification();
 
 const openClick = () => {
   open({
-    title: "任务完成",
-    body: "任务于 13:12 完成（4.5 秒后自动关闭）",
+    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",
+    icon: "https://x.antdv-next.com/x.svg",
     onClick: (event, close) => {
       console.log("onClick", event, close);
       close?.();
     },
     onClose: event => {
       console.log("onClose", event);
     },
+    onError: event => {
+      console.log("onError", event);
+    },
+    onShow: event => {
+      console.log("onShow", event);
+    },
   });
 };
 </script>
 
 <template>
   <a-flex vertical gap="middle">
-    <span>{{ describeInfo[permission] }}</span>
+    {{ describeInfo[permission] }}
     <a-flex gap="middle">
       <a-button
         type="primary"
         :disabled="permission !== 'default'"
-        @click="requestPermission()"
+        @click="requestPermission"
       >
-        {{ permission === "default" ? "请求权限" : `通知权限：${permission}` }}
+        {{
+          permission === "default"
+            ? "Please Request Permission"
+            : `Notification permission has been ${permission}`
+        }}
       </a-button>
       <a-button
         type="primary"
         :disabled="permission !== 'granted'"
         @click="openClick"
       >
-        发送通知（自动关闭）
+        Open a notification
       </a-button>
     </a-flex>
   </a-flex>
 </template>
+
+<docs lang="zh-CN">
+使用`duration`设置通知框自动关闭的延时。
+</docs>
+
+<docs lang="en-US">
+Use 'duration' to set the delay for the notification box to automatically close.
+</docs>

packages/docs/src/pages/components/notification/demo/hooks.vue

@@ -1,58 +1,88 @@
 <script setup lang="ts">
-import type { XNotificationOpenArgs } from "@antdv-next/x";
-
 import { Notification as notification } from "@antdv-next/x";
+import { onMounted, ref } from "vue";
 
 const describeInfo: Record<NotificationPermission, string> = {
-  denied: "通知权限已被拒绝，你需要在浏览器网站设置中手动重置通知权限。",
-  granted: "通知权限已授予，你可以点击「发送通知」按钮来推送一条通知。",
-  default: "请先请求权限，授权后即可推送通知。",
+  denied:
+    "Notification permission has been denied, You need to manually reset the notification permissions in the website settings to trigger the permission request pop-up.",
+  granted:
+    'Notification permission has been granted, you can click the "Open a notification" button to push a  notification.',
+  default:
+    "Please Request Permission,After the request is approved, you can push notifications.",
+};
+
+const permission = ref<NotificationPermission>();
+
+const open = () => {
+  notification.open({
+    title: "Task completed",
+    body: "The task was completed at 13:12",
+    badge: "https://x.antdv-next.com/x.svg",
+    icon: "https://x.antdv-next.com/x.svg",
+    onClick: (event, close) => {
+      console.log("onClick", event, close);
+      close?.();
+    },
+    onClose: event => {
+      console.log("onClose", event);
+    },
+    onError: event => {
+      console.log("onError", event);
+    },
+    onShow: event => {
+      console.log("onShow", event);
+    },
+  });
 };
 
-const openData: XNotificationOpenArgs = {
-  title: "任务完成",
-  body: "任务于 13:12 完成",
-  icon: "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original",
-  onClick: (event, close) => {
-    console.log("onClick", event, close);
-    close?.();
-  },
-  onClose: event => {
-    console.log("onClose", event);
-  },
-  onError: event => {
-    console.log("onError", event);
-  },
-  onShow: event => {
-    console.log("onShow", event);
-  },
+const close = () => {
+  notification.close();
 };
 
-const [{ permission }, { open, requestPermission, close }] =
-  notification.useNotification();
+const request = async () => {
+  permission.value = await notification.requestPermission();
+};
+
+onMounted(() => {
+  permission.value = notification.permission;
+});
 </script>
 
 <template>
   <a-flex vertical gap="middle">
-    <span>{{ describeInfo[permission] }}</span>
+    <template v-if="permission">
+      {{ describeInfo[permission] }}
+    </template>
     <a-flex gap="middle">
       <a-button
         type="primary"
         :disabled="permission !== 'default'"
-        @click="requestPermission()"
+        @click="request"
       >
-        {{ permission === "default" ? "请求权限" : `通知权限：${permission}` }}
+        {{
+          permission === "default"
+            ? "Please Request Permission"
+            : `Notification permission has been ${permission}`
+        }}
       </a-button>
       <a-button
         type="primary"
         :disabled="permission !== 'granted'"
-        @click="open(openData)"
+        @click="open"
       >
-        发送通知
+        Open a notification
       </a-button>
-      <a-button danger :disabled="permission !== 'granted'" @click="close()">
-        关闭所有
+      <a-button danger :disabled="permission !== 'granted'" @click="close">
+        Destroy All
       </a-button>
     </a-flex>
   </a-flex>
 </template>
+
+<docs lang="zh-CN">
+hooks调用。发送通知前需要向用户请求通知权限，授权可通知后可发送通知， 若授权禁止通知则不可以发送通知。
+</docs>
+
+<docs lang="en-US">
+hooks call.Before sending notifications, it is necessary to request notification permission from the user. Once authorized, notifications can be sent. If authorization prohibits notifications, notifications cannot be sent.
+</docs>

packages/docs/src/pages/components/notification/demo/static-method.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import { Notification as notification } from "@antdv-next/x";
+import { onMounted, ref } from "vue";
 
 const describeInfo: Record<NotificationPermission, string> = {
-  denied: "通知权限已被拒绝，你需要在浏览器网站设置中手动重置通知权限。",
-  granted: "通知权限已授予，你可以点击「发送通知」按钮来推送一条通知。",
-  default: "请先请求权限，授权后即可推送通知。",
+  denied:
+    "Notification permission has been denied, You need to manually reset the notification permissions in the website settings to trigger the permission request pop-up.",
+  granted:
+    'Notification permission has been granted, you can click the "Open a notification" button to push a  notification.',
+  default:
+    "Please Request Permission,After the request is approved, you can push notifications.",
 };
 
-// 静态方法：不使用 useNotification()，直接调用实例方法
-// permission 仍通过 useNotification 获取响应式状态
-const [{ permission }] = notification.useNotification();
-
-const request = async () => {
-  await notification.requestPermission();
-};
+const permission = ref<NotificationPermission>();
 
 const open = () => {
   notification.open({
-    title: "任务完成",
-    body: "任务于 13:12 完成",
-    icon: "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original",
+    title: "Task completed",
+    body: "The task was completed at 13:12",
+    badge: "https://x.antdv-next.com/x.svg",
+    icon: "https://x.antdv-next.com/x.svg",
     onClick: (event, close) => {
       console.log("onClick", event, close);
       close?.();
@@ -36,32 +35,54 @@ const open = () => {
   });
 };
 
-const closeAll = () => {
+const close = () => {
   notification.close();
 };
+
+const request = async () => {
+  permission.value = await notification.requestPermission();
+};
+
+onMounted(() => {
+  permission.value = notification.permission;
+});
 </script>
 
 <template>
   <a-flex vertical gap="middle">
-    <span>{{ describeInfo[permission] }}</span>
+    <template v-if="permission">
+      {{ describeInfo[permission] }}
+    </template>
     <a-flex gap="middle">
       <a-button
         type="primary"
         :disabled="permission !== 'default'"
         @click="request"
       >
-        {{ permission === "default" ? "请求权限" : `通知权限：${permission}` }}
+        {{
+          permission === "default"
+            ? "Please Request Permission"
+            : `Notification permission has been ${permission}`
+        }}
       </a-button>
       <a-button
         type="primary"
         :disabled="permission !== 'granted'"
         @click="open"
       >
-        发送通知
+        Open a notification
       </a-button>
-      <a-button danger :disabled="permission !== 'granted'" @click="closeAll">
-        关闭所有
+      <a-button danger :disabled="permission !== 'granted'" @click="close">
+        Destroy All
       </a-button>
     </a-flex>
   </a-flex>
 </template>
+
+<docs lang="zh-CN">
+静态方法调用。发送通知前需要向用户请求通知权限，授权可通知后可发送通知， 若授权禁止通知则不可以发送通知。
+</docs>
+
+<docs lang="en-US">
+Static method invocation.Before sending notifications, it is necessary to request notification permission from the user. Once authorized, notifications can be sent. If authorization prohibits notifications, notifications cannot be sent.
+</docs>