chore: refactor the code of configuration; :star2:

iczer

2020-07-09 b5d17cd63be2457973a533cf26df3d42ebdbe7ea

chore: refactor the code of configuration; :star2:

 src/App.vue

@@ -33,21 +33,21 @@
    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) {

 src/components/setting/Setting.vue

@@ -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 @@
  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 @@
        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'])
  }
}

 src/components/transition/PageToggleTransition.vue

@@ -8,7 +8,7 @@
</template>

<script>
  import {animates} from '@/config/default'
  import {preset as animates} from '@/config/default/animate.config'

  export default {
    name: 'PageToggleTransition',

 src/config/config.js

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

 src/config/default/admin.config.js

New 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

 src/config/default/animate.config.js

New 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

 src/config/default/animates.js

File was deleted

 src/config/default/antd.config.js

New 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

 src/config/default/index.js

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

 src/config/default/setting.config.js

File was renamed from src/config/default/setting.js
@@ -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 @@
  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首页'},

 src/config/default/theme.js

File was deleted

 src/config/index.js

@@ -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

 src/layouts/AdminLayout.vue

@@ -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'"/>

 src/layouts/header/AdminHeader.vue

@@ -56,10 +56,10 @@
  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)

 src/store/modules/setting.js

@@ -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) {
@@ -22,9 +24,6 @@
    },
    setAnimate (state, animate) {
      state.animate = animate
    },
    setThemeColor (state, color) {
      state.themeColor = color
    },
    setWeekMode(state, weekMode) {
      state.weekMode = weekMode

 src/utils/colors.js

@@ -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 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 @@
  //菜单色系
  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}

 src/utils/themeUtil.js

@@ -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 @@
    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 @@
      'menu-dark-submenu-bg': menuColors[0],
      'layout-header-background': menuColors[1],
      'layout-trigger-background': menuColors[2],
      ...themeCfg[theme]
      ...ANTD.theme[theme.mode]
    }
  }
}