update setting drawer

Author: sendya

src/components/layout/LayoutMain.vue

@@ -108,6 +108,10 @@
     &.userLayout {
       overflow-y: auto;
     }
+
+    &.colorWeak {
+      filter: invert(80%);
+    }
   }
 
   .layout {

src/components/tools/SettingDrawer.vue

@@ -76,45 +76,9 @@
 <script>
   import DetailList from '@/components/tools/DetailList'
   import config from '@/defaultConfig'
-  import { updateTheme } from '@/components/tools/setting'
-
+  import { updateTheme, colorList } from '@/components/tools/setting'
   import { mapState } from 'vuex'
 
-  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 default {
     components: {
       DetailList

src/components/tools/setting.js

@@ -64,4 +64,31 @@ const updateColorWeak = colorWeak => {
   document.body.className = colorWeak ? 'colorWeak' : '';
 };
 
-export { updateTheme, updateColorWeak }
+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/views/account/settings/Custom.vue

@@ -1,5 +1,6 @@
 <script>
   import { mapState } from "vuex"
+  import { colorList } from '@/components/tools/setting'
   import ASwitch from 'ant-design-vue/es/switch'
   import AList from "ant-design-vue/es/list"
   import AListItem from "ant-design-vue/es/list/Item"
@@ -19,7 +20,8 @@
     },
     computed: {
       ...mapState({
-        theme: state => state.app.theme
+        theme: state => state.app.theme,
+        color: state => state.app.color
       })
     },
     filters: {
@@ -29,12 +31,15 @@
           'light': '白色'
         }
         return themeMap[theme]
-      }
+      },
     },
     methods: {
-      onChange (checked) {
+      colorFilter(color) {
+        const c = colorList.filter(o => o.color === color)[0]
+        return c && c.key
+      },
 
-        console.log('click:', checked)
+      onChange (checked) {
         if (checked) {
           this.$store.dispatch('ToggleTheme',  'dark')
         } else {
@@ -60,7 +65,7 @@
             <Meta>
               <a slot="title">主题色</a>
               <span slot="description">
-                页面风格配色： <a>红</a>
+                页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.color) }/>
               </span>
             </Meta>
           </AListItem>

src/views/account/settings/Security.vue

@@ -5,7 +5,7 @@
   >
     <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
       <a-list-item-meta>
-        <a slot="title" href="https://vuecomponent.github.io/ant-design-vue/">{{ item.title }}</a>
+        <a slot="title">{{ item.title }}</a>
         <span slot="description">
           <span class="security-list-description">{{ item.description }}</span>
           <span v-if="item.value"> : </span>