chore: optimize the function of copy configuration code ; 🌟

package.json

@@ -42,6 +42,7 @@
     "deepmerge": "^4.2.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "fast-deep-equal": "^3.1.3",
     "gh-pages": "^3.1.0",
     "less-loader": "^6.1.1",
     "style-resources-loader": "^1.3.2",

src/components/checkbox/index.js

@@ -0,0 +1,7 @@
+import ColorCheckbox from '@/components/checkbox/ColorCheckbox'
+import ImgCheckbox from '@/components/checkbox/ImgCheckbox'
+
+export {
+  ColorCheckbox,
+  ImgCheckbox
+}

src/components/setting/Setting.vue

@@ -90,23 +90,23 @@
       </a-list>
     </setting-item>
     <a-alert
-      style="max-width: 224px; margin: -16px 0 8px"
+      style="max-width: 240px; margin: -16px 0 8px; word-break: break-all"
-      message="拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容即可"
       type="warning"
-      :closable="true"
+      :message="$t('alert')"
-    />
+    >
+    </a-alert>
     <a-button id="copyBtn" :data-clipboard-text="copyConfig" @click="copyCode" style="width: 100%" icon="copy" >{{$t('copy')}}</a-button>
   </div>
 </template>
 
 <script>
 import SettingItem from './SettingItem'
-import ColorCheckbox from '../checkbox/ColorCheckbox'
+import {ColorCheckbox, ImgCheckbox} from '@/components/checkbox'
-import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
 import { mapState, mapMutations } from 'vuex'
 import {formatConfig} from '@/utils/formatter'
 import {setting} from '@/config/default'
+import fastEqual from 'fast-deep-equal'
 
 const ColorCheckboxGroup = ColorCheckbox.Group
 const ImgCheckboxGroup = ImgCheckbox.Group
@@ -136,8 +136,11 @@ export default {
       // 提取配置
       let mySetting = this.$store.state.setting
       Object.keys(mySetting).forEach(key => {
-        if (setting[key]) {
+        const dftValue = setting[key], myValue = mySetting[key]
-          config[key] = mySetting[key]
+        // 只提取与默认配置不同的配置项
+        if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
+          console.log(myValue)
+          config[key] = myValue
         }
       })
       this.copyConfig = '// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可\n'

src/components/setting/i18n.js

@@ -31,6 +31,7 @@ module.exports = {
         effect: '动画效果',
         direction: '动画方向'
       },
+      alert: '拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容即可。（注意：仅会拷贝与默认配置不同的项）',
       copy: '拷贝配置'
     },
     HK: {
@@ -64,6 +65,7 @@ module.exports = {
         effect: '動畫效果',
         direction: '動畫方向'
       },
+      alert: '拷貝配置后，直接覆蓋文件 src/config/config.js 中的全部內容即可。（注意：僅會拷貝與默認配置不同的項）',
       copy: '拷貝配置'
     },
     US: {
@@ -97,6 +99,7 @@ module.exports = {
         effect: 'Effect',
         direction: 'Direction'
       },
+      alert: 'After copying the configuration code, directly cover all contents in the file src/config/config.js. (Note: only items that are different from the default configuration will be copied)',
       copy: 'Copy Setting'
     }
   }

src/config/config.js

@@ -2,10 +2,10 @@
 module.exports = {
   theme: {
     color: '#13c2c2',
-    mode: 'dark',
+    mode: 'night'
   },
   animate: {
-    name: 'rotate',
+    name: 'zoom',
-    direction: 'downLeft'
+    direction: 'left'
   }
 }

src/config/index.js

@@ -1,6 +1,6 @@
-const deepmerge = require('deepmerge')
+const deepMerge = require('deepmerge')
 const _config = require('./config')
 const {setting} = require('./default')
-const config = deepmerge(setting, _config)
+const config = deepMerge(setting, _config)
 
 module.exports = config

src/utils/formatter.js

@@ -24,7 +24,7 @@ function formatConfig(obj, dep) {
       } else if (typeof item == 'object') {
         arrayLastIsObj = true
         format = `${LN}${indent}${formatConfig(item,dep + 1)},`
-      } else if (typeof item == 'number' && !isNaN(item)) {
+      } else if ((typeof item == 'number' && !isNaN(item)) || typeof item == 'boolean') {
         format = `${item},`
       } else if (typeof item == 'string') {
         format = `'${item}',`
@@ -44,7 +44,7 @@ function formatConfig(obj, dep) {
         //
       } else if (typeof val == 'object') {
         format = `${LN}${indent}${key}: ${formatConfig(val,dep + 1)},`
-      } else if (typeof val == 'number' && !isNaN(val)) {
+      } else if ((typeof val == 'number' && !isNaN(val)) || typeof val == 'boolean') {
         format = `${LN}${indent}${key}: ${val},`
       } else if (typeof val == 'string') {
         format = `${LN}${indent}${key}: '${val}',`

yarn.lock

@@ -4683,7 +4683,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.npm.taobao.org/extsprintf/download/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz?cache=0&sync_timestamp=1591599697571&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=