新增: 全局色弱模式；

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 @@ export default {
     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 @@ export default {
     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 @@ export default {
     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 @@ export default {
     },
     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

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