cip-components/main/header-bar/index.vue

<template>
  <header class="header-bar">
      <slot name="header-plugin"></slot>
      <slot name="header-user">
        <div class="header-user">
        <cip-dropdown @command="handleCommand" :disabled="!($slots.dropdown || $slots['pre-dropdown'])">
          <cip-avatar size="small"/>
          <span class="account-name">{{accountInfo.userName}} </span>
          <template #dropdown>
            <el-dropdown-menu>
              <slot name="pre-dropdown"></slot>
              <slot name="dropdown" />
            </el-dropdown-menu>
          </template>
        </cip-dropdown>
        <span class="header-bar__logout" @click="()=>handleCommand('logout')">退出</span>
        </div>
      </slot>
  </header>
</template>
<script>

import { ElDropdownMenu } from 'element-plus'
import CipDropdown from '../../cip-dropdown'
import CipAvatar from '../../cip-avatar'
import { computed } from 'vue'
import { Token } from '@/lib/token'
import { useRouter } from 'vue-router'
// import { accountService } from '@/api'
import store from '../../store'
import { useCipConfig } from '@cip/components/hooks/use-cip-config'

export default {
  name: 'CipHeaderBar',
  components: {
    CipDropdown, CipAvatar, ElDropdownMenu
  },
  setup (props, { slots }) {
    // const store = useStore()
    const cipConfig = useCipConfig()
    const router = useRouter()
    const accountInfo = computed(() => {
      return store.state.accountInfo || {}
    })
    const handleCommand = (command) => {
      if (command === 'logout') {
        if (cipConfig.logout) {
          cipConfig.logout()
        } else {
          Token.remove()
          location.href = `${router.options.history.base}/login`
        }
      }
    }
    return { accountInfo, handleCommand }
  }
}
</script>
<style lang="less">
.main-framework__header{
  .header-bar{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 32px 0 64px;
    margin-left: auto;
  }
  .account-name{
    cursor: pointer;
    margin-left: 8px;
    //font-weight: bold;
  }
  .header-user{
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 100%;
    .@{elNamespace}-dropdown{
      height: 100%;
    }
    .header-bar__logout{
      padding-left: 12px;
      margin-left: 12px;
      border-left: 1px solid transparent;
      line-height: 1em;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>