index.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div class="vab-header">
  3. <div class="vab-main">
  4. <div class="right-panel">
  5. <vab-logo />
  6. <el-menu
  7. v-if="'horizontal' === layout"
  8. active-text-color="var(--el-menu-color-text)"
  9. background-color="var(--el-menu-background-color)"
  10. :default-active="activeMenu.data"
  11. menu-trigger="hover"
  12. mode="horizontal"
  13. text-color="var(--el-menu-color-text)"
  14. >
  15. <vab-menu v-for="(item, index) in handleRoutes" :key="index + item['name']" :item="item" :layout="layout" />
  16. </el-menu>
  17. <vab-right-tools is-horizontal />
  18. </div>
  19. </div>
  20. </div>
  21. </template>
  22. <script lang="ts" setup>
  23. import { useRoutesStore } from '/@/store/modules/routes'
  24. defineOptions({
  25. name: 'VabHeader',
  26. })
  27. defineProps({
  28. layout: {
  29. type: String,
  30. default: 'horizontal',
  31. },
  32. })
  33. const routesStore = useRoutesStore()
  34. const { getActiveMenu: activeMenu, getRoutes: routes } = storeToRefs(routesStore)
  35. const handleRoutes = computed(() => {
  36. return routes.value.flatMap((route) => (route.meta && route.meta.levelHidden && route.children ? [...route.children] : route))
  37. })
  38. </script>
  39. <style lang="scss" scoped>
  40. .vab-header {
  41. display: flex;
  42. align-items: center;
  43. justify-items: flex-end;
  44. height: var(--el-header-height);
  45. background: var(--el-menu-background-color);
  46. .vab-main {
  47. padding: 0 var(--el-padding) 0 var(--el-padding);
  48. .right-panel {
  49. display: flex;
  50. align-items: center;
  51. justify-content: space-between;
  52. height: var(--el-header-height);
  53. :deep() {
  54. .vab-logo {
  55. width: 360px;
  56. }
  57. .el-sub-menu__icon-more {
  58. margin-right: var(--el-margin) !important;
  59. }
  60. .el-menu {
  61. &.el-menu--horizontal {
  62. width: 100%;
  63. height: 40px;
  64. border: 0;
  65. * {
  66. border: 0;
  67. }
  68. > .el-menu-item {
  69. border-radius: var(--el-border-radius-base);
  70. &.is-active {
  71. background: var(--el-color-primary) !important;
  72. }
  73. }
  74. }
  75. [class*='ri-'] {
  76. margin-left: 0;
  77. }
  78. }
  79. .username,
  80. .username + i {
  81. color: var(--el-color-white);
  82. }
  83. [class*='ri-'] {
  84. margin-left: var(--el-margin);
  85. color: var(--el-color-white);
  86. }
  87. }
  88. }
  89. }
  90. }
  91. </style>
  92. <style>
  93. .el-popper.is-pure.is-light:has(.el-menu--horizontal, .el-menu--popup-container) {
  94. margin-top: calc(var(--el-margin) * 0.4);
  95. }
  96. .el-menu--horizontal {
  97. border: 0;
  98. }
  99. </style>