style: 完成notification drawer部分样式

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

@@ -8,6 +8,7 @@ import { useHeaderSearch } from '@/stores/modules/headerSearch'
 import { onBeforeRouteUpdate } from 'vue-router'
 import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
+import NotificationDrawer from './components/NotificationDrawer.vue'
 
 const themeStore = useThemeStore()
 const userStore = useUserStore()
@@ -157,6 +158,8 @@ const togglePopover = () => {
 const closePopover = () => {
   isPopoverVisible.value = false
 }
+
+const notificationDrawer = ref(false)
 </script>
 
 <template>
@@ -173,7 +176,12 @@ const closePopover = () => {
           <span style="margin-top: -1px" class="font_family icon-icon_search_b"></span>
         </template>
       </el-input>
-      <!-- <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
+      <span
+        @click="notificationDrawer = true"
+        class="font_family icon-icon_notice_b"
+        style="font-size: 18px"
+      ></span>
+      <!-- 
       <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->
       <el-popover
         placement="bottom-end"
@@ -302,6 +310,7 @@ const closePopover = () => {
     <DownloadKLNPortal ref="downloadKLNPortalRef"></DownloadKLNPortal>
     <ChangePasswordDialog ref="changePasswordDialogRef"></ChangePasswordDialog>
     <LogoutDialog ref="logoutDialogRef"></LogoutDialog>
+    <NotificationDrawer v-model="notificationDrawer"></NotificationDrawer>
   </div>
 </template>
 
@@ -495,4 +504,4 @@ div.el-popover.el-popper.user-config-popover {
 div.el-popper.theme-popper-class {
   padding: 3px 4px;
 }
-</style>
+</style>

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

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import NotificationCard from '@/views/SystemMessage/src/components/NotificationCard.vue'
+
+const drawerModel = defineModel('drawerModel', { type: Boolean, default: false })
+
+function confirmClick() {
+  ElMessageBox.confirm(`Are you confirm to chose  ?`)
+    .then(() => {
+      drawerModel.value = false
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+
+const notificationList = [
+  {
+    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'
+  },
+  {
+    numericRecords: 0,
+    isRead: false,
+    title: 'Milestone Update Daily Summary (Jan 10, 2025)',
+    mode: 'Air Freight',
+    no: 'HBOL: SHJN2301234',
+    tag: 'Booking Confirmed',
+    location: 'Hong Kong',
+    time: 'Jan 10, 2025 14:30 UTC+8'
+  },
+  {
+    numericRecords: 0,
+    isRead: false,
+    title: '',
+    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)'
+  }
+]
+const data = {
+  title: 'Feature Update',
+  mode: 'Ocean 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>
+  <el-drawer
+    class="notice-drawer"
+    :modal="false"
+    v-model="drawerModel"
+    direction="rtl"
+    size="432px"
+  >
+    <template #header>
+      <el-select size="large" class="notification-type"> </el-select>
+    </template>
+    <template #default>
+      <div class="notification-header">
+        <div class="mark-all-read">
+          <span class="font_family icon-icon_confirm_b show-icon"></span>
+          <span>Mark all read</span>
+        </div>
+        <div class="view-all">
+          <span class="font_family icon-icon_confirm_b show-icon"></span>
+          <span>View all</span>
+          <span class="font_family icon-icon_administration_b setting"></span>
+        </div>
+      </div>
+      <div class="notification-content">
+        <NotificationCard
+          class="notification-item"
+          v-for="(item, index) in notificationList"
+          :key="index"
+          :data="item"
+        ></NotificationCard>
+        <div class="feature-update">
+          <div class="header" v-if="data.title">
+            <div class="status-icon"></div>
+            <div class="title">{{ data.title }}</div>
+          </div>
+          <div class="card-content">
+            <div class="title">
+              <span class="font_family icon-icon_password_b"></span>
+              <span>Password Expiration in 7 Days</span>
+            </div>
+            <div class="details">
+              Your password will expire in 7 days. To ensure the security of your account, please
+              change your password as soon as possible.
+            </div>
+            <div class="change-btn" style="text-align: center">
+              <el-button class="el-button--main" style="height: 40px" @click="confirmClick">
+                <span class="font_family icon-icon_edit_b" style="margin-right: 4px"></span>
+                <span>Change Password</span></el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<style lang="scss" scoped>
+div.layout-toolbar {
+  .notification-content {
+    padding: 16px;
+    .notification-item {
+      margin-bottom: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .feature-update {
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      .status-icon {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: var(--color-theme);
+        margin-right: 10px;
+      }
+      .title {
+        font-weight: 700;
+      }
+    }
+    .card-content {
+      padding: 16px 8px 24px;
+      background: #ffe39a;
+      border-radius: 12px;
+      .title {
+        span {
+          vertical-align: middle;
+          font-weight: 700;
+        }
+        .font_family {
+          margin-right: 8px;
+        }
+      }
+      .details {
+        margin: 8px 0 16px 24px;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+div.layout-toolbar {
+  .notice-drawer {
+    top: 48px;
+    height: calc(100% - 48px);
+    .el-drawer__body {
+      padding: 0;
+    }
+    .notification-type {
+      .el-select__wrapper {
+        width: 320px !important;
+      }
+    }
+    .notification-header {
+      display: flex;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 16px;
+      line-height: 40px;
+      border-bottom: 1px solid var(--color-border);
+      .mark-all-read {
+        span {
+          color: var(--color-theme);
+          vertical-align: middle;
+        }
+        .show-icon {
+          margin-right: 2px;
+        }
+      }
+      .view-all {
+        span {
+          vertical-align: middle;
+        }
+        .show-icon {
+          margin-right: 2px;
+        }
+        .setting {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/SystemMessage/src/SystemMessage.vue

@@ -31,15 +31,6 @@ const activeName = ref('first')
 
 const handleClick = () => {}
 
-const data = {
-  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'
-}
 const notificationList = [
   {
     numericRecords: 3,
@@ -60,6 +51,17 @@ const notificationList = [
     tag: 'Booking Confirmed',
     location: 'Hong Kong',
     time: 'Jan 10, 2025 14:30 UTC+8'
+  },
+  {
+    numericRecords: 0,
+    isRead: false,
+    title: '',
+    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>

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

@@ -4,19 +4,20 @@ const props = defineProps<{
   data: {
     numericRecords: number
     isRead: boolean
-    title: string
+    title?: string
     mode: string
     no: string
     tag: string
     location: string
     time: string
+    previous?: string
   }
 }>()
 </script>
 
 <template>
   <div class="notification-card" :class="{ 'is-read': data.isRead }">
-    <div class="header">
+    <div class="header" v-if="data.title">
       <div class="status-icon"></div>
       <div class="title">{{ data.title }}</div>
     </div>
@@ -44,6 +45,10 @@ const props = defineProps<{
         <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
         <span>{{ data.time }}</span>
       </div>
+      <div class="previous" v-if="data.previous">
+        <span class="previous-icon"></span>
+        <span>{{ data.previous }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -118,8 +123,8 @@ const props = defineProps<{
         border-radius: 3px;
         color: #5bb462;
         .dot {
-          width: 8px;
-          height: 8px;
+          width: 5px;
+          height: 5px;
           border-radius: 50%;
           background-color: var(--color-tag-completed);
           margin-right: 4px;
@@ -139,6 +144,26 @@ const props = defineProps<{
         margin-right: 8px;
       }
     }
+    .previous {
+      height: 24px;
+      margin-top: 8px;
+      padding-left: 8px;
+      line-height: 24px;
+      background-color: #e1e3e9;
+      border-radius: 6px;
+      span {
+        font-size: 12px;
+      }
+      .previous-icon {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        background-color: var(--color-neutral-1);
+        border-radius: 50%;
+        margin-right: 8px;
+        vertical-align: middle;
+      }
+    }
   }
 }
 </style>