'admin-21.08.14优化修复菜单高亮、右键菜单全屏、国际化等'

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.16
+
+`2021.08.14`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 菜单高亮（详情且详情设置了 meta.isHide 时，顶级菜单高亮），感谢群友@YourObject
+- 🎯 优化 详情路径写法：如父级（/pages/filtering），那么详情为（/pages/filtering/details?id=1）。这样写可实现（详情时，父级菜单高亮），否则写成（/pages/filteringDetails?id=1）顶级菜单将不会高亮。可参考：`页面/过滤筛选组件`，点击当前图片进行测试
+- 🎯 优化 tagsView 右键菜单全屏时，打开的界面高度问题
+- 🎯 优化 图表批量 resize 问题
+- 🐞 修复 菜单收起时（设置全局主题：primary 且有二级菜单时），文字高亮颜色不对
+- 🐞 修复 国际化 <a href="https://gitee.com/lyt-top/vue-next-admin/issues/I43NPE" target="_blank">#I43NPE</a>。可参考：`页面/过滤筛选组件`，点击顶部语言切换，进行底部分页国际化查看
+
 ## 1.0.15
 
 `2021.08.06`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.0.15",
+	"version": "1.0.16",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -11,7 +11,7 @@
 		"countup.js": "^2.0.8",
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.1.2",
-		"echarts-gl": "^2.0.7",
+		"echarts-gl": "^2.0.8",
 		"echarts-wordcloud": "^2.0.0",
 		"element-plus": "^1.0.2-beta.70",
 		"mitt": "^3.0.0",
@@ -33,16 +33,16 @@
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.4.13",
+		"@types/node": "^16.6.1",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.29.0",
+		"@typescript-eslint/eslint-plugin": "^4.29.1",
-		"@typescript-eslint/parser": "^4.29.0",
+		"@typescript-eslint/parser": "^4.29.1",
-		"@vitejs/plugin-vue": "^1.3.0",
+		"@vitejs/plugin-vue": "^1.4.0",
-		"@vue/compiler-sfc": "^3.1.5",
+		"@vue/compiler-sfc": "^3.2.2",
 		"dotenv": "^10.0.0",
 		"eslint": "^7.32.0",
-		"eslint-plugin-vue": "^7.15.1",
+		"eslint-plugin-vue": "^7.16.0",
 		"prettier": "^2.3.2",
 		"sass": "^1.37.5",
 		"sass-loader": "^12.1.0",

src/App.vue

@@ -1,12 +1,14 @@
 <template>
+	<el-config-provider :locale="i18nLocale">
 		<router-view v-show="getThemeConfig.lockScreenTime !== 0" />
 		<LockScreen v-if="getThemeConfig.isLockScreen" />
 		<Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
 		<CloseFull />
+	</el-config-provider>
 </template>
 
 <script lang="ts">
-import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch } from 'vue';
+import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch, reactive, toRefs } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
 import { useTitle } from '/@/utils/setWebTitle';
@@ -24,6 +26,9 @@ export default defineComponent({
 		const route = useRoute();
 		const store = useStore();
 		const title = useTitle();
+		const state = reactive({
+			i18nLocale: null,
+		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
@@ -46,6 +51,10 @@ export default defineComponent({
 				proxy.mittBus.on('openSetingsDrawer', () => {
 					openSetingsDrawer();
 				});
+				// 设置 i18n，App.vue 中的 el-config-provider
+				proxy.mittBus.on('getI18nConfig', (locale: string) => {
+					state.i18nLocale = locale;
+				});
 				// 获取缓存中的布局配置
 				if (Local.get('themeConfig')) {
 					store.dispatch('themeConfig/setThemeConfig', Local.get('themeConfig'));
@@ -53,9 +62,10 @@ export default defineComponent({
 				}
 			});
 		});
-		// 页面销毁时，关闭监听布局配置
+		// 页面销毁时，关闭监听布局配置/i18n监听
 		onUnmounted(() => {
 			proxy.mittBus.off('openSetingsDrawer', () => {});
+			proxy.mittBus.off('getI18nConfig', () => {});
 		});
 		// 监听路由的变化，设置网站标题
 		watch(
@@ -67,6 +77,7 @@ export default defineComponent({
 		return {
 			setingsRef,
 			getThemeConfig,
+			...toRefs(state),
 		};
 	},
 });

src/i18n/index.ts

@@ -26,7 +26,7 @@ import pagesFormI18nZhtw from '/@/i18n/pages/formI18n/zh-tw';
  */
 const messages = {
 	[zhcnLocale.name]: {
-		el: zhcnLocale.el,
+		...zhcnLocale,
 		message: {
 			...nextZhcn,
 			...pagesHomeZhcn,
@@ -35,7 +35,7 @@ const messages = {
 		},
 	},
 	[enLocale.name]: {
-		el: enLocale.el,
+		...enLocale,
 		message: {
 			...nextEn,
 			...pagesHomeEn,
@@ -44,7 +44,7 @@ const messages = {
 		},
 	},
 	[zhtwLocale.name]: {
-		el: zhtwLocale.el,
+		...zhtwLocale,
 		message: {
 			...nextZhtw,
 			...pagesHomeZhtw,

src/layout/navBars/breadcrumb/user.vue

@@ -194,17 +194,24 @@ export default {
 			initI18n();
 			title();
 		};
+		// 设置 element plus 组件的国际化
+		const setI18nConfig = (locale: string) => {
+			proxy.mittBus.emit('getI18nConfig', proxy.$i18n.messages[locale]);
+		};
 		// 初始化言语国际化
 		const initI18n = () => {
 			switch (Local.get('themeConfig').globalI18n) {
 				case 'zh-cn':
 					state.disabledI18n = 'zh-cn';
+					setI18nConfig('zh-cn');
 					break;
 				case 'en':
 					state.disabledI18n = 'en';
+					setI18nConfig('en');
 					break;
 				case 'zh-tw':
 					state.disabledI18n = 'zh-tw';
+					setI18nConfig('zh-tw');
 					break;
 			}
 		};

src/layout/navBars/tagsView/tagsView.vue

@@ -46,7 +46,6 @@ import Sortable from 'sortablejs';
 import { ElMessage } from 'element-plus';
 import { useStore } from '/@/store/index';
 import { Session } from '/@/utils/storage';
-import { NextLoading } from '/@/utils/loading';
 import { isObjectValueEqual } from '/@/utils/arrayOperation';
 import Contextmenu from '/@/layout/navBars/tagsView/contextmenu.vue';
 export default {
@@ -242,19 +241,7 @@ export default {
 			const item = state.tagsViewList.find((v: any) => (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path));
 			if (item.meta.isDynamic) await router.push({ name: item.name, params: item.params });
 			else await router.push({ name: item.name, query: item.query });
-			NextLoading.start();
-			setTimeout(() => {
-				nextTick(() => {
 			store.dispatch('tagsViewRoutes/setCurrenFullscreen', true);
-					if (store.state.tagsViewRoutes.isTagsViewCurrenFull) {
-						const element = document.querySelector('.layout-main .layout-view-bg-white') as HTMLElement;
-						if (!element) return false;
-						// 非当前页开启 iframes 高度会有问题
-						if (route.path === '/iframes') element.style.height = `100vh`;
-						else element.style.height = `calc(100vh - 30px)`;
-					}
-				});
-			}, 1000);
 		};
 		// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
 		// 防止 tagsView 非当前页演示时，操作异常

src/layout/navMenu/horizontal.vue

@@ -66,15 +66,6 @@ export default defineComponent({
 				proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;
 			});
 		};
-		// 设置页面当前路由高亮
-		const setCurrentRouterHighlight = (path: string) => {
-			const currentPathSplit = path.split('/');
-			if (store.state.themeConfig.themeConfig.layout === 'classic') {
-				state.defaultActive = `/${currentPathSplit[1]}`;
-			} else {
-				state.defaultActive = path;
-			}
-		};
 		// 路由过滤递归函数
 		const filterRoutesFun = (arr: Array<object>) => {
 			return arr
@@ -99,15 +90,26 @@ export default defineComponent({
 			});
 			return currentData;
 		};
+		// 设置页面当前路由高亮
+		const setCurrentRouterHighlight = (currentRoute) => {
+			const { path, meta } = currentRoute;
+			if (store.state.themeConfig.themeConfig.layout === 'classic') {
+				state.defaultActive = `/${path.split('/')[1]}`;
+			} 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;
+			}
+		};
 		// 页面加载时
 		onMounted(() => {
 			initElMenuOffsetLeft();
-			setCurrentRouterHighlight(route.meta.isDynamic ? route.meta.isDynamicPath : route.path);
+			setCurrentRouterHighlight(route);
 		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
 			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
-			setCurrentRouterHighlight(to.meta.isDynamic ? to.meta.isDynamicPath : to.path);
+			setCurrentRouterHighlight(to);
 			proxy.mittBus.emit('onMenuClick');
 			// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
 			let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;

src/layout/navMenu/vertical.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent, getCurrentInstance } from 'vue';
+import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useStore } from '/@/store/index';
 import SubItem from '/@/layout/navMenu/subItem.vue';
@@ -62,10 +62,21 @@ export default defineComponent({
 		const setIsCollapse = computed(() => {
 			return document.body.clientWidth < 1000 ? false : getThemeConfig.value.isCollapse;
 		});
+		// 菜单高亮（详情时，父级高亮）
+		const setParentHighlight = (currentRoute) => {
+			const { path, meta } = currentRoute;
+			const pathSplit = meta.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
+			if (pathSplit.length >= 4 && meta.isHide) return pathSplit.splice(0, 3).join('/');
+			else return path;
+		};
+		// 页面加载时
+		onMounted(() => {
+			state.defaultActive = setParentHighlight(route);
+		});
 		// 路由更新时
 		onBeforeRouteUpdate((to) => {
 			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
-			state.defaultActive = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
+			state.defaultActive = setParentHighlight(to);
 			proxy.mittBus.emit('onMenuClick');
 			const clientWidth = document.body.clientWidth;
 			if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;

src/layout/routerView/iframes.vue

@@ -32,8 +32,13 @@ export default defineComponent({
 		// 设置 iframe 的高度
 		const setIframeHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `0px`;
+			} else {
 				if (isTagsview) return `84px`;
 				else return `50px`;
+			}
 		});
 		// 页面加载时
 		onMounted(() => {

src/router/route.ts

@@ -574,9 +574,15 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 							auth: ['admin', 'test'],
 							icon: 'el-icon-sell',
 						},
-					},
+						/**
+						 * 注意此处详情写法：
+						 * 1、嵌套进父级里时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
+						 * 2、不嵌套进父级时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
+						 * 3、想要父级不高亮，面包屑显示为：首页/页面/过滤筛选组件详情，设置路径为：/pages/filteringDetails
+						 */
+						children: [
 							{
-						path: '/pages/filteringDetails',
+								path: '/pages/filtering/details',
 								name: 'pagesFilteringDetails',
 								component: () => import('/@/views/pages/filtering/details.vue'),
 								meta: {
@@ -590,8 +596,10 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 									icon: 'el-icon-s-order',
 								},
 							},
+						],
+					},
 					{
-						path: '/pages/filteringDetails1',
+						path: '/pages/filtering/details1',
 						name: 'pagesFilteringDetails1',
 						component: () => import('/@/views/pages/filtering/details1.vue'),
 						meta: {

src/theme/element.scss

@@ -798,8 +798,9 @@
 		color: set-color(primary);
 	}
 }
-// 高亮时
+// 高亮时/菜单收起时
-.el-menu-item.is-active {
+.el-menu-item.is-active,
+.el-menu--collapse .el-submenu.is-active i {
 	color: set-color(primary);
 }
 .el-active-extend {

src/views/chart/index.vue

@@ -202,7 +202,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick } from 'vue';
+import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, onActivated } from 'vue';
 import { useStore } from '/@/store/index';
 import ChartHead from '/@/views/chart/head.vue';
 import * as echarts from 'echarts';
@@ -225,8 +225,13 @@ export default {
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		// 初始化中间图表1
 		const initChartsCenterOne = () => {
@@ -440,13 +445,17 @@ export default {
 			state.myCharts.push(myChart);
 		};
 		// 批量设置 echarts resize
-		const initEchartsResize = () => {
+		const initEchartsResizeFun = () => {
-			window.addEventListener('resize', () => {
+			nextTick(() => {
 				for (let i = 0; i < state.myCharts.length; i++) {
 					state.myCharts[i].resize();
 				}
 			});
 		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
+			window.addEventListener('resize', initEchartsResizeFun);
+		};
 		// 页面加载时
 		onMounted(() => {
 			initChartsCenterOne();
@@ -456,15 +465,15 @@ export default {
 			initChartsInvestment();
 			initEchartsResize();
 		});
+		// 由于页面缓存原因，keep-alive
+		onActivated(() => {
+			initEchartsResizeFun();
+		});
 		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
 		watch(
 			() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
 			() => {
-				nextTick(() => {
+				initEchartsResizeFun();
-					for (let i = 0; i < state.myCharts.length; i++) {
-						state.myCharts[i].resize();
-					}
-				});
 			}
 		);
 		return {

src/views/fun/echartsMap/index.vue

@@ -23,8 +23,13 @@ export default {
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		// echartsMap 将坐标信息和对应物理量的值合在一起
 		const convertData = (data) => {

src/views/fun/tree/index.vue

@@ -23,8 +23,13 @@ export default {
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		// 初始化数据
 		const initEchartsTree = () => {

src/views/home/index.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance, watch } from 'vue';
+import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance, watch, onActivated } from 'vue';
 import * as echarts from 'echarts';
 import { CountUp } from 'countup.js';
 import { formatAxis } from '/@/utils/formatTime';
@@ -290,13 +290,17 @@ export default {
 			state.myCharts.push(myChart);
 		};
 		// 批量设置 echarts resize
-		const initEchartsResize = () => {
+		const initEchartsResizeFun = () => {
-			window.addEventListener('resize', () => {
+			nextTick(() => {
 				for (let i = 0; i < state.myCharts.length; i++) {
 					state.myCharts[i].resize();
 				}
 			});
 		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
+			window.addEventListener('resize', initEchartsResizeFun);
+		};
 		// 页面加载时
 		onMounted(() => {
 			initNumCountUp();
@@ -304,15 +308,15 @@ export default {
 			initHomeOvertime();
 			initEchartsResize();
 		});
+		// 由于页面缓存原因，keep-alive
+		onActivated(() => {
+			initEchartsResizeFun();
+		});
 		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
 		watch(
 			() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
 			() => {
-				nextTick(() => {
+				initEchartsResizeFun();
-					for (let i = 0; i < state.myCharts.length; i++) {
-						state.myCharts[i].resize();
-					}
-				});
 			}
 		);
 		return {

src/views/pages/filtering/details.vue

@@ -21,8 +21,13 @@ export default {
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		return {
 			initTagViewHeight,

src/views/pages/filtering/details1.vue

@@ -21,8 +21,13 @@ export default {
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		return {
 			initTagViewHeight,

src/views/pages/filtering/index.vue

@@ -145,12 +145,12 @@ export default {
 		const onTableItemClick = (v: object) => {
 			if (v.id === 1) {
 				router.push({
-					path: '/pages/filteringDetails',
+					path: '/pages/filtering/details',
 					query: { id: v.id },
 				});
 			} else {
 				router.push({
-					path: '/pages/filteringDetails1',
+					path: '/pages/filtering/details1',
 					query: { id: v.id },
 				});
 			}

src/views/params/common/details.vue

@@ -23,8 +23,13 @@ export default defineComponent({
 		// 设置 view 的高度
 		const setViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		// 页面加载时
 		onMounted(() => {

src/views/params/common/index.vue

@@ -26,8 +26,13 @@ export default defineComponent({
 		// 设置 view 的高度
 		const setViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		// 跳转到详情
 		const onGoDetailsClick = () => {

src/views/params/dynamic/details.vue

@@ -23,8 +23,13 @@ export default defineComponent({
 		// 设置 view 的高度
 		const setViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		// 页面加载时
 		onMounted(() => {

src/views/params/dynamic/index.vue

@@ -26,8 +26,13 @@ export default defineComponent({
 		// 设置 view 的高度
 		const setViewHeight = computed(() => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
 				if (isTagsview) return `114px`;
 				else return `80px`;
+			}
 		});
 		// 跳转到详情
 		const onGoDetailsClick = () => {