From 311b249d2489f3b1c75712012a3e2945984701ef Mon Sep 17 00:00:00 2001
From: sunHsl <sun20001016@gmail.com>
Date: Wed, 25 Oct 2023 10:04:45 +0800
Subject: [PATCH 1/2] =?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)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layouts/src/components/menu/index.vue     | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/layouts/src/components/menu/index.vue b/packages/layouts/src/components/menu/index.vue
index 2c94fe7f..05279ca5 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,7 @@ const routerToMenu = (item: RouteRecordItem) => {
 
     <VbenScrollbar :class="bem('scrollbar')">
       <VbenMenu
+        :class="getTopMenuAlign"
         v-model:value="activeKey"
         :options="menuList"
         :collapsed="getMenuCollapsed"
@@ -120,6 +123,11 @@ const routerToMenu = (item: RouteRecordItem) => {
     </VbenScrollbar>
   </div>
 </template>
+<style>
+div:has(> div[class='layout-menu']) {
+  flex: 1;
+}
+</style>
 
 <style lang="less" scoped>
 .layout-menu {
@@ -135,5 +143,21 @@ const routerToMenu = (item: RouteRecordItem) => {
     flex: 1;
     flex-basis: auto;
   }
+
+  & .n-menu--horizontal {
+    width: 100%;
+
+    &.start {
+      justify-content: flex-start;
+    }
+
+    &.center {
+      justify-content: center;
+    }
+
+    &.end {
+      justify-content: flex-end;
+    }
+  }
 }
 </style>

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

---
 .../layouts/src/components/menu/index.vue     | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/packages/layouts/src/components/menu/index.vue b/packages/layouts/src/components/menu/index.vue
index 05279ca5..758361e0 100644
--- a/packages/layouts/src/components/menu/index.vue
+++ b/packages/layouts/src/components/menu/index.vue
@@ -108,7 +108,11 @@ const routerToMenu = (item: RouteRecordItem & RouteMeta) => {
 
     <VbenScrollbar :class="bem('scrollbar')">
       <VbenMenu
-        :class="getTopMenuAlign"
+        class="w-full"
+        :style="{
+          justifyContent:
+            getTopMenuAlign === 'center' ? 'center' : `flex-${getTopMenuAlign}`,
+        }"
         v-model:value="activeKey"
         :options="menuList"
         :collapsed="getMenuCollapsed"
@@ -143,21 +147,5 @@ div:has(> div[class='layout-menu']) {
     flex: 1;
     flex-basis: auto;
   }
-
-  & .n-menu--horizontal {
-    width: 100%;
-
-    &.start {
-      justify-content: flex-start;
-    }
-
-    &.center {
-      justify-content: center;
-    }
-
-    &.end {
-      justify-content: flex-end;
-    }
-  }
 }
 </style>