feat(route): add hideChildrenInMenu option close #346

Vben
1 parent f55ad2f9
Showing 11 changed files with 43 additions and 70 deletions
package.json
src/components/Authority/src/index.vue
src/components/CountDown/src/CountdownInput.vue
src/components/Form/src/components/ApiSelect.vue
src/components/Table/src/components/settings/index.vue
src/layouts/default/header/components/Breadcrumb.vue
src/router/helper/menuHelper.ts
src/router/menus/index.ts
src/router/routes/modules/dashboard.ts
vite.config.ts
yarn.lock
@@ -118,14 +118,15 @@
     "vite-plugin-style-import": "^0.8.1",
     "vite-plugin-svg-icons": "^0.3.5",
     "vite-plugin-theme": "^0.5.0",
-    "vite-plugin-windicss": "0.9.1",
+    "vite-plugin-windicss": "0.9.2",
     "vue-eslint-parser": "^7.6.0",
     "yargs": "^16.2.0"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "2.41.4"
+    "rollup": "2.41.5",
+    "vite": "2.0.5"
   },
   "repository": {
     "type": "git",
@@ -3,12 +3,10 @@
 -->
 <script lang="ts">
   import type { PropType } from 'vue';
-  import { defineComponent, unref } from 'vue';
+  import { defineComponent } from 'vue';
  
-  import { PermissionModeEnum } from '/@/enums/appEnum';
   import { RoleEnum } from '/@/enums/roleEnum';
  
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { usePermission } from '/@/hooks/web/usePermission';
  
   import { getSlot } from '/@/utils/helper/tsxHelper';
@@ -28,23 +26,12 @@
       },
     },
     setup(props, { slots }) {
-      const { getPermissionMode } = useRootSetting();
       const { hasPermission } = usePermission();
  
       /**
        * Render role button
        */
-      function renderRoleAuth() {
-        const { value } = props;
-        if (!value) {
-          return getSlot(slots);
-        }
-        return hasPermission(value) ? getSlot(slots) : null;
-      }
-
-      //  Render coding button
-      // Here only judge whether it is included, the specific implementation can be written according to the project logic
-      function renderCodeAuth() {
+      function renderAuth() {
         const { value } = props;
         if (!value) {
           return getSlot(slots);
@@ -53,18 +40,8 @@
       }
  
       return () => {
-        const mode = unref(getPermissionMode);
         // Role-based value control
-        if (mode === PermissionModeEnum.ROLE) {
-          return renderRoleAuth();
-        }
-
-        // Based on background role permission control
-        if (mode === PermissionModeEnum.BACK) {
-          return renderCodeAuth();
-        }
-
-        return getSlot(slots);
+        return renderAuth();
       };
     },
   });
@@ -18,8 +18,8 @@
  
   export default defineComponent({
     name: 'CountDownInput',
-    inheritAttrs: false,
     components: { [Input.name]: Input, CountButton },
+    inheritAttrs: false,
     props: {
       value: propTypes.string,
       size: propTypes.oneOf(['default', 'large', 'small']),
@@ -30,11 +30,11 @@
  
   export default defineComponent({
     name: 'ApiSelect',
-    inheritAttrs: false,
     components: {
       Select,
       LoadingOutlined,
     },
+    inheritAttrs: false,
     props: {
       value: propTypes.string,
       numberToString: propTypes.bool,
 <template>
   <div class="table-settings">
-    <RedoSetting v-if="getSetting.size" />
-    <SizeSetting v-if="getSetting.redo" />
+    <RedoSetting v-if="getSetting.redo" />
+    <SizeSetting v-if="getSetting.size" />
     <ColumnSetting v-if="getSetting.setting" />
     <FullScreenSetting v-if="getSetting.fullScreen" />
   </div>
@@ -54,6 +54,7 @@
       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 +64,20 @@
         }
  
         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;
  
-        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);
         }
-        routes.value = filterBreadcrumbList;
+        routes.value = breadcrumbList;
       });
  
       function getMatched(menus: Menu[], parent: string[]) {
@@ -103,12 +98,10 @@
  
       function filterItem(list: RouteLocationMatched[]) {
         let resultList = filter(list, (item) => {
-          const { meta } = item;
-
+          const { meta, name } = item;
           if (!meta) {
-            return false;
+            return !!name;
           }
-
           const { title, hideBreadcrumb, hideMenu } = meta;
           if (!title || hideBreadcrumb || hideMenu) {
             return false;
@@ -13,11 +13,15 @@ export function getAllParentPath&lt;T = Recordable&gt;(treeData: T[], path: string) {
 function joinParentPath(menus: Menu[], parentPath = '') {
   for (let index = 0; index < menus.length; index++) {
     const menu = menus[index];
-    const p = menu.path.startsWith('/') ? menu.path : `/${menu.path}`;
-    const parent = isUrl(menu.path) ? menu.path : `${parentPath}${p}`;
-    menus[index].path = parent;
+    // https://next.router.vuejs.org/guide/essentials/nested-routes.html
+    // Note that nested paths that start with / will be treated as a root path.
+    // This allows you to leverage the component nesting without having to use a nested URL.
+    if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
+      // path doesn't start with /, nor is it a url, join parent path
+      menu.path = `${parentPath}/${menu.path}`;
+    }
     if (menu?.children?.length) {
-      joinParentPath(menu.children, parent);
+      joinParentPath(menu.children, menu.path);
     }
   }
 }
@@ -66,9 +66,9 @@ export async function getShallowMenus(): Promise&lt;Menu[]&gt; {
  
 // Get the children of the menu
 export async function getChildrenMenus(parentPath: string) {
-  const menus = await getAsyncMenus();
+  const menus = await getMenus();
   const parent = menus.find((item) => item.path === parentPath);
-  if (!parent || !parent.children) return [] as Menu[];
+  if (!parent || !parent.children || !!parent?.meta?.hideChildrenInMenu) return [] as Menu[];
   const routes = router.getRoutes();
  
   return !isBackMode() ? filter(parent.children, basicFilter(routes)) : parent.children;
@@ -11,7 +11,6 @@ const dashboard: AppRouteModule = {
   meta: {
     icon: 'ion:grid-outline',
     title: t('routes.dashboard.dashboard'),
-    hideChildrenInMenu: true,
   },
   children: [
     {
@@ -18,7 +18,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
   // The boolean type read by loadEnv is a string. This function can be converted to boolean type
   const viteEnv = wrapperEnv(env);
  
-  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;
+  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;
  
   const isBuild = command === 'build';
  
@@ -45,7 +45,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
     build: {
       // minify: 'esbuild',
       outDir: OUTPUT_DIR,
-      polyfillDynamicImport: VITE_LEGACY,
       terserOptions: {
         compress: {
           keep_infinity: true,
@@ -2379,15 +2379,15 @@
   dependencies:
     vue-demi latest
  
-"@windicss/plugin-utils@0.9.1":
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.9.1.tgz#6219854bbf87e142617b79234820b0c1a151cc6e"
-  integrity sha512-DLxOg1mJTio9W069g3RK5KpSljD/aeDJvqwgAf9JSwXxkg/9xOcDWNEWo8MIkkrq0WtpdaokM+quvdlRCl2IVA==
+"@windicss/plugin-utils@0.9.2":
+  version "0.9.2"
+  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.9.2.tgz#0cf68a7fc978c1cdba172d2aa5e89f52e45f54bb"
+  integrity sha512-mYKqjRVc2NYHp5uA5cDyHtqHFNK1pBC6RYYLywuUPTxsUVszYGnRbUXSeZwisGrHqD5dlHtpcefM5QOuTm53KA==
   dependencies:
     fast-glob "^3.2.5"
     micromatch "^4.0.2"
     sucrase "^3.17.1"
-    windicss "^2.4.7"
+    windicss "^2.5.0"
  
 "@zxcvbn-ts/core@^0.3.0":
   version "0.3.0"
@@ -9920,10 +9920,10 @@ rollup-plugin-visualizer@^4.2.1:
     source-map "^0.7.3"
     yargs "^16.2.0"
  
-rollup@2.41.4, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0:
-  version "2.41.4"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.41.4.tgz#2a674d64db4322482d440699acb060dc6dd9e65f"
-  integrity sha512-f9IHfMO8p2Y8OdisI7Oj3oKkPuaQ6cgSwYqAi0TDvP3w2p+oX1VejX/w28a1h8WTnrapzfO5d4Uqhww+gL0b0g==
+rollup@2.41.5, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0:
+  version "2.41.5"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.41.5.tgz#e79cef8cc5c121612528f590319639b1f32da2d7"
+  integrity sha512-uG+WNNxhOYyeuO7oRt98GA2CNVRgQ67zca75UQVMPzMrLG9FUKzTCgvYVWhtB18TNbV7Uqxo97h+wErAnpFNJw==
   optionalDependencies:
     fsevents "~2.3.1"
  
@@ -11722,14 +11722,14 @@ vite-plugin-theme@^0.5.0:
     tinycolor2 "^1.4.2"
     ts-jest "^26.5.3"
  
-vite-plugin-windicss@0.9.1:
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.9.1.tgz#870690d6fe9f1067b9177d49d6db26f73b2a07ee"
-  integrity sha512-fyhW2Wg98QaEVSgEGUYOyvG+dZMfqHcZsSBPg2k1REBxjv5eAG/p5JG3SchSOh59Clo+2GiZnpfM1GHaqDp19A==
+vite-plugin-windicss@0.9.2:
+  version "0.9.2"
+  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.9.2.tgz#60caaa7966aa3dbb2cb11bf2210c09a71cac84dd"
+  integrity sha512-JM7Q7EfkxGRXklqH84LzQnVjXWOVnTPfi0AnXdnJuxmVMW8YidtEq/2rqf4GiYVXLdya8CQHNdYWnkZFSl47Yw==
   dependencies:
-    "@windicss/plugin-utils" "0.9.1"
+    "@windicss/plugin-utils" "0.9.2"
     body-parser "^1.19.0"
-    windicss "^2.4.7"
+    windicss "^2.5.0"
  
 vite@2.0.5:
   version "2.0.5"
@@ -11920,7 +11920,7 @@ which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
  
-windicss@^2.4.7:
+windicss@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/windicss/-/windicss-2.5.0.tgz#12910cead975778b8aee6511b563e1d6ce03362f"
   integrity sha512-mQt42RmDPK9XayP8L+mJW4Gon2X/ftGlNB3/BKaz6hqi4Hywys0piuUjGQIG6KhMfC0LLIzDpHz5b9GFqxYMrQ==