【更新】标签页优化样式，解决带参数标签卡刷新丢失选中问题

snowy-admin-web/src/layout/components/tags.vue

@@ -69,7 +69,7 @@
 	import { globalStore, iframeStore, keepAliveStore, viewTagsStore } from '@/store'
 	import routerUtil from '@/utils/routerUtil'
 	import { useRoute, useRouter } from 'vue-router'
-	import { watch } from 'vue'
+	import { watch, ref, computed, nextTick, onMounted } from 'vue'
 
 	const route = useRoute()
 	const router = useRouter()
@@ -261,7 +261,6 @@
 
 	const module = router.getMenu()
 	const indexMenu = routerUtil.getIndexMenu(module).path
-	// eslint-disable-next-line eqeqeq
 	const dashboardRoute = treeFind(module, (node) => node.path === indexMenu)
 	if (dashboardRoute) {
 		dashboardRoute.fullPath = dashboardRoute.path
@@ -324,7 +323,6 @@
 					.ant-tabs-tab {
 						background: none;
 						height: 40px;
-						line-height: 40px;
 						transition:
 							background-color 0.3s,
 							color 0.3s;
@@ -334,7 +332,7 @@
 						margin: 0;
 						.ant-tabs-tab-remove {
 							margin: 0;
-							padding: 0 5px;
+							padding: 0 0 0 5px;
 						}
 					}
 					.ant-tabs-tab-active {
@@ -447,7 +445,7 @@
 	.snowy-radius .ant-tabs-tab-active {
 		position: relative;
 		z-index: 1;
-		border-radius: 10px 10px 0 0 !important;
+		border-radius: 6px 6px 0 0 !important;
 		box-shadow:
 			12px 15px 0 0 var(--primary-1),
 			-12px 15px 0 0 var(--primary-1);
@@ -460,7 +458,7 @@
 		width: 13px;
 		height: 40px;
 		background: var(--primary-radius);
-		border-radius: 0 0 20px 0;
+		border-radius: 0 0 8px 0;
 	}
 	.snowy-radius .ant-tabs-tab-active::after {
 		content: '';
@@ -470,7 +468,7 @@
 		width: 13px;
 		height: 40px;
 		background: var(--primary-radius);
-		border-radius: 0 0 0 20px;
+		border-radius: 0 0 0 8px;
 	}
 
 	.snowy-radius .ant-tabs-ink-bar {

snowy-admin-web/src/layout/index.vue

@@ -544,11 +544,14 @@
 	const getParentKeys = (data, val) => {
 		const traverse = (array, val) => {
 			// 递归父级key
+			if (!Array.isArray(array)) {
+				return undefined
+			}
 			for (const element of array) {
-				if (element.path === val) {
+				if (element?.path === val) {
 					return [element.path]
 				}
-				if (element.children) {
+				if (element?.children) {
 					const far = traverse(element.children, val)
 					if (far) {
 						return far.concat(element.path)

snowy-admin-web/src/router/scrollBehavior.js

@@ -30,7 +30,7 @@ export function afterEach(to) {
 	}
 	nextTick(() => {
 		const store = viewTagsStore()
-		const beforeRoute = store.viewTags.filter((v) => v.fullPath == to.fullPath)[0]
+		const beforeRoute = store.viewTags.filter((v) => v.path === to.path)[0]
 		if (beforeRoute) {
 			adminMain.scrollTop = beforeRoute.scrollTop || 0
 		}

snowy-admin-web/src/store/viewTags.js

@@ -32,14 +32,14 @@ export const viewTagsStore = defineStore('viewTags', () => {
 	}
 	const removeViewTags = (route) => {
 		viewTags.value.forEach((item, index) => {
-			if (item.fullPath === route.fullPath) {
+			if (item.path === route.path) {
 				viewTags.value.splice(index, 1)
 			}
 		})
 	}
 	const updateViewTags = (route) => {
 		viewTags.value.forEach((item, index) => {
-			if (item.fullPath === route.fullPath) {
+			if (item.path === route.path) {
 				viewTags.value[index] = { ...route, ...item }
 				// Object.assign(item, route)
 			}
@@ -49,14 +49,15 @@ export const viewTagsStore = defineStore('viewTags', () => {
 	const updateOrRemoveViewTags = (routes) => {
 		if (routes && routes.length > 0) {
 			viewTags.value.forEach((item, index) => {
-				const target = routes.find((route) => route.path === item.fullPath)
+				// 使用path进行比较，忽略参数部分
+				const target = routes.find((route) => route.path === item.path)
 				if (!target) {
 					// 路由不存在，删除
 					viewTags.value.splice(index, 1)
 				} else {
 					// 路由存在，更新
 					viewTags.value = viewTags.value.map((item) => {
-						if (item.fullPath === target.path) {
+						if (item.path === target.path) {
 							return { ...item, meta: target.meta }
 						}
 						return item

snowy-admin-web/src/utils/useTabs.js

@@ -61,7 +61,7 @@ export default {
 		const tagList = [...store.viewTags]
 		tagList.forEach((tag) => {
 			// eslint-disable-next-line prettier/prettier
-			if ((tag.meta && tag.meta.affix) || route.fullPath == tag.fullPath) {
+			if ((tag.meta && tag.meta.affix) || route.path === tag.path) {
 				return true
 			} else {
 				this.close(tag)