feat: 新增system message detail页面

src/router/index.ts

@@ -92,6 +92,11 @@ const router = createRouter({
           path: '/system-message',
           name: 'System Message',
           component: () => import('../views/SystemMessage')
+        },
+        {
+          path: '/system-message-detail',
+          name: 'System Message Detail',
+          component: () => import('../views/SystemMessage/src/components/SystemMessageDetail.vue')
         }
       ]
     }

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

@@ -134,8 +134,9 @@ const passwordExpiration = {
           </div>
           <div class="card-content">
             <div class="title">
-              <span class="font_family icon-icon_password_b"></span>
-              <span>Feature Update</span>
+              <!-- <span class="font_family icon-icon_password_b"></span> -->
+              <img style="margin-right: 5px" src="../images/icon_publish.png" alt="" />
+              <span>New feature online: Quick search has been released!</span>
             </div>
             <div class="details">
               <span
@@ -143,6 +144,7 @@ const passwordExpiration = {
                 You can now quickly find what you need by entering keywords, greatly improving your
                 work efficiency. Go and experience it!</span
               >
+              <img src="../images/test.png" style="margin-top: 12px; border-radius: 12px" alt="" />
             </div>
             <div class="change-btn" style="text-align: center">
               <el-button
@@ -164,10 +166,6 @@ div.layout-toolbar {
   .notification-content {
     padding: 16px;
     .notification-item {
-      margin-bottom: 16px;
-      &:last-child {
-        margin-bottom: 0;
-      }
     }
   }
   .password-notifications {
@@ -177,8 +175,8 @@ div.layout-toolbar {
       align-items: center;
       margin-bottom: 8px;
       .status-icon {
-        width: 10px;
-        height: 10px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
         background-color: var(--color-theme);
         margin-right: 10px;
@@ -210,13 +208,14 @@ div.layout-toolbar {
   }
   .feature-update {
     margin-bottom: 16px;
+
     .header {
       display: flex;
       align-items: center;
       margin-bottom: 8px;
       .status-icon {
-        width: 10px;
-        height: 10px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
         background-color: var(--color-theme);
         margin-right: 10px;
@@ -227,14 +226,15 @@ div.layout-toolbar {
     }
     .card-content {
       padding: 16px 8px 24px;
-      background: linear-gradient(180deg, #ffe294 0%, #f6f8fa 100%);
+      background: linear-gradient(137deg, #fff4eb 12.41%, #f0f3ff 52.63%, #e0f7f9 93.28%);
       border-radius: 12px;
-      &.is-expired {
-        background: linear-gradient(182deg, #ef99a0 2.2%, #f6f8fa 98.77%);
-      }
       .title {
+        img {
+          vertical-align: middle;
+        }
         span {
           vertical-align: middle;
+          display: inline-block;
           font-weight: 700;
         }
         .font_family {

src/views/SystemMessage/src/SystemMessage.vue

@@ -103,7 +103,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="display: flex; flex-direction: column; gap: 16px; padding: 10px 16px">
+          <div style="padding: 10px 16px 40px">
             <NotificationCard
               v-for="(item, index) in notificationList"
               :key="index"
@@ -130,6 +130,7 @@ const notificationList = [
 }
 .system-message {
   display: flex;
+  height: calc(100% - 72px);
 }
 .left-nav {
   width: 280px;

src/views/SystemMessage/src/components/NotificationCard.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { transportationMode } from '@/components/TransportationMode'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 const props = defineProps<{
   data: {
-    numericRecords: number
+    numericRecords?: number
     isRead: boolean
     title?: string
     mode: string
@@ -13,6 +16,13 @@ const props = defineProps<{
     previous?: string
   }
 }>()
+
+const handleSeeAll = () => {
+  console.log('see all')
+  router.push({
+    name: 'System Message Detail'
+  })
+}
 </script>
 
 <template>
@@ -24,7 +34,7 @@ const props = defineProps<{
     <div class="content">
       <div class="more-tips" v-if="data.numericRecords">
         <span>Latest Status Updates ({{ data.numericRecords }})</span>
-        <el-button class="see-all-icon el-button--text">
+        <el-button @click="handleSeeAll" class="see-all-icon el-button--text">
           See All
           <span class="font_family icon-icon_next_b"></span>
         </el-button>
@@ -56,6 +66,7 @@ const props = defineProps<{
 <style lang="scss" scoped>
 .notification-card {
   max-width: 640px;
+  margin-bottom: 16px;
   &.is-read {
     .header {
       .status-icon {
@@ -72,8 +83,8 @@ const props = defineProps<{
     align-items: center;
     margin-bottom: 8px;
     .status-icon {
-      width: 10px;
-      height: 10px;
+      width: 8px;
+      height: 8px;
       border-radius: 50%;
       background-color: var(--color-theme);
       margin-right: 10px;
@@ -118,8 +129,8 @@ const props = defineProps<{
         padding-right: 6px;
         line-height: 18px;
         background-color: #e6f1eb;
-        font-size: 10px;
-        font-weight: 700;
+        font-size: 12px;
+        font-weight: 600;
         border-radius: 3px;
         color: #5bb462;
         .dot {

src/views/SystemMessage/src/components/SystemMessageDetail.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import NotificationCard from './NotificationCard.vue'
+
+const notificationData = {
+  title: 'Milestone Update Daily Summary (Jan 10, 2025)',
+  numericRecords: 3,
+  notificationList: [
+    {
+      isRead: true,
+      mode: 'Ocean Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8'
+    },
+    {
+      isRead: false,
+      mode: 'Air Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8'
+    },
+    {
+      isRead: false,
+      mode: 'Air Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8',
+      previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
+    }
+  ]
+}
+</script>
+
+<template>
+  <div class="system-message-detail">
+    <div class="content">
+      <div class="header" v-if="notificationData.title">
+        <div class="status-icon"></div>
+        <div class="title">{{ notificationData.title }}</div>
+      </div>
+      <div class="total-tips">Latest Status Updates ({{ notificationData.numericRecords }})</div>
+      <NotificationCard
+        v-for="(item, index) in notificationData.notificationList"
+        :key="index"
+        :data="item"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.system-message-detail {
+  padding: 16px;
+  .content {
+    margin: auto;
+    width: 800px;
+  }
+  .notification-card {
+    max-width: 800px;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    .status-icon {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--color-theme);
+      margin-right: 10px;
+    }
+    .title {
+      font-weight: 700;
+      font-size: 24px;
+    }
+  }
+  .total-tips {
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+  }
+}
+</style>