fix: breadcrumb is displayed despite the menu being hidden (#3733)

No name

2024-04-11 e8a86ec8b996387c9c2d167344eb1e7a010d94fb

 src/layouts/default/header/components/Breadcrumb.vue

@@ -1,13 +1,13 @@
<template>
  <div :class="[prefixCls, `${prefixCls}--${theme}`]">
    <a-breadcrumb :routes="routes">
      <template #itemRender="{ route, routes, paths }">
        <Icon :icon="route.meta.icon" v-if="getShowBreadCrumbIcon && route.meta.icon" />
        <span v-if="!hasRedirect(routes, route)">
          {{ t(route.name || route.meta.title) }}
      <template #itemRender="{ route, routes: routesMatched, paths }">
        <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
        <span v-if="!hasRedirect(routesMatched, route)">
          {{ t(route.meta.title || route.name) }}
        </span>
        <router-link v-else to="" @click="handleClick(route, paths, $event)">
          {{ t(route.name || route.meta.title) }}
        <router-link v-else to="" @click="handleClick(route, paths, $event as Event)">
          {{ t(route.meta.title || route.name) }}
        </router-link>
      </template>
    </a-breadcrumb>
@@ -15,28 +15,26 @@
</template>
<script lang="ts">
  import type { RouteLocationMatched } from 'vue-router';
  import type { Menu } from '/@/router/types';
  import { useRouter } from 'vue-router';
  import type { Menu } from '@/router/types';

  import { defineComponent, ref, watchEffect } from 'vue';

  import { Breadcrumb } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import Icon from '@/components/Icon/Icon.vue';

  import { PageEnum } from '/@/enums/pageEnum';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useRootSetting } from '@/hooks/setting/useRootSetting';
  import { useGo } from '@/hooks/web/usePage';
  import { useI18n } from '@/hooks/web/useI18n';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { useGo } from '/@/hooks/web/usePage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useRouter } from 'vue-router';
  import { propTypes } from '@/utils/propTypes';
  import { isString } from '@/utils/is';
  import { filter } from '@/utils/helper/treeHelper';
  import { getMenus } from '@/router/menus';

  import { propTypes } from '/@/utils/propTypes';
  import { isString } from '/@/utils/is';
  import { filter } from '/@/utils/helper/treeHelper';
  import { getMenus } from '/@/router/menus';

  import { REDIRECT_NAME } from '/@/router/constant';
  import { getAllParentPath } from '/@/router/helper/menuHelper';
  import { REDIRECT_NAME } from '@/router/constant';
  import { getAllParentPath } from '@/router/helper/menuHelper';

  export default defineComponent({
    name: 'LayoutBreadcrumb',
@@ -49,11 +47,13 @@
      const { currentRoute } = useRouter();
      const { prefixCls } = useDesign('layout-breadcrumb');
      const { getShowBreadCrumbIcon } = useRootSetting();
      const go = useGo();

      const { t } = useI18n();
      watchEffect(async () => {
        if (currentRoute.value.name === REDIRECT_NAME) return;
        const menus = await getMenus();

        const routeMatched = currentRoute.value.matched;
        const cur = routeMatched?.[routeMatched.length - 1];
        let path = currentRoute.value.path;
@@ -63,26 +63,23 @@
        }

        const parent = getAllParentPath(menus, path);

        const filterMenus = menus.filter((item) => item.path === parent[0]);

        const matched = getMatched(filterMenus, parent) as any;

        if (!matched || matched.length === 0) return;
        if (!matched || matched.length === 0){
          routes.value = [];
          return;
        }

        let breadcrumbList = filterItem(matched);

        const filterBreadcrumbList = breadcrumbList.filter(
          (item) => item.path !== PageEnum.BASE_HOME
        );
        const breadcrumbList = filterItem(matched);

        if (currentRoute.value.meta?.currentActiveMenu) {
          filterBreadcrumbList.push(({
          breadcrumbList.push({
            ...currentRoute.value,
            name: currentRoute.value.meta?.title || currentRoute.value.name,
          } as unknown) as RouteLocationMatched);
          } as unknown as RouteLocationMatched);
        }
        routes.value = filterBreadcrumbList;
        routes.value = breadcrumbList;
      });

      function getMatched(menus: Menu[], parent: string[]) {
@@ -102,21 +99,17 @@
      }

      function filterItem(list: RouteLocationMatched[]) {
        let resultList = filter(list, (item) => {
          const { meta } = item;

        return filter(list, (item) => {
          const { meta, name } = item;
          if (!meta) {
            return false;
            return !!name;
          }

          const { title, hideBreadcrumb, hideMenu } = meta;
          if (!title || hideBreadcrumb || hideMenu) {
            return false;
          }
          return true;
        }).filter((item) => !item.meta?.hideBreadcrumb || !item.meta?.hideMenu);

        return resultList;
        }).filter((item) => !item.meta?.hideBreadcrumb);
      }

      function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
@@ -131,7 +124,6 @@
          return;
        }

        const go = useGo();
        if (redirect && isString(redirect)) {
          go(redirect);
        } else {
@@ -149,13 +141,14 @@
      }

      function hasRedirect(routes: RouteLocationMatched[], route: RouteLocationMatched) {
        if (routes.indexOf(route) === routes.length - 1) {
          return false;
        }
        return true;
        return routes.indexOf(route) !== routes.length - 1;
      }

      return { routes, t, prefixCls, getShowBreadCrumbIcon, handleClick, hasRedirect };
      function getIcon(route) {
        return route.icon || route.meta?.icon;
      }

      return { routes, t, prefixCls, getIcon, getShowBreadCrumbIcon, handleClick, hasRedirect };
    },
  });
</script>
@@ -164,8 +157,8 @@

  .@{prefix-cls} {
    display: flex;
    padding: 0 8px;
    align-items: center;
    padding: 0 8px;

    .ant-breadcrumb-link {
      .anticon {
@@ -179,7 +172,7 @@
        color: @breadcrumb-item-normal-color;

        a {
          color: rgba(0, 0, 0, 0.65);
          color: rgb(0 0 0 / 65%);

          &:hover {
            color: @primary-color;
@@ -194,10 +187,10 @@

    &--dark {
      .ant-breadcrumb-link {
        color: rgba(255, 255, 255, 0.6);
        color: rgb(255 255 255 / 60%);

        a {
          color: rgba(255, 255, 255, 0.8);
          color: rgb(255 255 255 / 80%);

          &:hover {
            color: @white;
@@ -207,7 +200,7 @@

      .ant-breadcrumb-separator,
      .anticon {
        color: rgba(255, 255, 255, 0.8);
        color: rgb(255 255 255 / 80%);
      }
    }
  }