🎨侧边栏优化

src/layout/components/Sidebar/SidebarItem.vue

@@ -5,6 +5,7 @@
         <el-menu-item :index="resolvePath(onlyOneChild.path)">
           <svg-icon :name="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
 
+          <span v-if="props.isCollapse && !onlyOneChild.meta.icon">{{ hasTitle2(onlyOneChild.meta.title) }}</span>
           <template v-if="onlyOneChild.meta.titleKey" #title>
             {{ $t(onlyOneChild.meta.titleKey) }}
           </template>
@@ -45,6 +46,10 @@ const props = defineProps({
   basePath: {
     type: String,
     default: ''
+  },
+  isCollapse: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -102,4 +107,12 @@ function hasTitle(title) {
     return ''
   }
 }
+
+function hasTitle2(title) {
+  if (title.length >= 1) {
+    return title.charAt(0) + '...'
+  } else {
+    return ''
+  }
+}
 </script>

src/layout/components/Sidebar/index.vue

@@ -11,7 +11,12 @@
         :collapse-transition="false"
         background-color="transparent"
         mode="vertical">
-        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
+        <sidebar-item
+          v-for="(route, index) in sidebarRouters"
+          :key="route.path + index"
+          :item="route"
+          :base-path="route.path"
+          :isCollapse="isCollapse" />
       </el-menu>
     </el-scrollbar>
   </el-aside>