diff --git a/src/assets/img/header-profile.png b/src/assets/img/header-profile.png index 56403be28..7b7873856 100644 Binary files a/src/assets/img/header-profile.png and b/src/assets/img/header-profile.png differ diff --git a/src/layout/components/NavHeader/ViewSwitcher.vue b/src/layout/components/NavHeader/ViewSwitcher.vue index e1c03b27b..03b50d85f 100644 --- a/src/layout/components/NavHeader/ViewSwitcher.vue +++ b/src/layout/components/NavHeader/ViewSwitcher.vue @@ -96,7 +96,7 @@ export default { if (this.mode !== 'horizontal') { return false } - if (this.views.length < 2) { + if (this.views.length < 1) { return false } if (this.tipHasRead) { diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 701c40f78..9c3679575 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -1,6 +1,6 @@ import defaultSettings from '@/settings' import { getPublicSettings } from '@/api/settings' -import { writeNewStyle, initCustomStyle } from '@/utils/theme/index' +import { changeElementColor, changeThemeColors } 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: JSON.parse(localStorage.getItem('themeColor')) || {} + themeColors: JSON.parse(localStorage.getItem('themeColors')) || {} } const mutations = { @@ -22,17 +22,16 @@ const mutations = { } }, SET_PUBLIC_SETTINGS: (state, settings) => { - const color = settings?.INTERFACE?.theme_info?.colors state.publicSettings = settings - state.themeColor = color || {} + state.themeColors = settings?.INTERFACE?.theme_info?.colors || {} if (settings['XPACK_ENABLED']) { state.hasValidLicense = settings['XPACK_LICENSE_IS_VALID'] } }, setTheme(state, data) { - state.themeColor = data - localStorage.setItem('themeColor', JSON.stringify(data)) + state.themeColors = data + localStorage.setItem('themeColors', JSON.stringify(data)) } } @@ -45,7 +44,6 @@ 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']") @@ -61,10 +59,9 @@ const actions = { // 动态修改Title document.title = data['INTERFACE']['login_title'] } - initCustomStyle(color).then(() => { + const themeColors = data?.INTERFACE?.theme_info?.colors || {} + changeThemeColors(themeColors).then(() => { commit('SET_PUBLIC_SETTINGS', data) - changeMenuColor(color) - writeNewStyle(color) }) resolve(response) }).catch(error => { @@ -75,7 +72,7 @@ const actions = { changeThemeStyle({ commit }, color) { commit('setTheme', color) changeMenuColor(color) - writeNewStyle(color) + changeElementColor(color) } } diff --git a/public/theme/element-variables.scss b/src/styles/element-variables.scss similarity index 100% rename from public/theme/element-variables.scss rename to src/styles/element-variables.scss diff --git a/src/styles/var.scss b/src/styles/var.scss index e245695b1..753acb825 100644 --- a/src/styles/var.scss +++ b/src/styles/var.scss @@ -1,10 +1,9 @@ /* 参考根目录下的 element-variables */ /* 切记此处不修改配置，以element-variables为准，可适当增加自定义配置 */ /* 如果要修改element-variables，请执行npm run build_theme更新主题 */ -@import "../../public/theme/element-variables.scss"; +@import "./element-variables.scss"; :export { - name: "scss"; themeColor: $--color-primary; themeInfo: $--color-info; themeSuccess:$--color-success; diff --git a/src/utils/theme/color.js b/src/utils/theme/color.js index 3c8b56b76..d13f7f06b 100644 --- a/src/utils/theme/color.js +++ b/src/utils/theme/color.js @@ -3,16 +3,13 @@ import formula from './formula.json' import defaultThemeConfig from './default.js' import variables from '@/styles/var.scss' -export const defaultThemeColor = '#1ab394' -export const matchColor = {} - -export function generateColors(themeColor) { +export function generateColors(themeColors) { const colors = {} - let primaryColor = themeColor + let primaryColor = themeColors let subColor = defaultThemeConfig - if (typeof themeColor === 'object') { - primaryColor = themeColor['--color-primary'] || variables.themeColor - subColor = Object.keys(themeColor).length > 0 ? themeColor : defaultThemeConfig + if (typeof themeColors === 'object') { + primaryColor = themeColors['--color-primary'] || variables.themeColor + subColor = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig } for (const [key, value] of Object.entries(formula)) { @@ -44,7 +41,6 @@ export function generateColors(themeColor) { /* 将rgb颜色转成hex */ export function colorRgbToHex(rgb) { const [r, g, b] = rgb.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',') - return '#' + ((1 << 24) + (Number(r) << 16) + (Number(g) << 8) + Number(b)).toString(16).slice(1) } @@ -53,24 +49,22 @@ export function mix(color_1, color_2, weight) { function h2d(h) { return parseInt(h, 16) } weight = (typeof weight !== 'undefined') ? weight : 50 - let color = '#' - for (var i = 0; i <= 5; i += 2) { + for (let i = 0; i <= 5; i += 2) { const v1 = h2d(color_1.substr(i, 2)) const v2 = h2d(color_2.substr(i, 2)) let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0))) while (val.length < 2) { val = '0' + val } - color += val } return color } -export function changeMenuColor(themeColor) { +export function changeMenuColor(themeColors) { const elementStyle = document.documentElement.style - const colors = Object.keys(themeColor).length > 0 ? themeColor : defaultThemeConfig + const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig for (const key in colors) { const currentColor = colors[key] diff --git a/src/utils/theme/index.js b/src/utils/theme/index.js index 17beb90b0..3b4b182de 100644 --- a/src/utils/theme/index.js +++ b/src/utils/theme/index.js @@ -1,14 +1,14 @@ -import { generateColors, mix } from './color' +import { changeMenuColor, generateColors, mix } from './color' import axios from 'axios' import formula from './formula.json' import variables from '@/styles/var.scss' let originalStyle = '' -export function writeNewStyle(themeColor) { +export function changeElementColor(themeColors) { let colorsCssText = '' let cssText = originalStyle - const colors = generateColors(themeColor) + const colors = generateColors(themeColors) for (const [key, value] of Object.entries(colors)) { const blendColor = mix('ffffff', value.replace(/#/g, ''), 35) cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + `${value}`) @@ -35,24 +35,30 @@ export function writeNewStyle(themeColor) { styleTag.innerText = cssText + colorsCssText } -export function initCustomStyle() { +export function changeThemeColors(themeColors) { return new Promise((resolve) => { if (!originalStyle) { - axios.all([axios.get('/theme/element-ui.css'), axios.get('/theme/element-extra.css')]).then( + 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 = initCustomStyleTemplate(fileData + extraFileData) + originalStyle = replaceStyleColors(fileData + extraFileData) resolve() }) ) } else { resolve() } + }).then(() => { + changeMenuColor(themeColors) + changeElementColor(themeColors) }) } -export function initCustomStyleTemplate(data) { +export function replaceStyleColors(data) { const colors = generateColors(variables.themeColor) const colorMap = new Map() Object.keys(formula).forEach((key) => {