perf: 优化修改主题相关方法传参

src/store/modules/settings.js

@@ -1,7 +1,7 @@
 import defaultSettings from '@/settings'
 import { getPublicSettings } from '@/api/settings'
-import { writeNewStyle, getIndexStyle } from '@/utils/theme/index'
-import { defaultThemeColor } from '@/utils/theme/color'
+import { writeNewStyle, initCustomStyle } from '@/utils/theme/index'
+import { changeMenuColor } from '@/utils/theme/color'
 
 const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings
 
@@ -12,7 +12,7 @@ const state = {
   tagsView: tagsView,
   publicSettings: null,
   hasValidLicense: false,
-  themeColor: localStorage.getItem('themeColor') || defaultThemeColor
+  themeColor: JSON.parse(localStorage.getItem('themeColor')) || {}
 }
 
 const mutations = {
@@ -22,9 +22,9 @@ const mutations = {
     }
   },
   SET_PUBLIC_SETTINGS: (state, settings) => {
-    const color = settings?.INTERFACE?.theme_info?.colors?.['--color-primary']
+    const color = settings?.INTERFACE?.theme_info?.colors
     state.publicSettings = settings
-    state.themeColor = color || defaultThemeColor
+    state.themeColor = color || {}
 
     if (settings['XPACK_ENABLED']) {
       state.hasValidLicense = settings['XPACK_LICENSE_IS_VALID']
@@ -32,7 +32,7 @@ const mutations = {
   },
   setTheme(state, data) {
     state.themeColor = data
-    localStorage.setItem('themeColor', state.themeColor)
+    localStorage.setItem('themeColor', JSON.stringify(data))
   }
 }
 
@@ -45,6 +45,7 @@ const actions = {
     return new Promise((resolve, reject) => {
       getPublicSettings(isOpen).then(response => {
         const data = response || {}
+        const color = data?.INTERFACE?.theme_info?.colors || {}
         if (isOpen) {
           const faviconURL = data['INTERFACE']?.favicon
           let link = document.querySelector("link[rel*='icon']")
@@ -60,9 +61,10 @@ const actions = {
           // 动态修改Title
           document.title = data['INTERFACE']['login_title']
         }
-        getIndexStyle().then(() => {
+        initCustomStyle(color).then(() => {
           commit('SET_PUBLIC_SETTINGS', data)
-          writeNewStyle(state.themeColor)
+          changeMenuColor(color)
+          writeNewStyle(color)
         })
         resolve(response)
       }).catch(error => {
@@ -72,6 +74,7 @@ const actions = {
   },
   changeThemeStyle({ commit }, color) {
     commit('setTheme', color)
+    changeMenuColor(color)
     writeNewStyle(color)
   }
 }

src/utils/theme/color.js

@@ -1,36 +1,40 @@
 import color from 'css-color-function'
 import formula from './formula.json'
 import defaultThemeConfig from './default.js'
-import store from '@/store/index.js'
+import variables from '@/styles/var.scss'
 
 export const defaultThemeColor = '#1ab394'
 export const matchColor = {}
 
-export function generateColors(primary) {
+export function generateColors(themeColor) {
   const colors = {}
-  const themeInfo = store?.getters?.publicSettings?.INTERFACE?.theme_info?.colors || {}
-  const otherColor = Object.keys(themeInfo).length > 0 ? themeInfo : defaultThemeConfig
+  let primaryColor = themeColor
+  let subColor = defaultThemeConfig
+  if (typeof themeColor === 'object') {
+    primaryColor = themeColor['--color-primary'] || variables.themeColor
+    subColor = Object.keys(themeColor).length > 0 ? themeColor : defaultThemeConfig
+  }
 
   for (const [key, value] of Object.entries(formula)) {
     let replaceColor
     if (value.includes('primary')) {
-      replaceColor = value.replace(/primary/g, primary)
+      replaceColor = value.replace(/primary/g, primaryColor)
     }
     if (value.includes('success')) {
-      replaceColor = value.replace(/success/g, otherColor['--color-success'])
+      replaceColor = value.replace(/success/g, subColor['--color-success'])
     }
     if (value.includes('info')) {
-      replaceColor = value.replace(/info/g, otherColor['--color-info'])
+      replaceColor = value.replace(/info/g, subColor['--color-info'])
     }
     if (value.includes('warning')) {
-      replaceColor = value.replace(/warning/g, otherColor['--color-warning'])
+      replaceColor = value.replace(/warning/g, subColor['--color-warning'])
     }
     if (value.includes('danger')) {
-      replaceColor = value.replace(/danger/g, otherColor['--color-danger'])
+      replaceColor = value.replace(/danger/g, subColor['--color-danger'])
     }
     if (replaceColor) {
-      const c = color.convert(replaceColor)
-      colors[key] = c.indexOf('rgba') > -1 ? c : colorRgbToHex(c)
+      const convertColor = color.convert(replaceColor)
+      colors[key] = convertColor.indexOf('rgba') > -1 ? convertColor : colorRgbToHex(convertColor)
     }
   }
 
@@ -64,10 +68,9 @@ export function mix(color_1, color_2, weight) {
   return color
 }
 
-export function changeSidebarColor(primary) {
+export function changeMenuColor(themeColor) {
   const elementStyle = document.documentElement.style
-  const themeInfo = store?.getters?.publicSettings?.INTERFACE?.theme_info?.colors || {}
-  const colors = Object.keys(themeInfo).length > 0 ? themeInfo : defaultThemeConfig
+  const colors = Object.keys(themeColor).length > 0 ? themeColor : defaultThemeConfig
 
   for (const key in colors) {
     const currentColor = colors[key]

src/utils/theme/index.js

@@ -1,4 +1,4 @@
-import { generateColors, changeSidebarColor, mix } from './color'
+import { generateColors, mix } from './color'
 import axios from 'axios'
 import formula from './formula.json'
 import variables from '@/styles/var.scss'
@@ -6,7 +6,6 @@ import variables from '@/styles/var.scss'
 let originalStyle = ''
 
 export function writeNewStyle(themeColor) {
-  changeSidebarColor(themeColor)
   let colorsCssText = ''
   let cssText = originalStyle
   const colors = generateColors(themeColor)
@@ -36,14 +35,14 @@ export function writeNewStyle(themeColor) {
   styleTag.innerText = cssText + colorsCssText
 }
 
-export function getIndexStyle() {
+export function initCustomStyle() {
   return new Promise((resolve) => {
     if (!originalStyle) {
       axios.all([axios.get('/theme/element-ui.css'), axios.get('/theme/element-extra.css')]).then(
         axios.spread((file, extraFile) => {
           const fileData = file.data
           const extraFileData = extraFile.data.replace(/[\r\n]/g, '')
-          originalStyle = getStyleTemplate(fileData + extraFileData)
+          originalStyle = initCustomStyleTemplate(fileData + extraFileData)
           resolve()
         })
       )
@@ -53,7 +52,7 @@ export function getIndexStyle() {
   })
 }
 
-export function getStyleTemplate(data) {
+export function initCustomStyleTemplate(data) {
   const colors = generateColors(variables.themeColor)
   const colorMap = new Map()
   Object.keys(formula).forEach((key) => {

src/views/settings/Interface.vue

@@ -57,12 +57,7 @@ export default {
           helpText: this.$t('xpack.loginTitleTip')
         },
         theme: {
-          on: {
-            // change: ([value]) => {
-            //   const color = matchColor[value] || defaultThemeColor
-            //   this.$store.dispatch('settings/changeThemeStyle', color)
-            // }
-          }
+          label: this.$t('notifications.Subject')
         },
         login_image: {
           component: UploadField,