perf: 代码优化 layout/Sidebar

src/layout/components/Sidebar/SidebarItem.vue

@@ -24,45 +24,43 @@ const props = defineProps({
   }
 })
 
-const alwaysShowRootMenu = computed(() => {
+/** 是否始终显示根菜单 */
-  return props.item.meta && props.item.meta.alwaysShow
+const alwaysShowRootMenu = computed(() => props.item.meta?.alwaysShow)
+
+/** 显示的子菜单 */
+const showingChildren = computed(() => {
+  return props.item.children?.filter((child) => !child.meta?.hidden) ?? []
 })
 
+/** 显示的子菜单数量 */
 const showingChildNumber = computed(() => {
-  if (props.item.children) {
+  return showingChildren.value.length
-    const showingChildren = props.item.children.filter((item) => {
-      return !(item.meta && item.meta.hidden)
-    })
-    return showingChildren.length
-  }
-  return 0
 })
 
+/** 唯一的子菜单项 */
 const theOnlyOneChild = computed(() => {
-  if (showingChildNumber.value > 1) {
+  const number = showingChildNumber.value
+  switch (true) {
+    case number > 1:
       return null
-  }
+    case number === 1:
-  if (props.item.children) {
+      return showingChildren.value[0]
-    for (const child of props.item.children) {
+    default:
-      if (!child.meta || !child.meta.hidden) {
-        return child
-      }
-    }
-  }
-  // If there is no children, return itself with path removed,
-  // because this.basePath already contains item's path information
       return { ...props.item, path: "" }
+  }
 })
 
+/** 解析路径 */
 const resolvePath = (routePath: string) => {
-  if (isExternal(routePath)) {
+  switch (true) {
+    case isExternal(routePath):
       return routePath
-  }
+    case isExternal(props.basePath):
-  if (isExternal(props.basePath)) {
       return props.basePath
-  }
+    default:
       return path.resolve(props.basePath, routePath)
   }
+}
 </script>
 
 <template>
@@ -80,9 +78,9 @@ const resolvePath = (routePath: string) => {
     </template>
     <el-sub-menu v-else :index="resolvePath(props.item.path)" teleported>
       <template #title>
-        <svg-icon v-if="props.item.meta && props.item.meta.svgIcon" :name="props.item.meta.svgIcon" />
+        <svg-icon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" />
-        <component v-else-if="props.item.meta && props.item.meta.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
+        <component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
-        <span v-if="props.item.meta && props.item.meta.title">{{ props.item.meta.title }}</span>
+        <span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span>
       </template>
       <template v-if="props.item.children">
         <sidebar-item

src/layout/components/Sidebar/index.vue

@@ -21,16 +21,14 @@ const settingsStore = useSettingsStore()
 const { showSidebarLogo } = storeToRefs(settingsStore)
 
 const activeMenu = computed(() => {
-  const { meta, path } = route
+  const {
-  if (meta?.activeMenu) {
+    meta: { activeMenu },
-    return meta.activeMenu
+    path
-  }
+  } = route
-  return path
+  return activeMenu ? activeMenu : path
 })
 
-const isCollapse = computed(() => {
+const isCollapse = computed(() => !appStore.sidebar.opened)
-  return !appStore.sidebar.opened
-})
 </script>
 
 <template>