caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: refactor the code of configuration; 🌟

Browse Source
This commit is contained in:
iczer
2020-07-09 17:42:59 +08:00
parent 44a99a2987
commit b5d17cd63b
17 changed files with 192 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/utils/colors.js
View File

@@ -1,10 +1,8 @@
const varyColor = require('webpack-theme-color-replacer/client/varyColor')
const generate = require('@ant-design/colors/lib/generate').default
const {theme} = require('../config/default')
const themeMode = theme.mode
const {ADMIN, ANTD} = require('../config/default')
// ant design vue 默认主题色
const antdPrimary = '#1890ff'
const themeMode = ADMIN.theme.mode
// 获取 ant design 色系
function getAntdColors(color, mode) {
@@ -15,9 +13,9 @@ function getAntdColors(color, mode) {
// 获取菜单色系
function getMenuColors(color, mode) {
if (mode == themeMode.NIGHT) {
return ['#151515', '#1f1f1f', '#1e1e1e']
} else if (color == antdPrimary) {
return ['#000c17', '#001529', '#002140']
return ANTD.primary.night.menuColors
} else if (color == ANTD.primary.color) {
return ANTD.primary.dark.menuColors
} else {
return [varyColor.darken(color, 0.93), varyColor.darken(color, 0.83), varyColor.darken(color, 0.73)]
}
@@ -33,12 +31,12 @@ function getThemeToggleColors(color, mode) {
//菜单色系
const menuColors = getMenuColors(color, mode)
//内容色系（包含背景色、文字颜色等）
const themeCfg = theme[mode]
const themeCfg = ANTD.theme[mode]
let contentColors = Object.keys(themeCfg)
.map(key => themeCfg[key])
.map(color => isHex(color) ? color : toNum3(color).join(','))
// 内容色去重
// contentColors = [...new Set(contentColors)]
contentColors = [...new Set(contentColors)]
// rgb 格式的主题色
let rgbColors = [toNum3(primary).join(',')]
return {primary, mainColors, subColors, menuColors, contentColors, rgbColors}

18
src/utils/themeUtil.js
View File

@@ -1,13 +1,13 @@
const client = require('webpack-theme-color-replacer/client')
const {theme, themeColor} = require('../config')
const {theme} = require('../config')
const {getMenuColors, getAntdColors, getThemeToggleColors} = require('../utils/colors')
const {theme: themeCfg} = require('../config/default')
const {ANTD} = require('../config/default')
module.exports = {
getThemeColors(color, $theme) {
const _color = color || themeColor
const _theme = $theme || theme
const replaceColors = getThemeToggleColors(_color, _theme)
const _color = color || theme.color
const mode = $theme || theme.mode
const replaceColors = getThemeToggleColors(_color, mode)
const themeColors = [
...replaceColors.mainColors,
...replaceColors.subColors,
@@ -22,9 +22,9 @@ module.exports = {
return promise
},
modifyVars(color) {
let _color = color || themeColor
const palettes = getAntdColors(_color, theme)
const menuColors = getMenuColors(_color, theme)
let _color = color || theme.color
const palettes = getAntdColors(_color, theme.mode)
const menuColors = getMenuColors(_color, theme.mode)
const primary = palettes[5]
return {
'primary-color': primary,
@@ -45,7 +45,7 @@ module.exports = {
'menu-dark-submenu-bg': menuColors[0],
'layout-header-background': menuColors[1],
'layout-trigger-background': menuColors[2],
...themeCfg[theme]
...ANTD.theme[theme.mode]
}
}
}