| | |
| | | <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> |
| | | <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in"> |
| | | <el-menu |
| | | :default-active="activeMenu as string" |
| | | :default-active="activeMenu" |
| | | :collapse="isCollapse" |
| | | :background-color="bgColor" |
| | | :text-color="textColor" |
| | |
| | | :collapse-transition="false" |
| | | mode="vertical" |
| | | > |
| | | <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" /> |
| | | <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" /> |
| | | </el-menu> |
| | | </transition> |
| | | </el-scrollbar> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import Logo from './Logo.vue' |
| | | import SidebarItem from './SidebarItem.vue' |
| | | 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 { ComponentInternalInstance } from "vue"; |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | import Logo from './Logo.vue'; |
| | | import SidebarItem from './SidebarItem.vue'; |
| | | 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 { RouteRecordRaw } from 'vue-router'; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const route = useRoute(); |
| | | const appStore = useAppStore() |
| | | const settingsStore = useSettingsStore() |
| | | const permissionStore = usePermissionStore() |
| | | |
| | | const sidebarRouters = computed(() => permissionStore.sidebarRouters); |
| | | const appStore = useAppStore(); |
| | | const settingsStore = useSettingsStore(); |
| | | const permissionStore = usePermissionStore(); |
| | | const sidebarRouters = computed<RouteRecordRaw[]>(() => 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 { meta, path } = route; |
| | | // if set path, the sidebar will highlight the path you set |
| | | if (meta.activeMenu) { |
| | | return meta.activeMenu; |
| | | } |
| | | return path; |
| | | }); |
| | | |
| | | const bgColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground); |
| | | const textColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor); |
| | | const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground)); |
| | | const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor)); |
| | | </script> |