完成消息通知前端页面

spring

8 天以前 1411afe6c282457c3d7f8a8b069a6c93c9e15b27

 src/layout/components/Navbar.vue

@@ -24,6 +24,29 @@
      </el-dropdown>

    </div>

    <div class="right-menu">

      <!-- 消息通知 -->

      <el-popover

        v-model:visible="notificationVisible"

        :width="500"

        placement="bottom-end"

        trigger="click"

        :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] }"

        popper-class="notification-popover"

      >

        <template #reference>

          <div class="notification-container right-menu-item hover-effect">

            <el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notification-badge">

              <el-icon :size="20" style="cursor: pointer;">

                <Bell />

              </el-icon>

            </el-badge>

          </div>

        </template>

        <NotificationCenter

          @unreadCountChange="handleUnreadCountChange"

          ref="notificationCenterRef"

        />

      </el-popover>

      <div class="avatar-container">

        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">

          <div class="avatar-wrapper">

@@ -51,6 +74,7 @@


<script setup>

import { ElMessageBox } from 'element-plus'

import { Bell } from '@element-plus/icons-vue'

import Breadcrumb from '@/components/Breadcrumb'

import TopNav from '@/components/TopNav'

import Hamburger from '@/components/Hamburger'

@@ -59,6 +83,7 @@
import HeaderSearch from '@/components/HeaderSearch'

import RuoYiGit from '@/components/RuoYi/Git'

import RuoYiDoc from '@/components/RuoYi/Doc'

import NotificationCenter from './NotificationCenter/index.vue'

import useAppStore from '@/store/modules/app'

import useUserStore from '@/store/modules/user'

import useSettingsStore from '@/store/modules/settings'

@@ -70,6 +95,9 @@
const userStore = useUserStore()

const settingsStore = useSettingsStore()

const factoryList = ref([])

const notificationVisible = ref(false)

const notificationCenterRef = ref(null)

const unreadCount = ref(0)

function toggleSideBar() {

  appStore.toggleSideBar()

}

@@ -147,6 +175,43 @@
}



getUserLoginFacotryList();



// 消息通知相关

function handleUnreadCountChange(count) {

  unreadCount.value = count

}



// 组件挂载时加载未读数量和定时刷新

let unreadCountTimer = null

onMounted(() => {

  // 延迟加载，确保组件已渲染

  nextTick(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

    }

  })

  // 定时刷新未读数量（每30秒）

  unreadCountTimer = setInterval(() => {

    if (notificationCenterRef.value) {

      notificationCenterRef.value.loadUnreadCount()

    }

  }, 30000)

})



// 监听 popover 显示状态，打开时加载消息列表

watch(notificationVisible, (val) => {

  if (val && notificationCenterRef.value) {

    nextTick(() => {

      notificationCenterRef.value.loadMessages()

    })

  }

})



onUnmounted(() => {

  if (unreadCountTimer) {

    clearInterval(unreadCountTimer)

  }

})

</script>



<style lang='scss' scoped>

@@ -241,6 +306,19 @@
      }

    }



    .notification-container {

      margin-right: 20px;

      display: flex;

      align-items: center;

      cursor: pointer;



      .notification-badge {

        :deep(.el-badge__content) {

          border: none;

        }

      }

    }



    .avatar-container {

      margin-right: 40px;



@@ -267,3 +345,17 @@
  }

}

</style>



<style lang="scss">

.notification-popover {

  padding: 0 !important;

  
  .el-popover__title {

    display: none;

  }

  
  .el-popover__body {

    padding: 0 !important;

  }

}

</style>