wash_server_v2/admin-ui/src/layout/components/Sidebar/index.vue

<template>
    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
        <logo v-if="showLogo" :collapse="isCollapse" />
        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
            <el-menu
                :default-active="activeMenu"
                :collapse="isCollapse"
                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                :unique-opened="true"
                :active-text-color="settings.theme"
                :collapse-transition="false"
                mode="vertical"
            >
                <sidebar-item
                    v-for="(route, index) in sidebarRouters"
                    :key="route.path  + index"
                    :item="route"
                    :base-path="route.path"
                />
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";

export default {
    components: { SidebarItem, Logo },
    computed: {
        ...mapState(["settings"]),
        ...mapGetters(["sidebarRouters", "sidebar"]),
        activeMenu() {
            const route = this.$route;
            const { meta, path } = route;
            // if set path, the sidebar will highlight the path you set
            if (meta.activeMenu) {
                return meta.activeMenu;
            }
            return path;
        },
        showLogo() {
            return this.$store.state.settings.sidebarLogo;
        },
        variables() {
            return variables;
        },
        isCollapse() {
            return !this.sidebar.opened;
        }
    },

    created() {
    }
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.scrollbar-wrapper {
    height: calc(100% - 50px);
    .menu-wrapper {
        display: flex;
        height: 100%;

        .menu-main {
            width: $base-sidebar-width;
            border-right: 1px solid #dcdfe6;

            .el-menu {
                border-right: none;
            }
        }

        .menu-sub {
            width: $base-sidebar-width;
            border-right: 1px solid #dcdfe6;
            background-color: #fff;

            .el-menu {
                border-right: none;
            }
        }
    }
}

// 处理折叠状态
.el-menu--collapse {
    width: 54px !important;
}

:deep(.el-scrollbar__wrap) {
    overflow-x: hidden !important;
}

// 优化菜单项样式
.el-menu-item {
    display: flex;
    align-items: center;

    .svg-icon {
        margin-right: 10px;
    }
}
</style>