cyber-narrator-cn-ui/src/components/layout/Header.vue

<template>
  <div class="cn-header">
<!--    <div class="left-menu&#45;&#45;pin" :class="false ? 'left-menu&#45;&#45;pin-normal' : 'left-menu&#45;&#45;pin-reverse'" @click="shrink"><i :class="{'icon-reverse': false}" class="el-icon-s-fold"></i></div>-->
    <!--导航面包屑-->
    <div class="header__left">
      <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': isShrink}"><i class="cn-icon cn-icon-expand"></i></span>
      <el-breadcrumb separator="/" style="padding-left: 20px; padding-top: 6px;">
        <el-breadcrumb-item :title="item" v-for="item in breadcrumb" :key="item" style="display: inline-block; max-width: 300px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
          {{item}}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-select
          size="small"
          v-model="from"
          v-if="showEntityTypeSelector"
          style="padding-left: 25px; width: 130px;"
      >
        <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
      </el-select>
    </div>
    <!--个人操作-->
    <div class="personal">
      <el-dropdown>
        <div class="header-menu--item"><i class="cn-icon cn-icon-language"></i></div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <div id="header-to-english" :style="language === 'en'?'color:#0091ff':''" @click="changeLocal('en')">English</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div id="header-to-chinese" :style="language === 'cn'?'color:#0091ff':''" @click="changeLocal('cn')">中文</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown>
        <div class='login-user header-menu--item'>{{username}}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <div id="header-to-changepin" @click="showPinDialog">Change pin</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div id="header-to-logout" @click="logout">Sign out</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
<!--    <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>-->
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { get } from '@/utils/http'
import { entityType, storageKey } from '@/utils/constants'
export default {
  name: 'Header',
  data () {
    return {
      username: 'admin', // sessionStorage.getItem('cn-username'),
      language: localStorage.getItem('cn-language') ? localStorage.getItem('cn-language') : 'en',

      showChangePin: false,

      breadcrumbMap: [
        {
          path: '/panel/trafficSummary',
          parentName: this.$t('overall.dashboard'),
          name: this.$t('trafficSummary.trafficSummary')
        },
        {
          path: '/panel/networkAppPerformance',
          parentName: this.$t('overall.dashboard'),
          name: this.$t('networkAppPerformance.networkAppPerformance')
        }, {
          path: '/panel/dnsServiceInsights',
          parentName: this.$t('overall.dashboard'),
          name: this.$t('dnsServiceInsights')
        }, {
          path: '/entityExplorer',
          parentName: this.$t('overall.entities'),
          name: this.$t('overall.entityExplorer'),
          childName: ''
        }, {
          path: '/user',
          parentName: this.$t('overall.setting'),
          name: this.$t('overall.user')
        }, {
          path: '/role',
          parentName: this.$t('overall.setting'),
          name: this.$t('overall.role')
        }, {
          path: '/operationLog',
          parentName: this.$t('overall.setting'),
          name: this.$t('overall.operationLog')
        }, {
          path: '/i18n',
          parentName: this.$t('overall.setting'),
          name: 'I18N'
        }
      ],
      from: '' // entity类型
    }
  },
  computed: {
    breadcrumb () {
      const breadcrumb = this.breadcrumbMap.find(b => this.path === b.path)
      const breadcrumbArray = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
      if (breadcrumbArray.length > 0 && breadcrumb.childName) {
        breadcrumbArray.push(breadcrumb.childName)
      }
      return breadcrumbArray
    },
    path () {
      const { path } = useRoute()
      return path
    },
    showEntityTypeSelector () {
      return this.$store.getters.getShowEntityTypeSelector
    },
    isShrink () {
      return this.$store.getters.getIsShrink
    },
    entityName () {
      return this.$store.getters.entityName
    }
  },
  watch: {
    from (n) {
      this.$store.commit('entityTypeChange', n)
    },
    entityName (n) {
      const breadcrumb = this.breadcrumbMap.find(b => b.path === '/entityExplorer')
      breadcrumb.childName = n
    }
  },
  mounted () {
    this.from = Object.keys(this.entityType)[0]
  },
  setup () {
    return {
      entityType // 所有entity类型，用于header下拉框选择
    }
  },
  methods: {
    changeLocal (lang) {
      if (lang !== localStorage.getItem('cn-language')) {
        localStorage.setItem('cn-language', lang)
        // this.$i18n.locale = lang
        window.location.reload()
      }
    },
    showPinDialog () {
      this.showChangePin = true
    },
    logout () {
      sessionStorage.removeItem(storageKey.token)
      get('/logout')
    },
    refreshLang () {
      this.language = localStorage.getItem('cn-language')
      this.$i18n.locale = this.language
      this.$nextTick(() => {
        window.location.reload()
      })
    },
    shrink () {
      this.$store.commit('isShrink', !this.isShrink)
    }
  }
}
</script>

<style lang="scss">
.cn-header {
  display: flex;
  height: 50px;

  .header__left {
    display: flex;
    align-items: center;
    flex-grow: 1;

    .shrink-button {
      margin-left: 20px;
      color: #A4ADB5;
      cursor: pointer;
      transition: all linear .4s;

      &.shrink-button--collapse {
        transform: rotateY(180deg);
      }
    }
  }
  .header-menu {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;

    .el-dropdown {
      width: 60px;
      text-align: center;
      height: 36px;
      line-height: 50px;
      .el-dialog{
        width: 1000px;
        height: 70px;
        .el-dialog__header{
          .el-dialog__title{
            color: #fff;
          }
          .el-dialog__close{
            color: #fff;
            line-height: 50px;
            font-size: 30px;
          }
        }
      }
    }
  }
  .header-menu--item {
    color: #778391;
    cursor: pointer;
    transition: color linear .2s;
    i {
      font-size: 18px;
    }
  }
  .header-menu--item:hover {
    color: #313336;
  }
  .personal {
    display: flex;
    .el-dropdown {
      margin: 0 10px 0 30px;
      height: 36px;
      line-height: 50px;
      text-align: center;
    }
    .login-user {
      color: #333;
      i {
        color: #999;
        font-size: 12px;
      }
    }
  }
  .left-menu--pin {
    width: 20px;
    font-size: 20px;
    font-weight: 100;
    color: #999999;
    transition: all .4s;
    height: 100%;
    line-height: 50px;
    margin-left: 10px;
    i {
      transform: rotateY(0);
      transition: transform .4s;
    }
    i.icon-reverse {
      transform: rotateY(180deg);
    }
  }
  .left-menu--pin-normal{
  }
  .left-menu--pin-reverse{
  }
}
.link-title a {
  color: inherit;
  text-decoration: none;
}
.cn-breakcrumb {
  padding-left: 15px;
  line-height: 50px;

  .el-breadcrumb__item .el-breadcrumb__inner {
    color: #999;
  }
}
</style>