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

RuoYi

2025-05-09 3915c7739125db5d363bcbb5098e67fafa4458bb

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

 ruoyi-ui/src/assets/icons/svg/more-up.svg

New 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>

 ruoyi-ui/src/components/RightPanel/index.vue

File was deleted

 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 {


 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(


 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()

    }

  }

}


 ruoyi-ui/src/settings.js

@@ -7,7 +7,7 @@
  /**

   * 是否系统布局配置

   */

  showSettings: false,

  showSettings: true,



  /**

   * 是否显示顶部导航


 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


 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 => {