mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-24 02:00:25 +08:00
fix: ensure the breadcrumb level is correct
This commit is contained in:
parent
6883b21bef
commit
e49072c313
@ -7,7 +7,7 @@ import type { ViteEnv } from '../../utils';
|
||||
|
||||
import html from 'vite-plugin-html';
|
||||
|
||||
import pkg from '../../../package.json';
|
||||
import pkg from './package.json';
|
||||
import { GLOB_CONFIG_FILE_NAME } from '../../constant';
|
||||
|
||||
export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
|
||||
|
@ -108,7 +108,7 @@
|
||||
"stylelint-order": "^4.1.0",
|
||||
"ts-node": "^9.1.1",
|
||||
"typescript": "4.2.3",
|
||||
"vite": "2.0.5",
|
||||
"vite": "2.1.1",
|
||||
"vite-plugin-compression": "^0.2.3",
|
||||
"vite-plugin-html": "^2.0.3",
|
||||
"vite-plugin-imagemin": "^0.2.9",
|
||||
|
@ -259,6 +259,12 @@
|
||||
box-shadow: 0 1px 3px 0 #d4d9e1;
|
||||
align-items: center;
|
||||
|
||||
> div:first-child,
|
||||
> div:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: #fff;
|
||||
background: @primary-color;
|
||||
|
@ -4,10 +4,10 @@
|
||||
<template #itemRender="{ route, routes, paths }">
|
||||
<Icon :icon="route.meta.icon" v-if="getShowBreadCrumbIcon && route.meta.icon" />
|
||||
<span v-if="!hasRedirect(routes, route)">
|
||||
{{ t(route.meta.title) }}
|
||||
{{ t(route.name || route.meta.title) }}
|
||||
</span>
|
||||
<router-link v-else to="" @click="handleClick(route, paths, $event)">
|
||||
{{ t(route.meta.title) }}
|
||||
{{ t(route.name || route.meta.title) }}
|
||||
</router-link>
|
||||
</template>
|
||||
</a-breadcrumb>
|
||||
@ -15,26 +15,29 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import type { RouteLocationMatched } from 'vue-router';
|
||||
import type { Menu } from '/@/router/types';
|
||||
|
||||
import { defineComponent, ref, watchEffect } from 'vue';
|
||||
|
||||
import { defineComponent, ref, toRaw, watchEffect } from 'vue';
|
||||
import { Breadcrumb } from 'ant-design-vue';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
import { filter } from '/@/utils/helper/treeHelper';
|
||||
import { REDIRECT_NAME } from '/@/router/constant';
|
||||
import Icon from '/@/components/Icon';
|
||||
|
||||
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 { useRouter } from 'vue-router';
|
||||
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { useGo } from '/@/hooks/web/usePage';
|
||||
import { isString } from '/@/utils/is';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { filter } from '/@/utils/helper/treeHelper';
|
||||
import { getMenus } from '/@/router/menus';
|
||||
|
||||
import { REDIRECT_NAME } from '/@/router/constant';
|
||||
import { getAllParentPath } from '/@/router/helper/menuHelper';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutBreadcrumb',
|
||||
components: { Icon, [Breadcrumb.name]: Breadcrumb },
|
||||
@ -50,25 +53,32 @@
|
||||
const { t } = useI18n();
|
||||
watchEffect(async () => {
|
||||
if (currentRoute.value.name === REDIRECT_NAME) return;
|
||||
const menus = await getMenus();
|
||||
const path = currentRoute.value.path;
|
||||
|
||||
const parent = getAllParentPath(menus, path);
|
||||
|
||||
const filterMenus = menus.filter((item) => item.path === parent[0]);
|
||||
|
||||
const matched = getMatched(filterMenus, parent) as any;
|
||||
|
||||
const matched = currentRoute.value?.matched;
|
||||
if (!matched || matched.length === 0) return;
|
||||
|
||||
let breadcrumbList = filterItem(toRaw(matched));
|
||||
let breadcrumbList = filterItem(matched);
|
||||
|
||||
const filterBreadcrumbList = breadcrumbList.filter(
|
||||
(item) => item.path !== PageEnum.BASE_HOME
|
||||
);
|
||||
|
||||
if (filterBreadcrumbList.length === breadcrumbList.length) {
|
||||
filterBreadcrumbList.unshift(({
|
||||
path: PageEnum.BASE_HOME,
|
||||
meta: {
|
||||
title: t('layout.header.home'),
|
||||
isLink: true,
|
||||
},
|
||||
} as unknown) as RouteLocationMatched);
|
||||
}
|
||||
// if (filterBreadcrumbList.length === breadcrumbList.length) {
|
||||
// filterBreadcrumbList.unshift(({
|
||||
// path: PageEnum.BASE_HOME,
|
||||
// meta: {
|
||||
// title: t('layout.header.home'),
|
||||
// isLink: true,
|
||||
// },
|
||||
// } as unknown) as RouteLocationMatched);
|
||||
// }
|
||||
|
||||
if (currentRoute.value.meta?.currentActiveMenu) {
|
||||
filterBreadcrumbList.push((currentRoute.value as unknown) as RouteLocationMatched);
|
||||
@ -76,6 +86,19 @@
|
||||
routes.value = subRouteExtraction(filterBreadcrumbList);
|
||||
});
|
||||
|
||||
function getMatched(menus: Menu[], parent: string[]) {
|
||||
const metched: Menu[] = [];
|
||||
menus.forEach((item) => {
|
||||
if (parent.includes(item.path)) {
|
||||
metched.push(item);
|
||||
}
|
||||
if (item.children?.length) {
|
||||
metched.push(...getMatched(item.children, parent));
|
||||
}
|
||||
});
|
||||
return metched;
|
||||
}
|
||||
|
||||
function subRouteExtraction(routeList: RouteLocationMatched[]) {
|
||||
const resultRoutes: RouteLocationMatched[] = [];
|
||||
routeList.forEach((route) => {
|
||||
@ -112,22 +135,9 @@
|
||||
|
||||
function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
|
||||
e?.preventDefault();
|
||||
const {
|
||||
children,
|
||||
redirect,
|
||||
meta,
|
||||
const { children, redirect, meta } = route;
|
||||
|
||||
// components
|
||||
} = route;
|
||||
|
||||
// const isParent =
|
||||
// components?.default?.name === 'DefaultLayout' || (components?.default as any)?.parentView;
|
||||
|
||||
if (
|
||||
children?.length &&
|
||||
!redirect
|
||||
// && !isParent
|
||||
) {
|
||||
if (children?.length && !redirect) {
|
||||
e?.stopPropagation();
|
||||
return;
|
||||
}
|
||||
@ -145,8 +155,7 @@
|
||||
} else {
|
||||
const ps = paths.slice(1);
|
||||
const lastPath = ps.pop() || '';
|
||||
const parentPath = ps.pop() || '';
|
||||
goPath = `${parentPath}/${lastPath}`;
|
||||
goPath = `${lastPath}`;
|
||||
}
|
||||
goPath = /^\//.test(goPath) ? goPath : `/${goPath}`;
|
||||
go(goPath);
|
||||
@ -157,11 +166,6 @@
|
||||
if (routes.indexOf(route) === routes.length - 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// if (route?.meta?.isLink) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
@ -44,6 +44,8 @@ export interface RouteMeta {
|
||||
|
||||
// Never show in menu
|
||||
hideMenu?: boolean;
|
||||
|
||||
isLink?: boolean;
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
|
@ -11634,7 +11634,7 @@ vite-plugin-windicss@0.8.3:
|
||||
"@windicss/plugin-utils" "0.8.3"
|
||||
windicss "^2.4.5"
|
||||
|
||||
vite@^2.1.1:
|
||||
vite@2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.npmjs.org/vite/-/vite-2.1.1.tgz#13c7a7a5665b435f28fe8549caab181e0ad9af7b"
|
||||
integrity sha512-nlTQrfYIkahcElD8O/oogbLbuKgAZRbvoFOth3GmRSglfPdY4RgfBjj0Fu7HeCU/2u3Jxc6jW4UuV22LGw1Yaw==
|
||||
|
Loading…
Reference in New Issue
Block a user