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

<template>
  <header class="header-bar">
    <span ></span>
    <span>
      <slot name="header-user">
        <el-dropdown @command="handleCommand">
          <span class="account-name">{{accountInfo.userName}} <i class="el-icon-arrow-down"></i></span>
          <template #dropdown>
            <el-dropdown-menu>
              <slot name="pre-dropdown"></slot>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
              <slot name="dropdown" />
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </slot>
    </span>
  </header>
</template>
<script>

import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
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: {
    ElDropdown, ElDropdownMenu, ElDropdownItem
  },
  setup () {
    // 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: space-between;
    padding: 0 12px;
    margin-left: auto;
  }
  .account-name{
    cursor: pointer;
    font-weight: bold;
  }
}
</style>