style: 调整system feature消息样式，抽屉中使用不同的文案

src/components/NotificationMessageCard/src/NotificationMessageCard.vue

@@ -17,6 +17,7 @@ const props = withDefaults(
     updateReadCardsOnChange?: boolean // 是否在数据变化时请求接口更新已读卡片
     topOffset?: number // 应减去高度
     isShowInsertionTime?: boolean // 是否显示插入时间
+    isDrawer?: boolean // 是否在抽屉中使用
   }>(),
   {
     isObserver: true,
@@ -264,6 +265,7 @@ defineExpose({
             @view-more="handleViewMore"
             v-else-if="item.notificationType === 'feature'"
             :data="item.info"
+            :is-drawer="props.isDrawer"
           />
           <slot></slot>
           <div class="insertion-time" v-if="isShowInsertionTime">
@@ -274,7 +276,9 @@ defineExpose({
     </template>
     <div
       class="footer"
-      v-if="pageData?.[0]?.notificationType !== 'feature' && pageData?.length > 0"
+      v-if="
+        (pageData?.[0]?.notificationType !== 'feature' && pageData?.length > 0) || props.isDrawer
+      "
     >
       <el-divider v-if="loading"> loading... </el-divider>
       <el-divider v-if="finished && pageData.length > 0">

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

@@ -14,6 +14,7 @@ interface FeatureUpdateCardPropsData {
 
 const props = defineProps<{
   data: FeatureUpdateCardPropsData
+  isDrawer?: boolean // 是否在抽屉中使用
 }>()
 
 const emit = defineEmits<{
@@ -30,6 +31,14 @@ const handleViewMore = () => {
   })
   emit('viewMore')
 }
+
+const handleContent = (header) => {
+  if (header === 'New Feature: AI Smart Assistant') {
+    return 'Smart Assistant is live! Ask in natural language, get real-time shipment data with multi-language support.'
+  }else {
+    return 'Smart Notification is here! Four key event alerts with customizable rules and multi-channel delivery.'
+  }
+}
 </script>
 
 <template>
@@ -46,10 +55,21 @@ const handleViewMore = () => {
           <span class="gradient-text">{{ data.header }}</span>
         </div>
         <div class="content-text">
-          <span>{{ data.content }}</span>
+          <pre style="white-space: pre-wrap; line-height: 21px" v-if="props.isDrawer">{{ handleContent(data.header) }}</pre>
+          <pre style="white-space: pre-wrap; line-height: 21px" v-else>{{ data.content }}</pre>
         </div>
-        <div class="feature-img">
-          <el-image :src="data.imgSrc" fit="contain" alt="feature-img"></el-image>
+        <div class="feature-img" style="text-align: center">
+          <img
+            :src="data.imgSrc"
+            style="max-height: 400px; max-width: 100%;object-fit: contain"
+            
+            alt="feature-img"
+          ></img>
+          <!-- <img
+            src="./img/testaa.png"
+            alt=""
+            style="max-height: 400px; max-width: 100%; object-fit: contain"
+          /> -->
         </div>
 
         <div class="change-btn" style="text-align: center">

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

@@ -82,6 +82,15 @@ const handleSettingMessage = () => {
   })
 }
 
+const handleChangeNotificationType = (value: string) => {
+  notificationType.value = value
+  notificationList.value = []
+  pageInfo.value.cp = 1
+  notificationMessageCardRef.value.adjustScrollTop(0)
+  notificationMessageCardRef.value.finished = false
+  getNotificationList()
+}
+
 const closeDrawer = () => {
   notificationList.value = []
   notificationType.value = 'all'
@@ -101,7 +110,7 @@ const closeDrawer = () => {
     <template #header>
       <el-select
         size="large"
-        @change="getNotificationList"
+        @change="handleChangeNotificationType"
         v-model="notificationType"
         class="notification-type"
       >
@@ -146,6 +155,7 @@ const closeDrawer = () => {
             @loading="getNotificationList"
             :data="notificationList"
             :topOffset="185"
+            :isDrawer="true"
             ref="notificationMessageCardRef"
           />
         </div>