feat: 优化兼容分栏模式下的菜单显示和点击事件处理

src/layout/component/columnsAside.vue

@@ -2,22 +2,21 @@
 	<div class="layout-columns-aside">
 		<el-scrollbar>
 			<ul @mouseleave="onColumnsAsideMenuMouseleave()">
-				<li v-for="(v, k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" @mouseenter="onColumnsAsideMenuMouseenter(v, k)" :ref="
-					(el) => {
-						if (el) columnsAsideOffsetTopRefs[k] = el;
-					}
-				" :class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }" :title="v.meta?.title.indexOf('.')>0?$t(v.meta?.title):v.meta?.title">
+				<li v-for="(v, k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" @mouseenter="onColumnsAsideMenuMouseenter(v, k)" :ref="(el: any) => {
+					if (el) columnsAsideOffsetTopRefs[k] = el;
+				}
+					" :class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }" :title="v.meta?.title.indexOf('.') > 0 ? $t(v.meta?.title) : v.meta?.title">
 					<div :class="setColumnsAsidelayout" v-if="!v.meta?.isLink || (v.meta?.isLink && v.meta.isIframe)">
 						<SvgIcon :name="v.meta?.icon" />
 						<div class="columns-vertical-title font12">
-							{{tMenuTitle(v.meta?.title)}}
+							{{ tMenuTitle(v.meta?.title) }}
 						</div>
 					</div>
 					<div :class="setColumnsAsidelayout" v-else>
 						<a :href="v.meta?.isLink" target="_blank">
 							<SvgIcon :name="v.meta?.icon" />
 							<div class="columns-vertical-title font12">
-								{{tMenuTitle(v.meta?.title)}}
+								{{ tMenuTitle(v.meta?.title) }}
 							</div>
 						</a>
 					</div>
@@ -32,7 +31,7 @@
 import { reactive, toRefs, ref, computed, onMounted, nextTick, getCurrentInstance, watch, onUnmounted, defineComponent } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
 import { useStore } from '/@/store/index';
-import {useI18n} from "vue-i18n";
+import { useI18n } from "vue-i18n";
 
 // 定义接口来定义对象的类型
 interface ColumnsAsideState {
@@ -51,7 +50,7 @@ export default defineComponent({
 	setup() {
 		const columnsAsideOffsetTopRefs: any = ref([]);
 		const columnsAsideActiveRef = ref();
-    const { t } = useI18n();
+		const { t } = useI18n();
 		const { proxy } = <any>getCurrentInstance();
 		const store = useStore();
 		const route = useRoute();
@@ -66,14 +65,14 @@ export default defineComponent({
 			routeSplit: [],
 			isNavHover: false,
 		});
-    // 设置菜单名称
-    const tMenuTitle = (title:string):string=>{
-      let rTitle = title.indexOf('.')>0?t(title):title;
-      rTitle && rTitle.length >= 4
-          ? rTitle.substring(0, store.state.themeConfig.themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
-          : rTitle
-      return rTitle
-    };
+		// 设置菜单名称
+		const tMenuTitle = (title: string): string => {
+			let rTitle = title.indexOf('.') > 0 ? t(title) : title;
+			rTitle && rTitle.length >= 4
+				? rTitle.substring(0, store.state.themeConfig.themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
+				: rTitle
+			return rTitle
+		};
 		// 设置分栏高亮风格
 		const setColumnsAsideStyle = computed(() => {
 			return store.state.themeConfig.themeConfig.columnsAsideStyle;
@@ -88,11 +87,17 @@ export default defineComponent({
 			columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
 		};
 		// 菜单高亮点击事件
-		const onColumnsAsideMenuClick = (v: Object, k: number) => {
-			setColumnsAsideMove(k);
-			let { path, redirect } = v as any;
-			if (redirect) router.push(redirect);
-			else router.push(path);
+		const onColumnsAsideMenuClick = (v: any, k: number) => {
+			// setColumnsAsideMove(k);
+			// 找到二级菜单中的第一个菜单进行跳转
+			if (v.children) {
+				const route = v.children.find((item: any) => !item.children)
+				if (route) router.push(route.path);
+			}
+
+			// let { path, redirect } = v as any;
+			// if (redirect) router.push(redirect);
+			// else router.push(path);
 		};
 		// 鼠标移入时，显示当前的子级菜单
 		const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
@@ -188,7 +193,7 @@ export default defineComponent({
 		});
 		// 页面卸载时
 		onUnmounted(() => {
-			proxy.mittBus.off('restoreDefault', () => {});
+			proxy.mittBus.off('restoreDefault', () => { });
 		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
@@ -204,7 +209,7 @@ export default defineComponent({
 			onColumnsAsideMenuClick,
 			onColumnsAsideMenuMouseenter,
 			onColumnsAsideMenuMouseleave,
-      tMenuTitle,
+			tMenuTitle,
 			...toRefs(state),
 		};
 	},
@@ -216,8 +221,10 @@ export default defineComponent({
 	width: 70px;
 	height: 100%;
 	background: var(--next-bg-columnsMenuBar);
+
 	ul {
 		position: relative;
+
 		li {
 			color: var(--next-bg-columnsMenuBarColor);
 			width: 100%;
@@ -227,43 +234,54 @@ export default defineComponent({
 			cursor: pointer;
 			position: relative;
 			z-index: 1;
+
 			.columns-vertical {
 				margin: auto;
+
 				.columns-vertical-title {
 					padding-top: 1px;
 				}
 			}
+
 			.columns-horizontal {
 				display: flex;
 				height: 50px;
 				width: 100%;
 				align-items: center;
 				padding: 0 5px;
+
 				i {
 					margin-right: 3px;
 				}
+
 				a {
 					display: flex;
+
 					.columns-horizontal-title {
 						padding-top: 1px;
 					}
 				}
 			}
+
 			a {
 				text-decoration: none;
 				color: var(--next-bg-columnsMenuBarColor);
 			}
 		}
+
 		.layout-columns-active {
 			color: var(--el-color-white);
 			transition: 0.3s ease-in-out;
 		}
-		.layout-columns-hover {
+
+		.layout-columns-hover:not(.layout-columns-active) {
 			color: var(--el-color-primary);
+
 			a {
 				color: var(--el-color-primary);
 			}
 		}
+
 		.columns-round {
 			background: var(--el-color-primary);
 			color: var(--el-color-white);
@@ -277,6 +295,7 @@ export default defineComponent({
 			transition: 0.3s ease-in-out;
 			border-radius: 5px;
 		}
+
 		.columns-card {
 			@extend .columns-round;
 			top: 0;