feat(route): add hideChildrenInMenu option close #346

Author: anncwb

package.json

@@ -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",

src/components/Authority/src/index.vue

@@ -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();
       };
     },
   });

src/components/CountDown/src/CountdownInput.vue

@@ -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']),

src/components/Form/src/components/ApiSelect.vue

@@ -30,11 +30,11 @@
 
   export default defineComponent({
     name: 'ApiSelect',
-    inheritAttrs: false,
     components: {
       Select,
       LoadingOutlined,
     },
+    inheritAttrs: false,
     props: {
       value: propTypes.string,
       numberToString: propTypes.bool,

src/components/Table/src/components/settings/index.vue

@@ -1,7 +1,7 @@
 <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>

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

@@ -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;

src/router/helper/menuHelper.ts

@@ -13,11 +13,15 @@ export function getAllParentPath<T = Recordable>(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);
     }
   }
 }

src/router/menus/index.ts

@@ -66,9 +66,9 @@ export async function getShallowMenus(): Promise<Menu[]> {
 
 // 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;

src/router/routes/modules/dashboard.ts

@@ -11,7 +11,6 @@ const dashboard: AppRouteModule = {
   meta: {
     icon: 'ion:grid-outline',
     title: t('routes.dashboard.dashboard'),
-    hideChildrenInMenu: true,
   },
   children: [
     {

vite.config.ts

@@ -18,7 +18,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
   // 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 => {
     build: {
       // minify: 'esbuild',
       outDir: OUTPUT_DIR,
-      polyfillDynamicImport: VITE_LEGACY,
       terserOptions: {
         compress: {
           keep_infinity: true,