139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
|
<div
|
|
:class="{ 'has-logo': showLogo }"
|
|
:style="{
|
|
backgroundColor:
|
|
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
|
|
}"
|
|
class="sidebar-layout"
|
|
>
|
|
<!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
|
|
<el-menu
|
|
:default-active="activeMenu"
|
|
:collapse="isCollapse"
|
|
:background-color="
|
|
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
|
|
"
|
|
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
|
:unique-opened="true"
|
|
:active-text-color="theme"
|
|
:collapse-transition="false"
|
|
mode="horizontal"
|
|
>
|
|
<sidebar-item
|
|
v-for="(route, index) in sidebarRouters"
|
|
:key="route.path + index"
|
|
:item="route"
|
|
:base-path="route.path"
|
|
/>
|
|
</el-menu>
|
|
<navbar @setLayout="setLayout" class="navbar-container" />
|
|
<settings ref="settingRef" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Logo from './Logo';
|
|
import SidebarItem from './SidebarItem';
|
|
import variables from '@/assets/styles/variables.module.scss';
|
|
import useAppStore from '@/store/modules/app';
|
|
import useSettingsStore from '@/store/modules/settings';
|
|
import usePermissionStore from '@/store/modules/permission';
|
|
import { computed, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { Navbar, Settings } from '@/layout/components';
|
|
|
|
import defaultSettings from '@/settings';
|
|
const route = useRoute();
|
|
const appStore = useAppStore();
|
|
const settingsStore = useSettingsStore();
|
|
const permissionStore = usePermissionStore();
|
|
|
|
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
|
|
const showLogo = computed(() => settingsStore.sidebarLogo);
|
|
const sideTheme = computed(() => settingsStore.sideTheme);
|
|
const theme = computed(() => settingsStore.theme);
|
|
const isCollapse = computed(() => !appStore.sidebar.opened);
|
|
|
|
const activeMenu = computed(() => {
|
|
const { meta, path } = route;
|
|
// if set path, the sidebar will highlight the path you set
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu;
|
|
}
|
|
return path;
|
|
});
|
|
const settingRef = ref(null);
|
|
function setLayout() {
|
|
settingRef.value.openSetting();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 移除滚动条样式 */
|
|
|
|
.el-menu--horizontal {
|
|
display: flex !important;
|
|
border-bottom: none !important;
|
|
background-color: transparent !important;
|
|
min-width: auto;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden !important;
|
|
white-space: nowrap;
|
|
|
|
& > .el-menu-item,
|
|
& > .el-sub-menu {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
color: #fff;
|
|
padding: 0 15px !important;
|
|
font-size: 14px;
|
|
min-width: auto !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:deep(.svg-icon) {
|
|
margin-right: 8px !important;
|
|
font-size: 14px;
|
|
}
|
|
|
|
:deep(.el-sub-menu__title) {
|
|
padding-right: 25px !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:deep(.el-sub-menu__icon-arrow) {
|
|
right: 8px !important;
|
|
}
|
|
|
|
:deep(.menu-title) {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* 水平布局，并与 Navbar 正确配合 */
|
|
.sidebar-layout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 50px;
|
|
padding: 0;
|
|
width: 100%;
|
|
|
|
& > .el-menu {
|
|
flex: 1;
|
|
height: 50px;
|
|
min-width: 0;
|
|
}
|
|
|
|
&.has-logo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 50px;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|