新增: 增加动态修改主题色功能；

src/components/checkbox/ColorCheckbox.vue

@@ -42,10 +42,19 @@ const Group = {
     }
   },
   watch: {
-    values: function (newVal, oldVal) {
-      // 此条件是为解决单选时，触发两次chang事件问题
-      if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0]) || this.multiple) {
-        this.$emit('change', this.values, this.colors)
+    values() {
+      this.$emit('change', this.values, this.colors)
+    },
+    defaultValues(value) {
+      if (this.multiple) {
+        this.options.forEach(item => {
+          item.sChecked = value.indexOf(item.value) > -1
+        })
+      } else {
+        this.options.forEach(item => {
+          let first = value[0]
+          item.sChecked = first && first == item.value
+        })
       }
     }
   },
@@ -55,9 +64,8 @@ const Group = {
         this.values = this.values.filter(item => item !== option.value)
       } else {
         if (!this.multiple) {
-          this.values = [option.value]
           this.options.forEach(item => {
-            if (item.value !== option.value) {
+            if (item.value != option.value) {
               item.sChecked = false
             }
           })
@@ -97,9 +105,11 @@ export default {
   },
   data () {
     return {
-      sChecked: this.checked
+      sChecked: this.initChecked()
     }
   },
+  computed: {
+  },
   inject: ['groupContext'],
   watch: {
     'sChecked': function () {
@@ -118,13 +128,22 @@ export default {
   created () {
     const groupContext = this.groupContext
     if (groupContext) {
-      this.sChecked = groupContext.defaultValues.indexOf(this.value) >= 0
       groupContext.options.push(this)
     }
   },
   methods: {
     toggle () {
       this.sChecked = !this.sChecked
+    },
+    initChecked() {
+      let groupContext = this.groupContext
+      if (!groupContext) {
+        return this.check
+      }else if (groupContext.multiple) {
+        return groupContext.defaultValues.indexOf(this.value) > -1
+      } else {
+        return groupContext.defaultValues[0] == this.value
+      }
     }
   }
 }

src/components/setting/Setting.vue

@@ -7,8 +7,8 @@
       </img-checkbox-group>
     </setting-item>
     <setting-item title="主题色">
-      <color-checkbox-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
-        <color-checkbox ref="colorNode" color="rgb(245, 34, 45)" value="1" />
+      <color-checkbox-group @change="onColorChange" :defaultValues="['6']" :multiple="false">
+        <color-checkbox color="rgb(245, 34, 45)" value="1" />
         <color-checkbox color="rgb(250, 84, 28)" value="2" />
         <color-checkbox color="rgb(250, 173, 20)" value="3" />
         <color-checkbox color="rgb(19, 194, 194)" value="4" />
@@ -62,7 +62,7 @@
       </a-list>
     </setting-item>
     <a-divider />
-    <a-button id="copyBtn" data-clipboard-text="Sorry, you copy nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >拷贝代码</a-button>
+    <a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >拷贝代码</a-button>
   </a-layout-sider>
 </template>
 
@@ -71,6 +71,7 @@ import SettingItem from './SettingItem'
 import ColorCheckbox from '../checkbox/ColorCheckbox'
 import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
+import themeUtil from '../../utils/themeUtil';
 
 const ColorCheckboxGroup = ColorCheckbox.Group
 const ImgCheckboxGroup = ImgCheckbox.Group
@@ -86,7 +87,8 @@ export default {
   methods: {
     onColorChange (values, colors) {
       if (colors.length > 0) {
-        this.$message.info(`您选择了主题色 ${colors}`)
+        let closeMessage = this.$message.loading(`您选择了主题色 ${colors}, 正在切换...`)
+        themeUtil.changeThemeColor(colors[0]).then(closeMessage)
       }
     },
     setTheme (values) {

src/components/tool/FooterToolBar.vue

@@ -21,12 +21,10 @@ export default {
     width: 100%;
     bottom: 0;
     right: 0;
-    height: 56px;
-    line-height: 56px;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
     background: #fff;
     border-top: 1px solid #e8e8e8;
-    padding: 0 24px;
+    padding: 12px 24px;
     z-index: 9;
   }
 </style>