fs-admin/src/components/GlobalHeader.vue

<script setup lang="ts">
import { useMenuStore } from '@/stores/menu'
import { useUserStore } from '@/stores/user'
import config from '@/config/defaultSetting'
import avatar from '@/assets/images/avatar.png'
import { ElMessageBox } from 'element-plus'

const iconSize = ref('22')

// 菜单收缩展开切换
const menuStore = useMenuStore()
const [value, toggle] = useToggle()
const handleToggle = () => {
  toggle()
  menuStore.setCollapse(value.value)
}

// 面包屑
const route = useRoute()
const matched = computed(() => route.matched)

// 全屏切换
const { toggle: toggleScreen, isFullscreen } = useFullscreen()

// 用户信息
const userStore = useUserStore()
const user: any = userStore.user

const logout = () => {
  ElMessageBox.confirm('您确定要退出登录吗', '提示', {
    type: 'info',
    closeOnClickModal: false,
    confirmButtonText: '确定'
  }).then(() => {
    userStore.logout()
  })
}

// 主题设置
const settingVisible = ref(false)
</script>

<template>
  <header class="layout-header">
    <div class="logo flex items-center justify-center" :class="{ collapse: value }">
      <img :src="config.logo" class="h-36px" />
      <div class="ml-2" :class="{ hidden: value }">{{ config.title }}</div>
    </div>
    <div class="flex flex-grow items-center justify-between px-4">
      <el-space :size="20">
        <el-button link @click="handleToggle">
          <icon-menu-unfold-one :size="iconSize" v-if="!value" />
          <icon-menu-fold-one :size="iconSize" v-else />
        </el-button>
        <el-breadcrumb class="breadcrumb">
          <el-breadcrumb-item v-for="item in matched.slice(1, matched.length)" :key="item.path">
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-space>
      <div class="flex items-center">
        <el-button link @click="toggleScreen">
          <icon-off-screen :size="iconSize" v-if="isFullscreen" />
          <icon-full-screen :size="iconSize" v-else />
        </el-button>
        <el-button link class="mr-4" @click="settingVisible = true">
          <icon-setting-two :size="iconSize" />
        </el-button>
        <el-avatar class="mr-10px" :src="user.photo">
          <img :src="avatar" alt="" />
        </el-avatar>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ user.name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-icon><icon-setting-two></icon-setting-two></el-icon>
                <div>个人设置</div>
              </el-dropdown-item>
              <el-dropdown-item @click="logout">
                <el-icon><icon-logout></icon-logout></el-icon>
                <div>退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <GlobalSetting v-model="settingVisible"></GlobalSetting>
  </header>
</template>

<style scoped lang="scss">
.layout-header {
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo {
    width: var(--menu-width);
  }
  .collapse {
    width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
  }
}
.hidden {
  display: none;
}
</style>