新增: 全局色弱模式；

iczer

2020-06-20 3d568c6caa85924093ec5da8cf8ff667dd512f74

新增: 全局色弱模式；

 src/App.vue

@@ -6,6 +6,7 @@

<script>
import enquireScreen from './utils/device'
import {mapState} from 'vuex'

export default {
  name: 'App',
@@ -14,6 +15,26 @@
    enquireScreen(isMobile => {
      _this.$store.commit('setting/setDevice', isMobile)
    })
  },
  mounted() {
   this.setWeekModeTheme(this.weekMode)
  },
  watch: {
    weekMode(val) {
      this.setWeekModeTheme(val)
    }
  },
  computed: {
    ...mapState('setting', ['weekMode'])
  },
  methods: {
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add('week-mode')
      } else {
        document.body.classList.remove('week-mode')
      }
    }
  }
}
</script>

 src/components/setting/Setting.vue

@@ -42,7 +42,7 @@
      <a-list :split="false">
        <a-list-item>
          色弱模式
          <a-switch slot="actions" size="small" />
          <a-switch :checked="weekMode" slot="actions" size="small" @change="setWeekMode" />
        </a-list-item>
        <a-list-item>
          显示抽屉按钮
@@ -110,7 +110,7 @@
    directions() {
      return this.animates.find(item => item.name == this.animate).directions
    },
    ...mapState('setting', ['animates', 'multiPage'])
    ...mapState('setting', ['animates', 'multiPage', 'weekMode'])
  },
  methods: {
    onColorChange (values, colors) {
@@ -140,6 +140,9 @@
    setMultiPage (checked) {
      this.$store.commit('setting/setMultiPage', checked)
    },
    setWeekMode(checked) {
      this.$store.commit('setting/setWeekMode', checked)
    },
    setAnimate() {
      this.direction = this.directions[0]
        let animate = {

 src/components/transition/PageToggleTransition.vue

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

<script>
  import {animates} from '@/config'
  import animates from '@/config/animates'

  export default {
    name: 'PageToggleTransition',
@@ -16,7 +16,7 @@
      animate: {
        type: String,
        validator(value) {
          return animates.find(item => item.name == value) != -1
          return animates.findIndex(item => item.name == value) != -1
        },
        default: 'bounce'
      },

 src/config/index.js

@@ -1,7 +1,16 @@
// 系统配置
module.exports = {
  themeColor: '#1890ff',
  animates: require('./animates'),
  theme: 'dark',
  layout: 'side',
  weekMode: false,
  multiPage: false,
  systemName: 'Vue Antd Admin',
  copyright: '2018 ICZER 工作室出品',
  animate: {
    name: 'bounce',
    direction: 'left'
  },
  footerLinks: [
    {link: 'https://pro.ant.design', name: 'Pro首页'},
    {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},

 src/layouts/GlobalLayout.vue

@@ -18,7 +18,7 @@
        </div>
      </a-layout-content>
      <a-layout-footer style="padding: 0px">
        <global-footer :link-list="linkList" :copyright="copyright" />
        <global-footer :link-list="footerLinks" :copyright="copyright" />
      </a-layout-footer>
    </a-layout>
  </a-layout>

 src/layouts/HeaderNotice.vue

@@ -1,7 +1,7 @@
<template>
  <a-dropdown :trigger="['click']">
    <template slot="overlay">
      <a-spin :spinning="loadding">
    <div slot="overlay">
      <a-spin :spinning="loading">
        <a-tabs :tabBarStyle="{textAlign: 'center'}" :style="{backgroundColor: 'white', width: '297px'}">
          <a-tab-pane tab="通知" key="1" :style="{padding: '0 24px'}">
            <a-list>
@@ -30,7 +30,7 @@
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </template>
    </div>
    <span @click="fetchNotice" class="header-notice">
      <a-badge count="12">
        <a-icon :class="['header-notice-icon', theme]" type="bell" />
@@ -40,34 +40,36 @@
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'HeaderNotice',
  data () {
    return {
      loadding: false
      loading: false
    }
  },
  computed: {
    theme () {
      return this.$store.state.setting.layout === 'side' ? 'light' : this.$store.state.setting.theme
    }
    ...mapState('setting', ['layout', 'theme']),
    theme() {
      return this.layout == 'side' ? 'light' : this.theme
    },
  },
  methods: {
    fetchNotice () {
      if (this.loadding) {
        this.loadding = false
      if (this.loading) {
        this.loading = false
        return
      }
      this.loadding = true
      setTimeout(() => {
        this.loadding = false
      }, 2000)
      }, 1000)
    }
  }
}
</script>

<style lang="less">
<style lang="less" scoped>
  .header-notice{
    display: inline-block;
    transition: all 0.3s;

 src/layouts/HeaderlAvatar.vue

@@ -1,10 +1,10 @@
<template>
  <a-dropdown style="display: inline-block; height: 100%; vertical-align: initial" >
  <a-dropdown class="header-avatar">
    <span style="cursor: pointer">
      <a-avatar class="avatar" size="small" shape="circle" :src="currUser.avatar"/>
      <span>{{currUser.name}}</span>
      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
      <span>{{user.name}}</span>
    </span>
    <a-menu style="width: 150px" slot="overlay">
    <a-menu :class="['avatar-menu']" slot="overlay">
      <a-menu-item>
        <a-icon type="user" />
        <span>个人中心</span>
@@ -25,21 +25,30 @@
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'HeaderAvatar',
  computed: {
    currUser () {
      return this.$store.state.account.user
    }
    ...mapState('setting', ['weekMode']),
    ...mapState('account', ['user']),
  }
}
</script>

<style lang="less" scoped>
<style lang="less">
  .header-avatar{
    display: inline-block;
    height: 100%;
    vertical-align: initial;
  }
  .avatar{
    margin: 20px 4px 20px 0;
    color: #1890ff;
    background: hsla(0,0%,100%,.85);
    vertical-align: middle;
  }
  .avatar-menu{
    width: 150px;
  }
</style>

 src/store/modules/setting.js

@@ -1,20 +1,10 @@
import {footerLinks, animates, themeColor} from '@/config'
import config from '@/config'
export default {
  namespaced: true,
  state: {
    isMobile: false,
    theme: 'dark',
    themeColor,
    layout: 'side',
    systemName: 'Vue Antd Admin',
    copyright: '2018 ICZER 工作室出品',
    footerLinks: footerLinks,
    multiPage: true,
    animates: animates,
    animate: {
      name: 'bounce',
      direction: 'left'
    }
    animates: require('@/config/animates'),
    ...config
  },
  mutations: {
    setDevice (state, isMobile) {
@@ -34,6 +24,9 @@
    },
    setThemeColor (state, color) {
      state.themeColor = color
    },
    setWeekMode(state, weekMode) {
      state.weekMode = weekMode
    }
  }
}

 src/theme/default/index.less

@@ -1 +1,2 @@
@import "color";
@import "style";

 src/theme/default/style.less

New file
@@ -0,0 +1,4 @@
.week-mode{
  overflow: hidden;
  filter: invert(80%);
}