feat(other): The menu supports jumping to external links and fixing some known problems

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

@@ -3,7 +3,9 @@ import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { Menu, MenuProps } from '@vben-core/menu-ui';
 
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+
+import { useNavigation } from './use-navigation';
 
 interface Props extends MenuProps {
   collspae?: boolean;
@@ -13,10 +15,10 @@ interface Props extends MenuProps {
 defineProps<Props>();
 
 const route = useRoute();
-const router = useRouter();
+const { navigation } = useNavigation();
 
-function handleSelect(key: string) {
-  router.push(key);
+async function handleSelect(key: string) {
+  await navigation(key);
 }
 </script>
 

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

@@ -3,17 +3,18 @@ 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 { useRoute } from 'vue-router';
 
 import { findRootMenuByPath } from './helper';
+import { useNavigation } from './use-navigation';
 
 function useExtraMenu() {
   const accessStore = useAccessStore();
+  const { navigation } = useNavigation();
 
   const menus = computed(() => accessStore.getAccessMenus);
 
   const route = useRoute();
-  const router = useRouter();
   const extraMenus = ref<MenuRecordRaw[]>([]);
   const extraVisible = ref<boolean>(false);
   const extraActiveMenu = ref('');
@@ -22,14 +23,14 @@ function useExtraMenu() {
    * 选择混合菜单事件
    * @param menu
    */
-  const handleMixedMenuSelect = (menu: MenuRecordRaw) => {
+  const handleMixedMenuSelect = async (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);
+      await navigation(menu.path);
     }
   };
 

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

@@ -3,15 +3,15 @@ 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 { useRoute } from 'vue-router';
 
 import { findRootMenuByPath } from './helper';
+import { useNavigation } from './use-navigation';
 
 function useMixedMenu() {
   const accessStore = useAccessStore();
-
+  const { navigation } = useNavigation();
   const route = useRoute();
-  const router = useRouter();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
 
@@ -75,7 +75,7 @@ function useMixedMenu() {
    */
   const handleMenuSelect = (key: string, mode?: string) => {
     if (!isMixedNav.value || mode === 'vertical') {
-      router.push(key);
+      navigation(key);
       return;
     }
 
@@ -83,7 +83,7 @@ function useMixedMenu() {
     rootMenuPath.value = rootMenu?.path ?? '';
     splitSideMenus.value = rootMenu?.children ?? [];
     if (splitSideMenus.value.length === 0) {
-      router.push(key);
+      navigation(key);
     }
   };
 

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

@@ -0,0 +1,19 @@
+import { isHttpUrl, openWindow } from '@vben-core/toolkit';
+
+import { useRouter } from 'vue-router';
+
+function useNavigation() {
+  const router = useRouter();
+
+  const navigation = async (path: string) => {
+    if (isHttpUrl(path)) {
+      openWindow(path, { target: '_blank' });
+    } else {
+      await router.push(path);
+    }
+  };
+
+  return { navigation };
+}
+
+export { useNavigation };