diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index f61bc98..a7ee74c 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -24,44 +24,42 @@ const props = defineProps({ } }) -const alwaysShowRootMenu = computed(() => { - return props.item.meta && props.item.meta.alwaysShow +/** 是否始终显示根菜单 */ +const alwaysShowRootMenu = computed(() => props.item.meta?.alwaysShow) + +/** 显示的子菜单 */ +const showingChildren = computed(() => { + return props.item.children?.filter((child) => !child.meta?.hidden) ?? [] }) +/** 显示的子菜单数量 */ const showingChildNumber = computed(() => { - if (props.item.children) { - const showingChildren = props.item.children.filter((item) => { - return !(item.meta && item.meta.hidden) - }) - return showingChildren.length - } - return 0 + return showingChildren.value.length }) +/** 唯一的子菜单项 */ const theOnlyOneChild = computed(() => { - if (showingChildNumber.value > 1) { - return null + const number = showingChildNumber.value + switch (true) { + case number > 1: + return null + case number === 1: + return showingChildren.value[0] + default: + return { ...props.item, path: "" } } - if (props.item.children) { - for (const child of props.item.children) { - if (!child.meta || !child.meta.hidden) { - return child - } - } - } - // If there is no children, return itself with path removed, - // because this.basePath already contains item's path information - return { ...props.item, path: "" } }) +/** 解析路径 */ const resolvePath = (routePath: string) => { - if (isExternal(routePath)) { - return routePath + switch (true) { + case isExternal(routePath): + return routePath + case isExternal(props.basePath): + return props.basePath + default: + return path.resolve(props.basePath, routePath) } - if (isExternal(props.basePath)) { - return props.basePath - } - return path.resolve(props.basePath, routePath) } </script> @@ -80,9 +78,9 @@ const resolvePath = (routePath: string) => { </template> <el-sub-menu v-else :index="resolvePath(props.item.path)" teleported> <template #title> - <svg-icon v-if="props.item.meta && props.item.meta.svgIcon" :name="props.item.meta.svgIcon" /> - <component v-else-if="props.item.meta && props.item.meta.elIcon" :is="props.item.meta.elIcon" class="el-icon" /> - <span v-if="props.item.meta && props.item.meta.title">{{ props.item.meta.title }}</span> + <svg-icon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" /> + <component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" /> + <span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span> </template> <template v-if="props.item.children"> <sidebar-item diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 608bc91..eca0654 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -21,16 +21,14 @@ const settingsStore = useSettingsStore() const { showSidebarLogo } = storeToRefs(settingsStore) const activeMenu = computed(() => { - const { meta, path } = route - if (meta?.activeMenu) { - return meta.activeMenu - } - return path + const { + meta: { activeMenu }, + path + } = route + return activeMenu ? activeMenu : path }) -const isCollapse = computed(() => { - return !appStore.sidebar.opened -}) +const isCollapse = computed(() => !appStore.sidebar.opened) </script> <template>