blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -33,21 +33,21 @@ export default {
lang(val) {
this.setLanguage(val)
},
theme(val) {
'theme.mode': function(val) {
let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
themeUtil.changeThemeColor(this.themeColor, val).then(() => {
themeUtil.changeThemeColor(this.theme.color, val).then(() => {
setTimeout(closeMessage, 1000)
})
},
themeColor(val) {
'theme.color': function(val) {
let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
themeUtil.changeThemeColor(val, this.theme).then(() => {
themeUtil.changeThemeColor(val, this.theme.mode).then(() => {
setTimeout(closeMessage, 1000)
})
}
},
computed: {
...mapState('setting', ['theme', 'themeColor', 'weekMode', 'lang'])
...mapState('setting', ['theme', 'weekMode', 'lang'])
},
methods: {
setWeekModeTheme(weekMode) {

53
src/components/setting/Setting.vue
View File

@ -1,20 +1,29 @@
<template>
<div class="side-setting">
<setting-item :title="$t('theme.title')">
<img-checkbox-group @change="values => setTheme(values[0])" :default-values="[theme]">
<img-checkbox-group
@change="values => setTheme({...theme, mode: values[0]})"
:default-values="[theme.mode]"
>
<img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
<img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
<img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
</img-checkbox-group>
</setting-item>
<setting-item :title="$t('theme.color')">
<color-checkbox-group @change="onColorChange" :defaultValues="themeColorIndex" :multiple="false">
<color-checkbox v-for="(color, index) in colors" :key="index" :color="color" :value="index" />
<color-checkbox-group
@change="(values, colors) => setTheme({...theme, color: colors[0]})"
:defaultValues="[palettes.indexOf(theme.color)]" :multiple="false"
>
<color-checkbox v-for="(color, index) in palettes" :key="index" :color="color" :value="index" />
</color-checkbox-group>
</setting-item>
<a-divider/>
<setting-item :title="$t('navigate.title')">
<img-checkbox-group @change="values => setLayout(values[0])" :default-values="[layout]">
<img-checkbox-group
@change="values => setLayout(values[0])"
:default-values="[layout]"
>
<img-checkbox :title="$t('navigate.side')" img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" value="side"/>
<img-checkbox :title="$t('navigate.head')" img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
</img-checkbox-group>
@ -61,8 +70,8 @@
<a-list-item>
{{$t('animate.effect')}}
<a-select
v-model="animate"
@change="val => setAnimation(val)"
:value="animate.name"
@change="val => setAnimate({...animate, name: val})"
class="select-item" size="small" slot="actions"
>
<a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{item.alias}}</a-select-option>
@ -71,8 +80,8 @@
<a-list-item>
{{$t('animate.direction')}}
<a-select
v-model="direction"
@change="val => setAnimation(this.animate, val)"
:value="animate.direction"
@change="val => setAnimate({...animate, direction: val})"
class="select-item" size="small" slot="actions"
>
<a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{item}}</a-select-option>
@ -99,26 +108,20 @@ export default {
components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem},
data() {
return {
animate: this.$store.state.setting.animate.name,
direction: this.$store.state.setting.animate.direction,
colors: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
}
},
computed: {
directions() {
return this.animates.find(item => item.name == this.animate).directions
return this.animates.find(item => item.name == this.animate.name).directions
},
themeColorIndex() {
return [this.colors.indexOf(this.themeColor)]
},
...mapState('setting', ['theme', 'themeColor', 'layout', 'animates', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting'])
...mapState('setting', ['theme', 'layout', 'animate', 'animates', 'palettes', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting'])
},
watch: {
'animate.name': function(val) {
this.setAnimate({name: val, direction: this.directions[0]})
}
},
methods: {
onColorChange (values, colors) {
if (colors.length > 0) {
this.setThemeColor(colors[0])
}
},
copyCode () {
let clipboard = new Clipboard('#copyBtn')
const _this = this
@ -127,13 +130,7 @@ export default {
clipboard.destroy()
})
},
setAnimation(animate, direction) {
if (direction == undefined) {
this.direction = this.directions[0]
}
this.setAnimate({name: this.animate, direction: this.direction})
},
...mapMutations('setting', ['setTheme', 'setThemeColor', 'setLayout', 'setMultiPage', 'setWeekMode',
...mapMutations('setting', ['setTheme', 'setLayout', 'setMultiPage', 'setWeekMode',
'setFixedSideBar', 'setFixedHeader', 'setAnimate', 'setHideSetting'])
}
}

2
src/components/transition/PageToggleTransition.vue
View File

@ -8,7 +8,7 @@
</template>
<script>
import {animates} from '@/config/default'
import {preset as animates} from '@/config/default/animate.config'
export default {
name: 'PageToggleTransition',

10
src/config/config.js
View File

@ -1,5 +1,11 @@
// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
module.exports = {
themeColor: '#13c2c2',
theme: 'night'
theme: {
color: '#13c2c2',
mode: 'dark',
},
animate: {
name: 'rotate',
direction: 'downLeft'
}
}

18
src/config/default/admin.config.js Normal file
View File

@ -0,0 +1,18 @@
// admin 配置
const ADMIN = {
palettes: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
animates: require('./animate.config').preset,
theme: {
mode: {
DARK: 'dark',
LIGHT: 'light',
NIGHT: 'night'
}
},
layout: {
SIDE: 'side',
HEAD: 'head'
}
}
module.exports = ADMIN

21
src/config/default/animate.config.js Normal file
View File

@ -0,0 +1,21 @@
const direct_s = ['left', 'right']
const direct_1 = ['left', 'right', 'down', 'up']
const direct_1_b = ['downBig', 'upBig', 'leftBig', 'rightBig']
const direct_2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft']
const direct_3 = ['downLeft', 'upRight', 'downRight', 'upLeft']
// animate.css 配置
const ANIMATE = {
preset: [ //预设动画配置
{name: 'back', alias: '渐近', directions: direct_1},
{name: 'bounce', alias: '弹跳', directions: direct_1.concat('default')},
{name: 'fade', alias: '淡化', directions: direct_1.concat(direct_1_b).concat(direct_2).concat('default')},
{name: 'flip', alias: '翻转', directions: ['x', 'y']},
{name: 'lightSpeed', alias: '光速', directions: direct_s},
{name: 'rotate', alias: '旋转', directions: direct_3.concat('default')},
{name: 'roll', alias: '翻滚', directions: ['default']},
{name: 'zoom', alias: '缩放', directions: direct_1.concat('default')},
{name: 'slide', alias: '滑动', directions: direct_1},
]
}
module.exports = ANIMATE

17
src/config/default/animates.js
View File

@ -1,17 +0,0 @@
const direct_s = ['left', 'right']
const direct_1 = ['left', 'right', 'down', 'up']
const direct_1_b = ['downBig', 'upBig', 'leftBig', 'rightBig']
const direct_2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft']
const direct_3 = ['downLeft', 'upRight', 'downRight', 'upLeft']
module.exports = [
{name: 'back', alias: '渐近', directions: direct_1},
{name: 'bounce', alias: '弹跳', directions: direct_1.concat('default')},
{name: 'fade', alias: '淡化', directions: direct_1.concat(direct_1_b).concat(direct_2).concat('default')},
{name: 'flip', alias: '翻转', directions: ['x', 'y']},
{name: 'lightSpeed', alias: '光速', directions: direct_s},
{name: 'rotate', alias: '旋转', directions: direct_3.concat('default')},
{name: 'roll', alias: '翻滚', directions: ['default']},
{name: 'zoom', alias: '缩放', directions: direct_1.concat('default')},
{name: 'slide', alias: '滑动', directions: direct_1},
]

78
src/config/default/antd.config.js Normal file
View File

@ -0,0 +1,78 @@
// antd 配置
const ANTD = {
primary: {
color: '#1890ff',
light: {
menuColors: ['#000c17', '#001529', '#002140']
},
dark: {
menuColors: ['#000c17', '#001529', '#002140']
},
night: {
menuColors: ['#151515', '#1f1f1f', '#1e1e1e'],
}
},
theme: {
dark: {
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff'
},
light: {
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
},
night: {
'layout-body-background': '#000',
'body-background': '#141414',
'component-background': '#141414',
'heading-color': 'rgba(255, 255, 255, 0.85)',
'text-color': 'rgba(255, 255, 255, 0.85)',
'text-color-inverse': '#141414',
'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
'shadow-color': 'rgba(255, 255, 255, 0.15)',
'border-color-split': '#303030',
'background-color-light': '#ffffff0a',
'background-color-base': '#2a2a2a',
'table-selected-row-bg': '#ffffff0a',
'checkbox-check-color': '#141414',
'disabled-color': 'rgba(255, 255, 255, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#141414',
}
}
}
module.exports = ANTD

9
src/config/default/index.js
View File

@ -1,5 +1,6 @@
const animates = require('./animates')
const setting = require('./setting')
const theme = require('./theme')
const ANTD = require('./antd.config')
const ADMIN = require('./admin.config')
const ANIMATE = require('./animate.config')
const setting = require('./setting.config')
module.exports = {setting, animates, theme}
module.exports = {ANTD, ADMIN, ANIMATE, setting}

10
src/config/default/setting.js → src/config/default/setting.config.js
View File

@ -1,8 +1,10 @@
// 此配置为系统默认设置，需修改的设置项，在src/config/config.js中添加修改项即可。也可直接在此文件中修改。
module.exports = {
lang: 'CN', //语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
themeColor: '#1890ff', //主题色
theme: 'dark', //主题模式，可选 dark 和 light，用于设置导航栏是亮色还是暗色
theme: { //主题
color: '#1890ff', //主题色
mode: 'dark', //主题模式 可选 dark、 light 和 night
},
layout: 'side', //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
fixedHeader: false, //固定头部状态栏，true:固定，false:不固定
fixedSideBar: true, //固定侧边栏，true:固定，false:不固定
@ -12,8 +14,8 @@ module.exports = {
systemName: 'Vue Antd Admin', //系统名称
copyright: '2018 ICZER 工作室出品', //copyright
animate: { //动画设置
name: 'bounce', //动画效果，支持的动画效果可参考 ./animates.js
direction: 'left' //动画方向，切换页面时动画的方向，参考 ./animates.js
name: 'bounce', //动画效果，支持的动画效果可参考 ./animate.config.js
direction: 'left' //动画方向，切换页面时动画的方向，参考 ./animate.config.js
},
footerLinks: [ //页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
{link: 'https://pro.ant.design', name: 'Pro首页'},

73
src/config/default/theme.js
View File

@ -1,73 +0,0 @@
// 主题模式
const mode = {
LIGHT: 'light',
DARK: 'dark',
NIGHT: 'night',
}
// 亮色模式
const light = {
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
}
// 暗色模式
const dark = {
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff'
}
// 黑夜模式
const night = {
'layout-body-background': '#000',
'body-background': '#141414',
'component-background': '#141414',
'heading-color': 'rgba(255, 255, 255, 0.85)',
'text-color': 'rgba(255, 255, 255, 0.85)',
'text-color-inverse': '#141414',
'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
'shadow-color': 'rgba(255, 255, 255, 0.15)',
'border-color-split': '#303030',
'background-color-light': '#ffffff0a',
'background-color-base': '#2a2a2a',
'table-selected-row-bg': '#ffffff0a',
'checkbox-check-color': '#141414',
'disabled-color': 'rgba(255, 255, 255, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#141414',
}
module.exports = {light, dark, night, mode}

2
src/config/index.js
View File

@ -1,6 +1,6 @@
const deepmerge = require('deepmerge')
const _config = require('./config')
const setting = require('./default').setting
const {setting} = require('./default')
const config = deepmerge(setting, _config)
module.exports = config

4
src/layouts/AdminLayout.vue
View File

@ -1,9 +1,9 @@
<template>
<a-layout :class="['admin-layout', fixedSideBar ? 'fixed-side-bar' : '']">
<drawer v-if="isMobile" v-model="collapsed">
<side-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
<side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
</drawer>
<side-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
<side-menu :theme="theme.mode" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
<drawer v-if="!hideSetting" v-model="showSetting" placement="right">
<div class="setting" slot="handler">
<a-icon :type="showSetting ? 'close' : 'setting'"/>

4
src/layouts/header/AdminHeader.vue
View File

@ -56,10 +56,10 @@ export default {
computed: {
...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
headerTheme () {
if (this.layout == 'side' && this.theme == 'dark' && !this.isMobile) {
if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
return 'light'
}
return this.theme
return this.theme.mode
},
langAlias() {
let lang = this.langList.find(item => item.key == this.lang)

9
src/store/modules/setting.js
View File

@ -1,11 +1,13 @@
import config from '@/config'
import {ADMIN} from '@/config/default'
export default {
namespaced: true,
state: {
isMobile: false,
animates: require('@/config/default/animates'),
animates: ADMIN.animates,
palettes: ADMIN.palettes,
routesI18n: {},
...config,
routesI18n: {}
},
mutations: {
setDevice (state, isMobile) {
@ -23,9 +25,6 @@ export default {
setAnimate (state, animate) {
state.animate = animate
},
setThemeColor (state, color) {
state.themeColor = color
},
setWeekMode(state, weekMode) {
state.weekMode = weekMode
},

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]
}
}
}