From 40472b21dd2487a7715c1cb2182c329f0bee43e4 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Thu, 9 Jul 2020 21:24:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20the=20function=20of=20copying=20c?=
 =?UTF-8?q?onfiguration=20code;=20:star2:=20=E6=96=B0=E5=A2=9E=EF=BC=9A?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B6=E9=85=8D=E7=BD=AE=E9=A1=B9=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/setting/Setting.vue | 22 +++++++++-
 src/utils/formatter.js             | 68 ++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/formatter.js

diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index ad4fb04..e6c27b2 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -89,7 +89,13 @@
         </a-list-item>
       </a-list>
     </setting-item>
-    <a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >{{$t('copy')}}</a-button>
+    <a-alert
+      style="max-width: 224px; margin: -16px 0 8px"
+      message="拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容即可"
+      type="warning"
+      :closable="true"
+    />
+    <a-button id="copyBtn" :data-clipboard-text="copyConfig" @click="copyCode" style="width: 100%" icon="copy" >{{$t('copy')}}</a-button>
   </div>
 </template>
 
@@ -99,6 +105,8 @@ import ColorCheckbox from '../checkbox/ColorCheckbox'
 import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
 import { mapState, mapMutations } from 'vuex'
+import {formatConfig} from '@/utils/formatter'
+import {setting} from '@/config/default'
 
 const ColorCheckboxGroup = ColorCheckbox.Group
 const ImgCheckboxGroup = ImgCheckbox.Group
@@ -108,6 +116,7 @@ export default {
   components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem},
   data() {
     return {
+      copyConfig: 'Sorry, you have copied nothing O(∩_∩)O~'
     }
   },
   computed: {
@@ -123,6 +132,17 @@ export default {
   },
   methods: {
     copyCode () {
+      let config = {}
+      // 提取配置
+      let mySetting = this.$store.state.setting
+      Object.keys(mySetting).forEach(key => {
+        if (setting[key]) {
+          config[key] = mySetting[key]
+        }
+      })
+      this.copyConfig = '// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可\n'
+      this.copyConfig += 'module.exports = '
+      this.copyConfig += formatConfig(config)
       let clipboard = new Clipboard('#copyBtn')
       const _this = this
       clipboard.on('success', function () {
diff --git a/src/utils/formatter.js b/src/utils/formatter.js
new file mode 100644
index 0000000..2fb5543
--- /dev/null
+++ b/src/utils/formatter.js
@@ -0,0 +1,68 @@
+/**
+ * 把对象按照 js配置文件的格式进行格式化
+ * @param obj 格式化的对象
+ * @param dep 层级，此项无需传值
+ * @returns {string}
+ */
+function formatConfig(obj, dep) {
+  dep = dep || 1
+  const LN = '\n', TAB = '  '
+  let indent = ''
+  for (let i = 0; i < dep; i++) {
+    indent += TAB
+  }
+  let isArray = false, arrayLastIsObj = false
+  let str = '', prefix = '{', subfix = '}'
+  if (Array.isArray(obj)) {
+    isArray = true
+    prefix = '['
+    subfix = ']'
+    str = obj.map((item, index) => {
+      let format = ''
+      if (typeof item == 'function') {
+        //
+      } else if (typeof item == 'object') {
+        arrayLastIsObj = true
+        format = `${LN}${indent}${formatConfig(item,dep + 1)},`
+      } else if (typeof item == 'number' && !isNaN(item)) {
+        format = `${item},`
+      } else if (typeof item == 'string') {
+        format = `'${item}',`
+      }
+      if (index == obj.length - 1) {
+        format = format.substring(0, format.length - 1)
+      } else {
+        arrayLastIsObj = false
+      }
+      return format
+    }).join('')
+  } else if (typeof obj != 'function' && typeof obj == 'object') {
+    str = Object.keys(obj).map((key, index, keys) => {
+      const val = obj[key]
+      let format = ''
+      if (typeof val == 'function') {
+        //
+      } else if (typeof val == 'object') {
+        format = `${LN}${indent}${key}: ${formatConfig(val,dep + 1)},`
+      } else if (typeof val == 'number' && !isNaN(val)) {
+        format = `${LN}${indent}${key}: ${val},`
+      } else if (typeof val == 'string') {
+        format = `${LN}${indent}${key}: '${val}',`
+      }
+      if (index == keys.length - 1) {
+        format = format.substring(0, format.length - 1)
+      }
+      return format
+    }).join('')
+  }
+  const len = TAB.length
+  if (indent.length >= len) {
+    indent = indent.substring(0, indent.length - len)
+  }
+  if (!isArray || arrayLastIsObj) {
+    subfix = LN + indent +subfix
+  }
+  return`${prefix}${str}${subfix}`
+}
+
+module.exports = {formatConfig}