通知板块 及 功能调整

src/components/core/layouts/art-notification/index.vue

@@ -9,43 +9,46 @@
     @click.stop=""
   >
     <div class="header">
-      <span class="text">{{ $t('notice.title') }}</span>
-      <span class="btn">{{ $t('notice.btnRead') }}</span>
+      <!-- <span class="text">{{ $t('notice.title') }}</span> -->
+      <span class="text">消息</span>
+      <span class="btn" @click="readAll">{{ $t('notice.btnRead') }}</span>
     </div>
     <ul class="bar">
       <li
         v-for="(item, index) in barList"
         :key="index"
         :class="{ active: barActiveIndex === index }"
-        @click="changeBar(index)"
       >
-        {{ item.name }} ({{ item.num }})
+        {{ item.name }} ({{ noticeList.length }})
       </li>
     </ul>
     <div class="content">
       <div class="scroll">
         <!-- 通知 -->
-        <ul class="notice-list" v-show="barActiveIndex === 0">
-          <li v-for="(item, index) in noticeList" :key="index">
+        <ul class="notice-list">
+          <!-- <ul class="notice-list" v-show="barActiveIndex === 0"> -->
+          <li v-for="(item, index) in noticeList" :key="index" @click="showfn(item)" v-ripple>
             <div
               class="icon"
-              :style="{ background: getNoticeStyle(item.type).backgroundColor + '!important' }"
+              :style="{
+                background: getNoticeStyle(item.message.scene).backgroundColor + '!important'
+              }"
             >
               <i
                 class="iconfont-sys"
-                :style="{ color: getNoticeStyle(item.type).iconColor + '!important' }"
-                v-html="getNoticeStyle(item.type).icon"
+                :style="{ color: getNoticeStyle(item.message.scene).iconColor + '!important' }"
+                v-html="getNoticeStyle(item.message.scene).icon"
               >
               </i>
             </div>
             <div class="text">
-              <h4>{{ item.title }}</h4>
-              <p>{{ item.time }}</p>
+              <h4>{{ item.message.title }}</h4>
+              <p>{{ item.message.created_at }}</p>
             </div>
           </li>
         </ul>
         <!-- 消息 -->
-        <ul class="user-list" v-show="barActiveIndex === 1">
+        <!-- <ul class="user-list" v-show="barActiveIndex === 1">
           <li v-for="(item, index) in msgList" :key="index">
             <div class="avatar">
               <img :src="item.avatar" />
@@ -55,27 +58,27 @@
               <p>{{ item.time }}</p>
             </div>
           </li>
-        </ul>
+        </ul> -->
         <!-- 待办 -->
-        <ul class="base" v-show="barActiveIndex === 3">
+        <!-- <ul class="base" v-show="barActiveIndex === 3">
           <li v-for="(item, index) in pendingList" :key="index">
             <h4>{{ item.title }}</h4>
             <p>{{ item.time }}</p>
           </li>
-        </ul>
+        </ul> -->
 
-        <div class="empty-tips" v-show="barActiveIndex === 0 && noticeList.length === 0">
+        <div class="empty-tips" v-show="noticeList.length === 0">
           <i class="iconfont-sys">&#xe8d7;</i>
           <p>{{ $t('notice.text[0]') }}{{ barList[barActiveIndex].name }}</p>
         </div>
-        <div class="empty-tips" v-show="barActiveIndex === 1 && msgList.length === 0">
+        <!-- <div class="empty-tips" v-show="barActiveIndex === 1 && msgList.length === 0">
           <i class="iconfont-sys">&#xe8d7;</i>
           <p>{{ $t('notice.text[0]') }}{{ barList[barActiveIndex].name }}</p>
         </div>
         <div class="empty-tips" v-show="barActiveIndex === 2 && pendingList.length === 0">
           <i class="iconfont-sys">&#xe8d7;</i>
           <p>{{ $t('notice.text[0]') }}{{ barList[barActiveIndex].name }}</p>
-        </div>
+        </div> -->
       </div>
       <div class="btn-wrapper">
         <el-button class="view-all" @click="handleViewAll" v-ripple>
@@ -86,6 +89,25 @@
 
     <div style="height: 100px"></div>
   </div>
+  <!-- 全局通知详情弹窗 -->
+  <Teleport to="body">
+    <ElDialog v-model="dialogVisible" title="通知详情" align-center :append-to-body="true">
+      <div class="detail-info-table">
+        <div class="row">
+          <div>发送人：{{ noticeDetail.sender_name }}</div>
+        </div>
+        <div class="row">
+          <div>通知标题：{{ noticeDetail.title }}</div>
+        </div>
+        <div class="row">
+          <div>
+            通知内容：
+            <div class="message-text" v-html="noticeDetail.content"></div>
+          </div>
+        </div>
+      </div>
+    </ElDialog>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -97,7 +119,10 @@
   import avatar6 from '@/assets/img/avatar/avatar6.webp'
   import AppConfig from '@/config'
   import { useI18n } from 'vue-i18n'
-
+  import { commonService } from '@/api/commonApi'
+  import { mittBus } from '@/utils/sys'
+  const dialogVisible = ref(false)
+  const router = useRouter()
   const { t } = useI18n()
 
   const props = defineProps({
@@ -123,85 +148,38 @@
     {
       name: computed(() => t('notice.bar[0]')),
       num: 1
-    },
-    {
-      name: computed(() => t('notice.bar[1]')),
-      num: 1
-    },
-    {
-      name: computed(() => t('notice.bar[2]')),
-      num: 0
     }
   ])
-
-  const noticeList = [
-    {
-      title: '新增国际化',
-      time: '2024-6-13 0:10',
-      type: 'notice'
-    },
-    {
-      title: '冷月呆呆给你发了一条消息',
-      time: '2024-4-21 8:05',
-      type: 'message'
-    },
-    {
-      title: '小肥猪关注了你',
-      time: '2020-3-17 21:12',
-      type: 'collection'
-    },
-    {
-      title: '新增使用文档',
-      time: '2024-02-14 0:20',
-      type: 'notice'
-    },
-    {
-      title: '小肥猪给你发了一封邮件',
-      time: '2024-1-20 0:15',
-      type: 'email'
-    },
-    {
-      title: '菜单mock本地真实数据',
-      time: '2024-1-17 22:06',
-      type: 'notice'
-    }
-  ]
-  const msgList: any = [
-    {
-      title: '池不胖 关注了你',
-      time: '2021-2-26 23:50',
-      avatar: avatar1
-    },
-    {
-      title: '唐不苦 关注了你',
-      time: '2021-2-21 8:05',
-      avatar: avatar2
-    },
-    {
-      title: '中小鱼 关注了你',
-      time: '2020-1-17 21:12',
-      avatar: avatar3
-    },
-    {
-      title: '何小荷 关注了你',
-      time: '2021-01-14 0:20',
-      avatar: avatar4
-    },
-    {
-      title: '誶誶淰 关注了你',
-      time: '2020-12-20 0:15',
-      avatar: avatar5
-    },
-    {
-      title: '冷月呆呆 关注了你',
-      time: '2020-12-17 22:06',
-      avatar: avatar6
-    }
-  ]
-
-  const changeBar = (index: number) => {
-    barActiveIndex.value = index
+  const noticeList = ref<any>([])
+  const getNoticeList = async () => {
+    await commonService.getUnReadNoticeList().then((res: any) => {
+      noticeList.value = res.list
+      // 通知头部组件更新铃铛状态
+      mittBus.emit('notification-data-changed', res.list?.length || 0)
+    })
   }
+  onMounted(() => {
+    getNoticeList()
+    // 监听WebSocket消息：收到新通知实时插入到列表首位
+    mittBus.on('ws:message', onWsMessage)
+  })
+  onUnmounted(() => {
+    mittBus.off('ws:message')
+  })
+
+  const onWsMessage = (data: any) => {
+    if (data && data.event === 'notify.receive') {
+      // 将新通知插入到列表首位。后端数据结构需包含 type 与 message 字段
+      // 若结构不同，可在此处做一次字段映射
+      console.log(data)
+      noticeList.value.unshift(data.data.notice_data)
+      console.log(noticeList.value)
+      mittBus.emit('notification-data-changed', noticeList.value.length)
+    }
+  }
+  // const changeBar = (index: number) => {
+  //   barActiveIndex.value = index
+  // }
 
   const getRandomColor = () => {
     const index = Math.floor(Math.random() * AppConfig.systemMainColor.length)
@@ -209,27 +187,27 @@
   }
 
   const noticeStyleMap = {
-    email: {
+    4: {
       icon: '&#xe72e;',
       iconColor: 'rgb(var(--art-warning))',
       backgroundColor: 'rgb(var(--art-bg-warning))'
     },
-    message: {
+    2: {
       icon: '&#xe747;',
       iconColor: 'rgb(var(--art-success))',
       backgroundColor: 'rgb(var(--art-bg-success))'
     },
-    collection: {
+    5: {
       icon: '&#xe714;',
       iconColor: 'rgb(var(--art-danger))',
       backgroundColor: 'rgb(var(--art-bg-danger))'
     },
-    user: {
+    3: {
       icon: '&#xe608;',
       iconColor: 'rgb(var(--art-info))',
       backgroundColor: 'rgb(var(--art-bg-info))'
     },
-    notice: {
+    1: {
       icon: '&#xe6c2;',
       iconColor: 'rgb(var(--art-primary))',
       backgroundColor: 'rgb(var(--art-bg-primary))'
@@ -243,7 +221,11 @@
       backgroundColor: getRandomColor()
     }
 
-    const style = noticeStyleMap[type as keyof typeof noticeStyleMap] || defaultStyle
+    // 先转成 unknown，再转成 keyof 类型，避免 TS 报错
+    const key = type as unknown as keyof typeof noticeStyleMap
+    const style = noticeStyleMap[key] || defaultStyle
+
+    // const style = noticeStyleMap[type as keyof typeof noticeStyleMap] || defaultStyle
 
     return {
       ...style,
@@ -264,27 +246,43 @@
       }, 350)
     }
   }
-
+  const readAll = async () => {
+    const { message } = await commonService.readNotice({
+      msg_ids: 'all'
+    })
+    ElMessage.success(message)
+    getNoticeList()
+  }
   // 查看全部
   const handleViewAll = () => {
-    switch (barActiveIndex.value) {
-      case 0:
-        handleNoticeAll()
-        break
-      case 1:
-        handleMsgAll()
-        break
-      case 2:
-        handlePendingAll()
-        break
-    }
+    handleNoticeAll()
+  }
+  const noticeDetail = ref<any>({})
+  const showfn = async (row: any) => {
+    dialogVisible.value = true
+    await commonService.getNoticeDetail({ id: row.id }).then((res: any) => {
+      noticeDetail.value = res.message
+      showNotice(false) // 关闭通知组件
+      getNoticeList()
+    })
+  }
+  const handleNoticeAll = () => {
+    router.push('/common/notice')
+    showNotice(false) // 关闭通知组件
   }
-
-  const handleNoticeAll = () => {}
   const handleMsgAll = () => {}
   const handlePendingAll = () => {}
 </script>
 
 <style lang="scss" scoped>
   @use './style';
+  .el-button {
+    --el-button-border-color: #dcdfe6 !important;
+    --el-button-text-color: var(--el-text-color-regular);
+  }
+  .message-text {
+    padding: 10px 14px;
+    line-height: 1.4;
+    white-space: pre-line;
+  }
 </style>