177 lines
3.8 KiB
Vue
177 lines
3.8 KiB
Vue
<!-- Sidebar.vue -->
|
|
<template>
|
|
<div class="index">
|
|
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
|
|
<!-- logo -->
|
|
<Logo v-if="showLogo" :collapse="isCollapse" />
|
|
<!-- 菜单 -->
|
|
<happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
|
|
<el-menu
|
|
:collapse="isCollapse"
|
|
:background-color="variables.menuBg"
|
|
:text-color="variables.menuText"
|
|
:unique-opened="true"
|
|
:active-text-color="variables.menuActiveText"
|
|
:collapse-transition="false"
|
|
:default-active="activeMenu"
|
|
mode="vertical"
|
|
class="el-menu-vertical"
|
|
>
|
|
<sidebar-item
|
|
v-for="(route, index) in permissionRoutes"
|
|
:key="route.path + index"
|
|
:item="route"
|
|
:base-path="route.path"
|
|
:is-collapse="isCollapse"
|
|
/>
|
|
</el-menu>
|
|
</happy-scroll>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import SidebarItem from "./SidebarItem.vue";
|
|
import variables from "@/styles/variables.scss";
|
|
import Logo from "./Logo.vue";
|
|
|
|
export default {
|
|
name: "Sidebar",
|
|
components: { SidebarItem, Logo },
|
|
computed: {
|
|
...mapGetters(["permission_routes", "sidebar", "userType", "orgType"]),
|
|
|
|
showLogo() {
|
|
return true;
|
|
},
|
|
|
|
variables() {
|
|
return variables;
|
|
},
|
|
|
|
isCollapse() {
|
|
return !this.sidebar.opened;
|
|
},
|
|
|
|
permissionRoutes() {
|
|
const routes = this.permission_routes || [];
|
|
return routes;
|
|
},
|
|
|
|
activeMenu() {
|
|
const route = this.$route;
|
|
const { meta, path } = route;
|
|
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu;
|
|
}
|
|
|
|
return path;
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
console.log("Sidebar mounted - 权限路由:", this.permissionRoutes);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.index {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
|
|
.sidebar-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.menu-scroll-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
|
|
::v-deep .happy-scroll-container {
|
|
width: 100% !important;
|
|
min-width: unset !important;
|
|
|
|
.happy-scroll-content {
|
|
width: 100%;
|
|
min-width: unset !important;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 重点修改部分 - 更具体的选择器
|
|
::v-deep .el-menu-vertical {
|
|
border: none;
|
|
height: 100%;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
box-sizing: border-box;
|
|
|
|
.el-submenu__title,
|
|
.el-menu-item {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
// 子菜单容器
|
|
.el-menu--inline {
|
|
// 子菜单项
|
|
.el-menu-item {
|
|
// 激活的子菜单项
|
|
&.is-active {
|
|
background-color: #d7dafd !important;
|
|
color: #296ad9 !important;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background-color: #296ad9;
|
|
}
|
|
}
|
|
|
|
// 非激活状态的悬停效果
|
|
&:not(.is-active):hover {
|
|
background-color: #f5f7fa !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 折叠状态
|
|
::v-deep .el-menu--collapse {
|
|
width: 64px !important;
|
|
min-width: 64px !important;
|
|
|
|
.el-submenu__title,
|
|
.el-menu-item {
|
|
text-overflow: clip;
|
|
justify-content: center;
|
|
}
|
|
|
|
// 折叠状态下的子菜单激活样式
|
|
.el-menu--popup {
|
|
.el-menu-item {
|
|
&.is-active {
|
|
background-color: #d7dafd !important;
|
|
color: #296ad9 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|