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="defaultActive"
      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 flex items-center">
      <!--  首页展示搜索按钮    -->
      <el-popover popper-class="search-popper" v-if="activeRoute === '/'" placement="bottom-end"
                  :width="434" trigger="click">
        <template #reference>
          <el-icon>
            <el-icon-search/>
          </el-icon>
        </template>
        <div>
          <el-input
            @keydown.enter="handleSearch"
            v-model="keyword"
            placeholder="请输入关键字"
            :suffix-icon="ElIconSearch"
          />
        </div>
      </el-popover>
      <el-divider v-if="activeRoute === '/'" direction="vertical"
                  style="border-left: 1px solid #000"/>

      <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="4">OCR识别</el-dropdown-item>
            <el-dropdown-item command="3">优化翻译</el-dropdown-item>
            <el-dropdown-item command="1">翻译文本</el-dropdown-item>
            <el-dropdown-item command="2">翻译文件</el-dropdown-item>
            <el-dropdown-item command="5">退出登录</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()
const keyword = ref('')
const defaultActive = computed((): string => {
  // const routes = ['index', 'inform', 'rules', 'warning', 'tptsps', 'case', 'comment', 'about']

  if (!route.meta.parentPath && route.path.includes('search')) {
    return ('/' + (route.params.id === 'index' ? '' : route.params.id)) as unknown as string
  } else {
    return (route.meta.parentPath || route.path) as unknown as string
  }

})

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

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

function handleSearch() {
  store.setSearchVal(keyword.value)
  if (keyword.value) {
    router.push({
      path: '/search/index',
      query: {
        keywords: keyword.value
      }
    })
  }

}

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

watchEffect(() => {
  console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info)
  userInfo.value = useUserInfo().$state.info;
})
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;
      padding: 0 17px;
      //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 ;
}

.is-host {
  * {
    color: $white;
  }
}
</style>
<style lang="scss">
.login-popper.el-dropdown__popper.el-popper {
  border-radius: 8px;
  box-shadow: 0 2px 11px 4px rgba(202, 202, 202, 0.5);

  .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;
    }
  }

  .el-popper__arrow {
    @apply hidden;
  }
}

.search-popper.el-popper {
  margin-top: 20px;
  padding: 0;
  background: unset;
  border-radius: 30px;
  height: 56px;
  border: none;

  .el-popper__arrow {
    display: none;
  }

  .el-input {
    height: 100%;
    margin: 0;
    border-radius: 30px;
    font-size: 20px;
  }

  .el-input__wrapper {
    padding: 0 30px;
    height: 56px;
    border-radius: 30px;
    border: none;
    box-shadow: unset;

    .el-input__inner {
      height: 56px;
      box-shadow: unset;
      line-height: 56px;
    }

    .el-icon {
      color: #134A9B;
    }
  }
}
</style>