'admin-22.05.19:优化tagsView、路由参数演示界面'

2022-05-19 19:08:29 +08:00 · 2022-05-19 19:08:29 +08:00 · 2c8dbace6c
commit 2c8dbace6c
parent 77b7621e87
12 changed files with 355 additions and 214 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -20,8 +20,9 @@
 - 🎯 优化 [如果 url 中有中文等特殊字符，第一次切换该 tab 时 keep-alive 失效#I55JS7](https://gitee.com/lyt-top/vue-next-admin/issues/I55JS7),感谢[yuyong1566](https://gitee.com/yuyong1566)
 - 🎯 优化 [wangEditor](https://www.wangeditor.com/) 更新到 v5，[vue3 版本线上示例中 wangeditor 富文本编辑器 demo 实例,无法换行#I5565B](https://gitee.com/lyt-top/vue-next-admin/issues/I5565B)，感谢@[jenchih](https://gitee.com/jenchih)
 - 🎯 优化 [在关闭 tagview 时，高度刷新时会会变化，出现滚动条](https://gitee.com/lyt-top/vue-next-admin/issues/I55FHM)，感谢[张松](https://gitee.com/zs310071113)
+- 🎯 优化 [路由参数](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)演示
 - 🎉 新增 [vuex](https://vuex.vuejs.org/) 替换成 [pinia](https://pinia.vuejs.org/getting-started.html)
- 🎉 新增 tagsView 支持自定义 tagsView 名称（文章详情时有用），前往体验：[路由参数/普通路由](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)
+- 🎉 新增 tagsView 支持自定义 tagsView 名称（文章详情时有用），前往体验：[路由参数/普通路由](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)。新增 tagsView 支持自定义名称国际化，感谢[@q7but](https://gitee.com/q7but)、[!22 add 添加自定义 tagVIewName 拓展,支持国际化](https://gitee.com/lyt-top/vue-next-admin/pulls/22/files)、感谢[@tony_tong_xin](https://gitee.com/tony_tong_xin)
 - 🐞 修复 适配 `"element-plus": "^2.1.9"，2.2.0` 版本
 - 🐞 修复 [导航栏横向布局后，一级菜单显示问题#I4Z3M3](https://gitee.com/lyt-top/vue-next-admin/issues/I4Z3M3)
 - 🐞 修复 横向布局三级及以上导航菜单高亮、导航高度不统一问题
--- a/README.md
+++ b/README.md
@ -70,7 +70,7 @@ cnpm run build

 #### 💯 学习交流加 QQ 群

- 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。
+- 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。建议勿加多群，可能会误伤！
 - 查看开发文档：<a href="https://lyt-top.gitee.io/vue-next-admin-doc-preview" target="_blank">vue-next-admin-doc</a>
 - 群号码：
  1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
@ -94,6 +94,8 @@ cnpm run build
 - <a target="_blank" href="https://gitee.com/GionConnection/niupi-free">@甜蜜蜜 NiuPi 平台</a>
 - <a target="_blank" href="https://gitee.com/tiger1103/gfast/tree/os-v3/">@游子 GFast-V3</a>
 - <a target="_blank" href="https://gitee.com/diygw/diygw-ui-php/">@diygw.com gw-ui-php</a>
+- <a target="_blank" href="https://gitee.com/zsvg/vboot-net">@zsvg vboot-net</a>
+- <a target="_blank" href="https://gitee.com/zsvg/vboot-java">@zsvg vboot-java</a>

 #### ❤️ 鸣谢列表

--- a/package-lock.json
+++ b/package-lock.json
@ -12,7 +12,7 @@
 				"@element-plus/icons-vue": "^1.1.4",
 				"@wangeditor/editor": "^5.0.1",
 				"axios": "^0.27.2",
-				"countup.js": "^2.1.0",
+				"countup.js": "^2.2.0",
 				"cropperjs": "^1.5.12",
 				"echarts": "^5.3.2",
 				"echarts-gl": "^2.0.9",
@ -34,22 +34,22 @@
 				"vue-router": "^4.0.15"
 			},
 			"devDependencies": {
-				"@types/node": "^17.0.32",
+				"@types/node": "^17.0.34",
 				"@types/nprogress": "^0.2.0",
 				"@types/sortablejs": "^1.13.0",
-				"@typescript-eslint/eslint-plugin": "^5.23.0",
-				"@typescript-eslint/parser": "^5.23.0",
-				"@vitejs/plugin-vue": "^2.3.2",
+				"@typescript-eslint/eslint-plugin": "^5.25.0",
+				"@typescript-eslint/parser": "^5.25.0",
+				"@vitejs/plugin-vue": "^2.3.3",
 				"@vue/compiler-sfc": "^3.2.33",
 				"dotenv": "^16.0.1",
 				"eslint": "^8.15.0",
-				"eslint-plugin-vue": "^8.7.1",
+				"eslint-plugin-vue": "^9.0.1",
 				"prettier": "^2.6.2",
 				"sass": "^1.51.0",
-				"sass-loader": "^12.6.0",
+				"sass-loader": "^13.0.0",
 				"typescript": "^4.6.4",
-				"vite": "^2.9.8",
-				"vue-eslint-parser": "^8.3.0"
+				"vite": "^2.9.9",
+				"vue-eslint-parser": "^9.0.2"
 			},
 			"engines": {
 				"node": ">=12.0.0",
@ -505,9 +505,9 @@
 			}
 		},
 		"node_modules/@types/node": {
-			"version": "17.0.32",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.32.tgz",
-			"integrity": "sha512-eAIcfAvhf/BkHcf4pkLJ7ECpBAhh9kcxRBpip9cTiO+hf+aJrsxYxBeS6OXvOd9WqNAJmavXVpZvY1rBjNsXmw==",
+			"version": "17.0.34",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.34.tgz",
+			"integrity": "sha512-XImEz7XwTvDBtzlTnm8YvMqGW/ErMWBsKZ+hMTvnDIjGCKxwK5Xpc+c/oQjOauwq8M4OS11hEkpjX8rrI/eEgA==",
 			"dev": true
 		},
 		"node_modules/@types/nprogress": {
@ -523,19 +523,19 @@
 			"dev": true
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz",
-			"integrity": "sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.25.0.tgz",
+			"integrity": "sha512-icYrFnUzvm+LhW0QeJNKkezBu6tJs9p/53dpPLFH8zoM9w1tfaKzVurkPotEpAqQ8Vf8uaFyL5jHd0Vs6Z0ZQg==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "5.23.0",
-				"@typescript-eslint/type-utils": "5.23.0",
-				"@typescript-eslint/utils": "5.23.0",
-				"debug": "^4.3.2",
+				"@typescript-eslint/scope-manager": "5.25.0",
+				"@typescript-eslint/type-utils": "5.25.0",
+				"@typescript-eslint/utils": "5.25.0",
+				"debug": "^4.3.4",
 				"functional-red-black-tree": "^1.0.1",
-				"ignore": "^5.1.8",
+				"ignore": "^5.2.0",
 				"regexpp": "^3.2.0",
-				"semver": "^7.3.5",
+				"semver": "^7.3.7",
 				"tsutils": "^3.21.0"
 			},
 			"engines": {
@ -556,15 +556,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.23.0.tgz",
-			"integrity": "sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.25.0.tgz",
+			"integrity": "sha512-r3hwrOWYbNKP1nTcIw/aZoH+8bBnh/Lh1iDHoFpyG4DnCpvEdctrSl6LOo19fZbzypjQMHdajolxs6VpYoChgA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "5.23.0",
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/typescript-estree": "5.23.0",
-				"debug": "^4.3.2"
+				"@typescript-eslint/scope-manager": "5.25.0",
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/typescript-estree": "5.25.0",
+				"debug": "^4.3.4"
 			},
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -583,13 +583,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz",
-			"integrity": "sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.25.0.tgz",
+			"integrity": "sha512-p4SKTFWj+2VpreUZ5xMQsBMDdQ9XdRvODKXN4EksyBjFp2YvQdLkyHqOffakYZPuWJUDNu3jVXtHALDyTv3cww==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/visitor-keys": "5.23.0"
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/visitor-keys": "5.25.0"
 			},
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -600,13 +600,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz",
-			"integrity": "sha512-iuI05JsJl/SUnOTXA9f4oI+/4qS/Zcgk+s2ir+lRmXI+80D8GaGwoUqs4p+X+4AxDolPpEpVUdlEH4ADxFy4gw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.25.0.tgz",
+			"integrity": "sha512-B6nb3GK3Gv1Rsb2pqalebe/RyQoyG/WDy9yhj8EE0Ikds4Xa8RR28nHz+wlt4tMZk5bnAr0f3oC8TuDAd5CPrw==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/utils": "5.23.0",
-				"debug": "^4.3.2",
+				"@typescript-eslint/utils": "5.25.0",
+				"debug": "^4.3.4",
 				"tsutils": "^3.21.0"
 			},
 			"engines": {
@ -626,9 +626,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz",
-			"integrity": "sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.25.0.tgz",
+			"integrity": "sha512-7fWqfxr0KNHj75PFqlGX24gWjdV/FDBABXL5dyvBOWHpACGyveok8Uj4ipPX/1fGU63fBkzSIycEje4XsOxUFA==",
 			"dev": true,
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -639,17 +639,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz",
-			"integrity": "sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.25.0.tgz",
+			"integrity": "sha512-MrPODKDych/oWs/71LCnuO7NyR681HuBly2uLnX3r5i4ME7q/yBqC4hW33kmxtuauLTM0OuBOhhkFaxCCOjEEw==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/visitor-keys": "5.23.0",
-				"debug": "^4.3.2",
-				"globby": "^11.0.4",
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/visitor-keys": "5.25.0",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
-				"semver": "^7.3.5",
+				"semver": "^7.3.7",
 				"tsutils": "^3.21.0"
 			},
 			"engines": {
@ -666,15 +666,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.23.0.tgz",
-			"integrity": "sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.25.0.tgz",
+			"integrity": "sha512-qNC9bhnz/n9Kba3yI6HQgQdBLuxDoMgdjzdhSInZh6NaDnFpTUlwNGxplUFWfY260Ya0TRPvkg9dd57qxrJI9g==",
 			"dev": true,
 			"dependencies": {
 				"@types/json-schema": "^7.0.9",
-				"@typescript-eslint/scope-manager": "5.23.0",
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/typescript-estree": "5.23.0",
+				"@typescript-eslint/scope-manager": "5.25.0",
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/typescript-estree": "5.25.0",
 				"eslint-scope": "^5.1.1",
 				"eslint-utils": "^3.0.0"
 			},
@ -690,13 +690,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz",
-			"integrity": "sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.25.0.tgz",
+			"integrity": "sha512-yd26vFgMsC4h2dgX4+LR+GeicSKIfUvZREFLf3DDjZPtqgLx5AJZr6TetMNwFP9hcKreTTeztQYBTNbNoOycwA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "5.23.0",
-				"eslint-visitor-keys": "^3.0.0"
+				"@typescript-eslint/types": "5.25.0",
+				"eslint-visitor-keys": "^3.3.0"
 			},
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@ -757,9 +757,9 @@
 			}
 		},
 		"node_modules/@vitejs/plugin-vue": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.2.tgz",
-			"integrity": "sha512-umyypfSHS4kQLdYAnJHhaASq7FRzNCdvcRoQ3uYGNk1/M4a+hXUd7ysN7BLhCrWH6uBokyCkFeUAaFDzSaaSrQ==",
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
+			"integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
 			"dev": true,
 			"engines": {
 				"node": ">=12.0.0"
@ -1639,9 +1639,9 @@
 			"dev": true
 		},
 		"node_modules/countup.js": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.1.0.tgz",
-			"integrity": "sha512-VanMzLEjkt3Hp/ty5BXikM8s4wE3OH4m1AnFro7THR86nYGRvGfGCoV+zrRJcqTbZi7X1egkLSIeUKDz7+4XLA=="
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.2.0.tgz",
+			"integrity": "sha512-m0TvFNXm9/eFqJm+QiKVI8e0wRUHzlQSewz9dqVjlhl2DFoZtceLbomwzxHz0hJ1+r4zBC7wSpR/TpthG49h6g=="
 		},
 		"node_modules/cropperjs": {
 			"version": "1.5.12",
@ -2328,9 +2328,9 @@
 			}
 		},
 		"node_modules/eslint-plugin-vue": {
-			"version": "8.7.1",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.7.1.tgz",
-			"integrity": "sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==",
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.0.1.tgz",
+			"integrity": "sha512-/w/9/vzz+4bSYtp5UqXgJ0CfycXTMtpp6lkz7/fMp0CcJxPWyRP6Pr88ihhrsNEcVt2ZweMupWRNYa+5Md41LQ==",
 			"dev": true,
 			"dependencies": {
 				"eslint-utils": "^3.0.0",
@ -2338,10 +2338,11 @@
 				"nth-check": "^2.0.1",
 				"postcss-selector-parser": "^6.0.9",
 				"semver": "^7.3.5",
-				"vue-eslint-parser": "^8.0.1"
+				"vue-eslint-parser": "^9.0.1",
+				"xml-name-validator": "^4.0.0"
 			},
 			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+				"node": "^14.17.0 || >=16.0.0"
 			},
 			"peerDependencies": {
 				"eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
@ -3724,16 +3725,16 @@
 			}
 		},
 		"node_modules/sass-loader": {
-			"version": "12.6.0",
-			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-			"integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.0.0.tgz",
+			"integrity": "sha512-IHCFecI+rbPvXE2zO/mqdVFe8MU7ElGrwga9hh2H65Ru4iaBJAMRteum1c4Gsxi9Cq1FOtTEDd6+/AEYuQDM4Q==",
 			"dev": true,
 			"dependencies": {
 				"klona": "^2.0.4",
 				"neo-async": "^2.6.2"
 			},
 			"engines": {
-				"node": ">= 12.13.0"
+				"node": ">= 14.15.0"
 			},
 			"funding": {
 				"type": "opencollective",
@ -4188,9 +4189,9 @@
 			"dev": true
 		},
 		"node_modules/vite": {
-			"version": "2.9.8",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.8.tgz",
-			"integrity": "sha512-zsBGwn5UT3YS0NLSJ7hnR54+vUKfgzMUh/Z9CxF1YKEBVIe213+63jrFLmZphgGI5zXwQCSmqIdbPuE8NJywPw==",
+			"version": "2.9.9",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
+			"integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.14.27",
@ -4245,21 +4246,21 @@
 			}
 		},
 		"node_modules/vue-eslint-parser": {
-			"version": "8.3.0",
-			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
-			"integrity": "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==",
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.2.tgz",
+			"integrity": "sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA==",
 			"dev": true,
 			"dependencies": {
-				"debug": "^4.3.2",
-				"eslint-scope": "^7.0.0",
-				"eslint-visitor-keys": "^3.1.0",
-				"espree": "^9.0.0",
+				"debug": "^4.3.4",
+				"eslint-scope": "^7.1.1",
+				"eslint-visitor-keys": "^3.3.0",
+				"espree": "^9.3.1",
 				"esquery": "^1.4.0",
 				"lodash": "^4.17.21",
-				"semver": "^7.3.5"
+				"semver": "^7.3.6"
 			},
 			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+				"node": "^14.17.0 || >=16.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/mysticatea"
@ -4466,6 +4467,15 @@
 			"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
 			"dev": true
 		},
+		"node_modules/xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@ -4831,9 +4841,9 @@
 			}
 		},
 		"@types/node": {
-			"version": "17.0.32",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.32.tgz",
-			"integrity": "sha512-eAIcfAvhf/BkHcf4pkLJ7ECpBAhh9kcxRBpip9cTiO+hf+aJrsxYxBeS6OXvOd9WqNAJmavXVpZvY1rBjNsXmw==",
+			"version": "17.0.34",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.34.tgz",
+			"integrity": "sha512-XImEz7XwTvDBtzlTnm8YvMqGW/ErMWBsKZ+hMTvnDIjGCKxwK5Xpc+c/oQjOauwq8M4OS11hEkpjX8rrI/eEgA==",
 			"dev": true
 		},
 		"@types/nprogress": {
@ -4849,98 +4859,98 @@
 			"dev": true
 		},
 		"@typescript-eslint/eslint-plugin": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz",
-			"integrity": "sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.25.0.tgz",
+			"integrity": "sha512-icYrFnUzvm+LhW0QeJNKkezBu6tJs9p/53dpPLFH8zoM9w1tfaKzVurkPotEpAqQ8Vf8uaFyL5jHd0Vs6Z0ZQg==",
 			"dev": true,
 			"requires": {
-				"@typescript-eslint/scope-manager": "5.23.0",
-				"@typescript-eslint/type-utils": "5.23.0",
-				"@typescript-eslint/utils": "5.23.0",
-				"debug": "^4.3.2",
+				"@typescript-eslint/scope-manager": "5.25.0",
+				"@typescript-eslint/type-utils": "5.25.0",
+				"@typescript-eslint/utils": "5.25.0",
+				"debug": "^4.3.4",
 				"functional-red-black-tree": "^1.0.1",
-				"ignore": "^5.1.8",
+				"ignore": "^5.2.0",
 				"regexpp": "^3.2.0",
-				"semver": "^7.3.5",
+				"semver": "^7.3.7",
 				"tsutils": "^3.21.0"
 			}
 		},
 		"@typescript-eslint/parser": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.23.0.tgz",
-			"integrity": "sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.25.0.tgz",
+			"integrity": "sha512-r3hwrOWYbNKP1nTcIw/aZoH+8bBnh/Lh1iDHoFpyG4DnCpvEdctrSl6LOo19fZbzypjQMHdajolxs6VpYoChgA==",
 			"dev": true,
 			"requires": {
-				"@typescript-eslint/scope-manager": "5.23.0",
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/typescript-estree": "5.23.0",
-				"debug": "^4.3.2"
+				"@typescript-eslint/scope-manager": "5.25.0",
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/typescript-estree": "5.25.0",
+				"debug": "^4.3.4"
 			}
 		},
 		"@typescript-eslint/scope-manager": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz",
-			"integrity": "sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.25.0.tgz",
+			"integrity": "sha512-p4SKTFWj+2VpreUZ5xMQsBMDdQ9XdRvODKXN4EksyBjFp2YvQdLkyHqOffakYZPuWJUDNu3jVXtHALDyTv3cww==",
 			"dev": true,
 			"requires": {
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/visitor-keys": "5.23.0"
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/visitor-keys": "5.25.0"
 			}
 		},
 		"@typescript-eslint/type-utils": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz",
-			"integrity": "sha512-iuI05JsJl/SUnOTXA9f4oI+/4qS/Zcgk+s2ir+lRmXI+80D8GaGwoUqs4p+X+4AxDolPpEpVUdlEH4ADxFy4gw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.25.0.tgz",
+			"integrity": "sha512-B6nb3GK3Gv1Rsb2pqalebe/RyQoyG/WDy9yhj8EE0Ikds4Xa8RR28nHz+wlt4tMZk5bnAr0f3oC8TuDAd5CPrw==",
 			"dev": true,
 			"requires": {
-				"@typescript-eslint/utils": "5.23.0",
-				"debug": "^4.3.2",
+				"@typescript-eslint/utils": "5.25.0",
+				"debug": "^4.3.4",
 				"tsutils": "^3.21.0"
 			}
 		},
 		"@typescript-eslint/types": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz",
-			"integrity": "sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.25.0.tgz",
+			"integrity": "sha512-7fWqfxr0KNHj75PFqlGX24gWjdV/FDBABXL5dyvBOWHpACGyveok8Uj4ipPX/1fGU63fBkzSIycEje4XsOxUFA==",
 			"dev": true
 		},
 		"@typescript-eslint/typescript-estree": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz",
-			"integrity": "sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.25.0.tgz",
+			"integrity": "sha512-MrPODKDych/oWs/71LCnuO7NyR681HuBly2uLnX3r5i4ME7q/yBqC4hW33kmxtuauLTM0OuBOhhkFaxCCOjEEw==",
 			"dev": true,
 			"requires": {
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/visitor-keys": "5.23.0",
-				"debug": "^4.3.2",
-				"globby": "^11.0.4",
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/visitor-keys": "5.25.0",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
-				"semver": "^7.3.5",
+				"semver": "^7.3.7",
 				"tsutils": "^3.21.0"
 			}
 		},
 		"@typescript-eslint/utils": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.23.0.tgz",
-			"integrity": "sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.25.0.tgz",
+			"integrity": "sha512-qNC9bhnz/n9Kba3yI6HQgQdBLuxDoMgdjzdhSInZh6NaDnFpTUlwNGxplUFWfY260Ya0TRPvkg9dd57qxrJI9g==",
 			"dev": true,
 			"requires": {
 				"@types/json-schema": "^7.0.9",
-				"@typescript-eslint/scope-manager": "5.23.0",
-				"@typescript-eslint/types": "5.23.0",
-				"@typescript-eslint/typescript-estree": "5.23.0",
+				"@typescript-eslint/scope-manager": "5.25.0",
+				"@typescript-eslint/types": "5.25.0",
+				"@typescript-eslint/typescript-estree": "5.25.0",
 				"eslint-scope": "^5.1.1",
 				"eslint-utils": "^3.0.0"
 			}
 		},
 		"@typescript-eslint/visitor-keys": {
-			"version": "5.23.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz",
-			"integrity": "sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==",
+			"version": "5.25.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.25.0.tgz",
+			"integrity": "sha512-yd26vFgMsC4h2dgX4+LR+GeicSKIfUvZREFLf3DDjZPtqgLx5AJZr6TetMNwFP9hcKreTTeztQYBTNbNoOycwA==",
 			"dev": true,
 			"requires": {
-				"@typescript-eslint/types": "5.23.0",
-				"eslint-visitor-keys": "^3.0.0"
+				"@typescript-eslint/types": "5.25.0",
+				"eslint-visitor-keys": "^3.3.0"
 			}
 		},
 		"@uppy/companion-client": {
@ -4991,9 +5001,9 @@
 			}
 		},
 		"@vitejs/plugin-vue": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.2.tgz",
-			"integrity": "sha512-umyypfSHS4kQLdYAnJHhaASq7FRzNCdvcRoQ3uYGNk1/M4a+hXUd7ysN7BLhCrWH6uBokyCkFeUAaFDzSaaSrQ==",
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
+			"integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
 			"dev": true,
 			"requires": {}
 		},
@ -5662,9 +5672,9 @@
 			"dev": true
 		},
 		"countup.js": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.1.0.tgz",
-			"integrity": "sha512-VanMzLEjkt3Hp/ty5BXikM8s4wE3OH4m1AnFro7THR86nYGRvGfGCoV+zrRJcqTbZi7X1egkLSIeUKDz7+4XLA=="
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.2.0.tgz",
+			"integrity": "sha512-m0TvFNXm9/eFqJm+QiKVI8e0wRUHzlQSewz9dqVjlhl2DFoZtceLbomwzxHz0hJ1+r4zBC7wSpR/TpthG49h6g=="
 		},
 		"cropperjs": {
 			"version": "1.5.12",
@ -6120,9 +6130,9 @@
 			}
 		},
 		"eslint-plugin-vue": {
-			"version": "8.7.1",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.7.1.tgz",
-			"integrity": "sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==",
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.0.1.tgz",
+			"integrity": "sha512-/w/9/vzz+4bSYtp5UqXgJ0CfycXTMtpp6lkz7/fMp0CcJxPWyRP6Pr88ihhrsNEcVt2ZweMupWRNYa+5Md41LQ==",
 			"dev": true,
 			"requires": {
 				"eslint-utils": "^3.0.0",
@ -6130,7 +6140,8 @@
 				"nth-check": "^2.0.1",
 				"postcss-selector-parser": "^6.0.9",
 				"semver": "^7.3.5",
-				"vue-eslint-parser": "^8.0.1"
+				"vue-eslint-parser": "^9.0.1",
+				"xml-name-validator": "^4.0.0"
 			}
 		},
 		"eslint-scope": {
@ -7125,9 +7136,9 @@
 			}
 		},
 		"sass-loader": {
-			"version": "12.6.0",
-			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-			"integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.0.0.tgz",
+			"integrity": "sha512-IHCFecI+rbPvXE2zO/mqdVFe8MU7ElGrwga9hh2H65Ru4iaBJAMRteum1c4Gsxi9Cq1FOtTEDd6+/AEYuQDM4Q==",
 			"dev": true,
 			"requires": {
 				"klona": "^2.0.4",
@ -7449,9 +7460,9 @@
 			"dev": true
 		},
 		"vite": {
-			"version": "2.9.8",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.8.tgz",
-			"integrity": "sha512-zsBGwn5UT3YS0NLSJ7hnR54+vUKfgzMUh/Z9CxF1YKEBVIe213+63jrFLmZphgGI5zXwQCSmqIdbPuE8NJywPw==",
+			"version": "2.9.9",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
+			"integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==",
 			"dev": true,
 			"requires": {
 				"esbuild": "^0.14.27",
@ -7482,18 +7493,18 @@
 			}
 		},
 		"vue-eslint-parser": {
-			"version": "8.3.0",
-			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
-			"integrity": "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==",
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.2.tgz",
+			"integrity": "sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA==",
 			"dev": true,
 			"requires": {
-				"debug": "^4.3.2",
-				"eslint-scope": "^7.0.0",
-				"eslint-visitor-keys": "^3.1.0",
-				"espree": "^9.0.0",
+				"debug": "^4.3.4",
+				"eslint-scope": "^7.1.1",
+				"eslint-visitor-keys": "^3.3.0",
+				"espree": "^9.3.1",
 				"esquery": "^1.4.0",
 				"lodash": "^4.17.21",
-				"semver": "^7.3.5"
+				"semver": "^7.3.6"
 			},
 			"dependencies": {
 				"eslint-scope": {
@ -7650,6 +7661,12 @@
 			"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
 			"dev": true
 		},
+		"xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"dev": true
+		},
 		"yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -13,7 +13,7 @@
 		"@element-plus/icons-vue": "^1.1.4",
 		"@wangeditor/editor": "^5.0.1",
 		"axios": "^0.27.2",
-		"countup.js": "^2.1.0",
+		"countup.js": "^2.2.0",
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.3.2",
 		"echarts-gl": "^2.0.9",
@ -35,22 +35,22 @@
 		"vue-router": "^4.0.15"
 	},
 	"devDependencies": {
-		"@types/node": "^17.0.32",
+		"@types/node": "^17.0.34",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.13.0",
-		"@typescript-eslint/eslint-plugin": "^5.23.0",
-		"@typescript-eslint/parser": "^5.23.0",
-		"@vitejs/plugin-vue": "^2.3.2",
+		"@typescript-eslint/eslint-plugin": "^5.25.0",
+		"@typescript-eslint/parser": "^5.25.0",
+		"@vitejs/plugin-vue": "^2.3.3",
 		"@vue/compiler-sfc": "^3.2.33",
 		"dotenv": "^16.0.1",
 		"eslint": "^8.15.0",
-		"eslint-plugin-vue": "^8.7.1",
+		"eslint-plugin-vue": "^9.0.1",
 		"prettier": "^2.6.2",
 		"sass": "^1.51.0",
-		"sass-loader": "^12.6.0",
+		"sass-loader": "^13.0.0",
 		"typescript": "^4.6.4",
-		"vite": "^2.9.8",
-		"vue-eslint-parser": "^8.3.0"
+		"vite": "^2.9.9",
+		"vue-eslint-parser": "^9.0.2"
 	},
 	"browserslist": [
 		"> 1%",
--- a/src/App.vue
+++ b/src/App.vue
@ -80,6 +80,9 @@ export default defineComponent({
 			() => route.path,
 			() => {
 				other.useTitle();
+			},
+			{
+				deep: true,
 			}
 		);
 		return {
--- a/src/components/auth/authAll.vue
+++ b/src/components/auth/authAll.vue
@ -19,7 +19,7 @@ export default defineComponent({
 	setup(props) {
 		const stores = useUserInfo();
 		const { userInfos } = storeToRefs(stores);
-		// 获取 vuex 中的用户权限
+		// 获取 pinia 中的用户权限
 		const getUserAuthBtnList = computed(() => {
 			return judementSameArr(props.value, userInfos.value.authBtnList);
 		});
--- a/src/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/src/layout/navBars/breadcrumb/breadcrumb.vue
@ -7,10 +7,12 @@
 			@click="onThemeConfigChange"
 		/>
 		<el-breadcrumb class="layout-navbars-breadcrumb-hide">
-			<transition-group name="breadcrumb" mode="out-in">
-				<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="v.meta.title">
+			<transition-group name="breadcrumb">
+				<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
 					<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
+						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
+						<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
+						<div v-else>{{ v.meta.tagsViewName }}</div>
 					</span>
 					<a v-else @click.prevent="onBreadcrumbClick(v)">
 						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
@ -25,6 +27,7 @@
 import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import { Local } from '/@/utils/storage';
+import other from '/@/utils/other';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useRoutesList } from '/@/stores/routesList';
@ -77,8 +80,8 @@ export default defineComponent({
 		};
 		// 处理面包屑数据
 		const getBreadcrumbList = (arr: Array<string>) => {
-			arr.map((item: any) => {
-				state.routeSplit.map((v: any, k: number, arrs: any) => {
+			arr.forEach((item: any) => {
+				state.routeSplit.forEach((v: any, k: number, arrs: any) => {
 					if (state.routeSplitFirst === item.path) {
 						state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
 						state.breadcrumbList.push(item);
@ -90,6 +93,7 @@ export default defineComponent({
 		};
 		// 当前路由字符串切割成数组，并删除第一项空内容
 		const initRouteSplit = (path: string) => {
+			state.breadcrumbList = [];
 			if (!themeConfig.value.isBreadcrumb) return false;
 			state.breadcrumbList = [routesList.value[0]];
 			state.routeSplit = path.split('/');
@ -97,6 +101,8 @@ export default defineComponent({
 			state.routeSplitFirst = `/${state.routeSplit[0]}`;
 			state.routeSplitIndex = 1;
 			getBreadcrumbList(routesList.value);
+			if (route.name === 'home') state.breadcrumbList.shift();
+			state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
 		};
 		// 页面加载时
 		onMounted(() => {
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@ -18,9 +18,7 @@
 				>
 					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v)"></i>
 					<SvgIcon :name="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" class="pr5" />
-					<span>
-						{{ v.meta.title.indexOf('message') > -1 ? $t(v.meta.title) : v.query ? v.query.tagsViewName : v.params.tagsViewName }}
-					</span>
+					<span>{{ setTagsViewNameI18n(v) }}</span>
 					<template v-if="isActive(v)">
 						<SvgIcon
 							name="ele-RefreshRight"
@ -82,9 +80,9 @@ interface TagsViewState {
 		x: string | number;
 		y: string | number;
 	};
+	sortable: any;
 	tagsRefsIndex: number;
 	tagsViewList: any[];
-	sortable: any;
 	tagsViewRoutesList: any[];
 }
 interface RouteParams {
@ -123,9 +121,9 @@ export default defineComponent({
 			routeActive: '',
 			routePath: route.path,
 			dropdown: { x: '', y: '' },
+			sortable: '',
 			tagsRefsIndex: 0,
 			tagsViewList: [],
-			sortable: '',
 			tagsViewRoutesList: [],
 		});
 		// 动态设置 tagsView 风格样式
@ -136,6 +134,12 @@ export default defineComponent({
 		const getThemeConfig = computed(() => {
 			return themeConfig.value;
 		});
+		// 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
+		const setTagsViewNameI18n = computed(() => {
+			return (v: any) => {
+				return other.setTagsViewNameI18n(v);
+			};
+		});
 		// 设置 tagsView 高亮
 		const isActive = (v: RouteParams) => {
 			if (getThemeConfig.value.isShareTagsView) {
@ -541,11 +545,11 @@ export default defineComponent({
 		});
 		// 页面加载时
 		onMounted(() => {
-			// 初始化 vuex 中的 tagsViewRoutes 列表
+			// 初始化 pinia 中的 tagsViewRoutes 列表
 			getTagsViewRoutes();
 			initSortable();
 		});
-		// 路由更新时
+		// 路由更新时（组件内生命钩子）
 		onBeforeRouteUpdate(async (to) => {
 			state.routeActive = setTagsViewHighlight(to);
 			state.routePath = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
@ -563,24 +567,6 @@ export default defineComponent({
 				deep: true,
 			}
 		);
-		// 监听路由的变化，用于设置不同的 tagsViewName
-		watch(
-			() => route,
-			(route: any) => {
-				setTimeout(() => {
-					// 区分 "动态路由" 与 "普通路由"
-					state.tagsViewList.forEach((tagsItem: any) => {
-						const path = route.meta.isDynamic ? route.meta.isDynamicPath : route.path;
-						const tagsName = route.meta.isDynamic ? route.params.tagsViewName : route.query.tagsViewName;
-						if (path === tagsItem.path && tagsName) tagsItem.meta.title = tagsName;
-					});
-				});
-			},
-			{
-				deep: true,
-				immediate: true,
-			}
-		);
 		return {
 			isActive,
 			onContextmenu,
@ -592,6 +578,7 @@ export default defineComponent({
 			onHandleScroll,
 			getThemeConfig,
 			setTagsStyle,
+			setTagsViewNameI18n,
 			refreshCurrentTagsView,
 			closeCurrentTagsView,
 			onCurrentContextmenuClick,
--- a/src/utils/arrayOperation.ts
+++ b/src/utils/arrayOperation.ts
@ -1,15 +1,17 @@
 /**
- * 判断两数组是否相同
+ * 判断两数组字符串是否相同（用于按钮权限验证），数组字符串中存在相同时会自动去重（按钮权限标识不会重复）
 * @param news 新数据
 * @param old 源数据
 * @returns 两数组相同返回 `true`，反之则反
 */
-export function judementSameArr(news: unknown[] | string[], old: string[]): boolean {
+export function judementSameArr(newArr: unknown[] | string[], oldArr: string[]): boolean {
+	const news = removeDuplicate(newArr);
+	const olds = removeDuplicate(oldArr);
 	let count = 0;
-	const leng = old.length;
-	for (let i in old) {
+	const leng = olds.length;
+	for (let i in olds) {
 		for (let j in news) {
-			if (old[i] === news[j]) count++;
+			if (olds[i] === news[j]) count++;
 		}
 	}
 	return count === leng ? true : false;
@ -39,3 +41,26 @@ export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]
 	}
 	return true;
 }
+
+/**
+ * 数组、数组对象去重
+ * @param arr 数组内容
+ * @param attr 需要去重的键值（数组对象）
+ * @returns
+ */
+export function removeDuplicate(arr: any, attr?: string) {
+	if (!arr && !arr.length) {
+		return arr;
+	} else {
+		if (attr) {
+			const obj: any = {};
+			const newArr = arr.reduce((cur: any, item: any) => {
+				obj[item[attr]] ? '' : (obj[item[attr]] = true && item[attr] && cur.push(item));
+				return cur;
+			}, []);
+			return newArr;
+		} else {
+			return Array.from(new Set([...arr]));
+		}
+	}
+}
--- a/src/utils/other.ts
+++ b/src/utils/other.ts
@ -32,13 +32,40 @@ export function useTitle() {
 	nextTick(() => {
 		let webTitle = '';
 		let globalTitle: string = themeConfig.value.globalTitle;
-		router.currentRoute.value.path === '/login'
-			? (webTitle = router.currentRoute.value.meta.title as any)
-			: (webTitle = i18n.global.t(router.currentRoute.value.meta.title as any));
+		const { path, meta } = router.currentRoute.value;
+		if (path === '/login') {
+			webTitle = <any>meta.title;
+		} else {
+			webTitle = setTagsViewNameI18n(router.currentRoute.value);
+		}
 		document.title = `${webTitle} - ${globalTitle}` || globalTitle;
 	});
 }

+/**
+ * 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
+ * @param params 路由 query、params 中的 tagsViewName
+ * @returns 返回当前 tagsViewName 名称
+ */
+export function setTagsViewNameI18n(item: any) {
+	let tagsViewName: any = '';
+	const { query, params, meta } = item;
+	if (query?.tagsViewName || params?.tagsViewName) {
+		if (/zh-cn|en|zh-tw/.test(query?.tagsViewName) || /zh-cn|en|zh-tw/.test(params?.tagsViewName)) {
+			// 国际化
+			const urlTagsParams = (query?.tagsViewName && JSON.parse(query?.tagsViewName)) || (params?.tagsViewName && JSON.parse(params?.tagsViewName));
+			tagsViewName = urlTagsParams[i18n.global.locale];
+		} else {
+			// 非国际化
+			tagsViewName = query?.tagsViewName || params?.tagsViewName;
+		}
+	} else {
+		// 非自定义 tagsView 名称
+		tagsViewName = i18n.global.t(<any>meta.title);
+	}
+	return tagsViewName;
+}
+
 /**
 * 图片懒加载
 * @param el dom 目标元素
@ -135,6 +162,7 @@ export function handleEmpty(list: any) {
 * 统一批量导出
 * @method elSvg 导出全局注册 element plus svg 图标
 * @method useTitle 设置浏览器标题国际化
+ * @method setTagsViewNameI18n 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
 * @method lazyImg 图片懒加载
 * @method globalComponentSize() element plus 全局组件大小
 * @method deepClone 对象深克隆
@ -148,6 +176,9 @@ const other = {
 	useTitle: () => {
 		useTitle();
 	},
+	setTagsViewNameI18n(route: any) {
+		return setTagsViewNameI18n(route);
+	},
 	lazyImg: (el: any, arr: any) => {
 		lazyImg(el, arr);
 	},
--- a/src/views/params/common/index.vue
+++ b/src/views/params/common/index.vue
@ -3,12 +3,30 @@
 		<div class="flex-margin" style="width: 400px">
 			<el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
 				<template #extra>
+					<el-alert type="success" :closable="false" class="mb30">
+						<template #default>
+							<div>1、设置非国际化：格式：tagsViewName=xxx</div>
+							<br />
+							<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
+							<br />
+							<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
+							<br />
+							<div>
+								4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
+								<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
+							</div>
+						</template>
+					</el-alert>
 					<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
 					<el-input v-model="value" placeholder="请输入路由参数 id 值" clearable style="width: 400px"></el-input>
 					<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
 						<SvgIcon name="iconfont icon-putong" />
 						普通路由传参
 					</el-button>
+					<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
+						<SvgIcon name="iconfont icon-fuhao-zhongwen" />
+						{{ tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
+					</el-button>
 				</template>
 			</el-result>
 		</div>
@ -31,7 +49,8 @@ export default defineComponent({
 		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const state = reactive({
 			value: '',
-			tagsViewName: null,
+			tagsViewName: '',
+			tagsViewNameIsI18n: false,
 		});
 		const router = useRouter();
 		// 设置 view 的高度
@ -50,15 +69,30 @@ export default defineComponent({
 		 * 传不同的 tagsViewName 值
 		 */
 		const onGoDetailsClick = () => {
+			const params: any = { id: state.value };
+			if (state.tagsViewName) params.tagsViewName = state.tagsViewName;
 			router.push({
 				path: '/params/common/details',
-				query: { id: state.value, tagsViewName: state.tagsViewName },
+				query: params,
 			});
 			state.value = '';
 		};
+		const onChangeI18n = () => {
+			state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
+			if (state.tagsViewNameIsI18n) {
+				state.tagsViewName = JSON.stringify({
+					'zh-cn': '测试用',
+					en: 'test page',
+					'zh-tw': '測試用',
+				});
+			} else {
+				state.tagsViewName = '我是普通路由测试tagsViewName(非国际化)';
+			}
+		};
 		return {
 			setViewHeight,
 			onGoDetailsClick,
+			onChangeI18n,
 			...toRefs(state),
 		};
 	},
--- a/src/views/params/dynamic/index.vue
+++ b/src/views/params/dynamic/index.vue
@ -3,12 +3,30 @@
 		<div class="flex-margin" style="width: 400px">
 			<el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
 				<template #extra>
+					<el-alert type="success" :closable="false" class="mb30">
+						<template #default>
+							<div>1、设置非国际化：格式：tagsViewName=xxx</div>
+							<br />
+							<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
+							<br />
+							<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
+							<br />
+							<div>
+								4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
+								<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
+							</div>
+						</template>
+					</el-alert>
 					<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
 					<el-input v-model="value" placeholder="请输入路由参数id值" clearable style="width: 400px"></el-input>
 					<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
 						<SvgIcon name="iconfont icon-dongtai" />
 						动态路由传参
 					</el-button>
+					<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
+						<SvgIcon name="iconfont icon-fuhao-zhongwen" />
+						{{ tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
+					</el-button>
 				</template>
 			</el-result>
 		</div>
@ -18,6 +36,7 @@
 <script lang="ts">
 import { defineComponent, toRefs, reactive, computed } from 'vue';
 import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
@ -32,6 +51,7 @@ export default defineComponent({
 		const state = reactive({
 			value: '',
 			tagsViewName: '',
+			tagsViewNameIsI18n: false,
 		});
 		const router = useRouter();
 		// 设置 view 的高度
@ -46,6 +66,8 @@ export default defineComponent({
 		});
 		// 跳转到详情
 		const onGoDetailsClick = () => {
+			if (!state.tagsViewName) return ElMessage.warning('动态路由tagsViewName为必填，因为路由配置了');
+			if (!state.value) return ElMessage.warning('路由参数id值为必填');
 			// name 值为路由中的 name
 			router.push({
 				name: 'paramsDynamicDetails',
@ -57,9 +79,22 @@ export default defineComponent({
 			});
 			state.value = '';
 		};
+		const onChangeI18n = () => {
+			state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
+			if (state.tagsViewNameIsI18n) {
+				state.tagsViewName = JSON.stringify({
+					'zh-cn': '我是动态路由',
+					en: 'Im dynamic routing',
+					'zh-tw': '我是動態路由',
+				});
+			} else {
+				state.tagsViewName = '我是动态路由测试tagsViewName(非国际化)';
+			}
+		};
 		return {
 			setViewHeight,
 			onGoDetailsClick,
+			onChangeI18n,
 			...toRefs(state),
 		};
 	},