style: 优化导航样式

src/layout/components/sidebar/sidebarItem.vue

@@ -55,19 +55,23 @@ function resolvePath(routePath) {
     <el-menu-item
       :index="resolvePath(onlyOneChild.path)"
       :class="{ 'submenu-title-noDropdown': !isNest }"
+      style="display: flex; align-items: center"
     >
       <i
+        v-show="props.item.meta.icon"
         :class="
           onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
         "
       />
       <template #title>
-        <span>{{ $t(onlyOneChild.meta.title) }}</span>
-        <Icon
-          v-if="onlyOneChild.meta.extraIcon"
-          :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
-          :content="`${onlyOneChild.meta.extraIcon.name}`"
-        />
+        <div style="display: flex; align-items: center">
+          <span>{{ $t(onlyOneChild.meta.title) }}</span>
+          <Icon
+            v-if="onlyOneChild.meta.extraIcon"
+            :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
+            :content="`${onlyOneChild.meta.extraIcon.name}`"
+          />
+        </div>
       </template>
     </el-menu-item>
   </template>
@@ -79,7 +83,7 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <i :class="props.item.meta.icon"></i>
+      <i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
       <span>{{ $t(props.item.meta.title) }}</span>
       <Icon
         v-if="props.item.meta.extraIcon"

src/layout/components/sidebar/vertical.vue

@@ -68,12 +68,14 @@ onBeforeMount(() => {
         router
         :collapse-transition="false"
         mode="vertical"
+        class="outer-most"
         @select="menuSelect"
       >
         <sidebar-item
           v-for="route in routeStore.wholeRoutes"
           :key="route.path"
           :item="route"
+          class="outer-most"
           :base-path="route.path"
         />
       </el-menu>

src/style/sidebar.scss

@@ -299,6 +299,11 @@
         color: $menuText;
         background-color: $subMenuBg;
 
+        span {
+          font-size: 12px;
+          margin-left: 10px;
+        }
+
         &:hover {
           background-color: $subMenuHover;
         }
@@ -306,6 +311,10 @@
 
       .el-sub-menu__title {
         color: $menuText;
+
+        span {
+          margin-left: 10px;
+        }
       }
     }
 
@@ -371,6 +380,11 @@
         color: $menuText;
         background-color: $subMenuBg;
 
+        span {
+          font-size: 12px;
+          margin-left: 10px;
+        }
+
         &:hover {
           background-color: $subMenuHover;
         }
@@ -378,6 +392,10 @@
 
       .el-sub-menu__title {
         color: $menuText;
+
+        span {
+          margin-left: 10px;
+        }
       }
     }
 
@@ -435,6 +453,32 @@
     min-width: $sideBarWidth !important;
   }
 
+  // 有子菜单
+  .el-menu--collapse
+    .is-active.outer-most.el-sub-menu
+    > .el-sub-menu__title::before {
+    position: absolute;
+    top: 0;
+    left: 5px;
+    width: 3px;
+    height: 100%;
+    background-color: #1890ff !important;
+    content: "";
+    clear: both;
+  }
+
+  // 无子菜单
+  .el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
+    position: absolute;
+    top: 0;
+    left: 5px;
+    width: 3px;
+    height: 100%;
+    background-color: #1890ff !important;
+    content: "";
+    clear: both;
+  }
+
   // 手机端
   .mobile {
     .fixed-header {