From 3d568c6caa85924093ec5da8cf8ff667dd512f74 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Sat, 20 Jun 2020 11:55:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E:=20=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E8=89=B2=E5=BC=B1=E6=A8=A1=E5=BC=8F=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 21 ++++++++++++++++
 src/components/setting/Setting.vue            |  7 ++++--
 .../transition/PageToggleTransition.vue       |  4 +--
 src/config/index.js                           | 11 +++++++-
 src/layouts/GlobalLayout.vue                  |  2 +-
 src/layouts/HeaderNotice.vue                  | 24 ++++++++++--------
 src/layouts/HeaderlAvatar.vue                 | 25 +++++++++++++------
 src/store/modules/setting.js                  | 19 +++++---------
 src/theme/default/index.less                  |  1 +
 src/theme/default/style.less                  |  4 +++
 10 files changed, 80 insertions(+), 38 deletions(-)
 create mode 100644 src/theme/default/style.less

diff --git a/src/App.vue b/src/App.vue
index fb66b17..0baf5db 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index d0811bc..33c3331 100644
--- a/src/components/setting/Setting.vue
+++ b/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 = {
diff --git a/src/components/transition/PageToggleTransition.vue b/src/components/transition/PageToggleTransition.vue
index d8bc902..80a2d48 100644
--- a/src/components/transition/PageToggleTransition.vue
+++ b/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'
       },
diff --git a/src/config/index.js b/src/config/index.js
index 568b9bd..d599db8 100644
--- a/src/config/index.js
+++ b/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'},
diff --git a/src/layouts/GlobalLayout.vue b/src/layouts/GlobalLayout.vue
index 78eb406..6913775 100644
--- a/src/layouts/GlobalLayout.vue
+++ b/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>
diff --git a/src/layouts/HeaderNotice.vue b/src/layouts/HeaderNotice.vue
index 0966153..245837a 100644
--- a/src/layouts/HeaderNotice.vue
+++ b/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;
diff --git a/src/layouts/HeaderlAvatar.vue b/src/layouts/HeaderlAvatar.vue
index a243188..2a880d2 100644
--- a/src/layouts/HeaderlAvatar.vue
+++ b/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>
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index 0d27d7c..7b49731 100644
--- a/src/store/modules/setting.js
+++ b/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
     }
   }
 }
diff --git a/src/theme/default/index.less b/src/theme/default/index.less
index 885594f..2c13c4e 100644
--- a/src/theme/default/index.less
+++ b/src/theme/default/index.less
@@ -1 +1,2 @@
 @import "color";
+@import "style";
diff --git a/src/theme/default/style.less b/src/theme/default/style.less
new file mode 100644
index 0000000..ca8dc2b
--- /dev/null
+++ b/src/theme/default/style.less
@@ -0,0 +1,4 @@
+.week-mode{
+  overflow: hidden;
+  filter: invert(80%);
+}