vue-vite-erp/library/components/VabHeader/index.vue

<template>
  <div class="vab-header">
    <div class="vab-main">
      <div class="right-panel">
        <vab-logo />
        <el-menu
          v-if="'horizontal' === layout"
          active-text-color="var(--el-menu-color-text)"
          background-color="var(--el-menu-background-color)"
          :default-active="activeMenu.data"
          menu-trigger="hover"
          mode="horizontal"
          text-color="var(--el-menu-color-text)"
        >
          <vab-menu v-for="(item, index) in handleRoutes" :key="index + item['name']" :item="item" :layout="layout" />
        </el-menu>
        <vab-right-tools is-horizontal />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoutesStore } from '/@/store/modules/routes'

defineOptions({
  name: 'VabHeader',
})

defineProps({
  layout: {
    type: String,
    default: 'horizontal',
  },
})

const routesStore = useRoutesStore()
const { getActiveMenu: activeMenu, getRoutes: routes } = storeToRefs(routesStore)

const handleRoutes = computed(() => {
  return routes.value.flatMap((route) => (route.meta && route.meta.levelHidden && route.children ? [...route.children] : route))
})
</script>

<style lang="scss" scoped>
.vab-header {
  display: flex;
  align-items: center;
  justify-items: flex-end;
  height: var(--el-header-height);
  background: var(--el-menu-background-color);

  .vab-main {
    padding: 0 var(--el-padding) 0 var(--el-padding);

    .right-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--el-header-height);

      :deep() {
        .vab-logo {
          width: 360px;
        }

        .el-sub-menu__icon-more {
          margin-right: var(--el-margin) !important;
        }

        .el-menu {
          &.el-menu--horizontal {
            width: 100%;
            height: 40px;
            border: 0;

            * {
              border: 0;
            }

            > .el-menu-item {
              border-radius: var(--el-border-radius-base);

              &.is-active {
                background: var(--el-color-primary) !important;
              }
            }
          }

          [class*='ri-'] {
            margin-left: 0;
          }
        }

        .username,
        .username + i {
          color: var(--el-color-white);
        }

        [class*='ri-'] {
          margin-left: var(--el-margin);
          color: var(--el-color-white);
        }
      }
    }
  }
}
</style>

<style>
.el-popper.is-pure.is-light:has(.el-menu--horizontal, .el-menu--popup-container) {
  margin-top: calc(var(--el-margin) * 0.4);
}

.el-menu--horizontal {
  border: 0;
}
</style>