框架优化

2025-02-01 18:29:43 +08:00
parent 40b7bd2c94
commit eaf5fdcc55
5 changed files with 113 additions and 39 deletions
--- a/web/src/layout/component/aside.vue
+++ b/web/src/layout/component/aside.vue
@@ -17,13 +17,15 @@ import { useRoutesList } from '/@/stores/routesList';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import mittBus from '/@/utils/mitt';
-
+import { useRoute } from 'vue-router';
+const route = useRoute();
 // 引入组件
 const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
 const Vertical = defineAsyncComponent(() => import('/@/layout/navMenu/vertical.vue'));

 // 定义变量内容
 const layoutAsideScrollbarRef = ref();
+const routesIndex = ref(0);
 const stores = useRoutesList();
 const storesThemeConfig = useThemeConfig();
 const storesTagsViewRoutes = useTagsViewRoutes();
@@ -83,10 +85,36 @@ const closeLayoutAsideMobileMode = () => {
 	if (clientWidth < 1000) themeConfig.value.isCollapse = false;
 	document.body.setAttribute('class', '');
 };
+const findFirstLevelIndex = (data, path) => {
+	for (let index = 0; index < data.length; index++) {
+		const item = data[index];
+    // 检查当前菜单项是否有子菜单，并查找是否在子菜单中找到路径
+		if (item.children && item.children.length > 0) {
+			// 检查子菜单中是否有匹配的路径
+			const childIndex = item.children.findIndex((child) => child.path === path);
+			if (childIndex !== -1) {
+				return index; // 返回当前一级菜单的索引
+			}
+			// 递归查找子菜单
+			const foundIndex = findFirstLevelIndex(item.children, path);
+			if (foundIndex !== null) {
+				return index; // 返回找到的索引
+			}
+		}
+	}
+	return null; // 找不到路径时返回 null
+};
 // 设置/过滤路由（非静态路由/是否显示在菜单中）
-const setFilterRoutes = () => {
+const setFilterRoutes = (path='') => {
 	if (themeConfig.value.layout === 'columns') return false;
-	state.menuList = filterRoutesFun(routesList.value);
+	let { layout, isClassicSplitMenu } = themeConfig.value;
+	if (layout === 'classic' && isClassicSplitMenu) {
+		// 获取当前地址的索引，不用从参数选取
+    routesIndex.value = findFirstLevelIndex(routesList.value,path || route.path) || 0
+		state.menuList = filterRoutesFun(routesList.value[routesIndex.value].children || [routesList.value[routesIndex.value]]);
+	} else {
+		state.menuList = filterRoutesFun(routesList.value);
+	}
 };
 // 路由过滤递归函数
 const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
@@ -122,7 +150,8 @@ onBeforeMount(() => {
 		let { layout, isClassicSplitMenu } = themeConfig.value;
 		if (layout === 'classic' && isClassicSplitMenu) {
 			state.menuList = [];
-			state.menuList = res.children;
+			// state.menuList = res.children;
+			setFilterRoutes(res.path);
 		}
 	});
 	mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
--- a/web/src/layout/navBars/breadcrumb/index.vue
+++ b/web/src/layout/navBars/breadcrumb/index.vue
@@ -102,6 +102,5 @@ onUnmounted(() => {
 	display: flex;
 	align-items: center;
 	background: var(--next-bg-topBar);
-	border-bottom: 1px solid var(--next-border-color-light);
 }
 </style>
--- a/web/src/layout/navBars/breadcrumb/user.vue
+++ b/web/src/layout/navBars/breadcrumb/user.vue
@@ -37,7 +37,7 @@
 			<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
 		</div>
 		<div class="layout-navbars-breadcrumb-user-icon">
-			<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
+			<el-popover placement="bottom" trigger="hover" transition="el-zoom-in-top" :width="300" :persistent="false">
 				<template #reference>
 					<el-badge :value="messageCenter.unread" :hidden="messageCenter.unread === 0">
 						<el-icon :title="$t('message.user.title4')">
@@ -58,7 +58,7 @@
 			></i>
 		</div>
    <div>
-      <span v-if="!isSocketOpen">
+      <span v-if="!isSocketOpen" class="online-status-span">
        <el-popconfirm
          width="250"
          ref="onlinePopoverRef"
@@ -71,7 +71,7 @@
        >
          <template #reference>
            <el-badge is-dot class="item" :class="{'online-status': isSocketOpen,'online-down':!isSocketOpen}">
-              <img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+              <img :src="getBaseURL(userInfos.avatar) || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
            </el-badge>
          </template>
        </el-popconfirm>
@@ -93,7 +93,7 @@
 				<el-dropdown-menu>
 					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
 					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
-					<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
+					<el-dropdown-item command="/versionUpgradeLog">更新日志</el-dropdown-item>
 					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
@@ -250,6 +250,7 @@ onMounted(() => {

 //消息中心的未读数量
 import { messageCenterStore } from '/@/stores/messageCenter';
+import {getBaseURL} from "/@/utils/baseUrl";
 const messageCenter = messageCenterStore();
 </script>

--- a/web/src/layout/navMenu/horizontal.vue
+++ b/web/src/layout/navMenu/horizontal.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="el-menu-horizontal-warp">
-		<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
-			<el-menu router :default-active="state.defaultActive" :ellipsis="false" background-color="transparent" mode="horizontal">
-				<template v-for="val in menuLists">
+<!--		<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">-->
+			<el-menu :default-active="defaultActive"  background-color="transparent" mode="horizontal">
+				<template v-for="(val,index) in menuLists">
 					<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 						<template #title>
 							<SvgIcon :name="val.meta.icon" />
@@ -11,7 +11,7 @@
 						<SubItem :chil="val.children" />
 					</el-sub-menu>
 					<template v-else>
-						<el-menu-item :index="val.path" :key="val.path">
+						<el-menu-item :index="val.path" :key="val.path" style="--el-menu-active-color: #fff" @click="onToRouteClick(val,index)">
 							<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 								<SvgIcon :name="val.meta.icon" />
 								{{ $t(val.meta.title) }}
@@ -26,22 +26,25 @@
 					</template>
 				</template>
 			</el-menu>
-		</el-scrollbar>
+<!--		</el-scrollbar>-->
 	</div>
 </template>

 <script setup lang="ts" name="navMenuHorizontal">
 import { defineAsyncComponent, reactive, computed, onMounted, nextTick, onBeforeMount, ref } from 'vue';
-import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
+import {useRoute, onBeforeRouteUpdate, RouteRecordRaw, useRouter} from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
-
+const router = useRouter()
 // 引入组件
 const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
-
+const state = reactive<AsideState>({
+	menuList: [],
+  clientWidth: 0
+});
 // 定义父组件传过来的值
 const props = defineProps({
 	// 菜单列表
@@ -58,19 +61,33 @@ const storesThemeConfig = useThemeConfig();
 const { routesList } = storeToRefs(stores);
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const route = useRoute();
-const state = reactive({
-	defaultActive: '' as string | undefined,
-});
-
+const defaultActive = ref('')
 // 获取父级菜单数据
 const menuLists = computed(() => {
+  <RouteItems>props.menuList.shift()
 	return <RouteItems>props.menuList;
 });
-// 设置横向滚动条可以鼠标滚轮滚动
-const onElMenuHorizontalScroll = (e: WheelEventType) => {
-	const eventDelta = e.wheelDelta || -e.deltaY * 40;
-	elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft + eventDelta / 4;
+// 递归获取当前路由的顶级索引
+const findFirstLevelIndex = (data, path) => {
+	for (let index = 0; index < data.length; index++) {
+		const item = data[index];
+    // 检查当前菜单项是否有子菜单，并查找是否在子菜单中找到路径
+		if (item.children && item.children.length > 0) {
+			// 检查子菜单中是否有匹配的路径
+			const childIndex = item.children.findIndex((child) => child.path === path);
+			if (childIndex !== -1) {
+				return index; // 返回当前一级菜单的索引
+			}
+			// 递归查找子菜单
+			const foundIndex = findFirstLevelIndex(item.children, path);
+			if (foundIndex !== null) {
+				return index; // 返回找到的索引
+			}
+		}
+	}
+	return null; // 找不到路径时返回 null
 };
+
 // 初始化数据，页面刷新时，滚动条滚动到对应位置
 const initElMenuOffsetLeft = () => {
 	nextTick(() => {
@@ -107,17 +124,41 @@ const setSendClassicChildren = (path: string) => {
 const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
 	const { path, meta } = currentRoute;
 	if (themeConfig.value.layout === 'classic') {
-		state.defaultActive = `/${path?.split('/')[1]}`;
+    let firstLevelIndex = (findFirstLevelIndex(routesList.value, route.path) || 0) - 1
+    defaultActive.value = firstLevelIndex < 0 ? defaultActive.value : menuLists.value[firstLevelIndex].path
 	} else {
 		const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
-		if (pathSplit.length >= 4 && meta?.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
-		else state.defaultActive = path;
+		if (pathSplit.length >= 4 && meta?.isHide) defaultActive.value = pathSplit.splice(0, 3).join('/');
+		else defaultActive.value = path;
 	}
 };
 // 打开外部链接
 const onALinkClick = (val: RouteItem) => {
 	other.handleOpenLink(val);
 };
+// 跳转页面
+const onToRouteClick = (val: RouteItem,index) => {
+  // 跳转到子级页面
+   let children = val.children
+  if (children === undefined){
+    defaultActive.value = val.path
+    children = setSendClassicChildren(val.path).children
+  }
+  if (children.length >= 1){
+    if (children[0].is_catalog) {
+      onToRouteClick(children[0],index)
+      return
+    }
+    router.push(children[0].path)
+    let { layout, isClassicSplitMenu } = themeConfig.value;
+    if (layout === 'classic' && isClassicSplitMenu) {
+      mittBus.emit('setSendClassicChildren', children[0]);
+    }
+  } else {
+    router.push('/home')
+  }
+};
+
 // 页面加载前
 onBeforeMount(() => {
 	setCurrentRouterHighlight(route);
@@ -126,16 +167,6 @@ onBeforeMount(() => {
 onMounted(() => {
 	initElMenuOffsetLeft();
 });
-// 路由更新时
-onBeforeRouteUpdate((to) => {
-	// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
-	setCurrentRouterHighlight(to);
-	// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
-	let { layout, isClassicSplitMenu } = themeConfig.value;
-	if (layout === 'classic' && isClassicSplitMenu) {
-		mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
-	}
-});
 </script>

 <style scoped lang="scss">
--- a/web/src/layout/navMenu/subItem.vue
+++ b/web/src/layout/navMenu/subItem.vue
@@ -8,7 +8,21 @@
 			<sub-item :chil="val.children" />
 		</el-sub-menu>
 		<template v-else>
-			<el-menu-item :index="val.path" :key="val.path">
+      <a v-if="val.name==='templateCenter'" href="#/templateCenter" target="_blank">
+        <el-menu-item   :key="val.path">
+          <template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
+            <SvgIcon :name="val.meta.icon" />
+            <span>{{ $t(val.meta.title) }}</span>
+          </template>
+          <template v-else>
+            <a class="w100" @click.prevent="onALinkClick(val)">
+              <SvgIcon :name="val.meta.icon" />
+              {{ $t(val.meta.title) }}
+            </a>
+          </template>
+        </el-menu-item>
+      </a>
+			<el-menu-item v-else :index="val.path" :key="val.path">
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 					<SvgIcon :name="val.meta.icon" />
 					<span>{{ $t(val.meta.title) }}</span>