RuoYi/RuoYi-Cloud-Vue3
1
0
Fork 0
mirror of https://github.com/yangzongzhuan/RuoYi-Cloud-Vue3.git synced 2025-06-07 02:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化导航栏显示昵称&设置

Browse Source
This commit is contained in:
RuoYi 2025-05-09 14:03:18 +08:00
parent 79fbbcb4f6
commit 8d41d055cf
3 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/icons/svg/more-up.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746760911144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12537" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M395.21211 182.914448c0 62.669318 49.541323 113.472378 110.642936 113.472378 61.093427 0 110.652146-50.80306 110.65214601-113.472378 0-62.685691-49.559742-113.487727-110.65214601-113.487727C444.75241 69.426721 395.21211 120.22978 395.21211 182.914448zM395.21211 523.34693101c0 62.668295 49.541323 113.487727 110.642936 113.48772699 61.093427 0 110.652146-50.820456 110.652146-113.487727 0-62.669318-49.559742-113.472378-110.652146-113.472378C444.75241 409.874553 395.21211 460.67761301 395.21211 523.34693101zM395.21211 841.084529c0 62.686714 49.541323 113.488751 110.642936 113.488751 61.093427 0 110.652146-50.80203599 110.65214601-113.488751 0-62.669318-49.559742-113.471354-110.65214601-113.471354C444.75241 727.614198 395.21211 778.416234 395.21211 841.084529z" p-id="12538"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

61
src/layout/components/Navbar.vue
View File

@ -29,26 +29,25 @@
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
</template> </template>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" /> <img :src="userStore.avatar" class="user-avatar" />
<el-icon><caret-bottom /></el-icon> <span class="user-nickname"> {{ userStore.nickName }} </span>
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<router-link to="/user/profile"> <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"> <el-dropdown-item divided command="logout">
<span>布局设置</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided command="logout"> </el-dropdown-menu>
<span>退出登录</span> </template>
</el-dropdown-item> </el-dropdown>
</el-dropdown-menu> <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
</template> <svg-icon icon-class="more-up" />
</el-dropdown>
</div> </div>
</div> </div>
</div> </div>
@ -161,7 +160,7 @@ function toggleTheme() {
padding: 0 8px; padding: 0 8px;
height: 100%; height: 100%;
font-size: 18px; font-size: 18px;
color: var(--navbar-text); color: #5a5e66;
vertical-align: text-bottom; vertical-align: text-bottom;
&.hover-effect { &.hover-effect {
@ -188,17 +187,27 @@ function toggleTheme() {
} }
.avatar-container { .avatar-container {
margin-right: 40px; margin-right: 0px;
padding-right: 0px;
.avatar-wrapper { .avatar-wrapper {
margin-top: 5px; margin-top: 10px;
right: 5px;
position: relative; position: relative;
.user-avatar { .user-avatar {
cursor: pointer; cursor: pointer;
width: 40px; width: 30px;
height: 40px; height: 30px;
border-radius: 10px; border-radius: 50%;
}
.user-nickname{
position: relative;
left: 5px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
} }
i { i {

2
src/store/modules/user.js
View File

@ -10,6 +10,7 @@ const useUserStore = defineStore(
token: getToken(), token: getToken(),
id: '', id: '',
name: '', name: '',
nickName: '',
avatar: '', avatar: '',
roles: [], roles: [],
permissions: [] permissions: []
@ -46,6 +47,7 @@ const useUserStore = defineStore(
} }
this.id = user.userId this.id = user.userId
this.name = user.userName this.name = user.userName
this.nickName = user.nickName
this.avatar = avatar this.avatar = avatar
resolve(res) resolve(res)
}).catch(error => { }).catch(error => {