ReptileFront/components/Header/Index.vue

<template>
  <el-header height="100px"
             :class="[prefixCls, 'flex', 'justify-between', store.getMenuTheme === 'dark'? 'is-host' : 'is-white']">
    <ApplicationAppLogo/>
    <el-menu
      :default-active="$route.meta.parentPath || $route.path"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      router
    >
      <el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path"
                    :key="item.path">{{ item.name }}
      </el-menu-item>
    </el-menu>

    <div class="login-action-wrap">
      <div class="login-btn cursor-pointer" v-if="!token" @click="setLoginVisible(true)">登录</div>
      <el-dropdown popper-class="login-popper" @command="handleCommand" v-else trigger="click">
        <div class="el-dropdown-link text-xl" style="line-height: 100px;">
      {{ userInfo.mobile }}
      <el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon>
    </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="0">OCR识别</el-dropdown-item>
            <el-dropdown-item command="1">优化翻译</el-dropdown-item>
            <el-dropdown-item command="2">翻译文本</el-dropdown-item>
            <el-dropdown-item command="3">翻译文件</el-dropdown-item>
            <el-dropdown-item command="4">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup lang="ts">


const {prefixCls} = useDesign('header-wrap')
const route = useRoute()
const router = useRouter();
const routes = ref(router.getRoutes().filter(it => !it.meta.hidden));
//@ts-ignore
routes.value.sort((a, b) => a.meta.order - b.meta.order);
const activeRoute = ref(route.path)
const store = useAppStore()
const {setLoginVisible, setInfo, setToken} = useUserInfo()
const token = computed(() => useUserInfo().$state.token);
const userInfo = ref()

function handleCommand(command:string) {
  if (command === '4') {
    ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        setInfo({})
        setToken('')
        ElNotification.success('已退出登录')
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消退出登录',
        })
      })
  }
}


watchEffect(()=>{
  console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info)
  userInfo.value = useUserInfo().$state.info;
})


function handleChange(val: any) {
  activeRoute.value = val.path;
  if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
    store.setMenuTheme('dark')
  } else {
    store.setMenuTheme('light')
  }
}

watch(() => route, (val) => {
  activeRoute.value = val.path;
  if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
    store.setMenuTheme('dark')
  } else {
    store.setMenuTheme('light')
  }
}, {deep: true})

watchEffect(() => {
  handleChange(route)
})
</script>

<style scoped lang="scss">
$prefix-cls: '#{$name-prefix}-header-wrap';
.#{$prefix-cls} {
  z-index: 1;
  @apply relative;
  :deep(.el-menu) {
    @apply bg-transparent;
    border-bottom: unset;

    .el-menu-item {
      border-bottom: unset;
      //font-size: 20px;
      transition: font-size .5s;
      background-color: unset;
      @apply relative text-xl;
      &:after {
        content: '';
        width: 50%;
        height: 8px;
        border-radius: 5px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        @apply bg-transparent absolute;
      }

      &:hover {
        color: unset;
      }

      &.is-active {
        color: #333 !important;
        @apply font-bold text-2xl;
        &:after {
          @apply bg-black;
        }
      }
    }
  }

  &.is-host {
    :deep(.el-menu) {
      .el-menu-item {
        color: $white !important;

        &:hover {
          color: unset;
        }

        &.is-active {
          &:after {
            @apply bg-white;
          }
        }
      }
    }

    :deep(.yangliu-app-logo__title) {
      color: $white;
    }
  }

  //height: 100px;
}

.login-btn {
  line-height: 100px;
  font-size: 20px;
  font-weight: 400;
  //@apply ;
}
.login-action-wrap {
  padding-right: 30px;
}
.is-host {
  * {
    color: $white;
  }
}
</style>
<style lang="scss">
.login-popper {

  .el-dropdown-menu {
    @apply  shadow-2xl;
    padding: 0 0;
  }
  .el-dropdown-menu__item {
    width: 176px;
    padding: 20px 0;
    text-align: center;
    line-height: 1;
    //border-bottom: 1px solid #eee;
    @apply text-base block relative;
    &:after{
      content: '';
      position: absolute;
      height: 1px;
      background-color: #eee;
      left: 12px;
      right: 12px;
      bottom: 0;
    }
    &:last-of-type:after {
      height: 0;
    }
  }
}
</style>