feat: 修改event卡片类型

src/components/NotificationMessageCard/src/components/EventCard.vue

@@ -1,32 +1,31 @@
 <script setup lang="ts">
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
 interface EventCardPropsData {
   type: string // 'milestone' | 'container' | 'delay' | 'change'
-  isMultiple?: boolean
-  numericRecords?: number // 多条记录数
-  isRead: boolean // 是否已读
-  title?: string
+  numericRecords?: number // 多条记录数 (Daily Update消息)
+  isRead: boolean // 是否已读 （true 已读，false 未读）
+  title?: string // Milestone Update
   mode?: string // 运输方式
   no: string // HBOL: SHJN2301234
-  tag: string // tag
+  tag: string // tag  Booking Confirmed
   location: string
-  delayInfo?: {
-    departureDelayNum?: number
-    arrivalDelayNum?: number
-    delayTime: string
-  }
-  changeInfo?: {
+  timezone?: string // 时区
+  time: string
+  previous?: string
+  info?: {
+    route?: []
     etdChangeNum?: number
     etaChangeNum?: number
-    changeTime: string
+    time: string
+    departureDelayNum?: number
+    arrivalDelayNum?: number
+    timezone?: string // 时区
+    leg?: []
   }
-  changeTime?: string
-  time: string
-  previous?: string
 }
 
 const props = defineProps<{
@@ -62,20 +61,17 @@ const handleSeeAll = (data: any) => {
       </div>
       <div
         class="more-tips"
-        v-if="
-          data.type === 'delay' &&
-          (data.delayInfo.departureDelayNum || data.delayInfo.arrivalDelayNum)
-        "
+        v-if="data.type === 'delay' && (data.info.departureDelayNum || data.info.arrivalDelayNum)"
       >
         <div>
-          <span v-if="data.delayInfo.departureDelayNum"
-            >Departure Delay ({{ data.delayInfo.departureDelayNum }})</span
+          <span v-if="data.info.departureDelayNum"
+            >Departure Delay ({{ data.info.departureDelayNum }})</span
           >
-          <span v-if="data.delayInfo.departureDelayNum && data.delayInfo.arrivalDelayNum">
+          <span v-if="data.info.departureDelayNum && data.info.arrivalDelayNum">
             &nbsp;&nbsp;|&nbsp;&nbsp;</span
           >
-          <span v-if="data.delayInfo.arrivalDelayNum">
-            Arrival Delay ({{ data.delayInfo.arrivalDelayNum }})
+          <span v-if="data.info.arrivalDelayNum">
+            Arrival Delay ({{ data.info.arrivalDelayNum }})
           </span>
         </div>
         <el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
@@ -86,20 +82,14 @@ const handleSeeAll = (data: any) => {
 
       <div
         class="more-tips"
-        v-if="
-          data.type === 'change' && (data.changeInfo.etdChangeNum || data.changeInfo.etaChangeNum)
-        "
+        v-if="data.type === 'change' && (data.info.etdChangeNum || data.info.etaChangeNum)"
       >
         <div>
-          <span v-if="data.changeInfo.etdChangeNum"
-            >ETD Change ({{ data.changeInfo.etdChangeNum }})</span
-          >
-          <span v-if="data.changeInfo.etdChangeNum && data.changeInfo.etaChangeNum">
+          <span v-if="data.info.etdChangeNum">ETD Change ({{ data.info.etdChangeNum }})</span>
+          <span v-if="data.info.etdChangeNum && data.info.etaChangeNum">
             &nbsp;&nbsp;|&nbsp;&nbsp;</span
           >
-          <span v-if="data.changeInfo.etaChangeNum">
-            ETA Change ({{ data.changeInfo.etaChangeNum }})
-          </span>
+          <span v-if="data.info.etaChangeNum"> ETA Change ({{ data.info.etaChangeNum }}) </span>
         </div>
         <el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
           See All
@@ -123,21 +113,25 @@ const handleSeeAll = (data: any) => {
           <span class="text">{{ data.tag }}</span>
         </div>
       </div>
-      <div class="route">
+      <div class="route" v-if="data?.info?.route?.length > 0">
         <span class="font_family icon-icon_route_b"></span>
-        <span>{{ data.location }}</span>
+        <span></span>
+        <template v-for="(item, index) in data.info.route" :key="index">
+          <span>{{ item }}</span
+          ><span style="margin: 0 3px" v-if="index !== data.info.route.length - 1">→</span>
+        </template>
       </div>
-      <div class="location">
+      <div class="location" v-if="data.location">
         <span class="font_family icon-icon_location_b"></span>
         <span>{{ data.location }}</span>
       </div>
-      <div class="delay-time" v-if="data.type === 'delay'">
+      <div class="delay-time" v-if="data.type === 'delay' && data.info?.time">
         <span class="font_family icon-icon_delay_b"></span>
-        <span>{{ data.delayInfo.delayTime }}</span>
+        <span>{{ data.info.time }}</span>
       </div>
-      <div class="change-time" v-if="data.changeTime">
+      <div class="change-time" v-if="data.type === 'change' && data.info?.time">
         <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
-        <span>{{ data.changeTime }}</span>
+        <span>{{ data.info?.time }}</span>
       </div>
       <div class="time">
         <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
@@ -264,6 +258,7 @@ const handleSeeAll = (data: any) => {
       span {
         color: var(--color-neutral-2);
         font-size: 12px;
+        line-height: 16px;
       }
       .font_family {
         font-size: 16px;

src/components/NotificationMessageCard/src/components/FeatureUpdateCard.vue

@@ -3,6 +3,7 @@ interface FeatureUpdateCardPropsData {
   title: string
   header: string
   content: string
+  isRead: boolean
   imgSrc: string
 }
 
@@ -13,7 +14,7 @@ const props = defineProps<{
 
 <template>
   <div>
-    <div class="feature-update">
+    <div class="feature-update" :class="{ 'is-read': data.isRead }">
       <div class="header">
         <div class="status-icon"></div>
         <div class="title">{{ data.title }}</div>
@@ -42,7 +43,16 @@ const props = defineProps<{
 <style lang="scss" scoped>
 .feature-update {
   margin-bottom: 16px;
-
+  &.is-read {
+    & > .header {
+      .status-icon {
+        background-color: var(--color-border);
+      }
+      .title {
+        color: #b5b9bf;
+      }
+    }
+  }
   .header {
     display: flex;
     align-items: center;

src/components/NotificationMessageCard/src/components/PasswordCard.vue

@@ -3,6 +3,7 @@ interface PasswordCardPropsData {
   title: string
   isExpiration: boolean
   tips: string
+  isRead: boolean
   content: string
 }
 const props = defineProps<{
@@ -11,7 +12,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="password-notifications">
+  <div class="password-notifications" :class="{ 'is-read': data.isRead }">
     <div class="header" v-if="data.title">
       <div class="status-icon"></div>
       <div class="title">{{ data.title }}</div>
@@ -37,6 +38,16 @@ const props = defineProps<{
 <style lang="scss" scoped>
 .password-notifications {
   margin-bottom: 16px;
+  &.is-read {
+    & > .header {
+      .status-icon {
+        background-color: var(--color-border);
+      }
+      .title {
+        color: #b5b9bf;
+      }
+    }
+  }
   .header {
     display: flex;
     align-items: center;

src/utils/axios.ts

@@ -2,10 +2,6 @@ import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse
 import router from '@/router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useUserStore } from '@/stores/modules/user'
-// import {
-//   showFullScreenLoading,
-//   tryHideFullScreenLoading
-// } from '@monorepo/shared/utils/serviceLoading'
 
 interface codeMessage {
   [key: number]: string
@@ -156,5 +152,3 @@ class HttpAxios {
 }
 
 export default new HttpAxios({})
-
-// export default new HttpAxios({})

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -4,7 +4,7 @@ import BasicInformation from './components/BasicInformation.vue'
 import ContainersView from './components/ContainersView.vue'
 import EmailView from './components/EmailView.vue'
 import { cloneDeep } from 'lodash'
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
 import { formatTimezone } from '@/utils/tools'

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -6,7 +6,7 @@ import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 import { useThemeStore } from '@/stores/modules/theme'
 import { useVisitedRowState } from '@/stores/modules/visitedRow'
 

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

@@ -2,11 +2,39 @@
 import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
 
 const drawerModel = defineModel('drawerModel', { type: Boolean, default: false })
+const notificationType = ref('all')
+const notificationTypeList = ref([
+  {
+    label: 'All Notifications',
+    value: 'all'
+  },
+  {
+    label: 'Milestone Update',
+    value: 'feature1'
+  },
+  {
+    label: 'Container Status Update',
+    value: 'all2'
+  },
+  {
+    label: 'Departure/Arrival Delay',
+    value: 'feature3'
+  },
+  {
+    label: 'ETD/ETA Change',
+    value: 'all4'
+  },
+  {
+    label: 'Feature Update',
+    value: 'feature5'
+  }
+])
 
 const notificationList = [
   {
     notificationType: 'feature',
     info: {
+      isRead: true,
       title: 'Feature Update',
       header: 'New feature online: Quick search has been released!',
       content:
@@ -25,7 +53,10 @@ const notificationList = [
       no: 'HBOL: SHJN2301234',
       tag: 'Booking Confirmed',
       location: 'Hong Kong',
-      time: 'Jan 10, 2025 14:30 UTC+8'
+      time: 'Jan 10, 2025 14:30 UTC+8',
+      info: {
+        route: ['Hong Kong', 'Shanghai', 'Ningbo']
+      }
     }
   },
   {
@@ -41,6 +72,7 @@ const notificationList = [
   {
     notificationType: 'password',
     info: {
+      isRead: false,
       title: 'Password Notifications',
       isExpiration: false,
       tips: 'Password Expiration in 3 Days',
@@ -51,6 +83,7 @@ const notificationList = [
   {
     notificationType: 'password',
     info: {
+      isRead: true,
       title: 'Password Notifications',
       isExpiration: true,
       tips: 'Password Expiration in 31111 Days',
@@ -70,7 +103,14 @@ const notificationList = [
     size="432px"
   >
     <template #header>
-      <el-select size="large" class="notification-type"> </el-select>
+      <el-select size="large" v-model="notificationType" class="notification-type">
+        <el-option
+          v-for="item in notificationTypeList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
     </template>
     <template #default>
       <div class="notification-header">
@@ -180,6 +220,13 @@ div.layout-toolbar {
   .notice-drawer {
     top: 48px;
     height: calc(100% - 48px);
+    .el-drawer__header {
+      gap: 52px;
+      .el-drawer__close {
+        color: var(--color-neutral-1);
+        font-size: 16px;
+      }
+    }
     .el-drawer__body {
       padding: 0;
     }

src/views/SystemMessage/src/SystemMessage.vue

@@ -65,8 +65,8 @@ const notificationList = [
     tag: 'Departure Delay',
     location: 'Hong Kong',
     time: 'Jan 10, 2025 14:30 UTC+8',
-    delayInfo: {
-      delayTime: 'ATD: Jan 12, 16:30 (+2 days delay)',
+    info: {
+      time: 'ATD: Jan 12, 16:30 (+2 days delay)',
       departureDelayNum: 10,
       arrivalDelayNum: 8
     }
@@ -79,10 +79,10 @@ const notificationList = [
     mode: 'Air Freight',
     no: 'SHJN2301234',
     tag: 'ETD Change',
-    changeInfo: {
-      etdChangeNum: 0,
+    info: {
+      etdChangeNum: 20,
       etaChangeNum: 10,
-      changeTime: 'Updated ETD: Jan 17, 15:00'
+      time: 'Updated ETD: Jan 17, 15:00'
     },
     location: 'Hong Kong',
     changeTime: 'Updated ETD: Jan 17, 15:00',
@@ -128,7 +128,7 @@ const notificationList = [
     <div class="right-content">
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="All Notifications" name="first">
-          <div style="padding: 10px 140px 40px 16px">
+          <div style="padding: 10px 140px 0px 16px">
             <EventCard
               v-for="(item, index) in notificationList"
               :key="index"
@@ -231,7 +231,6 @@ const notificationList = [
 .right-content {
   flex: 1;
   padding-top: 24px;
-  overflow-y: auto;
   :deep(.el-tabs__nav-scroll) {
     padding-left: 16px;
     border-bottom: 1px solid var(--color-border);
@@ -243,5 +242,11 @@ const notificationList = [
       }
     }
   }
+  :deep(.el-tabs) {
+    height: calc(100% - 40px);
+    .el-tabs__content {
+      overflow-y: auto;
+    }
+  }
 }
 </style>

src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BasicInformation from './BasicInformation.vue'
 import MilestonesTable from './MilestonesTable.vue'
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
 import { useThemeStore } from '@/stores/modules/theme'

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -10,7 +10,7 @@ import RoutesView from './components/RoutesView.vue'
 import AttachmentView from './components/AttachmentView.vue'
 import MapView from './components/MapView.vue'
 import { cloneDeep } from 'lodash'
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
 import { formatTimezone } from '@/utils/tools'

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -15,7 +15,7 @@ import OriginIcon from '../images/originIcon.png'
 import TransferIcon from '../images/transferIcon.png'
 import * as turf from '@turf/turf'
 import { useThemeStore } from '@/stores/modules/theme'
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 
 const themeStore = useThemeStore()
 

src/views/Tracking/src/components/TrackingDetail/src/components/RoutesView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 import { useOverflow } from '@/hooks/useOverflow'
 import { formatTimezoneByUser } from '@/utils/tools'
 

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -5,7 +5,7 @@ import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
 import { ref, onMounted } from 'vue'
-import { transportationMode } from '@/components/TransportationMode'
+import { transportationMode } from '@/components/transportationMode'
 import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
 import { useVisitedRowState } from '@/stores/modules/visitedRow'