feat: header mixed layout (#5263)

* feat: new layout header-mixed

* fix: header-mixed layout update

* feat: layout preference update

* fix: extra menus follow layout setting

packages/effects/layouts/src/basic/menu/use-mixed-menu.ts

@@ -15,12 +15,16 @@ function useMixedMenu() {
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
+  const mixedRootMenuPath = ref<string>('');
+  const mixExtraMenus = ref<MenuRecordRaw[]>([]);
   /** 记录当前顶级菜单下哪个子菜单最后激活 */
   const defaultSubMap = new Map<string, string>();
-  const { isMixedNav } = usePreferences();
+  const { isMixedNav, isHeaderMixedNav } = usePreferences();
 
   const needSplit = computed(
-    () => preferences.navigation.split && isMixedNav.value,
+    () =>
+      (preferences.navigation.split && isMixedNav.value) ||
+      isHeaderMixedNav.value,
   );
 
   const sidebarVisible = computed(() => {
@@ -54,6 +58,10 @@ function useMixedMenu() {
     return needSplit.value ? splitSideMenus.value : menus.value;
   });
 
+  const mixHeaderMenus = computed(() => {
+    return isHeaderMixedNav.value ? sidebarMenus.value : headerMenus.value;
+  });
+
   /**
    * 侧边菜单激活路径
    */
@@ -61,6 +69,10 @@ function useMixedMenu() {
     return (route?.meta?.activePath as string) ?? route.path;
   });
 
+  const mixedSidebarActive = computed(() => {
+    return mixedRootMenuPath.value || sidebarActive.value;
+  });
+
   /**
    * 头部菜单激活路径
    */
@@ -118,6 +130,9 @@ function useMixedMenu() {
     if (!rootMenu) {
       rootMenu = menus.value.find((item) => item.path === path);
     }
+    const result = findRootMenuByPath(rootMenu?.children || [], path, 1);
+    mixedRootMenuPath.value = result.rootMenuPath ?? '';
+    mixExtraMenus.value = result.rootMenu?.children ?? [];
     rootMenuPath.value = rootMenu?.path ?? '';
     splitSideMenus.value = rootMenu?.children ?? [];
   }
@@ -145,6 +160,9 @@ function useMixedMenu() {
     headerMenus,
     sidebarActive,
     sidebarMenus,
+    mixedSidebarActive,
+    mixHeaderMenus,
+    mixExtraMenus,
     sidebarVisible,
   };
 }