去除顶部面包屑/增加用户名称/头像改为圆形

liuguocan

2023-02-24 33c4b8107d8c5d3e6a4c0661b1cb2d21c9be80ed

去除顶部面包屑/增加用户名称/头像改为圆形

 src/layout/components/Navbar.vue

@@ -2,29 +2,17 @@
  <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"/>
    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav && showBreadCrumb"/>
    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>

    <div class="right-menu">
      <template v-if="device!=='mobile'">
        <search id="header-search" class="right-menu-item" />
        
        <el-tooltip content="源码地址" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="文档地址" effect="dark" placement="bottom">
          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
        </el-tooltip>

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>

<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!--        </el-tooltip>-->
      </template>

      <div class="user-name">{{ name }}</div>
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar">
@@ -72,6 +60,7 @@
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'device'
    ]),
    setting: {
@@ -89,6 +78,11 @@
      get() {
        return this.$store.state.settings.topNav
      }
    }
  },
  data(){
    return {
      showBreadCrumb:false // 是否显示顶部面包屑
    }
  },
  methods: {
@@ -111,6 +105,10 @@
</script>

<style lang="scss" scoped>
.user-name{
  font-size: 16px;
  color: #333;
}
.navbar {
  height: 50px;
  overflow: hidden;
@@ -149,7 +147,8 @@
    float: right;
    height: 100%;
    line-height: 50px;

    display: flex;
    align-items: center;
    &:focus {
      outline: none;
    }
@@ -183,14 +182,14 @@
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          border-radius: 100%;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          top: 15px;
          font-size: 12px;
        }
      }

 src/store/modules/user.js

@@ -61,7 +61,7 @@
          } else {
            commit('SET_ROLES', ['ROLE_DEFAULT'])
          }
          commit('SET_NAME', user.userName)
          commit('SET_NAME', user.user_name)
          commit('SET_AVATAR', avatar)
          resolve(res)
        }).catch(error => {