From ed36047f6ce0b91dad25efc10c8a0e83dd533a68 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 20 三月 2026 17:15:37 +0800
Subject: [PATCH] change
---
src/layout/components/Navbar.vue | 449 ++++++++++++++++++++++++++++---------------------------
1 files changed, 229 insertions(+), 220 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d4e938d..25d9432 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,39 +1,45 @@
<template>
<div class="navbar">
<div>
- <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" />
+ <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="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"
- >
+ <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;">
+ <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"
- />
+ <NotificationCenter @unreadCountChange="handleUnreadCountChange"
+ ref="notificationCenterRef" />
</el-popover>
<div class="avatar-container">
- <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+ <el-dropdown @command="handleCommand"
+ class="right-menu-item hover-effect"
+ trigger="click">
<div class="avatar-wrapper">
- <img :src="userStore.avatar" class="user-avatar" />
+ <img :src="userStore.avatar"
+ class="user-avatar" />
<el-icon><caret-bottom /></el-icon>
</div>
<template #dropdown>
@@ -41,10 +47,12 @@
<router-link to="/user/profile">
<el-dropdown-item>涓汉涓績</el-dropdown-item>
</router-link>
- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+ <el-dropdown-item command="setLayout"
+ v-if="settingsStore.showSettings">
<span>甯冨眬璁剧疆</span>
</el-dropdown-item>
- <el-dropdown-item divided command="logout">
+ <el-dropdown-item divided
+ command="logout">
<span>閫�鍑虹櫥褰�</span>
</el-dropdown-item>
</el-dropdown-menu>
@@ -56,237 +64,238 @@
</template>
<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'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-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'
+ 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";
+ import Screenfull from "@/components/Screenfull";
+ import SizeSelect from "@/components/SizeSelect";
+ 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";
-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) {
- case "setLayout":
- setLayout()
- break
- case "logout":
- logout()
- break
- default:
- break
+ 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 logout() {
- ElMessageBox.confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- userStore.logOut().then(() => {
- location.href = '/index'
+ function handleCommand(command) {
+ switch (command) {
+ case "setLayout":
+ setLayout();
+ break;
+ case "logout":
+ logout();
+ break;
+ default:
+ break;
+ }
+ }
+
+ function logout() {
+ ElMessageBox.confirm("纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
})
- }).catch(() => { })
-}
+ .then(() => {
+ userStore.logOut().then(() => {
+ location.href = "/index";
+ });
+ })
+ .catch(() => {});
+ }
-const emits = defineEmits(['setLayout'])
-function setLayout() {
- emits('setLayout')
-}
+ const emits = defineEmits(["setLayout"]);
+ function setLayout() {
+ emits("setLayout");
+ }
-function toggleTheme() {
- settingsStore.toggleTheme()
-}
+ function toggleTheme() {
+ settingsStore.toggleTheme();
+ }
-// 娑堟伅閫氱煡鐩稿叧
-function handleUnreadCountChange(count) {
- unreadCount.value = count
-}
+ // 娑堟伅閫氱煡鐩稿叧
+ 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) {
+ // 缁勪欢鎸傝浇鏃跺姞杞芥湭璇绘暟閲忓拰瀹氭椂鍒锋柊
+ let unreadCountTimer = null;
+ onMounted(() => {
+ // 寤惰繜鍔犺浇锛岀‘淇濈粍浠跺凡娓叉煋
nextTick(() => {
- notificationCenterRef.value.loadMessages()
- })
- }
-})
+ if (notificationCenterRef.value) {
+ notificationCenterRef.value.loadUnreadCount();
+ }
+ });
+ // 瀹氭椂鍒锋柊鏈鏁伴噺锛堟瘡30绉掞級
+ // unreadCountTimer = setInterval(() => {
+ // if (notificationCenterRef.value) {
+ // notificationCenterRef.value.loadUnreadCount()
+ // }
+ // }, 30000)
+ });
-onUnmounted(() => {
- if (unreadCountTimer) {
- clearInterval(unreadCountTimer)
- }
-})
+ // 鐩戝惉 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);
+ .navbar {
+ height: 50px;
+ overflow: hidden;
+ position: relative;
+ background: var(--navbar-bg);
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
- .hamburger-container {
- line-height: 46px;
- height: 100%;
- float: left;
- cursor: pointer;
- transition: background 0.3s;
- -webkit-tap-highlight-color: transparent;
-
- &:hover {
- background: rgba(0, 0, 0, 0.025);
- }
- }
-
- .breadcrumb-container {
- float: left;
- }
-
- .topmenu-container {
- position: absolute;
- left: 50px;
- }
-
- .errLog-container {
- display: inline-block;
- vertical-align: top;
- }
-
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
- display: flex;
-
- &:focus {
- outline: none;
- }
-
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
+ .hamburger-container {
+ line-height: 46px;
height: 100%;
- font-size: 18px;
- color: var(--navbar-text);
- vertical-align: text-bottom;
+ float: left;
+ cursor: pointer;
+ transition: background 0.3s;
+ -webkit-tap-highlight-color: transparent;
- &.hover-effect {
- cursor: pointer;
- transition: background 0.3s;
+ &:hover {
+ background: rgba(0, 0, 0, 0.025);
+ }
+ }
- &:hover {
- background: rgba(0, 0, 0, 0.025);
+ .breadcrumb-container {
+ float: left;
+ }
+
+ .topmenu-container {
+ position: absolute;
+ left: 50px;
+ }
+
+ .errLog-container {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ .right-menu {
+ float: right;
+ height: 100%;
+ line-height: 50px;
+ 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;
+
+ &.hover-effect {
+ cursor: pointer;
+ transition: background 0.3s;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.025);
+ }
+ }
+
+ &.theme-switch-wrapper {
+ display: flex;
+ align-items: center;
+
+ svg {
+ transition: transform 0.3s;
+
+ &:hover {
+ transform: scale(1.15);
+ }
+ }
}
}
- &.theme-switch-wrapper {
+ .notification-container {
+ margin-right: 20px;
display: flex;
align-items: center;
+ cursor: pointer;
- svg {
- transition: transform 0.3s;
+ .notification-badge {
+ :deep(.el-badge__content) {
+ border: none;
+ }
+ }
+ }
- &:hover {
- transform: scale(1.15);
+ .avatar-container {
+ margin-right: 40px;
+
+ .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-container {
- margin-right: 20px;
- display: flex;
- align-items: center;
- cursor: pointer;
-
- .notification-badge {
- :deep(.el-badge__content) {
- border: none;
- }
- }
- }
-
- .avatar-container {
- margin-right: 40px;
-
- .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;
- }
- }
- }
}
-}
-
</style>
<style lang="scss">
-.notification-popover {
- padding: 0 !important;
-
- .el-popover__title {
- display: none;
- }
-
- .el-popover__body {
+ .notification-popover {
padding: 0 !important;
+
+ .el-popover__title {
+ display: none;
+ }
+
+ .el-popover__body {
+ padding: 0 !important;
+ }
}
-}
-.el-badge__content.is-fixed{
- top: 12px;
-}
+ .el-badge__content.is-fixed {
+ top: 12px;
+ }
</style>
--
Gitblit v1.9.3