From 3915c7739125db5d363bcbb5098e67fafa4458bb Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Fri, 09 May 2025 14:02:09 +0800
Subject: [PATCH] 优化导航栏显示昵称&设置
---
/dev/null | 106 --------------------------
ruoyi-ui/src/store/modules/user.js | 5 +
ruoyi-ui/src/settings.js | 2
ruoyi-ui/src/layout/index.vue | 11 +-
ruoyi-ui/src/layout/components/Settings/index.vue | 17 ++-
ruoyi-ui/src/assets/icons/svg/more-up.svg | 1
ruoyi-ui/src/store/getters.js | 8 +
ruoyi-ui/src/layout/components/Navbar.vue | 42 ++++++----
8 files changed, 52 insertions(+), 140 deletions(-)
diff --git a/ruoyi-ui/src/assets/icons/svg/more-up.svg b/ruoyi-ui/src/assets/icons/svg/more-up.svg
new file mode 100644
index 0000000..d30ac11
--- /dev/null
+++ b/ruoyi-ui/src/assets/icons/svg/more-up.svg
@@ -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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/components/RightPanel/index.vue b/ruoyi-ui/src/components/RightPanel/index.vue
deleted file mode 100644
index 25ce3f8..0000000
--- a/ruoyi-ui/src/components/RightPanel/index.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
- <div ref="rightPanel" class="rightPanel-container">
- <div class="rightPanel-background" />
- <div class="rightPanel">
- <div class="rightPanel-items">
- <slot />
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: 'RightPanel',
- props: {
- clickNotClose: {
- default: false,
- type: Boolean
- }
- },
- computed: {
- show: {
- get() {
- return this.$store.state.settings.showSettings
- },
- set(val) {
- this.$store.dispatch('settings/changeSetting', {
- key: 'showSettings',
- value: val
- })
- }
- }
- },
- watch: {
- show(value) {
- if (value && !this.clickNotClose) {
- this.addEventClick()
- }
- }
- },
- mounted() {
- this.addEventClick()
- },
- beforeDestroy() {
- const elx = this.$refs.rightPanel
- elx.remove()
- },
- methods: {
- addEventClick() {
- window.addEventListener('click', this.closeSidebar)
- },
- closeSidebar(evt) {
- const parent = evt.target.closest('.el-drawer__body')
- if (!parent) {
- this.show = false
- window.removeEventListener('click', this.closeSidebar)
- }
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.rightPanel-background {
- position: fixed;
- top: 0;
- left: 0;
- opacity: 0;
- transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
- background: rgba(0, 0, 0, .2);
- z-index: -1;
-}
-
-.rightPanel {
- width: 100%;
- max-width: 260px;
- height: 100vh;
- position: fixed;
- top: 0;
- right: 0;
- box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
- transition: all .25s cubic-bezier(.7, .3, .1, 1);
- transform: translate(100%);
- background: #fff;
- z-index: 40000;
-}
-
-.handle-button {
- width: 48px;
- height: 48px;
- position: absolute;
- left: -48px;
- text-align: center;
- font-size: 24px;
- border-radius: 6px 0 0 6px !important;
- z-index: 0;
- pointer-events: auto;
- cursor: pointer;
- color: #fff;
- line-height: 48px;
- i {
- font-size: 24px;
- line-height: 48px;
- }
-}
-</style>
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index 14db4d3..258a947 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -25,23 +25,24 @@
</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">
- <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>
@@ -58,6 +59,7 @@
import RuoYiDoc from '@/components/RuoYi/Doc'
export default {
+ emits: ['setLayout'],
components: {
Breadcrumb,
TopNav,
@@ -72,17 +74,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: {
@@ -94,6 +91,9 @@
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
+ },
+ setLayout(event) {
+ this.$emit('setLayout')
},
logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
@@ -173,17 +173,25 @@
}
.avatar-container {
- margin-right: 30px;
+ margin-right: 0px;
+ padding-right: 0px;
.avatar-wrapper {
- margin-top: 5px;
+ margin-top: 10px;
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;
+ font-size: 14px;
+ font-weight: bold;
}
.el-icon-caret-bottom {
diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue
index 39043a0..8e24cae 100644
--- a/ruoyi-ui/src/layout/components/Settings/index.vue
+++ b/ruoyi-ui/src/layout/components/Settings/index.vue
@@ -1,5 +1,5 @@
<template>
- <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
+ <el-drawer size="280px" :visible="showSettings" :with-header="false" :append-to-body="true" :before-close="closeSetting">
<div class="drawer-container">
<div>
<div class="setting-drawer-content">
@@ -78,18 +78,15 @@
export default {
components: { ThemePicker },
+ expose: ['openSetting'],
data() {
return {
theme: this.$store.state.settings.theme,
- sideTheme: this.$store.state.settings.sideTheme
+ sideTheme: this.$store.state.settings.sideTheme,
+ showSettings: false
}
},
computed: {
- visible: {
- get() {
- return this.$store.state.settings.showSettings
- }
- },
fixedHeader: {
get() {
return this.$store.state.settings.fixedHeader
@@ -165,6 +162,12 @@
})
this.sideTheme = val
},
+ openSetting() {
+ this.showSettings = true
+ },
+ closeSetting(){
+ this.showSettings = false
+ },
saveSetting() {
this.$modal.loading("正在保存到本地，请稍候...")
this.$cache.local.set(
diff --git a/ruoyi-ui/src/layout/index.vue b/ruoyi-ui/src/layout/index.vue
index f8a374a..2929054 100644
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -4,19 +4,16 @@
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
- <navbar/>
+ <navbar @setLayout="setLayout"/>
<tags-view v-if="needTagsView"/>
</div>
<app-main/>
- <right-panel>
- <settings/>
- </right-panel>
+ <settings ref="settingRef"/>
</div>
</div>
</template>
<script>
-import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
@@ -27,7 +24,6 @@
components: {
AppMain,
Navbar,
- RightPanel,
Settings,
Sidebar,
TagsView
@@ -57,6 +53,9 @@
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+ },
+ setLayout() {
+ this.$refs.settingRef.openSetting()
}
}
}
diff --git a/ruoyi-ui/src/settings.js b/ruoyi-ui/src/settings.js
index 059c74d..dce88ec 100644
--- a/ruoyi-ui/src/settings.js
+++ b/ruoyi-ui/src/settings.js
@@ -7,7 +7,7 @@
/**
* 是否系统布局配置
*/
- showSettings: false,
+ showSettings: true,
/**
* 是否显示顶部导航
diff --git a/ruoyi-ui/src/store/getters.js b/ruoyi-ui/src/store/getters.js
index 6aa6a26..04e9fe3 100644
--- a/ruoyi-ui/src/store/getters.js
+++ b/ruoyi-ui/src/store/getters.js
@@ -7,13 +7,15 @@
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
+ id: state => state.user.id,
name: state => state.user.name,
+ nickName: state => state.user.nickName,
introduction: state => state.user.introduction,
roles: state => state.user.roles,
permissions: state => state.user.permissions,
permission_routes: state => state.permission.routes,
- topbarRouters:state => state.permission.topbarRouters,
- defaultRoutes:state => state.permission.defaultRoutes,
- sidebarRouters:state => state.permission.sidebarRouters
+ topbarRouters: state => state.permission.topbarRouters,
+ defaultRoutes: state => state.permission.defaultRoutes,
+ sidebarRouters: state => state.permission.sidebarRouters
}
export default getters
diff --git a/ruoyi-ui/src/store/modules/user.js b/ruoyi-ui/src/store/modules/user.js
index 6c5e2b5..1b3a566 100644
--- a/ruoyi-ui/src/store/modules/user.js
+++ b/ruoyi-ui/src/store/modules/user.js
@@ -8,6 +8,7 @@
token: getToken(),
id: '',
name: '',
+ nickName: '',
avatar: '',
roles: [],
permissions: []
@@ -25,6 +26,9 @@
},
SET_NAME: (state, name) => {
state.name = name
+ },
+ SET_NICK_NAME: (state, nickName) =>{
+ state.nickName = nickName
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
@@ -72,6 +76,7 @@
}
commit('SET_ID', user.userId)
commit('SET_NAME', user.userName)
+ commit('SET_NICK_NAME', user.nickName)
commit('SET_AVATAR', avatar)
resolve(res)
}).catch(error => {
--
Gitblit v1.9.3