From 4019af2cbd099d9d90b7f69e24869e4f2f3dc2d1 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 08 四月 2026 14:01:18 +0800
Subject: [PATCH] 1.样式修改
---
src/layout/components/Navbar.vue | 226 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 168 insertions(+), 58 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 08131c3..cb08221 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,14 +1,35 @@
<template>
<div class="navbar">
<div>
- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
+ @toggleClick="toggleSideBar" />
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
</div>
-<!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
- <div class="center-menu">
- <span class="label">MIS绯荤粺锛堢鐞嗕俊鎭郴缁燂級</span>
- </div>
+ <!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
<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">
@@ -36,6 +57,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'
@@ -44,6 +66,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'
@@ -51,10 +74,16 @@
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
-
+const notificationVisible = ref(false)
+const notificationCenterRef = ref(null)
+const unreadCount = ref(0)
function toggleSideBar() {
appStore.toggleSideBar()
}
+// const redirect = ref(undefined)
+// watch(route, (newRoute) => {
+// redirect.value = newRoute.query && newRoute.query.redirect
+// }, { immediate: true })
function handleCommand(command) {
switch (command) {
@@ -89,29 +118,59 @@
function toggleTheme() {
settingsStore.toggleTheme()
}
+
+// 娑堟伅閫氱煡鐩稿叧
+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>
-.navbar {
- height: 50px;
- overflow: hidden;
- position: relative;
- background: var(--navbar-bg);
- box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
- .center-menu {
- line-height: 50px;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- .label {
- font-weight: bold;
- font-size: 18px;
- color: #333333;
- }
- }
+.navbar {
+ height: 56px;
+ overflow: hidden;
+ position: relative;
+ background: var(--navbar-bg);
+ border: 1px solid rgba(216, 225, 219, 0.9);
+ border-radius: 22px;
+ backdrop-filter: blur(18px);
+ box-shadow: var(--shadow-sm);
+ padding: 0 18px;
.hamburger-container {
- line-height: 46px;
+ line-height: 52px;
height: 100%;
float: left;
cursor: pointer;
@@ -119,7 +178,7 @@
-webkit-tap-highlight-color: transparent;
&:hover {
- background: rgba(0, 0, 0, 0.025);
+ background: var(--navbar-hover);
}
}
@@ -137,30 +196,32 @@
vertical-align: top;
}
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
- display: flex;
+ .right-menu {
+ float: right;
+ height: 100%;
+ align-items: center;
+ display: flex;
&:focus {
outline: none;
}
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- color: var(--navbar-text);
- vertical-align: text-bottom;
+ .right-menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 8px;
+ height: 100%;
+ font-size: 18px;
+ color: var(--navbar-text);
+ border-radius: 14px;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
- background: rgba(0, 0, 0, 0.025);
+ background: var(--navbar-hover);
}
}
@@ -170,7 +231,7 @@
svg {
transition: transform 0.3s;
-
+
&:hover {
transform: scale(1.15);
}
@@ -178,29 +239,78 @@
}
}
- .avatar-container {
- margin-right: 40px;
+ .notification-container {
+ margin-right: 12px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
-
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 50px;
- }
-
- i {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 14px;
- font-size: 12px;
+ .notification-badge {
+ :deep(.el-badge__content) {
+ border: none;
}
}
}
+
+ .avatar-container {
+ margin-right: 4px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ :deep(.el-dropdown) {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+
+ .avatar-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ padding: 6px 10px 6px 6px;
+ height: 44px;
+ border-radius: 999px;
+ background: rgba(247, 250, 248, 0.92);
+ border: 1px solid var(--surface-border);
+
+ .user-avatar {
+ cursor: pointer;
+ width: 34px;
+ height: 34px;
+ border-radius: 50px;
+ }
+
+ i {
+ cursor: pointer;
+ position: static;
+ font-size: 12px;
+ }
+ }
+ }
}
}
+
+</style>
+
+<style lang="scss">
+.notification-popover {
+ padding: 0 !important;
+ border-radius: 20px !important;
+ border: 1px solid var(--surface-border) !important;
+ box-shadow: var(--shadow-md) !important;
+
+ .el-popover__title {
+ display: none;
+ }
+
+ .el-popover__body {
+ padding: 0 !important;
+ }
+}
+.el-badge__content.is-fixed{
+ top: 12px;
+}
</style>
--
Gitblit v1.9.3