From 8a0c4b9a3c94d222e572c640d4bb2799144308bd Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Wed, 29 Aug 2018 15:02:46 +0800
Subject: [PATCH] feat: add theme style toggle function

---
 src/components/layout/GlobalLayout.vue |  7 +++--
 src/components/menu/SiderMenu.vue      | 36 +++++++++++++++++++++++---
 src/components/setting/Setting.vue     |  8 +++---
 src/components/tool/Drawer.vue         |  3 ++-
 src/store/modules/setting.js           |  6 ++++-
 5 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/components/layout/GlobalLayout.vue b/src/components/layout/GlobalLayout.vue
index b5012b1..6a7ba9b 100644
--- a/src/components/layout/GlobalLayout.vue
+++ b/src/components/layout/GlobalLayout.vue
@@ -1,9 +1,9 @@
 <template>
   <a-layout>
     <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
-      <sider-menu :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
+      <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
-    <sider-menu v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
+    <sider-menu :theme="theme" v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
     <drawer :open-drawer="showSetting" placement="right"  @change="onSettingDrawerChange">
       <div class="setting" slot="handler">
         <a-icon :type="showSetting ? 'close' : 'setting'" />
@@ -66,6 +66,9 @@ export default {
   computed: {
     isMobile () {
       return this.$store.state.setting.isMobile
+    },
+    theme () {
+      return this.$store.state.setting.theme
     }
   },
   methods: {
diff --git a/src/components/menu/SiderMenu.vue b/src/components/menu/SiderMenu.vue
index 3b8406f..599d928 100644
--- a/src/components/menu/SiderMenu.vue
+++ b/src/components/menu/SiderMenu.vue
@@ -1,12 +1,12 @@
 <template>
-  <a-layout-sider :class="['sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
-    <div class="logo">
+  <a-layout-sider :class="[theme, 'sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+    <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
         <img src="static/img/vue-antd-logo.png">
         <h1>Vue Antd Admin</h1>
       </router-link>
     </div>
-    <i-menu :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
+    <i-menu :theme="theme" :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
   </a-layout-sider>
 </template>
 
@@ -30,6 +30,11 @@ export default {
     menuData: {
       type: Array,
       required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
     }
   },
   computed: {
@@ -46,11 +51,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .dark{
+    background-color: #002140;
+  }
+  .light{
+    background-color: #fff;
+  }
   .shadow{
     box-shadow: 2px 0 6px rgba(0,21,41,.35);
   }
   .sider{
     z-index: 10;
+    &.light{
+      background-color: #fff;
+    }
+    &.dark{
+      background-color: #001529;
+    }
     .logo{
       height: 64px;
       position: relative;
@@ -58,8 +75,19 @@ export default {
       padding-left: 24px;
       -webkit-transition: all .3s;
       transition: all .3s;
-      background: #002140;
       overflow: hidden;
+      &.light{
+        background-color: #fff;
+        h1{
+          color: #1890ff;
+        }
+      }
+      &.dark{
+        background-color: #002140;
+        h1{
+          color: #fff;
+        }
+      }
       h1{
         color: #fff;
         font-size: 20px;
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index 0ba40a6..676a299 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -2,8 +2,8 @@
   <a-layout-sider class="sider" width="273">
     <setting-item title="整体风格设置">
       <img-check-box-group @change="onStyleChange">
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" :value="{value: 1, name: 'Dark'}"/>
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :value="{value: 2, name: 'Light'}"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" :value="{value: 1, name: 'dark'}"/>
+        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :value="{value: 2, name: 'light'}"/>
       </img-check-box-group>
     </setting-item>
     <setting-item title="主题色">
@@ -106,9 +106,7 @@ export default {
       }
     },
     onStyleChange (values) {
-      if (values.length > 0) {
-        this.$message.info(`您选择了 ${values[0].name} 风格`)
-      }
+      this.$store.commit('setting/setTheme', values[0].name)
     },
     onNaviChange (values) {
       if (values.length > 0) {
diff --git a/src/components/tool/Drawer.vue b/src/components/tool/Drawer.vue
index 9753b74..04cc647 100644
--- a/src/components/tool/Drawer.vue
+++ b/src/components/tool/Drawer.vue
@@ -118,7 +118,8 @@ export default {
     top: 200px;
     text-align: center;
     transition: all 0.5s;
-    .handler{
+    cursor: pointer;
+    .handler {
       height: 40px;
       width: 40px;
       background-color: #fff;
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index 0a5da4f..daf7e24 100644
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@@ -1,11 +1,15 @@
 export default {
   namespaced: true,
   state: {
-    isMobile: false
+    isMobile: false,
+    theme: 'dark'
   },
   mutations: {
     setDevice (state, isMobile) {
       state.isMobile = isMobile
+    },
+    setTheme (state, theme) {
+      state.theme = theme
     }
   }
 }