feat: add top menu layout config

arco-design-pro-vite/src/components/global-setting/block.vue

@@ -50,6 +50,11 @@
     if (key === 'menuFromServer' && value) {
       await appStore.fetchServerMenuConfig();
     }
+    if (key === 'topMenu') {
+      appStore.updateSettings({
+        menuCollapse: false,
+      });
+    }
     appStore.updateSettings({ [key]: value });
   };
 </script>

arco-design-pro-vite/src/components/global-setting/index.vue

@@ -43,6 +43,11 @@
       key: 'menu',
       defaultVal: appStore.menu,
     },
+    {
+      name: 'settings.topMenu',
+      key: 'topMenu',
+      defaultVal: appStore.topMenu,
+    },
     { name: 'settings.footer', key: 'footer', defaultVal: appStore.footer },
     { name: 'settings.tabBar', key: 'tabBar', defaultVal: appStore.tabBar },
     {

arco-design-pro-vite/src/components/menu/index.vue

@@ -26,6 +26,7 @@
         },
       });
 
+      const topMenu = computed(() => appStore.topMenu);
       const openKeys = ref<string[]>([]);
       const selectedKey = ref<string[]>([]);
 
@@ -126,14 +127,15 @@
 
       return () => (
         <a-menu
+          mode={topMenu.value ? 'horizontal' : 'vertical'}
           v-model:collapsed={collapsed.value}
           v-model:open-keys={openKeys.value}
           show-collapse-button={appStore.device !== 'mobile'}
           auto-open={false}
           selected-keys={selectedKey.value}
           auto-open-selected={true}
           level-indent={34}
-          style="height: 100%"
+          style="height: 100%;width:100%;"
           onCollapse={setCollapse}
         >
           {renderSubMenu()}

arco-design-pro-vite/src/components/navbar/index.vue

@@ -13,12 +13,15 @@
           Arco Pro
         </a-typography-title>
         <icon-menu-fold
-          v-if="appStore.device === 'mobile'"
+          v-if="!topMenu && appStore.device === 'mobile'"
           style="font-size: 22px; cursor: pointer"
           @click="toggleDrawerMenu"
         />
       </a-space>
     </div>
+    <div class="center-side">
+      <Menu v-if="topMenu" />
+    </div>
     <ul class="right-side">
       <li>
         <a-tooltip :content="$t('settings.search')">
@@ -194,6 +197,7 @@
   import { LOCALE_OPTIONS } from '@/locale';
   import useLocale from '@/hooks/locale';
   import useUser from '@/hooks/user';
+  import Menu from '@/components/menu/index.vue';
   import MessageBox from '../message-box/index.vue';
 
   const appStore = useAppStore();
@@ -208,6 +212,7 @@
   const theme = computed(() => {
     return appStore.theme;
   });
+  const topMenu = computed(() => appStore.topMenu && appStore.menu);
   const isDark = useDark({
     selector: 'body',
     attribute: 'arco-theme',
@@ -269,6 +274,10 @@
     padding-left: 20px;
   }
 
+  .center-side {
+    flex: 1;
+  }
+
   .right-side {
     display: flex;
     padding-right: 20px;

arco-design-pro-vite/src/config/settings.json

@@ -3,6 +3,7 @@
   "colorWeak": false,
   "navbar": true,
   "menu": true,
+  "topMenu": false,
   "hideMenu": false,
   "menuCollapse": false,
   "footer": true,

arco-design-pro-vite/src/layout/default-layout.vue

@@ -64,7 +64,7 @@
   useResponsive(true);
   const navbarHeight = `60px`;
   const navbar = computed(() => appStore.navbar);
-  const renderMenu = computed(() => appStore.menu);
+  const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
   const hideMenu = computed(() => appStore.hideMenu);
   const footer = computed(() => appStore.footer);
   const menuWidth = computed(() => {

arco-design-pro-vite/src/locale/en-US/settings.ts

@@ -12,6 +12,7 @@ export default {
   'settings.navbar.screen.toExit': 'Click to exit the full screen mode',
   'settings.navbar.alerts': 'alerts',
   'settings.menu': 'Menu',
+  'settings.topMenu': 'Top Menu',
   'settings.tabBar': 'Tab Bar',
   'settings.footer': 'Footer',
   'settings.otherSettings': 'Other Settings',

arco-design-pro-vite/src/locale/zh-CN/settings.ts

@@ -12,6 +12,7 @@ export default {
   'settings.navbar.screen.toExit': '点击退出全屏模式',
   'settings.navbar.alerts': '消息通知',
   'settings.menu': '菜单栏',
+  'settings.topMenu': '顶部菜单栏',
   'settings.tabBar': '多页签',
   'settings.footer': '底部',
   'settings.otherSettings': '其他设置',

arco-design-pro-vite/src/store/modules/app/types.ts

@@ -5,6 +5,7 @@ export interface AppState {
   colorWeak: boolean;
   navbar: boolean;
   menu: boolean;
+  topMenu: boolean;
   hideMenu: boolean;
   menuCollapse: boolean;
   footer: boolean;