feat: 优化布局样式(同步gi-demo)

Co-authored-by: kiki1373639299<zkai0106@163.com>



# message auto-generated for no-merge-commit merge:
!14 merge type-fix into dev

feat: 优化布局样式(同步gi-demo)

Created-by: kiki1373639299
Commit-by: kiki1373639299
Merged-by: Charles_7c
Description: <!--
  非常感谢您的 PR！在提交之前，请务必确保您 PR 的代码经过了完整测试，并且通过了代码规范检查。
-->

<!-- 在 [] 中输入 x 来勾选) -->

## PR 类型

<!-- 您的 PR 引入了哪种类型的变更？ -->
<!-- 只支持选择一种类型，如果有多种类型，可以在更新日志中增加 “类型” 列。 -->

- [X] 新 feature
- [ ] Bug 修复
- [ ] 功能增强
- [ ] 文档变更
- [ ] 代码样式变更
- [ ] 重构
- [ ] 性能改进
- [ ] 单元测试
- [ ] CI/CD
- [ ] 其他

## PR 目的

<!-- 描述一下您的 PR 解决了什么问题。如果可以，请链接到相关 issues。 -->

## 解决方案

<!-- 详细描述您是如何解决的问题 -->

## PR 测试

<!-- 如果可以，请为您的 PR 添加或更新单元测试。 -->
<!-- 请描述一下您是如何测试 PR 的。例如：创建/更新单元测试或添加相关的截图。 -->

## Changelog

| 模块  | Changelog | Related issues |
|-----|-----------| -------------- |
|     |           |                |

<!-- 如果有多种类型的变更，可以在变更日志表中增加 “类型” 列，该列的值与上方 “PR 类型” 相同。 -->
<!-- Related issues 格式为 Closes #<issue号>，或者 Fixes #<issue号>，或者 Resolves #<issue号>。 -->

## 其他信息

<!-- 请描述一下还有哪些注意事项。例如：如果引入了一个不向下兼容的变更，请描述其影响。 -->

## 提交前确认

- [X] PR 代码经过了完整测试，并且通过了代码规范检查
- [ ] 已经完整填写 Changelog，并链接到了相关 issues
- [X] PR 代码将要提交到 dev 分支

See merge request: continew/continew-admin-ui!14

src/hooks/index.ts

@@ -8,3 +8,4 @@ export * from './modules/useBreakpoint'
 export * from './modules/useDownload'
 export * from './modules/useResetReactive'
 export * from './modules/useMultipartUploader'
+export * from './modules/useRouteListener'

src/hooks/modules/useRouteListener.ts

@@ -0,0 +1,92 @@
+/**
+ * 路由变化监听 Hook
+ * @description 使用发布订阅模式管理路由变化，避免重复监听导致的性能问题
+ */
+
+import type { Handler } from 'mitt'
+import type { RouteLocationNormalized } from 'vue-router'
+import mitt from 'mitt'
+import { onUnmounted, ref } from 'vue'
+
+// 事件类型定义
+interface RouteChangeEvent {
+  to: RouteLocationNormalized
+  from?: RouteLocationNormalized
+}
+
+// 事件键定义
+const ROUTE_CHANGE_KEY = Symbol('ROUTE_CHANGE')
+
+// 事件发射器
+const emitter = mitt<{
+  [ROUTE_CHANGE_KEY]: RouteChangeEvent
+}>()
+
+// 最新路由状态
+const latestRoute = ref<RouteLocationNormalized | null>(null)
+
+/**
+ * 设置路由变化事件
+ * @param to 目标路由
+ * @param from 来源路由
+ */
+export function setRouteEmitter(to: RouteLocationNormalized, from?: RouteLocationNormalized) {
+  const event: RouteChangeEvent = { to, from }
+  emitter.emit(ROUTE_CHANGE_KEY, event)
+  latestRoute.value = to
+}
+
+/**
+ * 路由监听 Hook
+ * @returns 路由监听相关方法
+ */
+export function useRouteListener() {
+  // 监听器列表
+  const listeners = new Set<Handler<RouteChangeEvent>>()
+
+  /**
+   * 监听路由变化
+   * @param handler 处理函数
+   * @param immediate 是否立即执行
+   */
+  function listenerRouteChange(
+    handler: (event: RouteChangeEvent) => void,
+    immediate = true,
+  ) {
+    emitter.on(ROUTE_CHANGE_KEY, handler)
+    listeners.add(handler)
+
+    if (immediate && latestRoute.value) {
+      handler({ to: latestRoute.value })
+    }
+
+    return handler
+  }
+
+  /**
+   * 移除路由监听器
+   * @param handler 要移除的处理函数
+   */
+  function removeRouteListener(handler?: Handler<RouteChangeEvent>) {
+    if (handler) {
+      emitter.off(ROUTE_CHANGE_KEY, handler)
+      listeners.delete(handler)
+    } else {
+      // 移除所有监听器
+      listeners.forEach((listener) => {
+        emitter.off(ROUTE_CHANGE_KEY, listener)
+      })
+      listeners.clear()
+    }
+  }
+
+  // 组件卸载时清理
+  onUnmounted(() => {
+    removeRouteListener()
+  })
+
+  return {
+    listenerRouteChange,
+    removeRouteListener,
+  }
+}

src/layout/LayoutColumns.vue

@@ -1,20 +1,16 @@
 <template>
   <div class="layout-columns">
     <div v-show="isDesktop" class="layout-columns__left">
-      <div class="layout-columns__menu-wrapper">
-        <!-- 左侧一级菜单区域 -->
-        <OneLevelMenu :menus="oneLevelMenus" @menu-click="handleMenuClick"></OneLevelMenu>
-        <div class="layout-columns__right-menu" :class="{ collapsed: appStore.menuCollapse }">
-          <!-- 系统标题 -->
-          <div class="layout-columns__title" @click="toHome">
-            <span v-show="!appStore.menuCollapse" class="system-name gi_line_1">{{ title }}</span>
-          </div>
-          <!-- 左侧二级菜单区域 -->
-          <Menu
-            v-if="twoLevelMenus.length > 1" class="layout-columns__menu" :menus="twoLevelMenus"
-            :menu-style="menuStyle"
-          />
-        </div>
+      <!-- 左侧一级菜单区域 -->
+      <OneLevelMenu :menus="oneLevelMenus" @menu-click="handleMenuItemClickByItem"></OneLevelMenu>
+
+      <!-- 左侧二级菜单区域 -->
+      <div class="layout-columns__right-menu">
+        <div class="layout-columns__system-name gi_line_1">{{ appStore.getTitle() }}</div>
+        <Menu
+          v-if="twoLevelMenus.length > 1 || oneLevelMenuActiveRoute?.meta?.alwaysShow === true"
+          class="layout-columns__menu" :menus="twoLevelMenus" :menu-style="{ width: '180px' }"
+        />
       </div>
     </div>
 
@@ -28,111 +24,47 @@
 </template>
 
 <script setup lang="ts">
-import type { RouteRecordRaw } from 'vue-router'
-import { findTree, mapTree } from 'xe-utils'
 import Header from './components/Header/index.vue'
 import Main from './components/Main.vue'
 import Menu from './components/Menu/index.vue'
 import OneLevelMenu from './components/OneLevelMenu/index.vue'
 import Tabs from './components/Tabs/index.vue'
-import { filterTree } from '@/utils'
-import { useAppStore, useRouteStore } from '@/stores'
+import { useAppStore } from '@/stores'
+import { useLevelMenu } from '@/layout/hooks/useLevelMenu'
 import { useDevice } from '@/hooks'
 
 defineOptions({ name: 'LayoutColumns' })
 
-const route = useRoute()
-const router = useRouter()
 const appStore = useAppStore()
-const routeStore = useRouteStore()
 const { isDesktop } = useDevice()
 
-// 系统标题和Logo
-const title = computed(() => appStore.getTitle())
-
-// 菜单样式 - 根据折叠状态动态调整宽度
-const menuStyle = computed(() => {
-  return {
-    width: appStore.menuCollapse ? '48px' : '200px',
-  }
-})
-
-// 跳转首页
-const toHome = () => {
-  router.push('/')
-}
-
-// 处理菜单路由数据
-const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
-const showMenuList = filterTree(cloneRoutes, (i) => i.meta?.hidden === false) as RouteRecordRaw[]
-
-// 一级菜单
-const oneLevelMenus = ref<RouteRecordRaw[]>([])
-function getOneLevelMenus() {
-  const cloneList = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
-  const formatList = mapTree(cloneList, (i) => {
-    if (i?.children?.length === 1 && i?.meta?.alwaysShow !== true) {
-      return i.children?.[0]
-    }
-    return i
-  })
-  const arr = formatList.filter((i) => i.meta?.hidden === false)
-  return arr
-}
-oneLevelMenus.value = getOneLevelMenus()
-
-// 二级菜单
-const twoLevelMenus = computed(() => {
-  const obj = findTree(showMenuList, (i) => i.path === route.path)
-  return showMenuList?.[Number(obj.path[0])]?.children || []
-})
-
-function handleMenuClick(item: RouteRecordRaw) {
-  if (item.redirect === 'noRedirect') {
-    router.replace({ path: item.children?.[0]?.path })
-    return
-  }
-  router.replace({ path: (item.redirect as string) || item.path })
-}
+const { oneLevelMenus, twoLevelMenus, oneLevelMenuActiveRoute, getOneLevelMenus, handleMenuItemClickByItem } = useLevelMenu()
+getOneLevelMenus()
 </script>
 
 <style lang="scss" scoped>
 .layout-columns {
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
   overflow: hidden;
 
   &__left {
+    display: flex;
     height: 100%;
+    overflow: hidden;
     background-color: var(--color-bg-1);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  &__menu-wrapper {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
   }
 
   &__right-menu {
-    flex-shrink: 0;
     display: flex;
     flex-direction: column;
+    width: 180px;
     overflow: hidden;
-    border-right: 1px solid var(--color-border-2);
-    transition: width 0.2s;
-    width: 200px;
-
-    &.collapsed {
-      width: 48px;
-    }
+    background-color: var(--color-bg-1);
   }
 
-  &__title {
+  &__system-name {
     height: 56px;
     padding: 0 12px;
     color: var(--color-text-1);
@@ -146,61 +78,22 @@ function handleMenuClick(item: RouteRecordRaw) {
     border-bottom: 1px solid var(--color-border);
     cursor: pointer;
     user-select: none;
-    transition: padding 0.2s;
+    transition: padding .2s;
 
-    .layout-columns__right-menu.collapsed & {
-      padding: 0;
-    }
-
-    .logo {
-      width: 32px;
-      height: 32px;
-      border-radius: 6px;
-      transition: all 0.2s;
-      overflow: hidden;
-      flex-shrink: 0;
-    }
-
-    .system-name {
-      padding-left: 6px;
-      white-space: nowrap;
-      transition: color 0.3s;
-      line-height: 1.5;
-      display: inline-flex;
-      align-items: center;
-
-      &:hover {
-        color: $color-theme !important;
-        cursor: pointer;
-      }
+    &:hover {
+      color: $color-theme !important;
+      cursor: pointer;
     }
   }
-
   &__menu {
     flex: 1;
-    overflow: hidden;
-  }
-
-  // 折叠状态下的菜单样式
-  :deep(.arco-menu.arco-menu-vertical.arco-menu-collapsed) {
-    .arco-menu-icon {
-      margin-right: 0;
-      padding: 10px 0;
-    }
-
-    .arco-menu-has-icon {
-      padding: 0;
-      justify-content: center;
-    }
-
-    .arco-menu-title {
-      display: none;
-    }
+    overflow: auto;
+    border-right: 1px solid var(--color-border-2);
   }
 
   &__content {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
     overflow: hidden;
   }

src/layout/LayoutMix.vue

@@ -1,143 +1,75 @@
+<!--
+  @file LayoutMix 组件
+  @description 混合布局组件，支持顶部导航和左侧菜单组合的布局方式
+-->
 <template>
   <div class="layout-mix">
+    <!-- 左侧菜单区域 -->
     <section
       v-if="isDesktop" class="layout-mix-left" :class="{ 'app-menu-dark': appStore.menuDark }"
       :style="appStore.menuDark ? appStore.themeCSSVar : undefined"
     >
-      <Logo :collapsed="appStore.menuCollapse"></Logo>
-      <div class="menu-container">
-        <Menu :menus="leftMenus" :menu-style="{ width: '220px', flex: 1 }"></Menu>
-      </div>
-      <WwAds class="ads" />
+      <Logo :collapsed="appStore.menuCollapse" />
+      <Menu :menus="twoLevelMenus" :menu-style="{ width: '200px', flex: 1 }" />
     </section>
 
+    <!-- 右侧内容区域 -->
     <section class="layout-mix-right">
       <header class="header">
-        <MenuFoldBtn></MenuFoldBtn>
+        <MenuFoldBtn />
         <a-menu
           v-if="isDesktop" mode="horizontal" :selected-keys="activeMenu" :auto-open-selected="false"
-          :trigger-props="{ animationName: 'slide-dynamic-origin' }" @menu-item-click="onMenuItemClick"
+          :trigger-props="menuTriggerProps" @menu-item-click="handleMenuItemClickByPath"
         >
-          <a-menu-item v-for="item in topMenus" :key="item.path">
+          <a-menu-item v-for="item in oneLevelMenus" :key="item.path">
             <template #icon>
-              <GiSvgIcon :name="getMenuIcon(item)" :size="24" />
+              <GiSvgIcon :name="getMenuIcon(item) || ''" :size="24" />
             </template>
             <span>{{ item.meta?.title || item.children?.[0]?.meta?.title || '' }}</span>
           </a-menu-item>
         </a-menu>
-        <HeaderRightBar></HeaderRightBar>
+        <HeaderRightBar />
       </header>
-
-      <Tabs></Tabs>
-      <Main></Main>
-      <GiFooter v-if="appStore.copyrightDisplay" />
+      <Tabs v-if="appStore.tab" />
+      <Main />
     </section>
-
-    <!-- 公告弹窗 -->
-    <NoticePopup ref="noticePopupRef" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
-import { searchTree } from 'xe-utils'
-import Main from './components/Main.vue'
-import Tabs from './components/Tabs/index.vue'
-import Menu from './components/Menu/index.vue'
 import HeaderRightBar from './components/HeaderRightBar/index.vue'
 import Logo from './components/Logo.vue'
+import Main from './components/Main.vue'
+import Menu from './components/Menu/index.vue'
 import MenuFoldBtn from './components/MenuFoldBtn.vue'
-import WwAds from './components/WwAds.vue'
-import GiFooter from '@/components/GiFooter/index.vue'
-import NoticePopup from '@/views/user/message/components/NoticePopup.vue'
-import { useAppStore, useRouteStore } from '@/stores'
-import { isExternal } from '@/utils/validate'
-import { filterTree } from '@/utils'
+import Tabs from './components/Tabs/index.vue'
+import { useAppStore } from '@/stores'
+import { useLevelMenu } from '@/layout/hooks/useLevelMenu'
 import { useDevice } from '@/hooks'
-import { getToken } from '@/utils/auth'
 
+/** 组件名称 */
 defineOptions({ name: 'LayoutMix' })
-const route = useRoute()
-const router = useRouter()
+
 const appStore = useAppStore()
-const routeStore = useRouteStore()
 const { isDesktop } = useDevice()
-// 过滤是菜单的路由
-const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
-const menuRoutes = filterTree(cloneRoutes, (i) => i.meta?.hidden === false)
 
-// 顶部一级菜单
-const topMenus = ref<RouteRecordRaw[]>([])
-topMenus.value = JSON.parse(JSON.stringify(menuRoutes))
-
-// 公告弹窗引用
-const noticePopupRef = ref<InstanceType<typeof NoticePopup>>()
-
-// 检查并显示未读公告
-const checkAndShowNotices = () => {
-  const token = getToken()
-
-  // 如果有token，检查未读公告
-  if (token) {
-    setTimeout(() => {
-      noticePopupRef.value?.open()
-    }, 1000) // 延迟1秒显示，让页面先加载完成
-  }
+/** 菜单配置 */
+const menuTriggerProps = {
+  animationName: 'slide-dynamic-origin',
 }
 
+const { oneLevelMenus, twoLevelMenus, oneLevelMenuActiveRoute, getOneLevelMenus, handleMenuItemClickByPath } = useLevelMenu()
+getOneLevelMenus()
+
+const activeMenu = computed(() => [oneLevelMenuActiveRoute.value?.path ?? ''])
+
 const getMenuIcon = (item: RouteRecordRaw) => {
-  return item.meta?.icon || item.children?.[0].meta?.icon
+  return item.meta?.icon || item.children?.[0]?.meta?.icon
 }
-
-// 克隆是菜单的路由
-const cloneMenuRoutes: RouteRecordRaw[] = JSON.parse(JSON.stringify(menuRoutes))
-// 顶部一级菜单选中的
-const activeMenu = ref<string[]>([])
-// 左侧的菜单
-const leftMenus = ref<RouteRecordRaw[]>([])
-// 获取左侧菜单
-const getLeftMenus = (currentRoute?: RouteRecordRaw, key?: string) => {
-  // 优先从路由的 meta.activeMenu 获取key，如果没有则使用path
-  const menuKey = currentRoute
-    ? (currentRoute.meta?.activeMenu as string) || currentRoute.path
-    : key || ''
-
-  const arr = searchTree(cloneMenuRoutes, (i) => i.path === menuKey, { children: 'children' })
-  const rootPath = arr.length ? arr[0].path : ''
-  const obj = cloneMenuRoutes.find((i) => i.path === rootPath)
-  activeMenu.value = obj ? [obj.path] : ['']
-  leftMenus.value = obj ? (obj.children as RouteRecordRaw[]) : []
-}
-
-const onMenuItemClick = (key: string) => {
-  if (isExternal(key)) {
-    window.open(key)
-    return
-  }
-  setTimeout(() => getLeftMenus(undefined, key))
-  const obj = topMenus.value.find((i) => i.path === key)
-  if (obj && obj.redirect === 'noRedirect') return
-  router.push({ path: key })
-}
-
-watch(
-  () => route.path,
-  () => {
-    nextTick(() => {
-      getLeftMenus(route)
-    })
-  },
-  { immediate: true },
-)
-
-onMounted(() => {
-  checkAndShowNotices()
-})
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.arco-menu-pop) {
   white-space: nowrap;
 }
@@ -146,13 +78,13 @@ onMounted(() => {
 
   // Menu菜单组件修改
   .arco-menu-icon {
-    margin-right: 0;
     padding: 10px 0;
+    margin-right: 0;
   }
 
   .arco-menu-has-icon {
-    padding: 0;
     justify-content: center;
+    padding: 0;
   }
 
   .arco-menu-title {
@@ -174,43 +106,36 @@ onMounted(() => {
 }
 
 .layout-mix {
-  height: 100%;
   display: flex;
   align-items: stretch;
+  height: 100%;
   overflow: hidden;
 
   &-left {
-    border-right: 1px solid var(--color-border);
-    background-color: var(--color-bg-1);
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    height: 100vh;
-
-    .menu-container {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
+    background-color: var(--color-bg-1);
+    border-right: 1px solid var(--color-border);
   }
 
   &-right {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
     overflow: hidden;
   }
 }
 
 .header {
-  padding: 0 $padding;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   height: 56px;
+  padding: 0 $padding;
+  overflow: hidden;
   color: var(--color-text-1);
   background: var(--color-bg-1);
   border-bottom: 1px solid var(--color-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  overflow: hidden;
 }
 </style>

src/layout/components/OneLevelMenu/index.vue

@@ -8,7 +8,7 @@
             v-for="(item) in props.menus" :key="item.path" class="one-level-menu__item"
             :class="{ 'one-level-menu__item--active': calcIsActive(item) }" @click="emits('menu-click', item)"
           >
-            <GiSvgIcon :name="item?.meta?.icon || ''"></GiSvgIcon>
+            <MenuIcon :svg-icon="item?.meta?.icon || ''"></MenuIcon>
             <p class="one-level-menu__item__title gi_line_1" :title="item?.meta?.title">{{ item?.meta?.title }}</p>
           </li>
         </ul>
@@ -25,15 +25,18 @@ import MenuIcon from './MenuIcon.vue'
 interface Props {
   menus?: RouteRecordRaw[]
 }
+
 const props = withDefaults(defineProps<Props>(), {
   menus: () => [],
 })
+
 const emits = defineEmits<{
   (e: 'menu-click', item: RouteRecordRaw): void
 }>()
+
 const route = useRoute()
 const calcIsActive = (item: RouteRecordRaw) => {
-  return route.path.startsWith(item.path) && item.path !== '/'
+  return (route.path.startsWith(item.path) && item.path !== '/') || item.redirect === route.path
 }
 </script>
 
@@ -43,14 +46,14 @@ const calcIsActive = (item: RouteRecordRaw) => {
 }
 
 .one-level-menu {
-  width: 68px;
-  height: 100%;
-  background-color: var(--color-bg-1);
-  border-right: 1px solid var(--color-border-2);
   box-sizing: border-box;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  width: 68px;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--color-bg-1);
+  border-right: 1px solid var(--color-border-2);
 
   &__logo {
     justify-content: center;
@@ -63,14 +66,14 @@ const calcIsActive = (item: RouteRecordRaw) => {
   }
 
   &__wrap {
-    flex: 1;
     display: flex;
+    flex: 1;
     overflow: hidden;
   }
 
   &__list {
-    padding: 4px 4px 0;
     box-sizing: border-box;
+    padding: 4px 4px 0;
   }
 
   &__item {
@@ -80,12 +83,12 @@ const calcIsActive = (item: RouteRecordRaw) => {
     justify-content: center;
     padding: 8px 0;
     margin-bottom: 4px;
-    border-radius: 4px;
     cursor: pointer;
+    border-radius: 4px;
 
     &--active {
-      background-color: var(--color-primary-light-2);
-      color: rgb(var(--primary-6))
+      color: rgb(var(--primary-6));
+      background-color: var(--color-primary-light-2)
     }
 
     &:not(.one-level-menu__item--active):hover {
@@ -93,11 +96,11 @@ const calcIsActive = (item: RouteRecordRaw) => {
     }
 
     &__title {
-      font-size: 12px;
-      margin-top: 8px;
-      line-height: 1;
-      padding: 0 8px;
       box-sizing: border-box;
+      padding: 0 8px;
+      margin-top: 8px;
+      font-size: 12px;
+      line-height: 1;
     }
   }
 }

src/layout/hooks/useLevelMenu.ts

@@ -0,0 +1,95 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { eachTree } from 'xe-utils'
+import { useRouteListener } from '@/hooks'
+import { useRouteStore } from '@/stores'
+import { filterTree } from '@/utils'
+import { isExternal } from '@/utils/validate'
+
+/** 获取一级菜单，二级菜单的hooks */
+export function useLevelMenu() {
+  const route = useRoute()
+  const router = useRouter()
+  const routeStore = useRouteStore()
+  const { listenerRouteChange } = useRouteListener()
+
+  // 克隆一份路由，避免直接操作原始路由
+  const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
+  const showMenuList = filterTree(cloneRoutes, (i) => i.meta?.hidden === false) as RouteRecordRaw[]
+
+  // 一级菜单
+  const oneLevelMenus = ref<RouteRecordRaw[]>([])
+
+  // 二级菜单
+  const twoLevelMenus = computed(() => {
+    const path = route.matched[0].path
+    return showMenuList.find((i) => i.path === path)?.children || []
+  })
+
+  // 一级菜单选中的路由
+  const oneLevelMenuActiveRoute = ref<RouteRecordRaw | null>(null)
+
+  const getOneLevelMenuActiveRoute = (path: string) => {
+    return oneLevelMenus.value.find((i) => i.path === path) as RouteRecordRaw
+  }
+
+  listenerRouteChange(({ to }) => {
+    oneLevelMenuActiveRoute.value = getOneLevelMenuActiveRoute(to.matched?.[0]?.path)
+  })
+
+  // 获取一级菜单
+  function getOneLevelMenus() {
+    const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
+    const showMenuList = filterTree(cloneRoutes, (i) => i.meta?.hidden === false) as RouteRecordRaw[]
+    eachTree(showMenuList, (i) => {
+      if (i?.children?.length === 1 && i?.meta?.alwaysShow !== true) {
+        if (i.meta) {
+          i.meta.title = i.meta?.title || i.children?.[0]?.meta?.title
+          i.meta.svgIcon = i.meta?.svgIcon || i.children?.[0]?.meta?.svgIcon
+          i.meta.icon = i.meta?.icon || i.children?.[0]?.meta?.icon
+        }
+        delete i.children
+      }
+    })
+    oneLevelMenus.value = showMenuList
+  }
+
+  // 菜单点击事件
+  function handleMenuItemClickByItem(item: RouteRecordRaw) {
+    let path = (item.redirect as string) || item.path
+    if ((!item.redirect && item?.children?.length) || (item.redirect === 'noRedirect' && item?.children?.length)) {
+      path = item.children?.[0]?.path
+    }
+    if (isExternal(path)) {
+      window.open(path)
+      return
+    }
+    if (item.redirect === 'noRedirect') {
+      router.replace({ path })
+      return
+    }
+    router.replace({ path })
+  }
+
+  // 菜单点击事件
+  function handleMenuItemClickByPath(path: string) {
+    if (isExternal(path)) {
+      window.open(path)
+      return
+    }
+    const obj = oneLevelMenus.value.find((i) => i.path === path)
+    if (obj?.redirect === 'noRedirect') {
+      router.push({ path: obj.children?.[0]?.path })
+      return
+    }
+    router.push({ path: (obj?.redirect as string) || path })
+  }
+
+  return {
+    oneLevelMenus,
+    twoLevelMenus,
+    oneLevelMenuActiveRoute,
+    getOneLevelMenus,
+    handleMenuItemClickByItem,
+    handleMenuItemClickByPath,
+  }
+}

src/layout/hooks/useMenus.ts

@@ -0,0 +1,52 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { computed } from 'vue'
+import { eachTree } from 'xe-utils'
+import { useRouteStore } from '@/stores'
+import { filterTree } from '@/utils'
+
+/**
+ * 菜单管理 Hooks
+ * 用于获取和处理应用程序的菜单列表
+ * 提供菜单的过滤、展平处理等功能
+ * @returns {object} 包含处理后菜单列表的响应式对象
+ */
+export function useMenu() {
+  // 路由存储实例，用于获取原始路由配置
+  const routeStore = useRouteStore()
+
+  /**
+   * 处理后的菜单列表
+   * 响应式计算属性，当路由配置变化时自动更新，
+   * > hidden:false那么代表这个路由项显示在左侧菜单栏中
+   * > 子项chidren只有一个hidden:false的子元素时, 且alwaysShow为false, 那么这个子项会被展平到父项中
+   * 包含以下处理逻辑：
+   * 1. 深拷贝原始路由配置避免直接修改
+   * 2. 过滤掉设置为隐藏的菜单项
+   * 3. 展平只有一个子项的菜单项（提升用户体验）
+   */
+  const menuList = computed(() => {
+    // 深拷贝路由配置，防止修改原始数据
+    const cloneRoutes = JSON.parse(JSON.stringify(routeStore.routes)) as RouteRecordRaw[]
+
+    // 过滤出非隐藏的菜单（meta.hidden !== false）
+    const showMenuList = filterTree(cloneRoutes, (i) => i.meta?.hidden === false) as RouteRecordRaw[]
+
+    // 遍历处理菜单树，展平只有一个子项的菜单项
+    eachTree(showMenuList, (i) => {
+      if (i?.children?.length === 1 && i?.meta?.alwaysShow !== true) {
+        if (i.meta) {
+          i.meta.title = i.meta?.title || i.children?.[0]?.meta?.title
+          i.meta.svgIcon = i.meta?.svgIcon || i.children?.[0]?.meta?.svgIcon
+          i.meta.icon = i.meta?.icon || i.children?.[0]?.meta?.icon
+        }
+        i.path = i.children?.[0]?.path
+        delete i.children
+      }
+    })
+    return showMenuList
+  })
+
+  return {
+    menuList,
+  }
+}