eta_mini_crm_front/src/layout/components/HeaderWrap.vue

<script setup>
import { computed, ref } from 'vue'
import { useLayoutState } from '../hooks/index'
import { useRoute, useRouter } from 'vue-router'

const { menuClose, menuCloseChange } = useLayoutState()

const router=useRouter()
const route=useRoute()
const userName=computed(()=>{
  return localStorage.getItem('userName')
})

const breadcrumbArr=computed(()=>{
  const arr=route.matched
  let temarr=arr.map(item=>{
    return {title:item.meta.title}
  })
  if(arr[1]&&arr[1].meta.from){
    temarr.splice(1,0,{title:arr[1].meta.from,path:arr[1].meta.fromPath})
  }
  return temarr
})
function handleClickBreadcrumb(e){
  const pathTitles = ['客户管理', '系统设置']
  if(e.path){
    router.push(e.path)
  } else if(!pathTitles.includes(e.title) ) {
    window.location.reload();
  }
  // router.push()
}

function handleCommand (command) {
  console.log(command);
  if(command === 'resetpwd') {
    router.push('/system/resetPwd')
  } else {
    ElMessageBox.confirm(
      '确认退出吗?',
      '提示',
      { type: 'warning', }
    ).then(() => {
      localStorage.removeItem('token')
      localStorage.removeItem('userName')
      router.replace('/login')
    }).catch()
  }
}
</script>

<template>
  <div class="flex header-wrap">
    <!-- <img src="@/assets/imgs/logo.png" alt="" class="logo-img"> -->
    <!-- 折叠按钮 -->
    <el-icon size="26px" v-if="menuClose" @click="menuCloseChange" color="#333333" style="margin-left: 100px;"
      ><i-ep-Expand
    /></el-icon>
    <el-icon size="26px" v-else @click="menuCloseChange" color="#333333" style="margin-left: 200px;"><i-ep-Fold /></el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="margin-left: 30px">
      <el-breadcrumb-item v-for="item,index in breadcrumbArr" :key="index" @click="handleClickBreadcrumb(item)">
        <span  :style="index > 0 ? 'color: #053CC9;' : ''">{{item.title}}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content"></div>
    <!-- 通知 -->
    <el-dropdown placement="bottom" trigger="click" :width="100" @command="handleCommand">
      <div :class="['system-notice-box']">
        <!-- 哈喽 {{ userName }}, 欢迎您！ -->
        <img src="@/assets/imgs/avatar.png" alt="">
        <div>{{ userName }}</div>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="resetpwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.header-wrap {
  position: fixed;
  left: 0px;
  top: 0;
  right: 0;
  height: 60px;
  z-index: 50;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  padding: 0 30px 0 0;
  align-items: center;
  .logo-img{
    width: 140px;
    display: block;
    margin-left: 20px;
    margin-right: 40px;
  }

  .content {
    flex: 1;
  }
  .system-notice-box{
    display: flex;
    align-items: center;
    img {
      width: 28px;
      height: 28px;
      margin-right: 10px;
    }
  }
}
</style>