feat: 实现system message部门样式

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

@@ -9,6 +9,7 @@ import { onBeforeRouteUpdate } from 'vue-router'
 import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
 import NotificationDrawer from './components/NotificationDrawer.vue'
+import TrainingCard from './components/TrainingCard.vue'
 
 const themeStore = useThemeStore()
 const userStore = useUserStore()
@@ -165,6 +166,7 @@ const notificationDrawer = ref(false)
 <template>
   <div class="layout-toolbar">
     <VBreadcrumb></VBreadcrumb>
+    <TrainingCard></TrainingCard>
     <div class="right-info">
       <el-input
         v-model="searchValue"
@@ -335,6 +337,7 @@ const notificationDrawer = ref(false)
 .layout-toolbar {
   display: flex;
   justify-content: space-between;
+  position: relative;
   height: 100%;
 }
 .right-info {

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import DelayNotificationCard from '@/views/SystemMessage/src/components/DelayNotificationCard.vue'
+
+const notificationList: any = [
+  {
+    type: 'milestone',
+    isMultiple: true,
+    numericRecords: 3,
+    isRead: true,
+    title: 'Milestone Update',
+    mode: 'Ocean Freight',
+    no: 'HBOL: SHJN2301234',
+    tag: 'Booking Confirmed',
+    location: 'Hong Kong',
+    time: 'Jan 10, 2025 14:30 UTC+8'
+  },
+  {
+    type: 'container',
+    isRead: false,
+    mode: '',
+    no: 'HBOL: SHJN2301234',
+    tag: 'Unloaded From Vessel',
+    location: 'Hong Kong',
+    time: 'Jan 10, 2025 14:30 UTC+8',
+    previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
+  },
+  {
+    type: 'delay',
+    numericRecords: 0,
+    isRead: false,
+    title: 'Delay Daily Summary (Jan 10, 2025)',
+    mode: 'Air Freight',
+    no: 'HBOL: SHJN2301234',
+    tag: 'Departure Delay',
+    location: 'Hong Kong',
+    time: 'Jan 10, 2025 14:30 UTC+8',
+    delayInfo: {
+      delayTime: 'ATD: Jan 12, 16:30 (+2 days delay)'
+    }
+  },
+  {
+    type: 'change',
+    numericRecords: 0,
+    isRead: false,
+    title: 'ETD/ETA  Change Weekly Summary (Jan 4- 10, 2025) ',
+    mode: 'Air Freight',
+    no: 'HBOL: SHJN2301234',
+    tag: 'ETD Change',
+    location: 'Hong Kong',
+    changeTime: 'Updated ETD: Jan 17, 15:00',
+    time: 'Jan 10, 2025 14:30 UTC+8'
+  }
+]
+const curCard = ref(notificationList[2])
+</script>
+
+<template>
+  <div class="training-card">
+    <DelayNotificationCard :data="curCard"></DelayNotificationCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.training-card {
+  position: absolute;
+  top: 60px;
+  right: 20px;
+  z-index: 2000;
+  width: 432px;
+  padding: 16px;
+  padding-bottom: 0;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.1);
+}
+</style>

src/views/SystemMessage/src/SystemMessage.vue

@@ -34,6 +34,8 @@ const handleClick = () => {}
 
 const notificationList = [
   {
+    type: 'milestone',
+    isMultiple: true,
     numericRecords: 3,
     isRead: true,
     title: 'Milestone Update',
@@ -63,7 +65,9 @@ const notificationList = [
     tag: 'Departure Delay',
     location: 'Hong Kong',
     time: 'Jan 10, 2025 14:30 UTC+8',
-    delayTime: 'ATD: Jan 12, 16:30 (+2 days delay)'
+    delayInfo: {
+      delayTime: 'ATD: Jan 12, 16:30 (+2 days delay)'
+    }
   },
   {
     type: 'change',

src/views/SystemMessage/src/components/DelayNotificationCard.vue

@@ -5,15 +5,25 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const props = defineProps<{
   data: {
-    type: 'milestone' | 'container' | 'delay' | 'change'
-    numericRecords?: number // 是否有多条记录
+    type: string // 'milestone' | 'container' | 'delay' | 'change'
+    isMultiple?: boolean
+    numericRecords?: number // 多条记录数
     isRead: boolean // 是否已读
     title?: string
-    mode: string // 运输方式
+    mode?: string // 运输方式
     no: string // HBOL: SHJN2301234
     tag: string // tag
     location: string
-    delayTime?: string
+    delayInfo?: {
+      departureDelayNum?: number
+      arrivalDelayNum?: number
+      delayTime: string
+    }
+    changeInfo?: {
+      eTDChangeNum?: number
+      eTAChangeNum?: number
+      changeTime: string
+    }
     changeTime?: string
     time: string
     previous?: string
@@ -35,7 +45,7 @@ const handleSeeAll = () => {
       <div class="title">{{ data.title }}</div>
     </div>
     <div class="content">
-      <div class="more-tips" v-if="data.numericRecords">
+      <div class="more-tips" v-if="data.isMultiple">
         <span>Latest Status Updates ({{ data.numericRecords }})</span>
         <el-button @click="handleSeeAll" class="see-all-icon el-button--text">
           See All
@@ -63,9 +73,9 @@ const handleSeeAll = () => {
         <span class="font_family icon-icon_location_b"></span>
         <span>{{ data.location }}</span>
       </div>
-      <div class="delay-time" v-if="data.delayTime">
+      <div class="delay-time" v-if="data.type === 'delay'">
         <span class="font_family icon-icon_delay_b"></span>
-        <span>{{ data.time }}</span>
+        <span>{{ data.delayInfo.delayTime }}</span>
       </div>
       <div class="change-time" v-if="data.changeTime">
         <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>