menduner/src/layout/teacher/navBar.vue

<template>
  <div>
    <v-toolbar class="banner font-size-14 pl-0" density="compact" style="height: 50px;">
      <div class="innerBox d-flex justify-space-between">
        <div class="nav-logo" style="cursor: pointer;" @click="handleLogoClick">
          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" contain :width="97" style="height: 40px"></v-img>
        </div>
        
        <div class="d-flex user-nav align-center">
          
          <!-- 头像用户名 -->
          <div class="d-flex align-center" v-if="showBall">
            <v-menu open-on-hover>
              <template v-slot:activator="{ props }">
                <div class="d-flex ml-3 pl-2 align-center cursor-pointer" v-bind="props">
                  <v-avatar>
                    <v-img alt="" :src="getUserAvatar(schoolInfo?.avatar, schoolInfo?.sex)"></v-img>
                  </v-avatar>
                  <div class="ml-2 commonHover">
                    {{ formatName(schoolInfo?.school?.name) + ' - ' + schoolInfo?.name ?? schoolInfo?.phone }}
                  </div>
                </div>
              </template>

              <v-list>
                <v-list-item v-for="(item, index) in menuList" :key="index" @click="item.change">
                  <template v-slot:prepend>
                    <v-icon :icon="item.icon"></v-icon>
                  </template>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>
        </div>
      </div>
    </v-toolbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getToken } from '@/utils/auth'
import { useUserStore } from '@/store/user'; const userStore = useUserStore()
import { useRouter } from 'vue-router'; const router = useRouter()
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
import { getUserAvatar } from '@/utils/avatar'
import { formatName } from '@/utils/getText';
defineOptions({ name: 'teacher-navbar' })

defineProps({
  sticky: {
    type: Boolean,
    default: true
  }
})

const showBall = ref(false)

onMounted(() => {
  if (getToken()) {
    showBall.value = true
  }
})

const handleLogoClick = () => { window.open('/recruitHome') } // 点击logo

// 退出登录
const handleLogout = async () => {
  await userStore.userLogout(1)
  router.push({ path: '/flame' })
}

const menuList = ref([
  { title: t('setting.logOut'), icon: 'mdi-logout', change: handleLogout }
])

// 学校信息
let schoolInfo = ref(JSON.parse(localStorage.getItem('schoolInfo')) || {})

userStore.$subscribe((mutation, state) => {
  if (Object.keys(state.schoolInfo).length) schoolInfo.value = state.schoolInfo
})

</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 50px;
  z-index: var(--zIndex-nav) !important;
  color: #fff;
  background-color: var(--color-d5e6e8);
  padding-left: 0px;
  height: 50px;
  font-size: 15px;
}
.hover:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.03);
}
.innerBox {
  position: relative;
  width: 100%;
  align-items: center;
  padding: 0 30px;
}
.nav-logo {
  float: left;
}
.nav {
  font-size: 0;
  float: left;
  margin-left: 50px;
  height: 49px;
  line-height: 49px;
}
.user-nav {
  color: var(--color-333);
  font-size: 15px;
}
</style>