perf: index add loading

ww
1 parent 8e8125a5
Showing 1 changed file with 303 additions and 166 deletions
src/main/webapp/index.html
--- a/src/main/webapp/index.html
View file @84ebe1b
+++ b/src/main/webapp/index.html
View file @84ebe1b
@@ -2,61 +2,62 @@
 <meta http-equiv="X-UA-Compatible" content="IE=5"><![endif]-->
 <!DOCTYPE html>
 <html>
+
 <head>
-    <!--	<title>Flowchart Maker &amp; Online Diagram Software</title>-->
-    <title>thingskit 云组态</title>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="Description"
-          content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
-    <meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
-    <meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
-    <meta itemprop="description" content="diagrams.net is a free online diagramming application  and flowchart maker . You can use it to create UML, entity relationship,
+	<!--	<title>Flowchart Maker &amp; Online Diagram Software</title>-->
+	<title>thingskit 云组态</title>
+	<meta charset="utf-8">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta name="Description"
+		content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
+	<meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
+	<meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
+	<meta itemprop="description" content="diagrams.net is a free online diagramming application  and flowchart maker . You can use it to create UML, entity relationship,
 		org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
 		circuit and social network diagrams.">
-    <meta itemprop="image"
-          content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta name="msapplication-config" content="images/browserconfig.xml">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="theme-color" content="#d89000">
-    <!-- crypto-js	-->
-    <script src="./js/plugin/crypto-js/crypto-js.js"></script>
-    <!-- 持续话存储	-->
-    <script src="./js/const/persistentStorage.js"></script>
-    <!-- 全局变量 -->
-    <script src="./js/const/const.js"></script>
-    <!-- echarts	-->
-    <script src="./js/plugin/echarts/echarts.js"></script>
-
-    <script src="./plugins/axios.min.js"></script>
-    <!--	<script src="./js/jquery/jquery-3.3.1.min.js"></script>-->
-    <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
-          integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
-          crossorigin="anonymous" referrerpolicy="no-referrer"/>
-    <script src="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/layui.min.js"
-            integrity="sha512-EKrFvch3qTzLFQgjbcjpsRmF8T3UCtc9ojtMAu6dvvP+bV8qYUDOaQ84nwYCkSLT7lbqGoya/Kf+8fyCBE0vRg=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
-    <!-- 引入修改样式	-->
-    <link rel="stylesheet" href="./styles/formatChange.css">
-
-    <!-- 引入select.zTree及相关依赖 -->
-    <!--	<link rel="stylesheet" href="./styles/zTreeStyle.css" type="text/css">-->
-    <!--	<link rel="stylesheet" href="./styles/jquery.select.zTree.v1.5.css" type="text/css">-->
-    <!--	<script type="text/javascript" src="./js/jquery.ztree.core.min.js"></script>-->
-    <!--	<script type="text/javascript" src="./js/jquery.ztree.exhide.min.js"></script>-->
-    <!--	<script type="text/javascript" src="./js/jquery.select.zTree.v1.5.min.js"></script>-->
-
-    <!-- Axios	-->
-    <script src="./plugins/DefHttp.js"></script>
-
-    <script src="./js/api/index.js"></script>
-
-    <!-- act editor -->
-    <script src="./js/plugin/ace/ace.js"></script>
-
-    <script type="text/javascript">
+	<meta itemprop="image"
+		content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta name="msapplication-config" content="images/browserconfig.xml">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="theme-color" content="#d89000">
+	<!-- crypto-js	-->
+	<script src="./js/plugin/crypto-js/crypto-js.js"></script>
+	<!-- 持续话存储	-->
+	<script src="./js/const/persistentStorage.js"></script>
+	<!-- 全局变量 -->
+	<script src="./js/const/const.js"></script>
+	<!-- echarts	-->
+	<script src="./js/plugin/echarts/echarts.js"></script>
+
+	<script src="./plugins/axios.min.js"></script>
+	<!--	<script src="./js/jquery/jquery-3.3.1.min.js"></script>-->
+	<link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
+		integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
+		crossorigin="anonymous" referrerpolicy="no-referrer" />
+	<script src="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/layui.min.js"
+		integrity="sha512-EKrFvch3qTzLFQgjbcjpsRmF8T3UCtc9ojtMAu6dvvP+bV8qYUDOaQ84nwYCkSLT7lbqGoya/Kf+8fyCBE0vRg=="
+		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+	<!-- 引入修改样式	-->
+	<link rel="stylesheet" href="./styles/formatChange.css">
+
+	<!-- 引入select.zTree及相关依赖 -->
+	<!--	<link rel="stylesheet" href="./styles/zTreeStyle.css" type="text/css">-->
+	<!--	<link rel="stylesheet" href="./styles/jquery.select.zTree.v1.5.css" type="text/css">-->
+	<!--	<script type="text/javascript" src="./js/jquery.ztree.core.min.js"></script>-->
+	<!--	<script type="text/javascript" src="./js/jquery.ztree.exhide.min.js"></script>-->
+	<!--	<script type="text/javascript" src="./js/jquery.select.zTree.v1.5.min.js"></script>-->
+
+	<!-- Axios	-->
+	<script src="./plugins/DefHttp.js"></script>
+
+	<script src="./js/api/index.js"></script>
+
+	<!-- act editor -->
+	<script src="./js/plugin/ace/ace.js"></script>
+
+	<script type="text/javascript">
 		/**
 		 * URL Parameters and protocol description are here:
 		 *
@@ -263,9 +264,9 @@
 				mxForceIncludes = true;
 			}
 			if (location.hostname == 'localhost' || location.hostname == '127.0.0.1' || location.hostname == '192.168.10.111') {
-				drawDevUrl = `http://${ location.hostname }:3000/`;
-				geBasePath = `http://${ location.hostname }:3000/js/grapheditor`;
-				mxBasePath = `http://${ location.hostname }:3000/mxgraph`;
+				drawDevUrl = `http://${location.hostname}:3000/`;
+				geBasePath = `http://${location.hostname}:3000/js/grapheditor`;
+				mxBasePath = `http://${location.hostname}:3000/mxgraph`;
 				mxForceIncludes = true;
 			}
 			mxForceIncludes = false;
@@ -335,90 +336,91 @@
 				status.innerHTML = 'Page could not be loaded. Please try refreshing.';
 			}
 		};
-    </script>
-    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
-    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-    <!--	<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">-->
-    <link rel="icon" type="image/png" sizes="32x32" href="images/logo-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-    <!--	<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">-->
-    <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
-    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
-    <link rel="preconnect" href="https://storage.googleapis.com">
-    <link rel="canonical" href="https://app.diagrams.net">
-    <link rel="manifest" href="images/manifest.json">
-    <!--	<link rel="shortcut icon" href="favicon.ico">-->
-    <link rel="shortcut icon" href="images/logo-16x16.ico">
-    <style type="text/css">
-        body {
-            overflow: hidden;
-        }
-
-        div.picker {
-            z-index: 10007;
-        }
-
-        .geSidebarContainer .geTitle input {
-            font-size: 8pt;
-            color: #606060;
-        }
-
-        .geBlock {
-            z-index: -3;
-            margin: 100px;
-            margin-top: 40px;
-            margin-bottom: 30px;
-            padding: 20px;
-            text-align: center;
-            min-width: 50%;
-        }
-
-        .geBlock h1, .geBlock h2 {
-            margin-top: 0px;
-            padding-top: 0px;
-        }
-
-        .geEditor *:not(.geScrollable)::-webkit-scrollbar {
-            width: 14px;
-            height: 14px;
-        }
-
-        .geEditor ::-webkit-scrollbar-track {
-            background-clip: padding-box;
-            border: solid transparent;
-            border-width: 1px;
-        }
-
-        .geEditor ::-webkit-scrollbar-corner {
-            background-color: transparent;
-        }
-
-        .geEditor ::-webkit-scrollbar-thumb {
-            background-color: rgba(0, 0, 0, .1);
-            background-clip: padding-box;
-            border: solid transparent;
-            border-radius: 10px;
-        }
-
-        .geEditor ::-webkit-scrollbar-thumb:hover {
-            background-color: rgba(0, 0, 0, .4);
-        }
-
-        .geTemplate {
-            border: 1px solid transparent;
-            display: inline-block;
-            _display: inline;
-            vertical-align: top;
-            border-radius: 3px;
-            overflow: hidden;
-            font-size: 14pt;
-            cursor: pointer;
-            margin: 5px;
-        }
-    </style>
-    <!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
-    <!--[if (IE 9)|(IE 10)]><!-->
-    <script type="text/vbscript">
+	</script>
+	<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
+	<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+	<!--	<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">-->
+	<link rel="icon" type="image/png" sizes="32x32" href="images/logo-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+	<!--	<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">-->
+	<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
+	<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
+	<link rel="preconnect" href="https://storage.googleapis.com">
+	<link rel="canonical" href="https://app.diagrams.net">
+	<link rel="manifest" href="images/manifest.json">
+	<!--	<link rel="shortcut icon" href="favicon.ico">-->
+	<link rel="shortcut icon" href="images/logo-16x16.ico">
+	<style type="text/css">
+		body {
+			overflow: hidden;
+		}
+
+		div.picker {
+			z-index: 10007;
+		}
+
+		.geSidebarContainer .geTitle input {
+			font-size: 8pt;
+			color: #606060;
+		}
+
+		.geBlock {
+			z-index: -3;
+			margin: 100px;
+			margin-top: 40px;
+			margin-bottom: 30px;
+			padding: 20px;
+			text-align: center;
+			min-width: 50%;
+		}
+
+		.geBlock h1,
+		.geBlock h2 {
+			margin-top: 0px;
+			padding-top: 0px;
+		}
+
+		.geEditor *:not(.geScrollable)::-webkit-scrollbar {
+			width: 14px;
+			height: 14px;
+		}
+
+		.geEditor ::-webkit-scrollbar-track {
+			background-clip: padding-box;
+			border: solid transparent;
+			border-width: 1px;
+		}
+
+		.geEditor ::-webkit-scrollbar-corner {
+			background-color: transparent;
+		}
+
+		.geEditor ::-webkit-scrollbar-thumb {
+			background-color: rgba(0, 0, 0, .1);
+			background-clip: padding-box;
+			border: solid transparent;
+			border-radius: 10px;
+		}
+
+		.geEditor ::-webkit-scrollbar-thumb:hover {
+			background-color: rgba(0, 0, 0, .4);
+		}
+
+		.geTemplate {
+			border: 1px solid transparent;
+			display: inline-block;
+			_display: inline;
+			vertical-align: top;
+			border-radius: 3px;
+			overflow: hidden;
+			font-size: 14pt;
+			cursor: pointer;
+			margin: 5px;
+		}
+	</style>
+	<!-- Workaround for binary XHR in IE 9/10, see App.loadUrl -->
+	<!--[if (IE 9)|(IE 10)]><!-->
+	<script type="text/vbscript">
 			Function mxUtilsBinaryToArray(Binary)
 				Dim i
 				ReDim byteArray(LenB(Binary))
@@ -429,36 +431,171 @@
 			End Function
     </script>
-    <!--<![endif]-->
+	<!--<![endif]-->
+	<style>
+		figure {
+			position: absolute;
+			margin: auto;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			width: 6.250em;
+			height: 6.250em;
+			animation: rotate 2.4s linear infinite;
+		}
+
+		.white {
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background: white;
+			animation: flash 2.4s linear infinite;
+			opacity: 0;
+		}
+
+		.dot {
+			position: absolute;
+			margin: auto;
+			width: 2.4em;
+			height: 2.4em;
+			border-radius: 100%;
+			transition: all 1s ease;
+		}
+
+		.dot:nth-child(2) {
+			top: 0;
+			bottom: 0;
+			left: 0;
+			background: #FF4444;
+			animation: dotsY 2.4s linear infinite;
+		}
+
+		.dot:nth-child(3) {
+			left: 0;
+			right: 0;
+			top: 0;
+			background: #FFBB33;
+			animation: dotsX 2.4s linear infinite;
+		}
+
+		.dot:nth-child(4) {
+			top: 0;
+			bottom: 0;
+			right: 0;
+			background: #99CC00;
+			animation: dotsY 2.4s linear infinite;
+		}
+
+		.dot:nth-child(5) {
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: #33B5E5;
+			animation: dotsX 2.4s linear infinite;
+		}
+
+		@keyframes rotate {
+			0% {
+				transform: rotate(0);
+			}
+
+			10% {
+				width: 6.250em;
+				height: 6.250em;
+			}
+
+			66% {
+				width: 2.4em;
+				height: 2.4em;
+			}
+
+			100% {
+				transform: rotate(360deg);
+				width: 6.250em;
+				height: 6.250em;
+			}
+		}
+
+		@keyframes dotsY {
+			66% {
+				opacity: .1;
+				width: 2.4em;
+			}
+
+			77% {
+				opacity: 1;
+				width: 0;
+			}
+		}
+
+		@keyframes dotsX {
+			66% {
+				opacity: .1;
+				height: 2.4em;
+			}
+
+			77% {
+				opacity: 1;
+				height: 0;
+			}
+		}
+
+		@keyframes flash {
+			33% {
+				opacity: 0;
+				border-radius: 0%;
+			}
+
+			55% {
+				opacity: .6;
+				border-radius: 100%;
+			}
+
+			66% {
+				opacity: 0;
+			}
+		}
+	</style>
 </head>
+
 <body class="geEditor">
-<div id="geInfo">
-    <div class="geBlock">
-        <h1>ThingsKit云组态启动中.......</h1>
-    </div>
-</div>
-<script type="text/javascript">
-	/**
-	 * Main
-	 */
-	if (navigator.userAgent != null && navigator.userAgent.toLowerCase().indexOf(' electron/') >= 0 && typeof process !== 'undefined' && process.versions.electron < 5) {
-		// Redirects old Electron app to latest version
-		var div = document.getElementById('geInfo');
-
-		if (div != null) {
-			div.innerHTML = '<center><h2>You are using an out of date version of this app.<br>Please download the latest version ' +
-				'<a href="https://github.com/jgraph/drawio-desktop/releases/latest" target="_blank">here</a>.</h2></center>';
-		}
-	} else {
-		if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") {
-			window.addEventListener('load', function () {
-				mxWinLoaded = true;
-				checkAllLoaded();
-			});
+	<div id="geInfo">
+		<div class="geBlock">
+			<h1>ThingsKit云组态启动中.......</h1>
+		</div>
+		<figure>
+			<div class="dot white"></div>
+			<div class="dot"></div>
+			<div class="dot"></div>
+			<div class="dot"></div>
+			<div class="dot"></div>
+		</figure>
+	</div>
+	<script type="text/javascript">
+		/**
+		 * Main
+		 */
+		if (navigator.userAgent != null && navigator.userAgent.toLowerCase().indexOf(' electron/') >= 0 && typeof process !== 'undefined' && process.versions.electron < 5) {
+			// Redirects old Electron app to latest version
+			var div = document.getElementById('geInfo');
+
+			if (div != null) {
+				div.innerHTML = '<center><h2>You are using an out of date version of this app.<br>Please download the latest version ' +
+					'<a href="https://github.com/jgraph/drawio-desktop/releases/latest" target="_blank">here</a>.</h2></center>';
+			}
 		} else {
-			App.main();
+			if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function") {
+				window.addEventListener('load', function () {
+					mxWinLoaded = true;
+					checkAllLoaded();
+				});
+			} else {
+				App.main();
+			}
 		}
-	}
-</script>
+	</script>
 </body>
+
 </html>