feat: 实现notification卡片轮播，并且在类型不是为event时暂停轮播

src/views/Layout/src/components/Header/components/TrainingCard.vue

@@ -55,23 +55,103 @@ const notificationList = [
       content:
         'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
     }
+  },
+  {
+    notificationType: 'event',
+    info: {
+      type: 'milestone',
+      isMultiple: true,
+      numericRecords: 3,
+      isRead: true,
+      title: 'Milestone Update 1',
+      mode: 'Ocean Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8'
+    }
+  },
+  {
+    notificationType: 'event',
+    info: {
+      type: 'milestone',
+      isMultiple: true,
+      numericRecords: 3,
+      isRead: true,
+      title: 'Milestone Update 2',
+      mode: 'Ocean Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8'
+    }
+  },
+  {
+    notificationType: 'event',
+    info: {
+      type: 'milestone',
+      isMultiple: true,
+      numericRecords: 3,
+      isRead: true,
+      title: 'Milestone Update 3',
+      mode: 'Ocean Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8'
+    }
   }
 ]
-const curCard = ref(notificationList[0])
-const curIndex = ref(0)
-const intervalId = setInterval(() => {
-  curIndex.value = ++curIndex.value
+
+const curCard = ref(null)
+const curIndex = ref(-1)
+
+const nextNotification = () => {
+  let result = true
+  // 更新当前索引和卡片
+  curIndex.value = curIndex.value + 1
   curCard.value = notificationList[curIndex.value]
-  if (curIndex.value === notificationList.length - 1) {
+  // 如果消息为password或者feature类型，暂停自动轮播
+  if (
+    curCard.value?.notificationType === 'password' ||
+    curCard.value?.notificationType === 'feature'
+  ) {
+    clearInterval(intervalId)
+    result = false
+  }
+
+  // 如果到达最后一个消息，设置为null以清除显示
+  if (curIndex.value >= notificationList.length) {
+    clearInterval(intervalId)
     curCard.value = null
+    result = false
+  }
+  return result
+}
+
+// 设置定时器进行自动轮播
+let intervalId = setInterval(nextNotification, 2000)
+
+const closeMessage = () => {
+  // 如果当前消息为event类型，则需先清除定时器
+  if (curCard.value?.notificationType === 'event') {
     clearInterval(intervalId)
   }
-}, 1000)
+
+  const result = nextNotification()
+  if (result) {
+    intervalId = setInterval(nextNotification, 2000)
+  }
+}
 </script>
 
 <template>
   <div class="training-card" v-if="curCard">
-    <el-button style="height: 18px; width: 18px" class="el-button--text close-icon">
+    <el-button
+      @click="closeMessage"
+      style="height: 18px; width: 18px"
+      class="el-button--text close-icon"
+    >
       <span class="font_family icon-icon_reject_b"></span>
     </el-button>
     <NotificationMessageCard v-if="curCard" :data="[curCard]"></NotificationMessageCard>