From effcea209bf5f56b944160b9be08e30eb5797490 Mon Sep 17 00:00:00 2001
From: KAI <1373639299@qq.com>
Date: Wed, 14 Jan 2026 23:35:07 +0800
Subject: [PATCH] =?UTF-8?q?chore(layout):=20=E6=9B=B4=E6=96=B0=20LayoutTop?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=20(=E5=90=8C=E6=AD=A5Gi-Demo)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/LayoutTop.vue     | 24 ++++++++++------
 src/layout/hooks/useMenus.ts | 53 ++++++++++++++++++++++++++++++++++--
 2 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/src/layout/LayoutTop.vue b/src/layout/LayoutTop.vue
index f035903..44caecd 100644
--- a/src/layout/LayoutTop.vue
+++ b/src/layout/LayoutTop.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="layout-top">
-    <a-row align="center" class="layout-top__header">
+    <a-row align="center" class="layout-top__header" :style="getMenuStyle">
       <Logo></Logo>
-      <Menu class="layout-top__menu"></Menu>
+      <a-menu
+        class="layout-top__menu" mode="horizontal" :theme="menuTheme" :menu-trigger-props="menuTriggerProps"
+        :selected-keys="selectedKeys" @menu-item-click="handleMenuItemClick"
+      >
+        <MenuItem v-for="(item, index) in menuList" :key="item.path + index" :item="item" />
+      </a-menu>
       <HeaderRightBar></HeaderRightBar>
     </a-row>
     <Tabs v-if="appStore.tab"></Tabs>
@@ -14,29 +19,32 @@
 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 MenuItem from './components/Menu/MenuItem.vue'
+
 import Tabs from './components/Tabs/index.vue'
+import { useMenu } from './hooks/useMenus'
 import { useAppStore } from '@/stores'
 
 defineOptions({ name: 'LayoutTop' })
 
 const appStore = useAppStore()
+const { menuTheme, menuList, menuTriggerProps, handleMenuItemClick, selectedKeys, getMenuStyle } = useMenu()
 </script>
 
 <style lang="scss" scoped>
 .layout-top {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
   overflow: hidden;
 
   &__header {
-    width: 100%;
-    overflow: hidden;
     box-sizing: border-box;
-    border-bottom: 1px solid var(--color-border);
-    background-color: var(--color-bg-1);
+    width: 100%;
     padding-right: 16px;
+    overflow: hidden;
+    background-color: var(--color-bg-1);
+    border-bottom: 1px solid var(--color-border);
   }
 
   &__menu {
diff --git a/src/layout/hooks/useMenus.ts b/src/layout/hooks/useMenus.ts
index 653e38f..6b66e1c 100644
--- a/src/layout/hooks/useMenus.ts
+++ b/src/layout/hooks/useMenus.ts
@@ -1,8 +1,11 @@
+import type { CSSProperties } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { computed } from 'vue'
 import { eachTree } from 'xe-utils'
-import { useRouteStore } from '@/stores'
+import { useDevice, useRouteListener } from '@/hooks'
+import { useAppStore, useRouteStore } from '@/stores'
 import { filterTree } from '@/utils'
+import { isExternal } from '@/utils/validate'
 
 /**
  * 菜单管理 Hooks
@@ -11,8 +14,30 @@ import { filterTree } from '@/utils'
  * @returns {object} 包含处理后菜单列表的响应式对象
  */
 export function useMenu() {
+  const router = useRouter()
   // 路由存储实例，用于获取原始路由配置
   const routeStore = useRouteStore()
+  const appStore = useAppStore()
+  const { listenerRouteChange } = useRouteListener()
+  const { isDesktop } = useDevice()
+
+  // 是否折叠菜单
+  const collapsed = computed(() =>
+    !isDesktop.value ? false : appStore.menuCollapse,
+  )
+
+  // 菜单触发器配置
+  const menuTriggerProps = {
+    animationName: 'slide-dynamic-origin',
+  }
+
+  // 菜单主题
+  const menuTheme = computed(() => appStore.menuDark ? 'dark' : 'light')
+
+  // 获取菜单样式
+  const getMenuStyle = computed(() => {
+    return { backgroundColor: menuTheme.value === 'dark' ? 'var(--color-menu-dark-bg)' : 'var(--color-menu-light-bg)' } as CSSProperties
+  })
 
   /**
    * 处理后的菜单列表
@@ -36,7 +61,6 @@ export function useMenu() {
       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
@@ -46,7 +70,32 @@ export function useMenu() {
     return showMenuList
   })
 
+  const selectedKeys = ref<string[]>([])
+
+  function handleMenuItemClick(key: string) {
+    if (isExternal(key)) {
+      window.open(key)
+      return
+    }
+    selectedKeys.value = [key]
+    router.push({ path: key })
+  }
+
+  listenerRouteChange(({ to }) => {
+    if (to?.meta?.activeMenu) {
+      selectedKeys.value = [to.meta.activeMenu]
+      return
+    }
+    selectedKeys.value = [to.path]
+  })
+
   return {
+    menuTheme,
+    getMenuStyle,
     menuList,
+    menuTriggerProps,
+    selectedKeys,
+    collapsed,
+    handleMenuItemClick,
   }
 }