【更新】更新样式细节

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

@@ -168,23 +168,38 @@
 	})
 	// 路由监听高亮
 	const showThis = () => {
-		// route是一个只读路由对象。需要使用 useRouter 函数来获取路由实例
-		router.getRoutes().filter((item) => {
-			if (item.path === route.path) {
-				pMenu.value = item.meta.breadcrumb ? item.meta.breadcrumb[0] : {}
-			}
-		})
-		// pMenu.value = route.meta.breadcrumb ? route.meta.breadcrumb[0] : {}
 		// 展开的
 		nextTick(() => {
 			// 取得默认路由地址并设置展开
 			let active = route.meta.active || route.path
+			// 通过moduleMenu获取当前路由所属的模块，替代原有的router.getRoutes()遍历
+			const fullKeys = getParentKeys(moduleMenu.value, active)
+			if (fullKeys && fullKeys.length > 0) {
+				const rootPath = fullKeys[fullKeys.length - 1]
+				const module = moduleMenu.value.find((item) => item.path === rootPath)
+				if (module) {
+					pMenu.value = module
+					// 如果模块不同，切换模块
+					const currentModuleId = tool.data.get('SNOWY_MENU_MODULE_ID')
+					if (module.id !== currentModuleId) {
+						tagSwitchModule(module.id)
+					}
+				}
+			}
+
 			// 如果是目录，必须往下找
 			if (route.meta.type === 'catalog') {
-				active = traverseChild(pMenu.value.children, active).path
+				if (pMenu.value.children) {
+					active = traverseChild(pMenu.value.children, active).path
+				}
 			}
 			selectedKeys.value = new Array(active)
-			const pidKey = getParentKeys(pMenu.value.children, active)
+			let pidKey
+			if (pMenu.value.children) {
+				pidKey = getParentKeys(pMenu.value.children, active)
+			} else {
+				pidKey = getParentKeys(menu.value, active)
+			}
 			// 判断是隐藏的路由，找其上级
 			if (route.meta.hidden && pidKey) {
 				if (pidKey.length > 1) {
@@ -375,8 +390,6 @@
 	}
 
 	watch(route, () => {
-		// 清理选中的
-		selectedKeys.value = []
 		showThis()
 	})
 	// 监听是否开启了顶栏颜色
@@ -657,11 +670,14 @@
 	}
 	// 退出最大化
 	const exitMaximize = () => {
-		document.getElementById('app').classList.remove('main-maximize')
-		moduleMenuShow.value = false
-		nextTick(() => {
-			moduleMenuShow.value = true
-		})
+		const app = document.getElementById('app')
+		if (app.classList.contains('main-maximize')) {
+			app.classList.remove('main-maximize')
+			moduleMenuShow.value = false
+			nextTick(() => {
+				moduleMenuShow.value = true
+			})
+		}
 	}
 </script>
 

snowy-admin-web/src/layout/menu/classicalMenu.vue

@@ -23,6 +23,7 @@
 						:openKeys="openKeys"
 						:selectedKeys="selectedKeys"
 						:theme="sideTheme"
+						:class="[!roundedCornerStyleOpen ? 'no-radius-menu' : '']"
 						mode="inline"
 						@select="onSelect"
 						@openChange="onOpenChange"
@@ -82,6 +83,12 @@
 	import ModuleMenu from '@/layout/components/moduleMenu.vue'
 	import IframeView from '@/layout/components/iframeView.vue'
 	import Breadcrumb from '@/layout/components/breadcrumb.vue'
+	import { globalStore } from '@/store'
+
+	const store = globalStore()
+	const roundedCornerStyleOpen = computed(() => {
+		return store.roundedCornerStyleOpen
+	})
 
 	const props = defineProps({
 		layout: { type: String }, // 布局信息
@@ -104,10 +111,10 @@
 	watch(route, () => {
 		nextTick(() => {
 			displayLayout.value = displayLayoutResult()
+			if (displayLayout.value) {
+				emit('displayLayoutChange')
+			}
 		})
-		if (displayLayout.value) {
-			emit('displayLayoutChange')
-		}
 	})
 	onMounted(() => {
 		nextTick(() => {
@@ -187,4 +194,15 @@
 	.main-content-wrapper-max {
 		padding: 0;
 	}
+	.no-radius-menu :deep(.ant-menu-item),
+	.no-radius-menu :deep(.ant-menu-submenu-title) {
+		border-radius: 0 !important;
+		margin-inline: 0 !important;
+		width: 100% !important;
+		border-left: 4px solid transparent !important;
+		border-right: 4px solid transparent !important;
+		transition:
+			background 0.3s,
+			color 0.3s !important;
+	}
 </style>

snowy-admin-web/src/style/index.less

@@ -191,7 +191,7 @@ a, button, input, textarea {
 }
 
 .top-snowy-header {
-	background: var(--snowy-background-color);
+	background: #001529;
 	color: white;
 }
 .top-snowy-header-light {