feat(系统布局): 增加主题风格设置

backend/src/main/java/io/metersphere/service/BaseDisplayService.java

@@ -45,13 +45,20 @@ public class BaseDisplayService {
                 bytes = loadFileAsBytes(paramValue);
             }
         }
-
+        String logo = "/static/img/logo-default-MeterSphere.*.svg";
+        List<SystemParameter> sideThemes = getParamList("ui.sideTheme");
+        if (!CollectionUtils.isEmpty(sideThemes)) {
+            SystemParameter sp = sideThemes.get(0);
+            if (StringUtils.equals(sp.getParamValue(), "theme-light")) {
+                logo = "/static/img/logo-light-MeterSphere.*.svg";
+            }
+        }
         MediaType contentType = MediaType.parseMediaType("application/octet-stream");
         if (bytes == null) {
             PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver(getClass().getClassLoader());
             switch (imageName) {
                 case "logo":
-                    bytes = IOUtils.toByteArray(resolver.getResources("/static/img/logo-light-MeterSphere.*.svg")[0].getInputStream());
+                    bytes = IOUtils.toByteArray(resolver.getResources(logo)[0].getInputStream());
                     contentType = MediaType.valueOf("image/svg+xml");
                     break;
                 case "loginImage":

frontend/package.json

@@ -78,6 +78,7 @@
     "html-webpack-inline-source-plugin": "0.0.10",
     "less": "^3.9.0",
     "less-loader": "^7.3.0",
+    "svg-sprite-loader": "^6.0.11",
     "vue-template-compiler": "2.6.14"
   },
   "eslintConfig": {

frontend/src/assets/images/customize.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style type="text/css">
+    .icon{fill:#FFFFFF;}
+  </style>
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="#783887" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" class="icon" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" class="icon" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" class="icon" fill="#783887" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

frontend/src/assets/images/default.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="#783887" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#783887" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

frontend/src/assets/images/light.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

frontend/src/assets/logo-default-MeterSphere.svg

@@ -1,22 +1,22 @@
 <?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">
+     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_">
+  <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 "/>
+  <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 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 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

frontend/src/assets/logo-light-MeterSphere.svg

@@ -3,7 +3,7 @@
 <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;}
+	.st0{fill:#505266;}
 </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

frontend/src/assets/module/api.svg

@@ -2,9 +2,6 @@
 <!-- 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"/>

frontend/src/assets/module/performance.svg

@@ -2,11 +2,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 
+	<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

frontend/src/assets/module/project.svg

@@ -2,9 +2,6 @@
 <!-- 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"/>

frontend/src/assets/module/pushpin.svg

@@ -1,7 +1,4 @@
 <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>

frontend/src/assets/module/report.svg

@@ -2,9 +2,6 @@
 <!-- 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"/>

frontend/src/assets/module/system.svg

@@ -2,10 +2,6 @@
 <!-- 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

frontend/src/assets/module/track.svg

@@ -2,9 +2,6 @@
 <!-- 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"/>

frontend/src/assets/module/ui.svg

@@ -2,9 +2,6 @@
 <!-- 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

frontend/src/assets/module/unpin.svg

@@ -1,7 +1,4 @@
 <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">
+  <path
-    .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>

frontend/src/assets/module/workstation.svg

@@ -3,12 +3,10 @@
 <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="8.51" y="38.16" width="26.98" height="2.7"/>
-    <rect x="17.53" y="34.57" class="st0" width="8.94" height="2.73"/>
+    <rect x="17.53" y="34.57" 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"
     />

frontend/src/business/App.vue

@@ -17,23 +17,21 @@
 
     <el-container>
       <el-aside
-        :class="isCollapse ? 'ms-aside': 'ms-aside-open'"
+        :class="isCollapse ? 'ms-aside': 'ms-aside-collapse-open'"
         class="ms-left-aside"
         :style="isFixed ? 'opacity:100%; position: relative;z-index: 666;': 'opacity: 95%;position: fixed'"
         @mouseenter.native="collapseOpen"
         @mouseleave.native="collapseClose">
-        <ms-aside-header :color="color" :isCollapse="isCollapse"/>
+        <ms-aside-header :sideTheme="sideTheme" :isCollapse="isCollapse"/>
-        <ms-aside-menus :color="color" :isCollapse="isCollapse"/>
+        <ms-aside-menus :sideTheme="sideTheme" :color="color" :isCollapse="isCollapse"/>
         <div class="ms-header-fixed" v-show="!isCollapse">
-          <!--<el-checkbox v-model="isFixed" v-show="!isCollapse" class="checkBox-input"/>-->
+          <svg-icon iconClass="pushpin" class-name="ms-menu-pin" v-if="isFixed" @click.native="fixedChange(false)"/>
-          <img src="@/assets/module/pushpin.svg" class="ms-pin" alt="" v-if="isFixed" @click="fixedChange(false)">
+          <svg-icon iconClass="unpin" class-name="ms-menu-pin" v-else @click.native="fixedChange(true)"/>
-          <img src="@/assets/module/unpin.svg" class="ms-pin" alt="" v-else @click="fixedChange(true)">
         </div>
       </el-aside>
       <el-main class="container">
-        <div :class="isFixed ? 'ms-left-fixed': 'left'">
+        <div :class="isFixed ? 'ms-left-fixed': 'ms-aside-left'"/>
-        </div>
+        <div :class="isFixed ? 'ms-right-fixed': 'ms-main-view ms-aside-right'">
-        <div :class="isFixed ? 'ms-right-fixed': 'ms-main-view right'">
           <ms-view v-if="isShow"/>
         </div>
       </el-main>
@@ -47,7 +45,7 @@ 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 {hasLicense, saveLocalStorage, setColor, setDefaultTheme} from "@/common/js/utils";
+import {hasLicense, saveLocalStorage, setAsideColor, setColor, setCustomizeColor, setDefaultTheme, setLightColor} from "@/common/js/utils";
 import {registerRequestHeaders} from "@/common/js/ajax";
 import {ORIGIN_COLOR} from "@/common/js/constants";
 
@@ -73,12 +71,13 @@ export default {
       isCollapse: true,
       headerHeight: "0px",
       isFixed: false,
+      sideTheme: "",
     };
   },
   computed: {
     changePassword() {
       return JSON.parse(sessionStorage.getItem("changePassword"));
-    }
+    },
   },
   created() {
     if (this.licenseHeader != null || this.changePassword) {
@@ -89,12 +88,12 @@ export default {
       setDefaultTheme();
       this.color = ORIGIN_COLOR;
     } else {
-      //
       this.$get('/system/theme', res => {
         this.color = res.data ? res.data : ORIGIN_COLOR;
         setColor(this.color, this.color, this.color, this.color, this.color);
         this.$store.commit('setTheme', res.data);
       });
+      this.query();
     }
     // OIDC redirect 之后不跳转
     if (window.location.href.endsWith('#/refresh')) {
@@ -148,6 +147,27 @@ export default {
     };
   },
   methods: {
+    query() {
+      this.result = this.$get("/display/info", response => {
+        let theme = "";
+        if (response.data && response.data[5] && response.data[5].paramValue) {
+          theme = response.data[5].paramValue;
+        }
+        if (response.data && response.data[7] && response.data[7].paramValue) {
+          this.setAsideTheme(response.data[7].paramValue, theme);
+        }
+      })
+    },
+    setAsideTheme(sideTheme, theme) {
+      this.sideTheme = sideTheme;
+      if (sideTheme === "theme-light") {
+        setLightColor();
+      } else if (sideTheme === "theme-default") {
+        setAsideColor();
+      } else {
+        setCustomizeColor(theme);
+      }
+    },
     fixedChange(isFixed) {
       this.isFixed = isFixed;
       if (this.isFixed) {
@@ -230,16 +250,20 @@ export default {
 .ms-aside {
   z-index: 666;
   width: var(--asideWidth) !important;
-  background-color: var(--color);
+  background-color: var(--aside_color);
+  color: var(--font_color);
   opacity: 100%;
   height: calc(100vh);
 }
 
-.ms-aside-open {
+.ms-aside-collapse-open {
   width: var(--asideOpenWidth) !important;
-  background-color: var(--color);
+  background-color: var(--aside_color);
+  color: var(--font_color);
   opacity: 95%;
   z-index: 9999;
+  border-right: 1px #DCDFE6 solid;
+  border-radius: 2px;
 }
 
 .change-password-tip {
@@ -254,9 +278,8 @@ export default {
   position: fixed;
   left: 0;
   height: calc(100vh);
-  background-color: var(--color);
+  background-color: var(--aside_color);
   padding-left: 0px;
-  border: 0px;
   overflow: hidden;
 }
 
@@ -269,18 +292,19 @@ export default {
   height: calc(100vh);
 }
 
-.left {
+.ms-aside-left {
   float: left;
   width: var(--asideWidth);
   height: calc(100vh);
-  background-color: var(--color);
+  background-color: var(--aside_color);
 }
 
 .ms-left-fixed {
   width: 0px;
+  border-right: 0px;
 }
 
-.right {
+.ms-aside-right {
   flex: 1;
   height: calc(100vh);
 }
@@ -301,17 +325,6 @@ export default {
   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;
 }
@@ -327,4 +340,14 @@ export default {
   position: absolute;
   border-color: #fff !important;
 }
+
+.ms-menu-pin {
+  color: var(--font_color);
+  fill: currentColor;
+  font-size: 20px;
+}
+
+.ms-menu-pin:hover {
+  cursor: pointer;
+}
 </style>

frontend/src/business/components/common/svg/SvgIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName () {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass () {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: center;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

frontend/src/business/components/common/svg/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/business/components/common/svg/SvgIcon';
+
+// 注册到全局
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('@/assets/module', false, /\.svg$/)
+requireAll(req)

frontend/src/business/components/layout/AsideFooter.vue

@@ -1,7 +1,6 @@
 <template>
   <el-menu menu-trigger="click"
-           class="ms-menu-vertical ms-menu ms-footer" :collapse="isCollapse"
+           class="ms-menu-vertical ms-menu-title ms-footer" :collapse="isCollapse"
-           :background-color="color"
            text-color="#F2F2F2"
            active-text-color="#fff"
            :default-active="activeIndex"
@@ -67,6 +66,11 @@ export default {
   padding-left: 11px !important;
 }
 
+.ms-menu-title {
+  align-items: center;
+  background-color: var(--aside_color);
+}
+
 .ms-menu-img {
   margin: 0px;
   width: 25px;

frontend/src/business/components/layout/AsideHeader.vue

@@ -1,11 +1,8 @@
 <template>
   <el-menu
-    class="ms-menu-vertical ms-menu horizontal-collapse-transition"
+    class="ms-menu-vertical ms-menu-title horizontal-collapse-transition"
-    text-color="#F2F2F2"
-    active-text-color="#fff"
     :key="menuKey"
     :collapse="isCollapse"
-    :background-color="color"
     router>
     <el-menu-item>
       <div>
@@ -34,7 +31,6 @@ export default {
     }
   },
   props: {
-    color: String,
     isCollapse: {
       type: Boolean,
       default: true,
@@ -55,11 +51,15 @@ export default {
   border-right: 0px !important;
 }
 
+.ms-menu-vertical > li.is-active {
+  background: var(--aside_color) !important;
+}
+
 .ms-title-width {
   font-size: 15px;
   font-weight: bold;
   margin-left: 4px;
-  color: #fff;
+  color: var(--font_color) !important;
   display: inline-block;
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -75,9 +75,13 @@ export default {
 }
 
 .el-menu-item:hover {
-  background-color: var(--color) !important;
+  background-color: var(--aside_color) !important;
 }
 
+.ms-menu-title {
+  align-items: center;
+  background-color: var(--aside_color);
+}
 
 .logo {
   margin: 0px;
@@ -88,6 +92,8 @@ export default {
   box-sizing: border-box;
   background-repeat: no-repeat;
   background-position: 50% center;
+  color: var(--font_color) !important;
+  background-color: var(--aside_color);
 }
 
 .horizontal-collapse-transition {

frontend/src/business/components/layout/AsideMenus.vue

@@ -1,44 +1,43 @@
 <template>
   <el-menu menu-trigger="click"
-           class="ms-menu-vertical ms-menu ms-menu-title horizontal-collapse-transition"
+           class="ms-menu-vertical horizontal-collapse-transition"
-           text-color="#F2F2F2"
+           :class="sideTheme === 'theme-light'? 'ms-menu-active' : 'ms-menu-def-active'"
-           active-text-color="#fff"
            :collapse="isCollapse"
-           :background-color="color"
            :default-active="activeIndex"
            :key="menuKey"
+           background-color="rgba(0,0,0,0)"
            @select="handleSelect"
            router>
     <el-menu-item index="/workstation" v-xpack v-if="check('workstation')">
       <div>
-        <img src="@/assets/module/workstation.svg" alt="" class="ms-menu-img">
+        <svg-icon iconClass="workstation" class-name="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">
+        <svg-icon iconClass="track" class-name="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">
+        <svg-icon iconClass="api" class-name="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">
+        <svg-icon iconClass="ui" class-name="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">
+        <svg-icon iconClass="ui" class-name="ms-menu-img"/>
         <span slot="title" class="ms-menu-item-title">{{ $t('commons.ui') }}</span>
       </div>
     </el-menu-item>
@@ -46,14 +45,14 @@
                   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">
+        <svg-icon iconClass="performance" class-name="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">
+        <svg-icon iconClass="report" class-name="ms-menu-img"/>
         <span slot="title" class="ms-menu-item-title">{{ $t('commons.report_statistics.title') }}</span>
       </div>
     </el-menu-item>
@@ -62,7 +61,7 @@
                   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">
+        <svg-icon iconClass="project" class-name="ms-menu-img"/>
         <span slot="title" class="ms-menu-item-title">{{ $t('commons.project_setting') }}</span>
       </div>
     </el-menu-item>
@@ -70,7 +69,7 @@
                   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">
+        <svg-icon iconClass="system" class-name="ms-menu-img"/>
         <span slot="title" class="ms-menu-item-title">{{ $t('commons.system_setting') }}</span>
       </div>
     </el-menu-item>
@@ -97,6 +96,7 @@ export default {
     };
   },
   props: {
+    sideTheme: String,
     color: String,
     isCollapse: {
       type: Boolean,
@@ -110,15 +110,11 @@ export default {
       }
       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()) {
@@ -173,24 +169,22 @@ export default {
 };
 </script>
 <style scoped>
+.ms-menu-vertical {
+  border-right: 0px !important;
+}
+
 .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;
+  color: var(--font_color) !important;
-}
-
-.ms-menu-title {
-  align-items: center;
 }
 
 /deep/ .el-menu-item {
@@ -198,19 +192,24 @@ export default {
 }
 
 .ms-menu-img {
-  margin: 0px;
+  color: var(--font_color) !important;
-  width: 22px;
+  fill: currentColor;
-  border: 0;
+  font-size: 22px;
-  display: inline-block;
-  box-sizing: border-box;
-  background-repeat: no-repeat;
-  background-position: 50% center;
 }
 
-.ms-menu-vertical > li.is-active {
+.ms-menu-active {
-  background: var(--color) !important;
+
+}
+
+.ms-menu-active > li.is-active {
+  background: rgb(204, 204, 204) !important;
+  color: #505266;
+}
+
+.ms-menu-def-active > li.is-active {
+  background: var(--aside_color) !important;
+  color: var(--color);
   mix-blend-mode: hard-light;
-  color: #fff !important;
 }
 
 .horizontal-collapse-transition {

frontend/src/business/components/settings/Setting.vue

@@ -51,7 +51,7 @@ export default {
 
 .ms-main-container {
   height: calc(100vh) !important;
-  padding: 2px;
+  padding: 0px;
 }
 
 h1 {

frontend/src/business/main.js

@@ -29,6 +29,8 @@ import formCreate from "@form-create/element-ui"
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
 import 'element-ui/lib/theme-chalk/display.css';
+import '@/business/components/common/svg';
+
 Vue.use(mavonEditor)
 
 Vue.use(JsonSchemaEditor);

frontend/src/common/css/main.css

@@ -72,6 +72,8 @@ body {
   --asideWidth: 44px;
   --asideOpenWidth: 150px;
   --asideOpenMargin: 114px;
+  --aside_color: '';
+  --font_color: '';
 }
 
 /* 解决 document.body.clientHeight 为0 */

frontend/src/common/js/constants.js

@@ -185,6 +185,7 @@ export const ORIGIN_COLOR_SHALLOW = '#595591';
 export const COUNT_NUMBER = '#6C317C';
 export const COUNT_NUMBER_SHALLOW = '#CDB9D2';
 export const PRIMARY_COLOR = '#783887';
+export const WHITE_COLOR = '#FFF';
 
 export const CONFIG_TYPE = {
   NOT: "NOT",

frontend/src/common/js/utils.js

@@ -418,6 +418,24 @@ export function setColor(a, b, c, d, e) {
   document.body.style.setProperty('--primary_color', e);
 }
 
+export function setAsideColor() {
+  // 自定义主题风格
+  document.body.style.setProperty('--aside_color', "#783887");
+  document.body.style.setProperty('--font_color', "#fff");
+}
+
+export function setLightColor() {
+  // 自定义主题风格
+  document.body.style.setProperty('--aside_color', "#fff");
+  document.body.style.setProperty('--font_color', "#505266");
+}
+
+export function setCustomizeColor(color) {
+  // 自定义主题风格
+  document.body.style.setProperty('--aside_color', color || '#783887');
+  document.body.style.setProperty('--font_color', "#fff");
+}
+
 export function setDefaultTheme() {
   setColor(ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, COUNT_NUMBER, COUNT_NUMBER_SHALLOW, PRIMARY_COLOR);
 }
@@ -533,10 +551,10 @@ export function parseTag(data) {
  */
 export function resizeTextarea(size = 2, index) {
   let textareaList = document.querySelectorAll('.sync-textarea .el-textarea__inner');
-  if (index || index === 0)  {
+  if (index || index === 0) {
     _resizeTextarea(index * size, size, textareaList);
   } else {
-    for (let i = 0; i < textareaList.length; i+=size) {
+    for (let i = 0; i < textareaList.length; i += size) {
       _resizeTextarea(i, size, textareaList);
     }
   }

frontend/src/i18n/en-US.js

@@ -520,6 +520,7 @@ export default {
     loginTitle: 'Login page prompt information',
     pageTitle: 'Page Title',
     sysTitle: 'System Name',
+    theme_style: 'Theme style set',
   },
   system_config: {
     base_config: 'Base Config',

frontend/src/i18n/zh-CN.js

@@ -525,6 +525,7 @@ export default {
     loginTitle: '登陆页面提示信息',
     pageTitle: '页面 Title',
     sysTitle: '系统名称',
+    theme_style: '主题风格设置',
   },
   system_config: {
     base_config: '基本配置',

frontend/src/i18n/zh-TW.js

@@ -522,6 +522,7 @@ export default {
     loginTitle: '登陸頁面提示信息',
     pageTitle: '頁面 Title',
     sysTitle: '系統名稱',
+    theme_style: '主題風格設置',
   },
   system_config: {
     base_config: '基本配置',

frontend/src/login/login.js

@@ -8,6 +8,7 @@ import i18n from "../i18n/i18n";
 import infoImg from "../assets/info.png";
 import loginLogo from "../assets/logo-dark-MeterSphere.svg";
 import logoHeader from "../assets/logo-light-MeterSphere.svg";
+import logo from "../assets/logo-default-MeterSphere.svg";
 
 Vue.config.productionTip = false;
 

frontend/vue.config.js

@@ -69,6 +69,23 @@ module.exports = {
     },
   },
   chainWebpack: config => {
+    // svg rule loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/assets/module'))
+      .end()
+
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/assets/module'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+
     // 报告模板打包成一个html
     config.plugin('html-planReport')
       .tap(args => {