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

This commit is contained in:
MaYuanhai 2020-05-04 21:38:43 +08:00 committed by GitHub
parent 255989138d
commit 39b2b9b872
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 60 additions and 15 deletions

View File

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

View File

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

View File

@ -30,6 +30,11 @@
/> />
</a> </a>
<div v-if="lang === 'zh'" class="drawer-item">
<span>菜单支持拼音搜索</span>
<el-switch v-model="supportPinyinSearch" class="drawer-switch" />
</div>
</div> </div>
</div> </div>
</template> </template>
@ -78,6 +83,20 @@ export default {
value: val 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: { methods: {

View File

@ -25,6 +25,13 @@ module.exports = {
*/ */
sidebarLogo: false, 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'] * @type {string | array} 'production' | ['production', 'development']
* @description Need show err logs component. * @description Need show err logs component.

View File

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