feat: sport notification link

playground/src/layouts/basic.vue

@@ -36,6 +36,7 @@ setMenuList([
 
 const notifications = ref<NotificationItem[]>([
   {
+    id: 1,
     avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
     date: '3小时前',
     isRead: true,
@@ -43,6 +44,7 @@ const notifications = ref<NotificationItem[]>([
     title: '收到了 14 份新周报',
   },
   {
+    id: 2,
     avatar: 'https://avatar.vercel.sh/1',
     date: '刚刚',
     isRead: false,
@@ -50,6 +52,7 @@ const notifications = ref<NotificationItem[]>([
     title: '朱偏右 回复了你',
   },
   {
+    id: 3,
     avatar: 'https://avatar.vercel.sh/1',
     date: '2024-01-01',
     isRead: false,
@@ -57,12 +60,31 @@ const notifications = ref<NotificationItem[]>([
     title: '曲丽丽 评论了你',
   },
   {
+    id: 4,
     avatar: 'https://avatar.vercel.sh/satori',
     date: '1天前',
     isRead: false,
     message: '描述信息描述信息描述信息',
     title: '代办提醒',
   },
+  {
+    id: 5,
+    avatar: 'https://avatar.vercel.sh/satori',
+    date: '1天前',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '跳转Workspace示例',
+    link: '/workspace',
+  },
+  {
+    id: 6,
+    avatar: 'https://avatar.vercel.sh/satori',
+    date: '1天前',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '跳转外部链接示例',
+    link: 'https://doc.vben.pro',
+  },
 ]);
 
 const userStore = useUserStore();
@@ -115,6 +137,17 @@ function handleNoticeClear() {
   notifications.value = [];
 }
 
+function markRead(id: number | string) {
+  const item = notifications.value.find((item) => item.id === id);
+  if (item) {
+    item.isRead = true;
+  }
+}
+
+function remove(id: number | string) {
+  notifications.value = notifications.value.filter((item) => item.id !== id);
+}
+
 function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
@@ -170,6 +203,8 @@ onBeforeMount(() => {
         :dot="showDot"
         :notifications="notifications"
         @clear="handleNoticeClear"
+        @read="(item) => item.id && markRead(item.id)"
+        @remove="(item) => item.id && remove(item.id)"
         @make-all="handleMakeAll"
       />
     </template>