feat(projects): 上下结构，菜单支持横向滚动

src/layouts/common/GlobalHeader/components/HeaderMenu.vue

@@ -1,4 +1,6 @@
 <template>
+  <div style="flex: 1; overflow: hidden; padding: 0 10px">
+    <n-scrollbar :x-scrollable="true" class="flex-1-hidden">
       <n-menu
         :value="activeKey"
         mode="horizontal"
@@ -6,6 +8,8 @@
         :inverted="theme.header.inverted"
         @update:value="handleUpdateMenu"
       />
+    </n-scrollbar>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,4 +33,21 @@ function handleUpdateMenu(_key: string, item: MenuOption) {
 }
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+:deep(.n-menu-item-content__icon) {
+  font-size: 16px !important;
+}
+:deep(.n-menu .n-menu-item) {
+  margin-top: 0;
+  // margin-bottom: 5px;
+}
+:deep(.n-menu .n-menu-item::before) {
+  left: 0;
+  right: 0;
+  border-radius: 3px;
+  margin: 0 5px;
+}
+:deep(.n-menu-item-content-header) {
+  overflow: inherit !important;
+}
+</style>