From 76964d21b2081014e5ba09f3959681c63292a5a6 Mon Sep 17 00:00:00 2001
From: sunHsl <132881363+sunHsl@users.noreply.github.com>
Date: Wed, 25 Oct 2023 17:22:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A8=A1=E5=BC=8F=EF=BC=8C=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E4=B8=8D=E7=94=9F=E6=95=88=E3=80=82=20(fix?=
 =?UTF-8?q?=20#121)=20(#205)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复顶部菜单模式，菜单布局不生效。 (fix #121)

* fix(顶部菜单): 修复顶部菜单模式，菜单布局不生效。 (fix #121)

---------

Co-authored-by: sunHsl <sun20001016@gmail.com>
---
 packages/layouts/src/components/menu/index.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/layouts/src/components/menu/index.vue b/packages/layouts/src/components/menu/index.vue
index 2c94fe7f..758361e0 100644
--- a/packages/layouts/src/components/menu/index.vue
+++ b/packages/layouts/src/components/menu/index.vue
@@ -10,14 +10,16 @@ import { useI18n } from '@vben/locale'
 import { REDIRECT_NAME } from '@vben/constants'
 import { renderIcon } from '../index'
 import { context } from '../../../bridge'
+import type { RouteMeta } from 'vue-router'
 
-const { Logo, useAppInject, useAppConfig } = context
+const { Logo, useAppInject, useAppConfig, useMenuSetting } = context
 import { getMenus, listenerRouteChange } from '@vben/router'
 
 const { getIsMobile } = useAppInject()
 
 const { menu, isMixSidebar, getCollapsedShowTitle, sidebar, isSidebar } =
   useAppConfig()
+const { getTopMenuAlign } = useMenuSetting()
 const showSidebarLogo = computed(() => {
   return unref(isSidebar) || unref(isMixSidebar)
 })
@@ -72,7 +74,7 @@ async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
 }
 
 // 路由格式化
-const routerToMenu = (item: RouteRecordItem) => {
+const routerToMenu = (item: RouteRecordItem & RouteMeta) => {
   const { name, children, meta, icon } = item
   const title = t(meta.title as string)
   return {
@@ -106,6 +108,11 @@ const routerToMenu = (item: RouteRecordItem) => {
 
     <VbenScrollbar :class="bem('scrollbar')">
       <VbenMenu
+        class="w-full"
+        :style="{
+          justifyContent:
+            getTopMenuAlign === 'center' ? 'center' : `flex-${getTopMenuAlign}`,
+        }"
         v-model:value="activeKey"
         :options="menuList"
         :collapsed="getMenuCollapsed"
@@ -120,6 +127,11 @@ const routerToMenu = (item: RouteRecordItem) => {
     </VbenScrollbar>
   </div>
 </template>
+<style>
+div:has(> div[class='layout-menu']) {
+  flex: 1;
+}
+</style>
 
 <style lang="less" scoped>
 .layout-menu {