fix(SidebarItem.vue): 收縮首頁图标不隐藏问题修复

src/layout/components/Navbar.vue

@@ -21,6 +21,7 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,49 +1,51 @@
-  <template>
-    <div v-if="!item.meta || !item.meta.hidden" >
-      <template
-          v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children"
+<template>
+  <div v-if="!item.meta || !item.meta.hidden" :class="[
+      isCollapse ? 'simple-mode' : 'full-mode',
+      {'first-level': !isNest}]">
+    <template
+        v-if="!alwaysShowParent && onlyOneChild && !onlyOneChild.children"
+    >
+      <AppLink
+          v-if="onlyOneChild.meta"
+          :to="resolvePath(onlyOneChild.path)"
       >
-        <AppLink
-            v-if="theOnlyOneChild.meta"
-            :to="resolvePath(theOnlyOneChild.path)"
+        <el-menu-item
+            :index="resolvePath(onlyOneChild.path)"
+            :class="{'submenu-title-noDropdown':!isNest}"
         >
-          <el-menu-item
-              :index="resolvePath(theOnlyOneChild.path)"
-              :class="{'submenu-title-noDropdown': isFirstLevel}"
-          >
-            <svg-icon v-if="theOnlyOneChild.meta&&theOnlyOneChild.meta.icon" :icon-class="theOnlyOneChild.meta.icon"></svg-icon>
-            <span v-if="theOnlyOneChild.meta && theOnlyOneChild.meta.title">{{ theOnlyOneChild.meta.title }}</span>
-          </el-menu-item>
-        </AppLink>
+          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
+          <span v-if="onlyOneChild.meta && onlyOneChild.meta.title">{{ onlyOneChild.meta.title }}</span>
+        </el-menu-item>
+      </AppLink>
+    </template>
+    <el-sub-menu
+        v-else
+        :index="resolvePath(item.path)"
+    >
+      <!-- popper-append-to-body -->
+      <template #title>
+        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
-      <el-sub-menu
-          v-else
-          :index="resolvePath(item.path)"
-      >
-        <!-- popper-append-to-body -->
-        <template #title>
-          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-          <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
-        </template>
-        <template v-if="item.children">
-          <sidebar-item
-              v-for="child in item.children"
-              :key="child.path"
-              :item="child"
-              :is-collapse="isCollapse"
-              :is-first-level="false"
-              :base-path="resolvePath(child.path)"
-              class="nest-menu"
-          />
-        </template>
-      </el-sub-menu>
-    </div>
-  </template>
+      <template v-if="item.children">
+        <sidebar-item
+            v-for="child in item.children"
+            :key="child.path"
+            :item="child"
+            :is-collapse="isCollapse"
+            :is-nest="true"
+            :base-path="resolvePath(child.path)"
+            class="nest-menu"
+        />
+      </template>
+    </el-sub-menu>
+  </div>
+</template>
 
 
 <script lang="ts">
 import path from 'path-browserify'
-import {defineComponent, PropType, reactive,computed } from "vue";
+import {defineComponent, PropType, computed} from "vue";
 import {RouteRecordRaw} from 'vue-router'
 import {isExternal} from '@utils/validate'
 import AppLink from './Link.vue'
@@ -60,7 +62,7 @@ export default defineComponent({
       type: Boolean,
       required: false
     },
-    isFirstLevel: {
+    isNest: {
       type: Boolean,
       required: false
     },
@@ -74,7 +76,7 @@ export default defineComponent({
     SvgIcon
   },
   setup(props) {
-    const alwaysShowRootMenu = computed(() => {
+    const alwaysShowParent = computed(() => {
       if (props.item.meta && props.item.meta.alwaysShow) {
         return true
       } else {
@@ -82,7 +84,7 @@ export default defineComponent({
       }
     })
 
-    const showingChildNumber = computed(() => {
+    const showingChildrenNum = computed(() => {
       if (props.item.children) {
         const showingChildren = props.item.children.filter((item) => {
           if (item.meta && item.meta.hidden) {
@@ -96,8 +98,8 @@ export default defineComponent({
       return 0
     })
 
-    const theOnlyOneChild = computed(() => {
-      if (showingChildNumber.value > 1) {
+    const onlyOneChild = computed(() => {
+      if (showingChildrenNum.value > 1) {
         return null
       }
       if (props.item.children) {
@@ -108,8 +110,8 @@ export default defineComponent({
         }
       }
       // If there is no children, return itself with path removed,
-      // because this.basePath already conatins item's path information
-      return { ...props.item, path: '' }
+      // because this.basePath already contains item's path information
+      return {...props.item, path: ''}
     })
 
     const resolvePath = (routePath: string) => {
@@ -123,12 +125,89 @@ export default defineComponent({
     }
 
     return {
-      alwaysShowRootMenu,
-      showingChildNumber,
-      theOnlyOneChild,
+      alwaysShowParent,
+      showingChildrenNum,
+      onlyOneChild,
       resolvePath
     }
   }
 })
 
-</script>
+</script>
+
+<style lang="scss" scoped>
+.el-sub-menu.is-active > .el-sub-menu__title {
+  color: #f4f4f5 !important;
+}
+
+.full-mode {
+  .nest-menu .el-sub-menu > .el-sub-menu__title,
+  .el-sub-menu .el-menu-item {
+    min-width: 210px !important;
+    #background-color: #1f2d3d !important;
+
+    &:hover {
+      background-color: #001528 !important;
+    }
+  }
+
+  .el-menu-item {
+    & > span {
+      display: inline-block;
+      padding-left: 5px;
+    }
+  }
+
+  .el-sub-menu {
+    overflow: hidden;
+
+    & > .el-sub-menu__title {
+      .el-sub-menu__icon-arrow {
+        display: none;
+      }
+
+      & > span {
+        padding-left: 5px;
+
+      }
+    }
+  }
+}
+
+.simple-mode {
+  &.first-level {
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+      }
+
+      & > span{
+        display: none;
+      }
+      & > svg{
+        margin-left: 20px;
+      }
+    }
+
+    .el-sub-menu {
+      overflow: hidden;
+
+
+      & > .el-sub-menu__title {
+        padding: 0px !important;
+
+        .el-sub-menu__icon-arrow {
+          display: none;
+        }
+
+        & > span {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+</style>