refactor(projects)!: refactor global menu & support reversed-horizontal-mix-menu. close #365

src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import { useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMixMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (!menu.children?.length) {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="selectedKey"
+      :options="childLevelMenus"
+      :indent="18"
+      responsive
+      @update:value="routerPushByKeyWithMetaQuery"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <FirstLevelMenu
+      :menus="allMenus"
+      :active-menu-key="activeFirstLevelMenuKey"
+      :inverted="inverted"
+      :sider-collapse="appStore.siderCollapse"
+      :dark-mode="themeStore.darkMode"
+      :theme-color="themeStore.themeColor"
+      @select="handleSelectMixMenu"
+      @toggle-sider-collapse="appStore.toggleSiderCollapse"
+    >
+      <slot></slot>
+    </FirstLevelMenu>
+  </Teleport>
+</template>
+
+<style scoped></style>