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

<template>
  <div
    class="notice"
    v-show="visible"
    :style="{
      transform: show ? 'scaleY(1)' : 'scaleY(0.9)',
      opacity: show ? 1 : 0
    }"
    @click.stop=""
  >
    <div class="header">
      <!-- <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 }"
      >
        {{ item.name }} ({{ noticeList.length }})
      </li>
    </ul>
    <div class="content">
      <div class="scroll">
        <!-- 通知 -->
        <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.message.scene).backgroundColor + '!important'
              }"
            >
              <i
                class="iconfont-sys"
                :style="{ color: getNoticeStyle(item.message.scene).iconColor + '!important' }"
                v-html="getNoticeStyle(item.message.scene).icon"
              >
              </i>
            </div>
            <div class="text">
              <h4>{{ item.message.title }}</h4>
              <p>{{ item.message.created_at }}</p>
            </div>
          </li>
        </ul>
        <!-- 消息 -->
        <!-- <ul class="user-list" v-show="barActiveIndex === 1">
          <li v-for="(item, index) in msgList" :key="index">
            <div class="avatar">
              <img :src="item.avatar" />
            </div>
            <div class="text">
              <h4>{{ item.title }}</h4>
              <p>{{ item.time }}</p>
            </div>
          </li>
        </ul> -->
        <!-- 待办 -->
        <!-- <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> -->

        <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">
          <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 class="btn-wrapper">
        <el-button class="view-all" @click="handleViewAll" v-ripple>
          {{ $t('notice.viewAll') }}
        </el-button>
      </div>
    </div>

    <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">
  import avatar1 from '@/assets/img/avatar/avatar1.webp'
  import avatar2 from '@/assets/img/avatar/avatar2.webp'
  import avatar3 from '@/assets/img/avatar/avatar3.webp'
  import avatar4 from '@/assets/img/avatar/avatar4.webp'
  import avatar5 from '@/assets/img/avatar/avatar5.webp'
  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({
    value: {
      type: Boolean,
      default: false
    }
  })

  watch(
    () => props.value,
    () => {
      showNotice(props.value)
    }
  )

  const show = ref(false)
  const visible = ref(false)
  const barActiveIndex = ref(0)
  const pendingList: any = []

  const barList = ref([
    {
      name: computed(() => t('notice.bar[0]')),
      num: 1
    }
  ])
  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)
    return AppConfig.systemMainColor[index]
  }

  const noticeStyleMap = {
    4: {
      icon: '&#xe72e;',
      iconColor: 'rgb(var(--art-warning))',
      backgroundColor: 'rgb(var(--art-bg-warning))'
    },
    2: {
      icon: '&#xe747;',
      iconColor: 'rgb(var(--art-success))',
      backgroundColor: 'rgb(var(--art-bg-success))'
    },
    5: {
      icon: '&#xe714;',
      iconColor: 'rgb(var(--art-danger))',
      backgroundColor: 'rgb(var(--art-bg-danger))'
    },
    3: {
      icon: '&#xe608;',
      iconColor: 'rgb(var(--art-info))',
      backgroundColor: 'rgb(var(--art-bg-info))'
    },
    1: {
      icon: '&#xe6c2;',
      iconColor: 'rgb(var(--art-primary))',
      backgroundColor: 'rgb(var(--art-bg-primary))'
    }
  }

  const getNoticeStyle = (type: string) => {
    const defaultStyle = {
      icon: '&#xe747;',
      iconColor: '#FFFFFF',
      backgroundColor: getRandomColor()
    }

    // 先转成 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,
      backgroundColor: style.backgroundColor
    }
  }

  const showNotice = (open: boolean) => {
    if (open) {
      visible.value = open
      setTimeout(() => {
        show.value = open
      }, 5)
    } else {
      show.value = open
      setTimeout(() => {
        visible.value = open
      }, 350)
    }
  }
  const readAll = async () => {
    const { message } = await commonService.readNotice({
      msg_ids: 'all'
    })
    ElMessage.success(message)
    getNoticeList()
  }
  // 查看全部
  const handleViewAll = () => {
    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 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>