feat: support tiny-pinyin. #177 (#235)

4 years ago · 3e765186e8
4 changed files with 70 additions and 88 deletions
--- 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",
--- 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",
--- 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))
+        }
+      }
    }
  }
 }
--- 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))
+        }
+      }
    }
  }
 }