From 3e765186e823a008b6c52fb3fe205a50a2eedf0b Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 24 Aug 2020 00:52:25 +0800
Subject: [PATCH] feat: support tiny-pinyin. #177 (#235)

---
 package-lock.json                             | 113 +++++-------------
 package.json                                  |   1 +
 .../post/components/PostSettingDrawer.vue     |  31 +++--
 .../sheet/components/SheetSettingDrawer.vue   |  13 ++
 4 files changed, 70 insertions(+), 88 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ecef98b..6d508d30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2601,6 +2601,34 @@
             "webpack-sources": "^1.4.3"
           }
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.5",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
+          "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/mini-css-extract-plugin": "^0.9.1",
+            "chalk": "^3.0.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^1.2.3",
+            "merge-source-map": "^1.1.0",
+            "source-map": "^0.6.1"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+              "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            }
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -15379,6 +15407,11 @@
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
+    "tiny-pinyin": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tiny-pinyin/-/tiny-pinyin-1.3.0.tgz",
+      "integrity": "sha512-YHsqn1zksQ4CKVvArN7MIUtGx0eV/yl15vzdiwNFwAnOQQwL1+pNSLW4ISVWUN+PrzcnX4ojLgS4kgVCmue7Pw=="
+    },
     "tinycolor2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
@@ -16100,86 +16133,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-      "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-ls": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vue-ls/-/vue-ls-3.2.1.tgz",
diff --git a/package.json b/package.json
index 74337dca..80ec80be 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "halo-editor": "^2.8.2",
     "marked": "^1.1.1",
     "moment": "^2.27.0",
+    "tiny-pinyin": "^1.3.0",
     "verte": "^0.0.12",
     "vue": "^2.6.12",
     "vue-clipboard2": "^0.3.1",
diff --git a/src/views/post/components/PostSettingDrawer.vue b/src/views/post/components/PostSettingDrawer.vue
index cac3e2a2..ef0aab0a 100644
--- a/src/views/post/components/PostSettingDrawer.vue
+++ b/src/views/post/components/PostSettingDrawer.vue
@@ -306,16 +306,23 @@
   </a-drawer>
 </template>
 <script>
-import { mixin, mixinDevice } from '@/utils/mixin.js'
-import moment from 'moment'
+// components
 import CategoryTree from './CategoryTree'
 import CategorySelectTree from './CategorySelectTree'
 import TagSelect from './TagSelect'
+
+// libs
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import moment from 'moment'
+import pinyin from 'tiny-pinyin'
 import { mapGetters } from 'vuex'
+import { datetimeFormat } from '@/utils/util'
+
+// apis
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
 import themeApi from '@/api/theme'
-import { datetimeFormat } from '@/utils/util'
+
 export default {
   name: 'PostSettingDrawer',
   mixins: [mixin, mixinDevice],
@@ -442,16 +449,17 @@ export default {
         this.handleListCategories()
         this.handleListPresetMetasField()
         this.handleListCustomTpls()
+        this.handleSetPinyinSlug()
       }
     },
     handleListCategories() {
-      categoryApi.listAll().then(response => {
+      categoryApi.listAll().then((response) => {
         this.categories = response.data.data
       })
     },
     handleListPresetMetasField() {
       if (this.metas.length <= 0) {
-        themeApi.getActivatedTheme().then(response => {
+        themeApi.getActivatedTheme().then((response) => {
           const fields = response.data.data.postMetaField
           if (fields && fields.length > 0) {
             for (let i = 0, len = fields.length; i < len; i++) {
@@ -465,7 +473,7 @@ export default {
       }
     },
     handleListCustomTpls() {
-      themeApi.customPostTpls().then(response => {
+      themeApi.customPostTpls().then((response) => {
         this.customTpls = response.data.data
       })
     },
@@ -483,7 +491,7 @@ export default {
       }
       categoryApi
         .create(this.categoryToCreate)
-        .then(response => {
+        .then((response) => {
           this.categoryToCreate = {}
           this.categoryFormVisible = false
         })
@@ -549,7 +557,7 @@ export default {
               this.savedErrored = true
             }
           })
-          .then(response => {
+          .then((response) => {
             this.selectedPost = response.data.data
           })
           .finally(() => {
@@ -589,6 +597,13 @@ export default {
         value: '',
         key: ''
       })
+    },
+    handleSetPinyinSlug() {
+      if (this.selectedPost.title && !this.selectedPost.id) {
+        if (pinyin.isSupported()) {
+          this.$set(this.selectedPost, 'slug', pinyin.convertToPinyin(this.selectedPost.title, '-', true))
+        }
+      }
     }
   }
 }
diff --git a/src/views/sheet/components/SheetSettingDrawer.vue b/src/views/sheet/components/SheetSettingDrawer.vue
index e114e2a4..3da2d429 100644
--- a/src/views/sheet/components/SheetSettingDrawer.vue
+++ b/src/views/sheet/components/SheetSettingDrawer.vue
@@ -222,9 +222,14 @@
   </a-drawer>
 </template>
 <script>
+
+// libs
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import moment from 'moment'
 import { mapGetters } from 'vuex'
+import pinyin from 'tiny-pinyin'
+
+// apis
 import themeApi from '@/api/theme'
 import sheetApi from '@/api/sheet'
 export default {
@@ -303,6 +308,7 @@ export default {
       if (visible) {
         this.handleListCustomTpls()
         this.handleListPresetMetasField()
+        this.handleSetPinyinSlug()
       }
     },
     handleListPresetMetasField() {
@@ -425,6 +431,13 @@ export default {
         value: '',
         key: ''
       })
+    },
+    handleSetPinyinSlug() {
+      if (this.selectedSheet.title && !this.selectedSheet.id) {
+        if (pinyin.isSupported()) {
+          this.$set(this.selectedSheet, 'slug', pinyin.convertToPinyin(this.selectedSheet.title, '-', true))
+        }
+      }
     }
   }
 }