'admin-22.04.29:优化滚动条问题及替换pinia后的bug'

2022-04-29 22:57:31 +08:00 · 2022-04-29 22:57:31 +08:00 · c630f04194
commit c630f04194
parent f6302a8b40
9 changed files with 80 additions and 60 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -18,6 +18,7 @@
 - 🎯 优化 地址栏有参数退出登录，再次登录不跳之前界面问题 `src/layout/navBars/breadcrumb/user.vue`
 - 🎯 优化 `SvgIcon` 组件，防止 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题
 - 🎯 优化 [wangEditor](https://www.wangeditor.com/) 更新到 v5，[vue3 版本线上示例中 wangeditor 富文本编辑器 demo 实例,无法换行#I5565B](https://gitee.com/lyt-top/vue-next-admin/issues/I5565B)，感谢@[jenchih](https://gitee.com/jenchih)
+- 🎯 优化 [在关闭 tagview 时，高度刷新时会会变化，出现滚动条](https://gitee.com/lyt-top/vue-next-admin/issues/I55FHM)，感谢[张松](https://gitee.com/zs310071113)
 - 🎉 新增 [vuex](https://vuex.vuejs.org/) 替换成 [pinia](https://pinia.vuejs.org/getting-started.html)
 - 🎉 新增 tagsView 支持自定义 tagsView 名称（文章详情时有用），前往体验：[路由参数/普通路由](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)
 - 🐞 修复 适配 `"element-plus": "^2.1.9"` 版本
--- a/src/layout/component/aside.vue
+++ b/src/layout/component/aside.vue
@ -57,18 +57,12 @@ export default defineComponent({
 			} else {
 				if (layout === 'columns') {
 					// 分栏布局，菜单收起时宽度给 1px
-					if (isCollapse) {
-						return [asideBrColor, 'layout-aside-pc-1'];
-					} else {
-						return [asideBrColor, 'layout-aside-pc-220'];
-					}
+					if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
+					else return [asideBrColor, 'layout-aside-pc-220'];
 				} else {
 					// 其它布局给 64px
-					if (isCollapse) {
-						return [asideBrColor, 'layout-aside-pc-64'];
-					} else {
-						return [asideBrColor, 'layout-aside-pc-220'];
-					}
+					if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
+					else return [asideBrColor, 'layout-aside-pc-220'];
 				}
 			}
 		});
@ -122,11 +116,17 @@ export default defineComponent({
 			}
 		});
 		// 监听vuex值的变化，动态赋值给菜单中
-		watch(pinia.state, (val) => {
-			let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
-			if (layout === 'classic' && isClassicSplitMenu) return false;
-			setFilterRoutes();
-		});
+		watch(
+			pinia.state,
+			(val) => {
+				let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
+				if (layout === 'classic' && isClassicSplitMenu) return false;
+				setFilterRoutes();
+			},
+			{
+				deep: true,
+			}
+		);
 		// 页面加载前
 		onBeforeMount(() => {
 			initMenuFixed(document.body.clientWidth);
--- a/src/layout/component/columnsAside.vue
+++ b/src/layout/component/columnsAside.vue
@ -61,7 +61,6 @@ interface ColumnsAsideState {
 	liOldPath: null | string;
 	difference: number;
 	routeSplit: string[];
-	isNavHover: boolean;
 }

 export default defineComponent({
@ -84,7 +83,6 @@ export default defineComponent({
 			liOldPath: null,
 			difference: 0,
 			routeSplit: [],
-			isNavHover: false,
 		});
 		// 设置菜单高亮位置移动
 		const setColumnsAsideMove = (k: number) => {
@ -107,7 +105,6 @@ export default defineComponent({
 			proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
 			stores.setColumnsMenuHover(false);
 			stores.setColumnsNavHover(true);
-			state.isNavHover = true;
 		};
 		// 鼠标移走时，显示原来的子级菜单
 		const onColumnsAsideMenuMouseleave = async () => {
@ -116,7 +113,6 @@ export default defineComponent({
 			setTimeout(() => {
 				if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
 			}, 100);
-			// state.isNavHover = false;
 		};
 		// 设置高亮动态位置
 		const onColumnsAsideDown = (k: number) => {
@ -169,17 +165,23 @@ export default defineComponent({
 			}, 0);
 		};
 		// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
-		watch(pinia.state, (val) => {
-			val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
-			if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
-				state.liHoverIndex = null;
-				proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
-			} else {
-				state.liHoverIndex = state.liOldIndex;
-				if (!state.liOldPath) return false;
-				proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
+		watch(
+			pinia.state,
+			(val) => {
+				val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
+				if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
+					state.liHoverIndex = null;
+					proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
+				} else {
+					state.liHoverIndex = state.liOldIndex;
+					if (!state.liOldPath) return false;
+					proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
+				}
+			},
+			{
+				deep: true,
 			}
-		});
+		);
 		// 页面加载时
 		onMounted(() => {
 			setFilterRoutes();
@ -256,7 +258,7 @@ export default defineComponent({
 			}
 		}
 		.layout-columns-active {
-			color: var(--el-color-white) !important;
+			color: var(--next-bg-columnsMenuBarColor) !important;
 			transition: 0.3s ease-in-out;
 		}
 		.layout-columns-hover {
--- a/src/layout/component/main.vue
+++ b/src/layout/component/main.vue
@ -1,18 +1,26 @@
 <template>
 	<el-main class="layout-main">
 		<el-scrollbar
-			class="layout-scrollbar"
 			ref="layoutScrollbarRef"
-			:style="{ padding: currentRouteMeta.isLink && currentRouteMeta.isIframe ? 0 : '', transition: 'padding 0.3s ease-in-out' }"
+			:class="{
+				'layout-scrollbar':
+					(!isClassicOrTransverse && !currentRouteMeta.isLink && !currentRouteMeta.isIframe) ||
+					(!isClassicOrTransverse && currentRouteMeta.isLink && !currentRouteMeta.isIframe),
+			}"
 		>
-			<LayoutParentView :style="{ minHeight: `calc(100vh - ${headerHeight})` }" />
+			<LayoutParentView
+				:style="{
+					padding: !isClassicOrTransverse || (currentRouteMeta.isLink && currentRouteMeta.isIframe) ? '0' : '15px',
+					transition: 'padding 0.3s ease-in-out',
+				}"
+			/>
 			<Footer v-if="themeConfig.isFooter" />
 		</el-scrollbar>
 	</el-main>
 </template>

 <script lang="ts">
-import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted } from 'vue';
+import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@ -37,12 +45,17 @@ export default defineComponent({
 			headerHeight: '',
 			currentRouteMeta: {},
 		});
+		// 判断布局
+		const isClassicOrTransverse = computed(() => {
+			const { layout } = themeConfig.value;
+			return layout === 'classic' || layout === 'transverse';
+		});
 		// 设置 main 的高度
 		const initHeaderHeight = () => {
 			const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
 			let { isTagsview } = themeConfig.value;
-			if (isTagsview) return (state.headerHeight = bool ? `85px` : `114px`);
-			else return (state.headerHeight = `51px`);
+			if (isTagsview) return (state.headerHeight = bool ? `86px` : `115px`);
+			else return (state.headerHeight = `80px`);
 		};
 		// 初始化获取当前路由 meta，用于设置 iframes padding
 		const initGetMeta = () => {
@ -59,22 +72,26 @@ export default defineComponent({
 			() => {
 				state.currentRouteMeta = route.meta;
 				const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
-				state.headerHeight = bool ? `85px` : `114px`;
+				state.headerHeight = bool ? `86px` : `115px`;
 				proxy.$refs.layoutScrollbarRef.update();
 			}
 		);
 		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-		watch(themeConfig, (val) => {
-			state.currentRouteMeta = route.meta;
-			const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
-			state.headerHeight = val.isTagsview ? (bool ? `85px` : `114px`) : '51px';
-			if (val.isFixedHeaderChange !== val.isFixedHeader) {
-				if (!proxy.$refs.layoutScrollbarRef) return false;
-				proxy.$refs.layoutScrollbarRef.update();
+		watch(
+			themeConfig,
+			(val) => {
+				state.currentRouteMeta = route.meta;
+				const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
+				state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
+				proxy.$refs?.layoutScrollbarRef?.update();
+			},
+			{
+				deep: true,
 			}
-		});
+		);
 		return {
 			themeConfig,
+			isClassicOrTransverse,
 			...toRefs(state),
 		};
 	},
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@ -553,10 +553,16 @@ export default defineComponent({
 			getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
 		});
 		// 监听路由的变化，动态赋值给 tagsView
-		watch(pinia.state, (val) => {
-			if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
-			getTagsViewRoutes();
-		});
+		watch(
+			pinia.state,
+			(val) => {
+				if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
+				getTagsViewRoutes();
+			},
+			{
+				deep: true,
+			}
+		);
 		// 监听路由的变化，用于设置不同的 tagsViewName
 		watch(
 			() => route,
--- a/src/layout/routerView/iframes.vue
+++ b/src/layout/routerView/iframes.vue
@ -41,7 +41,7 @@ export default defineComponent({
 			if (isTagsViewCurrenFull.value) {
 				return `1px`;
 			} else {
-				if (isTagsview) return `85px`;
+				if (isTagsview) return `86px`;
 				else return `51px`;
 			}
 		});
--- a/src/layout/routerView/link.vue
+++ b/src/layout/routerView/link.vue
@ -39,7 +39,7 @@ export default defineComponent({
 		// 设置 link 的高度
 		const setLinkHeight = computed(() => {
 			let { isTagsview } = themeConfig.value;
-			if (isTagsview) return `114px`;
+			if (isTagsview) return `115px`;
 			else return `80px`;
 		});
 		// 监听路由的变化，设置内容
--- a/src/layout/routerView/parent.vue
+++ b/src/layout/routerView/parent.vue
@ -3,7 +3,7 @@
 		<router-view v-slot="{ Component }">
 			<transition :name="setTransitionName" mode="out-in">
 				<keep-alive :include="keepAliveNameList">
-					<component :is="Component" :key="refreshRouterViewKey" class="w100" :style="{ minHeight }" />
+					<component :is="Component" :key="refreshRouterViewKey" class="w100" />
 				</keep-alive>
 			</transition>
 		</router-view>
@ -25,12 +25,6 @@ interface ParentViewState {

 export default defineComponent({
 	name: 'layoutParentView',
-	props: {
-		minHeight: {
-			type: String,
-			default: '',
-		},
-	},
 	setup() {
 		const { proxy } = <any>getCurrentInstance();
 		const route = useRoute();
--- a/src/router/route.ts
+++ b/src/router/route.ts
@ -4,11 +4,11 @@ import { RouteRecordRaw } from 'vue-router';
 * 路由meta对象参数说明
 * meta: {
 *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
- *      isLink：        是否超链接菜单，开启外链条件，`1、isLink:true 2、链接地址不为空`
+ *      isLink：        是否超链接菜单，开启外链条件，`1、isLink: 链接地址不为空`
 *      isHide：        是否隐藏此路由
 *      isKeepAlive：   是否缓存组件状态
 *      isAffix：       是否固定在 tagsView 栏上
- *      isIframe：      是否内嵌窗口，，开启条件，`1、isIframe:true 2、链接地址不为空`
+ *      isIframe：      是否内嵌窗口，，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
 *      roles：         当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
 *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
 * }