eta_forum_admin_front/src/layout/components/HeaderWrap.vue

<script setup>
import { useLayoutState } from '../hooks/index'
import { useRoute, useRouter } from 'vue-router'
import {useUserInfo} from '@/hooks/userInfo'
const {getUserInfo, userInfo} =useUserInfo()
getUserInfo()


const { menuClose, menuCloseChange } = useLayoutState()

const router=useRouter()
const route=useRoute()


const breadcrumbArr=computed(()=>{
  const arr=route.matched
  let temarr=arr.map(item=>{
    return {title:item.meta.title}
  })
  if(arr[1]&&arr[1].meta.pathName){
    temarr.splice(1,0,{title:arr[1].meta.pathName,path:arr[1].meta.pathFrom})
  }
  if(arr[1]){
    if(['消息推送管理','客户反馈','图片资源库'].includes(arr[1].meta.title)){
        return [{title:arr[1].meta.title}]
    }
  }
  return temarr
})
function handleClickBreadcrumb(e){
  // console.log(e);
  if(e.path){
    router.push(e.path)
  }else{
    window.location.reload();
  }
  // router.push()
}

</script>

<template>
  <div class="flex header-wrap">
    <img src="@/assets/imgs/logo.png" alt= "" class="logo-img">
    <div class="flex content">
      <!-- 折叠按钮 -->
      <t-icon size="20px" :name="menuClose?'menu-fold':'menu-unfold'" @click="menuCloseChange"></t-icon>
      
      <!-- 面包屑 -->
      <t-breadcrumb separator="/" style="margin-left: 30px">
        <template #default>
          <t-breadcrumb-item v-for="item,index in breadcrumbArr" :key="index" @click="handleClickBreadcrumb(item)">{{
            item.title
          }}</t-breadcrumb-item>
        </template>
      </t-breadcrumb>
      <!-- 用户信息 -->
      <div class="flex system-user-box">
        <span class="icon">弘则</span>
        <span>{{ userInfo?.RealName }}</span>
        <span>，欢迎您</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-wrap {
  position: fixed;
  left: 0px;
  top: 0;
  right: 0;
  height: 66px;
  z-index: 50;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px #0000001A;
  padding: 0 20px 0 0;
  align-items: center;
  color: #333;
  .logo-img{
    width: 200px;
    display: block;
  }

  .content {
    flex: 1;
    padding-left: 16px;
    align-items: center;
    .t-breadcrumb__item{
      color: #333;
    }
    .t-breadcrumb__item:last-child{
      color: var(--td-brand-color);
    }
  }
  .system-user-box{
    margin-left: auto;
    align-items: center;
    .icon{
      display: block;
      background-color: var(--td-brand-color);
      color: #fff;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      border-radius: 50%;
      font-size: 12px;
    }
    
  }
}
</style>