chore: optimize the function of copy configuration code ; :star2:

iczer

2020-07-10 d78f6d61d789c50ba729db84b9401e417c490de1

chore: optimize the function of copy configuration code ; :star2:

 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

New file
@@ -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"
      message="拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容即可"
      style="max-width: 240px; margin: -16px 0 8px; word-break: break-all"
      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 ImgCheckbox from '../checkbox/ImgCheckbox'
import {ColorCheckbox, ImgCheckbox} from '@/components/checkbox'
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 @@
      // 提取配置
      let mySetting = this.$store.state.setting
      Object.keys(mySetting).forEach(key => {
        if (setting[key]) {
          config[key] = mySetting[key]
        const dftValue = setting[key], myValue = 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 @@
        effect: '动画效果',
        direction: '动画方向'
      },
      alert: '拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容即可。（注意：仅会拷贝与默认配置不同的项）',
      copy: '拷贝配置'
    },
    HK: {
@@ -64,6 +65,7 @@
        effect: '動畫效果',
        direction: '動畫方向'
      },
      alert: '拷貝配置后，直接覆蓋文件 src/config/config.js 中的全部內容即可。（注意：僅會拷貝與默認配置不同的項）',
      copy: '拷貝配置'
    },
    US: {
@@ -97,6 +99,7 @@
        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',
    direction: 'downLeft'
    name: 'zoom',
    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 @@
      } 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 @@
        //
      } 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 @@
  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=