feat(projects): add beadcrumb

src/layouts/modules/global-breadcrumb/index.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { RouteKey } from '@elegant-router/types';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'GlobalBreadcrumb'
+});
+
+const route = useRouteStore();
+const { routerPushByKey } = useRouterPush();
+
+function handleClickMenu(key: RouteKey) {
+  routerPushByKey(key);
+}
+</script>
+
+<template>
+  <ABreadcrumb>
+    <ABreadcrumbItem v-for="item in route.breadcrumbs" :key="item.key">
+      <div class="i-flex-y-center align-middle">
+        <component :is="item.icon" class="mr-4px text-icon" />
+        {{ item.label }}
+      </div>
+      <template v-if="item.children?.length" #overlay>
+        <AMenu>
+          <AMenuItem v-for="option in item.children" :key="option.key" @click="handleClickMenu(option.routeKey)">
+            <div class="flex-y-center gap-12px">
+              <component :is="option.icon" />
+              <span>{{ option.label }}</span>
+            </div>
+          </AMenuItem>
+        </AMenu>
+      </template>
+    </ABreadcrumbItem>
+  </ABreadcrumb>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-header/index.vue

@@ -2,7 +2,7 @@
 import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-// import GlobalLogo from '../global-logo/index.vue';
+import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
 
@@ -19,6 +19,7 @@ defineOptions({
   <DarkModeContainer class="flex-y-center h-full shadow-header">
     <div class="flex-1-hidden flex-y-center h-full">
       <MenuToggler :collapsed="app.siderCollapse" @click="app.toggleSiderCollapse" />
+      <GlobalBreadcrumb />
     </div>
     <div class="flex-y-center justify-end h-full">
       <FullScreen :full="isFullscreen" @click="toggle" />

src/layouts/modules/global-menu/vertical-menu.vue

@@ -6,7 +6,6 @@ import type { RouteKey } from '@elegant-router/types';
 import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
-import { getSelectedMenuKeyPath } from './shared';
 
 defineOptions({
   name: 'VerticalMenu'
@@ -33,7 +32,7 @@ const openKeys = computed(() => {
 
   if (!selectedKey) return [];
 
-  return getSelectedMenuKeyPath(selectedKey, routeStore.antdMenus);
+  return routeStore.getSelectedMenuKeyPath(selectedKey);
 });
 
 function handleClickMenu(menuInfo: MenuInfo) {
@@ -48,7 +47,7 @@ function handleClickMenu(menuInfo: MenuInfo) {
     <div class="h-full overflow-y-auto">
       <AMenu
         mode="inline"
-        :items="routeStore.antdMenus"
+        :items="routeStore.menus"
         :selected-keys="selectedKeys"
         :open-keys="openKeys"
         :inline-collapsed="app.siderCollapse"

src/layouts/modules/global-tab/context-menu.vue

@@ -103,9 +103,9 @@ const dropdownAction: Record<App.Global.DropdownKey, () => void> = {
           :disabled="option.disabled"
           @click="dropdownAction[option.key]"
         >
-          <div class="flex-y-center">
+          <div class="flex-y-center gap-12px">
             <SvgIcon :icon="option.icon" class="text-icon" />
-            <span class="pl-12px">{{ option.label }}</span>
+            <span>{{ option.label }}</span>
           </div>
         </AMenuItem>
       </AMenu>

src/router/elegant/routes.ts

@@ -115,7 +115,8 @@ export const generatedRoutes: GeneratedRoute[] = [
           title: 'manage_user-detail',
           i18nKey: 'route.manage_user-detail',
           hideInMenu: true,
-          roles: ['R_ADMIN']
+          roles: ['R_ADMIN'],
+          activeMenu: 'manage_user'
         }
       }
     ]

src/router/guard/permission.ts

@@ -98,7 +98,7 @@ async function createAuthRouteGuard(
     return true;
   }
 
-  // 3. If the route is initialized, check whether the "not-found" route exists.
+  // 3. If the route is initialized, check whether the route exists.
   if (route.isInitAuthRoute && isNotFoundRoute) {
     const exist = await route.getIsAuthRouteExist(to.path as RoutePath);
 

src/store/modules/route/index.ts

@@ -1,4 +1,4 @@
-import { ref, watch, effectScope, onScopeDispose } from 'vue';
+import { ref, watch, effectScope, onScopeDispose, computed } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useBoolean } from '@sa/hooks';
@@ -11,9 +11,11 @@ import { fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
 import {
   filterAuthRoutesByRoles,
   getGlobalMenusByAuthRoutes,
-  transformGlobalMenusToAntdMenu,
+  updateLocaleOfGlobalMenus,
   getCacheRouteNames,
-  isRouteExistByRouteName
+  isRouteExistByRouteName,
+  getSelectedMenuKeyPathByKey,
+  getBreadcrumbsByRoute
 } from './shared';
 import { useAppStore } from '../app';
 import { useAuthStore } from '../auth';
@@ -49,27 +51,20 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   /**
    * global menus
    */
-  const globalMenus = ref<App.Global.Menu[]>([]);
+  const menus = ref<App.Global.Menu[]>([]);
 
   /**
    * get global menus
    */
   function getGlobalMenus(routes: ElegantConstRoute[]) {
-    globalMenus.value = getGlobalMenusByAuthRoutes(routes);
-
-    getAntdMenus();
+    menus.value = getGlobalMenusByAuthRoutes(routes);
   }
 
   /**
-   * antd menus
-   */
-  const antdMenus = ref<App.Global.AntdMenu[]>([]);
-
-  /**
-   * get antd menus
+   * refresh locale of global menus
    */
-  function getAntdMenus() {
-    antdMenus.value = transformGlobalMenusToAntdMenu(globalMenus.value);
+  function refreshLocaleOfGlobalMenus() {
+    menus.value = updateLocaleOfGlobalMenus(menus.value);
   }
 
   /**
@@ -85,6 +80,11 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     cacheRoutes.value = getCacheRouteNames([...constantVueRoutes, ...routes]);
   }
 
+  /**
+   * global breadcrumbs
+   */
+  const breadcrumbs = computed(() => getBreadcrumbsByRoute(router.currentRoute.value, menus.value));
+
   /**
    * reset store
    */
@@ -197,13 +197,21 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     return data;
   }
 
+  /**
+   * get selected menu key path
+   * @param selectedKey selected menu key
+   */
+  function getSelectedMenuKeyPath(selectedKey: string) {
+    return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
+  }
+
   // watch store
   scope.run(() => {
     // update menus when locale changed
     watch(
       () => app.locale,
       () => {
-        getAntdMenus();
+        refreshLocaleOfGlobalMenus();
       }
     );
   });
@@ -217,12 +225,14 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
 
   return {
     resetStore,
-    antdMenus,
-    cacheRoutes,
     routeHome,
+    menus,
+    cacheRoutes,
+    breadcrumbs,
     initAuthRoute,
     isInitAuthRoute,
     setIsInitAuthRoute,
-    getIsAuthRouteExist
+    getIsAuthRouteExist,
+    getSelectedMenuKeyPath
   };
 });