Support async permission checks in route menu generator (#7688)

#### What type of PR is this?

/area ui
/kind feature
/milestone 2.21.x

#### What this PR does / why we need it:

Support async permission checks in route menu generator

example:

```ts
{
  path: "",
  name: "Foo",
  component: Foo,
  meta: {
    title: "Foo",
    searchable: true,
    permissions: async () => {
      const { data } = await checkPermission();
      return data;
    },
    menu: {
      name: "Foo",
      group: "content",
      icon: markRaw(MingcuteBook2Line),
      priority: 4,
      mobile: false,
    },
  },
}
```

#### Which issue(s) this PR fixes:

Fixes #

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
开发者相关：路由的权限检查支持函数
```

Author: ruibaby

ui/console-src/layouts/BasicLayout.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
+import MenuLoading from "@/components/menu/MenuLoading.vue";
 import { RoutesMenu } from "@/components/menu/RoutesMenu";
 import { useRouteMenuGenerator } from "@/composables/use-route-menu-generator";
 import MobileMenu from "@/layouts/MobileMenu.vue";
@@ -29,7 +30,7 @@ useEventListener(document, "keydown", (e: KeyboardEvent) => {
   }
 });
 
-const { menus, minimenus } = useRouteMenuGenerator(coreMenuGroups);
+const { data, isLoading } = useRouteMenuGenerator(coreMenuGroups);
 
 // aside scroll
 const navbarScroller = ref();
@@ -95,7 +96,8 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <RoutesMenu :menus="menus" />
+        <MenuLoading v-if="isLoading" />
+        <RoutesMenu v-else :menus="data?.menus || []" />
       </div>
       <div class="sidebar__profile">
         <UserProfileBanner platform="console" />
@@ -112,7 +114,11 @@ onMounted(() => {
         </RouterLink>
       </footer>
     </main>
-    <MobileMenu :menus="menus" :minimenus="minimenus" platform="console" />
+    <MobileMenu
+      :menus="data?.menus || []"
+      :minimenus="data?.minimenus || []"
+      platform="console"
+    />
   </div>
   <GlobalSearchModal
     v-if="globalSearchVisible"

ui/console-src/modules/system/tools/Tools.vue

@@ -11,32 +11,63 @@ import {
   VEntityField,
   VPageHeader,
 } from "@halo-dev/components";
-import { computed } from "vue";
+import { onMounted, ref } from "vue";
 import type { RouteRecordRaw } from "vue-router";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 const roleStore = useRoleStore();
 
 const { uiPermissions } = roleStore.permissions;
+const routes = ref<RouteRecordRaw[]>([]);
 
-function isRouteValid(route?: RouteRecordRaw) {
+async function isRouteValid(route?: RouteRecordRaw) {
   if (!route) return false;
   const { meta } = route;
   if (!meta?.menu) return false;
-  return (
-    !meta.permissions || hasPermission(uiPermissions, meta.permissions, true)
-  );
+
+  // If permissions doesn't exist or is empty
+  if (!meta.permissions) return true;
+
+  // Check if permissions is a function
+  if (typeof meta.permissions === "function") {
+    try {
+      return await meta.permissions(uiPermissions);
+    } catch (e) {
+      console.error(
+        `Error checking permissions for route ${String(route.name)}:`,
+        e
+      );
+      return false;
+    }
+  }
+
+  // Default behavior for array of permissions
+  return hasPermission(uiPermissions, meta.permissions as string[], true);
 }
 
-const routes = computed(() => {
+// Use async function to set routes
+const fetchRoutes = async () => {
   const matchedRoute = router.currentRoute.value.matched[0];
+  const childRoutes =
+    router
+      .getRoutes()
+      .find((route) => route.name === matchedRoute.name)
+      ?.children.filter((route) => route.path !== "") || [];
+
+  const validRoutes: RouteRecordRaw[] = [];
+  for (const route of childRoutes) {
+    if (await isRouteValid(route)) {
+      validRoutes.push(route);
+    }
+  }
+
+  routes.value = validRoutes;
+};
 
-  return router
-    .getRoutes()
-    .find((route) => route.name === matchedRoute.name)
-    ?.children.filter((route) => route.path !== "")
-    .filter((route) => isRouteValid(route));
+// Fetch routes on component mount
+onMounted(() => {
+  fetchRoutes();
 });
 </script>
 

ui/env.d.ts

@@ -24,7 +24,9 @@ declare module "vue-router" {
     title?: string;
     description?: string;
     searchable?: boolean;
-    permissions?: string[];
+    permissions?:
+      | string[]
+      | ((uiPermissions: string[]) => boolean | Promise<boolean>);
     core?: boolean;
     hideFooter?: boolean;
     menu?: {

ui/src/components/menu/MenuLoading.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="p-3">
+    <ul v-for="y in 2" :key="y" class="mt-5 first:mt-0">
+      <li
+        v-for="x in 5"
+        :key="x"
+        class="flex h-[36.8px] items-center rounded-base py-[0.4rem]"
+      >
+        <div class="mr-3 size-5 animate-pulse rounded-lg bg-gray-200"></div>
+        <div
+          class="h-5 animate-pulse rounded-lg bg-gray-200"
+          :style="{
+            width: `${Math.random() * 50 + 10}%`,
+          }"
+        ></div>
+      </li>
+    </ul>
+  </div>
+</template>