diff --git a/frontend/src/assets/logo-light-MeterSphere.svg b/frontend/src/assets/logo-light-MeterSphere.svg
index 1fb78563d5..5b8f2cb7ce 100755
--- a/frontend/src/assets/logo-light-MeterSphere.svg
+++ b/frontend/src/assets/logo-light-MeterSphere.svg
@@ -1,80 +1,33 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="947.2 183.1 174 35" style="enable-background:new 947.2 183.1 174 35;" xml:space="preserve">
+     viewBox="0 0 201.33 232.66" style="enable-background:new 0 0 201.33 232.66;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 </style>
-<g>
-	<g id="XMLID_140_">
-		<path id="XMLID_166_" class="st0" d="M998.3,209.6l-1.1-11.2l-3.1,11.2h-3.6l-3-11.2l-1.1,11.2l-5,0l2.4-16.5h6.3l2.2,7.8l2.2-7.8
-			h6.2l2.5,16.5H998.3z"/>
-		<path id="XMLID_163_" class="st0" d="M1015.2,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
-			c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
-			c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
-			C1015.1,200.7,1015.2,201.6,1015.2,202.7z M1011.8,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
-			l-0.1,0.6h3.1V202.1z"/>
-		<path id="XMLID_160_" class="st0" d="M1037.3,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
-			c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
-			c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
-			C1037.2,200.7,1037.3,201.6,1037.3,202.7z M1033.9,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
-			l-0.1,0.6h3.1V202.1L1033.9,202.1z"/>
-		<path id="XMLID_157_" class="st0" d="M1098.2,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
-			c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
-			c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
-			C1098.1,200.7,1098.2,201.6,1098.2,202.7z M1094.8,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
-			l-0.1,0.6h3.1V202.1z"/>
-		<path id="XMLID_154_" class="st0" d="M1120.3,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
-			c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
-			c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
-			C1120.2,200.7,1120.3,201.6,1120.3,202.7z M1116.9,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
-			l-0.1,0.6h3.1V202.1z"/>
-		<path id="XMLID_152_" class="st0" d="M1025.7,209.6h-2.1c-0.4,0-0.7,0-0.9,0c-0.7-0.1-1.3-0.2-1.7-0.4c-0.5-0.3-1-0.7-1.2-1.2
-			c-0.3-0.6-0.5-1.4-0.5-2.5l0-4.6h-1.7v-3h1.7v-2.3l1.7,0l1.8-0.2v2.6h2.7l-0.4,3h-2.3v4.4c0,0.1,0,0.2,0,0.3c0,0.2,0,0.3,0.1,0.5
-			c0.1,0.3,0.3,0.5,0.7,0.6c0.3,0.1,1.9,0.1,1.9,0.1L1025.7,209.6z"/>
-		<path id="XMLID_150_" class="st0" d="M1047.7,197.9l-0.1,2.8c-0.3,0-1.2,0-2.1,0.2c-0.8,0.2-1.7,0.6-2.1,0.8v8h-3.5v-11.8h3.3
-			c0,0-0.1,0.6,0,0.9l0.8-0.3c0.5-0.2,1-0.3,1.7-0.4C1046.7,197.8,1047.3,197.9,1047.7,197.9z"/>
-		<path id="XMLID_148_" class="st0" d="M1108.9,197.9l-0.1,2.8c-0.3,0-1.2,0-2.1,0.2c-0.8,0.2-1.7,0.6-2.1,0.8v8h-3.5v-11.8h3.3
-			c0,0-0.1,0.6,0,0.9l0.8-0.3c0.5-0.2,1-0.3,1.7-0.4C1107.9,197.8,1108.5,197.9,1108.9,197.9z"/>
-		<path id="XMLID_146_" class="st0" d="M1054.6,210.1c-0.8,0-1.8-0.1-2.7-0.2c-0.4,0-0.8-0.1-1.2-0.2l-1.6-0.2l0-4.1l2.4,0.4
-			c0,0,1,0.1,1.4,0.2c0.5,0.1,1,0.1,1.4,0.1c1.5,0,2.4-0.4,2.7-1.1c0.1-0.3,0.1-0.6,0-0.9c-0.2-0.3-0.5-0.6-0.9-0.8
-			c-0.2-0.1-0.5-0.2-0.8-0.3l-0.9-0.3c-0.4-0.1-0.8-0.2-1.1-0.3c-0.4-0.1-0.8-0.3-1.1-0.4c-0.8-0.4-1.5-0.8-2-1.3
-			c-0.4-0.5-0.7-1.1-0.9-1.8c-0.1-0.5-0.1-1.1,0-1.7c0.2-1.8,1-3.1,2.3-3.8c0.5-0.3,1.1-0.5,1.8-0.6c0.3,0,0.6-0.1,0.9-0.1l0.9-0.1
-			h0.6c0.7,0,1.5,0,2.3,0.1l1,0.1l1.2,0.2l0,3.6c-0.5-0.1-1-0.2-1.7-0.3c-0.9-0.1-1.7-0.2-2.4-0.2c-1.6,0-2.2,0.3-2.5,1.1
-			c-0.1,0.3-0.1,0.6-0.1,0.9c0,0.4,0,0.5,0.7,0.8c0.2,0.1,0.5,0.2,0.8,0.3l2.1,0.6c0.4,0.1,0.8,0.3,1.1,0.4c0.8,0.3,1.4,0.7,1.8,1.1
-			c0.5,0.5,0.8,1.1,0.9,1.8c0.1,0.5,0.1,1.1,0,1.7c-0.2,1.8-1.1,3.4-2.4,4.1c-0.5,0.3-1.1,0.5-1.8,0.6c-0.3,0-0.6,0.1-0.9,0.1
-			l-0.8,0.1L1054.6,210.1L1054.6,210.1z"/>
-		<path id="XMLID_143_" class="st0" d="M1063.6,197.8h3.2l-0.1,0.8c0.3-0.2,0.6-0.3,1-0.4c0.4-0.2,0.8-0.3,1.1-0.3
-			c0.9-0.2,1.8-0.2,2.7,0.1c0.5,0.2,1,0.5,1.4,1c0.2,0.2,0.3,0.4,0.4,0.6l0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0.2,0.4,0.3,0.9,0.4,1.4
-			c0.1,0.6,0.2,1.3,0.2,2.2v0.7c0,1.8-0.1,2.7-0.4,3.4c-0.5,1.1-1.6,1.6-3.7,1.7c-0.3,0-0.7,0-1.2,0l-0.8,0c-0.3,0-0.5,0-0.7,0v5.1
-			l-3.6,0.2V197.8L1063.6,197.8z M1067.2,206.1c0.7,0.1,1.1,0.1,1.7,0.1l0.6-0.1c0.7-0.2,1-0.6,1-1.3v-2.3c0-0.3,0-0.6-0.1-0.7
-			c-0.2-0.7-0.8-1-1.8-0.9l-0.4,0.1l-0.7,0.2l-0.3,0.1L1067.2,206.1L1067.2,206.1z"/>
-		<path id="XMLID_141_" class="st0" d="M1086.5,203.2v6.4h-3.6v-7c0-0.4-0.3-1.1-0.8-1.4c-0.4-0.2-1-0.2-1.2-0.1
-			c-0.5,0.1-1,0.4-1.3,0.6v7.9h-3.6v-17l3.6,0v6c0.4-0.2,0.9-0.3,1.4-0.4c0.4-0.1,0.8-0.1,1.2-0.1c2.1,0,3.2,0.6,3.7,1.7
-			C1086.2,200.2,1086.5,201.4,1086.5,203.2z"/>
+  <g id="XMLID_702_">
+	<path id="XMLID_703_" class="st0" d="M100.69,3.09l97.89,56.52v113.03l-97.89,56.52L2.8,172.64V59.61L100.69,3.09 M100.69,0
+		L0.12,58.06v116.12l100.57,58.06l100.57-58.06V58.06L100.69,0L100.69,0z"/>
+</g>
+  <polygon id="XMLID_698_" class="st0" points="15.9,65.32 100.68,16.37 185.47,65.32 100.68,114.27 "/>
+  <g id="XMLID_40_">
+	<g>
+		<path class="st0" d="M14.3,68.1V166l84.78,48.95v-97.9L14.3,68.1z M72.46,179.12l-0.05-34.49l-12.38,27.19l-10.68-6.26
+			l-5.74-37.83l-6.59,30.59l-14.75-8.78l11.95-43.85l18.8,11.03l4.19,26.66l8.77-19.06l18.36,10.77l2.57,52.5L72.46,179.12z"/>
 	</g>
-	<g id="XMLID_136_">
-		<path id="XMLID_137_" class="st0" d="M961.7,184.4l13.7,8v16.1l-13.7,8l-13.7-8v-16.1L961.7,184.4 M961.7,183.9l-14.1,8.3v16.5
-			l14.1,8.3l14.1-8.3v-16.5L961.7,183.9L961.7,183.9z"/>
-	</g>
-	<polygon id="XMLID_132_" class="st0" points="949.8,193.2 961.7,186.3 973.6,193.2 961.7,200.2 	"/>
-	<g id="XMLID_278_">
-		<g id="XMLID_42_">
-			<path id="XMLID_43_" class="st0" d="M949.6,193.6v13.9l11.9,6.9v-13.9L949.6,193.6z M957.8,209.4v-4.9l-1.8,3.9l-1.5-0.9
-				l-0.8-5.4l-0.9,4.3l-2.1-1.3l1.7-6.2l2.6,1.6l0.6,3.8l1.2-2.7l2.6,1.5l0.4,7.5L957.8,209.4z"/>
-		</g>
-	</g>
-	<g id="XMLID_129_">
-		<g id="XMLID_37_">
-			<path id="XMLID_38_" class="st0" d="M961.9,200.6v13.9l11.9-6.9v-13.9L961.9,200.6z M971.3,205.3c-0.1,0.9-0.5,1.9-1.1,2.5
-				c-0.2,0.2-0.5,0.5-0.9,0.7c-0.1,0.1-0.3,0.2-0.5,0.2l-0.4,0.2l-0.3,0.1c-0.4,0.2-0.9,0.3-1.4,0.5c-0.2,0.1-0.4,0.1-0.6,0.2
-				l-0.8,0.2l0-2l1.2-0.3c0,0,0.5-0.1,0.7-0.2c0.3-0.1,0.5-0.2,0.7-0.3c0.8-0.3,1.2-0.7,1.3-1.1c0.1-0.2,0.1-0.3,0-0.4
-				c-0.1-0.1-0.2-0.2-0.5-0.2c-0.1,0-0.2,0-0.4,0l-0.5,0c-0.2,0-0.4,0.1-0.5,0.1c-0.2,0-0.4,0-0.6,0c-0.4,0-0.8-0.1-1-0.2
-				c-0.2-0.1-0.4-0.4-0.5-0.7c-0.1-0.2-0.1-0.5,0-0.8c0.1-0.9,0.4-1.7,1.1-2.3c0.3-0.2,0.5-0.5,0.9-0.7c0.1-0.1,0.3-0.2,0.5-0.2
-				l0.5-0.2l0.3-0.1c0.4-0.1,0.7-0.3,1.2-0.4l0.5-0.2l0.6-0.2l0.1,1.8c-0.2,0-0.5,0.1-0.9,0.2c-0.4,0.1-0.9,0.3-1.2,0.4
-				c-0.8,0.3-1.1,0.6-1.2,1c0,0.2,0,0.3,0,0.5c0,0.2,0,0.2,0.4,0.3c0.1,0,0.3,0,0.4,0l1.1-0.1c0.2,0,0.4,0,0.5,0
-				c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.4,0.4,0.5,0.7C971.3,204.7,971.3,205,971.3,205.3z"/>
-		</g>
+</g>
+  <g id="XMLID_37_">
+	<g>
+		<path class="st0" d="M102.29,117.05v97.9L187.07,166V68.1L102.29,117.05z M169.11,150.33c-0.49,6.57-3.5,13.5-8.23,17.86
+			c-1.74,1.66-3.88,3.21-6.42,4.63c-0.98,0.55-2.1,1.12-3.36,1.73l-2.91,1.36l-2.27,0.92c-2.98,1.2-6.26,2.33-9.83,3.39
+			c-1.37,0.4-2.78,0.79-4.22,1.17l-5.59,1.72l-0.31-14.23l8.78-2.17c0,0,3.45-0.9,5.02-1.38c1.87-0.58,3.57-1.17,5.09-1.78
+			c5.51-2.22,8.66-4.74,9.44-7.56c0.45-1.22,0.39-2.21-0.17-2.97c-0.56-0.86-1.72-1.33-3.46-1.41c-0.74-0.03-1.68,0.01-2.8,0.1
+			l-3.29,0.34c-1.45,0.23-2.75,0.4-3.9,0.51c-1.48,0.14-2.83,0.21-4.06,0.19c-3.04-0.04-5.43-0.55-7.14-1.52
+			c-1.64-1.03-2.73-2.67-3.26-4.91c-0.38-1.59-0.48-3.54-0.29-5.84c0.49-6.62,3.1-12.08,7.83-16.39c1.77-1.67,3.91-3.23,6.42-4.67
+			c0.98-0.55,2.1-1.12,3.36-1.73l3.25-1.54l2.2-0.89c2.5-1.01,5.26-1.97,8.28-2.88l3.69-1.07l4.29-1.16l0.46,12.41
+			c-1.66,0.26-3.74,0.73-6.25,1.42c-3.22,0.84-6.14,1.79-8.74,2.84c-5.76,2.32-7.72,4.33-8.65,7.31c-0.35,1.23-0.34,2.32-0.2,3.33
+			c0.17,1.2,0.1,1.56,2.7,1.85c0.79,0.03,1.79,0.01,2.99-0.07l7.57-0.81c1.45-0.13,2.76-0.19,3.91-0.17
+			c2.79,0.04,4.91,0.52,6.37,1.45c1.72,0.98,2.85,2.61,3.41,4.88C169.2,146.25,169.3,148.15,169.11,150.33z"/>
 	</g>
 </g>
 </svg>
diff --git a/frontend/src/assets/module/api.svg b/frontend/src/assets/module/api.svg
new file mode 100644
index 0000000000..7dd71a75dc
--- /dev/null
+++ b/frontend/src/assets/module/api.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M14.57,12.63h-2.32L6.89,26.48h2.76l1.1-2.88h5.18l1.07,2.88h2.87L14.57,12.63z M11.7,21.05l1.69-4.52
+		l1.65,4.52H11.7z"/>
+	<path class="st0" d="M25.63,12.63h-4.21v13.85h2.67v-5.32h1.42c1.37-0.04,2.45-0.48,3.25-1.32c0.8-0.84,1.21-1.86,1.23-3.05
+		c0.02-0.98-0.3-1.9-0.96-2.77C28.37,13.15,27.24,12.69,25.63,12.63z M26.69,18.25c-0.33,0.37-0.81,0.57-1.42,0.59h-1.18v-3.81h1.07
+		c0.67,0.01,1.18,0.2,1.53,0.55c0.35,0.36,0.52,0.81,0.52,1.38C27.19,17.45,27.02,17.88,26.69,18.25z"/>
+	<rect x="31.49" y="12.63" class="st0" width="2.67" height="13.85"/>
+	<path class="st0" d="M3.25,8.42h35.85v20.45h2.25V3.97c0-1.62-1.31-2.93-2.93-2.93H3.93C2.31,1.04,1,2.35,1,3.97v30.61
+		c0,1.62,1.31,2.93,2.93,2.93h12.89v-4.66H3.25V8.42z M3.25,3.97c0-0.38,0.31-0.68,0.68-0.68h34.48c0.38,0,0.68,0.31,0.68,0.68v2.21
+		H3.25V3.97z"/>
+	<path class="st0" d="M26.61,31.26c-0.59-0.6-1.55-0.61-2.15-0.02l-4.65,4.56c-0.29,0.29-0.46,0.68-0.46,1.09
+		c0,0.41,0.17,0.79,0.46,1.08l4.65,4.56c0.29,0.28,0.67,0.43,1.06,0.43c0.4-0.01,0.79-0.18,1.06-0.47c0.59-0.59,0.59-1.55,0-2.14
+		l-3.54-3.47l3.54-3.47C27.19,32.83,27.2,31.86,26.61,31.26z"/>
+	<path class="st0" d="M42.54,35.82l-4.65-4.56c-0.6-0.59-1.56-0.58-2.15,0.02c-0.59,0.6-0.58,1.56,0.02,2.15l3.54,3.47l-3.54,3.47
+		c-0.59,0.59-0.59,1.55,0,2.14c0.28,0.29,0.67,0.45,1.08,0.46c0.39,0,0.76-0.14,1.05-0.41l4.65-4.56c0.29-0.28,0.45-0.67,0.46-1.08
+		C43,36.5,42.84,36.1,42.54,35.82z"/>
+	<path class="st0" d="M33.05,31.02c-0.56,0.06-1.05,0.44-1.25,0.97l-3.98,8.54c-0.35,0.76-0.02,1.65,0.73,2.01
+		c0.2,0.1,0.42,0.15,0.64,0.15c0.59,0,1.13-0.34,1.38-0.88l3.98-8.54c0.27-0.5,0.25-1.11-0.07-1.58
+		C34.16,31.21,33.61,30.96,33.05,31.02z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/logo.svg b/frontend/src/assets/module/logo.svg
new file mode 100644
index 0000000000..33f6f4432f
--- /dev/null
+++ b/frontend/src/assets/module/logo.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 201.33 232.66" style="enable-background:new 0 0 201.33 232.66;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g id="XMLID_702_">
+	<path id="XMLID_703_" class="st0" d="M100.69,3.09l97.89,56.52v113.03l-97.89,56.52L2.8,172.64V59.61L100.69,3.09 M100.69,0
+		L0.12,58.06v116.12l100.57,58.06l100.57-58.06V58.06L100.69,0L100.69,0z"/>
+</g>
+<polygon id="XMLID_698_" class="st0" points="15.9,65.32 100.68,16.37 185.47,65.32 100.68,114.27 "/>
+<g id="XMLID_40_">
+	<g>
+		<path class="st0" d="M14.3,68.1V166l84.78,48.95v-97.9L14.3,68.1z M72.46,179.12l-0.05-34.49l-12.38,27.19l-10.68-6.26
+			l-5.74-37.83l-6.59,30.59l-14.75-8.78l11.95-43.85l18.8,11.03l4.19,26.66l8.77-19.06l18.36,10.77l2.57,52.5L72.46,179.12z"/>
+	</g>
+</g>
+<g id="XMLID_37_">
+	<g>
+		<path class="st0" d="M102.29,117.05v97.9L187.07,166V68.1L102.29,117.05z M169.11,150.33c-0.49,6.57-3.5,13.5-8.23,17.86
+			c-1.74,1.66-3.88,3.21-6.42,4.63c-0.98,0.55-2.1,1.12-3.36,1.73l-2.91,1.36l-2.27,0.92c-2.98,1.2-6.26,2.33-9.83,3.39
+			c-1.37,0.4-2.78,0.79-4.22,1.17l-5.59,1.72l-0.31-14.23l8.78-2.17c0,0,3.45-0.9,5.02-1.38c1.87-0.58,3.57-1.17,5.09-1.78
+			c5.51-2.22,8.66-4.74,9.44-7.56c0.45-1.22,0.39-2.21-0.17-2.97c-0.56-0.86-1.72-1.33-3.46-1.41c-0.74-0.03-1.68,0.01-2.8,0.1
+			l-3.29,0.34c-1.45,0.23-2.75,0.4-3.9,0.51c-1.48,0.14-2.83,0.21-4.06,0.19c-3.04-0.04-5.43-0.55-7.14-1.52
+			c-1.64-1.03-2.73-2.67-3.26-4.91c-0.38-1.59-0.48-3.54-0.29-5.84c0.49-6.62,3.1-12.08,7.83-16.39c1.77-1.67,3.91-3.23,6.42-4.67
+			c0.98-0.55,2.1-1.12,3.36-1.73l3.25-1.54l2.2-0.89c2.5-1.01,5.26-1.97,8.28-2.88l3.69-1.07l4.29-1.16l0.46,12.41
+			c-1.66,0.26-3.74,0.73-6.25,1.42c-3.22,0.84-6.14,1.79-8.74,2.84c-5.76,2.32-7.72,4.33-8.65,7.31c-0.35,1.23-0.34,2.32-0.2,3.33
+			c0.17,1.2,0.1,1.56,2.7,1.85c0.79,0.03,1.79,0.01,2.99-0.07l7.57-0.81c1.45-0.13,2.76-0.19,3.91-0.17
+			c2.79,0.04,4.91,0.52,6.37,1.45c1.72,0.98,2.85,2.61,3.41,4.88C169.2,146.25,169.3,148.15,169.11,150.33z"/>
+	</g>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/performance.svg b/frontend/src/assets/module/performance.svg
new file mode 100644
index 0000000000..fb33d04c82
--- /dev/null
+++ b/frontend/src/assets/module/performance.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<polygon class="st0" points="15.98,10.36 8.96,19.11 5.91,19.11 5.91,21.92 10.3,21.92 15.84,15.03 25.11,28.18 32.11,19.52 
+		36.43,19.52 36.43,16.71 30.77,16.71 25.26,23.52 	"/>
+	<path class="st0" d="M3.25,8.42h35.85v20.45h2.25V3.97c0-1.62-1.31-2.93-2.93-2.93H3.93C2.31,1.04,1,2.35,1,3.97v30.61
+		c0,1.62,1.31,2.93,2.93,2.93h12.89v-4.66H3.25V8.42z M3.25,3.97c0-0.38,0.31-0.68,0.68-0.68h34.48c0.38,0,0.68,0.31,0.68,0.68v2.21
+		H3.25V3.97z"/>
+	<path class="st0" d="M26.61,31.26c-0.59-0.6-1.55-0.61-2.15-0.02l-4.65,4.56c-0.29,0.29-0.46,0.68-0.46,1.09
+		c0,0.41,0.17,0.79,0.46,1.08l4.65,4.56c0.29,0.28,0.67,0.43,1.06,0.43c0.4-0.01,0.79-0.18,1.06-0.47c0.59-0.59,0.59-1.55,0-2.14
+		l-3.54-3.47l3.54-3.47C27.19,32.83,27.2,31.86,26.61,31.26z"/>
+	<path class="st0" d="M42.54,35.82l-4.65-4.56c-0.6-0.59-1.56-0.58-2.15,0.02c-0.59,0.6-0.58,1.56,0.02,2.15l3.54,3.47l-3.54,3.47
+		c-0.59,0.59-0.59,1.55,0,2.14c0.28,0.29,0.67,0.45,1.08,0.46c0.39,0,0.76-0.14,1.05-0.41l4.65-4.56c0.29-0.28,0.45-0.67,0.46-1.08
+		C43,36.5,42.84,36.1,42.54,35.82z"/>
+	<path class="st0" d="M33.05,31.02c-0.56,0.06-1.05,0.44-1.25,0.97l-3.98,8.54c-0.35,0.76-0.02,1.65,0.73,2.01
+		c0.2,0.1,0.42,0.15,0.64,0.15c0.59,0,1.13-0.34,1.38-0.88l3.98-8.54c0.27-0.5,0.25-1.11-0.07-1.58
+		C34.16,31.21,33.61,30.96,33.05,31.02z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/project.svg b/frontend/src/assets/module/project.svg
new file mode 100644
index 0000000000..1f45cb510e
--- /dev/null
+++ b/frontend/src/assets/module/project.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M28.13,20.62c-0.03-0.72-0.63-1.29-1.35-1.29H15.92l-0.13,0.01c-0.72,0.07-1.26,0.69-1.22,1.42
+		c0.03,0.72,0.63,1.29,1.35,1.29h10.85l0.13-0.01C27.63,21.96,28.16,21.34,28.13,20.62z"/>
+	<path class="st0" d="M42.84,33.59c-0.09-0.47-0.38-0.78-0.74-0.78c0,0-0.01,0-0.01,0h-0.07c-1.03,0-1.88-0.84-1.88-1.88
+		c0-0.34,0.16-0.71,0.16-0.72c0.19-0.42,0.04-0.93-0.33-1.19l-0.02-0.02l-1.9-1.06l-0.02-0.01c-0.12-0.05-0.26-0.08-0.4-0.08
+		c-0.29,0-0.58,0.12-0.77,0.32c-0.21,0.22-0.93,0.83-1.48,0.83c-0.56,0-1.28-0.63-1.49-0.85c-0.19-0.2-0.48-0.32-0.78-0.32
+		c-0.14,0-0.27,0.03-0.4,0.08l-0.02,0.01l-1.97,1.08l-0.02,0.02c-0.38,0.26-0.52,0.77-0.33,1.19c0,0,0.16,0.38,0.16,0.72
+		c0,1.03-0.84,1.88-1.88,1.88h-0.06c0,0-0.01,0-0.01,0c-0.36,0-0.65,0.31-0.74,0.78c-0.01,0.03-0.16,0.86-0.16,1.5
+		c0,0.64,0.15,1.47,0.16,1.5c0.09,0.47,0.38,0.78,0.74,0.78c0,0,0.01,0,0.01,0h0.07c1.03,0,1.88,0.84,1.88,1.88
+		c0,0.34-0.16,0.71-0.16,0.72c-0.19,0.42-0.04,0.93,0.33,1.19l0.02,0.02l1.87,1.04l0.02,0.01c0.12,0.05,0.26,0.08,0.4,0.08
+		c0.3,0,0.59-0.12,0.78-0.33c0.26-0.29,0.98-0.88,1.51-0.88c0.57,0,1.31,0.67,1.52,0.9c0.19,0.21,0.48,0.34,0.78,0.34h0
+		c0.14,0,0.27-0.03,0.39-0.08l0.02-0.01l1.93-1.07l0.02-0.02c0.37-0.26,0.52-0.77,0.33-1.19c0,0-0.16-0.38-0.16-0.72
+		c0-1.03,0.84-1.88,1.88-1.88h0.06c0,0,0.01,0,0.01,0c0.36,0,0.65-0.31,0.74-0.78c0-0.01,0.16-0.84,0.16-1.5
+		C43,34.44,42.85,33.62,42.84,33.59z M35.34,38.66c-1.98,0-3.58-1.6-3.58-3.58c0-1.98,1.6-3.58,3.58-3.58s3.58,1.6,3.58,3.58
+		C38.91,37.06,37.31,38.66,35.34,38.66z"/>
+	<path class="st0" d="M26.01,35.09C26.01,35.09,26.01,35.08,26.01,35.09l-19.1-0.01l-0.08-0.01c-0.2-0.03-0.36-0.2-0.38-0.4
+		L3.98,15.6h3.06h29.7h3.06L38.4,26.32c0.1,0.03,0.2,0.05,0.3,0.1l0.03,0.01l0,0l0.07,0.03l0.07,0.04l1.9,1.06l0.1,0.06l0.07,0.05
+		c0.03,0.02,0.06,0.05,0.09,0.07l1.73-13.35c0.05-0.4-0.07-0.8-0.33-1.1c-0.26-0.3-0.64-0.47-1.05-0.47h-3.25v-2.75
+		c0-0.86-0.34-1.69-0.95-2.3c-0.61-0.61-1.44-0.95-2.3-0.95h-14.1c-0.13,0-0.26-0.06-0.35-0.16l-3.35-3.86
+		c-0.62-0.71-1.51-1.12-2.45-1.12H8.89c-1.79,0-3.25,1.45-3.25,3.25v7.89H2.39c-0.4,0-0.78,0.17-1.05,0.47s-0.39,0.7-0.34,1.1
+		l2.67,20.65c0.21,1.62,1.59,2.83,3.22,2.83h19.67c-0.18-0.29-0.31-0.61-0.38-0.97C26.17,36.73,26.01,35.85,26.01,35.09z M8.42,4.92
+		c0-0.26,0.21-0.46,0.46-0.46h5.73c0.13,0,0.26,0.06,0.35,0.16l3.35,3.86c0.62,0.71,1.51,1.12,2.45,1.12h14.1l0.08,0.01
+		c0.22,0.04,0.38,0.23,0.38,0.46v2.75H8.42V4.92z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/pushpin.svg b/frontend/src/assets/module/pushpin.svg
new file mode 100644
index 0000000000..774cf0fbb6
--- /dev/null
+++ b/frontend/src/assets/module/pushpin.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin" viewBox="0 0 16 16">
+  <style type="text/css">
+    .st0{fill:#FFFFFF;}
+  </style>
+  <path class="st0"
+        d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A5.921 5.921 0 0 1 5 6.708V2.277a2.77 2.77 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354zm1.58 1.408-.002-.001.002.001zm-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a4.922 4.922 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a4.915 4.915 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.775 1.775 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14c.06.1.133.191.214.271a1.78 1.78 0 0 0 .37.282z"/>
+</svg>
diff --git a/frontend/src/assets/module/report.svg b/frontend/src/assets/module/report.svg
new file mode 100644
index 0000000000..aace84d0de
--- /dev/null
+++ b/frontend/src/assets/module/report.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="8.69" y="6.27" class="st0" width="15.38" height="2.39"/>
+	<rect x="8.69" y="11.15" class="st0" width="15.38" height="2.39"/>
+	<rect x="8.69" y="16.03" class="st0" width="15.38" height="2.39"/>
+	<path class="st0" d="M36.8,1H3.72v38.68H36.8V1z M34.43,37.31H6.09V3.37h28.34V37.31z"/>
+	<polygon class="st0" points="38.5,5.1 38.5,41.22 8.75,41.22 8.75,43 40.28,43 40.28,5.1 	"/>
+	<path class="st0" d="M18.4,27.99c0,3.6,2.92,6.51,6.51,6.51c3.6,0,6.51-2.92,6.51-6.51h-6.51v-6.51
+		C21.32,21.47,18.4,24.39,18.4,27.99z"/>
+	<path class="st0" d="M26.22,20.24v6.51h6.51C32.74,23.16,29.82,20.24,26.22,20.24z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/system.svg b/frontend/src/assets/module/system.svg
new file mode 100644
index 0000000000..d26315d3a1
--- /dev/null
+++ b/frontend/src/assets/module/system.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#606060;}
+</style>
+  <g>
+	<path class="st0" d="M27.26,14.66c-0.15-0.79-0.63-1.3-1.23-1.3c-0.01,0-0.02,0-0.02,0h-0.11c-1.73,0-3.14-1.41-3.14-3.14
+		c0-0.56,0.27-1.19,0.27-1.2c0.31-0.7,0.07-1.56-0.55-1.99L22.43,7l-3.18-1.77l-0.04-0.02C19,5.12,18.77,5.08,18.53,5.08
+		c-0.49,0-0.98,0.2-1.3,0.53c-0.35,0.36-1.55,1.39-2.48,1.39c-0.93,0-2.15-1.05-2.5-1.42c-0.32-0.34-0.81-0.54-1.31-0.54
+		c-0.24,0-0.46,0.04-0.66,0.13l-0.04,0.02L6.96,7L6.92,7.02C6.29,7.46,6.05,8.32,6.36,9.02c0,0.01,0.27,0.63,0.27,1.2
+		c0,1.73-1.41,3.14-3.14,3.14H3.38c-0.01,0-0.02,0-0.02,0c-0.6,0-1.08,0.51-1.23,1.3c-0.01,0.06-0.27,1.44-0.27,2.51
+		c0,1.08,0.26,2.46,0.27,2.51c0.15,0.79,0.63,1.3,1.23,1.3c0.01,0,0.02,0,0.02,0h0.11c1.73,0,3.14,1.41,3.14,3.14
+		c0,0.56-0.27,1.19-0.27,1.2c-0.31,0.7-0.07,1.55,0.55,1.99l0.04,0.03l3.12,1.75l0.04,0.02c0.21,0.09,0.43,0.14,0.67,0.14
+		c0.5,0,0.99-0.21,1.31-0.55c0.44-0.48,1.65-1.48,2.54-1.48c0.96,0,2.2,1.12,2.55,1.51c0.32,0.35,0.81,0.56,1.31,0.56h0
+		c0.23,0,0.46-0.04,0.66-0.13l0.04-0.02l3.24-1.79l0.04-0.03c0.63-0.44,0.87-1.29,0.56-1.99c0-0.01-0.27-0.64-0.27-1.2
+		c0-1.73,1.41-3.14,3.14-3.14H26c0.01,0,0.01,0,0.02,0c0.6,0,1.08-0.51,1.23-1.3c0-0.01,0.27-1.41,0.27-2.51
+		C27.52,16.09,27.27,14.72,27.26,14.66z M14.69,23.16c-3.31,0-5.99-2.68-5.99-5.99s2.68-5.99,5.99-5.99c3.31,0,5.99,2.68,5.99,5.99
+		S18,23.16,14.69,23.16z"/>
+    <path class="st0" d="M41.16,28.58c-0.01,0-0.01,0-0.01,0h-0.07c-1.13,0-2.05-0.92-2.05-2.05c0-0.37,0.18-0.78,0.18-0.78
+		c0.2-0.46,0.05-1.01-0.36-1.3l-0.02-0.02l-2.07-1.15l-0.03-0.01c-0.14-0.06-0.28-0.09-0.44-0.09c-0.32,0-0.64,0.13-0.84,0.34
+		c-0.23,0.23-1.01,0.91-1.62,0.91c-0.61,0-1.4-0.68-1.63-0.92c-0.21-0.22-0.53-0.35-0.85-0.35c-0.15,0-0.3,0.03-0.43,0.09
+		l-0.03,0.01l-2.15,1.18l-0.03,0.02c-0.41,0.28-0.57,0.84-0.36,1.3c0,0,0.18,0.41,0.18,0.78c0,1.13-0.92,2.05-2.05,2.05h-0.07
+		c0,0-0.01,0-0.01,0c-0.39,0-0.71,0.33-0.8,0.85c-0.01,0.04-0.17,0.94-0.17,1.64c0,0.7,0.17,1.6,0.17,1.64
+		c0.1,0.52,0.41,0.85,0.8,0.85c0,0,0.01,0,0.01,0h0.07c1.13,0,2.05,0.92,2.05,2.05c0,0.37-0.18,0.78-0.18,0.78
+		c-0.2,0.45-0.05,1.01,0.36,1.3l0.02,0.02l2.04,1.14l0.03,0.01c0.14,0.06,0.28,0.09,0.44,0.09c0.33,0,0.64-0.13,0.85-0.36
+		c0.29-0.31,1.07-0.96,1.65-0.96c0.63,0,1.43,0.73,1.66,0.98c0.21,0.23,0.53,0.37,0.86,0.37h0c0.15,0,0.3-0.03,0.43-0.09l0.03-0.01
+		l2.11-1.17l0.02-0.02c0.41-0.28,0.57-0.84,0.36-1.3c0,0-0.18-0.42-0.18-0.78c0-1.13,0.92-2.05,2.05-2.05h0.07c0,0,0.01,0,0.01,0
+		c0.39,0,0.71-0.33,0.8-0.85c0-0.01,0.17-0.92,0.17-1.64c0-0.71-0.17-1.6-0.17-1.64C41.87,28.91,41.55,28.58,41.16,28.58z
+		 M33.78,34.96c-2.16,0-3.91-1.75-3.91-3.91c0-2.16,1.75-3.91,3.91-3.91c2.16,0,3.91,1.75,3.91,3.91
+		C37.68,33.22,35.93,34.96,33.78,34.96z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/track.svg b/frontend/src/assets/module/track.svg
new file mode 100644
index 0000000000..bf4721b45f
--- /dev/null
+++ b/frontend/src/assets/module/track.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="13.3" y="16.16" class="st0" width="19.89" height="2.5"/>
+	<rect x="13.3" y="23.11" class="st0" width="15.04" height="2.5"/>
+	<rect x="13.3" y="30.06" class="st0" width="21.73" height="2.5"/>
+	<path class="st0" d="M36.79,4.91h-4.51v2.32h4.51c0.41,0,0.74,0.33,0.74,0.74v31.98c0,0.41-0.33,0.74-0.74,0.74H7.21
+		c-0.41,0-0.74-0.33-0.74-0.74V7.96c0-0.41,0.33-0.74,0.74-0.74h4.51V4.91H7.21c-1.68,0-3.05,1.37-3.05,3.05v31.98
+		c0,1.68,1.37,3.05,3.05,3.05h29.58c1.68,0,3.05-1.37,3.05-3.05V7.96C39.84,6.28,38.47,4.91,36.79,4.91z"/>
+	<polygon class="st0" points="29.9,2.81 25.7,2.81 25.7,1 18.3,1 18.3,2.81 14.1,2.81 14.1,7.63 29.9,7.63 	"/>
+	<rect x="8.8" y="16.15" class="st0" width="2.51" height="2.51"/>
+	<rect x="8.8" y="23.11" class="st0" width="2.51" height="2.51"/>
+	<rect x="8.8" y="30.06" class="st0" width="2.51" height="2.51"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/ui.svg b/frontend/src/assets/module/ui.svg
new file mode 100644
index 0000000000..4151aa1b2a
--- /dev/null
+++ b/frontend/src/assets/module/ui.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M22.26,24.45c0.31-0.7,0.46-1.47,0.46-2.34v-8.98H19.6V22c0,0.94-0.25,1.67-0.76,2.19
+		c-0.51,0.52-1.19,0.78-2.05,0.78c-0.86,0-1.54-0.26-2.04-0.78c-0.5-0.52-0.75-1.25-0.75-2.19v-8.86h-3.15v8.98
+		c0,0.86,0.15,1.64,0.47,2.34c0.31,0.7,0.73,1.29,1.27,1.78c0.54,0.49,1.16,0.87,1.88,1.15c0.72,0.27,1.49,0.41,2.32,0.41
+		c0.83,0,1.61-0.14,2.33-0.41c0.72-0.27,1.35-0.65,1.88-1.15C21.53,25.74,21.95,25.15,22.26,24.45z"/>
+	<rect x="26.24" y="13.14" class="st0" width="3.15" height="14.51"/>
+	<path class="st0" d="M3.25,8.42h35.85v20.45h2.25V3.97c0-1.62-1.31-2.93-2.93-2.93H3.93C2.31,1.04,1,2.35,1,3.97v30.61
+		c0,1.62,1.31,2.93,2.93,2.93h12.89v-4.66H3.25V8.42z M3.25,3.97c0-0.38,0.31-0.68,0.68-0.68h34.48c0.38,0,0.68,0.31,0.68,0.68v2.21
+		H3.25V3.97z"/>
+	<path class="st0" d="M26.61,31.26c-0.59-0.6-1.55-0.61-2.15-0.02l-4.65,4.56c-0.29,0.29-0.46,0.68-0.46,1.09
+		c0,0.41,0.17,0.79,0.46,1.08l4.65,4.56c0.29,0.28,0.67,0.43,1.06,0.43c0.4-0.01,0.79-0.18,1.06-0.47c0.59-0.59,0.59-1.55,0-2.14
+		l-3.54-3.47l3.54-3.47C27.19,32.83,27.2,31.86,26.61,31.26z"/>
+	<path class="st0" d="M42.54,35.82l-4.65-4.56c-0.6-0.59-1.56-0.58-2.15,0.02c-0.59,0.6-0.58,1.56,0.02,2.15l3.54,3.47l-3.54,3.47
+		c-0.59,0.59-0.59,1.55,0,2.14c0.28,0.29,0.67,0.45,1.08,0.46c0.39,0,0.76-0.14,1.05-0.41l4.65-4.56c0.29-0.28,0.45-0.67,0.46-1.08
+		C43,36.5,42.84,36.1,42.54,35.82z"/>
+	<path class="st0" d="M33.05,31.02c-0.56,0.06-1.05,0.44-1.25,0.97l-3.98,8.54c-0.35,0.76-0.02,1.65,0.73,2.01
+		c0.2,0.1,0.42,0.15,0.64,0.15c0.59,0,1.13-0.34,1.38-0.88l3.98-8.54c0.27-0.5,0.25-1.11-0.07-1.58
+		C34.16,31.21,33.61,30.96,33.05,31.02z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/module/unpin.svg b/frontend/src/assets/module/unpin.svg
new file mode 100644
index 0000000000..5ec7d3eadf
--- /dev/null
+++ b/frontend/src/assets/module/unpin.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
+  <style type="text/css">
+    .st0{fill:#FFFFFF;}
+  </style>
+  <path class="st0"
+        d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a5.927 5.927 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707-.195-.195.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a5.922 5.922 0 0 1 1.013.16l3.134-3.133a2.772 2.772 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146zm.122 2.112v-.002.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a4.507 4.507 0 0 0-.288-.076 4.922 4.922 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a4.924 4.924 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034.114 0 .23-.011.343-.04L9.927 2.028c-.029.113-.04.23-.04.343a1.779 1.779 0 0 0 .062.46z"/>
+</svg>
diff --git a/frontend/src/assets/module/workstation.svg b/frontend/src/assets/module/workstation.svg
new file mode 100644
index 0000000000..f2bc222024
--- /dev/null
+++ b/frontend/src/assets/module/workstation.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#606060;}
+</style>
+  <g>
+	<rect x="8.51" y="38.16" class="st0" width="26.98" height="2.7"/>
+    <rect x="17.53" y="34.57" class="st0" width="8.94" height="2.73"/>
+    <path class="st0" d="M40.81,3.13H3.19C1.98,3.13,1,4.11,1,5.33v25.77c0,1.21,0.98,2.19,2.19,2.19h37.61c1.21,0,2.19-0.98,2.19-2.19
+		V5.33C43,4.11,42.02,3.13,40.81,3.13z M41.36,27.97H2.64V5.33c0-0.3,0.25-0.55,0.55-0.55h37.61c0.3,0,0.55,0.25,0.55,0.55V27.97z"
+    />
+</g>
+</svg>
diff --git a/frontend/src/business/App.vue b/frontend/src/business/App.vue
index 1011eb7887..cca352b9cf 100644
--- a/frontend/src/business/App.vue
+++ b/frontend/src/business/App.vue
@@ -1,50 +1,55 @@
 <template>
-  <el-col v-if="auth">
-    <el-row v-if="licenseHeader != null">
-      <el-col>
-        <component :is="licenseHeader"></component>
-      </el-col>
-    </el-row>
-    <el-row v-if="changePassword">
-      <el-col>
-        <div class="change-password-tip">
-          {{ $t('commons.change_password_tips') }}
+  <el-container v-if="auth">
+    <el-header :height="headerHeight" class="ms-header-w">
+      <el-row v-if="licenseHeader != null">
+        <el-col>
+          <component :is="licenseHeader"></component>
+        </el-col>
+      </el-row>
+      <el-row v-if="changePassword">
+        <el-col>
+          <div class="change-password-tip">
+            {{ $t('commons.change_password_tips') }}
+          </div>
+        </el-col>
+      </el-row>
+    </el-header>
+
+    <el-container>
+      <el-aside
+        :class="isCollapse ? 'ms-aside': 'ms-aside-open'"
+        class="ms-left-aside"
+        :style="isFixed ? 'opacity:100%; position: relative': 'opacity: 95%;position: fixed'"
+        @mouseenter.native="collapseOpen"
+        @mouseleave.native="collapseClose">
+        <ms-aside-header :color="color" :isCollapse="isCollapse"/>
+        <ms-aside-menus :color="color" :isCollapse="isCollapse"/>
+        <div class="ms-header-fixed" v-show="!isCollapse">
+          <!--<el-checkbox v-model="isFixed" v-show="!isCollapse" class="checkBox-input"/>-->
+          <img src="@/assets/module/pushpin.svg" class="ms-pin" alt="" v-if="isFixed" @click="fixedChange(false)">
+          <img src="@/assets/module/unpin.svg" class="ms-pin" alt="" v-else @click="fixedChange(true)">
         </div>
-      </el-col>
-    </el-row>
-    <el-row id="header-top" type="flex" justify="space-between" align="middle" v-if="isMenuShow">
-      <el-col :span="12">
-        <img :src="'/display/file/logo'" class="logo" alt="">
-        <ms-top-menus :color="color"/>
-      </el-col>
-
-      <el-col :span="12" class="align-right">
-        <!-- float right -->
-        <ms-user ref="headerUser"/>
-        <ms-language-switch :color="color"/>
-        <ms-header-ws :color="color"/>
-        <ms-task-center :color="color"/>
-        <ms-notification :color="color"/>
-      </el-col>
-    </el-row>
-
-    <ms-view v-if="isShow"/>
-
-    <theme/>
-  </el-col>
+      </el-aside>
+      <el-main class="container">
+        <div :class="isFixed ? 'ms-left-fixed': 'left'">
+        </div>
+        <div :class="isFixed ? 'ms-right-fixed': 'ms-main-view right'">
+          <ms-view v-if="isShow"/>
+        </div>
+      </el-main>
+      <theme/>
+    </el-container>
+  </el-container>
 </template>
 
 <script>
-import MsTopMenus from "./components/common/head/HeaderTopMenus";
+import MsAsideMenus from "./components/layout/AsideMenus";
+import MsAsideHeader from "./components/layout/AsideHeader";
+import MsAsideFooter from "./components/layout/AsideFooter";
 import MsView from "./components/common/router/View";
-import MsUser from "./components/common/head/HeaderUser";
-import MsHeaderWs from "./components/common/head/HeaderWs";
-import MsLanguageSwitch from "./components/common/head/LanguageSwitch";
 import {hasLicense, saveLocalStorage, setColor, setDefaultTheme} from "@/common/js/utils";
 import {registerRequestHeaders} from "@/common/js/ajax";
 import {ORIGIN_COLOR} from "@/common/js/constants";
-import MsTaskCenter from "@/business/components/task/TaskCenter";
-import MsNotification from "@/business/components/notice/Notification";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const header = requireComponent.keys().length > 0 ? requireComponent("./license/LicenseMessage.vue") : {};
@@ -65,6 +70,9 @@ export default {
       sessionTimer: null,
       isShow: true,
       isMenuShow: true,
+      isCollapse: true,
+      headerHeight: "0px",
+      isFixed: false,
     };
   },
   computed: {
@@ -73,6 +81,9 @@ export default {
     }
   },
   created() {
+    if (this.licenseHeader != null || this.changePassword) {
+      this.headerHeight = "30px";
+    }
     this.initSessionTimer();
     if (!hasLicense()) {
       setDefaultTheme();
@@ -95,6 +106,8 @@ export default {
     window.addEventListener("beforeunload", () => {
       localStorage.setItem("store", JSON.stringify(this.$store.state));
     });
+    this.isFixed = localStorage.getItem('app-fixed') === 'true' || false;
+    this.isCollapse = this.isFixed === true ? false : true;
   },
   beforeCreate() {
     this.$get("/isLogin").then(response => {
@@ -111,8 +124,6 @@ export default {
         if (display.default !== undefined) {
           display.default.showHome(this);
         }
-
-        //
         if (localStorage.getItem("store")) {
           this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("store"))));
           this.$get("/project/listAll", response => {
@@ -137,6 +148,22 @@ export default {
     };
   },
   methods: {
+    fixedChange(isFixed) {
+      this.isFixed = isFixed;
+      if (this.isFixed) {
+        this.isCollapse = false;
+      }
+      localStorage.removeItem('app-fixed');
+      localStorage.setItem('app-fixed', this.isFixed);
+    },
+    collapseOpen() {
+      this.isCollapse = false;
+    },
+    collapseClose() {
+      if (!this.isFixed) {
+        this.isCollapse = true;
+      }
+    },
     initSessionTimer() {
       let timeout = 1800;
       this.initTimer(timeout);
@@ -188,13 +215,10 @@ export default {
     }
   },
   components: {
-    MsNotification,
-    MsTaskCenter,
-    MsLanguageSwitch,
-    MsUser,
     MsView,
-    MsTopMenus,
-    MsHeaderWs,
+    MsAsideMenus,
+    MsAsideHeader,
+    MsAsideFooter,
     "LicenseMessage": header.default,
     "Theme": theme.default
   }
@@ -203,59 +227,19 @@ export default {
 
 
 <style scoped>
-#header-top {
-  width: 100%;
-  padding: 0 10px;
+.ms-aside {
+  z-index: 666;
+  width: var(--asideWidth) !important;
   background-color: var(--color);
-  color: rgb(245, 245, 245);
-  font-size: 14px;
-  height: 40px;
+  opacity: 100%;
+  height: calc(100vh);
 }
 
-.logo {
-  width: 156px;
-  margin-bottom: 0;
-  border: 0;
-  margin-right: 20px;
-  display: inline-block;
-  line-height: 37px;
-  background-size: 156px 30px;
-  box-sizing: border-box;
-  height: 37px;
-  background-repeat: no-repeat;
-  background-position: 50% center;
-}
-
-.menus > * {
-  color: inherit;
-  padding: 0;
-  max-width: 180px;
-  white-space: pre;
-  cursor: pointer;
-  line-height: 40px;
-}
-
-.header-top-menus {
-  display: inline-block;
-  border: 0;
-  position: absolute;
-}
-
-.menus > a {
-  padding-right: 15px;
-  text-decoration: none;
-}
-
-.align-right {
-  float: right;
-}
-
-.license-head {
-  height: 30px;
-  background: #BA331B;
-  text-align: center;
-  line-height: 30px;
-  color: white;
+.ms-aside-open {
+  width: var(--asideOpenWidth) !important;
+  background-color: var(--color);
+  opacity: 95%;
+  z-index: 9999;
 }
 
 .change-password-tip {
@@ -265,4 +249,82 @@ export default {
   line-height: 30px;
   color: white;
 }
+
+.ms-left-aside {
+  position: fixed;
+  left: 0;
+  height: calc(100vh);
+  background-color: var(--color);
+  padding-left: 0px;
+  border: 0px;
+  overflow: hidden;
+}
+
+.ms-main-view {
+  margin-left: var(--asideWidth);
+}
+
+.container {
+  padding: 0px !important;
+  height: calc(100vh);
+}
+
+.left {
+  float: left;
+  width: var(--asideWidth);
+  height: calc(100vh);
+  background-color: var(--color);
+}
+
+.ms-left-fixed {
+  width: 0px;
+}
+
+.right {
+  flex: 1;
+  height: calc(100vh);
+}
+
+.ms-right-fixed {
+  flex: 0;
+  margin-left: 0px;
+}
+
+.ms-header-w {
+  width: 100%;
+  padding: 0px;
+}
+
+.ms-header-fixed {
+  margin-left: var(--asideOpenMargin);
+  position: absolute;
+  bottom: 20px;
+}
+
+.ms-pin {
+  height: 20px;
+  width: 20px;
+}
+
+.ms-pin:hover {
+  height: 21px;
+  width: 21px;
+  cursor: pointer;
+}
+
+.checkBox-input >>> .el-checkbox__inner {
+  border-color: #fff;
+}
+
+.checkBox-input >>> .el-checkbox__inner::after {
+  top: 4px;
+  left: 4px;
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  background-color: #fff !important;
+  content: "";
+  position: absolute;
+  border-color: #fff !important;
+}
 </style>
diff --git a/frontend/src/business/components/api/automation/report/components/RequestResult.vue b/frontend/src/business/components/api/automation/report/components/RequestResult.vue
index dbf2deb788..8f2eafba19 100644
--- a/frontend/src/business/components/api/automation/report/components/RequestResult.vue
+++ b/frontend/src/business/components/api/automation/report/components/RequestResult.vue
@@ -381,7 +381,7 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-test-error_code {
diff --git a/frontend/src/business/components/api/automation/report/components/ScenarioResults.vue b/frontend/src/business/components/api/automation/report/components/ScenarioResults.vue
index 09ad4727ab..2b9c9480bf 100644
--- a/frontend/src/business/components/api/automation/report/components/ScenarioResults.vue
+++ b/frontend/src/business/components/api/automation/report/components/ScenarioResults.vue
@@ -162,7 +162,7 @@ export default {
 
 .ms-open-btn {
   margin: 5px 5px 0px;
-  color: #6D317C;
+  color: #783887;
   font-size: 20px;
 }
 
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index c2fe4cb573..ba671c601c 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -264,13 +264,13 @@
                            :total="total"/>
       <div>
         <!-- 执行结果 -->
-        <el-drawer :visible.sync="runVisible" :destroy-on-close="true" direction="ltr" :withHeader="true" :modal="false"
+        <el-drawer :visible.sync="runVisible" :destroy-on-close="true" direction="rtl" :withHeader="true" :modal="false"
                    size="90%">
           <sysn-api-report-detail @refresh="search" :debug="true" :scenario="currentScenario" :scenarioId="scenarioId"
                                   :infoDb="infoDb" :report-id="reportId" :currentProjectId="projectId"/>
         </el-drawer>
         <!-- 执行结果 -->
-        <el-drawer :visible.sync="showReportVisible" :destroy-on-close="true" direction="ltr" :withHeader="true"
+        <el-drawer :visible.sync="showReportVisible" :destroy-on-close="true" direction="rtl" :withHeader="true"
                    :modal="false"
                    size="90%">
           <ms-api-report-detail @invisible="showReportVisible = false" @refresh="search" :infoDb="infoDb"
@@ -278,7 +278,7 @@
                                 :report-id="showReportId" :currentProjectId="projectId"/>
         </el-drawer>
         <!--测试计划-->
-        <el-drawer :visible.sync="planVisible" :destroy-on-close="true" direction="ltr" :withHeader="false"
+        <el-drawer :visible.sync="planVisible" :destroy-on-close="true" direction="rtl" :withHeader="false"
                    :title="$t('test_track.plan_view.test_result')" :modal="false" size="90%">
           <ms-test-plan-list @addTestPlan="addTestPlan(arguments)" @cancel="cancel" ref="testPlanList"
                              :scenario-condition="condition" :row="selectRows"/>
@@ -419,7 +419,7 @@ export default {
       type: API_SCENARIO_LIST,
       fields: getCustomTableHeader('API_SCENARIO'),
       fieldsWidth: getCustomTableWidth('API_SCENARIO'),
-      screenHeight: 'calc(100vh - 220px)',//屏幕高度,
+      screenHeight: 'calc(100vh - 180px)',//屏幕高度,
       condition: {
         components: API_SCENARIO_CONFIGS
       },
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 249612e24e..a72847ab5d 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -294,7 +294,7 @@
                 @runRefresh="runRefresh" @errorRefresh="errorRefresh" ref="runTest"/>
         <!-- 调试结果 -->
         <el-drawer v-if="type!=='detail'" :visible.sync="debugVisible" :destroy-on-close="true" direction="ltr"
-                   :withHeader="true" :modal="false" size="90%">
+                   :withHeader="true" :modal="false" size="80%">
           <ms-api-report-detail :scenario="currentScenario" :report-id="reportId" :debug="true"
                                 :currentProjectId="projectId" @refresh="detailRefresh"/>
         </el-drawer>
@@ -2387,7 +2387,7 @@ export default {
 
 .ms-batch-btn:hover {
   cursor: pointer;
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-debug-result {
diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
index 15179ff28d..95acfb7efb 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
@@ -741,7 +741,7 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-req-success {
diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
index 43cfba0afe..326a14ea81 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
@@ -331,7 +331,7 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-req-success {
@@ -366,7 +366,7 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-num {
diff --git a/frontend/src/business/components/api/automation/scenario/component/IfController.vue b/frontend/src/business/components/api/automation/scenario/component/IfController.vue
index 41602958e1..ad3b69589c 100644
--- a/frontend/src/business/components/api/automation/scenario/component/IfController.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/IfController.vue
@@ -182,6 +182,6 @@
     width: 80px;
   }
   .ms-test-running {
-    color: #6D317C;
+    color: #783887;
   }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue b/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue
index 06c391fb1f..703c60765c 100644
--- a/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue
@@ -134,6 +134,6 @@
     width: 80px;
   }
   .ms-test-running {
-    color: #6D317C;
+    color: #783887;
   }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/component/Jsr233Processor.vue b/frontend/src/business/components/api/automation/scenario/component/Jsr233Processor.vue
index b24f67f5bb..9952608285 100644
--- a/frontend/src/business/components/api/automation/scenario/component/Jsr233Processor.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/Jsr233Processor.vue
@@ -286,7 +286,7 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-req-success {
diff --git a/frontend/src/business/components/api/automation/scenario/component/LoopController.vue b/frontend/src/business/components/api/automation/scenario/component/LoopController.vue
index e8f3aac5be..9b887c9f82 100644
--- a/frontend/src/business/components/api/automation/scenario/component/LoopController.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/LoopController.vue
@@ -381,7 +381,7 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-step-debug-code {
diff --git a/frontend/src/business/components/api/automation/scenario/component/PluginComponent.vue b/frontend/src/business/components/api/automation/scenario/component/PluginComponent.vue
index 6f0e5a9627..5d32c37824 100644
--- a/frontend/src/business/components/api/automation/scenario/component/PluginComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/PluginComponent.vue
@@ -509,7 +509,7 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .ms-form {
diff --git a/frontend/src/business/components/api/automation/scenario/component/TransactionController.vue b/frontend/src/business/components/api/automation/scenario/component/TransactionController.vue
index 5327c17e2d..087d23a737 100644
--- a/frontend/src/business/components/api/automation/scenario/component/TransactionController.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/TransactionController.vue
@@ -8,7 +8,7 @@
     :is-max="isMax"
     :show-btn="showBtn"
     :show-version="showVersion"
-    color="#6D317C"
+    color="#783887"
     background-color="#FCF6EE"
     :if-from-variable-advance="ifFromVariableAdvance"
     :title="$t('api_test.automation.transaction_controller')">
@@ -191,6 +191,6 @@ export default {
 }
 
 .ms-test-running {
-  color: #6D317C;
+  color: #783887;
 }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue b/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue
index ef646e402a..579d4e39d6 100644
--- a/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue
@@ -1327,7 +1327,7 @@ export default {
 
 .ms-batch-btn:hover {
   cursor: pointer;
-  color: #6D317C;
+  color: #783887;
 }
 .ms-max-scenario-name-width {
   font-size: 12px;
diff --git a/frontend/src/business/components/api/automation/scenario/menu/Menu.js b/frontend/src/business/components/api/automation/scenario/menu/Menu.js
index f94bd55b07..5ecfeafcfa 100644
--- a/frontend/src/business/components/api/automation/scenario/menu/Menu.js
+++ b/frontend/src/business/components/api/automation/scenario/menu/Menu.js
@@ -87,7 +87,7 @@ export function buttons(this_) {
     {
       title: this_.$t('api_test.automation.transaction_controller'),
       show: this_.showButton("TransactionController"),
-      titleColor: "#6D317C",
+      titleColor: "#783887",
       titleBgColor: "#F4F4F5",
       icon: "alt_route",
       click: () => {
diff --git a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
index 5c741f44e0..26025d6b46 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -442,7 +442,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      screenHeight: 'calc(100vh - 220px)',//屏幕高度
+      screenHeight: 'calc(100vh - 180px)',//屏幕高度
       environmentId: undefined,
       selectAll: false,
       unSelection: [],
@@ -1341,7 +1341,7 @@ export default {
 }
 
 .ms-running {
-  color: #6D317C;
+  color: #783887;
 }
 
 .oneLine {
diff --git a/frontend/src/business/components/api/definition/components/list/ApiList.vue b/frontend/src/business/components/api/definition/components/list/ApiList.vue
index 6eca5274f3..f75ccd7d1c 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -435,7 +435,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      screenHeight: 'calc(100vh - 220px)',//屏幕高度,
+      screenHeight: 'calc(100vh - 180px)',//屏幕高度,
       environmentId: undefined,
       selectDataCounts: 0,
       projectName: "",
diff --git a/frontend/src/business/components/api/head/ApiHeaderMenus.vue b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
index 8acfe4b088..64fc0c39f1 100644
--- a/frontend/src/business/components/api/head/ApiHeaderMenus.vue
+++ b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
@@ -21,6 +21,10 @@
           </el-menu-item>
         </el-menu>
       </el-col>
+
+      <el-col :span="10">
+        <ms-header-right-menus/>
+      </el-col>
     </el-row>
   </div>
 
@@ -32,11 +36,11 @@ import MsRecentList from "../../common/head/RecentList";
 import MsShowAll from "../../common/head/ShowAll";
 import MsCreateButton from "../../common/head/CreateButton";
 import ProjectChange from "@/business/components/common/head/ProjectSwitch";
-import {mapGetters} from "vuex";
+import MsHeaderRightMenus from "@/business/components/layout/HeaderRightMenus";
 
 export default {
   name: "MsApiHeaderMenus",
-  components: {MsCreateButton, MsShowAll, MsRecentList, ProjectChange},
+  components: {MsCreateButton, MsShowAll, MsRecentList, ProjectChange, MsHeaderRightMenus},
   data() {
     return {
       currentPath: '',
@@ -97,4 +101,7 @@ export default {
   padding: 0 10px;
 }
 
+.align-right {
+  float: right;
+}
 </style>
diff --git a/frontend/src/business/components/common/components/MsAsideContainer.vue b/frontend/src/business/components/common/components/MsAsideContainer.vue
index 7c36edcc57..4ea5fb40dd 100644
--- a/frontend/src/business/components/common/components/MsAsideContainer.vue
+++ b/frontend/src/business/components/common/components/MsAsideContainer.vue
@@ -56,10 +56,10 @@
       },
       computed: {
         calHeight() {
-          return this.height ? (this.height + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 80px)')
+          return this.height ? (this.height + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 50px)')
         },
         containerCalHeight() {
-          return this.height ? (this.height - 30 + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 100px)')
+          return this.height ? (this.height - 30 + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 60px)')
         },
       },
       created() {
diff --git a/frontend/src/business/components/common/components/MsMainContainer.vue b/frontend/src/business/components/common/components/MsMainContainer.vue
index 04939d4a10..e27b3388b5 100644
--- a/frontend/src/business/components/common/components/MsMainContainer.vue
+++ b/frontend/src/business/components/common/components/MsMainContainer.vue
@@ -14,7 +14,7 @@
 
   .ms-main-container {
     padding: 5px 10px;
-    height: calc(100vh - 80px);
+    height: calc(100vh - 45px);
   }
 
 </style>
diff --git a/frontend/src/business/components/common/head/HeaderUser.vue b/frontend/src/business/components/common/head/HeaderUser.vue
index eea6002131..9153552e4d 100644
--- a/frontend/src/business/components/common/head/HeaderUser.vue
+++ b/frontend/src/business/components/common/head/HeaderUser.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dropdown size="medium" @command="handleCommand" class="align-right">
-    <span class="dropdown-link">
+    <span class="dropdown-link global">
         {{ currentUser.name }}<i class="el-icon-caret-bottom el-icon--right"/>
     </span>
     <template v-slot:dropdown>
@@ -49,7 +49,7 @@ export default {
   mounted() {
     this.$EventBus.$on('showPersonInfo', this.handleCommand)
   },
-  beforeDestroy(){
+  beforeDestroy() {
     this.$EventBus.$off("showPersonInfo")
   },
   methods: {
@@ -111,8 +111,12 @@ export default {
 
 .align-right {
   float: right;
+  margin-right: 20px;
 }
 
+.global {
+  color: var(--color);
+}
 </style>
 
 
diff --git a/frontend/src/business/components/common/head/HeaderWs.vue b/frontend/src/business/components/common/head/HeaderWs.vue
index c258e7a33a..f2114f21e8 100644
--- a/frontend/src/business/components/common/head/HeaderWs.vue
+++ b/frontend/src/business/components/common/head/HeaderWs.vue
@@ -4,12 +4,12 @@
                   'PROJECT_API_DEFINITION:READ','PROJECT_API_SCENARIO:READ','PROJECT_API_REPORT:READ',
                   'PROJECT_USER:READ', 'PROJECT_ENVIRONMENT:READ', 'PROJECT_FILE:READ+JAR', 'PROJECT_FILE:READ+FILE', 'PROJECT_OPERATING_LOG:READ', 'PROJECT_CUSTOM_CODE:READ',
                   'PROJECT_PERFORMANCE_TEST:READ','PROJECT_PERFORMANCE_REPORT:READ','WORKSPACE_USER:READ']" >
-    <span class="dropdown-link">
+    <span class="dropdown-link global">
       {{ currentWorkspaceName }}
       <i class="el-icon-caret-bottom el-icon--right"/>
     </span>
     <template v-slot:dropdown>
-      <el-dropdown-menu style="margin-top: 5px;">
+      <el-dropdown-menu style="margin-top: 5px;" :style="{'color':color}">
         <el-input :placeholder="$t('project.search_by_name')"
                   prefix-icon="el-icon-search"
                   v-model="searchString"
@@ -63,6 +63,9 @@ export default {
     currentUser: () => {
       return getCurrentUser();
     },
+    color: function () {
+      return `var(--primary_color)`;
+    }
   },
   watch: {
     searchString(val) {
@@ -213,4 +216,8 @@ export default {
   background: rgba(255, 0, 0, 0.4);
 }
 
+.global {
+  color: var(--color);
+}
+
 </style>
diff --git a/frontend/src/business/components/common/head/LanguageSwitch.vue b/frontend/src/business/components/common/head/LanguageSwitch.vue
index 2c2e3f8f6d..d8ca94af9c 100644
--- a/frontend/src/business/components/common/head/LanguageSwitch.vue
+++ b/frontend/src/business/components/common/head/LanguageSwitch.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dropdown size="medium" @command="changeLanguage" class="align-right">
-    <span class="dropdown-link">
+    <span class="dropdown-link global">
         <font-awesome-icon :icon="['fas', 'language']" size="lg"/>
     </span>
     <template v-slot:dropdown>
@@ -33,9 +33,6 @@ export default {
       }
     };
   },
-  props: {
-    color: String
-  },
   created() {
     let lang = this.currentUser().language;
     this.currentUserInfo = this.currentUser();
@@ -106,7 +103,7 @@ export default {
 }
 
 .global {
-  color: #fff;
+  color: var(--color);
 }
 
 /deep/ .el-submenu__title {
diff --git a/frontend/src/business/components/common/router/View.vue b/frontend/src/business/components/common/router/View.vue
index 62bfab84a7..6bc1a76772 100644
--- a/frontend/src/business/components/common/router/View.vue
+++ b/frontend/src/business/components/common/router/View.vue
@@ -14,7 +14,7 @@
 <style scoped>
   #body {
     width: 100%;
-    height: calc(100vh - 40px);
+    height: calc(100vh);
     /*background-color: #F5F5F5;*/
   }
 
diff --git a/frontend/src/business/components/layout/AsideFooter.vue b/frontend/src/business/components/layout/AsideFooter.vue
new file mode 100644
index 0000000000..6fcb68d272
--- /dev/null
+++ b/frontend/src/business/components/layout/AsideFooter.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-menu menu-trigger="click"
+           class="ms-menu-vertical ms-menu ms-footer" :collapse="isCollapse"
+           :background-color="color"
+           text-color="#F2F2F2"
+           active-text-color="#fff"
+           :default-active="activeIndex"
+           :key="menuKey"
+           router>
+    <el-menu-item index="/setting" onselectstart="return false"
+                  v-permission="['SYSTEM_USER:READ', 'SYSTEM_WORKSPACE:READ', 'SYSTEM_GROUP:READ', 'SYSTEM_TEST_POOL:READ', 'SYSTEM_SETTING:READ', 'SYSTEM_AUTH:READ', 'SYSTEM_QUOTA:READ','SYSTEM_OPERATING_LOG:READ',
+                  'WORKSPACE_SERVICE:READ', 'WORKSPACE_USER:READ', 'WORKSPACE_PROJECT_MANAGER:READ', 'WORKSPACE_PROJECT_ENVIRONMENT:READ', 'WORKSPACE_OPERATING_LOG:READ']">
+      <div>
+        <img src="../../../assets/module/system.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.system_setting') }}</span>
+      </div>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+
+export default {
+  name: "MsAsideFooter",
+  data() {
+    return {
+      activeIndex: '/',
+      isReport: true,
+      modules: {},
+      menuKey: 0,
+    };
+  },
+  props: {
+    color: String,
+    isCollapse: {
+      type: Boolean,
+      default: true,
+    }
+  },
+};
+</script>
+<style scoped>
+.ms-footer {
+  position: absolute;
+  bottom: 0px;
+}
+
+.ms-menu-vertical:not(.el-menu--collapse) {
+  width: var(--asideOpenWidth);
+  padding-bottom: 20px;
+  border-right: 0px !important;
+}
+
+.ms-menu-item-title {
+  margin-left: 10px;
+  font-size: 13px;
+  color: #fff;
+}
+
+.el-menu--collapse {
+  width: var(--asideWidth);
+  padding-bottom: 20px;
+  border-right: 0px !important;
+}
+
+/deep/ .el-menu-item {
+  padding-left: 11px !important;
+}
+
+.ms-menu-img {
+  margin: 0px;
+  width: 25px;
+  border: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-position: 50% center;
+}
+
+.ms-menu-vertical > li.is-active {
+  background: var(--color) !important;
+  mix-blend-mode: hard-light;
+  color: #fff !important;
+}
+</style>
diff --git a/frontend/src/business/components/layout/AsideHeader.vue b/frontend/src/business/components/layout/AsideHeader.vue
new file mode 100644
index 0000000000..6e426302d1
--- /dev/null
+++ b/frontend/src/business/components/layout/AsideHeader.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-menu
+    class="ms-menu-vertical ms-menu"
+    :collapse="isCollapse"
+    :background-color="color"
+    text-color="#F2F2F2"
+    active-text-color="#fff"
+    :key="menuKey"
+    router>
+    <el-menu-item>
+      <div>
+        <img :src="'/display/file/logo'" class="logo" alt="">
+        <span slot="title" class="ms-title-width">{{ title }}</span>
+      </div>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+
+export default {
+  name: "MsAsideHeader",
+  data() {
+    return {
+      activeIndex: '/',
+      isReport: true,
+      modules: {},
+      menuKey: 0,
+    };
+  },
+  computed: {
+    title() {
+      return localStorage.getItem("title") || "MeterSphere";
+    }
+  },
+  props: {
+    color: String,
+    isCollapse: {
+      type: Boolean,
+      default: true,
+    }
+  },
+};
+</script>
+<style scoped>
+.ms-menu-vertical:not(.el-menu--collapse) {
+  width: var(--asideOpenWidth);
+  padding-bottom: 60px;
+  border-right: 0px !important;
+}
+
+.el-menu--collapse {
+  width: var(--asideWidth);
+  padding-bottom: 60px;
+  border-right: 0px !important;
+}
+
+.ms-title-width {
+  font-size: 15px;
+  font-weight: bold;
+  margin-left: 4px;
+  color: #fff;
+  display: inline-block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 98px;
+}
+
+/deep/ .el-menu-item {
+  padding-left: 5px !important;
+  height: 41px;
+  line-height: 41px;
+}
+
+.el-menu-item:hover {
+  background-color: var(--color) !important;
+}
+
+
+.logo {
+  margin: 0px;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-position: 50% center;
+}
+</style>
diff --git a/frontend/src/business/components/layout/AsideMenus.vue b/frontend/src/business/components/layout/AsideMenus.vue
new file mode 100644
index 0000000000..c38b31ef88
--- /dev/null
+++ b/frontend/src/business/components/layout/AsideMenus.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-menu menu-trigger="click"
+           class="ms-menu-vertical ms-menu ms-menu-title" :collapse="isCollapse"
+           :background-color="color"
+           text-color="#F2F2F2"
+           active-text-color="#fff"
+           :default-active="activeIndex"
+           @select="handleSelect"
+           :key="menuKey"
+           router>
+    <el-menu-item index="/workstation" v-xpack v-if="check('workstation')">
+      <div>
+        <img src="@/assets/module/workstation.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.my_workstation') }}</span>
+      </div>
+    </el-menu-item>
+    <el-menu-item index="/track" v-if="check('testTrack')" onselectstart="return false"
+                  v-permission="['PROJECT_TRACK_CASE:READ','PROJECT_TRACK_PLAN:READ','PROJECT_TRACK_REVIEW:READ', 'PROJECT_TRACK_ISSUE:READ', 'PROJECT_TRACK_REPORT:READ']">
+      <div>
+        <img src="@/assets/module/track.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('test_track.test_track') }}</span>
+      </div>
+    </el-menu-item>
+    <el-menu-item index="/api" @click="active()" v-if="check('api')" onselectstart="return false"
+                  v-permission="['PROJECT_API_DEFINITION:READ','PROJECT_API_SCENARIO:READ','PROJECT_API_REPORT:READ']">
+      <div>
+        <img src="@/assets/module/api.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.api') }}</span>
+      </div>
+    </el-menu-item>
+    <el-menu-item index="/ui" @click="active()" v-if="hasLicense() && check('ui')" onselectstart="return false"
+                  v-permission="['PROJECT_UI_SCENARIO:READ','PROJECT_UI_REPORT:READ']">
+      <div>
+        <img src="@/assets/module/ui.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.ui') }}</span>
+      </div>
+    </el-menu-item>
+    <el-menu-item v-if="!hasLicense()" @click="clickPlanMenu">
+      <div>
+        <img src="@/assets/module/ui.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.ui') }}</span>
+      </div>
+    </el-menu-item>
+    <el-menu-item index="/performance" v-if="check('performance')"
+                  onselectstart="return false"
+                  v-permission="['PROJECT_PERFORMANCE_TEST:READ','PROJECT_PERFORMANCE_REPORT:READ']">
+      <div>
+        <img src="@/assets/module/performance.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.performance') }}</span>
+      </div>
+    </el-menu-item>
+    <el-menu-item index="/report" v-if="check('reportStat')" onselectstart="return false"
+                  v-permission="['PROJECT_REPORT_ANALYSIS:READ']">
+      <div>
+        <img src="@/assets/module/report.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.report_statistics.title') }}</span>
+      </div>
+    </el-menu-item>
+
+    <el-menu-item index="/project" onselectstart="return false"
+                  v-permission="['PROJECT_USER:READ', 'PROJECT_ENVIRONMENT:READ', 'PROJECT_OPERATING_LOG:READ', 'PROJECT_FILE:READ+JAR', 'PROJECT_FILE:READ+FILE',
+                  'PROJECT_CUSTOM_CODE:READ','PROJECT_ERROR_REPORT_LIBRARY:READ', 'PROJECT_TEMPLATE:READ', 'PROJECT_MESSAGE:READ']">
+      <div>
+        <img src="@/assets/module/project.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.project_setting') }}</span>
+      </div>
+    </el-menu-item>
+    <el-menu-item index="/setting" onselectstart="return false"
+                  v-permission="['SYSTEM_USER:READ', 'SYSTEM_WORKSPACE:READ', 'SYSTEM_GROUP:READ', 'SYSTEM_TEST_POOL:READ', 'SYSTEM_SETTING:READ', 'SYSTEM_AUTH:READ', 'SYSTEM_QUOTA:READ','SYSTEM_OPERATING_LOG:READ',
+                  'WORKSPACE_SERVICE:READ', 'WORKSPACE_USER:READ', 'WORKSPACE_PROJECT_MANAGER:READ', 'WORKSPACE_PROJECT_ENVIRONMENT:READ', 'WORKSPACE_OPERATING_LOG:READ']">
+      <div>
+        <img src="@/assets/module/system.svg" alt="" class="ms-menu-img">
+        <span slot="title" class="ms-menu-item-title">{{ $t('commons.system_setting') }}</span>
+      </div>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+import {hasLicense} from "@/common/js/utils";
+import {MODULE_CHANGE, ModuleEvent} from "@/business/components/common/head/ListEvent";
+import {validateAndSetLicense} from "@/business/permission";
+import axios from "axios";
+
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const module = requireComponent.keys().length > 0 ? requireComponent("./module/Module.vue") : {};
+
+export default {
+  name: "MsAsideMenus",
+  data() {
+    return {
+      activeIndex: '/',
+      isReport: true,
+      modules: {},
+      menuKey: 0,
+    };
+  },
+  props: {
+    color: String,
+    isCollapse: {
+      type: Boolean,
+      default: true,
+    }
+  },
+  watch: {
+    '$route'(to) {
+      if (to.matched.length > 0) {
+        this.activeIndex = to.matched[0].path;
+      }
+      this.handleSelect(this.activeIndex);
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    if (this.$route.matched.length > 0) {
+      this.activeIndex = this.$route.matched[0].path;
+    }
+
+    axios.get('/license/validate').then(response => {
+      validateAndSetLicense(response.data.data); // 在调用 listModules 之前删除校验失败的 license, axios 失败不弹框
+      if (!hasLicense()) {
+        this.isReport = false;
+      } else {
+        if (module.default) {
+          module.default.listModules(this);
+        }
+      }
+    }).catch(error => {
+      window.console.error(error.response || error.message);
+    });
+
+    this.registerEvents();
+  },
+  methods: {
+    hasLicense,
+    handleSelect(index) {
+      if (index) {
+        this.activeIndex = index;
+      }
+    },
+    active() {
+      if (this.activeIndex === '/api') {
+        window.location.href = "/#/api/home";
+      }
+    },
+    check(key) {
+      if (module.default !== undefined && hasLicense()) {
+        return this.modules[key] === 'ENABLE';
+      }
+      return true;
+    },
+    registerEvents() {
+      ModuleEvent.$on(MODULE_CHANGE, () => {
+        if (module.default) {
+          module.default.listModules(this).then(() => {
+            this.menuKey++;
+          });
+        }
+      });
+    },
+    clickPlanMenu() {
+      this.$message({
+        dangerouslyUseHTMLString: true,
+        showClose: true,
+        message: this.$t('commons.ui_edition_tips'),
+      });
+      return false;
+    },
+  }
+};
+</script>
+<style scoped>
+.ms-menu-vertical:not(.el-menu--collapse) {
+  width: var(--asideOpenWidth);
+  border-right: 0px !important;
+}
+
+.el-menu--collapse {
+  width: var(--asideWidth);
+  border-right: 0px !important;
+}
+
+.ms-menu-item-title {
+  margin-left: 11px;
+  font-size: 13px;
+  color: #fff;
+}
+
+.ms-menu-title {
+  align-items: center;
+}
+
+/deep/ .el-menu-item {
+  padding-left: 11px !important;
+}
+
+.ms-menu-img {
+  margin: 0px;
+  width: 22px;
+  border: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-position: 50% center;
+}
+
+.ms-menu-vertical > li.is-active {
+  background: var(--color) !important;
+  mix-blend-mode: hard-light;
+  color: #fff !important;
+}
+
+</style>
diff --git a/frontend/src/business/components/layout/HeaderRightMenus.vue b/frontend/src/business/components/layout/HeaderRightMenus.vue
new file mode 100644
index 0000000000..ff623f80ad
--- /dev/null
+++ b/frontend/src/business/components/layout/HeaderRightMenus.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="ms-align-right">
+    <ms-user/>
+    <ms-language-switch/>
+    <ms-header-ws/>
+    <ms-task-center/>
+    <ms-notification/>
+  </div>
+</template>
+
+<script>
+import MsUser from "@/business/components/common/head/HeaderUser";
+import MsHeaderWs from "@/business/components/common/head/HeaderWs";
+import MsLanguageSwitch from "@/business/components/common/head/LanguageSwitch";
+import MsTaskCenter from "@/business/components/task/TaskCenter";
+import MsNotification from "@/business/components/notice/Notification";
+
+
+export default {
+  name: 'MsHeaderRightMenus',
+  props: {},
+  components: {
+    MsNotification,
+    MsTaskCenter,
+    MsLanguageSwitch,
+    MsUser,
+    MsHeaderWs
+  },
+  data() {
+    return {}
+  }
+};
+</script>
+
+
+<style scoped>
+.ms-align-right {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/business/components/notice/Notification.vue b/frontend/src/business/components/notice/Notification.vue
index b8caf7b4aa..d533eb7d92 100644
--- a/frontend/src/business/components/notice/Notification.vue
+++ b/frontend/src/business/components/notice/Notification.vue
@@ -2,7 +2,6 @@
   <div>
     <el-menu :unique-opened="true" class="header-user-menu align-right header-top-menu"
              mode="horizontal"
-             :background-color="color"
              text-color="#fff"
              active-text-color="#fff">
       <el-menu-item onselectstart="return false">
@@ -79,9 +78,6 @@ export default {
       noticeShow: false,
     };
   },
-  props: {
-    color: String
-  },
   created() {
     this.getNotifications();
     this.getUserList();
@@ -223,7 +219,7 @@ export default {
 }
 
 .global {
-  color: #fff;
+  color: var(--color);
 }
 
 .header-top-menu {
diff --git a/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue b/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
index 98f0f0464a..7e6966c94e 100644
--- a/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
+++ b/frontend/src/business/components/performance/head/PerformanceHeaderMenus.vue
@@ -2,7 +2,7 @@
   <div id="menu-bar">
     <el-row type="flex">
       <project-change :project-name="currentProject"/>
-      <el-col :span="12">
+      <el-col :span="14">
         <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active="pathName">
           <el-menu-item :index="'/performance/home'">
             {{ $t("i18n.home") }}
@@ -15,7 +15,9 @@
           </el-menu-item>
         </el-menu>
       </el-col>
-      <el-col :span="12"/>
+      <el-col :span="10">
+        <ms-header-right-menus/>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -26,6 +28,7 @@ import MsRecentList from "../../common/head/RecentList";
 import MsCreateButton from "../../common/head/CreateButton";
 import MsShowAll from "../../common/head/ShowAll";
 import ProjectChange from "@/business/components/common/head/ProjectSwitch";
+import MsHeaderRightMenus from "@/business/components/layout/HeaderRightMenus";
 
 export default {
   name: "PerformanceHeaderMenus",
@@ -34,6 +37,7 @@ export default {
     MsCreateButton,
     MsShowAll,
     MsRecentList,
+    MsHeaderRightMenus
   },
   data() {
     return {
diff --git a/frontend/src/business/components/performance/report/PerformanceTestReportList.vue b/frontend/src/business/components/performance/report/PerformanceTestReportList.vue
index 71416d2481..1e037ad406 100644
--- a/frontend/src/business/components/performance/report/PerformanceTestReportList.vue
+++ b/frontend/src/business/components/performance/report/PerformanceTestReportList.vue
@@ -217,7 +217,7 @@ export default {
       total: 0,
       loading: false,
       testId: null,
-      screenHeight: 'calc(100vh - 200px)',
+      screenHeight: 'calc(100vh - 160px)',
       statusFilters: [
         {text: 'Starting', value: 'Starting'},
         {text: 'Running', value: 'Running'},
diff --git a/frontend/src/business/components/performance/test/PerformanceTestList.vue b/frontend/src/business/components/performance/test/PerformanceTestList.vue
index 5fdc58d205..ec8121e2dc 100644
--- a/frontend/src/business/components/performance/test/PerformanceTestList.vue
+++ b/frontend/src/business/components/performance/test/PerformanceTestList.vue
@@ -193,7 +193,7 @@ export default {
         {text: 'Error', value: 'Error'}
       ],
       userFilters: [],
-      screenHeight: 'calc(100vh - 200px)',
+      screenHeight: 'calc(100vh - 160px)',
       versionOptions: [],
       currentVersion: '',
       versionEnable: false,
diff --git a/frontend/src/business/components/project/head/ProjectHeaderMenus.vue b/frontend/src/business/components/project/head/ProjectHeaderMenus.vue
index ffe27d47c3..7b1020b710 100644
--- a/frontend/src/business/components/project/head/ProjectHeaderMenus.vue
+++ b/frontend/src/business/components/project/head/ProjectHeaderMenus.vue
@@ -2,7 +2,7 @@
   <div id="menu-bar">
     <el-row type="flex">
       <project-change :project-name="currentProject"/>
-      <el-col :span="24">
+      <el-col :span="14">
         <el-menu class="header-menu" :unique-opened="true" mode="horizontal" router
                  :default-active="pathName">
           <el-menu-item :index="'/project/home'">
@@ -23,32 +23,38 @@
                         popper-class="submenu">
             {{ $t('project.file_manage') }}
           </el-menu-item>
-          <el-menu-item :index="'/project/code/segment'" popper-class="submenu"
-                        v-permission="['PROJECT_CUSTOM_CODE:READ']">
-            {{ $t('project.code_segment.code_segment') }}
-          </el-menu-item>
-          <el-menu-item :index="'/project/errorreportlibrary'" v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ']"
-                        v-xpack>
-            {{ $t("error_report_library.name") }}
-          </el-menu-item>
-          <el-menu-item index="/project/template" v-permission="['PROJECT_TEMPLATE:READ']">
-            <template slot="title">{{ $t('workspace.template_manage') }}</template>
-          </el-menu-item>
-          <el-menu-item :index="'/project/messagesettings'" v-permission="['PROJECT_MESSAGE:READ']">
-            {{ $t("organization.message_settings") }}
-          </el-menu-item>
-          <el-menu-item :index="'/project/log'" popper-class="submenu" v-permission="['PROJECT_OPERATING_LOG:READ']">
-            {{ $t('project.log') }}
-          </el-menu-item>
-          <el-menu-item v-xpack :index="'/project/version'" v-permission="['PROJECT_VERSION:READ']">
-            {{ $t('project.version_manage') }}
-          </el-menu-item>
-          <el-menu-item :index="'/project/app'" popper-class="submenu"
-                        v-permission="['PROJECT_APP_MANAGER:READ+EDIT']">
-            {{ $t('project.app_manage') }}
-          </el-menu-item>
+          <el-submenu index="2">
+            <template slot="title">{{ $t('commons.report_statistics.report_filter.more_options') }}</template>
+            <el-menu-item :index="'/project/errorreportlibrary'" v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ']"
+                          v-xpack>
+              {{ $t("error_report_library.name") }}
+            </el-menu-item>
+            <el-menu-item index="/project/template" v-permission="['PROJECT_TEMPLATE:READ']">
+              <template slot="title">{{ $t('workspace.template_manage') }}</template>
+            </el-menu-item>
+            <el-menu-item :index="'/project/messagesettings'" v-permission="['PROJECT_MESSAGE:READ']">
+              {{ $t("organization.message_settings") }}
+            </el-menu-item>
+            <el-menu-item :index="'/project/log'" popper-class="submenu" v-permission="['PROJECT_OPERATING_LOG:READ']">
+              {{ $t('project.log') }}
+            </el-menu-item>
+            <el-menu-item v-xpack :index="'/project/version'" v-permission="['PROJECT_VERSION:READ']">
+              {{ $t('project.version_manage') }}
+            </el-menu-item>
+            <el-menu-item :index="'/project/app'" popper-class="submenu"
+                          v-permission="['PROJECT_APP_MANAGER:READ+EDIT']">
+              {{ $t('project.app_manage') }}
+            </el-menu-item>
+            <el-menu-item :index="'/project/code/segment'" popper-class="submenu"
+                          v-permission="['PROJECT_CUSTOM_CODE:READ']">
+              {{ $t('project.code_segment.code_segment') }}
+            </el-menu-item>
+          </el-submenu>
         </el-menu>
       </el-col>
+      <el-col :span="10">
+        <ms-header-right-menus/>
+      </el-col>
     </el-row>
   </div>
 
@@ -60,10 +66,11 @@ import MsRecentList from "@/business/components/common/head/RecentList";
 import MsCreateButton from "@/business/components/common/head/CreateButton";
 import ProjectChange from "@/business/components/common/head/ProjectSwitch";
 import {hasLicense} from "@/common/js/utils";
+import MsHeaderRightMenus from "@/business/components/layout/HeaderRightMenus";
 
 export default {
   name: "ProjectHeaderMenus",
-  components: {ProjectChange, MsShowAll, MsRecentList, MsCreateButton},
+  components: {ProjectChange, MsShowAll, MsRecentList, MsCreateButton, MsHeaderRightMenus},
   data() {
     return {
       currentProject: '',
@@ -99,6 +106,7 @@ export default {
   border-bottom: 1px solid #E6E6E6;
   background-color: #FFF;
 }
+
 .el-menu-item {
   padding: 0 10px;
 }
diff --git a/frontend/src/business/components/project/menu/EditProject.vue b/frontend/src/business/components/project/menu/EditProject.vue
index b64d5ea883..a35c89f24e 100644
--- a/frontend/src/business/components/project/menu/EditProject.vue
+++ b/frontend/src/business/components/project/menu/EditProject.vue
@@ -152,7 +152,7 @@ export default {
         // caseTemplateId: [{required: true}],
         // issueTemplateId: [{required: true}],
       },
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       labelWidth: '150px',
       platformOptions: [],
       issueOptions: [],
diff --git a/frontend/src/business/components/project/menu/EnvironmentList.vue b/frontend/src/business/components/project/menu/EnvironmentList.vue
index 83924cc86a..fecf1f5571 100644
--- a/frontend/src/business/components/project/menu/EnvironmentList.vue
+++ b/frontend/src/business/components/project/menu/EnvironmentList.vue
@@ -168,7 +168,7 @@ export default {
       total: 0,
       projectIds: [],   //当前工作空间所拥有的所有项目id
       projectFilters: [],
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       ifCreate: false, //是否是创建环境
     }
   },
diff --git a/frontend/src/business/components/project/menu/Log.vue b/frontend/src/business/components/project/menu/Log.vue
index aa86fe5bba..19ac298a26 100644
--- a/frontend/src/business/components/project/menu/Log.vue
+++ b/frontend/src/business/components/project/menu/Log.vue
@@ -172,7 +172,7 @@ export default {
       },
       tableData: [],
       userList: [],
-      screenHeight: 'calc(100vh - 215px)',
+      screenHeight: 'calc(100vh - 175px)',
       LOG_TYPE: new LOG_TYPE(this),
       LOG_TYPE_MAP: new LOG_TYPE_MAP(this),
       LOG_MODULE_MAP: new LOG_MODULE_MAP(this),
diff --git a/frontend/src/business/components/project/menu/Member.vue b/frontend/src/business/components/project/menu/Member.vue
index 3df41eff82..74b1293b5f 100644
--- a/frontend/src/business/components/project/menu/Member.vue
+++ b/frontend/src/business/components/project/menu/Member.vue
@@ -115,7 +115,7 @@ export default {
       result: {},
       dialogResult: {},
       tableData: [],
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       currentPage: 1,
       pageSize: 10,
       total: 0,
diff --git a/frontend/src/business/components/project/menu/UserGroup.vue b/frontend/src/business/components/project/menu/UserGroup.vue
index 4ebcf9023f..743c365e0b 100644
--- a/frontend/src/business/components/project/menu/UserGroup.vue
+++ b/frontend/src/business/components/project/menu/UserGroup.vue
@@ -113,7 +113,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      screenHeight: 'calc(100vh - 200px)',
+      screenHeight: 'calc(100vh - 160px)',
       groups: [],
       currentGroup: {},
       flag: false
diff --git a/frontend/src/business/components/project/menu/file/FileManage.vue b/frontend/src/business/components/project/menu/file/FileManage.vue
index 2ff455becd..23e909e231 100644
--- a/frontend/src/business/components/project/menu/file/FileManage.vue
+++ b/frontend/src/business/components/project/menu/file/FileManage.vue
@@ -41,6 +41,6 @@ export default {
 }
 
 .file-manage-resource {
-  height: calc(50vh - 44px);
+  height: calc(50vh - 4px);
 }
 </style>
diff --git a/frontend/src/business/components/project/menu/file/ResourceManage.vue b/frontend/src/business/components/project/menu/file/ResourceManage.vue
index a693dbbb08..e22ab55f80 100644
--- a/frontend/src/business/components/project/menu/file/ResourceManage.vue
+++ b/frontend/src/business/components/project/menu/file/ResourceManage.vue
@@ -116,7 +116,7 @@ export default {
       condition: {},
       projectId: getCurrentProjectID(),
       currentRow: null,
-      height: 'calc(50vh - 160px)'
+      height: 'calc(50vh - 110px)'
     };
   },
   created() {
diff --git a/frontend/src/business/components/project/menu/function/CustomFunction.vue b/frontend/src/business/components/project/menu/function/CustomFunction.vue
index 97f437af33..5805362556 100644
--- a/frontend/src/business/components/project/menu/function/CustomFunction.vue
+++ b/frontend/src/business/components/project/menu/function/CustomFunction.vue
@@ -99,7 +99,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       languages: [
         {text: 'beanshell', value: 'beanshell'},
         {text: 'python', value: 'python'},
diff --git a/frontend/src/business/components/project/menu/function/CustomFunctionRelate.vue b/frontend/src/business/components/project/menu/function/CustomFunctionRelate.vue
index 991c15eab8..473131b9ad 100644
--- a/frontend/src/business/components/project/menu/function/CustomFunctionRelate.vue
+++ b/frontend/src/business/components/project/menu/function/CustomFunctionRelate.vue
@@ -72,7 +72,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       currentRow: {}
     }
   },
diff --git a/frontend/src/business/components/project/notification/TaskNotification.vue b/frontend/src/business/components/project/notification/TaskNotification.vue
index fe89c0507c..347d37b6fb 100644
--- a/frontend/src/business/components/project/notification/TaskNotification.vue
+++ b/frontend/src/business/components/project/notification/TaskNotification.vue
@@ -201,7 +201,7 @@ export default {
 
 <style scoped>
 .task-notification {
-  height: calc(100vh - 230px);
+  height: calc(100vh - 190px);
   overflow: auto;
 }
 
diff --git a/frontend/src/business/components/project/template/CustomFieldList.vue b/frontend/src/business/components/project/template/CustomFieldList.vue
index 41963dda6b..235ee3f0c2 100644
--- a/frontend/src/business/components/project/template/CustomFieldList.vue
+++ b/frontend/src/business/components/project/template/CustomFieldList.vue
@@ -191,7 +191,7 @@ export default {
       return SYSTEM_FIELD_NAME_MAP;
     },
     tableHeight() {
-      return document.documentElement.clientHeight - 240;
+      return document.documentElement.clientHeight - 200;
     }
   },
   methods: {
diff --git a/frontend/src/business/components/project/template/FieldTemplateEdit.vue b/frontend/src/business/components/project/template/FieldTemplateEdit.vue
index 3656e224ac..6db1de757c 100644
--- a/frontend/src/business/components/project/template/FieldTemplateEdit.vue
+++ b/frontend/src/business/components/project/template/FieldTemplateEdit.vue
@@ -233,7 +233,7 @@ export default {
 <style scoped>
 
 .container {
-  height: calc(100vh - 62px);
+  height: calc(100vh - 42px);
 }
 
 .filed-list {
diff --git a/frontend/src/business/components/project/template/IssuesTemplateList.vue b/frontend/src/business/components/project/template/IssuesTemplateList.vue
index 197e4774bb..3594ce2e5f 100644
--- a/frontend/src/business/components/project/template/IssuesTemplateList.vue
+++ b/frontend/src/business/components/project/template/IssuesTemplateList.vue
@@ -137,7 +137,7 @@ export default {
       return ISSUE_PLATFORM_OPTION;
     },
     tableHeight() {
-      return document.documentElement.clientHeight - 240;
+      return document.documentElement.clientHeight - 200;
     }
   },
   methods: {
diff --git a/frontend/src/business/components/project/template/TestCaseTemplateList.vue b/frontend/src/business/components/project/template/TestCaseTemplateList.vue
index a561616f65..eee2bb1129 100644
--- a/frontend/src/business/components/project/template/TestCaseTemplateList.vue
+++ b/frontend/src/business/components/project/template/TestCaseTemplateList.vue
@@ -147,7 +147,7 @@ export default {
       return new CASE_TYPE_OPTION();
     },
     tableHeight() {
-      return document.documentElement.clientHeight - 240;
+      return document.documentElement.clientHeight - 200;
     }
   },
   methods: {
diff --git a/frontend/src/business/components/reportstatistics/header/ReportStatisticsHeaderMenus.vue b/frontend/src/business/components/reportstatistics/header/ReportStatisticsHeaderMenus.vue
index d9a2c3e10c..49c742aeda 100644
--- a/frontend/src/business/components/reportstatistics/header/ReportStatisticsHeaderMenus.vue
+++ b/frontend/src/business/components/reportstatistics/header/ReportStatisticsHeaderMenus.vue
@@ -13,6 +13,9 @@
 
         </el-menu>
       </el-col>
+      <el-col :span="10">
+        <ms-header-right-menus/>
+      </el-col>
     </el-row>
   </div>
 
@@ -22,10 +25,11 @@
 
 import ProjectChange from "@/business/components/common/head/ProjectSwitch";
 import {hasLicense, hasPermission} from "@/common/js/utils";
+import MsHeaderRightMenus from "@/business/components/layout/HeaderRightMenus";
 
 export default {
   name: "ReportStatisticsHeaderMenus",
-  components: {ProjectChange},
+  components: {ProjectChange,MsHeaderRightMenus},
   data() {
     return {
       licenseCheck: false,
diff --git a/frontend/src/business/components/settings/Setting.vue b/frontend/src/business/components/settings/Setting.vue
index 42f6a6233f..f5c2e91712 100644
--- a/frontend/src/business/components/settings/Setting.vue
+++ b/frontend/src/business/components/settings/Setting.vue
@@ -46,12 +46,12 @@ export default {
 
 <style scoped>
 .ms-aside-container {
-  height: calc(100vh - 40px) !important;
+  height: calc(100vh) !important;
   padding: 20px;
 }
 
 .ms-main-container {
-  height: calc(100vh - 40px) !important;
+  height: calc(100vh) !important;
 }
 
 h1 {
diff --git a/frontend/src/business/components/settings/operatinglog/OperatingLog.vue b/frontend/src/business/components/settings/operatinglog/OperatingLog.vue
index b1da1481fe..1e15212e6a 100644
--- a/frontend/src/business/components/settings/operatinglog/OperatingLog.vue
+++ b/frontend/src/business/components/settings/operatinglog/OperatingLog.vue
@@ -175,7 +175,7 @@ export default {
       },
       tableData: [],
       userList: [],
-      screenHeight: 'calc(100vh - 270px)',
+      screenHeight: 'calc(100vh - 230px)',
       LOG_TYPE: new LOG_TYPE(this),
       LOG_TYPE_MAP: new LOG_TYPE_MAP(this),
       LOG_MODULE_MAP: new LOG_MODULE_MAP(this),
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index a65f714ad0..cca1fab157 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -422,7 +422,7 @@ export default {
       dialogTotal: 0,
       memberLineData: [],
       memberForm: {},
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       form: {
         // name: "",
         // description: ""
diff --git a/frontend/src/business/components/settings/system/TestResourcePool.vue b/frontend/src/business/components/settings/system/TestResourcePool.vue
index df1e89249f..930f9a26bb 100644
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@@ -300,7 +300,7 @@ export default {
       pageSize: 10,
       total: 0,
       form: {performance: true, api: true, backendListener: true},
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       requiredRules: [{required: true, message: this.$t('test_resource_pool.fill_the_data'), trigger: 'blur'}],
       rule: {
         name: [
diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index ea9d9825f8..18b2974527 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -196,7 +196,7 @@ export default {
         }]
       },
       changePasswordUser: '',
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       checkPasswordForm: {},
       ruleForm: {},
       buttons: [
diff --git a/frontend/src/business/components/settings/system/group/UserGroup.vue b/frontend/src/business/components/settings/system/group/UserGroup.vue
index 286d67bac2..785b5202a7 100644
--- a/frontend/src/business/components/settings/system/group/UserGroup.vue
+++ b/frontend/src/business/components/settings/system/group/UserGroup.vue
@@ -100,7 +100,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      screenHeight: 'calc(100vh - 200px)',
+      screenHeight: 'calc(100vh - 160px)',
       groups: [],
       currentGroup: {}
     };
diff --git a/frontend/src/business/components/settings/workspace/MsProject.vue b/frontend/src/business/components/settings/workspace/MsProject.vue
index b57016db96..a0c13ff79a 100644
--- a/frontend/src/business/components/settings/workspace/MsProject.vue
+++ b/frontend/src/business/components/settings/workspace/MsProject.vue
@@ -258,7 +258,7 @@ export default {
           {max: 250, message: this.$t('commons.input_limit', [0, 250]), trigger: 'blur'}
         ],
       },
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       dialogCondition: {},
       memberVisible: false,
       memberLineData: [],
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 53ac00e04c..d976732866 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -146,7 +146,7 @@ export default {
           {required: true, message: this.$t('group.please_select_group'), trigger: ['blur']}
         ]
       },
-      screenHeight: 'calc(100vh - 195px)',
+      screenHeight: 'calc(100vh - 155px)',
       multipleSelection: [],
       currentPage: 1,
       pageSize: 10,
diff --git a/frontend/src/business/components/settings/workspace/environment/EnvironmentGroupList.vue b/frontend/src/business/components/settings/workspace/environment/EnvironmentGroupList.vue
index 177b8ef3be..cedfce2210 100644
--- a/frontend/src/business/components/settings/workspace/environment/EnvironmentGroupList.vue
+++ b/frontend/src/business/components/settings/workspace/environment/EnvironmentGroupList.vue
@@ -111,7 +111,7 @@ export default {
     screenHeight: {
       type: String,
       default() {
-        return 'calc(100vh - 210px)';
+        return 'calc(100vh - 170px)';
       }
     },
     readOnly: {
diff --git a/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue b/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue
index 8899c895ab..09b84e2f66 100644
--- a/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue
+++ b/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue
@@ -190,7 +190,7 @@ export default {
       total: 0,
       projectIds: [],   //当前工作空间所拥有的所有项目id
       projectFilters: [],
-      screenHeight: 'calc(100vh - 210px)',
+      screenHeight: 'calc(100vh - 170px)',
       rules: {
         currentProjectId: [
           {required: true, message: "", trigger: 'blur'},
diff --git a/frontend/src/business/components/task/TaskCenter.vue b/frontend/src/business/components/task/TaskCenter.vue
index c6e7f479e5..daefb3f65a 100644
--- a/frontend/src/business/components/task/TaskCenter.vue
+++ b/frontend/src/business/components/task/TaskCenter.vue
@@ -5,7 +5,6 @@
       :unique-opened="true"
       class="header-user-menu align-right header-top-menu"
       mode="horizontal"
-      :background-color="color"
       text-color="#fff"
       active-text-color="#fff">
       <el-menu-item onselectstart="return false">
@@ -32,7 +31,7 @@
       :title="$t('commons.task_center')"
       :size="size.toString()"
       custom-class="ms-drawer-task">
-      <el-card style="float: left;width: 850px" v-if="size > 550 ">
+      <el-card style="float: left;" :style="{'width': (size - 550)+'px'}" v-if="size > 550 ">
         <div class="ms-task-opt-btn" @click="packUp">{{ $t('commons.task_close') }}</div>
         <!-- 接口用例结果 -->
         <ms-request-result-tail :response="response" ref="debugResult" v-if="executionModule === 'API' && reportType !=='API_INTEGRATED'"/>
@@ -193,7 +192,6 @@ export default {
     };
   },
   props: {
-    color: String,
     showMenu: {
       type: Boolean,
       default: true
@@ -202,7 +200,7 @@ export default {
   computed: {
     disabled() {
       return this.loading
-    }
+    },
   },
 
   created() {
@@ -357,7 +355,7 @@ export default {
       if (status) {
         status = row.executionStatus.toLowerCase();
         if (status === 'saved' || status === 'completed' || status === 'success' || status === 'error' || status === 'unexecute' || status === 'errorreportresult') {
-          this.size = 1400;
+          this.size = window.innerWidth - 50;
           this.reportId = row.id;
           this.executionModule = row.executionModule;
           this.reportType = row.reportType;
@@ -486,7 +484,7 @@ export default {
 }
 
 .global {
-  color: #fff;
+  color: var(--color);
 }
 
 .header-top-menu {
@@ -586,7 +584,7 @@ export default {
 
 .ms-task-opt-btn {
   position: fixed;
-  right: 1372px;
+  right: calc(98% - var(--asideWidth));
   top: 50%;
   z-index: 5;
   width: 20px;
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 06303da869..eec6149c2f 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -323,7 +323,7 @@ export default {
       projectName: "",
       type: TEST_CASE_LIST,
       tableHeaderKey: "TRACK_TEST_CASE",
-      screenHeight: 'calc(100vh - 228px)',
+      screenHeight: 'calc(100vh - 185px)',
       tableLabel: [],
       deletePath: "/test/case/delete",
       enableOrderDrag: true,
diff --git a/frontend/src/business/components/track/head/TrackHeaderMenus.vue b/frontend/src/business/components/track/head/TrackHeaderMenus.vue
index e2dfc95679..fce833c660 100644
--- a/frontend/src/business/components/track/head/TrackHeaderMenus.vue
+++ b/frontend/src/business/components/track/head/TrackHeaderMenus.vue
@@ -31,7 +31,9 @@
           </el-menu-item>
         </el-menu>
       </el-col>
-      <el-col :span="8"/>
+      <el-col :span="10">
+        <ms-header-right-menus/>
+      </el-col>
     </el-row>
   </div>
 
@@ -43,10 +45,11 @@ import MsRecentList from "../../common/head/RecentList";
 import MsCreateButton from "../../common/head/CreateButton";
 import ProjectChange from "@/business/components/common/head/ProjectSwitch";
 import {getCurrentProjectID} from "@/common/js/utils";
+import MsHeaderRightMenus from "@/business/components/layout/HeaderRightMenus";
 
 export default {
   name: "TrackHeaderMenus",
-  components: {ProjectChange, MsShowAll, MsRecentList, MsCreateButton},
+  components: {ProjectChange, MsShowAll, MsRecentList, MsCreateButton, MsHeaderRightMenus},
   data() {
     return {
       testPlanViewPath: '',
diff --git a/frontend/src/business/components/track/issue/IssueEdit.vue b/frontend/src/business/components/track/issue/IssueEdit.vue
index 185429ceef..6fea24adcc 100644
--- a/frontend/src/business/components/track/issue/IssueEdit.vue
+++ b/frontend/src/business/components/track/issue/IssueEdit.vue
@@ -5,7 +5,7 @@
     :before-close="handleClose"
     :visible.sync="visible"
     :with-header="false"
-    size="100%"
+    size="calc(100% - var(--asideWidth))"
     :modal-append-to-body="false"
     ref="drawer"
     >
diff --git a/frontend/src/business/components/track/issue/IssueEditDetail.vue b/frontend/src/business/components/track/issue/IssueEditDetail.vue
index 19154e1fec..8aff778384 100644
--- a/frontend/src/business/components/track/issue/IssueEditDetail.vue
+++ b/frontend/src/business/components/track/issue/IssueEditDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-main v-loading="result.loading" class="container" :style="isCaseEdit ? '' : 'height: calc(100vh - 62px)'">
+  <el-main v-loading="result.loading" class="container" :style="isCaseEdit ? '' : 'height: calc(100vh - 42px)'">
     <el-scrollbar>
       <el-form :model="form" :rules="rules" label-position="right" label-width="80px" ref="form">
 
diff --git a/frontend/src/business/components/track/issue/IssueList.vue b/frontend/src/business/components/track/issue/IssueList.vue
index c881ff07c0..65cef69f4e 100644
--- a/frontend/src/business/components/track/issue/IssueList.vue
+++ b/frontend/src/business/components/track/issue/IssueList.vue
@@ -220,7 +220,7 @@ export default {
       fields: [],
       tableHeaderKey:"ISSUE_LIST",
       fieldsWidth: getCustomTableWidth('ISSUE_LIST'),
-      screenHeight: 'calc(100vh - 200px)',
+      screenHeight: 'calc(100vh - 160px)',
       operators: [
         {
           tip: this.$t('commons.edit'), icon: "el-icon-edit",
diff --git a/frontend/src/business/components/track/plan/components/TestPlanList.vue b/frontend/src/business/components/track/plan/components/TestPlanList.vue
index d7d5a0dd5a..5f5a91420f 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@@ -411,7 +411,7 @@ export default {
       tableData: [],
       fields: getCustomTableHeader('TEST_PLAN_LIST'),
       fieldsWidth: getCustomTableWidth('TEST_PLAN_LIST'),
-      screenHeight: 'calc(100vh - 200px)',
+      screenHeight: 'calc(100vh - 160px)',
       statusFilters: [
         {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
         {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
diff --git a/frontend/src/business/components/track/report/components/TestPlanReportList.vue b/frontend/src/business/components/track/report/components/TestPlanReportList.vue
index 8b6ea87286..f4dee76cf6 100644
--- a/frontend/src/business/components/track/report/components/TestPlanReportList.vue
+++ b/frontend/src/business/components/track/report/components/TestPlanReportList.vue
@@ -179,7 +179,7 @@ export default {
       pageSize: 10,
       isTestManagerOrTestUser: false,
       selectRows: new Set(),
-      screenHeight: 'calc(100vh - 200px)', //屏幕高度
+      screenHeight: 'calc(100vh - 160px)', //屏幕高度
       total: 0,
       tableData: [],
       statusFilters: [
diff --git a/frontend/src/business/components/track/review/components/TestCaseReviewList.vue b/frontend/src/business/components/track/review/components/TestCaseReviewList.vue
index cee75384b0..bb5465ec6f 100644
--- a/frontend/src/business/components/track/review/components/TestCaseReviewList.vue
+++ b/frontend/src/business/components/track/review/components/TestCaseReviewList.vue
@@ -177,7 +177,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      screenHeight: 'calc(100vh - 200px)',
+      screenHeight: 'calc(100vh - 160px)',
       statusFilters: [
         {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
         {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
diff --git a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseList.vue b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseList.vue
index bced0eda0d..54eb9779f8 100644
--- a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseList.vue
+++ b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseList.vue
@@ -218,7 +218,7 @@ export default {
       fields: [],
       fieldsWidth: getCustomTableWidth('TEST_CASE_REVIEW_FUNCTION_TEST_CASE'),
       headerItems: Test_Case_Review_Case_List,
-      screenHeight: 'calc(100vh - 280px)',
+      screenHeight: 'calc(100vh - 240px)',
       tableLabel: [],
       result: {},
       condition: {},
diff --git a/frontend/src/common/css/main.css b/frontend/src/common/css/main.css
index daa9004b9a..4f631776d2 100644
--- a/frontend/src/common/css/main.css
+++ b/frontend/src/common/css/main.css
@@ -69,6 +69,9 @@ body {
   --color_shallow: '';
   --count_number: '';
   --count_number_shallow: '';
+  --asideWidth: 44px;
+  --asideOpenWidth: 150px;
+  --asideOpenMargin: 114px;
 }
 
 /* 解决 document.body.clientHeight 为0 */
diff --git a/frontend/src/common/js/constants.js b/frontend/src/common/js/constants.js
index e6b75a13b9..e6dcbae9be 100644
--- a/frontend/src/common/js/constants.js
+++ b/frontend/src/common/js/constants.js
@@ -180,7 +180,7 @@ export const JMETER_FUNC = [
   {type: "String", name: "${__TestPlanName}", description: "Return name of current test plan"},
 ]
 
-export const ORIGIN_COLOR = '#2c2a48';
+export const ORIGIN_COLOR = '#783887';
 export const ORIGIN_COLOR_SHALLOW = '#595591';
 export const COUNT_NUMBER = '#6C317C';
 export const COUNT_NUMBER_SHALLOW = '#CDB9D2';
diff --git a/frontend/src/common/js/utils.js b/frontend/src/common/js/utils.js
index aa8e351613..3a31a3393d 100644
--- a/frontend/src/common/js/utils.js
+++ b/frontend/src/common/js/utils.js
@@ -448,7 +448,7 @@ export function getNodePath(id, moduleOptions) {
 }
 
 export function getDefaultTableHeight() {
-  return document.documentElement.clientHeight - 200;
+  return document.documentElement.clientHeight - 160;
 }
 
 export function fullScreenLoading(component) {
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 5d8cda1878..d2cded4563 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -122,7 +122,7 @@ export default {
     view: 'view',
     follow_api: 'Follow API definition',
     response_time_delay: 'Response delay time',
-    my_workstation: 'MyWorkstation',
+    my_workstation: 'Workstation',
     ui_test: 'UiTest',
     performance: 'Performance',
     enable_settings: 'Enable Settings',
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 878bd38bd2..9d58fc88cd 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -127,7 +127,7 @@ export default {
     enable_settings: '启用设置',
     view_settings: '显示设置',
     functional: '功能测试',
-    my_workstation: '我的工作台',
+    my_workstation: '工作台',
     ui_test: 'UI测试',
     input_content: '请输入内容',
     create: '新建',
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 8203010150..d4d2e551fb 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -127,7 +127,7 @@ export default {
     enable_settings: '啟用設置',
     view_settings: '顯示設置',
     functional: '功能測試',
-    my_workstation: '我的工作臺',
+    my_workstation: '工作臺',
     ui_test: 'UI測試',
     input_content: '請輸入內容',
     create: '新建',