manager-vue3/src/layout/Header/index.vue

<template>
  <header>
    <div class="left-box">
      <!-- 收缩按钮 -->
      <div class="menu-icon" @click="opendStateChange">
        <i class="iconfont" :class="isCollapse ? 'icon-caidanzhankai':'icon-caidanshouqi'" style="font-size:24px;"></i>
      </div>
      <Breadcrumb />
    </div>
    <div class="right-box">
      <!-- 快捷功能按钮 -->
      <div class="function-list">
        <div class="function-list-item hidden-sm-and-down">
          <Full-screen />
        </div>
        <div class="function-list-item"><SizeChange /></div>
        <div class="function-list-item hidden-sm-and-down"><Theme /></div>
      </div>
      <!-- 用户信息 -->
      <div class="user-info">
        <el-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" style="margin-top:1px;" size="small"/>
        <el-dropdown>
          <div class="el-dropdown-link">
            <span>{{userInfo.nickName || '请登录'}}</span> 
            <i class="iconfont icon-xialazhankai" style="font-size:14px;margin-left: 3px;"></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script>
import { defineComponent, computed, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import FullScreen from './functionList/fullscreen.vue'
import SizeChange from './functionList/sizeChange.vue'
import Theme from './functionList/theme.vue'
import Breadcrumb from './Breadcrumb.vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
  components: {
    FullScreen,
    Breadcrumb,
    SizeChange,
    Theme,
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const layer = reactive({
      show: false,
      showButton: true
    })

    const userInfo = computed(()=>store.state.user.userInfo)
    const isCollapse = computed(() => store.state.app.isCollapse)
    // isCollapse change to hide/show the sidebar
    const opendStateChange = () => {
      store.commit('app/isCollapseChange', !isCollapse.value)
    }

    // login out the system
    const loginOut = () => {
      store.dispatch('user/loginOut').then(() => {
        ElMessage.success({
          message: '退出登录成功',
          type: 'success',
          showClose: true,
          duration: 1000
        })
        router.push('/login')
      })
    }
    
  
    return {
      isCollapse,
      layer,
      opendStateChange,
      loginOut,
      userInfo,
    }
  }
})
</script>

<style lang="scss" scoped>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: var(--system-header-background);
    padding-right: 22px;
  }
  .left-box {
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--system-header-border-color);
    .menu-icon {
      width: 60px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
      font-weight: 100;
      cursor: pointer;
      margin-right: 10px;
      &:hover {
        background-color: var(--system-header-item-hover-color);
      }
      i {
        color: var(--system-header-text-color);
      }
    }
  }
  .right-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .function-list{
      display: flex;
      .function-list-item {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        :deep(i) {
          color: var(--system-header-text-color);
        }
      }
    }
    .user-info {
      margin-left: 20px;
      .el-dropdown-link {
        margin-top: 8px;
        margin-left: 5px;
        color: var(--system-header-breadcrumb-text-color);
      }
    }
  }
</style>