Merge branch 'master' of https://gitee.com/maxnull/vue-next-admin

# Conflicts:
#	src/layout/component/aside.vue
#	src/layout/component/header.vue
#	src/layout/navBars/tagsView/tagsView.vue
#	src/store/modules/tagsViewRoutes.ts

src/layout/component/aside.vue

@@ -1,11 +1,14 @@
 <template>
-	<el-aside class="layout-aside" :class="setCollapseWidth" v-if="!isCurrenFullscreen && clientWidth > 1000">
+	<template v-if="clientWidth > 1000">
+		<el-aside class="layout-aside" :class="setCollapseWidth" v-show="!isCurrenFullscreen">
 			<Logo v-if="setShowLogo" />
 			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
 				<Vertical :menuList="menuList" :class="setCollapseWidth" />
 			</el-scrollbar>
 		</el-aside>
-	<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
+	</template>
+	<template v-else>
+		<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px">
 			<el-aside class="layout-aside w100 h100">
 				<Logo v-if="setShowLogo" />
 				<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
@@ -14,6 +17,7 @@
 			</el-aside>
 		</el-drawer>
 	</template>
+</template>
 
 <script lang="ts">
 import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount } from 'vue';

src/layout/component/columnsAside.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-columns-aside">
+	<div class="layout-columns-aside" v-show="!isCurrenFullscreen">
 		<el-scrollbar>
 			<ul>
 				<li
@@ -70,6 +70,10 @@ export default {
 		const setColumnsAsidelayout = computed(() => {
 			return store.state.themeConfig.themeConfig.columnsAsideLayout;
 		});
+		// 获取卡片全屏信息
+		const isCurrenFullscreen = computed(() => {
+			return store.state.tagsViewRoutes.isCurrenFullscreen;
+		});
 		// 设置菜单高亮位置移动
 		const setColumnsAsideMove = (k: number) => {
 			state.liIndex = k;
@@ -152,6 +156,7 @@ export default {
 			setColumnsAsideStyle,
 			setColumnsAsidelayout,
 			onColumnsAsideMenuClick,
+			isCurrenFullscreen,
 			...toRefs(state),
 		};
 	},
@@ -211,8 +216,8 @@ export default {
 			position: absolute;
 			left: 50%;
 			top: 2px;
-			height: 44px;
+			height: 50px;
-			width: 65px;
+			width: 60px;
 			transform: translateX(-50%);
 			z-index: 0;
 			transition: 0.3s ease-in-out;
@@ -221,7 +226,6 @@ export default {
 		.columns-card {
 			@extend .columns-round;
 			top: 0;
-			height: 50px;
 			width: 100%;
 			border-radius: 0;
 		}

src/layout/component/header.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-header class="layout-header sackajljfs" :height="setHeaderHeight" v-show="!isCurrenFullscreen">
+	<el-header class="layout-header" :height="setHeaderHeight" v-show="!isCurrenFullscreen">
 		<NavBarsIndex />
 	</el-header>
 </template>

src/layout/navBars/breadcrumb/user.vue

@@ -225,8 +225,19 @@ export default {
 					break;
 			}
 		};
+		// 阻止F11全屏
+		const initOnkeydown = () => {
+			document.onkeydown = (event) => {
+				var e = event || window.event || arguments.callee.caller.arguments[0];
+				if (e && e.keyCode === 122 && !state.isScreenfull) {
+					e.preventDefault();
+					onScreenfullClick();
+				}
+			};
+		};
 		// 页面加载时
 		onMounted(() => {
+			initOnkeydown();
 			if (Local.get('themeConfig')) {
 				initI18n();
 				initComponentSize();

src/layout/navBars/tagsView/tagsView.vue

@@ -185,21 +185,24 @@ export default {
 			addBrowserSetSession(state.tagsViewList);
 		};
 		// 6、开启当前页面全屏
-		const openCurrenFullscreen = (path: string) => {
+		const openCurrenFullscreen = (path: string, currentRouteInfo: object) => {
-			const item = state.tagsViewList.find((v: any) => v.path === path);
 			nextTick(() => {
-				router.push({ path, query: item.query });
+				const { meta, name, params, query } = currentRouteInfo;
-				store.dispatch('tagsViewRoutes/openCurrenFullscreen');
+				if (meta.isDynamic) router.push({ name, params });
+				else router.push({ path, query });
+				store.dispatch('tagsViewRoutes/setCurrenFullscreen');
 			});
 		};
 		// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
 		const getCurrentRouteItem = (path: string) => {
+			if (!Session.get('tagsViewList')) return state.tagsViewList.find((v: any) => v.path === path);
 			return Session.get('tagsViewList').find((v: any) => v.path === path);
 		};
 		// 当前项右键菜单点击
 		const onCurrentContextmenuClick = (item) => {
 			const { id, path } = item;
-			const { meta, name, params, query } = getCurrentRouteItem(path);
+			const currentRouteInfo = getCurrentRouteItem(path);
+			const { meta, name, params, query } = currentRouteInfo;
 			switch (id) {
 				case 0:
 					refreshCurrentTagsView(path);
@@ -218,7 +221,7 @@ export default {
 					closeAllTagsView(path);
 					break;
 				case 4:
-					openCurrenFullscreen(path);
+					openCurrenFullscreen(path, currentRouteInfo);
 					break;
 			}
 		};

src/store/modules/tagsViewRoutes.ts

@@ -1,4 +1,7 @@
 import { Module } from 'vuex';
+import { ElMessage } from 'element-plus';
+import screenfull from 'screenfull';
+import { Local } from '/@/utils/storage';
 // 此处加上 `.ts` 后缀报错，具体原因不详
 import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
 import { ElMessage } from 'element-plus';
@@ -16,7 +19,7 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 			state.tagsViewRoutes = data;
 		},
 		// 设置卡片全屏
-		setCurrenFullscreen(state: any, data: boolean) {
+		getCurrenFullscreen(state: any, data: boolean) {
 			state.isCurrenFullscreen = data;
 		},
 	},
@@ -25,22 +28,34 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 		async setTagsViewRoutes({ commit }, data: Array<string>) {
 			commit('getTagsViewRoutes', data);
 		},
-		// 开启卡片全屏
+		// 设置卡片全屏
-		openCurrenFullscreen({ commit }) {
+		setCurrenFullscreen({ commit }) {
-			if (!screenfull.isEnabled) {
+			const screenfulls: any = screenfull;
+			if (!screenfulls.isEnabled) {
 				ElMessage.warning('暂不不支持全屏');
 				return false;
 			}
-			screenfull.toggle();
+			screenfulls.toggle();
 			const currenFullscreenChange = () => {
-				if (screenfull.isFullscreen) commit('setCurrenFullscreen', true);
+				const layoutViewBgWhite = document.querySelector('.layout-view-bg-white') as HTMLElement;
-				else {
+				if (screenfulls.isFullscreen) {
-					screenfull.off('change', currenFullscreenChange);
+					commit('getCurrenFullscreen', true);
-					commit('setCurrenFullscreen', false);
+					// 设置全屏时，设置有 `layout-view-bg-white` 类的高度
+					if (layoutViewBgWhite) layoutViewBgWhite.style.height = `calc(100vh - 30px)`;
+				} else {
+					screenfulls.off('change', currenFullscreenChange);
+					commit('getCurrenFullscreen', false);
+					if (!layoutViewBgWhite) return false;
+					const getThemeConfig = Local.get('themeConfig');
+					if (getThemeConfig) {
+						let { isTagsview } = getThemeConfig;
+						if (isTagsview) layoutViewBgWhite.style.height = `calc(100vh - 114px)`;
+						else layoutViewBgWhite.style.height = `calc(100vh - 80px)`;
+					}
 				}
 			};
-			screenfull.on('change', currenFullscreenChange);
+			screenfulls.on('change', currenFullscreenChange);
-			commit('setCurrenFullscreen', true);
+			commit('getCurrenFullscreen', true);
 		},
 	},
 };

src/theme/app.scss

@@ -54,6 +54,7 @@ body,
 	.el-scrollbar {
 		width: 100%;
 	}
+	// 此字段多次用到，不可删除，如需修改，请重写覆盖样式
 	.layout-view-bg-white {
 		background: white;
 		width: 100%;

src/views/chart/index.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="chart-scrollbar" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+	<div class="chart-scrollbar layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<div class="chart-warp layout-view-bg-white">
+		<div class="chart-warp">
 			<div class="chart-warp-top">
 				<ChartHead />
 			</div>