shop-back/src/layout/header.vue

<template>
  <a-layout-header class="header-layout">
    <div class="content-layout">
      <h2><img :src="logoPng" /></h2>

      <a-dropdown placement="bottomRight">
        <template #overlay>
          <a-menu style="width: 100px" @click="handlerMenuClick">
            <a-menu-item v-for="menu in menus" :key="menu.key">
              {{ menu.label }}
            </a-menu-item>
          </a-menu>
        </template>
        <div class="avatar">
          <a-avatar :size="32">
            <template #icon>
              <img :src="userStore.current.avatar" />
            </template>
          </a-avatar>
          <span>
            {{ userStore.current.nickname }}
            <DownOutlined />
          </span>
        </div>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<script lang="ts" setup>
import { MenuProps } from 'ant-design-vue'
import { useUserStore } from '@/store'
import { postLogout } from '@/api'
import { mainURL } from '@/env'
import logoPng from '@/assets/images/logo.png'

defineOptions({ name: 'LayoutHeader' })

const userStore = useUserStore()
userStore.fetch()

const menus = [
  { label: '个人中心', key: 'user' },
  { label: '退出', key: 'logout' }
]
const handlerMenuClick: MenuProps['onClick'] = async e => {
  if (e.key === 'logout') {
    await postLogout()
    location.replace(mainURL)
  } else {
    location.href = `${mainURL}/#/information`
  }
}
</script>

<style lang="scss" scoped>
.header-layout {
  background-color: #fff;
  display: flex;
  padding: 0;

  h2 {
    margin: 0;
    img {
      width: 130px;
    }
  }
}

.content-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
  > span {
    margin-left: 8px;
  }
}
</style>