From 85447bbc62987ae620b4142fcaba5784571f73c4 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Fri, 03 Apr 2026 22:34:22 +0800
Subject: [PATCH] 优化样式
---
ruoyi-ui/src/layout/components/Navbar.vue | 84 ++++++++++++++++++++++++++++++++---------
1 files changed, 65 insertions(+), 19 deletions(-)
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index 258a947..ac2959d 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -1,10 +1,13 @@
<template>
- <div class="navbar">
+ <div class="navbar" :class="'nav' + navType">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
- <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
-
+ <breadcrumb v-if="navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
+ <top-nav v-if="navType == 2" id="topmenu-container" class="topmenu-container" />
+ <template v-if="navType == 3">
+ <logo v-show="showLogo" :collapse="false"></logo>
+ <top-bar id="topbar-container" class="topbar-container" />
+ </template>
<div class="right-menu">
<template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" />
@@ -23,6 +26,10 @@
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
+ <el-tooltip content="消息通知" effect="dark" placement="bottom">
+ <header-notice id="header-notice" class="right-menu-item hover-effect" />
+ </el-tooltip>
+
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
@@ -34,15 +41,17 @@
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
+ <el-dropdown-item @click.native="setLayout" v-if="setting">
+ <span>布局设置</span>
+ </el-dropdown-item>
+ <el-dropdown-item @click.native="lockScreen">
+ <span>锁定屏幕</span>
+ </el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
-
- <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
- <svg-icon icon-class="more-up" />
- </div>
</div>
</div>
</template>
@@ -50,25 +59,30 @@
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
+import TopNav from './TopNav'
+import TopBar from './TopBar'
+import Logo from './Sidebar/Logo'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
+import HeaderNotice from './HeaderNotice'
export default {
- emits: ['setLayout'],
components: {
Breadcrumb,
+ Logo,
TopNav,
+ TopBar,
Hamburger,
Screenfull,
SizeSelect,
Search,
RuoYiGit,
- RuoYiDoc
+ RuoYiDoc,
+ HeaderNotice
},
computed: {
...mapGetters([
@@ -82,9 +96,14 @@
return this.$store.state.settings.showSettings
}
},
- topNav: {
+ navType: {
get() {
- return this.$store.state.settings.topNav
+ return this.$store.state.settings.navType
+ }
+ },
+ showLogo: {
+ get() {
+ return this.$store.state.settings.sidebarLogo
}
}
},
@@ -94,6 +113,12 @@
},
setLayout(event) {
this.$emit('setLayout')
+ },
+ lockScreen() {
+ const currentPath = this.$route.fullPath
+ this.$store.dispatch('lock/lockScreen', currentPath).then(() => {
+ this.$router.push('/lock')
+ })
},
logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
@@ -111,20 +136,33 @@
</script>
<style lang="scss" scoped>
+.navbar.nav3 {
+ .hamburger-container {
+ display: none !important;
+ }
+}
+
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ display: flex;
+ align-items: center;
+ // padding: 0 8px;
+ box-sizing: border-box;
.hamburger-container {
line-height: 46px;
height: 100%;
- float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ margin-right: 8px;
&:hover {
background: rgba(0, 0, 0, .025)
@@ -132,7 +170,7 @@
}
.breadcrumb-container {
- float: left;
+ flex-shrink: 0;
}
.topmenu-container {
@@ -140,15 +178,21 @@
left: 50px;
}
- .errLog-container {
- display: inline-block;
- vertical-align: top;
+ .topbar-container {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ margin-left: 8px;
}
.right-menu {
- float: right;
height: 100%;
line-height: 50px;
+ display: flex;
+ align-items: center;
+ margin-left: auto;
&:focus {
outline: none;
@@ -178,6 +222,7 @@
.avatar-wrapper {
margin-top: 10px;
+ right: 8px;
position: relative;
.user-avatar {
@@ -190,6 +235,7 @@
.user-nickname{
position: relative;
bottom: 10px;
+ left: 2px;
font-size: 14px;
font-weight: bold;
}
--
Gitblit v1.9.3