feat[Search]: route search supports pinyin (#2643)

Author: mayunhai

package.json

@@ -58,6 +58,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "pinyin": "2.9.0",
     "screenfull": "4.2.0",
     "showdown": "1.9.0",
     "sortablejs": "1.8.4",

src/components/HeaderSearch/index.vue

@@ -41,6 +41,9 @@ export default {
     },
     lang() {
       return this.$store.getters.language
+    },
+    supportPinyinSearch() {
+      return this.$store.state.settings.supportPinyinSearch
     }
   },
   watch: {
@@ -51,6 +54,10 @@ export default {
       this.searchPool = this.generateRoutes(this.routes)
     },
     searchPool(list) {
+      // Support pinyin search
+      if (this.lang === 'zh' && this.supportPinyinSearch) {
+        this.addPinyinField(list)
+      }
       this.initFuse(list)
     },
     show(value) {
@@ -65,6 +72,23 @@ export default {
     this.searchPool = this.generateRoutes(this.routes)
   },
   methods: {
+    async addPinyinField(list) {
+      const { default: pinyin } = await import('pinyin')
+      if (Array.isArray(list)) {
+        list.forEach(element => {
+          const title = element.title
+          if (Array.isArray(title)) {
+            title.forEach(v => {
+              v = pinyin(v, {
+                style: pinyin.STYLE_NORMAL
+              }).join('')
+              element.pinyinTitle = v
+            })
+          }
+        })
+        return list
+      }
+    },
     click() {
       this.show = !this.show
       if (this.show) {
@@ -95,6 +119,9 @@ export default {
         keys: [{
           name: 'title',
           weight: 0.7
+        }, {
+          name: 'pinyinTitle',
+          weight: 0.3
         }, {
           name: 'path',
           weight: 0.3
@@ -105,29 +132,23 @@ export default {
     // And generate the internationalized title
     generateRoutes(routes, basePath = '/', prefixTitle = []) {
       let res = []
-
       for (const router of routes) {
         // skip hidden router
         if (router.hidden) { continue }
-
         const data = {
           path: path.resolve(basePath, router.path),
           title: [...prefixTitle]
         }
-
         if (router.meta && router.meta.title) {
           // generate internationalized title
           const i18ntitle = i18n.t(`route.${router.meta.title}`)
-
           data.title = [...data.title, i18ntitle]
-
           if (router.redirect !== 'noRedirect') {
             // only push the routes with title
             // special case: need to exclude parent router without redirect
             res.push(data)
           }
         }
-
         // recursive child routes
         if (router.children) {
           const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
@@ -152,13 +173,11 @@ export default {
 <style lang="scss" scoped>
 .header-search {
   font-size: 0 !important;
-
   .search-icon {
     cursor: pointer;
     font-size: 18px;
     vertical-align: middle;
   }
-
   .header-search-select {
     font-size: 18px;
     transition: width 0.2s;
@@ -168,7 +187,6 @@ export default {
     border-radius: 0;
     display: inline-block;
     vertical-align: middle;
-
     /deep/ .el-input__inner {
       border-radius: 0;
       border: 0;
@@ -179,7 +197,6 @@ export default {
       vertical-align: middle;
     }
   }
-
   &.show {
     .header-search-select {
       width: 210px;

src/layout/components/Settings/index.vue

@@ -30,6 +30,11 @@
         />
       </a>
 
+      <div v-if="lang === 'zh'" class="drawer-item">
+        <span>菜单支持拼音搜索</span>
+        <el-switch v-model="supportPinyinSearch" class="drawer-switch" />
+      </div>
+
     </div>
   </div>
 </template>
@@ -78,6 +83,20 @@ export default {
           value: val
         })
       }
+    },
+    supportPinyinSearch: {
+      get() {
+        return this.$store.state.settings.supportPinyinSearch
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'supportPinyinSearch',
+          value: val
+        })
+      }
+    },
+    lang() {
+      return this.$store.getters.language
     }
   },
   methods: {

src/settings.js

@@ -25,6 +25,13 @@ module.exports = {
    */
   sidebarLogo: false,
 
+  /**
+   * @type {boolean} true | false
+   * @description Whether support pinyin search in headerSearch
+   * Bundle size minified 47.3kb,minified + gzipped 63kb
+   */
+  supportPinyinSearch: true,
+
   /**
    * @type {string | array} 'production' | ['production', 'development']
    * @description Need show err logs component.

src/store/modules/settings.js

@@ -1,14 +1,15 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo, supportPinyinSearch } = defaultSettings
 
 const state = {
   theme: variables.theme,
-  showSettings: showSettings,
-  tagsView: tagsView,
-  fixedHeader: fixedHeader,
-  sidebarLogo: sidebarLogo
+  showSettings,
+  tagsView,
+  fixedHeader,
+  sidebarLogo,
+  supportPinyinSearch
 }
 
 const mutations = {