tall4-pc/src/components/tall/top/TopNavbar.vue

<template>
  <div class="flex justify-between items-center">
    <h1 class="">
      <span>实验平台</span>
      <menu-unfold-outlined v-if="collapsed" @click="toggleCollapse" />
      <menu-fold-outlined v-else class="trigger" @click="toggleCollapse" />
    </h1>
    <div class="user-info relative flex items-center cursor-pointer">
      <a-image :width="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
      <div class="mr-3 ml-3">{{ account }}</div>
      <CaretDownOutlined />

      <div class="user-action absolute">
        <div @click="signOut">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
// eslint-disable-next-line import/no-extraneous-dependencies
import { MenuUnfoldOutlined, MenuFoldOutlined, CaretDownOutlined } from '@ant-design/icons-vue';

const store = useStore();
const router = useRouter();
const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏
const account = computed(() => store.getters['user/account']);

// toggle left window display
function toggleCollapse() {
  store.commit('layout/setDisplay', { prop: 'left', show: !collapsed.value });
}

// 退出登录
function signOut() {
  store.commit('user/setUser', null);
  store.commit('projects/setProject', null);
  store.commit('task/setTaskDetail', null);
  router.push({ path: '/experiment/user/signin' });
}
</script>

<style scoped>
h1 {
  margin: 0;
}

h1 span {
  font-size: 16px;
  font-weight: 600;
  margin-right: 10px;
}

.user-info {
  height: 48px;
}

.user-action {
  display: none;
  top: 48px;
  right: 0;
  width: 150px;
  text-align: center;
  box-shadow: 0px 0 6px 0px rgba(0, 0, 0, 0.3);
  background-color: #fff;
}

.user-info:hover .user-action {
  display: block;
}
</style>