|
|
@@ -1,23 +1,14 @@
|
|
|
<template>
|
|
|
- <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
|
|
|
- <logo v-if="showLogo" :collapse="isCollapse" />
|
|
|
- <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
|
|
|
- <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
|
|
|
- <el-menu
|
|
|
- :default-active="activeMenu"
|
|
|
- :collapse="isCollapse"
|
|
|
- :background-color="bgColor"
|
|
|
- :text-color="textColor"
|
|
|
- :unique-opened="true"
|
|
|
- :active-text-color="theme"
|
|
|
- :collapse-transition="false"
|
|
|
- mode="vertical"
|
|
|
- >
|
|
|
- <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
|
|
|
- </el-menu>
|
|
|
- </transition>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
+ <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
|
|
|
+ <logo v-if="showLogo" :collapse="isCollapse" />
|
|
|
+ <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
|
|
|
+ <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
|
|
|
+ <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="bgColor" :text-color="textColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false" mode="vertical">
|
|
|
+ <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
|
|
|
+ </el-menu>
|
|
|
+ </transition>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
@@ -42,14 +33,22 @@ 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;
|
|
|
+ console.log(route);
|
|
|
+ // if set path, the sidebar will highlight the path you set
|
|
|
+ if (route.name) {
|
|
|
+ console.log(route.name);
|
|
|
+ return (route.path as string).split('-')[0];
|
|
|
+ }
|
|
|
+ return path;
|
|
|
});
|
|
|
-
|
|
|
+// const activeMenu = computed(() => {
|
|
|
+// const { meta, path } = route;
|
|
|
+// // if set path, the sidebar will highlight the path you set
|
|
|
+// if (route.name) {
|
|
|
+// return (route.name as string).split('-')[0];
|
|
|
+// }
|
|
|
+// });
|
|
|
const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
|
|
|
const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
|
|
|
</script>
|