chore: init project

packages/business/layouts/src/basic/menu/extra-menu.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import { Menu, MenuProps } from '@vben-core/menu-ui';
+
+import { useRoute, useRouter } from 'vue-router';
+
+interface Props extends MenuProps {
+  collspae?: boolean;
+  menus: MenuRecordRaw[];
+}
+
+defineProps<Props>();
+
+const route = useRoute();
+const router = useRouter();
+
+function handleSelect(key: string) {
+  router.push(key);
+}
+</script>
+
+<template>
+  <Menu
+    :rounded="rounded"
+    :collapse="collapse"
+    :default-active="route.path"
+    :menus="menus"
+    :theme="theme"
+    mode="vertical"
+    @select="handleSelect"
+  />
+</template>

packages/business/layouts/src/basic/menu/helper.ts

@@ -0,0 +1,37 @@
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+function findMenuByPath(
+  list: MenuRecordRaw[],
+  path?: string,
+): MenuRecordRaw | null {
+  for (const menu of list) {
+    if (menu.path === path) {
+      return menu;
+    }
+    if (menu?.children?.length) {
+      const findMenu = findMenuByPath(menu.children, path);
+      if (findMenu) {
+        return findMenu;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找根菜单
+ * @param menus
+ * @param path
+ */
+function findRootMenuByPath(menus: MenuRecordRaw[], path?: string) {
+  const findMenu = findMenuByPath(menus, path);
+  const rootMenuPath = findMenu?.parents?.[0];
+  const rootMenu = menus.find((item) => item.path === rootMenuPath);
+  return {
+    findMenu,
+    rootMenu,
+    rootMenuPath,
+  };
+}
+
+export { findMenuByPath, findRootMenuByPath };

packages/business/layouts/src/basic/menu/index.ts

@@ -0,0 +1,5 @@
+export { default as LayoutExtraMenu } from './extra-menu.vue';
+export { default as LayoutMenu } from './menu.vue';
+export { default as LayoutMixedMenu } from './mixed-menu.vue';
+export * from './use-extra-menu';
+export * from './use-mixed-menu';

packages/business/layouts/src/basic/menu/menu.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import { Menu, MenuProps } from '@vben-core/menu-ui';
+
+interface Props extends MenuProps {
+  menus?: MenuRecordRaw[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  menus: () => [],
+});
+
+const emit = defineEmits<{
+  select: [string, string?];
+}>();
+
+function handleMenuSelect(key: string) {
+  emit('select', key, props.mode);
+}
+</script>
+
+<template>
+  <Menu
+    :rounded="rounded"
+    :collapse-show-title="collapseShowTitle"
+    :collapse="collapse"
+    :default-active="defaultActive"
+    :menus="menus"
+    :theme="theme"
+    :mode="mode"
+    @select="handleMenuSelect"
+  />
+</template>

packages/business/layouts/src/basic/menu/mixed-menu.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { NormalMenuProps } from '@vben-core/menu-ui';
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import { NormalMenu } from '@vben-core/menu-ui';
+
+import { useAccessStore } from '@vben/stores';
+import { computed, onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { findMenuByPath } from './helper';
+
+interface Props extends NormalMenuProps {}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  defaultSelect: [MenuRecordRaw, MenuRecordRaw?];
+  enter: [MenuRecordRaw];
+  select: [MenuRecordRaw];
+}>();
+
+const accessStore = useAccessStore();
+const route = useRoute();
+
+const menus = computed(() => accessStore.getAccessMenus);
+
+function handleSelect(menu: MenuRecordRaw) {
+  emit('select', menu);
+}
+
+onBeforeMount(() => {
+  const menu = findMenuByPath(menus.value, route.path);
+  if (menu) {
+    const rootMenu = menus.value.find(
+      (item) => item.path === menu.parents?.[0],
+    );
+    emit('defaultSelect', menu, rootMenu);
+  }
+});
+</script>
+
+<template>
+  <NormalMenu
+    :rounded="rounded"
+    :collapse="collapse"
+    :menus="menus"
+    :active-path="activePath"
+    :theme="theme"
+    @select="handleSelect"
+    @enter="(menu) => emit('enter', menu)"
+  />
+</template>

packages/business/layouts/src/basic/menu/use-extra-menu.ts

@@ -0,0 +1,90 @@
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import { preference } from '@vben/preference';
+import { useAccessStore } from '@vben/stores';
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { findRootMenuByPath } from './helper';
+
+function useExtraMenu() {
+  const accessStore = useAccessStore();
+
+  const menus = computed(() => accessStore.getAccessMenus);
+
+  const route = useRoute();
+  const router = useRouter();
+  const extraMenus = ref<MenuRecordRaw[]>([]);
+  const extraVisible = ref<boolean>(false);
+  const extraActiveMenu = ref('');
+
+  /**
+   * 选择混合菜单事件
+   * @param menu
+   */
+  const handleMixedMenuSelect = (menu: MenuRecordRaw) => {
+    extraMenus.value = menu?.children ?? [];
+    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+    const hasChildren = extraMenus.value.length > 0;
+
+    extraVisible.value = hasChildren;
+    if (!hasChildren) {
+      router.push(menu.path);
+    }
+  };
+
+  /**
+   * 选择默认菜单事件
+   * @param menu
+   * @param rootMenu
+   */
+  const handleDefaultSelect = (
+    menu: MenuRecordRaw,
+    rootMenu?: MenuRecordRaw,
+  ) => {
+    extraMenus.value = rootMenu?.children ?? [];
+    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+
+    if (preference.sideExpandOnHover) {
+      extraVisible.value = extraMenus.value.length > 0;
+    }
+  };
+
+  /**
+   * 侧边菜单鼠标移出事件
+   */
+  const handleSideMouseLeave = () => {
+    if (preference.sideExpandOnHover) {
+      return;
+    }
+    extraVisible.value = false;
+
+    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+      menus.value,
+      route.path,
+    );
+    extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
+    extraMenus.value = rootMenu?.children ?? [];
+  };
+
+  const handleMenuMouseEnter = (menu: MenuRecordRaw) => {
+    if (!preference.sideExpandOnHover) {
+      const { findMenu } = findRootMenuByPath(menus.value, menu.path);
+      extraMenus.value = findMenu?.children ?? [];
+      extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+      extraVisible.value = extraMenus.value.length > 0;
+    }
+  };
+
+  return {
+    extraActiveMenu,
+    extraMenus,
+    extraVisible,
+    handleDefaultSelect,
+    handleMenuMouseEnter,
+    handleMixedMenuSelect,
+    handleSideMouseLeave,
+  };
+}
+
+export { useExtraMenu };

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

@@ -0,0 +1,118 @@
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import { preference, usePreference } from '@vben/preference';
+import { useAccessStore } from '@vben/stores';
+import { computed, onBeforeMount, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { findRootMenuByPath } from './helper';
+
+function useMixedMenu() {
+  const accessStore = useAccessStore();
+
+  const route = useRoute();
+  const router = useRouter();
+  const splitSideMenus = ref<MenuRecordRaw[]>([]);
+  const rootMenuPath = ref<string>('');
+
+  const { isMixedNav } = usePreference();
+
+  const sideVisible = computed(() => {
+    if (isMixedNav.value) {
+      return preference.sideVisible && splitSideMenus.value.length > 0;
+    }
+    return preference.sideVisible;
+  });
+  const menus = computed(() => accessStore.getAccessMenus);
+
+  /**
+   * 头部菜单
+   */
+  const headerMenus = computed(() => {
+    if (!isMixedNav.value) {
+      return menus.value;
+    }
+    return menus.value.map((item) => {
+      return {
+        ...item,
+        children: [],
+      };
+    });
+  });
+
+  /**
+   * 侧边菜单
+   */
+  const sideMenus = computed(() => {
+    if (!isMixedNav.value) {
+      return menus.value;
+    }
+
+    return splitSideMenus.value;
+  });
+
+  /**
+   * 侧边菜单激活路径
+   */
+  const sideActive = computed(() => {
+    return route.path;
+  });
+
+  /**
+   * 头部菜单激活路径
+   */
+  const headerActive = computed(() => {
+    if (!isMixedNav.value) {
+      return route.path;
+    }
+    return rootMenuPath.value;
+  });
+
+  /**
+   * 菜单点击事件处理
+   * @param key 菜单路径
+   * @param mode 菜单模式
+   */
+  const handleMenuSelect = (key: string, mode?: string) => {
+    if (!isMixedNav.value || mode === 'vertical') {
+      router.push(key);
+      return;
+    }
+
+    const rootMenu = menus.value.find((item) => item.path === key);
+    rootMenuPath.value = rootMenu?.path ?? '';
+    splitSideMenus.value = rootMenu?.children ?? [];
+    if (splitSideMenus.value.length === 0) {
+      router.push(key);
+    }
+  };
+
+  /**
+   * 计算侧边菜单
+   * @param path 路由路径
+   */
+  function calcSideMenus(path: string = route.path) {
+    let { rootMenu } = findRootMenuByPath(menus.value, path);
+    if (!rootMenu) {
+      rootMenu = menus.value.find((item) => item.path === path);
+    }
+    rootMenuPath.value = rootMenu?.path ?? '';
+    splitSideMenus.value = rootMenu?.children ?? [];
+  }
+
+  // 初始化计算侧边菜单
+  onBeforeMount(() => {
+    calcSideMenus();
+  });
+
+  return {
+    handleMenuSelect,
+    headerActive,
+    headerMenus,
+    sideActive,
+    sideMenus,
+    sideVisible,
+  };
+}
+
+export { useMixedMenu };