前端代码

2026-08-21 18:42:51 +08:00
parent 054947482f
commit 04e06a9c9a
762 changed files with 62992 additions and 0 deletions
@@ -0,0 +1,95 @@
+<template>
+    <div :class="['sidebar-theme-wrapper', settings.sideTheme]" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+        <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.sideTheme === 'theme-dark' ? '#ffffff' : 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 class="sidebar-collapse-bar" @click="toggleSideBar" :title="isCollapse ? '展开菜单' : '收起菜单'">
+            <hamburger :is-active="sidebar.opened" class="collapse-hamburger" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex"
+import SidebarItem from "./SidebarItem"
+import Hamburger from "@/components/Hamburger"
+import variables from "@/assets/styles/variables.scss"
+
+export default {
+    components: { SidebarItem, Hamburger },
+    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
+        },
+        variables() {
+            return variables
+        },
+        isCollapse() {
+            return !this.sidebar.opened
+        }
+    },
+    methods: {
+        toggleSideBar() {
+            this.$store.dispatch('app/toggleSideBar')
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.sidebar-theme-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .el-scrollbar {
+        flex: 1;
+        min-height: 0;
+    }
+}
+
+.sidebar-collapse-bar {
+    flex-shrink: 0;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #bfcbd9;
+
+    .collapse-hamburger {
+        line-height: 48px;
+        font-size: 18px;
+    }
+}
+
+.sidebar-theme-wrapper.theme-light .sidebar-collapse-bar {
+    color: #909399;
+}
+</style>