fix #I8550V https://gitee.com/dromara/RuoYi-Vue-Plus/issues/I8550V

ahao

2023-09-29 fe384a3020fd2080d843704537b77954a8d82707

fix #I8550V https://gitee.com/dromara/RuoYi-Vue-Plus/issues/I8550V

 src/assets/styles/sidebar.scss

@@ -227,23 +227,4 @@
      margin-right: 16px;
    }
  }

  // the scroll bar appears when the sub-menu is too long
  > .el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}

 src/layout/components/Sidebar/SidebarItem.vue

@@ -1,6 +1,6 @@
<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
    <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
@@ -18,10 +18,10 @@
      </template>

      <sidebar-item
        v-for="child in item.children"
        v-for="(child) in item.children as RouteOption[]"
        :key="child.path"
        :is-nest="true"
        :item="child as RouteOption"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
@@ -34,7 +34,6 @@
import AppLink from './Link.vue'
import { getNormalPath } from '@/utils/ruoyi'
import { RouteOption } from "vue-router";
import { PropType } from "vue";

const props = defineProps({
    // route object
@@ -54,7 +53,7 @@

const onlyOneChild = ref<any>({});

const hasOneShowingChild = (children:RouteOption[] = [], parent: RouteOption) => {
const hasOneShowingChild = (parent: RouteOption, children?:RouteOption[]) => {
    if (!children) {
        children = [];
    }
@@ -76,9 +75,13 @@
    // Show parent if there are no child router to display
    if (showingChildren.length === 0) {
        onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
        if (parent.name === '2222') {
          console.log(onlyOneChild.value)
        }
        return true
    }


    return false
};


 src/layout/components/Sidebar/index.vue

@@ -4,7 +4,7 @@
    <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"
@@ -27,6 +27,7 @@
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import { RouteOption } from "vue-router";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const route = useRoute();
@@ -34,7 +35,7 @@
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
const sidebarRouters =  computed<RouteOption[]>(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);