From d8cf5ad5535b20ee8567f9a892a0408f7b6dcd04 Mon Sep 17 00:00:00 2001 From: fit2bot <68588906+fit2bot@users.noreply.github.com> Date: Thu, 7 Jul 2022 18:34:15 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E5=90=8D=E5=AD=97=20(#1882)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * perf: 修改一些名字 * perf: 修改 colors Co-authored-by: ibuler --- src/assets/img/header-profile.png | Bin 1570 -> 1263 bytes .../components/NavHeader/ViewSwitcher.vue | 2 +- src/store/modules/settings.js | 19 +++++++-------- .../styles}/element-variables.scss | 0 src/styles/var.scss | 3 +-- src/utils/theme/color.js | 22 +++++++----------- src/utils/theme/index.js | 20 ++++++++++------ 7 files changed, 31 insertions(+), 35 deletions(-) rename {public/theme => src/styles}/element-variables.scss (100%) diff --git a/src/assets/img/header-profile.png b/src/assets/img/header-profile.png index 56403be28001b7707526dad5d272fd89f67f4efa..7b7873856850f07b45c95bb36f0df38fd38cb4ac 100644 GIT binary patch delta 1244 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 Ef?D$-ZvX%Q 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) => {