DataOps-web/src/components/Header/navbar.vue

<template>
    <div style="z-index: var(--zIndex-nav)">
      <v-banner
        single-line
        class="banner"
        :style="`padding-left: ${isLayout ? left : 0 }px;background-color:${systemInfo?.bgc || '#007cd6'}`"
      >
        <div class="left pa-4" :style="`width: ${left}px;`">
          <img v-if="systemInfo?.headImg" :src="systemInfo.headImg" alt="" class="mr-2 header-img">
          <span @click="$router.push('/')">{{ webTitle }}</span>
        </div>
        <template v-slot:actions>

          <slot name="tools" ></slot>
          <!-- 语言切换 -->
          <v-menu v-if="false" offset-y nudge-bottom="5" attach left>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                fab
                x-small
                v-bind="attrs"
                v-on="on"
              >
                <v-icon size="24">mdi-translate</v-icon>
              </v-btn>
            </template>
            <v-list nav dense>
              <v-list-item
                v-for="item in langList"
                :key="item.value"
                class="hover"
                @click="langChange(item.value)"
              >
                <v-list-item-content>
                  <v-list-item-title>{{ item.text }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
          </v-list>
          </v-menu>
          <v-menu v-if="person" offset-y nudge-bottom="5" attach left>
            <template v-slot:activator="{ on, attrs }">
              <v-btn class="mx-5 buttons" rounded v-bind="attrs" v-on="on">
                <v-icon left>mdi mdi-account</v-icon>
                <div style="flex: 1; width: 0" class="text-truncate">
                  {{ userInfo?.name ? userInfo.name : userInfo?.username ?? '新用户' }}
                </div>
              </v-btn>
            </template>
            <v-list dense>
                <v-list-item
                    v-for="item in list"
                    :key="item.id"
                    class="hover"
                    @click="handleClick(item)"
                >
                    <v-list-item-content>
                        <v-list-item-title>{{ item.text }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
          </v-menu>
        </template>
      </v-banner>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { timestampToTime } from '@/utils/date'
/**
 * props.title: []
 * @param { text, href, disabled }
 */
export default {
  name: 'header-navbar',
  props: {
    person: {
      type: Boolean,
      default: true
    },
    title: {
      type: [String, Array],
      default: () => [] || ''
    },
    isLayout: {
      type: Boolean,
      default: false
    },
    left: {
      type: Number,
      default: 300
    }
  },
  data () {
    return {
      list: [
        // { text: '绑定手机', id: 1, icon: 'mdi-lock-check', path: '' },
        // { text: '系统管理', id: 2, icon: 'mdi-cog', path: '' },
        // { text: '系统更新', id: 2, icon: 'mdi-cog-sync', path: '/update' },
        // { text: '我的消息', id: 4, icon: 'mdi-email-outline', path: '/message' },
        { text: '刷新菜单', id: 5, icon: 'mdi-refresh', path: '' },
        { text: '版本信息', id: 1, icon: 'mdi-logout', path: '' },
        { text: '注销登录', id: 3, icon: 'mdi-logout', path: '' }
      ],
      langList: [
        { text: '中文', value: 'zh' },
        { text: 'English', value: 'en' }
      ]
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'lang', 'systemInfo']),
    webTitle () {
      if (this.lang === 'zh') {
        return this.systemInfo?.title || this.$DEFAULT_TITLE
      }
      return this.systemInfo?.titleEn || 'Refined Management'
    }
  },
  methods: {
    langChange (value) {
      this.$i18n.locale = value
      this.$store.commit('system/SET_LANG', value)
    },
    handleClick ({ id, path }) {
      const version = localStorage.getItem('version') ?? 0
      switch (id) {
        case 1:
          this.$snackbar.info('版本更新时间: ' + timestampToTime(+version, true))
          break
        case 2:
          window.open(path)
          break
        case 3:
          this.$store.dispatch('user/userLogout')
          break
        case 5:
          this.$store.dispatch('menu/getMenu2').then(() => {
            // 刷新
            this.$router.go(0)
          })
          break
        default:
          this.$router.push(path)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.v-btn {
  text-transform: none;
}
.banner {
  z-index: var(--zIndex-nav) !important;
  color: #FFF;
  .left {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
  }
}
.hover:hover {
  cursor: pointer;
  background: rgba(0,0,0,.03);
}
</style>