fix: 主题色修改

backend/pom.xml

@@ -541,6 +541,11 @@
                                         <include name="*.html"/>
                                     </fileset>
                                 </move>
+                                <copy todir="src/main/resources/static/css">
+                                    <fileset dir="../frontend/src/assets/theme">
+                                        <include name="index.css"/>
+                                    </fileset>
+                                </copy>
                             </target>
                         </configuration>
                         <goals>

backend/src/main/java/io/metersphere/commons/utils/ShiroUtils.java

@@ -42,6 +42,8 @@ public class ShiroUtils {
         //api-对外文档页面提供的查询接口
         filterChainDefinitionMap.put("/api/document/**", "anon");
 //        filterChainDefinitionMap.put("/document/**", "anon");
+        filterChainDefinitionMap.put("/system/theme", "anon");
+
     }
 
     public static void ignoreCsrfFilter(Map<String, String> filterChainDefinitionMap) {

frontend/src/business/App.vue

@@ -31,7 +31,7 @@ import MsView from "./components/common/router/View";
 import MsUser from "./components/common/head/HeaderUser";
 import MsHeaderOrgWs from "./components/common/head/HeaderOrgWs";
 import MsLanguageSwitch from "./components/common/head/LanguageSwitch";
-import {hasLicense, saveLocalStorage, setColor, setOriginColor} from "@/common/js/utils";
+import {hasLicense, saveLocalStorage, setColor, setDefaultTheme} from "@/common/js/utils";
 import {registerRequestHeaders} from "@/common/js/ajax";
 import {ORIGIN_COLOR} from "@/common/js/constants";
 
@@ -55,13 +55,13 @@ export default {
   created() {
     registerRequestHeaders();
     if (!hasLicense()) {
-      setOriginColor()
+      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);
+        setColor(this.color, this.color, this.color, this.color, this.color);
         this.$store.commit('setTheme', res.data);
       })
     }

frontend/src/business/components/xpack

@@ -1 +1 @@
-Subproject commit 4c33b9c3b12a83da6d9bd2740262c6c8baaab819
+Subproject commit b2571e06e8b211821409115cc2c4a7c52cbac1db

frontend/src/common/css/main.css

@@ -17,6 +17,7 @@ body {
   /*--color: #2c2a48;*/
   /*--color_shallow: #595591;*/
   --color: '';
+  --primary_color: '';
   --color_shallow: '';
   --count_number: '';
   --count_number_shallow: '';

frontend/src/common/js/constants.js

@@ -173,3 +173,4 @@ export const ORIGIN_COLOR = '#2c2a48';
 export const ORIGIN_COLOR_SHALLOW = '#595591';
 export const COUNT_NUMBER = '#6C317C';
 export const COUNT_NUMBER_SHALLOW = '#CDB9D2';
+export const PRIMARY_COLOR = '#783887';

frontend/src/common/js/utils.js

@@ -1,17 +1,17 @@
 import {
-    COUNT_NUMBER,
+  COUNT_NUMBER,
-    COUNT_NUMBER_SHALLOW,
+  COUNT_NUMBER_SHALLOW,
-    LicenseKey,
+  LicenseKey,
-    ORIGIN_COLOR,
+  ORIGIN_COLOR,
-    ORIGIN_COLOR_SHALLOW,
+  ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR,
-    PROJECT_ID,
+  PROJECT_ID,
-    REFRESH_SESSION_USER_URL,
+  REFRESH_SESSION_USER_URL,
-    ROLE_ADMIN,
+  ROLE_ADMIN,
-    ROLE_ORG_ADMIN,
+  ROLE_ORG_ADMIN,
-    ROLE_TEST_MANAGER,
+  ROLE_TEST_MANAGER,
-    ROLE_TEST_USER,
+  ROLE_TEST_USER,
-    ROLE_TEST_VIEWER,
+  ROLE_TEST_VIEWER,
-    TokenKey
+  TokenKey
 } from "./constants";
 import axios from "axios";
 import {jsPDF} from "jspdf";
@@ -354,19 +354,19 @@ export function objToStrMap(obj) {
     return strMap;
 }
 
-export function getColor() {
+export function setColor(a, b, c, d, e) {
-    return localStorage.getItem('color');
+    // 顶部菜单背景色
-}
-
-export function setColor(a, b, c, d) {
     document.body.style.setProperty('--color', a);
     document.body.style.setProperty('--color_shallow', b);
+    // 首页颜色
     document.body.style.setProperty('--count_number', c);
     document.body.style.setProperty('--count_number_shallow', d);
+    // 主颜色
+    document.body.style.setProperty('--primary_color', e);
 }
 
-export function setOriginColor() {
+export function setDefaultTheme() {
-    setColor(ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, COUNT_NUMBER, COUNT_NUMBER_SHALLOW);
+    setColor(ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, COUNT_NUMBER, COUNT_NUMBER_SHALLOW, PRIMARY_COLOR);
 }
 
 export function publicKeyEncrypt(input, publicKey) {

frontend/src/login/Login.vue

@@ -56,7 +56,7 @@
 
 <script>
 import {publicKeyEncrypt, saveLocalStorage} from '@/common/js/utils';
-import {DEFAULT_LANGUAGE} from "@/common/js/constants";
+import {DEFAULT_LANGUAGE, PRIMARY_COLOR} from "@/common/js/constants";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const display = requireComponent.keys().length > 0 ? requireComponent("./display/Display.vue") : {};
@@ -91,6 +91,10 @@ export default {
     }
   },
   beforeCreate() {
+    this.$get('/system/theme', res => {
+      this.color = res.data ? res.data : PRIMARY_COLOR;
+      document.body.style.setProperty('--primary_color', this.color);
+    })
     this.result = this.$get("/isLogin").then(response => {
 
       if (display.default !== undefined) {
@@ -230,7 +234,7 @@ export default {
   margin-top: 12px;
   margin-bottom: 75px;
   font-size: 14px;
-  color: #843697;
+  color: var(--primary_color);
   line-height: 14px;
   text-align: center;
 }
@@ -243,18 +247,18 @@ export default {
 
 .btn > .submit {
   border-radius: 70px;
-  border-color: #8B479B;
+  border-color: var(--primary_color);
-  background-color: #8B479B;
+  background-color: var(--primary_color);
 }
 
 .btn > .submit:hover {
-  border-color: rgba(139, 71, 155, 0.9);
+  border-color: var(--primary_color);
-  background-color: rgba(139, 71, 155, 0.9);
+  background-color: var(--primary_color);
 }
 
 .btn > .submit:active {
-  border-color: rgba(139, 71, 155, 0.8);
+  border-color: var(--primary_color);
-  background-color: rgba(139, 71, 155, 0.8);
+  background-color: var(--primary_color);
 }
 
 .el-form-item:first-child {
@@ -262,13 +266,13 @@ export default {
 }
 
 /deep/ .el-radio__input.is-checked .el-radio__inner {
-  background-color: #783887;
+  background-color: var(--primary_color);
-  background: #783887;
+  background: var(--primary_color);
-  border-color: #783887;
+  border-color: var(--primary_color);
 }
 
 /deep/ .el-radio__input.is-checked + .el-radio__label {
-  color: #783887;
+  color: var(--primary_color);
 }
 
 /deep/ .el-input__inner {
@@ -284,7 +288,7 @@ export default {
 }
 
 /deep/ .el-input__inner:focus {
-  border: 1px solid #783887 !important;
+  border: 1px solid var(--primary_color) !important;
 }
 
 .divider {