refactor: 路由代码优化和完善注释

Former-commit-id: 859d3b74927b032ad265170d6e6ffd821b3fa0d3

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) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren)
-        (!item.meta || !item.meta.alwaysShow)
       "
     >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
-          :index="resolvePath(onlyOneChild.path)"
-          :class="{ 'submenu-title-noDropdown': !isNest }"
-        >
           <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>

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 }
       }
     ]
   }

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) {

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);

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;