wip(menu): add hideChildrenInMenu option

Vben
1 parent 50915c97
Showing 10 changed files with 32 additions and 40 deletions
package.json
src/components/Menu/src/components/BasicSubMenuItem.vue
src/components/SimpleMenu/src/SimpleSubMenu.vue
src/layouts/default/header/components/Breadcrumb.vue
src/layouts/default/header/index.less
src/router/routes/modules/dashboard.ts
src/router/routes/modules/demo/feat.ts
src/router/types.ts
src/settings/designSetting.ts
yarn.lock
@@ -108,7 +108,7 @@
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
     "typescript": "4.2.3",
-    "vite": "2.1.1",
+    "vite": "2.0.5",
     "vite-plugin-compression": "^0.2.3",
     "vite-plugin-html": "^2.0.3",
     "vite-plugin-imagemin": "^0.2.9",
@@ -39,6 +39,7 @@
       const getShowMenu = computed(() => !props.item.meta?.hideMenu);
       function menuHasChildren(menuTreeItem: MenuType): boolean {
         return (
+          !menuTreeItem.meta?.hideChildrenInMenu &&
           Reflect.has(menuTreeItem, 'children') &&
           !!menuTreeItem.children &&
           menuTreeItem.children.length > 0
@@ -91,6 +91,7 @@
       function menuHasChildren(menuTreeItem: Menu): boolean {
         return (
+          !menuTreeItem.meta?.hideChildrenInMenu &&
           Reflect.has(menuTreeItem, 'children') &&
           !!menuTreeItem.children &&
           menuTreeItem.children.length > 0
@@ -54,7 +54,13 @@
       watchEffect(async () => {
         if (currentRoute.value.name === REDIRECT_NAME) return;
         const menus = await getMenus();
-        const path = currentRoute.value.path;
+        const routeMatched = currentRoute.value.matched;
+        const cur = routeMatched?.[routeMatched.length - 1];
+        let path = currentRoute.value.path;
+
+        if (cur && cur?.meta?.currentActiveMenu) {
+          path = cur.meta.currentActiveMenu as string;
+        }
         const parent = getAllParentPath(menus, path);
@@ -70,27 +76,23 @@
           (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 (currentRoute.value.meta?.currentActiveMenu) {
-          filterBreadcrumbList.push((currentRoute.value as unknown) as RouteLocationMatched);
+          filterBreadcrumbList.push(({
+            ...currentRoute.value,
+            name: currentRoute.value.meta?.title || currentRoute.value.name,
+          } as unknown) as RouteLocationMatched);
         }
-        routes.value = subRouteExtraction(filterBreadcrumbList);
+        routes.value = filterBreadcrumbList;
       });
       function getMatched(menus: Menu[], parent: string[]) {
         const metched: Menu[] = [];
         menus.forEach((item) => {
           if (parent.includes(item.path)) {
-            metched.push(item);
+            metched.push({
+              ...item,
+              name: item.meta?.title || item.name,
+            });
           }
           if (item.children?.length) {
             metched.push(...getMatched(item.children, parent));
@@ -99,22 +101,6 @@
         return metched;
       }
-      function subRouteExtraction(routeList: RouteLocationMatched[]) {
-        const resultRoutes: RouteLocationMatched[] = [];
-        routeList.forEach((route) => {
-          if (route.children?.length === 1) {
-            const subRoute = route.children[0] as RouteLocationMatched;
-            const subRouteName = subRoute.name as string;
-            const routeName = route.name;
-            if (subRouteName && `${subRouteName}Parent` === routeName) {
-              route = subRoute;
-            }
-          }
-          resultRoutes.push(route);
-        });
-        return resultRoutes;
-      }
-
       function filterItem(list: RouteLocationMatched[]) {
         let resultList = filter(list, (item) => {
           const { meta } = item;
@@ -67,7 +67,7 @@
     .@{header-trigger-prefix-cls} {
       display: flex;
       height: 100%;
-      padding: 1px 10px 0 16px;
+      padding: 1px 10px 0 10px;
       cursor: pointer;
       align-items: center;
@@ -11,6 +11,7 @@ const dashboard: AppRouteModule = {
   meta: {
     icon: 'ion:grid-outline',
     title: t('routes.dashboard.dashboard'),
+    hideChildrenInMenu: true,
   },
   children: [
     {
@@ -81,7 +81,7 @@ const feat: AppRouteModule = {
               component: () => import('/@/views/demo/feat/breadcrumb/ChildrenList.vue'),
               meta: {
                 title: t('routes.demo.feat.breadcrumbChildren'),
-                hideBreadcrumb: true,
+                // hideBreadcrumb: true,
               },
             },
             {
@@ -30,6 +30,9 @@ export interface RouteMeta {
   // Whether the route has been dynamically added
   hideBreadcrumb?: boolean;
+  // Hide submenu
+  hideChildrenInMenu?: boolean;
+
   // Carrying parameters
   carryParam?: boolean;
@@ -31,8 +31,8 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
 // sider preset color
 export const SIDE_BAR_BG_COLOR_LIST: string[] = [
-  '#273352',
   '#001529',
+  '#273352',
   '#ffffff',
   '#191b24',
   '#191a23',
@@ -4734,7 +4734,7 @@ esbuild-register@^2.2.0:
   dependencies:
     jsonc-parser "^3.0.0"
-esbuild@^0.8.57:
+esbuild@^0.8.52, esbuild@^0.8.57:
   version "0.8.57"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.57.tgz#a42d02bc2b57c70bcd0ef897fe244766bb6dd926"
   integrity sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA==
@@ -11634,12 +11634,12 @@ vite-plugin-windicss@0.8.4:
     "@windicss/plugin-utils" "0.8.4"
     windicss "^2.4.5"
-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==
+vite@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/vite/-/vite-2.0.5.tgz#ac46857a3fa8686d077921e61bd48a986931df1d"
+  integrity sha512-QTgEDbq1WsTtr6j+++ewjhBFEk6c8v0xz4fb/OWJQKNYU8ZZtphOshwOqAlnarSstPBtWCBR0tsugXx6ajfoUg==
   dependencies:
-    esbuild "^0.9.2"
+    esbuild "^0.8.52"
     postcss "^8.2.1"
     resolve "^1.19.0"
     rollup "^2.38.5"