FE_IASF_server/src/layouts/header/index.vue

<template>
  <div class="header">
    <div class="group">
      <img src="@/assets/img/group.png">
      <breadcrumb v-if="crumbRefresh" ref="breadcrumb" :data="crumbs"></breadcrumb>
    </div>
    <div class="user-tool">
      <template v-if="inContent">
        <div class="site cp">
          <img src="@/assets/img/index.png">
          当前站点首页
        </div>
        <el-dropdown class="site-switch cp" @command="siteCommand">
          <span class="el-dropdown-link">
            切换站点<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(site, i) in sites" :key="i" :command="site">{{ site.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <!-- <img class="cp" src="@/assets/img/notice.png"> -->
      <el-dropdown class="user-wrap" @command="userCommand">
        <div class="user">
          <el-avatar :size="24" :src="avatar"></el-avatar>
          <span class="username">{{userName}}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="person">个人资料</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import ColumnConst from '@/const/column'
import breadcrumb from '@/components/breadcrumb'
export default {
    data() {
      return {
        sites: ColumnConst.sites,
        crumbRefresh: true,
        inContent: false, // 是否显示站点切换
        sitePath: ['/page', '/column', '/article']
      };
    },
    components: {
      breadcrumb
    },
    computed: {
      ...mapState('user', [
        'avatar', 'userName', 'crumbs'
      ])
    },
    watch: {
      crumbs() {
        this.crumbRefresh = false
        this.$nextTick(() => {
          this.crumbRefresh = true
        })
      },
      '$route'() {
        this.setContent()
      }
    },
    mounted() {
      this.setContent()
    },
    methods: {
      ...mapActions("user", [
        'logout'
      ]),
      ...mapMutations('content', [
        'setSite'
      ]),
      // 显示隐藏站点切换
      setContent() {
        const { path } = this.$route
        this.inContent = !!this.sitePath.find(e => path.includes(e))
      },
      // 站点切换回调
      siteCommand(e) {
        this.setSite(e)
        this.$route.path === '/page/list' || this.$router.push('/page')
        location.reload()
      },
      // 用户切换回调
      userCommand(command) {
        if (command == 'person') {
          this.$router.push('/setting')
        } else {
          this.logout()
        }
      },
    }
};
</script>
<style lang="scss" scoped>
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 25px;
  color: #333;
  background-color: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0,21,41,0.1200);
  .group {
    display: inline-flex;
    align-items: center;
    span {
      margin-left: 13px ;
      font-size: 14px;
      color: #333;
    }
  }
  .cp {
    cursor: pointer;
  }
  .user-tool {
    display: flex;
    align-items: center;
  }
  .site, .user-wrap {
    display: inline-flex;
    align-items: center;
  }
  .site {
    img {
      margin-right: 4px;
    }
  }
  .site-switch {
    margin: 0 60px 0 54px;
    color: #333;
    i {
      color: #000;
    }
  }
  .user-wrap {
    margin-left: 26px;
    .user {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      .username {
        margin-left: 8px;
        color: #333;
        font-size: 14px;
      }
    }
  }
}
</style>