This commit is contained in:
233
library/components/VabHeader/index.vue
Normal file
233
library/components/VabHeader/index.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script lang="ts" setup>
|
||||
import variables from '@vab/styles/variables/variables.module.scss'
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
|
||||
defineProps({
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'horizontal',
|
||||
},
|
||||
})
|
||||
|
||||
const routesStore = useRoutesStore()
|
||||
const { getActiveMenu: activeMenu, getRoutes: routes } =
|
||||
storeToRefs(routesStore)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vab-header">
|
||||
<div class="vab-main">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<vab-logo />
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="right-panel">
|
||||
<el-menu
|
||||
v-if="'horizontal' === layout"
|
||||
:active-text-color="variables['menu-color-active']"
|
||||
:background-color="variables['menu-background']"
|
||||
:default-active="activeMenu.data"
|
||||
menu-trigger="hover"
|
||||
mode="horizontal"
|
||||
style="width: 100%"
|
||||
:text-color="variables['menu-color']"
|
||||
>
|
||||
<template
|
||||
v-for="(item, index) in routes.flatMap(
|
||||
(route) =>
|
||||
route['meta'] &&
|
||||
route['meta']['levelHidden'] &&
|
||||
route['children']
|
||||
? [...route['children']]
|
||||
: route
|
||||
)"
|
||||
>
|
||||
<vab-menu
|
||||
v-if="
|
||||
item['meta'] && !item['meta']['hidden']
|
||||
"
|
||||
:key="index + item['name']"
|
||||
:item="item"
|
||||
:layout="layout"
|
||||
/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<vab-error-log />
|
||||
<vab-lock />
|
||||
<vab-search />
|
||||
<vab-notice />
|
||||
<vab-full-screen />
|
||||
<vab-language />
|
||||
<vab-theme />
|
||||
<vab-refresh />
|
||||
<vab-avatar />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'sass:math';
|
||||
|
||||
$base-menu-height: 40px;
|
||||
.vab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: flex-end;
|
||||
height: $base-header-height;
|
||||
background: $base-menu-background;
|
||||
|
||||
.vab-main {
|
||||
padding: 0 #{$base-padding} 0 #{$base-padding};
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: $base-header-height;
|
||||
|
||||
:deep() {
|
||||
.el-sub-menu__icon-more {
|
||||
margin-top: #{math.div($base-menu-height - 20, 2)} !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
> .el-menu--horizontal.el-menu {
|
||||
> .el-sub-menu > .el-sub-menu__title {
|
||||
padding-right: 0;
|
||||
|
||||
> .el-sub-menu__icon-arrow {
|
||||
position: relative !important;
|
||||
margin-top: -5px !important;
|
||||
margin-right: 0;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> .el-menu-item {
|
||||
.el-tag {
|
||||
position: relative !important;
|
||||
margin-top: 0 !important;
|
||||
margin-right: -20px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.vab-dot {
|
||||
float: right;
|
||||
margin-top: #{math.div(
|
||||
$base-header-height - 6,
|
||||
2
|
||||
)} +
|
||||
1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.el-tag {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: 0 !important;
|
||||
* {
|
||||
border: 0 !important;
|
||||
}
|
||||
&.el-menu--horizontal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: $base-menu-height;
|
||||
border: 0 !important;
|
||||
|
||||
> .el-menu-item,
|
||||
> .el-sub-menu {
|
||||
height: $base-menu-height;
|
||||
margin-right: 3px;
|
||||
line-height: $base-menu-height;
|
||||
border-radius: 3px;
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
float: right;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
> .el-sub-menu__title {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: $base-menu-height;
|
||||
line-height: $base-menu-height;
|
||||
border: 0 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*='ri-'],
|
||||
.vab-icon {
|
||||
margin-left: 0;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
.vab-icon {
|
||||
margin-top: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu,
|
||||
.el-menu-item {
|
||||
i,
|
||||
.vab-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 0 !important;
|
||||
|
||||
.el-sub-menu__title {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
&.is-active {
|
||||
background: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.user-name + i {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
[class*='ri-'] {
|
||||
margin-left: $base-margin;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
svg {
|
||||
margin-right: 0;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
fill: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user