update setting drawer

src/components/layout/LayoutMain.vue

@@ -37,6 +37,7 @@
       <a-layout-footer style="padding: 0px">
         <layout-footer/>
       </a-layout-footer>
+
     </a-layout>
 
     <setting-drawer></setting-drawer>
@@ -47,7 +48,7 @@
   import SiderMenu from '@/components/menu/SiderMenu'
   import LayoutHeader from './LayoutHeader'
   import LayoutFooter from './LayoutFooter'
-  import SettingDrawer from '@/components/tools/SettingDrawer'
+  import SettingDrawer from '@/components/setting/SettingDrawer'
   import { triggerResize } from '@/utils/util'
   import { mapState, mapActions } from 'vuex'
 

src/components/tools/SettingDrawer.vue → src/components/setting/SettingDrawer.vue

@@ -55,6 +55,21 @@
 
           </div>
         </div>
+
+        <a-divider />
+        <div :style="{ marginBottom: '24px' }">
+          <h3 class="setting-drawer-index-title">其他设置</h3>
+          <div>
+            <a-list :split="false">
+              <a-list-item>
+                <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
+                <a-list-item-meta>
+                  <div slot="title">色弱模式</div>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </div>
+        </div>
         <a-divider />
         <div :style="{ marginBottom: '24px' }">
           <a-alert type="warning">
@@ -75,13 +90,15 @@
 
 <script>
   import DetailList from '@/components/tools/DetailList'
+  import SettingItem from '@/components/setting/SettingItem'
   import config from '@/defaultConfig'
-  import { updateTheme, colorList } from '@/components/tools/setting'
+  import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
   import { mapState } from 'vuex'
 
   export default {
     components: {
-      DetailList
+      DetailList,
+      SettingItem
     },
     data() {
       return {
@@ -93,17 +110,24 @@
       ...mapState({
         navTheme: state => state.app.theme,
         primaryColor: state => state.app.color,
+        colorWeak: state => state.app.weak,
       })
     },
     mounted () {
       const vm = this
+      /*this.$nextTick(() => {
+        vm.visible = false
+      })*/
       setTimeout(() => {
         vm.visible = false
-      }, 1)
+      }, 16)
       // 当主题色不是默认色时，才进行主题编译
       if (this.primaryColor !== config.primaryColor) {
         updateTheme(this.primaryColor)
       }
+      if (this.colorWeak !== config.colorWeak) {
+        updateColorWeak(this.colorWeak)
+      }
     },
     methods: {
       showDrawer() {
@@ -115,10 +139,14 @@
       toggle() {
         this.visible = !this.visible
       },
-      changeMenuTheme(theme) {
+      onColorWeak (checked) {
+        this.$store.dispatch('ToggleWeak', checked)
+        updateColorWeak(checked)
+      },
+      changeMenuTheme (theme) {
         this.$store.dispatch('ToggleTheme', theme)
       },
-      changeColor(color) {
+      changeColor (color) {
         if (this.primaryColor !== color) {
           this.$store.dispatch('ToggleColor', color)
           updateTheme(color)
@@ -132,12 +160,6 @@
 
   .setting-drawer-index-content {
 
-    .setting-drawer-index-title {
-      font-size: 14px;
-      color: rgba(0, 0, 0, .85);
-      line-height: 22px;
-      margin-bottom: 12px;
-    }
     .setting-drawer-index-blockChecbox {
       display: flex;
 

src/components/setting/SettingItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="setting-drawer-index-item">
+    <h3 class="setting-drawer-index-title">{{ title }}</h3>
+    <slot></slot>
+    <a-divider v-if="divider"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "SettingItem",
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      divider: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .setting-drawer-index-item {
+    margin-bottom: 24px;
+
+    .setting-drawer-index-title {
+      font-size: 14px;
+      color: rgba(0, 0, 0, .85);
+      line-height: 22px;
+      margin-bottom: 12px;
+    }
+
+  }
+</style>

src/components/tools/setting.js

@@ -3,6 +3,33 @@ import { message } from 'ant-design-vue/es';
 
 let lessNodesAppended;
 
+const colorList = [
+  {
+    key: '薄暮', color: '#F5222D',
+  },
+  {
+    key: '火山', color: '#FA541C',
+  },
+  {
+    key: '日暮', color: '#FAAD14',
+  },
+  {
+    key: '明青', color: '#13C2C2',
+  },
+  {
+    key: '极光绿', color: '#52C41A',
+  },
+  {
+    key: '拂晓蓝（默认）', color: '#1890FF',
+  },
+  {
+    key: '极客蓝', color: '#2F54EB',
+  },
+  {
+    key: '酱紫', color: '#722ED1',
+  },
+];
+
 const updateTheme = primaryColor => {
   // Don't compile less in production!
   /* if (process.env.NODE_ENV === 'production') {
@@ -61,34 +88,8 @@ const updateTheme = primaryColor => {
 };
 
 const updateColorWeak = colorWeak => {
-  document.body.className = colorWeak ? 'colorWeak' : '';
+  // document.body.className = colorWeak ? 'colorWeak' : '';
+  colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
 };
 
-const colorList = [
-  {
-    key: '薄暮', color: '#F5222D',
-  },
-  {
-    key: '火山', color: '#FA541C',
-  },
-  {
-    key: '日暮', color: '#FAAD14',
-  },
-  {
-    key: '明青', color: '#13C2C2',
-  },
-  {
-    key: '极光绿', color: '#52C41A',
-  },
-  {
-    key: '拂晓蓝（默认）', color: '#1890FF',
-  },
-  {
-    key: '极客蓝', color: '#2F54EB',
-  },
-  {
-    key: '酱紫', color: '#722ED1',
-  },
-];
-
 export { updateTheme, colorList, updateColorWeak }

src/main.js

@@ -13,7 +13,7 @@ import 'ant-design-vue/dist/antd.less';  // or 'ant-design-vue/dist/antd.less'
 import '@/permission' // permission control
 import '@/utils/filter' // base filter
 
-import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
+import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, DEFAULT_COLOR_WEAK, SIDEBAR_TYPE } from "@/store/mutation-types"
 import config from '@/defaultConfig'
 
 Vue.config.productionTip = false
@@ -29,6 +29,7 @@ new Vue({
   mounted () {
     store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, false))
     store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
+    store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
     store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
     store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
   },

src/store/modules/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import {SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_COLOR} from "@/store/mutation-types"
+import { SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_COLOR, DEFAULT_COLOR_WEAK } from "@/store/mutation-types"
 
 const app = {
   state: {
@@ -9,7 +9,8 @@ const app = {
     },
     device: 'desktop',
     theme: '',
-    color: null
+    color: null,
+    weak: false
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -32,6 +33,10 @@ const app = {
     TOGGLE_COLOR: (state, color) => {
       Vue.ls.set(DEFAULT_COLOR, color)
       state.color = color
+    },
+    TOGGLE_WEAK: (state, flag) => {
+      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
+      state.weak = flag
     }
   },
   actions: {
@@ -49,6 +54,9 @@ const app = {
     },
     ToggleColor({ commit }, color) {
       commit('TOGGLE_COLOR', color)
+    },
+    ToggleWeak({ commit }, weakFlag) {
+      commit('TOGGLE_WEAK', weakFlag)
     }
   }
 }

src/store/mutation-types.js

@@ -1,4 +1,5 @@
 export const ACCESS_TOKEN = 'Access-Token'
 export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
 export const DEFAULT_THEME = 'DEFAULT_THEME'
-export const DEFAULT_COLOR = 'DEFAULT_COLOR'
+export const DEFAULT_COLOR = 'DEFAULT_COLOR'
+export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'

src/views/Login.vue

@@ -122,15 +122,13 @@
       }
     },
     created () {
-      /* 
       this.$http.get('/auth/2step-code')
         .then(res => {
-          this.requiredTwoStepCaptcha = res.result
+          this.requiredTwoStepCaptcha = res.result.stepCode
         }).catch(err => {
           console.log('2step-code:', err)
         })
-      */
-     this.requiredTwoStepCaptcha = true
+     // this.requiredTwoStepCaptcha = true
       
     },
     methods: {