From 859d3b74927b032ad265170d6e6ffd821b3fa0d3 Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Sat, 11 Feb 2023 10:41:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B7=AF=E7=94=B1=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E4=BC=98=E5=8C=96=E5=92=8C=E5=AE=8C=E5=96=84=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/SidebarItem.vue | 60 +++++++++++--------
 src/router/index.ts                           |  5 --
 src/store/modules/permission.ts               |  1 +
 src/styles/index.scss                         |  2 +-
 src/styles/sidebar.scss                       | 18 ------
 5 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 8fd084b..2297259 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import path from 'path-browserify';
 import { isExternal } from '@/utils/validate';
 import AppLink from './Link.vue';
@@ -8,50 +7,65 @@ import { translateRouteTitleI18n } from '@/utils/i18n';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
 const props = defineProps({
+  /**
+   * 路由(eg:level_3_1)
+   */
   item: {
     type: Object,
     required: true
   },
-  isNest: {
-    type: Boolean,
-    required: false
-  },
+
+  /**
+   * 父层级完整路由路径(eg:/level/level_3/level_3_1)
+   */
   basePath: {
     type: String,
     required: true
   }
 });
 
-const onlyOneChild = ref();
+const onlyOneChild = ref(); // 临时变量，记录仅显示的一个子路由的信息
 
-function hasOneShowingChild(children = [] as any, parent: any) {
-  if (!children) {
-    children = [];
-  }
+/**
+ * 判断当前路由是否只有一个子路由需要显示
+ *
+ * 1：如果只有一个子路由，当前路由直接显示子路由
+ * 2：如果无子路由，显示当前路由
+ *
+ * @param children  子路由数组
+ * @param parent 当前路由
+ */
+function hasOneShowingChild(children = [], parent: any) {
+  // 需要显示的子路由数组
   const showingChildren = children.filter((item: any) => {
-    if (item.meta && item.meta.hidden) {
+    if (item.meta?.hidden) {
+      // 过滤不显示的子路由
       return false;
     } else {
-      // Temp set(will be used if only has one showing child)
+      // 仅有一个子路由生效，其他情况设置无效
       onlyOneChild.value = item;
       return true;
     }
   });
 
-  // When there is only one child router, the child router is displayed by default
+  // 1：如果只有一个子路由，当前路由直接显示子路由
   if (showingChildren.length === 1) {
     return true;
   }
 
-  // Show parent if there are no child router to display
+  // 2：如果无子路由，显示当前路由
   if (showingChildren.length === 0) {
     onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
     return true;
   }
-
   return false;
 }
 
+/**
+ * 解析路径
+ *
+ * @param routePath 路由路径
+ */
 function resolvePath(routePath: string) {
   if (isExternal(routePath)) {
     return routePath;
@@ -59,23 +73,22 @@ function resolvePath(routePath: string) {
   if (isExternal(props.basePath)) {
     return props.basePath;
   }
-  return path.resolve(props.basePath, routePath);
+  // 完整路径 = 父级路径(/level/level_3) + 路由路径
+  const fullPath = path.resolve(props.basePath, routePath);
+  return fullPath;
 }
 </script>
 <template>
   <div v-if="!item.meta || !item.meta.hidden">
+    <!-- 当前路由不包含子路由显示 -->
     <template
       v-if="
         hasOneShowingChild(item.children, item) &&
-        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
-        (!item.meta || !item.meta.alwaysShow)
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren)
       "
     >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item
-          :index="resolvePath(onlyOneChild.path)"
-          :class="{ 'submenu-title-noDropdown': !isNest }"
-        >
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
           <svg-icon
             v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
             :icon-class="onlyOneChild.meta.icon"
@@ -87,8 +100,8 @@ function resolvePath(routePath: string) {
       </app-link>
     </template>
 
+    <!-- 当前路由包含子路显示  -->
     <el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
-      <!-- popper-append-to-body -->
       <template #title>
         <svg-icon
           v-if="item.meta && item.meta.icon"
@@ -103,7 +116,6 @@ function resolvePath(routePath: string) {
         v-for="child in item.children"
         :key="child.path"
         :item="child"
-        :is-nest="true"
         :base-path="resolvePath(child.path)"
       />
     </el-sub-menu>
diff --git a/src/router/index.ts b/src/router/index.ts
index 37cd2cf..d63f4de 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -43,11 +43,6 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/404',
         component: () => import('@/views/error-page/404.vue'),
         meta: { hidden: true }
-      },
-      {
-        path: '/apidoc',
-        component: () => import('@/views/demo/apidoc.vue'),
-        meta: { hidden: true }
       }
     ]
   }
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 68dd4b1..906d6ce 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -46,6 +46,7 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
     if (hasPermission(roles, tmpRoute)) {
       if (tmpRoute.component?.toString() == 'Layout') {
         tmpRoute.component = Layout;
+        console.log();
       } else {
         const component = modules[`../../views/${tmpRoute.component}.vue`];
         if (component) {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a85fa67..7b45efc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -20,7 +20,7 @@ html.dark{
   --menuBg:var(--el-bg-color-overlay);
   --menuText:var(----el-menu-text-color);
   --menuActiveText:var(--el-menu-active-color);
-  --subMenuHover: rgba(0,0,0,.3);
+  --menuHover:rgba(0,0,0,.2);
 
   --subMenuBg: var(--el-menu-bg-color);
   --subMenuActiveText:var(--el-menu-active-color);
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 6499734..45e8409 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -63,7 +63,6 @@
     }
 
     // menu hover
-    .submenu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
         background-color: $menuHover !important;
@@ -98,23 +97,6 @@
       margin-left: 54px;
     }
 
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
-
-        .sub-el-icon {
-          margin-left: 19px;
-        }
-      }
-    }
-
     .el-sub-menu {
       overflow: hidden;
 
-- 
GitLab