feat(projects): 新增顶部菜单

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

@@ -0,0 +1,27 @@
+<template>
+  <n-menu :value="activeKey" mode="horizontal" :options="menus" @update:value="handleUpdateMenu" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { MenuOption } from 'naive-ui';
+import { NMenu } from 'naive-ui';
+import { menus } from '@/router';
+import { GlobalMenuOption } from '@/interface';
+
+const router = useRouter();
+const route = useRoute();
+
+const activeKey = computed(() => getActiveKey());
+
+function getActiveKey() {
+  return route.name as string;
+}
+
+function handleUpdateMenu(key: string, item: MenuOption) {
+  const menuItem = item as GlobalMenuOption;
+  router.push(menuItem.routePath);
+}
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/index.vue

@@ -5,11 +5,12 @@
       <div v-if="!theme.isVerticalNav" class="menu-width h-full">
         <global-logo />
       </div>
-      <div class="flex-y-center h-full">
+      <div class="flex-1-hidden flex-y-center h-full" :style="{ justifyContent: theme.menuStyle.horizontalPosition }">
         <menu-collapse v-if="theme.navStyle.mode !== 'horizontal'" />
-        <global-breadcrumb v-if="theme.crumbsStyle.visible" />
+        <global-breadcrumb v-if="theme.crumbsStyle.visible && theme.navStyle.mode !== 'horizontal'" />
+        <header-menu v-if="theme.navStyle.mode === 'horizontal'" />
       </div>
-      <div class="flex-1 flex justify-end h-full">
+      <div class="flex justify-end h-full">
         <gihub-site />
         <full-screen />
         <user-avatar />
@@ -25,6 +26,7 @@ import { NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, GihubSite, SettingDrawerButton } from './components';
 import { GlobalLogo } from '../common';
+import HeaderMenu from './components/HeaderMenu.vue';
 
 defineProps({
   zIndex: {

src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue

@@ -4,25 +4,13 @@
     <setting-menu-item label="分割菜单">
       <n-switch :value="theme.menuStyle.splitMenu" @update:value="handleSplitMenu" />
     </setting-menu-item>
-    <setting-menu-item label="固定头部和多页签">
-      <n-switch :value="splitMenu" :disabled="disabledSplitMenu" @update:value="handleFixedHeaderAndTab" />
-    </setting-menu-item>
-    <setting-menu-item label="头部高度">
-      <n-input-number
+    <setting-menu-item label="顶部菜单位置">
+      <n-select
         class="w-120px"
         size="small"
-        :value="theme.headerStyle.height"
-        :step="1"
-        @update:value="handleHeaderHeight"
-      />
-    </setting-menu-item>
-    <setting-menu-item label="多页签高度">
-      <n-input-number
-        class="w-120px"
-        size="small"
-        :value="theme.multiTabStyle.height"
-        :step="1"
-        @update:value="handleMultiTabHeight"
+        :value="theme.menuStyle.horizontalPosition"
+        :options="theme.menuStyle.horizontalPositionList"
+        @update:value="handleHorizontalMenuPosition"
       />
     </setting-menu-item>
     <setting-menu-item label="菜单展开宽度">
@@ -45,18 +33,40 @@
         @update:value="handleMixMenuWidth"
       />
     </setting-menu-item>
+    <setting-menu-item label="固定头部和多页签">
+      <n-switch :value="splitMenu" :disabled="disabledSplitMenu" @update:value="handleFixedHeaderAndTab" />
+    </setting-menu-item>
+    <setting-menu-item label="头部高度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.headerStyle.height"
+        :step="1"
+        @update:value="handleHeaderHeight"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="多页签高度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.multiTabStyle.height"
+        :step="1"
+        @update:value="handleMultiTabHeight"
+      />
+    </setting-menu-item>
   </n-space>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NDivider, NSpace, NSwitch, NInputNumber } from 'naive-ui';
+import { NDivider, NSpace, NSwitch, NSelect, NInputNumber } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { SettingMenuItem } from '../common';
 
 const theme = useThemeStore();
 const {
   handleSplitMenu,
+  handleHorizontalMenuPosition,
   handleFixedHeaderAndTab,
   handleHeaderHeight,
   handleMultiTabHeight,

src/layouts/BasicLayout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-layout class="h-full" has-sider>
     <global-sider v-if="theme.isVerticalNav" :z-index="3" />
-    <global-header v-if="isHorizontalMix" :z-index="2" />
+    <global-header v-if="isHorizontalMix" :z-index="4" />
     <div class="flex-1-hidden flex h-full">
       <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="3" />
       <n-scrollbar
@@ -39,6 +39,11 @@ const { scrollbar, resetScrollBehavior } = useScrollBehavior();
 const routeProps = useRouteProps();
 
 const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
+
+const headerHeight = computed(() => {
+  const { height } = theme.headerStyle;
+  return `${height}px`;
+});
 const headerAndMultiTabHeight = computed(() => {
   const {
     headerStyle: { height: hHeight },
@@ -59,7 +64,7 @@ watch(
   z-index: 11;
 }
 .sider-margin {
-  margin-top: v-bind(headerAndMultiTabHeight);
+  margin-top: v-bind(headerHeight);
 }
 .content-padding {
   padding-top: v-bind(headerAndMultiTabHeight);