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

This commit is contained in:
fit2-zhao 2022-07-04 15:11:41 +08:00 committed by fit2-zhao
parent 7250932e7c
commit 1e92abad39
33 changed files with 345 additions and 119 deletions

View File

@ -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":

View File

@ -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": {

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -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 "/>
<g id="XMLID_40_">
<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 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

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -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

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -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"/>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -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>
<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 "/>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -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"/>

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -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>

Before

Width:  |  Height:  |  Size: 997 B

After

Width:  |  Height:  |  Size: 936 B

View File

@ -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"/>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 970 B

View File

@ -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

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -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"/>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -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

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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">
.st0{fill:#FFFFFF;}
</style>
<path class="st0"
<path
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>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

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

Before

Width:  |  Height:  |  Size: 847 B

After

Width:  |  Height:  |  Size: 781 B

View File

@ -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-menus :color="color" :isCollapse="isCollapse"/>
<ms-aside-header :sideTheme="sideTheme" :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"/>-->
<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)">
<svg-icon iconClass="pushpin" class-name="ms-menu-pin" v-if="isFixed" @click.native="fixedChange(false)"/>
<svg-icon iconClass="unpin" class-name="ms-menu-pin" v-else @click.native="fixedChange(true)"/>
</div>
</el-aside>
<el-main class="container">
<div :class="isFixed ? 'ms-left-fixed': 'left'">
</div>
<div :class="isFixed ? 'ms-right-fixed': 'ms-main-view right'">
<div :class="isFixed ? 'ms-left-fixed': 'ms-aside-left'"/>
<div :class="isFixed ? 'ms-right-fixed': 'ms-main-view ms-aside-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>

View File

@ -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>

View File

@ -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)

View File

@ -1,7 +1,6 @@
<template>
<el-menu menu-trigger="click"
class="ms-menu-vertical ms-menu ms-footer" :collapse="isCollapse"
:background-color="color"
class="ms-menu-vertical ms-menu-title ms-footer" :collapse="isCollapse"
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;

View File

@ -1,11 +1,8 @@
<template>
<el-menu
class="ms-menu-vertical ms-menu horizontal-collapse-transition"
text-color="#F2F2F2"
active-text-color="#fff"
class="ms-menu-vertical ms-menu-title horizontal-collapse-transition"
: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 {

View File

@ -1,44 +1,43 @@
<template>
<el-menu menu-trigger="click"
class="ms-menu-vertical ms-menu ms-menu-title horizontal-collapse-transition"
text-color="#F2F2F2"
active-text-color="#fff"
class="ms-menu-vertical horizontal-collapse-transition"
:class="sideTheme === 'theme-light'? 'ms-menu-active' : 'ms-menu-def-active'"
: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;
}
.ms-menu-title {
align-items: center;
color: var(--font_color) !important;
}
/deep/ .el-menu-item {
@ -198,19 +192,24 @@ export default {
}
.ms-menu-img {
margin: 0px;
width: 22px;
border: 0;
display: inline-block;
box-sizing: border-box;
background-repeat: no-repeat;
background-position: 50% center;
color: var(--font_color) !important;
fill: currentColor;
font-size: 22px;
}
.ms-menu-vertical > li.is-active {
background: var(--color) !important;
.ms-menu-active {
}
.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 {

View File

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

View File

@ -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);

View File

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

View File

@ -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",

View File

@ -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);
}
}

View File

@ -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',

View File

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

View File

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

View File

@ -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;

View File

@ -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 => {