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

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

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

---------

Co-authored-by: sunHsl <sun20001016@gmail.com>

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 {