fix: account custom page

Author: sendya

src/components/layout/LayoutFooter.vue

@@ -2,8 +2,9 @@
   <div class="footer">
     <div class="links">
       <a href="#">Pro 首页</a>
-      <a href="#"><a-icon type="github"/></a>
-      <a href="#">Ant Design</a>
+      <a href="https://github.com/ant-design/ant-design-pro"><a-icon type="github"/></a>
+      <a href="https://ant.design/">Ant Design</a>
+      <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>
     </div>
     <div class="copyright">
       Copyright <a-icon type="copyright" /> 2018 <span>白鹭学园技术组出品</span>

src/components/layout/LayoutMain.vue

@@ -3,7 +3,7 @@
 
     <sider-menu
       :menus="menus"
-      :theme="menuTheme"
+      :theme="theme"
       v-if="menuMode === 'inline'"
       :mode="menuMode"
       :collapsed="!siderOpen || collapsed"
@@ -54,7 +54,8 @@
     },
     computed: {
       ...mapState({
-        siderOpen: state => state.app.sidebar.opened
+        siderOpen: state => state.app.sidebar.opened,
+        theme: state => state.app.theme
       })
     },
     methods: {

src/store/getters.js

@@ -1,5 +1,6 @@
 const getters = {
   device: state => state.app.device,
+  theme: state => state.app.theme,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   nickname: state => state.user.name,

src/store/modules/app.js

@@ -1,30 +1,37 @@
-import Cookies from 'js-cookie'
+import { getStore, setStore } from "@/utils/storage"
+
+let theme = getStore('_DEFAULT_THEME')
 
 const app = {
   state: {
     sidebar: {
-      opened: !+Cookies.get('sidebarStatus'),
+      opened: !+getStore('sidebarStatus'),
       withoutAnimation: false
     },
-    device: 'desktop'
+    device: 'desktop',
+    theme: !theme ? 'dark' : theme
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
       if (state.sidebar.opened) {
-        Cookies.set('sidebarStatus', 1)
+        setStore('sidebarStatus', 1)
       } else {
-        Cookies.set('sidebarStatus', 0)
+        setStore('sidebarStatus', 0)
       }
       state.sidebar.opened = !state.sidebar.opened
       state.sidebar.withoutAnimation = false
     },
     CLOSE_SIDEBAR: (state, withoutAnimation) => {
-      Cookies.set('sidebarStatus', 1)
+      setStore('sidebarStatus', 1)
       state.sidebar.opened = false
       state.sidebar.withoutAnimation = withoutAnimation
     },
     TOGGLE_DEVICE: (state, device) => {
       state.device = device
+    },
+    TOGGLE_THEME: (state, theme) => {
+      setStore('_DEFAULT_THEME', theme)
+      state.theme = theme
     }
   },
   actions: {
@@ -36,6 +43,9 @@ const app = {
     },
     ToggleDevice({ commit }, device) {
       commit('TOGGLE_DEVICE', device)
+    },
+    ToggleTheme({ commit }, theme) {
+      commit('TOGGLE_THEME', theme)
     }
   }
 }

src/views/account/settings/Custom.vue

@@ -1,37 +1,27 @@
-<template>
-  <a-list
-    itemLayout="horizontal"
-    :dataSource="data"
-  >
-    <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>
-        <span slot="description">
-          <span class="security-list-description">{{ item.description }}</span>
-          <span v-if="item.value"> : </span>
-          <span class="security-list-value">{{ item.value }}</span>
-        </span>
-      </a-list-item-meta>
-      <template v-if="item.actions">
-        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
-      </template>
+<script>
+  import { mapState } from "vuex"
+  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"
 
-    </a-list-item>
-  </a-list>
-</template>
+  const Meta = AListItem.Meta
 
-<script>
   export default {
-    name: "Security",
+    components: {
+      AListItem,
+      AList,
+      ASwitch,
+      Meta
+    },
     data () {
       return {
-        theme: 'dark',
-
-        data: [
-          { title: '主题色' , description: '设置全局主题色', value: this.theme, actions: { title: '修改', callback: () => { this.$message.info('This is a normal message'); } } },
-        ]
       }
     },
+    computed: {
+      ...mapState({
+        theme: state => state.app.theme
+      })
+    },
     filters: {
       themeFilter(theme) {
         const themeMap = {
@@ -43,12 +33,39 @@
     },
     methods: {
       onChange (checked) {
+
+        console.log('click:', checked)
         if (checked) {
-          this.theme = 'dark'
+          this.$store.dispatch('ToggleTheme',  'dark')
         } else {
-          this.theme = 'light'
+          this.$store.dispatch('ToggleTheme',  'light')
         }
       }
+    },
+    render () {
+      return (
+        <AList itemLayout="horizontal">
+          <AListItem>
+            <Meta>
+              <a slot="title">风格配色</a>
+              <span slot="description">
+                整体风格配色设置
+              </span>
+            </Meta>
+            <div slot="actions">
+              <ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.theme === 'dark' && true || false} onChange={this.onChange} />
+            </div>
+          </AListItem>
+          <AListItem>
+            <Meta>
+              <a slot="title">主题色</a>
+              <span slot="description">
+                页面风格配色： <a>红</a>
+              </span>
+            </Meta>
+          </AListItem>
+        </AList>
+      )
     }
   }
 </script>