web-template-vue3-js/src/layout/parts/Header.vue

<template>
  <div id="Header">
    <el-row>
      <el-col :span="24" class="main">
        <div class="left">
          <Breadcrumb></Breadcrumb>
        </div>
        <div class="right">
          <LangSelect class="navbar-item"></LangSelect>
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>{{ $t('navbar.my') }}</el-dropdown-item>
                <el-dropdown-item @click="logout">{{ $t('navbar.logout') }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>
            {{ user && user._id ? user.nick_name : '游客' }}
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { UserStore } from '@/store/user'
import { useTagsViewStore } from '@/store'
const userStore = UserStore()
const tagsViewStore = useTagsViewStore()
const user = computed(() => userStore.user)
const router = useRouter()
// 退出登录
const logout = () => {
  userStore.logOut()
  tagsViewStore.delAllViews()
  router.push('/login')
}
</script>
<style scoped lang="scss">
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  background: #ffffff;

  .left {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .right {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .navbar-item {
      display: inline-block;
      width: 30px;
      height: 50px;
      line-height: 50px;
      color: var(--el-text-color);
      text-align: center;
      cursor: pointer;

      &:hover {
        background: rgb(0 0 0 / 10%);
      }
    }
  }
}</style>