新增: 全局色弱模式；

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>