From 1411afe6c282457c3d7f8a8b069a6c93c9e15b27 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 06 一月 2026 13:28:09 +0800
Subject: [PATCH] 完成消息通知前端页面
---
src/layout/components/Navbar.vue | 92 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 92 insertions(+), 0 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 1f0d385..5e73968 100644
--- a/src/layout/components/Navbar.vue
+++ b/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>
--
Gitblit v1.9.3