From 079d25b22b4a510b855248da3eb560b0d14e1e35 Mon Sep 17 00:00:00 2001
From: 21030442-mao <maoxiangyu@haier.com>
Date: Wed, 16 Feb 2022 17:24:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E4=BD=BF?=
 =?UTF-8?q?=E5=BE=97component=E5=86=85=E9=A1=B5=E9=9D=A2=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87min-height:=20inherit=E8=8E=B7=E5=8F=96min-he?=
 =?UTF-8?q?ight=E9=AB=98=E5=BA=A6;=20=E5=8E=9F=E6=9C=89parent=E7=9A=84h100?=
 =?UTF-8?q?=E7=94=B1=E4=BA=8E=E5=A4=96=E5=B1=82=E6=9C=89min-height?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E5=A4=B1=E6=95=88=EF=BC=8C=E8=80=8Ccomponent?=
 =?UTF-8?q?=E5=86=85=E9=A1=B5=E9=9D=A2=E4=B9=9F=E6=97=A0=E6=B8=A0=E9=81=93?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96height:100%=EF=BC=9B=20.layout-scrollbar=20?=
 =?UTF-8?q?=E6=84=9F=E8=A7=89=E6=B2=A1=E6=9C=89padding=E7=9A=84=E7=81=B0?=
 =?UTF-8?q?=E8=89=B2=E8=BE=B9=E6=A1=86=E6=9B=B4=E5=8D=8F=E8=B0=83=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E5=B0=B1=E5=8E=BB=E6=8E=89=E4=BA=86=EF=BC=8C=E5=B0=B1?=
 =?UTF-8?q?=E5=83=8Fislink=E9=A1=B5=E9=9D=A2=E4=B8=80=E6=A0=B7=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/component/main.vue    |  14 +--
 src/layout/routerView/parent.vue |  29 ++++--
 src/theme/app.scss               | 154 ++++++++++++++++++++-----------
 3 files changed, 120 insertions(+), 77 deletions(-)

diff --git a/src/layout/component/main.vue b/src/layout/component/main.vue
index 8d21e29..2e5530d 100644
--- a/src/layout/component/main.vue
+++ b/src/layout/component/main.vue
@@ -4,12 +4,10 @@
 			class="layout-scrollbar"
 			ref="layoutScrollbarRef"
 			:style="{
-				minHeight: `calc(100vh - ${headerHeight})`,
-				padding: currentRouteMeta.isLink && currentRouteMeta.isIframe ? 0 : '',
 				transition: 'padding 0.3s ease-in-out',
 			}"
 		>
-			<LayoutParentView />
+			<LayoutParentView :minHeight="`calc(100vh - ${headerHeight})`" />
 			<Footer v-if="getThemeConfig.isFooter" />
 		</el-scrollbar>
 	</el-main>
@@ -30,7 +28,6 @@ export default defineComponent({
 		const store = useStore();
 		const state = reactive({
 			headerHeight: '',
-			currentRouteMeta: {},
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
@@ -42,14 +39,9 @@ export default defineComponent({
 			if (isTagsview) return (state.headerHeight = `84px`);
 			else return (state.headerHeight = `50px`);
 		};
-		// 初始化获取当前路由 meta，用于设置 iframes padding
-		const initGetMeta = () => {
-			state.currentRouteMeta = route.meta;
-		};
 		// 页面加载前
 		onBeforeMount(() => {
 			initHeaderHeight();
-			initGetMeta();
 		});
 		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
 		watch(store.state.themeConfig.themeConfig, (val) => {
@@ -62,9 +54,7 @@ export default defineComponent({
 		// 监听路由变化
 		watch(
 			() => route.path,
-			() => {
-				state.currentRouteMeta = route.meta;
-			}
+			() => {}
 		);
 		return {
 			getThemeConfig,
diff --git a/src/layout/routerView/parent.vue b/src/layout/routerView/parent.vue
index 3ee8ed7..99ac703 100644
--- a/src/layout/routerView/parent.vue
+++ b/src/layout/routerView/parent.vue
@@ -1,13 +1,18 @@
 <template>
-	<div class="h100">
-		<router-view v-slot="{ Component }">
-			<transition :name="setTransitionName" mode="out-in">
-				<keep-alive :include="keepAliveNameList">
-					<component :is="Component" :key="refreshRouterViewKey" class="w100" />
-				</keep-alive>
-			</transition>
-		</router-view>
-	</div>
+	<router-view v-slot="{ Component }">
+		<transition :name="setTransitionName" mode="out-in">
+			<keep-alive :include="keepAliveNameList">
+				<component
+					:is="Component"
+					:key="refreshRouterViewKey"
+					class="w100"
+					:style="{
+						minHeight: minHeight,
+					}"
+				/>
+			</keep-alive>
+		</transition>
+	</router-view>
 </template>
 
 <script lang="ts">
@@ -16,6 +21,12 @@ import { useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
 export default defineComponent({
 	name: 'layoutParentView',
+	props: {
+		minHeight: {
+			type: String,
+			default: '',
+		},
+	},
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
diff --git a/src/theme/app.scss b/src/theme/app.scss
index b027a5b..5948491 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -1,121 +1,139 @@
 /* 初始化样式
 ------------------------------- */
 * {
-	margin: 0;
-	padding: 0;
+	margin    : 0;
+	padding   : 0;
 	box-sizing: border-box;
-	outline: none !important;
+	outline   : none !important;
 }
 
 html,
 body,
 #app {
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-	font-weight: 400;
-	-webkit-font-smoothing: antialiased;
+	margin                     : 0;
+	padding                    : 0;
+	width                      : 100%;
+	height                     : 100%;
+	font-family                : Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+	font-weight                : 400;
+	-webkit-font-smoothing     : antialiased;
 	-webkit-tap-highlight-color: transparent;
-	background-color: #f8f8f8;
-	font-size: 14px;
-	overflow: hidden;
-	position: relative;
+	background-color           : #f8f8f8;
+	font-size                  : 14px;
+	overflow                   : hidden;
+	position                   : relative;
 }
 
 /* 主布局样式
 ------------------------------- */
 .layout-container {
-	width: 100%;
+	width : 100%;
 	height: 100%;
+
 	.layout-aside {
-		background: var(--bg-menuBar);
-		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
-		height: inherit;
-		position: relative;
-		z-index: 1;
-		display: flex;
+		background    : var(--bg-menuBar);
+		box-shadow    : 2px 0 6px rgb(0 21 41 / 1%);
+		height        : inherit;
+		position      : relative;
+		z-index       : 1;
+		display       : flex;
 		flex-direction: column;
-		overflow-x: hidden !important;
+		overflow-x    : hidden !important;
+
 		.el-scrollbar__view {
 			overflow: hidden;
 		}
 	}
+
 	.layout-header {
 		padding: 0 !important;
 	}
+
 	.layout-main {
-		padding: 0 !important;
-		overflow: hidden;
-		width: 100%;
+		padding         : 0 !important;
+		overflow        : hidden;
+		width           : 100%;
 		background-color: #f8f8f8;
 	}
+
 	.el-scrollbar {
 		width: 100%;
 	}
+
 	// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
 	.layout-view-bg-white {
-		background: var(--el-color-white);
-		width: 100%;
-		height: 100%;
+		background   : var(--el-color-white);
+		width        : 100%;
+		height       : 100%;
 		border-radius: 4px;
-		border: 1px solid var(--el-border-color-light, #ebeef5);
+		border       : 1px solid var(--el-border-color-light, #ebeef5);
 	}
+
 	.layout-el-aside-br-color {
 		border-right: 1px solid rgb(238, 238, 238);
 	}
+
 	// pc端左侧导航样式
 	.layout-aside-pc-220 {
-		width: 220px !important;
+		width     : 220px !important;
 		transition: width 0.3s ease;
 	}
+
 	.layout-aside-pc-64 {
-		width: 64px !important;
+		width     : 64px !important;
 		transition: width 0.3s ease;
 	}
+
 	.layout-aside-pc-1 {
-		width: 1px !important;
+		width     : 1px !important;
 		transition: width 0.3s ease;
 	}
+
 	// 手机端左侧导航样式
 	.layout-aside-mobile {
 		position: fixed;
-		top: 0;
-		left: -220px;
-		width: 220px;
-		z-index: 9999999;
+		top     : 0;
+		left    : -220px;
+		width   : 220px;
+		z-index : 9999999;
 	}
+
 	.layout-aside-mobile-close {
-		left: -220px;
+		left      : -220px;
 		transition: all 0.3s cubic-bezier(1, -0.04, 0, 1.32);
 	}
+
 	.layout-aside-mobile-open {
-		left: 0;
+		left      : 0;
 		transition: all 0.3s cubic-bezier(0.53, -0.26, 0.42, 1.18);
 	}
+
 	.layout-aside-mobile-mode {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		height: 100%;
+		position        : fixed;
+		top             : 0;
+		right           : 0;
+		bottom          : 0;
+		left            : 0;
+		height          : 100%;
 		background-color: rgba(0, 0, 0, 0.5);
-		z-index: 9999998;
+		z-index         : 9999998;
 	}
+
 	.layout-scrollbar {
 		@extend .el-scrollbar;
-		padding: 15px;
+		// padding: 15px;
 	}
+
 	.layout-mian-height-50 {
 		height: calc(100vh - 50px);
 	}
+
 	.layout-columns-warp {
-		flex: 1;
-		display: flex;
+		flex    : 1;
+		display : flex;
 		overflow: hidden;
 	}
+
 	.layout-hide {
 		display: none;
 	}
@@ -134,7 +152,7 @@ body,
 #nprogress {
 	.bar {
 		background: var(--color-primary) !important;
-		z-index: 9999999 !important;
+		z-index   : 9999999 !important;
 	}
 }
 
@@ -143,27 +161,33 @@ body,
 .flex {
 	display: flex;
 }
+
 .flex-auto {
 	flex: 1;
 }
+
 .flex-center {
 	@extend .flex;
 	flex-direction: column;
-	width: 100%;
-	overflow: hidden;
+	width         : 100%;
+	overflow      : hidden;
 }
+
 .flex-margin {
 	margin: auto;
 }
+
 .flex-warp {
-	display: flex;
-	flex-wrap: wrap;
+	display      : flex;
+	flex-wrap    : wrap;
 	align-content: flex-start;
-	margin: 0 -5px;
+	margin       : 0 -5px;
+
 	.flex-warp-item {
 		padding: 5px;
+
 		.flex-warp-item-box {
-			width: 100%;
+			width : 100%;
 			height: 100%;
 		}
 	}
@@ -175,14 +199,17 @@ body,
 .cursor-default {
 	cursor: default !important;
 }
+
 // 帮助
 .cursor-help {
 	cursor: help !important;
 }
+
 // 手指
 .cursor-pointer {
 	cursor: pointer !important;
 }
+
 // 移动
 .cursor-move {
 	cursor: move !important;
@@ -193,15 +220,19 @@ body,
 .w100 {
 	width: 100% !important;
 }
+
 .h100 {
 	height: 100% !important;
 }
+
 .vh100 {
 	height: 100vh !important;
 }
+
 .max100vh {
 	max-height: 100vh !important;
 }
+
 .min100vh {
 	min-height: 100vh !important;
 }
@@ -211,15 +242,19 @@ body,
 .color-primary {
 	color: var(--color-primary);
 }
+
 .color-success {
 	color: var(--color-success);
 }
+
 .color-warning {
 	color: var(--color-warning);
 }
+
 .color-danger {
 	color: var(--color-danger);
 }
+
 .color-info {
 	color: var(--color-info);
 }
@@ -238,25 +273,32 @@ body,
 	.mt#{$i} {
 		margin-top: #{$i}px !important;
 	}
+
 	.mr#{$i} {
 		margin-right: #{$i}px !important;
 	}
+
 	.mb#{$i} {
 		margin-bottom: #{$i}px !important;
 	}
+
 	.ml#{$i} {
 		margin-left: #{$i}px !important;
 	}
+
 	.pt#{$i} {
 		padding-top: #{$i}px !important;
 	}
+
 	.pr#{$i} {
 		padding-right: #{$i}px !important;
 	}
+
 	.pb#{$i} {
 		padding-bottom: #{$i}px !important;
 	}
+
 	.pl#{$i} {
 		padding-left: #{$i}px !important;
 	}
-}
+}
\ No newline at end of file
-- 
Gitee