feat[Search]: route search supports pinyin (#2643)
This commit is contained in:
parent
255989138d
commit
39b2b9b872
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in New Issue