feat: add breadcrumb navigation example

2024-07-19 01:26:13 +08:00
parent 0c245665a9
commit 9ec91ac16d
24 changed files with 188 additions and 75 deletions
--- a/packages/@core/forward/helpers/src/generate-menus.test.ts
+++ b/packages/@core/forward/helpers/src/generate-menus.test.ts
@@ -53,6 +53,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/home',
+        show: true,
        children: [],
      },
      {
@@ -65,6 +66,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/about',
+        show: true,
        children: [],
      },
    ];
@@ -94,6 +96,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/profile',
+        show: true,
        children: [],
      },
    ]);
@@ -120,6 +123,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/users/:userId',
+        show: true,
        children: [],
      },
    ]);
@@ -155,6 +159,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/old-path',
+        show: true,
        children: [],
      },
      {
@@ -167,6 +172,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/new-path',
+        show: true,
        children: [],
      },
    ]);
@@ -203,6 +209,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/about',
+        show: true,
        children: [],
      },
      {
@@ -215,6 +222,7 @@ describe('generateMenus', () => {
        parent: undefined,
        parents: undefined,
        path: '/',
+        show: true,
        children: [],
      },
    ];
--- a/packages/@core/forward/helpers/src/generate-menus.ts
+++ b/packages/@core/forward/helpers/src/generate-menus.ts
@@ -1,7 +1,7 @@
 import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
 import type { RouteRecordRaw, Router } from 'vue-router';

-import { mapTree } from '@vben-core/toolkit';
+import { filterTree, mapTree } from '@vben-core/toolkit';

 /**
 * 根据 routes 生成菜单列表
@@ -61,13 +61,18 @@ async function generateMenus(
      parent: route.parent,
      parents: route.parents,
      path: resultPath as string,
+      show: !route?.meta?.hideInMenu,
      children: resultChildren || [],
    };
  });

  // 对菜单进行排序
  menus = menus.sort((a, b) => (a.order || 999) - (b.order || 999));
-  return menus;
+
+  const finalMenus = filterTree(menus, (menu) => {
+    return !!menu.show;
+  });
+  return finalMenus;
 }

 export { generateMenus };
--- a/packages/@core/forward/helpers/src/generate-routes-frontend.test.ts
+++ b/packages/@core/forward/helpers/src/generate-routes-frontend.test.ts
@@ -5,7 +5,6 @@ import { describe, expect, it } from 'vitest';
 import {
  generateRoutesByFrontend,
  hasAuthority,
-  hasVisible,
 } from './generate-routes-frontend';

 // Mock 路由数据
@@ -51,37 +50,7 @@ describe('hasAuthority', () => {
  });
 });

-describe('hasVisible', () => {
-  it('should return true if hideInMenu is not set or false', () => {
-    expect(hasVisible(mockRoutes[0])).toBe(true);
-    expect(hasVisible(mockRoutes[2])).toBe(true);
-  });
-
-  it('should return false if hideInMenu is true', () => {
-    expect(hasVisible(mockRoutes[0].children?.[1])).toBe(false);
-  });
-});
-
 describe('generateRoutesByFrontend', () => {
-  it('should filter routes based on authority and visibility', async () => {
-    const generatedRoutes = await generateRoutesByFrontend(mockRoutes, [
-      'user',
-    ]);
-    // The user should have access to /dashboard/stats, but it should be filtered out because it's not visible
-    expect(generatedRoutes).toEqual([
-      {
-        meta: { authority: ['admin', 'user'], hideInMenu: false },
-        path: '/dashboard',
-        children: [],
-      },
-      // Note: We expect /settings to be filtered out because the user does not have 'admin' authority
-      {
-        meta: { hideInMenu: false },
-        path: '/profile',
-      },
-    ]);
-  });
-
  it('should handle routes without children', async () => {
    const generatedRoutes = await generateRoutesByFrontend(mockRoutes, [
      'user',
--- a/packages/@core/forward/helpers/src/generate-routes-frontend.ts
+++ b/packages/@core/forward/helpers/src/generate-routes-frontend.ts
@@ -12,7 +12,7 @@ async function generateRoutesByFrontend(
 ): Promise<RouteRecordRaw[]> {
  // 根据角色标识过滤路由表,判断当前用户是否拥有指定权限
  const finalRoutes = filterTree(routes, (route) => {
-    return hasVisible(route) && hasAuthority(route, roles);
+    return hasAuthority(route, roles);
  });

  if (!forbiddenComponent) {
@@ -43,14 +43,6 @@ function hasAuthority(route: RouteRecordRaw, access: string[]) {
  return canAccess || (!canAccess && menuHasVisibleWithForbidden(route));
 }

-/**
- * 判断路由是否需要在菜单中显示
- * @param route
- */
-function hasVisible(route?: RouteRecordRaw) {
-  return !route?.meta?.hideInMenu;
-}
-
 /**
 * 判断路由是否在菜单中显示，但是访问会被重定向到403
 * @param route
@@ -63,4 +55,4 @@ function menuHasVisibleWithForbidden(route: RouteRecordRaw) {
  );
 }

-export { generateRoutesByFrontend, hasAuthority, hasVisible };
+export { generateRoutesByFrontend, hasAuthority };
--- a/packages/@core/locales/src/langs/zh-CN.json
+++ b/packages/@core/locales/src/langs/zh-CN.json
@@ -169,7 +169,7 @@
      "width": "宽度",
      "visible": "显示侧边栏",
      "collapsed": "折叠菜单",
-      "collapsedShowTitle": "显示菜单名"
+      "collapsedShowTitle": "折叠显示菜单名"
    },
    "tabbar": {
      "title": "标签栏",
--- a/packages/@core/shared/design/src/design-tokens/dark/index.css
+++ b/packages/@core/shared/design/src/design-tokens/dark/index.css
@@ -122,7 +122,7 @@
  --background: 20 14.3% 4.1%;
  --background-deep: var(--background);
  --foreground: 0 0% 95%;
-  --card: 24 9.8% 10%;
+  --card: 0 0% 9%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
@@ -222,7 +222,7 @@
  --background: 20 14.3% 4.1%;
  --background-deep: var(--background);
  --foreground: 0 0% 95%;
-  --card: 24 9.8% 10%;
+  --card: 24 9.8% 6%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
@@ -247,7 +247,7 @@
  --background: 20 14.3% 4.1%;
  --background-deep: var(--background);
  --foreground: 0 0% 95%;
-  --card: 24 9.8% 10%;
+  --card: 24 9.8% 6%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
--- a/packages/@core/shared/typings/src/vue-router.d.ts
+++ b/packages/@core/shared/typings/src/vue-router.d.ts
@@ -3,6 +3,11 @@ import type { RouteRecordRaw, Router } from 'vue-router';
 import type { Component } from 'vue';

 interface RouteMeta {
+  /**
+   * 当前激活的菜单，有时候不想激活现有菜单，需要激活父级菜单时使用
+   * @default false
+   */
+  activePath?: string;
  /**
   * 是否固定标签页
   * @default false
@@ -88,7 +93,6 @@ interface RouteMeta {
   * 用于路由->菜单排序
   */
  order?: number;
-
  /**
   * 标题名称
   */
--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -40,7 +40,6 @@
    "@vben-core/hooks": "workspace:*",
    "@vben-core/icons": "workspace:*",
    "@vben-core/shadcn-ui": "workspace:*",
-    "@vben-core/toolkit": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^10.11.0",
    "vue": "^3.4.32"
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -253,7 +253,7 @@ function handleMouseleave() {
      },
    ]"
    :style="style"
-    class="border-border fixed left-0 top-0 h-full border-r transition-all duration-150"
+    class="fixed left-0 top-0 h-full transition-all duration-150"
    @mouseenter="handleMouseenter"
    @mouseleave="handleMouseleave"
  >
@@ -277,10 +277,10 @@ function handleMouseleave() {
      v-if="isSidebarMixed"
      ref="asideRef"
      :class="{
-        'border-r': extraVisible,
+        'border-l': extraVisible,
      }"
      :style="extraStyle"
-      class="border-border bg-sidebar fixed top-0 h-full overflow-hidden transition-all duration-200"
+      class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-r transition-all duration-200"
    >
      <SidebarCollapseButton
        v-if="isSidebarMixed && expandOnHover"
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@@ -106,6 +106,7 @@ onBeforeUnmount(() => {
    <div v-show="!showTooltip" :class="[e('content')]">
      <VbenMenuBadge
        v-if="rootMenu.props.mode !== 'horizontal'"
+        class="right-2"
        v-bind="props"
      />
      <VbenIcon :class="nsMenu.e('icon')" :icon="icon" fallback />
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -507,12 +507,12 @@ $namespace: vben;
    }

    &.is-light {
-      --menu-item-active-color: hsl(var(--primary));
-      --menu-item-active-background-color: hsl(var(--primary) / 15%);
+      --menu-item-active-color: hsl(var(--primary-foreground));
+      --menu-item-active-background-color: hsl(var(--primary));
      --menu-item-hover-background-color: hsl(var(--accent));
      --menu-item-hover-color: hsl(var(--primary));
-      --menu-submenu-active-color: hsl(var(--primary));
-      --menu-submenu-active-background-color: hsl(var(--primary) / 15%);
+      --menu-submenu-active-color: hsl(var(--primary-foreground));
+      --menu-submenu-active-background-color: hsl(var(--primary));
      --menu-submenu-hover-color: hsl(var(--primary));
      --menu-submenu-hover-background-color: hsl(var(--accent));
    }
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -69,16 +69,17 @@ $namespace: vben;

  &.is-dark {
    .#{$namespace}-normal-menu__item {
-      color: hsl(var(--foreground) / 80%);
+      @apply text-foreground/80;
+      // color: hsl(var(--foreground) / 80%);

      &:not(.is-active):hover {
-        color: hsl(var(--primary-foreground));
+        @apply text-foreground;
      }

      &.is-active {
        .#{$namespace}-normal-menu__name,
        .#{$namespace}-normal-menu__icon {
-          color: hsl(var(--primary-foreground));
+          @apply text-foreground;
        }
      }
    }
@@ -117,11 +118,11 @@ $namespace: vben;
      border-color 0.15s ease;

    &.is-active {
-      @apply text-primary bg-primary/15 dark:bg-accent;
+      @apply text-primary bg-primary dark:bg-accent;

      .#{$namespace}-normal-menu__name,
      .#{$namespace}-normal-menu__icon {
-        @apply text-primary font-semibold;
+        @apply text-primary-foreground font-semibold;
      }
    }

--- a/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
@@ -56,6 +56,7 @@ const hasChildren = computed(() => {
        :badge="menu.badge"
        :badge-type="menu.badgeType"
        :badge-variants="menu.badgeVariants"
+        class="right-6"
      />
    </template>
    <template #title>{{ menu.name }}</template>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
@@ -43,13 +43,13 @@ const badgeStyle = computed(() => {
 });
 </script>
 <template>
-  <span v-if="isDot || badge" :class="$attrs.class" class="absolute right-6">
+  <span v-if="isDot || badge" :class="$attrs.class" class="absolute">
    <BadgeDot v-if="isDot" :dot-class="badgeClass" :dot-style="badgeStyle" />
    <div
      v-else
      :class="badgeClass"
      :style="badgeStyle"
-      class="text-primary-foreground rounded-xl px-1.5 py-0.5 text-xs"
+      class="text-primary-foreground flex-center rounded-xl px-1.5 py-0.5 text-[10px]"
    >
      {{ badge }}
    </div>
--- a/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
+++ b/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
@@ -80,14 +80,19 @@ function useExtraMenu() {

  watch(
    () => route.path,
-    () => {
+    (path) => {
+      const currentPath = path;
+      // if (preferences.sidebar.expandOnHover) {
+      //   return;
+      // }
      const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
        menus.value,
-        route.path,
+        currentPath,
      );
      extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
      extraMenus.value = rootMenu?.children ?? [];
    },
+    { immediate: true },
  );

  return {
--- a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
+++ b/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -57,7 +57,7 @@ function useMixedMenu() {
   * 侧边菜单激活路径
   */
  const sidebarActive = computed(() => {
-    return route.path;
+    return route?.meta?.activePath ?? route.path;
  });

  /**
@@ -104,9 +104,11 @@ function useMixedMenu() {

  watch(
    () => route.path,
-    (path: string) => {
-      calcSideMenus(path);
+    (path) => {
+      const currentPath = (route?.meta?.activePath as string) ?? path;
+      calcSideMenus(currentPath);
    },
+    { immediate: true },
  );

  // 初始化计算侧边菜单
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
@@ -27,7 +27,7 @@ const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
  </SwitchItem>
  <SwitchItem
    v-model="sidebarCollapsedShowTitle"
-    :disabled="!sidebarEnable || disabled"
+    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
  >
    {{ $t('preferences.sidebar.collapsedShowTitle') }}
  </SwitchItem>