From 3503005f9d5dbe569066c2d41edc4073aba8a641 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Sat, 23 Aug 2025 11:46:39 +0800
Subject: [PATCH] 优化布局设置显示
---
ruoyi-ui/src/layout/components/Navbar.vue | 49 +++++++++++++++++++++++++++++--------------------
1 files changed, 29 insertions(+), 20 deletions(-)
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index 5c5a248..1d10b91 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -2,8 +2,8 @@
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+ <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
+ <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu">
<template v-if="device!=='mobile'">
@@ -25,16 +25,16 @@
</template>
- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+ <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
- <i class="el-icon-caret-bottom" />
+ <span class="user-nickname"> {{ nickName }} </span>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
- <el-dropdown-item @click.native="setting = true">
+ <el-dropdown-item @click.native="setLayout" v-if="setting">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
@@ -58,6 +58,7 @@
import RuoYiDoc from '@/components/RuoYi/Doc'
export default {
+ emits: ['setLayout'],
components: {
Breadcrumb,
TopNav,
@@ -72,17 +73,12 @@
...mapGetters([
'sidebar',
'avatar',
- 'device'
+ 'device',
+ 'nickName'
]),
setting: {
get() {
return this.$store.state.settings.showSettings
- },
- set(val) {
- this.$store.dispatch('settings/changeSetting', {
- key: 'showSettings',
- value: val
- })
}
},
topNav: {
@@ -95,16 +91,19 @@
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
- async logout() {
+ setLayout(event) {
+ this.$emit('setLayout')
+ },
+ logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
- location.href = '/index';
+ location.href = '/index'
})
- }).catch(() => {});
+ }).catch(() => {})
}
}
}
@@ -173,17 +172,27 @@
}
.avatar-container {
- margin-right: 30px;
+ margin-right: 0px;
+ padding-right: 0px;
.avatar-wrapper {
- margin-top: 5px;
+ margin-top: 10px;
+ right: 8px;
position: relative;
.user-avatar {
cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 10px;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ }
+
+ .user-nickname{
+ position: relative;
+ bottom: 10px;
+ left: 2px;
+ font-size: 14px;
+ font-weight: bold;
}
.el-icon-caret-bottom {
--
Gitblit v1.9.3