From 61f60316f32c6d8196daefd4df4a97efc0c37df4 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Wed, 22 Aug 2018 18:04:33 +0800
Subject: [PATCH] refactor: theme color chose components

---
 src/components/check/ColorCheckBox.vue | 106 +++++++++++++++++++++++++
 src/components/menu/SiderMenu.vue      |   2 +-
 src/components/setting/Setting.vue     |  32 +++++---
 3 files changed, 127 insertions(+), 13 deletions(-)
 create mode 100644 src/components/check/ColorCheckBox.vue

diff --git a/src/components/check/ColorCheckBox.vue b/src/components/check/ColorCheckBox.vue
new file mode 100644
index 0000000..9aff731
--- /dev/null
+++ b/src/components/check/ColorCheckBox.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="theme-color" :style="{backgroundColor: color}" @click="toggle">
+    <a-icon v-if="sChecked" type="check" />
+  </div>
+</template>
+
+<script>
+import AIcon from 'ant-design-vue/es/icon/icon'
+
+const Group = {
+  name: 'ColorCheckBoxGroup',
+  props: {
+    defaultValues: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      values: this.defaultValues
+    }
+  },
+  provide () {
+    return {
+      groupContext: this
+    }
+  },
+  methods: {
+    handleChange (value) {
+      if (!value.checked) {
+        const values = this.values.filter(item => item.value !== value.value)
+        this.values = values
+      } else {
+        this.values.push(value)
+      }
+      this.$emit('change', this.values)
+    }
+  },
+  render (h) {
+    const clear = h('div', {attrs: {style: 'clear: both'}})
+    return h(
+      'div',
+      {},
+      [this.$slots.default, clear]
+    )
+  }
+}
+
+export default {
+  name: 'ColorCheckBox',
+  Group: Group,
+  components: {AIcon},
+  props: {
+    color: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      required: true
+    },
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      sChecked: this.checked
+    }
+  },
+  inject: ['groupContext'],
+  watch: {
+    'sChecked': function (val) {
+      const value = {
+        value: this.value,
+        color: this.color,
+        checked: this.sChecked
+      }
+      this.$emit('change', value)
+      this.groupContext.handleChange(value)
+    }
+  },
+  methods: {
+    toggle () {
+      this.sChecked = !this.sChecked
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .theme-color{
+    float: left;
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    cursor: pointer;
+    margin-right: 8px;
+    text-align: center;
+    color: #fff;
+    font-weight: bold;
+  }
+</style>
diff --git a/src/components/menu/SiderMenu.vue b/src/components/menu/SiderMenu.vue
index c22dd55..3b8406f 100644
--- a/src/components/menu/SiderMenu.vue
+++ b/src/components/menu/SiderMenu.vue
@@ -3,7 +3,7 @@
     <div class="logo">
       <router-link to="/dashboard/workplace">
         <img src="static/img/vue-antd-logo.png">
-        <h1>Vue Ant Pro</h1>
+        <h1>Vue Antd Admin</h1>
       </router-link>
     </div>
     <i-menu :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index f82c3c7..1f5d170 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -7,17 +7,16 @@
       </div>
     </setting-item>
     <setting-item title="主题色">
-      <div>
-        <theme-color color="rgb(245, 34, 45)" />
-        <theme-color color="rgb(250, 84, 28)" />
-        <theme-color color="rgb(250, 173, 20)" />
-        <theme-color color="rgb(19, 194, 194)" />
-        <theme-color color="rgb(82, 196, 26)" />
-        <theme-color color="rgb(24, 144, 255)" />
-        <theme-color color="rgb(47, 84, 235)" />
-        <theme-color color="rgb(114, 46, 209)" :selected="true" />
-        <div style="clear: both" />
-      </div>
+      <color-check-box-group @change="onColorChange">
+        <color-check-box color="rgb(245, 34, 45)" value="1" />
+        <color-check-box color="rgb(250, 84, 28)" value="2" />
+        <color-check-box color="rgb(250, 173, 20)" value="3" />
+        <color-check-box color="rgb(19, 194, 194)" value="4" />
+        <color-check-box color="rgb(82, 196, 26)" value="5" />
+        <color-check-box color="rgb(24, 144, 255)" value="6" />
+        <color-check-box color="rgb(47, 84, 235)" value="7" />
+        <color-check-box color="rgb(114, 46, 209)" value="8" />
+      </color-check-box-group>
     </setting-item>
     <a-divider/>
     <setting-item title="导航设置">
@@ -75,12 +74,16 @@ import AListItem from 'ant-design-vue/es/list/Item'
 import AButton from 'ant-design-vue/es/button/button'
 import ASwitch from 'ant-design-vue/es/switch/index'
 import ASelect from 'ant-design-vue/es/select/index'
+import ColorCheckBox from '../check/ColorCheckBox'
 
 const ASelectOption = ASelect.Option
+const ColorCheckBoxGroup = ColorCheckBox.Group
 
 export default {
   name: 'Setting',
   components: {
+    ColorCheckBoxGroup,
+    ColorCheckBox,
     ASelectOption,
     ASelect,
     ASwitch,
@@ -92,7 +95,12 @@ export default {
     StyleItem,
     SettingItem,
     AIcon,
-    ALayoutSider}
+    ALayoutSider},
+  methods: {
+    onColorChange (values) {
+      console.log(values)
+    }
+  }
 }
 </script>