mirror of https://gitee.com/xiaonuobase/snowy
【新增】菜单搜索功能
Cc-Mac
小诺
parent
f094c30e46
commit
b60e86540a
|
|
@ -30,7 +30,10 @@
|
||||||
"echarts": "5.2.2",
|
"echarts": "5.2.2",
|
||||||
"echarts-stat": "^1.2.0",
|
"echarts-stat": "^1.2.0",
|
||||||
"enquire.js": "^2.1.6",
|
"enquire.js": "^2.1.6",
|
||||||
|
"fuse.js": "^6.4.6",
|
||||||
"highlight.js": "^11.6.0",
|
"highlight.js": "^11.6.0",
|
||||||
|
"hotkeys-js": "^3.10.0",
|
||||||
|
"js-pinyin": "^0.1.9",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"screenfull": "^6.0.2",
|
"screenfull": "^6.0.2",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { mapState, mapMutations } from 'vuex'
|
||||||
|
|
||||||
|
import hotkeys from 'hotkeys-js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
// 绑定搜索功能快捷键 [ 打开 ]
|
||||||
|
hotkeys(this.searchHotkey.open, (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
this.searchPanelOpen()
|
||||||
|
})
|
||||||
|
// 绑定搜索功能快捷键 [ 关闭 ]
|
||||||
|
hotkeys(this.searchHotkey.close, (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
this.searchPanelClose()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
hotkeys.unbind(this.searchHotkey.open)
|
||||||
|
hotkeys.unbind(this.searchHotkey.close)
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('search', {
|
||||||
|
searchActive: (state) => state.active,
|
||||||
|
searchHotkey: (state) => state.hotkey
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations({
|
||||||
|
searchToggle: 'search/toggle',
|
||||||
|
searchSet: 'search/set'
|
||||||
|
}),
|
||||||
|
/**
|
||||||
|
* 接收点击搜索按钮
|
||||||
|
*/
|
||||||
|
handleSearchClick() {
|
||||||
|
this.searchToggle()
|
||||||
|
if (this.searchActive) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.$refs.panelSearch) {
|
||||||
|
this.$refs.panelSearch.focus()
|
||||||
|
}
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
searchPanelOpen() {
|
||||||
|
if (!this.searchActive) {
|
||||||
|
this.searchSet(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.$refs.panelSearch) {
|
||||||
|
this.$refs.panelSearch.focus()
|
||||||
|
}
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 关闭搜索面板
|
||||||
|
searchPanelClose() {
|
||||||
|
if (this.searchActive) {
|
||||||
|
this.searchSet(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,295 @@
|
||||||
|
<template>
|
||||||
|
<div @keyup.up="handleKeyUp" @keyup.down="handleKeyDown" @keyup.enter="handleKeyEnter" @click.self="handlePanelClick">
|
||||||
|
<a-input
|
||||||
|
ref="input"
|
||||||
|
v-model="searchText"
|
||||||
|
class="search-box"
|
||||||
|
style="width: 100%"
|
||||||
|
allowClear
|
||||||
|
placeholder="搜索页面(支持拼音检索)"
|
||||||
|
size="large"
|
||||||
|
@change="querySearch"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<search-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-card
|
||||||
|
:body-style="{ padding: '4px 0' }"
|
||||||
|
hoverable
|
||||||
|
@mouseenter="onCardIn"
|
||||||
|
@mouseleave="onCardOut"
|
||||||
|
@keypress.up="handleKeyUp"
|
||||||
|
@keypress.down="handleKeyDown"
|
||||||
|
style="margin: 10px 0"
|
||||||
|
>
|
||||||
|
<div ref="cardList" class="search-card beauty-scroll" style="">
|
||||||
|
<a-list size="small" :data-source="resultsList">
|
||||||
|
<template #renderItem="{ item, index }">
|
||||||
|
<a-list-item
|
||||||
|
@click="handleSelect(item.fullPath)"
|
||||||
|
@mouseover="onCardItemHover(index)"
|
||||||
|
:class="{ active: index == cardIndex }"
|
||||||
|
style="padding-right: 10px"
|
||||||
|
>
|
||||||
|
<template #actions>
|
||||||
|
<a>
|
||||||
|
<enter-outlined />
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<a-list-item-meta :description="item.fullName">
|
||||||
|
<template #title>
|
||||||
|
<a>{{ item.name }}</a>
|
||||||
|
</template>
|
||||||
|
<template #avatar>
|
||||||
|
<a-avatar style="color: black; background-color: transparent" :type="item.icon">
|
||||||
|
<template #icon>
|
||||||
|
<component :is="item.icon" />
|
||||||
|
</template>
|
||||||
|
</a-avatar>
|
||||||
|
</template>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
<div class="search-tips">
|
||||||
|
<span class="key">S</span>
|
||||||
|
<span class="tips">打开搜索面板</span>
|
||||||
|
|
||||||
|
<span class="key">
|
||||||
|
<arrow-up-outlined />
|
||||||
|
</span>
|
||||||
|
<span class="key">
|
||||||
|
<arrow-down-outlined />
|
||||||
|
</span>
|
||||||
|
<span class="tips">选择</span>
|
||||||
|
|
||||||
|
<span class="key">
|
||||||
|
<enter-outlined />
|
||||||
|
</span>
|
||||||
|
<span class="tips">确认</span>
|
||||||
|
|
||||||
|
<span class="key left">Esc</span>
|
||||||
|
<span class="tips">关闭</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Fuse from 'fuse.js'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchText: '',
|
||||||
|
cardIndex: 0,
|
||||||
|
results: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('search', ['pool']),
|
||||||
|
// 这份数据是展示在搜索面板下面的
|
||||||
|
resultsList() {
|
||||||
|
return this.results.length === 0 || this.searchText === '' ? this.pool : this.results
|
||||||
|
},
|
||||||
|
// 根据 pool 更新 fuse 实例
|
||||||
|
fuse() {
|
||||||
|
return new Fuse(this.pool, {
|
||||||
|
shouldSort: true, // 按分数对结果列表进行排序
|
||||||
|
threshold: 0.6, // 什么时候放弃
|
||||||
|
location: 0, // 大致位置
|
||||||
|
distance: 100, // 接近程度
|
||||||
|
minMatchCharLength: 1, // 匹配长度
|
||||||
|
keys: ['name', 'namePinyin', 'namePinyinFirst']
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
|
||||||
|
*/
|
||||||
|
querySearch(e) {
|
||||||
|
let queryString = e.target.value || ''
|
||||||
|
const results = queryString && this.fuse.search(queryString).map((e) => e.item)
|
||||||
|
this.searchText = queryString
|
||||||
|
this.results = results
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 聚焦输入框
|
||||||
|
*/
|
||||||
|
focus() {
|
||||||
|
this.searchText = ''
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.$refs.input) {
|
||||||
|
this.$refs.input.focus()
|
||||||
|
}
|
||||||
|
// 还原
|
||||||
|
this.searchText = ''
|
||||||
|
this.results = []
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
handleKeyEnter() {
|
||||||
|
let idx = this.cardIndex
|
||||||
|
if (this.resultsList[idx]) {
|
||||||
|
this.handleSelect(this.resultsList[idx].fullPath)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleKeyUp() {
|
||||||
|
this.handleKeyUpOrDown(true)
|
||||||
|
},
|
||||||
|
handleKeyDown() {
|
||||||
|
this.handleKeyUpOrDown(false)
|
||||||
|
},
|
||||||
|
handleKeyUpOrDown(up) {
|
||||||
|
let len = this.resultsList.length - 1
|
||||||
|
let idx = this.cardIndex
|
||||||
|
if (up) {
|
||||||
|
// 上
|
||||||
|
if (idx > 0) {
|
||||||
|
idx--
|
||||||
|
} else {
|
||||||
|
idx = len
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 下
|
||||||
|
if (idx < len) {
|
||||||
|
idx++
|
||||||
|
} else {
|
||||||
|
idx = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.cardIndex = idx
|
||||||
|
if (this.$refs.cardList.getElementsByClassName('ant-list-item')[idx]) {
|
||||||
|
this.$refs.cardList.scrollTop = this.$refs.cardList.getElementsByClassName('ant-list-item')[idx].offsetTop
|
||||||
|
} else {
|
||||||
|
this.$refs.cardList.scrollTop = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCardIn() {
|
||||||
|
this.$refs.input.activated = false
|
||||||
|
this.$refs.input.blur()
|
||||||
|
},
|
||||||
|
onCardOut() {
|
||||||
|
this.cardIndex = -1
|
||||||
|
},
|
||||||
|
onCardItemHover(index) {
|
||||||
|
this.cardIndex = index
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 接收用户在下拉菜单中选中事件
|
||||||
|
*/
|
||||||
|
handleSelect(path) {
|
||||||
|
// 如果用户选择的就是当前页面 就直接关闭搜索面板
|
||||||
|
if (path === this.$route.path) {
|
||||||
|
this.handleEsc()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$router.push({ path })
|
||||||
|
this.handleEsc()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @augments 关闭输入框的下拉菜单
|
||||||
|
*/
|
||||||
|
closeSuggestion() {
|
||||||
|
if (this.$refs.input.activated) {
|
||||||
|
this.results = []
|
||||||
|
this.$refs.input.activated = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @augments 接收用户点击空白区域的关闭
|
||||||
|
*/
|
||||||
|
handlePanelClick(e) {
|
||||||
|
if ('INPUT' != e.target.tagName) {
|
||||||
|
this.handleEsc()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @augments 接收用户触发的关闭
|
||||||
|
*/
|
||||||
|
async handleEsc() {
|
||||||
|
this.closeSuggestion()
|
||||||
|
await this.$nextTick()
|
||||||
|
this.$emit('close')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/ .ant-input {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-input:not(:first-child) {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-input-prefix {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beauty-scroll {
|
||||||
|
scrollbar-color: var(--primary-color) var(--primary-2);
|
||||||
|
scrollbar-width: thin;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
position: relative;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 3px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--primary-color);
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--primary-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-card {
|
||||||
|
height: 220px;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-list-item.active {
|
||||||
|
background-color: var(--primary-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-tips {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
padding-top: 6px;
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
//display: flex;
|
||||||
|
//flex-direction: row;
|
||||||
|
//align-items: center;
|
||||||
|
//justify-content: center;
|
||||||
|
width: 30px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
margin: 0px 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px #1e235a66;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
<template>
|
||||||
|
<div class="d2-panel-search-item" :class="hoverMode ? 'can-hover' : ''" flex>
|
||||||
|
<div class="d2-panel-search-item__icon" flex-box="0">
|
||||||
|
<div class="d2-panel-search-item__icon-box" flex="main:center cross:center">
|
||||||
|
<a-icon v-if="item.icon" :type="item.icon" />
|
||||||
|
<a-icon v-else type="menu" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d2-panel-search-item__info" flex-box="1" flex="dir:top">
|
||||||
|
<div class="d2-panel-search-item__info-title" flex-box="1" flex="cross:center">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="d2-panel-search-item__info-fullTitle" flex-box="0">
|
||||||
|
<span>{{ item.fullTitle }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="d2-panel-search-item__info-path" flex-box="0">
|
||||||
|
<span>{{ item.path }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
hoverMode: {
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.d2-panel-search-item {
|
||||||
|
height: 64px;
|
||||||
|
margin: 0px -20px;
|
||||||
|
&.can-hover {
|
||||||
|
margin: 0px;
|
||||||
|
&:hover {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
.d2-panel-search-item__icon {
|
||||||
|
.d2-panel-search-item__icon-box {
|
||||||
|
i {
|
||||||
|
font-size: 24px;
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d2-panel-search-item__info {
|
||||||
|
.d2-panel-search-item__info-title {
|
||||||
|
//color: $color-text-main;
|
||||||
|
}
|
||||||
|
.d2-panel-search-item__info-fullTitle {
|
||||||
|
//color: $color-text-normal;
|
||||||
|
}
|
||||||
|
.d2-panel-search-item__info-path {
|
||||||
|
//color: $color-text-normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d2-panel-search-item__icon {
|
||||||
|
width: 64px;
|
||||||
|
.d2-panel-search-item__icon-box {
|
||||||
|
height: 64px;
|
||||||
|
width: 64px;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
//color: $color-text-sub;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d2-panel-search-item__info {
|
||||||
|
margin-left: 10px;
|
||||||
|
.d2-panel-search-item__info-title {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
//color: $color-text-normal;
|
||||||
|
}
|
||||||
|
.d2-panel-search-item__info-fullTitle {
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 14px;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
.d2-panel-search-item__info-path {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 14px;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="user-bar">
|
<div class="user-bar">
|
||||||
|
<div v-if="!ismobile" class="search panel-item hidden-sm-and-down" @click="handleSearchClick">
|
||||||
|
<search-outlined />
|
||||||
|
</div>
|
||||||
<div v-if="!ismobile" class="screen panel-item hidden-sm-and-down" @click="fullscreen">
|
<div v-if="!ismobile" class="screen panel-item hidden-sm-and-down" @click="fullscreen">
|
||||||
<fullscreen-outlined />
|
<fullscreen-outlined />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -49,6 +52,20 @@
|
||||||
<a-drawer v-model:visible="settingDialog" :closable="false" width="300">
|
<a-drawer v-model:visible="settingDialog" :closable="false" width="300">
|
||||||
<setting></setting>
|
<setting></setting>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
|
<!-- 搜索面板 -->
|
||||||
|
<a-modal
|
||||||
|
:visible="searchActive"
|
||||||
|
:closable="false"
|
||||||
|
:footer="null"
|
||||||
|
width="600px"
|
||||||
|
style="overflow: hidden"
|
||||||
|
destroyOnClose
|
||||||
|
dialogClass="searchModal"
|
||||||
|
:bodyStyle="{ maxHeight: '520px', overflow: 'auto', padding: '10px' }"
|
||||||
|
@cancel="searchPanelClose"
|
||||||
|
>
|
||||||
|
<panel-search ref="panelSearch" @close="searchPanelClose" />
|
||||||
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -61,11 +78,15 @@
|
||||||
import tool from '@/utils/tool'
|
import tool from '@/utils/tool'
|
||||||
import loginApi from '@/api/auth/loginApi'
|
import loginApi from '@/api/auth/loginApi'
|
||||||
import devUserMessage from './message.vue'
|
import devUserMessage from './message.vue'
|
||||||
|
import panelSearch from './panel-search/index.vue'
|
||||||
|
import mixinSearch from './mixins/search'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
setting,
|
setting,
|
||||||
devUserMessage
|
devUserMessage,
|
||||||
|
panelSearch
|
||||||
},
|
},
|
||||||
|
mixins: [mixinSearch],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
lang: [],
|
lang: [],
|
||||||
|
|
@ -171,12 +192,20 @@
|
||||||
if (screenfull.isEnabled) {
|
if (screenfull.isEnabled) {
|
||||||
screenfull.toggle(element)
|
screenfull.toggle(element)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
// 搜索
|
||||||
|
fullSearch() {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="less" scoped>
|
||||||
|
:deep(.ant-modal) {
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
:deep(.ant-modal-content) {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
.user-bar {
|
.user-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -76,6 +76,7 @@ const handleGetRouter = (to) => {
|
||||||
menuRouter.forEach((item) => {
|
menuRouter.forEach((item) => {
|
||||||
router.addRoute('layout', item)
|
router.addRoute('layout', item)
|
||||||
})
|
})
|
||||||
|
store.commit('search/init', menuRouter)
|
||||||
routes_404_r = router.addRoute(routes_404)
|
routes_404_r = router.addRoute(routes_404)
|
||||||
if (to && to.matched.length === 0) {
|
if (to && to.matched.length === 0) {
|
||||||
router.push(to.fullPath)
|
router.push(to.fullPath)
|
||||||
|
|
|
||||||
|
|
@ -14,12 +14,14 @@ import global from './modules/global'
|
||||||
import iframe from './modules/iframe'
|
import iframe from './modules/iframe'
|
||||||
import keepAlive from './modules/keepAlive'
|
import keepAlive from './modules/keepAlive'
|
||||||
import viewTags from './modules/viewTags'
|
import viewTags from './modules/viewTags'
|
||||||
|
import search from './modules/search'
|
||||||
// 自动import导入所有 vuex 模块
|
// 自动import导入所有 vuex 模块
|
||||||
export default createStore({
|
export default createStore({
|
||||||
modules: {
|
modules: {
|
||||||
global,
|
global,
|
||||||
iframe,
|
iframe,
|
||||||
keepAlive,
|
keepAlive,
|
||||||
viewTags
|
viewTags,
|
||||||
|
search
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
import '@/utils/objects'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state: {
|
||||||
|
// 搜索面板激活状态
|
||||||
|
active: false,
|
||||||
|
// 快捷键
|
||||||
|
hotkey: {
|
||||||
|
open: 's',
|
||||||
|
close: 'esc'
|
||||||
|
},
|
||||||
|
// 所有可以搜索的页面
|
||||||
|
pool: []
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
/**
|
||||||
|
* @description 切换激活状态
|
||||||
|
* @param {Object} state state
|
||||||
|
*/
|
||||||
|
toggle(state) {
|
||||||
|
state.active = !state.active
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 设置激活模式
|
||||||
|
* @param {Object} state state
|
||||||
|
* @param {Boolean} active active
|
||||||
|
*/
|
||||||
|
set(state, active) {
|
||||||
|
state.active = active
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 初始化
|
||||||
|
* @param {Object} state state
|
||||||
|
* @param {Array} menu menu
|
||||||
|
*/
|
||||||
|
init(state, menu) {
|
||||||
|
const pool = []
|
||||||
|
const getFullName = function (meta) {
|
||||||
|
if (meta.breadcrumb) {
|
||||||
|
let list = []
|
||||||
|
meta.breadcrumb.forEach((item) => {
|
||||||
|
list.push(item.meta.title)
|
||||||
|
})
|
||||||
|
return list.join(' / ')
|
||||||
|
}
|
||||||
|
return meta.title
|
||||||
|
}
|
||||||
|
const push = function (menu) {
|
||||||
|
menu.forEach((m) => {
|
||||||
|
if ('menu' == m.meta.type) {
|
||||||
|
if (m.children) {
|
||||||
|
push(m.children)
|
||||||
|
} else {
|
||||||
|
pool.push({
|
||||||
|
icon: m.meta.icon,
|
||||||
|
path: m.path,
|
||||||
|
fullPath: m.path,
|
||||||
|
name: m.meta.title,
|
||||||
|
fullName: getFullName(m.meta),
|
||||||
|
namePinyin: m.meta.title.toPinyin(),
|
||||||
|
namePinyinFirst: m.meta.title.toPinyin(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
push(menu)
|
||||||
|
state.pool = pool
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import pinyin from 'js-pinyin'
|
||||||
|
import store from '@/store/index'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中文转拼音
|
||||||
|
* @param first 仅首字母
|
||||||
|
* @returns {String}
|
||||||
|
*/
|
||||||
|
Object.defineProperty(String.prototype, 'toPinyin', {
|
||||||
|
writable: false,
|
||||||
|
enumerable: false,
|
||||||
|
configurable: true,
|
||||||
|
value: function (first) {
|
||||||
|
let str = this
|
||||||
|
if (first) {
|
||||||
|
return pinyin.getCamelChars(str).replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, '')
|
||||||
|
}
|
||||||
|
return pinyin.getFullChars(str).replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, '')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 字符检索
|
||||||
|
* @param input 检索值
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
Object.defineProperty(String.prototype, 'filter', {
|
||||||
|
writable: false,
|
||||||
|
enumerable: false,
|
||||||
|
configurable: true,
|
||||||
|
value: function (input) {
|
||||||
|
let str = this
|
||||||
|
let en = str.toLowerCase().includes(input.toLowerCase())
|
||||||
|
let zhFull = str.toPinyin().toLowerCase().includes(input.toLowerCase())
|
||||||
|
let zhFirst = str.toPinyin(true).toLowerCase().includes(input.toLowerCase())
|
||||||
|
return en || zhFull || zhFirst
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue