From d1d7342eaaee8d2ff265fd2c1345dfbeb98f7684 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Sun, 25 Apr 2021 13:32:13 +0800
Subject: [PATCH] UP

---
 public/index.html              |  2 +-
 src/layout/components/head.vue |  9 +++++++++
 src/layout/components/tags.vue | 27 +++++++++++++++++++++++----
 src/layout/index.vue           |  2 +-
 src/style/style.less           |  2 +-
 src/utils/tool.js              | 33 +++++++++++++++++++++++++++++----
 6 files changed, 64 insertions(+), 11 deletions(-)
diff --git a/public/index.html b/public/index.html
index c2ef4d60..23004b94 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
 		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-		<title>Welcome to Element Plus</title>
+		<title>Welcome to SCUI Admin</title>
 	</head>
 	<body>
 		<noscript>
diff --git a/src/layout/components/head.vue b/src/layout/components/head.vue
index 6ce920c4..5270705d 100644
--- a/src/layout/components/head.vue
+++ b/src/layout/components/head.vue
@@ -11,6 +11,9 @@
 
 		</div>
 		<div class="right-panel">
+			<div class="screen panel-item" @click="screen">
+				<i class="el-icon-full-screen"></i>
+			</div>
 			<div class="setting panel-item">
 				<i class="el-icon-setting"></i>
 			</div>
@@ -63,6 +66,7 @@
 			}
 		},
 		methods: {
+			//个人信息
 			handleUser(command) {
 				if(command == "outLogin"){
 					this.$router.replace({path: '/login'});
@@ -71,6 +75,11 @@
 			getBreadcrumb(){
 				let matched = this.$route.matched;
 				this.breadList = matched;
+			},
+			//全屏
+			screen(){
+				var element = document.documentElement;
+				this.$TOOL.screen(element)
 			}
 		}
 	}
diff --git a/src/layout/components/tags.vue b/src/layout/components/tags.vue
index 5c0a6718..8485b075 100644
--- a/src/layout/components/tags.vue
+++ b/src/layout/components/tags.vue
@@ -12,10 +12,12 @@
 
 	<transition name="el-zoom-in-top">
 		<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
-			<li @click="refreshTab()">刷新</li>
+			<li @click="refreshTab()"><i class="el-icon-refresh"></i>刷新</li>
 			<hr>
-			<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''">关闭标签</li>
-			<li @click="closeOtherTabs()">关闭其他标签</li>
+			<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''"><i class="el-icon-close"></i>关闭标签</li>
+			<li @click="closeOtherTabs()"><i class="el-icon-folder-delete"></i>关闭其他标签</li>
+			<hr>
+			<li @click="screen()"><i class="el-icon-full-screen"></i>全屏当前标签</li>
 		</ul>
 	</transition>
 </template>
@@ -24,7 +26,7 @@
 	.contextmenu {
 		position: fixed;
 		margin:0;
-		border-radius: 4px;
+		border-radius: 0px;
 		background: #fff;
 		border: 1px solid #e4e7ed;
 		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
@@ -46,6 +48,10 @@
 		padding: 0 17px;
 		color: #606266;
 	}
+	.contextmenu li i {
+		font-size: 14px;
+		margin-right: 10px;
+	}
 	.contextmenu li:hover {
 		background-color: #ecf5ff;
 		color: #66b1ff;
@@ -174,6 +180,19 @@
 					}
 				})
 				this.contextMenuVisible = false
+			},
+			//TAB 全屏标签
+			screen(){
+				var nowTag = this.contextMenuItem;
+				this.contextMenuVisible = false
+				//判断是否当前路由，否的话跳转
+				if(this.$route.path != nowTag.path){
+					this.$router.push({
+						path: nowTag.path
+					})
+				}
+				var element = document.getElementById('adminui-main')
+				this.$TOOL.screen(element)
 			}
 		}
 	}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f07da65a..da0720fa 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -4,7 +4,7 @@
 	<div class="aminui-body">
 		<Head></Head>
 		<Tags></Tags>
-		<div class="adminui-main">
+		<div class="adminui-main" id="adminui-main">
 			<router-view></router-view>
 		</div>
 	</div>
diff --git a/src/style/style.less b/src/style/style.less
index 98d544d8..52e8cc41 100644
--- a/src/style/style.less
+++ b/src/style/style.less
@@ -56,7 +56,7 @@
 .adminui-tags li.active a {color: #fff;}
 
 
-.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;}
+.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;background-color: #f6f8f9;}
 
 
 .el-menu {border: none!important;}
diff --git a/src/utils/tool.js b/src/utils/tool.js
index 0228eda6..e2df9ec7 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -1,11 +1,11 @@
 const tool = {
 	/* localStorage */
 	data: {
-		set: function(table, settings) {
+		set(table, settings) {
 			var _set = JSON.stringify(settings)
 			return localStorage.setItem(table, _set);
 		},
-		get: function(table) {
+		get(table) {
 			var data = localStorage.getItem(table);
 			try {
 				data = JSON.parse(data)
@@ -14,12 +14,37 @@ const tool = {
 			}
 			return data;
 		},
-		remove: function(table) {
+		remove(table) {
 			return localStorage.removeItem(table);
 		},
-		clear: function() {
+		clear() {
 			return localStorage.clear();
 		}
+	},
+	/* Fullscreen */
+	screen(element){
+		var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
+		if(isFull){
+			if(document.exitFullscreen) {
+				document.exitFullscreen();
+			}else if (document.msExitFullscreen) {
+				document.msExitFullscreen();
+			}else if (document.mozCancelFullScreen) {
+				document.mozCancelFullScreen();
+			}else if (document.webkitExitFullscreen) {
+				document.webkitExitFullscreen();
+			}
+		}else{
+			if(element.requestFullscreen) {
+				element.requestFullscreen();
+			}else if(element.msRequestFullscreen) {
+				element.msRequestFullscreen();
+			}else if(element.mozRequestFullScreen) {
+				element.mozRequestFullScreen();
+			}else if(element.webkitRequestFullscreen) {
+				element.webkitRequestFullscreen();
+			}
+		}
 	}
 }
 
