diff --git a/backend/src/main/java/io/metersphere/service/BaseDisplayService.java b/backend/src/main/java/io/metersphere/service/BaseDisplayService.java index 371135e434..c19eccce15 100644 --- a/backend/src/main/java/io/metersphere/service/BaseDisplayService.java +++ b/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 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": diff --git a/frontend/package.json b/frontend/package.json index 3db830fb4e..f40a646c66 100644 --- a/frontend/package.json +++ b/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": { diff --git a/frontend/src/assets/images/customize.svg b/frontend/src/assets/images/customize.svg new file mode 100644 index 0000000000..85edfd8b1b --- /dev/null +++ b/frontend/src/assets/images/customize.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/default.svg b/frontend/src/assets/images/default.svg new file mode 100644 index 0000000000..b3d3b8383e --- /dev/null +++ b/frontend/src/assets/images/default.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/light.svg b/frontend/src/assets/images/light.svg new file mode 100644 index 0000000000..ab7cc088fa --- /dev/null +++ b/frontend/src/assets/images/light.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/module/logo.svg b/frontend/src/assets/logo-default-MeterSphere.svg old mode 100644 new mode 100755 similarity index 87% rename from frontend/src/assets/module/logo.svg rename to frontend/src/assets/logo-default-MeterSphere.svg index 33f6f4432f..5b8f2cb7ce --- a/frontend/src/assets/module/logo.svg +++ b/frontend/src/assets/logo-default-MeterSphere.svg @@ -1,22 +1,22 @@ + viewBox="0 0 201.33 232.66" style="enable-background:new 0 0 201.33 232.66;" xml:space="preserve"> - + - - + + - + - diff --git a/frontend/src/assets/module/performance.svg b/frontend/src/assets/module/performance.svg index fb33d04c82..0d5854b15a 100644 --- a/frontend/src/assets/module/performance.svg +++ b/frontend/src/assets/module/performance.svg @@ -2,11 +2,8 @@ - - - diff --git a/frontend/src/assets/module/pushpin.svg b/frontend/src/assets/module/pushpin.svg index 774cf0fbb6..fd7ea884fa 100644 --- a/frontend/src/assets/module/pushpin.svg +++ b/frontend/src/assets/module/pushpin.svg @@ -1,7 +1,4 @@ - diff --git a/frontend/src/assets/module/report.svg b/frontend/src/assets/module/report.svg index aace84d0de..ab88846206 100644 --- a/frontend/src/assets/module/report.svg +++ b/frontend/src/assets/module/report.svg @@ -2,9 +2,6 @@ - diff --git a/frontend/src/assets/module/system.svg b/frontend/src/assets/module/system.svg index d26315d3a1..d28c18f64c 100644 --- a/frontend/src/assets/module/system.svg +++ b/frontend/src/assets/module/system.svg @@ -2,10 +2,6 @@ - - diff --git a/frontend/src/assets/module/ui.svg b/frontend/src/assets/module/ui.svg index 4151aa1b2a..7c6550aefe 100644 --- a/frontend/src/assets/module/ui.svg +++ b/frontend/src/assets/module/ui.svg @@ -2,9 +2,6 @@ - - - diff --git a/frontend/src/assets/module/workstation.svg b/frontend/src/assets/module/workstation.svg index f2bc222024..6080ac084e 100644 --- a/frontend/src/assets/module/workstation.svg +++ b/frontend/src/assets/module/workstation.svg @@ -3,12 +3,10 @@ - - + + diff --git a/frontend/src/business/App.vue b/frontend/src/business/App.vue index ac18e424ac..9fb477ee27 100644 --- a/frontend/src/business/App.vue +++ b/frontend/src/business/App.vue @@ -17,23 +17,21 @@ - - + +
- - - + +
-
-
-
+
+
@@ -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; +} diff --git a/frontend/src/business/components/common/svg/SvgIcon.vue b/frontend/src/business/components/common/svg/SvgIcon.vue new file mode 100644 index 0000000000..7f6e7ca9ee --- /dev/null +++ b/frontend/src/business/components/common/svg/SvgIcon.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/frontend/src/business/components/common/svg/index.js b/frontend/src/business/components/common/svg/index.js new file mode 100644 index 0000000000..8edb74e3cb --- /dev/null +++ b/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) diff --git a/frontend/src/business/components/layout/AsideFooter.vue b/frontend/src/business/components/layout/AsideFooter.vue index 6fcb68d272..e7b9835688 100644 --- a/frontend/src/business/components/layout/AsideFooter.vue +++ b/frontend/src/business/components/layout/AsideFooter.vue @@ -1,7 +1,6 @@