cmdb/cmdb-ui/src/components/tools/UserMenu.vue

<template>
  <div class="user-wrapper">
    <div class="content-box">
      <!-- <document-link /> -->
      <span
        v-if="hasBackendPermission"
        @click="handleClick"
        class="common-settings-btn"
      >
        <ops-icon class="common-settings-btn-icon" type="veops-setting" />
        <span class="common-settings-btn-text">{{ $t('settings') }}</span>
      </span>
      <span class="locale" @click="changeLang">{{ locale === 'zh' ? '简中' : 'EN' }}</span>
      <a-popover
        trigger="click"
        :overlayStyle="{ width: '150px' }"
        placement="bottomRight"
        overlayClassName="custom-user"
      >
        <template slot="content">
          <router-link :to="{ name: 'setting_person' }" :style="{ color: '#000000a6' }">
            <div class="custom-user-item">
              <a-icon type="user" :style="{ marginRight: '10px' }" />
              <span>{{ $t('topMenu.personalCenter') }}</span>
            </div>
          </router-link>
          <div @click="handleLogout" class="custom-user-item">
            <a-icon type="logout" :style="{ marginRight: '10px' }" />
            <span>{{ $t('topMenu.logout') }}</span>
          </div>
        </template>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar
            v-if="avatar()"
            class="avatar"
            size="small"
            :src="avatar().startsWith('https') ? avatar() : `/api/common-setting/v1/file/${avatar()}`"
          />
          <a-avatar v-else class="avatar" size="small" icon="user" />
          <span>{{ nickname() }}</span>
        </span>
      </a-popover>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
import DocumentLink from './DocumentLink.vue'
import { setDocumentTitle, domTitle } from '@/utils/domUtil'

export default {
  name: 'UserMenu',
  components: {
    DocumentLink,
  },
  computed: {
    ...mapState(['user', 'locale']),
    hasBackendPermission() {
      const isAdmin = this?.user?.roles?.permissions?.includes('acl_admin')

      return isAdmin || this.user?.detailPermissions?.backend?.length
    },
  },
  methods: {
    ...mapActions(['Logout']),
    ...mapGetters(['nickname', 'avatar']),
    ...mapMutations(['SET_LOCALE']),
    handleLogout() {
      const that = this

      this.$confirm({
        title: this.$t('tip'),
        content: this.$t('topMenu.confirmLogout'),
        onOk() {
          return that.Logout()
        },
        onCancel() {},
      })
    },
    handleClick() {
      this.$router.push('/setting')
    },
    changeLang() {
      if (this.locale === 'zh') {
        this.SET_LOCALE('en')
        this.$i18n.locale = 'en'
      } else {
        this.SET_LOCALE('zh')
        this.$i18n.locale = 'zh'
      }
      this.$nextTick(() => {
        setDocumentTitle(`${this.$t(this.$route.meta.title)} - ${domTitle}`)
      })
    },
  },
}
</script>

<style lang="less">
.color {
  color: @primary-color;
  background-color: @primary-color_5;
}
.custom-user {
  .custom-user-item {
    cursor: pointer;
    padding: 5px 10px;
    &:hover {
      .color() !important;
    }
  }
  .ant-popover-inner-content {
    padding: 0;
    color: #000000a6;
  }
}

.locale {
  cursor: pointer;
  padding: 0 8px;

  &:hover {
    color: @primary-color;
  }
}
</style>

<style lang="less" scoped>
.user-wrapper {
  .common-settings-btn {
    cursor: pointer;
    padding: 0px 18px;
    background-color: #F0F5FF;
    border-radius: 22px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;

    &-icon {
      font-size: 12px;
      color: #2F54EB;
    }

    &-text {
      margin-left: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #4E5969;
    }
  }
}
</style>