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

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 RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
 
 export default {
+  emits: ['setLayout'],
   components: {
     Breadcrumb,
     TopNav,
@@ -72,17 +74,12 @@ export default {
     ...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,6 +92,9 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
+    setLayout(event) {
+      this.$emit('setLayout')
+    },
     logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
@@ -173,17 +173,25 @@ export default {
     }
 
     .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 {

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 @@ import ThemePicker from '@/components/ThemePicker'
 
 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 @@ export default {
       })
       this.sideTheme = val
     },
+    openSetting() {
+      this.showSettings = true
+    },
+    closeSetting(){
+      this.showSettings = false
+    },
     saveSetting() {
       this.$modal.loading("正在保存到本地，请稍候...")
       this.$cache.local.set(

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 @@ export default {
   components: {
     AppMain,
     Navbar,
-    RightPanel,
     Settings,
     Sidebar,
     TagsView
@@ -57,6 +53,9 @@ export default {
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    },
+    setLayout() {
+      this.$refs.settingRef.openSetting()
     }
   }
 }