fix: Fixed the display problem of breadcrumbs on dynamic route page; 🐛

修复：修复动态路由页面的面包屑显示问题；

README.md

@@ -1,3 +1,5 @@
+
+
 简体中文 | [English](./README.en-US.md)
 <h1 align="center">Vue Antd Admin</h1>
 
@@ -6,6 +8,12 @@
 [Ant Design Pro](https://github.com/ant-design/ant-design-pro) 的 Vue 实现版本  
 开箱即用的中后台前端/设计解决方案
 
+:star::star::star:
+vue3 版本现已推出，更名为
+[stepin-template](https://github.com/stepui/stepin-template)，欢迎体验，
+[立即前往](https://github.com/stepui/stepin-template)
+--
+
 [![MIT](https://img.shields.io/github/license/iczer/vue-antd-admin)](https://github.com/iczer/vue-antd-admin/blob/master/LICENSE)
 [![Dependence](https://img.shields.io/david/iczer/vue-antd-admin)](https://david-dm.org/iczer/vue-antd-admin)
 [![DevDependencies](https://img.shields.io/david/dev/iczer/vue-antd-admin)](https://david-dm.org/iczer/vue-antd-admin?type=dev)

docs/advance/interceptors.md

@@ -44,7 +44,7 @@ const tokenCheck = {
 * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展。
 
 ### onRejected
-我们会为 onFulfilled 钩子函数注入 error 和 options 两个参数：
+我们会为 onRejected 钩子函数注入 error 和 options 两个参数：
 * `error: Error`: axios 请求错误对象
 * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展。 
 
@@ -128,4 +128,4 @@ export default {
   response: [resp401, resp403] // 响应拦截
 }
 ```
-:::
+:::

src/config/default/antd.config.js

@@ -22,10 +22,11 @@ const ANTD = {
       'component-background': '#fff',
       'heading-color': 'rgba(0, 0, 0, 0.85)',
       'text-color': 'rgba(0, 0, 0, 0.65)',
-      'text-color-inverse': '#fff',
+      'text-color-inverse': '#fefefe',
       'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
       'shadow-color': 'rgba(0, 0, 0, 0.15)',
       'border-color-split': '#f0f0f0',
+      'border-color-base': '#d9d9d9',
       'background-color-light': '#fafafa',
       'background-color-base': '#f5f5f5',
       'table-selected-row-bg': '#fafafa',
@@ -34,8 +35,9 @@ const ANTD = {
       'disabled-color': 'rgba(0, 0, 0, 0.25)',
       'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
       'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-selected-item-icon-color': '#fefefe',
       'menu-dark-arrow-color': '#fefefe',
-      'btn-primary-color': '#fff',
+      'btn-primary-color': '#fefefe',
     },
     light: {
       'layout-body-background': '#f0f2f5',
@@ -43,10 +45,11 @@ const ANTD = {
       'component-background': '#fff',
       'heading-color': 'rgba(0, 0, 0, 0.85)',
       'text-color': 'rgba(0, 0, 0, 0.65)',
-      'text-color-inverse': '#fff',
+      'text-color-inverse': '#fefefe',
       'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
       'shadow-color': 'rgba(0, 0, 0, 0.15)',
       'border-color-split': '#f0f0f0',
+      'border-color-base': '#d9d9d9',
       'background-color-light': '#fafafa',
       'background-color-base': '#f5f5f5',
       'table-selected-row-bg': '#fafafa',
@@ -55,8 +58,9 @@ const ANTD = {
       'disabled-color': 'rgba(0, 0, 0, 0.25)',
       'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
       'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-selected-item-icon-color': '#fefefe',
       'menu-dark-arrow-color': '#fefefe',
-      'btn-primary-color': '#fff',
+      'btn-primary-color': '#fefefe',
     },
     night: {
       'layout-body-background': '#000',
@@ -64,10 +68,11 @@ const ANTD = {
       'component-background': '#141414',
       'heading-color': 'rgba(255, 255, 255, 0.85)',
       'text-color': 'rgba(255, 255, 255, 0.85)',
-      'text-color-inverse': '#141414',
+      'text-color-inverse': '#fefefe',
       'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
       'shadow-color': 'rgba(255, 255, 255, 0.15)',
       'border-color-split': '#303030',
+      'border-color-base': '#282828',
       'background-color-light': '#ffffff0a',
       'background-color-base': '#2a2a2a',
       'table-selected-row-bg': '#ffffff0a',
@@ -76,8 +81,9 @@ const ANTD = {
       'disabled-color': 'rgba(255, 255, 255, 0.25)',
       'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
       'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-selected-item-icon-color': '#fefefe',
       'menu-dark-arrow-color': '#fefefe',
-      'btn-primary-color': '#141414',
+      'btn-primary-color': '#fefefe',
     }
   }
 }

src/layouts/PageLayout.vue

@@ -92,7 +92,7 @@ export default {
       let routes = this.$route.matched
       const path = this.$route.path
       let breadcrumb = []
-      routes.filter(item => path.includes(item.path))
+      routes.filter(item => path.includes(item.path) || item.regex.test(path))
         .forEach(route => {
         const path = route.path.length === 0 ? '/home' : route.path
         breadcrumb.push(this.$t(getI18nKey(path)))

src/layouts/tabs/TabsHead.vue

@@ -95,8 +95,7 @@
         this.$emit('contextmenu', pageKey, e)
       },
       pageName(page) {
-        const pagePath = page.fullPath.split('?')[0]
-        const custom = this.customTitles.find(item => item.path === pagePath)
+        const custom = this.customTitles.find(item => item.path === page.path)
         return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
       }
     }

src/layouts/tabs/TabsView.vue

@@ -13,7 +13,7 @@
     <div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`">
       <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
         <a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
-          <router-view v-if="!refreshing" ref="tabContent" :key="$route.path" />
+          <router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
         </a-keep-alive>
         <router-view ref="tabContent" v-else-if="!refreshing" />
       </page-toggle-transition>
@@ -62,10 +62,10 @@ export default {
     this.loadCacheConfig(this.$router?.options?.routes)
     this.loadCachedTabs()
     const route = this.$route
-    if (this.pageList.findIndex(item => item.path === route.path) === -1) {
+    if (this.pageList.findIndex(item => item.path === route.fullPath) === -1) {
       this.pageList.push(this.createPage(route))
     }
-    this.activePage = route.path
+    this.activePage = route.fullPath
     if (this.multiPage) {
       this.$nextTick(() => {
         this.setCachedKey(route)
@@ -86,8 +86,8 @@ export default {
       this.loadCacheConfig(val)
     },
     '$route': function (newRoute) {
-      this.activePage = newRoute.path
-      const page = this.pageList.find(item => item.path === newRoute.path)
+      this.activePage = newRoute.fullPath
+      const page = this.pageList.find(item => item.path === newRoute.fullPath)
       if (!this.multiPage) {
         this.pageList = [this.createPage(newRoute)]
       } else if (page) {
@@ -261,7 +261,7 @@ export default {
       return {
         keyPath: route.matched[route.matched.length - 1].path,
         fullPath: route.fullPath, loading: false,
-        path: route.path,
+        path: route.fullPath,
         title: route.meta && route.meta.page && route.meta.page.title,
         unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
       }
@@ -271,7 +271,7 @@ export default {
      * @param route 页面对应的路由
      */
     setCachedKey(route) {
-      const page = this.pageList.find(item => item.path === route.path)
+      const page = this.pageList.find(item => item.path === route.fullPath)
       page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
       if (!page._init_) {
         const vnode = this.$refs.tabContent.$vnode
@@ -301,7 +301,7 @@ export default {
       routes.forEach(item => {
         const cacheAble = item.meta?.page?.cacheAble ?? pCache ?? true
         if (!cacheAble) {
-          this.excludeKeys.push(new RegExp(`${item.path.replace(/:[^/]*/g, '[^/]*')}\\d*$`))
+          this.excludeKeys.push(new RegExp(`${item.path.replace(/:[^/]*/g, '[^/]*')}(\\?.*)?\\d*$`))
         }
         if (item.children) {
           this.loadCacheConfig(item.children, cacheAble)

src/plugins/tabs-page-plugin.js

@@ -17,8 +17,9 @@ const TabsPagePlugin = {
         },
         $setPageTitle(route, title) {
           if (title) {
-            let path = typeof route === 'object' ? route.path : route
-            path = path && path.split('?')[0]
+            // let path = typeof route === 'object' ? route.path : route
+            // path = path && path.split('?')[0]
+            let path = typeof route === 'object' ? this.$router.resolve(route).route.fullPath : route
             this.$store.commit('setting/setCustomTitle', {path, title})
           }
         }
@@ -26,8 +27,8 @@ const TabsPagePlugin = {
       computed: {
         customTitle() {
           const customTitles = this.$store.state.setting.customTitles
-          const path = this.$route.path.split('?')[0]
-          const custom = customTitles.find(item => item.path === path)
+          // const path = this.$route.path.split('?')[0]
+          const custom = customTitles.find(item => item.path === this.$route.fullPath)
           return custom && custom.title
         }
       }

src/utils/authority-utils.js

@@ -8,10 +8,12 @@ function hasPermission(authority, permissions) {
   let required = '*'
   if (typeof authority === 'string') {
     required = authority
+  } else if (Array.isArray(authority)) {
+    required = authority
   } else if (typeof authority === 'object') {
     required = authority.permission
   }
-  return required === '*' || (permissions && permissions.findIndex(item => item === required || item.id === required) !== -1)
+  return required === '*' || hasAnyItem(required, permissions, (r, t) => !!(r === t || r === t.id))
 }
 
 /**
@@ -24,25 +26,23 @@ function hasRole(authority, roles) {
   if (typeof authority === 'object') {
     required = authority.role
   }
-  return authority === '*' || hasAnyRole(required, roles)
+  return authority === '*' || hasAnyItem(required, roles, (r, t) => !!(r === t || r === t.id))
 }
 
 /**
- * 判断是否有需要的任意一个角色
- * @param required {String | Array[String]} 需要的角色，可以是单个角色或者一个角色数组
- * @param roles 拥有的角色
+ * 判断目标数组是否有所需元素
+ * @param {String | String[]}required 所需元素，数组或单个元素
+ * @param {String[]|Object[]} source 目标数组
+ * @param {Function} filter 匹配条件
+ * (r: String, s: String|Object) => boolean
  * @returns {boolean}
  */
-function hasAnyRole(required, roles) {
+function hasAnyItem(required, source, filter) {
   if (!required) {
     return false
-  } else if(Array.isArray(required)) {
-    return roles.findIndex(role => {
-      return required.findIndex(item => item === role || item === role.id) !== -1
-    }) !== -1
-  } else {
-    return roles.findIndex(role => role === required || role.id === required) !== -1
   }
+  let checkedList = Array.isArray(required) ? required : [required]
+  return !!source.find(s => checkedList.find(r => filter(r, s)))
 }
 
 /**

src/utils/routerUtil.js

@@ -75,6 +75,9 @@ function parseRoutes(routesConfig, routerMap) {
       redirect: routeCfg.redirect || router.redirect,
       meta: {...meta, authority: meta.authority || '*'}
     }
+    if (router.beforeEnter) {
+      route.beforeEnter = router.beforeEnter
+    }
     if (routeCfg.invisible || router.invisible) {
       route.meta.invisible = true
     }
@@ -212,7 +215,7 @@ function formatAuthority(routes, pAuthorities = []) {
       let authority = {}
       if (!meta.authority) {
         authority = defaultAuthority
-      }else if (typeof meta.authority === 'string') {
+      }else if (typeof meta.authority === 'string' || Array.isArray(meta.authority)) {
         authority.permission = meta.authority
       } else if (typeof meta.authority === 'object') {
         authority = meta.authority

yarn.lock

@@ -5422,9 +5422,9 @@ htmlparser2@^3.3.0:
     readable-stream "^3.1.1"
 
 http-cache-semantics@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
-  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/http-cache-semantics/download/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha1-SekcXL82yblLz81xwj1SSex045A=
 
 http-deceiver@^1.2.7:
   version "1.2.7"